From 356f829dc4d3dd5d82087fef47bb6af5ed217fcf Mon Sep 17 00:00:00 2001
From: juliodialpad <julio.ortega@dialpad.com>
Date: Fri, 13 Sep 2024 13:36:07 -0600
Subject: [PATCH 1/6] add dt-combinator package

Signed-off-by: Julio Ortega <julio.ortega@dialpad.com>
---
 .markdownlintignore                           |    1 +
 .stylelintignore                              |    1 +
 lint-staged.config.cjs                        |    6 +-
 packages/combinator/.eslintignore             |    5 +
 packages/combinator/.eslintrc.js              |   55 +
 .../documentation/COMMIT_CONVENTION.md        |   85 +
 .../.github/documentation/CONTRIBUTING.md     |   97 +
 .../.github/documentation/FUTURE_ADDITIONS.md |   83 +
 .../.github/documentation/KNOWN_ISSUES.md     |   16 +
 .../.github/documentation/OVERVIEW.md         |  188 ++
 .../.github/documentation/RELEASING.md        |   31 +
 .../combinator/.github/documentation/USAGE.md |  217 ++
 .../documentation/internal/CODE_PANEL.md      |   65 +
 .../documentation/internal/CONTROLS.md        |  110 +
 .../documentation/internal/OPTION_BAR.md      |  101 +
 .../documentation/internal/RENDERER.md        |   20 +
 .../.github/documentation/internal/SYSTEM.md  |  225 +++
 .../.github/pull_request_template.md          |   11 +
 .../.github/workflows/deploy-preview.yml      |   57 +
 .../combinator/.github/workflows/deploy.yml   |   40 +
 .../combinator/.github/workflows/linter.yml   |   36 +
 .../.github/workflows/unit-tests.yml          |   37 +
 packages/combinator/.gitignore                |   28 +
 packages/combinator/LICENSE.md                |   21 +
 packages/combinator/README.md                 |   44 +
 packages/combinator/index.js                  |    3 +
 packages/combinator/package.json              |   55 +
 packages/combinator/public/index.html         |   12 +
 packages/combinator/release.sh                |    4 +
 packages/combinator/src/App.vue               |  150 ++
 packages/combinator/src/assets/dialtone.less  |    1 +
 .../combinator/src/assets/themes/base.less    |   21 +
 .../combinator/src/assets/themes/dark.less    |   26 +
 .../combinator/src/assets/themes/light.less   |   16 +
 .../src/assets/themes/scheme/base.less        |    5 +
 .../src/assets/themes/scheme/highlight.less   |    8 +
 .../assets/themes/scheme/highlight_light.less |    8 +
 .../themes/scheme/highlight_variables.less    |    5 +
 .../src/assets/themes/scheme/mono.less        |    7 +
 .../combinator/src/assets/transitions.less    |   17 +
 packages/combinator/src/base.test.js          |   12 +
 .../components/code_editor/code_editor.vue    |  174 ++
 .../code_editor/code_editor_closing_tag.vue   |   26 +
 .../code_editor/code_editor_element.vue       |   44 +
 .../code_editor/code_editor_indent.vue        |   38 +
 .../code_editor/code_editor_input.vue         |   31 +
 .../code_editor/code_editor_opening_tag.vue   |   30 +
 .../code_editor/code_editor_slot.vue          |   74 +
 .../code_editor/code_editor_tag.vue           |   24 +
 .../code_editor_tag_attributes.vue            |  141 ++
 .../src/components/code_panel/code_panel.vue  |  127 ++
 .../src/components/combinator.test.js         |   36 +
 .../combinator/src/components/combinator.vue  |  395 ++++
 .../components/controls/control_array.test.js |   63 +
 .../src/components/controls/control_array.vue |   62 +
 .../components/controls/control_base.test.js  |   18 +
 .../src/components/controls/control_base.vue  |   36 +
 .../controls/control_boolean.test.js          |   56 +
 .../components/controls/control_boolean.vue   |   51 +
 .../controls/control_dynamic.test.js          |   93 +
 .../components/controls/control_dynamic.vue   |  135 ++
 .../components/controls/control_event.test.js |   18 +
 .../src/components/controls/control_event.vue |   14 +
 .../controls/control_iterable.test.js         |   23 +
 .../components/controls/control_iterable.vue  |  136 ++
 .../controls/control_nullish.test.js          |   58 +
 .../components/controls/control_nullish.vue   |   58 +
 .../controls/control_number.test.js           |   56 +
 .../components/controls/control_number.vue    |   65 +
 .../controls/control_object.test.js           |   81 +
 .../components/controls/control_object.vue    |  124 ++
 .../controls/control_selection.test.js        |   65 +
 .../components/controls/control_selection.vue |   57 +
 .../components/controls/control_slot.test.js  |   56 +
 .../src/components/controls/control_slot.vue  |   46 +
 .../controls/control_string.test.js           |   60 +
 .../components/controls/control_string.vue    |   61 +
 .../controls/control_suggestion.vue           |  120 ++
 .../event_console/event_console.test.js       |   18 +
 .../event_console/event_console.vue           |   78 +
 .../event_console/event_console_array.vue     |   41 +
 .../event_console/event_console_element.vue   |   39 +
 .../event_console/event_console_function.vue  |   12 +
 .../event_console/event_console_lazy_load.vue |   60 +
 .../event_console/event_console_object.vue    |   53 +
 .../event_console/event_console_pair.vue      |   70 +
 .../event_console/event_console_string.vue    |   24 +
 .../event_console/event_console_value.vue     |   34 +
 .../src/components/header/header.vue          |   84 +
 .../src/components/option_bar/option_bar.vue  |  170 ++
 .../option_bar/option_bar_control.test.js     |   47 +
 .../option_bar/option_bar_control.vue         |  187 ++
 .../option_bar_control_selector.vue           |  130 ++
 .../option_bar_member_group.test.js           |   59 +
 .../option_bar/option_bar_member_group.vue    |  222 +++
 .../src/components/renderer/renderer.vue      |  151 ++
 .../renderer/renderer_button_bar.vue          |   43 +
 .../src/components/renderer/renderer_menu.vue |  111 ++
 .../components/renderer/renderer_target.vue   |  120 ++
 .../settings_menu/settings_menu.vue           |  134 ++
 .../src/components/tools/button_bar.vue       |   43 +
 .../combinator/src/components/tools/node.vue  |   23 +
 .../src/components/tools/overlay.vue          |   16 +
 .../src/components/tools/section.vue          |   62 +
 .../src/components/tools/tab_panel.vue        |   83 +
 packages/combinator/src/lib/constants.js      |   18 +
 packages/combinator/src/lib/control.js        |  132 ++
 packages/combinator/src/lib/convert.js        |   85 +
 packages/combinator/src/lib/info.js           |  175 ++
 packages/combinator/src/lib/info_extend.js    |   73 +
 packages/combinator/src/lib/ordered_object.js |   80 +
 packages/combinator/src/lib/parse.js          |   21 +
 .../combinator/src/lib/test/utils_test.js     |   15 +
 packages/combinator/src/lib/utils.js          |  117 ++
 packages/combinator/src/lib/utils_vue.js      |   86 +
 packages/combinator/src/main.js               |    4 +
 packages/combinator/src/settings.json         |   15 +
 .../combinator/src/supported_components.json  |   21 +
 packages/combinator/src/variants/variants.js  |   29 +
 .../combinator/src/variants/variants_badge.js |    9 +
 .../src/variants/variants_breadcrumbs.js      |   15 +
 .../src/variants/variants_button.js           |  113 ++
 .../src/variants/variants_checkbox.js         |    9 +
 .../combinator/src/variants/variants_chip.js  |    9 +
 .../combinator/src/variants/variants_input.js |   14 +
 .../combinator/src/variants/variants_link.js  |   14 +
 .../src/variants/variants_notice.js           |   19 +
 .../combinator/src/variants/variants_radio.js |    9 +
 .../src/variants/variants_select_menu.js      |   21 +
 .../combinator/src/variants/variants_toast.js |   22 +
 .../src/variants/variants_toggle.js           |    9 +
 packages/combinator/vue.config.js             |   18 +
 pnpm-lock.yaml                                | 1771 +++++++++++++++--
 133 files changed, 9566 insertions(+), 153 deletions(-)
 create mode 100644 packages/combinator/.eslintignore
 create mode 100644 packages/combinator/.eslintrc.js
 create mode 100644 packages/combinator/.github/documentation/COMMIT_CONVENTION.md
 create mode 100644 packages/combinator/.github/documentation/CONTRIBUTING.md
 create mode 100644 packages/combinator/.github/documentation/FUTURE_ADDITIONS.md
 create mode 100644 packages/combinator/.github/documentation/KNOWN_ISSUES.md
 create mode 100644 packages/combinator/.github/documentation/OVERVIEW.md
 create mode 100644 packages/combinator/.github/documentation/RELEASING.md
 create mode 100644 packages/combinator/.github/documentation/USAGE.md
 create mode 100644 packages/combinator/.github/documentation/internal/CODE_PANEL.md
 create mode 100644 packages/combinator/.github/documentation/internal/CONTROLS.md
 create mode 100644 packages/combinator/.github/documentation/internal/OPTION_BAR.md
 create mode 100644 packages/combinator/.github/documentation/internal/RENDERER.md
 create mode 100644 packages/combinator/.github/documentation/internal/SYSTEM.md
 create mode 100644 packages/combinator/.github/pull_request_template.md
 create mode 100644 packages/combinator/.github/workflows/deploy-preview.yml
 create mode 100644 packages/combinator/.github/workflows/deploy.yml
 create mode 100644 packages/combinator/.github/workflows/linter.yml
 create mode 100644 packages/combinator/.github/workflows/unit-tests.yml
 create mode 100644 packages/combinator/.gitignore
 create mode 100644 packages/combinator/LICENSE.md
 create mode 100644 packages/combinator/README.md
 create mode 100644 packages/combinator/index.js
 create mode 100644 packages/combinator/package.json
 create mode 100644 packages/combinator/public/index.html
 create mode 100755 packages/combinator/release.sh
 create mode 100644 packages/combinator/src/App.vue
 create mode 100644 packages/combinator/src/assets/dialtone.less
 create mode 100644 packages/combinator/src/assets/themes/base.less
 create mode 100644 packages/combinator/src/assets/themes/dark.less
 create mode 100644 packages/combinator/src/assets/themes/light.less
 create mode 100644 packages/combinator/src/assets/themes/scheme/base.less
 create mode 100644 packages/combinator/src/assets/themes/scheme/highlight.less
 create mode 100644 packages/combinator/src/assets/themes/scheme/highlight_light.less
 create mode 100644 packages/combinator/src/assets/themes/scheme/highlight_variables.less
 create mode 100644 packages/combinator/src/assets/themes/scheme/mono.less
 create mode 100644 packages/combinator/src/assets/transitions.less
 create mode 100644 packages/combinator/src/base.test.js
 create mode 100644 packages/combinator/src/components/code_editor/code_editor.vue
 create mode 100644 packages/combinator/src/components/code_editor/code_editor_closing_tag.vue
 create mode 100644 packages/combinator/src/components/code_editor/code_editor_element.vue
 create mode 100644 packages/combinator/src/components/code_editor/code_editor_indent.vue
 create mode 100644 packages/combinator/src/components/code_editor/code_editor_input.vue
 create mode 100644 packages/combinator/src/components/code_editor/code_editor_opening_tag.vue
 create mode 100644 packages/combinator/src/components/code_editor/code_editor_slot.vue
 create mode 100644 packages/combinator/src/components/code_editor/code_editor_tag.vue
 create mode 100644 packages/combinator/src/components/code_editor/code_editor_tag_attributes.vue
 create mode 100644 packages/combinator/src/components/code_panel/code_panel.vue
 create mode 100644 packages/combinator/src/components/combinator.test.js
 create mode 100644 packages/combinator/src/components/combinator.vue
 create mode 100644 packages/combinator/src/components/controls/control_array.test.js
 create mode 100644 packages/combinator/src/components/controls/control_array.vue
 create mode 100644 packages/combinator/src/components/controls/control_base.test.js
 create mode 100644 packages/combinator/src/components/controls/control_base.vue
 create mode 100644 packages/combinator/src/components/controls/control_boolean.test.js
 create mode 100644 packages/combinator/src/components/controls/control_boolean.vue
 create mode 100644 packages/combinator/src/components/controls/control_dynamic.test.js
 create mode 100644 packages/combinator/src/components/controls/control_dynamic.vue
 create mode 100644 packages/combinator/src/components/controls/control_event.test.js
 create mode 100644 packages/combinator/src/components/controls/control_event.vue
 create mode 100644 packages/combinator/src/components/controls/control_iterable.test.js
 create mode 100644 packages/combinator/src/components/controls/control_iterable.vue
 create mode 100644 packages/combinator/src/components/controls/control_nullish.test.js
 create mode 100644 packages/combinator/src/components/controls/control_nullish.vue
 create mode 100644 packages/combinator/src/components/controls/control_number.test.js
 create mode 100644 packages/combinator/src/components/controls/control_number.vue
 create mode 100644 packages/combinator/src/components/controls/control_object.test.js
 create mode 100644 packages/combinator/src/components/controls/control_object.vue
 create mode 100644 packages/combinator/src/components/controls/control_selection.test.js
 create mode 100644 packages/combinator/src/components/controls/control_selection.vue
 create mode 100644 packages/combinator/src/components/controls/control_slot.test.js
 create mode 100644 packages/combinator/src/components/controls/control_slot.vue
 create mode 100644 packages/combinator/src/components/controls/control_string.test.js
 create mode 100644 packages/combinator/src/components/controls/control_string.vue
 create mode 100644 packages/combinator/src/components/controls/control_suggestion.vue
 create mode 100644 packages/combinator/src/components/event_console/event_console.test.js
 create mode 100644 packages/combinator/src/components/event_console/event_console.vue
 create mode 100644 packages/combinator/src/components/event_console/event_console_array.vue
 create mode 100644 packages/combinator/src/components/event_console/event_console_element.vue
 create mode 100644 packages/combinator/src/components/event_console/event_console_function.vue
 create mode 100644 packages/combinator/src/components/event_console/event_console_lazy_load.vue
 create mode 100644 packages/combinator/src/components/event_console/event_console_object.vue
 create mode 100644 packages/combinator/src/components/event_console/event_console_pair.vue
 create mode 100644 packages/combinator/src/components/event_console/event_console_string.vue
 create mode 100644 packages/combinator/src/components/event_console/event_console_value.vue
 create mode 100644 packages/combinator/src/components/header/header.vue
 create mode 100644 packages/combinator/src/components/option_bar/option_bar.vue
 create mode 100644 packages/combinator/src/components/option_bar/option_bar_control.test.js
 create mode 100644 packages/combinator/src/components/option_bar/option_bar_control.vue
 create mode 100644 packages/combinator/src/components/option_bar/option_bar_control_selector.vue
 create mode 100644 packages/combinator/src/components/option_bar/option_bar_member_group.test.js
 create mode 100644 packages/combinator/src/components/option_bar/option_bar_member_group.vue
 create mode 100644 packages/combinator/src/components/renderer/renderer.vue
 create mode 100644 packages/combinator/src/components/renderer/renderer_button_bar.vue
 create mode 100644 packages/combinator/src/components/renderer/renderer_menu.vue
 create mode 100644 packages/combinator/src/components/renderer/renderer_target.vue
 create mode 100644 packages/combinator/src/components/settings_menu/settings_menu.vue
 create mode 100644 packages/combinator/src/components/tools/button_bar.vue
 create mode 100644 packages/combinator/src/components/tools/node.vue
 create mode 100644 packages/combinator/src/components/tools/overlay.vue
 create mode 100644 packages/combinator/src/components/tools/section.vue
 create mode 100644 packages/combinator/src/components/tools/tab_panel.vue
 create mode 100644 packages/combinator/src/lib/constants.js
 create mode 100644 packages/combinator/src/lib/control.js
 create mode 100644 packages/combinator/src/lib/convert.js
 create mode 100644 packages/combinator/src/lib/info.js
 create mode 100644 packages/combinator/src/lib/info_extend.js
 create mode 100644 packages/combinator/src/lib/ordered_object.js
 create mode 100644 packages/combinator/src/lib/parse.js
 create mode 100644 packages/combinator/src/lib/test/utils_test.js
 create mode 100644 packages/combinator/src/lib/utils.js
 create mode 100644 packages/combinator/src/lib/utils_vue.js
 create mode 100644 packages/combinator/src/main.js
 create mode 100644 packages/combinator/src/settings.json
 create mode 100644 packages/combinator/src/supported_components.json
 create mode 100644 packages/combinator/src/variants/variants.js
 create mode 100644 packages/combinator/src/variants/variants_badge.js
 create mode 100644 packages/combinator/src/variants/variants_breadcrumbs.js
 create mode 100644 packages/combinator/src/variants/variants_button.js
 create mode 100644 packages/combinator/src/variants/variants_checkbox.js
 create mode 100644 packages/combinator/src/variants/variants_chip.js
 create mode 100644 packages/combinator/src/variants/variants_input.js
 create mode 100644 packages/combinator/src/variants/variants_link.js
 create mode 100644 packages/combinator/src/variants/variants_notice.js
 create mode 100644 packages/combinator/src/variants/variants_radio.js
 create mode 100644 packages/combinator/src/variants/variants_select_menu.js
 create mode 100644 packages/combinator/src/variants/variants_toast.js
 create mode 100644 packages/combinator/src/variants/variants_toggle.js
 create mode 100644 packages/combinator/vue.config.js

diff --git a/.markdownlintignore b/.markdownlintignore
index cab567185e..fa4e786ec4 100644
--- a/.markdownlintignore
+++ b/.markdownlintignore
@@ -1,3 +1,4 @@
 CHANGELOG.md
 node_modules
 dist
+packages/combinator
\ No newline at end of file
diff --git a/.stylelintignore b/.stylelintignore
index b94cd2c9ca..61f4d380fe 100644
--- a/.stylelintignore
+++ b/.stylelintignore
@@ -1,2 +1,3 @@
 packages/dialtone-css/lib/build/less/utilities
 packages/dialtone-css/lib/build/less/dialtone-reset.less
+packages/combinator
diff --git a/lint-staged.config.cjs b/lint-staged.config.cjs
index 11755a5a22..6ded8d1c4b 100644
--- a/lint-staged.config.cjs
+++ b/lint-staged.config.cjs
@@ -3,9 +3,9 @@ module.exports = {
     'pnpm exec eslint --fix',
   ],
   '*.less': [
-    'pnpm exec stylelint --fix'
+    'pnpm exec stylelint --fix --allow-empty-input',
   ],
   '*.{md, mdx}': [
-    'pnpm exec markdownlint'
-  ]
+    'pnpm exec markdownlint',
+  ],
 };
diff --git a/packages/combinator/.eslintignore b/packages/combinator/.eslintignore
new file mode 100644
index 0000000000..60ba8fe74c
--- /dev/null
+++ b/packages/combinator/.eslintignore
@@ -0,0 +1,5 @@
+# build
+dist
+
+# dependencies
+node_modules
diff --git a/packages/combinator/.eslintrc.js b/packages/combinator/.eslintrc.js
new file mode 100644
index 0000000000..8b2a5d97c6
--- /dev/null
+++ b/packages/combinator/.eslintrc.js
@@ -0,0 +1,55 @@
+module.exports = {
+  extends: [
+    'standard',
+    'semistandard',
+    'plugin:jsdoc/recommended',
+    'plugin:vue/vue3-recommended',
+    'plugin:vuejs-accessibility/recommended',
+  ],
+  env: {
+    browser: true,
+    node: true,
+    amd: true,
+  },
+  rules: {
+    'max-len': ['error', {
+      code: 120,
+      tabWidth: 2,
+    }],
+    quotes: ['error', 'single', { allowTemplateLiterals: true }],
+    'comma-dangle': ['error', 'always-multiline'],
+    'import/no-named-default': 0,
+    'vue/comma-dangle': ['error', 'always-multiline'],
+    'vue/comma-spacing': ['error', { before: false, after: true }],
+    'vue/comma-style': ['error', 'last'],
+    'vue/no-v-for-template-key': 0,
+    'vue/no-v-html': 0,
+    'vue/no-v-model-argument': 0,
+    'jsdoc/require-jsdoc': 0,
+    'jsdoc/no-undefined-types': 0,
+    'jsdoc/require-hyphen-before-param-description': 1,
+  },
+  overrides: [
+    {
+      files: ['**/*.test.js', 'src/lib/test/*.js'],
+      plugins: [
+        'mocha',
+      ],
+      extends: [
+        'plugin:mocha/recommended',
+      ],
+      env: {
+        browser: true,
+        node: true,
+        mocha: true,
+      },
+      rules: {
+        'max-lines': 'off',
+        'mocha/no-setup-in-describe': 'off',
+        'mocha/no-exclusive-tests': 'error',
+        'mocha/no-hooks-for-single-case': 'off',
+        'mocha/no-exports': 0,
+      },
+    },
+  ],
+};
diff --git a/packages/combinator/.github/documentation/COMMIT_CONVENTION.md b/packages/combinator/.github/documentation/COMMIT_CONVENTION.md
new file mode 100644
index 0000000000..d3a1267dd0
--- /dev/null
+++ b/packages/combinator/.github/documentation/COMMIT_CONVENTION.md
@@ -0,0 +1,85 @@
+## Git Commit Message Convention
+
+Dialtone Combinator uses
+[Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/)
+for the commit messages in the release branches: `staging`.
+
+When opening a PR, ensure the PR's title also complies with the Conventional Commits specification.
+This way, if your PR is merged using squash strategy, the PR's title will be used as the commit message
+except when your PR contains a single commit, in this case Github will use this commit for the commit message when your
+PR is merged, so in this case to meet the convention on the single commit of your PR is required.
+
+Consult
+[the rules](https://github.com/conventional-changelog/commitlint/tree/master/%40commitlint/config-conventional#rules)
+that are considered problems in the commit message.
+
+Each commit message consists of a **header**, a **body**, and a **footer**.
+
+```txt
+<header>
+<BLANK LINE>
+<body - optional>
+<BLANK LINE>
+<footer - optional>
+```
+
+The `header` is mandatory and has a **type**, **scope** (optional) and **subject**:
+
+```txt
+<type>(<scope - optional>): <subject>
+```
+
+### Type:
+
+Must be one of the following:
+
+* **build**: changes that affect the build system.
+* **chore**: general changes that don't fit in other types (code formatting, version changes).
+* **ci**: changes to the CI configuration, files and scripts.
+* **docs**: documentation changes.
+* **feat**: a new feature (corresponding with `MINOR` in SemVer).
+* **fix**: a bug fix (corresponding with `PATCH` in SemVer).
+* **perf**: performance improvements.
+* **refactor**: changes that neither fix a bug nor add a feature.
+* **revert**: changes that revert a commit.
+* **style**: not relevant changes (whitespace, code formatting, semicolons, etc).
+* **test**: changes that add or modify tests.
+
+### Scope:
+
+The optional scope allows to specify the place of the change.
+For instance, if the commit affects a specific component, use the component's name as scope:
+
+```txt
+feat(option-bar): add collapsible sections
+```
+
+### Subject:
+
+The subject contains a short description of the change:
+
+* use the imperative, present tense: "change" not "changed" nor "changes"
+* don't capitalize first letter
+* no dot (.) at the end of the sentence
+
+### Examples
+
+#### Commit message with only header
+
+```txt
+feat: add themes
+```
+
+#### Commit message with scope
+
+```txt
+feat(code-editor): add self-closing tag
+```
+
+#### Commit message with BREAKING CHANGE footer
+
+```txt
+feat: remove FEATURE
+
+BREAKING CHANGE: remove FEATURE used by PROJECTS
+```
diff --git a/packages/combinator/.github/documentation/CONTRIBUTING.md b/packages/combinator/.github/documentation/CONTRIBUTING.md
new file mode 100644
index 0000000000..0851f7bb60
--- /dev/null
+++ b/packages/combinator/.github/documentation/CONTRIBUTING.md
@@ -0,0 +1,97 @@
+# Contributing
+
+Before contributing to Dialtone Combinator, please check the [Jira backlog](https://switchcomm.atlassian.net/jira/software/projects/DT/boards/187/backlog) to see if there is already an issue for it and if not, add it.
+
+## Overview
+
+### What Is a Contribution?
+
+A contribution is any proposal, design, code, or documentation completed by someone not on the core Dialtone team, and released through Dialtone Combinator for other people to use. It can be created by anyone who'd like to help make Dialtone Combinator better.
+
+Types of contributions:
+
+- **Fix:** Fixes a technical or documentation defect.
+- **Enhancement:** Extends an existing component without changing the underlying architecture or behavior.
+- **New feature:** Adds something new, like a component.
+
+### Roles
+
+- **Contributor:** Has the ability to create PRs and merge their change into staging after at least one approving review.
+- **Maintainer:** A trusted contributor with the ability to release Dialtone.
+- **Admin:** Has the ability to change any configuration on the Dialtone repository and release Dialtone. Usually for members of the Dialtone team.
+
+## Making a Pull Request
+
+### Before Submitting
+
+Before submitting a pull request, make sure to communicate what you wish to change to the Dialtone team. The easiest way to do this is via the [#dialtone](https://dialpad.slack.com/messages/dialtone/) Slack channel. It's possible your change is already being worked on, has already been fixed, or maybe we just need to discuss the best solution to the problem. This prevents you from having to re-write your entire change, or even having to scrap it entirely.
+
+Any new components or updates to existing components require the following:
+
+- Unit tests covering the entire change.
+- Unit tests are passing locally.
+  - `npm run test`
+- Linters are passing locally.
+  - `npm run lint`
+- Library builds locally.
+  - `npm run build`
+- Preview builds locally.
+  - `npm run build:preview`
+
+### How to Submit
+
+After you have discussed your change with the Dialtone team, follow these steps to submit it:
+
+1. See [README.md](/README.md) for instructions on how to initially clone and run the project.
+2. First make sure you are on the `staging` branch with `git checkout staging`,
+   and that it is up to date with `git pull`.
+3. Create a personal branch to make your change off of `staging` with `git checkout -b my-change-branch`.
+   We use kebab-case for branch names.
+4. Make and commit your changes. Note our [commit message conventions](COMMIT_CONVENTION.md).
+5. Push your branch to remote. `git push -u origin my-change-branch`.
+8. Create a pull request into the `staging` branch, reviewers will be automatically added and notified of your PR.
+
+Once your change is in `staging` it will deploy and go live immediately.
+
+## Coding Guidelines
+
+### Accessibility in Mind
+
+Keep accessibility in mind for every new feature, improvement or bug fix you make.
+Always test your change with a screen reader and keyboard navigation if applicable.
+
+### Unit Testing
+*Unit testing is not implemented yet
+
+### Dialtone Usage
+We should attempt to use Dialtone utility classes and Dialtone vue components where applicable.
+
+### Breaking Changes
+
+Dialtone Combinator is a dependency of other projects so you must always be aware of making a breaking change.
+It is possible to make breaking changes, however if you do so you will need to update / verify all
+instances of usage of the component in reliant projects before updating.
+
+### Folder Structure
+See [OVERVIEW](OVERVIEW.md#folder-structure).
+
+## Commit Message Convention
+See [COMMIT_CONVENTION](COMMIT_CONVENTION.md).
+
+## Tooling
+
+### ESLint
+
+We use ESLint to promote best practices throughout our codebase.
+ESLint will check any of our javascript or vue code for styling or syntax errors.
+The configuration can be found in [.eslintrc.js](/.eslintrc.js).
+Any changes code changes you make will be automatically linted upon commit.
+You can manually run ESLint via `npm run lint`.
+
+### GitHub Actions
+
+[GitHub Actions](https://docs.github.com/en/actions) is what we use for our CI/CD solution.
+All GHA workflows are in the `.github/workflows` directory. Currently, we use GitHub Actions for the following:
+
+- Deploying a preview `.github/workflows/deploy.yml`, `.github/workflows/deploy-preview.yml`
+- Linting our files on pull request `.github/workflows/lint-pr.yml`.
diff --git a/packages/combinator/.github/documentation/FUTURE_ADDITIONS.md b/packages/combinator/.github/documentation/FUTURE_ADDITIONS.md
new file mode 100644
index 0000000000..78e5b4ccc0
--- /dev/null
+++ b/packages/combinator/.github/documentation/FUTURE_ADDITIONS.md
@@ -0,0 +1,83 @@
+# Future Additions
+
+## Add Supported Components
+
+A recent feature was added that allows Dialtone Vue components
+to be used in slots.
+
+[Pull Request](https://github.com/dialpad/dialtone-combinator/pull/14)
+
+This should allow some components to work as intended such as 'DtDropdown'.
+Any component that requires nesting of Dialtone Vue components now has the potential to
+be 'supported'.
+
+## Renderer Node Scoped Slots
+
+Add communication between the target component and the 'node' components in their slots
+when scoped slot data is present.
+
+There should be some sort of way to modify the renderer_target.vue `renderTarget()` 
+hyper-script function `h(...)` to provide the scoped slot data to slots containing
+dtc-node components.
+
+There is some 
+[existing documentation](https://vuejs.org/guide/extras/render-function.html#rendering-slots)
+about rendering hyper-script with scoped slots.
+
+## Icon Control
+
+A control could be added to allow quick selection of icons for the user.
+
+### Implementation
+
+Currently, all the library components and icons are passed to a single `library` prop. 
+Another prop `iconLibrary` could be implemented to allow icons to be passed in separately.
+
+The `library` prop and the `iconLibrary` prop could be merged and passed to the renderer.
+The `iconLibrary` prop could be passed to the icon control to allow.
+
+To know which members to allow the icon control, a custom `@icon` tag could be added
+to the dialtone-vue documentation. If a slot contains this `@icon` tag in its documentation
+it should allow either the default 'slot' control or 'icon' control to be selected, with
+the 'icon' control as the default.
+
+This can be implemented using `getSlotControls()` in option_bar.vue.
+
+## Class Control
+
+A control that allows quick selection and suggestions of dialtone utility classes.
+
+### Implementation
+
+Currently, the user can usually pass a string, array, or object to a 'class' prop
+(based on the prop type).
+
+A 'class' control could be implemented to replace these 3 controls for each class prop.
+
+A good idea would be to use the 'combobox with multiselect' Dialtone Vue recipe and
+somehow provide a list of all the dialtone utility classes as suggestions.
+
+There should also be functionality to allow the user to type in non dialtone classes
+which I think is already supported by the component.
+
+To know which members to allow the icon control, a custom `@class` tag could be added
+to the dialtone-vue documentation. If a prop contains this `@class` tag in its documentation
+it should disallow selection of the 'string' 'array' and 'object' controls and
+allow the 'class' control to be selected with 'class' being the default.
+
+This can be implemented using `getBindingControls()` in option_bar.vue, possibly even
+a new `getPropControls()` could be implemented to abstract the logic since
+this will only be possible for props.
+
+## Semantic Versioning (CI)
+
+Currently, releases have to be manually categorized. A semantic version
+implementation similar to Dialtone or Dialtone Vue would be good.
+
+## Sidebar Theming
+
+Currently, the theming only affects the code panel area and the renderer area.
+This was intended to be extended to the sidebar as well.
+
+This will allow the entire combinator to be dark mode or light mode, fitting into
+the consumer website and being able to match the theme.
diff --git a/packages/combinator/.github/documentation/KNOWN_ISSUES.md b/packages/combinator/.github/documentation/KNOWN_ISSUES.md
new file mode 100644
index 0000000000..0933c23f91
--- /dev/null
+++ b/packages/combinator/.github/documentation/KNOWN_ISSUES.md
@@ -0,0 +1,16 @@
+# Known Issues
+
+* Nested arrays and object controls will eventually run out of space.
+* Components that elevate to the highest level in dom can't be contained in the
+renderer such as 'DtBanner'. I think storybook uses an i-frame to resolve this issue.
+* Similarly, components that take focus and don't have close implemented will lock the
+entire site such as 'DtModal'.
+* 'DtSkeleton' animation doesn't seem to work
+* Code editor copy button doesn't work perfectly anymore with the new indentation system
+since flexbox and different containers are used.
+* A lot of components don't have any documentation generated for them such as 'DtRootLayout'
+preventing them from being supported even though they likely would be. They just need to be
+added to 'build_docs.js in dialtone-vue.
+* A lot of components are missing the `@values` tags such as 'DtLink' `kind` prop.
+  * Not just DtLink, a lot should be added
+* The `placeholder` attribute on 'DtInput' should be of type {string}, not {boolean}
\ No newline at end of file
diff --git a/packages/combinator/.github/documentation/OVERVIEW.md b/packages/combinator/.github/documentation/OVERVIEW.md
new file mode 100644
index 0000000000..da4ec0abae
--- /dev/null
+++ b/packages/combinator/.github/documentation/OVERVIEW.md
@@ -0,0 +1,188 @@
+# Overview
+
+The purpose of this document is to give an overview of the Dialtone Combinator project and
+help provide context for any contributors wanting to work on the project.
+
+If you are looking for documentation to implement Dialtone Combinator in an external project please see
+[USAGE](USAGE.md).
+
+## Documentation
+
+### Organizational
+
+Documentation for maintaining the project.
+
+[README](/README.md) \
+[CONTRIBUTING](CONTRIBUTING.md) \
+[RELEASING](RELEASING.md) \
+[COMMIT_CONVENTION](COMMIT_CONVENTION.md) \
+[FUTURE_ADDITIONS](FUTURE_ADDITIONS.md) \
+[KNOWN_ISSUES](KNOWN_ISSUES.md) \
+
+### Internal
+
+Documentation that describes the system architecture in-depth.
+
+[SYSTEM](internal/SYSTEM.md) \
+[RENDERER](internal/RENDERER.md) \
+[OPTION_BAR](internal/OPTION_BAR.md) \
+[CODE_PANEL](internal/CODE_PANEL.md)
+[CONTROLS](internal/CONTROLS.md)
+
+### External
+
+Documentation instructing how to implement into external projects.
+
+[USAGE](USAGE.md)
+
+## Terminology
+<pre style="line-height: 2.5em;">
+  <b>Root:</b> The root level component in 'combinator.vue'
+  <b>Preview:</b> The preview app in 'app.vue'
+  <b>Member:</b> An identifiable element of a component (Prop, attribute, slot, event)
+  <b>Binding:</b> A member that is bound to the component with `v-bind` (Prop, attribute)
+  <b>Attribute:</b> An HTML attribute
+  <b>Documentation:</b> The raw data generated by docgen
+  <b>Information / Info:</b> The central data object containing extended documentation data after parsing and processing
+  <b>Options:</b> The central data object containing key-value pairs for members and their values
+  <b>Control:</b> A control used for manipulating a value, usually a member value
+  <b>Target Component:</b> The component the combinator is using
+</pre>
+
+## Folder Structure
+<pre style="line-height: 2.5em;">
+  <b>/</b> Root project folder, primarily containing configuration files 
+
+  <b>/.github</b> The folder containing documentation and special GitHub files
+
+  <b>/dist</b> The local folder that contains the library and preview build output
+
+  <b>/public</b> The folder containing publicly accessible files for the preview app
+
+  <b>/src</b> The folder containing all internal project files
+
+  <b>⎣__/assets</b> The folder containing general assets and styling for vue
+
+  <b>⎣__/components</b> The root component folder that contains the root component ('Combinator.vue')
+  <b>⎣____/code_editor</b> The folder containing components for the code editor
+  <b>⎣____/code_panel</b> The folder containing components for the code panel
+  <b>⎣____/controls</b> The folder containing individual control components
+  <b>⎣____/event_console</b> The folder containing components for the event console
+  <b>⎣____/option_bar</b> The folder containing components for the code editor
+  <b>⎣____/renderer</b> The folder containing components for the renderer
+
+  <b>⎣__/lib</b> The main library folder for files containing utility functions in plain js
+
+  <b>⎣__/variants</b> The folder containing variants for specific components for the 'variantBank' export
+</pre>
+
+## Root System
+
+The Dialtone Combinator consists of three main components:
+* Renderer
+* Option bar
+* Code panel
+
+The Dialtone Combinator uses two main data objects:
+* Info
+* Options
+
+Data central to the system is stored in the root component and is communicated between child components.
+The system is designed with reactivity and extensibility in mind.
+
+The settings data object is also used to dictate global settings for the combinator.
+
+See [SYSTEM](internal/SYSTEM.md)
+
+## Supported Components
+
+Currently, not all Dialtone Vue components are working with the Combinator.
+
+A supported component is a component that is intended to be working with full functionality in the Combinator.
+
+Supported components are listed in [supported_components.json](/src/supported_components.json).
+These components are used by various tests to ensure they are working and future updates do not break them.
+
+When adding a new component to this list make sure it is working with all tests afterwards.
+
+## Docgen
+
+Documentation generated from the
+[dialtone-vue](https://github.com/dialpad/dialtone-vue)
+project is used to obtain extended information about the target components.
+This documentation is currently generated by the
+[vue-docgen-api](https://vue-styleguidist.github.io/docs/Docgen.html#api)
+which creates data based on code comments with the format indicated in the 'Vue Styleguidist'
+[Documenting components](https://vue-styleguidist.github.io/docs/Documenting.html#code-comments)
+section.
+
+### Usage
+
+Essential generated data that is used by the Combinator:
+* Code comments and tags
+    * Props
+    * Slots
+    * Emits
+* Default values
+* Valid values
+* Valid types
+* ...
+
+### Custom Tags
+
+Custom tags are required by the combinator to generate some additional documentation for the components.
+
+#### Attribute
+
+Used to indicate custom members that should be generated for HTML attributes.
+
+Format:
+```
+@property {TYPE} NAME attribute
+```
+
+Example:
+```js
+/**
+ * Base Vue component for Dialtone Buttons.
+ * @displayName DtButton
+ * @property {Boolean} disabled attribute
+ * @property {String} width attribute
+ */
+export default {
+  name: 'DtButton',
+  ...
+}
+```
+_Tags for disabled and width attributes on button component_
+
+Attributes should only ever be of type 'Boolean' or 'String' based on the
+[Mozilla reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes).
+
+#### Model
+
+Used to indicate the member is used in v-model, the reason is twofold:
+* Apply a custom badge to the member in the option bar
+* Docgen implicitly changes the name of the member if it is a prop to 'v-model'
+
+Format:
+```
+@model PROP
+```
+
+Example:
+```
+/**
+ * The value of the input
+ * @model value
+ */
+value: {
+  type: [String, Number, Boolean, Object],
+  default: null,
+},
+```
+
+The name of the prop is indicated in the model tag, so it can be changed back to its original name.
+This was being implemented at one point, however the
+[pull request](https://github.com/vue-styleguidist/vue-styleguidist/pull/1056)
+went stale and has closed.
diff --git a/packages/combinator/.github/documentation/RELEASING.md b/packages/combinator/.github/documentation/RELEASING.md
new file mode 100644
index 0000000000..52951f2bcb
--- /dev/null
+++ b/packages/combinator/.github/documentation/RELEASING.md
@@ -0,0 +1,31 @@
+# Releasing
+
+A release is required to update the npm package and provide an update for package users.
+
+## Access
+
+You must have the access token to write to the npm package.
+Make sure this is sourced before publishing the package.
+
+```
+source TOKEN_PATH
+```
+
+## Publish
+
+The package can be published by running the 'release.sh' script.
+This will increment the version and publish it to the npm registry.
+
+```
+npm run release
+```
+
+OR
+
+```
+./release.sh
+```
+
+It will prompt for the release version [major, minor, patch] and
+then build the package locally as well as publish it to the npm package 
+`@dialpad/dialtone-combinator`.
diff --git a/packages/combinator/.github/documentation/USAGE.md b/packages/combinator/.github/documentation/USAGE.md
new file mode 100644
index 0000000000..ae43f5d98c
--- /dev/null
+++ b/packages/combinator/.github/documentation/USAGE.md
@@ -0,0 +1,217 @@
+# Usage
+
+The purpose of this document is to instruct how to implement Dialtone Combinator in an external project.
+
+`$COMPONENT$` represents the component you want to combinate™ from Dialtone Vue.
+
+## Combinator
+_Required_
+
+### Import
+
+The combinator, a target component, and the Dialtone Vue component documentation
+must be imported to use the combinator.
+
+The documentation is provided from the consumer's Dialtone Vue so that it is up to
+date with the version they are using.
+
+```js
+import documentation from '.../node_modules/@dialpad/dialtone-vue/dist/component-documentation.json';
+import { $COMPONENT$ } from '@dialpad/dialtone-vue';
+import { DtcCombinator } from '@dialpad/dialtone-combinator';
+```
+
+*Ideally component-documentation should be included as an export in dialtone-vue, 
+but it isn't currently, so it has to be imported using the node_modules path.
+
+### Use
+
+```vue
+<dtc-combinator 
+  :component="$COMPONENT$"
+  :documentation="documentation"
+/>
+```
+
+## Component Library
+_Optional_, _Recommended_
+
+A library _should_ be provided to allow rendering of external components
+in slots, such as Dialtone Vue components or icons.
+
+Without the library, only html content and native Vue components
+can be compiled in the renderer.
+
+The `library` prop requires a single layered object with key-value pairs
+of export name and component definition, respectively.
+
+*Example using DtButton as target component, and Dialtone Vue components
+in the library (no icons).
+
+### Import
+
+```js
+import documentation from '.../node_modules/@dialpad/dialtone-vue/dist/component-documentation.json';
+import * as dialtoneVue from '@dialpad/dialtone-vue';
+import { ref } from 'vue';
+```
+
+### Use
+
+```vue
+<dtc-combinator 
+  :component="dialtoneVue.DtButton"
+  :documentation="documentation"
+  :library="dialtoneVueComponents"
+/>
+```
+
+```vue
+<script setup>
+  const dialtoneVueComponents = ref(
+    Object.fromEntries(
+      Object.entries(dialtoneVue).filter(([exportName]) => {
+        return exportName.startsWith('Dt');
+      }),
+    ),
+  );
+</script>
+```
+
+### Caveats
+
+Since dialtone icons are not exported in a bundle, there is some sorcery required
+to provide them as a library. For implementing this, check out 'App.vue' (using require) or
+the dialtone project 'client.js' vuepress config file (import from internal dialtone icon data).
+
+## Variants
+
+Variants can be used to customize the data for members of a component.
+
+This is passed to the combinator through the `variants` prop.
+
+The default variant will always exist, even if not declared. However, it can be
+overridden by declaring it and setting custom data on members.
+
+<details>
+<summary>Format</summary>
+<pre>
+<code>
+{
+    VARIANT_NAME: 
+    {
+        MEMBER_GROUP: 
+        {
+            MEMBER: 
+            {
+                MEMBER_FIELD: VALUE,
+                ...
+            },
+            ...
+        },
+        ...
+    },
+    ...
+}
+</code>
+</pre>
+</details>
+
+<details>
+<summary>Example</summary>
+<pre>
+<code>
+{
+    default: {
+        slots: {
+            default: {
+                initialValue: 'Place call',
+            },
+        },
+    },
+    primary: {
+        slots: {
+            default: {
+                initialValue: 'Primary',
+            },
+        },
+        props: {
+            importance: {
+                initialValue: 'primary',
+                lockControl: true,
+            },
+        },
+    },
+}
+</code>
+</pre>
+<i>The 'default' and 'primary' variants for 'DtButton'</i>
+</details>
+
+Any data provided will be set on the 'info' object for the member it is provided for.
+Most of the time this is overriding data generated from the Dialtone Vue documentation.
+
+There are some special fields that are intended to be used just by variants:
+* hideControl: Hides the control for the member in the sidebar
+* lockControl: Locks the control for the member in the sidebar
+
+A good place to look to see many of the fields that are used by a member is
+'option_bar_member_group.vue', this is where the member data is exposed to the
+underlying control.
+
+## Variant Bank
+_Optional_
+
+A storage of shared variants can be imported to use with the combinator.
+
+*Example using DtButton as target component
+
+### Import
+
+```js
+import documentation from '.../node_modules/@dialpad/dialtone-vue/dist/component-documentation.json';
+import { variantBank } from '@dialpad/dialtone-combinator';
+import { DtButton } from '@dialpad/dialtone-vue';
+import { ref } from 'vue';
+```
+
+### Use
+
+```vue
+<dtc-combinator 
+  :component="DtButton"
+  :documentation="documentation"
+  :variants="componentVariants"
+/>
+```
+
+```vue
+<script setup>
+  const componentVariants = ref(variantBank.DtButton);
+</script>
+```
+
+## Blueprint Mode
+
+Blueprint mode can be activated to remove the sidebar and settings and just show the
+renderer/code panel split view.
+
+```vue
+<dtc-combinator
+  ...
+  :blueprint="true"
+/>
+```
+
+## Styling
+
+Additional styling classes can be given to the header and root sections
+of the combinator.
+
+```vue
+<dtc-combinator
+  ...
+  header-class="d-py32"
+  root-class="d-px32"
+/>
+```
diff --git a/packages/combinator/.github/documentation/internal/CODE_PANEL.md b/packages/combinator/.github/documentation/internal/CODE_PANEL.md
new file mode 100644
index 0000000000..a419b26921
--- /dev/null
+++ b/packages/combinator/.github/documentation/internal/CODE_PANEL.md
@@ -0,0 +1,65 @@
+# Code Panel
+
+The code panel is responsible for providing technical information about the target component in its current state.
+It consists of the 'code editor' and 'event console' and also provides an overlay for external components
+such as 'settings'.
+
+## Code Editor
+
+The code editor displays the vue template code required to reproduce 
+the component in its current state in an external project.
+
+It provides functionality for directly editing slot content for the current component.
+
+### Element
+
+The code editor renders an 'element' component at the root level to represent the target component.
+This is the representation of the tag to use in a vue template.
+
+### Attributes
+
+The code editor renders an 'attributes' component inside the 'element' component's opening slot.
+This generates all the attribute fields to be included on the element tag.
+
+The members are filtered and determined how they will be displayed based on their value.
+Any member with a value matching its default value will be hidden, unless the 'verbose' prop is true.
+
+### Slots
+
+The code editor renders a 'slot' component inside the 'element' component's default slot for each
+slot that has content.
+
+The slot is represented by displaying the content wrapped by 'template' tags that match the slot name.
+The default slot is not wrapped by 'template' tags.
+
+Slots content is rendered in an editable field that will update **options** data for the slot.
+
+## Event Console
+
+The event console displays data about events captured from the target component. 
+It allows exploration of complex objects by storing them in a list and providing an interactive interface.
+Each triggered event will create a console entry represented by a 'pair' component.
+
+### Pair
+
+The pair component represents a key-value pair and allows recursive exploration of objects.
+A pair contains a name (key) and a value. Based on the data type of the value it will display a 
+component to represent a value.
+
+There are a variety of event console components for different value types:
+* String
+* Value (Boolean, Number, null...)
+* Array
+* Object
+* Function
+* Element (HTML Element)
+
+Other components such as objects and array can render more 'pair' components allowing for
+ exploration at unlimited depth.
+
+### Lazy Load
+
+The lazy load component provides generic functionality to not render content until the expand button is pressed.
+It is used by the 'object', 'array' and 'element' components for two reasons:
+* Prevent visual clutter
+* Improve performance by preventing over-rendering
diff --git a/packages/combinator/.github/documentation/internal/CONTROLS.md b/packages/combinator/.github/documentation/internal/CONTROLS.md
new file mode 100644
index 0000000000..8976295e2a
--- /dev/null
+++ b/packages/combinator/.github/documentation/internal/CONTROLS.md
@@ -0,0 +1,110 @@
+# Controls
+
+Controls are an interface for manipulating a single value. Their intended use is to provide
+interactivity to members in the option bar, however they are built to be modular with reuse in mind.
+
+They have no designation about the option bar or members and simply receive values
+
+## Control Map
+
+The control map provides a directory of controls that can be used by members and the necessary
+data required to use them. The control map can be found in [control.js](/src/lib/control.js) 
+along with the control utility functions.
+
+Each control map entry must contain a `component` entry that returns the control component
+
+Each control map entry must contain a `default(...)` function that provides a default value which is used by the
+option bar when switching control type. It can optionally use an args object to resolve this 
+as seen in the 'selection' control.
+
+## Extending
+
+The process of adding a new control can be done in two steps:
+1. Create the component in '/src/components/controls/..'
+2. Add an entry to the control map in '/src/lib/control.js'
+   * Does not need an entry if the control is 'internal' (only used by other controls)
+
+### Implement in Option Bar
+A new control may need some additional logic for it to be used in the option bar.
+
+See [OPTION_BAR](OPTION_BAR.md#extending-member-controls)
+
+## Kinds
+
+### Base
+
+Control that is used when no other controls are valid. 
+At this point it attempts to convert its value to a string and provide a 'string' control for input.
+
+It can be seen in use for 'func' member types where there is no current control implementation.
+
+### Null
+
+Control that is used to set some nullish values:
+* undefined
+* null
+
+Sending the raw value `undefined` results in the value prop using its default value (null). The special
+symbol `UNSET` is used to represent an intentional `undefined` value.
+
+The parent component has the responsibility to serialize the input value and deserialize the output value
+using the utility functions `serializeControlValue(...)` and `deserializeControlValue(...)` respectively.
+
+### Boolean / Number / String
+
+Controls that are used to set their respective data type value.
+Consists of an input that can be used to update the value.
+
+The number control can also be used to set the 'NaN' value.
+
+### Array / Object
+
+Controls that are used to provide functionality to manipulate complex objects.
+
+Uses the 'iterable' control to provide a list of values for arrays, and key-values pairs for objects.
+Each iterable item has a 'dynamic' control that can be used to set different data type values.
+
+### Slot
+
+Control that is used to set a string representing the slot content of a component.
+
+### Event
+
+Control that is used to display an event of a component.
+
+### Suggestion
+
+Control that is used to set a string value while providing a list of suggested valid values.
+A value can be typed or selected with the input. The list indicates the default value.
+
+### Selection
+
+Control that is used to select any value from a list of values. 
+
+### Iterable
+
+Control that is used to provide an interface to modify generic iterable values. 
+The important parts of the functionality are abstracted to the parent to allow 
+reuse of this control for any iterable value type.
+
+Contains an 'item' slot that will render the slot content for each item from the value array.
+This allows the parent to declare input and output functionality for each item.
+
+Example:
+```vue
+<template #item="{ item, update }">
+  <control
+    :value="item"
+    @update:value="e => update(e)"
+  />
+</template>
+```
+
+Since the value prop is a raw array, a custom `idMap` is used to keep the v-for keys in order.
+Any time an item is added or removed, it is mirrored in the `idMap`.
+
+### Dynamic
+
+Control that is used to set a value from a variety of data types.
+Contains a 'selection' control to select from a list of types or values.
+Selections that are types provide an additional control to set the value.
diff --git a/packages/combinator/.github/documentation/internal/OPTION_BAR.md b/packages/combinator/.github/documentation/internal/OPTION_BAR.md
new file mode 100644
index 0000000000..a2d4bcb1c7
--- /dev/null
+++ b/packages/combinator/.github/documentation/internal/OPTION_BAR.md
@@ -0,0 +1,101 @@
+# Option Bar
+
+The option bar is responsible for providing a user interface to interact and change the state of the target component.
+
+It consists of multiple 'section' components containing 'member group' components 
+that generate controls for each member.
+
+The primary task for the option bar is to handle input and output between the 'member group' components
+and reflect the state in the **options** object.
+
+### Control Map
+
+See [CONTROL_MAP](CONTROLS.md#control-map)
+
+### Extending Member Controls
+
+The 'member group' component provides the `controlSelector` prop to allow the 'option bar' component to define
+what controls are available for each member.
+
+It is important to abstract this functionality to the parent because for certain member groups we want to enforce
+a single control (Slots, events). However, for other member groups we want to allow multiple controls based on
+member data such a valid types (Props, attributes).
+
+The `controlSelector` prop is a function that provides a parameter for the current member, and expects an array
+with the first item as the initial control string, and the second item is an array of string values for all 
+the possible controls based on this member as a return value. The string values
+represent a key for a control in the 'control map'.
+
+Example:
+```vue
+<dtc-option-bar-member-group
+  :control-selector="getMemberControls"
+  ...
+/>
+```
+```js
+function getMemberControls (member) {
+    return [
+        'string',
+        [
+            'null',
+            'string',
+            member.specialControlType,
+        ]
+    ];
+}
+```
+_Example of a member group that will generate a control for 'null', 'string' and 
+a variable control for each member based on its `specialControlType` value. The initial
+control will be the 'string' control._
+
+## Member Group
+
+The member group receives a group of members and their respective values. It is responsible
+for rendering 'option bar control' components for each member. It also renders the 'option bar control selector' 
+for each member.
+
+### Member Map
+
+The member map is a reactive data object that wraps each member and can provide additional data that the 
+'option bar control' component needs without affecting the original member data object.
+
+It adds an additional `validControls` field that is created based on the `controlSelector` prop. Most importantly,
+it adds an additional `control` field to that is the determining value for what control is currently active
+for the member.
+
+The `control` field is passed as a prop to the 'option bar control' component and 
+updated when the `@update:control` event is emitted from the 'option bar control selector' component.
+
+### Member Values
+
+The `values` prop contains a collection of key-value pairs representing the state of the member.
+The member map uses the `getMemberKey(...)` function to match the members to their respective values.
+
+### Control Args
+
+Each member sends a lot of data to the 'option bar control' component through props. Each explicitly defined prop
+is used directly by the 'option bar control' except the `args` object prop.
+
+The args prop is an object that contains data to be directly attached to the underlying control using `v-bind`.
+
+## Control Selector
+
+The option bar control selector creates buttons above the control based on the `validControls` prop to allow 
+selection of a control from a variety of control selections for a single member.
+
+## Option Bar Control
+
+The option bar control wraps an underlying 'control' component to provide extended functionality
+and decouple the reliance on the option bar and members from individual 'control' components.
+
+### Control Component
+
+The option bar control receives a 'control' as a prop and finds the corresponding 'control' component 
+in the 'control map'. It renders the component with a dynamic component (`<component />`).
+
+### Extended Args
+
+The `args` prop is used to pass data to bind directly to the underlying control using `v-bind`. 
+However, some explicitly declared props on this component are required as well. 
+The `controlArgs` computed value introduces some additional values to pass to the control.
diff --git a/packages/combinator/.github/documentation/internal/RENDERER.md b/packages/combinator/.github/documentation/internal/RENDERER.md
new file mode 100644
index 0000000000..a3099b2d23
--- /dev/null
+++ b/packages/combinator/.github/documentation/internal/RENDERER.md
@@ -0,0 +1,20 @@
+# Renderer
+
+The renderer is responsible for displaying the target component in its current state.
+
+## Component
+
+The renderer receives the target component as a prop and renders it with a dynamic component (`<component />`). 
+
+## Bindings
+
+The binding members are attached to the dynamic component using `v-bind`.
+
+## Events
+
+The event members are attached to the dynamic component using `v-on`.
+
+## Slots
+
+The slots members are filtered to exclude empty slots, 
+they are then inserted in the dynamic component and rendered using a template (`<template />`).
\ No newline at end of file
diff --git a/packages/combinator/.github/documentation/internal/SYSTEM.md b/packages/combinator/.github/documentation/internal/SYSTEM.md
new file mode 100644
index 0000000000..540b6860d2
--- /dev/null
+++ b/packages/combinator/.github/documentation/internal/SYSTEM.md
@@ -0,0 +1,225 @@
+# System
+
+The core system is primarily driven by the info and options data objects.
+Together these provide the required functionality for all the components 
+and inner workings of the system through three main components:
+* Renderer
+* Option bar
+* Code panel
+
+## Info
+_Immutable_
+
+<details>
+<summary>Format</summary>
+<pre>
+<code>
+{
+    COMPONENT_FIELD: VALUE,
+    MEMBER_GROUP: 
+    [
+        MEMBER,
+        MEMBER,
+        ...
+    ],
+    ...
+}
+</code>
+</pre>
+</details>
+
+<details>
+<summary>Example</summary>
+<pre>
+<code>
+{
+    displayName: 'DtButton',
+    description: 'Base Vue component for Dialtone Buttons.',
+    attributes: 
+    [
+        {
+            name: 'disabled',
+            defaultValue: false,
+            initialValue: false,
+            defaultType: 'boolean',
+            types: 
+            [
+                'boolean',
+            ],
+        },
+        ...
+    ],
+    props: 
+    [
+        {
+            name: 'circle',
+            description: 'Whether the button is a circle or not.',
+            defaultValue: false,
+            initialValue: false,
+            defaultType: 'boolean',
+            types: 
+            [
+                'boolean',
+            ],
+            values: 
+            [
+                true, 
+                false,
+            ],
+        },
+        {
+            name: 'iconPosition',
+            description: 'The position of the icon slot within the button.',
+            defaultValue: 'left',
+            initialValue: 'left',
+            defaultType: 'string',
+            types: 
+            [
+                'string',
+            ],
+            values: 
+            [
+                'left', 
+                'right',
+                'top',
+                'bottom',
+            ],
+        },
+        {
+            name: 'labelClass',
+            description: 'Used to customize the label container',
+            defaultValue: '',
+            initialValue: '',
+            defaultType: 'string',
+            types: 
+            [
+                'string', 
+                'array', 
+                'object',
+            ],
+        },
+        ...
+    ],
+    slots:
+    [
+        {
+            name: 'default',
+            description: 'Content within button',
+        },
+        ...
+    ],
+    events:
+    [
+        {
+            name: 'click',
+            description: 'Native button click event',
+            types: 
+            [
+                'pointerevent', 
+                'keyboardevent',
+            ],
+        },
+        ...
+    ],
+}
+</code>
+</pre>
+<i>Info for `dt-button` component</i>
+</details>
+
+The **info** data object is a container for all extended component information for the target component.
+The raw Dialtone Vue documentation is processed based on the target component and put into a new **info** object.
+
+This object is considered immutable and should not be modified after it is initialized.
+
+The data object is declared in [combinator.vue](/src/components/combinator.vue). 
+The main functionality for preprocessing the data is included in [info.js](/src/lib/info.js).
+
+Essential documentation processing actions:
+* Rename props with the [model tag](../OVERVIEW.md#model) to original name
+* Generate custom members from the [attribute tag](../OVERVIEW.md#attribute)
+* Member 'type string' is parsed into an array of type names
+* Parse default values
+* ...
+
+It is best to put data in **info** when you want to use it in multiple places. For example `defaultType` is added
+to **info** for each member based on some validation logic using `defaultType` and `types`. This ensures a
+singular, predetermined value is provided to both the option bar and code editor.
+
+Additional data can be added to info in two ways:
+* Add custom comments or tags to the Dialtone Vue documentation
+* Extend programmatically in [info.js](/src/lib/info.js)
+
+The former method is always preferred if possible, 
+however sometimes it may make more sense to modify or extend 'info.js'.
+Sometimes it may be best to do both, if the docgen output is not in a preferable format.
+
+## Options
+_Reactive_
+
+<details>
+<summary>Format</summary>
+<pre>
+<code>
+{
+    MEMBER_GROUP: 
+    { 
+        MEMBER_KEY: VALUE,
+    },
+}
+</code>
+</pre>
+</details>
+
+<details>
+<summary>Example</summary>
+<pre>
+<code>
+{
+    attributes: 
+    { 
+        disabled: false,
+        width: '',
+    },
+    props:
+    {
+        active: false,
+        iconPosition: 'left',
+        labelClass: '',
+        ...
+    },
+    slots:
+    {
+        default: 'dt-button',
+        icon: undefined,
+    },
+}
+</code>
+</pre>
+<i>Options for `dt-button` component with default values</i>
+</details>
+
+The **options** data object is the main reactive object that allows interactivity with the target component. It is
+essentially a map of member key-value pairs that are used to read and write the state of the target component.
+
+**Options** can be updated by emitting an event with a function parameter that update the members in any way.
+
+Format:
+```js
+emit(EVENT, options => {
+    options[MEMBER_GROUP][MEMBER_KEY] = VALUE;
+});
+```
+
+Example:
+```js
+function onInput (e) {
+    emit('update:options', options => {
+        options.slots[props.name] = e.target.textContent;
+    });
+}
+```
+_Code editor update options slot value on input_
+
+After **info** is initialized, the  `initialValue` fields for each member 
+are used to set the initial values in **options**. 
diff --git a/packages/combinator/.github/pull_request_template.md b/packages/combinator/.github/pull_request_template.md
new file mode 100644
index 0000000000..7b6cb85940
--- /dev/null
+++ b/packages/combinator/.github/pull_request_template.md
@@ -0,0 +1,11 @@
+## Description
+Provide a description of what this pull request is adding, updating, extending, or removing.
+
+## Pull Request Checklist
+
+- [ ] Ask the contributors if a similar effort is already in process or has been solved.
+- [ ] Use `staging` as your pull request's base branch.
+- [ ] Ensure no private Dialpad links or info are in the code or pull request description.
+
+## Obligatory GIF (super important!)
+![](path/to/gif)
diff --git a/packages/combinator/.github/workflows/deploy-preview.yml b/packages/combinator/.github/workflows/deploy-preview.yml
new file mode 100644
index 0000000000..404583ebd0
--- /dev/null
+++ b/packages/combinator/.github/workflows/deploy-preview.yml
@@ -0,0 +1,57 @@
+name: Deploy Preview
+
+on: pull_request
+
+env:
+  NODE_MODULES_CACHE_VERSION: v1
+
+jobs:
+  deploy:
+    concurrency:
+      group: ${{ github.workflow }}-${{ github.ref }}
+      cancel-in-progress: true
+      
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v3
+      with:
+        ref: "refs/pull/${{ github.event.pull_request.number }}/merge"
+
+    - name: Setup Node.js environment
+      uses: actions/setup-node@v3.3.0
+      with:
+        node-version: '16.x'
+
+    - uses: actions/cache@v3
+      id: npm-cache
+      with:
+        path: |
+          **/node_modules/
+        key: ${{ format('{0}-cache-node-modules-{1}-{2}', runner.os, env.NODE_MODULES_CACHE_VERSION, hashFiles('**/package-lock.json')) }}
+
+    - name: Install dependencies
+      if: steps.npm-cache.outputs.cache-hit != 'true'
+      run: npm ci
+
+    - name: Build preview
+      run: npm run build:preview
+
+    - name: Deploy to GitHub Pages
+      uses: JamesIves/github-pages-deploy-action@v4.2.5
+      with:
+        branch: gh-pages
+        folder: dist/preview
+        target-folder: deploy-previews/pr-${{ github.event.pull_request.number }}
+
+    - name: Add message
+      uses: mshick/add-pr-comment@v1
+      env:
+        BUILD_URL: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      with:
+        message: |
+          ✔️ Deploy Preview ready!
+          😎 Browse the preview: https://dialpad.github.io/dialtone-combinator/deploy-previews/pr-${{ github.event.pull_request.number }}
+          🔨 If you experience an SSL issue then wait 2 minutes and try again.
+        allow-repeats: true
diff --git a/packages/combinator/.github/workflows/deploy.yml b/packages/combinator/.github/workflows/deploy.yml
new file mode 100644
index 0000000000..517db6b381
--- /dev/null
+++ b/packages/combinator/.github/workflows/deploy.yml
@@ -0,0 +1,40 @@
+name: Deploy
+
+on:
+  push:
+    branches:
+      - staging
+
+jobs:
+  deploy:
+    concurrency: ${{ github.workflow }}-${{ github.ref }}
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v3.3.0
+        with:
+          node-version: '16.x'
+
+      - name: Parse branch from ref
+        id: branch
+        run: echo ::set-output name=BRANCH::${GITHUB_REF/refs\/heads\//}
+
+      - name: Authenticate with private NPM package
+        run: echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_AUTH_TOKEN }}" > ~/.npmrc
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build preview
+        run: npm run build:preview
+
+      - name: Deploy to GitHub Pages
+        uses: JamesIves/github-pages-deploy-action@v4.2.5
+        with:
+          branch: gh-pages
+          folder: dist/preview
+          clean-exclude: |
+            deploy-previews
diff --git a/packages/combinator/.github/workflows/linter.yml b/packages/combinator/.github/workflows/linter.yml
new file mode 100644
index 0000000000..0d009264ff
--- /dev/null
+++ b/packages/combinator/.github/workflows/linter.yml
@@ -0,0 +1,36 @@
+name: Linter
+
+env:
+  NODE_MODULES_CACHE_VERSION: v1
+
+on:
+  pull_request:
+    types: ['opened', 'edited', 'reopened', 'synchronize']
+    branches:
+      - staging
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Use Node.js
+        uses: actions/setup-node@v3.3.0
+        with:
+          node-version: '16.x'
+
+      - uses: actions/cache@v3
+        id: npm-cache
+        with:
+          path: |
+            **/node_modules/
+          key: ${{ format('{0}-cache-node-modules-{1}-{2}', runner.os, env.NODE_MODULES_CACHE_VERSION, hashFiles('**/package-lock.json')) }}
+
+      - name: Install dependencies
+        if: steps.npm-cache.outputs.cache-hit != 'true'
+        run: npm ci
+
+      - name: Lint
+        run: npm run lint
\ No newline at end of file
diff --git a/packages/combinator/.github/workflows/unit-tests.yml b/packages/combinator/.github/workflows/unit-tests.yml
new file mode 100644
index 0000000000..8be9f9bdb9
--- /dev/null
+++ b/packages/combinator/.github/workflows/unit-tests.yml
@@ -0,0 +1,37 @@
+name: Unit Tests
+
+env:
+  NODE_MODULES_CACHE_VERSION: v1
+
+on:
+  pull_request:
+    branches: [ staging ]
+  push:
+    branches: [ staging ]
+
+jobs:
+  unit_tests:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out branch
+        uses: actions/checkout@v3
+
+      - name: Use Node.js
+        uses: actions/setup-node@v3.3.0
+        with:
+          node-version: '16'
+
+      - uses: actions/cache@v3
+        id: npm-cache
+        with:
+          path: |
+            **/node_modules/
+          key: ${{ format('{0}-cache-node-modules-{1}-{2}', runner.os, env.NODE_MODULES_CACHE_VERSION, hashFiles('**/package-lock.json')) }}
+
+      - name: Install dependencies
+        if: steps.npm-cache.outputs.cache-hit != 'true'
+        run: npm ci
+
+      - name: Run unit tests
+        run: npm run test
\ No newline at end of file
diff --git a/packages/combinator/.gitignore b/packages/combinator/.gitignore
new file mode 100644
index 0000000000..01c77172d4
--- /dev/null
+++ b/packages/combinator/.gitignore
@@ -0,0 +1,28 @@
+# Distribution
+*.tgz
+node_modules
+.npmrc
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# Editor
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/packages/combinator/LICENSE.md b/packages/combinator/LICENSE.md
new file mode 100644
index 0000000000..b8a134d712
--- /dev/null
+++ b/packages/combinator/LICENSE.md
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Dialpad
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/combinator/README.md b/packages/combinator/README.md
new file mode 100644
index 0000000000..f0b61f12bb
--- /dev/null
+++ b/packages/combinator/README.md
@@ -0,0 +1,44 @@
+# Dialtone Combinator
+
+Dialtone Combinator is a Vue component that provides an interface for users to interact with Dialtone Vue components. 
+
+## Features
+
+* Interactive option bar for component customization
+* Live render preview of component with selected options
+* Live code preview for component with selected options
+
+## Documentation
+
+[Overview](.github/documentation/OVERVIEW.md) \
+[Contributing](.github/documentation/CONTRIBUTING.md) \
+[Usage](.github/documentation/USAGE.md)
+
+## Environment
+
+### Install
+
+`git clone https://github.com/dialpad/dialtone-combinator.git`
+
+OR
+
+`git clone git@github.com:dialpad/dialtone-combinator.git`
+
+Install dependencies
+
+```bash
+pnpm i
+```
+
+### Run
+
+```bash
+pnpm run dev
+```
+
+## Links
+
+[Preview](https://dialpad.github.io/dialtone-combinator/) \
+[Tracker](https://dialpad.atlassian.net/browse/DT-531) \
+[Dialtone](https://github.com/dialpad/dialtone) \
+[Dialtone Vue](https://github.com/dialpad/dialtone-vue)
diff --git a/packages/combinator/index.js b/packages/combinator/index.js
new file mode 100644
index 0000000000..961446bcc7
--- /dev/null
+++ b/packages/combinator/index.js
@@ -0,0 +1,3 @@
+export { default as DtcCombinator } from './src/components/combinator';
+export { default as DtcSection } from './src/components/tools/section';
+export { default as variantBank } from './src/variants/variants';
diff --git a/packages/combinator/package.json b/packages/combinator/package.json
new file mode 100644
index 0000000000..7a279a6dff
--- /dev/null
+++ b/packages/combinator/package.json
@@ -0,0 +1,55 @@
+{
+  "name": "@dialpad/dialtone-combinator",
+  "version": "0.3.1",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "vue-cli-service serve",
+    "preview": "npm run build:preview; serve ./dist/preview",
+    "lint": "eslint src --ext .js,.vue",
+    "build": "vue-cli-service build --target lib --dest ./dist/lib index.js; rm ./dist/lib/demo.html",
+    "build:preview": "vue-cli-service build --dest ./dist/preview",
+    "distribute": "rm ./dialtone-combinator-*.tgz; npm run build; npm pack",
+    "test": "vue-cli-service test:unit --timeout 100000 --colors --recursive --glob *.test.js src",
+    "release": "./release.sh"
+  },
+  "main": "./dist/lib/dialtone-combinator.umd.js",
+  "files": [
+    "./dist/lib/*.js"
+  ],
+  "devDependencies": {
+    "@dialpad/dialtone": "6.35.0",
+    "@dialpad/dialtone-vue": "3.13.0",
+    "@types/node": "^16.11.41",
+    "@typescript-eslint/eslint-plugin": "^5.30.0",
+    "@typescript-eslint/parser": "^7.0.1",
+    "@vitejs/plugin-vue": "^2.3.3",
+    "@vitejs/plugin-vue-jsx": "^1.3.10",
+    "@vue/cli-plugin-unit-mocha": "^5.0.8",
+    "@vue/cli-service": "^5.0.6",
+    "@vue/test-utils": "^2.0.2",
+    "@vue/tsconfig": "^0.1.3",
+    "chai": "^4.3.6",
+    "change-case": "^4.1.2",
+    "eslint": "^8.18.0",
+    "eslint-config-semistandard": "^17.0.0",
+    "eslint-config-standard": "^17.1.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jsdoc": "^39.3.6",
+    "eslint-plugin-mocha": "^10.1.0",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-vue": "^9.15.1",
+    "eslint-plugin-vuejs-accessibility": "^2.1.0",
+    "js-beautify": "^1.14.4",
+    "json5-with-undefined": "^2.1.301",
+    "just-clone": "^6.1.1",
+    "less": "^4.1.3",
+    "less-loader": "^11.0.0",
+    "npm-run-all": "^4.1.5",
+    "serve": "^13.0.4",
+    "vue": "^3.2.37",
+    "vue-tsc": "^0.38.1"
+  }
+}
diff --git a/packages/combinator/public/index.html b/packages/combinator/public/index.html
new file mode 100644
index 0000000000..b188eee4d7
--- /dev/null
+++ b/packages/combinator/public/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Dialtone Combinator</title>
+  </head>
+  <body>
+    <div class="d-d-flex d-jc-center d-h100vh" id="app">
+    </div>
+  </body>
+</html>
diff --git a/packages/combinator/release.sh b/packages/combinator/release.sh
new file mode 100755
index 0000000000..f93098d521
--- /dev/null
+++ b/packages/combinator/release.sh
@@ -0,0 +1,4 @@
+read -p "Enter version type [patch, major, minor]: " type
+npm version $type
+npm run distribute
+npm publish
diff --git a/packages/combinator/src/App.vue b/packages/combinator/src/App.vue
new file mode 100644
index 0000000000..68e97ca329
--- /dev/null
+++ b/packages/combinator/src/App.vue
@@ -0,0 +1,150 @@
+<template>
+  <div
+    class="dtc-preview d-d-flex d-fd-column d-ai-center d-py64 d-w100p"
+    :class="`d-bgc-${background}`"
+  >
+    <dtc-button-bar
+      class="d-ps-absolute d-m8 d-t0 d-r0"
+      :value="background"
+      @click="updateBackground"
+    >
+      <template #orange-200>
+        <div class="d-w16 d-h16 d-ba d-bc-black d-bgc-orange-200" />
+      </template>
+      <template #black-800>
+        <div class="d-w16 d-h16 d-ba d-bc-black d-bgc-black-800" />
+      </template>
+      <template #white>
+        <div class="d-w16 d-h16 d-ba d-bc-black d-bgc-white" />
+      </template>
+    </dtc-button-bar>
+    <div class="d-mb64">
+      <dtc-suggestion
+        :value="component.name"
+        :suggestions="options"
+        @update:value="updateComponent"
+      >
+        <span>Target Component</span>
+        <template #item="{ value }">
+          <span class="d-d-flex d-jc-space-between">
+            <span>{{ value }}</span>
+            <dt-badge
+              v-if="!isSupportedComponent(value)"
+              class="d-ml6"
+              color="yellow-300"
+            >
+              Unsupported
+            </dt-badge>
+            <dt-badge
+              v-if="value === DEFAULT_COMPONENT"
+              color="purple-500"
+            >
+              Default
+            </dt-badge>
+          </span>
+        </template>
+      </dtc-suggestion>
+    </div>
+    <div class="d-d-flex d-as-stretch d-hmn0">
+      <Combinator
+        :key="componentKey"
+        :component="component"
+        :variants="variants"
+        :documentation="documentation"
+        :library="library"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import documentation from '@/node_modules/@dialpad/dialtone-vue/dist/component-documentation.json';
+import * as modules from '@dialpad/dialtone-vue';
+import Combinator from './components/combinator';
+import { computed, markRaw, onMounted, ref } from 'vue';
+import { DIALTONE_PREFIX } from '@/src/lib/constants';
+import { DtBadge } from '@dialpad/dialtone-vue';
+import DtcButtonBar from '@/src/components/tools/button_bar';
+import DtcSuggestion from '@/src/components/controls/control_suggestion';
+import supportedComponentData from '@/src/supported_components.json';
+import variantBank from '@/src/variants/variants';
+import { getIcons } from '@/src/lib/utils';
+
+const DEFAULT_COMPONENT = 'DtButton';
+
+function isSupportedComponent (exportName) {
+  return supportedComponentData.includes(exportName);
+}
+
+const components = computed(() => {
+  return Object.fromEntries(Object.entries(modules).filter(([exportName, exportValue]) => {
+    return typeof (exportValue) === 'object' &&
+      exportName.toLowerCase().startsWith(DIALTONE_PREFIX) &&
+      exportValue.name;
+  }));
+});
+
+const options = computed(() => {
+  return Object.keys(components.value);
+});
+
+function getComponentFromHash () {
+  componentKey.value += 1;
+  const hash = window.location.hash.substring(1);
+  return markRaw(modules[hash] ?? modules.DtButton);
+}
+
+function getVariantFromHash () {
+  const hash = window.location.hash.substring(1);
+  return variantBank()[hash] ?? {};
+}
+
+const componentKey = ref(0);
+const component = ref(getComponentFromHash());
+const variants = ref(getVariantFromHash());
+
+function updateComponent (e) {
+  window.location.hash = e;
+}
+
+const background = ref('white');
+
+function updateBackground (e) {
+  background.value = e;
+}
+
+const icons = ref();
+
+const library = computed(() => {
+  return {
+    ...components.value,
+    ...icons.value,
+  };
+});
+
+onMounted(async () => {
+  addEventListener('hashchange', () => {
+    component.value = getComponentFromHash();
+    variants.value = getVariantFromHash();
+  });
+
+  const promises = [];
+  getIcons().forEach(icon => {
+    promises.push(import(`../node_modules/@dialpad/dialtone/lib/dist/vue/icons/${icon}.vue`).then(module => {
+      return [icon, module.default];
+    }));
+  });
+  icons.value = Object.fromEntries(await Promise.all(promises));
+});
+
+</script>
+
+<style lang="less" src="./assets/dialtone.less" />
+<style lang="less" src="./assets/transitions.less" />
+
+<style>
+  .dtc-preview {
+    padding-left: var(--su128);
+    padding-right: var(--su128);
+  }
+</style>
diff --git a/packages/combinator/src/assets/dialtone.less b/packages/combinator/src/assets/dialtone.less
new file mode 100644
index 0000000000..20605441ac
--- /dev/null
+++ b/packages/combinator/src/assets/dialtone.less
@@ -0,0 +1 @@
+@import '@dialpad/dialtone/lib/build/less/dialtone';
diff --git a/packages/combinator/src/assets/themes/base.less b/packages/combinator/src/assets/themes/base.less
new file mode 100644
index 0000000000..ef632122b7
--- /dev/null
+++ b/packages/combinator/src/assets/themes/base.less
@@ -0,0 +1,21 @@
+.dtc-theme__canvas {
+  color: var(--dtc-theme-color-foreground);
+  background-color: var(--dtc-theme-color-background);
+}
+
+.dtc-theme__canvas--inverted {
+  color: var(--dtc-theme-color-background);
+  background-color: var(--dtc-theme-color-foreground);
+}
+
+.dtc-theme__popover {
+  .dtc-theme__canvas--inverted();
+}
+
+.dtc-theme__popover *[class^="d-"][class$="__label"] {
+  color: var(--dtc-theme-color-background);
+}
+
+.dtc-theme__interactive {
+  color: var(--primary-color);
+}
diff --git a/packages/combinator/src/assets/themes/dark.less b/packages/combinator/src/assets/themes/dark.less
new file mode 100644
index 0000000000..54509f7118
--- /dev/null
+++ b/packages/combinator/src/assets/themes/dark.less
@@ -0,0 +1,26 @@
+@import (reference) "@/src/assets/dialtone.less";
+
+& {
+  --dtc-theme-color-foreground: var(--black-025);
+  --dtc-theme-color-foreground-darken: var(--black-050);
+  --dtc-theme-color-foreground-lighten: var(--white);
+
+  --dtc-theme-color-background: var(--black-700);
+  --dtc-theme-color-background-darken: var(--black-800);
+  --dtc-theme-color-background-lighten: var(--black-600);
+
+  color-scheme: dark;
+}
+
+.dtc-theme__button {
+  .d-btn--inverted();
+}
+
+.dtc-theme__tabs {
+  .d-tablist--inverted();
+  background-color: var(--dtc-theme-color-background-darken);
+}
+
+.dtc-theme__interactive {
+  color: var(--purple-300);
+}
diff --git a/packages/combinator/src/assets/themes/light.less b/packages/combinator/src/assets/themes/light.less
new file mode 100644
index 0000000000..cb94bf1d21
--- /dev/null
+++ b/packages/combinator/src/assets/themes/light.less
@@ -0,0 +1,16 @@
+& {
+  --dtc-theme-color-foreground: var(--black-800);
+  --dtc-theme-color-foreground-darken: var(--black-900);
+  --dtc-theme-color-foreground-lighten: var(--black-700);
+
+  --dtc-theme-color-background: var(--white);
+  --dtc-theme-color-background-darken: var(--black-050);
+  --dtc-theme-color-background-lighten: var(--white);
+
+  color-scheme: light;
+}
+
+.dtc-theme__tabs {
+  background-color: var(--dtc-theme-color-background-lighten);
+  box-shadow: 0 1px 6px var(--dtc-theme-color-foreground-lighten);
+}
diff --git a/packages/combinator/src/assets/themes/scheme/base.less b/packages/combinator/src/assets/themes/scheme/base.less
new file mode 100644
index 0000000000..62bdd8b52d
--- /dev/null
+++ b/packages/combinator/src/assets/themes/scheme/base.less
@@ -0,0 +1,5 @@
+.dtc-scheme__identifier { color: var(--dtc-scheme-color-identifier); }
+.dtc-scheme__class { color: var(--dtc-scheme-color-class); }
+.dtc-scheme__string { color: var(--dtc-scheme-color-string); }
+.dtc-scheme__value { color: var(--dtc-scheme-color-value); }
+.dtc-scheme__function { color: var(--dtc-scheme-color-function); }
diff --git a/packages/combinator/src/assets/themes/scheme/highlight.less b/packages/combinator/src/assets/themes/scheme/highlight.less
new file mode 100644
index 0000000000..c6fee1fa90
--- /dev/null
+++ b/packages/combinator/src/assets/themes/scheme/highlight.less
@@ -0,0 +1,8 @@
+& {
+  @import "highlight_variables.less";
+  --dtc-scheme-color-identifier: @color-identifier;
+  --dtc-scheme-color-class: @color-class;
+  --dtc-scheme-color-string: @color-string;
+  --dtc-scheme-color-value: @color-value;
+  --dtc-scheme-color-function: @color-function;
+}
diff --git a/packages/combinator/src/assets/themes/scheme/highlight_light.less b/packages/combinator/src/assets/themes/scheme/highlight_light.less
new file mode 100644
index 0000000000..295b7830e7
--- /dev/null
+++ b/packages/combinator/src/assets/themes/scheme/highlight_light.less
@@ -0,0 +1,8 @@
+& {
+  @import "highlight_variables.less";
+  --dtc-scheme-color-identifier: darken(@color-identifier, 10%);
+  --dtc-scheme-color-class: darken(@color-class, 15%);
+  --dtc-scheme-color-string: spin(darken(@color-string, 20%), -10%);
+  --dtc-scheme-color-value: darken(@color-value, 10%);
+  --dtc-scheme-color-function: darken(@color-function, 20%);
+}
diff --git a/packages/combinator/src/assets/themes/scheme/highlight_variables.less b/packages/combinator/src/assets/themes/scheme/highlight_variables.less
new file mode 100644
index 0000000000..2562241748
--- /dev/null
+++ b/packages/combinator/src/assets/themes/scheme/highlight_variables.less
@@ -0,0 +1,5 @@
+@color-identifier: #F92672;
+@color-class: #A6E22E;
+@color-string: #E6DB74;
+@color-value: #AE81FF;
+@color-function: #66D9EF;
diff --git a/packages/combinator/src/assets/themes/scheme/mono.less b/packages/combinator/src/assets/themes/scheme/mono.less
new file mode 100644
index 0000000000..043cf8f0e0
--- /dev/null
+++ b/packages/combinator/src/assets/themes/scheme/mono.less
@@ -0,0 +1,7 @@
+& {
+  --dtc-scheme-color-identifier: unset;
+  --dtc-scheme-color-class: unset;
+  --dtc-scheme-color-string: unset;
+  --dtc-scheme-color-value: unset;
+  --dtc-scheme-color-function: unset;
+}
diff --git a/packages/combinator/src/assets/transitions.less b/packages/combinator/src/assets/transitions.less
new file mode 100644
index 0000000000..e1b62416c4
--- /dev/null
+++ b/packages/combinator/src/assets/transitions.less
@@ -0,0 +1,17 @@
+.pop-enter-active { transition: opacity 100ms ease-in; }
+.pop-leave-active { transition: opacity 1500ms ease-out; }
+
+.pop-enter-from,
+.pop-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 500ms ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
diff --git a/packages/combinator/src/base.test.js b/packages/combinator/src/base.test.js
new file mode 100644
index 0000000000..d7484be802
--- /dev/null
+++ b/packages/combinator/src/base.test.js
@@ -0,0 +1,12 @@
+import { assert } from 'chai';
+import { enableAutoUnmount } from '@vue/test-utils';
+
+enableAutoUnmount(after);
+
+describe('base.test.js', function () {
+  describe('When running test', function () {
+    it('Should correctly resolve asserts', function () {
+      assert.isTrue(true);
+    });
+  });
+});
diff --git a/packages/combinator/src/components/code_editor/code_editor.vue b/packages/combinator/src/components/code_editor/code_editor.vue
new file mode 100644
index 0000000000..b5d89f9442
--- /dev/null
+++ b/packages/combinator/src/components/code_editor/code_editor.vue
@@ -0,0 +1,174 @@
+<template>
+  <div
+    ref="editor"
+    class="dtc-code-editor d-d-flex d-fl-grow1"
+  >
+    <div
+      ref="code"
+      class="d-fl-grow1"
+    >
+      <dtc-code-editor-element
+        :tag-name="tagName"
+        :self-closing="hasSlotContent"
+      >
+        <template #opening>
+          <dtc-code-editor-tag-attributes
+            :info-bindings="info.bindings.get()"
+            :option-bindings="options.bindings.get()"
+            :verbose="verbose"
+          />
+        </template>
+        <template #default>
+          <div>
+            <template
+              v-for="(value, slot) in options.slots"
+              :key="slot"
+            >
+              <dtc-code-editor-slot
+                v-if="value"
+                :name="slot"
+                @update:options="e => emit(OPTIONS_UPDATE_EVENT, e)"
+              >
+                <span class="dtc-theme-popover">{{ value }}</span>
+              </dtc-code-editor-slot>
+            </template>
+          </div>
+        </template>
+      </dtc-code-editor-element>
+    </div>
+    <dt-popover
+      :class="[
+        `dtc-theme--${theme}`,
+        'd-ps-sticky',
+        'd-t0',
+      ]"
+      content-class="dtc-theme__popover"
+      transition="pop"
+      :modal="false"
+      :open="showCopyPopover"
+    >
+      <template #anchor="{ attrs }">
+        <dt-button
+          class="dtc-theme__button d-ps-sticky d-t0"
+          v-bind="attrs"
+          importance="clear"
+          size="lg"
+          @click="copy"
+        >
+          <template #default>
+            Copy
+          </template>
+          <template #icon>
+            <IconCopy />
+          </template>
+        </dt-button>
+      </template>
+      <template #content>
+        <span>Copied to clipboard</span>
+      </template>
+    </dt-popover>
+  </div>
+</template>
+
+<script setup>
+import DtcCodeEditorTagAttributes from './code_editor_tag_attributes';
+import DtcCodeEditorElement from './code_editor_element';
+import DtcCodeEditorSlot from './code_editor_slot';
+import IconCopy from 'dialtone-icons/IconContentCopy';
+import { DtButton, DtPopover } from '@dialpad/dialtone-vue';
+
+import { OPTIONS_UPDATE_EVENT, SETTINGS_INDENT_KEY } from '@/src/lib/constants';
+import { ref, computed, provide } from 'vue';
+import { paramCase } from 'change-case';
+
+const props = defineProps({
+  /**
+   * Options data object.
+   */
+  options: {
+    type: Object,
+    required: true,
+  },
+  /**
+   * Info data object.
+   */
+  info: {
+    type: Object,
+    required: true,
+  },
+  /**
+   * Popover theme setting.
+   */
+  theme: {
+    type: String,
+    required: true,
+  },
+  /**
+   * Attributes verbose setting.
+   */
+  verbose: {
+    type: Boolean,
+    required: true,
+  },
+  /**
+   * Indent spaces setting.
+   */
+  indentSpaces: {
+    type: Number,
+    required: true,
+  },
+});
+
+const emit = defineEmits([
+  OPTIONS_UPDATE_EVENT,
+]);
+
+const indent = computed(() => {
+  return props.indentSpaces;
+});
+
+provide(SETTINGS_INDENT_KEY, indent);
+
+const tagName = computed(() => paramCase(props.info.displayName));
+
+const hasSlotContent = computed(() => {
+  return props.options.slots
+    ? Object.values(props.options.slots).every(slot => !slot)
+    : false;
+});
+
+const code = ref();
+const showCopyPopover = ref(false);
+
+async function copy () {
+  let text = code.value.innerText;
+
+  // Remove nbsp char
+  text = text.replace(/\xA0/g, '');
+
+  // Remove empty lines
+  text = text.replace(/^\s*[\r\n]/gm, '');
+
+  await navigator.clipboard.writeText(text);
+
+  showCopyPopover.value = true;
+  await new Promise(resolve => setTimeout(resolve, 1000));
+  showCopyPopover.value = false;
+}
+</script>
+
+<script>
+/**
+ * The code editor displays the vue template code required to reproduce
+ * the component in its current state in an external project.
+ */
+export default {
+  name: 'DtcCodeEditor',
+};
+</script>
+
+<style>
+.dtc-code-editor__margin {
+  border-left: var(--dtc-theme-color-background-darken) solid 1px;
+}
+</style>
diff --git a/packages/combinator/src/components/code_editor/code_editor_closing_tag.vue b/packages/combinator/src/components/code_editor/code_editor_closing_tag.vue
new file mode 100644
index 0000000000..7d1972f385
--- /dev/null
+++ b/packages/combinator/src/components/code_editor/code_editor_closing_tag.vue
@@ -0,0 +1,26 @@
+<template>
+  <dtc-code-editor-tag
+    :name="name"
+  >
+    <template #start>
+      <span>/</span>
+    </template>
+  </dtc-code-editor-tag>
+</template>
+
+<script setup>
+import DtcCodeEditorTag from './code_editor_tag';
+
+defineProps({
+  name: {
+    type: String,
+    required: true,
+  },
+});
+</script>
+
+<script>
+export default {
+  name: 'DtcCodeEditorClosingTag',
+};
+</script>
diff --git a/packages/combinator/src/components/code_editor/code_editor_element.vue b/packages/combinator/src/components/code_editor/code_editor_element.vue
new file mode 100644
index 0000000000..74a3d7c387
--- /dev/null
+++ b/packages/combinator/src/components/code_editor/code_editor_element.vue
@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <dtc-code-editor-opening-tag
+      :name="tagName"
+    >
+      <slot name="opening" />
+      <span v-if="selfClosing"> /</span>
+    </dtc-code-editor-opening-tag>
+    <div
+      class="dtc-code-editor__margin"
+    >
+      <slot />
+    </div>
+    <dtc-code-editor-closing-tag
+      v-if="!selfClosing"
+      :name="tagName"
+    />
+  </div>
+</template>
+
+<script setup>
+import DtcCodeEditorOpeningTag from './code_editor_opening_tag';
+import DtcCodeEditorClosingTag from './code_editor_closing_tag';
+
+defineProps({
+  tagName: {
+    type: String,
+    required: true,
+  },
+  /**
+   * Exclude closing tag and append a '/' to end of opening tag.
+   */
+  selfClosing: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
+
+<script>
+export default {
+  name: 'DtcCodeEditorElement',
+};
+</script>
diff --git a/packages/combinator/src/components/code_editor/code_editor_indent.vue b/packages/combinator/src/components/code_editor/code_editor_indent.vue
new file mode 100644
index 0000000000..c545211bba
--- /dev/null
+++ b/packages/combinator/src/components/code_editor/code_editor_indent.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="d-d-flex">
+    <span v-html="html" />
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import { computed, inject } from 'vue';
+import { SETTINGS_INDENT_KEY } from '@/src/lib/constants';
+
+const props = defineProps({
+  /**
+   * Current indentation level, multiplied by number of spaces.
+   */
+  level: {
+    type: Number,
+    default: 1,
+    validator (value) {
+      return value >= 0;
+    },
+  },
+});
+
+const spaces = computed(() => {
+  return inject(SETTINGS_INDENT_KEY).value;
+});
+
+const html = computed(() => {
+  return '&nbsp;'.repeat(props.level * spaces.value);
+});
+</script>
+
+<script>
+export default {
+  name: 'DtcCodeEditorIndent',
+};
+</script>
diff --git a/packages/combinator/src/components/code_editor/code_editor_input.vue b/packages/combinator/src/components/code_editor/code_editor_input.vue
new file mode 100644
index 0000000000..859c9e8c3e
--- /dev/null
+++ b/packages/combinator/src/components/code_editor/code_editor_input.vue
@@ -0,0 +1,31 @@
+<template>
+  <span
+    class="dtc-code-editor-input d-ws-pre-wrap"
+    spellcheck="false"
+    contenteditable
+    @input="e => emit('input', e)"
+  >
+    <slot />
+  </span>
+</template>
+
+<script setup>
+const emit = defineEmits(['input']);
+</script>
+
+<script>
+export default {
+  name: 'DtcCodeEditorInput',
+};
+</script>
+
+<style lang="less">
+.dtc-code-editor-input {
+  padding: var(--su2) var(--su4) var(--su2) var(--su4);
+  border-radius: var(--su6);
+  border: solid var(--su1);
+  border-color: var(--dtc-theme-color-background-lighten);
+  background-color: var(--dtc-theme-color-background-darken);
+  outline: none;
+}
+</style>
diff --git a/packages/combinator/src/components/code_editor/code_editor_opening_tag.vue b/packages/combinator/src/components/code_editor/code_editor_opening_tag.vue
new file mode 100644
index 0000000000..8ae1659f1f
--- /dev/null
+++ b/packages/combinator/src/components/code_editor/code_editor_opening_tag.vue
@@ -0,0 +1,30 @@
+<template>
+  <dtc-code-editor-tag
+    :name="name"
+  >
+    <template #end>
+      <slot />
+    </template>
+  </dtc-code-editor-tag>
+</template>
+
+<script setup>
+import DtcCodeEditorTag from './code_editor_tag';
+
+defineProps({
+  name: {
+    type: String,
+    required: true,
+  },
+  selfClosing: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
+
+<script>
+export default {
+  name: 'DtcCodeEditorOpeningTag',
+};
+</script>
diff --git a/packages/combinator/src/components/code_editor/code_editor_slot.vue b/packages/combinator/src/components/code_editor/code_editor_slot.vue
new file mode 100644
index 0000000000..71fc0da127
--- /dev/null
+++ b/packages/combinator/src/components/code_editor/code_editor_slot.vue
@@ -0,0 +1,74 @@
+<template>
+  <dtc-code-editor-indent
+    :level="indentLevel"
+  >
+    <dtc-code-editor-element
+      v-if="name !== DEFAULT_SLOT_NAME"
+      tag-name="template"
+    >
+      <template #opening>
+        <span>&nbsp;</span>
+        <span class="dtc-scheme__class">#{{ name }}</span>
+      </template>
+      <template #default>
+        <dtc-code-editor-indent
+          :level="indentLevel"
+        >
+          <dtc-code-editor-input
+            @input="onInput"
+          >
+            <slot />
+          </dtc-code-editor-input>
+        </dtc-code-editor-indent>
+      </template>
+    </dtc-code-editor-element>
+    <dtc-code-editor-input
+      v-else
+      @input="onInput"
+    >
+      <slot />
+    </dtc-code-editor-input>
+  </dtc-code-editor-indent>
+</template>
+
+<script setup>
+import DtcCodeEditorElement from './code_editor_element';
+import DtcCodeEditorInput from './code_editor_input';
+import { DEFAULT_SLOT_NAME } from '@/src/lib/constants';
+import DtcCodeEditorIndent from '@/src/components/code_editor/code_editor_indent';
+
+const props = defineProps({
+  /**
+   * Name of slot in template tag.
+   */
+  name: {
+    type: String,
+    default: DEFAULT_SLOT_NAME,
+  },
+  /**
+   * Indent level of slot.
+   */
+  indentLevel: {
+    type: Number,
+    default: 1,
+  },
+});
+
+const emit = defineEmits(['update:options']);
+
+function onInput (e) {
+  emit('update:options', options => {
+    options.slots[props.name] = e.target.textContent;
+  });
+}
+</script>
+
+<script>
+/**
+ * The slot displays the content wrapped by 'template' tags that match the slot name.
+ * The default slot is not wrapped by 'template' tags.
+ */
+export default {
+  name: 'DtcCodeEditorSlot',
+};
+</script>
diff --git a/packages/combinator/src/components/code_editor/code_editor_tag.vue b/packages/combinator/src/components/code_editor/code_editor_tag.vue
new file mode 100644
index 0000000000..33f04753f9
--- /dev/null
+++ b/packages/combinator/src/components/code_editor/code_editor_tag.vue
@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <span>&lt;</span>
+    <slot name="start" />
+    <span class="dtc-scheme__identifier">{{ name }}</span>
+    <slot name="end" />
+    <span>&gt;</span>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  name: {
+    type: String,
+    required: true,
+  },
+});
+</script>
+
+<script>
+export default {
+  name: 'DtcCodeEditorTag',
+};
+</script>
diff --git a/packages/combinator/src/components/code_editor/code_editor_tag_attributes.vue b/packages/combinator/src/components/code_editor/code_editor_tag_attributes.vue
new file mode 100644
index 0000000000..202b47b6bd
--- /dev/null
+++ b/packages/combinator/src/components/code_editor/code_editor_tag_attributes.vue
@@ -0,0 +1,141 @@
+<template>
+  <div
+    v-if="!isEmpty"
+    class="dtc-code-editor__margin"
+  >
+    <dtc-code-editor-indent>
+      <div>
+        <template
+          v-for="[name, { value, label }] in bindingMap"
+          :key="name"
+        >
+          <div>
+            <span v-if="useBindOperator(value)">:</span>
+            <span class="dtc-scheme__class">
+              {{ label }}
+            </span>
+            <span v-if="!useShortSyntax(value)">
+              <span>=</span>
+              <span class="dtc-scheme__string">"</span>
+              <span
+                :class="{
+                  'dtc-scheme__string': !useBindOperator(value),
+                  'dtc-scheme__value': useBindOperator(value),
+                }"
+              >
+                {{ stringifyValue(value) }}
+              </span>
+              <span class="dtc-scheme__string">"</span>
+            </span>
+          </div>
+        </template>
+      </div>
+    </dtc-code-editor-indent>
+  </div>
+</template>
+
+<script setup>
+import DtcCodeEditorIndent from './code_editor_indent';
+
+import { computed } from 'vue';
+import { stringifyDocValue } from '@/src/lib/parse';
+
+const props = defineProps({
+  /**
+   * Info data object.
+   */
+  infoBindings: {
+    type: Array,
+    required: true,
+  },
+  /**
+   * Binding members to be displayed as attributes.
+   */
+  optionBindings: {
+    type: Object,
+    required: true,
+  },
+  /**
+   * Show all bindings regardless of default value.
+   */
+  verbose: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+/**
+ * Merges binding info with the actual binding values to conditionally
+ * display them in the tag.
+ *
+ * @type {ComputedRef<object>}
+ */
+const bindingMap = computed(() => {
+  return Object.entries(props.optionBindings).map(([bindingName, value]) => {
+    const bindingInfo = props.infoBindings.find(infoBinding => infoBinding.name === bindingName);
+    return [bindingName, {
+      ...bindingInfo,
+      value,
+    }];
+  }).filter(([name, member]) => isMemberVisible(name, member));
+});
+
+/**
+ * Determines if the member is visible.
+ * Compares the current value of the member to the default value.
+ * All members are considered visible if the verbose setting is on.
+ *
+ * @param name - The member name.
+ * @param member - The member info.
+ * @returns {boolean} If the member is visible.
+ */
+function isMemberVisible (name, member) {
+  if (props.verbose) { return true; }
+
+  const defaultString = JSON.stringify(member.defaultValue);
+  const valueString = JSON.stringify(member.value);
+
+  return defaultString !== valueString;
+}
+
+/**
+ * If the value is boolean it should only show the member and not the value.
+ *
+ * @param value - The member value.
+ * @returns {boolean} - If the member should be displayed using short syntax.
+ */
+function useShortSyntax (value) {
+  return value === true;
+}
+
+/**
+ * If the value is not a string it should use the ':' operator
+ * to indicate the true value is being passed in.
+ *
+ * @param value - The member value.
+ * @returns {boolean} If the member should be displayed using the bind operator.
+ */
+function useBindOperator (value) {
+  return !useShortSyntax(value) && typeof value !== 'string';
+}
+
+function stringifyValue (value) {
+  if (!value) { return `${value}`; }
+  return useBindOperator(value)
+    ? stringifyDocValue(value)
+    : value.toString();
+}
+
+const isEmpty = computed(() => {
+  return bindingMap.value.length <= 0;
+});
+</script>
+
+<script>
+/**
+ * This component generates all the attribute fields to be included on the element tag.
+ */
+export default {
+  name: 'DtcCodeEditorTagAttributes',
+};
+</script>
diff --git a/packages/combinator/src/components/code_panel/code_panel.vue b/packages/combinator/src/components/code_panel/code_panel.vue
new file mode 100644
index 0000000000..9d2ed28dc9
--- /dev/null
+++ b/packages/combinator/src/components/code_panel/code_panel.vue
@@ -0,0 +1,127 @@
+<template>
+  <dtc-overlay
+    class="dtc-code-panel"
+    :class="[
+      `dtc-code-panel-scheme--${settings.code.scheme}`,
+      `dtc-code-panel-scheme--${settings.code.scheme}--${settings.root.theme}`,
+    ]"
+  >
+    <template #content>
+      <div class="dtc-theme__canvas">
+        <dtc-tab-panel
+          selected="code"
+          :generate-label="generateLabel"
+        >
+          <template #code>
+            <dtc-code-editor
+              :info="info"
+              :options="options"
+              :theme="settings.root.theme"
+              :verbose="settings.code.verbose"
+              :indent-spaces="settings.code.indent"
+              @update:options="e => emit(OPTIONS_UPDATE_EVENT, e)"
+            />
+          </template>
+          <template #events>
+            <dtc-event-console ref="eventConsole" />
+          </template>
+        </dtc-tab-panel>
+      </div>
+    </template>
+    <template #overlay>
+      <div class="d-d-flex d-ai-flex-end d-jc-flex-end d-h100p">
+        <div class="d-pr32 d-pb16 d-pe-auto">
+          <slot name="overlay" />
+        </div>
+      </div>
+    </template>
+  </dtc-overlay>
+</template>
+
+<script setup>
+import DtcTabPanel from '@/src/components/tools/tab_panel';
+import DtcEventConsole from '@/src/components/event_console/event_console';
+import DtcCodeEditor from '@/src/components/code_editor/code_editor';
+import DtcOverlay from '@/src/components/tools/overlay';
+
+import { OPTIONS_UPDATE_EVENT } from '@/src/lib/constants';
+import { ref } from 'vue';
+
+defineProps({
+  /**
+   * Options data object.
+   */
+  options: {
+    type: Object,
+    required: true,
+  },
+  /**
+   * Info data object.
+   */
+  info: {
+    type: Object,
+    required: true,
+  },
+  /**
+   * Settings data object.
+   */
+  settings: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits([
+  OPTIONS_UPDATE_EVENT,
+]);
+
+const eventConsole = ref();
+defineExpose({
+  trigger: (event, value) => eventConsole.value.trigger(event, value),
+});
+
+function generateLabel (slot, capitalCase) {
+  const label = capitalCase(slot);
+  switch (slot) {
+    case 'events': return `${label} (${eventConsole.value?.entryCount})`;
+    default: return label;
+  }
+}
+</script>
+
+<script>
+/**
+ * The code panel is responsible for providing technical information
+ * about the target component in its current state.
+ */
+export default {
+  name: 'DtcCodePanel',
+};
+</script>
+
+<style lang="less">
+@import "@/src/assets/themes/scheme/base.less";
+@import "@/src/assets/themes/scheme/highlight_variables.less";
+
+.dtc-code-panel-scheme--mono {
+@import "@/src/assets/themes/scheme/mono.less";
+}
+
+.dtc-code-panel-scheme--highlight {
+@import "@/src/assets/themes/scheme/highlight.less";
+}
+
+.dtc-code-panel-scheme--highlight--light {
+@import "@/src/assets/themes/scheme/highlight_light.less";
+}
+
+.dtc-code-panel {
+  display: grid;
+  grid-template-columns: 1fr;
+}
+
+.dtc-code-panel > * {
+  overflow: hidden;
+  grid-area: 1 / 1;
+}
+</style>
diff --git a/packages/combinator/src/components/combinator.test.js b/packages/combinator/src/components/combinator.test.js
new file mode 100644
index 0000000000..ebb7d203fe
--- /dev/null
+++ b/packages/combinator/src/components/combinator.test.js
@@ -0,0 +1,36 @@
+import DtcCombinator from './combinator';
+
+import { assert } from 'chai';
+import { shallowMount } from '@vue/test-utils';
+import { getSupportedComponents } from '@/src/lib/test/utils_test';
+import documentation from '@/node_modules/@dialpad/dialtone-vue/dist/component-documentation.json';
+
+describe('combinator.vue test', function () {
+  const testComponents = getSupportedComponents();
+
+  let wrapper;
+
+  describe(`Supported component tests`, function () {
+    testComponents.forEach(component => {
+      describe(`When mounted with component '${component.name}'`, function () {
+        beforeEach(function () {
+          wrapper = shallowMount(DtcCombinator, {
+            props: {
+              component,
+              documentation,
+              variants: {},
+            },
+          });
+        });
+
+        afterEach(function () {
+          wrapper.unmount();
+        });
+
+        it('Should render successfully', function () {
+          assert.isTrue(wrapper.exists());
+        });
+      });
+    });
+  });
+});
diff --git a/packages/combinator/src/components/combinator.vue b/packages/combinator/src/components/combinator.vue
new file mode 100644
index 0000000000..d5501b98e3
--- /dev/null
+++ b/packages/combinator/src/components/combinator.vue
@@ -0,0 +1,395 @@
+<template>
+  <div
+    class="dtc-combinator d-d-flex d-fd-column d-w100p"
+    :class="`dtc-theme--${settings.root.theme}`"
+  >
+    <div
+      v-if="!blueprint"
+      class="d-mb6"
+    >
+      <div
+        :class="headerClass"
+        class="d-of-hidden d-ba d-bar4"
+      >
+        <dtc-header
+          :component="component"
+          :variants="variants"
+          :selected-variant="selectedVariant"
+          @update:variant="updateVariant"
+        />
+      </div>
+    </div>
+    <dt-notice
+      v-if="showUnsupportedWarning"
+      class="d-wmx-unset"
+      title="Unsupported component"
+      kind="warning"
+      :close-button-props="{ ariaLabel: 'Close warning' }"
+      @close="hideUnsupportedMessage"
+    >
+      May have unexpected behaviour.
+    </dt-notice>
+    <div class="d-d-flex d-fl-grow1 d-hmn0">
+      <div
+        class="dtc-root d-d-grid d-of-hidden d-ba d-bar4 d-w100p"
+        :class="{
+          [rootClass]: true,
+          [`dtc-root--sidebar-${settings.root.sidebar}`]: true,
+          'dtc-root--blueprint': blueprint,
+        }"
+      >
+        <div class="dtc-root__top">
+          <dtc-renderer
+            v-model:settings="settings"
+            :component="component"
+            :info="info"
+            :options="options"
+            :library="library"
+            @event="(event, value) => triggerEvent(event, value)"
+          />
+        </div>
+        <div class="dtc-root__bottom d-bt">
+          <dtc-code-panel
+            ref="codePanel"
+            v-model:options="options"
+            :info="info"
+            :settings="settings"
+          >
+            <template
+              v-if="!blueprint"
+              #overlay
+            >
+              <dtc-settings-menu v-model:settings="settings" />
+            </template>
+          </dtc-code-panel>
+        </div>
+        <div
+          v-if="!blueprint"
+          class="dtc-root__sidebar"
+        >
+          <dtc-option-bar
+            v-model:options="options"
+            :component="component"
+            :info="info"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import DtcOptionBar from './option_bar/option_bar';
+import DtcRenderer from './renderer/renderer';
+import DtcCodePanel from './code_panel/code_panel';
+import DtcSettingsMenu from './settings_menu/settings_menu';
+import DtcHeader from '@/src/components/header/header';
+import { DtNotice } from '@dialpad/dialtone-vue';
+
+import { enumerateGroups } from '@/src/lib/utils';
+import { computed, onErrorCaptured, reactive, ref } from 'vue';
+import { cachedRef, computedModel } from '@/src/lib/utils_vue';
+import { getComponentInfo } from '@/src/lib/info';
+import {
+  SETTINGS_SCHEME_KEY,
+  SETTINGS_THEME_KEY,
+  SETTINGS_VERBOSE_KEY,
+  SETTINGS_BACKGROUND_KEY,
+  SETTINGS_POSITIONING_KEY,
+  SETTINGS_SIDEBAR_KEY,
+  SETTINGS_INDENT_KEY,
+} from '@/src/lib/constants';
+import defaultSettings from '@/src/settings.json';
+import supportedComponents from '@/src/supported_components.json';
+
+const props = defineProps({
+  /**
+   * Target component.
+   */
+  component: {
+    type: Object,
+    required: true,
+  },
+  /**
+   * The dialtone-vue component documentation.
+   */
+  documentation: {
+    type: Object,
+    required: true,
+  },
+  /**
+   * Library of components that can be displayed in the renderer through slots.
+   */
+  library: {
+    type: Object,
+    default: () => {},
+  },
+  /**
+   * The variants to select.
+   * All keys will be displayed to choose from in the variant picker.
+   * Pass a variant with the key 'default' to override the default variant.
+   */
+  variants: {
+    type: Object,
+    default: () => {},
+  },
+  /**
+   * Activate 'blueprint' mode, to use a simple version of the combinator.
+   * Used to display the component but provided limited options for interaction.
+   */
+  blueprint: {
+    type: Boolean,
+    default: false,
+  },
+  rootClass: {
+    type: String,
+    default: '',
+  },
+  headerClass: {
+    type: String,
+    default: '',
+  },
+});
+
+const selectedVariant = ref('default');
+
+function updateVariant (e) {
+  selectedVariant.value = e;
+}
+
+/**
+ * Gets a new instantiation of an info object.
+ * Merges info from selected variant to the info object.
+ *
+ * @returns {object} The newly instantiated info object.
+ */
+function initializeInfo () {
+  const info = getComponentInfo(props.component, props.documentation);
+
+  const variantInfo = props.variants[selectedVariant.value];
+
+  if (variantInfo) {
+    Object.entries(variantInfo).forEach(([memberGroup, members]) => {
+      Object.entries(members).forEach(([memberName, member]) => {
+        const infoMember = info[memberGroup].find(infoMember => infoMember.name === memberName);
+        if (infoMember) {
+          Object.assign(infoMember, member);
+        }
+      });
+    });
+  }
+
+  return info;
+}
+
+/**
+ * Container for all extended component information for the target component.
+ * Immutable.
+ *
+ * @type {ComputedRef<object>}
+ */
+const info = computed(() => {
+  return Object.freeze({
+    ...initializeInfo(),
+    members: {
+      enumerate (handler) {
+        enumerateGroups(handler, {
+          slots: info.value.slots,
+          props: info.value.props,
+          attributes: info.value.attributes,
+          events: info.value.events,
+        });
+      },
+    },
+    bindings: {
+      get () {
+        const bindings = [];
+        this.enumerate((_, binding) => bindings.push(binding));
+        return bindings;
+      },
+      enumerate (handler) {
+        enumerateGroups(handler, {
+          props: info.value.props,
+          attributes: info.value.attributes?.filter(attribute => attribute),
+        });
+      },
+    },
+  });
+});
+
+/**
+ * Gets the values for a given 'options' member group with the provided defaults.
+ */
+function getInitialValues (info) {
+  const options = {};
+  info.members.enumerate((memberGroup, member) => {
+    options[memberGroup] = options[memberGroup] || {};
+    options[memberGroup][member.name] = member.initialValue;
+  });
+  return options;
+}
+
+/**
+ * The options data object is the main reactive object that allows interactivity with the target component.
+ * Reactive.
+ *
+ * @type {WritableComputedRef<object>}
+ */
+const options = computedModel(
+  computed(() => {
+    return reactive({
+      ...getInitialValues(info.value),
+      bindings: {
+        get () {
+          const bindings = [];
+          this.enumerate((_, binding) => bindings.push(binding));
+          return Object.fromEntries(bindings);
+        },
+        enumerate (handler) {
+          enumerateGroups(handler, {
+            props: options.value.props ? Object.entries(options.value.props) : null,
+            attributes: options.value.attributes ? Object.entries(options.value.attributes) : null,
+          });
+        },
+      },
+    });
+  }),
+  /**
+   * Catch errors when updating member values,
+   * else vue can block the value from ever being changed,
+   * keeping the value permanently in an invalid state
+   */
+  (e, model) => {
+    try {
+      e(model);
+    } catch (exception) {
+      console.warn('Update options warning: \n', exception);
+    }
+  },
+);
+
+/**
+ * The settings data object used to read and write cached settings used throughout the combinator.
+ *
+ * @type {WritableComputedRef<object>}
+ */
+const settings = computedModel(
+  computed(() => {
+    return reactive({
+      root: {
+        theme: cachedRef(SETTINGS_THEME_KEY, defaultSettings.root['default-theme']),
+        sidebar: cachedRef(SETTINGS_SIDEBAR_KEY, defaultSettings.root['default-sidebar']),
+      },
+      renderer: {
+        positioning: cachedRef(SETTINGS_POSITIONING_KEY, defaultSettings.renderer['default-positioning']),
+        background: cachedRef(SETTINGS_BACKGROUND_KEY, defaultSettings.renderer['default-background']),
+      },
+      code: {
+        scheme: cachedRef(SETTINGS_SCHEME_KEY, defaultSettings.code['default-scheme']),
+        indent: cachedRef(SETTINGS_INDENT_KEY, defaultSettings.code['default-indent-spaces']),
+        verbose: props.blueprint
+          ? false
+          : cachedRef(SETTINGS_VERBOSE_KEY, defaultSettings.code['default-verbose']),
+      },
+    });
+  }),
+  (e, model) => {
+    try {
+      e(model);
+    } catch (exception) {
+      console.warn('Update settings warning: \n', exception);
+    }
+  },
+);
+
+const showUnsupportedWarning = ref(!supportedComponents.includes(props.component.name));
+
+function hideUnsupportedMessage () {
+  showUnsupportedWarning.value = false;
+}
+
+const codePanel = ref();
+
+function triggerEvent (event, value) {
+  codePanel.value.trigger(event, value);
+}
+
+onErrorCaptured((exception) => {
+  console.error('Internal vue error: \n', exception);
+  return false;
+});
+</script>
+
+<script>
+/**
+ * The root component that facilitates input and output with its child components.
+ * Holds the two central data objects 'info' and 'options'.
+ */
+export default {
+  name: 'DtcCombinator',
+};
+</script>
+
+<style lang="less">
+@import "@/src/assets/themes/base.less";
+.dtc-theme--light { @import "@/src/assets/themes/light.less"; }
+.dtc-theme--dark { @import "@/src/assets/themes/dark.less"; }
+
+.dtc-root {
+  grid-template-rows: repeat(2, 1fr);
+}
+
+.dtc-root--blueprint {
+  grid-template-columns: 1fr !important;
+
+  .dtc-root__top {
+    grid-column-start: 1 !important;
+  }
+
+  .dtc-root__bottom {
+    grid-column-start: 1 !important;
+  }
+}
+
+.dtc-root--sidebar-right {
+  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
+
+  .dtc-root__bottom {
+    grid-row-start: 2;
+  }
+
+  .dtc-root__sidebar {
+    grid-row: span 2 / span 2;
+    border-left: var(--su1) solid currentColor;
+  }
+}
+
+.dtc-root--sidebar-left {
+  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
+
+  .dtc-root__top {
+    grid-row-start: 1;
+    grid-column-start: 2;
+  }
+
+  .dtc-root__bottom {
+    grid-row-start: 2;
+    grid-column-start: 2;
+  }
+
+  .dtc-root__sidebar {
+    grid-column-start: 1;
+    grid-row: span 2 / span 2;
+    border-right: var(--su1) solid currentColor;
+  }
+}
+
+.dtc-root > * {
+  display: flex;
+  overflow: hidden;
+}
+
+.dtc-icon[disabled] {
+  background-color: transparent !important;
+}
+</style>
diff --git a/packages/combinator/src/components/controls/control_array.test.js b/packages/combinator/src/components/controls/control_array.test.js
new file mode 100644
index 0000000000..70744c281c
--- /dev/null
+++ b/packages/combinator/src/components/controls/control_array.test.js
@@ -0,0 +1,63 @@
+import DtcControlArray from './control_array';
+
+import { assert } from 'chai';
+import { mount } from '@vue/test-utils';
+
+const itemSelector = '[data-qa=dtc-control-array-item]';
+const itemInputSelector = 'input';
+
+const inputValues = [
+  'item1',
+  'item2',
+  'item3',
+  4,
+];
+
+describe('control_array.vue test', function () {
+  let wrapper;
+  let itemWrappers;
+  let inputWrappers;
+
+  const _mountWrapper = () => {
+    wrapper = mount(DtcControlArray);
+    _setChildWrappers();
+  };
+
+  const _setChildWrappers = () => {
+    itemWrappers = wrapper.findAll(itemSelector);
+    inputWrappers = itemWrappers.map(itemWrapper => itemWrapper.find(itemInputSelector));
+  };
+
+  before(function () {
+    _mountWrapper();
+  });
+
+  describe('When mounted', function () {
+    it('Should render successfully', function () {
+      assert.isTrue(wrapper.exists());
+    });
+  });
+
+  describe('When a value is provided', function () {
+    beforeEach(async function () {
+      await wrapper.setProps({
+        value: inputValues,
+      });
+      _setChildWrappers();
+    });
+
+    it('Should generate a control for each array item', function () {
+      assert.equal(inputValues.length, itemWrappers.length);
+    });
+
+    // Checking if each value passed to the component has a native input with a matching value
+    describe('Should have matching control and native input values', function () {
+      inputValues.forEach(value => {
+        it(`Should have a matching native input for value '${value}'`, function () {
+          const itemValues = inputWrappers.map(inputWrapper => inputWrapper.element.value);
+          assert.isTrue(itemValues.includes(value.toString()));
+        });
+      });
+    });
+  });
+});
diff --git a/packages/combinator/src/components/controls/control_array.vue b/packages/combinator/src/components/controls/control_array.vue
new file mode 100644
index 0000000000..1e1f3641dc
--- /dev/null
+++ b/packages/combinator/src/components/controls/control_array.vue
@@ -0,0 +1,62 @@
+<template>
+  <dtc-control-iterable
+    :value="value"
+    :disabled="disabled"
+    :generate-item="generateItem"
+    @update:value="e => emit(VALUE_UPDATE_EVENT, e)"
+  >
+    <template #default>
+      <slot />
+    </template>
+    <template #prefix>
+      [
+    </template>
+    <template #item="{ item, update }">
+      <div
+        data-qa="dtc-control-array-item"
+      >
+        <dtc-control-dynamic
+          :value="serializeControlValue(item)"
+          :disabled="disabled"
+          @update:value="e => update(deserializeControlValue(e))"
+        />
+      </div>
+    </template>
+    <template #suffix>
+      ]
+    </template>
+  </dtc-control-iterable>
+</template>
+
+<script setup>
+import DtcControlIterable from './control_iterable';
+import DtcControlDynamic from './control_dynamic';
+import { VALUE_UPDATE_EVENT } from '@/src/lib/constants';
+import { serializeControlValue, deserializeControlValue } from '@/src/lib/control';
+
+defineProps({
+  value: {
+    type: Array,
+    default: () => ([]),
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits([VALUE_UPDATE_EVENT]);
+
+function generateItem () {
+  return undefined;
+}
+</script>
+
+<script>
+/**
+ * Control that is used to provide functionality to manipulate arrays.
+ */
+export default {
+  name: 'DtcControlArray',
+};
+</script>
diff --git a/packages/combinator/src/components/controls/control_base.test.js b/packages/combinator/src/components/controls/control_base.test.js
new file mode 100644
index 0000000000..19a533b31e
--- /dev/null
+++ b/packages/combinator/src/components/controls/control_base.test.js
@@ -0,0 +1,18 @@
+import DtcControlBase from './control_base';
+
+import { assert } from 'chai';
+import { mount } from '@vue/test-utils';
+
+describe('control_base.vue test', function () {
+  let wrapper;
+
+  before(function () {
+    wrapper = mount(DtcControlBase);
+  });
+
+  describe('When mounted', function () {
+    it('Should render successfully', function () {
+      assert.isTrue(wrapper.exists());
+    });
+  });
+});
diff --git a/packages/combinator/src/components/controls/control_base.vue b/packages/combinator/src/components/controls/control_base.vue
new file mode 100644
index 0000000000..7504b740db
--- /dev/null
+++ b/packages/combinator/src/components/controls/control_base.vue
@@ -0,0 +1,36 @@
+<template>
+  <dtc-control-string
+    :value="value?.toString()"
+    :disabled="disabled"
+    @update:value="e => emit(VALUE_UPDATE_EVENT, e)"
+  >
+    <slot />
+  </dtc-control-string>
+</template>
+
+<script setup>
+import DtcControlString from './control_string';
+import { VALUE_UPDATE_EVENT } from '@/src/lib/constants';
+
+defineProps({
+  value: {
+    type: undefined,
+    default: () => String(),
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits([VALUE_UPDATE_EVENT]);
+</script>
+
+<script>
+/**
+ * Control that is used when no other controls are valid.
+ */
+export default {
+  name: 'DtcControlBase',
+};
+</script>
diff --git a/packages/combinator/src/components/controls/control_boolean.test.js b/packages/combinator/src/components/controls/control_boolean.test.js
new file mode 100644
index 0000000000..c4960e6247
--- /dev/null
+++ b/packages/combinator/src/components/controls/control_boolean.test.js
@@ -0,0 +1,56 @@
+import DtcControlBoolean from './control_boolean';
+
+import { assert } from 'chai';
+import { mount } from '@vue/test-utils';
+
+const inputSelector = '[data-qa=dtc-control-boolean-input]';
+
+const inputValue = true;
+const defaultValue = DtcControlBoolean.props.value.default();
+
+describe('control_boolean.vue test', function () {
+  let wrapper;
+  let inputWrapper;
+
+  const _mountWrapper = () => {
+    wrapper = mount(DtcControlBoolean);
+    _setChildWrappers();
+  };
+
+  const _setChildWrappers = () => {
+    inputWrapper = wrapper.find(inputSelector);
+  };
+
+  before(function () {
+    _mountWrapper();
+  });
+
+  describe('When mounted', function () {
+    it('Should render successfully', function () {
+      assert.isTrue(wrapper.exists());
+    });
+  });
+
+  describe('When a value is provided', function () {
+    beforeEach(async function () {
+      await wrapper.setProps({
+        value: inputValue,
+      });
+      _setChildWrappers();
+    });
+
+    it('Should set the native input to value', function () {
+      assert.equal(inputValue, inputWrapper.element.checked);
+    });
+  });
+
+  describe('When a value is not provided', function () {
+    beforeEach(function () {
+      _mountWrapper();
+    });
+
+    it('Should set the native input to control default', function () {
+      assert.equal(defaultValue, inputWrapper.element.checked);
+    });
+  });
+});
diff --git a/packages/combinator/src/components/controls/control_boolean.vue b/packages/combinator/src/components/controls/control_boolean.vue
new file mode 100644
index 0000000000..465d436443
--- /dev/null
+++ b/packages/combinator/src/components/controls/control_boolean.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="dtc-control-boolean">
+    <dt-checkbox
+      label-class="dtc-control-boolean__label"
+      :checked="value"
+      :disabled="disabled"
+      data-qa="dtc-control-boolean-input"
+      @input="e => emit(VALUE_UPDATE_EVENT, e)"
+    >
+      <slot />
+    </dt-checkbox>
+  </div>
+</template>
+
+<script setup>
+import { DtCheckbox } from '@dialpad/dialtone-vue';
+import { VALUE_UPDATE_EVENT } from '@/src/lib/constants';
+
+defineProps({
+  value: {
+    type: Boolean,
+    default: () => false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits([VALUE_UPDATE_EVENT]);
+</script>
+
+<script>
+/**
+ * Control that is used to set 'boolean' value.
+ */
+export default {
+  name: 'DtcControlBoolean',
+};
+</script>
+
+<style>
+.dtc-control-boolean .d-checkbox__input {
+  align-self: center;
+}
+
+.dtc-control-boolean__label {
+  color: var(--base--text-color);
+  font-size: var(--base--font-size);
+}
+</style>
diff --git a/packages/combinator/src/components/controls/control_dynamic.test.js b/packages/combinator/src/components/controls/control_dynamic.test.js
new file mode 100644
index 0000000000..82c02ddad1
--- /dev/null
+++ b/packages/combinator/src/components/controls/control_dynamic.test.js
@@ -0,0 +1,93 @@
+import DtcControlDynamic from './control_dynamic';
+import DtcControlNumber from '@/src/components/controls/control_number';
+import DtcControlString from '@/src/components/controls/control_string';
+
+import { assert } from 'chai';
+import { mount } from '@vue/test-utils';
+import { UNSET } from '@/src/lib/control';
+
+const selectionSelector = '[data-qa=dtc-control-dynamic-selection]';
+const inputSelector = 'select';
+
+const testControls = {
+  string: {
+    value: 'string test',
+    component: DtcControlString,
+  },
+  number: {
+    value: 17,
+    component: DtcControlNumber,
+  },
+  true: {
+    value: true,
+  },
+  false: {
+    value: false,
+  },
+  null: {
+    value: null,
+  },
+  undefined: {
+    value: undefined,
+  },
+};
+
+const defaultValue = undefined;
+
+describe('control_dynamic.vue test', function () {
+  let wrapper;
+  let selectionWrapper;
+  let inputWrapper;
+
+  const _mountWrapper = () => {
+    wrapper = mount(DtcControlDynamic);
+    _setChildWrappers();
+  };
+
+  const _setChildWrappers = () => {
+    selectionWrapper = wrapper?.find(selectionSelector);
+    inputWrapper = selectionWrapper?.find(inputSelector);
+  };
+
+  before(function () {
+    _mountWrapper();
+  });
+
+  describe('When mounted', function () {
+    beforeEach(async function () {
+      await wrapper.setProps({
+        value: defaultValue,
+      });
+    });
+
+    it('Should render successfully', function () {
+      assert.isTrue(wrapper.exists());
+    });
+  });
+
+  Object.entries(testControls).forEach(([control, { value, component }]) => {
+    describe(
+      `When provided value is '${value === UNSET ? `${UNSET.toString()}` : value}' {${typeof value}}`,
+      function () {
+        beforeEach(function () {
+          wrapper = mount(DtcControlDynamic, {
+            props: {
+              value,
+            },
+          });
+          _setChildWrappers();
+        });
+
+        it(`Should set selection to '${control}'`, function () {
+          assert.equal(inputWrapper.element.value, control);
+        });
+
+        if (component) {
+          it(`Should set the generated control to '${component.name}'`, function () {
+            assert.exists(wrapper.findComponent(component));
+          });
+        }
+      },
+    );
+  });
+});
diff --git a/packages/combinator/src/components/controls/control_dynamic.vue b/packages/combinator/src/components/controls/control_dynamic.vue
new file mode 100644
index 0000000000..bb3ae96631
--- /dev/null
+++ b/packages/combinator/src/components/controls/control_dynamic.vue
@@ -0,0 +1,135 @@
+<template>
+  <div>
+    <slot />
+    <div data-qa="dtc-control-dynamic-selection">
+      <dtc-control-selection
+        :value="selectedControl"
+        :valid-values="controlSelections"
+        :disabled="disabled"
+        @update:value="updateControl"
+      />
+    </div>
+    <div
+      class="d-ps-relative d-b1"
+      :class="inputClass"
+      data-qa="dtc-control-dynamic-value"
+    >
+      <component
+        :is="controlComponent"
+        v-if="controlComponent"
+        v-bind="bindings"
+        :value="value"
+        @update:value="updateValue"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import DtcControlSelection from './control_selection';
+
+import { controlMap, getControlByValue, UNSET } from '@/src/lib/control';
+import { VALUE_UPDATE_EVENT } from '@/src/lib/constants';
+import { computed, ref } from 'vue';
+
+const props = defineProps({
+  value: {
+    type: undefined,
+    default: () => UNSET,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  inputClass: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits([VALUE_UPDATE_EVENT]);
+
+const bindings = computed(() => {
+  return {
+    disabled: props.disabled,
+  };
+});
+
+/**
+ * Controls from the 'control map' to include in selections.
+ *
+ * @type {Array}
+ */
+const externalControls = [
+  'string',
+  'number',
+  'array',
+  'object',
+];
+
+const controlSelectionMap = {
+  ...Object.fromEntries(
+    Object.entries(controlMap).filter(([controlName]) => {
+      return externalControls.includes(controlName);
+    }),
+  ),
+  true: {
+    component: null,
+    default () { return true; },
+  },
+  false: {
+    component: null,
+    default () { return false; },
+  },
+  null: {
+    component: null,
+    default () { return null; },
+  },
+  undefined: {
+    component: null,
+    default () { return UNSET; },
+  },
+};
+
+const controlSelections = computed(() => Object.keys(controlSelectionMap));
+const selectedControl = ref(getControl());
+
+const controlComponent = computed(() => {
+  return controlSelectionMap[selectedControl.value].component;
+});
+
+function getControl () {
+  const value = props.value;
+
+  switch (value) {
+    case UNSET: return 'undefined';
+    case null: return 'null';
+    case false: return 'false';
+    case true: return 'true';
+  }
+
+  const control = getControlByValue(value);
+
+  return control === 'base'
+    ? controlMap.dynamic.defaultControl()
+    : control;
+}
+
+function updateControl (e) {
+  selectedControl.value = e;
+  updateValue(controlSelectionMap[e].default());
+}
+
+function updateValue (e) {
+  emit(VALUE_UPDATE_EVENT, e);
+}
+</script>
+
+<script>
+/**
+ * Control that is used to set a value from a variety of data types.
+ */
+export default {
+  name: 'DtcControlDynamic',
+};
+</script>
diff --git a/packages/combinator/src/components/controls/control_event.test.js b/packages/combinator/src/components/controls/control_event.test.js
new file mode 100644
index 0000000000..ebf5684809
--- /dev/null
+++ b/packages/combinator/src/components/controls/control_event.test.js
@@ -0,0 +1,18 @@
+import DtcControlEvent from './control_event';
+
+import { assert } from 'chai';
+import { mount } from '@vue/test-utils';
+
+describe('control_event.vue test', function () {
+  let wrapper;
+
+  before(function () {
+    wrapper = mount(DtcControlEvent);
+  });
+
+  describe('When mounted', function () {
+    it('Should render successfully', function () {
+      assert.isTrue(wrapper.exists());
+    });
+  });
+});
diff --git a/packages/combinator/src/components/controls/control_event.vue b/packages/combinator/src/components/controls/control_event.vue
new file mode 100644
index 0000000000..ac4022ed76
--- /dev/null
+++ b/packages/combinator/src/components/controls/control_event.vue
@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <slot />
+  </div>
+</template>
+
+<script>
+/**
+ * Control that is used to display an event of a component.
+ */
+export default {
+  name: 'DtcControlEvent',
+};
+</script>
diff --git a/packages/combinator/src/components/controls/control_iterable.test.js b/packages/combinator/src/components/controls/control_iterable.test.js
new file mode 100644
index 0000000000..6799c01ac9
--- /dev/null
+++ b/packages/combinator/src/components/controls/control_iterable.test.js
@@ -0,0 +1,23 @@
+import DtcControlIterable from './control_iterable';
+
+import { assert } from 'chai';
+import { mount } from '@vue/test-utils';
+
+describe('control_iterable.vue test', function () {
+  let wrapper;
+
+  before(function () {
+    wrapper = mount(DtcControlIterable, {
+      props: {
+        value: [],
+        generateItem: () => null,
+      },
+    });
+  });
+
+  describe('When mounted', function () {
+    it('Should render successfully', function () {
+      assert.isTrue(wrapper.exists());
+    });
+  });
+});
diff --git a/packages/combinator/src/components/controls/control_iterable.vue b/packages/combinator/src/components/controls/control_iterable.vue
new file mode 100644
index 0000000000..8c3242ffa1
--- /dev/null
+++ b/packages/combinator/src/components/controls/control_iterable.vue
@@ -0,0 +1,136 @@
+<template>
+  <div>
+    <div>
+      <slot />
+    </div>
+    <div class="d-fs18">
+      <slot name="prefix" />
+    </div>
+    <div>
+      <template
+        v-for="(item, index) in value"
+        :key="getId(index)"
+      >
+        <div class="d-d-flex d-my1">
+          <div class="d-fl-grow1">
+            <dt-list-item
+              class="d-p6 d-pl0"
+              navigation-type="tab"
+              type="custom"
+            >
+              <slot
+                name="item"
+                :item="item"
+                :update="(e) => updateItem(index, e)"
+              />
+            </dt-list-item>
+          </div>
+          <div>
+            <dt-button
+              class="dtc-icon d-px0 d-py6 d-ps-relative d-t6"
+              importance="clear"
+              size="xs"
+              :disabled="disabled"
+              @click="() => removeItem(index)"
+            >
+              <IconRemove />
+            </dt-button>
+          </div>
+        </div>
+      </template>
+      <div>
+        <dt-button
+          class="dtc-icon d-p0 d-mt8"
+          importance="clear"
+          :disabled="disabled"
+          @click="addItem"
+        >
+          <icon-add />
+        </dt-button>
+      </div>
+    </div>
+    <div class="d-fs18">
+      <slot name="suffix" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import IconAdd from 'dialtone-icons/IconAddCircleOutline';
+import IconRemove from 'dialtone-icons/IconRemove';
+import { DtButton, DtListItem } from '@dialpad/dialtone-vue';
+import { DEFAULT_PREFIX, VALUE_UPDATE_EVENT } from '@/src/lib/constants';
+import { idMap } from '@/src/lib/utils_vue';
+import { getUniqueString } from '@/src/lib/utils';
+
+const props = defineProps({
+  value: {
+    type: Array,
+    required: true,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * Function that returns an item to append to list.
+   */
+  generateItem: {
+    type: Function,
+    required: true,
+  },
+});
+
+const emit = defineEmits([VALUE_UPDATE_EVENT]);
+
+const prefix = getUniqueString(`${DEFAULT_PREFIX}-control-iterable`);
+
+/**
+ * Id map is used to keep v-for keys in order when adding and removing new items.
+ */
+const { addId, removeId, getId } = idMap(`${prefix}-item`);
+
+function updateItem (index, item) {
+  const items = [...props.value];
+
+  items.splice(index, 1, item);
+
+  updateValue(items);
+}
+
+function addItem () {
+  const items = [
+    ...props.value,
+    props.generateItem(),
+  ];
+
+  addId();
+
+  updateValue(items);
+}
+
+function removeItem (index) {
+  const items = [...props.value];
+
+  items.splice(index, 1);
+
+  removeId(index);
+
+  updateValue(items);
+}
+
+function updateValue (e) {
+  emit(VALUE_UPDATE_EVENT, e);
+}
+</script>
+
+<script>
+/**
+ * Control that is used to provide an interface to modify generic iterable values.
+ * The important parts of the functionality are abstracted to the parent to allow
+ * reuse of this control for any iterable value type.
+ */
+export default {
+  name: 'DtcControlIterable',
+};
+</script>
diff --git a/packages/combinator/src/components/controls/control_nullish.test.js b/packages/combinator/src/components/controls/control_nullish.test.js
new file mode 100644
index 0000000000..41411581de
--- /dev/null
+++ b/packages/combinator/src/components/controls/control_nullish.test.js
@@ -0,0 +1,58 @@
+import DtcControlNullish from './control_nullish';
+
+import { assert } from 'chai';
+import { mount } from '@vue/test-utils';
+import { UNSET } from '@/src/lib/control';
+
+const inputSelector = 'select';
+
+const inputValue = UNSET;
+
+const inputString = 'undefined';
+const defaultString = 'null';
+
+describe('control_nullish.vue test', function () {
+  let wrapper;
+  let inputWrapper;
+
+  const _mountWrapper = () => {
+    wrapper = mount(DtcControlNullish);
+    _setChildWrappers();
+  };
+
+  const _setChildWrappers = () => {
+    inputWrapper = wrapper.find(inputSelector);
+  };
+
+  before(function () {
+    _mountWrapper();
+  });
+
+  describe('When mounted', function () {
+    it('Should render successfully', function () {
+      assert.isTrue(wrapper.exists());
+    });
+  });
+
+  describe('When a value is provided', function () {
+    beforeEach(async function () {
+      await wrapper.setProps({
+        value: inputValue,
+      });
+    });
+
+    it('Should set the native input to value', function () {
+      assert.equal(inputString, inputWrapper.element.value);
+    });
+  });
+
+  describe('When a value is not provided', function () {
+    beforeEach(function () {
+      _mountWrapper();
+    });
+
+    it('Should set the native input to control default', function () {
+      assert.equal(defaultString, inputWrapper.element.value);
+    });
+  });
+});
diff --git a/packages/combinator/src/components/controls/control_nullish.vue b/packages/combinator/src/components/controls/control_nullish.vue
new file mode 100644
index 0000000000..bbbb945605
--- /dev/null
+++ b/packages/combinator/src/components/controls/control_nullish.vue
@@ -0,0 +1,58 @@
+<template>
+  <dtc-control-selection
+    :value="selection"
+    :valid-values="selections"
+    :disabled="disabled"
+    @update:value="updateValue"
+  >
+    <slot />
+  </dtc-control-selection>
+</template>
+
+<script setup>
+import DtcControlSelection from './control_selection';
+import { computed } from 'vue';
+import { VALUE_UPDATE_EVENT } from '@/src/lib/constants';
+import { UNSET } from '@/src/lib/control';
+
+const props = defineProps({
+  value: {
+    type: undefined,
+    default: () => null,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits([VALUE_UPDATE_EVENT]);
+
+const selectionMap = {
+  undefined: UNSET,
+  null: null,
+};
+
+const selections = computed(() => {
+  return Object.keys(selectionMap);
+});
+
+const selection = computed(() => {
+  return Object.keys(selectionMap).find(selection => {
+    return Object.is(props.value, selectionMap[selection]);
+  });
+});
+
+function updateValue (e) {
+  emit(VALUE_UPDATE_EVENT, selectionMap[e]);
+}
+</script>
+
+<script>
+/**
+ * Control that is used to set nullish values.
+ */
+export default {
+  name: 'DtcControlNullish',
+};
+</script>
diff --git a/packages/combinator/src/components/controls/control_number.test.js b/packages/combinator/src/components/controls/control_number.test.js
new file mode 100644
index 0000000000..b53c987d55
--- /dev/null
+++ b/packages/combinator/src/components/controls/control_number.test.js
@@ -0,0 +1,56 @@
+import DtcControlNumber from './control_number';
+
+import { assert } from 'chai';
+import { mount } from '@vue/test-utils';
+
+const inputSelector = 'input';
+
+const inputValue = 5;
+const defaultValue = DtcControlNumber.props.value.default();
+
+describe('control_number.vue test', function () {
+  let wrapper;
+  let inputWrapper;
+
+  const _mountWrapper = () => {
+    wrapper = mount(DtcControlNumber);
+    _setChildWrappers();
+  };
+
+  const _setChildWrappers = () => {
+    inputWrapper = wrapper.find(inputSelector);
+  };
+
+  before(function () {
+    _mountWrapper();
+  });
+
+  describe('When mounted', function () {
+    it('Should render successfully', function () {
+      assert.isTrue(wrapper.exists());
+    });
+  });
+
+  describe('When a value is provided', function () {
+    beforeEach(async function () {
+      await wrapper.setProps({
+        value: inputValue,
+      });
+      _setChildWrappers();
+    });
+
+    it('Should set the native input to value', function () {
+      assert.equal(inputValue, inputWrapper.element.value);
+    });
+  });
+
+  describe('When a value is not provided', function () {
+    beforeEach(function () {
+      _mountWrapper();
+    });
+
+    it('Should set the native input to control default', function () {
+      assert.equal(defaultValue, inputWrapper.element.value);
+    });
+  });
+});
diff --git a/packages/combinator/src/components/controls/control_number.vue b/packages/combinator/src/components/controls/control_number.vue
new file mode 100644
index 0000000000..572adb97ef
--- /dev/null
+++ b/packages/combinator/src/components/controls/control_number.vue
@@ -0,0 +1,65 @@
+<template>
+  <div class="d-d-flex d-ai-flex-end">
+    <div class="d-fl-grow1">
+      <dt-input
+        :value="inputValue"
+        :disabled="disabled || isNaN(value)"
+        type="number"
+        size="sm"
+        @input="e => emit(VALUE_UPDATE_EVENT, parseInt(e))"
+      >
+        <template #labelSlot>
+          <slot />
+        </template>
+      </dt-input>
+    </div>
+    <div class="d-pl6">
+      <dt-checkbox
+        label="NaN"
+        :checked="isNaN(value)"
+        :disabled="disabled"
+        @input="toggleNaN"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { DtInput, DtCheckbox } from '@dialpad/dialtone-vue';
+import { VALUE_UPDATE_EVENT } from '@/src/lib/constants';
+import { computed } from 'vue';
+
+const props = defineProps({
+  value: {
+    type: Number,
+    default: () => Number(),
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+function isNaN (value) {
+  return Number.isNaN(value);
+}
+
+const inputValue = computed(() => {
+  return isNaN(props.value) ? null : props.value;
+});
+
+function toggleNaN (e) {
+  emit(VALUE_UPDATE_EVENT, e ? NaN : 0);
+}
+
+const emit = defineEmits([VALUE_UPDATE_EVENT]);
+</script>
+
+<script>
+/**
+ * Control that is used to set 'number' value.
+ */
+export default {
+  name: 'DtcControlNumber',
+};
+</script>
diff --git a/packages/combinator/src/components/controls/control_object.test.js b/packages/combinator/src/components/controls/control_object.test.js
new file mode 100644
index 0000000000..10e934d620
--- /dev/null
+++ b/packages/combinator/src/components/controls/control_object.test.js
@@ -0,0 +1,81 @@
+import DtcControlObject from './control_object';
+
+import { assert } from 'chai';
+import { mount } from '@vue/test-utils';
+
+const itemKeySelector = '[data-qa=dtc-control-object-item-key]';
+const itemKeyInputSelector = 'input';
+
+const itemValueSelector = '[data-qa=dtc-control-object-item-value]';
+const itemValueInputSelector = 'input';
+
+const inputValues = {
+  key1: 'value1',
+  key2: 'value2',
+  key3: 'value3',
+  key4: 4,
+};
+
+describe('control_object.vue test', function () {
+  let wrapper;
+  let itemKeyWrappers;
+  let itemKeyInputWrappers;
+  let itemValueWrappers;
+  let itemValueInputWrappers;
+
+  const _mountWrapper = () => {
+    wrapper = mount(DtcControlObject);
+    _setChildWrappers();
+  };
+
+  const _setChildWrappers = () => {
+    itemKeyWrappers = wrapper.findAll(itemKeySelector);
+    itemKeyInputWrappers = itemKeyWrappers.map(itemWrapper => itemWrapper.find(itemKeyInputSelector));
+    itemValueWrappers = wrapper.findAll(itemValueSelector);
+    itemValueInputWrappers = itemValueWrappers.map(itemWrapper => itemWrapper.find(itemValueInputSelector));
+  };
+
+  before(function () {
+    _mountWrapper();
+  });
+
+  describe('When mounted', function () {
+    it('Should render successfully', function () {
+      assert.isTrue(wrapper.exists());
+    });
+  });
+
+  describe('When a value is provided', function () {
+    beforeEach(async function () {
+      await wrapper.setProps({
+        value: inputValues,
+      });
+      _setChildWrappers();
+    });
+
+    it('Should generate a key control and a value control for each object entry', function () {
+      assert.equal(Object.keys(inputValues).length, itemKeyWrappers.length);
+      assert.equal(Object.values(inputValues).length, itemValueWrappers.length);
+    });
+
+    // Checking if each key-value pair passed to the component has native inputs with a matching values
+    describe('Should have matching control and native input values', function () {
+      Object.entries(inputValues).forEach(([inputKey, inputValue]) => {
+        it(`Should have a matching native input for key '${inputKey}'`, function () {
+          const itemKeys = itemKeyInputWrappers.map(inputWrapper => {
+            return inputWrapper.element.value;
+          });
+
+          assert.isTrue(itemKeys.includes(inputKey));
+        });
+
+        it(`Should have a matching native input for value '${inputValue}'`, function () {
+          const itemValues = itemValueInputWrappers.map(inputWrapper => {
+            return inputWrapper.element.value;
+          });
+          assert.isTrue(itemValues.includes(inputValue.toString()));
+        });
+      });
+    });
+  });
+});
diff --git a/packages/combinator/src/components/controls/control_object.vue b/packages/combinator/src/components/controls/control_object.vue
new file mode 100644
index 0000000000..25f92de2ea
--- /dev/null
+++ b/packages/combinator/src/components/controls/control_object.vue
@@ -0,0 +1,124 @@
+<template>
+  <dtc-control-iterable
+    :value="entries"
+    :disabled="disabled"
+    :generate-item="generateItem"
+    @update:value="updateValue"
+  >
+    <template #default>
+      <slot />
+    </template>
+    <template #prefix>
+      {
+    </template>
+    <template #item="{ item, update }">
+      <div class="d-d-grid d-g-cols2">
+        <div
+          class="d-d-flex"
+          data-qa="dtc-control-object-item-key"
+        >
+          <dtc-control-string
+            :value="item[0]"
+            :disabled="disabled"
+            @update:value="e => updateKey(e, item[1], update)"
+          />
+          <span class="d-px6 d-ps-relative d-t6">:</span>
+        </div>
+        <div
+          class="dtc-control-object__contents"
+          data-qa="dtc-control-object-item-value"
+        >
+          <dtc-control-dynamic
+            class="dtc-control-object__contents"
+            input-class="d-gc-full"
+            :value="serializeControlValue(item[1])"
+            :disabled="disabled"
+            @update:value="e => updateEntry(item[0], deserializeControlValue(e), update)"
+          />
+        </div>
+      </div>
+    </template>
+    <template #suffix>
+      }
+    </template>
+  </dtc-control-iterable>
+</template>
+
+<script setup>
+import DtcControlString from './control_string';
+import DtcControlIterable from './control_iterable';
+import DtcControlDynamic from './control_dynamic';
+import { VALUE_UPDATE_EVENT } from '@/src/lib/constants';
+import { computed } from 'vue';
+import { serializeControlValue, deserializeControlValue } from '@/src/lib/control';
+import { OrderedObject } from '@/src/lib/ordered_object';
+
+const props = defineProps({
+  value: {
+    type: Object,
+    default: () => ({}),
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits([VALUE_UPDATE_EVENT]);
+
+const entries = computed(() => {
+  return props.value ? Object.entries(props.value) : [];
+});
+
+const keys = computed(() => {
+  return entries.value.map(([key]) => key);
+});
+
+let currentId = 0;
+function generateNextId () {
+  while (keys.value.includes(currentId.toString())) {
+    currentId++;
+  }
+
+  return currentId.toString();
+}
+
+function generateItem () {
+  return [generateNextId(), undefined];
+}
+
+function updateKey (key, value, updateItem) {
+  if (keys.value.includes(key)) {
+    const id = generateNextId();
+    console.log(`Object cannot contain duplicate key '${key}', key set to '${id}'`);
+    key = id;
+  }
+
+  updateEntry(key, value, updateItem);
+}
+
+function updateEntry (key, value, updateItem) {
+  updateItem([key, value]);
+}
+
+function updateValue (e) {
+  const orderedObject = OrderedObject.fromEntries(e);
+
+  emit(VALUE_UPDATE_EVENT, orderedObject);
+}
+</script>
+
+<script>
+/**
+ * Control that is used to provide functionality to manipulate objects.
+ */
+export default {
+  name: 'DtcControlObject',
+};
+</script>
+
+<style>
+.dtc-control-object__contents {
+  display: contents;
+}
+</style>
diff --git a/packages/combinator/src/components/controls/control_selection.test.js b/packages/combinator/src/components/controls/control_selection.test.js
new file mode 100644
index 0000000000..485b251a87
--- /dev/null
+++ b/packages/combinator/src/components/controls/control_selection.test.js
@@ -0,0 +1,65 @@
+import DtcControlSelection from './control_selection';
+
+import { assert } from 'chai';
+import { mount } from '@vue/test-utils';
+
+const inputSelector = 'select';
+const optionSelector = 'option';
+
+const selections = [
+  'selection1',
+  'selection2',
+  'selection3',
+];
+
+const inputValue = selections[1];
+
+describe('control_selection.vue test', function () {
+  let wrapper;
+  let inputWrapper;
+  let optionWrappers;
+
+  const _mountWrapper = () => {
+    wrapper = mount(DtcControlSelection, {
+      props: {
+        value: inputValue,
+        validValues: selections,
+      },
+    });
+    _setChildWrappers();
+  };
+
+  const _setChildWrappers = () => {
+    inputWrapper = wrapper.find(inputSelector);
+    optionWrappers = wrapper.findAll(optionSelector);
+  };
+
+  before(function () {
+    _mountWrapper();
+  });
+
+  describe('When mounted', function () {
+    it('Should render successfully', function () {
+      assert.isTrue(wrapper.exists());
+    });
+  });
+
+  describe('When rendering the native select', function () {
+    describe('Should create option elements for each selection', function () {
+      selections.forEach(selection => {
+        it(`Should have a matching option element for selection '${selection}'`, function () {
+          const optionValues = optionWrappers.map(optionWrapper => {
+            return optionWrapper.element.value;
+          });
+          assert.isTrue(optionValues.includes(selection));
+        });
+      });
+    });
+
+    describe('When a value is provided', function () {
+      it('Should set the native input to value', function () {
+        assert.equal(inputValue, inputWrapper.element.value);
+      });
+    });
+  });
+});
diff --git a/packages/combinator/src/components/controls/control_selection.vue b/packages/combinator/src/components/controls/control_selection.vue
new file mode 100644
index 0000000000..8521361d25
--- /dev/null
+++ b/packages/combinator/src/components/controls/control_selection.vue
@@ -0,0 +1,57 @@
+<template>
+  <dt-select-menu
+    label-class="d-fs16 d-fw-normal d-mb0"
+    :value="value"
+    :options="options"
+    :disabled="disabled"
+    size="xs"
+    @input="e => emit(VALUE_UPDATE_EVENT, e)"
+  >
+    <template #label>
+      <slot />
+    </template>
+  </dt-select-menu>
+</template>
+
+<script setup>
+import { DtSelectMenu } from '@dialpad/dialtone-vue';
+
+import { VALUE_UPDATE_EVENT } from '@/src/lib/constants';
+import { computed } from 'vue';
+
+const props = defineProps({
+  value: {
+    type: undefined,
+    required: true,
+  },
+  validValues: {
+    type: Array,
+    default: undefined,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  generateLabel: {
+    type: Function,
+    default: (value) => value.toString(),
+  },
+});
+
+const emit = defineEmits([VALUE_UPDATE_EVENT]);
+
+const options = computed(() => {
+  return props.validValues?.map(selection => {
+    return { value: selection, label: props.generateLabel(selection) };
+  });
+});
+</script>
+
+<script>
+/**
+ * Control that is used to select any value from a list of values.
+ */
+export default {
+  name: 'DtcControlSelection',
+};
+</script>
diff --git a/packages/combinator/src/components/controls/control_slot.test.js b/packages/combinator/src/components/controls/control_slot.test.js
new file mode 100644
index 0000000000..6c516d628a
--- /dev/null
+++ b/packages/combinator/src/components/controls/control_slot.test.js
@@ -0,0 +1,56 @@
+import DtcControlSlot from './control_slot';
+
+import { assert } from 'chai';
+import { mount } from '@vue/test-utils';
+
+const inputSelector = 'textarea';
+
+const inputValue = 'slot test';
+const defaultValue = '';
+
+describe('control_slot.vue test', function () {
+  let wrapper;
+  let inputWrapper;
+
+  const _mountWrapper = () => {
+    wrapper = mount(DtcControlSlot);
+    _setChildWrappers();
+  };
+
+  const _setChildWrappers = () => {
+    inputWrapper = wrapper.find(inputSelector);
+  };
+
+  before(function () {
+    _mountWrapper();
+  });
+
+  describe('When mounted', function () {
+    it('Should render successfully', function () {
+      assert.isTrue(wrapper.exists());
+    });
+  });
+
+  describe('When a value is provided', function () {
+    beforeEach(async function () {
+      await wrapper.setProps({
+        value: inputValue,
+      });
+      _setChildWrappers();
+    });
+
+    it('Should set the native input to value', function () {
+      assert.equal(inputValue, inputWrapper.element.value);
+    });
+  });
+
+  describe('When a value is not provided', function () {
+    beforeEach(function () {
+      _mountWrapper();
+    });
+
+    it('Should set the native input to control default', function () {
+      assert.equal(defaultValue, inputWrapper.element.value);
+    });
+  });
+});
diff --git a/packages/combinator/src/components/controls/control_slot.vue b/packages/combinator/src/components/controls/control_slot.vue
new file mode 100644
index 0000000000..71813aa6af
--- /dev/null
+++ b/packages/combinator/src/components/controls/control_slot.vue
@@ -0,0 +1,46 @@
+<template>
+  <dt-input
+    :value="value"
+    :disabled="disabled"
+    class="d-r-none"
+    type="textarea"
+    spellcheck="false"
+    @input="updateValue"
+  >
+    <template #labelSlot>
+      <slot />
+    </template>
+  </dt-input>
+</template>
+
+<script setup>
+import { DtInput } from '@dialpad/dialtone-vue';
+import { VALUE_UPDATE_EVENT } from '@/src/lib/constants';
+
+defineProps({
+  value: {
+    type: undefined,
+    default: () => null,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits([VALUE_UPDATE_EVENT]);
+
+function updateValue (e) {
+  const value = e || null;
+  emit(VALUE_UPDATE_EVENT, value);
+}
+</script>
+
+<script>
+/**
+ * Control that is used to set a string representing the slot content of a component.
+ */
+export default {
+  name: 'DtcControlSlot',
+};
+</script>
diff --git a/packages/combinator/src/components/controls/control_string.test.js b/packages/combinator/src/components/controls/control_string.test.js
new file mode 100644
index 0000000000..6cd69dfc6e
--- /dev/null
+++ b/packages/combinator/src/components/controls/control_string.test.js
@@ -0,0 +1,60 @@
+import DtcControlString from './control_string';
+
+import { assert } from 'chai';
+import { mount } from '@vue/test-utils';
+
+const inputSelector = 'input';
+
+const inputValue = 'string test';
+const defaultValue = DtcControlString.props.value.default();
+
+describe('control_string.vue test', function () {
+  let wrapper;
+  let inputWrapper;
+
+  beforeEach(function () {
+    wrapper = mount(DtcControlString);
+  });
+
+  const _mountWrapper = () => {
+    wrapper = mount(DtcControlString);
+    _setChildWrappers();
+  };
+
+  const _setChildWrappers = () => {
+    inputWrapper = wrapper.find(inputSelector);
+  };
+
+  before(function () {
+    _mountWrapper();
+  });
+
+  describe('When mounted', function () {
+    it('Should render successfully', function () {
+      assert.isTrue(wrapper.exists());
+    });
+  });
+
+  describe('When a value is provided', function () {
+    beforeEach(async function () {
+      await wrapper.setProps({
+        value: inputValue,
+      });
+      _setChildWrappers();
+    });
+
+    it('Should set the native input to value', function () {
+      assert.equal(inputValue, inputWrapper.element.value);
+    });
+  });
+
+  describe('When a value is not provided', function () {
+    beforeEach(function () {
+      _mountWrapper();
+    });
+
+    it('Should set the native input to control default', function () {
+      assert.equal(defaultValue, inputWrapper.element.value);
+    });
+  });
+});
diff --git a/packages/combinator/src/components/controls/control_string.vue b/packages/combinator/src/components/controls/control_string.vue
new file mode 100644
index 0000000000..d7c7255e5a
--- /dev/null
+++ b/packages/combinator/src/components/controls/control_string.vue
@@ -0,0 +1,61 @@
+<template>
+  <dt-input
+    :value="value"
+    :disabled="disabled"
+    :messages="messages"
+    size="sm"
+    @input="e => emit(VALUE_UPDATE_EVENT, e)"
+  >
+    <template #labelSlot>
+      <span>
+        <slot />
+      </span>
+    </template>
+    <template #rightIcon>
+      <slot name="icon" />
+    </template>
+  </dt-input>
+</template>
+
+<script setup>
+import { DtInput, VALIDATION_MESSAGE_TYPES } from '@dialpad/dialtone-vue';
+import { VALUE_UPDATE_EVENT } from '@/src/lib/constants';
+import { computed } from 'vue';
+
+const props = defineProps({
+  value: {
+    type: String,
+    default: () => String(),
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  warning: {
+    type: String,
+    default: undefined,
+  },
+});
+
+const emit = defineEmits([VALUE_UPDATE_EVENT]);
+
+const messages = computed(() => {
+  const messages = [];
+  if (props.warning) {
+    messages.push({
+      message: props.warning,
+      type: VALIDATION_MESSAGE_TYPES.WARNING,
+    });
+  }
+  return messages;
+});
+</script>
+
+<script>
+/**
+ * Control that is used to set 'string' value.
+ */
+export default {
+  name: 'DtcControlString',
+};
+</script>
diff --git a/packages/combinator/src/components/controls/control_suggestion.vue b/packages/combinator/src/components/controls/control_suggestion.vue
new file mode 100644
index 0000000000..92b5f28229
--- /dev/null
+++ b/packages/combinator/src/components/controls/control_suggestion.vue
@@ -0,0 +1,120 @@
+<template>
+  <div>
+    <dt-recipe-combobox-with-popover
+      ref="combobox"
+      list-aria-label="Valid values"
+      max-height="512px"
+      @select="e => onUpdate(suggestions[e])"
+      @opened="onOpen"
+    >
+      <template #input="{ inputProps, onInput }">
+        <dtc-control-string
+          v-bind="inputProps"
+          :value="value"
+          :warning="warning"
+          :disabled="disabled"
+          @input="e => onInputInternal(e, onInput)"
+        >
+          <template #default>
+            <slot />
+          </template>
+          <template #icon>
+            <icon-collapse v-if="open" />
+            <icon-expand v-else />
+          </template>
+        </dtc-control-string>
+      </template>
+      <template #list="{ listProps }">
+        <ul
+          class="d-p0"
+          v-bind="listProps"
+        >
+          <dt-list-item
+            v-for="(item, i) in suggestions"
+            :key="item"
+            navigation-type="arrow-keys"
+            role="option"
+            @click="onSelectInternal(i)"
+          >
+            <slot
+              name="item"
+              :value="item"
+            >
+              {{ item }}
+            </slot>
+          </dt-list-item>
+        </ul>
+      </template>
+    </dt-recipe-combobox-with-popover>
+  </div>
+</template>
+
+<script setup>
+import DtcControlString from './control_string';
+import IconExpand from 'dialtone-icons/IconArrowKeyboardDown';
+import IconCollapse from 'dialtone-icons/IconArrowKeyboardUp';
+import { DtRecipeComboboxWithPopover, DtListItem } from '@dialpad/dialtone-vue';
+
+import { VALUE_UPDATE_EVENT } from '@/src/lib/constants';
+import { computed, ref } from 'vue';
+
+const WARNING_MESSAGE = 'Unexpected value';
+
+const props = defineProps({
+  value: {
+    type: String,
+    required: true,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  suggestions: {
+    type: Array,
+    required: true,
+  },
+  warn: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits([VALUE_UPDATE_EVENT]);
+
+const warning = computed(() => {
+  return props.warn && !props.suggestions.includes(props.value)
+    ? WARNING_MESSAGE
+    : undefined;
+});
+
+const combobox = ref();
+
+function onSelectInternal (i) {
+  combobox.value.onSelect(i);
+  combobox.value.closeComboboxList();
+}
+
+function onInputInternal (value, onInput) {
+  onInput(value);
+  onUpdate(value);
+}
+
+function onUpdate (value) {
+  emit(VALUE_UPDATE_EVENT, value);
+}
+
+const open = ref(false);
+
+function onOpen (e) {
+  open.value = e;
+}
+</script>
+
+<script>
+/**
+ * Control that is used to set a string value while providing a list of suggested valid values.
+ */
+export default {
+  name: 'DtcControlSuggestion',
+};
+</script>
diff --git a/packages/combinator/src/components/event_console/event_console.test.js b/packages/combinator/src/components/event_console/event_console.test.js
new file mode 100644
index 0000000000..c8479a0724
--- /dev/null
+++ b/packages/combinator/src/components/event_console/event_console.test.js
@@ -0,0 +1,18 @@
+import DtcEventConsole from './event_console';
+
+import { assert } from 'chai';
+import { mount } from '@vue/test-utils';
+
+describe('event_console.vue test', function () {
+  let wrapper;
+
+  beforeEach(function () {
+    wrapper = mount(DtcEventConsole);
+  });
+
+  describe('When mounted', function () {
+    it('Should render successfully', function () {
+      assert.exists(wrapper);
+    });
+  });
+});
diff --git a/packages/combinator/src/components/event_console/event_console.vue b/packages/combinator/src/components/event_console/event_console.vue
new file mode 100644
index 0000000000..07a66df89b
--- /dev/null
+++ b/packages/combinator/src/components/event_console/event_console.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="d-ws-pre-wrap">
+    <template
+      v-for="(entry, index) in entries"
+      :key="entry.key"
+    >
+      <div
+        data-qa="dtc-event-console-entry"
+      >
+        <dtc-event-console-pair
+          :name="entry.event"
+          :value="index < cacheSize
+            ? entry.value
+            : undefined"
+        >
+          <template #separator>
+            <span>
+              <IconArrowForward
+                v-if="entry.value !== undefined"
+                class="d-fs10 d-px6 d-ps-relative d-t2"
+              />
+            </span>
+          </template>
+        </dtc-event-console-pair>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import IconArrowForward from 'dialtone-icons/IconArrowForward';
+import DtcEventConsolePair from '@/src/components/event_console/event_console_pair';
+
+import { computed, ref } from 'vue';
+
+defineProps({
+  /**
+   * Amount of objects that are stored for expansion.
+   */
+  cacheSize: {
+    type: Number,
+    default: 10,
+  },
+});
+
+const entries = ref([]);
+
+let currentId = 0;
+defineExpose({
+  /**
+   * Add a new event to the console.
+   *
+   * @param event - The event name.
+   * @param value - The event value.
+   */
+  trigger (event, value) {
+    entries.value.unshift({
+      event,
+      value,
+      key: currentId++,
+    });
+  },
+
+  /**
+   * Number of events currently in console.
+   */
+  entryCount: computed(() => entries.value.length),
+});
+</script>
+
+<script>
+/**
+ * The event console displays data about events captured from the target component.
+ */
+export default {
+  name: 'DtcEventConsole',
+};
+</script>
diff --git a/packages/combinator/src/components/event_console/event_console_array.vue b/packages/combinator/src/components/event_console/event_console_array.vue
new file mode 100644
index 0000000000..0717ee2448
--- /dev/null
+++ b/packages/combinator/src/components/event_console/event_console_array.vue
@@ -0,0 +1,41 @@
+<template>
+  <dtc-event-console-lazy-load>
+    <template #prefix>
+      [
+    </template>
+    <template #default>
+      <span>[</span>
+      <template
+        v-for="(field, key) in value"
+        :key="key"
+      >
+        <dtc-event-console-pair
+          :name="key.toString()"
+          :value="field"
+        />
+      </template>
+      <span>]</span>
+    </template>
+    <template #suffix>
+      ]
+    </template>
+  </dtc-event-console-lazy-load>
+</template>
+
+<script setup>
+import DtcEventConsolePair from '@/src/components/event_console/event_console_pair';
+import DtcEventConsoleLazyLoad from '@/src/components/event_console/event_console_lazy_load';
+
+defineProps({
+  value: {
+    type: Array,
+    required: true,
+  },
+});
+</script>
+
+<script>
+export default {
+  name: 'DtcEventConsoleArray',
+};
+</script>
diff --git a/packages/combinator/src/components/event_console/event_console_element.vue b/packages/combinator/src/components/event_console/event_console_element.vue
new file mode 100644
index 0000000000..c4270d8d4a
--- /dev/null
+++ b/packages/combinator/src/components/event_console/event_console_element.vue
@@ -0,0 +1,39 @@
+<template>
+  <dtc-event-console-lazy-load>
+    <template #prefix>
+      &lt;
+    </template>
+    <template #default>
+      {{ html }}
+    </template>
+    <template #suffix>
+      &gt;
+    </template>
+  </dtc-event-console-lazy-load>
+</template>
+
+<script setup>
+import DtcEventConsoleLazyLoad from '@/src/components/event_console/event_console_lazy_load';
+import beautify from 'js-beautify';
+import { computed } from 'vue';
+
+const props = defineProps({
+  value: {
+    type: Element,
+    required: true,
+  },
+});
+
+const html = computed(() => {
+  return beautify.html(props.value.outerHTML, {
+    wrap_attributes: 'force-expand-multiline',
+    inline: '',
+  });
+});
+</script>
+
+<script>
+export default {
+  name: 'DtcEventConsoleElement',
+};
+</script>
diff --git a/packages/combinator/src/components/event_console/event_console_function.vue b/packages/combinator/src/components/event_console/event_console_function.vue
new file mode 100644
index 0000000000..10e1379aaa
--- /dev/null
+++ b/packages/combinator/src/components/event_console/event_console_function.vue
@@ -0,0 +1,12 @@
+<template>
+  <span>
+    <span class="dtc-scheme__function">function</span>
+    <span>()</span>
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'DtcEventConsoleFunction',
+};
+</script>
diff --git a/packages/combinator/src/components/event_console/event_console_lazy_load.vue b/packages/combinator/src/components/event_console/event_console_lazy_load.vue
new file mode 100644
index 0000000000..39df37fefa
--- /dev/null
+++ b/packages/combinator/src/components/event_console/event_console_lazy_load.vue
@@ -0,0 +1,60 @@
+<template>
+  <span>
+    <span v-if="!show">
+      <slot name="prefix" />
+      <dt-button
+        class="dtc-theme__button dtc-theme__interactive d-p4"
+        size="sm"
+        importance="clear"
+        @click="toggle"
+      >
+        <template #icon>
+          <IconExpand />
+        </template>
+      </dt-button>
+      <slot name="suffix" />
+    </span>
+    <span v-else>
+      <dt-button
+        class="dtc-theme__button dtc-theme__interactive d-p0"
+        size="xl"
+        importance="clear"
+        @click="toggle"
+      >
+        <template #icon>
+          <IconCollapse />
+        </template>
+      </dt-button>
+    </span>
+    <dt-lazy-show :show="show">
+      <slot />
+    </dt-lazy-show>
+  </span>
+</template>
+
+<script setup>
+import IconExpand from 'dialtone-icons/IconMenuHorizontal';
+import IconCollapse from 'dialtone-icons/IconArrowAccordion';
+
+import { DtButton, DtLazyShow } from '@dialpad/dialtone-vue';
+
+import { ref } from 'vue';
+
+const emit = defineEmits(['toggle']);
+
+const show = ref(false);
+
+function toggle () {
+  show.value = !show.value;
+  emit('toggle', show.value);
+}
+</script>
+
+<script>
+/**
+ * The lazy load provides generic functionality to not render content until the expand button is pressed.
+ */
+export default {
+  name: 'DtcEventConsoleLazyLoad',
+};
+</script>
diff --git a/packages/combinator/src/components/event_console/event_console_object.vue b/packages/combinator/src/components/event_console/event_console_object.vue
new file mode 100644
index 0000000000..b4da43523d
--- /dev/null
+++ b/packages/combinator/src/components/event_console/event_console_object.vue
@@ -0,0 +1,53 @@
+<template>
+  <dtc-event-console-lazy-load>
+    <template #prefix>
+      {
+    </template>
+    <template #default>
+      <span>{</span>
+      <template
+        v-for="(field, key) in clone"
+        :key="key"
+      >
+        <dtc-event-console-pair
+          :name="key"
+          :value="field"
+        />
+      </template>
+      <span>}</span>
+    </template>
+    <template #suffix>
+      }
+    </template>
+  </dtc-event-console-lazy-load>
+</template>
+
+<script setup>
+import { flatten } from '@/src/lib/utils';
+import { computed } from 'vue';
+import DtcEventConsolePair from '@/src/components/event_console/event_console_pair';
+import DtcEventConsoleLazyLoad from '@/src/components/event_console/event_console_lazy_load';
+
+const props = defineProps({
+  value: {
+    type: Object,
+    required: true,
+  },
+});
+
+/**
+ * Needs to be flattened to iterate through all prototype properties of the object.
+ * Not sure if there is a better way of doing this.
+ *
+ * @type {ComputedRef<object>}
+ */
+const clone = computed(() => {
+  return flatten(props.value);
+});
+</script>
+
+<script>
+export default {
+  name: 'DtcEventConsoleObject',
+};
+</script>
diff --git a/packages/combinator/src/components/event_console/event_console_pair.vue b/packages/combinator/src/components/event_console/event_console_pair.vue
new file mode 100644
index 0000000000..da53c6230e
--- /dev/null
+++ b/packages/combinator/src/components/event_console/event_console_pair.vue
@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <span>{{ name }}</span>
+    <slot name="separator">
+      <span>:&nbsp;</span>
+    </slot>
+    <span v-if="value !== undefined">
+      <component
+        :is="component"
+        :value="value"
+      />
+    </span>
+  </div>
+</template>
+
+<script setup>
+import DtcEventConsoleElement from './event_console_element';
+import DtcEventConsoleFunction from './event_console_function';
+import DtcEventConsoleArray from './event_console_array';
+import DtcEventConsoleObject from './event_console_object';
+import DtcEventConsoleString from './event_console_string';
+import DtcEventConsoleValue from './event_console_value';
+
+import { computed } from 'vue';
+
+const props = defineProps({
+  name: {
+    type: String,
+    required: true,
+  },
+  value: {
+    type: undefined,
+    default: undefined,
+  },
+});
+
+/**
+ * Component to render based on the 'value' prop.
+ *
+ * @type {ComputedRef<object>}
+ */
+const component = computed(() => {
+  const value = props.value;
+
+  if (value === null) { return DtcEventConsoleValue; }
+  if (value instanceof Element) { return DtcEventConsoleElement; }
+
+  switch (typeof value) {
+    case 'function': return DtcEventConsoleFunction;
+    case 'object': {
+      return Array.isArray(value)
+        ? DtcEventConsoleArray
+        : DtcEventConsoleObject;
+    }
+    case 'string': return DtcEventConsoleString;
+    default: return DtcEventConsoleValue;
+  }
+});
+</script>
+
+<script>
+/**
+ * The pair represents a key-value pair and allows recursive exploration of objects.
+ * A pair contains a name (key) and a value.
+ * Based on the data type of the value it will display a component to represent a value.
+ */
+export default {
+  name: 'DtcEventConsolePair',
+};
+</script>
diff --git a/packages/combinator/src/components/event_console/event_console_string.vue b/packages/combinator/src/components/event_console/event_console_string.vue
new file mode 100644
index 0000000000..3a09ee6077
--- /dev/null
+++ b/packages/combinator/src/components/event_console/event_console_string.vue
@@ -0,0 +1,24 @@
+<template>
+  <span class="dtc-scheme__string">
+    <span>"</span>
+    <span>
+      {{ value }}
+    </span>
+    <span>"</span>
+  </span>
+</template>
+
+<script setup>
+defineProps({
+  value: {
+    type: undefined,
+    required: true,
+  },
+});
+</script>
+
+<script>
+export default {
+  name: 'DtcEventConsoleString',
+};
+</script>
diff --git a/packages/combinator/src/components/event_console/event_console_value.vue b/packages/combinator/src/components/event_console/event_console_value.vue
new file mode 100644
index 0000000000..ebc861995d
--- /dev/null
+++ b/packages/combinator/src/components/event_console/event_console_value.vue
@@ -0,0 +1,34 @@
+<template>
+  <span :class="`dtc-scheme__${displayClass}`">
+    {{ displayValue }}
+  </span>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  value: {
+    type: undefined,
+    required: true,
+  },
+});
+
+const displayValue = computed(() => {
+  return props.value === null
+    ? 'null'
+    : props.value;
+});
+
+const displayClass = computed(() => {
+  return props.value === null
+    ? 'identifier'
+    : 'value';
+});
+</script>
+
+<script>
+export default {
+  name: 'DtcEventConsoleValue',
+};
+</script>
diff --git a/packages/combinator/src/components/header/header.vue b/packages/combinator/src/components/header/header.vue
new file mode 100644
index 0000000000..edd9fb45c1
--- /dev/null
+++ b/packages/combinator/src/components/header/header.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="dtc-theme__canvas d-d-flex d-ai-stretch d-pl12">
+    <h1 class="d-headline32 d-as-center">
+      {{ component.name }}
+    </h1>
+    <div class="d-fl-grow1 d-ml12 d-bl">
+      <div class="d-d-flex d-ai-center dtc-header__variant d-h100p">
+        <div class="d-pl6 d-pt2 d-fl-grow1">
+          <dt-select-menu
+            class="d-ba-none"
+            select-class="dtc-header__select"
+            label="Select target component variant"
+            label-class="d-vi-visible-sr"
+            name="select-menu"
+            :value="selectedVariant"
+            :options="variantOptions"
+            size="xl"
+            @input="e => emit('update:variant', e)"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { DtSelectMenu } from '@dialpad/dialtone-vue';
+import { computed } from 'vue';
+import { capitalCase } from 'change-case';
+
+const props = defineProps({
+  component: {
+    type: Object,
+    required: true,
+  },
+  selectedVariant: {
+    type: String,
+    required: true,
+  },
+  variants: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['update:variant']);
+
+const variantOptions = computed(() => {
+  const variants = {
+    default: {},
+    ...props.variants,
+  };
+  return Object.keys(variants).map(variant => {
+    return { value: variant, label: capitalCase(variant) };
+  });
+});
+
+</script>
+
+<script>
+export default {
+  name: 'DtcHeader',
+};
+</script>
+
+<style lang="less">
+  .dtc-header__select > select {
+    color: var(--dtc-theme-color-foreground) !important;
+    background-color: transparent !important;
+  }
+
+  .dtc-header__select > select:focus {
+    outline: initial !important;
+    box-shadow: initial !important;
+  }
+
+  .dtc-header__select::before, .dtc-header__select::after {
+    border-color: var(--dtc-theme-color-foreground) transparent !important;
+  }
+
+  .dtc-header__variant {
+    background-color: var(--dtc-theme-color-background-darken);
+  }
+</style>
diff --git a/packages/combinator/src/components/option_bar/option_bar.vue b/packages/combinator/src/components/option_bar/option_bar.vue
new file mode 100644
index 0000000000..9340df6f15
--- /dev/null
+++ b/packages/combinator/src/components/option_bar/option_bar.vue
@@ -0,0 +1,170 @@
+<template>
+  <div class="dtc-option-bar d-as-stretch d-of-y-auto d-w100p">
+    <ul class="d-ls-reset">
+      <dtc-section
+        v-if="info.slots"
+        heading="Slots"
+        content-class="d-px12"
+      >
+        <dtc-option-bar-member-group
+          :component="component"
+          :members="info.slots"
+          :values="options.slots"
+          :control-selector="getSlotControls"
+          @update:member="updateSlots"
+        />
+      </dtc-section>
+      <dtc-section
+        v-if="info.props"
+        heading="Props"
+        content-class="d-px12"
+      >
+        <dtc-option-bar-member-group
+          :component="component"
+          :members="info.props"
+          :values="options.props"
+          :control-selector="(prop, value) => getBindingControls(prop, value, 'null')"
+          @update:member="updateProps"
+        />
+      </dtc-section>
+      <dtc-section
+        v-if="info.attributes"
+        heading="Native HTML Attributes"
+        content-class="d-px12"
+      >
+        <dtc-option-bar-member-group
+          :component="component"
+          :members="info.attributes"
+          :values="options.attributes"
+          :control-selector="(attribute, value) => getBindingControls(attribute, value)"
+          @update:member="updateAttributes"
+        />
+      </dtc-section>
+      <dtc-section
+        v-if="info.events"
+        heading="Events"
+        content-class="d-px12"
+      >
+        <dtc-option-bar-member-group
+          :component="component"
+          :members="info.events"
+          :values="options.events"
+          :control-selector="getEventControls"
+        />
+      </dtc-section>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+import DtcOptionBarMemberGroup from './option_bar_member_group';
+import DtcSection from '../tools/section';
+
+import { OPTIONS_UPDATE_EVENT } from '@/src/lib/constants';
+import { getControlByMemberType, getControlByValue } from '@/src/lib/control';
+
+defineProps({
+  /**
+   * Component to render.
+   */
+  component: {
+    type: Object,
+    required: true,
+  },
+  /**
+   * Options data object.
+   */
+  options: {
+    type: Object,
+    required: true,
+  },
+  /**
+   * Info data object.
+   */
+  info: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits([OPTIONS_UPDATE_EVENT]);
+
+/**
+ * Gets an array of controls for a binding.
+ * Calls the utility function `getControlByMemberType(...)` which converts
+ * each type for a member to a given control.
+ *
+ * Extra controls can be passed in as parameters.
+ *
+ * @param binding - The binding member.
+ * @param value - The binding member value.
+ * @param controls - The extra controls to allow.
+ * @returns {Array} Array of a default control and valid controls.
+ */
+function getBindingControls (binding, value, ...controls) {
+  const validControls = [
+    ...(binding.types?.map(type => getControlByMemberType(type, binding)) ?? []),
+    ...controls,
+  ];
+
+  return [
+    validControls,
+    validControls.find(control => control === getControlByValue(value)) ?? validControls[0],
+  ];
+}
+
+function getSlotControls () {
+  return getStaticControl('slot');
+}
+
+function getEventControls () {
+  return getStaticControl('event');
+}
+
+/**
+ * Forces a singular default control and valid control.
+ *
+ * @param control - The control to enforce.
+ * @returns {Array} Array of a default control and valid control.
+ */
+function getStaticControl (control) {
+  return [
+    [control],
+    control,
+  ];
+}
+
+/**
+ * Emits an update to a member in the 'options' data object.
+ *
+ * @param memberGroup - The member group
+ * @param member - The member
+ * @param value - The updated value
+ */
+function updateMember (memberGroup, { member, value }) {
+  emit(OPTIONS_UPDATE_EVENT, (options) => {
+    options[memberGroup][member] = value;
+  });
+}
+
+function updateSlots (e) { updateMember('slots', e); }
+function updateProps (e) { updateMember('props', e); }
+function updateAttributes (e) { updateMember('attributes', e); }
+</script>
+
+<script>
+/**
+ * The option bar is responsible for providing a user interface
+ * to interact and change the state of the target component.
+ */
+export default {
+  name: 'DtcOptionBar',
+};
+</script>
+
+<style>
+  .dtc-option-bar {
+    background-color: #FCFCFC;
+    color-scheme: light;
+  }
+</style>
diff --git a/packages/combinator/src/components/option_bar/option_bar_control.test.js b/packages/combinator/src/components/option_bar/option_bar_control.test.js
new file mode 100644
index 0000000000..5a97e3d516
--- /dev/null
+++ b/packages/combinator/src/components/option_bar/option_bar_control.test.js
@@ -0,0 +1,47 @@
+import DtcOptionBarControl from './option_bar_control';
+
+import { assert } from 'chai';
+import { mount } from '@vue/test-utils';
+import { controlMap } from '@/src/lib/control';
+
+const labelSelector = '[data-qa=dtc-option-bar-control-label]';
+const descriptionSelector = '[data-qa=dtc-option-bar-control-description]';
+
+const testControls = Object.keys(controlMap);
+
+describe('option_bar_control.vue test', function () {
+  let wrapper;
+
+  testControls.forEach((control) => {
+    const testLabel = `${control} label`;
+    const testDescription = `${control} description`;
+
+    describe(`When mounted with control '${control}'`, function () {
+      before(function () {
+        const member = {
+          validControls: [control],
+          label: testLabel,
+          description: testDescription,
+          values: ['test1', 'test2'],
+        };
+        member.controlData = controlMap[control];
+        member.value = member.controlData.default(member);
+        wrapper = mount(DtcOptionBarControl, {
+          props: member,
+        });
+      });
+
+      it('Should render successfully', function () {
+        assert.isTrue(wrapper.exists());
+      });
+
+      it('Should display label text', function () {
+        assert.equal(wrapper.find(labelSelector).text(), testLabel);
+      });
+
+      it('Should display description text', function () {
+        assert.equal(wrapper.find(descriptionSelector).text(), testDescription);
+      });
+    });
+  });
+});
diff --git a/packages/combinator/src/components/option_bar/option_bar_control.vue b/packages/combinator/src/components/option_bar/option_bar_control.vue
new file mode 100644
index 0000000000..c6468d1cbb
--- /dev/null
+++ b/packages/combinator/src/components/option_bar/option_bar_control.vue
@@ -0,0 +1,187 @@
+<template>
+  <div>
+    <component
+      :is="controlComponent"
+      v-bind="controlBindings"
+      @update:value="updateValue"
+    >
+      <span>
+        <span
+          class="d-pr4"
+          data-qa="dtc-option-bar-control-label"
+        >
+          {{ label }}
+        </span>
+        <icon-lock
+          v-if="locked"
+          class="d-pr4 d-fs10 d-ps-relative d-t1"
+        />
+        <span
+          v-if="required"
+          class="d-pl2 d-ps-relative d-b2"
+        >
+          <dt-badge
+            text="required"
+            color="black-700"
+          />
+        </span>
+        <span
+          v-if="vModel"
+          class="d-pl2 d-ps-relative d-b2"
+        >
+          <dt-badge
+            text="v-model"
+            color="black-700"
+          />
+        </span>
+      </span>
+    </component>
+    <div
+      class="d-description d-p1"
+      data-qa="dtc-option-bar-control-description"
+    >
+      {{ description }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import IconLock from 'dialtone-icons/IconLock';
+import { DtBadge } from '@dialpad/dialtone-vue';
+import { VALUE_UPDATE_EVENT } from '@/src/lib/constants';
+import { computed } from 'vue';
+import { serializeControlValue, deserializeControlValue } from '@/src/lib/control';
+
+const props = defineProps({
+  /**
+   * Data of an entry in the 'control map'.
+   */
+  controlData: {
+    type: Object,
+    required: true,
+  },
+  /**
+   * Array of valid controls that are keys in the 'control map'.
+   */
+  validControls: {
+    type: Array,
+    required: true,
+  },
+  /**
+   * The member value.
+   */
+  value: {
+    type: undefined,
+    required: true,
+  },
+  /**
+   * The member label.
+   */
+  label: {
+    type: String,
+    required: true,
+  },
+  /**
+   * The member description.
+   */
+  description: {
+    type: String,
+    default: undefined,
+  },
+  /**
+   * If the member is a part of the v-model.
+   */
+  vModel: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * If the member is considered required.
+   */
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * Prevent the control from being modified.
+   */
+  locked: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * Optional args to bind directly to the control.
+   */
+  args: {
+    type: Object,
+    default: () => {},
+  },
+});
+
+const emit = defineEmits([VALUE_UPDATE_EVENT]);
+
+const controlValue = computed(() => {
+  return props.controlData.serialize
+    ? serializeControlValue(props.value)
+    : props.value;
+});
+
+const controlComponent = computed(() => {
+  return props.controlData.component;
+});
+
+/**
+ * Args that are conditionally passed to the
+ * underlying control props if the prop is present on the control.
+ *
+ * @type {ComputedRef<object>}
+ */
+const controlArgs = computed(() => {
+  return {
+    value: controlValue.value,
+    disabled: props.locked,
+    tags: props.tags,
+    ...props.args,
+  };
+});
+
+/**
+ * Object containing only the args that are
+ * present on the control component props.
+ *
+ * @type {ComputedRef<object>}
+ */
+const controlBindings = computed(() => {
+  const component = controlComponent.value;
+  if (!component.props) { return null; }
+  return Object.fromEntries(
+    Object.entries(controlArgs.value).filter(([arg, _]) => {
+      const controlProps = Object.keys(component.props);
+      return controlProps.includes(arg);
+    }),
+  );
+});
+
+/**
+ * Emits an update to the member value.
+ * The value is deserialized if needed.
+ *
+ * @param e - The updated member value
+ */
+function updateValue (e) {
+  const value = props.controlData.serialize
+    ? deserializeControlValue(e)
+    : e;
+  emit(VALUE_UPDATE_EVENT, value);
+}
+</script>
+
+<script>
+/**
+ * The 'option bar control' component wraps an underlying 'control' component to provide extended functionality
+ * and decouple the reliance on the option bar and members from individual 'control' components.
+ */
+export default {
+  name: 'DtcOptionBarControl',
+};
+</script>
diff --git a/packages/combinator/src/components/option_bar/option_bar_control_selector.vue b/packages/combinator/src/components/option_bar/option_bar_control_selector.vue
new file mode 100644
index 0000000000..8c35a7ee8f
--- /dev/null
+++ b/packages/combinator/src/components/option_bar/option_bar_control_selector.vue
@@ -0,0 +1,130 @@
+<template>
+  <dt-button-group
+    class="d-fw-wrap"
+  >
+    <template
+      v-for="(selection, control) in selections"
+      :key="control"
+    >
+      <template
+        v-for="label in selection.labels"
+        :key="label"
+      >
+        <span class="d-pr4">
+          <dt-button
+            class="dtc-control-selector__button d-px4 d-py1"
+            importance="outlined"
+            v-bind="getStyling(control)"
+            @click="() => updateControl(control)"
+          >
+            {{ label }}
+          </dt-button>
+        </span>
+      </template>
+    </template>
+  </dt-button-group>
+</template>
+
+<script setup>
+import { DtButton, DtButtonGroup } from '@dialpad/dialtone-vue';
+import { CONTROL_UPDATE_EVENT } from '@/src/lib/constants';
+import { computed } from 'vue';
+
+const props = defineProps({
+  /**
+   * Selected control.
+   */
+  selected: {
+    type: String,
+    required: true,
+  },
+  /**
+   * Array of control selections.
+   */
+  controls: {
+    type: Array,
+    required: true,
+  },
+  /**
+   * Prevent the control from changing.
+   */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * Array of valid types.
+   */
+  types: {
+    type: Array,
+    default: undefined,
+  },
+});
+
+const emit = defineEmits([CONTROL_UPDATE_EVENT]);
+
+const selections = computed(() => {
+  return {
+    ...Object.fromEntries(
+      props.controls.map(control => {
+        return [control, getSelection(control)];
+      }),
+    ),
+  };
+});
+
+function getSelection (control) {
+  switch (control) {
+    case 'event': {
+      const eventTypes = props.types;
+      const labels = eventTypes ?? ['event'];
+      return {
+        labels,
+      };
+    }
+    default: return {
+      labels: [control],
+    };
+  }
+}
+
+/**
+ * Gets the styling of the button based on the status of the control.
+ *
+ * @param {string} control - The name of the control.
+ * @returns {object} Object containing style settings.
+ */
+function getStyling (control) {
+  const isActive = control === props.selected;
+
+  const styling = {
+    active: isActive,
+    kind: isActive ? 'default' : 'muted',
+    disabled: props.disabled,
+  };
+
+  if (isActive) {
+    styling['control-active'] = 'control-active';
+  }
+
+  return styling;
+}
+
+function updateControl (e) {
+  if (props.selected === e) { return; }
+  emit(CONTROL_UPDATE_EVENT, e);
+}
+</script>
+
+<script>
+export default {
+  name: 'DtcOptionBarControlSelector',
+};
+</script>
+
+<style>
+.dtc-control-selector__button:not([control-active]) {
+  background-color: transparent !important;
+  border: currentColor 1px solid !important;
+}
+</style>
diff --git a/packages/combinator/src/components/option_bar/option_bar_member_group.test.js b/packages/combinator/src/components/option_bar/option_bar_member_group.test.js
new file mode 100644
index 0000000000..724cfe3edf
--- /dev/null
+++ b/packages/combinator/src/components/option_bar/option_bar_member_group.test.js
@@ -0,0 +1,59 @@
+import DtcOptionBarMemberGroup from './option_bar_member_group';
+
+import { assert } from 'chai';
+import { mount } from '@vue/test-utils';
+import { getSupportedComponents } from '@/src/lib/test/utils_test';
+
+const controlWrapperSelector = '[data-qa=dtc-option-bar-member-group-control]';
+
+const stringMemberKey = 'stringMember';
+const numberMemberKey = 'numberMember';
+const booleanMemberKey = 'booleanMember';
+
+function createTestMember (key) {
+  return {
+    name: key,
+  };
+}
+
+const testMembers = [
+  createTestMember(stringMemberKey),
+  createTestMember(numberMemberKey),
+  createTestMember(booleanMemberKey),
+];
+
+const testValues = {
+  [stringMemberKey]: 'string test',
+  [numberMemberKey]: 123,
+  [booleanMemberKey]: true,
+};
+
+describe('option_bar_member_group.vue test', function () {
+  let wrapper;
+  let controlWrappers;
+
+  const testComponents = getSupportedComponents();
+  testComponents.forEach((component) => {
+    before(function () {
+      wrapper = mount(DtcOptionBarMemberGroup, {
+        props: {
+          component,
+          members: testMembers,
+          values: testValues,
+          controlSelector: () => [['base'], 'base'],
+        },
+      });
+      controlWrappers = wrapper.findAll(controlWrapperSelector);
+    });
+
+    describe(`When mounted with component '${component.name}'`, function () {
+      it('Should render successfully', function () {
+        assert.exists(wrapper);
+      });
+
+      it('Should render a control for each member', function () {
+        assert.equal(Object.keys(testMembers).length, controlWrappers.length);
+      });
+    });
+  });
+});
diff --git a/packages/combinator/src/components/option_bar/option_bar_member_group.vue b/packages/combinator/src/components/option_bar/option_bar_member_group.vue
new file mode 100644
index 0000000000..acb866bb81
--- /dev/null
+++ b/packages/combinator/src/components/option_bar/option_bar_member_group.vue
@@ -0,0 +1,222 @@
+<template>
+  <div>
+    <template
+      v-for="(member, key) in memberMap"
+      :key="key"
+    >
+      <div
+        v-if="!member.hideControl"
+        class="d-py6"
+        data-qa="dtc-option-bar-member-group-control"
+      >
+        <div class="d-d-flex d-ai-center d-jc-space-between d-pb2">
+          <dtc-option-bar-control-selector
+            :selected="member.control"
+            :controls="member.validControls"
+            :types="member.types"
+            :disabled="member.lockControl"
+            @update:control="(e) => updateControl(e, key)"
+          />
+          <dt-button
+            v-if="hasDefaultValue(member)"
+            class="dtc-icon d-p4"
+            importance="clear"
+            size="sm"
+            :disabled="member.lockControl"
+            @click="() => resetMember(key)"
+          >
+            <template #icon>
+              <icon-reset />
+            </template>
+          </dt-button>
+        </div>
+        <dtc-option-bar-control
+          :value="values[key]"
+          :label="member.label"
+          :control-data="getControlData(member)"
+          :valid-controls="member.validControls"
+          :description="member.description"
+          :v-model="isVModel(member)"
+          :required="member.required"
+          :locked="member.lockControl"
+          :args="{
+            defaultValue: member.defaultValue,
+            validValues: member.values,
+            validTypes: member.types,
+            tags: member.tags,
+          }"
+          @update:value="e => updateMember(e, key)"
+          @update:control="e => updateControl(e, key)"
+        />
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import DtcOptionBarControlSelector from '@/src/components/option_bar/option_bar_control_selector';
+import DtcOptionBarControl from './option_bar_control';
+import IconReset from 'dialtone-icons/IconRefresh';
+import { DtButton } from '@dialpad/dialtone-vue';
+import { MEMBER_UPDATE_EVENT } from '@/src/lib/constants';
+import { computed, reactive } from 'vue';
+import { convert } from '@/src/lib/convert';
+import { controlMap } from '@/src/lib/control';
+
+const props = defineProps({
+  /**
+   * Target component.
+   */
+  component: {
+    type: Object,
+    required: true,
+  },
+  /**
+   * Array of members to generate controls for.
+   */
+  members: {
+    type: Array,
+    required: true,
+  },
+  /**
+   * Map of key-value pairs for each member.
+   */
+  values: {
+    type: Object,
+    required: true,
+  },
+  /**
+   * Function that determines the control selections for
+   * a given member by returning an array of valid controls.
+   */
+  controlSelector: {
+    type: Function,
+    required: true,
+  },
+});
+
+const emit = defineEmits([MEMBER_UPDATE_EVENT]);
+
+/**
+ * The member map is a reactive data object that wraps each member and
+ * provides additional data that the 'option bar control' component
+ * needs without affecting the original member data object.
+ *
+ * @type {object}
+ */
+const memberMap = computed(() => {
+  return reactive({
+    ...Object.fromEntries(
+      props.members.map(member => {
+        return [getMemberKey(member), extendMember(member)];
+      }),
+    ),
+  });
+});
+
+/**
+ * Used to match members in the 'member map' to their respective values.
+ *
+ * @returns {*}
+ */
+function getMemberKey (member) {
+  return member.name;
+}
+
+/**
+ * Determines if the member has a default value.
+ *
+ * @returns {boolean} If the member has default value.
+ */
+function hasDefaultValue (member) {
+  return 'defaultValue' in member;
+}
+
+/**
+ * Attempts to get the control data for a given control.
+ * If the control does not exist, gets the 'base' control data.
+ *
+ * @returns {object} The control data from the 'control map'.
+ */
+function getControlData (member) {
+  return controlMap[member.control] ?? controlMap.base;
+}
+
+function isVModel (member) {
+  const tags = member.tags;
+  return tags
+    ? 'model' in tags
+    : false;
+}
+
+/**
+ * Wraps a member with an object containing additional data about the member.
+ * This is used by the 'member map' to hold data about controls.
+ *
+ * @returns {object}
+ */
+function extendMember (member) {
+  const key = getMemberKey(member);
+  const value = props.values[key];
+
+  const [validControls, control] = props.controlSelector(member, value);
+
+  return {
+    ...member,
+    control,
+    validControls,
+  };
+}
+
+/**
+ * Resets the control to default value.
+ */
+function resetMember (key) {
+  const member = memberMap.value[key];
+
+  updateMember(member.defaultValue, key);
+}
+
+/**
+ * Emits an update to a member.
+ *
+ * @param key - The member key
+ * @param e - The updated value
+ */
+function updateMember (e, key) {
+  emit(MEMBER_UPDATE_EVENT, {
+    member: key,
+    value: e,
+  });
+}
+
+/**
+ * Updates the member's control in the 'member map'.
+ *
+ * @param e - The updated control
+ * @param key - The member key
+ */
+function updateControl (e, key) {
+  const member = memberMap.value[key];
+
+  let value;
+  try {
+    value = convert(member.control, e, props.values[key]);
+  } catch {
+    console.warn(`${member.name}: Unable to convert ${member.control} to ${e}`);
+  }
+
+  member.control = e;
+  updateMember(value ?? getControlData(member).default(member), key);
+}
+</script>
+
+<script>
+/**
+ * The member group receives a group of members and their respective values.
+ * It is responsible for rendering 'option bar control' components for each member.
+ */
+export default {
+  name: 'DtcOptionBarMemberGroup',
+};
+</script>
diff --git a/packages/combinator/src/components/renderer/renderer.vue b/packages/combinator/src/components/renderer/renderer.vue
new file mode 100644
index 0000000000..745b558019
--- /dev/null
+++ b/packages/combinator/src/components/renderer/renderer.vue
@@ -0,0 +1,151 @@
+<template>
+  <dtc-overlay class="dtc-renderer">
+    <template #content>
+      <div
+        class="d-d-flex d-of-auto"
+        :class="{
+          [backgroundColorMap[background]]: true,
+          'd-jc-center': positioning === 'center',
+          'd-ai-center': positioning === 'center',
+          'd-ai-flex-start': positioning === 'native',
+        }"
+      >
+        <dtc-renderer-target
+          :component="component"
+          :bindings="options.bindings.get()"
+          :events="info.events"
+          @event="(event, value) => emit('event', event, value)"
+        >
+          <template
+            v-for="(slot, name) in renderedSlots"
+            :key="name"
+            #[name]
+          >
+            <dtc-node
+              :template="slot"
+              :library="library"
+            />
+          </template>
+        </dtc-renderer-target>
+      </div>
+    </template>
+    <template #overlay>
+      <div class="d-d-flex d-jc-flex-end d-pt4 d-pe-auto">
+        <dtc-renderer-menu
+          :theme="theme"
+          :background="background"
+          :positioning="positioning"
+          @update:settings="updateSettings"
+        />
+      </div>
+    </template>
+  </dtc-overlay>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { SETTINGS_UPDATE_EVENT } from '@/src/lib/constants';
+import DtcRendererMenu from '@/src/components/renderer/renderer_menu';
+import DtcOverlay from '@/src/components/tools/overlay';
+import DtcRendererTarget from '@/src/components/renderer/renderer_target';
+import DtcNode from '@/src/components/tools/node';
+
+const props = defineProps({
+  /**
+   * Component to render.
+   */
+  component: {
+    type: Object,
+    required: true,
+  },
+  /**
+   * Info data object.
+   */
+  info: {
+    type: Object,
+    required: true,
+  },
+  /**
+   * Options data object.
+   */
+  options: {
+    type: Object,
+    required: true,
+  },
+  /**
+   * Settings data object.
+   */
+  settings: {
+    type: Object,
+    required: true,
+  },
+  library: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits([
+  SETTINGS_UPDATE_EVENT,
+  'event',
+]);
+
+/**
+ * Filtered slots that contain content.
+ *
+ * @type {ComputedRef<object>}
+ */
+const renderedSlots = computed(() => {
+  if (!props.options.slots) { return null; }
+  return Object.fromEntries(
+    Object.entries(props.options.slots).filter(([_, slot]) => slot),
+  );
+});
+
+const theme = computed(() => {
+  switch (background.value) {
+    case 'black': return 'dark';
+    case 'white': return 'light';
+    default: return props.settings.root.theme;
+  }
+});
+const background = computed(() => getSetting('background'));
+const positioning = computed(() => getSetting('positioning'));
+
+const backgroundColorMap = {
+  black: 'd-bgc-black-900',
+  white: 'd-bgc-white',
+  theme: `dtc-theme__canvas`,
+};
+
+function getSetting (setting) {
+  return props.settings.renderer[setting];
+}
+
+function updateSettings (setting, e) {
+  emit(SETTINGS_UPDATE_EVENT, (model) => {
+    model.renderer[setting] = e;
+  });
+}
+</script>
+
+<script>
+/**
+ * The renderer is responsible for displaying the target component in its current state.
+ */
+export default {
+  name: 'DtcRenderer',
+};
+</script>
+
+<style>
+.dtc-renderer {
+  display: grid;
+  grid-template-columns: 1fr;
+}
+
+.dtc-renderer > * {
+  overflow: hidden;
+  grid-area: 1 / 1;
+}
+</style>
diff --git a/packages/combinator/src/components/renderer/renderer_button_bar.vue b/packages/combinator/src/components/renderer/renderer_button_bar.vue
new file mode 100644
index 0000000000..5d47c49a90
--- /dev/null
+++ b/packages/combinator/src/components/renderer/renderer_button_bar.vue
@@ -0,0 +1,43 @@
+<template>
+  <dt-button-group
+    class="d-d-flex d-bgc-black-025 d-bar4"
+  >
+    <template
+      v-for="(_, slot) in slots"
+      :key="slot"
+    >
+      <dt-button
+        class="d-px24"
+        importance="clear"
+        :active="slot === value"
+        @click="() => emit('click', slot)"
+      >
+        <template #icon>
+          <slot :name="slot" />
+        </template>
+      </dt-button>
+    </template>
+  </dt-button-group>
+</template>
+
+<script setup>
+import { DtButtonGroup, DtButton } from '@dialpad/dialtone-vue';
+import { useSlots } from 'vue';
+
+defineProps({
+  value: {
+    type: String,
+    required: true,
+  },
+});
+
+const slots = useSlots();
+
+const emit = defineEmits(['click']);
+</script>
+
+<script>
+export default {
+  name: 'DtcRenderButtonBar',
+};
+</script>
diff --git a/packages/combinator/src/components/renderer/renderer_menu.vue b/packages/combinator/src/components/renderer/renderer_menu.vue
new file mode 100644
index 0000000000..04668f3759
--- /dev/null
+++ b/packages/combinator/src/components/renderer/renderer_menu.vue
@@ -0,0 +1,111 @@
+<template>
+  <dt-popover
+    :open="open"
+    :dialog-class="`d-bgc-transparent d-bs-none dtc-theme--${theme}`"
+    content-class="d-bgc-transparent d-px0 d-py0"
+    transition="fade"
+    placement="left-start"
+    initial-focus-element="dialog"
+    :hide-on-click="false"
+    :modal="false"
+    sticky
+  >
+    <template #anchor="{ attrs }">
+      <dt-button
+        class="d-mx4 d-px0"
+        :class="`dtc-renderer-menu__button--${theme}`"
+        :active="open"
+        importance="clear"
+        v-bind="attrs"
+        @click="onOpen"
+      >
+        <template #icon>
+          <icon-menu />
+        </template>
+      </dt-button>
+    </template>
+    <template #content>
+      <div>
+        <dtc-button-bar
+          class="d-mb4"
+          :value="background"
+          @click="e => updateSettings('background', e)"
+        >
+          <template #theme>
+            <div class="d-w16 d-h16 d-ba">
+              <span class="d-fs12 d-ps-relative d-t6">T</span>
+            </div>
+          </template>
+          <template #black>
+            <div class="d-w16 d-h16 d-ba d-bgc-black-800" />
+          </template>
+          <template #white>
+            <div class="d-w16 d-h16 d-ba d-bgc-white" />
+          </template>
+        </dtc-button-bar>
+        <dtc-button-bar
+          class="d-mb4"
+          :value="positioning"
+          @click="e => updateSettings('positioning', e)"
+        >
+          <template #native>
+            <icon-left />
+          </template>
+          <template #center>
+            <icon-center />
+          </template>
+        </dtc-button-bar>
+      </div>
+    </template>
+  </dt-popover>
+</template>
+
+<script setup>
+import IconLeft from 'dialtone-icons/IconNotes';
+import IconCenter from 'dialtone-icons/IconMenu';
+import IconMenu from 'dialtone-icons/IconMenuVertical';
+import DtcButtonBar from '../tools/button_bar';
+import { DtButton, DtPopover } from '@dialpad/dialtone-vue';
+import { SETTINGS_UPDATE_EVENT } from '@/src/lib/constants';
+import { ref } from 'vue';
+
+defineProps({
+  theme: {
+    type: String,
+    required: true,
+  },
+  background: {
+    type: String,
+    required: true,
+  },
+  positioning: {
+    type: String,
+    required: true,
+  },
+});
+
+const emit = defineEmits([SETTINGS_UPDATE_EVENT]);
+
+function updateSettings (setting, e) {
+  emit(SETTINGS_UPDATE_EVENT, setting, e);
+}
+
+const open = ref(false);
+function onOpen () {
+  open.value = !open.value;
+}
+</script>
+
+<script>
+export default {
+  name: 'DtcRendererMenu',
+};
+</script>
+
+<style lang="less">
+@import (reference) "@/src/assets/dialtone.less";
+
+  .dtc-renderer-menu__button--dark {
+    .d-btn--inverted() !important;
+  }
+</style>
diff --git a/packages/combinator/src/components/renderer/renderer_target.vue b/packages/combinator/src/components/renderer/renderer_target.vue
new file mode 100644
index 0000000000..d2b97eeb65
--- /dev/null
+++ b/packages/combinator/src/components/renderer/renderer_target.vue
@@ -0,0 +1,120 @@
+<template>
+  <div ref="wrapper" />
+</template>
+
+<script setup>
+import { capitalize, computed, h, onMounted, onUpdated, ref, render, useSlots } from 'vue';
+import { DtNotice } from '@dialpad/dialtone-vue';
+
+const ERROR_MESSAGE = 'Error rendering component';
+
+const props = defineProps({
+  /**
+   * Component to render.
+   */
+  component: {
+    type: Object,
+    required: true,
+  },
+  /**
+   * Members to bind to the target component.
+   */
+  bindings: {
+    type: undefined,
+    required: true,
+  },
+  /**
+   * Events to bind to the target component.
+   */
+  events: {
+    type: undefined,
+    required: true,
+  },
+});
+
+const emit = defineEmits([
+  'event',
+]);
+
+const slots = useSlots();
+
+/**
+ * Map object containing events and their respective handlers.
+ *
+ * @returns {ComputedRef<object>} Event map.
+ */
+const events = computed(() => {
+  if (!props.events) { return {}; }
+  return Object.fromEntries(
+    props.events.map(({ name }) => {
+      return [
+        `on${capitalize(name)}`,
+        e => emit('event', name, e),
+      ];
+    }),
+  );
+});
+
+onMounted(renderTarget);
+onUpdated(renderTarget);
+
+const wrapper = ref();
+
+/**
+ * Destroys any old containers in the wrapper and appends a new one.
+ * Not completely sure why this has to be done, but it is buggy
+ * if this method is not used.
+ *
+ * @returns {HTMLDivElement} Instantiated container for rendering.
+ */
+function nextContainer () {
+  wrapper.value.replaceChildren();
+  return wrapper.value.appendChild(document.createElement('div'));
+}
+
+/**
+ * Need to render manually to catch DOM exception errors.
+ *
+ * Attempts to render the target component, if there is
+ * an error a warning will be logged and a 'notice' component
+ * will be rendered to inform the user.
+ */
+function renderTarget () {
+  const container = nextContainer();
+
+  try {
+    render(h(props.component, {
+      ...props.bindings,
+      ...events.value,
+    }, slots), container);
+  } catch (e) {
+    console.warn('Rendering warning: \n', e);
+    renderError(e, container);
+  }
+}
+
+/**
+ * Renders the error 'notice' component.
+ *
+ * @param exception - The exception.
+ * @param container - The container to render in.
+ */
+function renderError (exception, container) {
+  render(h(DtNotice, {
+    kind: 'error',
+    hideClose: true,
+    title: ERROR_MESSAGE,
+  }, {
+    default: () => exception.toString(),
+  }), container);
+}
+</script>
+
+<script>
+/**
+ * The renderer is responsible for displaying the target component in its current state.
+ */
+export default {
+  name: 'DtcRendererTarget',
+};
+</script>
diff --git a/packages/combinator/src/components/settings_menu/settings_menu.vue b/packages/combinator/src/components/settings_menu/settings_menu.vue
new file mode 100644
index 0000000000..c603f2eca6
--- /dev/null
+++ b/packages/combinator/src/components/settings_menu/settings_menu.vue
@@ -0,0 +1,134 @@
+<template>
+  <dt-popover
+    :dialog-class="`dtc-theme--${settings.root.theme}`"
+    content-class="dtc-theme__popover"
+    transition="fade"
+    placement="top-end"
+    initial-focus-element="dialog"
+    sticky
+  >
+    <template #anchor="{ attrs }">
+      <dt-button
+        class="dtc-theme__button"
+        v-bind="attrs"
+      >
+        <template #icon>
+          <IconSettings />
+        </template>
+      </dt-button>
+    </template>
+    <template #content>
+      <div class="d-px8">
+        <section class="d-p8">
+          <dt-radio-group
+            name="theme-radio-group"
+            legend="Theme"
+            :value="settings.root.theme"
+            @input="e => updateSettings('root', 'theme', e)"
+          >
+            <dt-radio value="light">
+              Light
+            </dt-radio>
+            <dt-radio value="dark">
+              Dark
+            </dt-radio>
+          </dt-radio-group>
+        </section>
+        <section class="d-p8">
+          <dt-radio-group
+            name="scheme-radio-group"
+            legend="Scheme"
+            :value="settings.code.scheme"
+            @input="e => updateSettings('code', 'scheme', e)"
+          >
+            <dt-radio value="mono">
+              Mono
+            </dt-radio>
+            <dt-radio value="highlight">
+              Highlight
+            </dt-radio>
+          </dt-radio-group>
+        </section>
+        <section class="d-p8">
+          <dt-radio-group
+            name="sidebar-radio-group"
+            legend="Sidebar Position"
+            :value="settings.root.sidebar"
+            @input="e => updateSettings('root', 'sidebar', e)"
+          >
+            <dt-radio value="left">
+              Left
+            </dt-radio>
+            <dt-radio value="right">
+              Right
+            </dt-radio>
+          </dt-radio-group>
+        </section>
+        <section class="d-p8">
+          <dt-input
+            :key="indentKey"
+            type="number"
+            label="Indent Spaces"
+            :value="settings.code.indent"
+            @input="updateIndent"
+          />
+        </section>
+        <section class="d-p8">
+          <dt-checkbox
+            :checked="settings.code.verbose"
+            @input="e => updateSettings('code', 'verbose', e)"
+          >
+            Verbose
+          </dt-checkbox>
+        </section>
+      </div>
+    </template>
+  </dt-popover>
+</template>
+
+<script setup>
+import IconSettings from 'dialtone-icons/IconSettings';
+
+import {
+  DtButton,
+  DtPopover,
+  DtRadioGroup,
+  DtRadio,
+  DtCheckbox,
+  DtInput,
+} from '@dialpad/dialtone-vue';
+import { SETTINGS_UPDATE_EVENT } from '@/src/lib/constants';
+import { ref } from 'vue';
+
+defineProps({
+  settings: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits([SETTINGS_UPDATE_EVENT]);
+
+function updateSettings (group, setting, e) {
+  emit(SETTINGS_UPDATE_EVENT, (model) => {
+    model[group][setting] = e;
+  });
+}
+
+const indentKey = ref(0);
+function updateIndent (e) {
+  const value = parseInt(e);
+
+  if (!Number.isNaN(value) && value >= 0) {
+    updateSettings('code', 'indent', value);
+  } else {
+    indentKey.value += 1;
+  }
+}
+</script>
+
+<script>
+export default {
+  name: 'DtcSettings',
+};
+</script>
diff --git a/packages/combinator/src/components/tools/button_bar.vue b/packages/combinator/src/components/tools/button_bar.vue
new file mode 100644
index 0000000000..84dfa832a4
--- /dev/null
+++ b/packages/combinator/src/components/tools/button_bar.vue
@@ -0,0 +1,43 @@
+<template>
+  <dt-button-group
+    class="d-d-flex d-bgc-black-025 d-bar4"
+  >
+    <template
+      v-for="(_, slot) in slots"
+      :key="slot"
+    >
+      <dt-button
+        class="d-px24"
+        importance="clear"
+        :active="slot === value"
+        @click="() => emit('click', slot)"
+      >
+        <template #icon>
+          <slot :name="slot" />
+        </template>
+      </dt-button>
+    </template>
+  </dt-button-group>
+</template>
+
+<script setup>
+import { DtButtonGroup, DtButton } from '@dialpad/dialtone-vue';
+import { useSlots } from 'vue';
+
+defineProps({
+  value: {
+    type: String,
+    required: true,
+  },
+});
+
+const slots = useSlots();
+
+const emit = defineEmits(['click']);
+</script>
+
+<script>
+export default {
+  name: 'DtcButtonBar',
+};
+</script>
diff --git a/packages/combinator/src/components/tools/node.vue b/packages/combinator/src/components/tools/node.vue
new file mode 100644
index 0000000000..814fd4aa58
--- /dev/null
+++ b/packages/combinator/src/components/tools/node.vue
@@ -0,0 +1,23 @@
+<script>
+import { h } from 'vue';
+
+export default {
+  name: 'DtcNode',
+  props: {
+    template: {
+      type: String,
+      required: true,
+    },
+    library: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  render (props) {
+    return h({
+      components: props.library,
+      template: props.template,
+    });
+  },
+};
+</script>
diff --git a/packages/combinator/src/components/tools/overlay.vue b/packages/combinator/src/components/tools/overlay.vue
new file mode 100644
index 0000000000..53aa8f5be1
--- /dev/null
+++ b/packages/combinator/src/components/tools/overlay.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="d-w100p d-h100p">
+    <slot name="content" />
+    <div class="d-pe-none">
+      <div class="d-h100p">
+        <slot name="overlay" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DtcOverlay',
+};
+</script>
diff --git a/packages/combinator/src/components/tools/section.vue b/packages/combinator/src/components/tools/section.vue
new file mode 100644
index 0000000000..6c6036d27f
--- /dev/null
+++ b/packages/combinator/src/components/tools/section.vue
@@ -0,0 +1,62 @@
+<template>
+  <li>
+    <dt-list-item
+      role="listitem"
+      element-type="div"
+      navigation-type="tab"
+      @click="toggle"
+    >
+      <template #default>
+        <h2>
+          {{ heading }}
+        </h2>
+      </template>
+      <template #right>
+        <icon-collapse v-if="show" />
+        <icon-expand v-else />
+      </template>
+    </dt-list-item>
+    <div
+      v-if="show"
+      :class="contentClass"
+    >
+      <slot />
+    </div>
+  </li>
+</template>
+
+<script setup>
+import IconExpand from 'dialtone-icons/IconArrowKeyboardDown';
+import IconCollapse from 'dialtone-icons/IconArrowKeyboardUp';
+import { DtListItem } from '@dialpad/dialtone-vue';
+
+import { ref } from 'vue';
+
+const props = defineProps({
+  heading: {
+    type: String,
+    required: true,
+  },
+  open: {
+    type: Boolean,
+    default: true,
+  },
+  contentClass: {
+    type: String,
+    default: '',
+  },
+});
+
+const show = ref(props.open);
+
+function toggle () {
+  show.value = !show.value;
+}
+
+</script>
+
+<script>
+export default {
+  name: 'DtcSection',
+};
+</script>
diff --git a/packages/combinator/src/components/tools/tab_panel.vue b/packages/combinator/src/components/tools/tab_panel.vue
new file mode 100644
index 0000000000..b4cf7491d1
--- /dev/null
+++ b/packages/combinator/src/components/tools/tab_panel.vue
@@ -0,0 +1,83 @@
+<template>
+  <dt-tab-group
+    class="d-d-flex d-fd-column d-of-y-auto d-h100p"
+    tab-list-class="dtc-theme__tabs d-zi-base1 d-ps-sticky d-t0"
+    :selected="getId(selected)"
+    borderless
+  >
+    <template #tabs>
+      <div>
+        <template
+          v-for="(_, slot) in slots"
+          :key="slot"
+        >
+          <dt-tab
+            :id="getId(slot)"
+            :panel-id="getId(slot)"
+          >
+            {{ generateLabel(slot, capitalCase) }}
+          </dt-tab>
+        </template>
+      </div>
+    </template>
+    <template
+      v-for="(_, slot) in slots"
+      :key="slot"
+    >
+      <dt-tab-panel
+        :id="getId(slot)"
+        :tab-id="getId(slot)"
+        class="d-d-flex d-fl-grow1 d-py8 d-px16"
+      >
+        <slot :name="slot" />
+      </dt-tab-panel>
+    </template>
+  </dt-tab-group>
+</template>
+
+<script setup>
+import { DtTabGroup, DtTabPanel, DtTab } from '@dialpad/dialtone-vue';
+import { useSlots } from 'vue';
+import { getUniqueString } from '@/src/lib/utils';
+import { capitalCase } from 'change-case';
+
+const props = defineProps({
+  /**
+   * Unique id for tabs and panels to reference each other.
+   */
+  id: {
+    type: String,
+    default: () => getUniqueString(),
+  },
+  /**
+   * The selected slot name.
+   */
+  selected: {
+    type: String,
+    default: undefined,
+  },
+  /**
+   * Function that generates a label based on a given slot.
+   * Also provides a 'capitalCase' function to prettify a string.
+   */
+  generateLabel: {
+    type: Function,
+    default: (slot, capitalCase) => capitalCase(slot),
+  },
+});
+
+const slots = useSlots();
+
+function getId (slot) {
+  return `${props.id}-${slot}`;
+}
+</script>
+
+<script>
+/**
+ * Reusable component for displaying slot content based on a selected tab.
+ */
+export default {
+  name: 'DtcTabPanel',
+};
+</script>
diff --git a/packages/combinator/src/lib/constants.js b/packages/combinator/src/lib/constants.js
new file mode 100644
index 0000000000..e69f688387
--- /dev/null
+++ b/packages/combinator/src/lib/constants.js
@@ -0,0 +1,18 @@
+export const DEFAULT_PREFIX = 'dtc';
+export const DIALTONE_PREFIX = 'dt';
+
+export const DEFAULT_SLOT_NAME = 'default';
+
+export const VALUE_UPDATE_EVENT = 'update:value';
+export const CONTROL_UPDATE_EVENT = 'update:control';
+export const MEMBER_UPDATE_EVENT = 'update:member';
+export const OPTIONS_UPDATE_EVENT = 'update:options';
+export const SETTINGS_UPDATE_EVENT = 'update:settings';
+
+export const SETTINGS_THEME_KEY = 'dialtoneCombinatorTheme';
+export const SETTINGS_SIDEBAR_KEY = 'dialtoneCombinatorSidebar';
+export const SETTINGS_SCHEME_KEY = 'dialtoneCombinatorCodeScheme';
+export const SETTINGS_VERBOSE_KEY = 'dialtoneCombinatorCodeVerbose';
+export const SETTINGS_INDENT_KEY = 'dialtoneCombinatorCodeIndent';
+export const SETTINGS_POSITIONING_KEY = 'dialtoneCombinatorRendererPositioning';
+export const SETTINGS_BACKGROUND_KEY = 'dialtoneCombinatorRendererBackground';
diff --git a/packages/combinator/src/lib/control.js b/packages/combinator/src/lib/control.js
new file mode 100644
index 0000000000..67f9b9154a
--- /dev/null
+++ b/packages/combinator/src/lib/control.js
@@ -0,0 +1,132 @@
+/**
+ * See /.github/documentation/internal/CONTROLS.MD
+ * For in-depth information about controls.
+ */
+import DtcControlEvent from '@/src/components/controls/control_event';
+import DtcControlSlot from '@/src/components/controls/control_slot';
+import DtcControlDynamic from '@/src/components/controls/control_dynamic';
+import DtcControlObject from '@/src/components/controls/control_object';
+import DtcControlArray from '@/src/components/controls/control_array';
+import DtcControlBoolean from '@/src/components/controls/control_boolean';
+import DtcControlNumber from '@/src/components/controls/control_number';
+import DtcControlSelection from '@/src/components/controls/control_selection';
+import DtcControlString from '@/src/components/controls/control_string';
+import DtcControlNullish from '@/src/components/controls/control_nullish';
+import DtcControlBase from '@/src/components/controls/control_base';
+
+import { typeOfMemberValue } from '@/src/lib/utils';
+
+/**
+ * Symbol representing a value that is "not set".
+ * The main usage is to indicate that a prop value should be 'undefined' instead of using its default value.
+ *
+ * @type {symbol}
+ */
+export const UNSET = Symbol('unset');
+
+/**
+ * Map of controls containing control component and related information.
+ * Controls must have the 'component' and 'default' entries.
+ *
+ * @type {object}
+ */
+export const controlMap = Object.freeze({
+  event: {
+    component: DtcControlEvent,
+    default () { return null; },
+  },
+  slot: {
+    component: DtcControlSlot,
+    default () { return getControlDataDefault(this); },
+  },
+  dynamic: {
+    component: DtcControlDynamic,
+    default () { return getControlDataDefault(this); },
+    defaultControl () { return 'undefined'; },
+    serialize: true,
+  },
+  object: {
+    component: DtcControlObject,
+    default () { return getControlDataDefault(this); },
+  },
+  array: {
+    component: DtcControlArray,
+    default () { return getControlDataDefault(this); },
+  },
+  selection: {
+    component: DtcControlSelection,
+    default ({ values } = {}) { return values?.[0]; },
+  },
+  string: {
+    component: DtcControlString,
+    default () { return getControlDataDefault(this); },
+  },
+  number: {
+    component: DtcControlNumber,
+    default () { return getControlDataDefault(this); },
+  },
+  boolean: {
+    component: DtcControlBoolean,
+    default () { return getControlDataDefault(this); },
+  },
+  null: {
+    component: DtcControlNullish,
+    default () { return getControlDataDefault(this); },
+    serialize: true,
+  },
+  base: {
+    component: DtcControlBase,
+    default () { return getControlDataDefault(this); },
+  },
+});
+
+function getControlDataDefault (controlData) {
+  return controlData.component.props.value.default();
+}
+
+export function getControlByValue (value) {
+  const control = value === undefined || value === null || value === UNSET
+    ? 'null'
+    : typeOfMemberValue(value);
+
+  return control in controlMap
+    ? control
+    : 'base';
+}
+
+export function getControlByMemberType (type, args) {
+  switch (type) {
+    case 'string': {
+      return args?.values && args.values.length > 0
+        ? 'selection'
+        : 'string';
+    }
+    default: return type;
+  }
+}
+
+/**
+ * Serializes a value before giving it to a control that requires a serialized value.
+ * Currently, this only converts between 'UNSET' and 'undefined'.
+ *
+ * @param {*} value - The value to serialize
+ * @returns {*} The serialized value
+ */
+export function serializeControlValue (value) {
+  return value === undefined
+    ? UNSET
+    : value;
+}
+
+/**
+ * Deserializes a value after receiving it from a control that requires a serialized value.
+ * Currently, this only converts between 'UNSET' and 'undefined'.
+ *
+ * @param {*} value - The value to deserialize
+ * @returns {*} The deserialized value
+ */
+export function deserializeControlValue (value) {
+  return value === UNSET
+    ? undefined
+    : value;
+}
diff --git a/packages/combinator/src/lib/convert.js b/packages/combinator/src/lib/convert.js
new file mode 100644
index 0000000000..ae75993137
--- /dev/null
+++ b/packages/combinator/src/lib/convert.js
@@ -0,0 +1,85 @@
+import { parseDocValue, stringifyDocValue } from '@/src/lib/parse';
+
+const convertMap = {
+  object: {
+    array: objectToArray,
+    string: stringifyDocValue,
+  },
+  array: {
+    object: arrayToObject,
+    string: stringifyDocValue,
+  },
+  string: {
+    object: stringToObject,
+    array: stringToArray,
+    number: parseInt,
+    boolean: stringToBoolean,
+  },
+  number: {
+    string: numberToString,
+    boolean: numberToBoolean,
+  },
+  boolean: {
+    string: booleanToString,
+    number: booleanToNumber,
+  },
+};
+
+/**
+ * Converts a 'value' 'from' one data type 'to' another if implemented.
+ * Returns null if unable to convert.
+ *
+ * @param {*} from - The type name to convert from
+ * @param {*} to - The type name to convert to
+ * @param {*} value - The original value
+ * @returns {*} The converted value or 'null'
+ */
+export function convert (from, to, value) {
+  return convertMap[from]?.[to]?.(value);
+}
+
+function objectToArray (object) {
+  return Object.values(object);
+}
+
+function arrayToObject (array) {
+  return {
+    ...array,
+  };
+}
+
+function stringToObject (string) {
+  const value = parseDocValue(string);
+  return Array.isArray(value)
+    ? arrayToObject(value)
+    : value;
+}
+
+function stringToArray (string) {
+  const value = parseDocValue(string);
+  return Array.isArray(value)
+    ? value
+    : objectToArray(value);
+}
+
+function stringToBoolean (string) {
+  return string === 'true';
+}
+
+function numberToString (number) {
+  return number
+    ? number.toString()
+    : null;
+}
+
+function numberToBoolean (number) {
+  return number === 1;
+}
+
+function booleanToString (boolean) {
+  return boolean ? 'true' : 'false';
+}
+
+function booleanToNumber (boolean) {
+  return boolean ? 1 : 0;
+}
diff --git a/packages/combinator/src/lib/info.js b/packages/combinator/src/lib/info.js
new file mode 100644
index 0000000000..866c509253
--- /dev/null
+++ b/packages/combinator/src/lib/info.js
@@ -0,0 +1,175 @@
+import { controlMap } from '@/src/lib/control';
+import { extendBinding, extendEvent, extendMember } from '@/src/lib/info_extend';
+import clone from 'just-clone';
+
+/**
+ * Gets component data from the documentation and processing on it
+ * to return a 'info' and 'defaults' object.
+ *
+ * The 'info' object contains all the post-processed documentation data.
+ * The 'defaults' object contains a map of default values for each member in 'info'.
+ *
+ * @param {object} component - The target component.
+ * @param {object} documentation - The component documentation.
+ * @returns {Array} A newly instantiated info object.
+ */
+export function getComponentInfo (component, documentation) {
+  const info = clone(documentation.find(componentInfo => componentInfo.displayName === component.name));
+  extendInfo(info, component);
+  return info;
+}
+
+/**
+ * Delegates the data processing for different member groups.
+ *
+ * The data processing extends the documentation for each member of a member group.
+ * Processing can be customized for each member group by passing in custom handlers
+ * to the `processMembers(members, ...handlers)` function.
+ *
+ * Example:
+ * info.events = processMembers(info.events, extendEvent);
+ *   Each event member will have the custom `extendEvent(...)` function applied to it.
+ *
+ * If applicable defaults are set after the member group is fully extended.
+ *
+ * @param {object} info - The unprocessed info object.
+ * @param {object} component - The target component.
+ */
+function extendInfo (info, component) {
+  if (!info) {
+    return;
+  }
+
+  renameModelProp(info);
+
+  const attributes = getAttributes(info);
+
+  if (info.slots) {
+    info.slots = processMembers(info.slots);
+  }
+
+  if (info.props) {
+    const defaultCache = getComponentDefaults(component);
+    info.props = processMembers(info.props, binding => extendBinding(binding, defaultCache));
+  }
+
+  if (attributes) {
+    info.attributes = processMembers(attributes);
+  }
+
+  if (info.events) {
+    info.events = processMembers(info.events, extendEvent);
+  }
+}
+
+/**
+ * Renames the prop that contains the custom 'model' tag to its original name.
+ *
+ * @param {object} info - The unprocessed info object.
+ */
+function renameModelProp (info) {
+  const model = info.props?.find(componentProp => {
+    const tags = componentProp.tags;
+    return tags
+      ? 'model' in tags
+      : false;
+  });
+  if (model) {
+    model.name = model.tags.model[0]?.description;
+  }
+}
+
+/**
+ * Gets attribute members by finding custom attribute 'property' tags.
+ * Creates a member object for each with name, type and default value.
+ *
+ * @param {object} info - The unprocessed info object.
+ * @returns {Array} - Array of attribute members.
+ */
+function getAttributes (info) {
+  const properties = info.tags.property;
+
+  if (!properties) {
+    return null;
+  }
+
+  return properties.filter(property => {
+    return property.description === 'attribute';
+  }).map(property => {
+    const type = property.type.name.toLowerCase();
+    const defaultValue = controlMap[type].default();
+    return {
+      name: property.name,
+      type: {
+        name: type,
+      },
+      initialValue: defaultValue,
+      defaultValue,
+    };
+  });
+}
+
+/**
+ * Processes a member group by extending each member with the `extendMember(member)` function.
+ * Custom processing can be done on each member by passing a processing function as a parameter.
+ *
+ * Example:
+ * `processMembers(info.events, extendEvent)`
+ *
+ * Each event member will be processed with the default `extendMember(member)` function and also have the
+ * custom `extendEvent(member)` function applied after.
+ *
+ * Multiple processor functions can be passed in after the 'members' parameter.
+ * They are invoked in the order they are passed in.
+ *
+ * @param {Array} members - The member group to process.
+ * @param {Function} processors - The optional, additional member processing functions.
+ * @returns {Array} The processed member group.
+ */
+function processMembers (members, ...processors) {
+  return members?.map(member => {
+    extendMember(member);
+    processors.forEach(processor => {
+      processor(member);
+    });
+    return member;
+  });
+}
+
+/**
+ * Gets all the default values for each possible member of a component.
+ *
+ * @param {object} component - The target component.
+ * @returns {object} Default value map.
+ */
+function getComponentDefaults (component) {
+  /**
+   * Get all objects containing members to search for default values.
+   * Contains all the base props and props for each mixin.
+   *
+   * @type {Array}
+   */
+  const componentSearchObjects = [
+    component.props,
+    ...(component.mixins?.map(mixin => mixin.props) ?? []),
+    ...(component.extends?.mixins?.map(mixin => mixin.props) ?? []),
+  ].filter(obj => obj);
+
+  /**
+   * Searches each member in each object and returns an object of key-value
+   * pairs for each member and its default value respectively.
+   */
+  return {
+    ...Object.fromEntries(componentSearchObjects.filter(path => path).map(path => {
+      return Object.entries(path).map(([entryKey, entryValue]) => {
+        const entryDefault = entryValue.default;
+        return [
+          entryKey,
+          entryValue.type !== Function && typeof entryDefault === 'function'
+            ? entryDefault()
+            : entryDefault,
+        ];
+      });
+    }).flat()),
+  };
+}
diff --git a/packages/combinator/src/lib/info_extend.js b/packages/combinator/src/lib/info_extend.js
new file mode 100644
index 0000000000..fb9a50a152
--- /dev/null
+++ b/packages/combinator/src/lib/info_extend.js
@@ -0,0 +1,73 @@
+import { paramCase } from 'change-case';
+import { typeOfMemberValue } from '@/src/lib/utils';
+import { capitalize } from 'vue';
+
+/**
+ * The default processing function that is applied to every member in a member group.
+ *
+ * Sets a predetermined default value and default type for a member.
+ * Also adds a getter for a label value.
+ *
+ * @param {object} member - The extended member.
+ */
+export function extendMember (member) {
+  if (member.type) {
+    const typeString = member.type.name ?? member.type.names?.[0];
+    delete member.type;
+    if (typeString) {
+      member.types = extractMemberTypes(typeString);
+    }
+  }
+  if (member.name) {
+    member.label = paramCase(member.name);
+  }
+  if (member.description) {
+    member.description = capitalize(member.description);
+  }
+}
+
+export function extendBinding (member, defaults) {
+  const defaultValue = Object.entries(defaults).find(([name]) => {
+    return name === member.name;
+  })?.[1];
+
+  const defaultType = typeOfMemberValue(defaultValue);
+
+  delete member.defaultValue;
+  if (defaultValue !== undefined) {
+    member.initialValue = defaultValue;
+    member.defaultValue = defaultValue;
+  }
+
+  if (defaultType) {
+    member.defaultType = defaultType;
+  }
+}
+
+/**
+ * Splits a member type string into an array of type names.
+ *
+ * @param {string} typeString - The member type string.
+ * @returns {Array} Array of types for member.
+ */
+function extractMemberTypes (typeString) {
+  return typeString.split('|').map(type => type.trim().toLowerCase());
+}
+
+/**
+ * Extends an event member.
+ *
+ * Event members use the custom 'type' tag so their type data
+ * is stored differently than other members.
+ *
+ * This corrects the type data to the same format.
+ *
+ * @param {object} event - The event member.
+ */
+export function extendEvent (event) {
+  const types = event.type?.names?.[0];
+  delete event.type;
+  if (types) {
+    event.types = extractMemberTypes(types);
+  }
+}
diff --git a/packages/combinator/src/lib/ordered_object.js b/packages/combinator/src/lib/ordered_object.js
new file mode 100644
index 0000000000..e72ea8865c
--- /dev/null
+++ b/packages/combinator/src/lib/ordered_object.js
@@ -0,0 +1,80 @@
+/**
+ * Proxy that uses a map to mimic an object that always enumerates
+ * keys in the same order that they were added to the object.
+ *
+ * Used by the 'object' control to keep keys in order when
+ * updating them. The controls will bounce around while editing otherwise.
+ */
+export class OrderedObject {
+  constructor () {
+    this.map = new Map();
+    return new Proxy(this, {
+      get: this.get,
+
+      /**
+       * Designates the keys, which come from the map, which is always ordered.
+       *
+       * @param {OrderedObject} target - The proxy target.
+       * @returns {Array} Array of ordered keys.
+       */
+      ownKeys (target) {
+        const keys = [];
+        for (const key of target.map.keys()) {
+          keys.push(key);
+        }
+        return keys;
+      },
+
+      /**
+       * Has to be declared to use with object functions such as `Object.entries(...)` etc...
+       *
+       * @returns {object} The property descriptor.
+       */
+      getOwnPropertyDescriptor () {
+        return {
+          enumerable: true,
+          configurable: true,
+        };
+      },
+    });
+  }
+
+  /**
+   * When accessing with an indexer '[]', will search the underlying map object for a key.
+   * If the key doesn't exist, the accessor will be reflected to this 'OrderedObject' instance.
+   *
+   * @param {OrderedObject} target - The proxy target.
+   * @param {string} prop - The property that is being accessed.
+   * @returns {*} Property value from the map or this object.
+   */
+  get (target, prop) {
+    if (target.map.has(prop)) {
+      return target.map.get(prop);
+    }
+
+    return Reflect.get(target, prop);
+  }
+
+  set (key, value) {
+    this.map.set(key, value);
+  }
+
+  static fromEntries (entries) {
+    const obj = new OrderedObject();
+    entries.forEach(([key, value]) => {
+      obj.set(key, value);
+    });
+    return obj;
+  }
+
+  toJSON () {
+    return Object.fromEntries(Object.entries(this));
+  }
+
+  [Symbol.iterator] () {
+    const iterator = this.map[Symbol.iterator]();
+    return {
+      next: () => iterator.next(),
+    };
+  }
+}
diff --git a/packages/combinator/src/lib/parse.js b/packages/combinator/src/lib/parse.js
new file mode 100644
index 0000000000..a224c00a80
--- /dev/null
+++ b/packages/combinator/src/lib/parse.js
@@ -0,0 +1,21 @@
+import JSON5 from 'json5-with-undefined';
+
+/**
+ * Stringifies a documentation value using the docgen format.
+ *
+ * @param {*} value - The value to stringify.
+ * @returns {string} Stringified value.
+ */
+export function stringifyDocValue (value) {
+  return JSON5.stringify(value);
+}
+
+/**
+ * Parses a documentation value using the docgen format.
+ *
+ * @param {string} value - The value to parse.
+ * @returns {*} The parsed value
+ */
+export function parseDocValue (value) {
+  return JSON5.parse(value);
+}
diff --git a/packages/combinator/src/lib/test/utils_test.js b/packages/combinator/src/lib/test/utils_test.js
new file mode 100644
index 0000000000..310371326a
--- /dev/null
+++ b/packages/combinator/src/lib/test/utils_test.js
@@ -0,0 +1,15 @@
+// eslint-disable-next-line import/no-absolute-path
+import supportedComponents from '/src/supported_components.json';
+import * as dialtone from '@dialpad/dialtone-vue';
+
+/**
+ * Uses the names of supported components from the 'supported_components.json'
+ * file and returns an array of matching Dialtone Vue component objects.
+ *
+ * @returns {Array} Array of supported components
+ */
+export function getSupportedComponents () {
+  return Object.values(dialtone).filter((exportValue) => {
+    return supportedComponents.includes(exportValue?.name);
+  });
+}
diff --git a/packages/combinator/src/lib/utils.js b/packages/combinator/src/lib/utils.js
new file mode 100644
index 0000000000..ceaec37560
--- /dev/null
+++ b/packages/combinator/src/lib/utils.js
@@ -0,0 +1,117 @@
+import { DEFAULT_PREFIX } from '@/src/lib/constants';
+
+/**
+ * Copy all the entries of an object into a new object.
+ *
+ * @param {object} obj - The target object.
+ * @returns {object} The flattened object.
+ */
+export function flatten (obj) {
+  const result = {};
+  for (const key in obj) {
+    result[key] = obj[key];
+  }
+  return result;
+}
+
+/**
+ * Map of prefixes with their current 'id' numbers.
+ * Used by `getUniqueString(...)`
+ *
+ * @type {object}
+ */
+const UNIQUE_ID_MAP = {};
+
+/**
+ * Gets the next string value given a prefix.
+ *
+ * @param {string} prefix - The prefix that will be uniquely incremented.
+ * @returns {string} The next unique string for given prefix.
+ */
+export function getUniqueString (prefix = DEFAULT_PREFIX) {
+  let id = UNIQUE_ID_MAP[prefix];
+  if (!id) {
+    id = 0;
+    UNIQUE_ID_MAP[prefix] = id;
+  }
+  return `${prefix}${UNIQUE_ID_MAP[prefix]++}`;
+}
+
+/**
+ * Gets specific type name from a value, intended to be used with value from a 'member'.
+ * Gives some more specific type names such as 'array' etc...
+ *
+ * @param {*} value - The value.
+ * @returns {string|null} The specific member type.
+ */
+export function typeOfMemberValue (value) {
+  if (value === undefined || value === null) {
+    return null;
+  }
+
+  const type = typeof value;
+  switch (type) {
+    case 'symbol': {
+      return value.toString();
+    }
+    case 'object': {
+      return Array.isArray(value)
+        ? 'array'
+        : 'object';
+    }
+    default: return type;
+  }
+}
+
+/**
+ * Enumerates an object that contains key-value pairs, each containing an array.
+ * A handler is called for each item in each array.
+ *
+ * The first parameter for the handler is the key for the array that the item is in.
+ * The second parameter for the handler is the item in the array.
+ *
+ * Used to make enumerating through the 'options' and 'info' members easier.
+ *
+ * @param {Function} handler - The handler called for each entry.
+ * @param {object} groups - Object that contains key-value pairs, each containing an array.
+ */
+export function enumerateGroups (handler, groups) {
+  Object.entries(groups).forEach(([group, entries]) => {
+    entries?.forEach(entry => {
+      handler(group, entry);
+    });
+  });
+}
+
+/**
+ * Gets the full list of icon component names from the dialtone package.
+ *
+ * @returns {Array} icon components.
+ */
+export function getIcons () {
+  const requireContext = require.context(
+    '../../node_modules/@dialpad/dialtone/lib/dist/vue/icons',
+    false,
+    /[A-Z]\w+\.(vue|js)$/,
+  );
+
+  return getComponentFilesFromDir(requireContext).map(item => item.componentName);
+}
+
+/**
+ * Extracts filename and component name from all files in a directory.
+ *
+ * @param {object} requireContext - a requireContext containing the path of the
+ * directory you would like to read files from.
+ * @returns {Array} arr of objects containing both the
+ * filename and component name in PascalCase.
+ */
+export const getComponentFilesFromDir = (requireContext) => {
+  const files = [];
+  requireContext.keys().forEach(fileName => {
+    // Get PascalCase name of component
+    const componentName = fileName.split('/').pop().replace(/\.\w+$/, '');
+    files.push({ fileName, componentName });
+  });
+  return files;
+};
diff --git a/packages/combinator/src/lib/utils_vue.js b/packages/combinator/src/lib/utils_vue.js
new file mode 100644
index 0000000000..75a55aaeb6
--- /dev/null
+++ b/packages/combinator/src/lib/utils_vue.js
@@ -0,0 +1,86 @@
+import { computed, ref } from 'vue';
+import { getUniqueString } from '@/src/lib/utils';
+
+/**
+ * Property that can be used to store persistent data in local storage for a reactive `ref(...)` object.
+ *
+ * Wraps a `ref(...)` providing read and write functionality that also updates a local storage value.
+ * A value will be searched for in local storage based on the 'key' if not found it will use the 'defaultValue'.
+ *
+ * Uses JSON serialization so values retain their true data types.
+ *
+ * @param {string} key - The local storage key.
+ * @param {*} defaultValue - The default value when value is not in local storage.
+ * @returns {WritableComputedRef<*>} The cached ref object.
+ */
+export function cachedRef (key, defaultValue) {
+  const reference = ref(JSON.parse(window.localStorage.getItem(key)) || defaultValue);
+  return computed({
+    get: () => reference.value,
+    set (value) {
+      window.localStorage.setItem(key, JSON.stringify(value));
+      reference.value = value;
+    },
+  });
+}
+
+/**
+ * Property that can be used with `v-model`.
+ * Intended to wrap reactive objects such as `ref(...)` and `reactive(...)`.
+ *
+ * get: Gets the wrapped object
+ * set: Invokes a handler with the first parameter being a provided event value
+ *   and the second parameter is the wrapped object. Allows vue emit events to
+ *   interact with the wrapped object.
+ *
+ * @param {object} model - The target object to wrap.
+ * @param {Function} handler - The handler function, should take an event value and use it to modify the wrapped object.
+ * @returns {WritableComputedRef<*>} The computed model object.
+ */
+export function computedModel (model, handler) {
+  return computed({
+    get: () => model.value,
+    set: (e) => handler(e, model.value),
+  });
+}
+
+/**
+ * Interface for an array of unique 'id' strings where
+ * the indexes represent their position in some external iterable.
+ *
+ * addId: Generate and push 'id' string to array.
+ * removeId: Remove 'id' string at index position, returns the 'id' string.
+ * getId: Gets the 'id' string at index position, if 'id' string is not existent a new one will be generated.
+ *
+ * @param {string} prefix - The prefix used to generate unique id values.
+ * @returns {{addId: addId, removeId: removeId, getId: getId}} The id map object.
+ */
+export function idMap (prefix) {
+  const map = [];
+
+  function add () {
+    const id = getUniqueString(prefix);
+    map.push(id);
+    return id;
+  }
+
+  function remove (index) {
+    const [id] = map.splice(index, 1);
+    return id;
+  }
+
+  function get (index) {
+    let id = map[index];
+    if (!id) {
+      id = getUniqueString(prefix);
+      map.splice(index, 0, id);
+    }
+    return id;
+  }
+
+  return {
+    addId: add,
+    removeId: remove,
+    getId: get,
+  };
+}
diff --git a/packages/combinator/src/main.js b/packages/combinator/src/main.js
new file mode 100644
index 0000000000..db2b08ae4b
--- /dev/null
+++ b/packages/combinator/src/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './App';
+
+createApp(App).mount('#app');
diff --git a/packages/combinator/src/settings.json b/packages/combinator/src/settings.json
new file mode 100644
index 0000000000..f5d9dc46ae
--- /dev/null
+++ b/packages/combinator/src/settings.json
@@ -0,0 +1,15 @@
+{
+  "root": {
+    "default-theme": "light",
+    "default-sidebar": "right"
+  },
+  "code": {
+    "default-scheme": "highlight",
+    "default-verbose": false,
+    "default-indent-spaces": 2
+  },
+  "renderer": {
+    "default-positioning": "center",
+    "default-background": "white"
+  }
+}
\ No newline at end of file
diff --git a/packages/combinator/src/supported_components.json b/packages/combinator/src/supported_components.json
new file mode 100644
index 0000000000..a2d9a0af05
--- /dev/null
+++ b/packages/combinator/src/supported_components.json
@@ -0,0 +1,21 @@
+[
+  "DtAvatar",
+  "DtBadge",
+  "DtButton",
+  "DtButtonGroup",
+  "DtBreadcrumbs",
+  "DtCheckbox",
+  "DtChip",
+  "DtInput",
+  "DtKeyboardShortcut",
+  "DtLazyShow",
+  "DtLink",
+  "DtListItem", "ListItem",
+  "DtNotice",
+  "DtRadio",
+  "DtSelectMenu",
+  "DtToast",
+  "DtToggle",
+  "DtTooltip",
+  "DtValidationMessages"
+]
\ No newline at end of file
diff --git a/packages/combinator/src/variants/variants.js b/packages/combinator/src/variants/variants.js
new file mode 100644
index 0000000000..4b5fb11580
--- /dev/null
+++ b/packages/combinator/src/variants/variants.js
@@ -0,0 +1,29 @@
+import DtBadge from './variants_badge';
+import DtButton from './variants_button';
+import DtBreadcrumbs from './variants_breadcrumbs';
+import DtCheckbox from './variants_checkbox';
+import DtChip from './variants_chip';
+import DtInput from './variants_input';
+import DtLink from './variants_link';
+import DtNotice from './variants_notice';
+import DtRadio from './variants_radio';
+import DtSelectMenu from './variants_select_menu';
+import DtToast from './variants_toast';
+import DtToggle from './variants_toggle';
+
+export default function variants () {
+  return {
+    DtBadge,
+    DtButton,
+    DtBreadcrumbs,
+    DtCheckbox,
+    DtChip,
+    DtInput,
+    DtLink,
+    DtNotice,
+    DtRadio,
+    DtSelectMenu,
+    DtToast,
+    DtToggle,
+  };
+}
diff --git a/packages/combinator/src/variants/variants_badge.js b/packages/combinator/src/variants/variants_badge.js
new file mode 100644
index 0000000000..85cbedee6e
--- /dev/null
+++ b/packages/combinator/src/variants/variants_badge.js
@@ -0,0 +1,9 @@
+export default {
+  default: {
+    slots: {
+      default: {
+        initialValue: 'Badge',
+      },
+    },
+  },
+};
diff --git a/packages/combinator/src/variants/variants_breadcrumbs.js b/packages/combinator/src/variants/variants_breadcrumbs.js
new file mode 100644
index 0000000000..c1fc597930
--- /dev/null
+++ b/packages/combinator/src/variants/variants_breadcrumbs.js
@@ -0,0 +1,15 @@
+export default {
+  default: {
+    props: {
+      breadcrumbs: {
+        initialValue: [
+          { label: 'Root', href: '#' },
+          { label: 'Section', href: '#' },
+          { label: 'Section', href: '#' },
+          { label: 'Section', href: '#' },
+          { label: 'Current Page', href: '#', selected: true },
+        ],
+      },
+    },
+  },
+};
diff --git a/packages/combinator/src/variants/variants_button.js b/packages/combinator/src/variants/variants_button.js
new file mode 100644
index 0000000000..ad3c2ef7a8
--- /dev/null
+++ b/packages/combinator/src/variants/variants_button.js
@@ -0,0 +1,113 @@
+export default {
+  default: {
+    slots: {
+      default: {
+        initialValue: 'Place call',
+      },
+    },
+  },
+  primary: {
+    slots: {
+      default: {
+        initialValue: 'Primary',
+      },
+    },
+    props: {
+      importance: {
+        initialValue: 'primary',
+        lockControl: true,
+      },
+    },
+  },
+  outlined: {
+    slots: {
+      default: {
+        initialValue: 'Outlined',
+      },
+    },
+    props: {
+      importance: {
+        initialValue: 'outlined',
+        lockControl: true,
+      },
+    },
+  },
+  clear: {
+    slots: {
+      default: {
+        initialValue: 'Clear',
+      },
+    },
+    props: {
+      importance: {
+        initialValue: 'clear',
+        lockControl: true,
+      },
+    },
+  },
+  danger: {
+    slots: {
+      default: {
+        initialValue: 'Danger',
+      },
+    },
+    props: {
+      kind: {
+        initialValue: 'danger',
+        lockControl: true,
+      },
+    },
+  },
+  inverted: {
+    slots: {
+      default: {
+        initialValue: 'Inverted',
+      },
+    },
+    props: {
+      kind: {
+        initialValue: 'inverted',
+        lockControl: true,
+      },
+    },
+  },
+  disabled: {
+    slots: {
+      default: {
+        initialValue: 'Disabled',
+      },
+    },
+    attributes: {
+      disabled: {
+        initialValue: true,
+        lockControl: true,
+      },
+    },
+  },
+  link: {
+    slots: {
+      default: {
+        initialValue: 'Link',
+      },
+    },
+    props: {
+      link: {
+        initialValue: true,
+        lockControl: true,
+      },
+    },
+  },
+  loading: {
+    slots: {
+      default: {
+        initialValue: 'Loading',
+      },
+    },
+    props: {
+      loading: {
+        initialValue: true,
+        lockControl: true,
+      },
+    },
+  },
+};
diff --git a/packages/combinator/src/variants/variants_checkbox.js b/packages/combinator/src/variants/variants_checkbox.js
new file mode 100644
index 0000000000..065894a46e
--- /dev/null
+++ b/packages/combinator/src/variants/variants_checkbox.js
@@ -0,0 +1,9 @@
+export default {
+  default: {
+    props: {
+      label: {
+        initialValue: 'Checkbox label',
+      },
+    },
+  },
+};
diff --git a/packages/combinator/src/variants/variants_chip.js b/packages/combinator/src/variants/variants_chip.js
new file mode 100644
index 0000000000..5f1e4e1089
--- /dev/null
+++ b/packages/combinator/src/variants/variants_chip.js
@@ -0,0 +1,9 @@
+export default {
+  default: {
+    slots: {
+      default: {
+        initialValue: 'Chip',
+      },
+    },
+  },
+};
diff --git a/packages/combinator/src/variants/variants_input.js b/packages/combinator/src/variants/variants_input.js
new file mode 100644
index 0000000000..29b7daaeb5
--- /dev/null
+++ b/packages/combinator/src/variants/variants_input.js
@@ -0,0 +1,14 @@
+export default {
+  default: {
+    props: {
+      label: {
+        initialValue: 'Label',
+      },
+    },
+    attributes: {
+      placeholder: {
+        initialValue: 'Placeholder',
+      },
+    },
+  },
+};
diff --git a/packages/combinator/src/variants/variants_link.js b/packages/combinator/src/variants/variants_link.js
new file mode 100644
index 0000000000..1d17bc2017
--- /dev/null
+++ b/packages/combinator/src/variants/variants_link.js
@@ -0,0 +1,14 @@
+export default {
+  default: {
+    slots: {
+      default: {
+        initialValue: 'Base link',
+      },
+    },
+    props: {
+      href: {
+        initialValue: '#',
+      },
+    },
+  },
+};
diff --git a/packages/combinator/src/variants/variants_notice.js b/packages/combinator/src/variants/variants_notice.js
new file mode 100644
index 0000000000..1c1401d85b
--- /dev/null
+++ b/packages/combinator/src/variants/variants_notice.js
@@ -0,0 +1,19 @@
+export default {
+  default: {
+    slots: {
+      default: {
+        initialValue: 'Message body with <a href="#" class="d-link">a link</a>.',
+      },
+    },
+    props: {
+      title: {
+        initialValue: 'Base title (optional)',
+      },
+      closeButtonProps: {
+        initialValue: {
+          ariaLabel: 'close',
+        },
+      },
+    },
+  },
+};
diff --git a/packages/combinator/src/variants/variants_radio.js b/packages/combinator/src/variants/variants_radio.js
new file mode 100644
index 0000000000..77db235958
--- /dev/null
+++ b/packages/combinator/src/variants/variants_radio.js
@@ -0,0 +1,9 @@
+export default {
+  default: {
+    props: {
+      label: {
+        initialValue: 'Radio label',
+      },
+    },
+  },
+};
diff --git a/packages/combinator/src/variants/variants_select_menu.js b/packages/combinator/src/variants/variants_select_menu.js
new file mode 100644
index 0000000000..c5f24969f7
--- /dev/null
+++ b/packages/combinator/src/variants/variants_select_menu.js
@@ -0,0 +1,21 @@
+export default {
+  default: {
+    props: {
+      label: {
+        initialValue: 'Label',
+      },
+      options: {
+        initialValue: [
+          { value: 1, label: 'Option 1' },
+          { value: 2, label: 'Option 2' },
+          { value: 3, label: 'Option 3' },
+        ],
+      },
+    },
+    attributes: {
+      value: {
+        initialValue: '1',
+      },
+    },
+  },
+};
diff --git a/packages/combinator/src/variants/variants_toast.js b/packages/combinator/src/variants/variants_toast.js
new file mode 100644
index 0000000000..5e172aca39
--- /dev/null
+++ b/packages/combinator/src/variants/variants_toast.js
@@ -0,0 +1,22 @@
+export default {
+  default: {
+    slots: {
+      default: {
+        initialValue: 'Message body with <a href="#" class="d-link">a link</a>.',
+      },
+    },
+    props: {
+      title: {
+        initialValue: 'Base title (optional)',
+      },
+      closeButtonProps: {
+        initialValue: {
+          ariaLabel: 'close',
+        },
+      },
+      show: {
+        initialValue: true,
+      },
+    },
+  },
+};
diff --git a/packages/combinator/src/variants/variants_toggle.js b/packages/combinator/src/variants/variants_toggle.js
new file mode 100644
index 0000000000..4de11dbdf1
--- /dev/null
+++ b/packages/combinator/src/variants/variants_toggle.js
@@ -0,0 +1,9 @@
+export default {
+  default: {
+    slots: {
+      default: {
+        initialValue: 'Label',
+      },
+    },
+  },
+};
diff --git a/packages/combinator/vue.config.js b/packages/combinator/vue.config.js
new file mode 100644
index 0000000000..5ad1cb1897
--- /dev/null
+++ b/packages/combinator/vue.config.js
@@ -0,0 +1,18 @@
+const path = require('path');
+
+module.exports = {
+  publicPath: './',
+  lintOnSave: false,
+  css: {
+    extract: false,
+  },
+  configureWebpack: {
+    resolve: {
+      alias: {
+        vue$: 'vue/dist/vue.esm-browser.js',
+        '@': path.resolve(__dirname, '.'),
+        'dialtone-icons': path.resolve(__dirname, 'node_modules/@dialpad/dialtone/lib/dist/vue/icons'),
+      },
+    },
+  },
+};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a6cfb51b71..58105f6e7a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -145,16 +145,16 @@ importers:
         version: 8.56.0
       eslint-config-semistandard:
         specifier: ^17.0.0
-        version: 17.0.0(eslint-config-standard@17.1.0(eslint-plugin-import@2.29.0(eslint@8.56.0))(eslint-plugin-n@15.7.0(eslint@8.56.0))(eslint-plugin-promise@6.1.1(eslint@8.56.0))(eslint@8.56.0))(eslint-plugin-import@2.29.0(eslint@8.56.0))(eslint-plugin-n@15.7.0(eslint@8.56.0))(eslint-plugin-promise@6.1.1(eslint@8.56.0))(eslint@8.56.0)
+        version: 17.0.0(eslint-config-standard@17.1.0(eslint-plugin-import@2.29.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0))(eslint-plugin-n@15.7.0(eslint@8.56.0))(eslint-plugin-promise@6.1.1(eslint@8.56.0))(eslint@8.56.0))(eslint-plugin-import@2.29.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0))(eslint-plugin-n@15.7.0(eslint@8.56.0))(eslint-plugin-promise@6.1.1(eslint@8.56.0))(eslint@8.56.0)
       eslint-config-standard:
         specifier: ^17.1.0
-        version: 17.1.0(eslint-plugin-import@2.29.0(eslint@8.56.0))(eslint-plugin-n@15.7.0(eslint@8.56.0))(eslint-plugin-promise@6.1.1(eslint@8.56.0))(eslint@8.56.0)
+        version: 17.1.0(eslint-plugin-import@2.29.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0))(eslint-plugin-n@15.7.0(eslint@8.56.0))(eslint-plugin-promise@6.1.1(eslint@8.56.0))(eslint@8.56.0)
       eslint-plugin-import:
         specifier: ^2.27.5
-        version: 2.29.0(eslint@8.56.0)
+        version: 2.29.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0)
       eslint-plugin-jest:
         specifier: ^25.2.2
-        version: 25.7.0(eslint@8.56.0)(typescript@5.4.2)
+        version: 25.7.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0)(typescript@5.4.2)
       eslint-plugin-node:
         specifier: ^11.1.0
         version: 11.1.0(eslint@8.56.0)
@@ -349,6 +349,105 @@ importers:
         specifier: ^5.7.0
         version: 5.10.0(encoding@0.1.13)
 
+  packages/combinator:
+    devDependencies:
+      '@dialpad/dialtone':
+        specifier: 6.35.0
+        version: 6.35.0(react-dom@16.14.0(react@16.14.0))(react@16.14.0)
+      '@dialpad/dialtone-vue':
+        specifier: 3.13.0
+        version: 3.13.0(@dialpad/dialtone@6.35.0(react-dom@16.14.0(react@16.14.0))(react@16.14.0))(vue@3.4.15(typescript@5.4.2))
+      '@types/node':
+        specifier: ^16.11.41
+        version: 16.18.83
+      '@typescript-eslint/eslint-plugin':
+        specifier: ^5.30.0
+        version: 5.62.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0)(typescript@5.4.2)
+      '@typescript-eslint/parser':
+        specifier: ^7.0.1
+        version: 7.0.1(eslint@8.56.0)(typescript@5.4.2)
+      '@vitejs/plugin-vue':
+        specifier: ^2.3.3
+        version: 2.3.4(vite@5.4.2(@types/node@16.18.83)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@3.4.15(typescript@5.4.2))
+      '@vitejs/plugin-vue-jsx':
+        specifier: ^1.3.10
+        version: 1.3.10
+      '@vue/cli-plugin-unit-mocha':
+        specifier: ^5.0.8
+        version: 5.0.8(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(less-loader@11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96)))(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))(encoding@0.1.13)(webpack@5.89.0(@swc/core@1.3.96))
+      '@vue/cli-service':
+        specifier: ^5.0.6
+        version: 5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(less-loader@11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96)))(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3)
+      '@vue/test-utils':
+        specifier: ^2.0.2
+        version: 2.4.2(@vue/server-renderer@3.4.15(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))
+      '@vue/tsconfig':
+        specifier: ^0.1.3
+        version: 0.1.3(@types/node@16.18.83)
+      chai:
+        specifier: ^4.3.6
+        version: 4.3.10
+      change-case:
+        specifier: ^4.1.2
+        version: 4.1.2
+      eslint:
+        specifier: ^8.18.0
+        version: 8.56.0
+      eslint-config-semistandard:
+        specifier: ^17.0.0
+        version: 17.0.0(eslint-config-standard@17.1.0(eslint-plugin-import@2.29.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0))(eslint-plugin-n@15.7.0(eslint@8.56.0))(eslint-plugin-promise@6.1.1(eslint@8.56.0))(eslint@8.56.0))(eslint-plugin-import@2.29.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0))(eslint-plugin-n@15.7.0(eslint@8.56.0))(eslint-plugin-promise@6.1.1(eslint@8.56.0))(eslint@8.56.0)
+      eslint-config-standard:
+        specifier: ^17.1.0
+        version: 17.1.0(eslint-plugin-import@2.29.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0))(eslint-plugin-n@15.7.0(eslint@8.56.0))(eslint-plugin-promise@6.1.1(eslint@8.56.0))(eslint@8.56.0)
+      eslint-plugin-import:
+        specifier: ^2.27.5
+        version: 2.29.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0)
+      eslint-plugin-jsdoc:
+        specifier: ^39.3.6
+        version: 39.9.1(eslint@8.56.0)
+      eslint-plugin-mocha:
+        specifier: ^10.1.0
+        version: 10.5.0(eslint@8.56.0)
+      eslint-plugin-node:
+        specifier: ^11.1.0
+        version: 11.1.0(eslint@8.56.0)
+      eslint-plugin-promise:
+        specifier: ^6.1.1
+        version: 6.1.1(eslint@8.56.0)
+      eslint-plugin-vue:
+        specifier: ^9.15.1
+        version: 9.18.1(eslint@8.56.0)
+      eslint-plugin-vuejs-accessibility:
+        specifier: ^2.1.0
+        version: 2.2.0(eslint@8.56.0)
+      js-beautify:
+        specifier: ^1.14.4
+        version: 1.14.11
+      json5-with-undefined:
+        specifier: ^2.1.301
+        version: 2.1.301
+      just-clone:
+        specifier: ^6.1.1
+        version: 6.2.0
+      less:
+        specifier: ^4.1.3
+        version: 4.2.0
+      less-loader:
+        specifier: ^11.0.0
+        version: 11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96))
+      npm-run-all:
+        specifier: ^4.1.5
+        version: 4.1.5
+      serve:
+        specifier: ^13.0.4
+        version: 13.0.4
+      vue:
+        specifier: ^3.2.37
+        version: 3.4.15(typescript@5.4.2)
+      vue-tsc:
+        specifier: ^0.38.1
+        version: 0.38.9(typescript@5.4.2)
+
   packages/dialtone-css:
     dependencies:
       chalk:
@@ -369,19 +468,19 @@ importers:
         version: link:../dialtone-tokens
       '@vue/cli-plugin-eslint':
         specifier: ~5.0.8
-        version: 5.0.8(@swc/core@1.3.96)(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.4.15)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))(encoding@0.1.13)(eslint@8.56.0)
+        version: 5.0.8(@swc/core@1.3.96)(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))(encoding@0.1.13)(eslint@8.56.0)
       '@vue/cli-service':
         specifier: ~5.0.8
-        version: 5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.4.15)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3)
+        version: 5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3)
       autoprefixer:
         specifier: ^10.4.14
-        version: 10.4.16(postcss@8.4.39)
+        version: 10.4.16(postcss@8.4.45)
       child_process:
         specifier: ^1.0.2
         version: 1.0.2
       cssnano:
         specifier: ^6.0.1
-        version: 6.0.1(postcss@8.4.39)
+        version: 6.0.1(postcss@8.4.45)
       del:
         specifier: ^6.1.1
         version: 6.1.1
@@ -396,7 +495,7 @@ importers:
         version: 5.0.0
       gulp-postcss:
         specifier: ^9.0.1
-        version: 9.0.1(postcss@8.4.39)
+        version: 9.0.1(postcss@8.4.45)
       gulp-rename:
         specifier: ^2.0.0
         version: 2.0.0
@@ -426,10 +525,10 @@ importers:
         version: 0.12.7
       postcss-less:
         specifier: ^6.0.0
-        version: 6.0.0(postcss@8.4.39)
+        version: 6.0.0(postcss@8.4.45)
       postcss-sorting:
         specifier: ^8.0.2
-        version: 8.0.2(postcss@8.4.39)
+        version: 8.0.2(postcss@8.4.45)
       precss:
         specifier: ^4.0.0
         version: 4.0.0
@@ -1153,6 +1252,10 @@ packages:
     resolution: {integrity: sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/code-frame@7.24.7':
+    resolution: {integrity: sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/compat-data@7.23.3':
     resolution: {integrity: sha512-BmR4bWbDIoFJmJ9z2cZ8Gmm2MXgEDgjdWgpKmKWUt54UGFJdlj31ECtbaDvCG/qVdG3AQ1SfpZEs01lUFbzLOQ==}
     engines: {node: '>=6.9.0'}
@@ -1165,6 +1268,10 @@ packages:
     resolution: {integrity: sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/generator@7.25.6':
+    resolution: {integrity: sha512-VPC82gr1seXOpkjAAKoLhP50vx4vGNlF4msF64dSFq1P8RfB+QAuJWGHPXXPc8QyfVWwwB/TNNU4+ayZmHNbZw==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-annotate-as-pure@7.22.5':
     resolution: {integrity: sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==}
     engines: {node: '>=6.9.0'}
@@ -1214,6 +1321,10 @@ packages:
     resolution: {integrity: sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-module-imports@7.24.7':
+    resolution: {integrity: sha512-8AyH3C+74cgCVVXow/myrynrAGv+nTVg5vKu2nZph9x7RcRwzmh0VFallJuFTZ9mx6u4eSdXZfcOzSqTUm0HCA==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-module-transforms@7.23.3':
     resolution: {integrity: sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==}
     engines: {node: '>=6.9.0'}
@@ -1228,6 +1339,10 @@ packages:
     resolution: {integrity: sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-plugin-utils@7.24.8':
+    resolution: {integrity: sha512-FFWx5142D8h2Mgr/iPVGH5G7w6jDn4jUSpZTyDnQO0Yn7Ks2Kuz6Pci8H6MPCoUJegd/UZQ3tAvfLCxQSnWWwg==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-remap-async-to-generator@7.22.20':
     resolution: {integrity: sha512-pBGyV4uBqOns+0UvhsTO8qgl8hO89PmiDYv+/COyp1aeMcmfrfruz+/nCMFiYyFF/Knn0yfrC85ZzNFjembFTw==}
     engines: {node: '>=6.9.0'}
@@ -1256,10 +1371,18 @@ packages:
     resolution: {integrity: sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-string-parser@7.24.8':
+    resolution: {integrity: sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-validator-identifier@7.22.20':
     resolution: {integrity: sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-validator-identifier@7.24.7':
+    resolution: {integrity: sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-validator-option@7.22.15':
     resolution: {integrity: sha512-bMn7RmyFjY/mdECUbgn9eoSY4vqvacUnS9i9vGAGttgFWesO6B4CYWA7XlpbWgBt71iv/hfbPlynohStqnu5hA==}
     engines: {node: '>=6.9.0'}
@@ -1276,11 +1399,20 @@ packages:
     resolution: {integrity: sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/highlight@7.24.7':
+    resolution: {integrity: sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/parser@7.23.9':
     resolution: {integrity: sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==}
     engines: {node: '>=6.0.0'}
     hasBin: true
 
+  '@babel/parser@7.25.6':
+    resolution: {integrity: sha512-trGdfBdbD0l1ZPmcJ83eNxB9rbEax4ALFTF7fN386TMYbeCQbyme5cOEXQhbGXKebwGaB/J52w1mrklMcbgy6Q==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
   '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.23.3':
     resolution: {integrity: sha512-iRkKcCqb7iGnq9+3G6rZ+Ciz5VywC4XNRHe57lKM+jOeYAoR0lVqdeeDRfh0tQcTfw/+vBhHn926FmQhLtlFLQ==}
     engines: {node: '>=6.9.0'}
@@ -1370,6 +1502,12 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
+  '@babel/plugin-syntax-jsx@7.24.7':
+    resolution: {integrity: sha512-6ddciUPe/mpMnOKv/U+RSd2vvVy+Yw/JfBB0ZHYjEZt9NLHmCUylNYlsbqCCS1Bffjlb0fCwC9Vqz+sBz6PsiQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
   '@babel/plugin-syntax-logical-assignment-operators@7.10.4':
     resolution: {integrity: sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==}
     peerDependencies:
@@ -1756,6 +1894,10 @@ packages:
   '@babel/regjsgen@0.8.0':
     resolution: {integrity: sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==}
 
+  '@babel/runtime-corejs2@7.25.6':
+    resolution: {integrity: sha512-24uCmOJPrsnS7HtRamCibYabHRV0bscPJNFFcyKgj7FqUA0V5XcbZUmz9PVNDW4L+euMsZtCIetU1LxTmUaIlA==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/runtime@7.23.2':
     resolution: {integrity: sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==}
     engines: {node: '>=6.9.0'}
@@ -1764,14 +1906,26 @@ packages:
     resolution: {integrity: sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/template@7.25.0':
+    resolution: {integrity: sha512-aOOgh1/5XzKvg1jvVz7AVrx2piJ2XBi227DHmbY6y+bM9H2FlN+IfecYu4Xl0cNiiVejlsCri89LUsbj8vJD9Q==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/traverse@7.23.2':
     resolution: {integrity: sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/traverse@7.25.6':
+    resolution: {integrity: sha512-9Vrcx5ZW6UwK5tvqsj0nGpp/XzqthkT0dqIc9g1AdtygFToNtTF67XzYS//dm+SAK9cp3B9R4ZO/46p63SCjlQ==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/types@7.23.0':
     resolution: {integrity: sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/types@7.25.6':
+    resolution: {integrity: sha512-/l42B1qxpG6RdfYf343Uw1vmDjeNhneUXtzhojE7pDgfpEypmRhI6j1kr17XCVv4Cgl9HdAiQY2x0GwKm7rWCw==}
+    engines: {node: '>=6.9.0'}
+
   '@bcoe/v8-coverage@0.2.3':
     resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
 
@@ -1904,6 +2058,16 @@ packages:
   '@dialpad/dialtone-combinator@0.3.1':
     resolution: {integrity: sha512-6Tnt72vgL5XirVA/0wahkVk2Ayx480xgTBSgZ4Rnk6HFzzFhPg4VNmEgt55vXlk/owxqZMVRXwNc8Po5t7WnoA==}
 
+  '@dialpad/dialtone-vue@3.13.0':
+    resolution: {integrity: sha512-GN71IQawYctjVYQxK4NYNu0w6X+ymC91+DJwbLZcZ51AgDEwP3koAJMUKoqfrwznaFkedHZ6ZyaxkDNKbuIQ4Q==}
+    engines: {node: '>= 16'}
+    peerDependencies:
+      '@dialpad/dialtone': '>=6.34'
+      vue: '>=3.2'
+
+  '@dialpad/dialtone@6.35.0':
+    resolution: {integrity: sha512-ie3fMxRaW2HTQwRXj1kzkoACH5w2FM4moHTw9SNNUuCsb0/XVPKv303pmbnlJG8ubbpLO8UUsmdqdn5FeXm/0w==}
+
   '@dialpad/postcss-responsive-variations@1.1.5':
     resolution: {integrity: sha512-vCeaoF+QKZOVPHYsenCRh/XSl1ppUmXS+XUZqRa2gXtQDe6je5qeAK2H7PIwZiNM9gMA7g6EyHs1PshCWDCl9w==}
     engines: {node: '>=12.0.0'}
@@ -1948,6 +2112,10 @@ packages:
     peerDependencies:
       react: '>=16.8.0'
 
+  '@es-joy/jsdoccomment@0.36.1':
+    resolution: {integrity: sha512-922xqFsTpHs6D0BUiG4toiyPOMc8/jafnWKxz1KWgS4XzKPy2qXf1Pe6UFuNSCQqt6tOuhAWXBNuuyUhJmw9Vg==}
+    engines: {node: ^14 || ^16 || ^17 || ^18 || ^19}
+
   '@esbuild/aix-ppc64@0.21.5':
     resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==}
     engines: {node: '>=12'}
@@ -2828,6 +2996,10 @@ packages:
     resolution: {integrity: sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==}
     engines: {node: '>=6.0.0'}
 
+  '@jridgewell/gen-mapping@0.3.5':
+    resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==}
+    engines: {node: '>=6.0.0'}
+
   '@jridgewell/resolve-uri@3.1.1':
     resolution: {integrity: sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==}
     engines: {node: '>=6.0.0'}
@@ -2836,6 +3008,10 @@ packages:
     resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==}
     engines: {node: '>=6.0.0'}
 
+  '@jridgewell/set-array@1.2.1':
+    resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==}
+    engines: {node: '>=6.0.0'}
+
   '@jridgewell/source-map@0.3.5':
     resolution: {integrity: sha512-UTYAUj/wviwdsMfzoSJspJxbkH5o1snzwX0//0ENX1u/55kkZZkcTZP6u9bwKGkv+dkk9at4m1Cpt0uY80kcpQ==}
 
@@ -2845,6 +3021,9 @@ packages:
   '@jridgewell/trace-mapping@0.3.20':
     resolution: {integrity: sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==}
 
+  '@jridgewell/trace-mapping@0.3.25':
+    resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
+
   '@jsonjoy.com/base64@1.1.2':
     resolution: {integrity: sha512-q6XAnWQDIMA3+FTiOYajoYqySkO+JSat0ytXGSuRdq9uXE7o92gzuQwQM14xaCRlBLGq3v5miDGC4vkVTn54xA==}
     engines: {node: '>=10.0'}
@@ -3711,6 +3890,10 @@ packages:
     resolution: {integrity: sha512-Tf3YpbBKcQn991KKcw/vg7vZf98v01seSv6CVxZBbRkL/xyjnoYB6KgrFL6zskT1A4dWC/vg77KyNOW+ePaNlA==}
     engines: {node: '>= 10'}
 
+  '@rollup/pluginutils@4.2.1':
+    resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
+    engines: {node: '>= 8.0.0'}
+
   '@rollup/pluginutils@5.1.0':
     resolution: {integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==}
     engines: {node: '>=14.0.0'}
@@ -4808,6 +4991,17 @@ packages:
   '@types/yauzl@2.10.3':
     resolution: {integrity: sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==}
 
+  '@typescript-eslint/eslint-plugin@5.62.0':
+    resolution: {integrity: sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      '@typescript-eslint/parser': ^5.0.0
+      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   '@typescript-eslint/eslint-plugin@7.0.1':
     resolution: {integrity: sha512-OLvgeBv3vXlnnJGIAgCLYKjgMEU+wBGj07MQ/nxAaON+3mLzX7mJbhRYrVGiVvFiXtwFlkcBa/TtmglHy0UbzQ==}
     engines: {node: ^16.0.0 || >=18.0.0}
@@ -4847,6 +5041,16 @@ packages:
     resolution: {integrity: sha512-v7/T7As10g3bcWOOPAcbnMDuvctHzCFYCG/8R4bK4iYzdFqsZTbXGln0cZNVcwQcwewsYU2BJLay8j0/4zOk4w==}
     engines: {node: ^16.0.0 || >=18.0.0}
 
+  '@typescript-eslint/type-utils@5.62.0':
+    resolution: {integrity: sha512-xsSQreu+VnfbqQpW5vnCJdq1Z3Q0U31qiWmRhr98ONQmcp/yhiPJFPq8MXiJVLiksmOKSjIldZzkebzHuCGzew==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: '*'
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   '@typescript-eslint/type-utils@7.0.1':
     resolution: {integrity: sha512-YtT9UcstTG5Yqy4xtLiClm1ZpM/pWVGFnkAa90UfdkkZsR1eP2mR/1jbHeYp8Ay1l1JHPyGvoUYR6o3On5Nhmw==}
     engines: {node: ^16.0.0 || >=18.0.0}
@@ -4926,9 +5130,16 @@ packages:
     resolution: {integrity: sha512-hwAgrOyk++RTXrP4KzCg7zB2U0xt7RUU0ZdMSCsqF3eKUwkdXUMyTb0qdCuji7VIbcpG62kKTU9M1J1c9UpFBw==}
     engines: {node: ^16.0.0 || >=18.0.0}
 
+  '@ungap/promise-all-settled@1.1.2':
+    resolution: {integrity: sha512-sL/cEvJWAnClXw0wHk85/2L0G6Sj8UB0Ctc1TEMbKSsmpRosqhwj9gWgFRZSrBr2f9tiXISwNhCPmlfqUqyb9Q==}
+
   '@ungap/structured-clone@1.2.0':
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
 
+  '@vitejs/plugin-vue-jsx@1.3.10':
+    resolution: {integrity: sha512-Cf5zznh4yNMiEMBfTOztaDVDmK1XXfgxClzOSUVUc8WAmHzogrCUeM8B05ABzuGtg0D1amfng+mUmSIOFGP3Pw==}
+    engines: {node: '>=12.0.0'}
+
   '@vitejs/plugin-vue2@2.3.1':
     resolution: {integrity: sha512-/ksaaz2SRLN11JQhLdEUhDzOn909WEk99q9t9w+N12GjQCljzv7GyvAbD/p20aBUjHkvpGOoQ+FCOkG+mjDF4A==}
     engines: {node: ^14.18.0 || >= 16.0.0}
@@ -4936,6 +5147,13 @@ packages:
       vite: ^3.0.0 || ^4.0.0 || ^5.0.0
       vue: ^2.7.0-0
 
+  '@vitejs/plugin-vue@2.3.4':
+    resolution: {integrity: sha512-IfFNbtkbIm36O9KB8QodlwwYvTEsJb4Lll4c2IwB3VHc2gie2mSPtSzL0eYay7X2jd/2WX02FjSGTWR6OPr/zg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      vite: ^2.5.10
+      vue: ^3.2.25
+
   '@vitejs/plugin-vue@4.5.0':
     resolution: {integrity: sha512-a2WSpP8X8HTEww/U00bU4mX1QpLINNuz/2KMNpLsdu3BzOpak3AGI1CJYBTXcc4SPhaD0eNRUp7IyQK405L5dQ==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -4965,12 +5183,18 @@ packages:
   '@vitest/utils@1.0.4':
     resolution: {integrity: sha512-gsswWDXxtt0QvtK/y/LWukN7sGMYmnCcv1qv05CsY6cU/Y1zpGX1QuvLs+GO1inczpE6Owixeel3ShkjhYtGfA==}
 
+  '@volar/code-gen@0.38.9':
+    resolution: {integrity: sha512-n6LClucfA+37rQeskvh9vDoZV1VvCVNy++MAPKj2dT4FT+Fbmty/SDQqnsEBtdEe6E3OQctFvA/IcKsx3Mns0A==}
+
   '@volar/language-core@1.11.1':
     resolution: {integrity: sha512-dOcNn3i9GgZAcJt43wuaEykSluAuOkQgzni1cuxLxTV0nJKanQztp7FxyswdRILaKH+P2XZMPRp2S4MV/pElCw==}
 
   '@volar/language-core@2.4.0':
     resolution: {integrity: sha512-FTla+khE+sYK0qJP+6hwPAAUwiNHVMph4RUXpxf/FIPKUP61NFrVZorml4mjFShnueR2y9/j8/vnh09YwVdH7A==}
 
+  '@volar/source-map@0.38.9':
+    resolution: {integrity: sha512-ba0UFoHDYry+vwKdgkWJ6xlQT+8TFtZg1zj9tSjj4PykW1JZDuM0xplMotLun4h3YOoYfY9K1huY5gvxmrNLIw==}
+
   '@volar/source-map@1.11.1':
     resolution: {integrity: sha512-hJnOnwZ4+WT5iupLRnuzbULZ42L7BWWPMmruzwtLhJfpDVoZLjNBxHDi2sY2bgZXCKlpU5XcsMFoYrsQmPhfZg==}
 
@@ -4983,6 +5207,30 @@ packages:
   '@volar/typescript@2.4.0':
     resolution: {integrity: sha512-9zx3lQWgHmVd+JRRAHUSRiEhe4TlzL7U7e6ulWXOxHH/WNYxzKwCvZD7WYWEZFdw4dHfTD9vUR0yPQO6GilCaQ==}
 
+  '@volar/vue-code-gen@0.38.9':
+    resolution: {integrity: sha512-tzj7AoarFBKl7e41MR006ncrEmNPHALuk8aG4WdDIaG387X5//5KhWC5Ff3ZfB2InGSeNT+CVUd74M0gS20rjA==}
+    deprecated: 'WARNING: This project has been renamed to @vue/language-core. Install using @vue/language-core instead.'
+
+  '@volar/vue-typescript@0.38.9':
+    resolution: {integrity: sha512-iJMQGU91ADi98u8V1vXd2UBmELDAaeSP0ZJaFjwosClQdKlJQYc6MlxxKfXBZisHqfbhdtrGRyaryulnYtliZw==}
+    deprecated: 'WARNING: This project has been renamed to @vue/typescript. Install using @vue/typescript instead.'
+
+  '@vue/babel-helper-vue-transform-on@1.2.5':
+    resolution: {integrity: sha512-lOz4t39ZdmU4DJAa2hwPYmKc8EsuGa2U0L9KaZaOJUt0UwQNjNA3AZTq6uEivhOKhhG1Wvy96SvYBoFmCg3uuw==}
+
+  '@vue/babel-plugin-jsx@1.2.5':
+    resolution: {integrity: sha512-zTrNmOd4939H9KsRIGmmzn3q2zvv1mjxkYZHgqHZgDrXz5B1Q3WyGEjO2f+JrmKghvl1JIRcvo63LgM1kH5zFg==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+
+  '@vue/babel-plugin-resolve-type@1.2.5':
+    resolution: {integrity: sha512-U/ibkQrf5sx0XXRnUZD1mo5F7PkpKyTbfXM3a3rC4YnUz6crHEz9Jg09jzzL6QYlXNto/9CePdOg/c87O4Nlfg==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
   '@vue/cli-overlay@5.0.8':
     resolution: {integrity: sha512-KmtievE/B4kcXp6SuM2gzsnSd8WebkQpg3XaB6GmFh1BJGRqa1UiW9up7L/Q67uOdTigHxr5Ar2lZms4RcDjwQ==}
 
@@ -4997,6 +5245,11 @@ packages:
     peerDependencies:
       '@vue/cli-service': ^3.0.0 || ^4.0.0 || ^5.0.0-0
 
+  '@vue/cli-plugin-unit-mocha@5.0.8':
+    resolution: {integrity: sha512-t8eN1ttbSkHg+U7AjCKwpuhpV2OBsP35RjBkdSrcAPjoX3MxVwoWyqGPeYI+jWbPGX3tFxM/uMQwN0U3lmzH7A==}
+    peerDependencies:
+      '@vue/cli-service': ^3.0.0 || ^4.0.0 || ^5.0.0-0
+
   '@vue/cli-plugin-vuex@5.0.8':
     resolution: {integrity: sha512-HSYWPqrunRE5ZZs8kVwiY6oWcn95qf/OQabwLfprhdpFWAGtLStShjsGED2aDpSSeGAskQETrtR/5h7VqgIlBA==}
     peerDependencies:
@@ -5039,18 +5292,30 @@ packages:
   '@vue/compiler-core@3.4.15':
     resolution: {integrity: sha512-XcJQVOaxTKCnth1vCxEChteGuwG6wqnUHxAm1DO3gCz0+uXKaJNx8/digSz4dLALCy8n2lKq24jSUs8segoqIw==}
 
+  '@vue/compiler-core@3.5.5':
+    resolution: {integrity: sha512-ZrxcY8JMoV+kgDrmRwlDufz0SjDZ7jfoNZiIBluAACMBmgr55o/jTbxnyrccH6VSJXnFaDI4Ik1UFCiq9r8i7w==}
+
   '@vue/compiler-dom@3.4.15':
     resolution: {integrity: sha512-wox0aasVV74zoXyblarOM3AZQz/Z+OunYcIHe1OsGclCHt8RsRm04DObjefaI82u6XDzv+qGWZ24tIsRAIi5MQ==}
 
+  '@vue/compiler-dom@3.5.5':
+    resolution: {integrity: sha512-HSvK5q1gmBbxRse3S0Wt34RcKuOyjDJKDDMuF3i7NC+QkDFrbAqw8NnrEm/z7zFDxWZa4/5eUwsBOMQzm1RHBA==}
+
   '@vue/compiler-sfc@2.7.16':
     resolution: {integrity: sha512-KWhJ9k5nXuNtygPU7+t1rX6baZeqOYLEforUPjgNDBnLicfHCoi48H87Q8XyLZOrNNsmhuwKqtpDQWjEFe6Ekg==}
 
   '@vue/compiler-sfc@3.4.15':
     resolution: {integrity: sha512-LCn5M6QpkpFsh3GQvs2mJUOAlBQcCco8D60Bcqmf3O3w5a+KWS5GvYbrrJBkgvL1BDnTp+e8q0lXCLgHhKguBA==}
 
+  '@vue/compiler-sfc@3.5.5':
+    resolution: {integrity: sha512-MzBHDxwZhgQPHrwJ5tj92gdTYRCuPDSZr8PY3+JFv8cv2UD5/WayH5yo0kKCkKfrtJhc39jNSMityHrkMSbfnA==}
+
   '@vue/compiler-ssr@3.4.15':
     resolution: {integrity: sha512-1jdeQyiGznr8gjFDadVmOJqZiLNSsMa5ZgqavkPZ8O2wjHv0tVuAEsw5hTdUoUW4232vpBbL/wJhzVW/JwY1Uw==}
 
+  '@vue/compiler-ssr@3.5.5':
+    resolution: {integrity: sha512-oFasHnpv/upubjJEmqiTKQYb4qS3ziJddf4UVWuFw6ebk/QTrTUc+AUoTJdo39x9g+AOQBzhOU0ICCRuUjvkmw==}
+
   '@vue/compiler-vue2@2.7.16':
     resolution: {integrity: sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==}
 
@@ -5093,6 +5358,9 @@ packages:
   '@vue/shared@3.4.15':
     resolution: {integrity: sha512-KzfPTxVaWfB+eGcGdbSf4CWdaXcGDqckoeXUh7SB3fZdEtzPCK2Vq9B/lRRL3yutax/LWITz+SwvgyOxz5V75g==}
 
+  '@vue/shared@3.5.5':
+    resolution: {integrity: sha512-0KyMXyEgnmFAs6rNUL+6eUHtUCqCaNrVd+AW3MX3LyA0Yry5SA0Km03CDKiOua1x1WWnIr+W9+S0GMFoSDWERQ==}
+
   '@vue/test-utils@1.3.6':
     resolution: {integrity: sha512-udMmmF1ts3zwxUJEIAj5ziioR900reDrt6C9H3XpWPsLBx2lpHKoA4BTdd9HNIYbkGltWw+JjWJ+5O6QBwiyEw==}
     peerDependencies:
@@ -5108,6 +5376,14 @@ packages:
       '@vue/server-renderer':
         optional: true
 
+  '@vue/tsconfig@0.1.3':
+    resolution: {integrity: sha512-kQVsh8yyWPvHpb8gIc9l/HIDiiVUy1amynLNpCy8p+FoCiZXCo6fQos5/097MmnNZc9AtseDsCrfkhqCrJ8Olg==}
+    peerDependencies:
+      '@types/node': '*'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
   '@vue/tsconfig@0.4.0':
     resolution: {integrity: sha512-CPuIReonid9+zOG/CGTT05FXrPYATEqoDGNrEaqS4hwcw5BUNM2FguC0mOwJD4Jr16UpRVl9N0pY3P+srIbqmg==}
 
@@ -5316,6 +5592,9 @@ packages:
       mem-fs-editor:
         optional: true
 
+  '@zeit/schemas@2.6.0':
+    resolution: {integrity: sha512-uUrgZ8AxS+Lio0fZKAipJjAh415JyrOZowliZAzmnJSsf7piVL5w+G0+gFJ0KSu3QRhvui/7zuvpLz03YjXAhg==}
+
   '@zip.js/zip.js@2.7.48':
     resolution: {integrity: sha512-J7cliimZ2snAbr0IhLx2U8BwfA1pKucahKzTpFtYq4hEgKxwvFJcIjCIVNPwQpfVab7iVP+AKmoH1gidBlyhiQ==}
     engines: {bun: '>=0.7.0', deno: '>=1.0.0', node: '>=16.5.0'}
@@ -5328,6 +5607,10 @@ packages:
     resolution: {integrity: sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==}
     hasBin: true
 
+  abab@2.0.6:
+    resolution: {integrity: sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==}
+    deprecated: Use your platform's native atob() and btoa() methods instead
+
   abbrev@1.1.1:
     resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==}
 
@@ -5343,6 +5626,9 @@ packages:
     resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
     engines: {node: '>= 0.6'}
 
+  acorn-globals@6.0.0:
+    resolution: {integrity: sha512-ZQl7LOWaF5ePqqcX4hLuv/bLXYQNfNWw2c0/yX/TsPRKamzHcTGQnlCjHT3TsmkOUVEPS3crCxiPfdzE/Trlhg==}
+
   acorn-import-assertions@1.9.0:
     resolution: {integrity: sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==}
     peerDependencies:
@@ -5353,6 +5639,10 @@ packages:
     peerDependencies:
       acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
 
+  acorn-walk@7.2.0:
+    resolution: {integrity: sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==}
+    engines: {node: '>=0.4.0'}
+
   acorn-walk@8.3.0:
     resolution: {integrity: sha512-FS7hV565M5l1R08MXqo8odwMTB02C2UqzB17RVgu9EyuYFBqJZ3/ZY97sQD5FewVu1UyDFc1yztUDrAwT0EypA==}
     engines: {node: '>=0.4.0'}
@@ -5594,6 +5884,9 @@ packages:
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
     deprecated: This package is no longer supported.
 
+  arg@2.0.0:
+    resolution: {integrity: sha512-XxNTUzKnz1ctK3ZIcI2XUPlD96wbHP2nGqkPKpvk/HNRlPveYrXIVSTk9m3LcqOgDPg3B1nMvdV/K8wZd7PG4w==}
+
   arg@5.0.2:
     resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
 
@@ -6005,6 +6298,9 @@ packages:
   browser-assert@1.2.1:
     resolution: {integrity: sha512-nfulgvOR6S4gt9UKCeGJOuSGBPGiFT6oQ/2UBnvTY/5aQ1PnksW72fhZkM30DzoRRv2WpwZf1vHHEr3mtuXIWQ==}
 
+  browser-process-hrtime@1.0.0:
+    resolution: {integrity: sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==}
+
   browser-stdout@1.3.1:
     resolution: {integrity: sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw==}
 
@@ -6155,6 +6451,9 @@ packages:
   caniuse-lite@1.0.30001561:
     resolution: {integrity: sha512-NTt0DNoKe958Q0BE0j0c1V9jbUzhBxHIEJy7asmGrpE0yG63KTV7PLHPnK2E1O9RsQrQ081I3NLuXGS6zht3cw==}
 
+  capital-case@1.0.4:
+    resolution: {integrity: sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==}
+
   capture-stack-trace@1.0.2:
     resolution: {integrity: sha512-X/WM2UQs6VMHUtjUDnZTRI+i1crWteJySFzr9UpGoQa4WQffXVTTXuekjl7TjZRlcF2XfjgITT0HxZ9RnxeT0w==}
     engines: {node: '>=0.10.0'}
@@ -6181,6 +6480,10 @@ packages:
     resolution: {integrity: sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==}
     engines: {node: '>=0.10.0'}
 
+  chalk@2.4.1:
+    resolution: {integrity: sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==}
+    engines: {node: '>=4'}
+
   chalk@2.4.2:
     resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
     engines: {node: '>=4'}
@@ -6197,6 +6500,9 @@ packages:
     resolution: {integrity: sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==}
     engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
 
+  change-case@4.1.2:
+    resolution: {integrity: sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==}
+
   change-case@5.4.4:
     resolution: {integrity: sha512-HRQyTk2/YPEkt9TnUPbOpr64Uw3KOicFWPVBb+xiHvd6eBx/qPr9xqfBFDT8P2vWsvvz4jbEkfDe71W3VyNu2w==}
 
@@ -6244,6 +6550,10 @@ packages:
     resolution: {integrity: sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==}
     deprecated: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
 
+  chokidar@3.5.1:
+    resolution: {integrity: sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==}
+    engines: {node: '>= 8.10.0'}
+
   chokidar@3.5.3:
     resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==}
     engines: {node: '>= 8.10.0'}
@@ -6366,6 +6676,9 @@ packages:
   cliui@3.2.0:
     resolution: {integrity: sha512-0yayqDxWQbqk3ojkYqUKqaAQ6AfNKeKWRNA8kR0WXzAsdHpP4BIaOmMAG87JGuO6qcobyW4GjxHd9PmhEd+T9w==}
 
+  cliui@5.0.0:
+    resolution: {integrity: sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==}
+
   cliui@6.0.0:
     resolution: {integrity: sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==}
 
@@ -6503,6 +6816,10 @@ packages:
     resolution: {integrity: sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==}
     engines: {node: ^12.20.0 || >=14}
 
+  comment-parser@1.3.1:
+    resolution: {integrity: sha512-B52sN2VNghyq5ofvUsqZjmk6YkihBX5vMSChmSK9v4ShjKf3Vk5Xcmgpw4o+iIgtrnM/u5FiMpz9VKb8lpBveA==}
+    engines: {node: '>= 12.0.0'}
+
   common-ancestor-path@1.0.1:
     resolution: {integrity: sha512-L3sHRo1pXXEqX8VU28kfgUY+YGsk09hPqZiZmLacNib6XNTCM8ubYeT7ryXQw8asB1sKgcU5lkB7ONug08aB8w==}
 
@@ -6526,6 +6843,10 @@ packages:
     resolution: {integrity: sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==}
     engines: {node: '>= 0.6'}
 
+  compression@1.7.3:
+    resolution: {integrity: sha512-HSjyBG5N1Nnz7tF2+O7A9XUhyjru71/fwgNb7oIsEVHR0WShfs2tIS/EySLgiTe98aOK18YDlMXpzjCXY/n9mg==}
+    engines: {node: '>= 0.8.0'}
+
   compression@1.7.4:
     resolution: {integrity: sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==}
     engines: {node: '>= 0.8.0'}
@@ -6732,9 +7053,16 @@ packages:
       whiskers:
         optional: true
 
+  constant-case@3.0.4:
+    resolution: {integrity: sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==}
+
   constantinople@4.0.1:
     resolution: {integrity: sha512-vCrqcSIq4//Gx74TXXCGnHpulY1dskqLTFGDmhrGxzeXL8lF8kvXv6mpNWlJj1uD4DW23D4ljAqbY4RRaaUZIw==}
 
+  content-disposition@0.5.2:
+    resolution: {integrity: sha512-kRGRZw3bLlFISDBgwTSA1TMBFN6J6GWDeubmDE3AF+3+yXL8hTWv8r5rkLbqYXY4RjPk/EzHnClI3zQf1cFmHA==}
+    engines: {node: '>= 0.6'}
+
   content-disposition@0.5.4:
     resolution: {integrity: sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==}
     engines: {node: '>= 0.6'}
@@ -6823,6 +7151,10 @@ packages:
   core-js-compat@3.33.2:
     resolution: {integrity: sha512-axfo+wxFVxnqf8RvxTzoAlzW4gRoacrHeoFlc9n0x50+7BEyZL/Rt3hicaED1/CEd7I6tPCPVUYcJwCMO5XUYw==}
 
+  core-js@2.6.12:
+    resolution: {integrity: sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==}
+    deprecated: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
+
   core-js@3.36.0:
     resolution: {integrity: sha512-mt7+TUBbTFg5+GngsAxeKBTl5/VS0guFeJacYge9OmHb+m058UwwIm41SE9T4Den7ClatV57B6TYTuJ0CX1MAw==}
 
@@ -7021,6 +7353,16 @@ packages:
     resolution: {integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==}
     engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
 
+  cssom@0.3.8:
+    resolution: {integrity: sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==}
+
+  cssom@0.5.0:
+    resolution: {integrity: sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==}
+
+  cssstyle@2.3.0:
+    resolution: {integrity: sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==}
+    engines: {node: '>=8'}
+
   cssstyle@4.0.1:
     resolution: {integrity: sha512-8ZYiJ3A/3OkDd093CBT/0UKDWry7ak4BdPTFP2+QEP7cmhouyq/Up709ASSj2cK02BbZiMgk7kYjZNS4QP5qrQ==}
     engines: {node: '>=18'}
@@ -7043,6 +7385,10 @@ packages:
     resolution: {integrity: sha512-2iy1EkLdlBzQGvbweYRFxmFath8+K7+AKB0TlhHWkNuH+TmovaMH/Wp7V7R4u7f4SnX3OgLsU9t1NI9ioDnUpg==}
     engines: {node: '>=8'}
 
+  data-urls@3.0.2:
+    resolution: {integrity: sha512-Jy/tj3ldjZJo63sVAvg6LHt2mHvl4V6AgRAmNDtLdm7faqtsx+aJG42rsyCo9JCoRVKwPFzKlIPx3DIibwSIaQ==}
+    engines: {node: '>=12'}
+
   data-urls@5.0.0:
     resolution: {integrity: sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==}
     engines: {node: '>=18'}
@@ -7086,6 +7432,15 @@ packages:
       supports-color:
         optional: true
 
+  debug@4.3.1:
+    resolution: {integrity: sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
   debug@4.3.4:
     resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
     engines: {node: '>=6.0'}
@@ -7370,6 +7725,11 @@ packages:
   domelementtype@2.3.0:
     resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
 
+  domexception@4.0.0:
+    resolution: {integrity: sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==}
+    engines: {node: '>=12'}
+    deprecated: Use your platform's native DOMException instead
+
   domhandler@2.4.2:
     resolution: {integrity: sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==}
 
@@ -7473,6 +7833,9 @@ packages:
   emoji-regex@9.2.2:
     resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
 
+  emoji-toolkit@6.6.0:
+    resolution: {integrity: sha512-pEu0kow2p1N8zCKnn/L6H0F3rWUBB3P3hVjr/O5yl1fK7N9jU4vO4G7EFapC5Y3XwZLUCY0FZbOPyTkH+4V2eQ==}
+
   emoji-toolkit@8.0.0:
     resolution: {integrity: sha512-Vz8YIqQJsQ+QZ4yuKMMzliXceayqfWbNjb6bST+vm77QAhU2is3I+/PRxrNknW+q1bvHHMgjLCQXxzINWLVapg==}
 
@@ -7774,6 +8137,11 @@ packages:
     resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
     engines: {node: '>=12'}
 
+  escodegen@2.1.0:
+    resolution: {integrity: sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==}
+    engines: {node: '>=6.0'}
+    hasBin: true
+
   eslint-config-semistandard@17.0.0:
     resolution: {integrity: sha512-tLi0JYmfiiJgtmRhoES55tENatR7y/5aXOh6cBeW+qjzl1+WwyV0arDqR65XN3/xrPZt+/1EG+xNLknV/0jWsQ==}
     peerDependencies:
@@ -7857,6 +8225,18 @@ packages:
       jest:
         optional: true
 
+  eslint-plugin-jsdoc@39.9.1:
+    resolution: {integrity: sha512-Rq2QY6BZP2meNIs48aZ3GlIlJgBqFCmR55+UBvaDkA3ZNQ0SvQXOs2QKkubakEijV8UbIVbVZKsOVN8G3MuqZw==}
+    engines: {node: ^14 || ^16 || ^17 || ^18 || ^19}
+    peerDependencies:
+      eslint: ^7.0.0 || ^8.0.0
+
+  eslint-plugin-mocha@10.5.0:
+    resolution: {integrity: sha512-F2ALmQVPT1GoP27O1JTZGrV9Pqg8k79OeIuvw63UxMtQKREZtmkK1NFgkZQ2TW7L2JSSFKHFPTtHu5z8R9QNRw==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      eslint: '>=7.0.0'
+
   eslint-plugin-n@15.7.0:
     resolution: {integrity: sha512-jDex9s7D/Qial8AGVIHq4W7NswpUD5DPDL2RH8Lzd9EloWUuvUkHfv4FRLMipH5q2UtyurorBkPeNi1wVWNh3Q==}
     engines: {node: '>=12.22.0'}
@@ -8135,6 +8515,9 @@ packages:
   fast-levenshtein@2.0.6:
     resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
 
+  fast-url-parser@1.1.3:
+    resolution: {integrity: sha512-5jOCVXADYNuRkKFzNJ0dCCewsZiYo0dz8QNYljkOpFC6r2U4OBmKtvm/Tsuh4w1YYdDqDb31a8TVhBJ2OJKdqQ==}
+
   fastest-levenshtein@1.0.16:
     resolution: {integrity: sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==}
     engines: {node: '>= 4.9.1'}
@@ -8613,6 +8996,10 @@ packages:
     resolution: {integrity: sha512-hkLPepehmnKk41pUGm3sYxoFs/umurYfYJCerbXEyFIWcAzvpipAgVkBqqT9RBKMGjnq6kMuyYwha6csxbiM1A==}
     deprecated: Glob versions prior to v9 are no longer supported
 
+  glob@7.1.6:
+    resolution: {integrity: sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==}
+    deprecated: Glob versions prior to v9 are no longer supported
+
   glob@7.2.0:
     resolution: {integrity: sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==}
     deprecated: Glob versions prior to v9 are no longer supported
@@ -8681,10 +9068,18 @@ packages:
     resolution: {integrity: sha512-XAmF0RjlrjY23MA51q3HltdlGxUpXPvg0GioKiD9X6HD28iMjo2dKC8Vqwm7lne4GNr78+RHTfliktR6ZH09wA==}
     engines: {node: '>=8'}
 
+  globals@13.24.0:
+    resolution: {integrity: sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==}
+    engines: {node: '>=8'}
+
   globalthis@1.0.3:
     resolution: {integrity: sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==}
     engines: {node: '>= 0.4'}
 
+  globby@10.0.2:
+    resolution: {integrity: sha512-7dUi7RvCoT/xast/o/dLN53oqND4yk0nsHkhRgn9w65C4PofCLOoJ39iSOg+qVDdWQPIEj+eszMHQ+aLVwwQSg==}
+    engines: {node: '>=8'}
+
   globby@11.1.0:
     resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
     engines: {node: '>=10'}
@@ -8745,6 +9140,10 @@ packages:
     resolution: {integrity: sha512-/PiFUa7WIsl48dUeCvhIHnwNmAAzlI/eHoJl0vu3nsFA366JleY7Ff8EVTplZu5kO0MIdZjKTTnzItL61ahbnw==}
     engines: {node: '>=8.0.0'}
 
+  growl@1.10.5:
+    resolution: {integrity: sha512-qBr4OuELkhPenW6goKVXiv47US3clb3/IbuWF9KNKEijAy9oeHxU9IgzjvJhHkUzhaj7rOUD7+YGWqUjLp5oSA==}
+    engines: {node: '>=4.x'}
+
   gulp-cached@1.1.1:
     resolution: {integrity: sha512-OEGsICR6Vmx0VK3nhpy5MGPzAjeDYC3+NKxNtJAu4DW8L15oy8tCe2WuD6HDEj9BsbSopnOBiXPK95YHvO0DpA==}
     engines: {node: '>= 0.9.0'}
@@ -8890,6 +9289,9 @@ packages:
     resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
     hasBin: true
 
+  header-case@2.0.4:
+    resolution: {integrity: sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==}
+
   highlight.js@10.7.3:
     resolution: {integrity: sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==}
 
@@ -9905,6 +10307,10 @@ packages:
     resolution: {integrity: sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==}
     hasBin: true
 
+  js-yaml@4.0.0:
+    resolution: {integrity: sha512-pqon0s+4ScYUvX30wxQi3PogGFAlUyH0awepWvwkj4jD4v+ova3RiYw8bmA6x2rDrEaj8i/oWKoRxpVNW+Re8Q==}
+    hasBin: true
+
   js-yaml@4.1.0:
     resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
     hasBin: true
@@ -9921,6 +10327,24 @@ packages:
       '@babel/preset-env':
         optional: true
 
+  jsdoc-type-pratt-parser@3.1.0:
+    resolution: {integrity: sha512-MgtD0ZiCDk9B+eI73BextfRrVQl0oyzRG8B2BjORts6jbunj4ScKPcyXGTbB6eXL4y9TzxCm6hyeLq/2ASzNdw==}
+    engines: {node: '>=12.0.0'}
+
+  jsdom-global@3.0.2:
+    resolution: {integrity: sha512-t1KMcBkz/pT5JrvcJbpUR2u/w1kO9jXctaaGJ0vZDzwFnIvGWw9IDSRciT83kIs8Bnw4qpOl8bQK08V01YgMPg==}
+    peerDependencies:
+      jsdom: '>=10.0.0'
+
+  jsdom@18.1.1:
+    resolution: {integrity: sha512-NmJQbjQ/gpS/1at/ce3nCx89HbXL/f5OcenBe8wU1Eik0ROhyUc3LtmG3567dEHAGXkN8rmILW/qtCOPxPHQJw==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      canvas: ^2.5.0
+    peerDependenciesMeta:
+      canvas:
+        optional: true
+
   jsdom@24.0.0:
     resolution: {integrity: sha512-UDS2NayCvmXSXVP6mpTj+73JnNQadZlr9N68189xib2tx5Mls7swlTNao26IoHv46BZJFvXygyRtyXd1feAk1A==}
     engines: {node: '>=18'}
@@ -9974,6 +10398,11 @@ packages:
   json-stringify-safe@5.0.1:
     resolution: {integrity: sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==}
 
+  json5-with-undefined@2.1.301:
+    resolution: {integrity: sha512-GUI3FVAk5bJfh5yzjoqd82RebCIEBVFcqmLfoEGcaZulyMpqnqDm35GhX9zPakrU0/IS9m4PClmpofetg55Tvw==}
+    engines: {node: '>=6'}
+    hasBin: true
+
   json5@1.0.2:
     resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
     hasBin: true
@@ -10002,6 +10431,9 @@ packages:
   jstransformer@1.0.0:
     resolution: {integrity: sha512-C9YK3Rf8q6VAPDCCU9fnqo3mAfOH6vUGnMcP4AQAYIEpWtfGLpwOTmZ+igtdK5y+VvI2n3CyYSzy4Qh34eq24A==}
 
+  just-clone@6.2.0:
+    resolution: {integrity: sha512-1IynUYEc/HAwxhi3WDpIpxJbZpMCvvrrmZVqvj9EhpvbH8lls7HhdhiByjL7DkAaWlLIzpC0Xc/VPvy/UxLNjA==}
+
   just-debounce@1.1.0:
     resolution: {integrity: sha512-qpcRocdkUmf+UTNBYx5w6dexX5J31AKK1OmPwH630a83DdVVUIngk55RSAiIGpQyoH0dlr872VHfPjnQnK1qDQ==}
 
@@ -10097,6 +10529,13 @@ packages:
     resolution: {integrity: sha512-IpSVCk9AYvLHo5ctcIXxOBpMWUe+4TKN3VPWAKUbJikkmsGp0VrSM8IttVc32D6J4WUsiPE6aEFRNmIoF/gdow==}
     engines: {node: '>= 0.10'}
 
+  less-loader@11.1.4:
+    resolution: {integrity: sha512-6/GrYaB6QcW6Vj+/9ZPgKKs6G10YZai/l/eJ4SLwbzqNTBsAqt5hSLVF47TgsiBxV1P6eAU0GYRH3YRuQU9V3A==}
+    engines: {node: '>= 14.15.0'}
+    peerDependencies:
+      less: ^3.5.0 || ^4.0.0
+      webpack: ^5.0.0
+
   less@4.2.0:
     resolution: {integrity: sha512-P3b3HJDBtSzsXUl0im2L7gTO5Ubg8mEN6G8qoTS77iXxXX4Hvu4Qj540PZDvQ8V6DmX6iXo98k7Md0Cm1PrLaA==}
     engines: {node: '>=6'}
@@ -10308,6 +10747,10 @@ packages:
     resolution: {integrity: sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==}
     engines: {node: '>=4'}
 
+  log-symbols@4.0.0:
+    resolution: {integrity: sha512-FN8JBzLx6CzeMrB0tg6pqlGU1wCrXW+ZXGH481kfsBqer0hToTIiHdjH4Mq8xJUbvATujKCvaREGWpGUionraA==}
+    engines: {node: '>=10'}
+
   log-symbols@4.1.0:
     resolution: {integrity: sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==}
     engines: {node: '>=10'}
@@ -10640,6 +11083,9 @@ packages:
   memoizerific@1.11.3:
     resolution: {integrity: sha512-/EuHYwAPdLtXwAwSZkh/Gutery6pD2KYd44oQLhAvQp/50mpyduZh8Q7PYHXTCJ+wuXxt7oij2LXyIJOOYFPog==}
 
+  memory-fs@0.4.1:
+    resolution: {integrity: sha512-cda4JKCxReDXFXRqOHPQscuIYg1PvxbE2S2GP45rnwfEK+vZaXC8C1OFvdHIbgw0DLzowXGVoxLaAmlgRy14GQ==}
+
   memorystream@0.3.1:
     resolution: {integrity: sha512-S3UwM3yj5mtUSEfP41UZmt/0SCoVYUcU1rkXv+BQ5Ig8ndL4sPoJNBUJERafdPb5jjHJGuMgytgKvKIf58XNBw==}
     engines: {node: '>= 0.10.0'}
@@ -10773,10 +11219,18 @@ packages:
     resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==}
     engines: {node: '>=8.6'}
 
+  mime-db@1.33.0:
+    resolution: {integrity: sha512-BHJ/EKruNIqJf/QahvxwQZXKygOQ256myeN/Ew+THcAa5q+PjyTTMMeNQC4DZw5AwfvelsUrA6B67NKMqXDbzQ==}
+    engines: {node: '>= 0.6'}
+
   mime-db@1.52.0:
     resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
     engines: {node: '>= 0.6'}
 
+  mime-types@2.1.18:
+    resolution: {integrity: sha512-lc/aahn+t4/SWV/qcmumYjymLsWfN3ELhpmVuUFjgsORruuZPVSwAQryq+HHGvO/SI2KVX26bx+En+zhM8g8hQ==}
+    engines: {node: '>= 0.6'}
+
   mime-types@2.1.35:
     resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
     engines: {node: '>= 0.6'}
@@ -10832,6 +11286,9 @@ packages:
   minimalistic-assert@1.0.1:
     resolution: {integrity: sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==}
 
+  minimatch@3.0.4:
+    resolution: {integrity: sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==}
+
   minimatch@3.0.5:
     resolution: {integrity: sha512-tUpxzX0VAzJHjLu0xUfFv1gwVp9ba3IOuRAVH2EGuRW8a5emA2FlACLqiT/lDVtS1W+TGNwqz3sWaNyLgDJWuw==}
 
@@ -10944,6 +11401,18 @@ packages:
     engines: {node: '>= 14.0.0'}
     hasBin: true
 
+  mocha@8.4.0:
+    resolution: {integrity: sha512-hJaO0mwDXmZS4ghXsvPVriOhsxQ7ofcpQdm8dE+jISUOKopitvnXFQmpRR7jd2K6VBG6E26gU3IAbXXGIbu4sQ==}
+    engines: {node: '>= 10.12.0'}
+    hasBin: true
+
+  mochapack@2.1.4:
+    resolution: {integrity: sha512-qoZYT8ibht6z35e936P6Y/3nynFX843Jm+2l/pNWB3Sue63IHBfqZeAnF6Ypez85kUll7HtapMogfO2hGb2N2Q==}
+    hasBin: true
+    peerDependencies:
+      mocha: '>=6'
+      webpack: ^4.0.0 || ^5.0.0
+
   modify-values@1.0.1:
     resolution: {integrity: sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==}
     engines: {node: '>=0.10.0'}
@@ -11010,6 +11479,11 @@ packages:
   nan@2.18.0:
     resolution: {integrity: sha512-W7tfG7vMOGtD30sHoZSSc/JVYiyDPEyQVso/Zz+/uQd0B0L46gtC+pHha5FFMRpil6fm/AoEcRWyOVi4+E/f8w==}
 
+  nanoid@3.1.20:
+    resolution: {integrity: sha512-a1cQNyczgKbLX9jwbS/+d7W8fX/RfgYR7lVWwWOGIPNgK2m0MWvrGF6/m4kk6U3QcFMnZf3RIhL0v2Jgh/0Uxw==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
   nanoid@3.3.3:
     resolution: {integrity: sha512-p1sjXuopFs0xg+fPASzQ28agW1oHD7xDsd9Xkf3T15H3c/cifrFHVwrh74PdoklAPi+i7MdRsE47vm2r6JoB+w==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -11024,6 +11498,9 @@ packages:
     resolution: {integrity: sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==}
     engines: {node: '>=0.10.0'}
 
+  natural-compare-lite@1.4.0:
+    resolution: {integrity: sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==}
+
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
@@ -11100,6 +11577,9 @@ packages:
   node-releases@2.0.13:
     resolution: {integrity: sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==}
 
+  nodent-runtime@3.2.1:
+    resolution: {integrity: sha512-7Ws63oC+215smeKJQCxzrK21VFVlCFBkwl0MOObt0HOpVQXs3u483sAmtkF33nNqZ5rSOQjB76fgyPBmAUrtCA==}
+
   nopt@6.0.0:
     resolution: {integrity: sha512-ZwLpbTgdhuZUnZzjd7nb1ZV+4DoiC6/sfiVKok72ym/4Tlf+DFdlHYmT2JPmcNNWV6Pi3SDf1kT+A4r9RTuT9g==}
     engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
@@ -11927,6 +12407,9 @@ packages:
   path-browserify@1.0.1:
     resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
 
+  path-case@3.0.4:
+    resolution: {integrity: sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==}
+
   path-dirname@1.0.2:
     resolution: {integrity: sha512-ALzNPpyNq9AqXMBjeymIjFDAkAFH06mHJH/cSBHAgU0s4vfpBn6b2nf8tiRLvagKD8RbTpq2FKTBg7cl9l3c7Q==}
 
@@ -11950,6 +12433,9 @@ packages:
     resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
     engines: {node: '>=0.10.0'}
 
+  path-is-inside@1.0.2:
+    resolution: {integrity: sha512-DUWJr3+ULp4zXmol/SZkFf3JGsS9/SIv+Y3Rt93/UjPpDpklB5f1er4O3POIbUuUJ3FXgqte2Q7SrU6zAqwk8w==}
+
   path-key@2.0.1:
     resolution: {integrity: sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==}
     engines: {node: '>=4'}
@@ -11983,6 +12469,9 @@ packages:
   path-to-regexp@1.8.0:
     resolution: {integrity: sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==}
 
+  path-to-regexp@2.2.1:
+    resolution: {integrity: sha512-gu9bD6Ta5bwGrrU8muHzVOBFFREpp2iRkVfhBJahwJ6p6Xw20SjT0MxLnwkjOibQmGSYhiUnf2FLe7k+jcFmGQ==}
+
   path-to-regexp@6.2.1:
     resolution: {integrity: sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw==}
 
@@ -12799,6 +13288,10 @@ packages:
     resolution: {integrity: sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==}
     engines: {node: ^10 || ^12 || >=14}
 
+  postcss@8.4.45:
+    resolution: {integrity: sha512-7KTLTdzdZZYscUc65XmjFiB73vBhBfbPztCYdUNvlaso9PrzjzcmjqBPR0lNGkcVlcO4BjiO5rK/qNz+XAen1Q==}
+    engines: {node: ^10 || ^12 || >=14}
+
   preact@10.18.2:
     resolution: {integrity: sha512-X/K43vocUHDg0XhWVmTTMbec4LT/iBMh+csCEqJk+pJqegaXsvjdqN80ZZ3L+93azWCnWCZ+WGwYb8SplxeNjA==}
 
@@ -13093,12 +13586,19 @@ packages:
     resolution: {integrity: sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==}
     engines: {node: '>=10'}
 
+  rambda@7.5.0:
+    resolution: {integrity: sha512-y/M9weqWAH4iopRd7EHDEQQvpFPHj1AA3oHozE9tfITHUtTR7Z9PSlIRRG2l1GuW7sefC1cXFfIcF+cgnShdBA==}
+
   ramda@0.29.0:
     resolution: {integrity: sha512-BBea6L67bYLtdbOqfp8f58fPMqEwx0doL+pAi8TZyp2YWz8R9G8z9x75CZI8W+ftqhFHCpEX2cRnUUXK130iKA==}
 
   randombytes@2.1.0:
     resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==}
 
+  range-parser@1.2.0:
+    resolution: {integrity: sha512-kA5WQoNVo4t9lNx2kQNFCxKeBl5IbbSNBl1M/tLkw9WCn+hxNBAW5Qh8gdhs63CJnhjJ2zQWFoqPJP2sK1AV5A==}
+    engines: {node: '>= 0.6'}
+
   range-parser@1.2.1:
     resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==}
     engines: {node: '>= 0.6'}
@@ -13245,6 +13745,10 @@ packages:
     resolution: {integrity: sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==}
     engines: {node: '>=0.10'}
 
+  readdirp@3.5.0:
+    resolution: {integrity: sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==}
+    engines: {node: '>=8.10.0'}
+
   readdirp@3.6.0:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
@@ -13307,6 +13811,9 @@ packages:
     resolution: {integrity: sha512-RAM5FlZz+Lhmo7db9L298p2vHP5ZywrVXmVXpmAD9GuL5MPH6t9ROw1iA/wfHkQ76Qe7AaPF0nGuim96/IrQMQ==}
     engines: {node: '>=4'}
 
+  registry-auth-token@3.3.2:
+    resolution: {integrity: sha512-JL39c60XlzCVgNrO+qq68FoNb56w/m7JYvGR2jT5iR1xBrUA3Mfx5Twk5rqTThPmQKMWydGmq8oFtDlxfrmxnQ==}
+
   registry-auth-token@3.4.0:
     resolution: {integrity: sha512-4LM6Fw8eBQdwMYcES4yTnn2TqIasbXuwDx3um+QRs7S55aMKCBKBxvPXl2RiUjHwuJLTyYfxSpmfSAjQpcuP+A==}
 
@@ -13612,6 +14119,10 @@ packages:
   sax@1.3.0:
     resolution: {integrity: sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==}
 
+  saxes@5.0.1:
+    resolution: {integrity: sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==}
+    engines: {node: '>=10'}
+
   saxes@6.0.0:
     resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
     engines: {node: '>=v12.22.7'}
@@ -13712,16 +14223,25 @@ packages:
     resolution: {integrity: sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==}
     engines: {node: '>= 0.8.0'}
 
+  sentence-case@3.0.4:
+    resolution: {integrity: sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==}
+
   serialize-error@7.0.1:
     resolution: {integrity: sha512-8I8TjW5KMOKsZQTvoxjuSIa7foAwPWGOts+6o7sgjz41/qMD9VQHEDxi6PBvK2l0MXUmqZyNpUK+T2tQaaElvw==}
     engines: {node: '>=10'}
 
+  serialize-javascript@5.0.1:
+    resolution: {integrity: sha512-SaaNal9imEO737H2c05Og0/8LUXG7EnsZyMa8MzkmuHoELfT6txuj0cMqRj6zfPKnmQ1yasR4PCJc8x+M4JSPA==}
+
   serialize-javascript@6.0.0:
     resolution: {integrity: sha512-Qr3TosvguFt8ePWqsvRfrKyQXIiW+nGbYpy8XK24NQHE83caxWt+mIymTT19DGFbNWNLfEwsrkSmN64lVWB9ag==}
 
   serialize-javascript@6.0.1:
     resolution: {integrity: sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==}
 
+  serve-handler@6.1.3:
+    resolution: {integrity: sha512-FosMqFBNrLyeiIDvP1zgO6YoTzFYHxLDEIavhlmQ+knB2Z7l1t+kGLHkZIDN7UVWqQAmKI3D20A6F6jo3nDd4w==}
+
   serve-index@1.9.1:
     resolution: {integrity: sha512-pXHfKNP4qujrtteMrSBb0rc8HJ9Ms/GrXwcUtUtD5s4ewDJI8bT3Cz2zTVRMKtri49pLx2e0Ya8ziP5Ya2pZZw==}
     engines: {node: '>= 0.8.0'}
@@ -13730,6 +14250,10 @@ packages:
     resolution: {integrity: sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==}
     engines: {node: '>= 0.8.0'}
 
+  serve@13.0.4:
+    resolution: {integrity: sha512-Lj8rhXmphJCRQVv5qwu0NQZ2h+0MrRyRJxDZu5y3qLH2i/XY6a0FPj/VmjMUdkJb672MBfE8hJ274PU6JzBd0Q==}
+    hasBin: true
+
   set-blocking@2.0.0:
     resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
 
@@ -13861,6 +14385,9 @@ packages:
     resolution: {integrity: sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==}
     engines: {node: '>= 6.0.0', npm: '>= 3.0.0'}
 
+  snake-case@3.0.4:
+    resolution: {integrity: sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==}
+
   snapdragon-node@2.1.1:
     resolution: {integrity: sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==}
     engines: {node: '>=0.10.0'}
@@ -14624,6 +15151,9 @@ packages:
     resolution: {integrity: sha512-6udB24Q737UD/SDsKAHI9FCRP7Bqc9D/MQUV02ORQg5iskjtLJlZJNdN4kKtcdtwCeWIwIHDGaUsTsCCAa8sFQ==}
     engines: {node: '>=10'}
 
+  toposort@2.0.2:
+    resolution: {integrity: sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==}
+
   totalist@3.0.1:
     resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
     engines: {node: '>=6'}
@@ -14635,6 +15165,10 @@ packages:
   tr46@0.0.3:
     resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
 
+  tr46@3.0.0:
+    resolution: {integrity: sha512-l7FvfAHlcmulp8kr+flpQZmVwtu7nfRV7NZujtN0OqES8EL4O4e0qqzL0DC5gAvx/ZC/9lk6rhcUwYvkBnBnYA==}
+    engines: {node: '>=12'}
+
   tr46@5.0.0:
     resolution: {integrity: sha512-tk2G5R2KRwBd+ZN0zaEXpmzdKyOYksXwywulIX95MBODjSzMIuQnQ3m8JxgbhnL1LeVo7lqQKsYa1O3Htl7K5g==}
     engines: {node: '>=18'}
@@ -15035,10 +15569,19 @@ packages:
     peerDependencies:
       browserslist: '>= 4.21.0'
 
+  update-check@1.5.2:
+    resolution: {integrity: sha512-1TrmYLuLj/5ZovwUS7fFd1jMH3NnFDN1y1A8dboedIDt7zs/zJMo6TwwlhYKkSeEwzleeiSBV5/3c9ufAQWDaQ==}
+
   update-notifier@5.1.0:
     resolution: {integrity: sha512-ItnICHbeMh9GqUy31hFPrD1kcuZ3rpxDZbf4KUDavXwS0bW5m7SLbDQpGX3UYr072cbrF5hFUs3r5tUsPwjfHw==}
     engines: {node: '>=10'}
 
+  upper-case-first@2.0.2:
+    resolution: {integrity: sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==}
+
+  upper-case@2.0.2:
+    resolution: {integrity: sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg==}
+
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
@@ -15411,6 +15954,12 @@ packages:
     peerDependencies:
       vue: ^2.6 || ^3.2
 
+  vue-tsc@0.38.9:
+    resolution: {integrity: sha512-Yoy5phgvGqyF98Fb4mYqboR4Q149jrdcGv5kSmufXJUq++RZJ2iMVG0g6zl+v3t4ORVWkQmRpsV4x2szufZ0LQ==}
+    hasBin: true
+    peerDependencies:
+      typescript: '*'
+
   vue-tsc@1.8.25:
     resolution: {integrity: sha512-lHsRhDc/Y7LINvYhZ3pv4elflFADoEOo67vfClAfF2heVHpHmVquLSjojgCSIwzA4F0Pc4vowT/psXCYcfk+iQ==}
     hasBin: true
@@ -15473,9 +16022,17 @@ packages:
     resolution: {integrity: sha512-evkv5PtX5pdlEyY5EcEV+rN/HTmi8iG7ZcvAnMFfYKWdvKiUjE+/DPwZfmE8emx33FEE2htbAKgtruABTocEjA==}
     hasBin: true
 
+  w3c-hr-time@1.0.2:
+    resolution: {integrity: sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==}
+    deprecated: Use your platform's native performance.now() and performance.timeOrigin.
+
   w3c-keyname@2.2.8:
     resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
 
+  w3c-xmlserializer@3.0.0:
+    resolution: {integrity: sha512-3WFqGEgSXIyGhOmAFtlicJNMjEps8b1MG31NCA0/vOF9+nKMUW1ckhi9cnNHmf88Rzw5V+dwIwsm2C7X8k9aQg==}
+    engines: {node: '>=12'}
+
   w3c-xmlserializer@5.0.0:
     resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
     engines: {node: '>=18'}
@@ -15588,10 +16145,22 @@ packages:
   whatwg-fetch@3.6.19:
     resolution: {integrity: sha512-d67JP4dHSbm2TrpFj8AbO8DnL1JXL5J9u0Kq2xW6d0TFDbCA3Muhdt8orXC22utleTVj7Prqt82baN6RBvnEgw==}
 
+  whatwg-mimetype@3.0.0:
+    resolution: {integrity: sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==}
+    engines: {node: '>=12'}
+
   whatwg-mimetype@4.0.0:
     resolution: {integrity: sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==}
     engines: {node: '>=18'}
 
+  whatwg-url@10.0.0:
+    resolution: {integrity: sha512-CLxxCmdUby142H5FZzn4D8ikO1cmypvXVQktsgosNy4a4BHrDHeciBBGZhb0bNoR5/MltoCatso+vFjjGx8t0w==}
+    engines: {node: '>=12'}
+
+  whatwg-url@11.0.0:
+    resolution: {integrity: sha512-RKT8HExMpoYx4igMiVMY83lN6UeITKJlBQ+vR/8ZJ8OCdSiN3RwCq+9gH0+Xzj0+5IrM6i4j/6LuvzbZIQgEcQ==}
+    engines: {node: '>=12'}
+
   whatwg-url@14.0.0:
     resolution: {integrity: sha512-1lfMEm2IEr7RIV+f4lUNPOqfFL+pO+Xw3fJSqmjX9AbXcXcYOkCe1P6+9VBZB6n94af16NfZf+sSk0JCBZC9aw==}
     engines: {node: '>=18'}
@@ -15643,6 +16212,9 @@ packages:
     engines: {node: '>=8'}
     hasBin: true
 
+  wide-align@1.1.3:
+    resolution: {integrity: sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==}
+
   wide-align@1.1.5:
     resolution: {integrity: sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==}
 
@@ -15660,6 +16232,9 @@ packages:
   wordwrap@1.0.0:
     resolution: {integrity: sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==}
 
+  workerpool@6.1.0:
+    resolution: {integrity: sha512-toV7q9rWNYha963Pl/qyeZ6wG+3nnsyvolaNUS8+R5Wtw6qJPTxIlOP1ZSvcGhEJw+l3HMMmtiNo9Gl61G4GVg==}
+
   workerpool@6.2.1:
     resolution: {integrity: sha512-ILEIE97kDZvF9Wb9f6h5aXK4swSlKGUcOEGiIYb2OOu/IrDU9iwj0fD//SsA6E5ibwJxpEvhullJY4Sl4GcpAw==}
 
@@ -15671,6 +16246,10 @@ packages:
     resolution: {integrity: sha512-iXR3tDXpbnTpzjKSylUJRkLuOrEC7hwEB221cgn6wtF8wpmz28puFXAEfPT5zrjM3wahygB//VuWEr1vTkDcNQ==}
     engines: {node: '>=4'}
 
+  wrap-ansi@5.1.0:
+    resolution: {integrity: sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==}
+    engines: {node: '>=6'}
+
   wrap-ansi@6.2.0:
     resolution: {integrity: sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==}
     engines: {node: '>=8'}
@@ -15820,6 +16399,9 @@ packages:
   yargs-parser@10.1.0:
     resolution: {integrity: sha512-VCIyR1wJoEBZUqk5PA+oOBF6ypbwh5aNB3I50guxAL/quggdfs4TtNHQrSazFA3fYZ+tEqfs0zIGlv0c/rgjbQ==}
 
+  yargs-parser@13.1.2:
+    resolution: {integrity: sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==}
+
   yargs-parser@18.1.3:
     resolution: {integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==}
     engines: {node: '>=6'}
@@ -15843,6 +16425,9 @@ packages:
     resolution: {integrity: sha512-7pRTIA9Qc1caZ0bZ6RYRGbHJthJWuakf+WmHK0rVeLkNrrGhfoabBNdue6kdINI6r4if7ocq9aD/n7xwKOdzOA==}
     engines: {node: '>=10'}
 
+  yargs@14.0.0:
+    resolution: {integrity: sha512-ssa5JuRjMeZEUjg7bEL99AwpitxU/zWGAGpdj0di41pOEmJti8NR6kyUIJBkR78DTYNPZOU08luUo0GTHuB+ow==}
+
   yargs@15.4.1:
     resolution: {integrity: sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==}
     engines: {node: '>=8'}
@@ -16027,6 +16612,11 @@ snapshots:
       '@babel/highlight': 7.22.20
       chalk: 2.4.2
 
+  '@babel/code-frame@7.24.7':
+    dependencies:
+      '@babel/highlight': 7.24.7
+      picocolors: 1.0.1
+
   '@babel/compat-data@7.23.3': {}
 
   '@babel/core@7.23.2':
@@ -16056,6 +16646,13 @@ snapshots:
       '@jridgewell/trace-mapping': 0.3.20
       jsesc: 2.5.2
 
+  '@babel/generator@7.25.6':
+    dependencies:
+      '@babel/types': 7.25.6
+      '@jridgewell/gen-mapping': 0.3.5
+      '@jridgewell/trace-mapping': 0.3.25
+      jsesc: 2.5.2
+
   '@babel/helper-annotate-as-pure@7.22.5':
     dependencies:
       '@babel/types': 7.23.0
@@ -16122,6 +16719,13 @@ snapshots:
     dependencies:
       '@babel/types': 7.23.0
 
+  '@babel/helper-module-imports@7.24.7':
+    dependencies:
+      '@babel/traverse': 7.25.6
+      '@babel/types': 7.25.6
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/helper-module-transforms@7.23.3(@babel/core@7.23.2)':
     dependencies:
       '@babel/core': 7.23.2
@@ -16137,6 +16741,8 @@ snapshots:
 
   '@babel/helper-plugin-utils@7.22.5': {}
 
+  '@babel/helper-plugin-utils@7.24.8': {}
+
   '@babel/helper-remap-async-to-generator@7.22.20(@babel/core@7.23.2)':
     dependencies:
       '@babel/core': 7.23.2
@@ -16165,8 +16771,12 @@ snapshots:
 
   '@babel/helper-string-parser@7.22.5': {}
 
+  '@babel/helper-string-parser@7.24.8': {}
+
   '@babel/helper-validator-identifier@7.22.20': {}
 
+  '@babel/helper-validator-identifier@7.24.7': {}
+
   '@babel/helper-validator-option@7.22.15': {}
 
   '@babel/helper-wrap-function@7.22.20':
@@ -16189,10 +16799,21 @@ snapshots:
       chalk: 2.4.2
       js-tokens: 4.0.0
 
+  '@babel/highlight@7.24.7':
+    dependencies:
+      '@babel/helper-validator-identifier': 7.24.7
+      chalk: 2.4.2
+      js-tokens: 4.0.0
+      picocolors: 1.0.1
+
   '@babel/parser@7.23.9':
     dependencies:
       '@babel/types': 7.23.0
 
+  '@babel/parser@7.25.6':
+    dependencies:
+      '@babel/types': 7.25.6
+
   '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.23.3(@babel/core@7.23.2)':
     dependencies:
       '@babel/core': 7.23.2
@@ -16275,6 +16896,11 @@ snapshots:
       '@babel/core': 7.23.2
       '@babel/helper-plugin-utils': 7.22.5
 
+  '@babel/plugin-syntax-jsx@7.24.7(@babel/core@7.23.2)':
+    dependencies:
+      '@babel/core': 7.23.2
+      '@babel/helper-plugin-utils': 7.24.8
+
   '@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.23.2)':
     dependencies:
       '@babel/core': 7.23.2
@@ -16752,6 +17378,11 @@ snapshots:
 
   '@babel/regjsgen@0.8.0': {}
 
+  '@babel/runtime-corejs2@7.25.6':
+    dependencies:
+      core-js: 2.6.12
+      regenerator-runtime: 0.14.0
+
   '@babel/runtime@7.23.2':
     dependencies:
       regenerator-runtime: 0.14.0
@@ -16762,6 +17393,12 @@ snapshots:
       '@babel/parser': 7.23.9
       '@babel/types': 7.23.0
 
+  '@babel/template@7.25.0':
+    dependencies:
+      '@babel/code-frame': 7.24.7
+      '@babel/parser': 7.25.6
+      '@babel/types': 7.25.6
+
   '@babel/traverse@7.23.2':
     dependencies:
       '@babel/code-frame': 7.22.13
@@ -16777,12 +17414,30 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/traverse@7.25.6':
+    dependencies:
+      '@babel/code-frame': 7.24.7
+      '@babel/generator': 7.25.6
+      '@babel/parser': 7.25.6
+      '@babel/template': 7.25.0
+      '@babel/types': 7.25.6
+      debug: 4.3.6
+      globals: 11.12.0
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/types@7.23.0':
     dependencies:
       '@babel/helper-string-parser': 7.22.5
       '@babel/helper-validator-identifier': 7.22.20
       to-fast-properties: 2.0.0
 
+  '@babel/types@7.25.6':
+    dependencies:
+      '@babel/helper-string-parser': 7.24.8
+      '@babel/helper-validator-identifier': 7.24.7
+      to-fast-properties: 2.0.0
+
   '@bcoe/v8-coverage@0.2.3': {}
 
   '@bundled-es-modules/deepmerge@4.3.1':
@@ -16959,6 +17614,24 @@ snapshots:
 
   '@dialpad/dialtone-combinator@0.3.1': {}
 
+  '@dialpad/dialtone-vue@3.13.0(@dialpad/dialtone@6.35.0(react-dom@16.14.0(react@16.14.0))(react@16.14.0))(vue@3.4.15(typescript@5.4.2))':
+    dependencies:
+      '@dialpad/dialtone': 6.35.0(react-dom@16.14.0(react@16.14.0))(react@16.14.0)
+      emoji-regex: 10.3.0
+      emoji-toolkit: 6.6.0
+      tippy.js: 6.3.7
+      vue: 3.4.15(typescript@5.4.2)
+
+  '@dialpad/dialtone@6.35.0(react-dom@16.14.0(react@16.14.0))(react@16.14.0)':
+    dependencies:
+      '@docsearch/js': 3.5.2(@algolia/client-search@4.20.0)(@types/react@18.2.37)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(search-insights@2.10.0)
+    transitivePeerDependencies:
+      - '@algolia/client-search'
+      - '@types/react'
+      - react
+      - react-dom
+      - search-insights
+
   '@dialpad/postcss-responsive-variations@1.1.5(postcss@8.4.39)':
     dependencies:
       postcss: 8.4.39
@@ -17005,6 +17678,12 @@ snapshots:
     dependencies:
       react: 16.14.0
 
+  '@es-joy/jsdoccomment@0.36.1':
+    dependencies:
+      comment-parser: 1.3.1
+      esquery: 1.5.0
+      jsdoc-type-pratt-parser: 3.1.0
+
   '@esbuild/aix-ppc64@0.21.5':
     optional: true
 
@@ -17800,10 +18479,18 @@ snapshots:
       '@jridgewell/sourcemap-codec': 1.5.0
       '@jridgewell/trace-mapping': 0.3.20
 
+  '@jridgewell/gen-mapping@0.3.5':
+    dependencies:
+      '@jridgewell/set-array': 1.2.1
+      '@jridgewell/sourcemap-codec': 1.5.0
+      '@jridgewell/trace-mapping': 0.3.25
+
   '@jridgewell/resolve-uri@3.1.1': {}
 
   '@jridgewell/set-array@1.1.2': {}
 
+  '@jridgewell/set-array@1.2.1': {}
+
   '@jridgewell/source-map@0.3.5':
     dependencies:
       '@jridgewell/gen-mapping': 0.3.3
@@ -17816,6 +18503,11 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.1
       '@jridgewell/sourcemap-codec': 1.5.0
 
+  '@jridgewell/trace-mapping@0.3.25':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.1
+      '@jridgewell/sourcemap-codec': 1.5.0
+
   '@jsonjoy.com/base64@1.1.2(tslib@2.6.2)':
     dependencies:
       tslib: 2.6.2
@@ -18902,6 +19594,11 @@ snapshots:
       '@resvg/resvg-js-win32-ia32-msvc': 2.6.0
       '@resvg/resvg-js-win32-x64-msvc': 2.6.0
 
+  '@rollup/pluginutils@4.2.1':
+    dependencies:
+      estree-walker: 2.0.2
+      picomatch: 2.3.1
+
   '@rollup/pluginutils@5.1.0(rollup@4.21.1)':
     dependencies:
       '@types/estree': 1.0.5
@@ -20606,6 +21303,25 @@ snapshots:
       '@types/node': 20.9.0
     optional: true
 
+  '@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0)(typescript@5.4.2)':
+    dependencies:
+      '@eslint-community/regexpp': 4.10.0
+      '@typescript-eslint/parser': 7.0.1(eslint@8.56.0)(typescript@5.4.2)
+      '@typescript-eslint/scope-manager': 5.62.0
+      '@typescript-eslint/type-utils': 5.62.0(eslint@8.56.0)(typescript@5.4.2)
+      '@typescript-eslint/utils': 5.62.0(eslint@8.56.0)(typescript@5.4.2)
+      debug: 4.3.6
+      eslint: 8.56.0
+      graphemer: 1.4.0
+      ignore: 5.3.0
+      natural-compare-lite: 1.4.0
+      semver: 7.5.4
+      tsutils: 3.21.0(typescript@5.4.2)
+    optionalDependencies:
+      typescript: 5.4.2
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/eslint-plugin@7.0.1(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0)(typescript@5.4.2)':
     dependencies:
       '@eslint-community/regexpp': 4.10.0
@@ -20662,6 +21378,18 @@ snapshots:
       '@typescript-eslint/types': 7.0.1
       '@typescript-eslint/visitor-keys': 7.0.1
 
+  '@typescript-eslint/type-utils@5.62.0(eslint@8.56.0)(typescript@5.4.2)':
+    dependencies:
+      '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.4.2)
+      '@typescript-eslint/utils': 5.62.0(eslint@8.56.0)(typescript@5.4.2)
+      debug: 4.3.6
+      eslint: 8.56.0
+      tsutils: 3.21.0(typescript@5.4.2)
+    optionalDependencies:
+      typescript: 5.4.2
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/type-utils@7.0.1(eslint@8.56.0)(typescript@5.4.2)':
     dependencies:
       '@typescript-eslint/typescript-estree': 7.0.1(typescript@5.4.2)
@@ -20781,13 +21509,31 @@ snapshots:
       '@typescript-eslint/types': 7.0.1
       eslint-visitor-keys: 3.4.3
 
+  '@ungap/promise-all-settled@1.1.2': {}
+
   '@ungap/structured-clone@1.2.0': {}
 
+  '@vitejs/plugin-vue-jsx@1.3.10':
+    dependencies:
+      '@babel/core': 7.23.2
+      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.23.2)
+      '@babel/plugin-transform-typescript': 7.23.3(@babel/core@7.23.2)
+      '@rollup/pluginutils': 4.2.1
+      '@vue/babel-plugin-jsx': 1.2.5(@babel/core@7.23.2)
+      hash-sum: 2.0.0
+    transitivePeerDependencies:
+      - supports-color
+
   '@vitejs/plugin-vue2@2.3.1(vite@5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@2.7.16)':
     dependencies:
       vite: 5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
       vue: 2.7.16
 
+  '@vitejs/plugin-vue@2.3.4(vite@5.4.2(@types/node@16.18.83)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@3.4.15(typescript@5.4.2))':
+    dependencies:
+      vite: 5.4.2(@types/node@16.18.83)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
+      vue: 3.4.15(typescript@5.4.2)
+
   '@vitejs/plugin-vue@4.5.0(vite@4.0.5(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@3.4.15(typescript@5.4.2))':
     dependencies:
       vite: 4.0.5(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
@@ -20831,6 +21577,10 @@ snapshots:
       loupe: 2.3.7
       pretty-format: 29.7.0
 
+  '@volar/code-gen@0.38.9':
+    dependencies:
+      '@volar/source-map': 0.38.9
+
   '@volar/language-core@1.11.1':
     dependencies:
       '@volar/source-map': 1.11.1
@@ -20839,6 +21589,8 @@ snapshots:
     dependencies:
       '@volar/source-map': 2.4.0
 
+  '@volar/source-map@0.38.9': {}
+
   '@volar/source-map@1.11.1':
     dependencies:
       muggle-string: 0.3.1
@@ -20856,11 +21608,57 @@ snapshots:
       path-browserify: 1.0.1
       vscode-uri: 3.0.8
 
+  '@volar/vue-code-gen@0.38.9':
+    dependencies:
+      '@volar/code-gen': 0.38.9
+      '@volar/source-map': 0.38.9
+      '@vue/compiler-core': 3.4.15
+      '@vue/compiler-dom': 3.4.15
+      '@vue/shared': 3.4.15
+
+  '@volar/vue-typescript@0.38.9':
+    dependencies:
+      '@volar/code-gen': 0.38.9
+      '@volar/source-map': 0.38.9
+      '@volar/vue-code-gen': 0.38.9
+      '@vue/compiler-sfc': 3.4.15
+      '@vue/reactivity': 3.4.15
+
+  '@vue/babel-helper-vue-transform-on@1.2.5': {}
+
+  '@vue/babel-plugin-jsx@1.2.5(@babel/core@7.23.2)':
+    dependencies:
+      '@babel/helper-module-imports': 7.24.7
+      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/plugin-syntax-jsx': 7.24.7(@babel/core@7.23.2)
+      '@babel/template': 7.25.0
+      '@babel/traverse': 7.25.6
+      '@babel/types': 7.25.6
+      '@vue/babel-helper-vue-transform-on': 1.2.5
+      '@vue/babel-plugin-resolve-type': 1.2.5(@babel/core@7.23.2)
+      html-tags: 3.3.1
+      svg-tags: 1.0.0
+    optionalDependencies:
+      '@babel/core': 7.23.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@vue/babel-plugin-resolve-type@1.2.5(@babel/core@7.23.2)':
+    dependencies:
+      '@babel/code-frame': 7.24.7
+      '@babel/core': 7.23.2
+      '@babel/helper-module-imports': 7.24.7
+      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/parser': 7.25.6
+      '@vue/compiler-sfc': 3.5.5
+    transitivePeerDependencies:
+      - supports-color
+
   '@vue/cli-overlay@5.0.8': {}
 
-  '@vue/cli-plugin-eslint@5.0.8(@swc/core@1.3.96)(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.4.15)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))(encoding@0.1.13)(eslint@8.56.0)':
+  '@vue/cli-plugin-eslint@5.0.8(@swc/core@1.3.96)(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))(encoding@0.1.13)(eslint@8.56.0)':
     dependencies:
-      '@vue/cli-service': 5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.4.15)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3)
+      '@vue/cli-service': 5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3)
       '@vue/cli-shared-utils': 5.0.8(encoding@0.1.13)
       eslint: 8.56.0
       eslint-webpack-plugin: 3.2.0(eslint@8.56.0)(webpack@5.89.0(@swc/core@1.3.96))
@@ -20874,29 +21672,56 @@ snapshots:
       - uglify-js
       - webpack-cli
 
-  '@vue/cli-plugin-router@5.0.8(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.4.15)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))(encoding@0.1.13)':
+  '@vue/cli-plugin-router@5.0.8(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(less-loader@11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96)))(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))(encoding@0.1.13)':
+    dependencies:
+      '@vue/cli-service': 5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(less-loader@11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96)))(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3)
+      '@vue/cli-shared-utils': 5.0.8(encoding@0.1.13)
+    transitivePeerDependencies:
+      - encoding
+
+  '@vue/cli-plugin-router@5.0.8(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))(encoding@0.1.13)':
     dependencies:
-      '@vue/cli-service': 5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.4.15)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3)
+      '@vue/cli-service': 5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3)
       '@vue/cli-shared-utils': 5.0.8(encoding@0.1.13)
     transitivePeerDependencies:
       - encoding
 
-  '@vue/cli-plugin-vuex@5.0.8(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.4.15)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))':
+  '@vue/cli-plugin-unit-mocha@5.0.8(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(less-loader@11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96)))(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))(encoding@0.1.13)(webpack@5.89.0(@swc/core@1.3.96))':
     dependencies:
-      '@vue/cli-service': 5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.4.15)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3)
+      '@vue/cli-service': 5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(less-loader@11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96)))(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3)
+      '@vue/cli-shared-utils': 5.0.8(encoding@0.1.13)
+      jsdom: 18.1.1
+      jsdom-global: 3.0.2(jsdom@18.1.1)
+      mocha: 8.4.0
+      mochapack: 2.1.4(mocha@8.4.0)(webpack@5.89.0(@swc/core@1.3.96))
+    transitivePeerDependencies:
+      - bufferutil
+      - canvas
+      - encoding
+      - supports-color
+      - utf-8-validate
+      - webpack
 
-  '@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.4.15)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3)':
+  '@vue/cli-plugin-vuex@5.0.8(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(less-loader@11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96)))(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))':
+    dependencies:
+      '@vue/cli-service': 5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(less-loader@11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96)))(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3)
+
+  '@vue/cli-plugin-vuex@5.0.8(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))':
+    dependencies:
+      '@vue/cli-service': 5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3)
+
+  '@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(less-loader@11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96)))(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3)':
     dependencies:
       '@babel/helper-compilation-targets': 7.22.15
       '@soda/friendly-errors-webpack-plugin': 1.8.1(webpack@5.89.0(@swc/core@1.3.96))
       '@soda/get-current-script': 1.0.2
       '@types/minimist': 1.2.5
       '@vue/cli-overlay': 5.0.8
-      '@vue/cli-plugin-router': 5.0.8(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.4.15)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))(encoding@0.1.13)
-      '@vue/cli-plugin-vuex': 5.0.8(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.4.15)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))
+      '@vue/cli-plugin-router': 5.0.8(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(less-loader@11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96)))(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))(encoding@0.1.13)
+      '@vue/cli-plugin-vuex': 5.0.8(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(less-loader@11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96)))(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))
       '@vue/cli-shared-utils': 5.0.8(encoding@0.1.13)
       '@vue/component-compiler-utils': 3.3.0(ejs@3.1.9)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)
-      '@vue/vue-loader-v15': vue-loader@15.11.1(@vue/compiler-sfc@3.4.15)(css-loader@6.8.1(webpack@5.89.0(@swc/core@1.3.96)))(ejs@3.1.9)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(webpack@5.89.0(@swc/core@1.3.96))
+      '@vue/vue-loader-v15': vue-loader@15.11.1(@vue/compiler-sfc@3.5.5)(css-loader@6.8.1(webpack@5.89.0(@swc/core@1.3.96)))(ejs@3.1.9)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(webpack@5.89.0(@swc/core@1.3.96))
       '@vue/web-component-wrapper': 1.3.0
       acorn: 8.11.2
       acorn-walk: 8.3.0
@@ -20933,7 +21758,137 @@ snapshots:
       ssri: 8.0.1
       terser-webpack-plugin: 5.3.9(@swc/core@1.3.96)(webpack@5.89.0(@swc/core@1.3.96))
       thread-loader: 3.0.4(webpack@5.89.0(@swc/core@1.3.96))
-      vue-loader: 17.3.1(@vue/compiler-sfc@3.4.15)(vue@3.4.15(typescript@5.4.2))(webpack@5.89.0(@swc/core@1.3.96))
+      vue-loader: 17.3.1(@vue/compiler-sfc@3.5.5)(vue@3.4.15(typescript@5.4.2))(webpack@5.89.0(@swc/core@1.3.96))
+      vue-style-loader: 4.1.3
+      webpack: 5.89.0(@swc/core@1.3.96)
+      webpack-bundle-analyzer: 4.10.1
+      webpack-chain: 6.5.1
+      webpack-dev-server: 4.15.1(debug@4.3.6)(webpack@5.89.0(@swc/core@1.3.96))
+      webpack-merge: 5.10.0
+      webpack-virtual-modules: 0.4.6
+      whatwg-fetch: 3.6.19
+    optionalDependencies:
+      less-loader: 11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96))
+      vue-template-compiler: 2.7.16(vue@3.4.15(typescript@5.4.2))
+      webpack-sources: 3.2.3
+    transitivePeerDependencies:
+      - '@parcel/css'
+      - '@swc/core'
+      - '@vue/compiler-sfc'
+      - arc-templates
+      - atpl
+      - babel-core
+      - bracket-template
+      - bufferutil
+      - clean-css
+      - coffee-script
+      - csso
+      - dot
+      - dust
+      - dustjs-helpers
+      - dustjs-linkedin
+      - eco
+      - ect
+      - ejs
+      - encoding
+      - esbuild
+      - haml-coffee
+      - hamlet
+      - hamljs
+      - handlebars
+      - hogan.js
+      - htmling
+      - jade
+      - jazz
+      - jqtpl
+      - just
+      - liquid-node
+      - liquor
+      - lodash
+      - marko
+      - mote
+      - mustache
+      - nunjucks
+      - plates
+      - prettier
+      - pug
+      - qejs
+      - ractive
+      - razor-tmpl
+      - react
+      - react-dom
+      - slm
+      - squirrelly
+      - supports-color
+      - swig
+      - swig-templates
+      - teacup
+      - templayed
+      - then-jade
+      - then-pug
+      - tinyliquid
+      - toffee
+      - twig
+      - twing
+      - uglify-js
+      - underscore
+      - utf-8-validate
+      - vash
+      - velocityjs
+      - vue
+      - walrus
+      - webpack-cli
+      - whiskers
+
+  '@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3)':
+    dependencies:
+      '@babel/helper-compilation-targets': 7.22.15
+      '@soda/friendly-errors-webpack-plugin': 1.8.1(webpack@5.89.0(@swc/core@1.3.96))
+      '@soda/get-current-script': 1.0.2
+      '@types/minimist': 1.2.5
+      '@vue/cli-overlay': 5.0.8
+      '@vue/cli-plugin-router': 5.0.8(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))(encoding@0.1.13)
+      '@vue/cli-plugin-vuex': 5.0.8(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))
+      '@vue/cli-shared-utils': 5.0.8(encoding@0.1.13)
+      '@vue/component-compiler-utils': 3.3.0(ejs@3.1.9)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)
+      '@vue/vue-loader-v15': vue-loader@15.11.1(@vue/compiler-sfc@3.5.5)(css-loader@6.8.1(webpack@5.89.0(@swc/core@1.3.96)))(ejs@3.1.9)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(webpack@5.89.0(@swc/core@1.3.96))
+      '@vue/web-component-wrapper': 1.3.0
+      acorn: 8.11.2
+      acorn-walk: 8.3.0
+      address: 1.2.2
+      autoprefixer: 10.4.16(postcss@8.4.39)
+      browserslist: 4.22.1
+      case-sensitive-paths-webpack-plugin: 2.4.0
+      cli-highlight: 2.1.11
+      clipboardy: 2.3.0
+      cliui: 7.0.4
+      copy-webpack-plugin: 9.1.0(webpack@5.89.0(@swc/core@1.3.96))
+      css-loader: 6.8.1(webpack@5.89.0(@swc/core@1.3.96))
+      css-minimizer-webpack-plugin: 3.4.1(webpack@5.89.0(@swc/core@1.3.96))
+      cssnano: 5.1.15(postcss@8.4.39)
+      debug: 4.3.6
+      default-gateway: 6.0.3
+      dotenv: 10.0.0
+      dotenv-expand: 5.1.0
+      fs-extra: 9.1.0
+      globby: 11.1.0
+      hash-sum: 2.0.0
+      html-webpack-plugin: 5.5.3(webpack@5.89.0(@swc/core@1.3.96))
+      is-file-esm: 1.0.0
+      launch-editor-middleware: 2.6.1
+      lodash.defaultsdeep: 4.6.1
+      lodash.mapvalues: 4.6.0
+      mini-css-extract-plugin: 2.7.6(webpack@5.89.0(@swc/core@1.3.96))
+      minimist: 1.2.8
+      module-alias: 2.2.3
+      portfinder: 1.0.32
+      postcss: 8.4.39
+      postcss-loader: 6.2.1(postcss@8.4.39)(webpack@5.89.0(@swc/core@1.3.96))
+      progress-webpack-plugin: 1.0.16(webpack@5.89.0(@swc/core@1.3.96))
+      ssri: 8.0.1
+      terser-webpack-plugin: 5.3.9(@swc/core@1.3.96)(webpack@5.89.0(@swc/core@1.3.96))
+      thread-loader: 3.0.4(webpack@5.89.0(@swc/core@1.3.96))
+      vue-loader: 17.3.1(@vue/compiler-sfc@3.5.5)(vue@3.4.15(typescript@5.4.2))(webpack@5.89.0(@swc/core@1.3.96))
       vue-style-loader: 4.1.3
       webpack: 5.89.0(@swc/core@1.3.96)
       webpack-bundle-analyzer: 4.10.1
@@ -21039,11 +21994,24 @@ snapshots:
       estree-walker: 2.0.2
       source-map-js: 1.2.0
 
+  '@vue/compiler-core@3.5.5':
+    dependencies:
+      '@babel/parser': 7.25.6
+      '@vue/shared': 3.5.5
+      entities: 4.5.0
+      estree-walker: 2.0.2
+      source-map-js: 1.2.0
+
   '@vue/compiler-dom@3.4.15':
     dependencies:
       '@vue/compiler-core': 3.4.15
       '@vue/shared': 3.4.15
 
+  '@vue/compiler-dom@3.5.5':
+    dependencies:
+      '@vue/compiler-core': 3.5.5
+      '@vue/shared': 3.5.5
+
   '@vue/compiler-sfc@2.7.16':
     dependencies:
       '@babel/parser': 7.23.9
@@ -21064,11 +22032,28 @@ snapshots:
       postcss: 8.4.39
       source-map-js: 1.2.0
 
+  '@vue/compiler-sfc@3.5.5':
+    dependencies:
+      '@babel/parser': 7.25.6
+      '@vue/compiler-core': 3.5.5
+      '@vue/compiler-dom': 3.5.5
+      '@vue/compiler-ssr': 3.5.5
+      '@vue/shared': 3.5.5
+      estree-walker: 2.0.2
+      magic-string: 0.30.11
+      postcss: 8.4.45
+      source-map-js: 1.2.0
+
   '@vue/compiler-ssr@3.4.15':
     dependencies:
       '@vue/compiler-dom': 3.4.15
       '@vue/shared': 3.4.15
 
+  '@vue/compiler-ssr@3.5.5':
+    dependencies:
+      '@vue/compiler-dom': 3.5.5
+      '@vue/shared': 3.5.5
+
   '@vue/compiler-vue2@2.7.16':
     dependencies:
       de-indent: 1.0.2
@@ -21211,6 +22196,8 @@ snapshots:
 
   '@vue/shared@3.4.15': {}
 
+  '@vue/shared@3.5.5': {}
+
   '@vue/test-utils@1.3.6(vue-template-compiler@2.7.16(vue@2.7.16))(vue@2.7.16)':
     dependencies:
       dom-event-types: 1.1.0
@@ -21227,6 +22214,10 @@ snapshots:
     optionalDependencies:
       '@vue/server-renderer': 3.4.15(vue@3.4.15(typescript@5.4.2))
 
+  '@vue/tsconfig@0.1.3(@types/node@16.18.83)':
+    optionalDependencies:
+      '@types/node': 16.18.83
+
   '@vue/tsconfig@0.4.0': {}
 
   '@vue/web-component-wrapper@1.3.0': {}
@@ -21730,6 +22721,8 @@ snapshots:
     optionalDependencies:
       mem-fs: 4.0.0
 
+  '@zeit/schemas@2.6.0': {}
+
   '@zip.js/zip.js@2.7.48': {}
 
   '@zkochan/js-yaml@0.0.6':
@@ -21741,6 +22734,8 @@ snapshots:
       jsonparse: 1.3.1
       through: 2.3.8
 
+  abab@2.0.6: {}
+
   abbrev@1.1.1: {}
 
   abbrev@2.0.0: {}
@@ -21754,6 +22749,11 @@ snapshots:
       mime-types: 2.1.35
       negotiator: 0.6.3
 
+  acorn-globals@6.0.0:
+    dependencies:
+      acorn: 7.4.1
+      acorn-walk: 7.2.0
+
   acorn-import-assertions@1.9.0(acorn@8.11.2):
     dependencies:
       acorn: 8.11.2
@@ -21762,6 +22762,8 @@ snapshots:
     dependencies:
       acorn: 8.11.2
 
+  acorn-walk@7.2.0: {}
+
   acorn-walk@8.3.0: {}
 
   acorn@6.4.2: {}
@@ -21974,6 +22976,8 @@ snapshots:
 
   are-we-there-yet@4.0.2: {}
 
+  arg@2.0.0: {}
+
   arg@5.0.2: {}
 
   argparse@1.0.10:
@@ -22165,6 +23169,16 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
+  autoprefixer@10.4.16(postcss@8.4.45):
+    dependencies:
+      browserslist: 4.22.1
+      caniuse-lite: 1.0.30001561
+      fraction.js: 4.3.7
+      normalize-range: 0.1.2
+      picocolors: 1.0.1
+      postcss: 8.4.45
+      postcss-value-parser: 4.2.0
+
   autoprefixer@9.8.8:
     dependencies:
       browserslist: 4.22.1
@@ -22457,6 +23471,8 @@ snapshots:
 
   browser-assert@1.2.1: {}
 
+  browser-process-hrtime@1.0.0: {}
+
   browser-stdout@1.3.1: {}
 
   browserify-zlib@0.1.4:
@@ -22676,6 +23692,12 @@ snapshots:
 
   caniuse-lite@1.0.30001561: {}
 
+  capital-case@1.0.4:
+    dependencies:
+      no-case: 3.0.4
+      tslib: 2.6.2
+      upper-case-first: 2.0.2
+
   capture-stack-trace@1.0.2: {}
 
   cardinal@2.1.1:
@@ -22707,6 +23729,12 @@ snapshots:
       strip-ansi: 3.0.1
       supports-color: 2.0.0
 
+  chalk@2.4.1:
+    dependencies:
+      ansi-styles: 3.2.1
+      escape-string-regexp: 1.0.5
+      supports-color: 5.5.0
+
   chalk@2.4.2:
     dependencies:
       ansi-styles: 3.2.1
@@ -22725,6 +23753,21 @@ snapshots:
 
   chalk@5.3.0: {}
 
+  change-case@4.1.2:
+    dependencies:
+      camel-case: 4.1.2
+      capital-case: 1.0.4
+      constant-case: 3.0.4
+      dot-case: 3.0.4
+      header-case: 2.0.4
+      no-case: 3.0.4
+      param-case: 3.0.4
+      pascal-case: 3.1.2
+      path-case: 3.0.4
+      sentence-case: 3.0.4
+      snake-case: 3.0.4
+      tslib: 2.6.2
+
   change-case@5.4.4: {}
 
   changelog-parser@3.0.1:
@@ -22776,6 +23819,18 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  chokidar@3.5.1:
+    dependencies:
+      anymatch: 3.1.3
+      braces: 3.0.2
+      glob-parent: 5.1.2
+      is-binary-path: 2.1.0
+      is-glob: 4.0.3
+      normalize-path: 3.0.0
+      readdirp: 3.5.0
+    optionalDependencies:
+      fsevents: 2.3.3
+
   chokidar@3.5.3:
     dependencies:
       anymatch: 3.1.3
@@ -22895,6 +23950,12 @@ snapshots:
       strip-ansi: 3.0.1
       wrap-ansi: 2.1.0
 
+  cliui@5.0.0:
+    dependencies:
+      string-width: 3.1.0
+      strip-ansi: 5.2.0
+      wrap-ansi: 5.1.0
+
   cliui@6.0.0:
     dependencies:
       string-width: 4.2.3
@@ -23009,6 +24070,8 @@ snapshots:
 
   commander@9.5.0: {}
 
+  comment-parser@1.3.1: {}
+
   common-ancestor-path@1.0.1: {}
 
   commondir@1.0.1: {}
@@ -23028,6 +24091,18 @@ snapshots:
     dependencies:
       mime-db: 1.52.0
 
+  compression@1.7.3:
+    dependencies:
+      accepts: 1.3.8
+      bytes: 3.0.0
+      compressible: 2.0.18
+      debug: 2.6.9
+      on-headers: 1.0.2
+      safe-buffer: 5.1.2
+      vary: 1.1.2
+    transitivePeerDependencies:
+      - supports-color
+
   compression@1.7.4:
     dependencies:
       accepts: 1.3.8
@@ -23103,11 +24178,19 @@ snapshots:
       react-dom: 16.14.0(react@16.14.0)
       twig: 1.17.1
 
+  constant-case@3.0.4:
+    dependencies:
+      no-case: 3.0.4
+      tslib: 2.6.2
+      upper-case: 2.0.2
+
   constantinople@4.0.1:
     dependencies:
       '@babel/parser': 7.23.9
       '@babel/types': 7.23.0
 
+  content-disposition@0.5.2: {}
+
   content-disposition@0.5.4:
     dependencies:
       safe-buffer: 5.2.1
@@ -23214,6 +24297,8 @@ snapshots:
     dependencies:
       browserslist: 4.22.1
 
+  core-js@2.6.12: {}
+
   core-js@3.36.0: {}
 
   core-util-is@1.0.3: {}
@@ -23306,6 +24391,10 @@ snapshots:
     dependencies:
       postcss: 8.4.39
 
+  css-declaration-sorter@6.4.1(postcss@8.4.45):
+    dependencies:
+      postcss: 8.4.45
+
   css-functions-list@3.2.1: {}
 
   css-has-pseudo@0.10.0:
@@ -23429,46 +24518,46 @@ snapshots:
       postcss-svgo: 5.1.0(postcss@8.4.39)
       postcss-unique-selectors: 5.1.1(postcss@8.4.39)
 
-  cssnano-preset-default@6.0.1(postcss@8.4.39):
-    dependencies:
-      css-declaration-sorter: 6.4.1(postcss@8.4.39)
-      cssnano-utils: 4.0.0(postcss@8.4.39)
-      postcss: 8.4.39
-      postcss-calc: 9.0.1(postcss@8.4.39)
-      postcss-colormin: 6.0.0(postcss@8.4.39)
-      postcss-convert-values: 6.0.0(postcss@8.4.39)
-      postcss-discard-comments: 6.0.0(postcss@8.4.39)
-      postcss-discard-duplicates: 6.0.0(postcss@8.4.39)
-      postcss-discard-empty: 6.0.0(postcss@8.4.39)
-      postcss-discard-overridden: 6.0.0(postcss@8.4.39)
-      postcss-merge-longhand: 6.0.0(postcss@8.4.39)
-      postcss-merge-rules: 6.0.1(postcss@8.4.39)
-      postcss-minify-font-values: 6.0.0(postcss@8.4.39)
-      postcss-minify-gradients: 6.0.0(postcss@8.4.39)
-      postcss-minify-params: 6.0.0(postcss@8.4.39)
-      postcss-minify-selectors: 6.0.0(postcss@8.4.39)
-      postcss-normalize-charset: 6.0.0(postcss@8.4.39)
-      postcss-normalize-display-values: 6.0.0(postcss@8.4.39)
-      postcss-normalize-positions: 6.0.0(postcss@8.4.39)
-      postcss-normalize-repeat-style: 6.0.0(postcss@8.4.39)
-      postcss-normalize-string: 6.0.0(postcss@8.4.39)
-      postcss-normalize-timing-functions: 6.0.0(postcss@8.4.39)
-      postcss-normalize-unicode: 6.0.0(postcss@8.4.39)
-      postcss-normalize-url: 6.0.0(postcss@8.4.39)
-      postcss-normalize-whitespace: 6.0.0(postcss@8.4.39)
-      postcss-ordered-values: 6.0.0(postcss@8.4.39)
-      postcss-reduce-initial: 6.0.0(postcss@8.4.39)
-      postcss-reduce-transforms: 6.0.0(postcss@8.4.39)
-      postcss-svgo: 6.0.0(postcss@8.4.39)
-      postcss-unique-selectors: 6.0.0(postcss@8.4.39)
+  cssnano-preset-default@6.0.1(postcss@8.4.45):
+    dependencies:
+      css-declaration-sorter: 6.4.1(postcss@8.4.45)
+      cssnano-utils: 4.0.0(postcss@8.4.45)
+      postcss: 8.4.45
+      postcss-calc: 9.0.1(postcss@8.4.45)
+      postcss-colormin: 6.0.0(postcss@8.4.45)
+      postcss-convert-values: 6.0.0(postcss@8.4.45)
+      postcss-discard-comments: 6.0.0(postcss@8.4.45)
+      postcss-discard-duplicates: 6.0.0(postcss@8.4.45)
+      postcss-discard-empty: 6.0.0(postcss@8.4.45)
+      postcss-discard-overridden: 6.0.0(postcss@8.4.45)
+      postcss-merge-longhand: 6.0.0(postcss@8.4.45)
+      postcss-merge-rules: 6.0.1(postcss@8.4.45)
+      postcss-minify-font-values: 6.0.0(postcss@8.4.45)
+      postcss-minify-gradients: 6.0.0(postcss@8.4.45)
+      postcss-minify-params: 6.0.0(postcss@8.4.45)
+      postcss-minify-selectors: 6.0.0(postcss@8.4.45)
+      postcss-normalize-charset: 6.0.0(postcss@8.4.45)
+      postcss-normalize-display-values: 6.0.0(postcss@8.4.45)
+      postcss-normalize-positions: 6.0.0(postcss@8.4.45)
+      postcss-normalize-repeat-style: 6.0.0(postcss@8.4.45)
+      postcss-normalize-string: 6.0.0(postcss@8.4.45)
+      postcss-normalize-timing-functions: 6.0.0(postcss@8.4.45)
+      postcss-normalize-unicode: 6.0.0(postcss@8.4.45)
+      postcss-normalize-url: 6.0.0(postcss@8.4.45)
+      postcss-normalize-whitespace: 6.0.0(postcss@8.4.45)
+      postcss-ordered-values: 6.0.0(postcss@8.4.45)
+      postcss-reduce-initial: 6.0.0(postcss@8.4.45)
+      postcss-reduce-transforms: 6.0.0(postcss@8.4.45)
+      postcss-svgo: 6.0.0(postcss@8.4.45)
+      postcss-unique-selectors: 6.0.0(postcss@8.4.45)
 
   cssnano-utils@3.1.0(postcss@8.4.39):
     dependencies:
       postcss: 8.4.39
 
-  cssnano-utils@4.0.0(postcss@8.4.39):
+  cssnano-utils@4.0.0(postcss@8.4.45):
     dependencies:
-      postcss: 8.4.39
+      postcss: 8.4.45
 
   cssnano@5.1.15(postcss@8.4.39):
     dependencies:
@@ -23477,11 +24566,11 @@ snapshots:
       postcss: 8.4.39
       yaml: 1.10.2
 
-  cssnano@6.0.1(postcss@8.4.39):
+  cssnano@6.0.1(postcss@8.4.45):
     dependencies:
-      cssnano-preset-default: 6.0.1(postcss@8.4.39)
+      cssnano-preset-default: 6.0.1(postcss@8.4.45)
       lilconfig: 2.1.0
-      postcss: 8.4.39
+      postcss: 8.4.45
 
   csso@4.2.0:
     dependencies:
@@ -23491,6 +24580,14 @@ snapshots:
     dependencies:
       css-tree: 2.2.1
 
+  cssom@0.3.8: {}
+
+  cssom@0.5.0: {}
+
+  cssstyle@2.3.0:
+    dependencies:
+      cssom: 0.3.8
+
   cssstyle@4.0.1:
     dependencies:
       rrweb-cssom: 0.6.0
@@ -23513,6 +24610,12 @@ snapshots:
 
   dargs@7.0.0: {}
 
+  data-urls@3.0.2:
+    dependencies:
+      abab: 2.0.6
+      whatwg-mimetype: 3.0.0
+      whatwg-url: 11.0.0
+
   data-urls@5.0.0:
     dependencies:
       whatwg-mimetype: 4.0.0
@@ -23548,6 +24651,12 @@ snapshots:
     dependencies:
       ms: 2.1.3
 
+  debug@4.3.1(supports-color@8.1.1):
+    dependencies:
+      ms: 2.1.2
+    optionalDependencies:
+      supports-color: 8.1.1
+
   debug@4.3.4(supports-color@8.1.1):
     dependencies:
       ms: 2.1.2
@@ -23799,6 +24908,10 @@ snapshots:
 
   domelementtype@2.3.0: {}
 
+  domexception@4.0.0:
+    dependencies:
+      webidl-conversions: 7.0.0
+
   domhandler@2.4.2:
     dependencies:
       domelementtype: 1.3.1
@@ -23901,6 +25014,8 @@ snapshots:
 
   emoji-regex@9.2.2: {}
 
+  emoji-toolkit@6.6.0: {}
+
   emoji-toolkit@8.0.0: {}
 
   emojis-list@3.0.0: {}
@@ -23955,7 +25070,6 @@ snapshots:
   errno@0.1.8:
     dependencies:
       prr: 1.0.1
-    optional: true
 
   error-ex@1.3.2:
     dependencies:
@@ -24281,18 +25395,26 @@ snapshots:
 
   escape-string-regexp@5.0.0: {}
 
-  eslint-config-semistandard@17.0.0(eslint-config-standard@17.1.0(eslint-plugin-import@2.29.0(eslint@8.56.0))(eslint-plugin-n@15.7.0(eslint@8.56.0))(eslint-plugin-promise@6.1.1(eslint@8.56.0))(eslint@8.56.0))(eslint-plugin-import@2.29.0(eslint@8.56.0))(eslint-plugin-n@15.7.0(eslint@8.56.0))(eslint-plugin-promise@6.1.1(eslint@8.56.0))(eslint@8.56.0):
+  escodegen@2.1.0:
+    dependencies:
+      esprima: 4.0.1
+      estraverse: 5.3.0
+      esutils: 2.0.3
+    optionalDependencies:
+      source-map: 0.6.1
+
+  eslint-config-semistandard@17.0.0(eslint-config-standard@17.1.0(eslint-plugin-import@2.29.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0))(eslint-plugin-n@15.7.0(eslint@8.56.0))(eslint-plugin-promise@6.1.1(eslint@8.56.0))(eslint@8.56.0))(eslint-plugin-import@2.29.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0))(eslint-plugin-n@15.7.0(eslint@8.56.0))(eslint-plugin-promise@6.1.1(eslint@8.56.0))(eslint@8.56.0):
     dependencies:
       eslint: 8.56.0
-      eslint-config-standard: 17.1.0(eslint-plugin-import@2.29.0(eslint@8.56.0))(eslint-plugin-n@15.7.0(eslint@8.56.0))(eslint-plugin-promise@6.1.1(eslint@8.56.0))(eslint@8.56.0)
-      eslint-plugin-import: 2.29.0(eslint@8.56.0)
+      eslint-config-standard: 17.1.0(eslint-plugin-import@2.29.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0))(eslint-plugin-n@15.7.0(eslint@8.56.0))(eslint-plugin-promise@6.1.1(eslint@8.56.0))(eslint@8.56.0)
+      eslint-plugin-import: 2.29.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0)
       eslint-plugin-n: 15.7.0(eslint@8.56.0)
       eslint-plugin-promise: 6.1.1(eslint@8.56.0)
 
-  eslint-config-standard@17.1.0(eslint-plugin-import@2.29.0(eslint@8.56.0))(eslint-plugin-n@15.7.0(eslint@8.56.0))(eslint-plugin-promise@6.1.1(eslint@8.56.0))(eslint@8.56.0):
+  eslint-config-standard@17.1.0(eslint-plugin-import@2.29.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0))(eslint-plugin-n@15.7.0(eslint@8.56.0))(eslint-plugin-promise@6.1.1(eslint@8.56.0))(eslint@8.56.0):
     dependencies:
       eslint: 8.56.0
-      eslint-plugin-import: 2.29.0(eslint@8.56.0)
+      eslint-plugin-import: 2.29.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0)
       eslint-plugin-n: 15.7.0(eslint@8.56.0)
       eslint-plugin-promise: 6.1.1(eslint@8.56.0)
 
@@ -24304,10 +25426,11 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.8.0(eslint-import-resolver-node@0.3.9)(eslint@8.56.0):
+  eslint-module-utils@2.8.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint-import-resolver-node@0.3.9)(eslint@8.56.0):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
+      '@typescript-eslint/parser': 7.0.1(eslint@8.56.0)(typescript@5.4.2)
       eslint: 8.56.0
       eslint-import-resolver-node: 0.3.9
     transitivePeerDependencies:
@@ -24331,7 +25454,7 @@ snapshots:
       eslint-utils: 3.0.0(eslint@8.56.0)
       estraverse: 5.3.0
 
-  eslint-plugin-import@2.29.0(eslint@8.56.0):
+  eslint-plugin-import@2.29.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0):
     dependencies:
       array-includes: 3.1.7
       array.prototype.findlastindex: 1.2.3
@@ -24341,7 +25464,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 8.56.0
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.8.0(eslint-import-resolver-node@0.3.9)(eslint@8.56.0)
+      eslint-module-utils: 2.8.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint-import-resolver-node@0.3.9)(eslint@8.56.0)
       hasown: 2.0.0
       is-core-module: 2.13.1
       is-glob: 4.0.3
@@ -24351,19 +25474,43 @@ snapshots:
       object.values: 1.1.7
       semver: 6.3.1
       tsconfig-paths: 3.14.2
+    optionalDependencies:
+      '@typescript-eslint/parser': 7.0.1(eslint@8.56.0)(typescript@5.4.2)
     transitivePeerDependencies:
       - eslint-import-resolver-typescript
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-plugin-jest@25.7.0(eslint@8.56.0)(typescript@5.4.2):
+  eslint-plugin-jest@25.7.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0)(typescript@5.4.2):
     dependencies:
       '@typescript-eslint/experimental-utils': 5.62.0(eslint@8.56.0)(typescript@5.4.2)
       eslint: 8.56.0
+    optionalDependencies:
+      '@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0)(typescript@5.4.2)
     transitivePeerDependencies:
       - supports-color
       - typescript
 
+  eslint-plugin-jsdoc@39.9.1(eslint@8.56.0):
+    dependencies:
+      '@es-joy/jsdoccomment': 0.36.1
+      comment-parser: 1.3.1
+      debug: 4.3.6
+      escape-string-regexp: 4.0.0
+      eslint: 8.56.0
+      esquery: 1.5.0
+      semver: 7.5.4
+      spdx-expression-parse: 3.0.1
+    transitivePeerDependencies:
+      - supports-color
+
+  eslint-plugin-mocha@10.5.0(eslint@8.56.0):
+    dependencies:
+      eslint: 8.56.0
+      eslint-utils: 3.0.0(eslint@8.56.0)
+      globals: 13.24.0
+      rambda: 7.5.0
+
   eslint-plugin-n@15.7.0(eslint@8.56.0):
     dependencies:
       builtins: 5.0.1
@@ -24798,6 +25945,10 @@ snapshots:
 
   fast-levenshtein@2.0.6: {}
 
+  fast-url-parser@1.1.3:
+    dependencies:
+      punycode: 1.4.1
+
   fastest-levenshtein@1.0.16: {}
 
   fastq@1.15.0:
@@ -25359,6 +26510,15 @@ snapshots:
       once: 1.4.0
       path-is-absolute: 1.0.1
 
+  glob@7.1.6:
+    dependencies:
+      fs.realpath: 1.0.0
+      inflight: 1.0.6
+      inherits: 2.0.4
+      minimatch: 3.1.2
+      once: 1.4.0
+      path-is-absolute: 1.0.1
+
   glob@7.2.0:
     dependencies:
       fs.realpath: 1.0.0
@@ -25466,10 +26626,25 @@ snapshots:
     dependencies:
       type-fest: 0.20.2
 
+  globals@13.24.0:
+    dependencies:
+      type-fest: 0.20.2
+
   globalthis@1.0.3:
     dependencies:
       define-properties: 1.2.1
 
+  globby@10.0.2:
+    dependencies:
+      '@types/glob': 7.2.0
+      array-union: 2.1.0
+      dir-glob: 3.0.1
+      fast-glob: 3.3.2
+      glob: 7.2.3
+      ignore: 5.3.0
+      merge2: 1.4.1
+      slash: 3.0.0
+
   globby@11.1.0:
     dependencies:
       array-union: 2.1.0
@@ -25584,6 +26759,8 @@ snapshots:
 
   grouped-queue@2.0.0: {}
 
+  growl@1.10.5: {}
+
   gulp-cached@1.1.1:
     dependencies:
       lodash.defaults: 4.2.0
@@ -25633,12 +26810,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  gulp-postcss@9.0.1(postcss@8.4.39):
+  gulp-postcss@9.0.1(postcss@8.4.45):
     dependencies:
       fancy-log: 1.3.3
       plugin-error: 1.0.1
-      postcss: 8.4.39
-      postcss-load-config: 3.1.4(postcss@8.4.39)
+      postcss: 8.4.45
+      postcss-load-config: 3.1.4(postcss@8.4.45)
       vinyl-sourcemaps-apply: 0.2.1
     transitivePeerDependencies:
       - ts-node
@@ -25776,6 +26953,11 @@ snapshots:
 
   he@1.2.0: {}
 
+  header-case@2.0.4:
+    dependencies:
+      capital-case: 1.0.4
+      tslib: 2.6.2
+
   highlight.js@10.7.3: {}
 
   homedir-polyfill@1.0.3:
@@ -26997,6 +28179,10 @@ snapshots:
       argparse: 1.0.10
       esprima: 4.0.1
 
+  js-yaml@4.0.0:
+    dependencies:
+      argparse: 2.0.1
+
   js-yaml@4.1.0:
     dependencies:
       argparse: 2.0.1
@@ -27030,6 +28216,46 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  jsdoc-type-pratt-parser@3.1.0: {}
+
+  jsdom-global@3.0.2(jsdom@18.1.1):
+    dependencies:
+      jsdom: 18.1.1
+
+  jsdom@18.1.1:
+    dependencies:
+      abab: 2.0.6
+      acorn: 8.11.2
+      acorn-globals: 6.0.0
+      cssom: 0.5.0
+      cssstyle: 2.3.0
+      data-urls: 3.0.2
+      decimal.js: 10.4.3
+      domexception: 4.0.0
+      escodegen: 2.1.0
+      form-data: 4.0.0
+      html-encoding-sniffer: 3.0.0
+      http-proxy-agent: 5.0.0
+      https-proxy-agent: 5.0.1
+      is-potential-custom-element-name: 1.0.1
+      nwsapi: 2.2.7
+      parse5: 6.0.1
+      saxes: 5.0.1
+      symbol-tree: 3.2.4
+      tough-cookie: 4.1.3
+      w3c-hr-time: 1.0.2
+      w3c-xmlserializer: 3.0.0
+      webidl-conversions: 7.0.0
+      whatwg-encoding: 2.0.0
+      whatwg-mimetype: 3.0.0
+      whatwg-url: 10.0.0
+      ws: 8.16.0
+      xml-name-validator: 4.0.0
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+
   jsdom@24.0.0:
     dependencies:
       cssstyle: 4.0.1
@@ -27089,6 +28315,10 @@ snapshots:
 
   json-stringify-safe@5.0.1: {}
 
+  json5-with-undefined@2.1.301:
+    dependencies:
+      minimist: 1.2.8
+
   json5@1.0.2:
     dependencies:
       minimist: 1.2.8
@@ -27116,6 +28346,8 @@ snapshots:
       is-promise: 2.2.2
       promise: 7.3.1
 
+  just-clone@6.2.0: {}
+
   just-debounce@1.1.0: {}
 
   just-diff-apply@5.5.0: {}
@@ -27202,6 +28434,11 @@ snapshots:
     dependencies:
       flush-write-stream: 1.1.1
 
+  less-loader@11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96)):
+    dependencies:
+      less: 4.2.0
+      webpack: 5.89.0(@swc/core@1.3.96)
+
   less@4.2.0:
     dependencies:
       copy-anything: 2.0.6
@@ -27434,6 +28671,10 @@ snapshots:
     dependencies:
       chalk: 2.4.2
 
+  log-symbols@4.0.0:
+    dependencies:
+      chalk: 4.1.2
+
   log-symbols@4.1.0:
     dependencies:
       chalk: 4.1.2
@@ -27905,6 +29146,11 @@ snapshots:
     dependencies:
       map-or-similar: 1.5.0
 
+  memory-fs@0.4.1:
+    dependencies:
+      errno: 0.1.8
+      readable-stream: 2.3.8
+
   memorystream@0.3.1: {}
 
   meow@10.1.5:
@@ -28191,8 +29437,14 @@ snapshots:
       braces: 3.0.2
       picomatch: 2.3.1
 
+  mime-db@1.33.0: {}
+
   mime-db@1.52.0: {}
 
+  mime-types@2.1.18:
+    dependencies:
+      mime-db: 1.33.0
+
   mime-types@2.1.35:
     dependencies:
       mime-db: 1.52.0
@@ -28226,6 +29478,10 @@ snapshots:
 
   minimalistic-assert@1.0.1: {}
 
+  minimatch@3.0.4:
+    dependencies:
+      brace-expansion: 1.1.11
+
   minimatch@3.0.5:
     dependencies:
       brace-expansion: 1.1.11
@@ -28367,6 +29623,56 @@ snapshots:
       yargs-parser: 20.2.4
       yargs-unparser: 2.0.0
 
+  mocha@8.4.0:
+    dependencies:
+      '@ungap/promise-all-settled': 1.1.2
+      ansi-colors: 4.1.1
+      browser-stdout: 1.3.1
+      chokidar: 3.5.1
+      debug: 4.3.1(supports-color@8.1.1)
+      diff: 5.0.0
+      escape-string-regexp: 4.0.0
+      find-up: 5.0.0
+      glob: 7.1.6
+      growl: 1.10.5
+      he: 1.2.0
+      js-yaml: 4.0.0
+      log-symbols: 4.0.0
+      minimatch: 3.0.4
+      ms: 2.1.3
+      nanoid: 3.1.20
+      serialize-javascript: 5.0.1
+      strip-json-comments: 3.1.1
+      supports-color: 8.1.1
+      which: 2.0.2
+      wide-align: 1.1.3
+      workerpool: 6.1.0
+      yargs: 16.2.0
+      yargs-parser: 20.2.4
+      yargs-unparser: 2.0.0
+
+  mochapack@2.1.4(mocha@8.4.0)(webpack@5.89.0(@swc/core@1.3.96)):
+    dependencies:
+      '@babel/runtime-corejs2': 7.25.6
+      chalk: 2.4.2
+      chokidar: 3.5.3
+      glob-parent: 5.1.2
+      globby: 10.0.2
+      interpret: 1.4.0
+      is-glob: 4.0.3
+      loader-utils: 1.4.2
+      lodash: 4.17.21
+      memory-fs: 0.4.1
+      minimatch: 3.1.2
+      mocha: 8.4.0
+      nodent-runtime: 3.2.1
+      normalize-path: 3.0.0
+      progress: 2.0.3
+      source-map-support: 0.5.21
+      toposort: 2.0.2
+      webpack: 5.89.0(@swc/core@1.3.96)
+      yargs: 14.0.0
+
   modify-values@1.0.1: {}
 
   module-alias@2.2.3: {}
@@ -28424,6 +29730,8 @@ snapshots:
   nan@2.18.0:
     optional: true
 
+  nanoid@3.1.20: {}
+
   nanoid@3.3.3: {}
 
   nanoid@3.3.7: {}
@@ -28444,6 +29752,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  natural-compare-lite@1.4.0: {}
+
   natural-compare@1.4.0: {}
 
   needle@3.2.0:
@@ -28538,6 +29848,8 @@ snapshots:
 
   node-releases@2.0.13: {}
 
+  nodent-runtime@3.2.1: {}
+
   nopt@6.0.0:
     dependencies:
       abbrev: 1.1.1
@@ -29334,6 +30646,11 @@ snapshots:
 
   path-browserify@1.0.1: {}
 
+  path-case@3.0.4:
+    dependencies:
+      dot-case: 3.0.4
+      tslib: 2.6.2
+
   path-dirname@1.0.2: {}
 
   path-exists@2.1.0:
@@ -29348,6 +30665,8 @@ snapshots:
 
   path-is-absolute@1.0.1: {}
 
+  path-is-inside@1.0.2: {}
+
   path-key@2.0.1: {}
 
   path-key@3.1.1: {}
@@ -29373,6 +30692,8 @@ snapshots:
     dependencies:
       isarray: 0.0.1
 
+  path-to-regexp@2.2.1: {}
+
   path-to-regexp@6.2.1: {}
 
   path-type@1.1.0:
@@ -29518,9 +30839,9 @@ snapshots:
       postcss-selector-parser: 6.0.13
       postcss-value-parser: 4.2.0
 
-  postcss-calc@9.0.1(postcss@8.4.39):
+  postcss-calc@9.0.1(postcss@8.4.45):
     dependencies:
-      postcss: 8.4.39
+      postcss: 8.4.45
       postcss-selector-parser: 6.0.13
       postcss-value-parser: 4.2.0
 
@@ -29578,12 +30899,12 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-colormin@6.0.0(postcss@8.4.39):
+  postcss-colormin@6.0.0(postcss@8.4.45):
     dependencies:
       browserslist: 4.22.1
       caniuse-api: 3.0.0
       colord: 2.9.3
-      postcss: 8.4.39
+      postcss: 8.4.45
       postcss-value-parser: 4.2.0
 
   postcss-convert-values@5.1.3(postcss@8.4.39):
@@ -29592,10 +30913,10 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-convert-values@6.0.0(postcss@8.4.39):
+  postcss-convert-values@6.0.0(postcss@8.4.45):
     dependencies:
       browserslist: 4.22.1
-      postcss: 8.4.39
+      postcss: 8.4.45
       postcss-value-parser: 4.2.0
 
   postcss-custom-media@7.0.8:
@@ -29621,33 +30942,33 @@ snapshots:
     dependencies:
       postcss: 8.4.39
 
-  postcss-discard-comments@6.0.0(postcss@8.4.39):
+  postcss-discard-comments@6.0.0(postcss@8.4.45):
     dependencies:
-      postcss: 8.4.39
+      postcss: 8.4.45
 
   postcss-discard-duplicates@5.1.0(postcss@8.4.39):
     dependencies:
       postcss: 8.4.39
 
-  postcss-discard-duplicates@6.0.0(postcss@8.4.39):
+  postcss-discard-duplicates@6.0.0(postcss@8.4.45):
     dependencies:
-      postcss: 8.4.39
+      postcss: 8.4.45
 
   postcss-discard-empty@5.1.1(postcss@8.4.39):
     dependencies:
       postcss: 8.4.39
 
-  postcss-discard-empty@6.0.0(postcss@8.4.39):
+  postcss-discard-empty@6.0.0(postcss@8.4.45):
     dependencies:
-      postcss: 8.4.39
+      postcss: 8.4.45
 
   postcss-discard-overridden@5.1.0(postcss@8.4.39):
     dependencies:
       postcss: 8.4.39
 
-  postcss-discard-overridden@6.0.0(postcss@8.4.39):
+  postcss-discard-overridden@6.0.0(postcss@8.4.45):
     dependencies:
-      postcss: 8.4.39
+      postcss: 8.4.45
 
   postcss-double-position-gradients@1.0.0:
     dependencies:
@@ -29684,7 +31005,7 @@ snapshots:
     dependencies:
       htmlparser2: 3.10.1
       postcss: 7.0.39
-      postcss-syntax: 0.36.2(postcss-html@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-jsx@0.36.4(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-less@3.1.4)(postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-scss@2.1.1)(postcss@7.0.39)
+      postcss-syntax: 0.36.2(postcss-html@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-jsx@0.36.4)(postcss-less@3.1.4)(postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-scss@2.1.1)(postcss@7.0.39)
 
   postcss-image-set-function@3.0.1:
     dependencies:
@@ -29699,7 +31020,7 @@ snapshots:
     dependencies:
       '@babel/core': 7.23.2
       postcss: 7.0.39
-      postcss-syntax: 0.36.2(postcss-html@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-jsx@0.36.4(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-less@3.1.4)(postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-scss@2.1.1)(postcss@7.0.39)
+      postcss-syntax: 0.36.2(postcss-html@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-jsx@0.36.4)(postcss-less@3.1.4)(postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-scss@2.1.1)(postcss@7.0.39)
     transitivePeerDependencies:
       - supports-color
 
@@ -29713,16 +31034,16 @@ snapshots:
     dependencies:
       postcss: 7.0.39
 
-  postcss-less@6.0.0(postcss@8.4.39):
+  postcss-less@6.0.0(postcss@8.4.45):
     dependencies:
-      postcss: 8.4.39
+      postcss: 8.4.45
 
-  postcss-load-config@3.1.4(postcss@8.4.39):
+  postcss-load-config@3.1.4(postcss@8.4.45):
     dependencies:
       lilconfig: 2.1.0
       yaml: 1.10.2
     optionalDependencies:
-      postcss: 8.4.39
+      postcss: 8.4.45
 
   postcss-load-config@4.0.1(postcss@8.4.39):
     dependencies:
@@ -29755,7 +31076,7 @@ snapshots:
   postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39):
     dependencies:
       postcss: 7.0.39
-      postcss-syntax: 0.36.2(postcss-html@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-jsx@0.36.4(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-less@3.1.4)(postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-scss@2.1.1)(postcss@7.0.39)
+      postcss-syntax: 0.36.2(postcss-html@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-jsx@0.36.4)(postcss-less@3.1.4)(postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-scss@2.1.1)(postcss@7.0.39)
       remark: 10.0.1
       unist-util-find-all-after: 1.0.5
 
@@ -29771,11 +31092,11 @@ snapshots:
       postcss-value-parser: 4.2.0
       stylehacks: 5.1.1(postcss@8.4.39)
 
-  postcss-merge-longhand@6.0.0(postcss@8.4.39):
+  postcss-merge-longhand@6.0.0(postcss@8.4.45):
     dependencies:
-      postcss: 8.4.39
+      postcss: 8.4.45
       postcss-value-parser: 4.2.0
-      stylehacks: 6.0.0(postcss@8.4.39)
+      stylehacks: 6.0.0(postcss@8.4.45)
 
   postcss-merge-rules@5.1.4(postcss@8.4.39):
     dependencies:
@@ -29785,12 +31106,12 @@ snapshots:
       postcss: 8.4.39
       postcss-selector-parser: 6.0.13
 
-  postcss-merge-rules@6.0.1(postcss@8.4.39):
+  postcss-merge-rules@6.0.1(postcss@8.4.45):
     dependencies:
       browserslist: 4.22.1
       caniuse-api: 3.0.0
-      cssnano-utils: 4.0.0(postcss@8.4.39)
-      postcss: 8.4.39
+      cssnano-utils: 4.0.0(postcss@8.4.45)
+      postcss: 8.4.45
       postcss-selector-parser: 6.0.13
 
   postcss-minify-font-values@5.1.0(postcss@8.4.39):
@@ -29798,9 +31119,9 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-minify-font-values@6.0.0(postcss@8.4.39):
+  postcss-minify-font-values@6.0.0(postcss@8.4.45):
     dependencies:
-      postcss: 8.4.39
+      postcss: 8.4.45
       postcss-value-parser: 4.2.0
 
   postcss-minify-gradients@5.1.1(postcss@8.4.39):
@@ -29810,11 +31131,11 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-minify-gradients@6.0.0(postcss@8.4.39):
+  postcss-minify-gradients@6.0.0(postcss@8.4.45):
     dependencies:
       colord: 2.9.3
-      cssnano-utils: 4.0.0(postcss@8.4.39)
-      postcss: 8.4.39
+      cssnano-utils: 4.0.0(postcss@8.4.45)
+      postcss: 8.4.45
       postcss-value-parser: 4.2.0
 
   postcss-minify-params@5.1.4(postcss@8.4.39):
@@ -29824,11 +31145,11 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-minify-params@6.0.0(postcss@8.4.39):
+  postcss-minify-params@6.0.0(postcss@8.4.45):
     dependencies:
       browserslist: 4.22.1
-      cssnano-utils: 4.0.0(postcss@8.4.39)
-      postcss: 8.4.39
+      cssnano-utils: 4.0.0(postcss@8.4.45)
+      postcss: 8.4.45
       postcss-value-parser: 4.2.0
 
   postcss-minify-selectors@5.2.1(postcss@8.4.39):
@@ -29836,9 +31157,9 @@ snapshots:
       postcss: 8.4.39
       postcss-selector-parser: 6.0.13
 
-  postcss-minify-selectors@6.0.0(postcss@8.4.39):
+  postcss-minify-selectors@6.0.0(postcss@8.4.45):
     dependencies:
-      postcss: 8.4.39
+      postcss: 8.4.45
       postcss-selector-parser: 6.0.13
 
   postcss-modules-extract-imports@3.0.0(postcss@8.4.39):
@@ -29879,18 +31200,18 @@ snapshots:
     dependencies:
       postcss: 8.4.39
 
-  postcss-normalize-charset@6.0.0(postcss@8.4.39):
+  postcss-normalize-charset@6.0.0(postcss@8.4.45):
     dependencies:
-      postcss: 8.4.39
+      postcss: 8.4.45
 
   postcss-normalize-display-values@5.1.0(postcss@8.4.39):
     dependencies:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-display-values@6.0.0(postcss@8.4.39):
+  postcss-normalize-display-values@6.0.0(postcss@8.4.45):
     dependencies:
-      postcss: 8.4.39
+      postcss: 8.4.45
       postcss-value-parser: 4.2.0
 
   postcss-normalize-positions@5.1.1(postcss@8.4.39):
@@ -29898,9 +31219,9 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-positions@6.0.0(postcss@8.4.39):
+  postcss-normalize-positions@6.0.0(postcss@8.4.45):
     dependencies:
-      postcss: 8.4.39
+      postcss: 8.4.45
       postcss-value-parser: 4.2.0
 
   postcss-normalize-repeat-style@5.1.1(postcss@8.4.39):
@@ -29908,9 +31229,9 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-repeat-style@6.0.0(postcss@8.4.39):
+  postcss-normalize-repeat-style@6.0.0(postcss@8.4.45):
     dependencies:
-      postcss: 8.4.39
+      postcss: 8.4.45
       postcss-value-parser: 4.2.0
 
   postcss-normalize-string@5.1.0(postcss@8.4.39):
@@ -29918,9 +31239,9 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-string@6.0.0(postcss@8.4.39):
+  postcss-normalize-string@6.0.0(postcss@8.4.45):
     dependencies:
-      postcss: 8.4.39
+      postcss: 8.4.45
       postcss-value-parser: 4.2.0
 
   postcss-normalize-timing-functions@5.1.0(postcss@8.4.39):
@@ -29928,9 +31249,9 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-timing-functions@6.0.0(postcss@8.4.39):
+  postcss-normalize-timing-functions@6.0.0(postcss@8.4.45):
     dependencies:
-      postcss: 8.4.39
+      postcss: 8.4.45
       postcss-value-parser: 4.2.0
 
   postcss-normalize-unicode@5.1.1(postcss@8.4.39):
@@ -29939,10 +31260,10 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-unicode@6.0.0(postcss@8.4.39):
+  postcss-normalize-unicode@6.0.0(postcss@8.4.45):
     dependencies:
       browserslist: 4.22.1
-      postcss: 8.4.39
+      postcss: 8.4.45
       postcss-value-parser: 4.2.0
 
   postcss-normalize-url@5.1.0(postcss@8.4.39):
@@ -29951,9 +31272,9 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-url@6.0.0(postcss@8.4.39):
+  postcss-normalize-url@6.0.0(postcss@8.4.45):
     dependencies:
-      postcss: 8.4.39
+      postcss: 8.4.45
       postcss-value-parser: 4.2.0
 
   postcss-normalize-whitespace@5.1.1(postcss@8.4.39):
@@ -29961,9 +31282,9 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-whitespace@6.0.0(postcss@8.4.39):
+  postcss-normalize-whitespace@6.0.0(postcss@8.4.45):
     dependencies:
-      postcss: 8.4.39
+      postcss: 8.4.45
       postcss-value-parser: 4.2.0
 
   postcss-ordered-values@5.1.3(postcss@8.4.39):
@@ -29972,10 +31293,10 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-ordered-values@6.0.0(postcss@8.4.39):
+  postcss-ordered-values@6.0.0(postcss@8.4.45):
     dependencies:
-      cssnano-utils: 4.0.0(postcss@8.4.39)
-      postcss: 8.4.39
+      cssnano-utils: 4.0.0(postcss@8.4.45)
+      postcss: 8.4.45
       postcss-value-parser: 4.2.0
 
   postcss-overflow-shorthand@2.0.0:
@@ -30048,20 +31369,20 @@ snapshots:
       caniuse-api: 3.0.0
       postcss: 8.4.39
 
-  postcss-reduce-initial@6.0.0(postcss@8.4.39):
+  postcss-reduce-initial@6.0.0(postcss@8.4.45):
     dependencies:
       browserslist: 4.22.1
       caniuse-api: 3.0.0
-      postcss: 8.4.39
+      postcss: 8.4.45
 
   postcss-reduce-transforms@5.1.0(postcss@8.4.39):
     dependencies:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-reduce-transforms@6.0.0(postcss@8.4.39):
+  postcss-reduce-transforms@6.0.0(postcss@8.4.45):
     dependencies:
-      postcss: 8.4.39
+      postcss: 8.4.45
       postcss-value-parser: 4.2.0
 
   postcss-replace-overflow-wrap@3.0.0:
@@ -30132,9 +31453,9 @@ snapshots:
       lodash: 4.17.21
       postcss: 7.0.39
 
-  postcss-sorting@8.0.2(postcss@8.4.39):
+  postcss-sorting@8.0.2(postcss@8.4.45):
     dependencies:
-      postcss: 8.4.39
+      postcss: 8.4.45
 
   postcss-svgo@5.1.0(postcss@8.4.39):
     dependencies:
@@ -30142,13 +31463,13 @@ snapshots:
       postcss-value-parser: 4.2.0
       svgo: 2.8.0
 
-  postcss-svgo@6.0.0(postcss@8.4.39):
+  postcss-svgo@6.0.0(postcss@8.4.45):
     dependencies:
-      postcss: 8.4.39
+      postcss: 8.4.45
       postcss-value-parser: 4.2.0
       svgo: 3.0.2
 
-  postcss-syntax@0.36.2(postcss-html@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-jsx@0.36.4(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-less@3.1.4)(postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-scss@2.1.1)(postcss@7.0.39):
+  postcss-syntax@0.36.2(postcss-html@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-jsx@0.36.4)(postcss-less@3.1.4)(postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-scss@2.1.1)(postcss@7.0.39):
     dependencies:
       postcss: 7.0.39
     optionalDependencies:
@@ -30163,9 +31484,9 @@ snapshots:
       postcss: 8.4.39
       postcss-selector-parser: 6.0.13
 
-  postcss-unique-selectors@6.0.0(postcss@8.4.39):
+  postcss-unique-selectors@6.0.0(postcss@8.4.45):
     dependencies:
-      postcss: 8.4.39
+      postcss: 8.4.45
       postcss-selector-parser: 6.0.13
 
   postcss-value-parser@3.3.1: {}
@@ -30210,6 +31531,12 @@ snapshots:
       picocolors: 1.0.1
       source-map-js: 1.2.0
 
+  postcss@8.4.45:
+    dependencies:
+      nanoid: 3.3.7
+      picocolors: 1.0.1
+      source-map-js: 1.2.0
+
   preact@10.18.2: {}
 
   precss@4.0.0:
@@ -30417,8 +31744,7 @@ snapshots:
 
   proxy-from-env@1.1.0: {}
 
-  prr@1.0.1:
-    optional: true
+  prr@1.0.1: {}
 
   pseudomap@1.0.2: {}
 
@@ -30562,12 +31888,16 @@ snapshots:
 
   quick-lru@5.1.1: {}
 
+  rambda@7.5.0: {}
+
   ramda@0.29.0: {}
 
   randombytes@2.1.0:
     dependencies:
       safe-buffer: 5.2.1
 
+  range-parser@1.2.0: {}
+
   range-parser@1.2.1: {}
 
   raw-body@2.5.1:
@@ -30759,6 +32089,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  readdirp@3.5.0:
+    dependencies:
+      picomatch: 2.3.1
+
   readdirp@3.6.0:
     dependencies:
       picomatch: 2.3.1
@@ -30832,6 +32166,11 @@ snapshots:
       unicode-match-property-ecmascript: 2.0.0
       unicode-match-property-value-ecmascript: 2.1.0
 
+  registry-auth-token@3.3.2:
+    dependencies:
+      rc: 1.2.8
+      safe-buffer: 5.2.1
+
   registry-auth-token@3.4.0:
     dependencies:
       rc: 1.2.8
@@ -31185,6 +32524,10 @@ snapshots:
 
   sax@1.3.0: {}
 
+  saxes@5.0.1:
+    dependencies:
+      xmlchars: 2.2.0
+
   saxes@6.0.0:
     dependencies:
       xmlchars: 2.2.0
@@ -31360,10 +32703,20 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  sentence-case@3.0.4:
+    dependencies:
+      no-case: 3.0.4
+      tslib: 2.6.2
+      upper-case-first: 2.0.2
+
   serialize-error@7.0.1:
     dependencies:
       type-fest: 0.13.1
 
+  serialize-javascript@5.0.1:
+    dependencies:
+      randombytes: 2.1.0
+
   serialize-javascript@6.0.0:
     dependencies:
       randombytes: 2.1.0
@@ -31372,6 +32725,17 @@ snapshots:
     dependencies:
       randombytes: 2.1.0
 
+  serve-handler@6.1.3:
+    dependencies:
+      bytes: 3.0.0
+      content-disposition: 0.5.2
+      fast-url-parser: 1.1.3
+      mime-types: 2.1.18
+      minimatch: 3.0.4
+      path-is-inside: 1.0.2
+      path-to-regexp: 2.2.1
+      range-parser: 1.2.0
+
   serve-index@1.9.1:
     dependencies:
       accepts: 1.3.8
@@ -31393,6 +32757,20 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  serve@13.0.4:
+    dependencies:
+      '@zeit/schemas': 2.6.0
+      ajv: 6.12.6
+      arg: 2.0.0
+      boxen: 5.1.2
+      chalk: 2.4.1
+      clipboardy: 2.3.0
+      compression: 1.7.3
+      serve-handler: 6.1.3
+      update-check: 1.5.2
+    transitivePeerDependencies:
+      - supports-color
+
   set-blocking@2.0.0: {}
 
   set-function-length@1.2.2:
@@ -31548,6 +32926,11 @@ snapshots:
 
   smart-buffer@4.2.0: {}
 
+  snake-case@3.0.4:
+    dependencies:
+      dot-case: 3.0.4
+      tslib: 2.6.2
+
   snapdragon-node@2.1.1:
     dependencies:
       define-property: 1.0.0
@@ -32017,10 +33400,10 @@ snapshots:
       postcss: 8.4.39
       postcss-selector-parser: 6.0.13
 
-  stylehacks@6.0.0(postcss@8.4.39):
+  stylehacks@6.0.0(postcss@8.4.45):
     dependencies:
       browserslist: 4.22.1
-      postcss: 8.4.39
+      postcss: 8.4.45
       postcss-selector-parser: 6.0.13
 
   stylelint-config-rational-order@0.1.2:
@@ -32202,7 +33585,7 @@ snapshots:
       postcss-sass: 0.3.5
       postcss-scss: 2.1.1
       postcss-selector-parser: 3.1.2
-      postcss-syntax: 0.36.2(postcss-html@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-jsx@0.36.4(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-less@3.1.4)(postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-scss@2.1.1)(postcss@7.0.39)
+      postcss-syntax: 0.36.2(postcss-html@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-jsx@0.36.4)(postcss-less@3.1.4)(postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-scss@2.1.1)(postcss@7.0.39)
       postcss-value-parser: 3.3.1
       resolve-from: 4.0.0
       signal-exit: 3.0.7
@@ -32553,6 +33936,8 @@ snapshots:
       '@tokenizer/token': 0.3.0
       ieee754: 1.2.1
 
+  toposort@2.0.2: {}
+
   totalist@3.0.1: {}
 
   tough-cookie@4.1.3:
@@ -32564,6 +33949,10 @@ snapshots:
 
   tr46@0.0.3: {}
 
+  tr46@3.0.0:
+    dependencies:
+      punycode: 2.3.1
+
   tr46@5.0.0:
     dependencies:
       punycode: 2.3.1
@@ -32953,6 +34342,11 @@ snapshots:
       escalade: 3.1.1
       picocolors: 1.0.1
 
+  update-check@1.5.2:
+    dependencies:
+      registry-auth-token: 3.3.2
+      registry-url: 3.1.0
+
   update-notifier@5.1.0:
     dependencies:
       boxen: 5.1.2
@@ -32970,6 +34364,14 @@ snapshots:
       semver-diff: 3.1.1
       xdg-basedir: 4.0.0
 
+  upper-case-first@2.0.2:
+    dependencies:
+      tslib: 2.6.2
+
+  upper-case@2.0.2:
+    dependencies:
+      tslib: 2.6.2
+
   uri-js@4.4.1:
     dependencies:
       punycode: 2.3.1
@@ -33240,6 +34642,19 @@ snapshots:
       sugarss: 2.0.0
       terser: 5.24.0
 
+  vite@5.4.2(@types/node@16.18.83)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0):
+    dependencies:
+      esbuild: 0.21.5
+      postcss: 8.4.41
+      rollup: 4.21.1
+    optionalDependencies:
+      '@types/node': 16.18.83
+      fsevents: 2.3.3
+      less: 4.2.0
+      sass: 1.69.5
+      sugarss: 2.0.0
+      terser: 5.24.0
+
   vite@5.4.2(@types/node@18.18.9)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0):
     dependencies:
       esbuild: 0.21.5
@@ -33371,7 +34786,7 @@ snapshots:
     dependencies:
       vue: 3.4.15(typescript@5.4.2)
 
-  vue-loader@15.11.1(@vue/compiler-sfc@3.4.15)(css-loader@6.8.1(webpack@5.89.0(@swc/core@1.3.96)))(ejs@3.1.9)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(webpack@5.89.0(@swc/core@1.3.96)):
+  vue-loader@15.11.1(@vue/compiler-sfc@3.5.5)(css-loader@6.8.1(webpack@5.89.0(@swc/core@1.3.96)))(ejs@3.1.9)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(webpack@5.89.0(@swc/core@1.3.96)):
     dependencies:
       '@vue/component-compiler-utils': 3.3.0(ejs@3.1.9)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)
       css-loader: 6.8.1(webpack@5.89.0(@swc/core@1.3.96))
@@ -33381,7 +34796,7 @@ snapshots:
       vue-style-loader: 4.1.3
       webpack: 5.89.0(@swc/core@1.3.96)
     optionalDependencies:
-      '@vue/compiler-sfc': 3.4.15
+      '@vue/compiler-sfc': 3.5.5
       vue-template-compiler: 2.7.16(vue@3.4.15(typescript@5.4.2))
     transitivePeerDependencies:
       - arc-templates
@@ -33438,14 +34853,14 @@ snapshots:
       - walrus
       - whiskers
 
-  vue-loader@17.3.1(@vue/compiler-sfc@3.4.15)(vue@3.4.15(typescript@5.4.2))(webpack@5.89.0(@swc/core@1.3.96)):
+  vue-loader@17.3.1(@vue/compiler-sfc@3.5.5)(vue@3.4.15(typescript@5.4.2))(webpack@5.89.0(@swc/core@1.3.96)):
     dependencies:
       chalk: 4.1.2
       hash-sum: 2.0.0
       watchpack: 2.4.0
       webpack: 5.89.0(@swc/core@1.3.96)
     optionalDependencies:
-      '@vue/compiler-sfc': 3.4.15
+      '@vue/compiler-sfc': 3.5.5
       vue: 3.4.15(typescript@5.4.2)
 
   vue-router@4.2.5(vue@3.4.15(typescript@5.4.2)):
@@ -33480,6 +34895,11 @@ snapshots:
     dependencies:
       vue: 3.4.15(typescript@5.4.2)
 
+  vue-tsc@0.38.9(typescript@5.4.2):
+    dependencies:
+      '@volar/vue-typescript': 0.38.9
+      typescript: 5.4.2
+
   vue-tsc@1.8.25(typescript@5.4.2)(vue@2.7.16):
     dependencies:
       '@volar/typescript': 1.11.1
@@ -33597,8 +35017,16 @@ snapshots:
       - typescript
       - vue
 
+  w3c-hr-time@1.0.2:
+    dependencies:
+      browser-process-hrtime: 1.0.0
+
   w3c-keyname@2.2.8: {}
 
+  w3c-xmlserializer@3.0.0:
+    dependencies:
+      xml-name-validator: 4.0.0
+
   w3c-xmlserializer@5.0.0:
     dependencies:
       xml-name-validator: 5.0.0
@@ -33813,8 +35241,20 @@ snapshots:
 
   whatwg-fetch@3.6.19: {}
 
+  whatwg-mimetype@3.0.0: {}
+
   whatwg-mimetype@4.0.0: {}
 
+  whatwg-url@10.0.0:
+    dependencies:
+      tr46: 3.0.0
+      webidl-conversions: 7.0.0
+
+  whatwg-url@11.0.0:
+    dependencies:
+      tr46: 3.0.0
+      webidl-conversions: 7.0.0
+
   whatwg-url@14.0.0:
     dependencies:
       tr46: 5.0.0
@@ -33879,6 +35319,10 @@ snapshots:
       siginfo: 2.0.0
       stackback: 0.0.2
 
+  wide-align@1.1.3:
+    dependencies:
+      string-width: 2.1.1
+
   wide-align@1.1.5:
     dependencies:
       string-width: 4.2.3
@@ -33898,6 +35342,8 @@ snapshots:
 
   wordwrap@1.0.0: {}
 
+  workerpool@6.1.0: {}
+
   workerpool@6.2.1: {}
 
   wrap-ansi@2.1.0:
@@ -33910,6 +35356,12 @@ snapshots:
       string-width: 2.1.1
       strip-ansi: 4.0.0
 
+  wrap-ansi@5.1.0:
+    dependencies:
+      ansi-styles: 3.2.1
+      string-width: 3.1.0
+      strip-ansi: 5.2.0
+
   wrap-ansi@6.2.0:
     dependencies:
       ansi-styles: 4.3.0
@@ -34025,6 +35477,11 @@ snapshots:
     dependencies:
       camelcase: 4.1.0
 
+  yargs-parser@13.1.2:
+    dependencies:
+      camelcase: 5.3.1
+      decamelize: 1.2.0
+
   yargs-parser@18.1.3:
     dependencies:
       camelcase: 5.3.1
@@ -34048,6 +35505,20 @@ snapshots:
       flat: 5.0.2
       is-plain-obj: 2.1.0
 
+  yargs@14.0.0:
+    dependencies:
+      cliui: 5.0.0
+      decamelize: 1.2.0
+      find-up: 3.0.0
+      get-caller-file: 2.0.5
+      require-directory: 2.1.1
+      require-main-filename: 2.0.0
+      set-blocking: 2.0.0
+      string-width: 3.1.0
+      which-module: 2.0.1
+      y18n: 4.0.3
+      yargs-parser: 13.1.2
+
   yargs@15.4.1:
     dependencies:
       cliui: 6.0.0

From 6d0e91e6acdad336b89a04673154e4324c06ff7a Mon Sep 17 00:00:00 2001
From: Julio Ortega <julio.ortega@dialpad.com>
Date: Fri, 20 Sep 2024 09:53:34 -0600
Subject: [PATCH 2/6] build(combinator): DLT-2046 DLT-2047 update bundler and
 dependencies (#500)

Signed-off-by: Julio Ortega <julio.ortega@dialpad.com>
---
 .../{.eslintrc.js => .eslintrc.cjs}           |   0
 packages/combinator/{public => }/index.html   |   1 +
 packages/combinator/index.js                  |   6 +-
 packages/combinator/package.json              |  87 +-
 packages/combinator/release.sh                |   4 -
 packages/combinator/src/App.vue               |  29 +-
 packages/combinator/src/assets/dialtone.less  |   2 +-
 .../combinator/src/assets/themes/dark.less    |  10 +-
 .../combinator/src/assets/themes/light.less   |  10 +-
 .../components/code_editor/code_editor.vue    |  12 +-
 .../code_editor/code_editor_closing_tag.vue   |   2 +-
 .../code_editor/code_editor_element.vue       |   4 +-
 .../code_editor/code_editor_input.vue         |   6 +-
 .../code_editor/code_editor_opening_tag.vue   |   2 +-
 .../code_editor/code_editor_slot.vue          |   6 +-
 .../code_editor_tag_attributes.vue            |   2 +-
 .../src/components/code_panel/code_panel.vue  |   8 +-
 .../src/components/combinator.test.js         |   2 +-
 .../combinator/src/components/combinator.vue  |  27 +-
 .../components/controls/control_array.test.js |   2 +-
 .../src/components/controls/control_array.vue |   4 +-
 .../components/controls/control_base.test.js  |   2 +-
 .../src/components/controls/control_base.vue  |   2 +-
 .../controls/control_boolean.test.js          |   2 +-
 .../controls/control_dynamic.test.js          |   6 +-
 .../components/controls/control_dynamic.vue   |   2 +-
 .../components/controls/control_event.test.js |   2 +-
 .../controls/control_iterable.test.js         |   2 +-
 .../components/controls/control_iterable.vue  |   7 +-
 .../controls/control_nullish.test.js          |   2 +-
 .../components/controls/control_nullish.vue   |   2 +-
 .../controls/control_number.test.js           |   2 +-
 .../controls/control_object.test.js           |   2 +-
 .../components/controls/control_object.vue    |   6 +-
 .../controls/control_selection.test.js        |   2 +-
 .../components/controls/control_slot.test.js  |   2 +-
 .../controls/control_string.test.js           |   2 +-
 .../controls/control_suggestion.vue           |  13 +-
 .../event_console/event_console.test.js       |   2 +-
 .../event_console/event_console.vue           |   6 +-
 .../event_console/event_console_array.vue     |   4 +-
 .../event_console/event_console_element.vue   |   2 +-
 .../event_console/event_console_lazy_load.vue |  16 +-
 .../event_console/event_console_object.vue    |   4 +-
 .../event_console/event_console_pair.vue      |  12 +-
 .../src/components/option_bar/option_bar.vue  |   4 +-
 .../option_bar/option_bar_control.test.js     |   2 +-
 .../option_bar/option_bar_control.vue         |   4 +-
 .../option_bar_member_group.test.js           |   2 +-
 .../option_bar/option_bar_member_group.vue    |  16 +-
 .../src/components/renderer/renderer.vue      |   8 +-
 .../src/components/renderer/renderer_menu.vue |  16 +-
 .../settings_menu/settings_menu.vue           |   4 +-
 .../src/components/tools/section.vue          |  11 +-
 packages/combinator/src/lib/control.js        |  22 +-
 packages/combinator/src/lib/utils.js          |  18 +-
 packages/combinator/src/main.js               |  10 +-
 packages/combinator/src/variants/variants.js  |  24 +-
 packages/combinator/vite.config.js            |  39 +
 packages/combinator/vue.config.js             |  18 -
 pnpm-lock.yaml                                | 971 ++++--------------
 61 files changed, 465 insertions(+), 1034 deletions(-)
 rename packages/combinator/{.eslintrc.js => .eslintrc.cjs} (100%)
 rename packages/combinator/{public => }/index.html (85%)
 delete mode 100755 packages/combinator/release.sh
 create mode 100644 packages/combinator/vite.config.js
 delete mode 100644 packages/combinator/vue.config.js

diff --git a/packages/combinator/.eslintrc.js b/packages/combinator/.eslintrc.cjs
similarity index 100%
rename from packages/combinator/.eslintrc.js
rename to packages/combinator/.eslintrc.cjs
diff --git a/packages/combinator/public/index.html b/packages/combinator/index.html
similarity index 85%
rename from packages/combinator/public/index.html
rename to packages/combinator/index.html
index b188eee4d7..71d7e72895 100644
--- a/packages/combinator/public/index.html
+++ b/packages/combinator/index.html
@@ -10,3 +10,4 @@
     </div>
   </body>
 </html>
+<script type="module" src="/src/main.js"></script>
\ No newline at end of file
diff --git a/packages/combinator/index.js b/packages/combinator/index.js
index 961446bcc7..d863b9cbc6 100644
--- a/packages/combinator/index.js
+++ b/packages/combinator/index.js
@@ -1,3 +1,3 @@
-export { default as DtcCombinator } from './src/components/combinator';
-export { default as DtcSection } from './src/components/tools/section';
-export { default as variantBank } from './src/variants/variants';
+export { default as DtcCombinator } from './src/components/combinator.vue';
+export { default as DtcSection } from './src/components/tools/section.vue';
+export { default as variantBank } from './src/variants/variants.js';
diff --git a/packages/combinator/package.json b/packages/combinator/package.json
index 7a279a6dff..e80788f872 100644
--- a/packages/combinator/package.json
+++ b/packages/combinator/package.json
@@ -1,55 +1,60 @@
 {
   "name": "@dialpad/dialtone-combinator",
   "version": "0.3.1",
-  "publishConfig": {
-    "access": "public"
-  },
+  "description": "Dialtone vue component combinator playground",
   "scripts": {
-    "dev": "vue-cli-service serve",
-    "preview": "npm run build:preview; serve ./dist/preview",
-    "lint": "eslint src --ext .js,.vue",
-    "build": "vue-cli-service build --target lib --dest ./dist/lib index.js; rm ./dist/lib/demo.html",
-    "build:preview": "vue-cli-service build --dest ./dist/preview",
-    "distribute": "rm ./dialtone-combinator-*.tgz; npm run build; npm pack",
-    "test": "vue-cli-service test:unit --timeout 100000 --colors --recursive --glob *.test.js src",
-    "release": "./release.sh"
+    "build": "vite build",
+    "dev": "vite",
+    "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
+    "serve": "vite preview",
+    "test": "vue-cli-service test:unit --timeout 100000 --colors --recursive --glob *.test.js src"
+  },
+  "bugs": {
+    "email": "dialtone@dialpad.com"
   },
-  "main": "./dist/lib/dialtone-combinator.umd.js",
+  "engineStrict": true,
+  "engines": {
+    "node": ">= 14.17"
+  },
+  "type": "module",
+  "module": "./dist/dialtone-combinator.js",
   "files": [
-    "./dist/lib/*.js"
+    "dist"
   ],
+  "exports": {
+    ".": "./dist/dialtone-combinator.js",
+    "./css": "./dist/style.css",
+    "./*": "./dist/src/lib/*.js"
+  },
+  "dependencies": {
+    "@dialpad/dialtone-vue": "workspace:^3",
+    "@dialpad/dialtone-css": "workspace:*",
+    "@dialpad/dialtone-icons": "workspace:*",
+    "change-case": "^4.1.2",
+    "js-beautify": "^1.14.4",
+    "json5-with-undefined": "^2.1.301",
+    "just-clone": "^6.1.1"
+  },
   "devDependencies": {
-    "@dialpad/dialtone": "6.35.0",
-    "@dialpad/dialtone-vue": "3.13.0",
-    "@types/node": "^16.11.41",
-    "@typescript-eslint/eslint-plugin": "^5.30.0",
-    "@typescript-eslint/parser": "^7.0.1",
-    "@vitejs/plugin-vue": "^2.3.3",
-    "@vitejs/plugin-vue-jsx": "^1.3.10",
+    "@vitejs/plugin-vue": "^5.1.3",
     "@vue/cli-plugin-unit-mocha": "^5.0.8",
-    "@vue/cli-service": "^5.0.6",
     "@vue/test-utils": "^2.0.2",
-    "@vue/tsconfig": "^0.1.3",
     "chai": "^4.3.6",
-    "change-case": "^4.1.2",
-    "eslint": "^8.18.0",
-    "eslint-config-semistandard": "^17.0.0",
-    "eslint-config-standard": "^17.1.0",
-    "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jsdoc": "^39.3.6",
     "eslint-plugin-mocha": "^10.1.0",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-vue": "^9.15.1",
-    "eslint-plugin-vuejs-accessibility": "^2.1.0",
-    "js-beautify": "^1.14.4",
-    "json5-with-undefined": "^2.1.301",
-    "just-clone": "^6.1.1",
-    "less": "^4.1.3",
-    "less-loader": "^11.0.0",
-    "npm-run-all": "^4.1.5",
-    "serve": "^13.0.4",
-    "vue": "^3.2.37",
-    "vue-tsc": "^0.38.1"
-  }
+    "vite": "^5.4.2"
+  },
+  "peerDependencies": {
+    "vue": ">=3.2"
+  },
+  "keywords": [
+    "Dialpad",
+    "Dialtone",
+    "Dialtone Vue",
+    "Vue Components",
+    "Component Combinator",
+    "Vue"
+  ],
+  "license": "MIT",
+  "sideEffects": false
 }
diff --git a/packages/combinator/release.sh b/packages/combinator/release.sh
deleted file mode 100755
index f93098d521..0000000000
--- a/packages/combinator/release.sh
+++ /dev/null
@@ -1,4 +0,0 @@
-read -p "Enter version type [patch, major, minor]: " type
-npm version $type
-npm run distribute
-npm publish
diff --git a/packages/combinator/src/App.vue b/packages/combinator/src/App.vue
index 68e97ca329..7d3e291eae 100644
--- a/packages/combinator/src/App.vue
+++ b/packages/combinator/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="dtc-preview d-d-flex d-fd-column d-ai-center d-py64 d-w100p"
+    class="dtc-preview d-d-flex d-fd-column d-ai-center d-w100p"
     :class="`d-bgc-${background}`"
   >
     <dtc-button-bar
@@ -18,7 +18,7 @@
         <div class="d-w16 d-h16 d-ba d-bc-black d-bgc-white" />
       </template>
     </dtc-button-bar>
-    <div class="d-mb64">
+    <div class="d-mb16">
       <dtc-suggestion
         :value="component.name"
         :suggestions="options"
@@ -60,15 +60,15 @@
 <script setup>
 import documentation from '@/node_modules/@dialpad/dialtone-vue/dist/component-documentation.json';
 import * as modules from '@dialpad/dialtone-vue';
-import Combinator from './components/combinator';
+import Combinator from './components/combinator.vue';
 import { computed, markRaw, onMounted, ref } from 'vue';
 import { DIALTONE_PREFIX } from '@/src/lib/constants';
 import { DtBadge } from '@dialpad/dialtone-vue';
-import DtcButtonBar from '@/src/components/tools/button_bar';
-import DtcSuggestion from '@/src/components/controls/control_suggestion';
+import DtcButtonBar from '@/src/components/tools/button_bar.vue';
+import DtcSuggestion from '@/src/components/controls/control_suggestion.vue';
 import supportedComponentData from '@/src/supported_components.json';
 import variantBank from '@/src/variants/variants';
-import { getIcons } from '@/src/lib/utils';
+// import { getIcons } from '@/src/lib/utils';
 
 const DEFAULT_COMPONENT = 'DtButton';
 
@@ -129,22 +129,21 @@ onMounted(async () => {
   });
 
   const promises = [];
-  getIcons().forEach(icon => {
-    promises.push(import(`../node_modules/@dialpad/dialtone/lib/dist/vue/icons/${icon}.vue`).then(module => {
-      return [icon, module.default];
-    }));
-  });
-  icons.value = Object.fromEntries(await Promise.all(promises));
+  // getIcons().forEach(icon => {
+  //  promises.push(import(`../node_modules/@dialpad/dialtone/lib/dist/vue/icons/${icon}.vue`).then(module => {
+  //    return [icon, module.default];
+  //  }));
+  // });
+  // icons.value = Object.fromEntries(await Promise.all(promises));
 });
 
 </script>
 
-<style lang="less" src="./assets/dialtone.less" />
 <style lang="less" src="./assets/transitions.less" />
 
 <style>
   .dtc-preview {
-    padding-left: var(--su128);
-    padding-right: var(--su128);
+    padding-left: var(--dt-space-800);
+    padding-right: var(--dt-space-800);
   }
 </style>
diff --git a/packages/combinator/src/assets/dialtone.less b/packages/combinator/src/assets/dialtone.less
index 20605441ac..4c1c04770b 100644
--- a/packages/combinator/src/assets/dialtone.less
+++ b/packages/combinator/src/assets/dialtone.less
@@ -1 +1 @@
-@import '@dialpad/dialtone/lib/build/less/dialtone';
+@import '@dialpad/dialtone-css/lib/build/less/dialtone';
diff --git a/packages/combinator/src/assets/themes/dark.less b/packages/combinator/src/assets/themes/dark.less
index 54509f7118..aa84df8d1d 100644
--- a/packages/combinator/src/assets/themes/dark.less
+++ b/packages/combinator/src/assets/themes/dark.less
@@ -3,11 +3,11 @@
 & {
   --dtc-theme-color-foreground: var(--black-025);
   --dtc-theme-color-foreground-darken: var(--black-050);
-  --dtc-theme-color-foreground-lighten: var(--white);
+  --dtc-theme-color-foreground-lighten: var(--dt-color-neutral-white);
 
-  --dtc-theme-color-background: var(--black-700);
-  --dtc-theme-color-background-darken: var(--black-800);
-  --dtc-theme-color-background-lighten: var(--black-600);
+  --dtc-theme-color-background: var(--dt-color-black-700);
+  --dtc-theme-color-background-darken: var(--dt-color-black-800);
+  --dtc-theme-color-background-lighten: var(--dt-color-black-600);
 
   color-scheme: dark;
 }
@@ -22,5 +22,5 @@
 }
 
 .dtc-theme__interactive {
-  color: var(--purple-300);
+  color: var(--dt-color-purple-300);
 }
diff --git a/packages/combinator/src/assets/themes/light.less b/packages/combinator/src/assets/themes/light.less
index cb94bf1d21..25e1b6465a 100644
--- a/packages/combinator/src/assets/themes/light.less
+++ b/packages/combinator/src/assets/themes/light.less
@@ -1,11 +1,11 @@
 & {
-  --dtc-theme-color-foreground: var(--black-800);
-  --dtc-theme-color-foreground-darken: var(--black-900);
-  --dtc-theme-color-foreground-lighten: var(--black-700);
+  --dtc-theme-color-foreground: var(--dt-color-black-800);
+  --dtc-theme-color-foreground-darken: var(--dt-color-black-900);
+  --dtc-theme-color-foreground-lighten: var(--dt-color-black-700);
 
-  --dtc-theme-color-background: var(--white);
+  --dtc-theme-color-background: var(--dt-color-neutral-white);
   --dtc-theme-color-background-darken: var(--black-050);
-  --dtc-theme-color-background-lighten: var(--white);
+  --dtc-theme-color-background-lighten: var(--dt-color-neutral-white);
 
   color-scheme: light;
 }
diff --git a/packages/combinator/src/components/code_editor/code_editor.vue b/packages/combinator/src/components/code_editor/code_editor.vue
index b5d89f9442..0e1923766b 100644
--- a/packages/combinator/src/components/code_editor/code_editor.vue
+++ b/packages/combinator/src/components/code_editor/code_editor.vue
@@ -58,8 +58,8 @@
           <template #default>
             Copy
           </template>
-          <template #icon>
-            <IconCopy />
+          <template #icon="{ iconSize }">
+            <dt-icon-copy :size="iconSize" />
           </template>
         </dt-button>
       </template>
@@ -71,10 +71,10 @@
 </template>
 
 <script setup>
-import DtcCodeEditorTagAttributes from './code_editor_tag_attributes';
-import DtcCodeEditorElement from './code_editor_element';
-import DtcCodeEditorSlot from './code_editor_slot';
-import IconCopy from 'dialtone-icons/IconContentCopy';
+import DtcCodeEditorTagAttributes from './code_editor_tag_attributes.vue';
+import DtcCodeEditorElement from './code_editor_element.vue';
+import DtcCodeEditorSlot from './code_editor_slot.vue';
+import { DtIconCopy } from '@dialpad/dialtone-icons/vue3';
 import { DtButton, DtPopover } from '@dialpad/dialtone-vue';
 
 import { OPTIONS_UPDATE_EVENT, SETTINGS_INDENT_KEY } from '@/src/lib/constants';
diff --git a/packages/combinator/src/components/code_editor/code_editor_closing_tag.vue b/packages/combinator/src/components/code_editor/code_editor_closing_tag.vue
index 7d1972f385..c47a81dc16 100644
--- a/packages/combinator/src/components/code_editor/code_editor_closing_tag.vue
+++ b/packages/combinator/src/components/code_editor/code_editor_closing_tag.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import DtcCodeEditorTag from './code_editor_tag';
+import DtcCodeEditorTag from './code_editor_tag.vue';
 
 defineProps({
   name: {
diff --git a/packages/combinator/src/components/code_editor/code_editor_element.vue b/packages/combinator/src/components/code_editor/code_editor_element.vue
index 74a3d7c387..154b14915d 100644
--- a/packages/combinator/src/components/code_editor/code_editor_element.vue
+++ b/packages/combinator/src/components/code_editor/code_editor_element.vue
@@ -19,8 +19,8 @@
 </template>
 
 <script setup>
-import DtcCodeEditorOpeningTag from './code_editor_opening_tag';
-import DtcCodeEditorClosingTag from './code_editor_closing_tag';
+import DtcCodeEditorOpeningTag from './code_editor_opening_tag.vue';
+import DtcCodeEditorClosingTag from './code_editor_closing_tag.vue';
 
 defineProps({
   tagName: {
diff --git a/packages/combinator/src/components/code_editor/code_editor_input.vue b/packages/combinator/src/components/code_editor/code_editor_input.vue
index 859c9e8c3e..3f3da9e720 100644
--- a/packages/combinator/src/components/code_editor/code_editor_input.vue
+++ b/packages/combinator/src/components/code_editor/code_editor_input.vue
@@ -21,9 +21,9 @@ export default {
 
 <style lang="less">
 .dtc-code-editor-input {
-  padding: var(--su2) var(--su4) var(--su2) var(--su4);
-  border-radius: var(--su6);
-  border: solid var(--su1);
+  padding: var(--dt-space-200) var(--dt-space-300) var(--dt-space-200) var(--dt-space-300);
+  border-radius: var(--dt-space-350);
+  border: solid var(--dt-space-100);
   border-color: var(--dtc-theme-color-background-lighten);
   background-color: var(--dtc-theme-color-background-darken);
   outline: none;
diff --git a/packages/combinator/src/components/code_editor/code_editor_opening_tag.vue b/packages/combinator/src/components/code_editor/code_editor_opening_tag.vue
index 8ae1659f1f..c3295a0964 100644
--- a/packages/combinator/src/components/code_editor/code_editor_opening_tag.vue
+++ b/packages/combinator/src/components/code_editor/code_editor_opening_tag.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import DtcCodeEditorTag from './code_editor_tag';
+import DtcCodeEditorTag from './code_editor_tag.vue';
 
 defineProps({
   name: {
diff --git a/packages/combinator/src/components/code_editor/code_editor_slot.vue b/packages/combinator/src/components/code_editor/code_editor_slot.vue
index 71fc0da127..2d7121c4cb 100644
--- a/packages/combinator/src/components/code_editor/code_editor_slot.vue
+++ b/packages/combinator/src/components/code_editor/code_editor_slot.vue
@@ -32,10 +32,10 @@
 </template>
 
 <script setup>
-import DtcCodeEditorElement from './code_editor_element';
-import DtcCodeEditorInput from './code_editor_input';
+import DtcCodeEditorElement from './code_editor_element.vue';
+import DtcCodeEditorInput from './code_editor_input.vue';
 import { DEFAULT_SLOT_NAME } from '@/src/lib/constants';
-import DtcCodeEditorIndent from '@/src/components/code_editor/code_editor_indent';
+import DtcCodeEditorIndent from '@/src/components/code_editor/code_editor_indent.vue';
 
 const props = defineProps({
   /**
diff --git a/packages/combinator/src/components/code_editor/code_editor_tag_attributes.vue b/packages/combinator/src/components/code_editor/code_editor_tag_attributes.vue
index 202b47b6bd..69fdaa448a 100644
--- a/packages/combinator/src/components/code_editor/code_editor_tag_attributes.vue
+++ b/packages/combinator/src/components/code_editor/code_editor_tag_attributes.vue
@@ -35,7 +35,7 @@
 </template>
 
 <script setup>
-import DtcCodeEditorIndent from './code_editor_indent';
+import DtcCodeEditorIndent from './code_editor_indent.vue';
 
 import { computed } from 'vue';
 import { stringifyDocValue } from '@/src/lib/parse';
diff --git a/packages/combinator/src/components/code_panel/code_panel.vue b/packages/combinator/src/components/code_panel/code_panel.vue
index 9d2ed28dc9..b6bfa57d30 100644
--- a/packages/combinator/src/components/code_panel/code_panel.vue
+++ b/packages/combinator/src/components/code_panel/code_panel.vue
@@ -39,10 +39,10 @@
 </template>
 
 <script setup>
-import DtcTabPanel from '@/src/components/tools/tab_panel';
-import DtcEventConsole from '@/src/components/event_console/event_console';
-import DtcCodeEditor from '@/src/components/code_editor/code_editor';
-import DtcOverlay from '@/src/components/tools/overlay';
+import DtcTabPanel from '@/src/components/tools/tab_panel.vue';
+import DtcEventConsole from '@/src/components/event_console/event_console.vue';
+import DtcCodeEditor from '@/src/components/code_editor/code_editor.vue';
+import DtcOverlay from '@/src/components/tools/overlay.vue';
 
 import { OPTIONS_UPDATE_EVENT } from '@/src/lib/constants';
 import { ref } from 'vue';
diff --git a/packages/combinator/src/components/combinator.test.js b/packages/combinator/src/components/combinator.test.js
index ebb7d203fe..5fd2fc4b49 100644
--- a/packages/combinator/src/components/combinator.test.js
+++ b/packages/combinator/src/components/combinator.test.js
@@ -1,4 +1,4 @@
-import DtcCombinator from './combinator';
+import DtcCombinator from './combinator.vue';
 
 import { assert } from 'chai';
 import { shallowMount } from '@vue/test-utils';
diff --git a/packages/combinator/src/components/combinator.vue b/packages/combinator/src/components/combinator.vue
index d5501b98e3..915ae03328 100644
--- a/packages/combinator/src/components/combinator.vue
+++ b/packages/combinator/src/components/combinator.vue
@@ -29,7 +29,7 @@
     >
       May have unexpected behaviour.
     </dt-notice>
-    <div class="d-d-flex d-fl-grow1 d-hmn0">
+    <div class="d-d-flex d-fl-grow1 d-hmx464">
       <div
         class="dtc-root d-d-grid d-of-hidden d-ba d-bar4 d-w100p"
         :class="{
@@ -79,11 +79,11 @@
 </template>
 
 <script setup>
-import DtcOptionBar from './option_bar/option_bar';
-import DtcRenderer from './renderer/renderer';
-import DtcCodePanel from './code_panel/code_panel';
-import DtcSettingsMenu from './settings_menu/settings_menu';
-import DtcHeader from '@/src/components/header/header';
+import DtcOptionBar from './option_bar/option_bar.vue';
+import DtcRenderer from './renderer/renderer.vue';
+import DtcCodePanel from './code_panel/code_panel.vue';
+import DtcSettingsMenu from './settings_menu/settings_menu.vue';
+import DtcHeader from '@/src/components/header/header.vue';
 import { DtNotice } from '@dialpad/dialtone-vue';
 
 import { enumerateGroups } from '@/src/lib/utils';
@@ -219,6 +219,8 @@ const info = computed(() => {
 
 /**
  * Gets the values for a given 'options' member group with the provided defaults.
+ *
+ * @param info
  */
 function getInitialValues (info) {
   const options = {};
@@ -258,6 +260,9 @@ const options = computedModel(
    * Catch errors when updating member values,
    * else vue can block the value from ever being changed,
    * keeping the value permanently in an invalid state
+   *
+   * @param e
+   * @param model
    */
   (e, model) => {
     try {
@@ -339,6 +344,10 @@ export default {
   grid-template-rows: repeat(2, 1fr);
 }
 
+.dtc-root__sidebar {
+  grid-row: span 2 / span 2;
+}
+
 .dtc-root--blueprint {
   grid-template-columns: 1fr !important;
 
@@ -359,8 +368,7 @@ export default {
   }
 
   .dtc-root__sidebar {
-    grid-row: span 2 / span 2;
-    border-left: var(--su1) solid currentColor;
+    border-left: var(--dt-space-100) solid currentColor;
   }
 }
 
@@ -379,8 +387,7 @@ export default {
 
   .dtc-root__sidebar {
     grid-column-start: 1;
-    grid-row: span 2 / span 2;
-    border-right: var(--su1) solid currentColor;
+    border-right: var(--dt-space-100) solid currentColor;
   }
 }
 
diff --git a/packages/combinator/src/components/controls/control_array.test.js b/packages/combinator/src/components/controls/control_array.test.js
index 70744c281c..79fc6746cf 100644
--- a/packages/combinator/src/components/controls/control_array.test.js
+++ b/packages/combinator/src/components/controls/control_array.test.js
@@ -1,4 +1,4 @@
-import DtcControlArray from './control_array';
+import DtcControlArray from './control_array.vue';
 
 import { assert } from 'chai';
 import { mount } from '@vue/test-utils';
diff --git a/packages/combinator/src/components/controls/control_array.vue b/packages/combinator/src/components/controls/control_array.vue
index 1e1f3641dc..49dcda0458 100644
--- a/packages/combinator/src/components/controls/control_array.vue
+++ b/packages/combinator/src/components/controls/control_array.vue
@@ -29,8 +29,8 @@
 </template>
 
 <script setup>
-import DtcControlIterable from './control_iterable';
-import DtcControlDynamic from './control_dynamic';
+import DtcControlIterable from './control_iterable.vue';
+import DtcControlDynamic from './control_dynamic.vue';
 import { VALUE_UPDATE_EVENT } from '@/src/lib/constants';
 import { serializeControlValue, deserializeControlValue } from '@/src/lib/control';
 
diff --git a/packages/combinator/src/components/controls/control_base.test.js b/packages/combinator/src/components/controls/control_base.test.js
index 19a533b31e..e728c1eca1 100644
--- a/packages/combinator/src/components/controls/control_base.test.js
+++ b/packages/combinator/src/components/controls/control_base.test.js
@@ -1,4 +1,4 @@
-import DtcControlBase from './control_base';
+import DtcControlBase from './control_base.vue';
 
 import { assert } from 'chai';
 import { mount } from '@vue/test-utils';
diff --git a/packages/combinator/src/components/controls/control_base.vue b/packages/combinator/src/components/controls/control_base.vue
index 7504b740db..f03c8f1c99 100644
--- a/packages/combinator/src/components/controls/control_base.vue
+++ b/packages/combinator/src/components/controls/control_base.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import DtcControlString from './control_string';
+import DtcControlString from './control_string.vue';
 import { VALUE_UPDATE_EVENT } from '@/src/lib/constants';
 
 defineProps({
diff --git a/packages/combinator/src/components/controls/control_boolean.test.js b/packages/combinator/src/components/controls/control_boolean.test.js
index c4960e6247..2b1b7ce623 100644
--- a/packages/combinator/src/components/controls/control_boolean.test.js
+++ b/packages/combinator/src/components/controls/control_boolean.test.js
@@ -1,4 +1,4 @@
-import DtcControlBoolean from './control_boolean';
+import DtcControlBoolean from './control_boolean.vue';
 
 import { assert } from 'chai';
 import { mount } from '@vue/test-utils';
diff --git a/packages/combinator/src/components/controls/control_dynamic.test.js b/packages/combinator/src/components/controls/control_dynamic.test.js
index 82c02ddad1..7bdcc9f9e1 100644
--- a/packages/combinator/src/components/controls/control_dynamic.test.js
+++ b/packages/combinator/src/components/controls/control_dynamic.test.js
@@ -1,6 +1,6 @@
-import DtcControlDynamic from './control_dynamic';
-import DtcControlNumber from '@/src/components/controls/control_number';
-import DtcControlString from '@/src/components/controls/control_string';
+import DtcControlDynamic from './control_dynamic.vue';
+import DtcControlNumber from '@/src/components/controls/control_number.vue';
+import DtcControlString from '@/src/components/controls/control_string.vue';
 
 import { assert } from 'chai';
 import { mount } from '@vue/test-utils';
diff --git a/packages/combinator/src/components/controls/control_dynamic.vue b/packages/combinator/src/components/controls/control_dynamic.vue
index bb3ae96631..6f5a38d7ce 100644
--- a/packages/combinator/src/components/controls/control_dynamic.vue
+++ b/packages/combinator/src/components/controls/control_dynamic.vue
@@ -26,7 +26,7 @@
 </template>
 
 <script setup>
-import DtcControlSelection from './control_selection';
+import DtcControlSelection from './control_selection.vue';
 
 import { controlMap, getControlByValue, UNSET } from '@/src/lib/control';
 import { VALUE_UPDATE_EVENT } from '@/src/lib/constants';
diff --git a/packages/combinator/src/components/controls/control_event.test.js b/packages/combinator/src/components/controls/control_event.test.js
index ebf5684809..63451e6b85 100644
--- a/packages/combinator/src/components/controls/control_event.test.js
+++ b/packages/combinator/src/components/controls/control_event.test.js
@@ -1,4 +1,4 @@
-import DtcControlEvent from './control_event';
+import DtcControlEvent from './control_event.vue';
 
 import { assert } from 'chai';
 import { mount } from '@vue/test-utils';
diff --git a/packages/combinator/src/components/controls/control_iterable.test.js b/packages/combinator/src/components/controls/control_iterable.test.js
index 6799c01ac9..7956802463 100644
--- a/packages/combinator/src/components/controls/control_iterable.test.js
+++ b/packages/combinator/src/components/controls/control_iterable.test.js
@@ -1,4 +1,4 @@
-import DtcControlIterable from './control_iterable';
+import DtcControlIterable from './control_iterable.vue';
 
 import { assert } from 'chai';
 import { mount } from '@vue/test-utils';
diff --git a/packages/combinator/src/components/controls/control_iterable.vue b/packages/combinator/src/components/controls/control_iterable.vue
index 8c3242ffa1..9ff6c4ec7b 100644
--- a/packages/combinator/src/components/controls/control_iterable.vue
+++ b/packages/combinator/src/components/controls/control_iterable.vue
@@ -33,7 +33,7 @@
               :disabled="disabled"
               @click="() => removeItem(index)"
             >
-              <IconRemove />
+              <dt-icon-close />
             </dt-button>
           </div>
         </div>
@@ -45,7 +45,7 @@
           :disabled="disabled"
           @click="addItem"
         >
-          <icon-add />
+          <dt-icon-plus />
         </dt-button>
       </div>
     </div>
@@ -56,8 +56,7 @@
 </template>
 
 <script setup>
-import IconAdd from 'dialtone-icons/IconAddCircleOutline';
-import IconRemove from 'dialtone-icons/IconRemove';
+import { DtIconPlus, DtIconClose } from '@dialpad/dialtone-icons/vue3'
 import { DtButton, DtListItem } from '@dialpad/dialtone-vue';
 import { DEFAULT_PREFIX, VALUE_UPDATE_EVENT } from '@/src/lib/constants';
 import { idMap } from '@/src/lib/utils_vue';
diff --git a/packages/combinator/src/components/controls/control_nullish.test.js b/packages/combinator/src/components/controls/control_nullish.test.js
index 41411581de..edb2401e49 100644
--- a/packages/combinator/src/components/controls/control_nullish.test.js
+++ b/packages/combinator/src/components/controls/control_nullish.test.js
@@ -1,4 +1,4 @@
-import DtcControlNullish from './control_nullish';
+import DtcControlNullish from './control_nullish.vue';
 
 import { assert } from 'chai';
 import { mount } from '@vue/test-utils';
diff --git a/packages/combinator/src/components/controls/control_nullish.vue b/packages/combinator/src/components/controls/control_nullish.vue
index bbbb945605..da9854c22b 100644
--- a/packages/combinator/src/components/controls/control_nullish.vue
+++ b/packages/combinator/src/components/controls/control_nullish.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script setup>
-import DtcControlSelection from './control_selection';
+import DtcControlSelection from './control_selection.vue';
 import { computed } from 'vue';
 import { VALUE_UPDATE_EVENT } from '@/src/lib/constants';
 import { UNSET } from '@/src/lib/control';
diff --git a/packages/combinator/src/components/controls/control_number.test.js b/packages/combinator/src/components/controls/control_number.test.js
index b53c987d55..674ab3af42 100644
--- a/packages/combinator/src/components/controls/control_number.test.js
+++ b/packages/combinator/src/components/controls/control_number.test.js
@@ -1,4 +1,4 @@
-import DtcControlNumber from './control_number';
+import DtcControlNumber from './control_number.vue';
 
 import { assert } from 'chai';
 import { mount } from '@vue/test-utils';
diff --git a/packages/combinator/src/components/controls/control_object.test.js b/packages/combinator/src/components/controls/control_object.test.js
index 10e934d620..32ebdb7350 100644
--- a/packages/combinator/src/components/controls/control_object.test.js
+++ b/packages/combinator/src/components/controls/control_object.test.js
@@ -1,4 +1,4 @@
-import DtcControlObject from './control_object';
+import DtcControlObject from './control_object.vue';
 
 import { assert } from 'chai';
 import { mount } from '@vue/test-utils';
diff --git a/packages/combinator/src/components/controls/control_object.vue b/packages/combinator/src/components/controls/control_object.vue
index 25f92de2ea..f19b4de872 100644
--- a/packages/combinator/src/components/controls/control_object.vue
+++ b/packages/combinator/src/components/controls/control_object.vue
@@ -45,9 +45,9 @@
 </template>
 
 <script setup>
-import DtcControlString from './control_string';
-import DtcControlIterable from './control_iterable';
-import DtcControlDynamic from './control_dynamic';
+import DtcControlString from './control_string.vue';
+import DtcControlIterable from './control_iterable.vue';
+import DtcControlDynamic from './control_dynamic.vue';
 import { VALUE_UPDATE_EVENT } from '@/src/lib/constants';
 import { computed } from 'vue';
 import { serializeControlValue, deserializeControlValue } from '@/src/lib/control';
diff --git a/packages/combinator/src/components/controls/control_selection.test.js b/packages/combinator/src/components/controls/control_selection.test.js
index 485b251a87..919cea36aa 100644
--- a/packages/combinator/src/components/controls/control_selection.test.js
+++ b/packages/combinator/src/components/controls/control_selection.test.js
@@ -1,4 +1,4 @@
-import DtcControlSelection from './control_selection';
+import DtcControlSelection from './control_selection.vue';
 
 import { assert } from 'chai';
 import { mount } from '@vue/test-utils';
diff --git a/packages/combinator/src/components/controls/control_slot.test.js b/packages/combinator/src/components/controls/control_slot.test.js
index 6c516d628a..f3ea865fb6 100644
--- a/packages/combinator/src/components/controls/control_slot.test.js
+++ b/packages/combinator/src/components/controls/control_slot.test.js
@@ -1,4 +1,4 @@
-import DtcControlSlot from './control_slot';
+import DtcControlSlot from './control_slot.vue';
 
 import { assert } from 'chai';
 import { mount } from '@vue/test-utils';
diff --git a/packages/combinator/src/components/controls/control_string.test.js b/packages/combinator/src/components/controls/control_string.test.js
index 6cd69dfc6e..9150fd83e2 100644
--- a/packages/combinator/src/components/controls/control_string.test.js
+++ b/packages/combinator/src/components/controls/control_string.test.js
@@ -1,4 +1,4 @@
-import DtcControlString from './control_string';
+import DtcControlString from './control_string.vue';
 
 import { assert } from 'chai';
 import { mount } from '@vue/test-utils';
diff --git a/packages/combinator/src/components/controls/control_suggestion.vue b/packages/combinator/src/components/controls/control_suggestion.vue
index 92b5f28229..32ebfef9bc 100644
--- a/packages/combinator/src/components/controls/control_suggestion.vue
+++ b/packages/combinator/src/components/controls/control_suggestion.vue
@@ -18,9 +18,11 @@
           <template #default>
             <slot />
           </template>
-          <template #icon>
-            <icon-collapse v-if="open" />
-            <icon-expand v-else />
+          <template #icon="{ iconSize }">
+            <component
+              :is="open ? DtIconChevronDown : DtIconChevronRight"
+              :size="iconSize"
+            />
           </template>
         </dtc-control-string>
       </template>
@@ -50,13 +52,12 @@
 </template>
 
 <script setup>
-import DtcControlString from './control_string';
-import IconExpand from 'dialtone-icons/IconArrowKeyboardDown';
-import IconCollapse from 'dialtone-icons/IconArrowKeyboardUp';
+import DtcControlString from './control_string.vue';
 import { DtRecipeComboboxWithPopover, DtListItem } from '@dialpad/dialtone-vue';
 
 import { VALUE_UPDATE_EVENT } from '@/src/lib/constants';
 import { computed, ref } from 'vue';
+import { DtIconChevronDown, DtIconChevronRight } from '@dialpad/dialtone-icons/vue3';
 
 const WARNING_MESSAGE = 'Unexpected value';
 
diff --git a/packages/combinator/src/components/event_console/event_console.test.js b/packages/combinator/src/components/event_console/event_console.test.js
index c8479a0724..0024384b1b 100644
--- a/packages/combinator/src/components/event_console/event_console.test.js
+++ b/packages/combinator/src/components/event_console/event_console.test.js
@@ -1,4 +1,4 @@
-import DtcEventConsole from './event_console';
+import DtcEventConsole from './event_console.vue';
 
 import { assert } from 'chai';
 import { mount } from '@vue/test-utils';
diff --git a/packages/combinator/src/components/event_console/event_console.vue b/packages/combinator/src/components/event_console/event_console.vue
index 07a66df89b..a71776c179 100644
--- a/packages/combinator/src/components/event_console/event_console.vue
+++ b/packages/combinator/src/components/event_console/event_console.vue
@@ -15,7 +15,7 @@
         >
           <template #separator>
             <span>
-              <IconArrowForward
+              <dt-icon-arrow-right
                 v-if="entry.value !== undefined"
                 class="d-fs10 d-px6 d-ps-relative d-t2"
               />
@@ -28,10 +28,10 @@
 </template>
 
 <script setup>
-import IconArrowForward from 'dialtone-icons/IconArrowForward';
-import DtcEventConsolePair from '@/src/components/event_console/event_console_pair';
+import DtcEventConsolePair from '@/src/components/event_console/event_console_pair.vue';
 
 import { computed, ref } from 'vue';
+import { DtIconArrowRight } from '@dialpad/dialtone-icons/vue3';
 
 defineProps({
   /**
diff --git a/packages/combinator/src/components/event_console/event_console_array.vue b/packages/combinator/src/components/event_console/event_console_array.vue
index 0717ee2448..257ae1f97a 100644
--- a/packages/combinator/src/components/event_console/event_console_array.vue
+++ b/packages/combinator/src/components/event_console/event_console_array.vue
@@ -23,8 +23,8 @@
 </template>
 
 <script setup>
-import DtcEventConsolePair from '@/src/components/event_console/event_console_pair';
-import DtcEventConsoleLazyLoad from '@/src/components/event_console/event_console_lazy_load';
+import DtcEventConsolePair from '@/src/components/event_console/event_console_pair.vue';
+import DtcEventConsoleLazyLoad from '@/src/components/event_console/event_console_lazy_load.vue';
 
 defineProps({
   value: {
diff --git a/packages/combinator/src/components/event_console/event_console_element.vue b/packages/combinator/src/components/event_console/event_console_element.vue
index c4270d8d4a..47cef44da1 100644
--- a/packages/combinator/src/components/event_console/event_console_element.vue
+++ b/packages/combinator/src/components/event_console/event_console_element.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script setup>
-import DtcEventConsoleLazyLoad from '@/src/components/event_console/event_console_lazy_load';
+import DtcEventConsoleLazyLoad from '@/src/components/event_console/event_console_lazy_load.vue';
 import beautify from 'js-beautify';
 import { computed } from 'vue';
 
diff --git a/packages/combinator/src/components/event_console/event_console_lazy_load.vue b/packages/combinator/src/components/event_console/event_console_lazy_load.vue
index 39df37fefa..cc359c5f70 100644
--- a/packages/combinator/src/components/event_console/event_console_lazy_load.vue
+++ b/packages/combinator/src/components/event_console/event_console_lazy_load.vue
@@ -8,8 +8,10 @@
         importance="clear"
         @click="toggle"
       >
-        <template #icon>
-          <IconExpand />
+        <template #icon="{ iconSize }">
+          <dt-icon-chevron-right
+            :size="iconSize"
+          />
         </template>
       </dt-button>
       <slot name="suffix" />
@@ -21,8 +23,10 @@
         importance="clear"
         @click="toggle"
       >
-        <template #icon>
-          <IconCollapse />
+        <template #icon="{ iconSize }">
+          <dt-icon-chevron-down
+            :size="iconSize"
+          />
         </template>
       </dt-button>
     </span>
@@ -33,10 +37,8 @@
 </template>
 
 <script setup>
-import IconExpand from 'dialtone-icons/IconMenuHorizontal';
-import IconCollapse from 'dialtone-icons/IconArrowAccordion';
-
 import { DtButton, DtLazyShow } from '@dialpad/dialtone-vue';
+import { DtIconChevronDown, DtIconChevronRight } from '@dialpad/dialtone-icons/vue3';
 
 import { ref } from 'vue';
 
diff --git a/packages/combinator/src/components/event_console/event_console_object.vue b/packages/combinator/src/components/event_console/event_console_object.vue
index b4da43523d..12109ffabb 100644
--- a/packages/combinator/src/components/event_console/event_console_object.vue
+++ b/packages/combinator/src/components/event_console/event_console_object.vue
@@ -25,8 +25,8 @@
 <script setup>
 import { flatten } from '@/src/lib/utils';
 import { computed } from 'vue';
-import DtcEventConsolePair from '@/src/components/event_console/event_console_pair';
-import DtcEventConsoleLazyLoad from '@/src/components/event_console/event_console_lazy_load';
+import DtcEventConsolePair from '@/src/components/event_console/event_console_pair.vue';
+import DtcEventConsoleLazyLoad from '@/src/components/event_console/event_console_lazy_load.vue';
 
 const props = defineProps({
   value: {
diff --git a/packages/combinator/src/components/event_console/event_console_pair.vue b/packages/combinator/src/components/event_console/event_console_pair.vue
index da53c6230e..5a5247f7a1 100644
--- a/packages/combinator/src/components/event_console/event_console_pair.vue
+++ b/packages/combinator/src/components/event_console/event_console_pair.vue
@@ -14,12 +14,12 @@
 </template>
 
 <script setup>
-import DtcEventConsoleElement from './event_console_element';
-import DtcEventConsoleFunction from './event_console_function';
-import DtcEventConsoleArray from './event_console_array';
-import DtcEventConsoleObject from './event_console_object';
-import DtcEventConsoleString from './event_console_string';
-import DtcEventConsoleValue from './event_console_value';
+import DtcEventConsoleElement from './event_console_element.vue';
+import DtcEventConsoleFunction from './event_console_function.vue';
+import DtcEventConsoleArray from './event_console_array.vue';
+import DtcEventConsoleObject from './event_console_object.vue';
+import DtcEventConsoleString from './event_console_string.vue';
+import DtcEventConsoleValue from './event_console_value.vue';
 
 import { computed } from 'vue';
 
diff --git a/packages/combinator/src/components/option_bar/option_bar.vue b/packages/combinator/src/components/option_bar/option_bar.vue
index 9340df6f15..77af517d2b 100644
--- a/packages/combinator/src/components/option_bar/option_bar.vue
+++ b/packages/combinator/src/components/option_bar/option_bar.vue
@@ -57,8 +57,8 @@
 </template>
 
 <script setup>
-import DtcOptionBarMemberGroup from './option_bar_member_group';
-import DtcSection from '../tools/section';
+import DtcOptionBarMemberGroup from './option_bar_member_group.vue';
+import DtcSection from '../tools/section.vue';
 
 import { OPTIONS_UPDATE_EVENT } from '@/src/lib/constants';
 import { getControlByMemberType, getControlByValue } from '@/src/lib/control';
diff --git a/packages/combinator/src/components/option_bar/option_bar_control.test.js b/packages/combinator/src/components/option_bar/option_bar_control.test.js
index 5a97e3d516..ca29ccfa3a 100644
--- a/packages/combinator/src/components/option_bar/option_bar_control.test.js
+++ b/packages/combinator/src/components/option_bar/option_bar_control.test.js
@@ -1,4 +1,4 @@
-import DtcOptionBarControl from './option_bar_control';
+import DtcOptionBarControl from './option_bar_control.vue';
 
 import { assert } from 'chai';
 import { mount } from '@vue/test-utils';
diff --git a/packages/combinator/src/components/option_bar/option_bar_control.vue b/packages/combinator/src/components/option_bar/option_bar_control.vue
index c6468d1cbb..30aa048ae1 100644
--- a/packages/combinator/src/components/option_bar/option_bar_control.vue
+++ b/packages/combinator/src/components/option_bar/option_bar_control.vue
@@ -12,7 +12,7 @@
         >
           {{ label }}
         </span>
-        <icon-lock
+        <dt-icon-lock
           v-if="locked"
           class="d-pr4 d-fs10 d-ps-relative d-t1"
         />
@@ -46,7 +46,7 @@
 </template>
 
 <script setup>
-import IconLock from 'dialtone-icons/IconLock';
+import { DtIconLock } from '@dialpad/dialtone-icons/vue3'
 import { DtBadge } from '@dialpad/dialtone-vue';
 import { VALUE_UPDATE_EVENT } from '@/src/lib/constants';
 import { computed } from 'vue';
diff --git a/packages/combinator/src/components/option_bar/option_bar_member_group.test.js b/packages/combinator/src/components/option_bar/option_bar_member_group.test.js
index 724cfe3edf..f7c32cd70f 100644
--- a/packages/combinator/src/components/option_bar/option_bar_member_group.test.js
+++ b/packages/combinator/src/components/option_bar/option_bar_member_group.test.js
@@ -1,4 +1,4 @@
-import DtcOptionBarMemberGroup from './option_bar_member_group';
+import DtcOptionBarMemberGroup from './option_bar_member_group.vue';
 
 import { assert } from 'chai';
 import { mount } from '@vue/test-utils';
diff --git a/packages/combinator/src/components/option_bar/option_bar_member_group.vue b/packages/combinator/src/components/option_bar/option_bar_member_group.vue
index acb866bb81..f04714e737 100644
--- a/packages/combinator/src/components/option_bar/option_bar_member_group.vue
+++ b/packages/combinator/src/components/option_bar/option_bar_member_group.vue
@@ -25,8 +25,8 @@
             :disabled="member.lockControl"
             @click="() => resetMember(key)"
           >
-            <template #icon>
-              <icon-reset />
+            <template #icon="{ iconSize }">
+              <dt-icon-undo-2 :size="iconSize" />
             </template>
           </dt-button>
         </div>
@@ -54,9 +54,9 @@
 </template>
 
 <script setup>
-import DtcOptionBarControlSelector from '@/src/components/option_bar/option_bar_control_selector';
-import DtcOptionBarControl from './option_bar_control';
-import IconReset from 'dialtone-icons/IconRefresh';
+import DtcOptionBarControlSelector from '@/src/components/option_bar/option_bar_control_selector.vue';
+import DtcOptionBarControl from './option_bar_control.vue';
+import { DtIconUndo2 } from '@dialpad/dialtone-icons/vue3';
 import { DtButton } from '@dialpad/dialtone-vue';
 import { MEMBER_UPDATE_EVENT } from '@/src/lib/constants';
 import { computed, reactive } from 'vue';
@@ -117,6 +117,7 @@ const memberMap = computed(() => {
 /**
  * Used to match members in the 'member map' to their respective values.
  *
+ * @param member
  * @returns {*}
  */
 function getMemberKey (member) {
@@ -126,6 +127,7 @@ function getMemberKey (member) {
 /**
  * Determines if the member has a default value.
  *
+ * @param member
  * @returns {boolean} If the member has default value.
  */
 function hasDefaultValue (member) {
@@ -136,6 +138,7 @@ function hasDefaultValue (member) {
  * Attempts to get the control data for a given control.
  * If the control does not exist, gets the 'base' control data.
  *
+ * @param member
  * @returns {object} The control data from the 'control map'.
  */
 function getControlData (member) {
@@ -153,6 +156,7 @@ function isVModel (member) {
  * Wraps a member with an object containing additional data about the member.
  * This is used by the 'member map' to hold data about controls.
  *
+ * @param member
  * @returns {object}
  */
 function extendMember (member) {
@@ -170,6 +174,8 @@ function extendMember (member) {
 
 /**
  * Resets the control to default value.
+ *
+ * @param key
  */
 function resetMember (key) {
   const member = memberMap.value[key];
diff --git a/packages/combinator/src/components/renderer/renderer.vue b/packages/combinator/src/components/renderer/renderer.vue
index 745b558019..ff46371298 100644
--- a/packages/combinator/src/components/renderer/renderer.vue
+++ b/packages/combinator/src/components/renderer/renderer.vue
@@ -45,10 +45,10 @@
 <script setup>
 import { computed } from 'vue';
 import { SETTINGS_UPDATE_EVENT } from '@/src/lib/constants';
-import DtcRendererMenu from '@/src/components/renderer/renderer_menu';
-import DtcOverlay from '@/src/components/tools/overlay';
-import DtcRendererTarget from '@/src/components/renderer/renderer_target';
-import DtcNode from '@/src/components/tools/node';
+import DtcRendererMenu from '@/src/components/renderer/renderer_menu.vue';
+import DtcOverlay from '@/src/components/tools/overlay.vue';
+import DtcRendererTarget from '@/src/components/renderer/renderer_target.vue';
+import DtcNode from '@/src/components/tools/node.vue';
 
 const props = defineProps({
   /**
diff --git a/packages/combinator/src/components/renderer/renderer_menu.vue b/packages/combinator/src/components/renderer/renderer_menu.vue
index 04668f3759..83f798c4dd 100644
--- a/packages/combinator/src/components/renderer/renderer_menu.vue
+++ b/packages/combinator/src/components/renderer/renderer_menu.vue
@@ -19,8 +19,8 @@
         v-bind="attrs"
         @click="onOpen"
       >
-        <template #icon>
-          <icon-menu />
+        <template #icon="{ iconSize }">
+          <dt-icon-menu :size="iconSize" />
         </template>
       </dt-button>
     </template>
@@ -49,10 +49,10 @@
           @click="e => updateSettings('positioning', e)"
         >
           <template #native>
-            <icon-left />
+            <dt-icon-arrow-left />
           </template>
           <template #center>
-            <icon-center />
+            <dt-icon-align-center />
           </template>
         </dtc-button-bar>
       </div>
@@ -61,10 +61,10 @@
 </template>
 
 <script setup>
-import IconLeft from 'dialtone-icons/IconNotes';
-import IconCenter from 'dialtone-icons/IconMenu';
-import IconMenu from 'dialtone-icons/IconMenuVertical';
-import DtcButtonBar from '../tools/button_bar';
+import { DtIconArrowLeft } from '@dialpad/dialtone-icons/vue3'
+import { DtIconAlignCenter } from '@dialpad/dialtone-icons/vue3'
+import { DtIconMenu } from '@dialpad/dialtone-icons/vue3'
+import DtcButtonBar from '../tools/button_bar.vue';
 import { DtButton, DtPopover } from '@dialpad/dialtone-vue';
 import { SETTINGS_UPDATE_EVENT } from '@/src/lib/constants';
 import { ref } from 'vue';
diff --git a/packages/combinator/src/components/settings_menu/settings_menu.vue b/packages/combinator/src/components/settings_menu/settings_menu.vue
index c603f2eca6..62b4e54fa9 100644
--- a/packages/combinator/src/components/settings_menu/settings_menu.vue
+++ b/packages/combinator/src/components/settings_menu/settings_menu.vue
@@ -13,7 +13,7 @@
         v-bind="attrs"
       >
         <template #icon>
-          <IconSettings />
+          <dt-icon-settings />
         </template>
       </dt-button>
     </template>
@@ -87,7 +87,7 @@
 </template>
 
 <script setup>
-import IconSettings from 'dialtone-icons/IconSettings';
+import { DtIconSettings } from '@dialpad/dialtone-icons/vue3'
 
 import {
   DtButton,
diff --git a/packages/combinator/src/components/tools/section.vue b/packages/combinator/src/components/tools/section.vue
index 6c6036d27f..bf03cb4f77 100644
--- a/packages/combinator/src/components/tools/section.vue
+++ b/packages/combinator/src/components/tools/section.vue
@@ -11,9 +11,11 @@
           {{ heading }}
         </h2>
       </template>
-      <template #right>
-        <icon-collapse v-if="show" />
-        <icon-expand v-else />
+      <template #right="{ iconSize }">
+        <component
+          :is="show ? DtIconChevronDown : DtIconChevronRight"
+          :size="iconSize"
+        />
       </template>
     </dt-list-item>
     <div
@@ -26,9 +28,8 @@
 </template>
 
 <script setup>
-import IconExpand from 'dialtone-icons/IconArrowKeyboardDown';
-import IconCollapse from 'dialtone-icons/IconArrowKeyboardUp';
 import { DtListItem } from '@dialpad/dialtone-vue';
+import { DtIconChevronDown, DtIconChevronRight } from '@dialpad/dialtone-icons/vue3';
 
 import { ref } from 'vue';
 
diff --git a/packages/combinator/src/lib/control.js b/packages/combinator/src/lib/control.js
index 67f9b9154a..c2261c5117 100644
--- a/packages/combinator/src/lib/control.js
+++ b/packages/combinator/src/lib/control.js
@@ -2,17 +2,17 @@
  * See /.github/documentation/internal/CONTROLS.MD
  * For in-depth information about controls.
  */
-import DtcControlEvent from '@/src/components/controls/control_event';
-import DtcControlSlot from '@/src/components/controls/control_slot';
-import DtcControlDynamic from '@/src/components/controls/control_dynamic';
-import DtcControlObject from '@/src/components/controls/control_object';
-import DtcControlArray from '@/src/components/controls/control_array';
-import DtcControlBoolean from '@/src/components/controls/control_boolean';
-import DtcControlNumber from '@/src/components/controls/control_number';
-import DtcControlSelection from '@/src/components/controls/control_selection';
-import DtcControlString from '@/src/components/controls/control_string';
-import DtcControlNullish from '@/src/components/controls/control_nullish';
-import DtcControlBase from '@/src/components/controls/control_base';
+import DtcControlEvent from '@/src/components/controls/control_event.vue';
+import DtcControlSlot from '@/src/components/controls/control_slot.vue';
+import DtcControlDynamic from '@/src/components/controls/control_dynamic.vue';
+import DtcControlObject from '@/src/components/controls/control_object.vue';
+import DtcControlArray from '@/src/components/controls/control_array.vue';
+import DtcControlBoolean from '@/src/components/controls/control_boolean.vue';
+import DtcControlNumber from '@/src/components/controls/control_number.vue';
+import DtcControlSelection from '@/src/components/controls/control_selection.vue';
+import DtcControlString from '@/src/components/controls/control_string.vue';
+import DtcControlNullish from '@/src/components/controls/control_nullish.vue';
+import DtcControlBase from '@/src/components/controls/control_base.vue';
 
 import { typeOfMemberValue } from '@/src/lib/utils';
 
diff --git a/packages/combinator/src/lib/utils.js b/packages/combinator/src/lib/utils.js
index ceaec37560..932e3ef823 100644
--- a/packages/combinator/src/lib/utils.js
+++ b/packages/combinator/src/lib/utils.js
@@ -88,15 +88,15 @@ export function enumerateGroups (handler, groups) {
  *
  * @returns {Array} icon components.
  */
-export function getIcons () {
-  const requireContext = require.context(
-    '../../node_modules/@dialpad/dialtone/lib/dist/vue/icons',
-    false,
-    /[A-Z]\w+\.(vue|js)$/,
-  );
-
-  return getComponentFilesFromDir(requireContext).map(item => item.componentName);
-}
+// export function getIcons () {
+//  const requireContext = require.context(
+//    '../../node_modules/@dialpad/dialtone/lib/dist/vue/icons',
+//    false,
+//    /[A-Z]\w+\.(vue|js)$/,
+//  );
+//
+//  return getComponentFilesFromDir(requireContext).map(item => item.componentName);
+// }
 
 /**
  * Extracts filename and component name from all files in a directory.
diff --git a/packages/combinator/src/main.js b/packages/combinator/src/main.js
index db2b08ae4b..93101cdbf3 100644
--- a/packages/combinator/src/main.js
+++ b/packages/combinator/src/main.js
@@ -1,4 +1,12 @@
 import { createApp } from 'vue';
-import App from './App';
+import App from './App.vue';
+
+import '@dialpad/dialtone-css/lib/dist/dialtone.css';
+import '@dialpad/dialtone-vue/css';
+
+import { setTheme } from '@dialpad/dialtone-tokens/themes/config';
+import DpLight from '@dialpad/dialtone-tokens/themes/dp-light.js';
+
+setTheme(DpLight);
 
 createApp(App).mount('#app');
diff --git a/packages/combinator/src/variants/variants.js b/packages/combinator/src/variants/variants.js
index 4b5fb11580..3c7148ad09 100644
--- a/packages/combinator/src/variants/variants.js
+++ b/packages/combinator/src/variants/variants.js
@@ -1,15 +1,15 @@
-import DtBadge from './variants_badge';
-import DtButton from './variants_button';
-import DtBreadcrumbs from './variants_breadcrumbs';
-import DtCheckbox from './variants_checkbox';
-import DtChip from './variants_chip';
-import DtInput from './variants_input';
-import DtLink from './variants_link';
-import DtNotice from './variants_notice';
-import DtRadio from './variants_radio';
-import DtSelectMenu from './variants_select_menu';
-import DtToast from './variants_toast';
-import DtToggle from './variants_toggle';
+import DtBadge from './variants_badge.js';
+import DtButton from './variants_button.js';
+import DtBreadcrumbs from './variants_breadcrumbs.js';
+import DtCheckbox from './variants_checkbox.js';
+import DtChip from './variants_chip.js';
+import DtInput from './variants_input.js';
+import DtLink from './variants_link.js';
+import DtNotice from './variants_notice.js';
+import DtRadio from './variants_radio.js';
+import DtSelectMenu from './variants_select_menu.js';
+import DtToast from './variants_toast.js';
+import DtToggle from './variants_toggle.js';
 
 export default function variants () {
   return {
diff --git a/packages/combinator/vite.config.js b/packages/combinator/vite.config.js
new file mode 100644
index 0000000000..e0019aa5e8
--- /dev/null
+++ b/packages/combinator/vite.config.js
@@ -0,0 +1,39 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import { fileURLToPath } from 'url';
+
+export default defineConfig({
+  build: {
+    sourcemap: true,
+    minify: false,
+    rollupOptions: {
+      external: [
+        /^@dialpad/,
+        'change-case',
+        'js-beautify',
+        'json5-with-undefined',
+        'just-clone',
+        'vue',
+      ],
+      output: {
+        preserveModules: true,
+        minifyInternalExports: false,
+        globals: {
+          vue: 'Vue',
+        },
+      },
+    },
+    lib: {
+      entry: {
+        'dialtone-combinator': './index.js',
+      },
+      formats: ['es'],
+    },
+  },
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('.', import.meta.url)),
+    },
+  },
+});
diff --git a/packages/combinator/vue.config.js b/packages/combinator/vue.config.js
deleted file mode 100644
index 5ad1cb1897..0000000000
--- a/packages/combinator/vue.config.js
+++ /dev/null
@@ -1,18 +0,0 @@
-const path = require('path');
-
-module.exports = {
-  publicPath: './',
-  lintOnSave: false,
-  css: {
-    extract: false,
-  },
-  configureWebpack: {
-    resolve: {
-      alias: {
-        vue$: 'vue/dist/vue.esm-browser.js',
-        '@': path.resolve(__dirname, '.'),
-        'dialtone-icons': path.resolve(__dirname, 'node_modules/@dialpad/dialtone/lib/dist/vue/icons'),
-      },
-    },
-  },
-};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 58105f6e7a..7aa2cc0eed 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -350,103 +350,53 @@ importers:
         version: 5.10.0(encoding@0.1.13)
 
   packages/combinator:
-    devDependencies:
-      '@dialpad/dialtone':
-        specifier: 6.35.0
-        version: 6.35.0(react-dom@16.14.0(react@16.14.0))(react@16.14.0)
+    dependencies:
+      '@dialpad/dialtone-css':
+        specifier: workspace:*
+        version: link:../dialtone-css
+      '@dialpad/dialtone-icons':
+        specifier: workspace:*
+        version: link:../dialtone-icons
       '@dialpad/dialtone-vue':
-        specifier: 3.13.0
-        version: 3.13.0(@dialpad/dialtone@6.35.0(react-dom@16.14.0(react@16.14.0))(react@16.14.0))(vue@3.4.15(typescript@5.4.2))
-      '@types/node':
-        specifier: ^16.11.41
-        version: 16.18.83
-      '@typescript-eslint/eslint-plugin':
-        specifier: ^5.30.0
-        version: 5.62.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0)(typescript@5.4.2)
-      '@typescript-eslint/parser':
-        specifier: ^7.0.1
-        version: 7.0.1(eslint@8.56.0)(typescript@5.4.2)
+        specifier: workspace:^3
+        version: link:../dialtone-vue3
+      change-case:
+        specifier: ^4.1.2
+        version: 4.1.2
+      js-beautify:
+        specifier: ^1.14.4
+        version: 1.14.11
+      json5-with-undefined:
+        specifier: ^2.1.301
+        version: 2.1.301
+      just-clone:
+        specifier: ^6.1.1
+        version: 6.2.0
+      vue:
+        specifier: '>=3.2'
+        version: 3.4.15(typescript@5.4.2)
+    devDependencies:
       '@vitejs/plugin-vue':
-        specifier: ^2.3.3
-        version: 2.3.4(vite@5.4.2(@types/node@16.18.83)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@3.4.15(typescript@5.4.2))
-      '@vitejs/plugin-vue-jsx':
-        specifier: ^1.3.10
-        version: 1.3.10
+        specifier: ^5.1.3
+        version: 5.1.3(vite@5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@3.4.15(typescript@5.4.2))
       '@vue/cli-plugin-unit-mocha':
         specifier: ^5.0.8
-        version: 5.0.8(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(less-loader@11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96)))(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))(encoding@0.1.13)(webpack@5.89.0(@swc/core@1.3.96))
-      '@vue/cli-service':
-        specifier: ^5.0.6
-        version: 5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(less-loader@11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96)))(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3)
+        version: 5.0.8(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))(encoding@0.1.13)(webpack@5.89.0(@swc/core@1.3.96))
       '@vue/test-utils':
         specifier: ^2.0.2
         version: 2.4.2(@vue/server-renderer@3.4.15(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))
-      '@vue/tsconfig':
-        specifier: ^0.1.3
-        version: 0.1.3(@types/node@16.18.83)
       chai:
         specifier: ^4.3.6
         version: 4.3.10
-      change-case:
-        specifier: ^4.1.2
-        version: 4.1.2
-      eslint:
-        specifier: ^8.18.0
-        version: 8.56.0
-      eslint-config-semistandard:
-        specifier: ^17.0.0
-        version: 17.0.0(eslint-config-standard@17.1.0(eslint-plugin-import@2.29.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0))(eslint-plugin-n@15.7.0(eslint@8.56.0))(eslint-plugin-promise@6.1.1(eslint@8.56.0))(eslint@8.56.0))(eslint-plugin-import@2.29.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0))(eslint-plugin-n@15.7.0(eslint@8.56.0))(eslint-plugin-promise@6.1.1(eslint@8.56.0))(eslint@8.56.0)
-      eslint-config-standard:
-        specifier: ^17.1.0
-        version: 17.1.0(eslint-plugin-import@2.29.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0))(eslint-plugin-n@15.7.0(eslint@8.56.0))(eslint-plugin-promise@6.1.1(eslint@8.56.0))(eslint@8.56.0)
-      eslint-plugin-import:
-        specifier: ^2.27.5
-        version: 2.29.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0)
       eslint-plugin-jsdoc:
         specifier: ^39.3.6
         version: 39.9.1(eslint@8.56.0)
       eslint-plugin-mocha:
         specifier: ^10.1.0
         version: 10.5.0(eslint@8.56.0)
-      eslint-plugin-node:
-        specifier: ^11.1.0
-        version: 11.1.0(eslint@8.56.0)
-      eslint-plugin-promise:
-        specifier: ^6.1.1
-        version: 6.1.1(eslint@8.56.0)
-      eslint-plugin-vue:
-        specifier: ^9.15.1
-        version: 9.18.1(eslint@8.56.0)
-      eslint-plugin-vuejs-accessibility:
-        specifier: ^2.1.0
-        version: 2.2.0(eslint@8.56.0)
-      js-beautify:
-        specifier: ^1.14.4
-        version: 1.14.11
-      json5-with-undefined:
-        specifier: ^2.1.301
-        version: 2.1.301
-      just-clone:
-        specifier: ^6.1.1
-        version: 6.2.0
-      less:
-        specifier: ^4.1.3
-        version: 4.2.0
-      less-loader:
-        specifier: ^11.0.0
-        version: 11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96))
-      npm-run-all:
-        specifier: ^4.1.5
-        version: 4.1.5
-      serve:
-        specifier: ^13.0.4
-        version: 13.0.4
-      vue:
-        specifier: ^3.2.37
-        version: 3.4.15(typescript@5.4.2)
-      vue-tsc:
-        specifier: ^0.38.1
-        version: 0.38.9(typescript@5.4.2)
+      vite:
+        specifier: ^5.4.2
+        version: 5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
 
   packages/dialtone-css:
     dependencies:
@@ -474,13 +424,13 @@ importers:
         version: 5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3)
       autoprefixer:
         specifier: ^10.4.14
-        version: 10.4.16(postcss@8.4.45)
+        version: 10.4.16(postcss@8.4.39)
       child_process:
         specifier: ^1.0.2
         version: 1.0.2
       cssnano:
         specifier: ^6.0.1
-        version: 6.0.1(postcss@8.4.45)
+        version: 6.0.1(postcss@8.4.39)
       del:
         specifier: ^6.1.1
         version: 6.1.1
@@ -495,7 +445,7 @@ importers:
         version: 5.0.0
       gulp-postcss:
         specifier: ^9.0.1
-        version: 9.0.1(postcss@8.4.45)
+        version: 9.0.1(postcss@8.4.39)
       gulp-rename:
         specifier: ^2.0.0
         version: 2.0.0
@@ -525,10 +475,10 @@ importers:
         version: 0.12.7
       postcss-less:
         specifier: ^6.0.0
-        version: 6.0.0(postcss@8.4.45)
+        version: 6.0.0(postcss@8.4.39)
       postcss-sorting:
         specifier: ^8.0.2
-        version: 8.0.2(postcss@8.4.45)
+        version: 8.0.2(postcss@8.4.39)
       precss:
         specifier: ^4.0.0
         version: 4.0.0
@@ -1252,10 +1202,6 @@ packages:
     resolution: {integrity: sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/code-frame@7.24.7':
-    resolution: {integrity: sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/compat-data@7.23.3':
     resolution: {integrity: sha512-BmR4bWbDIoFJmJ9z2cZ8Gmm2MXgEDgjdWgpKmKWUt54UGFJdlj31ECtbaDvCG/qVdG3AQ1SfpZEs01lUFbzLOQ==}
     engines: {node: '>=6.9.0'}
@@ -1268,10 +1214,6 @@ packages:
     resolution: {integrity: sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/generator@7.25.6':
-    resolution: {integrity: sha512-VPC82gr1seXOpkjAAKoLhP50vx4vGNlF4msF64dSFq1P8RfB+QAuJWGHPXXPc8QyfVWwwB/TNNU4+ayZmHNbZw==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/helper-annotate-as-pure@7.22.5':
     resolution: {integrity: sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==}
     engines: {node: '>=6.9.0'}
@@ -1321,10 +1263,6 @@ packages:
     resolution: {integrity: sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-module-imports@7.24.7':
-    resolution: {integrity: sha512-8AyH3C+74cgCVVXow/myrynrAGv+nTVg5vKu2nZph9x7RcRwzmh0VFallJuFTZ9mx6u4eSdXZfcOzSqTUm0HCA==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/helper-module-transforms@7.23.3':
     resolution: {integrity: sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==}
     engines: {node: '>=6.9.0'}
@@ -1339,10 +1277,6 @@ packages:
     resolution: {integrity: sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-plugin-utils@7.24.8':
-    resolution: {integrity: sha512-FFWx5142D8h2Mgr/iPVGH5G7w6jDn4jUSpZTyDnQO0Yn7Ks2Kuz6Pci8H6MPCoUJegd/UZQ3tAvfLCxQSnWWwg==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/helper-remap-async-to-generator@7.22.20':
     resolution: {integrity: sha512-pBGyV4uBqOns+0UvhsTO8qgl8hO89PmiDYv+/COyp1aeMcmfrfruz+/nCMFiYyFF/Knn0yfrC85ZzNFjembFTw==}
     engines: {node: '>=6.9.0'}
@@ -1399,10 +1333,6 @@ packages:
     resolution: {integrity: sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/highlight@7.24.7':
-    resolution: {integrity: sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/parser@7.23.9':
     resolution: {integrity: sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==}
     engines: {node: '>=6.0.0'}
@@ -1502,12 +1432,6 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-syntax-jsx@7.24.7':
-    resolution: {integrity: sha512-6ddciUPe/mpMnOKv/U+RSd2vvVy+Yw/JfBB0ZHYjEZt9NLHmCUylNYlsbqCCS1Bffjlb0fCwC9Vqz+sBz6PsiQ==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
   '@babel/plugin-syntax-logical-assignment-operators@7.10.4':
     resolution: {integrity: sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==}
     peerDependencies:
@@ -1906,18 +1830,10 @@ packages:
     resolution: {integrity: sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/template@7.25.0':
-    resolution: {integrity: sha512-aOOgh1/5XzKvg1jvVz7AVrx2piJ2XBi227DHmbY6y+bM9H2FlN+IfecYu4Xl0cNiiVejlsCri89LUsbj8vJD9Q==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/traverse@7.23.2':
     resolution: {integrity: sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/traverse@7.25.6':
-    resolution: {integrity: sha512-9Vrcx5ZW6UwK5tvqsj0nGpp/XzqthkT0dqIc9g1AdtygFToNtTF67XzYS//dm+SAK9cp3B9R4ZO/46p63SCjlQ==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/types@7.23.0':
     resolution: {integrity: sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==}
     engines: {node: '>=6.9.0'}
@@ -2058,16 +1974,6 @@ packages:
   '@dialpad/dialtone-combinator@0.3.1':
     resolution: {integrity: sha512-6Tnt72vgL5XirVA/0wahkVk2Ayx480xgTBSgZ4Rnk6HFzzFhPg4VNmEgt55vXlk/owxqZMVRXwNc8Po5t7WnoA==}
 
-  '@dialpad/dialtone-vue@3.13.0':
-    resolution: {integrity: sha512-GN71IQawYctjVYQxK4NYNu0w6X+ymC91+DJwbLZcZ51AgDEwP3koAJMUKoqfrwznaFkedHZ6ZyaxkDNKbuIQ4Q==}
-    engines: {node: '>= 16'}
-    peerDependencies:
-      '@dialpad/dialtone': '>=6.34'
-      vue: '>=3.2'
-
-  '@dialpad/dialtone@6.35.0':
-    resolution: {integrity: sha512-ie3fMxRaW2HTQwRXj1kzkoACH5w2FM4moHTw9SNNUuCsb0/XVPKv303pmbnlJG8ubbpLO8UUsmdqdn5FeXm/0w==}
-
   '@dialpad/postcss-responsive-variations@1.1.5':
     resolution: {integrity: sha512-vCeaoF+QKZOVPHYsenCRh/XSl1ppUmXS+XUZqRa2gXtQDe6je5qeAK2H7PIwZiNM9gMA7g6EyHs1PshCWDCl9w==}
     engines: {node: '>=12.0.0'}
@@ -2996,10 +2902,6 @@ packages:
     resolution: {integrity: sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==}
     engines: {node: '>=6.0.0'}
 
-  '@jridgewell/gen-mapping@0.3.5':
-    resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==}
-    engines: {node: '>=6.0.0'}
-
   '@jridgewell/resolve-uri@3.1.1':
     resolution: {integrity: sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==}
     engines: {node: '>=6.0.0'}
@@ -3008,10 +2910,6 @@ packages:
     resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==}
     engines: {node: '>=6.0.0'}
 
-  '@jridgewell/set-array@1.2.1':
-    resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==}
-    engines: {node: '>=6.0.0'}
-
   '@jridgewell/source-map@0.3.5':
     resolution: {integrity: sha512-UTYAUj/wviwdsMfzoSJspJxbkH5o1snzwX0//0ENX1u/55kkZZkcTZP6u9bwKGkv+dkk9at4m1Cpt0uY80kcpQ==}
 
@@ -3021,9 +2919,6 @@ packages:
   '@jridgewell/trace-mapping@0.3.20':
     resolution: {integrity: sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==}
 
-  '@jridgewell/trace-mapping@0.3.25':
-    resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
-
   '@jsonjoy.com/base64@1.1.2':
     resolution: {integrity: sha512-q6XAnWQDIMA3+FTiOYajoYqySkO+JSat0ytXGSuRdq9uXE7o92gzuQwQM14xaCRlBLGq3v5miDGC4vkVTn54xA==}
     engines: {node: '>=10.0'}
@@ -3890,10 +3785,6 @@ packages:
     resolution: {integrity: sha512-Tf3YpbBKcQn991KKcw/vg7vZf98v01seSv6CVxZBbRkL/xyjnoYB6KgrFL6zskT1A4dWC/vg77KyNOW+ePaNlA==}
     engines: {node: '>= 10'}
 
-  '@rollup/pluginutils@4.2.1':
-    resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
-    engines: {node: '>= 8.0.0'}
-
   '@rollup/pluginutils@5.1.0':
     resolution: {integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==}
     engines: {node: '>=14.0.0'}
@@ -5136,10 +5027,6 @@ packages:
   '@ungap/structured-clone@1.2.0':
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
 
-  '@vitejs/plugin-vue-jsx@1.3.10':
-    resolution: {integrity: sha512-Cf5zznh4yNMiEMBfTOztaDVDmK1XXfgxClzOSUVUc8WAmHzogrCUeM8B05ABzuGtg0D1amfng+mUmSIOFGP3Pw==}
-    engines: {node: '>=12.0.0'}
-
   '@vitejs/plugin-vue2@2.3.1':
     resolution: {integrity: sha512-/ksaaz2SRLN11JQhLdEUhDzOn909WEk99q9t9w+N12GjQCljzv7GyvAbD/p20aBUjHkvpGOoQ+FCOkG+mjDF4A==}
     engines: {node: ^14.18.0 || >= 16.0.0}
@@ -5147,13 +5034,6 @@ packages:
       vite: ^3.0.0 || ^4.0.0 || ^5.0.0
       vue: ^2.7.0-0
 
-  '@vitejs/plugin-vue@2.3.4':
-    resolution: {integrity: sha512-IfFNbtkbIm36O9KB8QodlwwYvTEsJb4Lll4c2IwB3VHc2gie2mSPtSzL0eYay7X2jd/2WX02FjSGTWR6OPr/zg==}
-    engines: {node: '>=12.0.0'}
-    peerDependencies:
-      vite: ^2.5.10
-      vue: ^3.2.25
-
   '@vitejs/plugin-vue@4.5.0':
     resolution: {integrity: sha512-a2WSpP8X8HTEww/U00bU4mX1QpLINNuz/2KMNpLsdu3BzOpak3AGI1CJYBTXcc4SPhaD0eNRUp7IyQK405L5dQ==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -5168,6 +5048,13 @@ packages:
       vite: ^5.0.0
       vue: ^3.2.25
 
+  '@vitejs/plugin-vue@5.1.3':
+    resolution: {integrity: sha512-3xbWsKEKXYlmX82aOHufFQVnkbMC/v8fLpWwh6hWOUrK5fbbtBh9Q/WWse27BFgSy2/e2c0fz5Scgya9h2GLhw==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    peerDependencies:
+      vite: ^5.0.0
+      vue: ^3.2.25
+
   '@vitest/expect@1.0.4':
     resolution: {integrity: sha512-/NRN9N88qjg3dkhmFcCBwhn/Ie4h064pY3iv7WLRsDJW7dXnEgeoa8W9zy7gIPluhz6CkgqiB3HmpIXgmEY5dQ==}
 
@@ -5183,18 +5070,12 @@ packages:
   '@vitest/utils@1.0.4':
     resolution: {integrity: sha512-gsswWDXxtt0QvtK/y/LWukN7sGMYmnCcv1qv05CsY6cU/Y1zpGX1QuvLs+GO1inczpE6Owixeel3ShkjhYtGfA==}
 
-  '@volar/code-gen@0.38.9':
-    resolution: {integrity: sha512-n6LClucfA+37rQeskvh9vDoZV1VvCVNy++MAPKj2dT4FT+Fbmty/SDQqnsEBtdEe6E3OQctFvA/IcKsx3Mns0A==}
-
   '@volar/language-core@1.11.1':
     resolution: {integrity: sha512-dOcNn3i9GgZAcJt43wuaEykSluAuOkQgzni1cuxLxTV0nJKanQztp7FxyswdRILaKH+P2XZMPRp2S4MV/pElCw==}
 
   '@volar/language-core@2.4.0':
     resolution: {integrity: sha512-FTla+khE+sYK0qJP+6hwPAAUwiNHVMph4RUXpxf/FIPKUP61NFrVZorml4mjFShnueR2y9/j8/vnh09YwVdH7A==}
 
-  '@volar/source-map@0.38.9':
-    resolution: {integrity: sha512-ba0UFoHDYry+vwKdgkWJ6xlQT+8TFtZg1zj9tSjj4PykW1JZDuM0xplMotLun4h3YOoYfY9K1huY5gvxmrNLIw==}
-
   '@volar/source-map@1.11.1':
     resolution: {integrity: sha512-hJnOnwZ4+WT5iupLRnuzbULZ42L7BWWPMmruzwtLhJfpDVoZLjNBxHDi2sY2bgZXCKlpU5XcsMFoYrsQmPhfZg==}
 
@@ -5207,30 +5088,6 @@ packages:
   '@volar/typescript@2.4.0':
     resolution: {integrity: sha512-9zx3lQWgHmVd+JRRAHUSRiEhe4TlzL7U7e6ulWXOxHH/WNYxzKwCvZD7WYWEZFdw4dHfTD9vUR0yPQO6GilCaQ==}
 
-  '@volar/vue-code-gen@0.38.9':
-    resolution: {integrity: sha512-tzj7AoarFBKl7e41MR006ncrEmNPHALuk8aG4WdDIaG387X5//5KhWC5Ff3ZfB2InGSeNT+CVUd74M0gS20rjA==}
-    deprecated: 'WARNING: This project has been renamed to @vue/language-core. Install using @vue/language-core instead.'
-
-  '@volar/vue-typescript@0.38.9':
-    resolution: {integrity: sha512-iJMQGU91ADi98u8V1vXd2UBmELDAaeSP0ZJaFjwosClQdKlJQYc6MlxxKfXBZisHqfbhdtrGRyaryulnYtliZw==}
-    deprecated: 'WARNING: This project has been renamed to @vue/typescript. Install using @vue/typescript instead.'
-
-  '@vue/babel-helper-vue-transform-on@1.2.5':
-    resolution: {integrity: sha512-lOz4t39ZdmU4DJAa2hwPYmKc8EsuGa2U0L9KaZaOJUt0UwQNjNA3AZTq6uEivhOKhhG1Wvy96SvYBoFmCg3uuw==}
-
-  '@vue/babel-plugin-jsx@1.2.5':
-    resolution: {integrity: sha512-zTrNmOd4939H9KsRIGmmzn3q2zvv1mjxkYZHgqHZgDrXz5B1Q3WyGEjO2f+JrmKghvl1JIRcvo63LgM1kH5zFg==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    peerDependenciesMeta:
-      '@babel/core':
-        optional: true
-
-  '@vue/babel-plugin-resolve-type@1.2.5':
-    resolution: {integrity: sha512-U/ibkQrf5sx0XXRnUZD1mo5F7PkpKyTbfXM3a3rC4YnUz6crHEz9Jg09jzzL6QYlXNto/9CePdOg/c87O4Nlfg==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
   '@vue/cli-overlay@5.0.8':
     resolution: {integrity: sha512-KmtievE/B4kcXp6SuM2gzsnSd8WebkQpg3XaB6GmFh1BJGRqa1UiW9up7L/Q67uOdTigHxr5Ar2lZms4RcDjwQ==}
 
@@ -5376,14 +5233,6 @@ packages:
       '@vue/server-renderer':
         optional: true
 
-  '@vue/tsconfig@0.1.3':
-    resolution: {integrity: sha512-kQVsh8yyWPvHpb8gIc9l/HIDiiVUy1amynLNpCy8p+FoCiZXCo6fQos5/097MmnNZc9AtseDsCrfkhqCrJ8Olg==}
-    peerDependencies:
-      '@types/node': '*'
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
-
   '@vue/tsconfig@0.4.0':
     resolution: {integrity: sha512-CPuIReonid9+zOG/CGTT05FXrPYATEqoDGNrEaqS4hwcw5BUNM2FguC0mOwJD4Jr16UpRVl9N0pY3P+srIbqmg==}
 
@@ -5592,9 +5441,6 @@ packages:
       mem-fs-editor:
         optional: true
 
-  '@zeit/schemas@2.6.0':
-    resolution: {integrity: sha512-uUrgZ8AxS+Lio0fZKAipJjAh415JyrOZowliZAzmnJSsf7piVL5w+G0+gFJ0KSu3QRhvui/7zuvpLz03YjXAhg==}
-
   '@zip.js/zip.js@2.7.48':
     resolution: {integrity: sha512-J7cliimZ2snAbr0IhLx2U8BwfA1pKucahKzTpFtYq4hEgKxwvFJcIjCIVNPwQpfVab7iVP+AKmoH1gidBlyhiQ==}
     engines: {bun: '>=0.7.0', deno: '>=1.0.0', node: '>=16.5.0'}
@@ -5884,9 +5730,6 @@ packages:
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
     deprecated: This package is no longer supported.
 
-  arg@2.0.0:
-    resolution: {integrity: sha512-XxNTUzKnz1ctK3ZIcI2XUPlD96wbHP2nGqkPKpvk/HNRlPveYrXIVSTk9m3LcqOgDPg3B1nMvdV/K8wZd7PG4w==}
-
   arg@5.0.2:
     resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
 
@@ -6480,10 +6323,6 @@ packages:
     resolution: {integrity: sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==}
     engines: {node: '>=0.10.0'}
 
-  chalk@2.4.1:
-    resolution: {integrity: sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==}
-    engines: {node: '>=4'}
-
   chalk@2.4.2:
     resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
     engines: {node: '>=4'}
@@ -6843,10 +6682,6 @@ packages:
     resolution: {integrity: sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==}
     engines: {node: '>= 0.6'}
 
-  compression@1.7.3:
-    resolution: {integrity: sha512-HSjyBG5N1Nnz7tF2+O7A9XUhyjru71/fwgNb7oIsEVHR0WShfs2tIS/EySLgiTe98aOK18YDlMXpzjCXY/n9mg==}
-    engines: {node: '>= 0.8.0'}
-
   compression@1.7.4:
     resolution: {integrity: sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==}
     engines: {node: '>= 0.8.0'}
@@ -7059,10 +6894,6 @@ packages:
   constantinople@4.0.1:
     resolution: {integrity: sha512-vCrqcSIq4//Gx74TXXCGnHpulY1dskqLTFGDmhrGxzeXL8lF8kvXv6mpNWlJj1uD4DW23D4ljAqbY4RRaaUZIw==}
 
-  content-disposition@0.5.2:
-    resolution: {integrity: sha512-kRGRZw3bLlFISDBgwTSA1TMBFN6J6GWDeubmDE3AF+3+yXL8hTWv8r5rkLbqYXY4RjPk/EzHnClI3zQf1cFmHA==}
-    engines: {node: '>= 0.6'}
-
   content-disposition@0.5.4:
     resolution: {integrity: sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==}
     engines: {node: '>= 0.6'}
@@ -7833,9 +7664,6 @@ packages:
   emoji-regex@9.2.2:
     resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
 
-  emoji-toolkit@6.6.0:
-    resolution: {integrity: sha512-pEu0kow2p1N8zCKnn/L6H0F3rWUBB3P3hVjr/O5yl1fK7N9jU4vO4G7EFapC5Y3XwZLUCY0FZbOPyTkH+4V2eQ==}
-
   emoji-toolkit@8.0.0:
     resolution: {integrity: sha512-Vz8YIqQJsQ+QZ4yuKMMzliXceayqfWbNjb6bST+vm77QAhU2is3I+/PRxrNknW+q1bvHHMgjLCQXxzINWLVapg==}
 
@@ -8515,9 +8343,6 @@ packages:
   fast-levenshtein@2.0.6:
     resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
 
-  fast-url-parser@1.1.3:
-    resolution: {integrity: sha512-5jOCVXADYNuRkKFzNJ0dCCewsZiYo0dz8QNYljkOpFC6r2U4OBmKtvm/Tsuh4w1YYdDqDb31a8TVhBJ2OJKdqQ==}
-
   fastest-levenshtein@1.0.16:
     resolution: {integrity: sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==}
     engines: {node: '>= 4.9.1'}
@@ -10529,13 +10354,6 @@ packages:
     resolution: {integrity: sha512-IpSVCk9AYvLHo5ctcIXxOBpMWUe+4TKN3VPWAKUbJikkmsGp0VrSM8IttVc32D6J4WUsiPE6aEFRNmIoF/gdow==}
     engines: {node: '>= 0.10'}
 
-  less-loader@11.1.4:
-    resolution: {integrity: sha512-6/GrYaB6QcW6Vj+/9ZPgKKs6G10YZai/l/eJ4SLwbzqNTBsAqt5hSLVF47TgsiBxV1P6eAU0GYRH3YRuQU9V3A==}
-    engines: {node: '>= 14.15.0'}
-    peerDependencies:
-      less: ^3.5.0 || ^4.0.0
-      webpack: ^5.0.0
-
   less@4.2.0:
     resolution: {integrity: sha512-P3b3HJDBtSzsXUl0im2L7gTO5Ubg8mEN6G8qoTS77iXxXX4Hvu4Qj540PZDvQ8V6DmX6iXo98k7Md0Cm1PrLaA==}
     engines: {node: '>=6'}
@@ -11219,18 +11037,10 @@ packages:
     resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==}
     engines: {node: '>=8.6'}
 
-  mime-db@1.33.0:
-    resolution: {integrity: sha512-BHJ/EKruNIqJf/QahvxwQZXKygOQ256myeN/Ew+THcAa5q+PjyTTMMeNQC4DZw5AwfvelsUrA6B67NKMqXDbzQ==}
-    engines: {node: '>= 0.6'}
-
   mime-db@1.52.0:
     resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
     engines: {node: '>= 0.6'}
 
-  mime-types@2.1.18:
-    resolution: {integrity: sha512-lc/aahn+t4/SWV/qcmumYjymLsWfN3ELhpmVuUFjgsORruuZPVSwAQryq+HHGvO/SI2KVX26bx+En+zhM8g8hQ==}
-    engines: {node: '>= 0.6'}
-
   mime-types@2.1.35:
     resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
     engines: {node: '>= 0.6'}
@@ -12433,9 +12243,6 @@ packages:
     resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
     engines: {node: '>=0.10.0'}
 
-  path-is-inside@1.0.2:
-    resolution: {integrity: sha512-DUWJr3+ULp4zXmol/SZkFf3JGsS9/SIv+Y3Rt93/UjPpDpklB5f1er4O3POIbUuUJ3FXgqte2Q7SrU6zAqwk8w==}
-
   path-key@2.0.1:
     resolution: {integrity: sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==}
     engines: {node: '>=4'}
@@ -12469,9 +12276,6 @@ packages:
   path-to-regexp@1.8.0:
     resolution: {integrity: sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==}
 
-  path-to-regexp@2.2.1:
-    resolution: {integrity: sha512-gu9bD6Ta5bwGrrU8muHzVOBFFREpp2iRkVfhBJahwJ6p6Xw20SjT0MxLnwkjOibQmGSYhiUnf2FLe7k+jcFmGQ==}
-
   path-to-regexp@6.2.1:
     resolution: {integrity: sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw==}
 
@@ -13595,10 +13399,6 @@ packages:
   randombytes@2.1.0:
     resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==}
 
-  range-parser@1.2.0:
-    resolution: {integrity: sha512-kA5WQoNVo4t9lNx2kQNFCxKeBl5IbbSNBl1M/tLkw9WCn+hxNBAW5Qh8gdhs63CJnhjJ2zQWFoqPJP2sK1AV5A==}
-    engines: {node: '>= 0.6'}
-
   range-parser@1.2.1:
     resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==}
     engines: {node: '>= 0.6'}
@@ -13811,9 +13611,6 @@ packages:
     resolution: {integrity: sha512-RAM5FlZz+Lhmo7db9L298p2vHP5ZywrVXmVXpmAD9GuL5MPH6t9ROw1iA/wfHkQ76Qe7AaPF0nGuim96/IrQMQ==}
     engines: {node: '>=4'}
 
-  registry-auth-token@3.3.2:
-    resolution: {integrity: sha512-JL39c60XlzCVgNrO+qq68FoNb56w/m7JYvGR2jT5iR1xBrUA3Mfx5Twk5rqTThPmQKMWydGmq8oFtDlxfrmxnQ==}
-
   registry-auth-token@3.4.0:
     resolution: {integrity: sha512-4LM6Fw8eBQdwMYcES4yTnn2TqIasbXuwDx3um+QRs7S55aMKCBKBxvPXl2RiUjHwuJLTyYfxSpmfSAjQpcuP+A==}
 
@@ -14239,9 +14036,6 @@ packages:
   serialize-javascript@6.0.1:
     resolution: {integrity: sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==}
 
-  serve-handler@6.1.3:
-    resolution: {integrity: sha512-FosMqFBNrLyeiIDvP1zgO6YoTzFYHxLDEIavhlmQ+knB2Z7l1t+kGLHkZIDN7UVWqQAmKI3D20A6F6jo3nDd4w==}
-
   serve-index@1.9.1:
     resolution: {integrity: sha512-pXHfKNP4qujrtteMrSBb0rc8HJ9Ms/GrXwcUtUtD5s4ewDJI8bT3Cz2zTVRMKtri49pLx2e0Ya8ziP5Ya2pZZw==}
     engines: {node: '>= 0.8.0'}
@@ -14250,10 +14044,6 @@ packages:
     resolution: {integrity: sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==}
     engines: {node: '>= 0.8.0'}
 
-  serve@13.0.4:
-    resolution: {integrity: sha512-Lj8rhXmphJCRQVv5qwu0NQZ2h+0MrRyRJxDZu5y3qLH2i/XY6a0FPj/VmjMUdkJb672MBfE8hJ274PU6JzBd0Q==}
-    hasBin: true
-
   set-blocking@2.0.0:
     resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
 
@@ -15569,9 +15359,6 @@ packages:
     peerDependencies:
       browserslist: '>= 4.21.0'
 
-  update-check@1.5.2:
-    resolution: {integrity: sha512-1TrmYLuLj/5ZovwUS7fFd1jMH3NnFDN1y1A8dboedIDt7zs/zJMo6TwwlhYKkSeEwzleeiSBV5/3c9ufAQWDaQ==}
-
   update-notifier@5.1.0:
     resolution: {integrity: sha512-ItnICHbeMh9GqUy31hFPrD1kcuZ3rpxDZbf4KUDavXwS0bW5m7SLbDQpGX3UYr072cbrF5hFUs3r5tUsPwjfHw==}
     engines: {node: '>=10'}
@@ -15954,12 +15741,6 @@ packages:
     peerDependencies:
       vue: ^2.6 || ^3.2
 
-  vue-tsc@0.38.9:
-    resolution: {integrity: sha512-Yoy5phgvGqyF98Fb4mYqboR4Q149jrdcGv5kSmufXJUq++RZJ2iMVG0g6zl+v3t4ORVWkQmRpsV4x2szufZ0LQ==}
-    hasBin: true
-    peerDependencies:
-      typescript: '*'
-
   vue-tsc@1.8.25:
     resolution: {integrity: sha512-lHsRhDc/Y7LINvYhZ3pv4elflFADoEOo67vfClAfF2heVHpHmVquLSjojgCSIwzA4F0Pc4vowT/psXCYcfk+iQ==}
     hasBin: true
@@ -16612,11 +16393,6 @@ snapshots:
       '@babel/highlight': 7.22.20
       chalk: 2.4.2
 
-  '@babel/code-frame@7.24.7':
-    dependencies:
-      '@babel/highlight': 7.24.7
-      picocolors: 1.0.1
-
   '@babel/compat-data@7.23.3': {}
 
   '@babel/core@7.23.2':
@@ -16646,13 +16422,6 @@ snapshots:
       '@jridgewell/trace-mapping': 0.3.20
       jsesc: 2.5.2
 
-  '@babel/generator@7.25.6':
-    dependencies:
-      '@babel/types': 7.25.6
-      '@jridgewell/gen-mapping': 0.3.5
-      '@jridgewell/trace-mapping': 0.3.25
-      jsesc: 2.5.2
-
   '@babel/helper-annotate-as-pure@7.22.5':
     dependencies:
       '@babel/types': 7.23.0
@@ -16719,13 +16488,6 @@ snapshots:
     dependencies:
       '@babel/types': 7.23.0
 
-  '@babel/helper-module-imports@7.24.7':
-    dependencies:
-      '@babel/traverse': 7.25.6
-      '@babel/types': 7.25.6
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/helper-module-transforms@7.23.3(@babel/core@7.23.2)':
     dependencies:
       '@babel/core': 7.23.2
@@ -16741,8 +16503,6 @@ snapshots:
 
   '@babel/helper-plugin-utils@7.22.5': {}
 
-  '@babel/helper-plugin-utils@7.24.8': {}
-
   '@babel/helper-remap-async-to-generator@7.22.20(@babel/core@7.23.2)':
     dependencies:
       '@babel/core': 7.23.2
@@ -16771,11 +16531,13 @@ snapshots:
 
   '@babel/helper-string-parser@7.22.5': {}
 
-  '@babel/helper-string-parser@7.24.8': {}
+  '@babel/helper-string-parser@7.24.8':
+    optional: true
 
   '@babel/helper-validator-identifier@7.22.20': {}
 
-  '@babel/helper-validator-identifier@7.24.7': {}
+  '@babel/helper-validator-identifier@7.24.7':
+    optional: true
 
   '@babel/helper-validator-option@7.22.15': {}
 
@@ -16799,13 +16561,6 @@ snapshots:
       chalk: 2.4.2
       js-tokens: 4.0.0
 
-  '@babel/highlight@7.24.7':
-    dependencies:
-      '@babel/helper-validator-identifier': 7.24.7
-      chalk: 2.4.2
-      js-tokens: 4.0.0
-      picocolors: 1.0.1
-
   '@babel/parser@7.23.9':
     dependencies:
       '@babel/types': 7.23.0
@@ -16813,6 +16568,7 @@ snapshots:
   '@babel/parser@7.25.6':
     dependencies:
       '@babel/types': 7.25.6
+    optional: true
 
   '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.23.3(@babel/core@7.23.2)':
     dependencies:
@@ -16896,11 +16652,6 @@ snapshots:
       '@babel/core': 7.23.2
       '@babel/helper-plugin-utils': 7.22.5
 
-  '@babel/plugin-syntax-jsx@7.24.7(@babel/core@7.23.2)':
-    dependencies:
-      '@babel/core': 7.23.2
-      '@babel/helper-plugin-utils': 7.24.8
-
   '@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.23.2)':
     dependencies:
       '@babel/core': 7.23.2
@@ -17393,12 +17144,6 @@ snapshots:
       '@babel/parser': 7.23.9
       '@babel/types': 7.23.0
 
-  '@babel/template@7.25.0':
-    dependencies:
-      '@babel/code-frame': 7.24.7
-      '@babel/parser': 7.25.6
-      '@babel/types': 7.25.6
-
   '@babel/traverse@7.23.2':
     dependencies:
       '@babel/code-frame': 7.22.13
@@ -17414,18 +17159,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/traverse@7.25.6':
-    dependencies:
-      '@babel/code-frame': 7.24.7
-      '@babel/generator': 7.25.6
-      '@babel/parser': 7.25.6
-      '@babel/template': 7.25.0
-      '@babel/types': 7.25.6
-      debug: 4.3.6
-      globals: 11.12.0
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/types@7.23.0':
     dependencies:
       '@babel/helper-string-parser': 7.22.5
@@ -17437,6 +17170,7 @@ snapshots:
       '@babel/helper-string-parser': 7.24.8
       '@babel/helper-validator-identifier': 7.24.7
       to-fast-properties: 2.0.0
+    optional: true
 
   '@bcoe/v8-coverage@0.2.3': {}
 
@@ -17614,24 +17348,6 @@ snapshots:
 
   '@dialpad/dialtone-combinator@0.3.1': {}
 
-  '@dialpad/dialtone-vue@3.13.0(@dialpad/dialtone@6.35.0(react-dom@16.14.0(react@16.14.0))(react@16.14.0))(vue@3.4.15(typescript@5.4.2))':
-    dependencies:
-      '@dialpad/dialtone': 6.35.0(react-dom@16.14.0(react@16.14.0))(react@16.14.0)
-      emoji-regex: 10.3.0
-      emoji-toolkit: 6.6.0
-      tippy.js: 6.3.7
-      vue: 3.4.15(typescript@5.4.2)
-
-  '@dialpad/dialtone@6.35.0(react-dom@16.14.0(react@16.14.0))(react@16.14.0)':
-    dependencies:
-      '@docsearch/js': 3.5.2(@algolia/client-search@4.20.0)(@types/react@18.2.37)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(search-insights@2.10.0)
-    transitivePeerDependencies:
-      - '@algolia/client-search'
-      - '@types/react'
-      - react
-      - react-dom
-      - search-insights
-
   '@dialpad/postcss-responsive-variations@1.1.5(postcss@8.4.39)':
     dependencies:
       postcss: 8.4.39
@@ -18479,18 +18195,10 @@ snapshots:
       '@jridgewell/sourcemap-codec': 1.5.0
       '@jridgewell/trace-mapping': 0.3.20
 
-  '@jridgewell/gen-mapping@0.3.5':
-    dependencies:
-      '@jridgewell/set-array': 1.2.1
-      '@jridgewell/sourcemap-codec': 1.5.0
-      '@jridgewell/trace-mapping': 0.3.25
-
   '@jridgewell/resolve-uri@3.1.1': {}
 
   '@jridgewell/set-array@1.1.2': {}
 
-  '@jridgewell/set-array@1.2.1': {}
-
   '@jridgewell/source-map@0.3.5':
     dependencies:
       '@jridgewell/gen-mapping': 0.3.3
@@ -18503,11 +18211,6 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.1
       '@jridgewell/sourcemap-codec': 1.5.0
 
-  '@jridgewell/trace-mapping@0.3.25':
-    dependencies:
-      '@jridgewell/resolve-uri': 3.1.1
-      '@jridgewell/sourcemap-codec': 1.5.0
-
   '@jsonjoy.com/base64@1.1.2(tslib@2.6.2)':
     dependencies:
       tslib: 2.6.2
@@ -19594,11 +19297,6 @@ snapshots:
       '@resvg/resvg-js-win32-ia32-msvc': 2.6.0
       '@resvg/resvg-js-win32-x64-msvc': 2.6.0
 
-  '@rollup/pluginutils@4.2.1':
-    dependencies:
-      estree-walker: 2.0.2
-      picomatch: 2.3.1
-
   '@rollup/pluginutils@5.1.0(rollup@4.21.1)':
     dependencies:
       '@types/estree': 1.0.5
@@ -21321,6 +21019,7 @@ snapshots:
       typescript: 5.4.2
     transitivePeerDependencies:
       - supports-color
+    optional: true
 
   '@typescript-eslint/eslint-plugin@7.0.1(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0)(typescript@5.4.2)':
     dependencies:
@@ -21389,6 +21088,7 @@ snapshots:
       typescript: 5.4.2
     transitivePeerDependencies:
       - supports-color
+    optional: true
 
   '@typescript-eslint/type-utils@7.0.1(eslint@8.56.0)(typescript@5.4.2)':
     dependencies:
@@ -21513,27 +21213,11 @@ snapshots:
 
   '@ungap/structured-clone@1.2.0': {}
 
-  '@vitejs/plugin-vue-jsx@1.3.10':
-    dependencies:
-      '@babel/core': 7.23.2
-      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.23.2)
-      '@babel/plugin-transform-typescript': 7.23.3(@babel/core@7.23.2)
-      '@rollup/pluginutils': 4.2.1
-      '@vue/babel-plugin-jsx': 1.2.5(@babel/core@7.23.2)
-      hash-sum: 2.0.0
-    transitivePeerDependencies:
-      - supports-color
-
   '@vitejs/plugin-vue2@2.3.1(vite@5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@2.7.16)':
     dependencies:
       vite: 5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
       vue: 2.7.16
 
-  '@vitejs/plugin-vue@2.3.4(vite@5.4.2(@types/node@16.18.83)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@3.4.15(typescript@5.4.2))':
-    dependencies:
-      vite: 5.4.2(@types/node@16.18.83)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
-      vue: 3.4.15(typescript@5.4.2)
-
   '@vitejs/plugin-vue@4.5.0(vite@4.0.5(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@3.4.15(typescript@5.4.2))':
     dependencies:
       vite: 4.0.5(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
@@ -21549,6 +21233,11 @@ snapshots:
       vite: 5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
       vue: 3.4.15(typescript@5.4.2)
 
+  '@vitejs/plugin-vue@5.1.3(vite@5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@3.4.15(typescript@5.4.2))':
+    dependencies:
+      vite: 5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
+      vue: 3.4.15(typescript@5.4.2)
+
   '@vitest/expect@1.0.4':
     dependencies:
       '@vitest/spy': 1.0.4
@@ -21577,10 +21266,6 @@ snapshots:
       loupe: 2.3.7
       pretty-format: 29.7.0
 
-  '@volar/code-gen@0.38.9':
-    dependencies:
-      '@volar/source-map': 0.38.9
-
   '@volar/language-core@1.11.1':
     dependencies:
       '@volar/source-map': 1.11.1
@@ -21589,8 +21274,6 @@ snapshots:
     dependencies:
       '@volar/source-map': 2.4.0
 
-  '@volar/source-map@0.38.9': {}
-
   '@volar/source-map@1.11.1':
     dependencies:
       muggle-string: 0.3.1
@@ -21608,52 +21291,6 @@ snapshots:
       path-browserify: 1.0.1
       vscode-uri: 3.0.8
 
-  '@volar/vue-code-gen@0.38.9':
-    dependencies:
-      '@volar/code-gen': 0.38.9
-      '@volar/source-map': 0.38.9
-      '@vue/compiler-core': 3.4.15
-      '@vue/compiler-dom': 3.4.15
-      '@vue/shared': 3.4.15
-
-  '@volar/vue-typescript@0.38.9':
-    dependencies:
-      '@volar/code-gen': 0.38.9
-      '@volar/source-map': 0.38.9
-      '@volar/vue-code-gen': 0.38.9
-      '@vue/compiler-sfc': 3.4.15
-      '@vue/reactivity': 3.4.15
-
-  '@vue/babel-helper-vue-transform-on@1.2.5': {}
-
-  '@vue/babel-plugin-jsx@1.2.5(@babel/core@7.23.2)':
-    dependencies:
-      '@babel/helper-module-imports': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.8
-      '@babel/plugin-syntax-jsx': 7.24.7(@babel/core@7.23.2)
-      '@babel/template': 7.25.0
-      '@babel/traverse': 7.25.6
-      '@babel/types': 7.25.6
-      '@vue/babel-helper-vue-transform-on': 1.2.5
-      '@vue/babel-plugin-resolve-type': 1.2.5(@babel/core@7.23.2)
-      html-tags: 3.3.1
-      svg-tags: 1.0.0
-    optionalDependencies:
-      '@babel/core': 7.23.2
-    transitivePeerDependencies:
-      - supports-color
-
-  '@vue/babel-plugin-resolve-type@1.2.5(@babel/core@7.23.2)':
-    dependencies:
-      '@babel/code-frame': 7.24.7
-      '@babel/core': 7.23.2
-      '@babel/helper-module-imports': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.8
-      '@babel/parser': 7.25.6
-      '@vue/compiler-sfc': 3.5.5
-    transitivePeerDependencies:
-      - supports-color
-
   '@vue/cli-overlay@5.0.8': {}
 
   '@vue/cli-plugin-eslint@5.0.8(@swc/core@1.3.96)(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))(encoding@0.1.13)(eslint@8.56.0)':
@@ -21672,13 +21309,6 @@ snapshots:
       - uglify-js
       - webpack-cli
 
-  '@vue/cli-plugin-router@5.0.8(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(less-loader@11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96)))(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))(encoding@0.1.13)':
-    dependencies:
-      '@vue/cli-service': 5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(less-loader@11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96)))(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3)
-      '@vue/cli-shared-utils': 5.0.8(encoding@0.1.13)
-    transitivePeerDependencies:
-      - encoding
-
   '@vue/cli-plugin-router@5.0.8(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))(encoding@0.1.13)':
     dependencies:
       '@vue/cli-service': 5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3)
@@ -21686,9 +21316,9 @@ snapshots:
     transitivePeerDependencies:
       - encoding
 
-  '@vue/cli-plugin-unit-mocha@5.0.8(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(less-loader@11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96)))(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))(encoding@0.1.13)(webpack@5.89.0(@swc/core@1.3.96))':
+  '@vue/cli-plugin-unit-mocha@5.0.8(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))(encoding@0.1.13)(webpack@5.89.0(@swc/core@1.3.96))':
     dependencies:
-      '@vue/cli-service': 5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(less-loader@11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96)))(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3)
+      '@vue/cli-service': 5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3)
       '@vue/cli-shared-utils': 5.0.8(encoding@0.1.13)
       jsdom: 18.1.1
       jsdom-global: 3.0.2(jsdom@18.1.1)
@@ -21702,144 +21332,10 @@ snapshots:
       - utf-8-validate
       - webpack
 
-  '@vue/cli-plugin-vuex@5.0.8(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(less-loader@11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96)))(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))':
-    dependencies:
-      '@vue/cli-service': 5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(less-loader@11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96)))(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3)
-
   '@vue/cli-plugin-vuex@5.0.8(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))':
     dependencies:
       '@vue/cli-service': 5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3)
 
-  '@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(less-loader@11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96)))(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3)':
-    dependencies:
-      '@babel/helper-compilation-targets': 7.22.15
-      '@soda/friendly-errors-webpack-plugin': 1.8.1(webpack@5.89.0(@swc/core@1.3.96))
-      '@soda/get-current-script': 1.0.2
-      '@types/minimist': 1.2.5
-      '@vue/cli-overlay': 5.0.8
-      '@vue/cli-plugin-router': 5.0.8(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(less-loader@11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96)))(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))(encoding@0.1.13)
-      '@vue/cli-plugin-vuex': 5.0.8(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(less-loader@11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96)))(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))
-      '@vue/cli-shared-utils': 5.0.8(encoding@0.1.13)
-      '@vue/component-compiler-utils': 3.3.0(ejs@3.1.9)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)
-      '@vue/vue-loader-v15': vue-loader@15.11.1(@vue/compiler-sfc@3.5.5)(css-loader@6.8.1(webpack@5.89.0(@swc/core@1.3.96)))(ejs@3.1.9)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(webpack@5.89.0(@swc/core@1.3.96))
-      '@vue/web-component-wrapper': 1.3.0
-      acorn: 8.11.2
-      acorn-walk: 8.3.0
-      address: 1.2.2
-      autoprefixer: 10.4.16(postcss@8.4.39)
-      browserslist: 4.22.1
-      case-sensitive-paths-webpack-plugin: 2.4.0
-      cli-highlight: 2.1.11
-      clipboardy: 2.3.0
-      cliui: 7.0.4
-      copy-webpack-plugin: 9.1.0(webpack@5.89.0(@swc/core@1.3.96))
-      css-loader: 6.8.1(webpack@5.89.0(@swc/core@1.3.96))
-      css-minimizer-webpack-plugin: 3.4.1(webpack@5.89.0(@swc/core@1.3.96))
-      cssnano: 5.1.15(postcss@8.4.39)
-      debug: 4.3.6
-      default-gateway: 6.0.3
-      dotenv: 10.0.0
-      dotenv-expand: 5.1.0
-      fs-extra: 9.1.0
-      globby: 11.1.0
-      hash-sum: 2.0.0
-      html-webpack-plugin: 5.5.3(webpack@5.89.0(@swc/core@1.3.96))
-      is-file-esm: 1.0.0
-      launch-editor-middleware: 2.6.1
-      lodash.defaultsdeep: 4.6.1
-      lodash.mapvalues: 4.6.0
-      mini-css-extract-plugin: 2.7.6(webpack@5.89.0(@swc/core@1.3.96))
-      minimist: 1.2.8
-      module-alias: 2.2.3
-      portfinder: 1.0.32
-      postcss: 8.4.39
-      postcss-loader: 6.2.1(postcss@8.4.39)(webpack@5.89.0(@swc/core@1.3.96))
-      progress-webpack-plugin: 1.0.16(webpack@5.89.0(@swc/core@1.3.96))
-      ssri: 8.0.1
-      terser-webpack-plugin: 5.3.9(@swc/core@1.3.96)(webpack@5.89.0(@swc/core@1.3.96))
-      thread-loader: 3.0.4(webpack@5.89.0(@swc/core@1.3.96))
-      vue-loader: 17.3.1(@vue/compiler-sfc@3.5.5)(vue@3.4.15(typescript@5.4.2))(webpack@5.89.0(@swc/core@1.3.96))
-      vue-style-loader: 4.1.3
-      webpack: 5.89.0(@swc/core@1.3.96)
-      webpack-bundle-analyzer: 4.10.1
-      webpack-chain: 6.5.1
-      webpack-dev-server: 4.15.1(debug@4.3.6)(webpack@5.89.0(@swc/core@1.3.96))
-      webpack-merge: 5.10.0
-      webpack-virtual-modules: 0.4.6
-      whatwg-fetch: 3.6.19
-    optionalDependencies:
-      less-loader: 11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96))
-      vue-template-compiler: 2.7.16(vue@3.4.15(typescript@5.4.2))
-      webpack-sources: 3.2.3
-    transitivePeerDependencies:
-      - '@parcel/css'
-      - '@swc/core'
-      - '@vue/compiler-sfc'
-      - arc-templates
-      - atpl
-      - babel-core
-      - bracket-template
-      - bufferutil
-      - clean-css
-      - coffee-script
-      - csso
-      - dot
-      - dust
-      - dustjs-helpers
-      - dustjs-linkedin
-      - eco
-      - ect
-      - ejs
-      - encoding
-      - esbuild
-      - haml-coffee
-      - hamlet
-      - hamljs
-      - handlebars
-      - hogan.js
-      - htmling
-      - jade
-      - jazz
-      - jqtpl
-      - just
-      - liquid-node
-      - liquor
-      - lodash
-      - marko
-      - mote
-      - mustache
-      - nunjucks
-      - plates
-      - prettier
-      - pug
-      - qejs
-      - ractive
-      - razor-tmpl
-      - react
-      - react-dom
-      - slm
-      - squirrelly
-      - supports-color
-      - swig
-      - swig-templates
-      - teacup
-      - templayed
-      - then-jade
-      - then-pug
-      - tinyliquid
-      - toffee
-      - twig
-      - twing
-      - uglify-js
-      - underscore
-      - utf-8-validate
-      - vash
-      - velocityjs
-      - vue
-      - walrus
-      - webpack-cli
-      - whiskers
-
   '@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3)':
     dependencies:
       '@babel/helper-compilation-targets': 7.22.15
@@ -22001,6 +21497,7 @@ snapshots:
       entities: 4.5.0
       estree-walker: 2.0.2
       source-map-js: 1.2.0
+    optional: true
 
   '@vue/compiler-dom@3.4.15':
     dependencies:
@@ -22011,6 +21508,7 @@ snapshots:
     dependencies:
       '@vue/compiler-core': 3.5.5
       '@vue/shared': 3.5.5
+    optional: true
 
   '@vue/compiler-sfc@2.7.16':
     dependencies:
@@ -22043,6 +21541,7 @@ snapshots:
       magic-string: 0.30.11
       postcss: 8.4.45
       source-map-js: 1.2.0
+    optional: true
 
   '@vue/compiler-ssr@3.4.15':
     dependencies:
@@ -22053,6 +21552,7 @@ snapshots:
     dependencies:
       '@vue/compiler-dom': 3.5.5
       '@vue/shared': 3.5.5
+    optional: true
 
   '@vue/compiler-vue2@2.7.16':
     dependencies:
@@ -22196,7 +21696,8 @@ snapshots:
 
   '@vue/shared@3.4.15': {}
 
-  '@vue/shared@3.5.5': {}
+  '@vue/shared@3.5.5':
+    optional: true
 
   '@vue/test-utils@1.3.6(vue-template-compiler@2.7.16(vue@2.7.16))(vue@2.7.16)':
     dependencies:
@@ -22214,10 +21715,6 @@ snapshots:
     optionalDependencies:
       '@vue/server-renderer': 3.4.15(vue@3.4.15(typescript@5.4.2))
 
-  '@vue/tsconfig@0.1.3(@types/node@16.18.83)':
-    optionalDependencies:
-      '@types/node': 16.18.83
-
   '@vue/tsconfig@0.4.0': {}
 
   '@vue/web-component-wrapper@1.3.0': {}
@@ -22721,8 +22218,6 @@ snapshots:
     optionalDependencies:
       mem-fs: 4.0.0
 
-  '@zeit/schemas@2.6.0': {}
-
   '@zip.js/zip.js@2.7.48': {}
 
   '@zkochan/js-yaml@0.0.6':
@@ -22976,8 +22471,6 @@ snapshots:
 
   are-we-there-yet@4.0.2: {}
 
-  arg@2.0.0: {}
-
   arg@5.0.2: {}
 
   argparse@1.0.10:
@@ -23169,16 +22662,6 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  autoprefixer@10.4.16(postcss@8.4.45):
-    dependencies:
-      browserslist: 4.22.1
-      caniuse-lite: 1.0.30001561
-      fraction.js: 4.3.7
-      normalize-range: 0.1.2
-      picocolors: 1.0.1
-      postcss: 8.4.45
-      postcss-value-parser: 4.2.0
-
   autoprefixer@9.8.8:
     dependencies:
       browserslist: 4.22.1
@@ -23729,12 +23212,6 @@ snapshots:
       strip-ansi: 3.0.1
       supports-color: 2.0.0
 
-  chalk@2.4.1:
-    dependencies:
-      ansi-styles: 3.2.1
-      escape-string-regexp: 1.0.5
-      supports-color: 5.5.0
-
   chalk@2.4.2:
     dependencies:
       ansi-styles: 3.2.1
@@ -24091,18 +23568,6 @@ snapshots:
     dependencies:
       mime-db: 1.52.0
 
-  compression@1.7.3:
-    dependencies:
-      accepts: 1.3.8
-      bytes: 3.0.0
-      compressible: 2.0.18
-      debug: 2.6.9
-      on-headers: 1.0.2
-      safe-buffer: 5.1.2
-      vary: 1.1.2
-    transitivePeerDependencies:
-      - supports-color
-
   compression@1.7.4:
     dependencies:
       accepts: 1.3.8
@@ -24189,8 +23654,6 @@ snapshots:
       '@babel/parser': 7.23.9
       '@babel/types': 7.23.0
 
-  content-disposition@0.5.2: {}
-
   content-disposition@0.5.4:
     dependencies:
       safe-buffer: 5.2.1
@@ -24391,10 +23854,6 @@ snapshots:
     dependencies:
       postcss: 8.4.39
 
-  css-declaration-sorter@6.4.1(postcss@8.4.45):
-    dependencies:
-      postcss: 8.4.45
-
   css-functions-list@3.2.1: {}
 
   css-has-pseudo@0.10.0:
@@ -24518,46 +23977,46 @@ snapshots:
       postcss-svgo: 5.1.0(postcss@8.4.39)
       postcss-unique-selectors: 5.1.1(postcss@8.4.39)
 
-  cssnano-preset-default@6.0.1(postcss@8.4.45):
+  cssnano-preset-default@6.0.1(postcss@8.4.39):
     dependencies:
-      css-declaration-sorter: 6.4.1(postcss@8.4.45)
-      cssnano-utils: 4.0.0(postcss@8.4.45)
-      postcss: 8.4.45
-      postcss-calc: 9.0.1(postcss@8.4.45)
-      postcss-colormin: 6.0.0(postcss@8.4.45)
-      postcss-convert-values: 6.0.0(postcss@8.4.45)
-      postcss-discard-comments: 6.0.0(postcss@8.4.45)
-      postcss-discard-duplicates: 6.0.0(postcss@8.4.45)
-      postcss-discard-empty: 6.0.0(postcss@8.4.45)
-      postcss-discard-overridden: 6.0.0(postcss@8.4.45)
-      postcss-merge-longhand: 6.0.0(postcss@8.4.45)
-      postcss-merge-rules: 6.0.1(postcss@8.4.45)
-      postcss-minify-font-values: 6.0.0(postcss@8.4.45)
-      postcss-minify-gradients: 6.0.0(postcss@8.4.45)
-      postcss-minify-params: 6.0.0(postcss@8.4.45)
-      postcss-minify-selectors: 6.0.0(postcss@8.4.45)
-      postcss-normalize-charset: 6.0.0(postcss@8.4.45)
-      postcss-normalize-display-values: 6.0.0(postcss@8.4.45)
-      postcss-normalize-positions: 6.0.0(postcss@8.4.45)
-      postcss-normalize-repeat-style: 6.0.0(postcss@8.4.45)
-      postcss-normalize-string: 6.0.0(postcss@8.4.45)
-      postcss-normalize-timing-functions: 6.0.0(postcss@8.4.45)
-      postcss-normalize-unicode: 6.0.0(postcss@8.4.45)
-      postcss-normalize-url: 6.0.0(postcss@8.4.45)
-      postcss-normalize-whitespace: 6.0.0(postcss@8.4.45)
-      postcss-ordered-values: 6.0.0(postcss@8.4.45)
-      postcss-reduce-initial: 6.0.0(postcss@8.4.45)
-      postcss-reduce-transforms: 6.0.0(postcss@8.4.45)
-      postcss-svgo: 6.0.0(postcss@8.4.45)
-      postcss-unique-selectors: 6.0.0(postcss@8.4.45)
+      css-declaration-sorter: 6.4.1(postcss@8.4.39)
+      cssnano-utils: 4.0.0(postcss@8.4.39)
+      postcss: 8.4.39
+      postcss-calc: 9.0.1(postcss@8.4.39)
+      postcss-colormin: 6.0.0(postcss@8.4.39)
+      postcss-convert-values: 6.0.0(postcss@8.4.39)
+      postcss-discard-comments: 6.0.0(postcss@8.4.39)
+      postcss-discard-duplicates: 6.0.0(postcss@8.4.39)
+      postcss-discard-empty: 6.0.0(postcss@8.4.39)
+      postcss-discard-overridden: 6.0.0(postcss@8.4.39)
+      postcss-merge-longhand: 6.0.0(postcss@8.4.39)
+      postcss-merge-rules: 6.0.1(postcss@8.4.39)
+      postcss-minify-font-values: 6.0.0(postcss@8.4.39)
+      postcss-minify-gradients: 6.0.0(postcss@8.4.39)
+      postcss-minify-params: 6.0.0(postcss@8.4.39)
+      postcss-minify-selectors: 6.0.0(postcss@8.4.39)
+      postcss-normalize-charset: 6.0.0(postcss@8.4.39)
+      postcss-normalize-display-values: 6.0.0(postcss@8.4.39)
+      postcss-normalize-positions: 6.0.0(postcss@8.4.39)
+      postcss-normalize-repeat-style: 6.0.0(postcss@8.4.39)
+      postcss-normalize-string: 6.0.0(postcss@8.4.39)
+      postcss-normalize-timing-functions: 6.0.0(postcss@8.4.39)
+      postcss-normalize-unicode: 6.0.0(postcss@8.4.39)
+      postcss-normalize-url: 6.0.0(postcss@8.4.39)
+      postcss-normalize-whitespace: 6.0.0(postcss@8.4.39)
+      postcss-ordered-values: 6.0.0(postcss@8.4.39)
+      postcss-reduce-initial: 6.0.0(postcss@8.4.39)
+      postcss-reduce-transforms: 6.0.0(postcss@8.4.39)
+      postcss-svgo: 6.0.0(postcss@8.4.39)
+      postcss-unique-selectors: 6.0.0(postcss@8.4.39)
 
   cssnano-utils@3.1.0(postcss@8.4.39):
     dependencies:
       postcss: 8.4.39
 
-  cssnano-utils@4.0.0(postcss@8.4.45):
+  cssnano-utils@4.0.0(postcss@8.4.39):
     dependencies:
-      postcss: 8.4.45
+      postcss: 8.4.39
 
   cssnano@5.1.15(postcss@8.4.39):
     dependencies:
@@ -24566,11 +24025,11 @@ snapshots:
       postcss: 8.4.39
       yaml: 1.10.2
 
-  cssnano@6.0.1(postcss@8.4.45):
+  cssnano@6.0.1(postcss@8.4.39):
     dependencies:
-      cssnano-preset-default: 6.0.1(postcss@8.4.45)
+      cssnano-preset-default: 6.0.1(postcss@8.4.39)
       lilconfig: 2.1.0
-      postcss: 8.4.45
+      postcss: 8.4.39
 
   csso@4.2.0:
     dependencies:
@@ -25014,8 +24473,6 @@ snapshots:
 
   emoji-regex@9.2.2: {}
 
-  emoji-toolkit@6.6.0: {}
-
   emoji-toolkit@8.0.0: {}
 
   emojis-list@3.0.0: {}
@@ -25945,10 +25402,6 @@ snapshots:
 
   fast-levenshtein@2.0.6: {}
 
-  fast-url-parser@1.1.3:
-    dependencies:
-      punycode: 1.4.1
-
   fastest-levenshtein@1.0.16: {}
 
   fastq@1.15.0:
@@ -26810,12 +26263,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  gulp-postcss@9.0.1(postcss@8.4.45):
+  gulp-postcss@9.0.1(postcss@8.4.39):
     dependencies:
       fancy-log: 1.3.3
       plugin-error: 1.0.1
-      postcss: 8.4.45
-      postcss-load-config: 3.1.4(postcss@8.4.45)
+      postcss: 8.4.39
+      postcss-load-config: 3.1.4(postcss@8.4.39)
       vinyl-sourcemaps-apply: 0.2.1
     transitivePeerDependencies:
       - ts-node
@@ -28434,11 +27887,6 @@ snapshots:
     dependencies:
       flush-write-stream: 1.1.1
 
-  less-loader@11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96)):
-    dependencies:
-      less: 4.2.0
-      webpack: 5.89.0(@swc/core@1.3.96)
-
   less@4.2.0:
     dependencies:
       copy-anything: 2.0.6
@@ -29437,14 +28885,8 @@ snapshots:
       braces: 3.0.2
       picomatch: 2.3.1
 
-  mime-db@1.33.0: {}
-
   mime-db@1.52.0: {}
 
-  mime-types@2.1.18:
-    dependencies:
-      mime-db: 1.33.0
-
   mime-types@2.1.35:
     dependencies:
       mime-db: 1.52.0
@@ -29752,7 +29194,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  natural-compare-lite@1.4.0: {}
+  natural-compare-lite@1.4.0:
+    optional: true
 
   natural-compare@1.4.0: {}
 
@@ -30665,8 +30108,6 @@ snapshots:
 
   path-is-absolute@1.0.1: {}
 
-  path-is-inside@1.0.2: {}
-
   path-key@2.0.1: {}
 
   path-key@3.1.1: {}
@@ -30692,8 +30133,6 @@ snapshots:
     dependencies:
       isarray: 0.0.1
 
-  path-to-regexp@2.2.1: {}
-
   path-to-regexp@6.2.1: {}
 
   path-type@1.1.0:
@@ -30839,9 +30278,9 @@ snapshots:
       postcss-selector-parser: 6.0.13
       postcss-value-parser: 4.2.0
 
-  postcss-calc@9.0.1(postcss@8.4.45):
+  postcss-calc@9.0.1(postcss@8.4.39):
     dependencies:
-      postcss: 8.4.45
+      postcss: 8.4.39
       postcss-selector-parser: 6.0.13
       postcss-value-parser: 4.2.0
 
@@ -30899,12 +30338,12 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-colormin@6.0.0(postcss@8.4.45):
+  postcss-colormin@6.0.0(postcss@8.4.39):
     dependencies:
       browserslist: 4.22.1
       caniuse-api: 3.0.0
       colord: 2.9.3
-      postcss: 8.4.45
+      postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
   postcss-convert-values@5.1.3(postcss@8.4.39):
@@ -30913,10 +30352,10 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-convert-values@6.0.0(postcss@8.4.45):
+  postcss-convert-values@6.0.0(postcss@8.4.39):
     dependencies:
       browserslist: 4.22.1
-      postcss: 8.4.45
+      postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
   postcss-custom-media@7.0.8:
@@ -30942,33 +30381,33 @@ snapshots:
     dependencies:
       postcss: 8.4.39
 
-  postcss-discard-comments@6.0.0(postcss@8.4.45):
+  postcss-discard-comments@6.0.0(postcss@8.4.39):
     dependencies:
-      postcss: 8.4.45
+      postcss: 8.4.39
 
   postcss-discard-duplicates@5.1.0(postcss@8.4.39):
     dependencies:
       postcss: 8.4.39
 
-  postcss-discard-duplicates@6.0.0(postcss@8.4.45):
+  postcss-discard-duplicates@6.0.0(postcss@8.4.39):
     dependencies:
-      postcss: 8.4.45
+      postcss: 8.4.39
 
   postcss-discard-empty@5.1.1(postcss@8.4.39):
     dependencies:
       postcss: 8.4.39
 
-  postcss-discard-empty@6.0.0(postcss@8.4.45):
+  postcss-discard-empty@6.0.0(postcss@8.4.39):
     dependencies:
-      postcss: 8.4.45
+      postcss: 8.4.39
 
   postcss-discard-overridden@5.1.0(postcss@8.4.39):
     dependencies:
       postcss: 8.4.39
 
-  postcss-discard-overridden@6.0.0(postcss@8.4.45):
+  postcss-discard-overridden@6.0.0(postcss@8.4.39):
     dependencies:
-      postcss: 8.4.45
+      postcss: 8.4.39
 
   postcss-double-position-gradients@1.0.0:
     dependencies:
@@ -31005,7 +30444,7 @@ snapshots:
     dependencies:
       htmlparser2: 3.10.1
       postcss: 7.0.39
-      postcss-syntax: 0.36.2(postcss-html@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-jsx@0.36.4)(postcss-less@3.1.4)(postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-scss@2.1.1)(postcss@7.0.39)
+      postcss-syntax: 0.36.2(postcss-html@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-jsx@0.36.4(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-less@3.1.4)(postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-scss@2.1.1)(postcss@7.0.39)
 
   postcss-image-set-function@3.0.1:
     dependencies:
@@ -31020,7 +30459,7 @@ snapshots:
     dependencies:
       '@babel/core': 7.23.2
       postcss: 7.0.39
-      postcss-syntax: 0.36.2(postcss-html@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-jsx@0.36.4)(postcss-less@3.1.4)(postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-scss@2.1.1)(postcss@7.0.39)
+      postcss-syntax: 0.36.2(postcss-html@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-jsx@0.36.4(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-less@3.1.4)(postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-scss@2.1.1)(postcss@7.0.39)
     transitivePeerDependencies:
       - supports-color
 
@@ -31034,16 +30473,16 @@ snapshots:
     dependencies:
       postcss: 7.0.39
 
-  postcss-less@6.0.0(postcss@8.4.45):
+  postcss-less@6.0.0(postcss@8.4.39):
     dependencies:
-      postcss: 8.4.45
+      postcss: 8.4.39
 
-  postcss-load-config@3.1.4(postcss@8.4.45):
+  postcss-load-config@3.1.4(postcss@8.4.39):
     dependencies:
       lilconfig: 2.1.0
       yaml: 1.10.2
     optionalDependencies:
-      postcss: 8.4.45
+      postcss: 8.4.39
 
   postcss-load-config@4.0.1(postcss@8.4.39):
     dependencies:
@@ -31076,7 +30515,7 @@ snapshots:
   postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39):
     dependencies:
       postcss: 7.0.39
-      postcss-syntax: 0.36.2(postcss-html@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-jsx@0.36.4)(postcss-less@3.1.4)(postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-scss@2.1.1)(postcss@7.0.39)
+      postcss-syntax: 0.36.2(postcss-html@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-jsx@0.36.4(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-less@3.1.4)(postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-scss@2.1.1)(postcss@7.0.39)
       remark: 10.0.1
       unist-util-find-all-after: 1.0.5
 
@@ -31092,11 +30531,11 @@ snapshots:
       postcss-value-parser: 4.2.0
       stylehacks: 5.1.1(postcss@8.4.39)
 
-  postcss-merge-longhand@6.0.0(postcss@8.4.45):
+  postcss-merge-longhand@6.0.0(postcss@8.4.39):
     dependencies:
-      postcss: 8.4.45
+      postcss: 8.4.39
       postcss-value-parser: 4.2.0
-      stylehacks: 6.0.0(postcss@8.4.45)
+      stylehacks: 6.0.0(postcss@8.4.39)
 
   postcss-merge-rules@5.1.4(postcss@8.4.39):
     dependencies:
@@ -31106,12 +30545,12 @@ snapshots:
       postcss: 8.4.39
       postcss-selector-parser: 6.0.13
 
-  postcss-merge-rules@6.0.1(postcss@8.4.45):
+  postcss-merge-rules@6.0.1(postcss@8.4.39):
     dependencies:
       browserslist: 4.22.1
       caniuse-api: 3.0.0
-      cssnano-utils: 4.0.0(postcss@8.4.45)
-      postcss: 8.4.45
+      cssnano-utils: 4.0.0(postcss@8.4.39)
+      postcss: 8.4.39
       postcss-selector-parser: 6.0.13
 
   postcss-minify-font-values@5.1.0(postcss@8.4.39):
@@ -31119,9 +30558,9 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-minify-font-values@6.0.0(postcss@8.4.45):
+  postcss-minify-font-values@6.0.0(postcss@8.4.39):
     dependencies:
-      postcss: 8.4.45
+      postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
   postcss-minify-gradients@5.1.1(postcss@8.4.39):
@@ -31131,11 +30570,11 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-minify-gradients@6.0.0(postcss@8.4.45):
+  postcss-minify-gradients@6.0.0(postcss@8.4.39):
     dependencies:
       colord: 2.9.3
-      cssnano-utils: 4.0.0(postcss@8.4.45)
-      postcss: 8.4.45
+      cssnano-utils: 4.0.0(postcss@8.4.39)
+      postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
   postcss-minify-params@5.1.4(postcss@8.4.39):
@@ -31145,11 +30584,11 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-minify-params@6.0.0(postcss@8.4.45):
+  postcss-minify-params@6.0.0(postcss@8.4.39):
     dependencies:
       browserslist: 4.22.1
-      cssnano-utils: 4.0.0(postcss@8.4.45)
-      postcss: 8.4.45
+      cssnano-utils: 4.0.0(postcss@8.4.39)
+      postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
   postcss-minify-selectors@5.2.1(postcss@8.4.39):
@@ -31157,9 +30596,9 @@ snapshots:
       postcss: 8.4.39
       postcss-selector-parser: 6.0.13
 
-  postcss-minify-selectors@6.0.0(postcss@8.4.45):
+  postcss-minify-selectors@6.0.0(postcss@8.4.39):
     dependencies:
-      postcss: 8.4.45
+      postcss: 8.4.39
       postcss-selector-parser: 6.0.13
 
   postcss-modules-extract-imports@3.0.0(postcss@8.4.39):
@@ -31200,18 +30639,18 @@ snapshots:
     dependencies:
       postcss: 8.4.39
 
-  postcss-normalize-charset@6.0.0(postcss@8.4.45):
+  postcss-normalize-charset@6.0.0(postcss@8.4.39):
     dependencies:
-      postcss: 8.4.45
+      postcss: 8.4.39
 
   postcss-normalize-display-values@5.1.0(postcss@8.4.39):
     dependencies:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-display-values@6.0.0(postcss@8.4.45):
+  postcss-normalize-display-values@6.0.0(postcss@8.4.39):
     dependencies:
-      postcss: 8.4.45
+      postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
   postcss-normalize-positions@5.1.1(postcss@8.4.39):
@@ -31219,9 +30658,9 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-positions@6.0.0(postcss@8.4.45):
+  postcss-normalize-positions@6.0.0(postcss@8.4.39):
     dependencies:
-      postcss: 8.4.45
+      postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
   postcss-normalize-repeat-style@5.1.1(postcss@8.4.39):
@@ -31229,9 +30668,9 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-repeat-style@6.0.0(postcss@8.4.45):
+  postcss-normalize-repeat-style@6.0.0(postcss@8.4.39):
     dependencies:
-      postcss: 8.4.45
+      postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
   postcss-normalize-string@5.1.0(postcss@8.4.39):
@@ -31239,9 +30678,9 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-string@6.0.0(postcss@8.4.45):
+  postcss-normalize-string@6.0.0(postcss@8.4.39):
     dependencies:
-      postcss: 8.4.45
+      postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
   postcss-normalize-timing-functions@5.1.0(postcss@8.4.39):
@@ -31249,9 +30688,9 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-timing-functions@6.0.0(postcss@8.4.45):
+  postcss-normalize-timing-functions@6.0.0(postcss@8.4.39):
     dependencies:
-      postcss: 8.4.45
+      postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
   postcss-normalize-unicode@5.1.1(postcss@8.4.39):
@@ -31260,10 +30699,10 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-unicode@6.0.0(postcss@8.4.45):
+  postcss-normalize-unicode@6.0.0(postcss@8.4.39):
     dependencies:
       browserslist: 4.22.1
-      postcss: 8.4.45
+      postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
   postcss-normalize-url@5.1.0(postcss@8.4.39):
@@ -31272,9 +30711,9 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-url@6.0.0(postcss@8.4.45):
+  postcss-normalize-url@6.0.0(postcss@8.4.39):
     dependencies:
-      postcss: 8.4.45
+      postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
   postcss-normalize-whitespace@5.1.1(postcss@8.4.39):
@@ -31282,9 +30721,9 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-whitespace@6.0.0(postcss@8.4.45):
+  postcss-normalize-whitespace@6.0.0(postcss@8.4.39):
     dependencies:
-      postcss: 8.4.45
+      postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
   postcss-ordered-values@5.1.3(postcss@8.4.39):
@@ -31293,10 +30732,10 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-ordered-values@6.0.0(postcss@8.4.45):
+  postcss-ordered-values@6.0.0(postcss@8.4.39):
     dependencies:
-      cssnano-utils: 4.0.0(postcss@8.4.45)
-      postcss: 8.4.45
+      cssnano-utils: 4.0.0(postcss@8.4.39)
+      postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
   postcss-overflow-shorthand@2.0.0:
@@ -31369,20 +30808,20 @@ snapshots:
       caniuse-api: 3.0.0
       postcss: 8.4.39
 
-  postcss-reduce-initial@6.0.0(postcss@8.4.45):
+  postcss-reduce-initial@6.0.0(postcss@8.4.39):
     dependencies:
       browserslist: 4.22.1
       caniuse-api: 3.0.0
-      postcss: 8.4.45
+      postcss: 8.4.39
 
   postcss-reduce-transforms@5.1.0(postcss@8.4.39):
     dependencies:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-reduce-transforms@6.0.0(postcss@8.4.45):
+  postcss-reduce-transforms@6.0.0(postcss@8.4.39):
     dependencies:
-      postcss: 8.4.45
+      postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
   postcss-replace-overflow-wrap@3.0.0:
@@ -31453,9 +30892,9 @@ snapshots:
       lodash: 4.17.21
       postcss: 7.0.39
 
-  postcss-sorting@8.0.2(postcss@8.4.45):
+  postcss-sorting@8.0.2(postcss@8.4.39):
     dependencies:
-      postcss: 8.4.45
+      postcss: 8.4.39
 
   postcss-svgo@5.1.0(postcss@8.4.39):
     dependencies:
@@ -31463,13 +30902,13 @@ snapshots:
       postcss-value-parser: 4.2.0
       svgo: 2.8.0
 
-  postcss-svgo@6.0.0(postcss@8.4.45):
+  postcss-svgo@6.0.0(postcss@8.4.39):
     dependencies:
-      postcss: 8.4.45
+      postcss: 8.4.39
       postcss-value-parser: 4.2.0
       svgo: 3.0.2
 
-  postcss-syntax@0.36.2(postcss-html@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-jsx@0.36.4)(postcss-less@3.1.4)(postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-scss@2.1.1)(postcss@7.0.39):
+  postcss-syntax@0.36.2(postcss-html@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-jsx@0.36.4(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-less@3.1.4)(postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-scss@2.1.1)(postcss@7.0.39):
     dependencies:
       postcss: 7.0.39
     optionalDependencies:
@@ -31484,9 +30923,9 @@ snapshots:
       postcss: 8.4.39
       postcss-selector-parser: 6.0.13
 
-  postcss-unique-selectors@6.0.0(postcss@8.4.45):
+  postcss-unique-selectors@6.0.0(postcss@8.4.39):
     dependencies:
-      postcss: 8.4.45
+      postcss: 8.4.39
       postcss-selector-parser: 6.0.13
 
   postcss-value-parser@3.3.1: {}
@@ -31536,6 +30975,7 @@ snapshots:
       nanoid: 3.3.7
       picocolors: 1.0.1
       source-map-js: 1.2.0
+    optional: true
 
   preact@10.18.2: {}
 
@@ -31896,8 +31336,6 @@ snapshots:
     dependencies:
       safe-buffer: 5.2.1
 
-  range-parser@1.2.0: {}
-
   range-parser@1.2.1: {}
 
   raw-body@2.5.1:
@@ -32166,11 +31604,6 @@ snapshots:
       unicode-match-property-ecmascript: 2.0.0
       unicode-match-property-value-ecmascript: 2.1.0
 
-  registry-auth-token@3.3.2:
-    dependencies:
-      rc: 1.2.8
-      safe-buffer: 5.2.1
-
   registry-auth-token@3.4.0:
     dependencies:
       rc: 1.2.8
@@ -32725,17 +32158,6 @@ snapshots:
     dependencies:
       randombytes: 2.1.0
 
-  serve-handler@6.1.3:
-    dependencies:
-      bytes: 3.0.0
-      content-disposition: 0.5.2
-      fast-url-parser: 1.1.3
-      mime-types: 2.1.18
-      minimatch: 3.0.4
-      path-is-inside: 1.0.2
-      path-to-regexp: 2.2.1
-      range-parser: 1.2.0
-
   serve-index@1.9.1:
     dependencies:
       accepts: 1.3.8
@@ -32757,20 +32179,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  serve@13.0.4:
-    dependencies:
-      '@zeit/schemas': 2.6.0
-      ajv: 6.12.6
-      arg: 2.0.0
-      boxen: 5.1.2
-      chalk: 2.4.1
-      clipboardy: 2.3.0
-      compression: 1.7.3
-      serve-handler: 6.1.3
-      update-check: 1.5.2
-    transitivePeerDependencies:
-      - supports-color
-
   set-blocking@2.0.0: {}
 
   set-function-length@1.2.2:
@@ -33400,10 +32808,10 @@ snapshots:
       postcss: 8.4.39
       postcss-selector-parser: 6.0.13
 
-  stylehacks@6.0.0(postcss@8.4.45):
+  stylehacks@6.0.0(postcss@8.4.39):
     dependencies:
       browserslist: 4.22.1
-      postcss: 8.4.45
+      postcss: 8.4.39
       postcss-selector-parser: 6.0.13
 
   stylelint-config-rational-order@0.1.2:
@@ -33585,7 +32993,7 @@ snapshots:
       postcss-sass: 0.3.5
       postcss-scss: 2.1.1
       postcss-selector-parser: 3.1.2
-      postcss-syntax: 0.36.2(postcss-html@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-jsx@0.36.4)(postcss-less@3.1.4)(postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-scss@2.1.1)(postcss@7.0.39)
+      postcss-syntax: 0.36.2(postcss-html@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-jsx@0.36.4(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-less@3.1.4)(postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-scss@2.1.1)(postcss@7.0.39)
       postcss-value-parser: 3.3.1
       resolve-from: 4.0.0
       signal-exit: 3.0.7
@@ -34342,11 +33750,6 @@ snapshots:
       escalade: 3.1.1
       picocolors: 1.0.1
 
-  update-check@1.5.2:
-    dependencies:
-      registry-auth-token: 3.3.2
-      registry-url: 3.1.0
-
   update-notifier@5.1.0:
     dependencies:
       boxen: 5.1.2
@@ -34642,19 +34045,6 @@ snapshots:
       sugarss: 2.0.0
       terser: 5.24.0
 
-  vite@5.4.2(@types/node@16.18.83)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0):
-    dependencies:
-      esbuild: 0.21.5
-      postcss: 8.4.41
-      rollup: 4.21.1
-    optionalDependencies:
-      '@types/node': 16.18.83
-      fsevents: 2.3.3
-      less: 4.2.0
-      sass: 1.69.5
-      sugarss: 2.0.0
-      terser: 5.24.0
-
   vite@5.4.2(@types/node@18.18.9)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0):
     dependencies:
       esbuild: 0.21.5
@@ -34895,11 +34285,6 @@ snapshots:
     dependencies:
       vue: 3.4.15(typescript@5.4.2)
 
-  vue-tsc@0.38.9(typescript@5.4.2):
-    dependencies:
-      '@volar/vue-typescript': 0.38.9
-      typescript: 5.4.2
-
   vue-tsc@1.8.25(typescript@5.4.2)(vue@2.7.16):
     dependencies:
       '@volar/typescript': 1.11.1

From 12be53f9ef5b214de1f4ae0a6b0e3d19343500bd Mon Sep 17 00:00:00 2001
From: juliodialpad <julio.ortega@dialpad.com>
Date: Fri, 13 Sep 2024 13:36:07 -0600
Subject: [PATCH 3/6] add dt-combinator package

Signed-off-by: Julio Ortega <julio.ortega@dialpad.com>
---
 .markdownlintignore                           |    1 +
 .stylelintignore                              |    1 +
 lint-staged.config.cjs                        |    6 +-
 packages/combinator/.eslintignore             |    5 +
 packages/combinator/.eslintrc.js              |   55 +
 .../documentation/COMMIT_CONVENTION.md        |   85 +
 .../.github/documentation/CONTRIBUTING.md     |   97 +
 .../.github/documentation/FUTURE_ADDITIONS.md |   83 +
 .../.github/documentation/KNOWN_ISSUES.md     |   16 +
 .../.github/documentation/OVERVIEW.md         |  188 +
 .../.github/documentation/RELEASING.md        |   31 +
 .../combinator/.github/documentation/USAGE.md |  217 ++
 .../documentation/internal/CODE_PANEL.md      |   65 +
 .../documentation/internal/CONTROLS.md        |  110 +
 .../documentation/internal/OPTION_BAR.md      |  101 +
 .../documentation/internal/RENDERER.md        |   20 +
 .../.github/documentation/internal/SYSTEM.md  |  225 ++
 .../.github/pull_request_template.md          |   11 +
 .../.github/workflows/deploy-preview.yml      |   57 +
 .../combinator/.github/workflows/deploy.yml   |   40 +
 .../combinator/.github/workflows/linter.yml   |   36 +
 .../.github/workflows/unit-tests.yml          |   37 +
 packages/combinator/.gitignore                |   28 +
 packages/combinator/LICENSE.md                |   21 +
 packages/combinator/README.md                 |   44 +
 packages/combinator/index.js                  |    3 +
 packages/combinator/package.json              |   55 +
 packages/combinator/public/index.html         |   12 +
 packages/combinator/release.sh                |    4 +
 packages/combinator/src/App.vue               |  150 +
 packages/combinator/src/assets/dialtone.less  |    1 +
 .../combinator/src/assets/themes/base.less    |   21 +
 .../combinator/src/assets/themes/dark.less    |   26 +
 .../combinator/src/assets/themes/light.less   |   16 +
 .../src/assets/themes/scheme/base.less        |    5 +
 .../src/assets/themes/scheme/highlight.less   |    8 +
 .../assets/themes/scheme/highlight_light.less |    8 +
 .../themes/scheme/highlight_variables.less    |    5 +
 .../src/assets/themes/scheme/mono.less        |    7 +
 .../combinator/src/assets/transitions.less    |   17 +
 packages/combinator/src/base.test.js          |   12 +
 .../components/code_editor/code_editor.vue    |  174 +
 .../code_editor/code_editor_closing_tag.vue   |   26 +
 .../code_editor/code_editor_element.vue       |   44 +
 .../code_editor/code_editor_indent.vue        |   38 +
 .../code_editor/code_editor_input.vue         |   31 +
 .../code_editor/code_editor_opening_tag.vue   |   30 +
 .../code_editor/code_editor_slot.vue          |   74 +
 .../code_editor/code_editor_tag.vue           |   24 +
 .../code_editor_tag_attributes.vue            |  141 +
 .../src/components/code_panel/code_panel.vue  |  127 +
 .../src/components/combinator.test.js         |   36 +
 .../combinator/src/components/combinator.vue  |  395 ++
 .../components/controls/control_array.test.js |   63 +
 .../src/components/controls/control_array.vue |   62 +
 .../components/controls/control_base.test.js  |   18 +
 .../src/components/controls/control_base.vue  |   36 +
 .../controls/control_boolean.test.js          |   56 +
 .../components/controls/control_boolean.vue   |   51 +
 .../controls/control_dynamic.test.js          |   93 +
 .../components/controls/control_dynamic.vue   |  135 +
 .../components/controls/control_event.test.js |   18 +
 .../src/components/controls/control_event.vue |   14 +
 .../controls/control_iterable.test.js         |   23 +
 .../components/controls/control_iterable.vue  |  136 +
 .../controls/control_nullish.test.js          |   58 +
 .../components/controls/control_nullish.vue   |   58 +
 .../controls/control_number.test.js           |   56 +
 .../components/controls/control_number.vue    |   65 +
 .../controls/control_object.test.js           |   81 +
 .../components/controls/control_object.vue    |  124 +
 .../controls/control_selection.test.js        |   65 +
 .../components/controls/control_selection.vue |   57 +
 .../components/controls/control_slot.test.js  |   56 +
 .../src/components/controls/control_slot.vue  |   46 +
 .../controls/control_string.test.js           |   60 +
 .../components/controls/control_string.vue    |   61 +
 .../controls/control_suggestion.vue           |  120 +
 .../event_console/event_console.test.js       |   18 +
 .../event_console/event_console.vue           |   78 +
 .../event_console/event_console_array.vue     |   41 +
 .../event_console/event_console_element.vue   |   39 +
 .../event_console/event_console_function.vue  |   12 +
 .../event_console/event_console_lazy_load.vue |   60 +
 .../event_console/event_console_object.vue    |   53 +
 .../event_console/event_console_pair.vue      |   70 +
 .../event_console/event_console_string.vue    |   24 +
 .../event_console/event_console_value.vue     |   34 +
 .../src/components/header/header.vue          |   84 +
 .../src/components/option_bar/option_bar.vue  |  170 +
 .../option_bar/option_bar_control.test.js     |   47 +
 .../option_bar/option_bar_control.vue         |  187 +
 .../option_bar_control_selector.vue           |  130 +
 .../option_bar_member_group.test.js           |   59 +
 .../option_bar/option_bar_member_group.vue    |  222 ++
 .../src/components/renderer/renderer.vue      |  151 +
 .../renderer/renderer_button_bar.vue          |   43 +
 .../src/components/renderer/renderer_menu.vue |  111 +
 .../components/renderer/renderer_target.vue   |  120 +
 .../settings_menu/settings_menu.vue           |  134 +
 .../src/components/tools/button_bar.vue       |   43 +
 .../combinator/src/components/tools/node.vue  |   23 +
 .../src/components/tools/overlay.vue          |   16 +
 .../src/components/tools/section.vue          |   62 +
 .../src/components/tools/tab_panel.vue        |   83 +
 packages/combinator/src/lib/constants.js      |   18 +
 packages/combinator/src/lib/control.js        |  132 +
 packages/combinator/src/lib/convert.js        |   85 +
 packages/combinator/src/lib/info.js           |  175 +
 packages/combinator/src/lib/info_extend.js    |   73 +
 packages/combinator/src/lib/ordered_object.js |   80 +
 packages/combinator/src/lib/parse.js          |   21 +
 .../combinator/src/lib/test/utils_test.js     |   15 +
 packages/combinator/src/lib/utils.js          |  117 +
 packages/combinator/src/lib/utils_vue.js      |   86 +
 packages/combinator/src/main.js               |    4 +
 packages/combinator/src/settings.json         |   15 +
 .../combinator/src/supported_components.json  |   21 +
 packages/combinator/src/variants/variants.js  |   29 +
 .../combinator/src/variants/variants_badge.js |    9 +
 .../src/variants/variants_breadcrumbs.js      |   15 +
 .../src/variants/variants_button.js           |  113 +
 .../src/variants/variants_checkbox.js         |    9 +
 .../combinator/src/variants/variants_chip.js  |    9 +
 .../combinator/src/variants/variants_input.js |   14 +
 .../combinator/src/variants/variants_link.js  |   14 +
 .../src/variants/variants_notice.js           |   19 +
 .../combinator/src/variants/variants_radio.js |    9 +
 .../src/variants/variants_select_menu.js      |   21 +
 .../combinator/src/variants/variants_toast.js |   22 +
 .../src/variants/variants_toggle.js           |    9 +
 packages/combinator/vue.config.js             |   18 +
 pnpm-lock.yaml                                | 3251 ++++++++++++-----
 133 files changed, 10359 insertions(+), 840 deletions(-)
 create mode 100644 packages/combinator/.eslintignore
 create mode 100644 packages/combinator/.eslintrc.js
 create mode 100644 packages/combinator/.github/documentation/COMMIT_CONVENTION.md
 create mode 100644 packages/combinator/.github/documentation/CONTRIBUTING.md
 create mode 100644 packages/combinator/.github/documentation/FUTURE_ADDITIONS.md
 create mode 100644 packages/combinator/.github/documentation/KNOWN_ISSUES.md
 create mode 100644 packages/combinator/.github/documentation/OVERVIEW.md
 create mode 100644 packages/combinator/.github/documentation/RELEASING.md
 create mode 100644 packages/combinator/.github/documentation/USAGE.md
 create mode 100644 packages/combinator/.github/documentation/internal/CODE_PANEL.md
 create mode 100644 packages/combinator/.github/documentation/internal/CONTROLS.md
 create mode 100644 packages/combinator/.github/documentation/internal/OPTION_BAR.md
 create mode 100644 packages/combinator/.github/documentation/internal/RENDERER.md
 create mode 100644 packages/combinator/.github/documentation/internal/SYSTEM.md
 create mode 100644 packages/combinator/.github/pull_request_template.md
 create mode 100644 packages/combinator/.github/workflows/deploy-preview.yml
 create mode 100644 packages/combinator/.github/workflows/deploy.yml
 create mode 100644 packages/combinator/.github/workflows/linter.yml
 create mode 100644 packages/combinator/.github/workflows/unit-tests.yml
 create mode 100644 packages/combinator/.gitignore
 create mode 100644 packages/combinator/LICENSE.md
 create mode 100644 packages/combinator/README.md
 create mode 100644 packages/combinator/index.js
 create mode 100644 packages/combinator/package.json
 create mode 100644 packages/combinator/public/index.html
 create mode 100755 packages/combinator/release.sh
 create mode 100644 packages/combinator/src/App.vue
 create mode 100644 packages/combinator/src/assets/dialtone.less
 create mode 100644 packages/combinator/src/assets/themes/base.less
 create mode 100644 packages/combinator/src/assets/themes/dark.less
 create mode 100644 packages/combinator/src/assets/themes/light.less
 create mode 100644 packages/combinator/src/assets/themes/scheme/base.less
 create mode 100644 packages/combinator/src/assets/themes/scheme/highlight.less
 create mode 100644 packages/combinator/src/assets/themes/scheme/highlight_light.less
 create mode 100644 packages/combinator/src/assets/themes/scheme/highlight_variables.less
 create mode 100644 packages/combinator/src/assets/themes/scheme/mono.less
 create mode 100644 packages/combinator/src/assets/transitions.less
 create mode 100644 packages/combinator/src/base.test.js
 create mode 100644 packages/combinator/src/components/code_editor/code_editor.vue
 create mode 100644 packages/combinator/src/components/code_editor/code_editor_closing_tag.vue
 create mode 100644 packages/combinator/src/components/code_editor/code_editor_element.vue
 create mode 100644 packages/combinator/src/components/code_editor/code_editor_indent.vue
 create mode 100644 packages/combinator/src/components/code_editor/code_editor_input.vue
 create mode 100644 packages/combinator/src/components/code_editor/code_editor_opening_tag.vue
 create mode 100644 packages/combinator/src/components/code_editor/code_editor_slot.vue
 create mode 100644 packages/combinator/src/components/code_editor/code_editor_tag.vue
 create mode 100644 packages/combinator/src/components/code_editor/code_editor_tag_attributes.vue
 create mode 100644 packages/combinator/src/components/code_panel/code_panel.vue
 create mode 100644 packages/combinator/src/components/combinator.test.js
 create mode 100644 packages/combinator/src/components/combinator.vue
 create mode 100644 packages/combinator/src/components/controls/control_array.test.js
 create mode 100644 packages/combinator/src/components/controls/control_array.vue
 create mode 100644 packages/combinator/src/components/controls/control_base.test.js
 create mode 100644 packages/combinator/src/components/controls/control_base.vue
 create mode 100644 packages/combinator/src/components/controls/control_boolean.test.js
 create mode 100644 packages/combinator/src/components/controls/control_boolean.vue
 create mode 100644 packages/combinator/src/components/controls/control_dynamic.test.js
 create mode 100644 packages/combinator/src/components/controls/control_dynamic.vue
 create mode 100644 packages/combinator/src/components/controls/control_event.test.js
 create mode 100644 packages/combinator/src/components/controls/control_event.vue
 create mode 100644 packages/combinator/src/components/controls/control_iterable.test.js
 create mode 100644 packages/combinator/src/components/controls/control_iterable.vue
 create mode 100644 packages/combinator/src/components/controls/control_nullish.test.js
 create mode 100644 packages/combinator/src/components/controls/control_nullish.vue
 create mode 100644 packages/combinator/src/components/controls/control_number.test.js
 create mode 100644 packages/combinator/src/components/controls/control_number.vue
 create mode 100644 packages/combinator/src/components/controls/control_object.test.js
 create mode 100644 packages/combinator/src/components/controls/control_object.vue
 create mode 100644 packages/combinator/src/components/controls/control_selection.test.js
 create mode 100644 packages/combinator/src/components/controls/control_selection.vue
 create mode 100644 packages/combinator/src/components/controls/control_slot.test.js
 create mode 100644 packages/combinator/src/components/controls/control_slot.vue
 create mode 100644 packages/combinator/src/components/controls/control_string.test.js
 create mode 100644 packages/combinator/src/components/controls/control_string.vue
 create mode 100644 packages/combinator/src/components/controls/control_suggestion.vue
 create mode 100644 packages/combinator/src/components/event_console/event_console.test.js
 create mode 100644 packages/combinator/src/components/event_console/event_console.vue
 create mode 100644 packages/combinator/src/components/event_console/event_console_array.vue
 create mode 100644 packages/combinator/src/components/event_console/event_console_element.vue
 create mode 100644 packages/combinator/src/components/event_console/event_console_function.vue
 create mode 100644 packages/combinator/src/components/event_console/event_console_lazy_load.vue
 create mode 100644 packages/combinator/src/components/event_console/event_console_object.vue
 create mode 100644 packages/combinator/src/components/event_console/event_console_pair.vue
 create mode 100644 packages/combinator/src/components/event_console/event_console_string.vue
 create mode 100644 packages/combinator/src/components/event_console/event_console_value.vue
 create mode 100644 packages/combinator/src/components/header/header.vue
 create mode 100644 packages/combinator/src/components/option_bar/option_bar.vue
 create mode 100644 packages/combinator/src/components/option_bar/option_bar_control.test.js
 create mode 100644 packages/combinator/src/components/option_bar/option_bar_control.vue
 create mode 100644 packages/combinator/src/components/option_bar/option_bar_control_selector.vue
 create mode 100644 packages/combinator/src/components/option_bar/option_bar_member_group.test.js
 create mode 100644 packages/combinator/src/components/option_bar/option_bar_member_group.vue
 create mode 100644 packages/combinator/src/components/renderer/renderer.vue
 create mode 100644 packages/combinator/src/components/renderer/renderer_button_bar.vue
 create mode 100644 packages/combinator/src/components/renderer/renderer_menu.vue
 create mode 100644 packages/combinator/src/components/renderer/renderer_target.vue
 create mode 100644 packages/combinator/src/components/settings_menu/settings_menu.vue
 create mode 100644 packages/combinator/src/components/tools/button_bar.vue
 create mode 100644 packages/combinator/src/components/tools/node.vue
 create mode 100644 packages/combinator/src/components/tools/overlay.vue
 create mode 100644 packages/combinator/src/components/tools/section.vue
 create mode 100644 packages/combinator/src/components/tools/tab_panel.vue
 create mode 100644 packages/combinator/src/lib/constants.js
 create mode 100644 packages/combinator/src/lib/control.js
 create mode 100644 packages/combinator/src/lib/convert.js
 create mode 100644 packages/combinator/src/lib/info.js
 create mode 100644 packages/combinator/src/lib/info_extend.js
 create mode 100644 packages/combinator/src/lib/ordered_object.js
 create mode 100644 packages/combinator/src/lib/parse.js
 create mode 100644 packages/combinator/src/lib/test/utils_test.js
 create mode 100644 packages/combinator/src/lib/utils.js
 create mode 100644 packages/combinator/src/lib/utils_vue.js
 create mode 100644 packages/combinator/src/main.js
 create mode 100644 packages/combinator/src/settings.json
 create mode 100644 packages/combinator/src/supported_components.json
 create mode 100644 packages/combinator/src/variants/variants.js
 create mode 100644 packages/combinator/src/variants/variants_badge.js
 create mode 100644 packages/combinator/src/variants/variants_breadcrumbs.js
 create mode 100644 packages/combinator/src/variants/variants_button.js
 create mode 100644 packages/combinator/src/variants/variants_checkbox.js
 create mode 100644 packages/combinator/src/variants/variants_chip.js
 create mode 100644 packages/combinator/src/variants/variants_input.js
 create mode 100644 packages/combinator/src/variants/variants_link.js
 create mode 100644 packages/combinator/src/variants/variants_notice.js
 create mode 100644 packages/combinator/src/variants/variants_radio.js
 create mode 100644 packages/combinator/src/variants/variants_select_menu.js
 create mode 100644 packages/combinator/src/variants/variants_toast.js
 create mode 100644 packages/combinator/src/variants/variants_toggle.js
 create mode 100644 packages/combinator/vue.config.js

diff --git a/.markdownlintignore b/.markdownlintignore
index cab567185e..fa4e786ec4 100644
--- a/.markdownlintignore
+++ b/.markdownlintignore
@@ -1,3 +1,4 @@
 CHANGELOG.md
 node_modules
 dist
+packages/combinator
\ No newline at end of file
diff --git a/.stylelintignore b/.stylelintignore
index b94cd2c9ca..61f4d380fe 100644
--- a/.stylelintignore
+++ b/.stylelintignore
@@ -1,2 +1,3 @@
 packages/dialtone-css/lib/build/less/utilities
 packages/dialtone-css/lib/build/less/dialtone-reset.less
+packages/combinator
diff --git a/lint-staged.config.cjs b/lint-staged.config.cjs
index 11755a5a22..6ded8d1c4b 100644
--- a/lint-staged.config.cjs
+++ b/lint-staged.config.cjs
@@ -3,9 +3,9 @@ module.exports = {
     'pnpm exec eslint --fix',
   ],
   '*.less': [
-    'pnpm exec stylelint --fix'
+    'pnpm exec stylelint --fix --allow-empty-input',
   ],
   '*.{md, mdx}': [
-    'pnpm exec markdownlint'
-  ]
+    'pnpm exec markdownlint',
+  ],
 };
diff --git a/packages/combinator/.eslintignore b/packages/combinator/.eslintignore
new file mode 100644
index 0000000000..60ba8fe74c
--- /dev/null
+++ b/packages/combinator/.eslintignore
@@ -0,0 +1,5 @@
+# build
+dist
+
+# dependencies
+node_modules
diff --git a/packages/combinator/.eslintrc.js b/packages/combinator/.eslintrc.js
new file mode 100644
index 0000000000..8b2a5d97c6
--- /dev/null
+++ b/packages/combinator/.eslintrc.js
@@ -0,0 +1,55 @@
+module.exports = {
+  extends: [
+    'standard',
+    'semistandard',
+    'plugin:jsdoc/recommended',
+    'plugin:vue/vue3-recommended',
+    'plugin:vuejs-accessibility/recommended',
+  ],
+  env: {
+    browser: true,
+    node: true,
+    amd: true,
+  },
+  rules: {
+    'max-len': ['error', {
+      code: 120,
+      tabWidth: 2,
+    }],
+    quotes: ['error', 'single', { allowTemplateLiterals: true }],
+    'comma-dangle': ['error', 'always-multiline'],
+    'import/no-named-default': 0,
+    'vue/comma-dangle': ['error', 'always-multiline'],
+    'vue/comma-spacing': ['error', { before: false, after: true }],
+    'vue/comma-style': ['error', 'last'],
+    'vue/no-v-for-template-key': 0,
+    'vue/no-v-html': 0,
+    'vue/no-v-model-argument': 0,
+    'jsdoc/require-jsdoc': 0,
+    'jsdoc/no-undefined-types': 0,
+    'jsdoc/require-hyphen-before-param-description': 1,
+  },
+  overrides: [
+    {
+      files: ['**/*.test.js', 'src/lib/test/*.js'],
+      plugins: [
+        'mocha',
+      ],
+      extends: [
+        'plugin:mocha/recommended',
+      ],
+      env: {
+        browser: true,
+        node: true,
+        mocha: true,
+      },
+      rules: {
+        'max-lines': 'off',
+        'mocha/no-setup-in-describe': 'off',
+        'mocha/no-exclusive-tests': 'error',
+        'mocha/no-hooks-for-single-case': 'off',
+        'mocha/no-exports': 0,
+      },
+    },
+  ],
+};
diff --git a/packages/combinator/.github/documentation/COMMIT_CONVENTION.md b/packages/combinator/.github/documentation/COMMIT_CONVENTION.md
new file mode 100644
index 0000000000..d3a1267dd0
--- /dev/null
+++ b/packages/combinator/.github/documentation/COMMIT_CONVENTION.md
@@ -0,0 +1,85 @@
+## Git Commit Message Convention
+
+Dialtone Combinator uses
+[Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/)
+for the commit messages in the release branches: `staging`.
+
+When opening a PR, ensure the PR's title also complies with the Conventional Commits specification.
+This way, if your PR is merged using squash strategy, the PR's title will be used as the commit message
+except when your PR contains a single commit, in this case Github will use this commit for the commit message when your
+PR is merged, so in this case to meet the convention on the single commit of your PR is required.
+
+Consult
+[the rules](https://github.com/conventional-changelog/commitlint/tree/master/%40commitlint/config-conventional#rules)
+that are considered problems in the commit message.
+
+Each commit message consists of a **header**, a **body**, and a **footer**.
+
+```txt
+<header>
+<BLANK LINE>
+<body - optional>
+<BLANK LINE>
+<footer - optional>
+```
+
+The `header` is mandatory and has a **type**, **scope** (optional) and **subject**:
+
+```txt
+<type>(<scope - optional>): <subject>
+```
+
+### Type:
+
+Must be one of the following:
+
+* **build**: changes that affect the build system.
+* **chore**: general changes that don't fit in other types (code formatting, version changes).
+* **ci**: changes to the CI configuration, files and scripts.
+* **docs**: documentation changes.
+* **feat**: a new feature (corresponding with `MINOR` in SemVer).
+* **fix**: a bug fix (corresponding with `PATCH` in SemVer).
+* **perf**: performance improvements.
+* **refactor**: changes that neither fix a bug nor add a feature.
+* **revert**: changes that revert a commit.
+* **style**: not relevant changes (whitespace, code formatting, semicolons, etc).
+* **test**: changes that add or modify tests.
+
+### Scope:
+
+The optional scope allows to specify the place of the change.
+For instance, if the commit affects a specific component, use the component's name as scope:
+
+```txt
+feat(option-bar): add collapsible sections
+```
+
+### Subject:
+
+The subject contains a short description of the change:
+
+* use the imperative, present tense: "change" not "changed" nor "changes"
+* don't capitalize first letter
+* no dot (.) at the end of the sentence
+
+### Examples
+
+#### Commit message with only header
+
+```txt
+feat: add themes
+```
+
+#### Commit message with scope
+
+```txt
+feat(code-editor): add self-closing tag
+```
+
+#### Commit message with BREAKING CHANGE footer
+
+```txt
+feat: remove FEATURE
+
+BREAKING CHANGE: remove FEATURE used by PROJECTS
+```
diff --git a/packages/combinator/.github/documentation/CONTRIBUTING.md b/packages/combinator/.github/documentation/CONTRIBUTING.md
new file mode 100644
index 0000000000..0851f7bb60
--- /dev/null
+++ b/packages/combinator/.github/documentation/CONTRIBUTING.md
@@ -0,0 +1,97 @@
+# Contributing
+
+Before contributing to Dialtone Combinator, please check the [Jira backlog](https://switchcomm.atlassian.net/jira/software/projects/DT/boards/187/backlog) to see if there is already an issue for it and if not, add it.
+
+## Overview
+
+### What Is a Contribution?
+
+A contribution is any proposal, design, code, or documentation completed by someone not on the core Dialtone team, and released through Dialtone Combinator for other people to use. It can be created by anyone who'd like to help make Dialtone Combinator better.
+
+Types of contributions:
+
+- **Fix:** Fixes a technical or documentation defect.
+- **Enhancement:** Extends an existing component without changing the underlying architecture or behavior.
+- **New feature:** Adds something new, like a component.
+
+### Roles
+
+- **Contributor:** Has the ability to create PRs and merge their change into staging after at least one approving review.
+- **Maintainer:** A trusted contributor with the ability to release Dialtone.
+- **Admin:** Has the ability to change any configuration on the Dialtone repository and release Dialtone. Usually for members of the Dialtone team.
+
+## Making a Pull Request
+
+### Before Submitting
+
+Before submitting a pull request, make sure to communicate what you wish to change to the Dialtone team. The easiest way to do this is via the [#dialtone](https://dialpad.slack.com/messages/dialtone/) Slack channel. It's possible your change is already being worked on, has already been fixed, or maybe we just need to discuss the best solution to the problem. This prevents you from having to re-write your entire change, or even having to scrap it entirely.
+
+Any new components or updates to existing components require the following:
+
+- Unit tests covering the entire change.
+- Unit tests are passing locally.
+  - `npm run test`
+- Linters are passing locally.
+  - `npm run lint`
+- Library builds locally.
+  - `npm run build`
+- Preview builds locally.
+  - `npm run build:preview`
+
+### How to Submit
+
+After you have discussed your change with the Dialtone team, follow these steps to submit it:
+
+1. See [README.md](/README.md) for instructions on how to initially clone and run the project.
+2. First make sure you are on the `staging` branch with `git checkout staging`,
+   and that it is up to date with `git pull`.
+3. Create a personal branch to make your change off of `staging` with `git checkout -b my-change-branch`.
+   We use kebab-case for branch names.
+4. Make and commit your changes. Note our [commit message conventions](COMMIT_CONVENTION.md).
+5. Push your branch to remote. `git push -u origin my-change-branch`.
+8. Create a pull request into the `staging` branch, reviewers will be automatically added and notified of your PR.
+
+Once your change is in `staging` it will deploy and go live immediately.
+
+## Coding Guidelines
+
+### Accessibility in Mind
+
+Keep accessibility in mind for every new feature, improvement or bug fix you make.
+Always test your change with a screen reader and keyboard navigation if applicable.
+
+### Unit Testing
+*Unit testing is not implemented yet
+
+### Dialtone Usage
+We should attempt to use Dialtone utility classes and Dialtone vue components where applicable.
+
+### Breaking Changes
+
+Dialtone Combinator is a dependency of other projects so you must always be aware of making a breaking change.
+It is possible to make breaking changes, however if you do so you will need to update / verify all
+instances of usage of the component in reliant projects before updating.
+
+### Folder Structure
+See [OVERVIEW](OVERVIEW.md#folder-structure).
+
+## Commit Message Convention
+See [COMMIT_CONVENTION](COMMIT_CONVENTION.md).
+
+## Tooling
+
+### ESLint
+
+We use ESLint to promote best practices throughout our codebase.
+ESLint will check any of our javascript or vue code for styling or syntax errors.
+The configuration can be found in [.eslintrc.js](/.eslintrc.js).
+Any changes code changes you make will be automatically linted upon commit.
+You can manually run ESLint via `npm run lint`.
+
+### GitHub Actions
+
+[GitHub Actions](https://docs.github.com/en/actions) is what we use for our CI/CD solution.
+All GHA workflows are in the `.github/workflows` directory. Currently, we use GitHub Actions for the following:
+
+- Deploying a preview `.github/workflows/deploy.yml`, `.github/workflows/deploy-preview.yml`
+- Linting our files on pull request `.github/workflows/lint-pr.yml`.
diff --git a/packages/combinator/.github/documentation/FUTURE_ADDITIONS.md b/packages/combinator/.github/documentation/FUTURE_ADDITIONS.md
new file mode 100644
index 0000000000..78e5b4ccc0
--- /dev/null
+++ b/packages/combinator/.github/documentation/FUTURE_ADDITIONS.md
@@ -0,0 +1,83 @@
+# Future Additions
+
+## Add Supported Components
+
+A recent feature was added that allows Dialtone Vue components
+to be used in slots.
+
+[Pull Request](https://github.com/dialpad/dialtone-combinator/pull/14)
+
+This should allow some components to work as intended such as 'DtDropdown'.
+Any component that requires nesting of Dialtone Vue components now has the potential to
+be 'supported'.
+
+## Renderer Node Scoped Slots
+
+Add communication between the target component and the 'node' components in their slots
+when scoped slot data is present.
+
+There should be some sort of way to modify the renderer_target.vue `renderTarget()` 
+hyper-script function `h(...)` to provide the scoped slot data to slots containing
+dtc-node components.
+
+There is some 
+[existing documentation](https://vuejs.org/guide/extras/render-function.html#rendering-slots)
+about rendering hyper-script with scoped slots.
+
+## Icon Control
+
+A control could be added to allow quick selection of icons for the user.
+
+### Implementation
+
+Currently, all the library components and icons are passed to a single `library` prop. 
+Another prop `iconLibrary` could be implemented to allow icons to be passed in separately.
+
+The `library` prop and the `iconLibrary` prop could be merged and passed to the renderer.
+The `iconLibrary` prop could be passed to the icon control to allow.
+
+To know which members to allow the icon control, a custom `@icon` tag could be added
+to the dialtone-vue documentation. If a slot contains this `@icon` tag in its documentation
+it should allow either the default 'slot' control or 'icon' control to be selected, with
+the 'icon' control as the default.
+
+This can be implemented using `getSlotControls()` in option_bar.vue.
+
+## Class Control
+
+A control that allows quick selection and suggestions of dialtone utility classes.
+
+### Implementation
+
+Currently, the user can usually pass a string, array, or object to a 'class' prop
+(based on the prop type).
+
+A 'class' control could be implemented to replace these 3 controls for each class prop.
+
+A good idea would be to use the 'combobox with multiselect' Dialtone Vue recipe and
+somehow provide a list of all the dialtone utility classes as suggestions.
+
+There should also be functionality to allow the user to type in non dialtone classes
+which I think is already supported by the component.
+
+To know which members to allow the icon control, a custom `@class` tag could be added
+to the dialtone-vue documentation. If a prop contains this `@class` tag in its documentation
+it should disallow selection of the 'string' 'array' and 'object' controls and
+allow the 'class' control to be selected with 'class' being the default.
+
+This can be implemented using `getBindingControls()` in option_bar.vue, possibly even
+a new `getPropControls()` could be implemented to abstract the logic since
+this will only be possible for props.
+
+## Semantic Versioning (CI)
+
+Currently, releases have to be manually categorized. A semantic version
+implementation similar to Dialtone or Dialtone Vue would be good.
+
+## Sidebar Theming
+
+Currently, the theming only affects the code panel area and the renderer area.
+This was intended to be extended to the sidebar as well.
+
+This will allow the entire combinator to be dark mode or light mode, fitting into
+the consumer website and being able to match the theme.
diff --git a/packages/combinator/.github/documentation/KNOWN_ISSUES.md b/packages/combinator/.github/documentation/KNOWN_ISSUES.md
new file mode 100644
index 0000000000..0933c23f91
--- /dev/null
+++ b/packages/combinator/.github/documentation/KNOWN_ISSUES.md
@@ -0,0 +1,16 @@
+# Known Issues
+
+* Nested arrays and object controls will eventually run out of space.
+* Components that elevate to the highest level in dom can't be contained in the
+renderer such as 'DtBanner'. I think storybook uses an i-frame to resolve this issue.
+* Similarly, components that take focus and don't have close implemented will lock the
+entire site such as 'DtModal'.
+* 'DtSkeleton' animation doesn't seem to work
+* Code editor copy button doesn't work perfectly anymore with the new indentation system
+since flexbox and different containers are used.
+* A lot of components don't have any documentation generated for them such as 'DtRootLayout'
+preventing them from being supported even though they likely would be. They just need to be
+added to 'build_docs.js in dialtone-vue.
+* A lot of components are missing the `@values` tags such as 'DtLink' `kind` prop.
+  * Not just DtLink, a lot should be added
+* The `placeholder` attribute on 'DtInput' should be of type {string}, not {boolean}
\ No newline at end of file
diff --git a/packages/combinator/.github/documentation/OVERVIEW.md b/packages/combinator/.github/documentation/OVERVIEW.md
new file mode 100644
index 0000000000..da4ec0abae
--- /dev/null
+++ b/packages/combinator/.github/documentation/OVERVIEW.md
@@ -0,0 +1,188 @@
+# Overview
+
+The purpose of this document is to give an overview of the Dialtone Combinator project and
+help provide context for any contributors wanting to work on the project.
+
+If you are looking for documentation to implement Dialtone Combinator in an external project please see
+[USAGE](USAGE.md).
+
+## Documentation
+
+### Organizational
+
+Documentation for maintaining the project.
+
+[README](/README.md) \
+[CONTRIBUTING](CONTRIBUTING.md) \
+[RELEASING](RELEASING.md) \
+[COMMIT_CONVENTION](COMMIT_CONVENTION.md) \
+[FUTURE_ADDITIONS](FUTURE_ADDITIONS.md) \
+[KNOWN_ISSUES](KNOWN_ISSUES.md) \
+
+### Internal
+
+Documentation that describes the system architecture in-depth.
+
+[SYSTEM](internal/SYSTEM.md) \
+[RENDERER](internal/RENDERER.md) \
+[OPTION_BAR](internal/OPTION_BAR.md) \
+[CODE_PANEL](internal/CODE_PANEL.md)
+[CONTROLS](internal/CONTROLS.md)
+
+### External
+
+Documentation instructing how to implement into external projects.
+
+[USAGE](USAGE.md)
+
+## Terminology
+<pre style="line-height: 2.5em;">
+  <b>Root:</b> The root level component in 'combinator.vue'
+  <b>Preview:</b> The preview app in 'app.vue'
+  <b>Member:</b> An identifiable element of a component (Prop, attribute, slot, event)
+  <b>Binding:</b> A member that is bound to the component with `v-bind` (Prop, attribute)
+  <b>Attribute:</b> An HTML attribute
+  <b>Documentation:</b> The raw data generated by docgen
+  <b>Information / Info:</b> The central data object containing extended documentation data after parsing and processing
+  <b>Options:</b> The central data object containing key-value pairs for members and their values
+  <b>Control:</b> A control used for manipulating a value, usually a member value
+  <b>Target Component:</b> The component the combinator is using
+</pre>
+
+## Folder Structure
+<pre style="line-height: 2.5em;">
+  <b>/</b> Root project folder, primarily containing configuration files 
+
+  <b>/.github</b> The folder containing documentation and special GitHub files
+
+  <b>/dist</b> The local folder that contains the library and preview build output
+
+  <b>/public</b> The folder containing publicly accessible files for the preview app
+
+  <b>/src</b> The folder containing all internal project files
+
+  <b>⎣__/assets</b> The folder containing general assets and styling for vue
+
+  <b>⎣__/components</b> The root component folder that contains the root component ('Combinator.vue')
+  <b>⎣____/code_editor</b> The folder containing components for the code editor
+  <b>⎣____/code_panel</b> The folder containing components for the code panel
+  <b>⎣____/controls</b> The folder containing individual control components
+  <b>⎣____/event_console</b> The folder containing components for the event console
+  <b>⎣____/option_bar</b> The folder containing components for the code editor
+  <b>⎣____/renderer</b> The folder containing components for the renderer
+
+  <b>⎣__/lib</b> The main library folder for files containing utility functions in plain js
+
+  <b>⎣__/variants</b> The folder containing variants for specific components for the 'variantBank' export
+</pre>
+
+## Root System
+
+The Dialtone Combinator consists of three main components:
+* Renderer
+* Option bar
+* Code panel
+
+The Dialtone Combinator uses two main data objects:
+* Info
+* Options
+
+Data central to the system is stored in the root component and is communicated between child components.
+The system is designed with reactivity and extensibility in mind.
+
+The settings data object is also used to dictate global settings for the combinator.
+
+See [SYSTEM](internal/SYSTEM.md)
+
+## Supported Components
+
+Currently, not all Dialtone Vue components are working with the Combinator.
+
+A supported component is a component that is intended to be working with full functionality in the Combinator.
+
+Supported components are listed in [supported_components.json](/src/supported_components.json).
+These components are used by various tests to ensure they are working and future updates do not break them.
+
+When adding a new component to this list make sure it is working with all tests afterwards.
+
+## Docgen
+
+Documentation generated from the
+[dialtone-vue](https://github.com/dialpad/dialtone-vue)
+project is used to obtain extended information about the target components.
+This documentation is currently generated by the
+[vue-docgen-api](https://vue-styleguidist.github.io/docs/Docgen.html#api)
+which creates data based on code comments with the format indicated in the 'Vue Styleguidist'
+[Documenting components](https://vue-styleguidist.github.io/docs/Documenting.html#code-comments)
+section.
+
+### Usage
+
+Essential generated data that is used by the Combinator:
+* Code comments and tags
+    * Props
+    * Slots
+    * Emits
+* Default values
+* Valid values
+* Valid types
+* ...
+
+### Custom Tags
+
+Custom tags are required by the combinator to generate some additional documentation for the components.
+
+#### Attribute
+
+Used to indicate custom members that should be generated for HTML attributes.
+
+Format:
+```
+@property {TYPE} NAME attribute
+```
+
+Example:
+```js
+/**
+ * Base Vue component for Dialtone Buttons.
+ * @displayName DtButton
+ * @property {Boolean} disabled attribute
+ * @property {String} width attribute
+ */
+export default {
+  name: 'DtButton',
+  ...
+}
+```
+_Tags for disabled and width attributes on button component_
+
+Attributes should only ever be of type 'Boolean' or 'String' based on the
+[Mozilla reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes).
+
+#### Model
+
+Used to indicate the member is used in v-model, the reason is twofold:
+* Apply a custom badge to the member in the option bar
+* Docgen implicitly changes the name of the member if it is a prop to 'v-model'
+
+Format:
+```
+@model PROP
+```
+
+Example:
+```
+/**
+ * The value of the input
+ * @model value
+ */
+value: {
+  type: [String, Number, Boolean, Object],
+  default: null,
+},
+```
+
+The name of the prop is indicated in the model tag, so it can be changed back to its original name.
+This was being implemented at one point, however the
+[pull request](https://github.com/vue-styleguidist/vue-styleguidist/pull/1056)
+went stale and has closed.
diff --git a/packages/combinator/.github/documentation/RELEASING.md b/packages/combinator/.github/documentation/RELEASING.md
new file mode 100644
index 0000000000..52951f2bcb
--- /dev/null
+++ b/packages/combinator/.github/documentation/RELEASING.md
@@ -0,0 +1,31 @@
+# Releasing
+
+A release is required to update the npm package and provide an update for package users.
+
+## Access
+
+You must have the access token to write to the npm package.
+Make sure this is sourced before publishing the package.
+
+```
+source TOKEN_PATH
+```
+
+## Publish
+
+The package can be published by running the 'release.sh' script.
+This will increment the version and publish it to the npm registry.
+
+```
+npm run release
+```
+
+OR
+
+```
+./release.sh
+```
+
+It will prompt for the release version [major, minor, patch] and
+then build the package locally as well as publish it to the npm package 
+`@dialpad/dialtone-combinator`.
diff --git a/packages/combinator/.github/documentation/USAGE.md b/packages/combinator/.github/documentation/USAGE.md
new file mode 100644
index 0000000000..ae43f5d98c
--- /dev/null
+++ b/packages/combinator/.github/documentation/USAGE.md
@@ -0,0 +1,217 @@
+# Usage
+
+The purpose of this document is to instruct how to implement Dialtone Combinator in an external project.
+
+`$COMPONENT$` represents the component you want to combinate™ from Dialtone Vue.
+
+## Combinator
+_Required_
+
+### Import
+
+The combinator, a target component, and the Dialtone Vue component documentation
+must be imported to use the combinator.
+
+The documentation is provided from the consumer's Dialtone Vue so that it is up to
+date with the version they are using.
+
+```js
+import documentation from '.../node_modules/@dialpad/dialtone-vue/dist/component-documentation.json';
+import { $COMPONENT$ } from '@dialpad/dialtone-vue';
+import { DtcCombinator } from '@dialpad/dialtone-combinator';
+```
+
+*Ideally component-documentation should be included as an export in dialtone-vue, 
+but it isn't currently, so it has to be imported using the node_modules path.
+
+### Use
+
+```vue
+<dtc-combinator 
+  :component="$COMPONENT$"
+  :documentation="documentation"
+/>
+```
+
+## Component Library
+_Optional_, _Recommended_
+
+A library _should_ be provided to allow rendering of external components
+in slots, such as Dialtone Vue components or icons.
+
+Without the library, only html content and native Vue components
+can be compiled in the renderer.
+
+The `library` prop requires a single layered object with key-value pairs
+of export name and component definition, respectively.
+
+*Example using DtButton as target component, and Dialtone Vue components
+in the library (no icons).
+
+### Import
+
+```js
+import documentation from '.../node_modules/@dialpad/dialtone-vue/dist/component-documentation.json';
+import * as dialtoneVue from '@dialpad/dialtone-vue';
+import { ref } from 'vue';
+```
+
+### Use
+
+```vue
+<dtc-combinator 
+  :component="dialtoneVue.DtButton"
+  :documentation="documentation"
+  :library="dialtoneVueComponents"
+/>
+```
+
+```vue
+<script setup>
+  const dialtoneVueComponents = ref(
+    Object.fromEntries(
+      Object.entries(dialtoneVue).filter(([exportName]) => {
+        return exportName.startsWith('Dt');
+      }),
+    ),
+  );
+</script>
+```
+
+### Caveats
+
+Since dialtone icons are not exported in a bundle, there is some sorcery required
+to provide them as a library. For implementing this, check out 'App.vue' (using require) or
+the dialtone project 'client.js' vuepress config file (import from internal dialtone icon data).
+
+## Variants
+
+Variants can be used to customize the data for members of a component.
+
+This is passed to the combinator through the `variants` prop.
+
+The default variant will always exist, even if not declared. However, it can be
+overridden by declaring it and setting custom data on members.
+
+<details>
+<summary>Format</summary>
+<pre>
+<code>
+{
+    VARIANT_NAME: 
+    {
+        MEMBER_GROUP: 
+        {
+            MEMBER: 
+            {
+                MEMBER_FIELD: VALUE,
+                ...
+            },
+            ...
+        },
+        ...
+    },
+    ...
+}
+</code>
+</pre>
+</details>
+
+<details>
+<summary>Example</summary>
+<pre>
+<code>
+{
+    default: {
+        slots: {
+            default: {
+                initialValue: 'Place call',
+            },
+        },
+    },
+    primary: {
+        slots: {
+            default: {
+                initialValue: 'Primary',
+            },
+        },
+        props: {
+            importance: {
+                initialValue: 'primary',
+                lockControl: true,
+            },
+        },
+    },
+}
+</code>
+</pre>
+<i>The 'default' and 'primary' variants for 'DtButton'</i>
+</details>
+
+Any data provided will be set on the 'info' object for the member it is provided for.
+Most of the time this is overriding data generated from the Dialtone Vue documentation.
+
+There are some special fields that are intended to be used just by variants:
+* hideControl: Hides the control for the member in the sidebar
+* lockControl: Locks the control for the member in the sidebar
+
+A good place to look to see many of the fields that are used by a member is
+'option_bar_member_group.vue', this is where the member data is exposed to the
+underlying control.
+
+## Variant Bank
+_Optional_
+
+A storage of shared variants can be imported to use with the combinator.
+
+*Example using DtButton as target component
+
+### Import
+
+```js
+import documentation from '.../node_modules/@dialpad/dialtone-vue/dist/component-documentation.json';
+import { variantBank } from '@dialpad/dialtone-combinator';
+import { DtButton } from '@dialpad/dialtone-vue';
+import { ref } from 'vue';
+```
+
+### Use
+
+```vue
+<dtc-combinator 
+  :component="DtButton"
+  :documentation="documentation"
+  :variants="componentVariants"
+/>
+```
+
+```vue
+<script setup>
+  const componentVariants = ref(variantBank.DtButton);
+</script>
+```
+
+## Blueprint Mode
+
+Blueprint mode can be activated to remove the sidebar and settings and just show the
+renderer/code panel split view.
+
+```vue
+<dtc-combinator
+  ...
+  :blueprint="true"
+/>
+```
+
+## Styling
+
+Additional styling classes can be given to the header and root sections
+of the combinator.
+
+```vue
+<dtc-combinator
+  ...
+  header-class="d-py32"
+  root-class="d-px32"
+/>
+```
diff --git a/packages/combinator/.github/documentation/internal/CODE_PANEL.md b/packages/combinator/.github/documentation/internal/CODE_PANEL.md
new file mode 100644
index 0000000000..a419b26921
--- /dev/null
+++ b/packages/combinator/.github/documentation/internal/CODE_PANEL.md
@@ -0,0 +1,65 @@
+# Code Panel
+
+The code panel is responsible for providing technical information about the target component in its current state.
+It consists of the 'code editor' and 'event console' and also provides an overlay for external components
+such as 'settings'.
+
+## Code Editor
+
+The code editor displays the vue template code required to reproduce 
+the component in its current state in an external project.
+
+It provides functionality for directly editing slot content for the current component.
+
+### Element
+
+The code editor renders an 'element' component at the root level to represent the target component.
+This is the representation of the tag to use in a vue template.
+
+### Attributes
+
+The code editor renders an 'attributes' component inside the 'element' component's opening slot.
+This generates all the attribute fields to be included on the element tag.
+
+The members are filtered and determined how they will be displayed based on their value.
+Any member with a value matching its default value will be hidden, unless the 'verbose' prop is true.
+
+### Slots
+
+The code editor renders a 'slot' component inside the 'element' component's default slot for each
+slot that has content.
+
+The slot is represented by displaying the content wrapped by 'template' tags that match the slot name.
+The default slot is not wrapped by 'template' tags.
+
+Slots content is rendered in an editable field that will update **options** data for the slot.
+
+## Event Console
+
+The event console displays data about events captured from the target component. 
+It allows exploration of complex objects by storing them in a list and providing an interactive interface.
+Each triggered event will create a console entry represented by a 'pair' component.
+
+### Pair
+
+The pair component represents a key-value pair and allows recursive exploration of objects.
+A pair contains a name (key) and a value. Based on the data type of the value it will display a 
+component to represent a value.
+
+There are a variety of event console components for different value types:
+* String
+* Value (Boolean, Number, null...)
+* Array
+* Object
+* Function
+* Element (HTML Element)
+
+Other components such as objects and array can render more 'pair' components allowing for
+ exploration at unlimited depth.
+
+### Lazy Load
+
+The lazy load component provides generic functionality to not render content until the expand button is pressed.
+It is used by the 'object', 'array' and 'element' components for two reasons:
+* Prevent visual clutter
+* Improve performance by preventing over-rendering
diff --git a/packages/combinator/.github/documentation/internal/CONTROLS.md b/packages/combinator/.github/documentation/internal/CONTROLS.md
new file mode 100644
index 0000000000..8976295e2a
--- /dev/null
+++ b/packages/combinator/.github/documentation/internal/CONTROLS.md
@@ -0,0 +1,110 @@
+# Controls
+
+Controls are an interface for manipulating a single value. Their intended use is to provide
+interactivity to members in the option bar, however they are built to be modular with reuse in mind.
+
+They have no designation about the option bar or members and simply receive values
+
+## Control Map
+
+The control map provides a directory of controls that can be used by members and the necessary
+data required to use them. The control map can be found in [control.js](/src/lib/control.js) 
+along with the control utility functions.
+
+Each control map entry must contain a `component` entry that returns the control component
+
+Each control map entry must contain a `default(...)` function that provides a default value which is used by the
+option bar when switching control type. It can optionally use an args object to resolve this 
+as seen in the 'selection' control.
+
+## Extending
+
+The process of adding a new control can be done in two steps:
+1. Create the component in '/src/components/controls/..'
+2. Add an entry to the control map in '/src/lib/control.js'
+   * Does not need an entry if the control is 'internal' (only used by other controls)
+
+### Implement in Option Bar
+A new control may need some additional logic for it to be used in the option bar.
+
+See [OPTION_BAR](OPTION_BAR.md#extending-member-controls)
+
+## Kinds
+
+### Base
+
+Control that is used when no other controls are valid. 
+At this point it attempts to convert its value to a string and provide a 'string' control for input.
+
+It can be seen in use for 'func' member types where there is no current control implementation.
+
+### Null
+
+Control that is used to set some nullish values:
+* undefined
+* null
+
+Sending the raw value `undefined` results in the value prop using its default value (null). The special
+symbol `UNSET` is used to represent an intentional `undefined` value.
+
+The parent component has the responsibility to serialize the input value and deserialize the output value
+using the utility functions `serializeControlValue(...)` and `deserializeControlValue(...)` respectively.
+
+### Boolean / Number / String
+
+Controls that are used to set their respective data type value.
+Consists of an input that can be used to update the value.
+
+The number control can also be used to set the 'NaN' value.
+
+### Array / Object
+
+Controls that are used to provide functionality to manipulate complex objects.
+
+Uses the 'iterable' control to provide a list of values for arrays, and key-values pairs for objects.
+Each iterable item has a 'dynamic' control that can be used to set different data type values.
+
+### Slot
+
+Control that is used to set a string representing the slot content of a component.
+
+### Event
+
+Control that is used to display an event of a component.
+
+### Suggestion
+
+Control that is used to set a string value while providing a list of suggested valid values.
+A value can be typed or selected with the input. The list indicates the default value.
+
+### Selection
+
+Control that is used to select any value from a list of values. 
+
+### Iterable
+
+Control that is used to provide an interface to modify generic iterable values. 
+The important parts of the functionality are abstracted to the parent to allow 
+reuse of this control for any iterable value type.
+
+Contains an 'item' slot that will render the slot content for each item from the value array.
+This allows the parent to declare input and output functionality for each item.
+
+Example:
+```vue
+<template #item="{ item, update }">
+  <control
+    :value="item"
+    @update:value="e => update(e)"
+  />
+</template>
+```
+
+Since the value prop is a raw array, a custom `idMap` is used to keep the v-for keys in order.
+Any time an item is added or removed, it is mirrored in the `idMap`.
+
+### Dynamic
+
+Control that is used to set a value from a variety of data types.
+Contains a 'selection' control to select from a list of types or values.
+Selections that are types provide an additional control to set the value.
diff --git a/packages/combinator/.github/documentation/internal/OPTION_BAR.md b/packages/combinator/.github/documentation/internal/OPTION_BAR.md
new file mode 100644
index 0000000000..a2d4bcb1c7
--- /dev/null
+++ b/packages/combinator/.github/documentation/internal/OPTION_BAR.md
@@ -0,0 +1,101 @@
+# Option Bar
+
+The option bar is responsible for providing a user interface to interact and change the state of the target component.
+
+It consists of multiple 'section' components containing 'member group' components 
+that generate controls for each member.
+
+The primary task for the option bar is to handle input and output between the 'member group' components
+and reflect the state in the **options** object.
+
+### Control Map
+
+See [CONTROL_MAP](CONTROLS.md#control-map)
+
+### Extending Member Controls
+
+The 'member group' component provides the `controlSelector` prop to allow the 'option bar' component to define
+what controls are available for each member.
+
+It is important to abstract this functionality to the parent because for certain member groups we want to enforce
+a single control (Slots, events). However, for other member groups we want to allow multiple controls based on
+member data such a valid types (Props, attributes).
+
+The `controlSelector` prop is a function that provides a parameter for the current member, and expects an array
+with the first item as the initial control string, and the second item is an array of string values for all 
+the possible controls based on this member as a return value. The string values
+represent a key for a control in the 'control map'.
+
+Example:
+```vue
+<dtc-option-bar-member-group
+  :control-selector="getMemberControls"
+  ...
+/>
+```
+```js
+function getMemberControls (member) {
+    return [
+        'string',
+        [
+            'null',
+            'string',
+            member.specialControlType,
+        ]
+    ];
+}
+```
+_Example of a member group that will generate a control for 'null', 'string' and 
+a variable control for each member based on its `specialControlType` value. The initial
+control will be the 'string' control._
+
+## Member Group
+
+The member group receives a group of members and their respective values. It is responsible
+for rendering 'option bar control' components for each member. It also renders the 'option bar control selector' 
+for each member.
+
+### Member Map
+
+The member map is a reactive data object that wraps each member and can provide additional data that the 
+'option bar control' component needs without affecting the original member data object.
+
+It adds an additional `validControls` field that is created based on the `controlSelector` prop. Most importantly,
+it adds an additional `control` field to that is the determining value for what control is currently active
+for the member.
+
+The `control` field is passed as a prop to the 'option bar control' component and 
+updated when the `@update:control` event is emitted from the 'option bar control selector' component.
+
+### Member Values
+
+The `values` prop contains a collection of key-value pairs representing the state of the member.
+The member map uses the `getMemberKey(...)` function to match the members to their respective values.
+
+### Control Args
+
+Each member sends a lot of data to the 'option bar control' component through props. Each explicitly defined prop
+is used directly by the 'option bar control' except the `args` object prop.
+
+The args prop is an object that contains data to be directly attached to the underlying control using `v-bind`.
+
+## Control Selector
+
+The option bar control selector creates buttons above the control based on the `validControls` prop to allow 
+selection of a control from a variety of control selections for a single member.
+
+## Option Bar Control
+
+The option bar control wraps an underlying 'control' component to provide extended functionality
+and decouple the reliance on the option bar and members from individual 'control' components.
+
+### Control Component
+
+The option bar control receives a 'control' as a prop and finds the corresponding 'control' component 
+in the 'control map'. It renders the component with a dynamic component (`<component />`).
+
+### Extended Args
+
+The `args` prop is used to pass data to bind directly to the underlying control using `v-bind`. 
+However, some explicitly declared props on this component are required as well. 
+The `controlArgs` computed value introduces some additional values to pass to the control.
diff --git a/packages/combinator/.github/documentation/internal/RENDERER.md b/packages/combinator/.github/documentation/internal/RENDERER.md
new file mode 100644
index 0000000000..a3099b2d23
--- /dev/null
+++ b/packages/combinator/.github/documentation/internal/RENDERER.md
@@ -0,0 +1,20 @@
+# Renderer
+
+The renderer is responsible for displaying the target component in its current state.
+
+## Component
+
+The renderer receives the target component as a prop and renders it with a dynamic component (`<component />`). 
+
+## Bindings
+
+The binding members are attached to the dynamic component using `v-bind`.
+
+## Events
+
+The event members are attached to the dynamic component using `v-on`.
+
+## Slots
+
+The slots members are filtered to exclude empty slots, 
+they are then inserted in the dynamic component and rendered using a template (`<template />`).
\ No newline at end of file
diff --git a/packages/combinator/.github/documentation/internal/SYSTEM.md b/packages/combinator/.github/documentation/internal/SYSTEM.md
new file mode 100644
index 0000000000..540b6860d2
--- /dev/null
+++ b/packages/combinator/.github/documentation/internal/SYSTEM.md
@@ -0,0 +1,225 @@
+# System
+
+The core system is primarily driven by the info and options data objects.
+Together these provide the required functionality for all the components 
+and inner workings of the system through three main components:
+* Renderer
+* Option bar
+* Code panel
+
+## Info
+_Immutable_
+
+<details>
+<summary>Format</summary>
+<pre>
+<code>
+{
+    COMPONENT_FIELD: VALUE,
+    MEMBER_GROUP: 
+    [
+        MEMBER,
+        MEMBER,
+        ...
+    ],
+    ...
+}
+</code>
+</pre>
+</details>
+
+<details>
+<summary>Example</summary>
+<pre>
+<code>
+{
+    displayName: 'DtButton',
+    description: 'Base Vue component for Dialtone Buttons.',
+    attributes: 
+    [
+        {
+            name: 'disabled',
+            defaultValue: false,
+            initialValue: false,
+            defaultType: 'boolean',
+            types: 
+            [
+                'boolean',
+            ],
+        },
+        ...
+    ],
+    props: 
+    [
+        {
+            name: 'circle',
+            description: 'Whether the button is a circle or not.',
+            defaultValue: false,
+            initialValue: false,
+            defaultType: 'boolean',
+            types: 
+            [
+                'boolean',
+            ],
+            values: 
+            [
+                true, 
+                false,
+            ],
+        },
+        {
+            name: 'iconPosition',
+            description: 'The position of the icon slot within the button.',
+            defaultValue: 'left',
+            initialValue: 'left',
+            defaultType: 'string',
+            types: 
+            [
+                'string',
+            ],
+            values: 
+            [
+                'left', 
+                'right',
+                'top',
+                'bottom',
+            ],
+        },
+        {
+            name: 'labelClass',
+            description: 'Used to customize the label container',
+            defaultValue: '',
+            initialValue: '',
+            defaultType: 'string',
+            types: 
+            [
+                'string', 
+                'array', 
+                'object',
+            ],
+        },
+        ...
+    ],
+    slots:
+    [
+        {
+            name: 'default',
+            description: 'Content within button',
+        },
+        ...
+    ],
+    events:
+    [
+        {
+            name: 'click',
+            description: 'Native button click event',
+            types: 
+            [
+                'pointerevent', 
+                'keyboardevent',
+            ],
+        },
+        ...
+    ],
+}
+</code>
+</pre>
+<i>Info for `dt-button` component</i>
+</details>
+
+The **info** data object is a container for all extended component information for the target component.
+The raw Dialtone Vue documentation is processed based on the target component and put into a new **info** object.
+
+This object is considered immutable and should not be modified after it is initialized.
+
+The data object is declared in [combinator.vue](/src/components/combinator.vue). 
+The main functionality for preprocessing the data is included in [info.js](/src/lib/info.js).
+
+Essential documentation processing actions:
+* Rename props with the [model tag](../OVERVIEW.md#model) to original name
+* Generate custom members from the [attribute tag](../OVERVIEW.md#attribute)
+* Member 'type string' is parsed into an array of type names
+* Parse default values
+* ...
+
+It is best to put data in **info** when you want to use it in multiple places. For example `defaultType` is added
+to **info** for each member based on some validation logic using `defaultType` and `types`. This ensures a
+singular, predetermined value is provided to both the option bar and code editor.
+
+Additional data can be added to info in two ways:
+* Add custom comments or tags to the Dialtone Vue documentation
+* Extend programmatically in [info.js](/src/lib/info.js)
+
+The former method is always preferred if possible, 
+however sometimes it may make more sense to modify or extend 'info.js'.
+Sometimes it may be best to do both, if the docgen output is not in a preferable format.
+
+## Options
+_Reactive_
+
+<details>
+<summary>Format</summary>
+<pre>
+<code>
+{
+    MEMBER_GROUP: 
+    { 
+        MEMBER_KEY: VALUE,
+    },
+}
+</code>
+</pre>
+</details>
+
+<details>
+<summary>Example</summary>
+<pre>
+<code>
+{
+    attributes: 
+    { 
+        disabled: false,
+        width: '',
+    },
+    props:
+    {
+        active: false,
+        iconPosition: 'left',
+        labelClass: '',
+        ...
+    },
+    slots:
+    {
+        default: 'dt-button',
+        icon: undefined,
+    },
+}
+</code>
+</pre>
+<i>Options for `dt-button` component with default values</i>
+</details>
+
+The **options** data object is the main reactive object that allows interactivity with the target component. It is
+essentially a map of member key-value pairs that are used to read and write the state of the target component.
+
+**Options** can be updated by emitting an event with a function parameter that update the members in any way.
+
+Format:
+```js
+emit(EVENT, options => {
+    options[MEMBER_GROUP][MEMBER_KEY] = VALUE;
+});
+```
+
+Example:
+```js
+function onInput (e) {
+    emit('update:options', options => {
+        options.slots[props.name] = e.target.textContent;
+    });
+}
+```
+_Code editor update options slot value on input_
+
+After **info** is initialized, the  `initialValue` fields for each member 
+are used to set the initial values in **options**. 
diff --git a/packages/combinator/.github/pull_request_template.md b/packages/combinator/.github/pull_request_template.md
new file mode 100644
index 0000000000..7b6cb85940
--- /dev/null
+++ b/packages/combinator/.github/pull_request_template.md
@@ -0,0 +1,11 @@
+## Description
+Provide a description of what this pull request is adding, updating, extending, or removing.
+
+## Pull Request Checklist
+
+- [ ] Ask the contributors if a similar effort is already in process or has been solved.
+- [ ] Use `staging` as your pull request's base branch.
+- [ ] Ensure no private Dialpad links or info are in the code or pull request description.
+
+## Obligatory GIF (super important!)
+![](path/to/gif)
diff --git a/packages/combinator/.github/workflows/deploy-preview.yml b/packages/combinator/.github/workflows/deploy-preview.yml
new file mode 100644
index 0000000000..404583ebd0
--- /dev/null
+++ b/packages/combinator/.github/workflows/deploy-preview.yml
@@ -0,0 +1,57 @@
+name: Deploy Preview
+
+on: pull_request
+
+env:
+  NODE_MODULES_CACHE_VERSION: v1
+
+jobs:
+  deploy:
+    concurrency:
+      group: ${{ github.workflow }}-${{ github.ref }}
+      cancel-in-progress: true
+      
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v3
+      with:
+        ref: "refs/pull/${{ github.event.pull_request.number }}/merge"
+
+    - name: Setup Node.js environment
+      uses: actions/setup-node@v3.3.0
+      with:
+        node-version: '16.x'
+
+    - uses: actions/cache@v3
+      id: npm-cache
+      with:
+        path: |
+          **/node_modules/
+        key: ${{ format('{0}-cache-node-modules-{1}-{2}', runner.os, env.NODE_MODULES_CACHE_VERSION, hashFiles('**/package-lock.json')) }}
+
+    - name: Install dependencies
+      if: steps.npm-cache.outputs.cache-hit != 'true'
+      run: npm ci
+
+    - name: Build preview
+      run: npm run build:preview
+
+    - name: Deploy to GitHub Pages
+      uses: JamesIves/github-pages-deploy-action@v4.2.5
+      with:
+        branch: gh-pages
+        folder: dist/preview
+        target-folder: deploy-previews/pr-${{ github.event.pull_request.number }}
+
+    - name: Add message
+      uses: mshick/add-pr-comment@v1
+      env:
+        BUILD_URL: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      with:
+        message: |
+          ✔️ Deploy Preview ready!
+          😎 Browse the preview: https://dialpad.github.io/dialtone-combinator/deploy-previews/pr-${{ github.event.pull_request.number }}
+          🔨 If you experience an SSL issue then wait 2 minutes and try again.
+        allow-repeats: true
diff --git a/packages/combinator/.github/workflows/deploy.yml b/packages/combinator/.github/workflows/deploy.yml
new file mode 100644
index 0000000000..517db6b381
--- /dev/null
+++ b/packages/combinator/.github/workflows/deploy.yml
@@ -0,0 +1,40 @@
+name: Deploy
+
+on:
+  push:
+    branches:
+      - staging
+
+jobs:
+  deploy:
+    concurrency: ${{ github.workflow }}-${{ github.ref }}
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v3.3.0
+        with:
+          node-version: '16.x'
+
+      - name: Parse branch from ref
+        id: branch
+        run: echo ::set-output name=BRANCH::${GITHUB_REF/refs\/heads\//}
+
+      - name: Authenticate with private NPM package
+        run: echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_AUTH_TOKEN }}" > ~/.npmrc
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build preview
+        run: npm run build:preview
+
+      - name: Deploy to GitHub Pages
+        uses: JamesIves/github-pages-deploy-action@v4.2.5
+        with:
+          branch: gh-pages
+          folder: dist/preview
+          clean-exclude: |
+            deploy-previews
diff --git a/packages/combinator/.github/workflows/linter.yml b/packages/combinator/.github/workflows/linter.yml
new file mode 100644
index 0000000000..0d009264ff
--- /dev/null
+++ b/packages/combinator/.github/workflows/linter.yml
@@ -0,0 +1,36 @@
+name: Linter
+
+env:
+  NODE_MODULES_CACHE_VERSION: v1
+
+on:
+  pull_request:
+    types: ['opened', 'edited', 'reopened', 'synchronize']
+    branches:
+      - staging
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Use Node.js
+        uses: actions/setup-node@v3.3.0
+        with:
+          node-version: '16.x'
+
+      - uses: actions/cache@v3
+        id: npm-cache
+        with:
+          path: |
+            **/node_modules/
+          key: ${{ format('{0}-cache-node-modules-{1}-{2}', runner.os, env.NODE_MODULES_CACHE_VERSION, hashFiles('**/package-lock.json')) }}
+
+      - name: Install dependencies
+        if: steps.npm-cache.outputs.cache-hit != 'true'
+        run: npm ci
+
+      - name: Lint
+        run: npm run lint
\ No newline at end of file
diff --git a/packages/combinator/.github/workflows/unit-tests.yml b/packages/combinator/.github/workflows/unit-tests.yml
new file mode 100644
index 0000000000..8be9f9bdb9
--- /dev/null
+++ b/packages/combinator/.github/workflows/unit-tests.yml
@@ -0,0 +1,37 @@
+name: Unit Tests
+
+env:
+  NODE_MODULES_CACHE_VERSION: v1
+
+on:
+  pull_request:
+    branches: [ staging ]
+  push:
+    branches: [ staging ]
+
+jobs:
+  unit_tests:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out branch
+        uses: actions/checkout@v3
+
+      - name: Use Node.js
+        uses: actions/setup-node@v3.3.0
+        with:
+          node-version: '16'
+
+      - uses: actions/cache@v3
+        id: npm-cache
+        with:
+          path: |
+            **/node_modules/
+          key: ${{ format('{0}-cache-node-modules-{1}-{2}', runner.os, env.NODE_MODULES_CACHE_VERSION, hashFiles('**/package-lock.json')) }}
+
+      - name: Install dependencies
+        if: steps.npm-cache.outputs.cache-hit != 'true'
+        run: npm ci
+
+      - name: Run unit tests
+        run: npm run test
\ No newline at end of file
diff --git a/packages/combinator/.gitignore b/packages/combinator/.gitignore
new file mode 100644
index 0000000000..01c77172d4
--- /dev/null
+++ b/packages/combinator/.gitignore
@@ -0,0 +1,28 @@
+# Distribution
+*.tgz
+node_modules
+.npmrc
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# Editor
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/packages/combinator/LICENSE.md b/packages/combinator/LICENSE.md
new file mode 100644
index 0000000000..b8a134d712
--- /dev/null
+++ b/packages/combinator/LICENSE.md
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Dialpad
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/combinator/README.md b/packages/combinator/README.md
new file mode 100644
index 0000000000..f0b61f12bb
--- /dev/null
+++ b/packages/combinator/README.md
@@ -0,0 +1,44 @@
+# Dialtone Combinator
+
+Dialtone Combinator is a Vue component that provides an interface for users to interact with Dialtone Vue components. 
+
+## Features
+
+* Interactive option bar for component customization
+* Live render preview of component with selected options
+* Live code preview for component with selected options
+
+## Documentation
+
+[Overview](.github/documentation/OVERVIEW.md) \
+[Contributing](.github/documentation/CONTRIBUTING.md) \
+[Usage](.github/documentation/USAGE.md)
+
+## Environment
+
+### Install
+
+`git clone https://github.com/dialpad/dialtone-combinator.git`
+
+OR
+
+`git clone git@github.com:dialpad/dialtone-combinator.git`
+
+Install dependencies
+
+```bash
+pnpm i
+```
+
+### Run
+
+```bash
+pnpm run dev
+```
+
+## Links
+
+[Preview](https://dialpad.github.io/dialtone-combinator/) \
+[Tracker](https://dialpad.atlassian.net/browse/DT-531) \
+[Dialtone](https://github.com/dialpad/dialtone) \
+[Dialtone Vue](https://github.com/dialpad/dialtone-vue)
diff --git a/packages/combinator/index.js b/packages/combinator/index.js
new file mode 100644
index 0000000000..961446bcc7
--- /dev/null
+++ b/packages/combinator/index.js
@@ -0,0 +1,3 @@
+export { default as DtcCombinator } from './src/components/combinator';
+export { default as DtcSection } from './src/components/tools/section';
+export { default as variantBank } from './src/variants/variants';
diff --git a/packages/combinator/package.json b/packages/combinator/package.json
new file mode 100644
index 0000000000..7a279a6dff
--- /dev/null
+++ b/packages/combinator/package.json
@@ -0,0 +1,55 @@
+{
+  "name": "@dialpad/dialtone-combinator",
+  "version": "0.3.1",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "vue-cli-service serve",
+    "preview": "npm run build:preview; serve ./dist/preview",
+    "lint": "eslint src --ext .js,.vue",
+    "build": "vue-cli-service build --target lib --dest ./dist/lib index.js; rm ./dist/lib/demo.html",
+    "build:preview": "vue-cli-service build --dest ./dist/preview",
+    "distribute": "rm ./dialtone-combinator-*.tgz; npm run build; npm pack",
+    "test": "vue-cli-service test:unit --timeout 100000 --colors --recursive --glob *.test.js src",
+    "release": "./release.sh"
+  },
+  "main": "./dist/lib/dialtone-combinator.umd.js",
+  "files": [
+    "./dist/lib/*.js"
+  ],
+  "devDependencies": {
+    "@dialpad/dialtone": "6.35.0",
+    "@dialpad/dialtone-vue": "3.13.0",
+    "@types/node": "^16.11.41",
+    "@typescript-eslint/eslint-plugin": "^5.30.0",
+    "@typescript-eslint/parser": "^7.0.1",
+    "@vitejs/plugin-vue": "^2.3.3",
+    "@vitejs/plugin-vue-jsx": "^1.3.10",
+    "@vue/cli-plugin-unit-mocha": "^5.0.8",
+    "@vue/cli-service": "^5.0.6",
+    "@vue/test-utils": "^2.0.2",
+    "@vue/tsconfig": "^0.1.3",
+    "chai": "^4.3.6",
+    "change-case": "^4.1.2",
+    "eslint": "^8.18.0",
+    "eslint-config-semistandard": "^17.0.0",
+    "eslint-config-standard": "^17.1.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jsdoc": "^39.3.6",
+    "eslint-plugin-mocha": "^10.1.0",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-vue": "^9.15.1",
+    "eslint-plugin-vuejs-accessibility": "^2.1.0",
+    "js-beautify": "^1.14.4",
+    "json5-with-undefined": "^2.1.301",
+    "just-clone": "^6.1.1",
+    "less": "^4.1.3",
+    "less-loader": "^11.0.0",
+    "npm-run-all": "^4.1.5",
+    "serve": "^13.0.4",
+    "vue": "^3.2.37",
+    "vue-tsc": "^0.38.1"
+  }
+}
diff --git a/packages/combinator/public/index.html b/packages/combinator/public/index.html
new file mode 100644
index 0000000000..b188eee4d7
--- /dev/null
+++ b/packages/combinator/public/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Dialtone Combinator</title>
+  </head>
+  <body>
+    <div class="d-d-flex d-jc-center d-h100vh" id="app">
+    </div>
+  </body>
+</html>
diff --git a/packages/combinator/release.sh b/packages/combinator/release.sh
new file mode 100755
index 0000000000..f93098d521
--- /dev/null
+++ b/packages/combinator/release.sh
@@ -0,0 +1,4 @@
+read -p "Enter version type [patch, major, minor]: " type
+npm version $type
+npm run distribute
+npm publish
diff --git a/packages/combinator/src/App.vue b/packages/combinator/src/App.vue
new file mode 100644
index 0000000000..68e97ca329
--- /dev/null
+++ b/packages/combinator/src/App.vue
@@ -0,0 +1,150 @@
+<template>
+  <div
+    class="dtc-preview d-d-flex d-fd-column d-ai-center d-py64 d-w100p"
+    :class="`d-bgc-${background}`"
+  >
+    <dtc-button-bar
+      class="d-ps-absolute d-m8 d-t0 d-r0"
+      :value="background"
+      @click="updateBackground"
+    >
+      <template #orange-200>
+        <div class="d-w16 d-h16 d-ba d-bc-black d-bgc-orange-200" />
+      </template>
+      <template #black-800>
+        <div class="d-w16 d-h16 d-ba d-bc-black d-bgc-black-800" />
+      </template>
+      <template #white>
+        <div class="d-w16 d-h16 d-ba d-bc-black d-bgc-white" />
+      </template>
+    </dtc-button-bar>
+    <div class="d-mb64">
+      <dtc-suggestion
+        :value="component.name"
+        :suggestions="options"
+        @update:value="updateComponent"
+      >
+        <span>Target Component</span>
+        <template #item="{ value }">
+          <span class="d-d-flex d-jc-space-between">
+            <span>{{ value }}</span>
+            <dt-badge
+              v-if="!isSupportedComponent(value)"
+              class="d-ml6"
+              color="yellow-300"
+            >
+              Unsupported
+            </dt-badge>
+            <dt-badge
+              v-if="value === DEFAULT_COMPONENT"
+              color="purple-500"
+            >
+              Default
+            </dt-badge>
+          </span>
+        </template>
+      </dtc-suggestion>
+    </div>
+    <div class="d-d-flex d-as-stretch d-hmn0">
+      <Combinator
+        :key="componentKey"
+        :component="component"
+        :variants="variants"
+        :documentation="documentation"
+        :library="library"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import documentation from '@/node_modules/@dialpad/dialtone-vue/dist/component-documentation.json';
+import * as modules from '@dialpad/dialtone-vue';
+import Combinator from './components/combinator';
+import { computed, markRaw, onMounted, ref } from 'vue';
+import { DIALTONE_PREFIX } from '@/src/lib/constants';
+import { DtBadge } from '@dialpad/dialtone-vue';
+import DtcButtonBar from '@/src/components/tools/button_bar';
+import DtcSuggestion from '@/src/components/controls/control_suggestion';
+import supportedComponentData from '@/src/supported_components.json';
+import variantBank from '@/src/variants/variants';
+import { getIcons } from '@/src/lib/utils';
+
+const DEFAULT_COMPONENT = 'DtButton';
+
+function isSupportedComponent (exportName) {
+  return supportedComponentData.includes(exportName);
+}
+
+const components = computed(() => {
+  return Object.fromEntries(Object.entries(modules).filter(([exportName, exportValue]) => {
+    return typeof (exportValue) === 'object' &&
+      exportName.toLowerCase().startsWith(DIALTONE_PREFIX) &&
+      exportValue.name;
+  }));
+});
+
+const options = computed(() => {
+  return Object.keys(components.value);
+});
+
+function getComponentFromHash () {
+  componentKey.value += 1;
+  const hash = window.location.hash.substring(1);
+  return markRaw(modules[hash] ?? modules.DtButton);
+}
+
+function getVariantFromHash () {
+  const hash = window.location.hash.substring(1);
+  return variantBank()[hash] ?? {};
+}
+
+const componentKey = ref(0);
+const component = ref(getComponentFromHash());
+const variants = ref(getVariantFromHash());
+
+function updateComponent (e) {
+  window.location.hash = e;
+}
+
+const background = ref('white');
+
+function updateBackground (e) {
+  background.value = e;
+}
+
+const icons = ref();
+
+const library = computed(() => {
+  return {
+    ...components.value,
+    ...icons.value,
+  };
+});
+
+onMounted(async () => {
+  addEventListener('hashchange', () => {
+    component.value = getComponentFromHash();
+    variants.value = getVariantFromHash();
+  });
+
+  const promises = [];
+  getIcons().forEach(icon => {
+    promises.push(import(`../node_modules/@dialpad/dialtone/lib/dist/vue/icons/${icon}.vue`).then(module => {
+      return [icon, module.default];
+    }));
+  });
+  icons.value = Object.fromEntries(await Promise.all(promises));
+});
+
+</script>
+
+<style lang="less" src="./assets/dialtone.less" />
+<style lang="less" src="./assets/transitions.less" />
+
+<style>
+  .dtc-preview {
+    padding-left: var(--su128);
+    padding-right: var(--su128);
+  }
+</style>
diff --git a/packages/combinator/src/assets/dialtone.less b/packages/combinator/src/assets/dialtone.less
new file mode 100644
index 0000000000..20605441ac
--- /dev/null
+++ b/packages/combinator/src/assets/dialtone.less
@@ -0,0 +1 @@
+@import '@dialpad/dialtone/lib/build/less/dialtone';
diff --git a/packages/combinator/src/assets/themes/base.less b/packages/combinator/src/assets/themes/base.less
new file mode 100644
index 0000000000..ef632122b7
--- /dev/null
+++ b/packages/combinator/src/assets/themes/base.less
@@ -0,0 +1,21 @@
+.dtc-theme__canvas {
+  color: var(--dtc-theme-color-foreground);
+  background-color: var(--dtc-theme-color-background);
+}
+
+.dtc-theme__canvas--inverted {
+  color: var(--dtc-theme-color-background);
+  background-color: var(--dtc-theme-color-foreground);
+}
+
+.dtc-theme__popover {
+  .dtc-theme__canvas--inverted();
+}
+
+.dtc-theme__popover *[class^="d-"][class$="__label"] {
+  color: var(--dtc-theme-color-background);
+}
+
+.dtc-theme__interactive {
+  color: var(--primary-color);
+}
diff --git a/packages/combinator/src/assets/themes/dark.less b/packages/combinator/src/assets/themes/dark.less
new file mode 100644
index 0000000000..54509f7118
--- /dev/null
+++ b/packages/combinator/src/assets/themes/dark.less
@@ -0,0 +1,26 @@
+@import (reference) "@/src/assets/dialtone.less";
+
+& {
+  --dtc-theme-color-foreground: var(--black-025);
+  --dtc-theme-color-foreground-darken: var(--black-050);
+  --dtc-theme-color-foreground-lighten: var(--white);
+
+  --dtc-theme-color-background: var(--black-700);
+  --dtc-theme-color-background-darken: var(--black-800);
+  --dtc-theme-color-background-lighten: var(--black-600);
+
+  color-scheme: dark;
+}
+
+.dtc-theme__button {
+  .d-btn--inverted();
+}
+
+.dtc-theme__tabs {
+  .d-tablist--inverted();
+  background-color: var(--dtc-theme-color-background-darken);
+}
+
+.dtc-theme__interactive {
+  color: var(--purple-300);
+}
diff --git a/packages/combinator/src/assets/themes/light.less b/packages/combinator/src/assets/themes/light.less
new file mode 100644
index 0000000000..cb94bf1d21
--- /dev/null
+++ b/packages/combinator/src/assets/themes/light.less
@@ -0,0 +1,16 @@
+& {
+  --dtc-theme-color-foreground: var(--black-800);
+  --dtc-theme-color-foreground-darken: var(--black-900);
+  --dtc-theme-color-foreground-lighten: var(--black-700);
+
+  --dtc-theme-color-background: var(--white);
+  --dtc-theme-color-background-darken: var(--black-050);
+  --dtc-theme-color-background-lighten: var(--white);
+
+  color-scheme: light;
+}
+
+.dtc-theme__tabs {
+  background-color: var(--dtc-theme-color-background-lighten);
+  box-shadow: 0 1px 6px var(--dtc-theme-color-foreground-lighten);
+}
diff --git a/packages/combinator/src/assets/themes/scheme/base.less b/packages/combinator/src/assets/themes/scheme/base.less
new file mode 100644
index 0000000000..62bdd8b52d
--- /dev/null
+++ b/packages/combinator/src/assets/themes/scheme/base.less
@@ -0,0 +1,5 @@
+.dtc-scheme__identifier { color: var(--dtc-scheme-color-identifier); }
+.dtc-scheme__class { color: var(--dtc-scheme-color-class); }
+.dtc-scheme__string { color: var(--dtc-scheme-color-string); }
+.dtc-scheme__value { color: var(--dtc-scheme-color-value); }
+.dtc-scheme__function { color: var(--dtc-scheme-color-function); }
diff --git a/packages/combinator/src/assets/themes/scheme/highlight.less b/packages/combinator/src/assets/themes/scheme/highlight.less
new file mode 100644
index 0000000000..c6fee1fa90
--- /dev/null
+++ b/packages/combinator/src/assets/themes/scheme/highlight.less
@@ -0,0 +1,8 @@
+& {
+  @import "highlight_variables.less";
+  --dtc-scheme-color-identifier: @color-identifier;
+  --dtc-scheme-color-class: @color-class;
+  --dtc-scheme-color-string: @color-string;
+  --dtc-scheme-color-value: @color-value;
+  --dtc-scheme-color-function: @color-function;
+}
diff --git a/packages/combinator/src/assets/themes/scheme/highlight_light.less b/packages/combinator/src/assets/themes/scheme/highlight_light.less
new file mode 100644
index 0000000000..295b7830e7
--- /dev/null
+++ b/packages/combinator/src/assets/themes/scheme/highlight_light.less
@@ -0,0 +1,8 @@
+& {
+  @import "highlight_variables.less";
+  --dtc-scheme-color-identifier: darken(@color-identifier, 10%);
+  --dtc-scheme-color-class: darken(@color-class, 15%);
+  --dtc-scheme-color-string: spin(darken(@color-string, 20%), -10%);
+  --dtc-scheme-color-value: darken(@color-value, 10%);
+  --dtc-scheme-color-function: darken(@color-function, 20%);
+}
diff --git a/packages/combinator/src/assets/themes/scheme/highlight_variables.less b/packages/combinator/src/assets/themes/scheme/highlight_variables.less
new file mode 100644
index 0000000000..2562241748
--- /dev/null
+++ b/packages/combinator/src/assets/themes/scheme/highlight_variables.less
@@ -0,0 +1,5 @@
+@color-identifier: #F92672;
+@color-class: #A6E22E;
+@color-string: #E6DB74;
+@color-value: #AE81FF;
+@color-function: #66D9EF;
diff --git a/packages/combinator/src/assets/themes/scheme/mono.less b/packages/combinator/src/assets/themes/scheme/mono.less
new file mode 100644
index 0000000000..043cf8f0e0
--- /dev/null
+++ b/packages/combinator/src/assets/themes/scheme/mono.less
@@ -0,0 +1,7 @@
+& {
+  --dtc-scheme-color-identifier: unset;
+  --dtc-scheme-color-class: unset;
+  --dtc-scheme-color-string: unset;
+  --dtc-scheme-color-value: unset;
+  --dtc-scheme-color-function: unset;
+}
diff --git a/packages/combinator/src/assets/transitions.less b/packages/combinator/src/assets/transitions.less
new file mode 100644
index 0000000000..e1b62416c4
--- /dev/null
+++ b/packages/combinator/src/assets/transitions.less
@@ -0,0 +1,17 @@
+.pop-enter-active { transition: opacity 100ms ease-in; }
+.pop-leave-active { transition: opacity 1500ms ease-out; }
+
+.pop-enter-from,
+.pop-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 500ms ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
diff --git a/packages/combinator/src/base.test.js b/packages/combinator/src/base.test.js
new file mode 100644
index 0000000000..d7484be802
--- /dev/null
+++ b/packages/combinator/src/base.test.js
@@ -0,0 +1,12 @@
+import { assert } from 'chai';
+import { enableAutoUnmount } from '@vue/test-utils';
+
+enableAutoUnmount(after);
+
+describe('base.test.js', function () {
+  describe('When running test', function () {
+    it('Should correctly resolve asserts', function () {
+      assert.isTrue(true);
+    });
+  });
+});
diff --git a/packages/combinator/src/components/code_editor/code_editor.vue b/packages/combinator/src/components/code_editor/code_editor.vue
new file mode 100644
index 0000000000..b5d89f9442
--- /dev/null
+++ b/packages/combinator/src/components/code_editor/code_editor.vue
@@ -0,0 +1,174 @@
+<template>
+  <div
+    ref="editor"
+    class="dtc-code-editor d-d-flex d-fl-grow1"
+  >
+    <div
+      ref="code"
+      class="d-fl-grow1"
+    >
+      <dtc-code-editor-element
+        :tag-name="tagName"
+        :self-closing="hasSlotContent"
+      >
+        <template #opening>
+          <dtc-code-editor-tag-attributes
+            :info-bindings="info.bindings.get()"
+            :option-bindings="options.bindings.get()"
+            :verbose="verbose"
+          />
+        </template>
+        <template #default>
+          <div>
+            <template
+              v-for="(value, slot) in options.slots"
+              :key="slot"
+            >
+              <dtc-code-editor-slot
+                v-if="value"
+                :name="slot"
+                @update:options="e => emit(OPTIONS_UPDATE_EVENT, e)"
+              >
+                <span class="dtc-theme-popover">{{ value }}</span>
+              </dtc-code-editor-slot>
+            </template>
+          </div>
+        </template>
+      </dtc-code-editor-element>
+    </div>
+    <dt-popover
+      :class="[
+        `dtc-theme--${theme}`,
+        'd-ps-sticky',
+        'd-t0',
+      ]"
+      content-class="dtc-theme__popover"
+      transition="pop"
+      :modal="false"
+      :open="showCopyPopover"
+    >
+      <template #anchor="{ attrs }">
+        <dt-button
+          class="dtc-theme__button d-ps-sticky d-t0"
+          v-bind="attrs"
+          importance="clear"
+          size="lg"
+          @click="copy"
+        >
+          <template #default>
+            Copy
+          </template>
+          <template #icon>
+            <IconCopy />
+          </template>
+        </dt-button>
+      </template>
+      <template #content>
+        <span>Copied to clipboard</span>
+      </template>
+    </dt-popover>
+  </div>
+</template>
+
+<script setup>
+import DtcCodeEditorTagAttributes from './code_editor_tag_attributes';
+import DtcCodeEditorElement from './code_editor_element';
+import DtcCodeEditorSlot from './code_editor_slot';
+import IconCopy from 'dialtone-icons/IconContentCopy';
+import { DtButton, DtPopover } from '@dialpad/dialtone-vue';
+
+import { OPTIONS_UPDATE_EVENT, SETTINGS_INDENT_KEY } from '@/src/lib/constants';
+import { ref, computed, provide } from 'vue';
+import { paramCase } from 'change-case';
+
+const props = defineProps({
+  /**
+   * Options data object.
+   */
+  options: {
+    type: Object,
+    required: true,
+  },
+  /**
+   * Info data object.
+   */
+  info: {
+    type: Object,
+    required: true,
+  },
+  /**
+   * Popover theme setting.
+   */
+  theme: {
+    type: String,
+    required: true,
+  },
+  /**
+   * Attributes verbose setting.
+   */
+  verbose: {
+    type: Boolean,
+    required: true,
+  },
+  /**
+   * Indent spaces setting.
+   */
+  indentSpaces: {
+    type: Number,
+    required: true,
+  },
+});
+
+const emit = defineEmits([
+  OPTIONS_UPDATE_EVENT,
+]);
+
+const indent = computed(() => {
+  return props.indentSpaces;
+});
+
+provide(SETTINGS_INDENT_KEY, indent);
+
+const tagName = computed(() => paramCase(props.info.displayName));
+
+const hasSlotContent = computed(() => {
+  return props.options.slots
+    ? Object.values(props.options.slots).every(slot => !slot)
+    : false;
+});
+
+const code = ref();
+const showCopyPopover = ref(false);
+
+async function copy () {
+  let text = code.value.innerText;
+
+  // Remove nbsp char
+  text = text.replace(/\xA0/g, '');
+
+  // Remove empty lines
+  text = text.replace(/^\s*[\r\n]/gm, '');
+
+  await navigator.clipboard.writeText(text);
+
+  showCopyPopover.value = true;
+  await new Promise(resolve => setTimeout(resolve, 1000));
+  showCopyPopover.value = false;
+}
+</script>
+
+<script>
+/**
+ * The code editor displays the vue template code required to reproduce
+ * the component in its current state in an external project.
+ */
+export default {
+  name: 'DtcCodeEditor',
+};
+</script>
+
+<style>
+.dtc-code-editor__margin {
+  border-left: var(--dtc-theme-color-background-darken) solid 1px;
+}
+</style>
diff --git a/packages/combinator/src/components/code_editor/code_editor_closing_tag.vue b/packages/combinator/src/components/code_editor/code_editor_closing_tag.vue
new file mode 100644
index 0000000000..7d1972f385
--- /dev/null
+++ b/packages/combinator/src/components/code_editor/code_editor_closing_tag.vue
@@ -0,0 +1,26 @@
+<template>
+  <dtc-code-editor-tag
+    :name="name"
+  >
+    <template #start>
+      <span>/</span>
+    </template>
+  </dtc-code-editor-tag>
+</template>
+
+<script setup>
+import DtcCodeEditorTag from './code_editor_tag';
+
+defineProps({
+  name: {
+    type: String,
+    required: true,
+  },
+});
+</script>
+
+<script>
+export default {
+  name: 'DtcCodeEditorClosingTag',
+};
+</script>
diff --git a/packages/combinator/src/components/code_editor/code_editor_element.vue b/packages/combinator/src/components/code_editor/code_editor_element.vue
new file mode 100644
index 0000000000..74a3d7c387
--- /dev/null
+++ b/packages/combinator/src/components/code_editor/code_editor_element.vue
@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <dtc-code-editor-opening-tag
+      :name="tagName"
+    >
+      <slot name="opening" />
+      <span v-if="selfClosing"> /</span>
+    </dtc-code-editor-opening-tag>
+    <div
+      class="dtc-code-editor__margin"
+    >
+      <slot />
+    </div>
+    <dtc-code-editor-closing-tag
+      v-if="!selfClosing"
+      :name="tagName"
+    />
+  </div>
+</template>
+
+<script setup>
+import DtcCodeEditorOpeningTag from './code_editor_opening_tag';
+import DtcCodeEditorClosingTag from './code_editor_closing_tag';
+
+defineProps({
+  tagName: {
+    type: String,
+    required: true,
+  },
+  /**
+   * Exclude closing tag and append a '/' to end of opening tag.
+   */
+  selfClosing: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
+
+<script>
+export default {
+  name: 'DtcCodeEditorElement',
+};
+</script>
diff --git a/packages/combinator/src/components/code_editor/code_editor_indent.vue b/packages/combinator/src/components/code_editor/code_editor_indent.vue
new file mode 100644
index 0000000000..c545211bba
--- /dev/null
+++ b/packages/combinator/src/components/code_editor/code_editor_indent.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="d-d-flex">
+    <span v-html="html" />
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import { computed, inject } from 'vue';
+import { SETTINGS_INDENT_KEY } from '@/src/lib/constants';
+
+const props = defineProps({
+  /**
+   * Current indentation level, multiplied by number of spaces.
+   */
+  level: {
+    type: Number,
+    default: 1,
+    validator (value) {
+      return value >= 0;
+    },
+  },
+});
+
+const spaces = computed(() => {
+  return inject(SETTINGS_INDENT_KEY).value;
+});
+
+const html = computed(() => {
+  return '&nbsp;'.repeat(props.level * spaces.value);
+});
+</script>
+
+<script>
+export default {
+  name: 'DtcCodeEditorIndent',
+};
+</script>
diff --git a/packages/combinator/src/components/code_editor/code_editor_input.vue b/packages/combinator/src/components/code_editor/code_editor_input.vue
new file mode 100644
index 0000000000..859c9e8c3e
--- /dev/null
+++ b/packages/combinator/src/components/code_editor/code_editor_input.vue
@@ -0,0 +1,31 @@
+<template>
+  <span
+    class="dtc-code-editor-input d-ws-pre-wrap"
+    spellcheck="false"
+    contenteditable
+    @input="e => emit('input', e)"
+  >
+    <slot />
+  </span>
+</template>
+
+<script setup>
+const emit = defineEmits(['input']);
+</script>
+
+<script>
+export default {
+  name: 'DtcCodeEditorInput',
+};
+</script>
+
+<style lang="less">
+.dtc-code-editor-input {
+  padding: var(--su2) var(--su4) var(--su2) var(--su4);
+  border-radius: var(--su6);
+  border: solid var(--su1);
+  border-color: var(--dtc-theme-color-background-lighten);
+  background-color: var(--dtc-theme-color-background-darken);
+  outline: none;
+}
+</style>
diff --git a/packages/combinator/src/components/code_editor/code_editor_opening_tag.vue b/packages/combinator/src/components/code_editor/code_editor_opening_tag.vue
new file mode 100644
index 0000000000..8ae1659f1f
--- /dev/null
+++ b/packages/combinator/src/components/code_editor/code_editor_opening_tag.vue
@@ -0,0 +1,30 @@
+<template>
+  <dtc-code-editor-tag
+    :name="name"
+  >
+    <template #end>
+      <slot />
+    </template>
+  </dtc-code-editor-tag>
+</template>
+
+<script setup>
+import DtcCodeEditorTag from './code_editor_tag';
+
+defineProps({
+  name: {
+    type: String,
+    required: true,
+  },
+  selfClosing: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
+
+<script>
+export default {
+  name: 'DtcCodeEditorOpeningTag',
+};
+</script>
diff --git a/packages/combinator/src/components/code_editor/code_editor_slot.vue b/packages/combinator/src/components/code_editor/code_editor_slot.vue
new file mode 100644
index 0000000000..71fc0da127
--- /dev/null
+++ b/packages/combinator/src/components/code_editor/code_editor_slot.vue
@@ -0,0 +1,74 @@
+<template>
+  <dtc-code-editor-indent
+    :level="indentLevel"
+  >
+    <dtc-code-editor-element
+      v-if="name !== DEFAULT_SLOT_NAME"
+      tag-name="template"
+    >
+      <template #opening>
+        <span>&nbsp;</span>
+        <span class="dtc-scheme__class">#{{ name }}</span>
+      </template>
+      <template #default>
+        <dtc-code-editor-indent
+          :level="indentLevel"
+        >
+          <dtc-code-editor-input
+            @input="onInput"
+          >
+            <slot />
+          </dtc-code-editor-input>
+        </dtc-code-editor-indent>
+      </template>
+    </dtc-code-editor-element>
+    <dtc-code-editor-input
+      v-else
+      @input="onInput"
+    >
+      <slot />
+    </dtc-code-editor-input>
+  </dtc-code-editor-indent>
+</template>
+
+<script setup>
+import DtcCodeEditorElement from './code_editor_element';
+import DtcCodeEditorInput from './code_editor_input';
+import { DEFAULT_SLOT_NAME } from '@/src/lib/constants';
+import DtcCodeEditorIndent from '@/src/components/code_editor/code_editor_indent';
+
+const props = defineProps({
+  /**
+   * Name of slot in template tag.
+   */
+  name: {
+    type: String,
+    default: DEFAULT_SLOT_NAME,
+  },
+  /**
+   * Indent level of slot.
+   */
+  indentLevel: {
+    type: Number,
+    default: 1,
+  },
+});
+
+const emit = defineEmits(['update:options']);
+
+function onInput (e) {
+  emit('update:options', options => {
+    options.slots[props.name] = e.target.textContent;
+  });
+}
+</script>
+
+<script>
+/**
+ * The slot displays the content wrapped by 'template' tags that match the slot name.
+ * The default slot is not wrapped by 'template' tags.
+ */
+export default {
+  name: 'DtcCodeEditorSlot',
+};
+</script>
diff --git a/packages/combinator/src/components/code_editor/code_editor_tag.vue b/packages/combinator/src/components/code_editor/code_editor_tag.vue
new file mode 100644
index 0000000000..33f04753f9
--- /dev/null
+++ b/packages/combinator/src/components/code_editor/code_editor_tag.vue
@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <span>&lt;</span>
+    <slot name="start" />
+    <span class="dtc-scheme__identifier">{{ name }}</span>
+    <slot name="end" />
+    <span>&gt;</span>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  name: {
+    type: String,
+    required: true,
+  },
+});
+</script>
+
+<script>
+export default {
+  name: 'DtcCodeEditorTag',
+};
+</script>
diff --git a/packages/combinator/src/components/code_editor/code_editor_tag_attributes.vue b/packages/combinator/src/components/code_editor/code_editor_tag_attributes.vue
new file mode 100644
index 0000000000..202b47b6bd
--- /dev/null
+++ b/packages/combinator/src/components/code_editor/code_editor_tag_attributes.vue
@@ -0,0 +1,141 @@
+<template>
+  <div
+    v-if="!isEmpty"
+    class="dtc-code-editor__margin"
+  >
+    <dtc-code-editor-indent>
+      <div>
+        <template
+          v-for="[name, { value, label }] in bindingMap"
+          :key="name"
+        >
+          <div>
+            <span v-if="useBindOperator(value)">:</span>
+            <span class="dtc-scheme__class">
+              {{ label }}
+            </span>
+            <span v-if="!useShortSyntax(value)">
+              <span>=</span>
+              <span class="dtc-scheme__string">"</span>
+              <span
+                :class="{
+                  'dtc-scheme__string': !useBindOperator(value),
+                  'dtc-scheme__value': useBindOperator(value),
+                }"
+              >
+                {{ stringifyValue(value) }}
+              </span>
+              <span class="dtc-scheme__string">"</span>
+            </span>
+          </div>
+        </template>
+      </div>
+    </dtc-code-editor-indent>
+  </div>
+</template>
+
+<script setup>
+import DtcCodeEditorIndent from './code_editor_indent';
+
+import { computed } from 'vue';
+import { stringifyDocValue } from '@/src/lib/parse';
+
+const props = defineProps({
+  /**
+   * Info data object.
+   */
+  infoBindings: {
+    type: Array,
+    required: true,
+  },
+  /**
+   * Binding members to be displayed as attributes.
+   */
+  optionBindings: {
+    type: Object,
+    required: true,
+  },
+  /**
+   * Show all bindings regardless of default value.
+   */
+  verbose: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+/**
+ * Merges binding info with the actual binding values to conditionally
+ * display them in the tag.
+ *
+ * @type {ComputedRef<object>}
+ */
+const bindingMap = computed(() => {
+  return Object.entries(props.optionBindings).map(([bindingName, value]) => {
+    const bindingInfo = props.infoBindings.find(infoBinding => infoBinding.name === bindingName);
+    return [bindingName, {
+      ...bindingInfo,
+      value,
+    }];
+  }).filter(([name, member]) => isMemberVisible(name, member));
+});
+
+/**
+ * Determines if the member is visible.
+ * Compares the current value of the member to the default value.
+ * All members are considered visible if the verbose setting is on.
+ *
+ * @param name - The member name.
+ * @param member - The member info.
+ * @returns {boolean} If the member is visible.
+ */
+function isMemberVisible (name, member) {
+  if (props.verbose) { return true; }
+
+  const defaultString = JSON.stringify(member.defaultValue);
+  const valueString = JSON.stringify(member.value);
+
+  return defaultString !== valueString;
+}
+
+/**
+ * If the value is boolean it should only show the member and not the value.
+ *
+ * @param value - The member value.
+ * @returns {boolean} - If the member should be displayed using short syntax.
+ */
+function useShortSyntax (value) {
+  return value === true;
+}
+
+/**
+ * If the value is not a string it should use the ':' operator
+ * to indicate the true value is being passed in.
+ *
+ * @param value - The member value.
+ * @returns {boolean} If the member should be displayed using the bind operator.
+ */
+function useBindOperator (value) {
+  return !useShortSyntax(value) && typeof value !== 'string';
+}
+
+function stringifyValue (value) {
+  if (!value) { return `${value}`; }
+  return useBindOperator(value)
+    ? stringifyDocValue(value)
+    : value.toString();
+}
+
+const isEmpty = computed(() => {
+  return bindingMap.value.length <= 0;
+});
+</script>
+
+<script>
+/**
+ * This component generates all the attribute fields to be included on the element tag.
+ */
+export default {
+  name: 'DtcCodeEditorTagAttributes',
+};
+</script>
diff --git a/packages/combinator/src/components/code_panel/code_panel.vue b/packages/combinator/src/components/code_panel/code_panel.vue
new file mode 100644
index 0000000000..9d2ed28dc9
--- /dev/null
+++ b/packages/combinator/src/components/code_panel/code_panel.vue
@@ -0,0 +1,127 @@
+<template>
+  <dtc-overlay
+    class="dtc-code-panel"
+    :class="[
+      `dtc-code-panel-scheme--${settings.code.scheme}`,
+      `dtc-code-panel-scheme--${settings.code.scheme}--${settings.root.theme}`,
+    ]"
+  >
+    <template #content>
+      <div class="dtc-theme__canvas">
+        <dtc-tab-panel
+          selected="code"
+          :generate-label="generateLabel"
+        >
+          <template #code>
+            <dtc-code-editor
+              :info="info"
+              :options="options"
+              :theme="settings.root.theme"
+              :verbose="settings.code.verbose"
+              :indent-spaces="settings.code.indent"
+              @update:options="e => emit(OPTIONS_UPDATE_EVENT, e)"
+            />
+          </template>
+          <template #events>
+            <dtc-event-console ref="eventConsole" />
+          </template>
+        </dtc-tab-panel>
+      </div>
+    </template>
+    <template #overlay>
+      <div class="d-d-flex d-ai-flex-end d-jc-flex-end d-h100p">
+        <div class="d-pr32 d-pb16 d-pe-auto">
+          <slot name="overlay" />
+        </div>
+      </div>
+    </template>
+  </dtc-overlay>
+</template>
+
+<script setup>
+import DtcTabPanel from '@/src/components/tools/tab_panel';
+import DtcEventConsole from '@/src/components/event_console/event_console';
+import DtcCodeEditor from '@/src/components/code_editor/code_editor';
+import DtcOverlay from '@/src/components/tools/overlay';
+
+import { OPTIONS_UPDATE_EVENT } from '@/src/lib/constants';
+import { ref } from 'vue';
+
+defineProps({
+  /**
+   * Options data object.
+   */
+  options: {
+    type: Object,
+    required: true,
+  },
+  /**
+   * Info data object.
+   */
+  info: {
+    type: Object,
+    required: true,
+  },
+  /**
+   * Settings data object.
+   */
+  settings: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits([
+  OPTIONS_UPDATE_EVENT,
+]);
+
+const eventConsole = ref();
+defineExpose({
+  trigger: (event, value) => eventConsole.value.trigger(event, value),
+});
+
+function generateLabel (slot, capitalCase) {
+  const label = capitalCase(slot);
+  switch (slot) {
+    case 'events': return `${label} (${eventConsole.value?.entryCount})`;
+    default: return label;
+  }
+}
+</script>
+
+<script>
+/**
+ * The code panel is responsible for providing technical information
+ * about the target component in its current state.
+ */
+export default {
+  name: 'DtcCodePanel',
+};
+</script>
+
+<style lang="less">
+@import "@/src/assets/themes/scheme/base.less";
+@import "@/src/assets/themes/scheme/highlight_variables.less";
+
+.dtc-code-panel-scheme--mono {
+@import "@/src/assets/themes/scheme/mono.less";
+}
+
+.dtc-code-panel-scheme--highlight {
+@import "@/src/assets/themes/scheme/highlight.less";
+}
+
+.dtc-code-panel-scheme--highlight--light {
+@import "@/src/assets/themes/scheme/highlight_light.less";
+}
+
+.dtc-code-panel {
+  display: grid;
+  grid-template-columns: 1fr;
+}
+
+.dtc-code-panel > * {
+  overflow: hidden;
+  grid-area: 1 / 1;
+}
+</style>
diff --git a/packages/combinator/src/components/combinator.test.js b/packages/combinator/src/components/combinator.test.js
new file mode 100644
index 0000000000..ebb7d203fe
--- /dev/null
+++ b/packages/combinator/src/components/combinator.test.js
@@ -0,0 +1,36 @@
+import DtcCombinator from './combinator';
+
+import { assert } from 'chai';
+import { shallowMount } from '@vue/test-utils';
+import { getSupportedComponents } from '@/src/lib/test/utils_test';
+import documentation from '@/node_modules/@dialpad/dialtone-vue/dist/component-documentation.json';
+
+describe('combinator.vue test', function () {
+  const testComponents = getSupportedComponents();
+
+  let wrapper;
+
+  describe(`Supported component tests`, function () {
+    testComponents.forEach(component => {
+      describe(`When mounted with component '${component.name}'`, function () {
+        beforeEach(function () {
+          wrapper = shallowMount(DtcCombinator, {
+            props: {
+              component,
+              documentation,
+              variants: {},
+            },
+          });
+        });
+
+        afterEach(function () {
+          wrapper.unmount();
+        });
+
+        it('Should render successfully', function () {
+          assert.isTrue(wrapper.exists());
+        });
+      });
+    });
+  });
+});
diff --git a/packages/combinator/src/components/combinator.vue b/packages/combinator/src/components/combinator.vue
new file mode 100644
index 0000000000..d5501b98e3
--- /dev/null
+++ b/packages/combinator/src/components/combinator.vue
@@ -0,0 +1,395 @@
+<template>
+  <div
+    class="dtc-combinator d-d-flex d-fd-column d-w100p"
+    :class="`dtc-theme--${settings.root.theme}`"
+  >
+    <div
+      v-if="!blueprint"
+      class="d-mb6"
+    >
+      <div
+        :class="headerClass"
+        class="d-of-hidden d-ba d-bar4"
+      >
+        <dtc-header
+          :component="component"
+          :variants="variants"
+          :selected-variant="selectedVariant"
+          @update:variant="updateVariant"
+        />
+      </div>
+    </div>
+    <dt-notice
+      v-if="showUnsupportedWarning"
+      class="d-wmx-unset"
+      title="Unsupported component"
+      kind="warning"
+      :close-button-props="{ ariaLabel: 'Close warning' }"
+      @close="hideUnsupportedMessage"
+    >
+      May have unexpected behaviour.
+    </dt-notice>
+    <div class="d-d-flex d-fl-grow1 d-hmn0">
+      <div
+        class="dtc-root d-d-grid d-of-hidden d-ba d-bar4 d-w100p"
+        :class="{
+          [rootClass]: true,
+          [`dtc-root--sidebar-${settings.root.sidebar}`]: true,
+          'dtc-root--blueprint': blueprint,
+        }"
+      >
+        <div class="dtc-root__top">
+          <dtc-renderer
+            v-model:settings="settings"
+            :component="component"
+            :info="info"
+            :options="options"
+            :library="library"
+            @event="(event, value) => triggerEvent(event, value)"
+          />
+        </div>
+        <div class="dtc-root__bottom d-bt">
+          <dtc-code-panel
+            ref="codePanel"
+            v-model:options="options"
+            :info="info"
+            :settings="settings"
+          >
+            <template
+              v-if="!blueprint"
+              #overlay
+            >
+              <dtc-settings-menu v-model:settings="settings" />
+            </template>
+          </dtc-code-panel>
+        </div>
+        <div
+          v-if="!blueprint"
+          class="dtc-root__sidebar"
+        >
+          <dtc-option-bar
+            v-model:options="options"
+            :component="component"
+            :info="info"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import DtcOptionBar from './option_bar/option_bar';
+import DtcRenderer from './renderer/renderer';
+import DtcCodePanel from './code_panel/code_panel';
+import DtcSettingsMenu from './settings_menu/settings_menu';
+import DtcHeader from '@/src/components/header/header';
+import { DtNotice } from '@dialpad/dialtone-vue';
+
+import { enumerateGroups } from '@/src/lib/utils';
+import { computed, onErrorCaptured, reactive, ref } from 'vue';
+import { cachedRef, computedModel } from '@/src/lib/utils_vue';
+import { getComponentInfo } from '@/src/lib/info';
+import {
+  SETTINGS_SCHEME_KEY,
+  SETTINGS_THEME_KEY,
+  SETTINGS_VERBOSE_KEY,
+  SETTINGS_BACKGROUND_KEY,
+  SETTINGS_POSITIONING_KEY,
+  SETTINGS_SIDEBAR_KEY,
+  SETTINGS_INDENT_KEY,
+} from '@/src/lib/constants';
+import defaultSettings from '@/src/settings.json';
+import supportedComponents from '@/src/supported_components.json';
+
+const props = defineProps({
+  /**
+   * Target component.
+   */
+  component: {
+    type: Object,
+    required: true,
+  },
+  /**
+   * The dialtone-vue component documentation.
+   */
+  documentation: {
+    type: Object,
+    required: true,
+  },
+  /**
+   * Library of components that can be displayed in the renderer through slots.
+   */
+  library: {
+    type: Object,
+    default: () => {},
+  },
+  /**
+   * The variants to select.
+   * All keys will be displayed to choose from in the variant picker.
+   * Pass a variant with the key 'default' to override the default variant.
+   */
+  variants: {
+    type: Object,
+    default: () => {},
+  },
+  /**
+   * Activate 'blueprint' mode, to use a simple version of the combinator.
+   * Used to display the component but provided limited options for interaction.
+   */
+  blueprint: {
+    type: Boolean,
+    default: false,
+  },
+  rootClass: {
+    type: String,
+    default: '',
+  },
+  headerClass: {
+    type: String,
+    default: '',
+  },
+});
+
+const selectedVariant = ref('default');
+
+function updateVariant (e) {
+  selectedVariant.value = e;
+}
+
+/**
+ * Gets a new instantiation of an info object.
+ * Merges info from selected variant to the info object.
+ *
+ * @returns {object} The newly instantiated info object.
+ */
+function initializeInfo () {
+  const info = getComponentInfo(props.component, props.documentation);
+
+  const variantInfo = props.variants[selectedVariant.value];
+
+  if (variantInfo) {
+    Object.entries(variantInfo).forEach(([memberGroup, members]) => {
+      Object.entries(members).forEach(([memberName, member]) => {
+        const infoMember = info[memberGroup].find(infoMember => infoMember.name === memberName);
+        if (infoMember) {
+          Object.assign(infoMember, member);
+        }
+      });
+    });
+  }
+
+  return info;
+}
+
+/**
+ * Container for all extended component information for the target component.
+ * Immutable.
+ *
+ * @type {ComputedRef<object>}
+ */
+const info = computed(() => {
+  return Object.freeze({
+    ...initializeInfo(),
+    members: {
+      enumerate (handler) {
+        enumerateGroups(handler, {
+          slots: info.value.slots,
+          props: info.value.props,
+          attributes: info.value.attributes,
+          events: info.value.events,
+        });
+      },
+    },
+    bindings: {
+      get () {
+        const bindings = [];
+        this.enumerate((_, binding) => bindings.push(binding));
+        return bindings;
+      },
+      enumerate (handler) {
+        enumerateGroups(handler, {
+          props: info.value.props,
+          attributes: info.value.attributes?.filter(attribute => attribute),
+        });
+      },
+    },
+  });
+});
+
+/**
+ * Gets the values for a given 'options' member group with the provided defaults.
+ */
+function getInitialValues (info) {
+  const options = {};
+  info.members.enumerate((memberGroup, member) => {
+    options[memberGroup] = options[memberGroup] || {};
+    options[memberGroup][member.name] = member.initialValue;
+  });
+  return options;
+}
+
+/**
+ * The options data object is the main reactive object that allows interactivity with the target component.
+ * Reactive.
+ *
+ * @type {WritableComputedRef<object>}
+ */
+const options = computedModel(
+  computed(() => {
+    return reactive({
+      ...getInitialValues(info.value),
+      bindings: {
+        get () {
+          const bindings = [];
+          this.enumerate((_, binding) => bindings.push(binding));
+          return Object.fromEntries(bindings);
+        },
+        enumerate (handler) {
+          enumerateGroups(handler, {
+            props: options.value.props ? Object.entries(options.value.props) : null,
+            attributes: options.value.attributes ? Object.entries(options.value.attributes) : null,
+          });
+        },
+      },
+    });
+  }),
+  /**
+   * Catch errors when updating member values,
+   * else vue can block the value from ever being changed,
+   * keeping the value permanently in an invalid state
+   */
+  (e, model) => {
+    try {
+      e(model);
+    } catch (exception) {
+      console.warn('Update options warning: \n', exception);
+    }
+  },
+);
+
+/**
+ * The settings data object used to read and write cached settings used throughout the combinator.
+ *
+ * @type {WritableComputedRef<object>}
+ */
+const settings = computedModel(
+  computed(() => {
+    return reactive({
+      root: {
+        theme: cachedRef(SETTINGS_THEME_KEY, defaultSettings.root['default-theme']),
+        sidebar: cachedRef(SETTINGS_SIDEBAR_KEY, defaultSettings.root['default-sidebar']),
+      },
+      renderer: {
+        positioning: cachedRef(SETTINGS_POSITIONING_KEY, defaultSettings.renderer['default-positioning']),
+        background: cachedRef(SETTINGS_BACKGROUND_KEY, defaultSettings.renderer['default-background']),
+      },
+      code: {
+        scheme: cachedRef(SETTINGS_SCHEME_KEY, defaultSettings.code['default-scheme']),
+        indent: cachedRef(SETTINGS_INDENT_KEY, defaultSettings.code['default-indent-spaces']),
+        verbose: props.blueprint
+          ? false
+          : cachedRef(SETTINGS_VERBOSE_KEY, defaultSettings.code['default-verbose']),
+      },
+    });
+  }),
+  (e, model) => {
+    try {
+      e(model);
+    } catch (exception) {
+      console.warn('Update settings warning: \n', exception);
+    }
+  },
+);
+
+const showUnsupportedWarning = ref(!supportedComponents.includes(props.component.name));
+
+function hideUnsupportedMessage () {
+  showUnsupportedWarning.value = false;
+}
+
+const codePanel = ref();
+
+function triggerEvent (event, value) {
+  codePanel.value.trigger(event, value);
+}
+
+onErrorCaptured((exception) => {
+  console.error('Internal vue error: \n', exception);
+  return false;
+});
+</script>
+
+<script>
+/**
+ * The root component that facilitates input and output with its child components.
+ * Holds the two central data objects 'info' and 'options'.
+ */
+export default {
+  name: 'DtcCombinator',
+};
+</script>
+
+<style lang="less">
+@import "@/src/assets/themes/base.less";
+.dtc-theme--light { @import "@/src/assets/themes/light.less"; }
+.dtc-theme--dark { @import "@/src/assets/themes/dark.less"; }
+
+.dtc-root {
+  grid-template-rows: repeat(2, 1fr);
+}
+
+.dtc-root--blueprint {
+  grid-template-columns: 1fr !important;
+
+  .dtc-root__top {
+    grid-column-start: 1 !important;
+  }
+
+  .dtc-root__bottom {
+    grid-column-start: 1 !important;
+  }
+}
+
+.dtc-root--sidebar-right {
+  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
+
+  .dtc-root__bottom {
+    grid-row-start: 2;
+  }
+
+  .dtc-root__sidebar {
+    grid-row: span 2 / span 2;
+    border-left: var(--su1) solid currentColor;
+  }
+}
+
+.dtc-root--sidebar-left {
+  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
+
+  .dtc-root__top {
+    grid-row-start: 1;
+    grid-column-start: 2;
+  }
+
+  .dtc-root__bottom {
+    grid-row-start: 2;
+    grid-column-start: 2;
+  }
+
+  .dtc-root__sidebar {
+    grid-column-start: 1;
+    grid-row: span 2 / span 2;
+    border-right: var(--su1) solid currentColor;
+  }
+}
+
+.dtc-root > * {
+  display: flex;
+  overflow: hidden;
+}
+
+.dtc-icon[disabled] {
+  background-color: transparent !important;
+}
+</style>
diff --git a/packages/combinator/src/components/controls/control_array.test.js b/packages/combinator/src/components/controls/control_array.test.js
new file mode 100644
index 0000000000..70744c281c
--- /dev/null
+++ b/packages/combinator/src/components/controls/control_array.test.js
@@ -0,0 +1,63 @@
+import DtcControlArray from './control_array';
+
+import { assert } from 'chai';
+import { mount } from '@vue/test-utils';
+
+const itemSelector = '[data-qa=dtc-control-array-item]';
+const itemInputSelector = 'input';
+
+const inputValues = [
+  'item1',
+  'item2',
+  'item3',
+  4,
+];
+
+describe('control_array.vue test', function () {
+  let wrapper;
+  let itemWrappers;
+  let inputWrappers;
+
+  const _mountWrapper = () => {
+    wrapper = mount(DtcControlArray);
+    _setChildWrappers();
+  };
+
+  const _setChildWrappers = () => {
+    itemWrappers = wrapper.findAll(itemSelector);
+    inputWrappers = itemWrappers.map(itemWrapper => itemWrapper.find(itemInputSelector));
+  };
+
+  before(function () {
+    _mountWrapper();
+  });
+
+  describe('When mounted', function () {
+    it('Should render successfully', function () {
+      assert.isTrue(wrapper.exists());
+    });
+  });
+
+  describe('When a value is provided', function () {
+    beforeEach(async function () {
+      await wrapper.setProps({
+        value: inputValues,
+      });
+      _setChildWrappers();
+    });
+
+    it('Should generate a control for each array item', function () {
+      assert.equal(inputValues.length, itemWrappers.length);
+    });
+
+    // Checking if each value passed to the component has a native input with a matching value
+    describe('Should have matching control and native input values', function () {
+      inputValues.forEach(value => {
+        it(`Should have a matching native input for value '${value}'`, function () {
+          const itemValues = inputWrappers.map(inputWrapper => inputWrapper.element.value);
+          assert.isTrue(itemValues.includes(value.toString()));
+        });
+      });
+    });
+  });
+});
diff --git a/packages/combinator/src/components/controls/control_array.vue b/packages/combinator/src/components/controls/control_array.vue
new file mode 100644
index 0000000000..1e1f3641dc
--- /dev/null
+++ b/packages/combinator/src/components/controls/control_array.vue
@@ -0,0 +1,62 @@
+<template>
+  <dtc-control-iterable
+    :value="value"
+    :disabled="disabled"
+    :generate-item="generateItem"
+    @update:value="e => emit(VALUE_UPDATE_EVENT, e)"
+  >
+    <template #default>
+      <slot />
+    </template>
+    <template #prefix>
+      [
+    </template>
+    <template #item="{ item, update }">
+      <div
+        data-qa="dtc-control-array-item"
+      >
+        <dtc-control-dynamic
+          :value="serializeControlValue(item)"
+          :disabled="disabled"
+          @update:value="e => update(deserializeControlValue(e))"
+        />
+      </div>
+    </template>
+    <template #suffix>
+      ]
+    </template>
+  </dtc-control-iterable>
+</template>
+
+<script setup>
+import DtcControlIterable from './control_iterable';
+import DtcControlDynamic from './control_dynamic';
+import { VALUE_UPDATE_EVENT } from '@/src/lib/constants';
+import { serializeControlValue, deserializeControlValue } from '@/src/lib/control';
+
+defineProps({
+  value: {
+    type: Array,
+    default: () => ([]),
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits([VALUE_UPDATE_EVENT]);
+
+function generateItem () {
+  return undefined;
+}
+</script>
+
+<script>
+/**
+ * Control that is used to provide functionality to manipulate arrays.
+ */
+export default {
+  name: 'DtcControlArray',
+};
+</script>
diff --git a/packages/combinator/src/components/controls/control_base.test.js b/packages/combinator/src/components/controls/control_base.test.js
new file mode 100644
index 0000000000..19a533b31e
--- /dev/null
+++ b/packages/combinator/src/components/controls/control_base.test.js
@@ -0,0 +1,18 @@
+import DtcControlBase from './control_base';
+
+import { assert } from 'chai';
+import { mount } from '@vue/test-utils';
+
+describe('control_base.vue test', function () {
+  let wrapper;
+
+  before(function () {
+    wrapper = mount(DtcControlBase);
+  });
+
+  describe('When mounted', function () {
+    it('Should render successfully', function () {
+      assert.isTrue(wrapper.exists());
+    });
+  });
+});
diff --git a/packages/combinator/src/components/controls/control_base.vue b/packages/combinator/src/components/controls/control_base.vue
new file mode 100644
index 0000000000..7504b740db
--- /dev/null
+++ b/packages/combinator/src/components/controls/control_base.vue
@@ -0,0 +1,36 @@
+<template>
+  <dtc-control-string
+    :value="value?.toString()"
+    :disabled="disabled"
+    @update:value="e => emit(VALUE_UPDATE_EVENT, e)"
+  >
+    <slot />
+  </dtc-control-string>
+</template>
+
+<script setup>
+import DtcControlString from './control_string';
+import { VALUE_UPDATE_EVENT } from '@/src/lib/constants';
+
+defineProps({
+  value: {
+    type: undefined,
+    default: () => String(),
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits([VALUE_UPDATE_EVENT]);
+</script>
+
+<script>
+/**
+ * Control that is used when no other controls are valid.
+ */
+export default {
+  name: 'DtcControlBase',
+};
+</script>
diff --git a/packages/combinator/src/components/controls/control_boolean.test.js b/packages/combinator/src/components/controls/control_boolean.test.js
new file mode 100644
index 0000000000..c4960e6247
--- /dev/null
+++ b/packages/combinator/src/components/controls/control_boolean.test.js
@@ -0,0 +1,56 @@
+import DtcControlBoolean from './control_boolean';
+
+import { assert } from 'chai';
+import { mount } from '@vue/test-utils';
+
+const inputSelector = '[data-qa=dtc-control-boolean-input]';
+
+const inputValue = true;
+const defaultValue = DtcControlBoolean.props.value.default();
+
+describe('control_boolean.vue test', function () {
+  let wrapper;
+  let inputWrapper;
+
+  const _mountWrapper = () => {
+    wrapper = mount(DtcControlBoolean);
+    _setChildWrappers();
+  };
+
+  const _setChildWrappers = () => {
+    inputWrapper = wrapper.find(inputSelector);
+  };
+
+  before(function () {
+    _mountWrapper();
+  });
+
+  describe('When mounted', function () {
+    it('Should render successfully', function () {
+      assert.isTrue(wrapper.exists());
+    });
+  });
+
+  describe('When a value is provided', function () {
+    beforeEach(async function () {
+      await wrapper.setProps({
+        value: inputValue,
+      });
+      _setChildWrappers();
+    });
+
+    it('Should set the native input to value', function () {
+      assert.equal(inputValue, inputWrapper.element.checked);
+    });
+  });
+
+  describe('When a value is not provided', function () {
+    beforeEach(function () {
+      _mountWrapper();
+    });
+
+    it('Should set the native input to control default', function () {
+      assert.equal(defaultValue, inputWrapper.element.checked);
+    });
+  });
+});
diff --git a/packages/combinator/src/components/controls/control_boolean.vue b/packages/combinator/src/components/controls/control_boolean.vue
new file mode 100644
index 0000000000..465d436443
--- /dev/null
+++ b/packages/combinator/src/components/controls/control_boolean.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="dtc-control-boolean">
+    <dt-checkbox
+      label-class="dtc-control-boolean__label"
+      :checked="value"
+      :disabled="disabled"
+      data-qa="dtc-control-boolean-input"
+      @input="e => emit(VALUE_UPDATE_EVENT, e)"
+    >
+      <slot />
+    </dt-checkbox>
+  </div>
+</template>
+
+<script setup>
+import { DtCheckbox } from '@dialpad/dialtone-vue';
+import { VALUE_UPDATE_EVENT } from '@/src/lib/constants';
+
+defineProps({
+  value: {
+    type: Boolean,
+    default: () => false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits([VALUE_UPDATE_EVENT]);
+</script>
+
+<script>
+/**
+ * Control that is used to set 'boolean' value.
+ */
+export default {
+  name: 'DtcControlBoolean',
+};
+</script>
+
+<style>
+.dtc-control-boolean .d-checkbox__input {
+  align-self: center;
+}
+
+.dtc-control-boolean__label {
+  color: var(--base--text-color);
+  font-size: var(--base--font-size);
+}
+</style>
diff --git a/packages/combinator/src/components/controls/control_dynamic.test.js b/packages/combinator/src/components/controls/control_dynamic.test.js
new file mode 100644
index 0000000000..82c02ddad1
--- /dev/null
+++ b/packages/combinator/src/components/controls/control_dynamic.test.js
@@ -0,0 +1,93 @@
+import DtcControlDynamic from './control_dynamic';
+import DtcControlNumber from '@/src/components/controls/control_number';
+import DtcControlString from '@/src/components/controls/control_string';
+
+import { assert } from 'chai';
+import { mount } from '@vue/test-utils';
+import { UNSET } from '@/src/lib/control';
+
+const selectionSelector = '[data-qa=dtc-control-dynamic-selection]';
+const inputSelector = 'select';
+
+const testControls = {
+  string: {
+    value: 'string test',
+    component: DtcControlString,
+  },
+  number: {
+    value: 17,
+    component: DtcControlNumber,
+  },
+  true: {
+    value: true,
+  },
+  false: {
+    value: false,
+  },
+  null: {
+    value: null,
+  },
+  undefined: {
+    value: undefined,
+  },
+};
+
+const defaultValue = undefined;
+
+describe('control_dynamic.vue test', function () {
+  let wrapper;
+  let selectionWrapper;
+  let inputWrapper;
+
+  const _mountWrapper = () => {
+    wrapper = mount(DtcControlDynamic);
+    _setChildWrappers();
+  };
+
+  const _setChildWrappers = () => {
+    selectionWrapper = wrapper?.find(selectionSelector);
+    inputWrapper = selectionWrapper?.find(inputSelector);
+  };
+
+  before(function () {
+    _mountWrapper();
+  });
+
+  describe('When mounted', function () {
+    beforeEach(async function () {
+      await wrapper.setProps({
+        value: defaultValue,
+      });
+    });
+
+    it('Should render successfully', function () {
+      assert.isTrue(wrapper.exists());
+    });
+  });
+
+  Object.entries(testControls).forEach(([control, { value, component }]) => {
+    describe(
+      `When provided value is '${value === UNSET ? `${UNSET.toString()}` : value}' {${typeof value}}`,
+      function () {
+        beforeEach(function () {
+          wrapper = mount(DtcControlDynamic, {
+            props: {
+              value,
+            },
+          });
+          _setChildWrappers();
+        });
+
+        it(`Should set selection to '${control}'`, function () {
+          assert.equal(inputWrapper.element.value, control);
+        });
+
+        if (component) {
+          it(`Should set the generated control to '${component.name}'`, function () {
+            assert.exists(wrapper.findComponent(component));
+          });
+        }
+      },
+    );
+  });
+});
diff --git a/packages/combinator/src/components/controls/control_dynamic.vue b/packages/combinator/src/components/controls/control_dynamic.vue
new file mode 100644
index 0000000000..bb3ae96631
--- /dev/null
+++ b/packages/combinator/src/components/controls/control_dynamic.vue
@@ -0,0 +1,135 @@
+<template>
+  <div>
+    <slot />
+    <div data-qa="dtc-control-dynamic-selection">
+      <dtc-control-selection
+        :value="selectedControl"
+        :valid-values="controlSelections"
+        :disabled="disabled"
+        @update:value="updateControl"
+      />
+    </div>
+    <div
+      class="d-ps-relative d-b1"
+      :class="inputClass"
+      data-qa="dtc-control-dynamic-value"
+    >
+      <component
+        :is="controlComponent"
+        v-if="controlComponent"
+        v-bind="bindings"
+        :value="value"
+        @update:value="updateValue"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import DtcControlSelection from './control_selection';
+
+import { controlMap, getControlByValue, UNSET } from '@/src/lib/control';
+import { VALUE_UPDATE_EVENT } from '@/src/lib/constants';
+import { computed, ref } from 'vue';
+
+const props = defineProps({
+  value: {
+    type: undefined,
+    default: () => UNSET,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  inputClass: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits([VALUE_UPDATE_EVENT]);
+
+const bindings = computed(() => {
+  return {
+    disabled: props.disabled,
+  };
+});
+
+/**
+ * Controls from the 'control map' to include in selections.
+ *
+ * @type {Array}
+ */
+const externalControls = [
+  'string',
+  'number',
+  'array',
+  'object',
+];
+
+const controlSelectionMap = {
+  ...Object.fromEntries(
+    Object.entries(controlMap).filter(([controlName]) => {
+      return externalControls.includes(controlName);
+    }),
+  ),
+  true: {
+    component: null,
+    default () { return true; },
+  },
+  false: {
+    component: null,
+    default () { return false; },
+  },
+  null: {
+    component: null,
+    default () { return null; },
+  },
+  undefined: {
+    component: null,
+    default () { return UNSET; },
+  },
+};
+
+const controlSelections = computed(() => Object.keys(controlSelectionMap));
+const selectedControl = ref(getControl());
+
+const controlComponent = computed(() => {
+  return controlSelectionMap[selectedControl.value].component;
+});
+
+function getControl () {
+  const value = props.value;
+
+  switch (value) {
+    case UNSET: return 'undefined';
+    case null: return 'null';
+    case false: return 'false';
+    case true: return 'true';
+  }
+
+  const control = getControlByValue(value);
+
+  return control === 'base'
+    ? controlMap.dynamic.defaultControl()
+    : control;
+}
+
+function updateControl (e) {
+  selectedControl.value = e;
+  updateValue(controlSelectionMap[e].default());
+}
+
+function updateValue (e) {
+  emit(VALUE_UPDATE_EVENT, e);
+}
+</script>
+
+<script>
+/**
+ * Control that is used to set a value from a variety of data types.
+ */
+export default {
+  name: 'DtcControlDynamic',
+};
+</script>
diff --git a/packages/combinator/src/components/controls/control_event.test.js b/packages/combinator/src/components/controls/control_event.test.js
new file mode 100644
index 0000000000..ebf5684809
--- /dev/null
+++ b/packages/combinator/src/components/controls/control_event.test.js
@@ -0,0 +1,18 @@
+import DtcControlEvent from './control_event';
+
+import { assert } from 'chai';
+import { mount } from '@vue/test-utils';
+
+describe('control_event.vue test', function () {
+  let wrapper;
+
+  before(function () {
+    wrapper = mount(DtcControlEvent);
+  });
+
+  describe('When mounted', function () {
+    it('Should render successfully', function () {
+      assert.isTrue(wrapper.exists());
+    });
+  });
+});
diff --git a/packages/combinator/src/components/controls/control_event.vue b/packages/combinator/src/components/controls/control_event.vue
new file mode 100644
index 0000000000..ac4022ed76
--- /dev/null
+++ b/packages/combinator/src/components/controls/control_event.vue
@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <slot />
+  </div>
+</template>
+
+<script>
+/**
+ * Control that is used to display an event of a component.
+ */
+export default {
+  name: 'DtcControlEvent',
+};
+</script>
diff --git a/packages/combinator/src/components/controls/control_iterable.test.js b/packages/combinator/src/components/controls/control_iterable.test.js
new file mode 100644
index 0000000000..6799c01ac9
--- /dev/null
+++ b/packages/combinator/src/components/controls/control_iterable.test.js
@@ -0,0 +1,23 @@
+import DtcControlIterable from './control_iterable';
+
+import { assert } from 'chai';
+import { mount } from '@vue/test-utils';
+
+describe('control_iterable.vue test', function () {
+  let wrapper;
+
+  before(function () {
+    wrapper = mount(DtcControlIterable, {
+      props: {
+        value: [],
+        generateItem: () => null,
+      },
+    });
+  });
+
+  describe('When mounted', function () {
+    it('Should render successfully', function () {
+      assert.isTrue(wrapper.exists());
+    });
+  });
+});
diff --git a/packages/combinator/src/components/controls/control_iterable.vue b/packages/combinator/src/components/controls/control_iterable.vue
new file mode 100644
index 0000000000..8c3242ffa1
--- /dev/null
+++ b/packages/combinator/src/components/controls/control_iterable.vue
@@ -0,0 +1,136 @@
+<template>
+  <div>
+    <div>
+      <slot />
+    </div>
+    <div class="d-fs18">
+      <slot name="prefix" />
+    </div>
+    <div>
+      <template
+        v-for="(item, index) in value"
+        :key="getId(index)"
+      >
+        <div class="d-d-flex d-my1">
+          <div class="d-fl-grow1">
+            <dt-list-item
+              class="d-p6 d-pl0"
+              navigation-type="tab"
+              type="custom"
+            >
+              <slot
+                name="item"
+                :item="item"
+                :update="(e) => updateItem(index, e)"
+              />
+            </dt-list-item>
+          </div>
+          <div>
+            <dt-button
+              class="dtc-icon d-px0 d-py6 d-ps-relative d-t6"
+              importance="clear"
+              size="xs"
+              :disabled="disabled"
+              @click="() => removeItem(index)"
+            >
+              <IconRemove />
+            </dt-button>
+          </div>
+        </div>
+      </template>
+      <div>
+        <dt-button
+          class="dtc-icon d-p0 d-mt8"
+          importance="clear"
+          :disabled="disabled"
+          @click="addItem"
+        >
+          <icon-add />
+        </dt-button>
+      </div>
+    </div>
+    <div class="d-fs18">
+      <slot name="suffix" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import IconAdd from 'dialtone-icons/IconAddCircleOutline';
+import IconRemove from 'dialtone-icons/IconRemove';
+import { DtButton, DtListItem } from '@dialpad/dialtone-vue';
+import { DEFAULT_PREFIX, VALUE_UPDATE_EVENT } from '@/src/lib/constants';
+import { idMap } from '@/src/lib/utils_vue';
+import { getUniqueString } from '@/src/lib/utils';
+
+const props = defineProps({
+  value: {
+    type: Array,
+    required: true,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * Function that returns an item to append to list.
+   */
+  generateItem: {
+    type: Function,
+    required: true,
+  },
+});
+
+const emit = defineEmits([VALUE_UPDATE_EVENT]);
+
+const prefix = getUniqueString(`${DEFAULT_PREFIX}-control-iterable`);
+
+/**
+ * Id map is used to keep v-for keys in order when adding and removing new items.
+ */
+const { addId, removeId, getId } = idMap(`${prefix}-item`);
+
+function updateItem (index, item) {
+  const items = [...props.value];
+
+  items.splice(index, 1, item);
+
+  updateValue(items);
+}
+
+function addItem () {
+  const items = [
+    ...props.value,
+    props.generateItem(),
+  ];
+
+  addId();
+
+  updateValue(items);
+}
+
+function removeItem (index) {
+  const items = [...props.value];
+
+  items.splice(index, 1);
+
+  removeId(index);
+
+  updateValue(items);
+}
+
+function updateValue (e) {
+  emit(VALUE_UPDATE_EVENT, e);
+}
+</script>
+
+<script>
+/**
+ * Control that is used to provide an interface to modify generic iterable values.
+ * The important parts of the functionality are abstracted to the parent to allow
+ * reuse of this control for any iterable value type.
+ */
+export default {
+  name: 'DtcControlIterable',
+};
+</script>
diff --git a/packages/combinator/src/components/controls/control_nullish.test.js b/packages/combinator/src/components/controls/control_nullish.test.js
new file mode 100644
index 0000000000..41411581de
--- /dev/null
+++ b/packages/combinator/src/components/controls/control_nullish.test.js
@@ -0,0 +1,58 @@
+import DtcControlNullish from './control_nullish';
+
+import { assert } from 'chai';
+import { mount } from '@vue/test-utils';
+import { UNSET } from '@/src/lib/control';
+
+const inputSelector = 'select';
+
+const inputValue = UNSET;
+
+const inputString = 'undefined';
+const defaultString = 'null';
+
+describe('control_nullish.vue test', function () {
+  let wrapper;
+  let inputWrapper;
+
+  const _mountWrapper = () => {
+    wrapper = mount(DtcControlNullish);
+    _setChildWrappers();
+  };
+
+  const _setChildWrappers = () => {
+    inputWrapper = wrapper.find(inputSelector);
+  };
+
+  before(function () {
+    _mountWrapper();
+  });
+
+  describe('When mounted', function () {
+    it('Should render successfully', function () {
+      assert.isTrue(wrapper.exists());
+    });
+  });
+
+  describe('When a value is provided', function () {
+    beforeEach(async function () {
+      await wrapper.setProps({
+        value: inputValue,
+      });
+    });
+
+    it('Should set the native input to value', function () {
+      assert.equal(inputString, inputWrapper.element.value);
+    });
+  });
+
+  describe('When a value is not provided', function () {
+    beforeEach(function () {
+      _mountWrapper();
+    });
+
+    it('Should set the native input to control default', function () {
+      assert.equal(defaultString, inputWrapper.element.value);
+    });
+  });
+});
diff --git a/packages/combinator/src/components/controls/control_nullish.vue b/packages/combinator/src/components/controls/control_nullish.vue
new file mode 100644
index 0000000000..bbbb945605
--- /dev/null
+++ b/packages/combinator/src/components/controls/control_nullish.vue
@@ -0,0 +1,58 @@
+<template>
+  <dtc-control-selection
+    :value="selection"
+    :valid-values="selections"
+    :disabled="disabled"
+    @update:value="updateValue"
+  >
+    <slot />
+  </dtc-control-selection>
+</template>
+
+<script setup>
+import DtcControlSelection from './control_selection';
+import { computed } from 'vue';
+import { VALUE_UPDATE_EVENT } from '@/src/lib/constants';
+import { UNSET } from '@/src/lib/control';
+
+const props = defineProps({
+  value: {
+    type: undefined,
+    default: () => null,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits([VALUE_UPDATE_EVENT]);
+
+const selectionMap = {
+  undefined: UNSET,
+  null: null,
+};
+
+const selections = computed(() => {
+  return Object.keys(selectionMap);
+});
+
+const selection = computed(() => {
+  return Object.keys(selectionMap).find(selection => {
+    return Object.is(props.value, selectionMap[selection]);
+  });
+});
+
+function updateValue (e) {
+  emit(VALUE_UPDATE_EVENT, selectionMap[e]);
+}
+</script>
+
+<script>
+/**
+ * Control that is used to set nullish values.
+ */
+export default {
+  name: 'DtcControlNullish',
+};
+</script>
diff --git a/packages/combinator/src/components/controls/control_number.test.js b/packages/combinator/src/components/controls/control_number.test.js
new file mode 100644
index 0000000000..b53c987d55
--- /dev/null
+++ b/packages/combinator/src/components/controls/control_number.test.js
@@ -0,0 +1,56 @@
+import DtcControlNumber from './control_number';
+
+import { assert } from 'chai';
+import { mount } from '@vue/test-utils';
+
+const inputSelector = 'input';
+
+const inputValue = 5;
+const defaultValue = DtcControlNumber.props.value.default();
+
+describe('control_number.vue test', function () {
+  let wrapper;
+  let inputWrapper;
+
+  const _mountWrapper = () => {
+    wrapper = mount(DtcControlNumber);
+    _setChildWrappers();
+  };
+
+  const _setChildWrappers = () => {
+    inputWrapper = wrapper.find(inputSelector);
+  };
+
+  before(function () {
+    _mountWrapper();
+  });
+
+  describe('When mounted', function () {
+    it('Should render successfully', function () {
+      assert.isTrue(wrapper.exists());
+    });
+  });
+
+  describe('When a value is provided', function () {
+    beforeEach(async function () {
+      await wrapper.setProps({
+        value: inputValue,
+      });
+      _setChildWrappers();
+    });
+
+    it('Should set the native input to value', function () {
+      assert.equal(inputValue, inputWrapper.element.value);
+    });
+  });
+
+  describe('When a value is not provided', function () {
+    beforeEach(function () {
+      _mountWrapper();
+    });
+
+    it('Should set the native input to control default', function () {
+      assert.equal(defaultValue, inputWrapper.element.value);
+    });
+  });
+});
diff --git a/packages/combinator/src/components/controls/control_number.vue b/packages/combinator/src/components/controls/control_number.vue
new file mode 100644
index 0000000000..572adb97ef
--- /dev/null
+++ b/packages/combinator/src/components/controls/control_number.vue
@@ -0,0 +1,65 @@
+<template>
+  <div class="d-d-flex d-ai-flex-end">
+    <div class="d-fl-grow1">
+      <dt-input
+        :value="inputValue"
+        :disabled="disabled || isNaN(value)"
+        type="number"
+        size="sm"
+        @input="e => emit(VALUE_UPDATE_EVENT, parseInt(e))"
+      >
+        <template #labelSlot>
+          <slot />
+        </template>
+      </dt-input>
+    </div>
+    <div class="d-pl6">
+      <dt-checkbox
+        label="NaN"
+        :checked="isNaN(value)"
+        :disabled="disabled"
+        @input="toggleNaN"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { DtInput, DtCheckbox } from '@dialpad/dialtone-vue';
+import { VALUE_UPDATE_EVENT } from '@/src/lib/constants';
+import { computed } from 'vue';
+
+const props = defineProps({
+  value: {
+    type: Number,
+    default: () => Number(),
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+function isNaN (value) {
+  return Number.isNaN(value);
+}
+
+const inputValue = computed(() => {
+  return isNaN(props.value) ? null : props.value;
+});
+
+function toggleNaN (e) {
+  emit(VALUE_UPDATE_EVENT, e ? NaN : 0);
+}
+
+const emit = defineEmits([VALUE_UPDATE_EVENT]);
+</script>
+
+<script>
+/**
+ * Control that is used to set 'number' value.
+ */
+export default {
+  name: 'DtcControlNumber',
+};
+</script>
diff --git a/packages/combinator/src/components/controls/control_object.test.js b/packages/combinator/src/components/controls/control_object.test.js
new file mode 100644
index 0000000000..10e934d620
--- /dev/null
+++ b/packages/combinator/src/components/controls/control_object.test.js
@@ -0,0 +1,81 @@
+import DtcControlObject from './control_object';
+
+import { assert } from 'chai';
+import { mount } from '@vue/test-utils';
+
+const itemKeySelector = '[data-qa=dtc-control-object-item-key]';
+const itemKeyInputSelector = 'input';
+
+const itemValueSelector = '[data-qa=dtc-control-object-item-value]';
+const itemValueInputSelector = 'input';
+
+const inputValues = {
+  key1: 'value1',
+  key2: 'value2',
+  key3: 'value3',
+  key4: 4,
+};
+
+describe('control_object.vue test', function () {
+  let wrapper;
+  let itemKeyWrappers;
+  let itemKeyInputWrappers;
+  let itemValueWrappers;
+  let itemValueInputWrappers;
+
+  const _mountWrapper = () => {
+    wrapper = mount(DtcControlObject);
+    _setChildWrappers();
+  };
+
+  const _setChildWrappers = () => {
+    itemKeyWrappers = wrapper.findAll(itemKeySelector);
+    itemKeyInputWrappers = itemKeyWrappers.map(itemWrapper => itemWrapper.find(itemKeyInputSelector));
+    itemValueWrappers = wrapper.findAll(itemValueSelector);
+    itemValueInputWrappers = itemValueWrappers.map(itemWrapper => itemWrapper.find(itemValueInputSelector));
+  };
+
+  before(function () {
+    _mountWrapper();
+  });
+
+  describe('When mounted', function () {
+    it('Should render successfully', function () {
+      assert.isTrue(wrapper.exists());
+    });
+  });
+
+  describe('When a value is provided', function () {
+    beforeEach(async function () {
+      await wrapper.setProps({
+        value: inputValues,
+      });
+      _setChildWrappers();
+    });
+
+    it('Should generate a key control and a value control for each object entry', function () {
+      assert.equal(Object.keys(inputValues).length, itemKeyWrappers.length);
+      assert.equal(Object.values(inputValues).length, itemValueWrappers.length);
+    });
+
+    // Checking if each key-value pair passed to the component has native inputs with a matching values
+    describe('Should have matching control and native input values', function () {
+      Object.entries(inputValues).forEach(([inputKey, inputValue]) => {
+        it(`Should have a matching native input for key '${inputKey}'`, function () {
+          const itemKeys = itemKeyInputWrappers.map(inputWrapper => {
+            return inputWrapper.element.value;
+          });
+
+          assert.isTrue(itemKeys.includes(inputKey));
+        });
+
+        it(`Should have a matching native input for value '${inputValue}'`, function () {
+          const itemValues = itemValueInputWrappers.map(inputWrapper => {
+            return inputWrapper.element.value;
+          });
+          assert.isTrue(itemValues.includes(inputValue.toString()));
+        });
+      });
+    });
+  });
+});
diff --git a/packages/combinator/src/components/controls/control_object.vue b/packages/combinator/src/components/controls/control_object.vue
new file mode 100644
index 0000000000..25f92de2ea
--- /dev/null
+++ b/packages/combinator/src/components/controls/control_object.vue
@@ -0,0 +1,124 @@
+<template>
+  <dtc-control-iterable
+    :value="entries"
+    :disabled="disabled"
+    :generate-item="generateItem"
+    @update:value="updateValue"
+  >
+    <template #default>
+      <slot />
+    </template>
+    <template #prefix>
+      {
+    </template>
+    <template #item="{ item, update }">
+      <div class="d-d-grid d-g-cols2">
+        <div
+          class="d-d-flex"
+          data-qa="dtc-control-object-item-key"
+        >
+          <dtc-control-string
+            :value="item[0]"
+            :disabled="disabled"
+            @update:value="e => updateKey(e, item[1], update)"
+          />
+          <span class="d-px6 d-ps-relative d-t6">:</span>
+        </div>
+        <div
+          class="dtc-control-object__contents"
+          data-qa="dtc-control-object-item-value"
+        >
+          <dtc-control-dynamic
+            class="dtc-control-object__contents"
+            input-class="d-gc-full"
+            :value="serializeControlValue(item[1])"
+            :disabled="disabled"
+            @update:value="e => updateEntry(item[0], deserializeControlValue(e), update)"
+          />
+        </div>
+      </div>
+    </template>
+    <template #suffix>
+      }
+    </template>
+  </dtc-control-iterable>
+</template>
+
+<script setup>
+import DtcControlString from './control_string';
+import DtcControlIterable from './control_iterable';
+import DtcControlDynamic from './control_dynamic';
+import { VALUE_UPDATE_EVENT } from '@/src/lib/constants';
+import { computed } from 'vue';
+import { serializeControlValue, deserializeControlValue } from '@/src/lib/control';
+import { OrderedObject } from '@/src/lib/ordered_object';
+
+const props = defineProps({
+  value: {
+    type: Object,
+    default: () => ({}),
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits([VALUE_UPDATE_EVENT]);
+
+const entries = computed(() => {
+  return props.value ? Object.entries(props.value) : [];
+});
+
+const keys = computed(() => {
+  return entries.value.map(([key]) => key);
+});
+
+let currentId = 0;
+function generateNextId () {
+  while (keys.value.includes(currentId.toString())) {
+    currentId++;
+  }
+
+  return currentId.toString();
+}
+
+function generateItem () {
+  return [generateNextId(), undefined];
+}
+
+function updateKey (key, value, updateItem) {
+  if (keys.value.includes(key)) {
+    const id = generateNextId();
+    console.log(`Object cannot contain duplicate key '${key}', key set to '${id}'`);
+    key = id;
+  }
+
+  updateEntry(key, value, updateItem);
+}
+
+function updateEntry (key, value, updateItem) {
+  updateItem([key, value]);
+}
+
+function updateValue (e) {
+  const orderedObject = OrderedObject.fromEntries(e);
+
+  emit(VALUE_UPDATE_EVENT, orderedObject);
+}
+</script>
+
+<script>
+/**
+ * Control that is used to provide functionality to manipulate objects.
+ */
+export default {
+  name: 'DtcControlObject',
+};
+</script>
+
+<style>
+.dtc-control-object__contents {
+  display: contents;
+}
+</style>
diff --git a/packages/combinator/src/components/controls/control_selection.test.js b/packages/combinator/src/components/controls/control_selection.test.js
new file mode 100644
index 0000000000..485b251a87
--- /dev/null
+++ b/packages/combinator/src/components/controls/control_selection.test.js
@@ -0,0 +1,65 @@
+import DtcControlSelection from './control_selection';
+
+import { assert } from 'chai';
+import { mount } from '@vue/test-utils';
+
+const inputSelector = 'select';
+const optionSelector = 'option';
+
+const selections = [
+  'selection1',
+  'selection2',
+  'selection3',
+];
+
+const inputValue = selections[1];
+
+describe('control_selection.vue test', function () {
+  let wrapper;
+  let inputWrapper;
+  let optionWrappers;
+
+  const _mountWrapper = () => {
+    wrapper = mount(DtcControlSelection, {
+      props: {
+        value: inputValue,
+        validValues: selections,
+      },
+    });
+    _setChildWrappers();
+  };
+
+  const _setChildWrappers = () => {
+    inputWrapper = wrapper.find(inputSelector);
+    optionWrappers = wrapper.findAll(optionSelector);
+  };
+
+  before(function () {
+    _mountWrapper();
+  });
+
+  describe('When mounted', function () {
+    it('Should render successfully', function () {
+      assert.isTrue(wrapper.exists());
+    });
+  });
+
+  describe('When rendering the native select', function () {
+    describe('Should create option elements for each selection', function () {
+      selections.forEach(selection => {
+        it(`Should have a matching option element for selection '${selection}'`, function () {
+          const optionValues = optionWrappers.map(optionWrapper => {
+            return optionWrapper.element.value;
+          });
+          assert.isTrue(optionValues.includes(selection));
+        });
+      });
+    });
+
+    describe('When a value is provided', function () {
+      it('Should set the native input to value', function () {
+        assert.equal(inputValue, inputWrapper.element.value);
+      });
+    });
+  });
+});
diff --git a/packages/combinator/src/components/controls/control_selection.vue b/packages/combinator/src/components/controls/control_selection.vue
new file mode 100644
index 0000000000..8521361d25
--- /dev/null
+++ b/packages/combinator/src/components/controls/control_selection.vue
@@ -0,0 +1,57 @@
+<template>
+  <dt-select-menu
+    label-class="d-fs16 d-fw-normal d-mb0"
+    :value="value"
+    :options="options"
+    :disabled="disabled"
+    size="xs"
+    @input="e => emit(VALUE_UPDATE_EVENT, e)"
+  >
+    <template #label>
+      <slot />
+    </template>
+  </dt-select-menu>
+</template>
+
+<script setup>
+import { DtSelectMenu } from '@dialpad/dialtone-vue';
+
+import { VALUE_UPDATE_EVENT } from '@/src/lib/constants';
+import { computed } from 'vue';
+
+const props = defineProps({
+  value: {
+    type: undefined,
+    required: true,
+  },
+  validValues: {
+    type: Array,
+    default: undefined,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  generateLabel: {
+    type: Function,
+    default: (value) => value.toString(),
+  },
+});
+
+const emit = defineEmits([VALUE_UPDATE_EVENT]);
+
+const options = computed(() => {
+  return props.validValues?.map(selection => {
+    return { value: selection, label: props.generateLabel(selection) };
+  });
+});
+</script>
+
+<script>
+/**
+ * Control that is used to select any value from a list of values.
+ */
+export default {
+  name: 'DtcControlSelection',
+};
+</script>
diff --git a/packages/combinator/src/components/controls/control_slot.test.js b/packages/combinator/src/components/controls/control_slot.test.js
new file mode 100644
index 0000000000..6c516d628a
--- /dev/null
+++ b/packages/combinator/src/components/controls/control_slot.test.js
@@ -0,0 +1,56 @@
+import DtcControlSlot from './control_slot';
+
+import { assert } from 'chai';
+import { mount } from '@vue/test-utils';
+
+const inputSelector = 'textarea';
+
+const inputValue = 'slot test';
+const defaultValue = '';
+
+describe('control_slot.vue test', function () {
+  let wrapper;
+  let inputWrapper;
+
+  const _mountWrapper = () => {
+    wrapper = mount(DtcControlSlot);
+    _setChildWrappers();
+  };
+
+  const _setChildWrappers = () => {
+    inputWrapper = wrapper.find(inputSelector);
+  };
+
+  before(function () {
+    _mountWrapper();
+  });
+
+  describe('When mounted', function () {
+    it('Should render successfully', function () {
+      assert.isTrue(wrapper.exists());
+    });
+  });
+
+  describe('When a value is provided', function () {
+    beforeEach(async function () {
+      await wrapper.setProps({
+        value: inputValue,
+      });
+      _setChildWrappers();
+    });
+
+    it('Should set the native input to value', function () {
+      assert.equal(inputValue, inputWrapper.element.value);
+    });
+  });
+
+  describe('When a value is not provided', function () {
+    beforeEach(function () {
+      _mountWrapper();
+    });
+
+    it('Should set the native input to control default', function () {
+      assert.equal(defaultValue, inputWrapper.element.value);
+    });
+  });
+});
diff --git a/packages/combinator/src/components/controls/control_slot.vue b/packages/combinator/src/components/controls/control_slot.vue
new file mode 100644
index 0000000000..71813aa6af
--- /dev/null
+++ b/packages/combinator/src/components/controls/control_slot.vue
@@ -0,0 +1,46 @@
+<template>
+  <dt-input
+    :value="value"
+    :disabled="disabled"
+    class="d-r-none"
+    type="textarea"
+    spellcheck="false"
+    @input="updateValue"
+  >
+    <template #labelSlot>
+      <slot />
+    </template>
+  </dt-input>
+</template>
+
+<script setup>
+import { DtInput } from '@dialpad/dialtone-vue';
+import { VALUE_UPDATE_EVENT } from '@/src/lib/constants';
+
+defineProps({
+  value: {
+    type: undefined,
+    default: () => null,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits([VALUE_UPDATE_EVENT]);
+
+function updateValue (e) {
+  const value = e || null;
+  emit(VALUE_UPDATE_EVENT, value);
+}
+</script>
+
+<script>
+/**
+ * Control that is used to set a string representing the slot content of a component.
+ */
+export default {
+  name: 'DtcControlSlot',
+};
+</script>
diff --git a/packages/combinator/src/components/controls/control_string.test.js b/packages/combinator/src/components/controls/control_string.test.js
new file mode 100644
index 0000000000..6cd69dfc6e
--- /dev/null
+++ b/packages/combinator/src/components/controls/control_string.test.js
@@ -0,0 +1,60 @@
+import DtcControlString from './control_string';
+
+import { assert } from 'chai';
+import { mount } from '@vue/test-utils';
+
+const inputSelector = 'input';
+
+const inputValue = 'string test';
+const defaultValue = DtcControlString.props.value.default();
+
+describe('control_string.vue test', function () {
+  let wrapper;
+  let inputWrapper;
+
+  beforeEach(function () {
+    wrapper = mount(DtcControlString);
+  });
+
+  const _mountWrapper = () => {
+    wrapper = mount(DtcControlString);
+    _setChildWrappers();
+  };
+
+  const _setChildWrappers = () => {
+    inputWrapper = wrapper.find(inputSelector);
+  };
+
+  before(function () {
+    _mountWrapper();
+  });
+
+  describe('When mounted', function () {
+    it('Should render successfully', function () {
+      assert.isTrue(wrapper.exists());
+    });
+  });
+
+  describe('When a value is provided', function () {
+    beforeEach(async function () {
+      await wrapper.setProps({
+        value: inputValue,
+      });
+      _setChildWrappers();
+    });
+
+    it('Should set the native input to value', function () {
+      assert.equal(inputValue, inputWrapper.element.value);
+    });
+  });
+
+  describe('When a value is not provided', function () {
+    beforeEach(function () {
+      _mountWrapper();
+    });
+
+    it('Should set the native input to control default', function () {
+      assert.equal(defaultValue, inputWrapper.element.value);
+    });
+  });
+});
diff --git a/packages/combinator/src/components/controls/control_string.vue b/packages/combinator/src/components/controls/control_string.vue
new file mode 100644
index 0000000000..d7c7255e5a
--- /dev/null
+++ b/packages/combinator/src/components/controls/control_string.vue
@@ -0,0 +1,61 @@
+<template>
+  <dt-input
+    :value="value"
+    :disabled="disabled"
+    :messages="messages"
+    size="sm"
+    @input="e => emit(VALUE_UPDATE_EVENT, e)"
+  >
+    <template #labelSlot>
+      <span>
+        <slot />
+      </span>
+    </template>
+    <template #rightIcon>
+      <slot name="icon" />
+    </template>
+  </dt-input>
+</template>
+
+<script setup>
+import { DtInput, VALIDATION_MESSAGE_TYPES } from '@dialpad/dialtone-vue';
+import { VALUE_UPDATE_EVENT } from '@/src/lib/constants';
+import { computed } from 'vue';
+
+const props = defineProps({
+  value: {
+    type: String,
+    default: () => String(),
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  warning: {
+    type: String,
+    default: undefined,
+  },
+});
+
+const emit = defineEmits([VALUE_UPDATE_EVENT]);
+
+const messages = computed(() => {
+  const messages = [];
+  if (props.warning) {
+    messages.push({
+      message: props.warning,
+      type: VALIDATION_MESSAGE_TYPES.WARNING,
+    });
+  }
+  return messages;
+});
+</script>
+
+<script>
+/**
+ * Control that is used to set 'string' value.
+ */
+export default {
+  name: 'DtcControlString',
+};
+</script>
diff --git a/packages/combinator/src/components/controls/control_suggestion.vue b/packages/combinator/src/components/controls/control_suggestion.vue
new file mode 100644
index 0000000000..92b5f28229
--- /dev/null
+++ b/packages/combinator/src/components/controls/control_suggestion.vue
@@ -0,0 +1,120 @@
+<template>
+  <div>
+    <dt-recipe-combobox-with-popover
+      ref="combobox"
+      list-aria-label="Valid values"
+      max-height="512px"
+      @select="e => onUpdate(suggestions[e])"
+      @opened="onOpen"
+    >
+      <template #input="{ inputProps, onInput }">
+        <dtc-control-string
+          v-bind="inputProps"
+          :value="value"
+          :warning="warning"
+          :disabled="disabled"
+          @input="e => onInputInternal(e, onInput)"
+        >
+          <template #default>
+            <slot />
+          </template>
+          <template #icon>
+            <icon-collapse v-if="open" />
+            <icon-expand v-else />
+          </template>
+        </dtc-control-string>
+      </template>
+      <template #list="{ listProps }">
+        <ul
+          class="d-p0"
+          v-bind="listProps"
+        >
+          <dt-list-item
+            v-for="(item, i) in suggestions"
+            :key="item"
+            navigation-type="arrow-keys"
+            role="option"
+            @click="onSelectInternal(i)"
+          >
+            <slot
+              name="item"
+              :value="item"
+            >
+              {{ item }}
+            </slot>
+          </dt-list-item>
+        </ul>
+      </template>
+    </dt-recipe-combobox-with-popover>
+  </div>
+</template>
+
+<script setup>
+import DtcControlString from './control_string';
+import IconExpand from 'dialtone-icons/IconArrowKeyboardDown';
+import IconCollapse from 'dialtone-icons/IconArrowKeyboardUp';
+import { DtRecipeComboboxWithPopover, DtListItem } from '@dialpad/dialtone-vue';
+
+import { VALUE_UPDATE_EVENT } from '@/src/lib/constants';
+import { computed, ref } from 'vue';
+
+const WARNING_MESSAGE = 'Unexpected value';
+
+const props = defineProps({
+  value: {
+    type: String,
+    required: true,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  suggestions: {
+    type: Array,
+    required: true,
+  },
+  warn: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits([VALUE_UPDATE_EVENT]);
+
+const warning = computed(() => {
+  return props.warn && !props.suggestions.includes(props.value)
+    ? WARNING_MESSAGE
+    : undefined;
+});
+
+const combobox = ref();
+
+function onSelectInternal (i) {
+  combobox.value.onSelect(i);
+  combobox.value.closeComboboxList();
+}
+
+function onInputInternal (value, onInput) {
+  onInput(value);
+  onUpdate(value);
+}
+
+function onUpdate (value) {
+  emit(VALUE_UPDATE_EVENT, value);
+}
+
+const open = ref(false);
+
+function onOpen (e) {
+  open.value = e;
+}
+</script>
+
+<script>
+/**
+ * Control that is used to set a string value while providing a list of suggested valid values.
+ */
+export default {
+  name: 'DtcControlSuggestion',
+};
+</script>
diff --git a/packages/combinator/src/components/event_console/event_console.test.js b/packages/combinator/src/components/event_console/event_console.test.js
new file mode 100644
index 0000000000..c8479a0724
--- /dev/null
+++ b/packages/combinator/src/components/event_console/event_console.test.js
@@ -0,0 +1,18 @@
+import DtcEventConsole from './event_console';
+
+import { assert } from 'chai';
+import { mount } from '@vue/test-utils';
+
+describe('event_console.vue test', function () {
+  let wrapper;
+
+  beforeEach(function () {
+    wrapper = mount(DtcEventConsole);
+  });
+
+  describe('When mounted', function () {
+    it('Should render successfully', function () {
+      assert.exists(wrapper);
+    });
+  });
+});
diff --git a/packages/combinator/src/components/event_console/event_console.vue b/packages/combinator/src/components/event_console/event_console.vue
new file mode 100644
index 0000000000..07a66df89b
--- /dev/null
+++ b/packages/combinator/src/components/event_console/event_console.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="d-ws-pre-wrap">
+    <template
+      v-for="(entry, index) in entries"
+      :key="entry.key"
+    >
+      <div
+        data-qa="dtc-event-console-entry"
+      >
+        <dtc-event-console-pair
+          :name="entry.event"
+          :value="index < cacheSize
+            ? entry.value
+            : undefined"
+        >
+          <template #separator>
+            <span>
+              <IconArrowForward
+                v-if="entry.value !== undefined"
+                class="d-fs10 d-px6 d-ps-relative d-t2"
+              />
+            </span>
+          </template>
+        </dtc-event-console-pair>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import IconArrowForward from 'dialtone-icons/IconArrowForward';
+import DtcEventConsolePair from '@/src/components/event_console/event_console_pair';
+
+import { computed, ref } from 'vue';
+
+defineProps({
+  /**
+   * Amount of objects that are stored for expansion.
+   */
+  cacheSize: {
+    type: Number,
+    default: 10,
+  },
+});
+
+const entries = ref([]);
+
+let currentId = 0;
+defineExpose({
+  /**
+   * Add a new event to the console.
+   *
+   * @param event - The event name.
+   * @param value - The event value.
+   */
+  trigger (event, value) {
+    entries.value.unshift({
+      event,
+      value,
+      key: currentId++,
+    });
+  },
+
+  /**
+   * Number of events currently in console.
+   */
+  entryCount: computed(() => entries.value.length),
+});
+</script>
+
+<script>
+/**
+ * The event console displays data about events captured from the target component.
+ */
+export default {
+  name: 'DtcEventConsole',
+};
+</script>
diff --git a/packages/combinator/src/components/event_console/event_console_array.vue b/packages/combinator/src/components/event_console/event_console_array.vue
new file mode 100644
index 0000000000..0717ee2448
--- /dev/null
+++ b/packages/combinator/src/components/event_console/event_console_array.vue
@@ -0,0 +1,41 @@
+<template>
+  <dtc-event-console-lazy-load>
+    <template #prefix>
+      [
+    </template>
+    <template #default>
+      <span>[</span>
+      <template
+        v-for="(field, key) in value"
+        :key="key"
+      >
+        <dtc-event-console-pair
+          :name="key.toString()"
+          :value="field"
+        />
+      </template>
+      <span>]</span>
+    </template>
+    <template #suffix>
+      ]
+    </template>
+  </dtc-event-console-lazy-load>
+</template>
+
+<script setup>
+import DtcEventConsolePair from '@/src/components/event_console/event_console_pair';
+import DtcEventConsoleLazyLoad from '@/src/components/event_console/event_console_lazy_load';
+
+defineProps({
+  value: {
+    type: Array,
+    required: true,
+  },
+});
+</script>
+
+<script>
+export default {
+  name: 'DtcEventConsoleArray',
+};
+</script>
diff --git a/packages/combinator/src/components/event_console/event_console_element.vue b/packages/combinator/src/components/event_console/event_console_element.vue
new file mode 100644
index 0000000000..c4270d8d4a
--- /dev/null
+++ b/packages/combinator/src/components/event_console/event_console_element.vue
@@ -0,0 +1,39 @@
+<template>
+  <dtc-event-console-lazy-load>
+    <template #prefix>
+      &lt;
+    </template>
+    <template #default>
+      {{ html }}
+    </template>
+    <template #suffix>
+      &gt;
+    </template>
+  </dtc-event-console-lazy-load>
+</template>
+
+<script setup>
+import DtcEventConsoleLazyLoad from '@/src/components/event_console/event_console_lazy_load';
+import beautify from 'js-beautify';
+import { computed } from 'vue';
+
+const props = defineProps({
+  value: {
+    type: Element,
+    required: true,
+  },
+});
+
+const html = computed(() => {
+  return beautify.html(props.value.outerHTML, {
+    wrap_attributes: 'force-expand-multiline',
+    inline: '',
+  });
+});
+</script>
+
+<script>
+export default {
+  name: 'DtcEventConsoleElement',
+};
+</script>
diff --git a/packages/combinator/src/components/event_console/event_console_function.vue b/packages/combinator/src/components/event_console/event_console_function.vue
new file mode 100644
index 0000000000..10e1379aaa
--- /dev/null
+++ b/packages/combinator/src/components/event_console/event_console_function.vue
@@ -0,0 +1,12 @@
+<template>
+  <span>
+    <span class="dtc-scheme__function">function</span>
+    <span>()</span>
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'DtcEventConsoleFunction',
+};
+</script>
diff --git a/packages/combinator/src/components/event_console/event_console_lazy_load.vue b/packages/combinator/src/components/event_console/event_console_lazy_load.vue
new file mode 100644
index 0000000000..39df37fefa
--- /dev/null
+++ b/packages/combinator/src/components/event_console/event_console_lazy_load.vue
@@ -0,0 +1,60 @@
+<template>
+  <span>
+    <span v-if="!show">
+      <slot name="prefix" />
+      <dt-button
+        class="dtc-theme__button dtc-theme__interactive d-p4"
+        size="sm"
+        importance="clear"
+        @click="toggle"
+      >
+        <template #icon>
+          <IconExpand />
+        </template>
+      </dt-button>
+      <slot name="suffix" />
+    </span>
+    <span v-else>
+      <dt-button
+        class="dtc-theme__button dtc-theme__interactive d-p0"
+        size="xl"
+        importance="clear"
+        @click="toggle"
+      >
+        <template #icon>
+          <IconCollapse />
+        </template>
+      </dt-button>
+    </span>
+    <dt-lazy-show :show="show">
+      <slot />
+    </dt-lazy-show>
+  </span>
+</template>
+
+<script setup>
+import IconExpand from 'dialtone-icons/IconMenuHorizontal';
+import IconCollapse from 'dialtone-icons/IconArrowAccordion';
+
+import { DtButton, DtLazyShow } from '@dialpad/dialtone-vue';
+
+import { ref } from 'vue';
+
+const emit = defineEmits(['toggle']);
+
+const show = ref(false);
+
+function toggle () {
+  show.value = !show.value;
+  emit('toggle', show.value);
+}
+</script>
+
+<script>
+/**
+ * The lazy load provides generic functionality to not render content until the expand button is pressed.
+ */
+export default {
+  name: 'DtcEventConsoleLazyLoad',
+};
+</script>
diff --git a/packages/combinator/src/components/event_console/event_console_object.vue b/packages/combinator/src/components/event_console/event_console_object.vue
new file mode 100644
index 0000000000..b4da43523d
--- /dev/null
+++ b/packages/combinator/src/components/event_console/event_console_object.vue
@@ -0,0 +1,53 @@
+<template>
+  <dtc-event-console-lazy-load>
+    <template #prefix>
+      {
+    </template>
+    <template #default>
+      <span>{</span>
+      <template
+        v-for="(field, key) in clone"
+        :key="key"
+      >
+        <dtc-event-console-pair
+          :name="key"
+          :value="field"
+        />
+      </template>
+      <span>}</span>
+    </template>
+    <template #suffix>
+      }
+    </template>
+  </dtc-event-console-lazy-load>
+</template>
+
+<script setup>
+import { flatten } from '@/src/lib/utils';
+import { computed } from 'vue';
+import DtcEventConsolePair from '@/src/components/event_console/event_console_pair';
+import DtcEventConsoleLazyLoad from '@/src/components/event_console/event_console_lazy_load';
+
+const props = defineProps({
+  value: {
+    type: Object,
+    required: true,
+  },
+});
+
+/**
+ * Needs to be flattened to iterate through all prototype properties of the object.
+ * Not sure if there is a better way of doing this.
+ *
+ * @type {ComputedRef<object>}
+ */
+const clone = computed(() => {
+  return flatten(props.value);
+});
+</script>
+
+<script>
+export default {
+  name: 'DtcEventConsoleObject',
+};
+</script>
diff --git a/packages/combinator/src/components/event_console/event_console_pair.vue b/packages/combinator/src/components/event_console/event_console_pair.vue
new file mode 100644
index 0000000000..da53c6230e
--- /dev/null
+++ b/packages/combinator/src/components/event_console/event_console_pair.vue
@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <span>{{ name }}</span>
+    <slot name="separator">
+      <span>:&nbsp;</span>
+    </slot>
+    <span v-if="value !== undefined">
+      <component
+        :is="component"
+        :value="value"
+      />
+    </span>
+  </div>
+</template>
+
+<script setup>
+import DtcEventConsoleElement from './event_console_element';
+import DtcEventConsoleFunction from './event_console_function';
+import DtcEventConsoleArray from './event_console_array';
+import DtcEventConsoleObject from './event_console_object';
+import DtcEventConsoleString from './event_console_string';
+import DtcEventConsoleValue from './event_console_value';
+
+import { computed } from 'vue';
+
+const props = defineProps({
+  name: {
+    type: String,
+    required: true,
+  },
+  value: {
+    type: undefined,
+    default: undefined,
+  },
+});
+
+/**
+ * Component to render based on the 'value' prop.
+ *
+ * @type {ComputedRef<object>}
+ */
+const component = computed(() => {
+  const value = props.value;
+
+  if (value === null) { return DtcEventConsoleValue; }
+  if (value instanceof Element) { return DtcEventConsoleElement; }
+
+  switch (typeof value) {
+    case 'function': return DtcEventConsoleFunction;
+    case 'object': {
+      return Array.isArray(value)
+        ? DtcEventConsoleArray
+        : DtcEventConsoleObject;
+    }
+    case 'string': return DtcEventConsoleString;
+    default: return DtcEventConsoleValue;
+  }
+});
+</script>
+
+<script>
+/**
+ * The pair represents a key-value pair and allows recursive exploration of objects.
+ * A pair contains a name (key) and a value.
+ * Based on the data type of the value it will display a component to represent a value.
+ */
+export default {
+  name: 'DtcEventConsolePair',
+};
+</script>
diff --git a/packages/combinator/src/components/event_console/event_console_string.vue b/packages/combinator/src/components/event_console/event_console_string.vue
new file mode 100644
index 0000000000..3a09ee6077
--- /dev/null
+++ b/packages/combinator/src/components/event_console/event_console_string.vue
@@ -0,0 +1,24 @@
+<template>
+  <span class="dtc-scheme__string">
+    <span>"</span>
+    <span>
+      {{ value }}
+    </span>
+    <span>"</span>
+  </span>
+</template>
+
+<script setup>
+defineProps({
+  value: {
+    type: undefined,
+    required: true,
+  },
+});
+</script>
+
+<script>
+export default {
+  name: 'DtcEventConsoleString',
+};
+</script>
diff --git a/packages/combinator/src/components/event_console/event_console_value.vue b/packages/combinator/src/components/event_console/event_console_value.vue
new file mode 100644
index 0000000000..ebc861995d
--- /dev/null
+++ b/packages/combinator/src/components/event_console/event_console_value.vue
@@ -0,0 +1,34 @@
+<template>
+  <span :class="`dtc-scheme__${displayClass}`">
+    {{ displayValue }}
+  </span>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  value: {
+    type: undefined,
+    required: true,
+  },
+});
+
+const displayValue = computed(() => {
+  return props.value === null
+    ? 'null'
+    : props.value;
+});
+
+const displayClass = computed(() => {
+  return props.value === null
+    ? 'identifier'
+    : 'value';
+});
+</script>
+
+<script>
+export default {
+  name: 'DtcEventConsoleValue',
+};
+</script>
diff --git a/packages/combinator/src/components/header/header.vue b/packages/combinator/src/components/header/header.vue
new file mode 100644
index 0000000000..edd9fb45c1
--- /dev/null
+++ b/packages/combinator/src/components/header/header.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="dtc-theme__canvas d-d-flex d-ai-stretch d-pl12">
+    <h1 class="d-headline32 d-as-center">
+      {{ component.name }}
+    </h1>
+    <div class="d-fl-grow1 d-ml12 d-bl">
+      <div class="d-d-flex d-ai-center dtc-header__variant d-h100p">
+        <div class="d-pl6 d-pt2 d-fl-grow1">
+          <dt-select-menu
+            class="d-ba-none"
+            select-class="dtc-header__select"
+            label="Select target component variant"
+            label-class="d-vi-visible-sr"
+            name="select-menu"
+            :value="selectedVariant"
+            :options="variantOptions"
+            size="xl"
+            @input="e => emit('update:variant', e)"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { DtSelectMenu } from '@dialpad/dialtone-vue';
+import { computed } from 'vue';
+import { capitalCase } from 'change-case';
+
+const props = defineProps({
+  component: {
+    type: Object,
+    required: true,
+  },
+  selectedVariant: {
+    type: String,
+    required: true,
+  },
+  variants: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['update:variant']);
+
+const variantOptions = computed(() => {
+  const variants = {
+    default: {},
+    ...props.variants,
+  };
+  return Object.keys(variants).map(variant => {
+    return { value: variant, label: capitalCase(variant) };
+  });
+});
+
+</script>
+
+<script>
+export default {
+  name: 'DtcHeader',
+};
+</script>
+
+<style lang="less">
+  .dtc-header__select > select {
+    color: var(--dtc-theme-color-foreground) !important;
+    background-color: transparent !important;
+  }
+
+  .dtc-header__select > select:focus {
+    outline: initial !important;
+    box-shadow: initial !important;
+  }
+
+  .dtc-header__select::before, .dtc-header__select::after {
+    border-color: var(--dtc-theme-color-foreground) transparent !important;
+  }
+
+  .dtc-header__variant {
+    background-color: var(--dtc-theme-color-background-darken);
+  }
+</style>
diff --git a/packages/combinator/src/components/option_bar/option_bar.vue b/packages/combinator/src/components/option_bar/option_bar.vue
new file mode 100644
index 0000000000..9340df6f15
--- /dev/null
+++ b/packages/combinator/src/components/option_bar/option_bar.vue
@@ -0,0 +1,170 @@
+<template>
+  <div class="dtc-option-bar d-as-stretch d-of-y-auto d-w100p">
+    <ul class="d-ls-reset">
+      <dtc-section
+        v-if="info.slots"
+        heading="Slots"
+        content-class="d-px12"
+      >
+        <dtc-option-bar-member-group
+          :component="component"
+          :members="info.slots"
+          :values="options.slots"
+          :control-selector="getSlotControls"
+          @update:member="updateSlots"
+        />
+      </dtc-section>
+      <dtc-section
+        v-if="info.props"
+        heading="Props"
+        content-class="d-px12"
+      >
+        <dtc-option-bar-member-group
+          :component="component"
+          :members="info.props"
+          :values="options.props"
+          :control-selector="(prop, value) => getBindingControls(prop, value, 'null')"
+          @update:member="updateProps"
+        />
+      </dtc-section>
+      <dtc-section
+        v-if="info.attributes"
+        heading="Native HTML Attributes"
+        content-class="d-px12"
+      >
+        <dtc-option-bar-member-group
+          :component="component"
+          :members="info.attributes"
+          :values="options.attributes"
+          :control-selector="(attribute, value) => getBindingControls(attribute, value)"
+          @update:member="updateAttributes"
+        />
+      </dtc-section>
+      <dtc-section
+        v-if="info.events"
+        heading="Events"
+        content-class="d-px12"
+      >
+        <dtc-option-bar-member-group
+          :component="component"
+          :members="info.events"
+          :values="options.events"
+          :control-selector="getEventControls"
+        />
+      </dtc-section>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+import DtcOptionBarMemberGroup from './option_bar_member_group';
+import DtcSection from '../tools/section';
+
+import { OPTIONS_UPDATE_EVENT } from '@/src/lib/constants';
+import { getControlByMemberType, getControlByValue } from '@/src/lib/control';
+
+defineProps({
+  /**
+   * Component to render.
+   */
+  component: {
+    type: Object,
+    required: true,
+  },
+  /**
+   * Options data object.
+   */
+  options: {
+    type: Object,
+    required: true,
+  },
+  /**
+   * Info data object.
+   */
+  info: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits([OPTIONS_UPDATE_EVENT]);
+
+/**
+ * Gets an array of controls for a binding.
+ * Calls the utility function `getControlByMemberType(...)` which converts
+ * each type for a member to a given control.
+ *
+ * Extra controls can be passed in as parameters.
+ *
+ * @param binding - The binding member.
+ * @param value - The binding member value.
+ * @param controls - The extra controls to allow.
+ * @returns {Array} Array of a default control and valid controls.
+ */
+function getBindingControls (binding, value, ...controls) {
+  const validControls = [
+    ...(binding.types?.map(type => getControlByMemberType(type, binding)) ?? []),
+    ...controls,
+  ];
+
+  return [
+    validControls,
+    validControls.find(control => control === getControlByValue(value)) ?? validControls[0],
+  ];
+}
+
+function getSlotControls () {
+  return getStaticControl('slot');
+}
+
+function getEventControls () {
+  return getStaticControl('event');
+}
+
+/**
+ * Forces a singular default control and valid control.
+ *
+ * @param control - The control to enforce.
+ * @returns {Array} Array of a default control and valid control.
+ */
+function getStaticControl (control) {
+  return [
+    [control],
+    control,
+  ];
+}
+
+/**
+ * Emits an update to a member in the 'options' data object.
+ *
+ * @param memberGroup - The member group
+ * @param member - The member
+ * @param value - The updated value
+ */
+function updateMember (memberGroup, { member, value }) {
+  emit(OPTIONS_UPDATE_EVENT, (options) => {
+    options[memberGroup][member] = value;
+  });
+}
+
+function updateSlots (e) { updateMember('slots', e); }
+function updateProps (e) { updateMember('props', e); }
+function updateAttributes (e) { updateMember('attributes', e); }
+</script>
+
+<script>
+/**
+ * The option bar is responsible for providing a user interface
+ * to interact and change the state of the target component.
+ */
+export default {
+  name: 'DtcOptionBar',
+};
+</script>
+
+<style>
+  .dtc-option-bar {
+    background-color: #FCFCFC;
+    color-scheme: light;
+  }
+</style>
diff --git a/packages/combinator/src/components/option_bar/option_bar_control.test.js b/packages/combinator/src/components/option_bar/option_bar_control.test.js
new file mode 100644
index 0000000000..5a97e3d516
--- /dev/null
+++ b/packages/combinator/src/components/option_bar/option_bar_control.test.js
@@ -0,0 +1,47 @@
+import DtcOptionBarControl from './option_bar_control';
+
+import { assert } from 'chai';
+import { mount } from '@vue/test-utils';
+import { controlMap } from '@/src/lib/control';
+
+const labelSelector = '[data-qa=dtc-option-bar-control-label]';
+const descriptionSelector = '[data-qa=dtc-option-bar-control-description]';
+
+const testControls = Object.keys(controlMap);
+
+describe('option_bar_control.vue test', function () {
+  let wrapper;
+
+  testControls.forEach((control) => {
+    const testLabel = `${control} label`;
+    const testDescription = `${control} description`;
+
+    describe(`When mounted with control '${control}'`, function () {
+      before(function () {
+        const member = {
+          validControls: [control],
+          label: testLabel,
+          description: testDescription,
+          values: ['test1', 'test2'],
+        };
+        member.controlData = controlMap[control];
+        member.value = member.controlData.default(member);
+        wrapper = mount(DtcOptionBarControl, {
+          props: member,
+        });
+      });
+
+      it('Should render successfully', function () {
+        assert.isTrue(wrapper.exists());
+      });
+
+      it('Should display label text', function () {
+        assert.equal(wrapper.find(labelSelector).text(), testLabel);
+      });
+
+      it('Should display description text', function () {
+        assert.equal(wrapper.find(descriptionSelector).text(), testDescription);
+      });
+    });
+  });
+});
diff --git a/packages/combinator/src/components/option_bar/option_bar_control.vue b/packages/combinator/src/components/option_bar/option_bar_control.vue
new file mode 100644
index 0000000000..c6468d1cbb
--- /dev/null
+++ b/packages/combinator/src/components/option_bar/option_bar_control.vue
@@ -0,0 +1,187 @@
+<template>
+  <div>
+    <component
+      :is="controlComponent"
+      v-bind="controlBindings"
+      @update:value="updateValue"
+    >
+      <span>
+        <span
+          class="d-pr4"
+          data-qa="dtc-option-bar-control-label"
+        >
+          {{ label }}
+        </span>
+        <icon-lock
+          v-if="locked"
+          class="d-pr4 d-fs10 d-ps-relative d-t1"
+        />
+        <span
+          v-if="required"
+          class="d-pl2 d-ps-relative d-b2"
+        >
+          <dt-badge
+            text="required"
+            color="black-700"
+          />
+        </span>
+        <span
+          v-if="vModel"
+          class="d-pl2 d-ps-relative d-b2"
+        >
+          <dt-badge
+            text="v-model"
+            color="black-700"
+          />
+        </span>
+      </span>
+    </component>
+    <div
+      class="d-description d-p1"
+      data-qa="dtc-option-bar-control-description"
+    >
+      {{ description }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import IconLock from 'dialtone-icons/IconLock';
+import { DtBadge } from '@dialpad/dialtone-vue';
+import { VALUE_UPDATE_EVENT } from '@/src/lib/constants';
+import { computed } from 'vue';
+import { serializeControlValue, deserializeControlValue } from '@/src/lib/control';
+
+const props = defineProps({
+  /**
+   * Data of an entry in the 'control map'.
+   */
+  controlData: {
+    type: Object,
+    required: true,
+  },
+  /**
+   * Array of valid controls that are keys in the 'control map'.
+   */
+  validControls: {
+    type: Array,
+    required: true,
+  },
+  /**
+   * The member value.
+   */
+  value: {
+    type: undefined,
+    required: true,
+  },
+  /**
+   * The member label.
+   */
+  label: {
+    type: String,
+    required: true,
+  },
+  /**
+   * The member description.
+   */
+  description: {
+    type: String,
+    default: undefined,
+  },
+  /**
+   * If the member is a part of the v-model.
+   */
+  vModel: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * If the member is considered required.
+   */
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * Prevent the control from being modified.
+   */
+  locked: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * Optional args to bind directly to the control.
+   */
+  args: {
+    type: Object,
+    default: () => {},
+  },
+});
+
+const emit = defineEmits([VALUE_UPDATE_EVENT]);
+
+const controlValue = computed(() => {
+  return props.controlData.serialize
+    ? serializeControlValue(props.value)
+    : props.value;
+});
+
+const controlComponent = computed(() => {
+  return props.controlData.component;
+});
+
+/**
+ * Args that are conditionally passed to the
+ * underlying control props if the prop is present on the control.
+ *
+ * @type {ComputedRef<object>}
+ */
+const controlArgs = computed(() => {
+  return {
+    value: controlValue.value,
+    disabled: props.locked,
+    tags: props.tags,
+    ...props.args,
+  };
+});
+
+/**
+ * Object containing only the args that are
+ * present on the control component props.
+ *
+ * @type {ComputedRef<object>}
+ */
+const controlBindings = computed(() => {
+  const component = controlComponent.value;
+  if (!component.props) { return null; }
+  return Object.fromEntries(
+    Object.entries(controlArgs.value).filter(([arg, _]) => {
+      const controlProps = Object.keys(component.props);
+      return controlProps.includes(arg);
+    }),
+  );
+});
+
+/**
+ * Emits an update to the member value.
+ * The value is deserialized if needed.
+ *
+ * @param e - The updated member value
+ */
+function updateValue (e) {
+  const value = props.controlData.serialize
+    ? deserializeControlValue(e)
+    : e;
+  emit(VALUE_UPDATE_EVENT, value);
+}
+</script>
+
+<script>
+/**
+ * The 'option bar control' component wraps an underlying 'control' component to provide extended functionality
+ * and decouple the reliance on the option bar and members from individual 'control' components.
+ */
+export default {
+  name: 'DtcOptionBarControl',
+};
+</script>
diff --git a/packages/combinator/src/components/option_bar/option_bar_control_selector.vue b/packages/combinator/src/components/option_bar/option_bar_control_selector.vue
new file mode 100644
index 0000000000..8c35a7ee8f
--- /dev/null
+++ b/packages/combinator/src/components/option_bar/option_bar_control_selector.vue
@@ -0,0 +1,130 @@
+<template>
+  <dt-button-group
+    class="d-fw-wrap"
+  >
+    <template
+      v-for="(selection, control) in selections"
+      :key="control"
+    >
+      <template
+        v-for="label in selection.labels"
+        :key="label"
+      >
+        <span class="d-pr4">
+          <dt-button
+            class="dtc-control-selector__button d-px4 d-py1"
+            importance="outlined"
+            v-bind="getStyling(control)"
+            @click="() => updateControl(control)"
+          >
+            {{ label }}
+          </dt-button>
+        </span>
+      </template>
+    </template>
+  </dt-button-group>
+</template>
+
+<script setup>
+import { DtButton, DtButtonGroup } from '@dialpad/dialtone-vue';
+import { CONTROL_UPDATE_EVENT } from '@/src/lib/constants';
+import { computed } from 'vue';
+
+const props = defineProps({
+  /**
+   * Selected control.
+   */
+  selected: {
+    type: String,
+    required: true,
+  },
+  /**
+   * Array of control selections.
+   */
+  controls: {
+    type: Array,
+    required: true,
+  },
+  /**
+   * Prevent the control from changing.
+   */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * Array of valid types.
+   */
+  types: {
+    type: Array,
+    default: undefined,
+  },
+});
+
+const emit = defineEmits([CONTROL_UPDATE_EVENT]);
+
+const selections = computed(() => {
+  return {
+    ...Object.fromEntries(
+      props.controls.map(control => {
+        return [control, getSelection(control)];
+      }),
+    ),
+  };
+});
+
+function getSelection (control) {
+  switch (control) {
+    case 'event': {
+      const eventTypes = props.types;
+      const labels = eventTypes ?? ['event'];
+      return {
+        labels,
+      };
+    }
+    default: return {
+      labels: [control],
+    };
+  }
+}
+
+/**
+ * Gets the styling of the button based on the status of the control.
+ *
+ * @param {string} control - The name of the control.
+ * @returns {object} Object containing style settings.
+ */
+function getStyling (control) {
+  const isActive = control === props.selected;
+
+  const styling = {
+    active: isActive,
+    kind: isActive ? 'default' : 'muted',
+    disabled: props.disabled,
+  };
+
+  if (isActive) {
+    styling['control-active'] = 'control-active';
+  }
+
+  return styling;
+}
+
+function updateControl (e) {
+  if (props.selected === e) { return; }
+  emit(CONTROL_UPDATE_EVENT, e);
+}
+</script>
+
+<script>
+export default {
+  name: 'DtcOptionBarControlSelector',
+};
+</script>
+
+<style>
+.dtc-control-selector__button:not([control-active]) {
+  background-color: transparent !important;
+  border: currentColor 1px solid !important;
+}
+</style>
diff --git a/packages/combinator/src/components/option_bar/option_bar_member_group.test.js b/packages/combinator/src/components/option_bar/option_bar_member_group.test.js
new file mode 100644
index 0000000000..724cfe3edf
--- /dev/null
+++ b/packages/combinator/src/components/option_bar/option_bar_member_group.test.js
@@ -0,0 +1,59 @@
+import DtcOptionBarMemberGroup from './option_bar_member_group';
+
+import { assert } from 'chai';
+import { mount } from '@vue/test-utils';
+import { getSupportedComponents } from '@/src/lib/test/utils_test';
+
+const controlWrapperSelector = '[data-qa=dtc-option-bar-member-group-control]';
+
+const stringMemberKey = 'stringMember';
+const numberMemberKey = 'numberMember';
+const booleanMemberKey = 'booleanMember';
+
+function createTestMember (key) {
+  return {
+    name: key,
+  };
+}
+
+const testMembers = [
+  createTestMember(stringMemberKey),
+  createTestMember(numberMemberKey),
+  createTestMember(booleanMemberKey),
+];
+
+const testValues = {
+  [stringMemberKey]: 'string test',
+  [numberMemberKey]: 123,
+  [booleanMemberKey]: true,
+};
+
+describe('option_bar_member_group.vue test', function () {
+  let wrapper;
+  let controlWrappers;
+
+  const testComponents = getSupportedComponents();
+  testComponents.forEach((component) => {
+    before(function () {
+      wrapper = mount(DtcOptionBarMemberGroup, {
+        props: {
+          component,
+          members: testMembers,
+          values: testValues,
+          controlSelector: () => [['base'], 'base'],
+        },
+      });
+      controlWrappers = wrapper.findAll(controlWrapperSelector);
+    });
+
+    describe(`When mounted with component '${component.name}'`, function () {
+      it('Should render successfully', function () {
+        assert.exists(wrapper);
+      });
+
+      it('Should render a control for each member', function () {
+        assert.equal(Object.keys(testMembers).length, controlWrappers.length);
+      });
+    });
+  });
+});
diff --git a/packages/combinator/src/components/option_bar/option_bar_member_group.vue b/packages/combinator/src/components/option_bar/option_bar_member_group.vue
new file mode 100644
index 0000000000..acb866bb81
--- /dev/null
+++ b/packages/combinator/src/components/option_bar/option_bar_member_group.vue
@@ -0,0 +1,222 @@
+<template>
+  <div>
+    <template
+      v-for="(member, key) in memberMap"
+      :key="key"
+    >
+      <div
+        v-if="!member.hideControl"
+        class="d-py6"
+        data-qa="dtc-option-bar-member-group-control"
+      >
+        <div class="d-d-flex d-ai-center d-jc-space-between d-pb2">
+          <dtc-option-bar-control-selector
+            :selected="member.control"
+            :controls="member.validControls"
+            :types="member.types"
+            :disabled="member.lockControl"
+            @update:control="(e) => updateControl(e, key)"
+          />
+          <dt-button
+            v-if="hasDefaultValue(member)"
+            class="dtc-icon d-p4"
+            importance="clear"
+            size="sm"
+            :disabled="member.lockControl"
+            @click="() => resetMember(key)"
+          >
+            <template #icon>
+              <icon-reset />
+            </template>
+          </dt-button>
+        </div>
+        <dtc-option-bar-control
+          :value="values[key]"
+          :label="member.label"
+          :control-data="getControlData(member)"
+          :valid-controls="member.validControls"
+          :description="member.description"
+          :v-model="isVModel(member)"
+          :required="member.required"
+          :locked="member.lockControl"
+          :args="{
+            defaultValue: member.defaultValue,
+            validValues: member.values,
+            validTypes: member.types,
+            tags: member.tags,
+          }"
+          @update:value="e => updateMember(e, key)"
+          @update:control="e => updateControl(e, key)"
+        />
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import DtcOptionBarControlSelector from '@/src/components/option_bar/option_bar_control_selector';
+import DtcOptionBarControl from './option_bar_control';
+import IconReset from 'dialtone-icons/IconRefresh';
+import { DtButton } from '@dialpad/dialtone-vue';
+import { MEMBER_UPDATE_EVENT } from '@/src/lib/constants';
+import { computed, reactive } from 'vue';
+import { convert } from '@/src/lib/convert';
+import { controlMap } from '@/src/lib/control';
+
+const props = defineProps({
+  /**
+   * Target component.
+   */
+  component: {
+    type: Object,
+    required: true,
+  },
+  /**
+   * Array of members to generate controls for.
+   */
+  members: {
+    type: Array,
+    required: true,
+  },
+  /**
+   * Map of key-value pairs for each member.
+   */
+  values: {
+    type: Object,
+    required: true,
+  },
+  /**
+   * Function that determines the control selections for
+   * a given member by returning an array of valid controls.
+   */
+  controlSelector: {
+    type: Function,
+    required: true,
+  },
+});
+
+const emit = defineEmits([MEMBER_UPDATE_EVENT]);
+
+/**
+ * The member map is a reactive data object that wraps each member and
+ * provides additional data that the 'option bar control' component
+ * needs without affecting the original member data object.
+ *
+ * @type {object}
+ */
+const memberMap = computed(() => {
+  return reactive({
+    ...Object.fromEntries(
+      props.members.map(member => {
+        return [getMemberKey(member), extendMember(member)];
+      }),
+    ),
+  });
+});
+
+/**
+ * Used to match members in the 'member map' to their respective values.
+ *
+ * @returns {*}
+ */
+function getMemberKey (member) {
+  return member.name;
+}
+
+/**
+ * Determines if the member has a default value.
+ *
+ * @returns {boolean} If the member has default value.
+ */
+function hasDefaultValue (member) {
+  return 'defaultValue' in member;
+}
+
+/**
+ * Attempts to get the control data for a given control.
+ * If the control does not exist, gets the 'base' control data.
+ *
+ * @returns {object} The control data from the 'control map'.
+ */
+function getControlData (member) {
+  return controlMap[member.control] ?? controlMap.base;
+}
+
+function isVModel (member) {
+  const tags = member.tags;
+  return tags
+    ? 'model' in tags
+    : false;
+}
+
+/**
+ * Wraps a member with an object containing additional data about the member.
+ * This is used by the 'member map' to hold data about controls.
+ *
+ * @returns {object}
+ */
+function extendMember (member) {
+  const key = getMemberKey(member);
+  const value = props.values[key];
+
+  const [validControls, control] = props.controlSelector(member, value);
+
+  return {
+    ...member,
+    control,
+    validControls,
+  };
+}
+
+/**
+ * Resets the control to default value.
+ */
+function resetMember (key) {
+  const member = memberMap.value[key];
+
+  updateMember(member.defaultValue, key);
+}
+
+/**
+ * Emits an update to a member.
+ *
+ * @param key - The member key
+ * @param e - The updated value
+ */
+function updateMember (e, key) {
+  emit(MEMBER_UPDATE_EVENT, {
+    member: key,
+    value: e,
+  });
+}
+
+/**
+ * Updates the member's control in the 'member map'.
+ *
+ * @param e - The updated control
+ * @param key - The member key
+ */
+function updateControl (e, key) {
+  const member = memberMap.value[key];
+
+  let value;
+  try {
+    value = convert(member.control, e, props.values[key]);
+  } catch {
+    console.warn(`${member.name}: Unable to convert ${member.control} to ${e}`);
+  }
+
+  member.control = e;
+  updateMember(value ?? getControlData(member).default(member), key);
+}
+</script>
+
+<script>
+/**
+ * The member group receives a group of members and their respective values.
+ * It is responsible for rendering 'option bar control' components for each member.
+ */
+export default {
+  name: 'DtcOptionBarMemberGroup',
+};
+</script>
diff --git a/packages/combinator/src/components/renderer/renderer.vue b/packages/combinator/src/components/renderer/renderer.vue
new file mode 100644
index 0000000000..745b558019
--- /dev/null
+++ b/packages/combinator/src/components/renderer/renderer.vue
@@ -0,0 +1,151 @@
+<template>
+  <dtc-overlay class="dtc-renderer">
+    <template #content>
+      <div
+        class="d-d-flex d-of-auto"
+        :class="{
+          [backgroundColorMap[background]]: true,
+          'd-jc-center': positioning === 'center',
+          'd-ai-center': positioning === 'center',
+          'd-ai-flex-start': positioning === 'native',
+        }"
+      >
+        <dtc-renderer-target
+          :component="component"
+          :bindings="options.bindings.get()"
+          :events="info.events"
+          @event="(event, value) => emit('event', event, value)"
+        >
+          <template
+            v-for="(slot, name) in renderedSlots"
+            :key="name"
+            #[name]
+          >
+            <dtc-node
+              :template="slot"
+              :library="library"
+            />
+          </template>
+        </dtc-renderer-target>
+      </div>
+    </template>
+    <template #overlay>
+      <div class="d-d-flex d-jc-flex-end d-pt4 d-pe-auto">
+        <dtc-renderer-menu
+          :theme="theme"
+          :background="background"
+          :positioning="positioning"
+          @update:settings="updateSettings"
+        />
+      </div>
+    </template>
+  </dtc-overlay>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { SETTINGS_UPDATE_EVENT } from '@/src/lib/constants';
+import DtcRendererMenu from '@/src/components/renderer/renderer_menu';
+import DtcOverlay from '@/src/components/tools/overlay';
+import DtcRendererTarget from '@/src/components/renderer/renderer_target';
+import DtcNode from '@/src/components/tools/node';
+
+const props = defineProps({
+  /**
+   * Component to render.
+   */
+  component: {
+    type: Object,
+    required: true,
+  },
+  /**
+   * Info data object.
+   */
+  info: {
+    type: Object,
+    required: true,
+  },
+  /**
+   * Options data object.
+   */
+  options: {
+    type: Object,
+    required: true,
+  },
+  /**
+   * Settings data object.
+   */
+  settings: {
+    type: Object,
+    required: true,
+  },
+  library: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits([
+  SETTINGS_UPDATE_EVENT,
+  'event',
+]);
+
+/**
+ * Filtered slots that contain content.
+ *
+ * @type {ComputedRef<object>}
+ */
+const renderedSlots = computed(() => {
+  if (!props.options.slots) { return null; }
+  return Object.fromEntries(
+    Object.entries(props.options.slots).filter(([_, slot]) => slot),
+  );
+});
+
+const theme = computed(() => {
+  switch (background.value) {
+    case 'black': return 'dark';
+    case 'white': return 'light';
+    default: return props.settings.root.theme;
+  }
+});
+const background = computed(() => getSetting('background'));
+const positioning = computed(() => getSetting('positioning'));
+
+const backgroundColorMap = {
+  black: 'd-bgc-black-900',
+  white: 'd-bgc-white',
+  theme: `dtc-theme__canvas`,
+};
+
+function getSetting (setting) {
+  return props.settings.renderer[setting];
+}
+
+function updateSettings (setting, e) {
+  emit(SETTINGS_UPDATE_EVENT, (model) => {
+    model.renderer[setting] = e;
+  });
+}
+</script>
+
+<script>
+/**
+ * The renderer is responsible for displaying the target component in its current state.
+ */
+export default {
+  name: 'DtcRenderer',
+};
+</script>
+
+<style>
+.dtc-renderer {
+  display: grid;
+  grid-template-columns: 1fr;
+}
+
+.dtc-renderer > * {
+  overflow: hidden;
+  grid-area: 1 / 1;
+}
+</style>
diff --git a/packages/combinator/src/components/renderer/renderer_button_bar.vue b/packages/combinator/src/components/renderer/renderer_button_bar.vue
new file mode 100644
index 0000000000..5d47c49a90
--- /dev/null
+++ b/packages/combinator/src/components/renderer/renderer_button_bar.vue
@@ -0,0 +1,43 @@
+<template>
+  <dt-button-group
+    class="d-d-flex d-bgc-black-025 d-bar4"
+  >
+    <template
+      v-for="(_, slot) in slots"
+      :key="slot"
+    >
+      <dt-button
+        class="d-px24"
+        importance="clear"
+        :active="slot === value"
+        @click="() => emit('click', slot)"
+      >
+        <template #icon>
+          <slot :name="slot" />
+        </template>
+      </dt-button>
+    </template>
+  </dt-button-group>
+</template>
+
+<script setup>
+import { DtButtonGroup, DtButton } from '@dialpad/dialtone-vue';
+import { useSlots } from 'vue';
+
+defineProps({
+  value: {
+    type: String,
+    required: true,
+  },
+});
+
+const slots = useSlots();
+
+const emit = defineEmits(['click']);
+</script>
+
+<script>
+export default {
+  name: 'DtcRenderButtonBar',
+};
+</script>
diff --git a/packages/combinator/src/components/renderer/renderer_menu.vue b/packages/combinator/src/components/renderer/renderer_menu.vue
new file mode 100644
index 0000000000..04668f3759
--- /dev/null
+++ b/packages/combinator/src/components/renderer/renderer_menu.vue
@@ -0,0 +1,111 @@
+<template>
+  <dt-popover
+    :open="open"
+    :dialog-class="`d-bgc-transparent d-bs-none dtc-theme--${theme}`"
+    content-class="d-bgc-transparent d-px0 d-py0"
+    transition="fade"
+    placement="left-start"
+    initial-focus-element="dialog"
+    :hide-on-click="false"
+    :modal="false"
+    sticky
+  >
+    <template #anchor="{ attrs }">
+      <dt-button
+        class="d-mx4 d-px0"
+        :class="`dtc-renderer-menu__button--${theme}`"
+        :active="open"
+        importance="clear"
+        v-bind="attrs"
+        @click="onOpen"
+      >
+        <template #icon>
+          <icon-menu />
+        </template>
+      </dt-button>
+    </template>
+    <template #content>
+      <div>
+        <dtc-button-bar
+          class="d-mb4"
+          :value="background"
+          @click="e => updateSettings('background', e)"
+        >
+          <template #theme>
+            <div class="d-w16 d-h16 d-ba">
+              <span class="d-fs12 d-ps-relative d-t6">T</span>
+            </div>
+          </template>
+          <template #black>
+            <div class="d-w16 d-h16 d-ba d-bgc-black-800" />
+          </template>
+          <template #white>
+            <div class="d-w16 d-h16 d-ba d-bgc-white" />
+          </template>
+        </dtc-button-bar>
+        <dtc-button-bar
+          class="d-mb4"
+          :value="positioning"
+          @click="e => updateSettings('positioning', e)"
+        >
+          <template #native>
+            <icon-left />
+          </template>
+          <template #center>
+            <icon-center />
+          </template>
+        </dtc-button-bar>
+      </div>
+    </template>
+  </dt-popover>
+</template>
+
+<script setup>
+import IconLeft from 'dialtone-icons/IconNotes';
+import IconCenter from 'dialtone-icons/IconMenu';
+import IconMenu from 'dialtone-icons/IconMenuVertical';
+import DtcButtonBar from '../tools/button_bar';
+import { DtButton, DtPopover } from '@dialpad/dialtone-vue';
+import { SETTINGS_UPDATE_EVENT } from '@/src/lib/constants';
+import { ref } from 'vue';
+
+defineProps({
+  theme: {
+    type: String,
+    required: true,
+  },
+  background: {
+    type: String,
+    required: true,
+  },
+  positioning: {
+    type: String,
+    required: true,
+  },
+});
+
+const emit = defineEmits([SETTINGS_UPDATE_EVENT]);
+
+function updateSettings (setting, e) {
+  emit(SETTINGS_UPDATE_EVENT, setting, e);
+}
+
+const open = ref(false);
+function onOpen () {
+  open.value = !open.value;
+}
+</script>
+
+<script>
+export default {
+  name: 'DtcRendererMenu',
+};
+</script>
+
+<style lang="less">
+@import (reference) "@/src/assets/dialtone.less";
+
+  .dtc-renderer-menu__button--dark {
+    .d-btn--inverted() !important;
+  }
+</style>
diff --git a/packages/combinator/src/components/renderer/renderer_target.vue b/packages/combinator/src/components/renderer/renderer_target.vue
new file mode 100644
index 0000000000..d2b97eeb65
--- /dev/null
+++ b/packages/combinator/src/components/renderer/renderer_target.vue
@@ -0,0 +1,120 @@
+<template>
+  <div ref="wrapper" />
+</template>
+
+<script setup>
+import { capitalize, computed, h, onMounted, onUpdated, ref, render, useSlots } from 'vue';
+import { DtNotice } from '@dialpad/dialtone-vue';
+
+const ERROR_MESSAGE = 'Error rendering component';
+
+const props = defineProps({
+  /**
+   * Component to render.
+   */
+  component: {
+    type: Object,
+    required: true,
+  },
+  /**
+   * Members to bind to the target component.
+   */
+  bindings: {
+    type: undefined,
+    required: true,
+  },
+  /**
+   * Events to bind to the target component.
+   */
+  events: {
+    type: undefined,
+    required: true,
+  },
+});
+
+const emit = defineEmits([
+  'event',
+]);
+
+const slots = useSlots();
+
+/**
+ * Map object containing events and their respective handlers.
+ *
+ * @returns {ComputedRef<object>} Event map.
+ */
+const events = computed(() => {
+  if (!props.events) { return {}; }
+  return Object.fromEntries(
+    props.events.map(({ name }) => {
+      return [
+        `on${capitalize(name)}`,
+        e => emit('event', name, e),
+      ];
+    }),
+  );
+});
+
+onMounted(renderTarget);
+onUpdated(renderTarget);
+
+const wrapper = ref();
+
+/**
+ * Destroys any old containers in the wrapper and appends a new one.
+ * Not completely sure why this has to be done, but it is buggy
+ * if this method is not used.
+ *
+ * @returns {HTMLDivElement} Instantiated container for rendering.
+ */
+function nextContainer () {
+  wrapper.value.replaceChildren();
+  return wrapper.value.appendChild(document.createElement('div'));
+}
+
+/**
+ * Need to render manually to catch DOM exception errors.
+ *
+ * Attempts to render the target component, if there is
+ * an error a warning will be logged and a 'notice' component
+ * will be rendered to inform the user.
+ */
+function renderTarget () {
+  const container = nextContainer();
+
+  try {
+    render(h(props.component, {
+      ...props.bindings,
+      ...events.value,
+    }, slots), container);
+  } catch (e) {
+    console.warn('Rendering warning: \n', e);
+    renderError(e, container);
+  }
+}
+
+/**
+ * Renders the error 'notice' component.
+ *
+ * @param exception - The exception.
+ * @param container - The container to render in.
+ */
+function renderError (exception, container) {
+  render(h(DtNotice, {
+    kind: 'error',
+    hideClose: true,
+    title: ERROR_MESSAGE,
+  }, {
+    default: () => exception.toString(),
+  }), container);
+}
+</script>
+
+<script>
+/**
+ * The renderer is responsible for displaying the target component in its current state.
+ */
+export default {
+  name: 'DtcRendererTarget',
+};
+</script>
diff --git a/packages/combinator/src/components/settings_menu/settings_menu.vue b/packages/combinator/src/components/settings_menu/settings_menu.vue
new file mode 100644
index 0000000000..c603f2eca6
--- /dev/null
+++ b/packages/combinator/src/components/settings_menu/settings_menu.vue
@@ -0,0 +1,134 @@
+<template>
+  <dt-popover
+    :dialog-class="`dtc-theme--${settings.root.theme}`"
+    content-class="dtc-theme__popover"
+    transition="fade"
+    placement="top-end"
+    initial-focus-element="dialog"
+    sticky
+  >
+    <template #anchor="{ attrs }">
+      <dt-button
+        class="dtc-theme__button"
+        v-bind="attrs"
+      >
+        <template #icon>
+          <IconSettings />
+        </template>
+      </dt-button>
+    </template>
+    <template #content>
+      <div class="d-px8">
+        <section class="d-p8">
+          <dt-radio-group
+            name="theme-radio-group"
+            legend="Theme"
+            :value="settings.root.theme"
+            @input="e => updateSettings('root', 'theme', e)"
+          >
+            <dt-radio value="light">
+              Light
+            </dt-radio>
+            <dt-radio value="dark">
+              Dark
+            </dt-radio>
+          </dt-radio-group>
+        </section>
+        <section class="d-p8">
+          <dt-radio-group
+            name="scheme-radio-group"
+            legend="Scheme"
+            :value="settings.code.scheme"
+            @input="e => updateSettings('code', 'scheme', e)"
+          >
+            <dt-radio value="mono">
+              Mono
+            </dt-radio>
+            <dt-radio value="highlight">
+              Highlight
+            </dt-radio>
+          </dt-radio-group>
+        </section>
+        <section class="d-p8">
+          <dt-radio-group
+            name="sidebar-radio-group"
+            legend="Sidebar Position"
+            :value="settings.root.sidebar"
+            @input="e => updateSettings('root', 'sidebar', e)"
+          >
+            <dt-radio value="left">
+              Left
+            </dt-radio>
+            <dt-radio value="right">
+              Right
+            </dt-radio>
+          </dt-radio-group>
+        </section>
+        <section class="d-p8">
+          <dt-input
+            :key="indentKey"
+            type="number"
+            label="Indent Spaces"
+            :value="settings.code.indent"
+            @input="updateIndent"
+          />
+        </section>
+        <section class="d-p8">
+          <dt-checkbox
+            :checked="settings.code.verbose"
+            @input="e => updateSettings('code', 'verbose', e)"
+          >
+            Verbose
+          </dt-checkbox>
+        </section>
+      </div>
+    </template>
+  </dt-popover>
+</template>
+
+<script setup>
+import IconSettings from 'dialtone-icons/IconSettings';
+
+import {
+  DtButton,
+  DtPopover,
+  DtRadioGroup,
+  DtRadio,
+  DtCheckbox,
+  DtInput,
+} from '@dialpad/dialtone-vue';
+import { SETTINGS_UPDATE_EVENT } from '@/src/lib/constants';
+import { ref } from 'vue';
+
+defineProps({
+  settings: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits([SETTINGS_UPDATE_EVENT]);
+
+function updateSettings (group, setting, e) {
+  emit(SETTINGS_UPDATE_EVENT, (model) => {
+    model[group][setting] = e;
+  });
+}
+
+const indentKey = ref(0);
+function updateIndent (e) {
+  const value = parseInt(e);
+
+  if (!Number.isNaN(value) && value >= 0) {
+    updateSettings('code', 'indent', value);
+  } else {
+    indentKey.value += 1;
+  }
+}
+</script>
+
+<script>
+export default {
+  name: 'DtcSettings',
+};
+</script>
diff --git a/packages/combinator/src/components/tools/button_bar.vue b/packages/combinator/src/components/tools/button_bar.vue
new file mode 100644
index 0000000000..84dfa832a4
--- /dev/null
+++ b/packages/combinator/src/components/tools/button_bar.vue
@@ -0,0 +1,43 @@
+<template>
+  <dt-button-group
+    class="d-d-flex d-bgc-black-025 d-bar4"
+  >
+    <template
+      v-for="(_, slot) in slots"
+      :key="slot"
+    >
+      <dt-button
+        class="d-px24"
+        importance="clear"
+        :active="slot === value"
+        @click="() => emit('click', slot)"
+      >
+        <template #icon>
+          <slot :name="slot" />
+        </template>
+      </dt-button>
+    </template>
+  </dt-button-group>
+</template>
+
+<script setup>
+import { DtButtonGroup, DtButton } from '@dialpad/dialtone-vue';
+import { useSlots } from 'vue';
+
+defineProps({
+  value: {
+    type: String,
+    required: true,
+  },
+});
+
+const slots = useSlots();
+
+const emit = defineEmits(['click']);
+</script>
+
+<script>
+export default {
+  name: 'DtcButtonBar',
+};
+</script>
diff --git a/packages/combinator/src/components/tools/node.vue b/packages/combinator/src/components/tools/node.vue
new file mode 100644
index 0000000000..814fd4aa58
--- /dev/null
+++ b/packages/combinator/src/components/tools/node.vue
@@ -0,0 +1,23 @@
+<script>
+import { h } from 'vue';
+
+export default {
+  name: 'DtcNode',
+  props: {
+    template: {
+      type: String,
+      required: true,
+    },
+    library: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  render (props) {
+    return h({
+      components: props.library,
+      template: props.template,
+    });
+  },
+};
+</script>
diff --git a/packages/combinator/src/components/tools/overlay.vue b/packages/combinator/src/components/tools/overlay.vue
new file mode 100644
index 0000000000..53aa8f5be1
--- /dev/null
+++ b/packages/combinator/src/components/tools/overlay.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="d-w100p d-h100p">
+    <slot name="content" />
+    <div class="d-pe-none">
+      <div class="d-h100p">
+        <slot name="overlay" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DtcOverlay',
+};
+</script>
diff --git a/packages/combinator/src/components/tools/section.vue b/packages/combinator/src/components/tools/section.vue
new file mode 100644
index 0000000000..6c6036d27f
--- /dev/null
+++ b/packages/combinator/src/components/tools/section.vue
@@ -0,0 +1,62 @@
+<template>
+  <li>
+    <dt-list-item
+      role="listitem"
+      element-type="div"
+      navigation-type="tab"
+      @click="toggle"
+    >
+      <template #default>
+        <h2>
+          {{ heading }}
+        </h2>
+      </template>
+      <template #right>
+        <icon-collapse v-if="show" />
+        <icon-expand v-else />
+      </template>
+    </dt-list-item>
+    <div
+      v-if="show"
+      :class="contentClass"
+    >
+      <slot />
+    </div>
+  </li>
+</template>
+
+<script setup>
+import IconExpand from 'dialtone-icons/IconArrowKeyboardDown';
+import IconCollapse from 'dialtone-icons/IconArrowKeyboardUp';
+import { DtListItem } from '@dialpad/dialtone-vue';
+
+import { ref } from 'vue';
+
+const props = defineProps({
+  heading: {
+    type: String,
+    required: true,
+  },
+  open: {
+    type: Boolean,
+    default: true,
+  },
+  contentClass: {
+    type: String,
+    default: '',
+  },
+});
+
+const show = ref(props.open);
+
+function toggle () {
+  show.value = !show.value;
+}
+
+</script>
+
+<script>
+export default {
+  name: 'DtcSection',
+};
+</script>
diff --git a/packages/combinator/src/components/tools/tab_panel.vue b/packages/combinator/src/components/tools/tab_panel.vue
new file mode 100644
index 0000000000..b4cf7491d1
--- /dev/null
+++ b/packages/combinator/src/components/tools/tab_panel.vue
@@ -0,0 +1,83 @@
+<template>
+  <dt-tab-group
+    class="d-d-flex d-fd-column d-of-y-auto d-h100p"
+    tab-list-class="dtc-theme__tabs d-zi-base1 d-ps-sticky d-t0"
+    :selected="getId(selected)"
+    borderless
+  >
+    <template #tabs>
+      <div>
+        <template
+          v-for="(_, slot) in slots"
+          :key="slot"
+        >
+          <dt-tab
+            :id="getId(slot)"
+            :panel-id="getId(slot)"
+          >
+            {{ generateLabel(slot, capitalCase) }}
+          </dt-tab>
+        </template>
+      </div>
+    </template>
+    <template
+      v-for="(_, slot) in slots"
+      :key="slot"
+    >
+      <dt-tab-panel
+        :id="getId(slot)"
+        :tab-id="getId(slot)"
+        class="d-d-flex d-fl-grow1 d-py8 d-px16"
+      >
+        <slot :name="slot" />
+      </dt-tab-panel>
+    </template>
+  </dt-tab-group>
+</template>
+
+<script setup>
+import { DtTabGroup, DtTabPanel, DtTab } from '@dialpad/dialtone-vue';
+import { useSlots } from 'vue';
+import { getUniqueString } from '@/src/lib/utils';
+import { capitalCase } from 'change-case';
+
+const props = defineProps({
+  /**
+   * Unique id for tabs and panels to reference each other.
+   */
+  id: {
+    type: String,
+    default: () => getUniqueString(),
+  },
+  /**
+   * The selected slot name.
+   */
+  selected: {
+    type: String,
+    default: undefined,
+  },
+  /**
+   * Function that generates a label based on a given slot.
+   * Also provides a 'capitalCase' function to prettify a string.
+   */
+  generateLabel: {
+    type: Function,
+    default: (slot, capitalCase) => capitalCase(slot),
+  },
+});
+
+const slots = useSlots();
+
+function getId (slot) {
+  return `${props.id}-${slot}`;
+}
+</script>
+
+<script>
+/**
+ * Reusable component for displaying slot content based on a selected tab.
+ */
+export default {
+  name: 'DtcTabPanel',
+};
+</script>
diff --git a/packages/combinator/src/lib/constants.js b/packages/combinator/src/lib/constants.js
new file mode 100644
index 0000000000..e69f688387
--- /dev/null
+++ b/packages/combinator/src/lib/constants.js
@@ -0,0 +1,18 @@
+export const DEFAULT_PREFIX = 'dtc';
+export const DIALTONE_PREFIX = 'dt';
+
+export const DEFAULT_SLOT_NAME = 'default';
+
+export const VALUE_UPDATE_EVENT = 'update:value';
+export const CONTROL_UPDATE_EVENT = 'update:control';
+export const MEMBER_UPDATE_EVENT = 'update:member';
+export const OPTIONS_UPDATE_EVENT = 'update:options';
+export const SETTINGS_UPDATE_EVENT = 'update:settings';
+
+export const SETTINGS_THEME_KEY = 'dialtoneCombinatorTheme';
+export const SETTINGS_SIDEBAR_KEY = 'dialtoneCombinatorSidebar';
+export const SETTINGS_SCHEME_KEY = 'dialtoneCombinatorCodeScheme';
+export const SETTINGS_VERBOSE_KEY = 'dialtoneCombinatorCodeVerbose';
+export const SETTINGS_INDENT_KEY = 'dialtoneCombinatorCodeIndent';
+export const SETTINGS_POSITIONING_KEY = 'dialtoneCombinatorRendererPositioning';
+export const SETTINGS_BACKGROUND_KEY = 'dialtoneCombinatorRendererBackground';
diff --git a/packages/combinator/src/lib/control.js b/packages/combinator/src/lib/control.js
new file mode 100644
index 0000000000..67f9b9154a
--- /dev/null
+++ b/packages/combinator/src/lib/control.js
@@ -0,0 +1,132 @@
+/**
+ * See /.github/documentation/internal/CONTROLS.MD
+ * For in-depth information about controls.
+ */
+import DtcControlEvent from '@/src/components/controls/control_event';
+import DtcControlSlot from '@/src/components/controls/control_slot';
+import DtcControlDynamic from '@/src/components/controls/control_dynamic';
+import DtcControlObject from '@/src/components/controls/control_object';
+import DtcControlArray from '@/src/components/controls/control_array';
+import DtcControlBoolean from '@/src/components/controls/control_boolean';
+import DtcControlNumber from '@/src/components/controls/control_number';
+import DtcControlSelection from '@/src/components/controls/control_selection';
+import DtcControlString from '@/src/components/controls/control_string';
+import DtcControlNullish from '@/src/components/controls/control_nullish';
+import DtcControlBase from '@/src/components/controls/control_base';
+
+import { typeOfMemberValue } from '@/src/lib/utils';
+
+/**
+ * Symbol representing a value that is "not set".
+ * The main usage is to indicate that a prop value should be 'undefined' instead of using its default value.
+ *
+ * @type {symbol}
+ */
+export const UNSET = Symbol('unset');
+
+/**
+ * Map of controls containing control component and related information.
+ * Controls must have the 'component' and 'default' entries.
+ *
+ * @type {object}
+ */
+export const controlMap = Object.freeze({
+  event: {
+    component: DtcControlEvent,
+    default () { return null; },
+  },
+  slot: {
+    component: DtcControlSlot,
+    default () { return getControlDataDefault(this); },
+  },
+  dynamic: {
+    component: DtcControlDynamic,
+    default () { return getControlDataDefault(this); },
+    defaultControl () { return 'undefined'; },
+    serialize: true,
+  },
+  object: {
+    component: DtcControlObject,
+    default () { return getControlDataDefault(this); },
+  },
+  array: {
+    component: DtcControlArray,
+    default () { return getControlDataDefault(this); },
+  },
+  selection: {
+    component: DtcControlSelection,
+    default ({ values } = {}) { return values?.[0]; },
+  },
+  string: {
+    component: DtcControlString,
+    default () { return getControlDataDefault(this); },
+  },
+  number: {
+    component: DtcControlNumber,
+    default () { return getControlDataDefault(this); },
+  },
+  boolean: {
+    component: DtcControlBoolean,
+    default () { return getControlDataDefault(this); },
+  },
+  null: {
+    component: DtcControlNullish,
+    default () { return getControlDataDefault(this); },
+    serialize: true,
+  },
+  base: {
+    component: DtcControlBase,
+    default () { return getControlDataDefault(this); },
+  },
+});
+
+function getControlDataDefault (controlData) {
+  return controlData.component.props.value.default();
+}
+
+export function getControlByValue (value) {
+  const control = value === undefined || value === null || value === UNSET
+    ? 'null'
+    : typeOfMemberValue(value);
+
+  return control in controlMap
+    ? control
+    : 'base';
+}
+
+export function getControlByMemberType (type, args) {
+  switch (type) {
+    case 'string': {
+      return args?.values && args.values.length > 0
+        ? 'selection'
+        : 'string';
+    }
+    default: return type;
+  }
+}
+
+/**
+ * Serializes a value before giving it to a control that requires a serialized value.
+ * Currently, this only converts between 'UNSET' and 'undefined'.
+ *
+ * @param {*} value - The value to serialize
+ * @returns {*} The serialized value
+ */
+export function serializeControlValue (value) {
+  return value === undefined
+    ? UNSET
+    : value;
+}
+
+/**
+ * Deserializes a value after receiving it from a control that requires a serialized value.
+ * Currently, this only converts between 'UNSET' and 'undefined'.
+ *
+ * @param {*} value - The value to deserialize
+ * @returns {*} The deserialized value
+ */
+export function deserializeControlValue (value) {
+  return value === UNSET
+    ? undefined
+    : value;
+}
diff --git a/packages/combinator/src/lib/convert.js b/packages/combinator/src/lib/convert.js
new file mode 100644
index 0000000000..ae75993137
--- /dev/null
+++ b/packages/combinator/src/lib/convert.js
@@ -0,0 +1,85 @@
+import { parseDocValue, stringifyDocValue } from '@/src/lib/parse';
+
+const convertMap = {
+  object: {
+    array: objectToArray,
+    string: stringifyDocValue,
+  },
+  array: {
+    object: arrayToObject,
+    string: stringifyDocValue,
+  },
+  string: {
+    object: stringToObject,
+    array: stringToArray,
+    number: parseInt,
+    boolean: stringToBoolean,
+  },
+  number: {
+    string: numberToString,
+    boolean: numberToBoolean,
+  },
+  boolean: {
+    string: booleanToString,
+    number: booleanToNumber,
+  },
+};
+
+/**
+ * Converts a 'value' 'from' one data type 'to' another if implemented.
+ * Returns null if unable to convert.
+ *
+ * @param {*} from - The type name to convert from
+ * @param {*} to - The type name to convert to
+ * @param {*} value - The original value
+ * @returns {*} The converted value or 'null'
+ */
+export function convert (from, to, value) {
+  return convertMap[from]?.[to]?.(value);
+}
+
+function objectToArray (object) {
+  return Object.values(object);
+}
+
+function arrayToObject (array) {
+  return {
+    ...array,
+  };
+}
+
+function stringToObject (string) {
+  const value = parseDocValue(string);
+  return Array.isArray(value)
+    ? arrayToObject(value)
+    : value;
+}
+
+function stringToArray (string) {
+  const value = parseDocValue(string);
+  return Array.isArray(value)
+    ? value
+    : objectToArray(value);
+}
+
+function stringToBoolean (string) {
+  return string === 'true';
+}
+
+function numberToString (number) {
+  return number
+    ? number.toString()
+    : null;
+}
+
+function numberToBoolean (number) {
+  return number === 1;
+}
+
+function booleanToString (boolean) {
+  return boolean ? 'true' : 'false';
+}
+
+function booleanToNumber (boolean) {
+  return boolean ? 1 : 0;
+}
diff --git a/packages/combinator/src/lib/info.js b/packages/combinator/src/lib/info.js
new file mode 100644
index 0000000000..866c509253
--- /dev/null
+++ b/packages/combinator/src/lib/info.js
@@ -0,0 +1,175 @@
+import { controlMap } from '@/src/lib/control';
+import { extendBinding, extendEvent, extendMember } from '@/src/lib/info_extend';
+import clone from 'just-clone';
+
+/**
+ * Gets component data from the documentation and processing on it
+ * to return a 'info' and 'defaults' object.
+ *
+ * The 'info' object contains all the post-processed documentation data.
+ * The 'defaults' object contains a map of default values for each member in 'info'.
+ *
+ * @param {object} component - The target component.
+ * @param {object} documentation - The component documentation.
+ * @returns {Array} A newly instantiated info object.
+ */
+export function getComponentInfo (component, documentation) {
+  const info = clone(documentation.find(componentInfo => componentInfo.displayName === component.name));
+  extendInfo(info, component);
+  return info;
+}
+
+/**
+ * Delegates the data processing for different member groups.
+ *
+ * The data processing extends the documentation for each member of a member group.
+ * Processing can be customized for each member group by passing in custom handlers
+ * to the `processMembers(members, ...handlers)` function.
+ *
+ * Example:
+ * info.events = processMembers(info.events, extendEvent);
+ *   Each event member will have the custom `extendEvent(...)` function applied to it.
+ *
+ * If applicable defaults are set after the member group is fully extended.
+ *
+ * @param {object} info - The unprocessed info object.
+ * @param {object} component - The target component.
+ */
+function extendInfo (info, component) {
+  if (!info) {
+    return;
+  }
+
+  renameModelProp(info);
+
+  const attributes = getAttributes(info);
+
+  if (info.slots) {
+    info.slots = processMembers(info.slots);
+  }
+
+  if (info.props) {
+    const defaultCache = getComponentDefaults(component);
+    info.props = processMembers(info.props, binding => extendBinding(binding, defaultCache));
+  }
+
+  if (attributes) {
+    info.attributes = processMembers(attributes);
+  }
+
+  if (info.events) {
+    info.events = processMembers(info.events, extendEvent);
+  }
+}
+
+/**
+ * Renames the prop that contains the custom 'model' tag to its original name.
+ *
+ * @param {object} info - The unprocessed info object.
+ */
+function renameModelProp (info) {
+  const model = info.props?.find(componentProp => {
+    const tags = componentProp.tags;
+    return tags
+      ? 'model' in tags
+      : false;
+  });
+  if (model) {
+    model.name = model.tags.model[0]?.description;
+  }
+}
+
+/**
+ * Gets attribute members by finding custom attribute 'property' tags.
+ * Creates a member object for each with name, type and default value.
+ *
+ * @param {object} info - The unprocessed info object.
+ * @returns {Array} - Array of attribute members.
+ */
+function getAttributes (info) {
+  const properties = info.tags.property;
+
+  if (!properties) {
+    return null;
+  }
+
+  return properties.filter(property => {
+    return property.description === 'attribute';
+  }).map(property => {
+    const type = property.type.name.toLowerCase();
+    const defaultValue = controlMap[type].default();
+    return {
+      name: property.name,
+      type: {
+        name: type,
+      },
+      initialValue: defaultValue,
+      defaultValue,
+    };
+  });
+}
+
+/**
+ * Processes a member group by extending each member with the `extendMember(member)` function.
+ * Custom processing can be done on each member by passing a processing function as a parameter.
+ *
+ * Example:
+ * `processMembers(info.events, extendEvent)`
+ *
+ * Each event member will be processed with the default `extendMember(member)` function and also have the
+ * custom `extendEvent(member)` function applied after.
+ *
+ * Multiple processor functions can be passed in after the 'members' parameter.
+ * They are invoked in the order they are passed in.
+ *
+ * @param {Array} members - The member group to process.
+ * @param {Function} processors - The optional, additional member processing functions.
+ * @returns {Array} The processed member group.
+ */
+function processMembers (members, ...processors) {
+  return members?.map(member => {
+    extendMember(member);
+    processors.forEach(processor => {
+      processor(member);
+    });
+    return member;
+  });
+}
+
+/**
+ * Gets all the default values for each possible member of a component.
+ *
+ * @param {object} component - The target component.
+ * @returns {object} Default value map.
+ */
+function getComponentDefaults (component) {
+  /**
+   * Get all objects containing members to search for default values.
+   * Contains all the base props and props for each mixin.
+   *
+   * @type {Array}
+   */
+  const componentSearchObjects = [
+    component.props,
+    ...(component.mixins?.map(mixin => mixin.props) ?? []),
+    ...(component.extends?.mixins?.map(mixin => mixin.props) ?? []),
+  ].filter(obj => obj);
+
+  /**
+   * Searches each member in each object and returns an object of key-value
+   * pairs for each member and its default value respectively.
+   */
+  return {
+    ...Object.fromEntries(componentSearchObjects.filter(path => path).map(path => {
+      return Object.entries(path).map(([entryKey, entryValue]) => {
+        const entryDefault = entryValue.default;
+        return [
+          entryKey,
+          entryValue.type !== Function && typeof entryDefault === 'function'
+            ? entryDefault()
+            : entryDefault,
+        ];
+      });
+    }).flat()),
+  };
+}
diff --git a/packages/combinator/src/lib/info_extend.js b/packages/combinator/src/lib/info_extend.js
new file mode 100644
index 0000000000..fb9a50a152
--- /dev/null
+++ b/packages/combinator/src/lib/info_extend.js
@@ -0,0 +1,73 @@
+import { paramCase } from 'change-case';
+import { typeOfMemberValue } from '@/src/lib/utils';
+import { capitalize } from 'vue';
+
+/**
+ * The default processing function that is applied to every member in a member group.
+ *
+ * Sets a predetermined default value and default type for a member.
+ * Also adds a getter for a label value.
+ *
+ * @param {object} member - The extended member.
+ */
+export function extendMember (member) {
+  if (member.type) {
+    const typeString = member.type.name ?? member.type.names?.[0];
+    delete member.type;
+    if (typeString) {
+      member.types = extractMemberTypes(typeString);
+    }
+  }
+  if (member.name) {
+    member.label = paramCase(member.name);
+  }
+  if (member.description) {
+    member.description = capitalize(member.description);
+  }
+}
+
+export function extendBinding (member, defaults) {
+  const defaultValue = Object.entries(defaults).find(([name]) => {
+    return name === member.name;
+  })?.[1];
+
+  const defaultType = typeOfMemberValue(defaultValue);
+
+  delete member.defaultValue;
+  if (defaultValue !== undefined) {
+    member.initialValue = defaultValue;
+    member.defaultValue = defaultValue;
+  }
+
+  if (defaultType) {
+    member.defaultType = defaultType;
+  }
+}
+
+/**
+ * Splits a member type string into an array of type names.
+ *
+ * @param {string} typeString - The member type string.
+ * @returns {Array} Array of types for member.
+ */
+function extractMemberTypes (typeString) {
+  return typeString.split('|').map(type => type.trim().toLowerCase());
+}
+
+/**
+ * Extends an event member.
+ *
+ * Event members use the custom 'type' tag so their type data
+ * is stored differently than other members.
+ *
+ * This corrects the type data to the same format.
+ *
+ * @param {object} event - The event member.
+ */
+export function extendEvent (event) {
+  const types = event.type?.names?.[0];
+  delete event.type;
+  if (types) {
+    event.types = extractMemberTypes(types);
+  }
+}
diff --git a/packages/combinator/src/lib/ordered_object.js b/packages/combinator/src/lib/ordered_object.js
new file mode 100644
index 0000000000..e72ea8865c
--- /dev/null
+++ b/packages/combinator/src/lib/ordered_object.js
@@ -0,0 +1,80 @@
+/**
+ * Proxy that uses a map to mimic an object that always enumerates
+ * keys in the same order that they were added to the object.
+ *
+ * Used by the 'object' control to keep keys in order when
+ * updating them. The controls will bounce around while editing otherwise.
+ */
+export class OrderedObject {
+  constructor () {
+    this.map = new Map();
+    return new Proxy(this, {
+      get: this.get,
+
+      /**
+       * Designates the keys, which come from the map, which is always ordered.
+       *
+       * @param {OrderedObject} target - The proxy target.
+       * @returns {Array} Array of ordered keys.
+       */
+      ownKeys (target) {
+        const keys = [];
+        for (const key of target.map.keys()) {
+          keys.push(key);
+        }
+        return keys;
+      },
+
+      /**
+       * Has to be declared to use with object functions such as `Object.entries(...)` etc...
+       *
+       * @returns {object} The property descriptor.
+       */
+      getOwnPropertyDescriptor () {
+        return {
+          enumerable: true,
+          configurable: true,
+        };
+      },
+    });
+  }
+
+  /**
+   * When accessing with an indexer '[]', will search the underlying map object for a key.
+   * If the key doesn't exist, the accessor will be reflected to this 'OrderedObject' instance.
+   *
+   * @param {OrderedObject} target - The proxy target.
+   * @param {string} prop - The property that is being accessed.
+   * @returns {*} Property value from the map or this object.
+   */
+  get (target, prop) {
+    if (target.map.has(prop)) {
+      return target.map.get(prop);
+    }
+
+    return Reflect.get(target, prop);
+  }
+
+  set (key, value) {
+    this.map.set(key, value);
+  }
+
+  static fromEntries (entries) {
+    const obj = new OrderedObject();
+    entries.forEach(([key, value]) => {
+      obj.set(key, value);
+    });
+    return obj;
+  }
+
+  toJSON () {
+    return Object.fromEntries(Object.entries(this));
+  }
+
+  [Symbol.iterator] () {
+    const iterator = this.map[Symbol.iterator]();
+    return {
+      next: () => iterator.next(),
+    };
+  }
+}
diff --git a/packages/combinator/src/lib/parse.js b/packages/combinator/src/lib/parse.js
new file mode 100644
index 0000000000..a224c00a80
--- /dev/null
+++ b/packages/combinator/src/lib/parse.js
@@ -0,0 +1,21 @@
+import JSON5 from 'json5-with-undefined';
+
+/**
+ * Stringifies a documentation value using the docgen format.
+ *
+ * @param {*} value - The value to stringify.
+ * @returns {string} Stringified value.
+ */
+export function stringifyDocValue (value) {
+  return JSON5.stringify(value);
+}
+
+/**
+ * Parses a documentation value using the docgen format.
+ *
+ * @param {string} value - The value to parse.
+ * @returns {*} The parsed value
+ */
+export function parseDocValue (value) {
+  return JSON5.parse(value);
+}
diff --git a/packages/combinator/src/lib/test/utils_test.js b/packages/combinator/src/lib/test/utils_test.js
new file mode 100644
index 0000000000..310371326a
--- /dev/null
+++ b/packages/combinator/src/lib/test/utils_test.js
@@ -0,0 +1,15 @@
+// eslint-disable-next-line import/no-absolute-path
+import supportedComponents from '/src/supported_components.json';
+import * as dialtone from '@dialpad/dialtone-vue';
+
+/**
+ * Uses the names of supported components from the 'supported_components.json'
+ * file and returns an array of matching Dialtone Vue component objects.
+ *
+ * @returns {Array} Array of supported components
+ */
+export function getSupportedComponents () {
+  return Object.values(dialtone).filter((exportValue) => {
+    return supportedComponents.includes(exportValue?.name);
+  });
+}
diff --git a/packages/combinator/src/lib/utils.js b/packages/combinator/src/lib/utils.js
new file mode 100644
index 0000000000..ceaec37560
--- /dev/null
+++ b/packages/combinator/src/lib/utils.js
@@ -0,0 +1,117 @@
+import { DEFAULT_PREFIX } from '@/src/lib/constants';
+
+/**
+ * Copy all the entries of an object into a new object.
+ *
+ * @param {object} obj - The target object.
+ * @returns {object} The flattened object.
+ */
+export function flatten (obj) {
+  const result = {};
+  for (const key in obj) {
+    result[key] = obj[key];
+  }
+  return result;
+}
+
+/**
+ * Map of prefixes with their current 'id' numbers.
+ * Used by `getUniqueString(...)`
+ *
+ * @type {object}
+ */
+const UNIQUE_ID_MAP = {};
+
+/**
+ * Gets the next string value given a prefix.
+ *
+ * @param {string} prefix - The prefix that will be uniquely incremented.
+ * @returns {string} The next unique string for given prefix.
+ */
+export function getUniqueString (prefix = DEFAULT_PREFIX) {
+  let id = UNIQUE_ID_MAP[prefix];
+  if (!id) {
+    id = 0;
+    UNIQUE_ID_MAP[prefix] = id;
+  }
+  return `${prefix}${UNIQUE_ID_MAP[prefix]++}`;
+}
+
+/**
+ * Gets specific type name from a value, intended to be used with value from a 'member'.
+ * Gives some more specific type names such as 'array' etc...
+ *
+ * @param {*} value - The value.
+ * @returns {string|null} The specific member type.
+ */
+export function typeOfMemberValue (value) {
+  if (value === undefined || value === null) {
+    return null;
+  }
+
+  const type = typeof value;
+  switch (type) {
+    case 'symbol': {
+      return value.toString();
+    }
+    case 'object': {
+      return Array.isArray(value)
+        ? 'array'
+        : 'object';
+    }
+    default: return type;
+  }
+}
+
+/**
+ * Enumerates an object that contains key-value pairs, each containing an array.
+ * A handler is called for each item in each array.
+ *
+ * The first parameter for the handler is the key for the array that the item is in.
+ * The second parameter for the handler is the item in the array.
+ *
+ * Used to make enumerating through the 'options' and 'info' members easier.
+ *
+ * @param {Function} handler - The handler called for each entry.
+ * @param {object} groups - Object that contains key-value pairs, each containing an array.
+ */
+export function enumerateGroups (handler, groups) {
+  Object.entries(groups).forEach(([group, entries]) => {
+    entries?.forEach(entry => {
+      handler(group, entry);
+    });
+  });
+}
+
+/**
+ * Gets the full list of icon component names from the dialtone package.
+ *
+ * @returns {Array} icon components.
+ */
+export function getIcons () {
+  const requireContext = require.context(
+    '../../node_modules/@dialpad/dialtone/lib/dist/vue/icons',
+    false,
+    /[A-Z]\w+\.(vue|js)$/,
+  );
+
+  return getComponentFilesFromDir(requireContext).map(item => item.componentName);
+}
+
+/**
+ * Extracts filename and component name from all files in a directory.
+ *
+ * @param {object} requireContext - a requireContext containing the path of the
+ * directory you would like to read files from.
+ * @returns {Array} arr of objects containing both the
+ * filename and component name in PascalCase.
+ */
+export const getComponentFilesFromDir = (requireContext) => {
+  const files = [];
+  requireContext.keys().forEach(fileName => {
+    // Get PascalCase name of component
+    const componentName = fileName.split('/').pop().replace(/\.\w+$/, '');
+    files.push({ fileName, componentName });
+  });
+  return files;
+};
diff --git a/packages/combinator/src/lib/utils_vue.js b/packages/combinator/src/lib/utils_vue.js
new file mode 100644
index 0000000000..75a55aaeb6
--- /dev/null
+++ b/packages/combinator/src/lib/utils_vue.js
@@ -0,0 +1,86 @@
+import { computed, ref } from 'vue';
+import { getUniqueString } from '@/src/lib/utils';
+
+/**
+ * Property that can be used to store persistent data in local storage for a reactive `ref(...)` object.
+ *
+ * Wraps a `ref(...)` providing read and write functionality that also updates a local storage value.
+ * A value will be searched for in local storage based on the 'key' if not found it will use the 'defaultValue'.
+ *
+ * Uses JSON serialization so values retain their true data types.
+ *
+ * @param {string} key - The local storage key.
+ * @param {*} defaultValue - The default value when value is not in local storage.
+ * @returns {WritableComputedRef<*>} The cached ref object.
+ */
+export function cachedRef (key, defaultValue) {
+  const reference = ref(JSON.parse(window.localStorage.getItem(key)) || defaultValue);
+  return computed({
+    get: () => reference.value,
+    set (value) {
+      window.localStorage.setItem(key, JSON.stringify(value));
+      reference.value = value;
+    },
+  });
+}
+
+/**
+ * Property that can be used with `v-model`.
+ * Intended to wrap reactive objects such as `ref(...)` and `reactive(...)`.
+ *
+ * get: Gets the wrapped object
+ * set: Invokes a handler with the first parameter being a provided event value
+ *   and the second parameter is the wrapped object. Allows vue emit events to
+ *   interact with the wrapped object.
+ *
+ * @param {object} model - The target object to wrap.
+ * @param {Function} handler - The handler function, should take an event value and use it to modify the wrapped object.
+ * @returns {WritableComputedRef<*>} The computed model object.
+ */
+export function computedModel (model, handler) {
+  return computed({
+    get: () => model.value,
+    set: (e) => handler(e, model.value),
+  });
+}
+
+/**
+ * Interface for an array of unique 'id' strings where
+ * the indexes represent their position in some external iterable.
+ *
+ * addId: Generate and push 'id' string to array.
+ * removeId: Remove 'id' string at index position, returns the 'id' string.
+ * getId: Gets the 'id' string at index position, if 'id' string is not existent a new one will be generated.
+ *
+ * @param {string} prefix - The prefix used to generate unique id values.
+ * @returns {{addId: addId, removeId: removeId, getId: getId}} The id map object.
+ */
+export function idMap (prefix) {
+  const map = [];
+
+  function add () {
+    const id = getUniqueString(prefix);
+    map.push(id);
+    return id;
+  }
+
+  function remove (index) {
+    const [id] = map.splice(index, 1);
+    return id;
+  }
+
+  function get (index) {
+    let id = map[index];
+    if (!id) {
+      id = getUniqueString(prefix);
+      map.splice(index, 0, id);
+    }
+    return id;
+  }
+
+  return {
+    addId: add,
+    removeId: remove,
+    getId: get,
+  };
+}
diff --git a/packages/combinator/src/main.js b/packages/combinator/src/main.js
new file mode 100644
index 0000000000..db2b08ae4b
--- /dev/null
+++ b/packages/combinator/src/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './App';
+
+createApp(App).mount('#app');
diff --git a/packages/combinator/src/settings.json b/packages/combinator/src/settings.json
new file mode 100644
index 0000000000..f5d9dc46ae
--- /dev/null
+++ b/packages/combinator/src/settings.json
@@ -0,0 +1,15 @@
+{
+  "root": {
+    "default-theme": "light",
+    "default-sidebar": "right"
+  },
+  "code": {
+    "default-scheme": "highlight",
+    "default-verbose": false,
+    "default-indent-spaces": 2
+  },
+  "renderer": {
+    "default-positioning": "center",
+    "default-background": "white"
+  }
+}
\ No newline at end of file
diff --git a/packages/combinator/src/supported_components.json b/packages/combinator/src/supported_components.json
new file mode 100644
index 0000000000..a2d9a0af05
--- /dev/null
+++ b/packages/combinator/src/supported_components.json
@@ -0,0 +1,21 @@
+[
+  "DtAvatar",
+  "DtBadge",
+  "DtButton",
+  "DtButtonGroup",
+  "DtBreadcrumbs",
+  "DtCheckbox",
+  "DtChip",
+  "DtInput",
+  "DtKeyboardShortcut",
+  "DtLazyShow",
+  "DtLink",
+  "DtListItem", "ListItem",
+  "DtNotice",
+  "DtRadio",
+  "DtSelectMenu",
+  "DtToast",
+  "DtToggle",
+  "DtTooltip",
+  "DtValidationMessages"
+]
\ No newline at end of file
diff --git a/packages/combinator/src/variants/variants.js b/packages/combinator/src/variants/variants.js
new file mode 100644
index 0000000000..4b5fb11580
--- /dev/null
+++ b/packages/combinator/src/variants/variants.js
@@ -0,0 +1,29 @@
+import DtBadge from './variants_badge';
+import DtButton from './variants_button';
+import DtBreadcrumbs from './variants_breadcrumbs';
+import DtCheckbox from './variants_checkbox';
+import DtChip from './variants_chip';
+import DtInput from './variants_input';
+import DtLink from './variants_link';
+import DtNotice from './variants_notice';
+import DtRadio from './variants_radio';
+import DtSelectMenu from './variants_select_menu';
+import DtToast from './variants_toast';
+import DtToggle from './variants_toggle';
+
+export default function variants () {
+  return {
+    DtBadge,
+    DtButton,
+    DtBreadcrumbs,
+    DtCheckbox,
+    DtChip,
+    DtInput,
+    DtLink,
+    DtNotice,
+    DtRadio,
+    DtSelectMenu,
+    DtToast,
+    DtToggle,
+  };
+}
diff --git a/packages/combinator/src/variants/variants_badge.js b/packages/combinator/src/variants/variants_badge.js
new file mode 100644
index 0000000000..85cbedee6e
--- /dev/null
+++ b/packages/combinator/src/variants/variants_badge.js
@@ -0,0 +1,9 @@
+export default {
+  default: {
+    slots: {
+      default: {
+        initialValue: 'Badge',
+      },
+    },
+  },
+};
diff --git a/packages/combinator/src/variants/variants_breadcrumbs.js b/packages/combinator/src/variants/variants_breadcrumbs.js
new file mode 100644
index 0000000000..c1fc597930
--- /dev/null
+++ b/packages/combinator/src/variants/variants_breadcrumbs.js
@@ -0,0 +1,15 @@
+export default {
+  default: {
+    props: {
+      breadcrumbs: {
+        initialValue: [
+          { label: 'Root', href: '#' },
+          { label: 'Section', href: '#' },
+          { label: 'Section', href: '#' },
+          { label: 'Section', href: '#' },
+          { label: 'Current Page', href: '#', selected: true },
+        ],
+      },
+    },
+  },
+};
diff --git a/packages/combinator/src/variants/variants_button.js b/packages/combinator/src/variants/variants_button.js
new file mode 100644
index 0000000000..ad3c2ef7a8
--- /dev/null
+++ b/packages/combinator/src/variants/variants_button.js
@@ -0,0 +1,113 @@
+export default {
+  default: {
+    slots: {
+      default: {
+        initialValue: 'Place call',
+      },
+    },
+  },
+  primary: {
+    slots: {
+      default: {
+        initialValue: 'Primary',
+      },
+    },
+    props: {
+      importance: {
+        initialValue: 'primary',
+        lockControl: true,
+      },
+    },
+  },
+  outlined: {
+    slots: {
+      default: {
+        initialValue: 'Outlined',
+      },
+    },
+    props: {
+      importance: {
+        initialValue: 'outlined',
+        lockControl: true,
+      },
+    },
+  },
+  clear: {
+    slots: {
+      default: {
+        initialValue: 'Clear',
+      },
+    },
+    props: {
+      importance: {
+        initialValue: 'clear',
+        lockControl: true,
+      },
+    },
+  },
+  danger: {
+    slots: {
+      default: {
+        initialValue: 'Danger',
+      },
+    },
+    props: {
+      kind: {
+        initialValue: 'danger',
+        lockControl: true,
+      },
+    },
+  },
+  inverted: {
+    slots: {
+      default: {
+        initialValue: 'Inverted',
+      },
+    },
+    props: {
+      kind: {
+        initialValue: 'inverted',
+        lockControl: true,
+      },
+    },
+  },
+  disabled: {
+    slots: {
+      default: {
+        initialValue: 'Disabled',
+      },
+    },
+    attributes: {
+      disabled: {
+        initialValue: true,
+        lockControl: true,
+      },
+    },
+  },
+  link: {
+    slots: {
+      default: {
+        initialValue: 'Link',
+      },
+    },
+    props: {
+      link: {
+        initialValue: true,
+        lockControl: true,
+      },
+    },
+  },
+  loading: {
+    slots: {
+      default: {
+        initialValue: 'Loading',
+      },
+    },
+    props: {
+      loading: {
+        initialValue: true,
+        lockControl: true,
+      },
+    },
+  },
+};
diff --git a/packages/combinator/src/variants/variants_checkbox.js b/packages/combinator/src/variants/variants_checkbox.js
new file mode 100644
index 0000000000..065894a46e
--- /dev/null
+++ b/packages/combinator/src/variants/variants_checkbox.js
@@ -0,0 +1,9 @@
+export default {
+  default: {
+    props: {
+      label: {
+        initialValue: 'Checkbox label',
+      },
+    },
+  },
+};
diff --git a/packages/combinator/src/variants/variants_chip.js b/packages/combinator/src/variants/variants_chip.js
new file mode 100644
index 0000000000..5f1e4e1089
--- /dev/null
+++ b/packages/combinator/src/variants/variants_chip.js
@@ -0,0 +1,9 @@
+export default {
+  default: {
+    slots: {
+      default: {
+        initialValue: 'Chip',
+      },
+    },
+  },
+};
diff --git a/packages/combinator/src/variants/variants_input.js b/packages/combinator/src/variants/variants_input.js
new file mode 100644
index 0000000000..29b7daaeb5
--- /dev/null
+++ b/packages/combinator/src/variants/variants_input.js
@@ -0,0 +1,14 @@
+export default {
+  default: {
+    props: {
+      label: {
+        initialValue: 'Label',
+      },
+    },
+    attributes: {
+      placeholder: {
+        initialValue: 'Placeholder',
+      },
+    },
+  },
+};
diff --git a/packages/combinator/src/variants/variants_link.js b/packages/combinator/src/variants/variants_link.js
new file mode 100644
index 0000000000..1d17bc2017
--- /dev/null
+++ b/packages/combinator/src/variants/variants_link.js
@@ -0,0 +1,14 @@
+export default {
+  default: {
+    slots: {
+      default: {
+        initialValue: 'Base link',
+      },
+    },
+    props: {
+      href: {
+        initialValue: '#',
+      },
+    },
+  },
+};
diff --git a/packages/combinator/src/variants/variants_notice.js b/packages/combinator/src/variants/variants_notice.js
new file mode 100644
index 0000000000..1c1401d85b
--- /dev/null
+++ b/packages/combinator/src/variants/variants_notice.js
@@ -0,0 +1,19 @@
+export default {
+  default: {
+    slots: {
+      default: {
+        initialValue: 'Message body with <a href="#" class="d-link">a link</a>.',
+      },
+    },
+    props: {
+      title: {
+        initialValue: 'Base title (optional)',
+      },
+      closeButtonProps: {
+        initialValue: {
+          ariaLabel: 'close',
+        },
+      },
+    },
+  },
+};
diff --git a/packages/combinator/src/variants/variants_radio.js b/packages/combinator/src/variants/variants_radio.js
new file mode 100644
index 0000000000..77db235958
--- /dev/null
+++ b/packages/combinator/src/variants/variants_radio.js
@@ -0,0 +1,9 @@
+export default {
+  default: {
+    props: {
+      label: {
+        initialValue: 'Radio label',
+      },
+    },
+  },
+};
diff --git a/packages/combinator/src/variants/variants_select_menu.js b/packages/combinator/src/variants/variants_select_menu.js
new file mode 100644
index 0000000000..c5f24969f7
--- /dev/null
+++ b/packages/combinator/src/variants/variants_select_menu.js
@@ -0,0 +1,21 @@
+export default {
+  default: {
+    props: {
+      label: {
+        initialValue: 'Label',
+      },
+      options: {
+        initialValue: [
+          { value: 1, label: 'Option 1' },
+          { value: 2, label: 'Option 2' },
+          { value: 3, label: 'Option 3' },
+        ],
+      },
+    },
+    attributes: {
+      value: {
+        initialValue: '1',
+      },
+    },
+  },
+};
diff --git a/packages/combinator/src/variants/variants_toast.js b/packages/combinator/src/variants/variants_toast.js
new file mode 100644
index 0000000000..5e172aca39
--- /dev/null
+++ b/packages/combinator/src/variants/variants_toast.js
@@ -0,0 +1,22 @@
+export default {
+  default: {
+    slots: {
+      default: {
+        initialValue: 'Message body with <a href="#" class="d-link">a link</a>.',
+      },
+    },
+    props: {
+      title: {
+        initialValue: 'Base title (optional)',
+      },
+      closeButtonProps: {
+        initialValue: {
+          ariaLabel: 'close',
+        },
+      },
+      show: {
+        initialValue: true,
+      },
+    },
+  },
+};
diff --git a/packages/combinator/src/variants/variants_toggle.js b/packages/combinator/src/variants/variants_toggle.js
new file mode 100644
index 0000000000..4de11dbdf1
--- /dev/null
+++ b/packages/combinator/src/variants/variants_toggle.js
@@ -0,0 +1,9 @@
+export default {
+  default: {
+    slots: {
+      default: {
+        initialValue: 'Label',
+      },
+    },
+  },
+};
diff --git a/packages/combinator/vue.config.js b/packages/combinator/vue.config.js
new file mode 100644
index 0000000000..5ad1cb1897
--- /dev/null
+++ b/packages/combinator/vue.config.js
@@ -0,0 +1,18 @@
+const path = require('path');
+
+module.exports = {
+  publicPath: './',
+  lintOnSave: false,
+  css: {
+    extract: false,
+  },
+  configureWebpack: {
+    resolve: {
+      alias: {
+        vue$: 'vue/dist/vue.esm-browser.js',
+        '@': path.resolve(__dirname, '.'),
+        'dialtone-icons': path.resolve(__dirname, 'node_modules/@dialpad/dialtone/lib/dist/vue/icons'),
+      },
+    },
+  },
+};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a3716d0053..58105f6e7a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -106,6 +106,9 @@ importers:
       regex-combined-emojis:
         specifier: 1.6.0
         version: 1.6.0
+      stylelint:
+        specifier: 15.11.0
+        version: 15.11.0(typescript@5.4.2)
       tippy.js:
         specifier: 6.3.7
         version: 6.3.7
@@ -125,15 +128,6 @@ importers:
       '@dialpad/semantic-release-changelog-json':
         specifier: ^1.0.0
         version: 1.0.0(semantic-release@21.1.2(typescript@5.4.2))
-      '@faker-js/faker':
-        specifier: 8.4.1
-        version: 8.4.1
-      '@percy/cli':
-        specifier: 1.29.3
-        version: 1.29.3(typescript@5.4.2)
-      '@percy/storybook':
-        specifier: 6.0.2
-        version: 6.0.2(typescript@5.4.2)
       '@semantic-release/changelog':
         specifier: ^6.0.3
         version: 6.0.3(semantic-release@21.1.2(typescript@5.4.2))
@@ -143,81 +137,24 @@ importers:
       '@semantic-release/git':
         specifier: ^10.0.1
         version: 10.0.1(semantic-release@21.1.2(typescript@5.4.2))
-      '@storybook/addon-a11y':
-        specifier: 7.6.20
-        version: 7.6.20
-      '@storybook/addon-actions':
-        specifier: 7.6.20
-        version: 7.6.20
-      '@storybook/addon-docs':
-        specifier: 7.6.20
-        version: 7.6.20(@types/react@18.2.37)(encoding@0.1.13)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)
-      '@storybook/addon-essentials':
-        specifier: 7.6.20
-        version: 7.6.20(@types/react@18.2.37)(encoding@0.1.13)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)
-      '@storybook/addon-links':
-        specifier: 7.6.20
-        version: 7.6.20(react@16.14.0)
-      '@storybook/addon-mdx-gfm':
-        specifier: 7.6.20
-        version: 7.6.20
-      '@storybook/addon-viewport':
-        specifier: 7.6.20
-        version: 7.6.20
-      '@storybook/blocks':
-        specifier: 7.6.20
-        version: 7.6.20(@types/react@18.2.37)(encoding@0.1.13)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)
-      '@storybook/manager-api':
-        specifier: 7.6.20
-        version: 7.6.20(react-dom@16.14.0(react@16.14.0))(react@16.14.0)
-      '@storybook/test-runner':
-        specifier: ^0.16.0
-        version: 0.16.0(@types/node@18.18.9)(encoding@0.1.13)
-      '@storybook/testing-library':
-        specifier: ^0.2.2
-        version: 0.2.2
-      '@storybook/theming':
-        specifier: 7.6.20
-        version: 7.6.20(react-dom@16.14.0(react@16.14.0))(react@16.14.0)
-      '@vitejs/plugin-vue':
-        specifier: ^5.0.3
-        version: 5.0.4(vite@5.4.2(@types/node@18.18.9)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@3.4.15(typescript@5.4.2))
-      '@vitejs/plugin-vue2':
-        specifier: ^2.3.1
-        version: 2.3.1(vite@5.4.2(@types/node@18.18.9)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@3.4.15(typescript@5.4.2))
-      '@vue/tsconfig':
-        specifier: ^0.4.0
-        version: 0.4.0
-      axe-core:
-        specifier: ^4.7.2
-        version: 4.8.2
-      axe-playwright:
-        specifier: ^1.2.3
-        version: 1.2.3(playwright@1.42.1)
-      c8:
-        specifier: ^8.0.0
-        version: 8.0.1
       concurrently:
         specifier: ^8.2.2
         version: 8.2.2
-      del:
-        specifier: ^6.1.1
-        version: 6.1.1
       eslint:
         specifier: ^8.55.0
         version: 8.56.0
       eslint-config-semistandard:
         specifier: ^17.0.0
-        version: 17.0.0(eslint-config-standard@17.1.0(eslint-plugin-import@2.29.0(eslint@8.56.0))(eslint-plugin-n@15.7.0(eslint@8.56.0))(eslint-plugin-promise@6.1.1(eslint@8.56.0))(eslint@8.56.0))(eslint-plugin-import@2.29.0(eslint@8.56.0))(eslint-plugin-n@15.7.0(eslint@8.56.0))(eslint-plugin-promise@6.1.1(eslint@8.56.0))(eslint@8.56.0)
+        version: 17.0.0(eslint-config-standard@17.1.0(eslint-plugin-import@2.29.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0))(eslint-plugin-n@15.7.0(eslint@8.56.0))(eslint-plugin-promise@6.1.1(eslint@8.56.0))(eslint@8.56.0))(eslint-plugin-import@2.29.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0))(eslint-plugin-n@15.7.0(eslint@8.56.0))(eslint-plugin-promise@6.1.1(eslint@8.56.0))(eslint@8.56.0)
       eslint-config-standard:
         specifier: ^17.1.0
-        version: 17.1.0(eslint-plugin-import@2.29.0(eslint@8.56.0))(eslint-plugin-n@15.7.0(eslint@8.56.0))(eslint-plugin-promise@6.1.1(eslint@8.56.0))(eslint@8.56.0)
+        version: 17.1.0(eslint-plugin-import@2.29.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0))(eslint-plugin-n@15.7.0(eslint@8.56.0))(eslint-plugin-promise@6.1.1(eslint@8.56.0))(eslint@8.56.0)
       eslint-plugin-import:
         specifier: ^2.27.5
-        version: 2.29.0(eslint@8.56.0)
+        version: 2.29.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0)
       eslint-plugin-jest:
         specifier: ^25.2.2
-        version: 25.7.0(eslint@8.56.0)(jest@29.7.0(@types/node@18.18.9))(typescript@5.4.2)
+        version: 25.7.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0)(typescript@5.4.2)
       eslint-plugin-node:
         specifier: ^11.1.0
         version: 11.1.0(eslint@8.56.0)
@@ -239,63 +176,33 @@ importers:
       eslint-plugin-vuejs-accessibility:
         specifier: ^2.1.0
         version: 2.2.0(eslint@8.56.0)
-      glob:
-        specifier: ^10.3.10
-        version: 10.4.5
       gulp:
         specifier: ^4.0.2
         version: 4.0.2
-      gulp-rename:
-        specifier: ^2.0.0
-        version: 2.0.0
-      gulp-replace:
-        specifier: ^1.1.4
-        version: 1.1.4
-      gulp-svgmin:
-        specifier: ^4.1.0
-        version: 4.1.0
       http-server:
         specifier: ^14.1.1
         version: 14.1.1
       husky:
         specifier: ^8.0.3
         version: 8.0.3
-      jsdom:
-        specifier: ^24.0.0
-        version: 24.0.0
       lesshint:
         specifier: ^6.3.7
         version: 6.3.7
       lint-staged:
         specifier: ^15.2.0
         version: 15.2.0
-      macos-release:
-        specifier: ^3.2.0
-        version: 3.2.0
       markdownlint:
         specifier: ^0.32.1
         version: 0.32.1
       markdownlint-cli:
         specifier: ^0.35.0
         version: 0.35.0
-      npm-run-all:
-        specifier: ^4.1.5
-        version: 4.1.5
-      null-loader:
-        specifier: ^4.0.1
-        version: 4.0.1(webpack@5.89.0(@swc/core@1.3.96))
       nx:
-        specifier: 19.8.0
-        version: 19.8.0(@swc/core@1.3.96)
+        specifier: ^17.2.1
+        version: 17.2.1(@swc/core@1.3.96)
       playwright:
         specifier: ^1.42.1
         version: 1.42.1
-      react:
-        specifier: ^16.13.1
-        version: 16.14.0
-      react-dom:
-        specifier: ^16.13.1
-        version: 16.14.0(react@16.14.0)
       semantic-release:
         specifier: ^21.0.6
         version: 21.1.2(typescript@5.4.2)
@@ -305,21 +212,6 @@ importers:
       semantic-release-plus:
         specifier: ^20.0.0
         version: 20.0.0(encoding@0.1.13)(semantic-release@21.1.2(typescript@5.4.2))
-      source-map-support:
-        specifier: ^0.5.21
-        version: 0.5.21
-      storybook:
-        specifier: 7.6.20
-        version: 7.6.20(encoding@0.1.13)
-      storybook-dark-mode:
-        specifier: ^3.0.3
-        version: 3.0.3(@types/react@18.2.37)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)
-      string-hash:
-        specifier: ^1.1.3
-        version: 1.1.3
-      stylelint:
-        specifier: ^15.11.0
-        version: 15.11.0(typescript@5.4.2)
       stylelint-config-rational-order:
         specifier: ^0.1.2
         version: 0.1.2
@@ -335,56 +227,39 @@ importers:
       stylelint-no-px:
         specifier: ^1.0.1
         version: 1.0.1(stylelint@15.11.0(typescript@5.4.2))
-      tinycolor2:
-        specifier: ^1.6.0
-        version: 1.6.0
-      typedoc:
-        specifier: ^0.25.2
-        version: 0.25.3(typescript@5.4.2)
-      typedoc-plugin-markdown:
-        specifier: ^3.16.0
-        version: 3.17.1(typedoc@0.25.3(typescript@5.4.2))
-      typescript:
-        specifier: ^5.2
-        version: 5.4.2
       vite:
         specifier: ^5.4.2
         version: 5.4.2(@types/node@18.18.9)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
-      vite-bundle-visualizer:
-        specifier: ^1.0.1
-        version: 1.0.1(rollup@4.21.1)
-      vite-plugin-dts:
-        specifier: ^4.0.3
-        version: 4.0.3(@types/node@18.18.9)(rollup@4.21.1)(typescript@5.4.2)(vite@5.4.2(@types/node@18.18.9)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))
       vitest:
         specifier: ^1.0.4
         version: 1.0.4(@types/node@18.18.9)(jsdom@24.0.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
       vue-docgen-api:
         specifier: ^4.75.0
         version: 4.75.0(vue@3.4.15(typescript@5.4.2))
-      vue-template-compiler:
-        specifier: ^2.7.16
-        version: 2.7.16(vue@3.4.15(typescript@5.4.2))
       wait-on:
         specifier: ^7.2.0
         version: 7.2.0
-      yo:
-        specifier: ^5.0.0
-        version: 5.0.0(@yeoman/types@1.1.2(@types/inquirer@9.0.7)(mem-fs@4.0.0))(mem-fs@4.0.0)
 
   apps/dialtone-documentation:
-    devDependencies:
+    dependencies:
+      '@dialpad/dialtone':
+        specifier: workspace:*
+        version: link:../..
       '@dialpad/dialtone-css':
         specifier: workspace:*
         version: link:../../packages/dialtone-css
       '@dialpad/dialtone-icons':
         specifier: workspace:*
         version: link:../../packages/dialtone-icons
+    devDependencies:
+      '@dialpad/dialtone-combinator':
+        specifier: ^0.3.1
+        version: 0.3.1
       '@dialpad/dialtone-tokens':
         specifier: workspace:*
         version: link:../../packages/dialtone-tokens
       '@dialpad/dialtone-vue':
-        specifier: workspace:^3
+        specifier: workspace:*
         version: link:../../packages/dialtone-vue3
       '@dialpad/postcss-responsive-variations':
         specifier: ^1.1.5
@@ -400,7 +275,7 @@ importers:
         version: 1.2.4
       '@vuepress/bundler-vite':
         specifier: 2.0.0-beta.60
-        version: 2.0.0-beta.60(@types/node@20.16.5)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)(typescript@5.4.2)
+        version: 2.0.0-beta.60(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)(typescript@5.4.2)
       '@vuepress/client':
         specifier: 2.0.0-beta.60
         version: 2.0.0-beta.60(typescript@5.4.2)
@@ -440,6 +315,9 @@ importers:
       markdown-it-anchor:
         specifier: ^8.6.7
         version: 8.6.7(@types/markdown-it@12.2.3)(markdown-it@13.0.2)
+      npm-run-all:
+        specifier: ^4.1.5
+        version: 4.1.5
       prettier:
         specifier: 3.3.2
         version: 3.3.2
@@ -457,19 +335,118 @@ importers:
         version: 4.2.5(vue@3.4.15(typescript@5.4.2))
       vuepress:
         specifier: 2.0.0-beta.60
-        version: 2.0.0-beta.60(@types/node@20.16.5)(@vuepress/client@2.0.0-beta.60(typescript@5.4.2))(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)(typescript@5.4.2)(vue@3.4.15(typescript@5.4.2))
+        version: 2.0.0-beta.60(@types/node@20.9.0)(@vuepress/client@2.0.0-beta.60(typescript@5.4.2))(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)(typescript@5.4.2)(vue@3.4.15(typescript@5.4.2))
       vuepress-plugin-seo2:
         specifier: 2.0.0-beta.124
         version: 2.0.0-beta.124(typescript@5.4.2)
       vuepress-plugin-sitemap2:
         specifier: 2.0.0-beta.174
-        version: 2.0.0-beta.174(vuepress-vite@2.0.0-beta.60(@types/node@20.16.5)(@vuepress/client@2.0.0-beta.60(typescript@5.4.2))(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)(typescript@5.4.2)(vue@3.4.15(typescript@5.4.2)))(vuepress@2.0.0-beta.60(@types/node@20.16.5)(@vuepress/client@2.0.0-beta.60(typescript@5.4.2))(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)(typescript@5.4.2)(vue@3.4.15(typescript@5.4.2)))
+        version: 2.0.0-beta.174(vuepress-vite@2.0.0-beta.60(@types/node@20.9.0)(@vuepress/client@2.0.0-beta.60(typescript@5.4.2))(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)(typescript@5.4.2)(vue@3.4.15(typescript@5.4.2)))(vuepress@2.0.0-beta.60(@types/node@20.9.0)(@vuepress/client@2.0.0-beta.60(typescript@5.4.2))(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)(typescript@5.4.2)(vue@3.4.15(typescript@5.4.2)))
 
   generator-dialtone:
     dependencies:
       yeoman-generator:
         specifier: ^5.7.0
-        version: 5.10.0(encoding@0.1.13)(mem-fs@4.0.0)
+        version: 5.10.0(encoding@0.1.13)
+
+  packages/combinator:
+    devDependencies:
+      '@dialpad/dialtone':
+        specifier: 6.35.0
+        version: 6.35.0(react-dom@16.14.0(react@16.14.0))(react@16.14.0)
+      '@dialpad/dialtone-vue':
+        specifier: 3.13.0
+        version: 3.13.0(@dialpad/dialtone@6.35.0(react-dom@16.14.0(react@16.14.0))(react@16.14.0))(vue@3.4.15(typescript@5.4.2))
+      '@types/node':
+        specifier: ^16.11.41
+        version: 16.18.83
+      '@typescript-eslint/eslint-plugin':
+        specifier: ^5.30.0
+        version: 5.62.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0)(typescript@5.4.2)
+      '@typescript-eslint/parser':
+        specifier: ^7.0.1
+        version: 7.0.1(eslint@8.56.0)(typescript@5.4.2)
+      '@vitejs/plugin-vue':
+        specifier: ^2.3.3
+        version: 2.3.4(vite@5.4.2(@types/node@16.18.83)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@3.4.15(typescript@5.4.2))
+      '@vitejs/plugin-vue-jsx':
+        specifier: ^1.3.10
+        version: 1.3.10
+      '@vue/cli-plugin-unit-mocha':
+        specifier: ^5.0.8
+        version: 5.0.8(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(less-loader@11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96)))(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))(encoding@0.1.13)(webpack@5.89.0(@swc/core@1.3.96))
+      '@vue/cli-service':
+        specifier: ^5.0.6
+        version: 5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(less-loader@11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96)))(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3)
+      '@vue/test-utils':
+        specifier: ^2.0.2
+        version: 2.4.2(@vue/server-renderer@3.4.15(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))
+      '@vue/tsconfig':
+        specifier: ^0.1.3
+        version: 0.1.3(@types/node@16.18.83)
+      chai:
+        specifier: ^4.3.6
+        version: 4.3.10
+      change-case:
+        specifier: ^4.1.2
+        version: 4.1.2
+      eslint:
+        specifier: ^8.18.0
+        version: 8.56.0
+      eslint-config-semistandard:
+        specifier: ^17.0.0
+        version: 17.0.0(eslint-config-standard@17.1.0(eslint-plugin-import@2.29.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0))(eslint-plugin-n@15.7.0(eslint@8.56.0))(eslint-plugin-promise@6.1.1(eslint@8.56.0))(eslint@8.56.0))(eslint-plugin-import@2.29.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0))(eslint-plugin-n@15.7.0(eslint@8.56.0))(eslint-plugin-promise@6.1.1(eslint@8.56.0))(eslint@8.56.0)
+      eslint-config-standard:
+        specifier: ^17.1.0
+        version: 17.1.0(eslint-plugin-import@2.29.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0))(eslint-plugin-n@15.7.0(eslint@8.56.0))(eslint-plugin-promise@6.1.1(eslint@8.56.0))(eslint@8.56.0)
+      eslint-plugin-import:
+        specifier: ^2.27.5
+        version: 2.29.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0)
+      eslint-plugin-jsdoc:
+        specifier: ^39.3.6
+        version: 39.9.1(eslint@8.56.0)
+      eslint-plugin-mocha:
+        specifier: ^10.1.0
+        version: 10.5.0(eslint@8.56.0)
+      eslint-plugin-node:
+        specifier: ^11.1.0
+        version: 11.1.0(eslint@8.56.0)
+      eslint-plugin-promise:
+        specifier: ^6.1.1
+        version: 6.1.1(eslint@8.56.0)
+      eslint-plugin-vue:
+        specifier: ^9.15.1
+        version: 9.18.1(eslint@8.56.0)
+      eslint-plugin-vuejs-accessibility:
+        specifier: ^2.1.0
+        version: 2.2.0(eslint@8.56.0)
+      js-beautify:
+        specifier: ^1.14.4
+        version: 1.14.11
+      json5-with-undefined:
+        specifier: ^2.1.301
+        version: 2.1.301
+      just-clone:
+        specifier: ^6.1.1
+        version: 6.2.0
+      less:
+        specifier: ^4.1.3
+        version: 4.2.0
+      less-loader:
+        specifier: ^11.0.0
+        version: 11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96))
+      npm-run-all:
+        specifier: ^4.1.5
+        version: 4.1.5
+      serve:
+        specifier: ^13.0.4
+        version: 13.0.4
+      vue:
+        specifier: ^3.2.37
+        version: 3.4.15(typescript@5.4.2)
+      vue-tsc:
+        specifier: ^0.38.1
+        version: 0.38.9(typescript@5.4.2)
 
   packages/dialtone-css:
     dependencies:
@@ -491,19 +468,19 @@ importers:
         version: link:../dialtone-tokens
       '@vue/cli-plugin-eslint':
         specifier: ~5.0.8
-        version: 5.0.8(@swc/core@1.3.96)(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.4.15)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))(encoding@0.1.13)(eslint@8.56.0)
+        version: 5.0.8(@swc/core@1.3.96)(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))(encoding@0.1.13)(eslint@8.56.0)
       '@vue/cli-service':
         specifier: ~5.0.8
-        version: 5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.4.15)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3)
+        version: 5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3)
       autoprefixer:
         specifier: ^10.4.14
-        version: 10.4.16(postcss@8.4.39)
+        version: 10.4.16(postcss@8.4.45)
       child_process:
         specifier: ^1.0.2
         version: 1.0.2
       cssnano:
         specifier: ^6.0.1
-        version: 6.0.1(postcss@8.4.39)
+        version: 6.0.1(postcss@8.4.45)
       del:
         specifier: ^6.1.1
         version: 6.1.1
@@ -518,7 +495,7 @@ importers:
         version: 5.0.0
       gulp-postcss:
         specifier: ^9.0.1
-        version: 9.0.1(postcss@8.4.39)
+        version: 9.0.1(postcss@8.4.45)
       gulp-rename:
         specifier: ^2.0.0
         version: 2.0.0
@@ -548,10 +525,10 @@ importers:
         version: 0.12.7
       postcss-less:
         specifier: ^6.0.0
-        version: 6.0.0(postcss@8.4.39)
+        version: 6.0.0(postcss@8.4.45)
       postcss-sorting:
         specifier: ^8.0.2
-        version: 8.0.2(postcss@8.4.39)
+        version: 8.0.2(postcss@8.4.45)
       precss:
         specifier: ^4.0.0
         version: 4.0.0
@@ -572,27 +549,84 @@ importers:
 
   packages/dialtone-icons:
     devDependencies:
+      del:
+        specifier: ^6.1.1
+        version: 6.1.1
+      glob:
+        specifier: ^10.3.10
+        version: 10.4.5
+      gulp:
+        specifier: ^4.0.2
+        version: 4.0.2
       gulp-json-format:
         specifier: ^2.0.0
         version: 2.0.0
+      gulp-rename:
+        specifier: ^2.0.0
+        version: 2.0.0
+      gulp-replace:
+        specifier: ^1.1.3
+        version: 1.1.4
+      gulp-svgmin:
+        specifier: ^4.1.0
+        version: 4.1.0
       lodash:
         specifier: ^4.17.21
         version: 4.17.21
 
   packages/dialtone-icons/vue2:
     devDependencies:
+      '@vitejs/plugin-vue2':
+        specifier: ^2.3.1
+        version: 2.3.1(vite@5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@2.7.16)
+      '@vue/tsconfig':
+        specifier: ^0.4.0
+        version: 0.4.0
+      glob:
+        specifier: ^10.3.10
+        version: 10.4.5
+      npm-run-all:
+        specifier: ^4.1.5
+        version: 4.1.5
+      vite:
+        specifier: ^5.4.2
+        version: 5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
       vue:
         specifier: ^2.7.16
         version: 2.7.16
+      vue-template-compiler:
+        specifier: ^2.7.16
+        version: 2.7.16(vue@2.7.16)
+      vue-tsc:
+        specifier: ^1.8.25
+        version: 1.8.25(typescript@5.4.2)(vue@2.7.16)
 
   packages/dialtone-icons/vue3:
     devDependencies:
+      '@vitejs/plugin-vue':
+        specifier: ^5.0.3
+        version: 5.0.4(vite@5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@3.4.15(typescript@5.4.2))
       '@vue/compiler-sfc':
         specifier: ^3.4.15
         version: 3.4.15
+      '@vue/tsconfig':
+        specifier: ^0.4.0
+        version: 0.4.0
+      glob:
+        specifier: ^10.3.10
+        version: 10.4.5
+      npm-run-all:
+        specifier: ^4.1.5
+        version: 4.1.5
+      vite:
+        specifier: ^5.4.2
+        version: 5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
       vue:
         specifier: ^3.4.15
         version: 3.4.15(typescript@5.4.2)
+      vue-tsc:
+        specifier: ^1.8.25
+        version: 1.8.25(typescript@5.4.2)(vue@3.4.15(typescript@5.4.2))
 
   packages/dialtone-tokens:
     devDependencies:
@@ -626,9 +660,18 @@ importers:
       style-dictionary:
         specifier: ^4.1.0
         version: 4.1.0
+      tinycolor2:
+        specifier: ^1.6.0
+        version: 1.6.0
       tsx:
         specifier: ^4.19.0
         version: 4.19.0
+      typescript:
+        specifier: ^5.1.6
+        version: 5.4.2
+      vite-plugin-dts:
+        specifier: ^4.0.3
+        version: 4.0.3(@types/node@20.9.0)(rollup@4.21.1)(typescript@5.4.2)(vite@5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))
 
   packages/dialtone-vue2:
     dependencies:
@@ -729,18 +772,144 @@ importers:
       '@dialpad/generator-dialtone':
         specifier: workspace:*
         version: link:../../generator-dialtone
+      '@faker-js/faker':
+        specifier: 8.4.1
+        version: 8.4.1
+      '@percy/cli':
+        specifier: 1.28.2
+        version: 1.28.2(typescript@5.4.2)
+      '@percy/storybook':
+        specifier: 5.0.3
+        version: 5.0.3(typescript@5.4.2)
+      '@storybook/addon-a11y':
+        specifier: 7.6.20
+        version: 7.6.20
+      '@storybook/addon-actions':
+        specifier: 7.6.20
+        version: 7.6.20
+      '@storybook/addon-docs':
+        specifier: 7.6.20
+        version: 7.6.20(@types/react@18.2.37)(encoding@0.1.13)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)
+      '@storybook/addon-essentials':
+        specifier: 7.6.20
+        version: 7.6.20(@types/react@18.2.37)(encoding@0.1.13)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)
+      '@storybook/addon-links':
+        specifier: 7.6.20
+        version: 7.6.20(react@16.14.0)
+      '@storybook/addon-mdx-gfm':
+        specifier: 7.6.20
+        version: 7.6.20
+      '@storybook/addon-viewport':
+        specifier: 7.6.20
+        version: 7.6.20
+      '@storybook/blocks':
+        specifier: 7.6.20
+        version: 7.6.20(@types/react@18.2.37)(encoding@0.1.13)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)
+      '@storybook/manager-api':
+        specifier: 7.6.20
+        version: 7.6.20(react-dom@16.14.0(react@16.14.0))(react@16.14.0)
+      '@storybook/test-runner':
+        specifier: ^0.16.0
+        version: 0.16.0(@types/node@20.9.0)(encoding@0.1.13)
+      '@storybook/testing-library':
+        specifier: ^0.2.2
+        version: 0.2.2
+      '@storybook/theming':
+        specifier: 7.6.20
+        version: 7.6.20(react-dom@16.14.0(react@16.14.0))(react@16.14.0)
       '@storybook/vue':
         specifier: 7.6.20
         version: 7.6.20(@babel/core@7.23.2)(css-loader@6.8.1(webpack@5.89.0(@swc/core@1.3.96)(esbuild@0.18.20)))(encoding@0.1.13)(vue@2.7.16)
       '@storybook/vue-vite':
         specifier: 7.6.20
-        version: 7.6.20(@babel/core@7.23.2)(css-loader@6.8.1(webpack@5.89.0(@swc/core@1.3.96)(esbuild@0.18.20)))(encoding@0.1.13)(typescript@5.4.2)(vite@5.4.2(@types/node@20.16.5)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@2.7.16)
+        version: 7.6.20(@babel/core@7.23.2)(css-loader@6.8.1(webpack@5.89.0(@swc/core@1.3.96)(esbuild@0.18.20)))(encoding@0.1.13)(typescript@5.4.2)(vite@5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@2.7.16)
+      '@vitejs/plugin-vue2':
+        specifier: ^2.3.1
+        version: 2.3.1(vite@5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@2.7.16)
       '@vue/test-utils':
         specifier: '1.3'
         version: 1.3.6(vue-template-compiler@2.7.16(vue@2.7.16))(vue@2.7.16)
+      '@vue/tsconfig':
+        specifier: ^0.4.0
+        version: 0.4.0
+      axe-core:
+        specifier: ^4.7.2
+        version: 4.8.2
+      axe-playwright:
+        specifier: ^1.2.3
+        version: 1.2.3(playwright@1.42.1)
+      c8:
+        specifier: ^8.0.0
+        version: 8.0.1
+      chai:
+        specifier: ^4.3.7
+        version: 4.3.10
+      glob:
+        specifier: ^10.3.10
+        version: 10.4.5
+      jsdom:
+        specifier: ^24.0.0
+        version: 24.0.0
+      less:
+        specifier: ^4.2.0
+        version: 4.2.0
+      macos-release:
+        specifier: ^3.2.0
+        version: 3.2.0
+      npm-run-all:
+        specifier: ^4.1.5
+        version: 4.1.5
+      null-loader:
+        specifier: ^4.0.1
+        version: 4.0.1(webpack@5.89.0(@swc/core@1.3.96)(esbuild@0.18.20))
+      react:
+        specifier: ^16.13.1
+        version: 16.14.0
+      react-dom:
+        specifier: ^16.13.1
+        version: 16.14.0(react@16.14.0)
+      sinon:
+        specifier: ^15.2.0
+        version: 15.2.0
+      source-map-support:
+        specifier: ^0.5.21
+        version: 0.5.21
+      storybook:
+        specifier: 7.6.20
+        version: 7.6.20(encoding@0.1.13)
+      storybook-dark-mode:
+        specifier: ^3.0.3
+        version: 3.0.3(@types/react@18.2.37)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)
+      string-hash:
+        specifier: ^1.1.3
+        version: 1.1.3
+      typedoc:
+        specifier: ^0.25.2
+        version: 0.25.3(typescript@5.4.2)
+      typedoc-plugin-markdown:
+        specifier: ^3.16.0
+        version: 3.17.1(typedoc@0.25.3(typescript@5.4.2))
+      vite:
+        specifier: ^5.4.2
+        version: 5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
+      vite-bundle-visualizer:
+        specifier: ^1.0.1
+        version: 1.0.1(rollup@4.21.1)
       vue:
         specifier: ^2.7.15
         version: 2.7.16
+      vue-template-compiler:
+        specifier: ^2.7.15
+        version: 2.7.16(vue@2.7.16)
+      vue-tsc:
+        specifier: ^1.8.25
+        version: 1.8.25(typescript@5.4.2)(vue@2.7.16)
+      yo:
+        specifier: ^5.0.0
+        version: 5.0.0(@yeoman/types@1.1.2(@types/inquirer@9.0.7)(mem-fs@4.0.0))(mem-fs@4.0.0)
+      yorkie:
+        specifier: ^2.0.0
+        version: 2.0.0
 
   packages/dialtone-vue3:
     dependencies:
@@ -838,18 +1007,141 @@ importers:
       '@dialpad/generator-dialtone':
         specifier: workspace:*
         version: link:../../generator-dialtone
+      '@faker-js/faker':
+        specifier: 8.4.1
+        version: 8.4.1
+      '@percy/cli':
+        specifier: 1.28.2
+        version: 1.28.2(typescript@5.4.2)
+      '@percy/storybook':
+        specifier: 5.0.3
+        version: 5.0.3(typescript@5.4.2)
+      '@storybook/addon-a11y':
+        specifier: 7.6.20
+        version: 7.6.20
+      '@storybook/addon-actions':
+        specifier: 7.6.20
+        version: 7.6.20
+      '@storybook/addon-docs':
+        specifier: 7.6.20
+        version: 7.6.20(@types/react@18.2.37)(encoding@0.1.13)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)
+      '@storybook/addon-essentials':
+        specifier: 7.6.20
+        version: 7.6.20(@types/react@18.2.37)(encoding@0.1.13)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)
+      '@storybook/addon-links':
+        specifier: 7.6.20
+        version: 7.6.20(react@16.14.0)
+      '@storybook/addon-mdx-gfm':
+        specifier: 7.6.20
+        version: 7.6.20
+      '@storybook/addon-viewport':
+        specifier: 7.6.20
+        version: 7.6.20
+      '@storybook/blocks':
+        specifier: 7.6.20
+        version: 7.6.20(@types/react@18.2.37)(encoding@0.1.13)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)
+      '@storybook/manager-api':
+        specifier: 7.6.20
+        version: 7.6.20(react-dom@16.14.0(react@16.14.0))(react@16.14.0)
+      '@storybook/test-runner':
+        specifier: ^0.16.0
+        version: 0.16.0(@types/node@20.9.0)(encoding@0.1.13)
+      '@storybook/testing-library':
+        specifier: ^0.2.2
+        version: 0.2.2
+      '@storybook/theming':
+        specifier: 7.6.20
+        version: 7.6.20(react-dom@16.14.0(react@16.14.0))(react@16.14.0)
       '@storybook/vue3':
         specifier: 7.6.20
         version: 7.6.20(encoding@0.1.13)(vue@3.4.15(typescript@5.4.2))
       '@storybook/vue3-vite':
         specifier: 7.6.20
-        version: 7.6.20(encoding@0.1.13)(typescript@5.4.2)(vite@5.4.2(@types/node@20.16.5)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@3.4.15(typescript@5.4.2))
+        version: 7.6.20(encoding@0.1.13)(typescript@5.4.2)(vite@5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@3.4.15(typescript@5.4.2))
+      '@vitejs/plugin-vue':
+        specifier: ^4.5.0
+        version: 4.5.0(vite@5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@3.4.15(typescript@5.4.2))
       '@vue/test-utils':
         specifier: ^2.4.0
         version: 2.4.2(@vue/server-renderer@3.4.15(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))
+      '@vue/tsconfig':
+        specifier: ^0.4.0
+        version: 0.4.0
+      axe-core:
+        specifier: ^4.7.2
+        version: 4.8.2
+      axe-playwright:
+        specifier: ^1.2.3
+        version: 1.2.3(playwright@1.42.1)
+      c8:
+        specifier: ^8.0.0
+        version: 8.0.1
+      chai:
+        specifier: ^4.3.7
+        version: 4.3.10
+      glob:
+        specifier: ^10.3.10
+        version: 10.4.5
+      jsdom:
+        specifier: ^24.0.0
+        version: 24.0.0
+      less:
+        specifier: ^4.2.0
+        version: 4.2.0
+      macos-release:
+        specifier: ^3.2.0
+        version: 3.2.0
+      npm-run-all:
+        specifier: ^4.1.5
+        version: 4.1.5
+      null-loader:
+        specifier: ^4.0.1
+        version: 4.0.1(webpack@5.89.0(@swc/core@1.3.96))
+      react:
+        specifier: ^16.13.1
+        version: 16.14.0
+      react-dom:
+        specifier: ^16.13.1
+        version: 16.14.0(react@16.14.0)
+      sinon:
+        specifier: ^15.2.0
+        version: 15.2.0
+      source-map-support:
+        specifier: ^0.5.21
+        version: 0.5.21
+      storybook:
+        specifier: 7.6.20
+        version: 7.6.20(encoding@0.1.13)
+      storybook-dark-mode:
+        specifier: ^3.0.3
+        version: 3.0.3(@types/react@18.2.37)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)
+      string-hash:
+        specifier: ^1.1.3
+        version: 1.1.3
+      typedoc:
+        specifier: ^0.25.2
+        version: 0.25.3(typescript@5.4.2)
+      typedoc-plugin-markdown:
+        specifier: ^3.16.0
+        version: 3.17.1(typedoc@0.25.3(typescript@5.4.2))
+      vite:
+        specifier: ^5.4.2
+        version: 5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
+      vite-bundle-visualizer:
+        specifier: ^1.0.1
+        version: 1.0.1(rollup@4.21.1)
       vue:
         specifier: ^3.3.4
         version: 3.4.15(typescript@5.4.2)
+      vue-tsc:
+        specifier: ^1.8.25
+        version: 1.8.25(typescript@5.4.2)(vue@3.4.15(typescript@5.4.2))
+      yo:
+        specifier: ^5.0.0
+        version: 5.0.0(@yeoman/types@1.1.2(@types/inquirer@9.0.7)(mem-fs@4.0.0))(mem-fs@4.0.0)
+      yorkie:
+        specifier: ^2.0.0
+        version: 2.0.0
 
   packages/eslint-plugin-dialtone:
     dependencies:
@@ -860,16 +1152,18 @@ importers:
         specifier: ^1.2.0
         version: 1.2.0
     devDependencies:
+      eslint-plugin-eslint-plugin:
+        specifier: ^5.2.1
+        version: 5.2.1(eslint@8.56.0)
       mocha:
         specifier: ^10.0.0
         version: 10.2.0
 
   packages/stylelint-plugin-dialtone:
-    dependencies:
+    devDependencies:
       stylelint:
-        specifier: ^14.0.0 || ^15.0.0
+        specifier: 15.11.0
         version: 15.11.0(typescript@5.4.2)
-    devDependencies:
       stylelint-test-rule-node:
         specifier: ^0.2.1
         version: 0.2.1(stylelint@15.11.0(typescript@5.4.2))
@@ -958,6 +1252,10 @@ packages:
     resolution: {integrity: sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/code-frame@7.24.7':
+    resolution: {integrity: sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/compat-data@7.23.3':
     resolution: {integrity: sha512-BmR4bWbDIoFJmJ9z2cZ8Gmm2MXgEDgjdWgpKmKWUt54UGFJdlj31ECtbaDvCG/qVdG3AQ1SfpZEs01lUFbzLOQ==}
     engines: {node: '>=6.9.0'}
@@ -970,6 +1268,10 @@ packages:
     resolution: {integrity: sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/generator@7.25.6':
+    resolution: {integrity: sha512-VPC82gr1seXOpkjAAKoLhP50vx4vGNlF4msF64dSFq1P8RfB+QAuJWGHPXXPc8QyfVWwwB/TNNU4+ayZmHNbZw==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-annotate-as-pure@7.22.5':
     resolution: {integrity: sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==}
     engines: {node: '>=6.9.0'}
@@ -1019,6 +1321,10 @@ packages:
     resolution: {integrity: sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-module-imports@7.24.7':
+    resolution: {integrity: sha512-8AyH3C+74cgCVVXow/myrynrAGv+nTVg5vKu2nZph9x7RcRwzmh0VFallJuFTZ9mx6u4eSdXZfcOzSqTUm0HCA==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-module-transforms@7.23.3':
     resolution: {integrity: sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==}
     engines: {node: '>=6.9.0'}
@@ -1033,6 +1339,10 @@ packages:
     resolution: {integrity: sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-plugin-utils@7.24.8':
+    resolution: {integrity: sha512-FFWx5142D8h2Mgr/iPVGH5G7w6jDn4jUSpZTyDnQO0Yn7Ks2Kuz6Pci8H6MPCoUJegd/UZQ3tAvfLCxQSnWWwg==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-remap-async-to-generator@7.22.20':
     resolution: {integrity: sha512-pBGyV4uBqOns+0UvhsTO8qgl8hO89PmiDYv+/COyp1aeMcmfrfruz+/nCMFiYyFF/Knn0yfrC85ZzNFjembFTw==}
     engines: {node: '>=6.9.0'}
@@ -1061,10 +1371,18 @@ packages:
     resolution: {integrity: sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-string-parser@7.24.8':
+    resolution: {integrity: sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-validator-identifier@7.22.20':
     resolution: {integrity: sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-validator-identifier@7.24.7':
+    resolution: {integrity: sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-validator-option@7.22.15':
     resolution: {integrity: sha512-bMn7RmyFjY/mdECUbgn9eoSY4vqvacUnS9i9vGAGttgFWesO6B4CYWA7XlpbWgBt71iv/hfbPlynohStqnu5hA==}
     engines: {node: '>=6.9.0'}
@@ -1081,11 +1399,20 @@ packages:
     resolution: {integrity: sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/highlight@7.24.7':
+    resolution: {integrity: sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/parser@7.23.9':
     resolution: {integrity: sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==}
     engines: {node: '>=6.0.0'}
     hasBin: true
 
+  '@babel/parser@7.25.6':
+    resolution: {integrity: sha512-trGdfBdbD0l1ZPmcJ83eNxB9rbEax4ALFTF7fN386TMYbeCQbyme5cOEXQhbGXKebwGaB/J52w1mrklMcbgy6Q==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
   '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.23.3':
     resolution: {integrity: sha512-iRkKcCqb7iGnq9+3G6rZ+Ciz5VywC4XNRHe57lKM+jOeYAoR0lVqdeeDRfh0tQcTfw/+vBhHn926FmQhLtlFLQ==}
     engines: {node: '>=6.9.0'}
@@ -1175,6 +1502,12 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
+  '@babel/plugin-syntax-jsx@7.24.7':
+    resolution: {integrity: sha512-6ddciUPe/mpMnOKv/U+RSd2vvVy+Yw/JfBB0ZHYjEZt9NLHmCUylNYlsbqCCS1Bffjlb0fCwC9Vqz+sBz6PsiQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
   '@babel/plugin-syntax-logical-assignment-operators@7.10.4':
     resolution: {integrity: sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==}
     peerDependencies:
@@ -1561,6 +1894,10 @@ packages:
   '@babel/regjsgen@0.8.0':
     resolution: {integrity: sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==}
 
+  '@babel/runtime-corejs2@7.25.6':
+    resolution: {integrity: sha512-24uCmOJPrsnS7HtRamCibYabHRV0bscPJNFFcyKgj7FqUA0V5XcbZUmz9PVNDW4L+euMsZtCIetU1LxTmUaIlA==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/runtime@7.23.2':
     resolution: {integrity: sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==}
     engines: {node: '>=6.9.0'}
@@ -1569,14 +1906,26 @@ packages:
     resolution: {integrity: sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/template@7.25.0':
+    resolution: {integrity: sha512-aOOgh1/5XzKvg1jvVz7AVrx2piJ2XBi227DHmbY6y+bM9H2FlN+IfecYu4Xl0cNiiVejlsCri89LUsbj8vJD9Q==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/traverse@7.23.2':
     resolution: {integrity: sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/traverse@7.25.6':
+    resolution: {integrity: sha512-9Vrcx5ZW6UwK5tvqsj0nGpp/XzqthkT0dqIc9g1AdtygFToNtTF67XzYS//dm+SAK9cp3B9R4ZO/46p63SCjlQ==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/types@7.23.0':
     resolution: {integrity: sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/types@7.25.6':
+    resolution: {integrity: sha512-/l42B1qxpG6RdfYf343Uw1vmDjeNhneUXtzhojE7pDgfpEypmRhI6j1kr17XCVv4Cgl9HdAiQY2x0GwKm7rWCw==}
+    engines: {node: '>=6.9.0'}
+
   '@bcoe/v8-coverage@0.2.3':
     resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
 
@@ -1706,6 +2055,19 @@ packages:
     resolution: {integrity: sha512-qUT8qgaypYlGPXDO5HqYdq0Q670fqAxr5AaJUo3AOzBJ6IRTcG48kXo6Z9GRVgqrL21jd6MS+fx5nu1wKM0W0w==}
     engines: {node: '>=10'}
 
+  '@dialpad/dialtone-combinator@0.3.1':
+    resolution: {integrity: sha512-6Tnt72vgL5XirVA/0wahkVk2Ayx480xgTBSgZ4Rnk6HFzzFhPg4VNmEgt55vXlk/owxqZMVRXwNc8Po5t7WnoA==}
+
+  '@dialpad/dialtone-vue@3.13.0':
+    resolution: {integrity: sha512-GN71IQawYctjVYQxK4NYNu0w6X+ymC91+DJwbLZcZ51AgDEwP3koAJMUKoqfrwznaFkedHZ6ZyaxkDNKbuIQ4Q==}
+    engines: {node: '>= 16'}
+    peerDependencies:
+      '@dialpad/dialtone': '>=6.34'
+      vue: '>=3.2'
+
+  '@dialpad/dialtone@6.35.0':
+    resolution: {integrity: sha512-ie3fMxRaW2HTQwRXj1kzkoACH5w2FM4moHTw9SNNUuCsb0/XVPKv303pmbnlJG8ubbpLO8UUsmdqdn5FeXm/0w==}
+
   '@dialpad/postcss-responsive-variations@1.1.5':
     resolution: {integrity: sha512-vCeaoF+QKZOVPHYsenCRh/XSl1ppUmXS+XUZqRa2gXtQDe6je5qeAK2H7PIwZiNM9gMA7g6EyHs1PshCWDCl9w==}
     engines: {node: '>=12.0.0'}
@@ -1745,20 +2107,15 @@ packages:
       search-insights:
         optional: true
 
-  '@emnapi/core@1.2.0':
-    resolution: {integrity: sha512-E7Vgw78I93we4ZWdYCb4DGAwRROGkMIXk7/y87UmANR+J6qsWusmC3gLt0H+O0KOt5e6O38U8oJamgbudrES/w==}
-
-  '@emnapi/runtime@1.2.0':
-    resolution: {integrity: sha512-bV21/9LQmcQeCPEg3BDFtvwL6cwiTMksYNWQQ4KOxCZikEGalWtenoZ0wCiukJINlGCIi2KXx01g4FoH/LxpzQ==}
-
-  '@emnapi/wasi-threads@1.0.1':
-    resolution: {integrity: sha512-iIBu7mwkq4UQGeMEM8bLwNK962nXdhodeScX4slfQnRhEMMzvYivHhutCIk8uojvmASXXPC2WNEjwxFWk72Oqw==}
-
   '@emotion/use-insertion-effect-with-fallbacks@1.0.1':
     resolution: {integrity: sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==}
     peerDependencies:
       react: '>=16.8.0'
 
+  '@es-joy/jsdoccomment@0.36.1':
+    resolution: {integrity: sha512-922xqFsTpHs6D0BUiG4toiyPOMc8/jafnWKxz1KWgS4XzKPy2qXf1Pe6UFuNSCQqt6tOuhAWXBNuuyUhJmw9Vg==}
+    engines: {node: ^14 || ^16 || ^17 || ^18 || ^19}
+
   '@esbuild/aix-ppc64@0.21.5':
     resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==}
     engines: {node: '>=12'}
@@ -2639,6 +2996,10 @@ packages:
     resolution: {integrity: sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==}
     engines: {node: '>=6.0.0'}
 
+  '@jridgewell/gen-mapping@0.3.5':
+    resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==}
+    engines: {node: '>=6.0.0'}
+
   '@jridgewell/resolve-uri@3.1.1':
     resolution: {integrity: sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==}
     engines: {node: '>=6.0.0'}
@@ -2647,6 +3008,10 @@ packages:
     resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==}
     engines: {node: '>=6.0.0'}
 
+  '@jridgewell/set-array@1.2.1':
+    resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==}
+    engines: {node: '>=6.0.0'}
+
   '@jridgewell/source-map@0.3.5':
     resolution: {integrity: sha512-UTYAUj/wviwdsMfzoSJspJxbkH5o1snzwX0//0ENX1u/55kkZZkcTZP6u9bwKGkv+dkk9at4m1Cpt0uY80kcpQ==}
 
@@ -2656,6 +3021,9 @@ packages:
   '@jridgewell/trace-mapping@0.3.20':
     resolution: {integrity: sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==}
 
+  '@jridgewell/trace-mapping@0.3.25':
+    resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
+
   '@jsonjoy.com/base64@1.1.2':
     resolution: {integrity: sha512-q6XAnWQDIMA3+FTiOYajoYqySkO+JSat0ytXGSuRdq9uXE7o92gzuQwQM14xaCRlBLGq3v5miDGC4vkVTn54xA==}
     engines: {node: '>=10.0'}
@@ -2735,9 +3103,6 @@ packages:
     resolution: {integrity: sha512-bPHp6Ji8b41szTOcaP63VlnbbO5Ny6dwAATtY6JTjh5N2OLrb5Qk/Th5cRkRQhkWCt+EJsYrNB0MiL+Gpn6e3g==}
     engines: {node: '>=4'}
 
-  '@napi-rs/wasm-runtime@0.2.4':
-    resolution: {integrity: sha512-9zESzOO5aDByvhIAsOy9TbpZ0Ur2AJbUI7UT73kcUTS2mxAMHOBaa1st/jAymNoCtvrit99kkzT1FZuXVcgfIQ==}
-
   '@ndelangen/get-tarball@3.0.9':
     resolution: {integrity: sha512-9JKTEik4vq+yGosHYhZ1tiH/3WpUS0Nh0kej4Agndhox8pAdWhEx5knFVRcb/ya9knCRCs1rPxNrSXTDdfVqpA==}
 
@@ -2836,66 +3201,66 @@ packages:
     resolution: {integrity: sha512-9ApYM/3+rBt9V80aYg6tZfzj3UWdiYyCt7gJUD1VJKvWF5nwKDSICXbYIQbspFTq6TOpbsEtIC0LArB8d9PFmg==}
     engines: {node: ^16.14.0 || >=18.0.0}
 
-  '@nrwl/tao@19.8.0':
-    resolution: {integrity: sha512-tybyYdhHNfyBRb8SOc/SasT1iwjYkp/QibS8L3ayTvpvvzJpNr8BpuTznQWIkaIjilflmcdHl+rMiQDqwABqpg==}
+  '@nrwl/tao@17.2.1':
+    resolution: {integrity: sha512-u/r3w6gLxYfWjiyjFZ7RVWgcpF6GQOAK8h9mu8dqYmwiihdbsFxcA+Kac4bf+LJRXuNbJCGX2em2CMumvkkGBQ==}
     hasBin: true
 
-  '@nx/nx-darwin-arm64@19.8.0':
-    resolution: {integrity: sha512-JWtBb6ndCdGE+RBIwKN85BZnX41lFGsFxnsmot71GeAj/g7Cb0PM2qcmxawoy8yLPTBGZhb+eHER3z3nDIqRog==}
+  '@nx/nx-darwin-arm64@17.2.1':
+    resolution: {integrity: sha512-trAguPa90wUKgGJtsh5XUIZ6Sc17wKr7kAx3RIT9vOp7wd8b7XDdPumLVfm18t86WDRKKvnkr25IlY6ww+2jRg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
 
-  '@nx/nx-darwin-x64@19.8.0':
-    resolution: {integrity: sha512-NcNaqbbStBkyahLaoKFtW6nEdjCjYT5ZOmGjc6UpAx1Y3pkk/FcIOYJRCBxwuOsRRsEAyeVcHPdYrouZmV+6Yw==}
+  '@nx/nx-darwin-x64@17.2.1':
+    resolution: {integrity: sha512-7vudbcSh5J9PQ66tV5/o1o5M38r7xW2rE+UllhijwOY2aro4leGrfwaKcSH8iapwfpAnafU/t8nP5ghONC/cyA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
 
-  '@nx/nx-freebsd-x64@19.8.0':
-    resolution: {integrity: sha512-QXHRnMW5LrpYvtmdFRL2CRgX9CWDccrs2xhQNNzcgsLgL87Wte5kjDoJJN4GQjtrmjD3Q93w67CE9lhqnpXBvQ==}
+  '@nx/nx-freebsd-x64@17.2.1':
+    resolution: {integrity: sha512-h7UwvCCGUiChKbuwbv9/rC6VDC/Agv4do2ClOmIa0d+hHw6GJB68mVwNLFIttaToO9CKaTi8f7wj79QQ7cyesg==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [freebsd]
 
-  '@nx/nx-linux-arm-gnueabihf@19.8.0':
-    resolution: {integrity: sha512-VjZOLMxz0gT+0AdDygxQS0Vvi3AcEzO3y9o9WdGKKaDVUDycrFn72X+ZbvFoio1dF7S1s2TbmOlR09Bu1yTgGg==}
+  '@nx/nx-linux-arm-gnueabihf@17.2.1':
+    resolution: {integrity: sha512-BZbW36KRLvfu8VV0Tdl8ySZfQyBguTtumkDZTefhdTYV08l3Xs6InLvftnc5GVObYTW7DF4XvcSsyjFsFs+CPw==}
     engines: {node: '>= 10'}
     cpu: [arm]
     os: [linux]
 
-  '@nx/nx-linux-arm64-gnu@19.8.0':
-    resolution: {integrity: sha512-sCSrXkSmEfDUDGLESXB3eHXECAIYz9nosFZpCggyUP1vgF/QcV40fHnV38nrFbKaVHuoaxy43RgnD+I3o6sDSw==}
+  '@nx/nx-linux-arm64-gnu@17.2.1':
+    resolution: {integrity: sha512-jnTg614vi9OtVCXW6BHl+UC/LgQmMziIwTzRfeIUFzmOIpJpPmLAtt+etucB0UbKh71qbLF37F7TJe9LmF3QSA==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
-  '@nx/nx-linux-arm64-musl@19.8.0':
-    resolution: {integrity: sha512-F3xEe7NGjsVKZTVlvUiUOTmCzxteRsQH2SSsYXyAfgJ42P3eZPc9HgeLx6RByjC/NBCwc7XEECMP1FjQgQXHVw==}
+  '@nx/nx-linux-arm64-musl@17.2.1':
+    resolution: {integrity: sha512-PeqU0TZRogRqra54ZM8Arn4uLX9PlvdWcTqR95V/rTkV4j76mBy1/RCyoV+wpC6g+e3PD0iaQLAh7ZMpL5RTYg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
-  '@nx/nx-linux-x64-gnu@19.8.0':
-    resolution: {integrity: sha512-4uYuE+LvxOFXvi9z9ueJSVrME5D383SHNCjs6jYwc9KovCsmL5oPVXRieoE4/hYI4lrjly+CrAnPZU1P7ocBiw==}
+  '@nx/nx-linux-x64-gnu@17.2.1':
+    resolution: {integrity: sha512-h4CLVyKc5HtC69ViewSHXSJmgNkWncQZg9MignkTOlwHAdM/vR0ZWm2DZh5oJFibUBgJK4fGlI+EnXggMMU41A==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
-  '@nx/nx-linux-x64-musl@19.8.0':
-    resolution: {integrity: sha512-9UDEGjOvNt+m+kMBCAB7CGisSwv05Xvaq8K3NJ+xM5GPG74EkQel24mSoIJfm/6zmDkdZCiRzNN9VRjOjzOz6Q==}
+  '@nx/nx-linux-x64-musl@17.2.1':
+    resolution: {integrity: sha512-iHqjQQTcqAf9l3zksQLZeRrH8XVlGNH9Rz/SknFp0I3Wym+GYaXomwuDENln5PXmXzrL1Fw6jfgtlxqaOU52Rw==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
-  '@nx/nx-win32-arm64-msvc@19.8.0':
-    resolution: {integrity: sha512-JVzm0KjyLZY5ponBukZ/b35wttW0b3LB0nqaiiHY7WKwSzo+m0UGEYHD/Yk6rKA0RRZN2wQVeIzLeWfYcZYrhA==}
+  '@nx/nx-win32-arm64-msvc@17.2.1':
+    resolution: {integrity: sha512-e/VVRNB2XEE1ywjz3RwUtxYSrElfLxNzsvIpCsObuzE+mtw6ogRlsIWpcV/fe5BOyUGQuDEFqXJTVdOMAptQ9g==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
 
-  '@nx/nx-win32-x64-msvc@19.8.0':
-    resolution: {integrity: sha512-IRLhMZIInvp9okLsjnj76zaz8iaMovtLr6MHIFOOPIMsZYRhqQTArF5Os/NqEezeYYxvX6YZ5hKYe0xQO7A5LA==}
+  '@nx/nx-win32-x64-msvc@17.2.1':
+    resolution: {integrity: sha512-fH+dJEgFMyhlUcnlOj9IYF7F+bSBrOgG5q+VLZxmSMkETvVx12OTvmML38VKWExBdPSJHjSHlrvmsxK1toadnQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [win32]
@@ -3047,73 +3412,73 @@ packages:
   '@originjs/vite-plugin-commonjs@1.0.3':
     resolution: {integrity: sha512-KuEXeGPptM2lyxdIEJ4R11+5ztipHoE7hy8ClZt3PYaOVQ/pyngd2alaSrPnwyFeOW1UagRBaQ752aA1dTMdOQ==}
 
-  '@percy/cli-app@1.29.3':
-    resolution: {integrity: sha512-7yGEDFIRLMsJ6nzl6aMem9nMj5rfkxODEQIciuIcuao5ZD1x23KhuN3u4QLLwQFOFgy7h4WAePnUTCR6ZtpGCQ==}
+  '@percy/cli-app@1.28.2':
+    resolution: {integrity: sha512-UhuxmBRcgeyBnzV7ixiSqUlMdcBg7LyrTtDJWEjQ36SH0jJOAVu020cGcPLNDDTmqXDU7DsDoNifxtPzXT+d5w==}
     engines: {node: '>=14'}
 
-  '@percy/cli-build@1.29.3':
-    resolution: {integrity: sha512-fvDr4mUFIG/TQmMWnzQqWi2ga57SWPzXwlh65a4/0PPRKo0dKybFhvZvhCFYhcnVWqXEVYRHM21/oUvFhgnsCw==}
+  '@percy/cli-build@1.28.2':
+    resolution: {integrity: sha512-VWfrgcOaN6rxSCwifQ5aJuGQDU2Nmq3lvvqZsVVSj3lBbE4KsEaxyoH2Hmm2pCOXi1DzOQ0+zHv+Ra+m4CyBvA==}
     engines: {node: '>=14'}
 
-  '@percy/cli-command@1.29.3':
-    resolution: {integrity: sha512-jSltYf97E5u4jjTaW6gLU+5T/sRBwS0RlvraE21gKa0N9SH1l5nWs4YFfsIwamYg3EnCmIrwAf0gupQcQgAuaA==}
+  '@percy/cli-command@1.28.2':
+    resolution: {integrity: sha512-UUa+dSpzTcXVjzvElL4wD315QYDuGrbnXObgaztyGWdufEbvLWflU4AiQZrxC5abDXQdNWQUAAizorA5dGhaCg==}
     engines: {node: '>=14'}
     hasBin: true
 
-  '@percy/cli-config@1.29.3':
-    resolution: {integrity: sha512-lVrOqeS1ACaQp9tM4LE7joW/cuGaSJcM/182ci5D3Zr9Yz6Ik/oe1MQnIM9dqnsHmnwasuGBsICsflbVqqcXHQ==}
+  '@percy/cli-config@1.28.2':
+    resolution: {integrity: sha512-O1O2n16jOm6HCzGM207/NbX+IR7ezUaQGnExi4G5SbOYqZeBIrsKpbEi/SERBfg4Kexv16LrF6NLOs75N2oaSw==}
     engines: {node: '>=14'}
 
-  '@percy/cli-exec@1.29.3':
-    resolution: {integrity: sha512-AfZ2hI/snahjgXHuI0bKhRLJoEOfod8Uph6fu1UdjI2r6gacgBurvJmrwZOT5yChp2i8+B99e+qFqWNUi9AI7Q==}
+  '@percy/cli-exec@1.28.2':
+    resolution: {integrity: sha512-tRvmoDJMb94XjA60a0lmN2XphzC/r70ruic+VfhFwEqDVoLY/6LxqjSXjehiSD5huXYDyPtaMeJo7oU1FxJyZg==}
     engines: {node: '>=14'}
 
-  '@percy/cli-snapshot@1.29.3':
-    resolution: {integrity: sha512-5buoW+tSdfCu0Df7LYzOpjJlb9u+4aCTDrYlmwBcyEVUq01E39LN1kRWCYL6jU/APNB+ybUKtLr9w0RtcPDYTQ==}
+  '@percy/cli-snapshot@1.28.2':
+    resolution: {integrity: sha512-Qda4MKjKxoM/TEBjl54lCXMJAmQB6ZZheE96pJzEJzlPQtlj9r/moM3etCV+res0qaSOgx9BL0DncruvAwM/4g==}
     engines: {node: '>=14'}
 
-  '@percy/cli-upload@1.29.3':
-    resolution: {integrity: sha512-KYAtcAzE50lbZ8NTqao/GSVurESUi2iQFCJ0zRwEccxViOJy/dfb5j1i10VPlqP5glCZS+eXXY2YYoxjxVCz3w==}
+  '@percy/cli-upload@1.28.2':
+    resolution: {integrity: sha512-vzH4wRdAFGvktNlh57p4s9Qq+rT0MsiQ/kh7pDvzQ1lJ6glpCBXSiiahMtkR8AP8gMMzxYONAuV/htB/t8sFUw==}
     engines: {node: '>=14'}
 
-  '@percy/cli@1.29.3':
-    resolution: {integrity: sha512-j+LEHQrrtQV0uOe1u38U6RExPl86rwof+qWtkV8cOvPwucAo0DmeVfperLhZFIU/qrZjA9lHkDdYHZyzRndOBw==}
+  '@percy/cli@1.28.2':
+    resolution: {integrity: sha512-hwibBu6zsjfWXIe8WFgrKizGjxkTzYcGQ4eOPcMQXfgK3yUZ24N5v8sqCOobRA/SbdD117zp2WUEkBRWCJ85gg==}
     engines: {node: '>=14'}
     hasBin: true
 
-  '@percy/client@1.29.3':
-    resolution: {integrity: sha512-BTP/wfgs2/Hjj650tGmp+jkATEIOdNNZFZSRWPXGXF+PFG4zK5jTejBEZlBl3NUqhwMqtfLX/uyvsfKFaWfYDA==}
+  '@percy/client@1.28.2':
+    resolution: {integrity: sha512-UoQ4WY8zJhwv/7vKJS+1vbeu/T7YckSmOp/moCoAnHY6QOIXYs7EGkNyeEw5iXoQYzMw6KkkLYPC7YC0rt5pSg==}
     engines: {node: '>=14'}
 
-  '@percy/config@1.29.3':
-    resolution: {integrity: sha512-Jk79XGpiCNI7gmdCoWkn5V7HVa6FFfcYvFg3H1OMd2BqZEDKkPq9bbk0e4AZ93xc2BOjmYWHHj69w7VCu1peug==}
+  '@percy/config@1.28.2':
+    resolution: {integrity: sha512-Q9NoenDuhRiY+eBGrw8FJmmU8hErTsjBxccUOvrfn0A4JXRvcFHitvrh85rXG/HhyT4bcoB9O93QhV6F9KTq7A==}
     engines: {node: '>=14'}
 
-  '@percy/core@1.29.3':
-    resolution: {integrity: sha512-5RwQyezq/i4fqSMeoKJole/kZ7n7lABITS6py2e9een6svNFRKI8VqWBlMuFsL50Z5mUcbSJDhIl8O8NbIpdwQ==}
+  '@percy/core@1.28.2':
+    resolution: {integrity: sha512-7JkZrsLoHDD2bkhN4u5T/+0sC0UT73Lv1qF3lIMLu+Qjt1BhyKdnitbOnjFlrVOwqC5uNgr7/gvcULLVbJga8Q==}
     engines: {node: '>=14'}
 
-  '@percy/dom@1.29.3':
-    resolution: {integrity: sha512-wz5PV5IW/ooYTmeiq4qFDWyZrVoyp4x+cOQ4ndYStDMkiFMnN5zvvqJlSsUOJ9/YKh/BeMn+ed8hlfKOWW3zEQ==}
+  '@percy/dom@1.28.2':
+    resolution: {integrity: sha512-bUU38EMowO+y+pnLzl0naikv0pVQvcrkrBm7K7eVGUt6orRTqr5Tr8bMV7Ooac4mlMwaZvCkAH7gPhiDAONUmw==}
 
-  '@percy/env@1.29.3':
-    resolution: {integrity: sha512-DwWsnrGWsBQkIuNvw//CNQpyd5LY2rzc6wqB/2GMpVf4iuzKvm5ND55GX8j0FYhf0kJan0aS/+mDKEgZfea1LA==}
+  '@percy/env@1.28.2':
+    resolution: {integrity: sha512-40UhiL5MylFN39pzzoyDKgult2ZmSbuc3ADrNGBx9zyMdFEoTLZg5BcFZoSUHHjPboe2jYZFYrRqoXxix++OfA==}
     engines: {node: '>=14'}
 
-  '@percy/logger@1.29.3':
-    resolution: {integrity: sha512-nNslGmznG5ChKHFtPtRFcjAeuG/Zhr1OgRapLLeikyXyxy8bT929kUgBuGh4ADhp95iovcN7zlHQmpuwbOPQ2Q==}
+  '@percy/logger@1.28.2':
+    resolution: {integrity: sha512-ZF1iDjY9oBL+4WEqGuJ4JJaUdyUqGhdJtS+qDV8iqrQ6VngWBpO3lg0Uhy8RIkqUSLGKbwVbnxkfvA5kXx+yAw==}
     engines: {node: '>=14'}
 
-  '@percy/sdk-utils@1.29.3':
-    resolution: {integrity: sha512-ITUZinf+50O/Izs/X3HaRxnZvLv4Fw8lV2mSqVD/500au6bApUNeMHnoaAHOC57FgyUOUaYldiAAXNtE/zANtw==}
+  '@percy/sdk-utils@1.28.2':
+    resolution: {integrity: sha512-cMFz8AjZ2KunN0dVwzA+Wosk4B+6G9dUkh2YPhYvqs0KLcCyYs3s91IzOQmtBOYwAUVja/W/u6XmBHw0jaxg0A==}
     engines: {node: '>=14'}
 
-  '@percy/storybook@6.0.2':
-    resolution: {integrity: sha512-4NkElEIlbuo0HjS6sKiC19JzJwXOh996gwxu4p5QCx9pchnac30KlYAsJoYzu/2n+QrNBNEAe1atmC0eN9ldEg==}
+  '@percy/storybook@5.0.3':
+    resolution: {integrity: sha512-Q1pi1x6Po89eejM2Z2ahKJ0M+qWgWHNcFmQ0Mu7mRrtafv41khwwZxQXrthcGK2R3fbbfYBXPANbJhALyNiZuw==}
     hasBin: true
 
-  '@percy/webdriver-utils@1.29.3':
-    resolution: {integrity: sha512-+0qyRGKLfYdtzhc9U1m7RCBk6c3+aGy8DPLM6FdlvCrX5+Z93PLLMpoQcXid9cUFFTGAnxOKtYUWS2kc6Q32mg==}
+  '@percy/webdriver-utils@1.28.2':
+    resolution: {integrity: sha512-bD0UoR1/69xcsL2mhvZ4xQKhWJYbqUJUFMiNr8xqR55Z4dArbeN9S2ZYU6aMVRemuKyn7ki0ttNFHq0z2GFvGg==}
     engines: {node: '>=14'}
 
   '@pkgjs/parseargs@0.11.0':
@@ -3525,6 +3890,10 @@ packages:
     resolution: {integrity: sha512-Tf3YpbBKcQn991KKcw/vg7vZf98v01seSv6CVxZBbRkL/xyjnoYB6KgrFL6zskT1A4dWC/vg77KyNOW+ePaNlA==}
     engines: {node: '>= 10'}
 
+  '@rollup/pluginutils@4.2.1':
+    resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
+    engines: {node: '>= 8.0.0'}
+
   '@rollup/pluginutils@5.1.0':
     resolution: {integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==}
     engines: {node: '>=14.0.0'}
@@ -3800,12 +4169,21 @@ packages:
     resolution: {integrity: sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==}
     engines: {node: '>=18'}
 
+  '@sinonjs/commons@2.0.0':
+    resolution: {integrity: sha512-uLa0j859mMrg2slwQYdO/AkrOfmH+X6LTVmNTS9CqexuE2IvVORIkSpJLqePAbEnKJ77aMmCwr1NUZ57120Xcg==}
+
   '@sinonjs/commons@3.0.0':
     resolution: {integrity: sha512-jXBtWAF4vmdNmZgD5FoKsVLv3rPgDnLgPbU84LIJ3otV44vJlDRokVng5v8NFJdCf/da9legHcKaRuZs4L7faA==}
 
   '@sinonjs/fake-timers@10.3.0':
     resolution: {integrity: sha512-V4BG07kuYSUkTCSBHG8G8TNhM+F19jXFWnQtzj+we8DrkpSBCee9Z3Ms8yiGer/dlmhe35/Xdgyo3/0rQKg7YA==}
 
+  '@sinonjs/samsam@8.0.0':
+    resolution: {integrity: sha512-Bp8KUVlLp8ibJZrnvq2foVhP0IVX2CIprMJPK0vqGqgrDa0OHVKeZyBykqskkrdxV6yKBPmGasO8LVjAKR3Gew==}
+
+  '@sinonjs/text-encoding@0.7.2':
+    resolution: {integrity: sha512-sXXKG+uL9IrKqViTtao2Ws6dy0znu9sOaP1di/jKGW1M6VssO8vlpXCQcpZ+jisQ1tTFAC5Jo/EOzFbggBagFQ==}
+
   '@soda/friendly-errors-webpack-plugin@1.8.1':
     resolution: {integrity: sha512-h2ooWqP8XuFqTXT+NyAFbrArzfQA7R6HTezADrvD9Re8fxMLTPPniLdqVTdDaO0eIoLaAwKT+d6w+5GeTk7Vbg==}
     engines: {node: '>=8.0.0'}
@@ -4336,9 +4714,6 @@ packages:
     resolution: {integrity: sha512-c8nj8BaOExmZKO2DXhDfegyhSGcG9E/mPN3U13L+/PsoWm1uaGiHHjxqSHQiasDBQwDA3aHuw9+9spYAP1qvvg==}
     engines: {node: ^16.14.0 || >=18.0.0}
 
-  '@tybys/wasm-util@0.9.0':
-    resolution: {integrity: sha512-6+7nlbMVX/PVDCwaIQ8nTOPveOcFLSt8GcXdx8hD0bt39uWxYT88uXzqTd4fTvqta7oeUJqudepapKNt2DYJFw==}
-
   '@types/argparse@1.0.38':
     resolution: {integrity: sha512-ebDJ9b0e702Yr7pWgB0jzm+CX4Srzz8RcXtLJDJB+BSccqMa36uyH/zUsSYao5+BD1ytv3k3rPYCq4mAE1hsXA==}
 
@@ -4507,9 +4882,6 @@ packages:
   '@types/node-forge@1.3.9':
     resolution: {integrity: sha512-meK88cx/sTalPSLSoCzkiUB4VPIFHmxtXm5FaaqRDqBX2i/Sy8bJ4odsan0b20RBjPh06dAQ+OTTdnyQyhJZyQ==}
 
-  '@types/node@16.18.108':
-    resolution: {integrity: sha512-fj42LD82fSv6yN9C6Q4dzS+hujHj+pTv0IpRR3kI20fnYeS0ytBpjFO9OjmDowSPPt4lNKN46JLaKbCyP+BW2A==}
-
   '@types/node@16.18.83':
     resolution: {integrity: sha512-TmBqzDY/GeCEmLob/31SunOQnqYE3ZiiuEh1U9o3HqE1E2cqKZQA5RQg4krEguCY3StnkXyDmCny75qyFLx/rA==}
 
@@ -4522,9 +4894,6 @@ packages:
   '@types/node@18.18.9':
     resolution: {integrity: sha512-0f5klcuImLnG4Qreu9hPj/rEfFq6YRc5n2mAjSsH+ec/mJL+3voBH0+8T7o8RpFjH7ovc+TRsL/c7OYIQsPTfQ==}
 
-  '@types/node@20.16.5':
-    resolution: {integrity: sha512-VwYCweNo3ERajwy0IUlqqcyZ8/A7Zwa9ZP3MnENWcB11AejO+tLy3pu850goUW2FC/IJMdZUfKpX/yxL1gymCA==}
-
   '@types/node@20.9.0':
     resolution: {integrity: sha512-nekiGu2NDb1BcVofVcEKMIwzlx4NjHlcjhoxxKBNLtz15Y1z7MYf549DFvkHSId02Ax6kGwWntIBPC3l/JZcmw==}
 
@@ -4601,9 +4970,6 @@ packages:
   '@types/vinyl@2.0.10':
     resolution: {integrity: sha512-DqN5BjCrmjAtZ1apqzcq2vk2PSW0m1nFfjIafBFkAyddmHxuw3ZAK3omLiSdpuu81+8h07i6U4DtaE38Xsf2xQ==}
 
-  '@types/vinyl@2.0.12':
-    resolution: {integrity: sha512-Sr2fYMBUVGYq8kj3UthXFAu5UN6ZW+rYr4NACjZQJvHvj+c8lYv0CahmZ2P/r7iUkN44gGUBwqxZkrKXYPb7cw==}
-
   '@types/wait-on@5.3.4':
     resolution: {integrity: sha512-EBsPjFMrFlMbbUFf9D1Fp+PAB2TwmUn7a3YtHyD9RLuTIk1jDd8SxXVAoez2Ciy+8Jsceo2MYEYZzJ/DvorOKw==}
 
@@ -4625,6 +4991,17 @@ packages:
   '@types/yauzl@2.10.3':
     resolution: {integrity: sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==}
 
+  '@typescript-eslint/eslint-plugin@5.62.0':
+    resolution: {integrity: sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      '@typescript-eslint/parser': ^5.0.0
+      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   '@typescript-eslint/eslint-plugin@7.0.1':
     resolution: {integrity: sha512-OLvgeBv3vXlnnJGIAgCLYKjgMEU+wBGj07MQ/nxAaON+3mLzX7mJbhRYrVGiVvFiXtwFlkcBa/TtmglHy0UbzQ==}
     engines: {node: ^16.0.0 || >=18.0.0}
@@ -4664,6 +5041,16 @@ packages:
     resolution: {integrity: sha512-v7/T7As10g3bcWOOPAcbnMDuvctHzCFYCG/8R4bK4iYzdFqsZTbXGln0cZNVcwQcwewsYU2BJLay8j0/4zOk4w==}
     engines: {node: ^16.0.0 || >=18.0.0}
 
+  '@typescript-eslint/type-utils@5.62.0':
+    resolution: {integrity: sha512-xsSQreu+VnfbqQpW5vnCJdq1Z3Q0U31qiWmRhr98ONQmcp/yhiPJFPq8MXiJVLiksmOKSjIldZzkebzHuCGzew==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: '*'
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   '@typescript-eslint/type-utils@7.0.1':
     resolution: {integrity: sha512-YtT9UcstTG5Yqy4xtLiClm1ZpM/pWVGFnkAa90UfdkkZsR1eP2mR/1jbHeYp8Ay1l1JHPyGvoUYR6o3On5Nhmw==}
     engines: {node: ^16.0.0 || >=18.0.0}
@@ -4743,9 +5130,16 @@ packages:
     resolution: {integrity: sha512-hwAgrOyk++RTXrP4KzCg7zB2U0xt7RUU0ZdMSCsqF3eKUwkdXUMyTb0qdCuji7VIbcpG62kKTU9M1J1c9UpFBw==}
     engines: {node: ^16.0.0 || >=18.0.0}
 
+  '@ungap/promise-all-settled@1.1.2':
+    resolution: {integrity: sha512-sL/cEvJWAnClXw0wHk85/2L0G6Sj8UB0Ctc1TEMbKSsmpRosqhwj9gWgFRZSrBr2f9tiXISwNhCPmlfqUqyb9Q==}
+
   '@ungap/structured-clone@1.2.0':
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
 
+  '@vitejs/plugin-vue-jsx@1.3.10':
+    resolution: {integrity: sha512-Cf5zznh4yNMiEMBfTOztaDVDmK1XXfgxClzOSUVUc8WAmHzogrCUeM8B05ABzuGtg0D1amfng+mUmSIOFGP3Pw==}
+    engines: {node: '>=12.0.0'}
+
   '@vitejs/plugin-vue2@2.3.1':
     resolution: {integrity: sha512-/ksaaz2SRLN11JQhLdEUhDzOn909WEk99q9t9w+N12GjQCljzv7GyvAbD/p20aBUjHkvpGOoQ+FCOkG+mjDF4A==}
     engines: {node: ^14.18.0 || >= 16.0.0}
@@ -4753,6 +5147,13 @@ packages:
       vite: ^3.0.0 || ^4.0.0 || ^5.0.0
       vue: ^2.7.0-0
 
+  '@vitejs/plugin-vue@2.3.4':
+    resolution: {integrity: sha512-IfFNbtkbIm36O9KB8QodlwwYvTEsJb4Lll4c2IwB3VHc2gie2mSPtSzL0eYay7X2jd/2WX02FjSGTWR6OPr/zg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      vite: ^2.5.10
+      vue: ^3.2.25
+
   '@vitejs/plugin-vue@4.5.0':
     resolution: {integrity: sha512-a2WSpP8X8HTEww/U00bU4mX1QpLINNuz/2KMNpLsdu3BzOpak3AGI1CJYBTXcc4SPhaD0eNRUp7IyQK405L5dQ==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -4782,15 +5183,54 @@ packages:
   '@vitest/utils@1.0.4':
     resolution: {integrity: sha512-gsswWDXxtt0QvtK/y/LWukN7sGMYmnCcv1qv05CsY6cU/Y1zpGX1QuvLs+GO1inczpE6Owixeel3ShkjhYtGfA==}
 
+  '@volar/code-gen@0.38.9':
+    resolution: {integrity: sha512-n6LClucfA+37rQeskvh9vDoZV1VvCVNy++MAPKj2dT4FT+Fbmty/SDQqnsEBtdEe6E3OQctFvA/IcKsx3Mns0A==}
+
+  '@volar/language-core@1.11.1':
+    resolution: {integrity: sha512-dOcNn3i9GgZAcJt43wuaEykSluAuOkQgzni1cuxLxTV0nJKanQztp7FxyswdRILaKH+P2XZMPRp2S4MV/pElCw==}
+
   '@volar/language-core@2.4.0':
     resolution: {integrity: sha512-FTla+khE+sYK0qJP+6hwPAAUwiNHVMph4RUXpxf/FIPKUP61NFrVZorml4mjFShnueR2y9/j8/vnh09YwVdH7A==}
 
+  '@volar/source-map@0.38.9':
+    resolution: {integrity: sha512-ba0UFoHDYry+vwKdgkWJ6xlQT+8TFtZg1zj9tSjj4PykW1JZDuM0xplMotLun4h3YOoYfY9K1huY5gvxmrNLIw==}
+
+  '@volar/source-map@1.11.1':
+    resolution: {integrity: sha512-hJnOnwZ4+WT5iupLRnuzbULZ42L7BWWPMmruzwtLhJfpDVoZLjNBxHDi2sY2bgZXCKlpU5XcsMFoYrsQmPhfZg==}
+
   '@volar/source-map@2.4.0':
     resolution: {integrity: sha512-2ceY8/NEZvN6F44TXw2qRP6AQsvCYhV2bxaBPWxV9HqIfkbRydSksTFObCF1DBDNBfKiZTS8G/4vqV6cvjdOIQ==}
 
+  '@volar/typescript@1.11.1':
+    resolution: {integrity: sha512-iU+t2mas/4lYierSnoFOeRFQUhAEMgsFuQxoxvwn5EdQopw43j+J27a4lt9LMInx1gLJBC6qL14WYGlgymaSMQ==}
+
   '@volar/typescript@2.4.0':
     resolution: {integrity: sha512-9zx3lQWgHmVd+JRRAHUSRiEhe4TlzL7U7e6ulWXOxHH/WNYxzKwCvZD7WYWEZFdw4dHfTD9vUR0yPQO6GilCaQ==}
 
+  '@volar/vue-code-gen@0.38.9':
+    resolution: {integrity: sha512-tzj7AoarFBKl7e41MR006ncrEmNPHALuk8aG4WdDIaG387X5//5KhWC5Ff3ZfB2InGSeNT+CVUd74M0gS20rjA==}
+    deprecated: 'WARNING: This project has been renamed to @vue/language-core. Install using @vue/language-core instead.'
+
+  '@volar/vue-typescript@0.38.9':
+    resolution: {integrity: sha512-iJMQGU91ADi98u8V1vXd2UBmELDAaeSP0ZJaFjwosClQdKlJQYc6MlxxKfXBZisHqfbhdtrGRyaryulnYtliZw==}
+    deprecated: 'WARNING: This project has been renamed to @vue/typescript. Install using @vue/typescript instead.'
+
+  '@vue/babel-helper-vue-transform-on@1.2.5':
+    resolution: {integrity: sha512-lOz4t39ZdmU4DJAa2hwPYmKc8EsuGa2U0L9KaZaOJUt0UwQNjNA3AZTq6uEivhOKhhG1Wvy96SvYBoFmCg3uuw==}
+
+  '@vue/babel-plugin-jsx@1.2.5':
+    resolution: {integrity: sha512-zTrNmOd4939H9KsRIGmmzn3q2zvv1mjxkYZHgqHZgDrXz5B1Q3WyGEjO2f+JrmKghvl1JIRcvo63LgM1kH5zFg==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+
+  '@vue/babel-plugin-resolve-type@1.2.5':
+    resolution: {integrity: sha512-U/ibkQrf5sx0XXRnUZD1mo5F7PkpKyTbfXM3a3rC4YnUz6crHEz9Jg09jzzL6QYlXNto/9CePdOg/c87O4Nlfg==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
   '@vue/cli-overlay@5.0.8':
     resolution: {integrity: sha512-KmtievE/B4kcXp6SuM2gzsnSd8WebkQpg3XaB6GmFh1BJGRqa1UiW9up7L/Q67uOdTigHxr5Ar2lZms4RcDjwQ==}
 
@@ -4805,6 +5245,11 @@ packages:
     peerDependencies:
       '@vue/cli-service': ^3.0.0 || ^4.0.0 || ^5.0.0-0
 
+  '@vue/cli-plugin-unit-mocha@5.0.8':
+    resolution: {integrity: sha512-t8eN1ttbSkHg+U7AjCKwpuhpV2OBsP35RjBkdSrcAPjoX3MxVwoWyqGPeYI+jWbPGX3tFxM/uMQwN0U3lmzH7A==}
+    peerDependencies:
+      '@vue/cli-service': ^3.0.0 || ^4.0.0 || ^5.0.0-0
+
   '@vue/cli-plugin-vuex@5.0.8':
     resolution: {integrity: sha512-HSYWPqrunRE5ZZs8kVwiY6oWcn95qf/OQabwLfprhdpFWAGtLStShjsGED2aDpSSeGAskQETrtR/5h7VqgIlBA==}
     peerDependencies:
@@ -4847,18 +5292,30 @@ packages:
   '@vue/compiler-core@3.4.15':
     resolution: {integrity: sha512-XcJQVOaxTKCnth1vCxEChteGuwG6wqnUHxAm1DO3gCz0+uXKaJNx8/digSz4dLALCy8n2lKq24jSUs8segoqIw==}
 
+  '@vue/compiler-core@3.5.5':
+    resolution: {integrity: sha512-ZrxcY8JMoV+kgDrmRwlDufz0SjDZ7jfoNZiIBluAACMBmgr55o/jTbxnyrccH6VSJXnFaDI4Ik1UFCiq9r8i7w==}
+
   '@vue/compiler-dom@3.4.15':
     resolution: {integrity: sha512-wox0aasVV74zoXyblarOM3AZQz/Z+OunYcIHe1OsGclCHt8RsRm04DObjefaI82u6XDzv+qGWZ24tIsRAIi5MQ==}
 
+  '@vue/compiler-dom@3.5.5':
+    resolution: {integrity: sha512-HSvK5q1gmBbxRse3S0Wt34RcKuOyjDJKDDMuF3i7NC+QkDFrbAqw8NnrEm/z7zFDxWZa4/5eUwsBOMQzm1RHBA==}
+
   '@vue/compiler-sfc@2.7.16':
     resolution: {integrity: sha512-KWhJ9k5nXuNtygPU7+t1rX6baZeqOYLEforUPjgNDBnLicfHCoi48H87Q8XyLZOrNNsmhuwKqtpDQWjEFe6Ekg==}
 
   '@vue/compiler-sfc@3.4.15':
     resolution: {integrity: sha512-LCn5M6QpkpFsh3GQvs2mJUOAlBQcCco8D60Bcqmf3O3w5a+KWS5GvYbrrJBkgvL1BDnTp+e8q0lXCLgHhKguBA==}
 
+  '@vue/compiler-sfc@3.5.5':
+    resolution: {integrity: sha512-MzBHDxwZhgQPHrwJ5tj92gdTYRCuPDSZr8PY3+JFv8cv2UD5/WayH5yo0kKCkKfrtJhc39jNSMityHrkMSbfnA==}
+
   '@vue/compiler-ssr@3.4.15':
     resolution: {integrity: sha512-1jdeQyiGznr8gjFDadVmOJqZiLNSsMa5ZgqavkPZ8O2wjHv0tVuAEsw5hTdUoUW4232vpBbL/wJhzVW/JwY1Uw==}
 
+  '@vue/compiler-ssr@3.5.5':
+    resolution: {integrity: sha512-oFasHnpv/upubjJEmqiTKQYb4qS3ziJddf4UVWuFw6ebk/QTrTUc+AUoTJdo39x9g+AOQBzhOU0ICCRuUjvkmw==}
+
   '@vue/compiler-vue2@2.7.16':
     resolution: {integrity: sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==}
 
@@ -4868,6 +5325,14 @@ packages:
   '@vue/devtools-api@6.5.1':
     resolution: {integrity: sha512-+KpckaAQyfbvshdDW5xQylLni1asvNSGme1JFs8I1+/H5pHEhqUKMEQD/qn3Nx5+/nycBq11qAEi8lk+LXI2dA==}
 
+  '@vue/language-core@1.8.25':
+    resolution: {integrity: sha512-NJk/5DnAZlpvXX8BdWmHI45bWGLViUaS3R/RMrmFSvFMSbJKuEODpM4kR0F0Ofv5SFzCWuNiMhxameWpVdQsnA==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   '@vue/language-core@2.0.29':
     resolution: {integrity: sha512-o2qz9JPjhdoVj8D2+9bDXbaI4q2uZTHQA/dbyZT4Bj1FR9viZxDJnLcKVHfxdn6wsOzRgpqIzJEEmSSvgMvDTQ==}
     peerDependencies:
@@ -4893,6 +5358,9 @@ packages:
   '@vue/shared@3.4.15':
     resolution: {integrity: sha512-KzfPTxVaWfB+eGcGdbSf4CWdaXcGDqckoeXUh7SB3fZdEtzPCK2Vq9B/lRRL3yutax/LWITz+SwvgyOxz5V75g==}
 
+  '@vue/shared@3.5.5':
+    resolution: {integrity: sha512-0KyMXyEgnmFAs6rNUL+6eUHtUCqCaNrVd+AW3MX3LyA0Yry5SA0Km03CDKiOua1x1WWnIr+W9+S0GMFoSDWERQ==}
+
   '@vue/test-utils@1.3.6':
     resolution: {integrity: sha512-udMmmF1ts3zwxUJEIAj5ziioR900reDrt6C9H3XpWPsLBx2lpHKoA4BTdd9HNIYbkGltWw+JjWJ+5O6QBwiyEw==}
     peerDependencies:
@@ -4908,6 +5376,14 @@ packages:
       '@vue/server-renderer':
         optional: true
 
+  '@vue/tsconfig@0.1.3':
+    resolution: {integrity: sha512-kQVsh8yyWPvHpb8gIc9l/HIDiiVUy1amynLNpCy8p+FoCiZXCo6fQos5/097MmnNZc9AtseDsCrfkhqCrJ8Olg==}
+    peerDependencies:
+      '@types/node': '*'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
   '@vue/tsconfig@0.4.0':
     resolution: {integrity: sha512-CPuIReonid9+zOG/CGTT05FXrPYATEqoDGNrEaqS4hwcw5BUNM2FguC0mOwJD4Jr16UpRVl9N0pY3P+srIbqmg==}
 
@@ -5116,18 +5592,25 @@ packages:
       mem-fs-editor:
         optional: true
 
+  '@zeit/schemas@2.6.0':
+    resolution: {integrity: sha512-uUrgZ8AxS+Lio0fZKAipJjAh415JyrOZowliZAzmnJSsf7piVL5w+G0+gFJ0KSu3QRhvui/7zuvpLz03YjXAhg==}
+
   '@zip.js/zip.js@2.7.48':
     resolution: {integrity: sha512-J7cliimZ2snAbr0IhLx2U8BwfA1pKucahKzTpFtYq4hEgKxwvFJcIjCIVNPwQpfVab7iVP+AKmoH1gidBlyhiQ==}
     engines: {bun: '>=0.7.0', deno: '>=1.0.0', node: '>=16.5.0'}
 
-  '@zkochan/js-yaml@0.0.7':
-    resolution: {integrity: sha512-nrUSn7hzt7J6JWgWGz78ZYI8wj+gdIJdk0Ynjpp8l+trkn58Uqsf6RYrYkEK+3X18EX+TNdtJI0WxAtc+L84SQ==}
+  '@zkochan/js-yaml@0.0.6':
+    resolution: {integrity: sha512-nzvgl3VfhcELQ8LyVrYOru+UtAy1nrygk2+AGbTm8a5YcO6o8lSjAT+pfg3vJWxIoZKOUhrK6UU7xW/+00kQrg==}
     hasBin: true
 
   JSONStream@1.3.5:
     resolution: {integrity: sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==}
     hasBin: true
 
+  abab@2.0.6:
+    resolution: {integrity: sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==}
+    deprecated: Use your platform's native atob() and btoa() methods instead
+
   abbrev@1.1.1:
     resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==}
 
@@ -5143,6 +5626,9 @@ packages:
     resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
     engines: {node: '>= 0.6'}
 
+  acorn-globals@6.0.0:
+    resolution: {integrity: sha512-ZQl7LOWaF5ePqqcX4hLuv/bLXYQNfNWw2c0/yX/TsPRKamzHcTGQnlCjHT3TsmkOUVEPS3crCxiPfdzE/Trlhg==}
+
   acorn-import-assertions@1.9.0:
     resolution: {integrity: sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==}
     peerDependencies:
@@ -5153,6 +5639,10 @@ packages:
     peerDependencies:
       acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
 
+  acorn-walk@7.2.0:
+    resolution: {integrity: sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==}
+    engines: {node: '>=0.4.0'}
+
   acorn-walk@8.3.0:
     resolution: {integrity: sha512-FS7hV565M5l1R08MXqo8odwMTB02C2UqzB17RVgu9EyuYFBqJZ3/ZY97sQD5FewVu1UyDFc1yztUDrAwT0EypA==}
     engines: {node: '>=0.4.0'}
@@ -5394,6 +5884,9 @@ packages:
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
     deprecated: This package is no longer supported.
 
+  arg@2.0.0:
+    resolution: {integrity: sha512-XxNTUzKnz1ctK3ZIcI2XUPlD96wbHP2nGqkPKpvk/HNRlPveYrXIVSTk9m3LcqOgDPg3B1nMvdV/K8wZd7PG4w==}
+
   arg@5.0.2:
     resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
 
@@ -5625,9 +6118,6 @@ packages:
   axios@1.6.2:
     resolution: {integrity: sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==}
 
-  axios@1.7.7:
-    resolution: {integrity: sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==}
-
   babel-core@7.0.0-bridge.0:
     resolution: {integrity: sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg==}
     peerDependencies:
@@ -5805,13 +6295,12 @@ packages:
     resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==}
     engines: {node: '>=8'}
 
-  braces@3.0.3:
-    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
-    engines: {node: '>=8'}
-
   browser-assert@1.2.1:
     resolution: {integrity: sha512-nfulgvOR6S4gt9UKCeGJOuSGBPGiFT6oQ/2UBnvTY/5aQ1PnksW72fhZkM30DzoRRv2WpwZf1vHHEr3mtuXIWQ==}
 
+  browser-process-hrtime@1.0.0:
+    resolution: {integrity: sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==}
+
   browser-stdout@1.3.1:
     resolution: {integrity: sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw==}
 
@@ -5849,9 +6338,6 @@ packages:
   builtins@5.0.1:
     resolution: {integrity: sha512-qwVpFEHNfhYJIzNRBvd2C1kyo6jz3ZSMPyyuR47OPdiKWlbYnZNyDWuyR175qDnAJLiCo5fBBqPb3RiXgWlkOQ==}
 
-  builtins@5.1.0:
-    resolution: {integrity: sha512-SW9lzGTLvWTP1AY8xeAMZimqDrIaSdLQUcVr9DMef51niJ022Ri87SwRRKYm4A6iHfkPaiVUu/Duw2Wc4J7kKg==}
-
   bytes@3.0.0:
     resolution: {integrity: sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==}
     engines: {node: '>= 0.8'}
@@ -5965,6 +6451,9 @@ packages:
   caniuse-lite@1.0.30001561:
     resolution: {integrity: sha512-NTt0DNoKe958Q0BE0j0c1V9jbUzhBxHIEJy7asmGrpE0yG63KTV7PLHPnK2E1O9RsQrQ081I3NLuXGS6zht3cw==}
 
+  capital-case@1.0.4:
+    resolution: {integrity: sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==}
+
   capture-stack-trace@1.0.2:
     resolution: {integrity: sha512-X/WM2UQs6VMHUtjUDnZTRI+i1crWteJySFzr9UpGoQa4WQffXVTTXuekjl7TjZRlcF2XfjgITT0HxZ9RnxeT0w==}
     engines: {node: '>=0.10.0'}
@@ -5991,6 +6480,10 @@ packages:
     resolution: {integrity: sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==}
     engines: {node: '>=0.10.0'}
 
+  chalk@2.4.1:
+    resolution: {integrity: sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==}
+    engines: {node: '>=4'}
+
   chalk@2.4.2:
     resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
     engines: {node: '>=4'}
@@ -6007,6 +6500,9 @@ packages:
     resolution: {integrity: sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==}
     engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
 
+  change-case@4.1.2:
+    resolution: {integrity: sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==}
+
   change-case@5.4.4:
     resolution: {integrity: sha512-HRQyTk2/YPEkt9TnUPbOpr64Uw3KOicFWPVBb+xiHvd6eBx/qPr9xqfBFDT8P2vWsvvz4jbEkfDe71W3VyNu2w==}
 
@@ -6054,6 +6550,10 @@ packages:
     resolution: {integrity: sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==}
     deprecated: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
 
+  chokidar@3.5.1:
+    resolution: {integrity: sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==}
+    engines: {node: '>= 8.10.0'}
+
   chokidar@3.5.3:
     resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==}
     engines: {node: '>= 8.10.0'}
@@ -6176,6 +6676,9 @@ packages:
   cliui@3.2.0:
     resolution: {integrity: sha512-0yayqDxWQbqk3ojkYqUKqaAQ6AfNKeKWRNA8kR0WXzAsdHpP4BIaOmMAG87JGuO6qcobyW4GjxHd9PmhEd+T9w==}
 
+  cliui@5.0.0:
+    resolution: {integrity: sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==}
+
   cliui@6.0.0:
     resolution: {integrity: sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==}
 
@@ -6313,6 +6816,10 @@ packages:
     resolution: {integrity: sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==}
     engines: {node: ^12.20.0 || >=14}
 
+  comment-parser@1.3.1:
+    resolution: {integrity: sha512-B52sN2VNghyq5ofvUsqZjmk6YkihBX5vMSChmSK9v4ShjKf3Vk5Xcmgpw4o+iIgtrnM/u5FiMpz9VKb8lpBveA==}
+    engines: {node: '>= 12.0.0'}
+
   common-ancestor-path@1.0.1:
     resolution: {integrity: sha512-L3sHRo1pXXEqX8VU28kfgUY+YGsk09hPqZiZmLacNib6XNTCM8ubYeT7ryXQw8asB1sKgcU5lkB7ONug08aB8w==}
 
@@ -6336,6 +6843,10 @@ packages:
     resolution: {integrity: sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==}
     engines: {node: '>= 0.6'}
 
+  compression@1.7.3:
+    resolution: {integrity: sha512-HSjyBG5N1Nnz7tF2+O7A9XUhyjru71/fwgNb7oIsEVHR0WShfs2tIS/EySLgiTe98aOK18YDlMXpzjCXY/n9mg==}
+    engines: {node: '>= 0.8.0'}
+
   compression@1.7.4:
     resolution: {integrity: sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==}
     engines: {node: '>= 0.8.0'}
@@ -6542,9 +7053,16 @@ packages:
       whiskers:
         optional: true
 
+  constant-case@3.0.4:
+    resolution: {integrity: sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==}
+
   constantinople@4.0.1:
     resolution: {integrity: sha512-vCrqcSIq4//Gx74TXXCGnHpulY1dskqLTFGDmhrGxzeXL8lF8kvXv6mpNWlJj1uD4DW23D4ljAqbY4RRaaUZIw==}
 
+  content-disposition@0.5.2:
+    resolution: {integrity: sha512-kRGRZw3bLlFISDBgwTSA1TMBFN6J6GWDeubmDE3AF+3+yXL8hTWv8r5rkLbqYXY4RjPk/EzHnClI3zQf1cFmHA==}
+    engines: {node: '>= 0.6'}
+
   content-disposition@0.5.4:
     resolution: {integrity: sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==}
     engines: {node: '>= 0.6'}
@@ -6633,6 +7151,10 @@ packages:
   core-js-compat@3.33.2:
     resolution: {integrity: sha512-axfo+wxFVxnqf8RvxTzoAlzW4gRoacrHeoFlc9n0x50+7BEyZL/Rt3hicaED1/CEd7I6tPCPVUYcJwCMO5XUYw==}
 
+  core-js@2.6.12:
+    resolution: {integrity: sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==}
+    deprecated: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
+
   core-js@3.36.0:
     resolution: {integrity: sha512-mt7+TUBbTFg5+GngsAxeKBTl5/VS0guFeJacYge9OmHb+m058UwwIm41SE9T4Den7ClatV57B6TYTuJ0CX1MAw==}
 
@@ -6831,6 +7353,16 @@ packages:
     resolution: {integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==}
     engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
 
+  cssom@0.3.8:
+    resolution: {integrity: sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==}
+
+  cssom@0.5.0:
+    resolution: {integrity: sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==}
+
+  cssstyle@2.3.0:
+    resolution: {integrity: sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==}
+    engines: {node: '>=8'}
+
   cssstyle@4.0.1:
     resolution: {integrity: sha512-8ZYiJ3A/3OkDd093CBT/0UKDWry7ak4BdPTFP2+QEP7cmhouyq/Up709ASSj2cK02BbZiMgk7kYjZNS4QP5qrQ==}
     engines: {node: '>=18'}
@@ -6853,6 +7385,10 @@ packages:
     resolution: {integrity: sha512-2iy1EkLdlBzQGvbweYRFxmFath8+K7+AKB0TlhHWkNuH+TmovaMH/Wp7V7R4u7f4SnX3OgLsU9t1NI9ioDnUpg==}
     engines: {node: '>=8'}
 
+  data-urls@3.0.2:
+    resolution: {integrity: sha512-Jy/tj3ldjZJo63sVAvg6LHt2mHvl4V6AgRAmNDtLdm7faqtsx+aJG42rsyCo9JCoRVKwPFzKlIPx3DIibwSIaQ==}
+    engines: {node: '>=12'}
+
   data-urls@5.0.0:
     resolution: {integrity: sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==}
     engines: {node: '>=18'}
@@ -6896,6 +7432,15 @@ packages:
       supports-color:
         optional: true
 
+  debug@4.3.1:
+    resolution: {integrity: sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
   debug@4.3.4:
     resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
     engines: {node: '>=6.0'}
@@ -7180,6 +7725,11 @@ packages:
   domelementtype@2.3.0:
     resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
 
+  domexception@4.0.0:
+    resolution: {integrity: sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==}
+    engines: {node: '>=12'}
+    deprecated: Use your platform's native DOMException instead
+
   domhandler@2.4.2:
     resolution: {integrity: sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==}
 
@@ -7214,10 +7764,6 @@ packages:
     resolution: {integrity: sha512-GopVGCpVS1UKH75VKHGuQFqS1Gusej0z4FyQkPdwjil2gNIv+LNsqBlboOzpJFZKVT95GkCyWJbBSdFEFUWI2A==}
     engines: {node: '>=12'}
 
-  dotenv-expand@11.0.6:
-    resolution: {integrity: sha512-8NHi73otpWsZGBSZwwknTXS5pqMOrk9+Ssrna8xCaxkzEpU9OTf9R5ArQGVw03//Zmk9MOwLPng9WwndvpAJ5g==}
-    engines: {node: '>=12'}
-
   dotenv-expand@5.1.0:
     resolution: {integrity: sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==}
 
@@ -7229,10 +7775,6 @@ packages:
     resolution: {integrity: sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==}
     engines: {node: '>=12'}
 
-  dotenv@16.4.5:
-    resolution: {integrity: sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==}
-    engines: {node: '>=12'}
-
   downgrade-root@1.2.2:
     resolution: {integrity: sha512-K/QnPfqybcxP6rriuM17fnaQ/zDnG0hh8ISbm9szzIqZSI4wtfaj4D5oL6WscT2xVFQ3kDISZrrgeUtd+rW8pQ==}
     engines: {node: '>=0.10.0'}
@@ -7291,6 +7833,9 @@ packages:
   emoji-regex@9.2.2:
     resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
 
+  emoji-toolkit@6.6.0:
+    resolution: {integrity: sha512-pEu0kow2p1N8zCKnn/L6H0F3rWUBB3P3hVjr/O5yl1fK7N9jU4vO4G7EFapC5Y3XwZLUCY0FZbOPyTkH+4V2eQ==}
+
   emoji-toolkit@8.0.0:
     resolution: {integrity: sha512-Vz8YIqQJsQ+QZ4yuKMMzliXceayqfWbNjb6bST+vm77QAhU2is3I+/PRxrNknW+q1bvHHMgjLCQXxzINWLVapg==}
 
@@ -7592,6 +8137,11 @@ packages:
     resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
     engines: {node: '>=12'}
 
+  escodegen@2.1.0:
+    resolution: {integrity: sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==}
+    engines: {node: '>=6.0'}
+    hasBin: true
+
   eslint-config-semistandard@17.0.0:
     resolution: {integrity: sha512-tLi0JYmfiiJgtmRhoES55tENatR7y/5aXOh6cBeW+qjzl1+WwyV0arDqR65XN3/xrPZt+/1EG+xNLknV/0jWsQ==}
     peerDependencies:
@@ -7646,6 +8196,12 @@ packages:
     peerDependencies:
       eslint: '>=4.19.1'
 
+  eslint-plugin-eslint-plugin@5.2.1:
+    resolution: {integrity: sha512-W+WergGahmRTz5yhw/+6TVqlXZkxucK0rM6KWRjona3MYx8+QJ+9KpXn3sYi1lgLduitfmT8YiAmO4RPC/mxEQ==}
+    engines: {node: ^14.17.0 || ^16.0.0 || >= 18.0.0}
+    peerDependencies:
+      eslint: '>=7.0.0'
+
   eslint-plugin-import@2.29.0:
     resolution: {integrity: sha512-QPOO5NO6Odv5lpoTkddtutccQjysJuFxoPS7fAHO+9m9udNHvTCPSAMW9zGAYj8lAIdr40I8yPCdUYrncXtrwg==}
     engines: {node: '>=4'}
@@ -7669,6 +8225,18 @@ packages:
       jest:
         optional: true
 
+  eslint-plugin-jsdoc@39.9.1:
+    resolution: {integrity: sha512-Rq2QY6BZP2meNIs48aZ3GlIlJgBqFCmR55+UBvaDkA3ZNQ0SvQXOs2QKkubakEijV8UbIVbVZKsOVN8G3MuqZw==}
+    engines: {node: ^14 || ^16 || ^17 || ^18 || ^19}
+    peerDependencies:
+      eslint: ^7.0.0 || ^8.0.0
+
+  eslint-plugin-mocha@10.5.0:
+    resolution: {integrity: sha512-F2ALmQVPT1GoP27O1JTZGrV9Pqg8k79OeIuvw63UxMtQKREZtmkK1NFgkZQ2TW7L2JSSFKHFPTtHu5z8R9QNRw==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      eslint: '>=7.0.0'
+
   eslint-plugin-n@15.7.0:
     resolution: {integrity: sha512-jDex9s7D/Qial8AGVIHq4W7NswpUD5DPDL2RH8Lzd9EloWUuvUkHfv4FRLMipH5q2UtyurorBkPeNi1wVWNh3Q==}
     engines: {node: '>=12.22.0'}
@@ -7947,6 +8515,9 @@ packages:
   fast-levenshtein@2.0.6:
     resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
 
+  fast-url-parser@1.1.3:
+    resolution: {integrity: sha512-5jOCVXADYNuRkKFzNJ0dCCewsZiYo0dz8QNYljkOpFC6r2U4OBmKtvm/Tsuh4w1YYdDqDb31a8TVhBJ2OJKdqQ==}
+
   fastest-levenshtein@1.0.16:
     resolution: {integrity: sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==}
     engines: {node: '>= 4.9.1'}
@@ -8019,10 +8590,6 @@ packages:
     resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==}
     engines: {node: '>=8'}
 
-  fill-range@7.1.1:
-    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
-    engines: {node: '>=8'}
-
   filter-obj@2.0.2:
     resolution: {integrity: sha512-lO3ttPjHZRfjMcxWKb1j1eDhTFsu4meeR3lnMcnBFhk6RuLhvEiuALu2TlfL310ph4lCYYwgF/ElIjdP739tdg==}
     engines: {node: '>=8'}
@@ -8152,15 +8719,6 @@ packages:
       debug:
         optional: true
 
-  follow-redirects@1.15.9:
-    resolution: {integrity: sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==}
-    engines: {node: '>=4.0'}
-    peerDependencies:
-      debug: '*'
-    peerDependenciesMeta:
-      debug:
-        optional: true
-
   for-each@0.3.3:
     resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
 
@@ -8208,9 +8766,6 @@ packages:
   fromentries@1.3.2:
     resolution: {integrity: sha512-cHEpEQHUg0f8XdtZCc2ZAhrHzKzT0MrFUTcvx+hfxYu7rGMDc5SKoXFh+n4YigxsHXRzc6OrCshdR1bWH6HHyg==}
 
-  front-matter@4.0.2:
-    resolution: {integrity: sha512-I8ZuJ/qG92NWX8i5x1Y8qyj3vizhXS31OxjKDu3LKP+7/qBgfIKValiZIEwoVoJKUHlhWtYrktkxV1XsX+pPlg==}
-
   fs-constants@1.0.0:
     resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==}
 
@@ -8256,7 +8811,7 @@ packages:
     resolution: {integrity: sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==}
     engines: {node: '>= 4.0'}
     os: [darwin]
-    deprecated: Upgrade to fsevents v2 to mitigate potential security issues
+    deprecated: The v1 package contains DANGEROUS / INSECURE binaries. Upgrade to safe fsevents v2
 
   fsevents@2.3.2:
     resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
@@ -8437,6 +8992,14 @@ packages:
     resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==}
     hasBin: true
 
+  glob@7.1.4:
+    resolution: {integrity: sha512-hkLPepehmnKk41pUGm3sYxoFs/umurYfYJCerbXEyFIWcAzvpipAgVkBqqT9RBKMGjnq6kMuyYwha6csxbiM1A==}
+    deprecated: Glob versions prior to v9 are no longer supported
+
+  glob@7.1.6:
+    resolution: {integrity: sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==}
+    deprecated: Glob versions prior to v9 are no longer supported
+
   glob@7.2.0:
     resolution: {integrity: sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==}
     deprecated: Glob versions prior to v9 are no longer supported
@@ -8505,10 +9068,18 @@ packages:
     resolution: {integrity: sha512-XAmF0RjlrjY23MA51q3HltdlGxUpXPvg0GioKiD9X6HD28iMjo2dKC8Vqwm7lne4GNr78+RHTfliktR6ZH09wA==}
     engines: {node: '>=8'}
 
+  globals@13.24.0:
+    resolution: {integrity: sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==}
+    engines: {node: '>=8'}
+
   globalthis@1.0.3:
     resolution: {integrity: sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==}
     engines: {node: '>= 0.4'}
 
+  globby@10.0.2:
+    resolution: {integrity: sha512-7dUi7RvCoT/xast/o/dLN53oqND4yk0nsHkhRgn9w65C4PofCLOoJ39iSOg+qVDdWQPIEj+eszMHQ+aLVwwQSg==}
+    engines: {node: '>=8'}
+
   globby@11.1.0:
     resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
     engines: {node: '>=10'}
@@ -8569,6 +9140,10 @@ packages:
     resolution: {integrity: sha512-/PiFUa7WIsl48dUeCvhIHnwNmAAzlI/eHoJl0vu3nsFA366JleY7Ff8EVTplZu5kO0MIdZjKTTnzItL61ahbnw==}
     engines: {node: '>=8.0.0'}
 
+  growl@1.10.5:
+    resolution: {integrity: sha512-qBr4OuELkhPenW6goKVXiv47US3clb3/IbuWF9KNKEijAy9oeHxU9IgzjvJhHkUzhaj7rOUD7+YGWqUjLp5oSA==}
+    engines: {node: '>=4.x'}
+
   gulp-cached@1.1.1:
     resolution: {integrity: sha512-OEGsICR6Vmx0VK3nhpy5MGPzAjeDYC3+NKxNtJAu4DW8L15oy8tCe2WuD6HDEj9BsbSopnOBiXPK95YHvO0DpA==}
     engines: {node: '>= 0.9.0'}
@@ -8710,14 +9285,13 @@ packages:
     resolution: {integrity: sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==}
     engines: {node: '>= 0.4'}
 
-  hasown@2.0.2:
-    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
-    engines: {node: '>= 0.4'}
-
   he@1.2.0:
     resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
     hasBin: true
 
+  header-case@2.0.4:
+    resolution: {integrity: sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==}
+
   highlight.js@10.7.3:
     resolution: {integrity: sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==}
 
@@ -8914,10 +9488,6 @@ packages:
     resolution: {integrity: sha512-g7dmpshy+gD7mh88OC9NwSGTKoc3kyLAZQRU1mt53Aw/vnvfXnbC+F/7F7QoYVKbV+KNvJx8wArewKy1vXMtlg==}
     engines: {node: '>= 4'}
 
-  ignore@5.3.2:
-    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
-    engines: {node: '>= 4'}
-
   image-q@4.0.0:
     resolution: {integrity: sha512-PfJGVgIfKQJuq3s0tTDOKtztksibuUEbJQIYT3by6wctQo+Rdlh7ef4evJ5NCdxY4CfMbvFkocEwbl4BF8RlJw==}
 
@@ -9128,10 +9698,6 @@ packages:
   is-core-module@2.13.1:
     resolution: {integrity: sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==}
 
-  is-core-module@2.15.1:
-    resolution: {integrity: sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==}
-    engines: {node: '>= 0.4'}
-
   is-data-descriptor@1.0.1:
     resolution: {integrity: sha512-bc4NlCDiCr28U4aEsQ3Qs2491gVq4V8G7MQyws968ImqjKuYtTJXrl7Vq7jsN7Ly/C3xj5KWFrY7sHNeDkAzXw==}
     engines: {node: '>= 0.4'}
@@ -9451,6 +10017,9 @@ packages:
   is-yarn-global@0.3.0:
     resolution: {integrity: sha512-VjSeb/lHmkoyd8ryPVIKvOCn4D1koMqY+vqyjjUfc3xyKtP4dYOxM44sZrnqQSzSds3xyOrUTLTC9LVCVgLngw==}
 
+  isarray@0.0.1:
+    resolution: {integrity: sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==}
+
   isarray@1.0.0:
     resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
 
@@ -9738,6 +10307,10 @@ packages:
     resolution: {integrity: sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==}
     hasBin: true
 
+  js-yaml@4.0.0:
+    resolution: {integrity: sha512-pqon0s+4ScYUvX30wxQi3PogGFAlUyH0awepWvwkj4jD4v+ova3RiYw8bmA6x2rDrEaj8i/oWKoRxpVNW+Re8Q==}
+    hasBin: true
+
   js-yaml@4.1.0:
     resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
     hasBin: true
@@ -9754,6 +10327,24 @@ packages:
       '@babel/preset-env':
         optional: true
 
+  jsdoc-type-pratt-parser@3.1.0:
+    resolution: {integrity: sha512-MgtD0ZiCDk9B+eI73BextfRrVQl0oyzRG8B2BjORts6jbunj4ScKPcyXGTbB6eXL4y9TzxCm6hyeLq/2ASzNdw==}
+    engines: {node: '>=12.0.0'}
+
+  jsdom-global@3.0.2:
+    resolution: {integrity: sha512-t1KMcBkz/pT5JrvcJbpUR2u/w1kO9jXctaaGJ0vZDzwFnIvGWw9IDSRciT83kIs8Bnw4qpOl8bQK08V01YgMPg==}
+    peerDependencies:
+      jsdom: '>=10.0.0'
+
+  jsdom@18.1.1:
+    resolution: {integrity: sha512-NmJQbjQ/gpS/1at/ce3nCx89HbXL/f5OcenBe8wU1Eik0ROhyUc3LtmG3567dEHAGXkN8rmILW/qtCOPxPHQJw==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      canvas: ^2.5.0
+    peerDependenciesMeta:
+      canvas:
+        optional: true
+
   jsdom@24.0.0:
     resolution: {integrity: sha512-UDS2NayCvmXSXVP6mpTj+73JnNQadZlr9N68189xib2tx5Mls7swlTNao26IoHv46BZJFvXygyRtyXd1feAk1A==}
     engines: {node: '>=18'}
@@ -9807,6 +10398,11 @@ packages:
   json-stringify-safe@5.0.1:
     resolution: {integrity: sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==}
 
+  json5-with-undefined@2.1.301:
+    resolution: {integrity: sha512-GUI3FVAk5bJfh5yzjoqd82RebCIEBVFcqmLfoEGcaZulyMpqnqDm35GhX9zPakrU0/IS9m4PClmpofetg55Tvw==}
+    engines: {node: '>=6'}
+    hasBin: true
+
   json5@1.0.2:
     resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
     hasBin: true
@@ -9835,6 +10431,9 @@ packages:
   jstransformer@1.0.0:
     resolution: {integrity: sha512-C9YK3Rf8q6VAPDCCU9fnqo3mAfOH6vUGnMcP4AQAYIEpWtfGLpwOTmZ+igtdK5y+VvI2n3CyYSzy4Qh34eq24A==}
 
+  just-clone@6.2.0:
+    resolution: {integrity: sha512-1IynUYEc/HAwxhi3WDpIpxJbZpMCvvrrmZVqvj9EhpvbH8lls7HhdhiByjL7DkAaWlLIzpC0Xc/VPvy/UxLNjA==}
+
   just-debounce@1.1.0:
     resolution: {integrity: sha512-qpcRocdkUmf+UTNBYx5w6dexX5J31AKK1OmPwH630a83DdVVUIngk55RSAiIGpQyoH0dlr872VHfPjnQnK1qDQ==}
 
@@ -9844,6 +10443,9 @@ packages:
   just-diff@6.0.2:
     resolution: {integrity: sha512-S59eriX5u3/QhMNq3v/gm8Kd0w8OS6Tz2FS1NG4blv+z0MuQcBRJyFWjdovM0Rad4/P4aUPFtnkNjMjyMlMSYA==}
 
+  just-extend@4.2.1:
+    resolution: {integrity: sha512-g3UB796vUFIY90VIv/WX3L2c8CS2MdWUww3CNrYmqza1Fg0DURc2K/O4YrnklBdQarSJ/y8JnJYDGc+1iumQjg==}
+
   keyv@3.1.0:
     resolution: {integrity: sha512-9ykJ/46SN/9KPM/sichzQ7OvXyGDYKGTaDlKMGCAlg2UK8KRy4jb0d8sFc+0Tt0YYnThq8X2RZgCg74RPxgcVA==}
 
@@ -9927,6 +10529,13 @@ packages:
     resolution: {integrity: sha512-IpSVCk9AYvLHo5ctcIXxOBpMWUe+4TKN3VPWAKUbJikkmsGp0VrSM8IttVc32D6J4WUsiPE6aEFRNmIoF/gdow==}
     engines: {node: '>= 0.10'}
 
+  less-loader@11.1.4:
+    resolution: {integrity: sha512-6/GrYaB6QcW6Vj+/9ZPgKKs6G10YZai/l/eJ4SLwbzqNTBsAqt5hSLVF47TgsiBxV1P6eAU0GYRH3YRuQU9V3A==}
+    engines: {node: '>= 14.15.0'}
+    peerDependencies:
+      less: ^3.5.0 || ^4.0.0
+      webpack: ^5.0.0
+
   less@4.2.0:
     resolution: {integrity: sha512-P3b3HJDBtSzsXUl0im2L7gTO5Ubg8mEN6G8qoTS77iXxXX4Hvu4Qj540PZDvQ8V6DmX6iXo98k7Md0Cm1PrLaA==}
     engines: {node: '>=6'}
@@ -9971,10 +10580,6 @@ packages:
   lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
 
-  lines-and-columns@2.0.3:
-    resolution: {integrity: sha512-cNOjgCnLB+FnvWWtyRTzmB3POJ+cXxTA81LoW7u8JdmhfXzriropYwpjShnz1QLLWsQwY7nIxoDmcPTwphDK9w==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-
   lines-and-columns@2.0.4:
     resolution: {integrity: sha512-wM1+Z03eypVAVUCE7QdSqpVIvelbOakn1M0bPDoA4SGWPx3sNDVUiMo3L6To6WWGClB7VyXnhQ4Sn7gxiJbE6A==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -10075,6 +10680,9 @@ packages:
   lodash.flattendeep@4.4.0:
     resolution: {integrity: sha512-uHaJFihxmJcEX3kT4I23ABqKKalJ/zDrDg0lsFtc1h+3uw49SIJ5beyhx5ExVRti3AvKoOJngIj7xz3oylPdWQ==}
 
+  lodash.get@4.4.2:
+    resolution: {integrity: sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==}
+
   lodash.isfunction@3.0.9:
     resolution: {integrity: sha512-AirXNj15uRIMMPihnkInB4i3NHeb4iBtNg9WRWuK2o31S+ePwwNmDPaTL3o7dTJ+VXNZim7rFs4rxN4YU1oUJw==}
 
@@ -10139,6 +10747,10 @@ packages:
     resolution: {integrity: sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==}
     engines: {node: '>=4'}
 
+  log-symbols@4.0.0:
+    resolution: {integrity: sha512-FN8JBzLx6CzeMrB0tg6pqlGU1wCrXW+ZXGH481kfsBqer0hToTIiHdjH4Mq8xJUbvATujKCvaREGWpGUionraA==}
+    engines: {node: '>=10'}
+
   log-symbols@4.1.0:
     resolution: {integrity: sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==}
     engines: {node: '>=10'}
@@ -10471,6 +11083,9 @@ packages:
   memoizerific@1.11.3:
     resolution: {integrity: sha512-/EuHYwAPdLtXwAwSZkh/Gutery6pD2KYd44oQLhAvQp/50mpyduZh8Q7PYHXTCJ+wuXxt7oij2LXyIJOOYFPog==}
 
+  memory-fs@0.4.1:
+    resolution: {integrity: sha512-cda4JKCxReDXFXRqOHPQscuIYg1PvxbE2S2GP45rnwfEK+vZaXC8C1OFvdHIbgw0DLzowXGVoxLaAmlgRy14GQ==}
+
   memorystream@0.3.1:
     resolution: {integrity: sha512-S3UwM3yj5mtUSEfP41UZmt/0SCoVYUcU1rkXv+BQ5Ig8ndL4sPoJNBUJERafdPb5jjHJGuMgytgKvKIf58XNBw==}
     engines: {node: '>= 0.10.0'}
@@ -10604,14 +11219,18 @@ packages:
     resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==}
     engines: {node: '>=8.6'}
 
-  micromatch@4.0.8:
-    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
-    engines: {node: '>=8.6'}
+  mime-db@1.33.0:
+    resolution: {integrity: sha512-BHJ/EKruNIqJf/QahvxwQZXKygOQ256myeN/Ew+THcAa5q+PjyTTMMeNQC4DZw5AwfvelsUrA6B67NKMqXDbzQ==}
+    engines: {node: '>= 0.6'}
 
   mime-db@1.52.0:
     resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
     engines: {node: '>= 0.6'}
 
+  mime-types@2.1.18:
+    resolution: {integrity: sha512-lc/aahn+t4/SWV/qcmumYjymLsWfN3ELhpmVuUFjgsORruuZPVSwAQryq+HHGvO/SI2KVX26bx+En+zhM8g8hQ==}
+    engines: {node: '>= 0.6'}
+
   mime-types@2.1.35:
     resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
     engines: {node: '>= 0.6'}
@@ -10667,6 +11286,9 @@ packages:
   minimalistic-assert@1.0.1:
     resolution: {integrity: sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==}
 
+  minimatch@3.0.4:
+    resolution: {integrity: sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==}
+
   minimatch@3.0.5:
     resolution: {integrity: sha512-tUpxzX0VAzJHjLu0xUfFv1gwVp9ba3IOuRAVH2EGuRW8a5emA2FlACLqiT/lDVtS1W+TGNwqz3sWaNyLgDJWuw==}
 
@@ -10779,6 +11401,18 @@ packages:
     engines: {node: '>= 14.0.0'}
     hasBin: true
 
+  mocha@8.4.0:
+    resolution: {integrity: sha512-hJaO0mwDXmZS4ghXsvPVriOhsxQ7ofcpQdm8dE+jISUOKopitvnXFQmpRR7jd2K6VBG6E26gU3IAbXXGIbu4sQ==}
+    engines: {node: '>= 10.12.0'}
+    hasBin: true
+
+  mochapack@2.1.4:
+    resolution: {integrity: sha512-qoZYT8ibht6z35e936P6Y/3nynFX843Jm+2l/pNWB3Sue63IHBfqZeAnF6Ypez85kUll7HtapMogfO2hGb2N2Q==}
+    hasBin: true
+    peerDependencies:
+      mocha: '>=6'
+      webpack: ^4.0.0 || ^5.0.0
+
   modify-values@1.0.1:
     resolution: {integrity: sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==}
     engines: {node: '>=0.10.0'}
@@ -10803,6 +11437,9 @@ packages:
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
+  muggle-string@0.3.1:
+    resolution: {integrity: sha512-ckmWDJjphvd/FvZawgygcUeQCxzvohjFO5RxTjj4eq8kw359gFF3E1brjfI+viLMxss5JrHTDRHZvu2/tuy0Qg==}
+
   muggle-string@0.4.1:
     resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==}
 
@@ -10842,6 +11479,11 @@ packages:
   nan@2.18.0:
     resolution: {integrity: sha512-W7tfG7vMOGtD30sHoZSSc/JVYiyDPEyQVso/Zz+/uQd0B0L46gtC+pHha5FFMRpil6fm/AoEcRWyOVi4+E/f8w==}
 
+  nanoid@3.1.20:
+    resolution: {integrity: sha512-a1cQNyczgKbLX9jwbS/+d7W8fX/RfgYR7lVWwWOGIPNgK2m0MWvrGF6/m4kk6U3QcFMnZf3RIhL0v2Jgh/0Uxw==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
   nanoid@3.3.3:
     resolution: {integrity: sha512-p1sjXuopFs0xg+fPASzQ28agW1oHD7xDsd9Xkf3T15H3c/cifrFHVwrh74PdoklAPi+i7MdRsE47vm2r6JoB+w==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -10856,6 +11498,9 @@ packages:
     resolution: {integrity: sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==}
     engines: {node: '>=0.10.0'}
 
+  natural-compare-lite@1.4.0:
+    resolution: {integrity: sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==}
+
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
@@ -10880,6 +11525,9 @@ packages:
   nice-try@1.0.5:
     resolution: {integrity: sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==}
 
+  nise@5.1.5:
+    resolution: {integrity: sha512-VJuPIfUFaXNRzETTQEEItTOP8Y171ijr+JLq42wHes3DiryR8vT+1TXQW/Rx8JNUhyYYWyIvjXTU6dOhJcs9Nw==}
+
   no-case@3.0.4:
     resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==}
 
@@ -10929,6 +11577,9 @@ packages:
   node-releases@2.0.13:
     resolution: {integrity: sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==}
 
+  nodent-runtime@3.2.1:
+    resolution: {integrity: sha512-7Ws63oC+215smeKJQCxzrK21VFVlCFBkwl0MOObt0HOpVQXs3u483sAmtkF33nNqZ5rSOQjB76fgyPBmAUrtCA==}
+
   nopt@6.0.0:
     resolution: {integrity: sha512-ZwLpbTgdhuZUnZzjd7nb1ZV+4DoiC6/sfiVKok72ym/4Tlf+DFdlHYmT2JPmcNNWV6Pi3SDf1kT+A4r9RTuT9g==}
     engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
@@ -11322,11 +11973,11 @@ packages:
   nwsapi@2.2.7:
     resolution: {integrity: sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ==}
 
-  nx@19.8.0:
-    resolution: {integrity: sha512-zD1ZvkfxECrd9QnvUyAUVLESmjl0bpIhB1gLcYN2BqsCkB1vkngbxIvXDorI98keOVEfHzeuwNSkufQNls1hug==}
+  nx@17.2.1:
+    resolution: {integrity: sha512-DfjJQmdcdcgBkvNnFkN1z2VU4sweMF6WF6ZEjQ+GsFs3xglhT7KLjCvo0Q8owUSx2I28THUw7E5LAGmKzgiG/Q==}
     hasBin: true
     peerDependencies:
-      '@swc-node/register': ^1.8.0
+      '@swc-node/register': ^1.6.7
       '@swc/core': ^1.3.85
     peerDependenciesMeta:
       '@swc-node/register':
@@ -11442,10 +12093,6 @@ packages:
     resolution: {integrity: sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==}
     engines: {node: '>= 0.8.0'}
 
-  ora@5.3.0:
-    resolution: {integrity: sha512-zAKMgGXUim0Jyd6CXK9lraBnD3H5yPGBPPOkC23a2BG6hsm4Zu6OQSjQuEtV0BHDf4aKHcUFvJiGRrFuW3MG8g==}
-    engines: {node: '>=10'}
-
   ora@5.4.1:
     resolution: {integrity: sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==}
     engines: {node: '>=10'}
@@ -11667,9 +12314,6 @@ packages:
   pako@1.0.11:
     resolution: {integrity: sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==}
 
-  pako@2.1.0:
-    resolution: {integrity: sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==}
-
   param-case@3.0.4:
     resolution: {integrity: sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==}
 
@@ -11763,6 +12407,9 @@ packages:
   path-browserify@1.0.1:
     resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
 
+  path-case@3.0.4:
+    resolution: {integrity: sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==}
+
   path-dirname@1.0.2:
     resolution: {integrity: sha512-ALzNPpyNq9AqXMBjeymIjFDAkAFH06mHJH/cSBHAgU0s4vfpBn6b2nf8tiRLvagKD8RbTpq2FKTBg7cl9l3c7Q==}
 
@@ -11786,6 +12433,9 @@ packages:
     resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
     engines: {node: '>=0.10.0'}
 
+  path-is-inside@1.0.2:
+    resolution: {integrity: sha512-DUWJr3+ULp4zXmol/SZkFf3JGsS9/SIv+Y3Rt93/UjPpDpklB5f1er4O3POIbUuUJ3FXgqte2Q7SrU6zAqwk8w==}
+
   path-key@2.0.1:
     resolution: {integrity: sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==}
     engines: {node: '>=4'}
@@ -11816,6 +12466,12 @@ packages:
   path-to-regexp@0.1.7:
     resolution: {integrity: sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==}
 
+  path-to-regexp@1.8.0:
+    resolution: {integrity: sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==}
+
+  path-to-regexp@2.2.1:
+    resolution: {integrity: sha512-gu9bD6Ta5bwGrrU8muHzVOBFFREpp2iRkVfhBJahwJ6p6Xw20SjT0MxLnwkjOibQmGSYhiUnf2FLe7k+jcFmGQ==}
+
   path-to-regexp@6.2.1:
     resolution: {integrity: sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw==}
 
@@ -12632,6 +13288,10 @@ packages:
     resolution: {integrity: sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==}
     engines: {node: ^10 || ^12 || >=14}
 
+  postcss@8.4.45:
+    resolution: {integrity: sha512-7KTLTdzdZZYscUc65XmjFiB73vBhBfbPztCYdUNvlaso9PrzjzcmjqBPR0lNGkcVlcO4BjiO5rK/qNz+XAen1Q==}
+    engines: {node: ^10 || ^12 || >=14}
+
   preact@10.18.2:
     resolution: {integrity: sha512-X/K43vocUHDg0XhWVmTTMbec4LT/iBMh+csCEqJk+pJqegaXsvjdqN80ZZ3L+93azWCnWCZ+WGwYb8SplxeNjA==}
 
@@ -12926,12 +13586,19 @@ packages:
     resolution: {integrity: sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==}
     engines: {node: '>=10'}
 
+  rambda@7.5.0:
+    resolution: {integrity: sha512-y/M9weqWAH4iopRd7EHDEQQvpFPHj1AA3oHozE9tfITHUtTR7Z9PSlIRRG2l1GuW7sefC1cXFfIcF+cgnShdBA==}
+
   ramda@0.29.0:
     resolution: {integrity: sha512-BBea6L67bYLtdbOqfp8f58fPMqEwx0doL+pAi8TZyp2YWz8R9G8z9x75CZI8W+ftqhFHCpEX2cRnUUXK130iKA==}
 
   randombytes@2.1.0:
     resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==}
 
+  range-parser@1.2.0:
+    resolution: {integrity: sha512-kA5WQoNVo4t9lNx2kQNFCxKeBl5IbbSNBl1M/tLkw9WCn+hxNBAW5Qh8gdhs63CJnhjJ2zQWFoqPJP2sK1AV5A==}
+    engines: {node: '>= 0.6'}
+
   range-parser@1.2.1:
     resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==}
     engines: {node: '>= 0.6'}
@@ -13078,6 +13745,10 @@ packages:
     resolution: {integrity: sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==}
     engines: {node: '>=0.10'}
 
+  readdirp@3.5.0:
+    resolution: {integrity: sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==}
+    engines: {node: '>=8.10.0'}
+
   readdirp@3.6.0:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
@@ -13140,6 +13811,9 @@ packages:
     resolution: {integrity: sha512-RAM5FlZz+Lhmo7db9L298p2vHP5ZywrVXmVXpmAD9GuL5MPH6t9ROw1iA/wfHkQ76Qe7AaPF0nGuim96/IrQMQ==}
     engines: {node: '>=4'}
 
+  registry-auth-token@3.3.2:
+    resolution: {integrity: sha512-JL39c60XlzCVgNrO+qq68FoNb56w/m7JYvGR2jT5iR1xBrUA3Mfx5Twk5rqTThPmQKMWydGmq8oFtDlxfrmxnQ==}
+
   registry-auth-token@3.4.0:
     resolution: {integrity: sha512-4LM6Fw8eBQdwMYcES4yTnn2TqIasbXuwDx3um+QRs7S55aMKCBKBxvPXl2RiUjHwuJLTyYfxSpmfSAjQpcuP+A==}
 
@@ -13445,6 +14119,10 @@ packages:
   sax@1.3.0:
     resolution: {integrity: sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==}
 
+  saxes@5.0.1:
+    resolution: {integrity: sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==}
+    engines: {node: '>=10'}
+
   saxes@6.0.0:
     resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
     engines: {node: '>=v12.22.7'}
@@ -13531,13 +14209,13 @@ packages:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
 
-  semver@7.5.4:
-    resolution: {integrity: sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==}
+  semver@7.5.3:
+    resolution: {integrity: sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==}
     engines: {node: '>=10'}
     hasBin: true
 
-  semver@7.6.3:
-    resolution: {integrity: sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==}
+  semver@7.5.4:
+    resolution: {integrity: sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==}
     engines: {node: '>=10'}
     hasBin: true
 
@@ -13545,16 +14223,25 @@ packages:
     resolution: {integrity: sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==}
     engines: {node: '>= 0.8.0'}
 
+  sentence-case@3.0.4:
+    resolution: {integrity: sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==}
+
   serialize-error@7.0.1:
     resolution: {integrity: sha512-8I8TjW5KMOKsZQTvoxjuSIa7foAwPWGOts+6o7sgjz41/qMD9VQHEDxi6PBvK2l0MXUmqZyNpUK+T2tQaaElvw==}
     engines: {node: '>=10'}
 
+  serialize-javascript@5.0.1:
+    resolution: {integrity: sha512-SaaNal9imEO737H2c05Og0/8LUXG7EnsZyMa8MzkmuHoELfT6txuj0cMqRj6zfPKnmQ1yasR4PCJc8x+M4JSPA==}
+
   serialize-javascript@6.0.0:
     resolution: {integrity: sha512-Qr3TosvguFt8ePWqsvRfrKyQXIiW+nGbYpy8XK24NQHE83caxWt+mIymTT19DGFbNWNLfEwsrkSmN64lVWB9ag==}
 
   serialize-javascript@6.0.1:
     resolution: {integrity: sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==}
 
+  serve-handler@6.1.3:
+    resolution: {integrity: sha512-FosMqFBNrLyeiIDvP1zgO6YoTzFYHxLDEIavhlmQ+knB2Z7l1t+kGLHkZIDN7UVWqQAmKI3D20A6F6jo3nDd4w==}
+
   serve-index@1.9.1:
     resolution: {integrity: sha512-pXHfKNP4qujrtteMrSBb0rc8HJ9Ms/GrXwcUtUtD5s4ewDJI8bT3Cz2zTVRMKtri49pLx2e0Ya8ziP5Ya2pZZw==}
     engines: {node: '>= 0.8.0'}
@@ -13563,6 +14250,10 @@ packages:
     resolution: {integrity: sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==}
     engines: {node: '>= 0.8.0'}
 
+  serve@13.0.4:
+    resolution: {integrity: sha512-Lj8rhXmphJCRQVv5qwu0NQZ2h+0MrRyRJxDZu5y3qLH2i/XY6a0FPj/VmjMUdkJb672MBfE8hJ274PU6JzBd0Q==}
+    hasBin: true
+
   set-blocking@2.0.0:
     resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
 
@@ -13642,6 +14333,10 @@ packages:
     resolution: {integrity: sha512-2A3WvXkQurhuMgORgT60r6pOWiCOO5LlEqY2ADxGBDGVYLSo5HN0uLtb68YpVpuL/Vi8mLTe7+0Dx2Fq8lLqEg==}
     engines: {node: ^16.14.0 || >=18.0.0}
 
+  sinon@15.2.0:
+    resolution: {integrity: sha512-nPS85arNqwBXaIsFCkolHjGIkFo+Oxu9vbgmBJizLAhqe6P2o3Qmj3KCUoRkfhHtvgDhZdWD3risLHAUJ8npjw==}
+    deprecated: 16.1.1
+
   sirv@2.0.3:
     resolution: {integrity: sha512-O9jm9BsID1P+0HOi81VpXPoDxYP374pkOLzACAoyUQ/3OUVndNpsz6wMnY2z+yOxzbllCKZrM+9QrWsv4THnyA==}
     engines: {node: '>= 10'}
@@ -13690,6 +14385,9 @@ packages:
     resolution: {integrity: sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==}
     engines: {node: '>= 6.0.0', npm: '>= 3.0.0'}
 
+  snake-case@3.0.4:
+    resolution: {integrity: sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==}
+
   snapdragon-node@2.1.1:
     resolution: {integrity: sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==}
     engines: {node: '>=0.10.0'}
@@ -14453,6 +15151,9 @@ packages:
     resolution: {integrity: sha512-6udB24Q737UD/SDsKAHI9FCRP7Bqc9D/MQUV02ORQg5iskjtLJlZJNdN4kKtcdtwCeWIwIHDGaUsTsCCAa8sFQ==}
     engines: {node: '>=10'}
 
+  toposort@2.0.2:
+    resolution: {integrity: sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==}
+
   totalist@3.0.1:
     resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
     engines: {node: '>=6'}
@@ -14464,6 +15165,10 @@ packages:
   tr46@0.0.3:
     resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
 
+  tr46@3.0.0:
+    resolution: {integrity: sha512-l7FvfAHlcmulp8kr+flpQZmVwtu7nfRV7NZujtN0OqES8EL4O4e0qqzL0DC5gAvx/ZC/9lk6rhcUwYvkBnBnYA==}
+    engines: {node: '>=12'}
+
   tr46@5.0.0:
     resolution: {integrity: sha512-tk2G5R2KRwBd+ZN0zaEXpmzdKyOYksXwywulIX95MBODjSzMIuQnQ3m8JxgbhnL1LeVo7lqQKsYa1O3Htl7K5g==}
     engines: {node: '>=18'}
@@ -14703,9 +15408,6 @@ packages:
   undici-types@5.26.5:
     resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
 
-  undici-types@6.19.8:
-    resolution: {integrity: sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==}
-
   unherit@1.1.3:
     resolution: {integrity: sha512-Ft16BJcnapDKp0+J/rqFC3Rrk6Y/Ng4nzsC028k2jdDII/rdZ7Wd3pPT/6+vIIxRagwRc9K0IUX0Ra4fKvw+WQ==}
 
@@ -14867,10 +15569,19 @@ packages:
     peerDependencies:
       browserslist: '>= 4.21.0'
 
+  update-check@1.5.2:
+    resolution: {integrity: sha512-1TrmYLuLj/5ZovwUS7fFd1jMH3NnFDN1y1A8dboedIDt7zs/zJMo6TwwlhYKkSeEwzleeiSBV5/3c9ufAQWDaQ==}
+
   update-notifier@5.1.0:
     resolution: {integrity: sha512-ItnICHbeMh9GqUy31hFPrD1kcuZ3rpxDZbf4KUDavXwS0bW5m7SLbDQpGX3UYr072cbrF5hFUs3r5tUsPwjfHw==}
     engines: {node: '>=10'}
 
+  upper-case-first@2.0.2:
+    resolution: {integrity: sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==}
+
+  upper-case@2.0.2:
+    resolution: {integrity: sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg==}
+
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
@@ -15243,6 +15954,18 @@ packages:
     peerDependencies:
       vue: ^2.6 || ^3.2
 
+  vue-tsc@0.38.9:
+    resolution: {integrity: sha512-Yoy5phgvGqyF98Fb4mYqboR4Q149jrdcGv5kSmufXJUq++RZJ2iMVG0g6zl+v3t4ORVWkQmRpsV4x2szufZ0LQ==}
+    hasBin: true
+    peerDependencies:
+      typescript: '*'
+
+  vue-tsc@1.8.25:
+    resolution: {integrity: sha512-lHsRhDc/Y7LINvYhZ3pv4elflFADoEOo67vfClAfF2heVHpHmVquLSjojgCSIwzA4F0Pc4vowT/psXCYcfk+iQ==}
+    hasBin: true
+    peerDependencies:
+      typescript: '*'
+
   vue-tsc@2.0.29:
     resolution: {integrity: sha512-MHhsfyxO3mYShZCGYNziSbc63x7cQ5g9kvijV7dRe1TTXBRLxXyL0FnXWpUF1xII2mJ86mwYpYsUmMwkmerq7Q==}
     hasBin: true
@@ -15299,9 +16022,17 @@ packages:
     resolution: {integrity: sha512-evkv5PtX5pdlEyY5EcEV+rN/HTmi8iG7ZcvAnMFfYKWdvKiUjE+/DPwZfmE8emx33FEE2htbAKgtruABTocEjA==}
     hasBin: true
 
+  w3c-hr-time@1.0.2:
+    resolution: {integrity: sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==}
+    deprecated: Use your platform's native performance.now() and performance.timeOrigin.
+
   w3c-keyname@2.2.8:
     resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
 
+  w3c-xmlserializer@3.0.0:
+    resolution: {integrity: sha512-3WFqGEgSXIyGhOmAFtlicJNMjEps8b1MG31NCA0/vOF9+nKMUW1ckhi9cnNHmf88Rzw5V+dwIwsm2C7X8k9aQg==}
+    engines: {node: '>=12'}
+
   w3c-xmlserializer@5.0.0:
     resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
     engines: {node: '>=18'}
@@ -15414,10 +16145,22 @@ packages:
   whatwg-fetch@3.6.19:
     resolution: {integrity: sha512-d67JP4dHSbm2TrpFj8AbO8DnL1JXL5J9u0Kq2xW6d0TFDbCA3Muhdt8orXC22utleTVj7Prqt82baN6RBvnEgw==}
 
+  whatwg-mimetype@3.0.0:
+    resolution: {integrity: sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==}
+    engines: {node: '>=12'}
+
   whatwg-mimetype@4.0.0:
     resolution: {integrity: sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==}
     engines: {node: '>=18'}
 
+  whatwg-url@10.0.0:
+    resolution: {integrity: sha512-CLxxCmdUby142H5FZzn4D8ikO1cmypvXVQktsgosNy4a4BHrDHeciBBGZhb0bNoR5/MltoCatso+vFjjGx8t0w==}
+    engines: {node: '>=12'}
+
+  whatwg-url@11.0.0:
+    resolution: {integrity: sha512-RKT8HExMpoYx4igMiVMY83lN6UeITKJlBQ+vR/8ZJ8OCdSiN3RwCq+9gH0+Xzj0+5IrM6i4j/6LuvzbZIQgEcQ==}
+    engines: {node: '>=12'}
+
   whatwg-url@14.0.0:
     resolution: {integrity: sha512-1lfMEm2IEr7RIV+f4lUNPOqfFL+pO+Xw3fJSqmjX9AbXcXcYOkCe1P6+9VBZB6n94af16NfZf+sSk0JCBZC9aw==}
     engines: {node: '>=18'}
@@ -15469,6 +16212,9 @@ packages:
     engines: {node: '>=8'}
     hasBin: true
 
+  wide-align@1.1.3:
+    resolution: {integrity: sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==}
+
   wide-align@1.1.5:
     resolution: {integrity: sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==}
 
@@ -15486,6 +16232,9 @@ packages:
   wordwrap@1.0.0:
     resolution: {integrity: sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==}
 
+  workerpool@6.1.0:
+    resolution: {integrity: sha512-toV7q9rWNYha963Pl/qyeZ6wG+3nnsyvolaNUS8+R5Wtw6qJPTxIlOP1ZSvcGhEJw+l3HMMmtiNo9Gl61G4GVg==}
+
   workerpool@6.2.1:
     resolution: {integrity: sha512-ILEIE97kDZvF9Wb9f6h5aXK4swSlKGUcOEGiIYb2OOu/IrDU9iwj0fD//SsA6E5ibwJxpEvhullJY4Sl4GcpAw==}
 
@@ -15497,6 +16246,10 @@ packages:
     resolution: {integrity: sha512-iXR3tDXpbnTpzjKSylUJRkLuOrEC7hwEB221cgn6wtF8wpmz28puFXAEfPT5zrjM3wahygB//VuWEr1vTkDcNQ==}
     engines: {node: '>=4'}
 
+  wrap-ansi@5.1.0:
+    resolution: {integrity: sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==}
+    engines: {node: '>=6'}
+
   wrap-ansi@6.2.0:
     resolution: {integrity: sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==}
     engines: {node: '>=8'}
@@ -15569,18 +16322,6 @@ packages:
       utf-8-validate:
         optional: true
 
-  ws@8.18.0:
-    resolution: {integrity: sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==}
-    engines: {node: '>=10.0.0'}
-    peerDependencies:
-      bufferutil: ^4.0.1
-      utf-8-validate: '>=5.0.2'
-    peerDependenciesMeta:
-      bufferutil:
-        optional: true
-      utf-8-validate:
-        optional: true
-
   x-is-string@0.1.0:
     resolution: {integrity: sha512-GojqklwG8gpzOVEVki5KudKNoq7MbbjYZCbyWzEz7tyPA7eleiE0+ePwOWQQRb5fm86rD3S8Tc0tSFf3AOv50w==}
 
@@ -15658,6 +16399,9 @@ packages:
   yargs-parser@10.1.0:
     resolution: {integrity: sha512-VCIyR1wJoEBZUqk5PA+oOBF6ypbwh5aNB3I50guxAL/quggdfs4TtNHQrSazFA3fYZ+tEqfs0zIGlv0c/rgjbQ==}
 
+  yargs-parser@13.1.2:
+    resolution: {integrity: sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==}
+
   yargs-parser@18.1.3:
     resolution: {integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==}
     engines: {node: '>=6'}
@@ -15681,6 +16425,9 @@ packages:
     resolution: {integrity: sha512-7pRTIA9Qc1caZ0bZ6RYRGbHJthJWuakf+WmHK0rVeLkNrrGhfoabBNdue6kdINI6r4if7ocq9aD/n7xwKOdzOA==}
     engines: {node: '>=10'}
 
+  yargs@14.0.0:
+    resolution: {integrity: sha512-ssa5JuRjMeZEUjg7bEL99AwpitxU/zWGAGpdj0di41pOEmJti8NR6kyUIJBkR78DTYNPZOU08luUo0GTHuB+ow==}
+
   yargs@15.4.1:
     resolution: {integrity: sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==}
     engines: {node: '>=8'}
@@ -15865,6 +16612,11 @@ snapshots:
       '@babel/highlight': 7.22.20
       chalk: 2.4.2
 
+  '@babel/code-frame@7.24.7':
+    dependencies:
+      '@babel/highlight': 7.24.7
+      picocolors: 1.0.1
+
   '@babel/compat-data@7.23.3': {}
 
   '@babel/core@7.23.2':
@@ -15894,6 +16646,13 @@ snapshots:
       '@jridgewell/trace-mapping': 0.3.20
       jsesc: 2.5.2
 
+  '@babel/generator@7.25.6':
+    dependencies:
+      '@babel/types': 7.25.6
+      '@jridgewell/gen-mapping': 0.3.5
+      '@jridgewell/trace-mapping': 0.3.25
+      jsesc: 2.5.2
+
   '@babel/helper-annotate-as-pure@7.22.5':
     dependencies:
       '@babel/types': 7.23.0
@@ -15960,6 +16719,13 @@ snapshots:
     dependencies:
       '@babel/types': 7.23.0
 
+  '@babel/helper-module-imports@7.24.7':
+    dependencies:
+      '@babel/traverse': 7.25.6
+      '@babel/types': 7.25.6
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/helper-module-transforms@7.23.3(@babel/core@7.23.2)':
     dependencies:
       '@babel/core': 7.23.2
@@ -15975,6 +16741,8 @@ snapshots:
 
   '@babel/helper-plugin-utils@7.22.5': {}
 
+  '@babel/helper-plugin-utils@7.24.8': {}
+
   '@babel/helper-remap-async-to-generator@7.22.20(@babel/core@7.23.2)':
     dependencies:
       '@babel/core': 7.23.2
@@ -16003,8 +16771,12 @@ snapshots:
 
   '@babel/helper-string-parser@7.22.5': {}
 
+  '@babel/helper-string-parser@7.24.8': {}
+
   '@babel/helper-validator-identifier@7.22.20': {}
 
+  '@babel/helper-validator-identifier@7.24.7': {}
+
   '@babel/helper-validator-option@7.22.15': {}
 
   '@babel/helper-wrap-function@7.22.20':
@@ -16027,10 +16799,21 @@ snapshots:
       chalk: 2.4.2
       js-tokens: 4.0.0
 
+  '@babel/highlight@7.24.7':
+    dependencies:
+      '@babel/helper-validator-identifier': 7.24.7
+      chalk: 2.4.2
+      js-tokens: 4.0.0
+      picocolors: 1.0.1
+
   '@babel/parser@7.23.9':
     dependencies:
       '@babel/types': 7.23.0
 
+  '@babel/parser@7.25.6':
+    dependencies:
+      '@babel/types': 7.25.6
+
   '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.23.3(@babel/core@7.23.2)':
     dependencies:
       '@babel/core': 7.23.2
@@ -16113,6 +16896,11 @@ snapshots:
       '@babel/core': 7.23.2
       '@babel/helper-plugin-utils': 7.22.5
 
+  '@babel/plugin-syntax-jsx@7.24.7(@babel/core@7.23.2)':
+    dependencies:
+      '@babel/core': 7.23.2
+      '@babel/helper-plugin-utils': 7.24.8
+
   '@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.23.2)':
     dependencies:
       '@babel/core': 7.23.2
@@ -16590,6 +17378,11 @@ snapshots:
 
   '@babel/regjsgen@0.8.0': {}
 
+  '@babel/runtime-corejs2@7.25.6':
+    dependencies:
+      core-js: 2.6.12
+      regenerator-runtime: 0.14.0
+
   '@babel/runtime@7.23.2':
     dependencies:
       regenerator-runtime: 0.14.0
@@ -16600,6 +17393,12 @@ snapshots:
       '@babel/parser': 7.23.9
       '@babel/types': 7.23.0
 
+  '@babel/template@7.25.0':
+    dependencies:
+      '@babel/code-frame': 7.24.7
+      '@babel/parser': 7.25.6
+      '@babel/types': 7.25.6
+
   '@babel/traverse@7.23.2':
     dependencies:
       '@babel/code-frame': 7.22.13
@@ -16615,12 +17414,30 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/traverse@7.25.6':
+    dependencies:
+      '@babel/code-frame': 7.24.7
+      '@babel/generator': 7.25.6
+      '@babel/parser': 7.25.6
+      '@babel/template': 7.25.0
+      '@babel/types': 7.25.6
+      debug: 4.3.6
+      globals: 11.12.0
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/types@7.23.0':
     dependencies:
       '@babel/helper-string-parser': 7.22.5
       '@babel/helper-validator-identifier': 7.22.20
       to-fast-properties: 2.0.0
 
+  '@babel/types@7.25.6':
+    dependencies:
+      '@babel/helper-string-parser': 7.24.8
+      '@babel/helper-validator-identifier': 7.24.7
+      to-fast-properties: 2.0.0
+
   '@bcoe/v8-coverage@0.2.3': {}
 
   '@bundled-es-modules/deepmerge@4.3.1':
@@ -16795,6 +17612,26 @@ snapshots:
       compare-func: 2.0.0
       q: 1.5.1
 
+  '@dialpad/dialtone-combinator@0.3.1': {}
+
+  '@dialpad/dialtone-vue@3.13.0(@dialpad/dialtone@6.35.0(react-dom@16.14.0(react@16.14.0))(react@16.14.0))(vue@3.4.15(typescript@5.4.2))':
+    dependencies:
+      '@dialpad/dialtone': 6.35.0(react-dom@16.14.0(react@16.14.0))(react@16.14.0)
+      emoji-regex: 10.3.0
+      emoji-toolkit: 6.6.0
+      tippy.js: 6.3.7
+      vue: 3.4.15(typescript@5.4.2)
+
+  '@dialpad/dialtone@6.35.0(react-dom@16.14.0(react@16.14.0))(react@16.14.0)':
+    dependencies:
+      '@docsearch/js': 3.5.2(@algolia/client-search@4.20.0)(@types/react@18.2.37)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(search-insights@2.10.0)
+    transitivePeerDependencies:
+      - '@algolia/client-search'
+      - '@types/react'
+      - react
+      - react-dom
+      - search-insights
+
   '@dialpad/postcss-responsive-variations@1.1.5(postcss@8.4.39)':
     dependencies:
       postcss: 8.4.39
@@ -16837,23 +17674,16 @@ snapshots:
     transitivePeerDependencies:
       - '@algolia/client-search'
 
-  '@emnapi/core@1.2.0':
-    dependencies:
-      '@emnapi/wasi-threads': 1.0.1
-      tslib: 2.6.2
-
-  '@emnapi/runtime@1.2.0':
-    dependencies:
-      tslib: 2.6.2
-
-  '@emnapi/wasi-threads@1.0.1':
-    dependencies:
-      tslib: 2.6.2
-
   '@emotion/use-insertion-effect-with-fallbacks@1.0.1(react@16.14.0)':
     dependencies:
       react: 16.14.0
 
+  '@es-joy/jsdoccomment@0.36.1':
+    dependencies:
+      comment-parser: 1.3.1
+      esquery: 1.5.0
+      jsdoc-type-pratt-parser: 3.1.0
+
   '@esbuild/aix-ppc64@0.21.5':
     optional: true
 
@@ -17649,10 +18479,18 @@ snapshots:
       '@jridgewell/sourcemap-codec': 1.5.0
       '@jridgewell/trace-mapping': 0.3.20
 
+  '@jridgewell/gen-mapping@0.3.5':
+    dependencies:
+      '@jridgewell/set-array': 1.2.1
+      '@jridgewell/sourcemap-codec': 1.5.0
+      '@jridgewell/trace-mapping': 0.3.25
+
   '@jridgewell/resolve-uri@3.1.1': {}
 
   '@jridgewell/set-array@1.1.2': {}
 
+  '@jridgewell/set-array@1.2.1': {}
+
   '@jridgewell/source-map@0.3.5':
     dependencies:
       '@jridgewell/gen-mapping': 0.3.3
@@ -17665,6 +18503,11 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.1
       '@jridgewell/sourcemap-codec': 1.5.0
 
+  '@jridgewell/trace-mapping@0.3.25':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.1
+      '@jridgewell/sourcemap-codec': 1.5.0
+
   '@jsonjoy.com/base64@1.1.2(tslib@2.6.2)':
     dependencies:
       tslib: 2.6.2
@@ -17752,23 +18595,23 @@ snapshots:
       '@types/react': 18.2.37
       react: 16.14.0
 
-  '@microsoft/api-extractor-model@7.29.4(@types/node@18.18.9)':
+  '@microsoft/api-extractor-model@7.29.4(@types/node@20.9.0)':
     dependencies:
       '@microsoft/tsdoc': 0.15.0
       '@microsoft/tsdoc-config': 0.17.0
-      '@rushstack/node-core-library': 5.5.1(@types/node@18.18.9)
+      '@rushstack/node-core-library': 5.5.1(@types/node@20.9.0)
     transitivePeerDependencies:
       - '@types/node'
 
-  '@microsoft/api-extractor@7.47.4(@types/node@18.18.9)':
+  '@microsoft/api-extractor@7.47.4(@types/node@20.9.0)':
     dependencies:
-      '@microsoft/api-extractor-model': 7.29.4(@types/node@18.18.9)
+      '@microsoft/api-extractor-model': 7.29.4(@types/node@20.9.0)
       '@microsoft/tsdoc': 0.15.0
       '@microsoft/tsdoc-config': 0.17.0
-      '@rushstack/node-core-library': 5.5.1(@types/node@18.18.9)
+      '@rushstack/node-core-library': 5.5.1(@types/node@20.9.0)
       '@rushstack/rig-package': 0.5.3
-      '@rushstack/terminal': 0.13.3(@types/node@18.18.9)
-      '@rushstack/ts-command-line': 4.22.3(@types/node@18.18.9)
+      '@rushstack/terminal': 0.13.3(@types/node@20.9.0)
+      '@rushstack/ts-command-line': 4.22.3(@types/node@20.9.0)
       lodash: 4.17.21
       minimatch: 3.0.5
       resolve: 1.22.8
@@ -17792,12 +18635,6 @@ snapshots:
       call-me-maybe: 1.0.2
       glob-to-regexp: 0.3.0
 
-  '@napi-rs/wasm-runtime@0.2.4':
-    dependencies:
-      '@emnapi/core': 1.2.0
-      '@emnapi/runtime': 1.2.0
-      '@tybys/wasm-util': 0.9.0
-
   '@ndelangen/get-tarball@3.0.9':
     dependencies:
       gunzip-maybe: 1.4.2
@@ -17863,7 +18700,7 @@ snapshots:
       promise-all-reject-late: 1.0.1
       promise-call-limit: 3.0.1
       read-package-json-fast: 3.0.2
-      semver: 7.6.3
+      semver: 7.5.4
       ssri: 10.0.5
       treeverse: 3.0.0
       walk-up-path: 3.0.1
@@ -17874,11 +18711,11 @@ snapshots:
   '@npmcli/fs@2.1.2':
     dependencies:
       '@gar/promisify': 1.1.3
-      semver: 7.6.3
+      semver: 7.5.4
 
   '@npmcli/fs@3.1.0':
     dependencies:
-      semver: 7.6.3
+      semver: 7.5.4
 
   '@npmcli/git@4.1.0':
     dependencies:
@@ -17901,7 +18738,7 @@ snapshots:
       proc-log: 3.0.0
       promise-inflight: 1.0.1
       promise-retry: 2.0.1
-      semver: 7.6.3
+      semver: 7.5.4
       which: 4.0.0
     transitivePeerDependencies:
       - bluebird
@@ -17923,7 +18760,7 @@ snapshots:
       cacache: 18.0.2
       json-parse-even-better-errors: 3.0.0
       pacote: 17.0.6
-      semver: 7.6.3
+      semver: 7.5.4
     transitivePeerDependencies:
       - bluebird
       - supports-color
@@ -17945,7 +18782,7 @@ snapshots:
       json-parse-even-better-errors: 3.0.0
       normalize-package-data: 6.0.0
       proc-log: 3.0.0
-      semver: 7.6.3
+      semver: 7.5.4
     transitivePeerDependencies:
       - bluebird
 
@@ -17983,43 +18820,43 @@ snapshots:
       - bluebird
       - supports-color
 
-  '@nrwl/tao@19.8.0(@swc/core@1.3.96)':
+  '@nrwl/tao@17.2.1(@swc/core@1.3.96)':
     dependencies:
-      nx: 19.8.0(@swc/core@1.3.96)
+      nx: 17.2.1(@swc/core@1.3.96)
       tslib: 2.6.2
     transitivePeerDependencies:
       - '@swc-node/register'
       - '@swc/core'
       - debug
 
-  '@nx/nx-darwin-arm64@19.8.0':
+  '@nx/nx-darwin-arm64@17.2.1':
     optional: true
 
-  '@nx/nx-darwin-x64@19.8.0':
+  '@nx/nx-darwin-x64@17.2.1':
     optional: true
 
-  '@nx/nx-freebsd-x64@19.8.0':
+  '@nx/nx-freebsd-x64@17.2.1':
     optional: true
 
-  '@nx/nx-linux-arm-gnueabihf@19.8.0':
+  '@nx/nx-linux-arm-gnueabihf@17.2.1':
     optional: true
 
-  '@nx/nx-linux-arm64-gnu@19.8.0':
+  '@nx/nx-linux-arm64-gnu@17.2.1':
     optional: true
 
-  '@nx/nx-linux-arm64-musl@19.8.0':
+  '@nx/nx-linux-arm64-musl@17.2.1':
     optional: true
 
-  '@nx/nx-linux-x64-gnu@19.8.0':
+  '@nx/nx-linux-x64-gnu@17.2.1':
     optional: true
 
-  '@nx/nx-linux-x64-musl@19.8.0':
+  '@nx/nx-linux-x64-musl@17.2.1':
     optional: true
 
-  '@nx/nx-win32-arm64-msvc@19.8.0':
+  '@nx/nx-win32-arm64-msvc@17.2.1':
     optional: true
 
-  '@nx/nx-win32-x64-msvc@19.8.0':
+  '@nx/nx-win32-x64-msvc@17.2.1':
     optional: true
 
   '@octokit/auth-token@2.5.0':
@@ -18238,49 +19075,48 @@ snapshots:
     dependencies:
       esbuild: 0.14.54
 
-  '@percy/cli-app@1.29.3(typescript@5.4.2)':
+  '@percy/cli-app@1.28.2(typescript@5.4.2)':
     dependencies:
-      '@percy/cli-command': 1.29.3(typescript@5.4.2)
-      '@percy/cli-exec': 1.29.3(typescript@5.4.2)
+      '@percy/cli-command': 1.28.2(typescript@5.4.2)
+      '@percy/cli-exec': 1.28.2(typescript@5.4.2)
     transitivePeerDependencies:
       - bufferutil
       - supports-color
       - typescript
       - utf-8-validate
 
-  '@percy/cli-build@1.29.3(typescript@5.4.2)':
+  '@percy/cli-build@1.28.2(typescript@5.4.2)':
     dependencies:
-      '@percy/cli-command': 1.29.3(typescript@5.4.2)
+      '@percy/cli-command': 1.28.2(typescript@5.4.2)
     transitivePeerDependencies:
       - bufferutil
       - supports-color
       - typescript
       - utf-8-validate
 
-  '@percy/cli-command@1.29.3(typescript@5.4.2)':
+  '@percy/cli-command@1.28.2(typescript@5.4.2)':
     dependencies:
-      '@percy/config': 1.29.3(typescript@5.4.2)
-      '@percy/core': 1.29.3(typescript@5.4.2)
-      '@percy/logger': 1.29.3
+      '@percy/config': 1.28.2(typescript@5.4.2)
+      '@percy/core': 1.28.2(typescript@5.4.2)
+      '@percy/logger': 1.28.2
     transitivePeerDependencies:
       - bufferutil
       - supports-color
       - typescript
       - utf-8-validate
 
-  '@percy/cli-config@1.29.3(typescript@5.4.2)':
+  '@percy/cli-config@1.28.2(typescript@5.4.2)':
     dependencies:
-      '@percy/cli-command': 1.29.3(typescript@5.4.2)
+      '@percy/cli-command': 1.28.2(typescript@5.4.2)
     transitivePeerDependencies:
       - bufferutil
       - supports-color
       - typescript
       - utf-8-validate
 
-  '@percy/cli-exec@1.29.3(typescript@5.4.2)':
+  '@percy/cli-exec@1.28.2(typescript@5.4.2)':
     dependencies:
-      '@percy/cli-command': 1.29.3(typescript@5.4.2)
-      '@percy/logger': 1.29.3
+      '@percy/cli-command': 1.28.2(typescript@5.4.2)
       cross-spawn: 7.0.3
       which: 2.0.2
     transitivePeerDependencies:
@@ -18289,9 +19125,9 @@ snapshots:
       - typescript
       - utf-8-validate
 
-  '@percy/cli-snapshot@1.29.3(typescript@5.4.2)':
+  '@percy/cli-snapshot@1.28.2(typescript@5.4.2)':
     dependencies:
-      '@percy/cli-command': 1.29.3(typescript@5.4.2)
+      '@percy/cli-command': 1.28.2(typescript@5.4.2)
       yaml: 2.4.5
     transitivePeerDependencies:
       - bufferutil
@@ -18299,9 +19135,9 @@ snapshots:
       - typescript
       - utf-8-validate
 
-  '@percy/cli-upload@1.29.3(typescript@5.4.2)':
+  '@percy/cli-upload@1.28.2(typescript@5.4.2)':
     dependencies:
-      '@percy/cli-command': 1.29.3(typescript@5.4.2)
+      '@percy/cli-command': 1.28.2(typescript@5.4.2)
       fast-glob: 3.3.2
       image-size: 1.0.2
     transitivePeerDependencies:
@@ -18310,75 +19146,72 @@ snapshots:
       - typescript
       - utf-8-validate
 
-  '@percy/cli@1.29.3(typescript@5.4.2)':
+  '@percy/cli@1.28.2(typescript@5.4.2)':
     dependencies:
-      '@percy/cli-app': 1.29.3(typescript@5.4.2)
-      '@percy/cli-build': 1.29.3(typescript@5.4.2)
-      '@percy/cli-command': 1.29.3(typescript@5.4.2)
-      '@percy/cli-config': 1.29.3(typescript@5.4.2)
-      '@percy/cli-exec': 1.29.3(typescript@5.4.2)
-      '@percy/cli-snapshot': 1.29.3(typescript@5.4.2)
-      '@percy/cli-upload': 1.29.3(typescript@5.4.2)
-      '@percy/client': 1.29.3
-      '@percy/logger': 1.29.3
+      '@percy/cli-app': 1.28.2(typescript@5.4.2)
+      '@percy/cli-build': 1.28.2(typescript@5.4.2)
+      '@percy/cli-command': 1.28.2(typescript@5.4.2)
+      '@percy/cli-config': 1.28.2(typescript@5.4.2)
+      '@percy/cli-exec': 1.28.2(typescript@5.4.2)
+      '@percy/cli-snapshot': 1.28.2(typescript@5.4.2)
+      '@percy/cli-upload': 1.28.2(typescript@5.4.2)
+      '@percy/client': 1.28.2
+      '@percy/logger': 1.28.2
     transitivePeerDependencies:
       - bufferutil
       - supports-color
       - typescript
       - utf-8-validate
 
-  '@percy/client@1.29.3':
+  '@percy/client@1.28.2':
     dependencies:
-      '@percy/env': 1.29.3
-      '@percy/logger': 1.29.3
-      pako: 2.1.0
+      '@percy/env': 1.28.2
+      '@percy/logger': 1.28.2
 
-  '@percy/config@1.29.3(typescript@5.4.2)':
+  '@percy/config@1.28.2(typescript@5.4.2)':
     dependencies:
-      '@percy/logger': 1.29.3
+      '@percy/logger': 1.28.2
       ajv: 8.13.0
       cosmiconfig: 8.3.6(typescript@5.4.2)
       yaml: 2.4.5
     transitivePeerDependencies:
       - typescript
 
-  '@percy/core@1.29.3(typescript@5.4.2)':
+  '@percy/core@1.28.2(typescript@5.4.2)':
     dependencies:
-      '@percy/client': 1.29.3
-      '@percy/config': 1.29.3(typescript@5.4.2)
-      '@percy/dom': 1.29.3
-      '@percy/logger': 1.29.3
-      '@percy/webdriver-utils': 1.29.3(typescript@5.4.2)
+      '@percy/client': 1.28.2
+      '@percy/config': 1.28.2(typescript@5.4.2)
+      '@percy/dom': 1.28.2
+      '@percy/logger': 1.28.2
+      '@percy/webdriver-utils': 1.28.2(typescript@5.4.2)
       content-disposition: 0.5.4
       cross-spawn: 7.0.3
       extract-zip: 2.0.1
       fast-glob: 3.3.2
-      micromatch: 4.0.8
+      micromatch: 4.0.5
       mime-types: 2.1.35
-      pako: 2.1.0
       path-to-regexp: 6.2.1
       rimraf: 3.0.2
-      ws: 8.18.0
-      yaml: 2.4.5
+      ws: 8.16.0
     transitivePeerDependencies:
       - bufferutil
       - supports-color
       - typescript
       - utf-8-validate
 
-  '@percy/dom@1.29.3': {}
+  '@percy/dom@1.28.2': {}
 
-  '@percy/env@1.29.3':
+  '@percy/env@1.28.2':
     dependencies:
-      '@percy/logger': 1.29.3
+      '@percy/logger': 1.28.2
 
-  '@percy/logger@1.29.3': {}
+  '@percy/logger@1.28.2': {}
 
-  '@percy/sdk-utils@1.29.3': {}
+  '@percy/sdk-utils@1.28.2': {}
 
-  '@percy/storybook@6.0.2(typescript@5.4.2)':
+  '@percy/storybook@5.0.3(typescript@5.4.2)':
     dependencies:
-      '@percy/cli-command': 1.29.3(typescript@5.4.2)
+      '@percy/cli-command': 1.28.2(typescript@5.4.2)
       cross-spawn: 7.0.3
       qs: 6.12.3
     transitivePeerDependencies:
@@ -18387,10 +19220,10 @@ snapshots:
       - typescript
       - utf-8-validate
 
-  '@percy/webdriver-utils@1.29.3(typescript@5.4.2)':
+  '@percy/webdriver-utils@1.28.2(typescript@5.4.2)':
     dependencies:
-      '@percy/config': 1.29.3(typescript@5.4.2)
-      '@percy/sdk-utils': 1.29.3
+      '@percy/config': 1.28.2(typescript@5.4.2)
+      '@percy/sdk-utils': 1.28.2
     transitivePeerDependencies:
       - typescript
 
@@ -18761,6 +19594,11 @@ snapshots:
       '@resvg/resvg-js-win32-ia32-msvc': 2.6.0
       '@resvg/resvg-js-win32-x64-msvc': 2.6.0
 
+  '@rollup/pluginutils@4.2.1':
+    dependencies:
+      estree-walker: 2.0.2
+      picomatch: 2.3.1
+
   '@rollup/pluginutils@5.1.0(rollup@4.21.1)':
     dependencies:
       '@types/estree': 1.0.5
@@ -18817,7 +19655,7 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.21.1':
     optional: true
 
-  '@rushstack/node-core-library@5.5.1(@types/node@18.18.9)':
+  '@rushstack/node-core-library@5.5.1(@types/node@20.9.0)':
     dependencies:
       ajv: 8.13.0
       ajv-draft-04: 1.0.0(ajv@8.13.0)
@@ -18828,23 +19666,23 @@ snapshots:
       resolve: 1.22.8
       semver: 7.5.4
     optionalDependencies:
-      '@types/node': 18.18.9
+      '@types/node': 20.9.0
 
   '@rushstack/rig-package@0.5.3':
     dependencies:
       resolve: 1.22.8
       strip-json-comments: 3.1.1
 
-  '@rushstack/terminal@0.13.3(@types/node@18.18.9)':
+  '@rushstack/terminal@0.13.3(@types/node@20.9.0)':
     dependencies:
-      '@rushstack/node-core-library': 5.5.1(@types/node@18.18.9)
+      '@rushstack/node-core-library': 5.5.1(@types/node@20.9.0)
       supports-color: 8.1.1
     optionalDependencies:
-      '@types/node': 18.18.9
+      '@types/node': 20.9.0
 
-  '@rushstack/ts-command-line@4.22.3(@types/node@18.18.9)':
+  '@rushstack/ts-command-line@4.22.3(@types/node@20.9.0)':
     dependencies:
-      '@rushstack/terminal': 0.13.3(@types/node@18.18.9)
+      '@rushstack/terminal': 0.13.3(@types/node@20.9.0)
       '@types/argparse': 1.0.38
       argparse: 1.0.10
       string-argv: 0.3.2
@@ -19138,6 +19976,10 @@ snapshots:
 
   '@sindresorhus/merge-streams@2.3.0': {}
 
+  '@sinonjs/commons@2.0.0':
+    dependencies:
+      type-detect: 4.0.8
+
   '@sinonjs/commons@3.0.0':
     dependencies:
       type-detect: 4.0.8
@@ -19146,6 +19988,14 @@ snapshots:
     dependencies:
       '@sinonjs/commons': 3.0.0
 
+  '@sinonjs/samsam@8.0.0':
+    dependencies:
+      '@sinonjs/commons': 2.0.0
+      lodash.get: 4.4.2
+      type-detect: 4.0.8
+
+  '@sinonjs/text-encoding@0.7.2': {}
+
   '@soda/friendly-errors-webpack-plugin@1.8.1(webpack@5.89.0(@swc/core@1.3.96))':
     dependencies:
       chalk: 3.0.0
@@ -19341,7 +20191,7 @@ snapshots:
       - encoding
       - supports-color
 
-  '@storybook/builder-vite@7.6.20(encoding@0.1.13)(typescript@5.4.2)(vite@5.4.2(@types/node@20.16.5)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))':
+  '@storybook/builder-vite@7.6.20(encoding@0.1.13)(typescript@5.4.2)(vite@5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))':
     dependencies:
       '@storybook/channels': 7.6.20
       '@storybook/client-logger': 7.6.20
@@ -19359,7 +20209,7 @@ snapshots:
       fs-extra: 11.1.1
       magic-string: 0.30.11
       rollup: 3.29.4
-      vite: 5.4.2(@types/node@20.16.5)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
+      vite: 5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
     optionalDependencies:
       typescript: 5.4.2
     transitivePeerDependencies:
@@ -19421,7 +20271,7 @@ snapshots:
       prompts: 2.4.2
       puppeteer-core: 2.1.1
       read-pkg-up: 7.0.1
-      semver: 7.6.3
+      semver: 7.5.4
       strip-json-comments: 3.1.1
       tempy: 1.0.1
       ts-dedent: 2.2.0
@@ -19628,7 +20478,7 @@ snapshots:
       memoizerific: 1.11.3
       react: 16.14.0
       react-dom: 16.14.0(react@16.14.0)
-      semver: 7.6.3
+      semver: 7.5.4
       store2: 2.14.2
       telejson: 7.2.0
       ts-dedent: 2.2.0
@@ -19730,7 +20580,7 @@ snapshots:
       - encoding
       - supports-color
 
-  '@storybook/test-runner@0.16.0(@types/node@18.18.9)(encoding@0.1.13)':
+  '@storybook/test-runner@0.16.0(@types/node@20.9.0)(encoding@0.1.13)':
     dependencies:
       '@babel/core': 7.23.2
       '@babel/generator': 7.23.0
@@ -19747,14 +20597,14 @@ snapshots:
       commander: 9.5.0
       expect-playwright: 0.8.0
       glob: 10.4.5
-      jest: 29.7.0(@types/node@18.18.9)
+      jest: 29.7.0(@types/node@20.9.0)
       jest-circus: 29.7.0
       jest-environment-node: 29.7.0
       jest-junit: 16.0.0
-      jest-playwright-preset: 4.0.0(jest-circus@29.7.0)(jest-environment-node@29.7.0)(jest-runner@29.7.0)(jest@29.7.0(@types/node@18.18.9))
+      jest-playwright-preset: 4.0.0(jest-circus@29.7.0)(jest-environment-node@29.7.0)(jest-runner@29.7.0)(jest@29.7.0(@types/node@20.9.0))
       jest-runner: 29.7.0
       jest-serializer-html: 7.1.0
-      jest-watch-typeahead: 2.2.2(jest@29.7.0(@types/node@18.18.9))
+      jest-watch-typeahead: 2.2.2(jest@29.7.0(@types/node@20.9.0))
       node-fetch: 2.7.0(encoding@0.1.13)
       playwright: 1.42.1
       read-pkg-up: 7.0.1
@@ -19808,14 +20658,14 @@ snapshots:
       '@types/express': 4.17.21
       file-system-cache: 2.3.0
 
-  '@storybook/vue-vite@7.6.20(@babel/core@7.23.2)(css-loader@6.8.1(webpack@5.89.0(@swc/core@1.3.96)(esbuild@0.18.20)))(encoding@0.1.13)(typescript@5.4.2)(vite@5.4.2(@types/node@20.16.5)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@2.7.16)':
+  '@storybook/vue-vite@7.6.20(@babel/core@7.23.2)(css-loader@6.8.1(webpack@5.89.0(@swc/core@1.3.96)(esbuild@0.18.20)))(encoding@0.1.13)(typescript@5.4.2)(vite@5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@2.7.16)':
     dependencies:
-      '@storybook/builder-vite': 7.6.20(encoding@0.1.13)(typescript@5.4.2)(vite@5.4.2(@types/node@20.16.5)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))
+      '@storybook/builder-vite': 7.6.20(encoding@0.1.13)(typescript@5.4.2)(vite@5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))
       '@storybook/core-common': 7.6.20(encoding@0.1.13)
       '@storybook/core-server': 7.6.20(encoding@0.1.13)
       '@storybook/vue': 7.6.20(@babel/core@7.23.2)(css-loader@6.8.1(webpack@5.89.0(@swc/core@1.3.96)(esbuild@0.18.20)))(encoding@0.1.13)(vue@2.7.16)
       magic-string: 0.30.11
-      vite: 5.4.2(@types/node@20.16.5)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
+      vite: 5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
       vue: 2.7.16
       vue-docgen-api: 4.75.0(vue@2.7.16)
     transitivePeerDependencies:
@@ -19830,14 +20680,14 @@ snapshots:
       - utf-8-validate
       - vite-plugin-glimmerx
 
-  '@storybook/vue3-vite@7.6.20(encoding@0.1.13)(typescript@5.4.2)(vite@5.4.2(@types/node@20.16.5)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@3.4.15(typescript@5.4.2))':
+  '@storybook/vue3-vite@7.6.20(encoding@0.1.13)(typescript@5.4.2)(vite@5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@3.4.15(typescript@5.4.2))':
     dependencies:
-      '@storybook/builder-vite': 7.6.20(encoding@0.1.13)(typescript@5.4.2)(vite@5.4.2(@types/node@20.16.5)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))
+      '@storybook/builder-vite': 7.6.20(encoding@0.1.13)(typescript@5.4.2)(vite@5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))
       '@storybook/core-server': 7.6.20(encoding@0.1.13)
       '@storybook/vue3': 7.6.20(encoding@0.1.13)(vue@3.4.15(typescript@5.4.2))
-      '@vitejs/plugin-vue': 4.5.0(vite@5.4.2(@types/node@20.16.5)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@3.4.15(typescript@5.4.2))
+      '@vitejs/plugin-vue': 4.5.0(vite@5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@3.4.15(typescript@5.4.2))
       magic-string: 0.30.11
-      vite: 5.4.2(@types/node@20.16.5)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
+      vite: 5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
       vue-docgen-api: 4.75.0(vue@3.4.15(typescript@5.4.2))
     transitivePeerDependencies:
       - '@preact/preset-vite'
@@ -20143,10 +20993,6 @@ snapshots:
       '@tufjs/canonical-json': 2.0.0
       minimatch: 9.0.5
 
-  '@tybys/wasm-util@0.9.0':
-    dependencies:
-      tslib: 2.6.2
-
   '@types/argparse@1.0.38': {}
 
   '@types/aria-query@5.0.4': {}
@@ -20199,7 +21045,7 @@ snapshots:
 
   '@types/cross-spawn@6.0.5':
     dependencies:
-      '@types/node': 20.16.5
+      '@types/node': 20.9.0
 
   '@types/debug@4.1.11':
     dependencies:
@@ -20340,8 +21186,6 @@ snapshots:
     dependencies:
       '@types/node': 20.9.0
 
-  '@types/node@16.18.108': {}
-
   '@types/node@16.18.83': {}
 
   '@types/node@16.9.1': {}
@@ -20352,10 +21196,6 @@ snapshots:
     dependencies:
       undici-types: 5.26.5
 
-  '@types/node@20.16.5':
-    dependencies:
-      undici-types: 6.19.8
-
   '@types/node@20.9.0':
     dependencies:
       undici-types: 5.26.5
@@ -20429,7 +21269,7 @@ snapshots:
 
   '@types/vfile@3.0.2':
     dependencies:
-      '@types/node': 20.16.5
+      '@types/node': 20.9.0
       '@types/unist': 3.0.2
       '@types/vfile-message': 2.0.0
 
@@ -20438,11 +21278,6 @@ snapshots:
       '@types/expect': 1.20.4
       '@types/node': 20.9.0
 
-  '@types/vinyl@2.0.12':
-    dependencies:
-      '@types/expect': 1.20.4
-      '@types/node': 20.16.5
-
   '@types/wait-on@5.3.4':
     dependencies:
       '@types/node': 20.9.0
@@ -20465,9 +21300,28 @@ snapshots:
 
   '@types/yauzl@2.10.3':
     dependencies:
-      '@types/node': 20.16.5
+      '@types/node': 20.9.0
     optional: true
 
+  '@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0)(typescript@5.4.2)':
+    dependencies:
+      '@eslint-community/regexpp': 4.10.0
+      '@typescript-eslint/parser': 7.0.1(eslint@8.56.0)(typescript@5.4.2)
+      '@typescript-eslint/scope-manager': 5.62.0
+      '@typescript-eslint/type-utils': 5.62.0(eslint@8.56.0)(typescript@5.4.2)
+      '@typescript-eslint/utils': 5.62.0(eslint@8.56.0)(typescript@5.4.2)
+      debug: 4.3.6
+      eslint: 8.56.0
+      graphemer: 1.4.0
+      ignore: 5.3.0
+      natural-compare-lite: 1.4.0
+      semver: 7.5.4
+      tsutils: 3.21.0(typescript@5.4.2)
+    optionalDependencies:
+      typescript: 5.4.2
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/eslint-plugin@7.0.1(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0)(typescript@5.4.2)':
     dependencies:
       '@eslint-community/regexpp': 4.10.0
@@ -20524,6 +21378,18 @@ snapshots:
       '@typescript-eslint/types': 7.0.1
       '@typescript-eslint/visitor-keys': 7.0.1
 
+  '@typescript-eslint/type-utils@5.62.0(eslint@8.56.0)(typescript@5.4.2)':
+    dependencies:
+      '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.4.2)
+      '@typescript-eslint/utils': 5.62.0(eslint@8.56.0)(typescript@5.4.2)
+      debug: 4.3.6
+      eslint: 8.56.0
+      tsutils: 3.21.0(typescript@5.4.2)
+    optionalDependencies:
+      typescript: 5.4.2
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/type-utils@7.0.1(eslint@8.56.0)(typescript@5.4.2)':
     dependencies:
       '@typescript-eslint/typescript-estree': 7.0.1(typescript@5.4.2)
@@ -20549,7 +21415,7 @@ snapshots:
       debug: 4.3.6
       globby: 11.1.0
       is-glob: 4.0.3
-      semver: 7.6.3
+      semver: 7.5.4
       tsutils: 3.21.0(typescript@5.4.2)
     optionalDependencies:
       typescript: 5.4.2
@@ -20563,7 +21429,7 @@ snapshots:
       debug: 4.3.6
       globby: 11.1.0
       is-glob: 4.0.3
-      semver: 7.6.3
+      semver: 7.5.4
       ts-api-utils: 1.0.3(typescript@5.4.2)
     optionalDependencies:
       typescript: 5.4.2
@@ -20643,26 +21509,44 @@ snapshots:
       '@typescript-eslint/types': 7.0.1
       eslint-visitor-keys: 3.4.3
 
+  '@ungap/promise-all-settled@1.1.2': {}
+
   '@ungap/structured-clone@1.2.0': {}
 
-  '@vitejs/plugin-vue2@2.3.1(vite@5.4.2(@types/node@18.18.9)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@3.4.15(typescript@5.4.2))':
+  '@vitejs/plugin-vue-jsx@1.3.10':
     dependencies:
-      vite: 5.4.2(@types/node@18.18.9)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
+      '@babel/core': 7.23.2
+      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.23.2)
+      '@babel/plugin-transform-typescript': 7.23.3(@babel/core@7.23.2)
+      '@rollup/pluginutils': 4.2.1
+      '@vue/babel-plugin-jsx': 1.2.5(@babel/core@7.23.2)
+      hash-sum: 2.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@vitejs/plugin-vue2@2.3.1(vite@5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@2.7.16)':
+    dependencies:
+      vite: 5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
+      vue: 2.7.16
+
+  '@vitejs/plugin-vue@2.3.4(vite@5.4.2(@types/node@16.18.83)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@3.4.15(typescript@5.4.2))':
+    dependencies:
+      vite: 5.4.2(@types/node@16.18.83)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
       vue: 3.4.15(typescript@5.4.2)
 
-  '@vitejs/plugin-vue@4.5.0(vite@4.0.5(@types/node@20.16.5)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@3.4.15(typescript@5.4.2))':
+  '@vitejs/plugin-vue@4.5.0(vite@4.0.5(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@3.4.15(typescript@5.4.2))':
     dependencies:
-      vite: 4.0.5(@types/node@20.16.5)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
+      vite: 4.0.5(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
       vue: 3.4.15(typescript@5.4.2)
 
-  '@vitejs/plugin-vue@4.5.0(vite@5.4.2(@types/node@20.16.5)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@3.4.15(typescript@5.4.2))':
+  '@vitejs/plugin-vue@4.5.0(vite@5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@3.4.15(typescript@5.4.2))':
     dependencies:
-      vite: 5.4.2(@types/node@20.16.5)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
+      vite: 5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
       vue: 3.4.15(typescript@5.4.2)
 
-  '@vitejs/plugin-vue@5.0.4(vite@5.4.2(@types/node@18.18.9)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@3.4.15(typescript@5.4.2))':
+  '@vitejs/plugin-vue@5.0.4(vite@5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@3.4.15(typescript@5.4.2))':
     dependencies:
-      vite: 5.4.2(@types/node@18.18.9)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
+      vite: 5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
       vue: 3.4.15(typescript@5.4.2)
 
   '@vitest/expect@1.0.4':
@@ -20693,23 +21577,88 @@ snapshots:
       loupe: 2.3.7
       pretty-format: 29.7.0
 
+  '@volar/code-gen@0.38.9':
+    dependencies:
+      '@volar/source-map': 0.38.9
+
+  '@volar/language-core@1.11.1':
+    dependencies:
+      '@volar/source-map': 1.11.1
+
   '@volar/language-core@2.4.0':
     dependencies:
       '@volar/source-map': 2.4.0
 
+  '@volar/source-map@0.38.9': {}
+
+  '@volar/source-map@1.11.1':
+    dependencies:
+      muggle-string: 0.3.1
+
   '@volar/source-map@2.4.0': {}
 
+  '@volar/typescript@1.11.1':
+    dependencies:
+      '@volar/language-core': 1.11.1
+      path-browserify: 1.0.1
+
   '@volar/typescript@2.4.0':
     dependencies:
       '@volar/language-core': 2.4.0
       path-browserify: 1.0.1
       vscode-uri: 3.0.8
 
+  '@volar/vue-code-gen@0.38.9':
+    dependencies:
+      '@volar/code-gen': 0.38.9
+      '@volar/source-map': 0.38.9
+      '@vue/compiler-core': 3.4.15
+      '@vue/compiler-dom': 3.4.15
+      '@vue/shared': 3.4.15
+
+  '@volar/vue-typescript@0.38.9':
+    dependencies:
+      '@volar/code-gen': 0.38.9
+      '@volar/source-map': 0.38.9
+      '@volar/vue-code-gen': 0.38.9
+      '@vue/compiler-sfc': 3.4.15
+      '@vue/reactivity': 3.4.15
+
+  '@vue/babel-helper-vue-transform-on@1.2.5': {}
+
+  '@vue/babel-plugin-jsx@1.2.5(@babel/core@7.23.2)':
+    dependencies:
+      '@babel/helper-module-imports': 7.24.7
+      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/plugin-syntax-jsx': 7.24.7(@babel/core@7.23.2)
+      '@babel/template': 7.25.0
+      '@babel/traverse': 7.25.6
+      '@babel/types': 7.25.6
+      '@vue/babel-helper-vue-transform-on': 1.2.5
+      '@vue/babel-plugin-resolve-type': 1.2.5(@babel/core@7.23.2)
+      html-tags: 3.3.1
+      svg-tags: 1.0.0
+    optionalDependencies:
+      '@babel/core': 7.23.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@vue/babel-plugin-resolve-type@1.2.5(@babel/core@7.23.2)':
+    dependencies:
+      '@babel/code-frame': 7.24.7
+      '@babel/core': 7.23.2
+      '@babel/helper-module-imports': 7.24.7
+      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/parser': 7.25.6
+      '@vue/compiler-sfc': 3.5.5
+    transitivePeerDependencies:
+      - supports-color
+
   '@vue/cli-overlay@5.0.8': {}
 
-  '@vue/cli-plugin-eslint@5.0.8(@swc/core@1.3.96)(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.4.15)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))(encoding@0.1.13)(eslint@8.56.0)':
+  '@vue/cli-plugin-eslint@5.0.8(@swc/core@1.3.96)(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))(encoding@0.1.13)(eslint@8.56.0)':
     dependencies:
-      '@vue/cli-service': 5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.4.15)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3)
+      '@vue/cli-service': 5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3)
       '@vue/cli-shared-utils': 5.0.8(encoding@0.1.13)
       eslint: 8.56.0
       eslint-webpack-plugin: 3.2.0(eslint@8.56.0)(webpack@5.89.0(@swc/core@1.3.96))
@@ -20723,29 +21672,56 @@ snapshots:
       - uglify-js
       - webpack-cli
 
-  '@vue/cli-plugin-router@5.0.8(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.4.15)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))(encoding@0.1.13)':
+  '@vue/cli-plugin-router@5.0.8(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(less-loader@11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96)))(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))(encoding@0.1.13)':
     dependencies:
-      '@vue/cli-service': 5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.4.15)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3)
+      '@vue/cli-service': 5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(less-loader@11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96)))(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3)
       '@vue/cli-shared-utils': 5.0.8(encoding@0.1.13)
     transitivePeerDependencies:
       - encoding
 
-  '@vue/cli-plugin-vuex@5.0.8(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.4.15)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))':
+  '@vue/cli-plugin-router@5.0.8(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))(encoding@0.1.13)':
     dependencies:
-      '@vue/cli-service': 5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.4.15)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3)
+      '@vue/cli-service': 5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3)
+      '@vue/cli-shared-utils': 5.0.8(encoding@0.1.13)
+    transitivePeerDependencies:
+      - encoding
+
+  '@vue/cli-plugin-unit-mocha@5.0.8(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(less-loader@11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96)))(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))(encoding@0.1.13)(webpack@5.89.0(@swc/core@1.3.96))':
+    dependencies:
+      '@vue/cli-service': 5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(less-loader@11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96)))(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3)
+      '@vue/cli-shared-utils': 5.0.8(encoding@0.1.13)
+      jsdom: 18.1.1
+      jsdom-global: 3.0.2(jsdom@18.1.1)
+      mocha: 8.4.0
+      mochapack: 2.1.4(mocha@8.4.0)(webpack@5.89.0(@swc/core@1.3.96))
+    transitivePeerDependencies:
+      - bufferutil
+      - canvas
+      - encoding
+      - supports-color
+      - utf-8-validate
+      - webpack
+
+  '@vue/cli-plugin-vuex@5.0.8(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(less-loader@11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96)))(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))':
+    dependencies:
+      '@vue/cli-service': 5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(less-loader@11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96)))(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3)
+
+  '@vue/cli-plugin-vuex@5.0.8(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))':
+    dependencies:
+      '@vue/cli-service': 5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3)
 
-  '@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.4.15)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3)':
+  '@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(less-loader@11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96)))(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3)':
     dependencies:
       '@babel/helper-compilation-targets': 7.22.15
       '@soda/friendly-errors-webpack-plugin': 1.8.1(webpack@5.89.0(@swc/core@1.3.96))
       '@soda/get-current-script': 1.0.2
       '@types/minimist': 1.2.5
       '@vue/cli-overlay': 5.0.8
-      '@vue/cli-plugin-router': 5.0.8(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.4.15)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))(encoding@0.1.13)
-      '@vue/cli-plugin-vuex': 5.0.8(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.4.15)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))
+      '@vue/cli-plugin-router': 5.0.8(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(less-loader@11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96)))(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))(encoding@0.1.13)
+      '@vue/cli-plugin-vuex': 5.0.8(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(less-loader@11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96)))(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))
       '@vue/cli-shared-utils': 5.0.8(encoding@0.1.13)
       '@vue/component-compiler-utils': 3.3.0(ejs@3.1.9)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)
-      '@vue/vue-loader-v15': vue-loader@15.11.1(@vue/compiler-sfc@3.4.15)(css-loader@6.8.1(webpack@5.89.0(@swc/core@1.3.96)))(ejs@3.1.9)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(webpack@5.89.0(@swc/core@1.3.96))
+      '@vue/vue-loader-v15': vue-loader@15.11.1(@vue/compiler-sfc@3.5.5)(css-loader@6.8.1(webpack@5.89.0(@swc/core@1.3.96)))(ejs@3.1.9)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(webpack@5.89.0(@swc/core@1.3.96))
       '@vue/web-component-wrapper': 1.3.0
       acorn: 8.11.2
       acorn-walk: 8.3.0
@@ -20782,7 +21758,137 @@ snapshots:
       ssri: 8.0.1
       terser-webpack-plugin: 5.3.9(@swc/core@1.3.96)(webpack@5.89.0(@swc/core@1.3.96))
       thread-loader: 3.0.4(webpack@5.89.0(@swc/core@1.3.96))
-      vue-loader: 17.3.1(@vue/compiler-sfc@3.4.15)(vue@3.4.15(typescript@5.4.2))(webpack@5.89.0(@swc/core@1.3.96))
+      vue-loader: 17.3.1(@vue/compiler-sfc@3.5.5)(vue@3.4.15(typescript@5.4.2))(webpack@5.89.0(@swc/core@1.3.96))
+      vue-style-loader: 4.1.3
+      webpack: 5.89.0(@swc/core@1.3.96)
+      webpack-bundle-analyzer: 4.10.1
+      webpack-chain: 6.5.1
+      webpack-dev-server: 4.15.1(debug@4.3.6)(webpack@5.89.0(@swc/core@1.3.96))
+      webpack-merge: 5.10.0
+      webpack-virtual-modules: 0.4.6
+      whatwg-fetch: 3.6.19
+    optionalDependencies:
+      less-loader: 11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96))
+      vue-template-compiler: 2.7.16(vue@3.4.15(typescript@5.4.2))
+      webpack-sources: 3.2.3
+    transitivePeerDependencies:
+      - '@parcel/css'
+      - '@swc/core'
+      - '@vue/compiler-sfc'
+      - arc-templates
+      - atpl
+      - babel-core
+      - bracket-template
+      - bufferutil
+      - clean-css
+      - coffee-script
+      - csso
+      - dot
+      - dust
+      - dustjs-helpers
+      - dustjs-linkedin
+      - eco
+      - ect
+      - ejs
+      - encoding
+      - esbuild
+      - haml-coffee
+      - hamlet
+      - hamljs
+      - handlebars
+      - hogan.js
+      - htmling
+      - jade
+      - jazz
+      - jqtpl
+      - just
+      - liquid-node
+      - liquor
+      - lodash
+      - marko
+      - mote
+      - mustache
+      - nunjucks
+      - plates
+      - prettier
+      - pug
+      - qejs
+      - ractive
+      - razor-tmpl
+      - react
+      - react-dom
+      - slm
+      - squirrelly
+      - supports-color
+      - swig
+      - swig-templates
+      - teacup
+      - templayed
+      - then-jade
+      - then-pug
+      - tinyliquid
+      - toffee
+      - twig
+      - twing
+      - uglify-js
+      - underscore
+      - utf-8-validate
+      - vash
+      - velocityjs
+      - vue
+      - walrus
+      - webpack-cli
+      - whiskers
+
+  '@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3)':
+    dependencies:
+      '@babel/helper-compilation-targets': 7.22.15
+      '@soda/friendly-errors-webpack-plugin': 1.8.1(webpack@5.89.0(@swc/core@1.3.96))
+      '@soda/get-current-script': 1.0.2
+      '@types/minimist': 1.2.5
+      '@vue/cli-overlay': 5.0.8
+      '@vue/cli-plugin-router': 5.0.8(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))(encoding@0.1.13)
+      '@vue/cli-plugin-vuex': 5.0.8(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))
+      '@vue/cli-shared-utils': 5.0.8(encoding@0.1.13)
+      '@vue/component-compiler-utils': 3.3.0(ejs@3.1.9)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)
+      '@vue/vue-loader-v15': vue-loader@15.11.1(@vue/compiler-sfc@3.5.5)(css-loader@6.8.1(webpack@5.89.0(@swc/core@1.3.96)))(ejs@3.1.9)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(webpack@5.89.0(@swc/core@1.3.96))
+      '@vue/web-component-wrapper': 1.3.0
+      acorn: 8.11.2
+      acorn-walk: 8.3.0
+      address: 1.2.2
+      autoprefixer: 10.4.16(postcss@8.4.39)
+      browserslist: 4.22.1
+      case-sensitive-paths-webpack-plugin: 2.4.0
+      cli-highlight: 2.1.11
+      clipboardy: 2.3.0
+      cliui: 7.0.4
+      copy-webpack-plugin: 9.1.0(webpack@5.89.0(@swc/core@1.3.96))
+      css-loader: 6.8.1(webpack@5.89.0(@swc/core@1.3.96))
+      css-minimizer-webpack-plugin: 3.4.1(webpack@5.89.0(@swc/core@1.3.96))
+      cssnano: 5.1.15(postcss@8.4.39)
+      debug: 4.3.6
+      default-gateway: 6.0.3
+      dotenv: 10.0.0
+      dotenv-expand: 5.1.0
+      fs-extra: 9.1.0
+      globby: 11.1.0
+      hash-sum: 2.0.0
+      html-webpack-plugin: 5.5.3(webpack@5.89.0(@swc/core@1.3.96))
+      is-file-esm: 1.0.0
+      launch-editor-middleware: 2.6.1
+      lodash.defaultsdeep: 4.6.1
+      lodash.mapvalues: 4.6.0
+      mini-css-extract-plugin: 2.7.6(webpack@5.89.0(@swc/core@1.3.96))
+      minimist: 1.2.8
+      module-alias: 2.2.3
+      portfinder: 1.0.32
+      postcss: 8.4.39
+      postcss-loader: 6.2.1(postcss@8.4.39)(webpack@5.89.0(@swc/core@1.3.96))
+      progress-webpack-plugin: 1.0.16(webpack@5.89.0(@swc/core@1.3.96))
+      ssri: 8.0.1
+      terser-webpack-plugin: 5.3.9(@swc/core@1.3.96)(webpack@5.89.0(@swc/core@1.3.96))
+      thread-loader: 3.0.4(webpack@5.89.0(@swc/core@1.3.96))
+      vue-loader: 17.3.1(@vue/compiler-sfc@3.5.5)(vue@3.4.15(typescript@5.4.2))(webpack@5.89.0(@swc/core@1.3.96))
       vue-style-loader: 4.1.3
       webpack: 5.89.0(@swc/core@1.3.96)
       webpack-bundle-analyzer: 4.10.1
@@ -20888,11 +21994,24 @@ snapshots:
       estree-walker: 2.0.2
       source-map-js: 1.2.0
 
+  '@vue/compiler-core@3.5.5':
+    dependencies:
+      '@babel/parser': 7.25.6
+      '@vue/shared': 3.5.5
+      entities: 4.5.0
+      estree-walker: 2.0.2
+      source-map-js: 1.2.0
+
   '@vue/compiler-dom@3.4.15':
     dependencies:
       '@vue/compiler-core': 3.4.15
       '@vue/shared': 3.4.15
 
+  '@vue/compiler-dom@3.5.5':
+    dependencies:
+      '@vue/compiler-core': 3.5.5
+      '@vue/shared': 3.5.5
+
   '@vue/compiler-sfc@2.7.16':
     dependencies:
       '@babel/parser': 7.23.9
@@ -20913,11 +22032,28 @@ snapshots:
       postcss: 8.4.39
       source-map-js: 1.2.0
 
+  '@vue/compiler-sfc@3.5.5':
+    dependencies:
+      '@babel/parser': 7.25.6
+      '@vue/compiler-core': 3.5.5
+      '@vue/compiler-dom': 3.5.5
+      '@vue/compiler-ssr': 3.5.5
+      '@vue/shared': 3.5.5
+      estree-walker: 2.0.2
+      magic-string: 0.30.11
+      postcss: 8.4.45
+      source-map-js: 1.2.0
+
   '@vue/compiler-ssr@3.4.15':
     dependencies:
       '@vue/compiler-dom': 3.4.15
       '@vue/shared': 3.4.15
 
+  '@vue/compiler-ssr@3.5.5':
+    dependencies:
+      '@vue/compiler-dom': 3.5.5
+      '@vue/shared': 3.5.5
+
   '@vue/compiler-vue2@2.7.16':
     dependencies:
       de-indent: 1.0.2
@@ -20992,6 +22128,38 @@ snapshots:
 
   '@vue/devtools-api@6.5.1': {}
 
+  '@vue/language-core@1.8.25(typescript@5.4.2)(vue@2.7.16)':
+    dependencies:
+      '@volar/language-core': 1.11.1
+      '@volar/source-map': 1.11.1
+      '@vue/compiler-dom': 3.4.15
+      '@vue/shared': 3.4.15
+      computeds: 0.0.1
+      minimatch: 9.0.5
+      muggle-string: 0.3.1
+      path-browserify: 1.0.1
+      vue-template-compiler: 2.7.16(vue@2.7.16)
+    optionalDependencies:
+      typescript: 5.4.2
+    transitivePeerDependencies:
+      - vue
+
+  '@vue/language-core@1.8.25(typescript@5.4.2)(vue@3.4.15(typescript@5.4.2))':
+    dependencies:
+      '@volar/language-core': 1.11.1
+      '@volar/source-map': 1.11.1
+      '@vue/compiler-dom': 3.4.15
+      '@vue/shared': 3.4.15
+      computeds: 0.0.1
+      minimatch: 9.0.5
+      muggle-string: 0.3.1
+      path-browserify: 1.0.1
+      vue-template-compiler: 2.7.16(vue@3.4.15(typescript@5.4.2))
+    optionalDependencies:
+      typescript: 5.4.2
+    transitivePeerDependencies:
+      - vue
+
   '@vue/language-core@2.0.29(typescript@5.4.2)':
     dependencies:
       '@volar/language-core': 2.4.0
@@ -21028,6 +22196,8 @@ snapshots:
 
   '@vue/shared@3.4.15': {}
 
+  '@vue/shared@3.5.5': {}
+
   '@vue/test-utils@1.3.6(vue-template-compiler@2.7.16(vue@2.7.16))(vue@2.7.16)':
     dependencies:
       dom-event-types: 1.1.0
@@ -21044,13 +22214,17 @@ snapshots:
     optionalDependencies:
       '@vue/server-renderer': 3.4.15(vue@3.4.15(typescript@5.4.2))
 
+  '@vue/tsconfig@0.1.3(@types/node@16.18.83)':
+    optionalDependencies:
+      '@types/node': 16.18.83
+
   '@vue/tsconfig@0.4.0': {}
 
   '@vue/web-component-wrapper@1.3.0': {}
 
-  '@vuepress/bundler-vite@2.0.0-beta.60(@types/node@20.16.5)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)(typescript@5.4.2)':
+  '@vuepress/bundler-vite@2.0.0-beta.60(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)(typescript@5.4.2)':
     dependencies:
-      '@vitejs/plugin-vue': 4.5.0(vite@4.0.5(@types/node@20.16.5)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@3.4.15(typescript@5.4.2))
+      '@vitejs/plugin-vue': 4.5.0(vite@4.0.5(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@3.4.15(typescript@5.4.2))
       '@vuepress/client': 2.0.0-beta.60(typescript@5.4.2)
       '@vuepress/core': 2.0.0-beta.60(typescript@5.4.2)
       '@vuepress/shared': 2.0.0-beta.60
@@ -21060,7 +22234,7 @@ snapshots:
       postcss: 8.4.39
       postcss-load-config: 4.0.1(postcss@8.4.39)
       rollup: 3.29.4
-      vite: 4.0.5(@types/node@20.16.5)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
+      vite: 4.0.5(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
       vue: 3.4.15(typescript@5.4.2)
       vue-router: 4.2.5(vue@3.4.15(typescript@5.4.2))
     transitivePeerDependencies:
@@ -21543,13 +22717,15 @@ snapshots:
   '@yeoman/types@1.1.2(@types/inquirer@9.0.7)(mem-fs@4.0.0)':
     dependencies:
       '@types/inquirer': 9.0.7
-      '@types/node': 16.18.108
+      '@types/node': 16.18.83
     optionalDependencies:
       mem-fs: 4.0.0
 
+  '@zeit/schemas@2.6.0': {}
+
   '@zip.js/zip.js@2.7.48': {}
 
-  '@zkochan/js-yaml@0.0.7':
+  '@zkochan/js-yaml@0.0.6':
     dependencies:
       argparse: 2.0.1
 
@@ -21558,6 +22734,8 @@ snapshots:
       jsonparse: 1.3.1
       through: 2.3.8
 
+  abab@2.0.6: {}
+
   abbrev@1.1.1: {}
 
   abbrev@2.0.0: {}
@@ -21571,6 +22749,11 @@ snapshots:
       mime-types: 2.1.35
       negotiator: 0.6.3
 
+  acorn-globals@6.0.0:
+    dependencies:
+      acorn: 7.4.1
+      acorn-walk: 7.2.0
+
   acorn-import-assertions@1.9.0(acorn@8.11.2):
     dependencies:
       acorn: 8.11.2
@@ -21579,6 +22762,8 @@ snapshots:
     dependencies:
       acorn: 8.11.2
 
+  acorn-walk@7.2.0: {}
+
   acorn-walk@8.3.0: {}
 
   acorn@6.4.2: {}
@@ -21791,6 +22976,8 @@ snapshots:
 
   are-we-there-yet@4.0.2: {}
 
+  arg@2.0.0: {}
+
   arg@5.0.2: {}
 
   argparse@1.0.10:
@@ -21982,6 +23169,16 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
+  autoprefixer@10.4.16(postcss@8.4.45):
+    dependencies:
+      browserslist: 4.22.1
+      caniuse-lite: 1.0.30001561
+      fraction.js: 4.3.7
+      normalize-range: 0.1.2
+      picocolors: 1.0.1
+      postcss: 8.4.45
+      postcss-value-parser: 4.2.0
+
   autoprefixer@9.8.8:
     dependencies:
       browserslist: 4.22.1
@@ -22017,14 +23214,6 @@ snapshots:
     transitivePeerDependencies:
       - debug
 
-  axios@1.7.7:
-    dependencies:
-      follow-redirects: 1.15.9
-      form-data: 4.0.0
-      proxy-from-env: 1.1.0
-    transitivePeerDependencies:
-      - debug
-
   babel-core@7.0.0-bridge.0(@babel/core@7.23.2):
     dependencies:
       '@babel/core': 7.23.2
@@ -22280,12 +23469,10 @@ snapshots:
     dependencies:
       fill-range: 7.0.1
 
-  braces@3.0.3:
-    dependencies:
-      fill-range: 7.1.1
-
   browser-assert@1.2.1: {}
 
+  browser-process-hrtime@1.0.0: {}
+
   browser-stdout@1.3.1: {}
 
   browserify-zlib@0.1.4:
@@ -22323,11 +23510,7 @@ snapshots:
 
   builtins@5.0.1:
     dependencies:
-      semver: 7.6.3
-
-  builtins@5.1.0:
-    dependencies:
-      semver: 7.6.3
+      semver: 7.5.4
 
   bytes@3.0.0: {}
 
@@ -22509,6 +23692,12 @@ snapshots:
 
   caniuse-lite@1.0.30001561: {}
 
+  capital-case@1.0.4:
+    dependencies:
+      no-case: 3.0.4
+      tslib: 2.6.2
+      upper-case-first: 2.0.2
+
   capture-stack-trace@1.0.2: {}
 
   cardinal@2.1.1:
@@ -22540,6 +23729,12 @@ snapshots:
       strip-ansi: 3.0.1
       supports-color: 2.0.0
 
+  chalk@2.4.1:
+    dependencies:
+      ansi-styles: 3.2.1
+      escape-string-regexp: 1.0.5
+      supports-color: 5.5.0
+
   chalk@2.4.2:
     dependencies:
       ansi-styles: 3.2.1
@@ -22558,6 +23753,21 @@ snapshots:
 
   chalk@5.3.0: {}
 
+  change-case@4.1.2:
+    dependencies:
+      camel-case: 4.1.2
+      capital-case: 1.0.4
+      constant-case: 3.0.4
+      dot-case: 3.0.4
+      header-case: 2.0.4
+      no-case: 3.0.4
+      param-case: 3.0.4
+      pascal-case: 3.1.2
+      path-case: 3.0.4
+      sentence-case: 3.0.4
+      snake-case: 3.0.4
+      tslib: 2.6.2
+
   change-case@5.4.4: {}
 
   changelog-parser@3.0.1:
@@ -22609,6 +23819,18 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  chokidar@3.5.1:
+    dependencies:
+      anymatch: 3.1.3
+      braces: 3.0.2
+      glob-parent: 5.1.2
+      is-binary-path: 2.1.0
+      is-glob: 4.0.3
+      normalize-path: 3.0.0
+      readdirp: 3.5.0
+    optionalDependencies:
+      fsevents: 2.3.3
+
   chokidar@3.5.3:
     dependencies:
       anymatch: 3.1.3
@@ -22728,6 +23950,12 @@ snapshots:
       strip-ansi: 3.0.1
       wrap-ansi: 2.1.0
 
+  cliui@5.0.0:
+    dependencies:
+      string-width: 3.1.0
+      strip-ansi: 5.2.0
+      wrap-ansi: 5.1.0
+
   cliui@6.0.0:
     dependencies:
       string-width: 4.2.3
@@ -22842,6 +24070,8 @@ snapshots:
 
   commander@9.5.0: {}
 
+  comment-parser@1.3.1: {}
+
   common-ancestor-path@1.0.1: {}
 
   commondir@1.0.1: {}
@@ -22861,6 +24091,18 @@ snapshots:
     dependencies:
       mime-db: 1.52.0
 
+  compression@1.7.3:
+    dependencies:
+      accepts: 1.3.8
+      bytes: 3.0.0
+      compressible: 2.0.18
+      debug: 2.6.9
+      on-headers: 1.0.2
+      safe-buffer: 5.1.2
+      vary: 1.1.2
+    transitivePeerDependencies:
+      - supports-color
+
   compression@1.7.4:
     dependencies:
       accepts: 1.3.8
@@ -22936,11 +24178,19 @@ snapshots:
       react-dom: 16.14.0(react@16.14.0)
       twig: 1.17.1
 
+  constant-case@3.0.4:
+    dependencies:
+      no-case: 3.0.4
+      tslib: 2.6.2
+      upper-case: 2.0.2
+
   constantinople@4.0.1:
     dependencies:
       '@babel/parser': 7.23.9
       '@babel/types': 7.23.0
 
+  content-disposition@0.5.2: {}
+
   content-disposition@0.5.4:
     dependencies:
       safe-buffer: 5.2.1
@@ -22983,7 +24233,7 @@ snapshots:
       handlebars: 4.7.8
       json-stringify-safe: 5.0.1
       meow: 8.1.2
-      semver: 7.6.3
+      semver: 7.5.4
       split: 1.0.1
 
   conventional-commits-filter@2.0.7:
@@ -23047,6 +24297,8 @@ snapshots:
     dependencies:
       browserslist: 4.22.1
 
+  core-js@2.6.12: {}
+
   core-js@3.36.0: {}
 
   core-util-is@1.0.3: {}
@@ -23088,21 +24340,6 @@ snapshots:
     dependencies:
       capture-stack-trace: 1.0.2
 
-  create-jest@29.7.0(@types/node@18.18.9):
-    dependencies:
-      '@jest/types': 29.6.3
-      chalk: 4.1.2
-      exit: 0.1.2
-      graceful-fs: 4.2.11
-      jest-config: 29.7.0(@types/node@18.18.9)
-      jest-util: 29.7.0
-      prompts: 2.4.2
-    transitivePeerDependencies:
-      - '@types/node'
-      - babel-plugin-macros
-      - supports-color
-      - ts-node
-
   create-jest@29.7.0(@types/node@20.9.0):
     dependencies:
       '@jest/types': 29.6.3
@@ -23154,6 +24391,10 @@ snapshots:
     dependencies:
       postcss: 8.4.39
 
+  css-declaration-sorter@6.4.1(postcss@8.4.45):
+    dependencies:
+      postcss: 8.4.45
+
   css-functions-list@3.2.1: {}
 
   css-has-pseudo@0.10.0:
@@ -23170,7 +24411,7 @@ snapshots:
       postcss-modules-scope: 3.0.0(postcss@8.4.39)
       postcss-modules-values: 4.0.0(postcss@8.4.39)
       postcss-value-parser: 4.2.0
-      semver: 7.6.3
+      semver: 7.5.4
       webpack: 5.89.0(@swc/core@1.3.96)(esbuild@0.18.20)
 
   css-loader@6.8.1(webpack@5.89.0(@swc/core@1.3.96)):
@@ -23182,7 +24423,7 @@ snapshots:
       postcss-modules-scope: 3.0.0(postcss@8.4.39)
       postcss-modules-values: 4.0.0(postcss@8.4.39)
       postcss-value-parser: 4.2.0
-      semver: 7.6.3
+      semver: 7.5.4
       webpack: 5.89.0(@swc/core@1.3.96)
 
   css-minimizer-webpack-plugin@3.4.1(webpack@5.89.0(@swc/core@1.3.96)):
@@ -23277,46 +24518,46 @@ snapshots:
       postcss-svgo: 5.1.0(postcss@8.4.39)
       postcss-unique-selectors: 5.1.1(postcss@8.4.39)
 
-  cssnano-preset-default@6.0.1(postcss@8.4.39):
-    dependencies:
-      css-declaration-sorter: 6.4.1(postcss@8.4.39)
-      cssnano-utils: 4.0.0(postcss@8.4.39)
-      postcss: 8.4.39
-      postcss-calc: 9.0.1(postcss@8.4.39)
-      postcss-colormin: 6.0.0(postcss@8.4.39)
-      postcss-convert-values: 6.0.0(postcss@8.4.39)
-      postcss-discard-comments: 6.0.0(postcss@8.4.39)
-      postcss-discard-duplicates: 6.0.0(postcss@8.4.39)
-      postcss-discard-empty: 6.0.0(postcss@8.4.39)
-      postcss-discard-overridden: 6.0.0(postcss@8.4.39)
-      postcss-merge-longhand: 6.0.0(postcss@8.4.39)
-      postcss-merge-rules: 6.0.1(postcss@8.4.39)
-      postcss-minify-font-values: 6.0.0(postcss@8.4.39)
-      postcss-minify-gradients: 6.0.0(postcss@8.4.39)
-      postcss-minify-params: 6.0.0(postcss@8.4.39)
-      postcss-minify-selectors: 6.0.0(postcss@8.4.39)
-      postcss-normalize-charset: 6.0.0(postcss@8.4.39)
-      postcss-normalize-display-values: 6.0.0(postcss@8.4.39)
-      postcss-normalize-positions: 6.0.0(postcss@8.4.39)
-      postcss-normalize-repeat-style: 6.0.0(postcss@8.4.39)
-      postcss-normalize-string: 6.0.0(postcss@8.4.39)
-      postcss-normalize-timing-functions: 6.0.0(postcss@8.4.39)
-      postcss-normalize-unicode: 6.0.0(postcss@8.4.39)
-      postcss-normalize-url: 6.0.0(postcss@8.4.39)
-      postcss-normalize-whitespace: 6.0.0(postcss@8.4.39)
-      postcss-ordered-values: 6.0.0(postcss@8.4.39)
-      postcss-reduce-initial: 6.0.0(postcss@8.4.39)
-      postcss-reduce-transforms: 6.0.0(postcss@8.4.39)
-      postcss-svgo: 6.0.0(postcss@8.4.39)
-      postcss-unique-selectors: 6.0.0(postcss@8.4.39)
+  cssnano-preset-default@6.0.1(postcss@8.4.45):
+    dependencies:
+      css-declaration-sorter: 6.4.1(postcss@8.4.45)
+      cssnano-utils: 4.0.0(postcss@8.4.45)
+      postcss: 8.4.45
+      postcss-calc: 9.0.1(postcss@8.4.45)
+      postcss-colormin: 6.0.0(postcss@8.4.45)
+      postcss-convert-values: 6.0.0(postcss@8.4.45)
+      postcss-discard-comments: 6.0.0(postcss@8.4.45)
+      postcss-discard-duplicates: 6.0.0(postcss@8.4.45)
+      postcss-discard-empty: 6.0.0(postcss@8.4.45)
+      postcss-discard-overridden: 6.0.0(postcss@8.4.45)
+      postcss-merge-longhand: 6.0.0(postcss@8.4.45)
+      postcss-merge-rules: 6.0.1(postcss@8.4.45)
+      postcss-minify-font-values: 6.0.0(postcss@8.4.45)
+      postcss-minify-gradients: 6.0.0(postcss@8.4.45)
+      postcss-minify-params: 6.0.0(postcss@8.4.45)
+      postcss-minify-selectors: 6.0.0(postcss@8.4.45)
+      postcss-normalize-charset: 6.0.0(postcss@8.4.45)
+      postcss-normalize-display-values: 6.0.0(postcss@8.4.45)
+      postcss-normalize-positions: 6.0.0(postcss@8.4.45)
+      postcss-normalize-repeat-style: 6.0.0(postcss@8.4.45)
+      postcss-normalize-string: 6.0.0(postcss@8.4.45)
+      postcss-normalize-timing-functions: 6.0.0(postcss@8.4.45)
+      postcss-normalize-unicode: 6.0.0(postcss@8.4.45)
+      postcss-normalize-url: 6.0.0(postcss@8.4.45)
+      postcss-normalize-whitespace: 6.0.0(postcss@8.4.45)
+      postcss-ordered-values: 6.0.0(postcss@8.4.45)
+      postcss-reduce-initial: 6.0.0(postcss@8.4.45)
+      postcss-reduce-transforms: 6.0.0(postcss@8.4.45)
+      postcss-svgo: 6.0.0(postcss@8.4.45)
+      postcss-unique-selectors: 6.0.0(postcss@8.4.45)
 
   cssnano-utils@3.1.0(postcss@8.4.39):
     dependencies:
       postcss: 8.4.39
 
-  cssnano-utils@4.0.0(postcss@8.4.39):
+  cssnano-utils@4.0.0(postcss@8.4.45):
     dependencies:
-      postcss: 8.4.39
+      postcss: 8.4.45
 
   cssnano@5.1.15(postcss@8.4.39):
     dependencies:
@@ -23325,11 +24566,11 @@ snapshots:
       postcss: 8.4.39
       yaml: 1.10.2
 
-  cssnano@6.0.1(postcss@8.4.39):
+  cssnano@6.0.1(postcss@8.4.45):
     dependencies:
-      cssnano-preset-default: 6.0.1(postcss@8.4.39)
+      cssnano-preset-default: 6.0.1(postcss@8.4.45)
       lilconfig: 2.1.0
-      postcss: 8.4.39
+      postcss: 8.4.45
 
   csso@4.2.0:
     dependencies:
@@ -23339,6 +24580,14 @@ snapshots:
     dependencies:
       css-tree: 2.2.1
 
+  cssom@0.3.8: {}
+
+  cssom@0.5.0: {}
+
+  cssstyle@2.3.0:
+    dependencies:
+      cssom: 0.3.8
+
   cssstyle@4.0.1:
     dependencies:
       rrweb-cssom: 0.6.0
@@ -23361,6 +24610,12 @@ snapshots:
 
   dargs@7.0.0: {}
 
+  data-urls@3.0.2:
+    dependencies:
+      abab: 2.0.6
+      whatwg-mimetype: 3.0.0
+      whatwg-url: 11.0.0
+
   data-urls@5.0.0:
     dependencies:
       whatwg-mimetype: 4.0.0
@@ -23396,6 +24651,12 @@ snapshots:
     dependencies:
       ms: 2.1.3
 
+  debug@4.3.1(supports-color@8.1.1):
+    dependencies:
+      ms: 2.1.2
+    optionalDependencies:
+      supports-color: 8.1.1
+
   debug@4.3.4(supports-color@8.1.1):
     dependencies:
       ms: 2.1.2
@@ -23647,6 +24908,10 @@ snapshots:
 
   domelementtype@2.3.0: {}
 
+  domexception@4.0.0:
+    dependencies:
+      webidl-conversions: 7.0.0
+
   domhandler@2.4.2:
     dependencies:
       domelementtype: 1.3.1
@@ -23689,18 +24954,12 @@ snapshots:
 
   dotenv-expand@10.0.0: {}
 
-  dotenv-expand@11.0.6:
-    dependencies:
-      dotenv: 16.4.5
-
   dotenv-expand@5.1.0: {}
 
   dotenv@10.0.0: {}
 
   dotenv@16.3.1: {}
 
-  dotenv@16.4.5: {}
-
   downgrade-root@1.2.2:
     dependencies:
       default-uid: 1.0.0
@@ -23735,7 +24994,7 @@ snapshots:
       '@one-ini/wasm': 0.1.1
       commander: 10.0.1
       minimatch: 9.0.1
-      semver: 7.6.3
+      semver: 7.5.4
 
   ee-first@1.1.1: {}
 
@@ -23755,6 +25014,8 @@ snapshots:
 
   emoji-regex@9.2.2: {}
 
+  emoji-toolkit@6.6.0: {}
+
   emoji-toolkit@8.0.0: {}
 
   emojis-list@3.0.0: {}
@@ -23809,7 +25070,6 @@ snapshots:
   errno@0.1.8:
     dependencies:
       prr: 1.0.1
-    optional: true
 
   error-ex@1.3.2:
     dependencies:
@@ -24135,18 +25395,26 @@ snapshots:
 
   escape-string-regexp@5.0.0: {}
 
-  eslint-config-semistandard@17.0.0(eslint-config-standard@17.1.0(eslint-plugin-import@2.29.0(eslint@8.56.0))(eslint-plugin-n@15.7.0(eslint@8.56.0))(eslint-plugin-promise@6.1.1(eslint@8.56.0))(eslint@8.56.0))(eslint-plugin-import@2.29.0(eslint@8.56.0))(eslint-plugin-n@15.7.0(eslint@8.56.0))(eslint-plugin-promise@6.1.1(eslint@8.56.0))(eslint@8.56.0):
+  escodegen@2.1.0:
+    dependencies:
+      esprima: 4.0.1
+      estraverse: 5.3.0
+      esutils: 2.0.3
+    optionalDependencies:
+      source-map: 0.6.1
+
+  eslint-config-semistandard@17.0.0(eslint-config-standard@17.1.0(eslint-plugin-import@2.29.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0))(eslint-plugin-n@15.7.0(eslint@8.56.0))(eslint-plugin-promise@6.1.1(eslint@8.56.0))(eslint@8.56.0))(eslint-plugin-import@2.29.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0))(eslint-plugin-n@15.7.0(eslint@8.56.0))(eslint-plugin-promise@6.1.1(eslint@8.56.0))(eslint@8.56.0):
     dependencies:
       eslint: 8.56.0
-      eslint-config-standard: 17.1.0(eslint-plugin-import@2.29.0(eslint@8.56.0))(eslint-plugin-n@15.7.0(eslint@8.56.0))(eslint-plugin-promise@6.1.1(eslint@8.56.0))(eslint@8.56.0)
-      eslint-plugin-import: 2.29.0(eslint@8.56.0)
+      eslint-config-standard: 17.1.0(eslint-plugin-import@2.29.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0))(eslint-plugin-n@15.7.0(eslint@8.56.0))(eslint-plugin-promise@6.1.1(eslint@8.56.0))(eslint@8.56.0)
+      eslint-plugin-import: 2.29.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0)
       eslint-plugin-n: 15.7.0(eslint@8.56.0)
       eslint-plugin-promise: 6.1.1(eslint@8.56.0)
 
-  eslint-config-standard@17.1.0(eslint-plugin-import@2.29.0(eslint@8.56.0))(eslint-plugin-n@15.7.0(eslint@8.56.0))(eslint-plugin-promise@6.1.1(eslint@8.56.0))(eslint@8.56.0):
+  eslint-config-standard@17.1.0(eslint-plugin-import@2.29.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0))(eslint-plugin-n@15.7.0(eslint@8.56.0))(eslint-plugin-promise@6.1.1(eslint@8.56.0))(eslint@8.56.0):
     dependencies:
       eslint: 8.56.0
-      eslint-plugin-import: 2.29.0(eslint@8.56.0)
+      eslint-plugin-import: 2.29.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0)
       eslint-plugin-n: 15.7.0(eslint@8.56.0)
       eslint-plugin-promise: 6.1.1(eslint@8.56.0)
 
@@ -24158,10 +25426,11 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.8.0(eslint-import-resolver-node@0.3.9)(eslint@8.56.0):
+  eslint-module-utils@2.8.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint-import-resolver-node@0.3.9)(eslint@8.56.0):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
+      '@typescript-eslint/parser': 7.0.1(eslint@8.56.0)(typescript@5.4.2)
       eslint: 8.56.0
       eslint-import-resolver-node: 0.3.9
     transitivePeerDependencies:
@@ -24179,7 +25448,13 @@ snapshots:
       eslint-utils: 2.1.0
       regexpp: 3.2.0
 
-  eslint-plugin-import@2.29.0(eslint@8.56.0):
+  eslint-plugin-eslint-plugin@5.2.1(eslint@8.56.0):
+    dependencies:
+      eslint: 8.56.0
+      eslint-utils: 3.0.0(eslint@8.56.0)
+      estraverse: 5.3.0
+
+  eslint-plugin-import@2.29.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0):
     dependencies:
       array-includes: 3.1.7
       array.prototype.findlastindex: 1.2.3
@@ -24189,7 +25464,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 8.56.0
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.8.0(eslint-import-resolver-node@0.3.9)(eslint@8.56.0)
+      eslint-module-utils: 2.8.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint-import-resolver-node@0.3.9)(eslint@8.56.0)
       hasown: 2.0.0
       is-core-module: 2.13.1
       is-glob: 4.0.3
@@ -24199,32 +25474,54 @@ snapshots:
       object.values: 1.1.7
       semver: 6.3.1
       tsconfig-paths: 3.14.2
+    optionalDependencies:
+      '@typescript-eslint/parser': 7.0.1(eslint@8.56.0)(typescript@5.4.2)
     transitivePeerDependencies:
       - eslint-import-resolver-typescript
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-plugin-jest@25.7.0(eslint@8.56.0)(jest@29.7.0(@types/node@18.18.9))(typescript@5.4.2):
+  eslint-plugin-jest@25.7.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0)(typescript@5.4.2):
     dependencies:
       '@typescript-eslint/experimental-utils': 5.62.0(eslint@8.56.0)(typescript@5.4.2)
       eslint: 8.56.0
     optionalDependencies:
-      jest: 29.7.0(@types/node@18.18.9)
+      '@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0)(typescript@5.4.2)
     transitivePeerDependencies:
       - supports-color
       - typescript
 
+  eslint-plugin-jsdoc@39.9.1(eslint@8.56.0):
+    dependencies:
+      '@es-joy/jsdoccomment': 0.36.1
+      comment-parser: 1.3.1
+      debug: 4.3.6
+      escape-string-regexp: 4.0.0
+      eslint: 8.56.0
+      esquery: 1.5.0
+      semver: 7.5.4
+      spdx-expression-parse: 3.0.1
+    transitivePeerDependencies:
+      - supports-color
+
+  eslint-plugin-mocha@10.5.0(eslint@8.56.0):
+    dependencies:
+      eslint: 8.56.0
+      eslint-utils: 3.0.0(eslint@8.56.0)
+      globals: 13.24.0
+      rambda: 7.5.0
+
   eslint-plugin-n@15.7.0(eslint@8.56.0):
     dependencies:
-      builtins: 5.1.0
+      builtins: 5.0.1
       eslint: 8.56.0
       eslint-plugin-es: 4.1.0(eslint@8.56.0)
       eslint-utils: 3.0.0(eslint@8.56.0)
-      ignore: 5.3.2
-      is-core-module: 2.15.1
+      ignore: 5.3.0
+      is-core-module: 2.13.1
       minimatch: 3.1.2
       resolve: 1.22.8
-      semver: 7.6.3
+      semver: 7.5.4
 
   eslint-plugin-node@11.1.0(eslint@8.56.0):
     dependencies:
@@ -24648,6 +25945,10 @@ snapshots:
 
   fast-levenshtein@2.0.6: {}
 
+  fast-url-parser@1.1.3:
+    dependencies:
+      punycode: 1.4.1
+
   fastest-levenshtein@1.0.16: {}
 
   fastq@1.15.0:
@@ -24729,10 +26030,6 @@ snapshots:
     dependencies:
       to-regex-range: 5.0.1
 
-  fill-range@7.1.1:
-    dependencies:
-      to-regex-range: 5.0.1
-
   filter-obj@2.0.2: {}
 
   finalhandler@1.2.0:
@@ -24891,8 +26188,6 @@ snapshots:
     optionalDependencies:
       debug: 4.3.6
 
-  follow-redirects@1.15.9: {}
-
   for-each@0.3.3:
     dependencies:
       is-callable: 1.2.7
@@ -24938,10 +26233,6 @@ snapshots:
 
   fromentries@1.3.2: {}
 
-  front-matter@4.0.2:
-    dependencies:
-      js-yaml: 3.14.1
-
   fs-constants@1.0.0: {}
 
   fs-exists-sync@0.1.0: {}
@@ -25210,6 +26501,24 @@ snapshots:
       package-json-from-dist: 1.0.0
       path-scurry: 1.11.1
 
+  glob@7.1.4:
+    dependencies:
+      fs.realpath: 1.0.0
+      inflight: 1.0.6
+      inherits: 2.0.4
+      minimatch: 3.1.2
+      once: 1.4.0
+      path-is-absolute: 1.0.1
+
+  glob@7.1.6:
+    dependencies:
+      fs.realpath: 1.0.0
+      inflight: 1.0.6
+      inherits: 2.0.4
+      minimatch: 3.1.2
+      once: 1.4.0
+      path-is-absolute: 1.0.1
+
   glob@7.2.0:
     dependencies:
       fs.realpath: 1.0.0
@@ -25243,7 +26552,7 @@ snapshots:
       es6-error: 4.1.1
       matcher: 3.0.0
       roarr: 2.15.4
-      semver: 7.6.3
+      semver: 7.5.4
       serialize-error: 7.0.1
 
   global-agent@3.0.0:
@@ -25317,10 +26626,25 @@ snapshots:
     dependencies:
       type-fest: 0.20.2
 
+  globals@13.24.0:
+    dependencies:
+      type-fest: 0.20.2
+
   globalthis@1.0.3:
     dependencies:
       define-properties: 1.2.1
 
+  globby@10.0.2:
+    dependencies:
+      '@types/glob': 7.2.0
+      array-union: 2.1.0
+      dir-glob: 3.0.1
+      fast-glob: 3.3.2
+      glob: 7.2.3
+      ignore: 5.3.0
+      merge2: 1.4.1
+      slash: 3.0.0
+
   globby@11.1.0:
     dependencies:
       array-union: 2.1.0
@@ -25435,6 +26759,8 @@ snapshots:
 
   grouped-queue@2.0.0: {}
 
+  growl@1.10.5: {}
+
   gulp-cached@1.1.1:
     dependencies:
       lodash.defaults: 4.2.0
@@ -25484,12 +26810,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  gulp-postcss@9.0.1(postcss@8.4.39):
+  gulp-postcss@9.0.1(postcss@8.4.45):
     dependencies:
       fancy-log: 1.3.3
       plugin-error: 1.0.1
-      postcss: 8.4.39
-      postcss-load-config: 3.1.4(postcss@8.4.39)
+      postcss: 8.4.45
+      postcss-load-config: 3.1.4(postcss@8.4.45)
       vinyl-sourcemaps-apply: 0.2.1
     transitivePeerDependencies:
       - ts-node
@@ -25625,12 +26951,13 @@ snapshots:
     dependencies:
       function-bind: 1.1.2
 
-  hasown@2.0.2:
-    dependencies:
-      function-bind: 1.1.2
-
   he@1.2.0: {}
 
+  header-case@2.0.4:
+    dependencies:
+      capital-case: 1.0.4
+      tslib: 2.6.2
+
   highlight.js@10.7.3: {}
 
   homedir-polyfill@1.0.3:
@@ -25858,8 +27185,6 @@ snapshots:
 
   ignore@5.3.0: {}
 
-  ignore@5.3.2: {}
-
   image-q@4.0.0:
     dependencies:
       '@types/node': 16.9.1
@@ -26027,7 +27352,7 @@ snapshots:
 
   is-accessor-descriptor@1.0.1:
     dependencies:
-      hasown: 2.0.2
+      hasown: 2.0.0
 
   is-alphabetical@1.0.4: {}
 
@@ -26086,13 +27411,9 @@ snapshots:
     dependencies:
       hasown: 2.0.0
 
-  is-core-module@2.15.1:
-    dependencies:
-      hasown: 2.0.2
-
   is-data-descriptor@1.0.1:
     dependencies:
-      hasown: 2.0.2
+      hasown: 2.0.0
 
   is-date-object@1.0.5:
     dependencies:
@@ -26325,6 +27646,8 @@ snapshots:
 
   is-yarn-global@0.3.0: {}
 
+  isarray@0.0.1: {}
+
   isarray@1.0.0: {}
 
   isarray@2.0.5: {}
@@ -26380,7 +27703,7 @@ snapshots:
       '@babel/parser': 7.23.9
       '@istanbuljs/schema': 0.1.3
       istanbul-lib-coverage: 3.2.1
-      semver: 7.6.3
+      semver: 7.5.4
     transitivePeerDependencies:
       - supports-color
 
@@ -26472,25 +27795,6 @@ snapshots:
       - babel-plugin-macros
       - supports-color
 
-  jest-cli@29.7.0(@types/node@18.18.9):
-    dependencies:
-      '@jest/core': 29.7.0
-      '@jest/test-result': 29.7.0
-      '@jest/types': 29.6.3
-      chalk: 4.1.2
-      create-jest: 29.7.0(@types/node@18.18.9)
-      exit: 0.1.2
-      import-local: 3.1.0
-      jest-config: 29.7.0(@types/node@18.18.9)
-      jest-util: 29.7.0
-      jest-validate: 29.7.0
-      yargs: 17.7.2
-    transitivePeerDependencies:
-      - '@types/node'
-      - babel-plugin-macros
-      - supports-color
-      - ts-node
-
   jest-cli@29.7.0(@types/node@20.9.0):
     dependencies:
       '@jest/core': 29.7.0
@@ -26510,36 +27814,6 @@ snapshots:
       - supports-color
       - ts-node
 
-  jest-config@29.7.0(@types/node@18.18.9):
-    dependencies:
-      '@babel/core': 7.23.2
-      '@jest/test-sequencer': 29.7.0
-      '@jest/types': 29.6.3
-      babel-jest: 29.7.0(@babel/core@7.23.2)
-      chalk: 4.1.2
-      ci-info: 3.9.0
-      deepmerge: 4.3.1
-      glob: 7.2.3
-      graceful-fs: 4.2.11
-      jest-circus: 29.7.0
-      jest-environment-node: 29.7.0
-      jest-get-type: 29.6.3
-      jest-regex-util: 29.6.3
-      jest-resolve: 29.7.0
-      jest-runner: 29.7.0
-      jest-util: 29.7.0
-      jest-validate: 29.7.0
-      micromatch: 4.0.5
-      parse-json: 5.2.0
-      pretty-format: 29.7.0
-      slash: 3.0.0
-      strip-json-comments: 3.1.1
-    optionalDependencies:
-      '@types/node': 18.18.9
-    transitivePeerDependencies:
-      - babel-plugin-macros
-      - supports-color
-
   jest-config@29.7.0(@types/node@20.9.0):
     dependencies:
       '@babel/core': 7.23.2
@@ -26653,10 +27927,10 @@ snapshots:
       '@types/node': 20.9.0
       jest-util: 29.7.0
 
-  jest-playwright-preset@4.0.0(jest-circus@29.7.0)(jest-environment-node@29.7.0)(jest-runner@29.7.0)(jest@29.7.0(@types/node@18.18.9)):
+  jest-playwright-preset@4.0.0(jest-circus@29.7.0)(jest-environment-node@29.7.0)(jest-runner@29.7.0)(jest@29.7.0(@types/node@20.9.0)):
     dependencies:
       expect-playwright: 0.8.0
-      jest: 29.7.0(@types/node@18.18.9)
+      jest: 29.7.0(@types/node@20.9.0)
       jest-circus: 29.7.0
       jest-environment-node: 29.7.0
       jest-process-manager: 0.4.0
@@ -26810,11 +28084,11 @@ snapshots:
       leven: 3.1.0
       pretty-format: 29.7.0
 
-  jest-watch-typeahead@2.2.2(jest@29.7.0(@types/node@18.18.9)):
+  jest-watch-typeahead@2.2.2(jest@29.7.0(@types/node@20.9.0)):
     dependencies:
       ansi-escapes: 6.2.0
       chalk: 5.3.0
-      jest: 29.7.0(@types/node@18.18.9)
+      jest: 29.7.0(@types/node@20.9.0)
       jest-regex-util: 29.6.3
       jest-watcher: 29.7.0
       slash: 5.1.0
@@ -26851,18 +28125,6 @@ snapshots:
       merge-stream: 2.0.0
       supports-color: 8.1.1
 
-  jest@29.7.0(@types/node@18.18.9):
-    dependencies:
-      '@jest/core': 29.7.0
-      '@jest/types': 29.6.3
-      import-local: 3.1.0
-      jest-cli: 29.7.0(@types/node@18.18.9)
-    transitivePeerDependencies:
-      - '@types/node'
-      - babel-plugin-macros
-      - supports-color
-      - ts-node
-
   jest@29.7.0(@types/node@20.9.0):
     dependencies:
       '@jest/core': 29.7.0
@@ -26917,6 +28179,10 @@ snapshots:
       argparse: 1.0.10
       esprima: 4.0.1
 
+  js-yaml@4.0.0:
+    dependencies:
+      argparse: 2.0.1
+
   js-yaml@4.1.0:
     dependencies:
       argparse: 2.0.1
@@ -26950,6 +28216,46 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  jsdoc-type-pratt-parser@3.1.0: {}
+
+  jsdom-global@3.0.2(jsdom@18.1.1):
+    dependencies:
+      jsdom: 18.1.1
+
+  jsdom@18.1.1:
+    dependencies:
+      abab: 2.0.6
+      acorn: 8.11.2
+      acorn-globals: 6.0.0
+      cssom: 0.5.0
+      cssstyle: 2.3.0
+      data-urls: 3.0.2
+      decimal.js: 10.4.3
+      domexception: 4.0.0
+      escodegen: 2.1.0
+      form-data: 4.0.0
+      html-encoding-sniffer: 3.0.0
+      http-proxy-agent: 5.0.0
+      https-proxy-agent: 5.0.1
+      is-potential-custom-element-name: 1.0.1
+      nwsapi: 2.2.7
+      parse5: 6.0.1
+      saxes: 5.0.1
+      symbol-tree: 3.2.4
+      tough-cookie: 4.1.3
+      w3c-hr-time: 1.0.2
+      w3c-xmlserializer: 3.0.0
+      webidl-conversions: 7.0.0
+      whatwg-encoding: 2.0.0
+      whatwg-mimetype: 3.0.0
+      whatwg-url: 10.0.0
+      ws: 8.16.0
+      xml-name-validator: 4.0.0
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+
   jsdom@24.0.0:
     dependencies:
       cssstyle: 4.0.1
@@ -27009,6 +28315,10 @@ snapshots:
 
   json-stringify-safe@5.0.1: {}
 
+  json5-with-undefined@2.1.301:
+    dependencies:
+      minimist: 1.2.8
+
   json5@1.0.2:
     dependencies:
       minimist: 1.2.8
@@ -27036,12 +28346,16 @@ snapshots:
       is-promise: 2.2.2
       promise: 7.3.1
 
+  just-clone@6.2.0: {}
+
   just-debounce@1.1.0: {}
 
   just-diff-apply@5.5.0: {}
 
   just-diff@6.0.2: {}
 
+  just-extend@4.2.1: {}
+
   keyv@3.1.0:
     dependencies:
       json-buffer: 3.0.0
@@ -27105,7 +28419,7 @@ snapshots:
   lazy-universal-dotenv@4.0.0:
     dependencies:
       app-root-dir: 1.0.2
-      dotenv: 16.4.5
+      dotenv: 16.3.1
       dotenv-expand: 10.0.0
 
   lazystream@1.0.1:
@@ -27120,6 +28434,11 @@ snapshots:
     dependencies:
       flush-write-stream: 1.1.1
 
+  less-loader@11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96)):
+    dependencies:
+      less: 4.2.0
+      webpack: 5.89.0(@swc/core@1.3.96)
+
   less@4.2.0:
     dependencies:
       copy-anything: 2.0.6
@@ -27183,8 +28502,6 @@ snapshots:
 
   lines-and-columns@1.2.4: {}
 
-  lines-and-columns@2.0.3: {}
-
   lines-and-columns@2.0.4: {}
 
   linkify-it@4.0.1:
@@ -27308,6 +28625,8 @@ snapshots:
 
   lodash.flattendeep@4.4.0: {}
 
+  lodash.get@4.4.2: {}
+
   lodash.isfunction@3.0.9: {}
 
   lodash.ismatch@4.4.0: {}
@@ -27352,6 +28671,10 @@ snapshots:
     dependencies:
       chalk: 2.4.2
 
+  log-symbols@4.0.0:
+    dependencies:
+      chalk: 4.1.2
+
   log-symbols@4.1.0:
     dependencies:
       chalk: 4.1.2
@@ -27445,7 +28768,7 @@ snapshots:
 
   make-dir@4.0.0:
     dependencies:
-      semver: 7.6.3
+      semver: 7.5.4
 
   make-fetch-happen@10.2.1:
     dependencies:
@@ -27771,7 +29094,7 @@ snapshots:
       textextensions: 5.16.0
       vinyl: 3.0.0
 
-  mem-fs-editor@9.7.0(mem-fs@4.0.0):
+  mem-fs-editor@9.7.0:
     dependencies:
       binaryextensions: 4.19.0
       commondir: 1.0.1
@@ -27783,13 +29106,11 @@ snapshots:
       multimatch: 5.0.0
       normalize-path: 3.0.0
       textextensions: 5.16.0
-    optionalDependencies:
-      mem-fs: 4.0.0
 
   mem-fs@4.0.0:
     dependencies:
-      '@types/node': 20.16.5
-      '@types/vinyl': 2.0.12
+      '@types/node': 20.9.0
+      '@types/vinyl': 2.0.10
       vinyl: 3.0.0
       vinyl-file: 5.0.0
 
@@ -27825,6 +29146,11 @@ snapshots:
     dependencies:
       map-or-similar: 1.5.0
 
+  memory-fs@0.4.1:
+    dependencies:
+      errno: 0.1.8
+      readable-stream: 2.3.8
+
   memorystream@0.3.1: {}
 
   meow@10.1.5:
@@ -28111,13 +29437,14 @@ snapshots:
       braces: 3.0.2
       picomatch: 2.3.1
 
-  micromatch@4.0.8:
-    dependencies:
-      braces: 3.0.3
-      picomatch: 2.3.1
+  mime-db@1.33.0: {}
 
   mime-db@1.52.0: {}
 
+  mime-types@2.1.18:
+    dependencies:
+      mime-db: 1.33.0
+
   mime-types@2.1.35:
     dependencies:
       mime-db: 1.52.0
@@ -28151,6 +29478,10 @@ snapshots:
 
   minimalistic-assert@1.0.1: {}
 
+  minimatch@3.0.4:
+    dependencies:
+      brace-expansion: 1.1.11
+
   minimatch@3.0.5:
     dependencies:
       brace-expansion: 1.1.11
@@ -28292,6 +29623,56 @@ snapshots:
       yargs-parser: 20.2.4
       yargs-unparser: 2.0.0
 
+  mocha@8.4.0:
+    dependencies:
+      '@ungap/promise-all-settled': 1.1.2
+      ansi-colors: 4.1.1
+      browser-stdout: 1.3.1
+      chokidar: 3.5.1
+      debug: 4.3.1(supports-color@8.1.1)
+      diff: 5.0.0
+      escape-string-regexp: 4.0.0
+      find-up: 5.0.0
+      glob: 7.1.6
+      growl: 1.10.5
+      he: 1.2.0
+      js-yaml: 4.0.0
+      log-symbols: 4.0.0
+      minimatch: 3.0.4
+      ms: 2.1.3
+      nanoid: 3.1.20
+      serialize-javascript: 5.0.1
+      strip-json-comments: 3.1.1
+      supports-color: 8.1.1
+      which: 2.0.2
+      wide-align: 1.1.3
+      workerpool: 6.1.0
+      yargs: 16.2.0
+      yargs-parser: 20.2.4
+      yargs-unparser: 2.0.0
+
+  mochapack@2.1.4(mocha@8.4.0)(webpack@5.89.0(@swc/core@1.3.96)):
+    dependencies:
+      '@babel/runtime-corejs2': 7.25.6
+      chalk: 2.4.2
+      chokidar: 3.5.3
+      glob-parent: 5.1.2
+      globby: 10.0.2
+      interpret: 1.4.0
+      is-glob: 4.0.3
+      loader-utils: 1.4.2
+      lodash: 4.17.21
+      memory-fs: 0.4.1
+      minimatch: 3.1.2
+      mocha: 8.4.0
+      nodent-runtime: 3.2.1
+      normalize-path: 3.0.0
+      progress: 2.0.3
+      source-map-support: 0.5.21
+      toposort: 2.0.2
+      webpack: 5.89.0(@swc/core@1.3.96)
+      yargs: 14.0.0
+
   modify-values@1.0.1: {}
 
   module-alias@2.2.3: {}
@@ -28306,6 +29687,8 @@ snapshots:
 
   ms@2.1.3: {}
 
+  muggle-string@0.3.1: {}
+
   muggle-string@0.4.1: {}
 
   multicast-dns@7.2.5:
@@ -28347,6 +29730,8 @@ snapshots:
   nan@2.18.0:
     optional: true
 
+  nanoid@3.1.20: {}
+
   nanoid@3.3.3: {}
 
   nanoid@3.3.7: {}
@@ -28367,6 +29752,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  natural-compare-lite@1.4.0: {}
+
   natural-compare@1.4.0: {}
 
   needle@3.2.0:
@@ -28388,6 +29775,14 @@ snapshots:
 
   nice-try@1.0.5: {}
 
+  nise@5.1.5:
+    dependencies:
+      '@sinonjs/commons': 2.0.0
+      '@sinonjs/fake-timers': 10.3.0
+      '@sinonjs/text-encoding': 0.7.2
+      just-extend: 4.2.1
+      path-to-regexp: 1.8.0
+
   no-case@3.0.4:
     dependencies:
       lower-case: 2.0.2
@@ -28420,7 +29815,7 @@ snapshots:
       make-fetch-happen: 13.0.0
       nopt: 7.2.0
       proc-log: 3.0.0
-      semver: 7.6.3
+      semver: 7.5.4
       tar: 6.2.0
       which: 4.0.0
     transitivePeerDependencies:
@@ -28436,7 +29831,7 @@ snapshots:
       nopt: 6.0.0
       npmlog: 6.0.2
       rimraf: 3.0.2
-      semver: 7.6.3
+      semver: 7.5.4
       tar: 6.2.0
       which: 2.0.2
     transitivePeerDependencies:
@@ -28453,6 +29848,8 @@ snapshots:
 
   node-releases@2.0.13: {}
 
+  nodent-runtime@3.2.1: {}
+
   nopt@6.0.0:
     dependencies:
       abbrev: 1.1.1
@@ -28471,22 +29868,22 @@ snapshots:
   normalize-package-data@3.0.3:
     dependencies:
       hosted-git-info: 4.1.0
-      is-core-module: 2.15.1
-      semver: 7.6.3
+      is-core-module: 2.13.1
+      semver: 7.5.4
       validate-npm-package-license: 3.0.4
 
   normalize-package-data@5.0.0:
     dependencies:
       hosted-git-info: 6.1.1
       is-core-module: 2.13.1
-      semver: 7.6.3
+      semver: 7.5.4
       validate-npm-package-license: 3.0.4
 
   normalize-package-data@6.0.0:
     dependencies:
       hosted-git-info: 7.0.1
-      is-core-module: 2.15.1
-      semver: 7.6.3
+      is-core-module: 2.13.1
+      semver: 7.5.4
       validate-npm-package-license: 3.0.4
 
   normalize-path@1.0.0: {}
@@ -28522,7 +29919,7 @@ snapshots:
 
   npm-install-checks@6.3.0:
     dependencies:
-      semver: 7.6.3
+      semver: 7.5.4
 
   npm-keyword@6.1.0:
     dependencies:
@@ -28542,7 +29939,7 @@ snapshots:
     dependencies:
       hosted-git-info: 7.0.1
       proc-log: 3.0.0
-      semver: 7.6.3
+      semver: 7.5.4
       validate-npm-package-name: 5.0.0
 
   npm-packlist@7.0.4:
@@ -28565,7 +29962,7 @@ snapshots:
       npm-install-checks: 6.3.0
       npm-normalize-package-bin: 3.0.1
       npm-package-arg: 11.0.1
-      semver: 7.6.3
+      semver: 7.5.4
 
   npm-registry-fetch@14.0.5:
     dependencies:
@@ -28645,6 +30042,12 @@ snapshots:
     dependencies:
       boolbase: 1.0.0
 
+  null-loader@4.0.1(webpack@5.89.0(@swc/core@1.3.96)(esbuild@0.18.20)):
+    dependencies:
+      loader-utils: 2.0.4
+      schema-utils: 3.3.0
+      webpack: 5.89.0(@swc/core@1.3.96)(esbuild@0.18.20)
+
   null-loader@4.0.1(webpack@5.89.0(@swc/core@1.3.96)):
     dependencies:
       loader-utils: 2.0.4
@@ -28657,35 +30060,34 @@ snapshots:
 
   nwsapi@2.2.7: {}
 
-  nx@19.8.0(@swc/core@1.3.96):
+  nx@17.2.1(@swc/core@1.3.96):
     dependencies:
-      '@napi-rs/wasm-runtime': 0.2.4
-      '@nrwl/tao': 19.8.0(@swc/core@1.3.96)
+      '@nrwl/tao': 17.2.1(@swc/core@1.3.96)
       '@yarnpkg/lockfile': 1.1.0
       '@yarnpkg/parsers': 3.0.0-rc.46
-      '@zkochan/js-yaml': 0.0.7
-      axios: 1.7.7
+      '@zkochan/js-yaml': 0.0.6
+      axios: 1.6.2
       chalk: 4.1.2
       cli-cursor: 3.1.0
       cli-spinners: 2.6.1
       cliui: 8.0.1
-      dotenv: 16.4.5
-      dotenv-expand: 11.0.6
+      dotenv: 16.3.1
+      dotenv-expand: 10.0.0
       enquirer: 2.3.6
       figures: 3.2.0
       flat: 5.0.2
-      front-matter: 4.0.2
       fs-extra: 11.1.1
-      ignore: 5.3.2
+      glob: 7.1.4
+      ignore: 5.3.0
       jest-diff: 29.7.0
+      js-yaml: 4.1.0
       jsonc-parser: 3.2.0
-      lines-and-columns: 2.0.3
-      minimatch: 9.0.3
+      lines-and-columns: 2.0.4
+      minimatch: 3.0.5
       node-machine-id: 1.1.12
       npm-run-path: 4.0.1
       open: 8.4.2
-      ora: 5.3.0
-      semver: 7.6.3
+      semver: 7.5.3
       string-width: 4.2.3
       strong-log-transformer: 2.1.0
       tar-stream: 2.2.0
@@ -28695,16 +30097,16 @@ snapshots:
       yargs: 17.7.2
       yargs-parser: 21.1.1
     optionalDependencies:
-      '@nx/nx-darwin-arm64': 19.8.0
-      '@nx/nx-darwin-x64': 19.8.0
-      '@nx/nx-freebsd-x64': 19.8.0
-      '@nx/nx-linux-arm-gnueabihf': 19.8.0
-      '@nx/nx-linux-arm64-gnu': 19.8.0
-      '@nx/nx-linux-arm64-musl': 19.8.0
-      '@nx/nx-linux-x64-gnu': 19.8.0
-      '@nx/nx-linux-x64-musl': 19.8.0
-      '@nx/nx-win32-arm64-msvc': 19.8.0
-      '@nx/nx-win32-x64-msvc': 19.8.0
+      '@nx/nx-darwin-arm64': 17.2.1
+      '@nx/nx-darwin-x64': 17.2.1
+      '@nx/nx-freebsd-x64': 17.2.1
+      '@nx/nx-linux-arm-gnueabihf': 17.2.1
+      '@nx/nx-linux-arm64-gnu': 17.2.1
+      '@nx/nx-linux-arm64-musl': 17.2.1
+      '@nx/nx-linux-x64-gnu': 17.2.1
+      '@nx/nx-linux-x64-musl': 17.2.1
+      '@nx/nx-win32-arm64-msvc': 17.2.1
+      '@nx/nx-win32-x64-msvc': 17.2.1
       '@swc/core': 1.3.96
     transitivePeerDependencies:
       - debug
@@ -28859,17 +30261,6 @@ snapshots:
       prelude-ls: 1.2.1
       type-check: 0.4.0
 
-  ora@5.3.0:
-    dependencies:
-      bl: 4.1.0
-      chalk: 4.1.2
-      cli-cursor: 3.1.0
-      cli-spinners: 2.9.1
-      is-interactive: 1.0.0
-      log-symbols: 4.1.0
-      strip-ansi: 6.0.1
-      wcwidth: 1.0.1
-
   ora@5.4.1:
     dependencies:
       bl: 4.1.0
@@ -29137,8 +30528,6 @@ snapshots:
 
   pako@1.0.11: {}
 
-  pako@2.1.0: {}
-
   param-case@3.0.4:
     dependencies:
       dot-case: 3.0.4
@@ -29257,6 +30646,11 @@ snapshots:
 
   path-browserify@1.0.1: {}
 
+  path-case@3.0.4:
+    dependencies:
+      dot-case: 3.0.4
+      tslib: 2.6.2
+
   path-dirname@1.0.2: {}
 
   path-exists@2.1.0:
@@ -29271,6 +30665,8 @@ snapshots:
 
   path-is-absolute@1.0.1: {}
 
+  path-is-inside@1.0.2: {}
+
   path-key@2.0.1: {}
 
   path-key@3.1.1: {}
@@ -29292,6 +30688,12 @@ snapshots:
 
   path-to-regexp@0.1.7: {}
 
+  path-to-regexp@1.8.0:
+    dependencies:
+      isarray: 0.0.1
+
+  path-to-regexp@2.2.1: {}
+
   path-to-regexp@6.2.1: {}
 
   path-type@1.1.0:
@@ -29437,9 +30839,9 @@ snapshots:
       postcss-selector-parser: 6.0.13
       postcss-value-parser: 4.2.0
 
-  postcss-calc@9.0.1(postcss@8.4.39):
+  postcss-calc@9.0.1(postcss@8.4.45):
     dependencies:
-      postcss: 8.4.39
+      postcss: 8.4.45
       postcss-selector-parser: 6.0.13
       postcss-value-parser: 4.2.0
 
@@ -29497,12 +30899,12 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-colormin@6.0.0(postcss@8.4.39):
+  postcss-colormin@6.0.0(postcss@8.4.45):
     dependencies:
       browserslist: 4.22.1
       caniuse-api: 3.0.0
       colord: 2.9.3
-      postcss: 8.4.39
+      postcss: 8.4.45
       postcss-value-parser: 4.2.0
 
   postcss-convert-values@5.1.3(postcss@8.4.39):
@@ -29511,10 +30913,10 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-convert-values@6.0.0(postcss@8.4.39):
+  postcss-convert-values@6.0.0(postcss@8.4.45):
     dependencies:
       browserslist: 4.22.1
-      postcss: 8.4.39
+      postcss: 8.4.45
       postcss-value-parser: 4.2.0
 
   postcss-custom-media@7.0.8:
@@ -29540,33 +30942,33 @@ snapshots:
     dependencies:
       postcss: 8.4.39
 
-  postcss-discard-comments@6.0.0(postcss@8.4.39):
+  postcss-discard-comments@6.0.0(postcss@8.4.45):
     dependencies:
-      postcss: 8.4.39
+      postcss: 8.4.45
 
   postcss-discard-duplicates@5.1.0(postcss@8.4.39):
     dependencies:
       postcss: 8.4.39
 
-  postcss-discard-duplicates@6.0.0(postcss@8.4.39):
+  postcss-discard-duplicates@6.0.0(postcss@8.4.45):
     dependencies:
-      postcss: 8.4.39
+      postcss: 8.4.45
 
   postcss-discard-empty@5.1.1(postcss@8.4.39):
     dependencies:
       postcss: 8.4.39
 
-  postcss-discard-empty@6.0.0(postcss@8.4.39):
+  postcss-discard-empty@6.0.0(postcss@8.4.45):
     dependencies:
-      postcss: 8.4.39
+      postcss: 8.4.45
 
   postcss-discard-overridden@5.1.0(postcss@8.4.39):
     dependencies:
       postcss: 8.4.39
 
-  postcss-discard-overridden@6.0.0(postcss@8.4.39):
+  postcss-discard-overridden@6.0.0(postcss@8.4.45):
     dependencies:
-      postcss: 8.4.39
+      postcss: 8.4.45
 
   postcss-double-position-gradients@1.0.0:
     dependencies:
@@ -29603,7 +31005,7 @@ snapshots:
     dependencies:
       htmlparser2: 3.10.1
       postcss: 7.0.39
-      postcss-syntax: 0.36.2(postcss-html@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-jsx@0.36.4(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-less@3.1.4)(postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-scss@2.1.1)(postcss@7.0.39)
+      postcss-syntax: 0.36.2(postcss-html@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-jsx@0.36.4)(postcss-less@3.1.4)(postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-scss@2.1.1)(postcss@7.0.39)
 
   postcss-image-set-function@3.0.1:
     dependencies:
@@ -29618,7 +31020,7 @@ snapshots:
     dependencies:
       '@babel/core': 7.23.2
       postcss: 7.0.39
-      postcss-syntax: 0.36.2(postcss-html@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-jsx@0.36.4(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-less@3.1.4)(postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-scss@2.1.1)(postcss@7.0.39)
+      postcss-syntax: 0.36.2(postcss-html@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-jsx@0.36.4)(postcss-less@3.1.4)(postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-scss@2.1.1)(postcss@7.0.39)
     transitivePeerDependencies:
       - supports-color
 
@@ -29632,16 +31034,16 @@ snapshots:
     dependencies:
       postcss: 7.0.39
 
-  postcss-less@6.0.0(postcss@8.4.39):
+  postcss-less@6.0.0(postcss@8.4.45):
     dependencies:
-      postcss: 8.4.39
+      postcss: 8.4.45
 
-  postcss-load-config@3.1.4(postcss@8.4.39):
+  postcss-load-config@3.1.4(postcss@8.4.45):
     dependencies:
       lilconfig: 2.1.0
       yaml: 1.10.2
     optionalDependencies:
-      postcss: 8.4.39
+      postcss: 8.4.45
 
   postcss-load-config@4.0.1(postcss@8.4.39):
     dependencies:
@@ -29664,7 +31066,7 @@ snapshots:
       cosmiconfig: 7.1.0
       klona: 2.0.6
       postcss: 8.4.39
-      semver: 7.6.3
+      semver: 7.5.4
       webpack: 5.89.0(@swc/core@1.3.96)
 
   postcss-logical@3.0.0:
@@ -29674,7 +31076,7 @@ snapshots:
   postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39):
     dependencies:
       postcss: 7.0.39
-      postcss-syntax: 0.36.2(postcss-html@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-jsx@0.36.4(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-less@3.1.4)(postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-scss@2.1.1)(postcss@7.0.39)
+      postcss-syntax: 0.36.2(postcss-html@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-jsx@0.36.4)(postcss-less@3.1.4)(postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-scss@2.1.1)(postcss@7.0.39)
       remark: 10.0.1
       unist-util-find-all-after: 1.0.5
 
@@ -29690,11 +31092,11 @@ snapshots:
       postcss-value-parser: 4.2.0
       stylehacks: 5.1.1(postcss@8.4.39)
 
-  postcss-merge-longhand@6.0.0(postcss@8.4.39):
+  postcss-merge-longhand@6.0.0(postcss@8.4.45):
     dependencies:
-      postcss: 8.4.39
+      postcss: 8.4.45
       postcss-value-parser: 4.2.0
-      stylehacks: 6.0.0(postcss@8.4.39)
+      stylehacks: 6.0.0(postcss@8.4.45)
 
   postcss-merge-rules@5.1.4(postcss@8.4.39):
     dependencies:
@@ -29704,12 +31106,12 @@ snapshots:
       postcss: 8.4.39
       postcss-selector-parser: 6.0.13
 
-  postcss-merge-rules@6.0.1(postcss@8.4.39):
+  postcss-merge-rules@6.0.1(postcss@8.4.45):
     dependencies:
       browserslist: 4.22.1
       caniuse-api: 3.0.0
-      cssnano-utils: 4.0.0(postcss@8.4.39)
-      postcss: 8.4.39
+      cssnano-utils: 4.0.0(postcss@8.4.45)
+      postcss: 8.4.45
       postcss-selector-parser: 6.0.13
 
   postcss-minify-font-values@5.1.0(postcss@8.4.39):
@@ -29717,9 +31119,9 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-minify-font-values@6.0.0(postcss@8.4.39):
+  postcss-minify-font-values@6.0.0(postcss@8.4.45):
     dependencies:
-      postcss: 8.4.39
+      postcss: 8.4.45
       postcss-value-parser: 4.2.0
 
   postcss-minify-gradients@5.1.1(postcss@8.4.39):
@@ -29729,11 +31131,11 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-minify-gradients@6.0.0(postcss@8.4.39):
+  postcss-minify-gradients@6.0.0(postcss@8.4.45):
     dependencies:
       colord: 2.9.3
-      cssnano-utils: 4.0.0(postcss@8.4.39)
-      postcss: 8.4.39
+      cssnano-utils: 4.0.0(postcss@8.4.45)
+      postcss: 8.4.45
       postcss-value-parser: 4.2.0
 
   postcss-minify-params@5.1.4(postcss@8.4.39):
@@ -29743,11 +31145,11 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-minify-params@6.0.0(postcss@8.4.39):
+  postcss-minify-params@6.0.0(postcss@8.4.45):
     dependencies:
       browserslist: 4.22.1
-      cssnano-utils: 4.0.0(postcss@8.4.39)
-      postcss: 8.4.39
+      cssnano-utils: 4.0.0(postcss@8.4.45)
+      postcss: 8.4.45
       postcss-value-parser: 4.2.0
 
   postcss-minify-selectors@5.2.1(postcss@8.4.39):
@@ -29755,9 +31157,9 @@ snapshots:
       postcss: 8.4.39
       postcss-selector-parser: 6.0.13
 
-  postcss-minify-selectors@6.0.0(postcss@8.4.39):
+  postcss-minify-selectors@6.0.0(postcss@8.4.45):
     dependencies:
-      postcss: 8.4.39
+      postcss: 8.4.45
       postcss-selector-parser: 6.0.13
 
   postcss-modules-extract-imports@3.0.0(postcss@8.4.39):
@@ -29798,18 +31200,18 @@ snapshots:
     dependencies:
       postcss: 8.4.39
 
-  postcss-normalize-charset@6.0.0(postcss@8.4.39):
+  postcss-normalize-charset@6.0.0(postcss@8.4.45):
     dependencies:
-      postcss: 8.4.39
+      postcss: 8.4.45
 
   postcss-normalize-display-values@5.1.0(postcss@8.4.39):
     dependencies:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-display-values@6.0.0(postcss@8.4.39):
+  postcss-normalize-display-values@6.0.0(postcss@8.4.45):
     dependencies:
-      postcss: 8.4.39
+      postcss: 8.4.45
       postcss-value-parser: 4.2.0
 
   postcss-normalize-positions@5.1.1(postcss@8.4.39):
@@ -29817,9 +31219,9 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-positions@6.0.0(postcss@8.4.39):
+  postcss-normalize-positions@6.0.0(postcss@8.4.45):
     dependencies:
-      postcss: 8.4.39
+      postcss: 8.4.45
       postcss-value-parser: 4.2.0
 
   postcss-normalize-repeat-style@5.1.1(postcss@8.4.39):
@@ -29827,9 +31229,9 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-repeat-style@6.0.0(postcss@8.4.39):
+  postcss-normalize-repeat-style@6.0.0(postcss@8.4.45):
     dependencies:
-      postcss: 8.4.39
+      postcss: 8.4.45
       postcss-value-parser: 4.2.0
 
   postcss-normalize-string@5.1.0(postcss@8.4.39):
@@ -29837,9 +31239,9 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-string@6.0.0(postcss@8.4.39):
+  postcss-normalize-string@6.0.0(postcss@8.4.45):
     dependencies:
-      postcss: 8.4.39
+      postcss: 8.4.45
       postcss-value-parser: 4.2.0
 
   postcss-normalize-timing-functions@5.1.0(postcss@8.4.39):
@@ -29847,9 +31249,9 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-timing-functions@6.0.0(postcss@8.4.39):
+  postcss-normalize-timing-functions@6.0.0(postcss@8.4.45):
     dependencies:
-      postcss: 8.4.39
+      postcss: 8.4.45
       postcss-value-parser: 4.2.0
 
   postcss-normalize-unicode@5.1.1(postcss@8.4.39):
@@ -29858,10 +31260,10 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-unicode@6.0.0(postcss@8.4.39):
+  postcss-normalize-unicode@6.0.0(postcss@8.4.45):
     dependencies:
       browserslist: 4.22.1
-      postcss: 8.4.39
+      postcss: 8.4.45
       postcss-value-parser: 4.2.0
 
   postcss-normalize-url@5.1.0(postcss@8.4.39):
@@ -29870,9 +31272,9 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-url@6.0.0(postcss@8.4.39):
+  postcss-normalize-url@6.0.0(postcss@8.4.45):
     dependencies:
-      postcss: 8.4.39
+      postcss: 8.4.45
       postcss-value-parser: 4.2.0
 
   postcss-normalize-whitespace@5.1.1(postcss@8.4.39):
@@ -29880,9 +31282,9 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-whitespace@6.0.0(postcss@8.4.39):
+  postcss-normalize-whitespace@6.0.0(postcss@8.4.45):
     dependencies:
-      postcss: 8.4.39
+      postcss: 8.4.45
       postcss-value-parser: 4.2.0
 
   postcss-ordered-values@5.1.3(postcss@8.4.39):
@@ -29891,10 +31293,10 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-ordered-values@6.0.0(postcss@8.4.39):
+  postcss-ordered-values@6.0.0(postcss@8.4.45):
     dependencies:
-      cssnano-utils: 4.0.0(postcss@8.4.39)
-      postcss: 8.4.39
+      cssnano-utils: 4.0.0(postcss@8.4.45)
+      postcss: 8.4.45
       postcss-value-parser: 4.2.0
 
   postcss-overflow-shorthand@2.0.0:
@@ -29967,20 +31369,20 @@ snapshots:
       caniuse-api: 3.0.0
       postcss: 8.4.39
 
-  postcss-reduce-initial@6.0.0(postcss@8.4.39):
+  postcss-reduce-initial@6.0.0(postcss@8.4.45):
     dependencies:
       browserslist: 4.22.1
       caniuse-api: 3.0.0
-      postcss: 8.4.39
+      postcss: 8.4.45
 
   postcss-reduce-transforms@5.1.0(postcss@8.4.39):
     dependencies:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-reduce-transforms@6.0.0(postcss@8.4.39):
+  postcss-reduce-transforms@6.0.0(postcss@8.4.45):
     dependencies:
-      postcss: 8.4.39
+      postcss: 8.4.45
       postcss-value-parser: 4.2.0
 
   postcss-replace-overflow-wrap@3.0.0:
@@ -30051,9 +31453,9 @@ snapshots:
       lodash: 4.17.21
       postcss: 7.0.39
 
-  postcss-sorting@8.0.2(postcss@8.4.39):
+  postcss-sorting@8.0.2(postcss@8.4.45):
     dependencies:
-      postcss: 8.4.39
+      postcss: 8.4.45
 
   postcss-svgo@5.1.0(postcss@8.4.39):
     dependencies:
@@ -30061,13 +31463,13 @@ snapshots:
       postcss-value-parser: 4.2.0
       svgo: 2.8.0
 
-  postcss-svgo@6.0.0(postcss@8.4.39):
+  postcss-svgo@6.0.0(postcss@8.4.45):
     dependencies:
-      postcss: 8.4.39
+      postcss: 8.4.45
       postcss-value-parser: 4.2.0
       svgo: 3.0.2
 
-  postcss-syntax@0.36.2(postcss-html@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-jsx@0.36.4(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-less@3.1.4)(postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-scss@2.1.1)(postcss@7.0.39):
+  postcss-syntax@0.36.2(postcss-html@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-jsx@0.36.4)(postcss-less@3.1.4)(postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-scss@2.1.1)(postcss@7.0.39):
     dependencies:
       postcss: 7.0.39
     optionalDependencies:
@@ -30082,9 +31484,9 @@ snapshots:
       postcss: 8.4.39
       postcss-selector-parser: 6.0.13
 
-  postcss-unique-selectors@6.0.0(postcss@8.4.39):
+  postcss-unique-selectors@6.0.0(postcss@8.4.45):
     dependencies:
-      postcss: 8.4.39
+      postcss: 8.4.45
       postcss-selector-parser: 6.0.13
 
   postcss-value-parser@3.3.1: {}
@@ -30129,6 +31531,12 @@ snapshots:
       picocolors: 1.0.1
       source-map-js: 1.2.0
 
+  postcss@8.4.45:
+    dependencies:
+      nanoid: 3.3.7
+      picocolors: 1.0.1
+      source-map-js: 1.2.0
+
   preact@10.18.2: {}
 
   precss@4.0.0:
@@ -30336,8 +31744,7 @@ snapshots:
 
   proxy-from-env@1.1.0: {}
 
-  prr@1.0.1:
-    optional: true
+  prr@1.0.1: {}
 
   pseudomap@1.0.2: {}
 
@@ -30481,12 +31888,16 @@ snapshots:
 
   quick-lru@5.1.1: {}
 
+  rambda@7.5.0: {}
+
   ramda@0.29.0: {}
 
   randombytes@2.1.0:
     dependencies:
       safe-buffer: 5.2.1
 
+  range-parser@1.2.0: {}
+
   range-parser@1.2.1: {}
 
   raw-body@2.5.1:
@@ -30678,6 +32089,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  readdirp@3.5.0:
+    dependencies:
+      picomatch: 2.3.1
+
   readdirp@3.6.0:
     dependencies:
       picomatch: 2.3.1
@@ -30751,6 +32166,11 @@ snapshots:
       unicode-match-property-ecmascript: 2.0.0
       unicode-match-property-value-ecmascript: 2.1.0
 
+  registry-auth-token@3.3.2:
+    dependencies:
+      rc: 1.2.8
+      safe-buffer: 5.2.1
+
   registry-auth-token@3.4.0:
     dependencies:
       rc: 1.2.8
@@ -31104,6 +32524,10 @@ snapshots:
 
   sax@1.3.0: {}
 
+  saxes@5.0.1:
+    dependencies:
+      xmlchars: 2.2.0
+
   saxes@6.0.0:
     dependencies:
       xmlchars: 2.2.0
@@ -31253,11 +32677,13 @@ snapshots:
 
   semver@6.3.1: {}
 
-  semver@7.5.4:
+  semver@7.5.3:
     dependencies:
       lru-cache: 6.0.0
 
-  semver@7.6.3: {}
+  semver@7.5.4:
+    dependencies:
+      lru-cache: 6.0.0
 
   send@0.18.0:
     dependencies:
@@ -31277,10 +32703,20 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  sentence-case@3.0.4:
+    dependencies:
+      no-case: 3.0.4
+      tslib: 2.6.2
+      upper-case-first: 2.0.2
+
   serialize-error@7.0.1:
     dependencies:
       type-fest: 0.13.1
 
+  serialize-javascript@5.0.1:
+    dependencies:
+      randombytes: 2.1.0
+
   serialize-javascript@6.0.0:
     dependencies:
       randombytes: 2.1.0
@@ -31289,6 +32725,17 @@ snapshots:
     dependencies:
       randombytes: 2.1.0
 
+  serve-handler@6.1.3:
+    dependencies:
+      bytes: 3.0.0
+      content-disposition: 0.5.2
+      fast-url-parser: 1.1.3
+      mime-types: 2.1.18
+      minimatch: 3.0.4
+      path-is-inside: 1.0.2
+      path-to-regexp: 2.2.1
+      range-parser: 1.2.0
+
   serve-index@1.9.1:
     dependencies:
       accepts: 1.3.8
@@ -31310,6 +32757,20 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  serve@13.0.4:
+    dependencies:
+      '@zeit/schemas': 2.6.0
+      ajv: 6.12.6
+      arg: 2.0.0
+      boxen: 5.1.2
+      chalk: 2.4.1
+      clipboardy: 2.3.0
+      compression: 1.7.3
+      serve-handler: 6.1.3
+      update-check: 1.5.2
+    transitivePeerDependencies:
+      - supports-color
+
   set-blocking@2.0.0: {}
 
   set-function-length@1.2.2:
@@ -31409,6 +32870,15 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  sinon@15.2.0:
+    dependencies:
+      '@sinonjs/commons': 3.0.0
+      '@sinonjs/fake-timers': 10.3.0
+      '@sinonjs/samsam': 8.0.0
+      diff: 5.1.0
+      nise: 5.1.5
+      supports-color: 7.2.0
+
   sirv@2.0.3:
     dependencies:
       '@polka/url': 1.0.0-next.23
@@ -31456,6 +32926,11 @@ snapshots:
 
   smart-buffer@4.2.0: {}
 
+  snake-case@3.0.4:
+    dependencies:
+      dot-case: 3.0.4
+      tslib: 2.6.2
+
   snapdragon-node@2.1.1:
     dependencies:
       define-property: 1.0.0
@@ -31925,10 +33400,10 @@ snapshots:
       postcss: 8.4.39
       postcss-selector-parser: 6.0.13
 
-  stylehacks@6.0.0(postcss@8.4.39):
+  stylehacks@6.0.0(postcss@8.4.45):
     dependencies:
       browserslist: 4.22.1
-      postcss: 8.4.39
+      postcss: 8.4.45
       postcss-selector-parser: 6.0.13
 
   stylelint-config-rational-order@0.1.2:
@@ -32045,7 +33520,7 @@ snapshots:
       globby: 11.1.0
       globjoin: 0.1.4
       html-tags: 3.3.1
-      ignore: 5.3.2
+      ignore: 5.3.0
       import-lazy: 4.0.0
       imurmurhash: 0.1.4
       is-plain-object: 5.0.0
@@ -32110,7 +33585,7 @@ snapshots:
       postcss-sass: 0.3.5
       postcss-scss: 2.1.1
       postcss-selector-parser: 3.1.2
-      postcss-syntax: 0.36.2(postcss-html@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-jsx@0.36.4(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-less@3.1.4)(postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-scss@2.1.1)(postcss@7.0.39)
+      postcss-syntax: 0.36.2(postcss-html@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-jsx@0.36.4)(postcss-less@3.1.4)(postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-scss@2.1.1)(postcss@7.0.39)
       postcss-value-parser: 3.3.1
       resolve-from: 4.0.0
       signal-exit: 3.0.7
@@ -32461,6 +33936,8 @@ snapshots:
       '@tokenizer/token': 0.3.0
       ieee754: 1.2.1
 
+  toposort@2.0.2: {}
+
   totalist@3.0.1: {}
 
   tough-cookie@4.1.3:
@@ -32472,6 +33949,10 @@ snapshots:
 
   tr46@0.0.3: {}
 
+  tr46@3.0.0:
+    dependencies:
+      punycode: 2.3.1
+
   tr46@5.0.0:
     dependencies:
       punycode: 2.3.1
@@ -32686,8 +34167,6 @@ snapshots:
 
   undici-types@5.26.5: {}
 
-  undici-types@6.19.8: {}
-
   unherit@1.1.3:
     dependencies:
       inherits: 2.0.4
@@ -32863,6 +34342,11 @@ snapshots:
       escalade: 3.1.1
       picocolors: 1.0.1
 
+  update-check@1.5.2:
+    dependencies:
+      registry-auth-token: 3.3.2
+      registry-url: 3.1.0
+
   update-notifier@5.1.0:
     dependencies:
       boxen: 5.1.2
@@ -32880,6 +34364,14 @@ snapshots:
       semver-diff: 3.1.1
       xdg-basedir: 4.0.0
 
+  upper-case-first@2.0.2:
+    dependencies:
+      tslib: 2.6.2
+
+  upper-case@2.0.2:
+    dependencies:
+      tslib: 2.6.2
+
   uri-js@4.4.1:
     dependencies:
       punycode: 2.3.1
@@ -33027,7 +34519,7 @@ snapshots:
 
   vinyl-file@5.0.0:
     dependencies:
-      '@types/vinyl': 2.0.12
+      '@types/vinyl': 2.0.10
       strip-bom-buf: 3.0.1
       strip-bom-stream: 5.0.0
       vinyl: 3.0.0
@@ -33111,9 +34603,9 @@ snapshots:
       - supports-color
       - terser
 
-  vite-plugin-dts@4.0.3(@types/node@18.18.9)(rollup@4.21.1)(typescript@5.4.2)(vite@5.4.2(@types/node@18.18.9)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)):
+  vite-plugin-dts@4.0.3(@types/node@20.9.0)(rollup@4.21.1)(typescript@5.4.2)(vite@5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)):
     dependencies:
-      '@microsoft/api-extractor': 7.47.4(@types/node@18.18.9)
+      '@microsoft/api-extractor': 7.47.4(@types/node@20.9.0)
       '@rollup/pluginutils': 5.1.0(rollup@4.21.1)
       '@volar/typescript': 2.4.0
       '@vue/language-core': 2.0.29(typescript@5.4.2)
@@ -33125,7 +34617,7 @@ snapshots:
       typescript: 5.4.2
       vue-tsc: 2.0.29(typescript@5.4.2)
     optionalDependencies:
-      vite: 5.4.2(@types/node@18.18.9)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
+      vite: 5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
     transitivePeerDependencies:
       - '@types/node'
       - rollup
@@ -33136,14 +34628,27 @@ snapshots:
       svgo: 3.0.2
       vue: 3.4.15(typescript@5.4.2)
 
-  vite@4.0.5(@types/node@20.16.5)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0):
+  vite@4.0.5(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0):
     dependencies:
       esbuild: 0.16.17
       postcss: 8.4.39
       resolve: 1.22.8
       rollup: 3.29.4
     optionalDependencies:
-      '@types/node': 20.16.5
+      '@types/node': 20.9.0
+      fsevents: 2.3.3
+      less: 4.2.0
+      sass: 1.69.5
+      sugarss: 2.0.0
+      terser: 5.24.0
+
+  vite@5.4.2(@types/node@16.18.83)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0):
+    dependencies:
+      esbuild: 0.21.5
+      postcss: 8.4.41
+      rollup: 4.21.1
+    optionalDependencies:
+      '@types/node': 16.18.83
       fsevents: 2.3.3
       less: 4.2.0
       sass: 1.69.5
@@ -33163,13 +34668,13 @@ snapshots:
       sugarss: 2.0.0
       terser: 5.24.0
 
-  vite@5.4.2(@types/node@20.16.5)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0):
+  vite@5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0):
     dependencies:
       esbuild: 0.21.5
       postcss: 8.4.41
       rollup: 4.21.1
     optionalDependencies:
-      '@types/node': 20.16.5
+      '@types/node': 20.9.0
       fsevents: 2.3.3
       less: 4.2.0
       sass: 1.69.5
@@ -33281,7 +34786,7 @@ snapshots:
     dependencies:
       vue: 3.4.15(typescript@5.4.2)
 
-  vue-loader@15.11.1(@vue/compiler-sfc@3.4.15)(css-loader@6.8.1(webpack@5.89.0(@swc/core@1.3.96)))(ejs@3.1.9)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(webpack@5.89.0(@swc/core@1.3.96)):
+  vue-loader@15.11.1(@vue/compiler-sfc@3.5.5)(css-loader@6.8.1(webpack@5.89.0(@swc/core@1.3.96)))(ejs@3.1.9)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(webpack@5.89.0(@swc/core@1.3.96)):
     dependencies:
       '@vue/component-compiler-utils': 3.3.0(ejs@3.1.9)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)
       css-loader: 6.8.1(webpack@5.89.0(@swc/core@1.3.96))
@@ -33291,7 +34796,7 @@ snapshots:
       vue-style-loader: 4.1.3
       webpack: 5.89.0(@swc/core@1.3.96)
     optionalDependencies:
-      '@vue/compiler-sfc': 3.4.15
+      '@vue/compiler-sfc': 3.5.5
       vue-template-compiler: 2.7.16(vue@3.4.15(typescript@5.4.2))
     transitivePeerDependencies:
       - arc-templates
@@ -33348,14 +34853,14 @@ snapshots:
       - walrus
       - whiskers
 
-  vue-loader@17.3.1(@vue/compiler-sfc@3.4.15)(vue@3.4.15(typescript@5.4.2))(webpack@5.89.0(@swc/core@1.3.96)):
+  vue-loader@17.3.1(@vue/compiler-sfc@3.5.5)(vue@3.4.15(typescript@5.4.2))(webpack@5.89.0(@swc/core@1.3.96)):
     dependencies:
       chalk: 4.1.2
       hash-sum: 2.0.0
       watchpack: 2.4.0
       webpack: 5.89.0(@swc/core@1.3.96)
     optionalDependencies:
-      '@vue/compiler-sfc': 3.4.15
+      '@vue/compiler-sfc': 3.5.5
       vue: 3.4.15(typescript@5.4.2)
 
   vue-router@4.2.5(vue@3.4.15(typescript@5.4.2)):
@@ -33390,11 +34895,34 @@ snapshots:
     dependencies:
       vue: 3.4.15(typescript@5.4.2)
 
+  vue-tsc@0.38.9(typescript@5.4.2):
+    dependencies:
+      '@volar/vue-typescript': 0.38.9
+      typescript: 5.4.2
+
+  vue-tsc@1.8.25(typescript@5.4.2)(vue@2.7.16):
+    dependencies:
+      '@volar/typescript': 1.11.1
+      '@vue/language-core': 1.8.25(typescript@5.4.2)(vue@2.7.16)
+      semver: 7.5.4
+      typescript: 5.4.2
+    transitivePeerDependencies:
+      - vue
+
+  vue-tsc@1.8.25(typescript@5.4.2)(vue@3.4.15(typescript@5.4.2)):
+    dependencies:
+      '@volar/typescript': 1.11.1
+      '@vue/language-core': 1.8.25(typescript@5.4.2)(vue@3.4.15(typescript@5.4.2))
+      semver: 7.5.4
+      typescript: 5.4.2
+    transitivePeerDependencies:
+      - vue
+
   vue-tsc@2.0.29(typescript@5.4.2):
     dependencies:
       '@volar/typescript': 2.4.0
       '@vue/language-core': 2.0.29(typescript@5.4.2)
-      semver: 7.6.3
+      semver: 7.5.4
       typescript: 5.4.2
 
   vue@2.7.16:
@@ -33422,14 +34950,14 @@ snapshots:
       - supports-color
       - typescript
 
-  vuepress-plugin-sitemap2@2.0.0-beta.174(vuepress-vite@2.0.0-beta.60(@types/node@20.16.5)(@vuepress/client@2.0.0-beta.60(typescript@5.4.2))(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)(typescript@5.4.2)(vue@3.4.15(typescript@5.4.2)))(vuepress@2.0.0-beta.60(@types/node@20.16.5)(@vuepress/client@2.0.0-beta.60(typescript@5.4.2))(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)(typescript@5.4.2)(vue@3.4.15(typescript@5.4.2))):
+  vuepress-plugin-sitemap2@2.0.0-beta.174(vuepress-vite@2.0.0-beta.60(@types/node@20.9.0)(@vuepress/client@2.0.0-beta.60(typescript@5.4.2))(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)(typescript@5.4.2)(vue@3.4.15(typescript@5.4.2)))(vuepress@2.0.0-beta.60(@types/node@20.9.0)(@vuepress/client@2.0.0-beta.60(typescript@5.4.2))(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)(typescript@5.4.2)(vue@3.4.15(typescript@5.4.2))):
     dependencies:
       '@vuepress/shared': 2.0.0-beta.60
       '@vuepress/utils': 2.0.0-beta.60
       sitemap: 7.1.1
     optionalDependencies:
-      vuepress: 2.0.0-beta.60(@types/node@20.16.5)(@vuepress/client@2.0.0-beta.60(typescript@5.4.2))(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)(typescript@5.4.2)(vue@3.4.15(typescript@5.4.2))
-      vuepress-vite: 2.0.0-beta.60(@types/node@20.16.5)(@vuepress/client@2.0.0-beta.60(typescript@5.4.2))(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)(typescript@5.4.2)(vue@3.4.15(typescript@5.4.2))
+      vuepress: 2.0.0-beta.60(@types/node@20.9.0)(@vuepress/client@2.0.0-beta.60(typescript@5.4.2))(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)(typescript@5.4.2)(vue@3.4.15(typescript@5.4.2))
+      vuepress-vite: 2.0.0-beta.60(@types/node@20.9.0)(@vuepress/client@2.0.0-beta.60(typescript@5.4.2))(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)(typescript@5.4.2)(vue@3.4.15(typescript@5.4.2))
     transitivePeerDependencies:
       - supports-color
 
@@ -33450,9 +34978,9 @@ snapshots:
       - supports-color
       - typescript
 
-  vuepress-vite@2.0.0-beta.60(@types/node@20.16.5)(@vuepress/client@2.0.0-beta.60(typescript@5.4.2))(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)(typescript@5.4.2)(vue@3.4.15(typescript@5.4.2)):
+  vuepress-vite@2.0.0-beta.60(@types/node@20.9.0)(@vuepress/client@2.0.0-beta.60(typescript@5.4.2))(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)(typescript@5.4.2)(vue@3.4.15(typescript@5.4.2)):
     dependencies:
-      '@vuepress/bundler-vite': 2.0.0-beta.60(@types/node@20.16.5)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)(typescript@5.4.2)
+      '@vuepress/bundler-vite': 2.0.0-beta.60(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)(typescript@5.4.2)
       '@vuepress/cli': 2.0.0-beta.60(typescript@5.4.2)
       '@vuepress/client': 2.0.0-beta.60(typescript@5.4.2)
       '@vuepress/core': 2.0.0-beta.60(typescript@5.4.2)
@@ -33471,9 +34999,9 @@ snapshots:
       - ts-node
       - typescript
 
-  vuepress@2.0.0-beta.60(@types/node@20.16.5)(@vuepress/client@2.0.0-beta.60(typescript@5.4.2))(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)(typescript@5.4.2)(vue@3.4.15(typescript@5.4.2)):
+  vuepress@2.0.0-beta.60(@types/node@20.9.0)(@vuepress/client@2.0.0-beta.60(typescript@5.4.2))(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)(typescript@5.4.2)(vue@3.4.15(typescript@5.4.2)):
     dependencies:
-      vuepress-vite: 2.0.0-beta.60(@types/node@20.16.5)(@vuepress/client@2.0.0-beta.60(typescript@5.4.2))(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)(typescript@5.4.2)(vue@3.4.15(typescript@5.4.2))
+      vuepress-vite: 2.0.0-beta.60(@types/node@20.9.0)(@vuepress/client@2.0.0-beta.60(typescript@5.4.2))(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)(typescript@5.4.2)(vue@3.4.15(typescript@5.4.2))
     transitivePeerDependencies:
       - '@types/node'
       - '@vue/composition-api'
@@ -33489,8 +35017,16 @@ snapshots:
       - typescript
       - vue
 
+  w3c-hr-time@1.0.2:
+    dependencies:
+      browser-process-hrtime: 1.0.0
+
   w3c-keyname@2.2.8: {}
 
+  w3c-xmlserializer@3.0.0:
+    dependencies:
+      xml-name-validator: 4.0.0
+
   w3c-xmlserializer@5.0.0:
     dependencies:
       xml-name-validator: 5.0.0
@@ -33705,8 +35241,20 @@ snapshots:
 
   whatwg-fetch@3.6.19: {}
 
+  whatwg-mimetype@3.0.0: {}
+
   whatwg-mimetype@4.0.0: {}
 
+  whatwg-url@10.0.0:
+    dependencies:
+      tr46: 3.0.0
+      webidl-conversions: 7.0.0
+
+  whatwg-url@11.0.0:
+    dependencies:
+      tr46: 3.0.0
+      webidl-conversions: 7.0.0
+
   whatwg-url@14.0.0:
     dependencies:
       tr46: 5.0.0
@@ -33771,6 +35319,10 @@ snapshots:
       siginfo: 2.0.0
       stackback: 0.0.2
 
+  wide-align@1.1.3:
+    dependencies:
+      string-width: 2.1.1
+
   wide-align@1.1.5:
     dependencies:
       string-width: 4.2.3
@@ -33790,6 +35342,8 @@ snapshots:
 
   wordwrap@1.0.0: {}
 
+  workerpool@6.1.0: {}
+
   workerpool@6.2.1: {}
 
   wrap-ansi@2.1.0:
@@ -33802,6 +35356,12 @@ snapshots:
       string-width: 2.1.1
       strip-ansi: 4.0.0
 
+  wrap-ansi@5.1.0:
+    dependencies:
+      ansi-styles: 3.2.1
+      string-width: 3.1.0
+      strip-ansi: 5.2.0
+
   wrap-ansi@6.2.0:
     dependencies:
       ansi-styles: 4.3.0
@@ -33863,8 +35423,6 @@ snapshots:
 
   ws@8.16.0: {}
 
-  ws@8.18.0: {}
-
   x-is-string@0.1.0: {}
 
   xdg-basedir@4.0.0: {}
@@ -33919,6 +35477,11 @@ snapshots:
     dependencies:
       camelcase: 4.1.0
 
+  yargs-parser@13.1.2:
+    dependencies:
+      camelcase: 5.3.1
+      decamelize: 1.2.0
+
   yargs-parser@18.1.3:
     dependencies:
       camelcase: 5.3.1
@@ -33942,6 +35505,20 @@ snapshots:
       flat: 5.0.2
       is-plain-obj: 2.1.0
 
+  yargs@14.0.0:
+    dependencies:
+      cliui: 5.0.0
+      decamelize: 1.2.0
+      find-up: 3.0.0
+      get-caller-file: 2.0.5
+      require-directory: 2.1.1
+      require-main-filename: 2.0.0
+      set-blocking: 2.0.0
+      string-width: 3.1.0
+      which-module: 2.0.1
+      y18n: 4.0.3
+      yargs-parser: 13.1.2
+
   yargs@15.4.1:
     dependencies:
       cliui: 6.0.0
@@ -34040,7 +35617,7 @@ snapshots:
       - bluebird
       - supports-color
 
-  yeoman-generator@5.10.0(encoding@0.1.13)(mem-fs@4.0.0):
+  yeoman-generator@5.10.0(encoding@0.1.13):
     dependencies:
       chalk: 4.1.2
       dargs: 7.0.0
@@ -34048,7 +35625,7 @@ snapshots:
       execa: 5.1.1
       github-username: 6.0.0(encoding@0.1.13)
       lodash: 4.17.21
-      mem-fs-editor: 9.7.0(mem-fs@4.0.0)
+      mem-fs-editor: 9.7.0
       minimist: 1.2.8
       pacote: 15.2.0
       read-pkg-up: 7.0.1

From 4f5949a36adc788b03cd56e68eaca9171b3a2d73 Mon Sep 17 00:00:00 2001
From: Julio Ortega <julio.ortega@dialpad.com>
Date: Fri, 20 Sep 2024 09:53:34 -0600
Subject: [PATCH 4/6] build(combinator): DLT-2046 DLT-2047 update bundler and
 dependencies (#500)

Signed-off-by: Julio Ortega <julio.ortega@dialpad.com>
---
 .../{.eslintrc.js => .eslintrc.cjs}           |   0
 packages/combinator/{public => }/index.html   |   1 +
 packages/combinator/index.js                  |   6 +-
 packages/combinator/package.json              |  87 +-
 packages/combinator/release.sh                |   4 -
 packages/combinator/src/App.vue               |  29 +-
 packages/combinator/src/assets/dialtone.less  |   2 +-
 .../combinator/src/assets/themes/dark.less    |  10 +-
 .../combinator/src/assets/themes/light.less   |  10 +-
 .../components/code_editor/code_editor.vue    |  12 +-
 .../code_editor/code_editor_closing_tag.vue   |   2 +-
 .../code_editor/code_editor_element.vue       |   4 +-
 .../code_editor/code_editor_input.vue         |   6 +-
 .../code_editor/code_editor_opening_tag.vue   |   2 +-
 .../code_editor/code_editor_slot.vue          |   6 +-
 .../code_editor_tag_attributes.vue            |   2 +-
 .../src/components/code_panel/code_panel.vue  |   8 +-
 .../src/components/combinator.test.js         |   2 +-
 .../combinator/src/components/combinator.vue  |  27 +-
 .../components/controls/control_array.test.js |   2 +-
 .../src/components/controls/control_array.vue |   4 +-
 .../components/controls/control_base.test.js  |   2 +-
 .../src/components/controls/control_base.vue  |   2 +-
 .../controls/control_boolean.test.js          |   2 +-
 .../controls/control_dynamic.test.js          |   6 +-
 .../components/controls/control_dynamic.vue   |   2 +-
 .../components/controls/control_event.test.js |   2 +-
 .../controls/control_iterable.test.js         |   2 +-
 .../components/controls/control_iterable.vue  |   7 +-
 .../controls/control_nullish.test.js          |   2 +-
 .../components/controls/control_nullish.vue   |   2 +-
 .../controls/control_number.test.js           |   2 +-
 .../controls/control_object.test.js           |   2 +-
 .../components/controls/control_object.vue    |   6 +-
 .../controls/control_selection.test.js        |   2 +-
 .../components/controls/control_slot.test.js  |   2 +-
 .../controls/control_string.test.js           |   2 +-
 .../controls/control_suggestion.vue           |  13 +-
 .../event_console/event_console.test.js       |   2 +-
 .../event_console/event_console.vue           |   6 +-
 .../event_console/event_console_array.vue     |   4 +-
 .../event_console/event_console_element.vue   |   2 +-
 .../event_console/event_console_lazy_load.vue |  16 +-
 .../event_console/event_console_object.vue    |   4 +-
 .../event_console/event_console_pair.vue      |  12 +-
 .../src/components/option_bar/option_bar.vue  |   4 +-
 .../option_bar/option_bar_control.test.js     |   2 +-
 .../option_bar/option_bar_control.vue         |   4 +-
 .../option_bar_member_group.test.js           |   2 +-
 .../option_bar/option_bar_member_group.vue    |  16 +-
 .../src/components/renderer/renderer.vue      |   8 +-
 .../src/components/renderer/renderer_menu.vue |  16 +-
 .../settings_menu/settings_menu.vue           |   4 +-
 .../src/components/tools/section.vue          |  11 +-
 packages/combinator/src/lib/control.js        |  22 +-
 packages/combinator/src/lib/utils.js          |  18 +-
 packages/combinator/src/main.js               |  10 +-
 packages/combinator/src/variants/variants.js  |  24 +-
 packages/combinator/vite.config.js            |  39 +
 packages/combinator/vue.config.js             |  18 -
 pnpm-lock.yaml                                | 971 ++++--------------
 61 files changed, 465 insertions(+), 1034 deletions(-)
 rename packages/combinator/{.eslintrc.js => .eslintrc.cjs} (100%)
 rename packages/combinator/{public => }/index.html (85%)
 delete mode 100755 packages/combinator/release.sh
 create mode 100644 packages/combinator/vite.config.js
 delete mode 100644 packages/combinator/vue.config.js

diff --git a/packages/combinator/.eslintrc.js b/packages/combinator/.eslintrc.cjs
similarity index 100%
rename from packages/combinator/.eslintrc.js
rename to packages/combinator/.eslintrc.cjs
diff --git a/packages/combinator/public/index.html b/packages/combinator/index.html
similarity index 85%
rename from packages/combinator/public/index.html
rename to packages/combinator/index.html
index b188eee4d7..71d7e72895 100644
--- a/packages/combinator/public/index.html
+++ b/packages/combinator/index.html
@@ -10,3 +10,4 @@
     </div>
   </body>
 </html>
+<script type="module" src="/src/main.js"></script>
\ No newline at end of file
diff --git a/packages/combinator/index.js b/packages/combinator/index.js
index 961446bcc7..d863b9cbc6 100644
--- a/packages/combinator/index.js
+++ b/packages/combinator/index.js
@@ -1,3 +1,3 @@
-export { default as DtcCombinator } from './src/components/combinator';
-export { default as DtcSection } from './src/components/tools/section';
-export { default as variantBank } from './src/variants/variants';
+export { default as DtcCombinator } from './src/components/combinator.vue';
+export { default as DtcSection } from './src/components/tools/section.vue';
+export { default as variantBank } from './src/variants/variants.js';
diff --git a/packages/combinator/package.json b/packages/combinator/package.json
index 7a279a6dff..e80788f872 100644
--- a/packages/combinator/package.json
+++ b/packages/combinator/package.json
@@ -1,55 +1,60 @@
 {
   "name": "@dialpad/dialtone-combinator",
   "version": "0.3.1",
-  "publishConfig": {
-    "access": "public"
-  },
+  "description": "Dialtone vue component combinator playground",
   "scripts": {
-    "dev": "vue-cli-service serve",
-    "preview": "npm run build:preview; serve ./dist/preview",
-    "lint": "eslint src --ext .js,.vue",
-    "build": "vue-cli-service build --target lib --dest ./dist/lib index.js; rm ./dist/lib/demo.html",
-    "build:preview": "vue-cli-service build --dest ./dist/preview",
-    "distribute": "rm ./dialtone-combinator-*.tgz; npm run build; npm pack",
-    "test": "vue-cli-service test:unit --timeout 100000 --colors --recursive --glob *.test.js src",
-    "release": "./release.sh"
+    "build": "vite build",
+    "dev": "vite",
+    "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
+    "serve": "vite preview",
+    "test": "vue-cli-service test:unit --timeout 100000 --colors --recursive --glob *.test.js src"
+  },
+  "bugs": {
+    "email": "dialtone@dialpad.com"
   },
-  "main": "./dist/lib/dialtone-combinator.umd.js",
+  "engineStrict": true,
+  "engines": {
+    "node": ">= 14.17"
+  },
+  "type": "module",
+  "module": "./dist/dialtone-combinator.js",
   "files": [
-    "./dist/lib/*.js"
+    "dist"
   ],
+  "exports": {
+    ".": "./dist/dialtone-combinator.js",
+    "./css": "./dist/style.css",
+    "./*": "./dist/src/lib/*.js"
+  },
+  "dependencies": {
+    "@dialpad/dialtone-vue": "workspace:^3",
+    "@dialpad/dialtone-css": "workspace:*",
+    "@dialpad/dialtone-icons": "workspace:*",
+    "change-case": "^4.1.2",
+    "js-beautify": "^1.14.4",
+    "json5-with-undefined": "^2.1.301",
+    "just-clone": "^6.1.1"
+  },
   "devDependencies": {
-    "@dialpad/dialtone": "6.35.0",
-    "@dialpad/dialtone-vue": "3.13.0",
-    "@types/node": "^16.11.41",
-    "@typescript-eslint/eslint-plugin": "^5.30.0",
-    "@typescript-eslint/parser": "^7.0.1",
-    "@vitejs/plugin-vue": "^2.3.3",
-    "@vitejs/plugin-vue-jsx": "^1.3.10",
+    "@vitejs/plugin-vue": "^5.1.3",
     "@vue/cli-plugin-unit-mocha": "^5.0.8",
-    "@vue/cli-service": "^5.0.6",
     "@vue/test-utils": "^2.0.2",
-    "@vue/tsconfig": "^0.1.3",
     "chai": "^4.3.6",
-    "change-case": "^4.1.2",
-    "eslint": "^8.18.0",
-    "eslint-config-semistandard": "^17.0.0",
-    "eslint-config-standard": "^17.1.0",
-    "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jsdoc": "^39.3.6",
     "eslint-plugin-mocha": "^10.1.0",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-vue": "^9.15.1",
-    "eslint-plugin-vuejs-accessibility": "^2.1.0",
-    "js-beautify": "^1.14.4",
-    "json5-with-undefined": "^2.1.301",
-    "just-clone": "^6.1.1",
-    "less": "^4.1.3",
-    "less-loader": "^11.0.0",
-    "npm-run-all": "^4.1.5",
-    "serve": "^13.0.4",
-    "vue": "^3.2.37",
-    "vue-tsc": "^0.38.1"
-  }
+    "vite": "^5.4.2"
+  },
+  "peerDependencies": {
+    "vue": ">=3.2"
+  },
+  "keywords": [
+    "Dialpad",
+    "Dialtone",
+    "Dialtone Vue",
+    "Vue Components",
+    "Component Combinator",
+    "Vue"
+  ],
+  "license": "MIT",
+  "sideEffects": false
 }
diff --git a/packages/combinator/release.sh b/packages/combinator/release.sh
deleted file mode 100755
index f93098d521..0000000000
--- a/packages/combinator/release.sh
+++ /dev/null
@@ -1,4 +0,0 @@
-read -p "Enter version type [patch, major, minor]: " type
-npm version $type
-npm run distribute
-npm publish
diff --git a/packages/combinator/src/App.vue b/packages/combinator/src/App.vue
index 68e97ca329..7d3e291eae 100644
--- a/packages/combinator/src/App.vue
+++ b/packages/combinator/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="dtc-preview d-d-flex d-fd-column d-ai-center d-py64 d-w100p"
+    class="dtc-preview d-d-flex d-fd-column d-ai-center d-w100p"
     :class="`d-bgc-${background}`"
   >
     <dtc-button-bar
@@ -18,7 +18,7 @@
         <div class="d-w16 d-h16 d-ba d-bc-black d-bgc-white" />
       </template>
     </dtc-button-bar>
-    <div class="d-mb64">
+    <div class="d-mb16">
       <dtc-suggestion
         :value="component.name"
         :suggestions="options"
@@ -60,15 +60,15 @@
 <script setup>
 import documentation from '@/node_modules/@dialpad/dialtone-vue/dist/component-documentation.json';
 import * as modules from '@dialpad/dialtone-vue';
-import Combinator from './components/combinator';
+import Combinator from './components/combinator.vue';
 import { computed, markRaw, onMounted, ref } from 'vue';
 import { DIALTONE_PREFIX } from '@/src/lib/constants';
 import { DtBadge } from '@dialpad/dialtone-vue';
-import DtcButtonBar from '@/src/components/tools/button_bar';
-import DtcSuggestion from '@/src/components/controls/control_suggestion';
+import DtcButtonBar from '@/src/components/tools/button_bar.vue';
+import DtcSuggestion from '@/src/components/controls/control_suggestion.vue';
 import supportedComponentData from '@/src/supported_components.json';
 import variantBank from '@/src/variants/variants';
-import { getIcons } from '@/src/lib/utils';
+// import { getIcons } from '@/src/lib/utils';
 
 const DEFAULT_COMPONENT = 'DtButton';
 
@@ -129,22 +129,21 @@ onMounted(async () => {
   });
 
   const promises = [];
-  getIcons().forEach(icon => {
-    promises.push(import(`../node_modules/@dialpad/dialtone/lib/dist/vue/icons/${icon}.vue`).then(module => {
-      return [icon, module.default];
-    }));
-  });
-  icons.value = Object.fromEntries(await Promise.all(promises));
+  // getIcons().forEach(icon => {
+  //  promises.push(import(`../node_modules/@dialpad/dialtone/lib/dist/vue/icons/${icon}.vue`).then(module => {
+  //    return [icon, module.default];
+  //  }));
+  // });
+  // icons.value = Object.fromEntries(await Promise.all(promises));
 });
 
 </script>
 
-<style lang="less" src="./assets/dialtone.less" />
 <style lang="less" src="./assets/transitions.less" />
 
 <style>
   .dtc-preview {
-    padding-left: var(--su128);
-    padding-right: var(--su128);
+    padding-left: var(--dt-space-800);
+    padding-right: var(--dt-space-800);
   }
 </style>
diff --git a/packages/combinator/src/assets/dialtone.less b/packages/combinator/src/assets/dialtone.less
index 20605441ac..4c1c04770b 100644
--- a/packages/combinator/src/assets/dialtone.less
+++ b/packages/combinator/src/assets/dialtone.less
@@ -1 +1 @@
-@import '@dialpad/dialtone/lib/build/less/dialtone';
+@import '@dialpad/dialtone-css/lib/build/less/dialtone';
diff --git a/packages/combinator/src/assets/themes/dark.less b/packages/combinator/src/assets/themes/dark.less
index 54509f7118..aa84df8d1d 100644
--- a/packages/combinator/src/assets/themes/dark.less
+++ b/packages/combinator/src/assets/themes/dark.less
@@ -3,11 +3,11 @@
 & {
   --dtc-theme-color-foreground: var(--black-025);
   --dtc-theme-color-foreground-darken: var(--black-050);
-  --dtc-theme-color-foreground-lighten: var(--white);
+  --dtc-theme-color-foreground-lighten: var(--dt-color-neutral-white);
 
-  --dtc-theme-color-background: var(--black-700);
-  --dtc-theme-color-background-darken: var(--black-800);
-  --dtc-theme-color-background-lighten: var(--black-600);
+  --dtc-theme-color-background: var(--dt-color-black-700);
+  --dtc-theme-color-background-darken: var(--dt-color-black-800);
+  --dtc-theme-color-background-lighten: var(--dt-color-black-600);
 
   color-scheme: dark;
 }
@@ -22,5 +22,5 @@
 }
 
 .dtc-theme__interactive {
-  color: var(--purple-300);
+  color: var(--dt-color-purple-300);
 }
diff --git a/packages/combinator/src/assets/themes/light.less b/packages/combinator/src/assets/themes/light.less
index cb94bf1d21..25e1b6465a 100644
--- a/packages/combinator/src/assets/themes/light.less
+++ b/packages/combinator/src/assets/themes/light.less
@@ -1,11 +1,11 @@
 & {
-  --dtc-theme-color-foreground: var(--black-800);
-  --dtc-theme-color-foreground-darken: var(--black-900);
-  --dtc-theme-color-foreground-lighten: var(--black-700);
+  --dtc-theme-color-foreground: var(--dt-color-black-800);
+  --dtc-theme-color-foreground-darken: var(--dt-color-black-900);
+  --dtc-theme-color-foreground-lighten: var(--dt-color-black-700);
 
-  --dtc-theme-color-background: var(--white);
+  --dtc-theme-color-background: var(--dt-color-neutral-white);
   --dtc-theme-color-background-darken: var(--black-050);
-  --dtc-theme-color-background-lighten: var(--white);
+  --dtc-theme-color-background-lighten: var(--dt-color-neutral-white);
 
   color-scheme: light;
 }
diff --git a/packages/combinator/src/components/code_editor/code_editor.vue b/packages/combinator/src/components/code_editor/code_editor.vue
index b5d89f9442..0e1923766b 100644
--- a/packages/combinator/src/components/code_editor/code_editor.vue
+++ b/packages/combinator/src/components/code_editor/code_editor.vue
@@ -58,8 +58,8 @@
           <template #default>
             Copy
           </template>
-          <template #icon>
-            <IconCopy />
+          <template #icon="{ iconSize }">
+            <dt-icon-copy :size="iconSize" />
           </template>
         </dt-button>
       </template>
@@ -71,10 +71,10 @@
 </template>
 
 <script setup>
-import DtcCodeEditorTagAttributes from './code_editor_tag_attributes';
-import DtcCodeEditorElement from './code_editor_element';
-import DtcCodeEditorSlot from './code_editor_slot';
-import IconCopy from 'dialtone-icons/IconContentCopy';
+import DtcCodeEditorTagAttributes from './code_editor_tag_attributes.vue';
+import DtcCodeEditorElement from './code_editor_element.vue';
+import DtcCodeEditorSlot from './code_editor_slot.vue';
+import { DtIconCopy } from '@dialpad/dialtone-icons/vue3';
 import { DtButton, DtPopover } from '@dialpad/dialtone-vue';
 
 import { OPTIONS_UPDATE_EVENT, SETTINGS_INDENT_KEY } from '@/src/lib/constants';
diff --git a/packages/combinator/src/components/code_editor/code_editor_closing_tag.vue b/packages/combinator/src/components/code_editor/code_editor_closing_tag.vue
index 7d1972f385..c47a81dc16 100644
--- a/packages/combinator/src/components/code_editor/code_editor_closing_tag.vue
+++ b/packages/combinator/src/components/code_editor/code_editor_closing_tag.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import DtcCodeEditorTag from './code_editor_tag';
+import DtcCodeEditorTag from './code_editor_tag.vue';
 
 defineProps({
   name: {
diff --git a/packages/combinator/src/components/code_editor/code_editor_element.vue b/packages/combinator/src/components/code_editor/code_editor_element.vue
index 74a3d7c387..154b14915d 100644
--- a/packages/combinator/src/components/code_editor/code_editor_element.vue
+++ b/packages/combinator/src/components/code_editor/code_editor_element.vue
@@ -19,8 +19,8 @@
 </template>
 
 <script setup>
-import DtcCodeEditorOpeningTag from './code_editor_opening_tag';
-import DtcCodeEditorClosingTag from './code_editor_closing_tag';
+import DtcCodeEditorOpeningTag from './code_editor_opening_tag.vue';
+import DtcCodeEditorClosingTag from './code_editor_closing_tag.vue';
 
 defineProps({
   tagName: {
diff --git a/packages/combinator/src/components/code_editor/code_editor_input.vue b/packages/combinator/src/components/code_editor/code_editor_input.vue
index 859c9e8c3e..3f3da9e720 100644
--- a/packages/combinator/src/components/code_editor/code_editor_input.vue
+++ b/packages/combinator/src/components/code_editor/code_editor_input.vue
@@ -21,9 +21,9 @@ export default {
 
 <style lang="less">
 .dtc-code-editor-input {
-  padding: var(--su2) var(--su4) var(--su2) var(--su4);
-  border-radius: var(--su6);
-  border: solid var(--su1);
+  padding: var(--dt-space-200) var(--dt-space-300) var(--dt-space-200) var(--dt-space-300);
+  border-radius: var(--dt-space-350);
+  border: solid var(--dt-space-100);
   border-color: var(--dtc-theme-color-background-lighten);
   background-color: var(--dtc-theme-color-background-darken);
   outline: none;
diff --git a/packages/combinator/src/components/code_editor/code_editor_opening_tag.vue b/packages/combinator/src/components/code_editor/code_editor_opening_tag.vue
index 8ae1659f1f..c3295a0964 100644
--- a/packages/combinator/src/components/code_editor/code_editor_opening_tag.vue
+++ b/packages/combinator/src/components/code_editor/code_editor_opening_tag.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import DtcCodeEditorTag from './code_editor_tag';
+import DtcCodeEditorTag from './code_editor_tag.vue';
 
 defineProps({
   name: {
diff --git a/packages/combinator/src/components/code_editor/code_editor_slot.vue b/packages/combinator/src/components/code_editor/code_editor_slot.vue
index 71fc0da127..2d7121c4cb 100644
--- a/packages/combinator/src/components/code_editor/code_editor_slot.vue
+++ b/packages/combinator/src/components/code_editor/code_editor_slot.vue
@@ -32,10 +32,10 @@
 </template>
 
 <script setup>
-import DtcCodeEditorElement from './code_editor_element';
-import DtcCodeEditorInput from './code_editor_input';
+import DtcCodeEditorElement from './code_editor_element.vue';
+import DtcCodeEditorInput from './code_editor_input.vue';
 import { DEFAULT_SLOT_NAME } from '@/src/lib/constants';
-import DtcCodeEditorIndent from '@/src/components/code_editor/code_editor_indent';
+import DtcCodeEditorIndent from '@/src/components/code_editor/code_editor_indent.vue';
 
 const props = defineProps({
   /**
diff --git a/packages/combinator/src/components/code_editor/code_editor_tag_attributes.vue b/packages/combinator/src/components/code_editor/code_editor_tag_attributes.vue
index 202b47b6bd..69fdaa448a 100644
--- a/packages/combinator/src/components/code_editor/code_editor_tag_attributes.vue
+++ b/packages/combinator/src/components/code_editor/code_editor_tag_attributes.vue
@@ -35,7 +35,7 @@
 </template>
 
 <script setup>
-import DtcCodeEditorIndent from './code_editor_indent';
+import DtcCodeEditorIndent from './code_editor_indent.vue';
 
 import { computed } from 'vue';
 import { stringifyDocValue } from '@/src/lib/parse';
diff --git a/packages/combinator/src/components/code_panel/code_panel.vue b/packages/combinator/src/components/code_panel/code_panel.vue
index 9d2ed28dc9..b6bfa57d30 100644
--- a/packages/combinator/src/components/code_panel/code_panel.vue
+++ b/packages/combinator/src/components/code_panel/code_panel.vue
@@ -39,10 +39,10 @@
 </template>
 
 <script setup>
-import DtcTabPanel from '@/src/components/tools/tab_panel';
-import DtcEventConsole from '@/src/components/event_console/event_console';
-import DtcCodeEditor from '@/src/components/code_editor/code_editor';
-import DtcOverlay from '@/src/components/tools/overlay';
+import DtcTabPanel from '@/src/components/tools/tab_panel.vue';
+import DtcEventConsole from '@/src/components/event_console/event_console.vue';
+import DtcCodeEditor from '@/src/components/code_editor/code_editor.vue';
+import DtcOverlay from '@/src/components/tools/overlay.vue';
 
 import { OPTIONS_UPDATE_EVENT } from '@/src/lib/constants';
 import { ref } from 'vue';
diff --git a/packages/combinator/src/components/combinator.test.js b/packages/combinator/src/components/combinator.test.js
index ebb7d203fe..5fd2fc4b49 100644
--- a/packages/combinator/src/components/combinator.test.js
+++ b/packages/combinator/src/components/combinator.test.js
@@ -1,4 +1,4 @@
-import DtcCombinator from './combinator';
+import DtcCombinator from './combinator.vue';
 
 import { assert } from 'chai';
 import { shallowMount } from '@vue/test-utils';
diff --git a/packages/combinator/src/components/combinator.vue b/packages/combinator/src/components/combinator.vue
index d5501b98e3..915ae03328 100644
--- a/packages/combinator/src/components/combinator.vue
+++ b/packages/combinator/src/components/combinator.vue
@@ -29,7 +29,7 @@
     >
       May have unexpected behaviour.
     </dt-notice>
-    <div class="d-d-flex d-fl-grow1 d-hmn0">
+    <div class="d-d-flex d-fl-grow1 d-hmx464">
       <div
         class="dtc-root d-d-grid d-of-hidden d-ba d-bar4 d-w100p"
         :class="{
@@ -79,11 +79,11 @@
 </template>
 
 <script setup>
-import DtcOptionBar from './option_bar/option_bar';
-import DtcRenderer from './renderer/renderer';
-import DtcCodePanel from './code_panel/code_panel';
-import DtcSettingsMenu from './settings_menu/settings_menu';
-import DtcHeader from '@/src/components/header/header';
+import DtcOptionBar from './option_bar/option_bar.vue';
+import DtcRenderer from './renderer/renderer.vue';
+import DtcCodePanel from './code_panel/code_panel.vue';
+import DtcSettingsMenu from './settings_menu/settings_menu.vue';
+import DtcHeader from '@/src/components/header/header.vue';
 import { DtNotice } from '@dialpad/dialtone-vue';
 
 import { enumerateGroups } from '@/src/lib/utils';
@@ -219,6 +219,8 @@ const info = computed(() => {
 
 /**
  * Gets the values for a given 'options' member group with the provided defaults.
+ *
+ * @param info
  */
 function getInitialValues (info) {
   const options = {};
@@ -258,6 +260,9 @@ const options = computedModel(
    * Catch errors when updating member values,
    * else vue can block the value from ever being changed,
    * keeping the value permanently in an invalid state
+   *
+   * @param e
+   * @param model
    */
   (e, model) => {
     try {
@@ -339,6 +344,10 @@ export default {
   grid-template-rows: repeat(2, 1fr);
 }
 
+.dtc-root__sidebar {
+  grid-row: span 2 / span 2;
+}
+
 .dtc-root--blueprint {
   grid-template-columns: 1fr !important;
 
@@ -359,8 +368,7 @@ export default {
   }
 
   .dtc-root__sidebar {
-    grid-row: span 2 / span 2;
-    border-left: var(--su1) solid currentColor;
+    border-left: var(--dt-space-100) solid currentColor;
   }
 }
 
@@ -379,8 +387,7 @@ export default {
 
   .dtc-root__sidebar {
     grid-column-start: 1;
-    grid-row: span 2 / span 2;
-    border-right: var(--su1) solid currentColor;
+    border-right: var(--dt-space-100) solid currentColor;
   }
 }
 
diff --git a/packages/combinator/src/components/controls/control_array.test.js b/packages/combinator/src/components/controls/control_array.test.js
index 70744c281c..79fc6746cf 100644
--- a/packages/combinator/src/components/controls/control_array.test.js
+++ b/packages/combinator/src/components/controls/control_array.test.js
@@ -1,4 +1,4 @@
-import DtcControlArray from './control_array';
+import DtcControlArray from './control_array.vue';
 
 import { assert } from 'chai';
 import { mount } from '@vue/test-utils';
diff --git a/packages/combinator/src/components/controls/control_array.vue b/packages/combinator/src/components/controls/control_array.vue
index 1e1f3641dc..49dcda0458 100644
--- a/packages/combinator/src/components/controls/control_array.vue
+++ b/packages/combinator/src/components/controls/control_array.vue
@@ -29,8 +29,8 @@
 </template>
 
 <script setup>
-import DtcControlIterable from './control_iterable';
-import DtcControlDynamic from './control_dynamic';
+import DtcControlIterable from './control_iterable.vue';
+import DtcControlDynamic from './control_dynamic.vue';
 import { VALUE_UPDATE_EVENT } from '@/src/lib/constants';
 import { serializeControlValue, deserializeControlValue } from '@/src/lib/control';
 
diff --git a/packages/combinator/src/components/controls/control_base.test.js b/packages/combinator/src/components/controls/control_base.test.js
index 19a533b31e..e728c1eca1 100644
--- a/packages/combinator/src/components/controls/control_base.test.js
+++ b/packages/combinator/src/components/controls/control_base.test.js
@@ -1,4 +1,4 @@
-import DtcControlBase from './control_base';
+import DtcControlBase from './control_base.vue';
 
 import { assert } from 'chai';
 import { mount } from '@vue/test-utils';
diff --git a/packages/combinator/src/components/controls/control_base.vue b/packages/combinator/src/components/controls/control_base.vue
index 7504b740db..f03c8f1c99 100644
--- a/packages/combinator/src/components/controls/control_base.vue
+++ b/packages/combinator/src/components/controls/control_base.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import DtcControlString from './control_string';
+import DtcControlString from './control_string.vue';
 import { VALUE_UPDATE_EVENT } from '@/src/lib/constants';
 
 defineProps({
diff --git a/packages/combinator/src/components/controls/control_boolean.test.js b/packages/combinator/src/components/controls/control_boolean.test.js
index c4960e6247..2b1b7ce623 100644
--- a/packages/combinator/src/components/controls/control_boolean.test.js
+++ b/packages/combinator/src/components/controls/control_boolean.test.js
@@ -1,4 +1,4 @@
-import DtcControlBoolean from './control_boolean';
+import DtcControlBoolean from './control_boolean.vue';
 
 import { assert } from 'chai';
 import { mount } from '@vue/test-utils';
diff --git a/packages/combinator/src/components/controls/control_dynamic.test.js b/packages/combinator/src/components/controls/control_dynamic.test.js
index 82c02ddad1..7bdcc9f9e1 100644
--- a/packages/combinator/src/components/controls/control_dynamic.test.js
+++ b/packages/combinator/src/components/controls/control_dynamic.test.js
@@ -1,6 +1,6 @@
-import DtcControlDynamic from './control_dynamic';
-import DtcControlNumber from '@/src/components/controls/control_number';
-import DtcControlString from '@/src/components/controls/control_string';
+import DtcControlDynamic from './control_dynamic.vue';
+import DtcControlNumber from '@/src/components/controls/control_number.vue';
+import DtcControlString from '@/src/components/controls/control_string.vue';
 
 import { assert } from 'chai';
 import { mount } from '@vue/test-utils';
diff --git a/packages/combinator/src/components/controls/control_dynamic.vue b/packages/combinator/src/components/controls/control_dynamic.vue
index bb3ae96631..6f5a38d7ce 100644
--- a/packages/combinator/src/components/controls/control_dynamic.vue
+++ b/packages/combinator/src/components/controls/control_dynamic.vue
@@ -26,7 +26,7 @@
 </template>
 
 <script setup>
-import DtcControlSelection from './control_selection';
+import DtcControlSelection from './control_selection.vue';
 
 import { controlMap, getControlByValue, UNSET } from '@/src/lib/control';
 import { VALUE_UPDATE_EVENT } from '@/src/lib/constants';
diff --git a/packages/combinator/src/components/controls/control_event.test.js b/packages/combinator/src/components/controls/control_event.test.js
index ebf5684809..63451e6b85 100644
--- a/packages/combinator/src/components/controls/control_event.test.js
+++ b/packages/combinator/src/components/controls/control_event.test.js
@@ -1,4 +1,4 @@
-import DtcControlEvent from './control_event';
+import DtcControlEvent from './control_event.vue';
 
 import { assert } from 'chai';
 import { mount } from '@vue/test-utils';
diff --git a/packages/combinator/src/components/controls/control_iterable.test.js b/packages/combinator/src/components/controls/control_iterable.test.js
index 6799c01ac9..7956802463 100644
--- a/packages/combinator/src/components/controls/control_iterable.test.js
+++ b/packages/combinator/src/components/controls/control_iterable.test.js
@@ -1,4 +1,4 @@
-import DtcControlIterable from './control_iterable';
+import DtcControlIterable from './control_iterable.vue';
 
 import { assert } from 'chai';
 import { mount } from '@vue/test-utils';
diff --git a/packages/combinator/src/components/controls/control_iterable.vue b/packages/combinator/src/components/controls/control_iterable.vue
index 8c3242ffa1..9ff6c4ec7b 100644
--- a/packages/combinator/src/components/controls/control_iterable.vue
+++ b/packages/combinator/src/components/controls/control_iterable.vue
@@ -33,7 +33,7 @@
               :disabled="disabled"
               @click="() => removeItem(index)"
             >
-              <IconRemove />
+              <dt-icon-close />
             </dt-button>
           </div>
         </div>
@@ -45,7 +45,7 @@
           :disabled="disabled"
           @click="addItem"
         >
-          <icon-add />
+          <dt-icon-plus />
         </dt-button>
       </div>
     </div>
@@ -56,8 +56,7 @@
 </template>
 
 <script setup>
-import IconAdd from 'dialtone-icons/IconAddCircleOutline';
-import IconRemove from 'dialtone-icons/IconRemove';
+import { DtIconPlus, DtIconClose } from '@dialpad/dialtone-icons/vue3'
 import { DtButton, DtListItem } from '@dialpad/dialtone-vue';
 import { DEFAULT_PREFIX, VALUE_UPDATE_EVENT } from '@/src/lib/constants';
 import { idMap } from '@/src/lib/utils_vue';
diff --git a/packages/combinator/src/components/controls/control_nullish.test.js b/packages/combinator/src/components/controls/control_nullish.test.js
index 41411581de..edb2401e49 100644
--- a/packages/combinator/src/components/controls/control_nullish.test.js
+++ b/packages/combinator/src/components/controls/control_nullish.test.js
@@ -1,4 +1,4 @@
-import DtcControlNullish from './control_nullish';
+import DtcControlNullish from './control_nullish.vue';
 
 import { assert } from 'chai';
 import { mount } from '@vue/test-utils';
diff --git a/packages/combinator/src/components/controls/control_nullish.vue b/packages/combinator/src/components/controls/control_nullish.vue
index bbbb945605..da9854c22b 100644
--- a/packages/combinator/src/components/controls/control_nullish.vue
+++ b/packages/combinator/src/components/controls/control_nullish.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script setup>
-import DtcControlSelection from './control_selection';
+import DtcControlSelection from './control_selection.vue';
 import { computed } from 'vue';
 import { VALUE_UPDATE_EVENT } from '@/src/lib/constants';
 import { UNSET } from '@/src/lib/control';
diff --git a/packages/combinator/src/components/controls/control_number.test.js b/packages/combinator/src/components/controls/control_number.test.js
index b53c987d55..674ab3af42 100644
--- a/packages/combinator/src/components/controls/control_number.test.js
+++ b/packages/combinator/src/components/controls/control_number.test.js
@@ -1,4 +1,4 @@
-import DtcControlNumber from './control_number';
+import DtcControlNumber from './control_number.vue';
 
 import { assert } from 'chai';
 import { mount } from '@vue/test-utils';
diff --git a/packages/combinator/src/components/controls/control_object.test.js b/packages/combinator/src/components/controls/control_object.test.js
index 10e934d620..32ebdb7350 100644
--- a/packages/combinator/src/components/controls/control_object.test.js
+++ b/packages/combinator/src/components/controls/control_object.test.js
@@ -1,4 +1,4 @@
-import DtcControlObject from './control_object';
+import DtcControlObject from './control_object.vue';
 
 import { assert } from 'chai';
 import { mount } from '@vue/test-utils';
diff --git a/packages/combinator/src/components/controls/control_object.vue b/packages/combinator/src/components/controls/control_object.vue
index 25f92de2ea..f19b4de872 100644
--- a/packages/combinator/src/components/controls/control_object.vue
+++ b/packages/combinator/src/components/controls/control_object.vue
@@ -45,9 +45,9 @@
 </template>
 
 <script setup>
-import DtcControlString from './control_string';
-import DtcControlIterable from './control_iterable';
-import DtcControlDynamic from './control_dynamic';
+import DtcControlString from './control_string.vue';
+import DtcControlIterable from './control_iterable.vue';
+import DtcControlDynamic from './control_dynamic.vue';
 import { VALUE_UPDATE_EVENT } from '@/src/lib/constants';
 import { computed } from 'vue';
 import { serializeControlValue, deserializeControlValue } from '@/src/lib/control';
diff --git a/packages/combinator/src/components/controls/control_selection.test.js b/packages/combinator/src/components/controls/control_selection.test.js
index 485b251a87..919cea36aa 100644
--- a/packages/combinator/src/components/controls/control_selection.test.js
+++ b/packages/combinator/src/components/controls/control_selection.test.js
@@ -1,4 +1,4 @@
-import DtcControlSelection from './control_selection';
+import DtcControlSelection from './control_selection.vue';
 
 import { assert } from 'chai';
 import { mount } from '@vue/test-utils';
diff --git a/packages/combinator/src/components/controls/control_slot.test.js b/packages/combinator/src/components/controls/control_slot.test.js
index 6c516d628a..f3ea865fb6 100644
--- a/packages/combinator/src/components/controls/control_slot.test.js
+++ b/packages/combinator/src/components/controls/control_slot.test.js
@@ -1,4 +1,4 @@
-import DtcControlSlot from './control_slot';
+import DtcControlSlot from './control_slot.vue';
 
 import { assert } from 'chai';
 import { mount } from '@vue/test-utils';
diff --git a/packages/combinator/src/components/controls/control_string.test.js b/packages/combinator/src/components/controls/control_string.test.js
index 6cd69dfc6e..9150fd83e2 100644
--- a/packages/combinator/src/components/controls/control_string.test.js
+++ b/packages/combinator/src/components/controls/control_string.test.js
@@ -1,4 +1,4 @@
-import DtcControlString from './control_string';
+import DtcControlString from './control_string.vue';
 
 import { assert } from 'chai';
 import { mount } from '@vue/test-utils';
diff --git a/packages/combinator/src/components/controls/control_suggestion.vue b/packages/combinator/src/components/controls/control_suggestion.vue
index 92b5f28229..32ebfef9bc 100644
--- a/packages/combinator/src/components/controls/control_suggestion.vue
+++ b/packages/combinator/src/components/controls/control_suggestion.vue
@@ -18,9 +18,11 @@
           <template #default>
             <slot />
           </template>
-          <template #icon>
-            <icon-collapse v-if="open" />
-            <icon-expand v-else />
+          <template #icon="{ iconSize }">
+            <component
+              :is="open ? DtIconChevronDown : DtIconChevronRight"
+              :size="iconSize"
+            />
           </template>
         </dtc-control-string>
       </template>
@@ -50,13 +52,12 @@
 </template>
 
 <script setup>
-import DtcControlString from './control_string';
-import IconExpand from 'dialtone-icons/IconArrowKeyboardDown';
-import IconCollapse from 'dialtone-icons/IconArrowKeyboardUp';
+import DtcControlString from './control_string.vue';
 import { DtRecipeComboboxWithPopover, DtListItem } from '@dialpad/dialtone-vue';
 
 import { VALUE_UPDATE_EVENT } from '@/src/lib/constants';
 import { computed, ref } from 'vue';
+import { DtIconChevronDown, DtIconChevronRight } from '@dialpad/dialtone-icons/vue3';
 
 const WARNING_MESSAGE = 'Unexpected value';
 
diff --git a/packages/combinator/src/components/event_console/event_console.test.js b/packages/combinator/src/components/event_console/event_console.test.js
index c8479a0724..0024384b1b 100644
--- a/packages/combinator/src/components/event_console/event_console.test.js
+++ b/packages/combinator/src/components/event_console/event_console.test.js
@@ -1,4 +1,4 @@
-import DtcEventConsole from './event_console';
+import DtcEventConsole from './event_console.vue';
 
 import { assert } from 'chai';
 import { mount } from '@vue/test-utils';
diff --git a/packages/combinator/src/components/event_console/event_console.vue b/packages/combinator/src/components/event_console/event_console.vue
index 07a66df89b..a71776c179 100644
--- a/packages/combinator/src/components/event_console/event_console.vue
+++ b/packages/combinator/src/components/event_console/event_console.vue
@@ -15,7 +15,7 @@
         >
           <template #separator>
             <span>
-              <IconArrowForward
+              <dt-icon-arrow-right
                 v-if="entry.value !== undefined"
                 class="d-fs10 d-px6 d-ps-relative d-t2"
               />
@@ -28,10 +28,10 @@
 </template>
 
 <script setup>
-import IconArrowForward from 'dialtone-icons/IconArrowForward';
-import DtcEventConsolePair from '@/src/components/event_console/event_console_pair';
+import DtcEventConsolePair from '@/src/components/event_console/event_console_pair.vue';
 
 import { computed, ref } from 'vue';
+import { DtIconArrowRight } from '@dialpad/dialtone-icons/vue3';
 
 defineProps({
   /**
diff --git a/packages/combinator/src/components/event_console/event_console_array.vue b/packages/combinator/src/components/event_console/event_console_array.vue
index 0717ee2448..257ae1f97a 100644
--- a/packages/combinator/src/components/event_console/event_console_array.vue
+++ b/packages/combinator/src/components/event_console/event_console_array.vue
@@ -23,8 +23,8 @@
 </template>
 
 <script setup>
-import DtcEventConsolePair from '@/src/components/event_console/event_console_pair';
-import DtcEventConsoleLazyLoad from '@/src/components/event_console/event_console_lazy_load';
+import DtcEventConsolePair from '@/src/components/event_console/event_console_pair.vue';
+import DtcEventConsoleLazyLoad from '@/src/components/event_console/event_console_lazy_load.vue';
 
 defineProps({
   value: {
diff --git a/packages/combinator/src/components/event_console/event_console_element.vue b/packages/combinator/src/components/event_console/event_console_element.vue
index c4270d8d4a..47cef44da1 100644
--- a/packages/combinator/src/components/event_console/event_console_element.vue
+++ b/packages/combinator/src/components/event_console/event_console_element.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script setup>
-import DtcEventConsoleLazyLoad from '@/src/components/event_console/event_console_lazy_load';
+import DtcEventConsoleLazyLoad from '@/src/components/event_console/event_console_lazy_load.vue';
 import beautify from 'js-beautify';
 import { computed } from 'vue';
 
diff --git a/packages/combinator/src/components/event_console/event_console_lazy_load.vue b/packages/combinator/src/components/event_console/event_console_lazy_load.vue
index 39df37fefa..cc359c5f70 100644
--- a/packages/combinator/src/components/event_console/event_console_lazy_load.vue
+++ b/packages/combinator/src/components/event_console/event_console_lazy_load.vue
@@ -8,8 +8,10 @@
         importance="clear"
         @click="toggle"
       >
-        <template #icon>
-          <IconExpand />
+        <template #icon="{ iconSize }">
+          <dt-icon-chevron-right
+            :size="iconSize"
+          />
         </template>
       </dt-button>
       <slot name="suffix" />
@@ -21,8 +23,10 @@
         importance="clear"
         @click="toggle"
       >
-        <template #icon>
-          <IconCollapse />
+        <template #icon="{ iconSize }">
+          <dt-icon-chevron-down
+            :size="iconSize"
+          />
         </template>
       </dt-button>
     </span>
@@ -33,10 +37,8 @@
 </template>
 
 <script setup>
-import IconExpand from 'dialtone-icons/IconMenuHorizontal';
-import IconCollapse from 'dialtone-icons/IconArrowAccordion';
-
 import { DtButton, DtLazyShow } from '@dialpad/dialtone-vue';
+import { DtIconChevronDown, DtIconChevronRight } from '@dialpad/dialtone-icons/vue3';
 
 import { ref } from 'vue';
 
diff --git a/packages/combinator/src/components/event_console/event_console_object.vue b/packages/combinator/src/components/event_console/event_console_object.vue
index b4da43523d..12109ffabb 100644
--- a/packages/combinator/src/components/event_console/event_console_object.vue
+++ b/packages/combinator/src/components/event_console/event_console_object.vue
@@ -25,8 +25,8 @@
 <script setup>
 import { flatten } from '@/src/lib/utils';
 import { computed } from 'vue';
-import DtcEventConsolePair from '@/src/components/event_console/event_console_pair';
-import DtcEventConsoleLazyLoad from '@/src/components/event_console/event_console_lazy_load';
+import DtcEventConsolePair from '@/src/components/event_console/event_console_pair.vue';
+import DtcEventConsoleLazyLoad from '@/src/components/event_console/event_console_lazy_load.vue';
 
 const props = defineProps({
   value: {
diff --git a/packages/combinator/src/components/event_console/event_console_pair.vue b/packages/combinator/src/components/event_console/event_console_pair.vue
index da53c6230e..5a5247f7a1 100644
--- a/packages/combinator/src/components/event_console/event_console_pair.vue
+++ b/packages/combinator/src/components/event_console/event_console_pair.vue
@@ -14,12 +14,12 @@
 </template>
 
 <script setup>
-import DtcEventConsoleElement from './event_console_element';
-import DtcEventConsoleFunction from './event_console_function';
-import DtcEventConsoleArray from './event_console_array';
-import DtcEventConsoleObject from './event_console_object';
-import DtcEventConsoleString from './event_console_string';
-import DtcEventConsoleValue from './event_console_value';
+import DtcEventConsoleElement from './event_console_element.vue';
+import DtcEventConsoleFunction from './event_console_function.vue';
+import DtcEventConsoleArray from './event_console_array.vue';
+import DtcEventConsoleObject from './event_console_object.vue';
+import DtcEventConsoleString from './event_console_string.vue';
+import DtcEventConsoleValue from './event_console_value.vue';
 
 import { computed } from 'vue';
 
diff --git a/packages/combinator/src/components/option_bar/option_bar.vue b/packages/combinator/src/components/option_bar/option_bar.vue
index 9340df6f15..77af517d2b 100644
--- a/packages/combinator/src/components/option_bar/option_bar.vue
+++ b/packages/combinator/src/components/option_bar/option_bar.vue
@@ -57,8 +57,8 @@
 </template>
 
 <script setup>
-import DtcOptionBarMemberGroup from './option_bar_member_group';
-import DtcSection from '../tools/section';
+import DtcOptionBarMemberGroup from './option_bar_member_group.vue';
+import DtcSection from '../tools/section.vue';
 
 import { OPTIONS_UPDATE_EVENT } from '@/src/lib/constants';
 import { getControlByMemberType, getControlByValue } from '@/src/lib/control';
diff --git a/packages/combinator/src/components/option_bar/option_bar_control.test.js b/packages/combinator/src/components/option_bar/option_bar_control.test.js
index 5a97e3d516..ca29ccfa3a 100644
--- a/packages/combinator/src/components/option_bar/option_bar_control.test.js
+++ b/packages/combinator/src/components/option_bar/option_bar_control.test.js
@@ -1,4 +1,4 @@
-import DtcOptionBarControl from './option_bar_control';
+import DtcOptionBarControl from './option_bar_control.vue';
 
 import { assert } from 'chai';
 import { mount } from '@vue/test-utils';
diff --git a/packages/combinator/src/components/option_bar/option_bar_control.vue b/packages/combinator/src/components/option_bar/option_bar_control.vue
index c6468d1cbb..30aa048ae1 100644
--- a/packages/combinator/src/components/option_bar/option_bar_control.vue
+++ b/packages/combinator/src/components/option_bar/option_bar_control.vue
@@ -12,7 +12,7 @@
         >
           {{ label }}
         </span>
-        <icon-lock
+        <dt-icon-lock
           v-if="locked"
           class="d-pr4 d-fs10 d-ps-relative d-t1"
         />
@@ -46,7 +46,7 @@
 </template>
 
 <script setup>
-import IconLock from 'dialtone-icons/IconLock';
+import { DtIconLock } from '@dialpad/dialtone-icons/vue3'
 import { DtBadge } from '@dialpad/dialtone-vue';
 import { VALUE_UPDATE_EVENT } from '@/src/lib/constants';
 import { computed } from 'vue';
diff --git a/packages/combinator/src/components/option_bar/option_bar_member_group.test.js b/packages/combinator/src/components/option_bar/option_bar_member_group.test.js
index 724cfe3edf..f7c32cd70f 100644
--- a/packages/combinator/src/components/option_bar/option_bar_member_group.test.js
+++ b/packages/combinator/src/components/option_bar/option_bar_member_group.test.js
@@ -1,4 +1,4 @@
-import DtcOptionBarMemberGroup from './option_bar_member_group';
+import DtcOptionBarMemberGroup from './option_bar_member_group.vue';
 
 import { assert } from 'chai';
 import { mount } from '@vue/test-utils';
diff --git a/packages/combinator/src/components/option_bar/option_bar_member_group.vue b/packages/combinator/src/components/option_bar/option_bar_member_group.vue
index acb866bb81..f04714e737 100644
--- a/packages/combinator/src/components/option_bar/option_bar_member_group.vue
+++ b/packages/combinator/src/components/option_bar/option_bar_member_group.vue
@@ -25,8 +25,8 @@
             :disabled="member.lockControl"
             @click="() => resetMember(key)"
           >
-            <template #icon>
-              <icon-reset />
+            <template #icon="{ iconSize }">
+              <dt-icon-undo-2 :size="iconSize" />
             </template>
           </dt-button>
         </div>
@@ -54,9 +54,9 @@
 </template>
 
 <script setup>
-import DtcOptionBarControlSelector from '@/src/components/option_bar/option_bar_control_selector';
-import DtcOptionBarControl from './option_bar_control';
-import IconReset from 'dialtone-icons/IconRefresh';
+import DtcOptionBarControlSelector from '@/src/components/option_bar/option_bar_control_selector.vue';
+import DtcOptionBarControl from './option_bar_control.vue';
+import { DtIconUndo2 } from '@dialpad/dialtone-icons/vue3';
 import { DtButton } from '@dialpad/dialtone-vue';
 import { MEMBER_UPDATE_EVENT } from '@/src/lib/constants';
 import { computed, reactive } from 'vue';
@@ -117,6 +117,7 @@ const memberMap = computed(() => {
 /**
  * Used to match members in the 'member map' to their respective values.
  *
+ * @param member
  * @returns {*}
  */
 function getMemberKey (member) {
@@ -126,6 +127,7 @@ function getMemberKey (member) {
 /**
  * Determines if the member has a default value.
  *
+ * @param member
  * @returns {boolean} If the member has default value.
  */
 function hasDefaultValue (member) {
@@ -136,6 +138,7 @@ function hasDefaultValue (member) {
  * Attempts to get the control data for a given control.
  * If the control does not exist, gets the 'base' control data.
  *
+ * @param member
  * @returns {object} The control data from the 'control map'.
  */
 function getControlData (member) {
@@ -153,6 +156,7 @@ function isVModel (member) {
  * Wraps a member with an object containing additional data about the member.
  * This is used by the 'member map' to hold data about controls.
  *
+ * @param member
  * @returns {object}
  */
 function extendMember (member) {
@@ -170,6 +174,8 @@ function extendMember (member) {
 
 /**
  * Resets the control to default value.
+ *
+ * @param key
  */
 function resetMember (key) {
   const member = memberMap.value[key];
diff --git a/packages/combinator/src/components/renderer/renderer.vue b/packages/combinator/src/components/renderer/renderer.vue
index 745b558019..ff46371298 100644
--- a/packages/combinator/src/components/renderer/renderer.vue
+++ b/packages/combinator/src/components/renderer/renderer.vue
@@ -45,10 +45,10 @@
 <script setup>
 import { computed } from 'vue';
 import { SETTINGS_UPDATE_EVENT } from '@/src/lib/constants';
-import DtcRendererMenu from '@/src/components/renderer/renderer_menu';
-import DtcOverlay from '@/src/components/tools/overlay';
-import DtcRendererTarget from '@/src/components/renderer/renderer_target';
-import DtcNode from '@/src/components/tools/node';
+import DtcRendererMenu from '@/src/components/renderer/renderer_menu.vue';
+import DtcOverlay from '@/src/components/tools/overlay.vue';
+import DtcRendererTarget from '@/src/components/renderer/renderer_target.vue';
+import DtcNode from '@/src/components/tools/node.vue';
 
 const props = defineProps({
   /**
diff --git a/packages/combinator/src/components/renderer/renderer_menu.vue b/packages/combinator/src/components/renderer/renderer_menu.vue
index 04668f3759..83f798c4dd 100644
--- a/packages/combinator/src/components/renderer/renderer_menu.vue
+++ b/packages/combinator/src/components/renderer/renderer_menu.vue
@@ -19,8 +19,8 @@
         v-bind="attrs"
         @click="onOpen"
       >
-        <template #icon>
-          <icon-menu />
+        <template #icon="{ iconSize }">
+          <dt-icon-menu :size="iconSize" />
         </template>
       </dt-button>
     </template>
@@ -49,10 +49,10 @@
           @click="e => updateSettings('positioning', e)"
         >
           <template #native>
-            <icon-left />
+            <dt-icon-arrow-left />
           </template>
           <template #center>
-            <icon-center />
+            <dt-icon-align-center />
           </template>
         </dtc-button-bar>
       </div>
@@ -61,10 +61,10 @@
 </template>
 
 <script setup>
-import IconLeft from 'dialtone-icons/IconNotes';
-import IconCenter from 'dialtone-icons/IconMenu';
-import IconMenu from 'dialtone-icons/IconMenuVertical';
-import DtcButtonBar from '../tools/button_bar';
+import { DtIconArrowLeft } from '@dialpad/dialtone-icons/vue3'
+import { DtIconAlignCenter } from '@dialpad/dialtone-icons/vue3'
+import { DtIconMenu } from '@dialpad/dialtone-icons/vue3'
+import DtcButtonBar from '../tools/button_bar.vue';
 import { DtButton, DtPopover } from '@dialpad/dialtone-vue';
 import { SETTINGS_UPDATE_EVENT } from '@/src/lib/constants';
 import { ref } from 'vue';
diff --git a/packages/combinator/src/components/settings_menu/settings_menu.vue b/packages/combinator/src/components/settings_menu/settings_menu.vue
index c603f2eca6..62b4e54fa9 100644
--- a/packages/combinator/src/components/settings_menu/settings_menu.vue
+++ b/packages/combinator/src/components/settings_menu/settings_menu.vue
@@ -13,7 +13,7 @@
         v-bind="attrs"
       >
         <template #icon>
-          <IconSettings />
+          <dt-icon-settings />
         </template>
       </dt-button>
     </template>
@@ -87,7 +87,7 @@
 </template>
 
 <script setup>
-import IconSettings from 'dialtone-icons/IconSettings';
+import { DtIconSettings } from '@dialpad/dialtone-icons/vue3'
 
 import {
   DtButton,
diff --git a/packages/combinator/src/components/tools/section.vue b/packages/combinator/src/components/tools/section.vue
index 6c6036d27f..bf03cb4f77 100644
--- a/packages/combinator/src/components/tools/section.vue
+++ b/packages/combinator/src/components/tools/section.vue
@@ -11,9 +11,11 @@
           {{ heading }}
         </h2>
       </template>
-      <template #right>
-        <icon-collapse v-if="show" />
-        <icon-expand v-else />
+      <template #right="{ iconSize }">
+        <component
+          :is="show ? DtIconChevronDown : DtIconChevronRight"
+          :size="iconSize"
+        />
       </template>
     </dt-list-item>
     <div
@@ -26,9 +28,8 @@
 </template>
 
 <script setup>
-import IconExpand from 'dialtone-icons/IconArrowKeyboardDown';
-import IconCollapse from 'dialtone-icons/IconArrowKeyboardUp';
 import { DtListItem } from '@dialpad/dialtone-vue';
+import { DtIconChevronDown, DtIconChevronRight } from '@dialpad/dialtone-icons/vue3';
 
 import { ref } from 'vue';
 
diff --git a/packages/combinator/src/lib/control.js b/packages/combinator/src/lib/control.js
index 67f9b9154a..c2261c5117 100644
--- a/packages/combinator/src/lib/control.js
+++ b/packages/combinator/src/lib/control.js
@@ -2,17 +2,17 @@
  * See /.github/documentation/internal/CONTROLS.MD
  * For in-depth information about controls.
  */
-import DtcControlEvent from '@/src/components/controls/control_event';
-import DtcControlSlot from '@/src/components/controls/control_slot';
-import DtcControlDynamic from '@/src/components/controls/control_dynamic';
-import DtcControlObject from '@/src/components/controls/control_object';
-import DtcControlArray from '@/src/components/controls/control_array';
-import DtcControlBoolean from '@/src/components/controls/control_boolean';
-import DtcControlNumber from '@/src/components/controls/control_number';
-import DtcControlSelection from '@/src/components/controls/control_selection';
-import DtcControlString from '@/src/components/controls/control_string';
-import DtcControlNullish from '@/src/components/controls/control_nullish';
-import DtcControlBase from '@/src/components/controls/control_base';
+import DtcControlEvent from '@/src/components/controls/control_event.vue';
+import DtcControlSlot from '@/src/components/controls/control_slot.vue';
+import DtcControlDynamic from '@/src/components/controls/control_dynamic.vue';
+import DtcControlObject from '@/src/components/controls/control_object.vue';
+import DtcControlArray from '@/src/components/controls/control_array.vue';
+import DtcControlBoolean from '@/src/components/controls/control_boolean.vue';
+import DtcControlNumber from '@/src/components/controls/control_number.vue';
+import DtcControlSelection from '@/src/components/controls/control_selection.vue';
+import DtcControlString from '@/src/components/controls/control_string.vue';
+import DtcControlNullish from '@/src/components/controls/control_nullish.vue';
+import DtcControlBase from '@/src/components/controls/control_base.vue';
 
 import { typeOfMemberValue } from '@/src/lib/utils';
 
diff --git a/packages/combinator/src/lib/utils.js b/packages/combinator/src/lib/utils.js
index ceaec37560..932e3ef823 100644
--- a/packages/combinator/src/lib/utils.js
+++ b/packages/combinator/src/lib/utils.js
@@ -88,15 +88,15 @@ export function enumerateGroups (handler, groups) {
  *
  * @returns {Array} icon components.
  */
-export function getIcons () {
-  const requireContext = require.context(
-    '../../node_modules/@dialpad/dialtone/lib/dist/vue/icons',
-    false,
-    /[A-Z]\w+\.(vue|js)$/,
-  );
-
-  return getComponentFilesFromDir(requireContext).map(item => item.componentName);
-}
+// export function getIcons () {
+//  const requireContext = require.context(
+//    '../../node_modules/@dialpad/dialtone/lib/dist/vue/icons',
+//    false,
+//    /[A-Z]\w+\.(vue|js)$/,
+//  );
+//
+//  return getComponentFilesFromDir(requireContext).map(item => item.componentName);
+// }
 
 /**
  * Extracts filename and component name from all files in a directory.
diff --git a/packages/combinator/src/main.js b/packages/combinator/src/main.js
index db2b08ae4b..93101cdbf3 100644
--- a/packages/combinator/src/main.js
+++ b/packages/combinator/src/main.js
@@ -1,4 +1,12 @@
 import { createApp } from 'vue';
-import App from './App';
+import App from './App.vue';
+
+import '@dialpad/dialtone-css/lib/dist/dialtone.css';
+import '@dialpad/dialtone-vue/css';
+
+import { setTheme } from '@dialpad/dialtone-tokens/themes/config';
+import DpLight from '@dialpad/dialtone-tokens/themes/dp-light.js';
+
+setTheme(DpLight);
 
 createApp(App).mount('#app');
diff --git a/packages/combinator/src/variants/variants.js b/packages/combinator/src/variants/variants.js
index 4b5fb11580..3c7148ad09 100644
--- a/packages/combinator/src/variants/variants.js
+++ b/packages/combinator/src/variants/variants.js
@@ -1,15 +1,15 @@
-import DtBadge from './variants_badge';
-import DtButton from './variants_button';
-import DtBreadcrumbs from './variants_breadcrumbs';
-import DtCheckbox from './variants_checkbox';
-import DtChip from './variants_chip';
-import DtInput from './variants_input';
-import DtLink from './variants_link';
-import DtNotice from './variants_notice';
-import DtRadio from './variants_radio';
-import DtSelectMenu from './variants_select_menu';
-import DtToast from './variants_toast';
-import DtToggle from './variants_toggle';
+import DtBadge from './variants_badge.js';
+import DtButton from './variants_button.js';
+import DtBreadcrumbs from './variants_breadcrumbs.js';
+import DtCheckbox from './variants_checkbox.js';
+import DtChip from './variants_chip.js';
+import DtInput from './variants_input.js';
+import DtLink from './variants_link.js';
+import DtNotice from './variants_notice.js';
+import DtRadio from './variants_radio.js';
+import DtSelectMenu from './variants_select_menu.js';
+import DtToast from './variants_toast.js';
+import DtToggle from './variants_toggle.js';
 
 export default function variants () {
   return {
diff --git a/packages/combinator/vite.config.js b/packages/combinator/vite.config.js
new file mode 100644
index 0000000000..e0019aa5e8
--- /dev/null
+++ b/packages/combinator/vite.config.js
@@ -0,0 +1,39 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import { fileURLToPath } from 'url';
+
+export default defineConfig({
+  build: {
+    sourcemap: true,
+    minify: false,
+    rollupOptions: {
+      external: [
+        /^@dialpad/,
+        'change-case',
+        'js-beautify',
+        'json5-with-undefined',
+        'just-clone',
+        'vue',
+      ],
+      output: {
+        preserveModules: true,
+        minifyInternalExports: false,
+        globals: {
+          vue: 'Vue',
+        },
+      },
+    },
+    lib: {
+      entry: {
+        'dialtone-combinator': './index.js',
+      },
+      formats: ['es'],
+    },
+  },
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('.', import.meta.url)),
+    },
+  },
+});
diff --git a/packages/combinator/vue.config.js b/packages/combinator/vue.config.js
deleted file mode 100644
index 5ad1cb1897..0000000000
--- a/packages/combinator/vue.config.js
+++ /dev/null
@@ -1,18 +0,0 @@
-const path = require('path');
-
-module.exports = {
-  publicPath: './',
-  lintOnSave: false,
-  css: {
-    extract: false,
-  },
-  configureWebpack: {
-    resolve: {
-      alias: {
-        vue$: 'vue/dist/vue.esm-browser.js',
-        '@': path.resolve(__dirname, '.'),
-        'dialtone-icons': path.resolve(__dirname, 'node_modules/@dialpad/dialtone/lib/dist/vue/icons'),
-      },
-    },
-  },
-};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 58105f6e7a..7aa2cc0eed 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -350,103 +350,53 @@ importers:
         version: 5.10.0(encoding@0.1.13)
 
   packages/combinator:
-    devDependencies:
-      '@dialpad/dialtone':
-        specifier: 6.35.0
-        version: 6.35.0(react-dom@16.14.0(react@16.14.0))(react@16.14.0)
+    dependencies:
+      '@dialpad/dialtone-css':
+        specifier: workspace:*
+        version: link:../dialtone-css
+      '@dialpad/dialtone-icons':
+        specifier: workspace:*
+        version: link:../dialtone-icons
       '@dialpad/dialtone-vue':
-        specifier: 3.13.0
-        version: 3.13.0(@dialpad/dialtone@6.35.0(react-dom@16.14.0(react@16.14.0))(react@16.14.0))(vue@3.4.15(typescript@5.4.2))
-      '@types/node':
-        specifier: ^16.11.41
-        version: 16.18.83
-      '@typescript-eslint/eslint-plugin':
-        specifier: ^5.30.0
-        version: 5.62.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0)(typescript@5.4.2)
-      '@typescript-eslint/parser':
-        specifier: ^7.0.1
-        version: 7.0.1(eslint@8.56.0)(typescript@5.4.2)
+        specifier: workspace:^3
+        version: link:../dialtone-vue3
+      change-case:
+        specifier: ^4.1.2
+        version: 4.1.2
+      js-beautify:
+        specifier: ^1.14.4
+        version: 1.14.11
+      json5-with-undefined:
+        specifier: ^2.1.301
+        version: 2.1.301
+      just-clone:
+        specifier: ^6.1.1
+        version: 6.2.0
+      vue:
+        specifier: '>=3.2'
+        version: 3.4.15(typescript@5.4.2)
+    devDependencies:
       '@vitejs/plugin-vue':
-        specifier: ^2.3.3
-        version: 2.3.4(vite@5.4.2(@types/node@16.18.83)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@3.4.15(typescript@5.4.2))
-      '@vitejs/plugin-vue-jsx':
-        specifier: ^1.3.10
-        version: 1.3.10
+        specifier: ^5.1.3
+        version: 5.1.3(vite@5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@3.4.15(typescript@5.4.2))
       '@vue/cli-plugin-unit-mocha':
         specifier: ^5.0.8
-        version: 5.0.8(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(less-loader@11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96)))(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))(encoding@0.1.13)(webpack@5.89.0(@swc/core@1.3.96))
-      '@vue/cli-service':
-        specifier: ^5.0.6
-        version: 5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(less-loader@11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96)))(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3)
+        version: 5.0.8(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))(encoding@0.1.13)(webpack@5.89.0(@swc/core@1.3.96))
       '@vue/test-utils':
         specifier: ^2.0.2
         version: 2.4.2(@vue/server-renderer@3.4.15(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))
-      '@vue/tsconfig':
-        specifier: ^0.1.3
-        version: 0.1.3(@types/node@16.18.83)
       chai:
         specifier: ^4.3.6
         version: 4.3.10
-      change-case:
-        specifier: ^4.1.2
-        version: 4.1.2
-      eslint:
-        specifier: ^8.18.0
-        version: 8.56.0
-      eslint-config-semistandard:
-        specifier: ^17.0.0
-        version: 17.0.0(eslint-config-standard@17.1.0(eslint-plugin-import@2.29.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0))(eslint-plugin-n@15.7.0(eslint@8.56.0))(eslint-plugin-promise@6.1.1(eslint@8.56.0))(eslint@8.56.0))(eslint-plugin-import@2.29.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0))(eslint-plugin-n@15.7.0(eslint@8.56.0))(eslint-plugin-promise@6.1.1(eslint@8.56.0))(eslint@8.56.0)
-      eslint-config-standard:
-        specifier: ^17.1.0
-        version: 17.1.0(eslint-plugin-import@2.29.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0))(eslint-plugin-n@15.7.0(eslint@8.56.0))(eslint-plugin-promise@6.1.1(eslint@8.56.0))(eslint@8.56.0)
-      eslint-plugin-import:
-        specifier: ^2.27.5
-        version: 2.29.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0)
       eslint-plugin-jsdoc:
         specifier: ^39.3.6
         version: 39.9.1(eslint@8.56.0)
       eslint-plugin-mocha:
         specifier: ^10.1.0
         version: 10.5.0(eslint@8.56.0)
-      eslint-plugin-node:
-        specifier: ^11.1.0
-        version: 11.1.0(eslint@8.56.0)
-      eslint-plugin-promise:
-        specifier: ^6.1.1
-        version: 6.1.1(eslint@8.56.0)
-      eslint-plugin-vue:
-        specifier: ^9.15.1
-        version: 9.18.1(eslint@8.56.0)
-      eslint-plugin-vuejs-accessibility:
-        specifier: ^2.1.0
-        version: 2.2.0(eslint@8.56.0)
-      js-beautify:
-        specifier: ^1.14.4
-        version: 1.14.11
-      json5-with-undefined:
-        specifier: ^2.1.301
-        version: 2.1.301
-      just-clone:
-        specifier: ^6.1.1
-        version: 6.2.0
-      less:
-        specifier: ^4.1.3
-        version: 4.2.0
-      less-loader:
-        specifier: ^11.0.0
-        version: 11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96))
-      npm-run-all:
-        specifier: ^4.1.5
-        version: 4.1.5
-      serve:
-        specifier: ^13.0.4
-        version: 13.0.4
-      vue:
-        specifier: ^3.2.37
-        version: 3.4.15(typescript@5.4.2)
-      vue-tsc:
-        specifier: ^0.38.1
-        version: 0.38.9(typescript@5.4.2)
+      vite:
+        specifier: ^5.4.2
+        version: 5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
 
   packages/dialtone-css:
     dependencies:
@@ -474,13 +424,13 @@ importers:
         version: 5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3)
       autoprefixer:
         specifier: ^10.4.14
-        version: 10.4.16(postcss@8.4.45)
+        version: 10.4.16(postcss@8.4.39)
       child_process:
         specifier: ^1.0.2
         version: 1.0.2
       cssnano:
         specifier: ^6.0.1
-        version: 6.0.1(postcss@8.4.45)
+        version: 6.0.1(postcss@8.4.39)
       del:
         specifier: ^6.1.1
         version: 6.1.1
@@ -495,7 +445,7 @@ importers:
         version: 5.0.0
       gulp-postcss:
         specifier: ^9.0.1
-        version: 9.0.1(postcss@8.4.45)
+        version: 9.0.1(postcss@8.4.39)
       gulp-rename:
         specifier: ^2.0.0
         version: 2.0.0
@@ -525,10 +475,10 @@ importers:
         version: 0.12.7
       postcss-less:
         specifier: ^6.0.0
-        version: 6.0.0(postcss@8.4.45)
+        version: 6.0.0(postcss@8.4.39)
       postcss-sorting:
         specifier: ^8.0.2
-        version: 8.0.2(postcss@8.4.45)
+        version: 8.0.2(postcss@8.4.39)
       precss:
         specifier: ^4.0.0
         version: 4.0.0
@@ -1252,10 +1202,6 @@ packages:
     resolution: {integrity: sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/code-frame@7.24.7':
-    resolution: {integrity: sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/compat-data@7.23.3':
     resolution: {integrity: sha512-BmR4bWbDIoFJmJ9z2cZ8Gmm2MXgEDgjdWgpKmKWUt54UGFJdlj31ECtbaDvCG/qVdG3AQ1SfpZEs01lUFbzLOQ==}
     engines: {node: '>=6.9.0'}
@@ -1268,10 +1214,6 @@ packages:
     resolution: {integrity: sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/generator@7.25.6':
-    resolution: {integrity: sha512-VPC82gr1seXOpkjAAKoLhP50vx4vGNlF4msF64dSFq1P8RfB+QAuJWGHPXXPc8QyfVWwwB/TNNU4+ayZmHNbZw==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/helper-annotate-as-pure@7.22.5':
     resolution: {integrity: sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==}
     engines: {node: '>=6.9.0'}
@@ -1321,10 +1263,6 @@ packages:
     resolution: {integrity: sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-module-imports@7.24.7':
-    resolution: {integrity: sha512-8AyH3C+74cgCVVXow/myrynrAGv+nTVg5vKu2nZph9x7RcRwzmh0VFallJuFTZ9mx6u4eSdXZfcOzSqTUm0HCA==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/helper-module-transforms@7.23.3':
     resolution: {integrity: sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==}
     engines: {node: '>=6.9.0'}
@@ -1339,10 +1277,6 @@ packages:
     resolution: {integrity: sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-plugin-utils@7.24.8':
-    resolution: {integrity: sha512-FFWx5142D8h2Mgr/iPVGH5G7w6jDn4jUSpZTyDnQO0Yn7Ks2Kuz6Pci8H6MPCoUJegd/UZQ3tAvfLCxQSnWWwg==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/helper-remap-async-to-generator@7.22.20':
     resolution: {integrity: sha512-pBGyV4uBqOns+0UvhsTO8qgl8hO89PmiDYv+/COyp1aeMcmfrfruz+/nCMFiYyFF/Knn0yfrC85ZzNFjembFTw==}
     engines: {node: '>=6.9.0'}
@@ -1399,10 +1333,6 @@ packages:
     resolution: {integrity: sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/highlight@7.24.7':
-    resolution: {integrity: sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/parser@7.23.9':
     resolution: {integrity: sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==}
     engines: {node: '>=6.0.0'}
@@ -1502,12 +1432,6 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-syntax-jsx@7.24.7':
-    resolution: {integrity: sha512-6ddciUPe/mpMnOKv/U+RSd2vvVy+Yw/JfBB0ZHYjEZt9NLHmCUylNYlsbqCCS1Bffjlb0fCwC9Vqz+sBz6PsiQ==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
   '@babel/plugin-syntax-logical-assignment-operators@7.10.4':
     resolution: {integrity: sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==}
     peerDependencies:
@@ -1906,18 +1830,10 @@ packages:
     resolution: {integrity: sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/template@7.25.0':
-    resolution: {integrity: sha512-aOOgh1/5XzKvg1jvVz7AVrx2piJ2XBi227DHmbY6y+bM9H2FlN+IfecYu4Xl0cNiiVejlsCri89LUsbj8vJD9Q==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/traverse@7.23.2':
     resolution: {integrity: sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/traverse@7.25.6':
-    resolution: {integrity: sha512-9Vrcx5ZW6UwK5tvqsj0nGpp/XzqthkT0dqIc9g1AdtygFToNtTF67XzYS//dm+SAK9cp3B9R4ZO/46p63SCjlQ==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/types@7.23.0':
     resolution: {integrity: sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==}
     engines: {node: '>=6.9.0'}
@@ -2058,16 +1974,6 @@ packages:
   '@dialpad/dialtone-combinator@0.3.1':
     resolution: {integrity: sha512-6Tnt72vgL5XirVA/0wahkVk2Ayx480xgTBSgZ4Rnk6HFzzFhPg4VNmEgt55vXlk/owxqZMVRXwNc8Po5t7WnoA==}
 
-  '@dialpad/dialtone-vue@3.13.0':
-    resolution: {integrity: sha512-GN71IQawYctjVYQxK4NYNu0w6X+ymC91+DJwbLZcZ51AgDEwP3koAJMUKoqfrwznaFkedHZ6ZyaxkDNKbuIQ4Q==}
-    engines: {node: '>= 16'}
-    peerDependencies:
-      '@dialpad/dialtone': '>=6.34'
-      vue: '>=3.2'
-
-  '@dialpad/dialtone@6.35.0':
-    resolution: {integrity: sha512-ie3fMxRaW2HTQwRXj1kzkoACH5w2FM4moHTw9SNNUuCsb0/XVPKv303pmbnlJG8ubbpLO8UUsmdqdn5FeXm/0w==}
-
   '@dialpad/postcss-responsive-variations@1.1.5':
     resolution: {integrity: sha512-vCeaoF+QKZOVPHYsenCRh/XSl1ppUmXS+XUZqRa2gXtQDe6je5qeAK2H7PIwZiNM9gMA7g6EyHs1PshCWDCl9w==}
     engines: {node: '>=12.0.0'}
@@ -2996,10 +2902,6 @@ packages:
     resolution: {integrity: sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==}
     engines: {node: '>=6.0.0'}
 
-  '@jridgewell/gen-mapping@0.3.5':
-    resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==}
-    engines: {node: '>=6.0.0'}
-
   '@jridgewell/resolve-uri@3.1.1':
     resolution: {integrity: sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==}
     engines: {node: '>=6.0.0'}
@@ -3008,10 +2910,6 @@ packages:
     resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==}
     engines: {node: '>=6.0.0'}
 
-  '@jridgewell/set-array@1.2.1':
-    resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==}
-    engines: {node: '>=6.0.0'}
-
   '@jridgewell/source-map@0.3.5':
     resolution: {integrity: sha512-UTYAUj/wviwdsMfzoSJspJxbkH5o1snzwX0//0ENX1u/55kkZZkcTZP6u9bwKGkv+dkk9at4m1Cpt0uY80kcpQ==}
 
@@ -3021,9 +2919,6 @@ packages:
   '@jridgewell/trace-mapping@0.3.20':
     resolution: {integrity: sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==}
 
-  '@jridgewell/trace-mapping@0.3.25':
-    resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
-
   '@jsonjoy.com/base64@1.1.2':
     resolution: {integrity: sha512-q6XAnWQDIMA3+FTiOYajoYqySkO+JSat0ytXGSuRdq9uXE7o92gzuQwQM14xaCRlBLGq3v5miDGC4vkVTn54xA==}
     engines: {node: '>=10.0'}
@@ -3890,10 +3785,6 @@ packages:
     resolution: {integrity: sha512-Tf3YpbBKcQn991KKcw/vg7vZf98v01seSv6CVxZBbRkL/xyjnoYB6KgrFL6zskT1A4dWC/vg77KyNOW+ePaNlA==}
     engines: {node: '>= 10'}
 
-  '@rollup/pluginutils@4.2.1':
-    resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
-    engines: {node: '>= 8.0.0'}
-
   '@rollup/pluginutils@5.1.0':
     resolution: {integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==}
     engines: {node: '>=14.0.0'}
@@ -5136,10 +5027,6 @@ packages:
   '@ungap/structured-clone@1.2.0':
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
 
-  '@vitejs/plugin-vue-jsx@1.3.10':
-    resolution: {integrity: sha512-Cf5zznh4yNMiEMBfTOztaDVDmK1XXfgxClzOSUVUc8WAmHzogrCUeM8B05ABzuGtg0D1amfng+mUmSIOFGP3Pw==}
-    engines: {node: '>=12.0.0'}
-
   '@vitejs/plugin-vue2@2.3.1':
     resolution: {integrity: sha512-/ksaaz2SRLN11JQhLdEUhDzOn909WEk99q9t9w+N12GjQCljzv7GyvAbD/p20aBUjHkvpGOoQ+FCOkG+mjDF4A==}
     engines: {node: ^14.18.0 || >= 16.0.0}
@@ -5147,13 +5034,6 @@ packages:
       vite: ^3.0.0 || ^4.0.0 || ^5.0.0
       vue: ^2.7.0-0
 
-  '@vitejs/plugin-vue@2.3.4':
-    resolution: {integrity: sha512-IfFNbtkbIm36O9KB8QodlwwYvTEsJb4Lll4c2IwB3VHc2gie2mSPtSzL0eYay7X2jd/2WX02FjSGTWR6OPr/zg==}
-    engines: {node: '>=12.0.0'}
-    peerDependencies:
-      vite: ^2.5.10
-      vue: ^3.2.25
-
   '@vitejs/plugin-vue@4.5.0':
     resolution: {integrity: sha512-a2WSpP8X8HTEww/U00bU4mX1QpLINNuz/2KMNpLsdu3BzOpak3AGI1CJYBTXcc4SPhaD0eNRUp7IyQK405L5dQ==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -5168,6 +5048,13 @@ packages:
       vite: ^5.0.0
       vue: ^3.2.25
 
+  '@vitejs/plugin-vue@5.1.3':
+    resolution: {integrity: sha512-3xbWsKEKXYlmX82aOHufFQVnkbMC/v8fLpWwh6hWOUrK5fbbtBh9Q/WWse27BFgSy2/e2c0fz5Scgya9h2GLhw==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    peerDependencies:
+      vite: ^5.0.0
+      vue: ^3.2.25
+
   '@vitest/expect@1.0.4':
     resolution: {integrity: sha512-/NRN9N88qjg3dkhmFcCBwhn/Ie4h064pY3iv7WLRsDJW7dXnEgeoa8W9zy7gIPluhz6CkgqiB3HmpIXgmEY5dQ==}
 
@@ -5183,18 +5070,12 @@ packages:
   '@vitest/utils@1.0.4':
     resolution: {integrity: sha512-gsswWDXxtt0QvtK/y/LWukN7sGMYmnCcv1qv05CsY6cU/Y1zpGX1QuvLs+GO1inczpE6Owixeel3ShkjhYtGfA==}
 
-  '@volar/code-gen@0.38.9':
-    resolution: {integrity: sha512-n6LClucfA+37rQeskvh9vDoZV1VvCVNy++MAPKj2dT4FT+Fbmty/SDQqnsEBtdEe6E3OQctFvA/IcKsx3Mns0A==}
-
   '@volar/language-core@1.11.1':
     resolution: {integrity: sha512-dOcNn3i9GgZAcJt43wuaEykSluAuOkQgzni1cuxLxTV0nJKanQztp7FxyswdRILaKH+P2XZMPRp2S4MV/pElCw==}
 
   '@volar/language-core@2.4.0':
     resolution: {integrity: sha512-FTla+khE+sYK0qJP+6hwPAAUwiNHVMph4RUXpxf/FIPKUP61NFrVZorml4mjFShnueR2y9/j8/vnh09YwVdH7A==}
 
-  '@volar/source-map@0.38.9':
-    resolution: {integrity: sha512-ba0UFoHDYry+vwKdgkWJ6xlQT+8TFtZg1zj9tSjj4PykW1JZDuM0xplMotLun4h3YOoYfY9K1huY5gvxmrNLIw==}
-
   '@volar/source-map@1.11.1':
     resolution: {integrity: sha512-hJnOnwZ4+WT5iupLRnuzbULZ42L7BWWPMmruzwtLhJfpDVoZLjNBxHDi2sY2bgZXCKlpU5XcsMFoYrsQmPhfZg==}
 
@@ -5207,30 +5088,6 @@ packages:
   '@volar/typescript@2.4.0':
     resolution: {integrity: sha512-9zx3lQWgHmVd+JRRAHUSRiEhe4TlzL7U7e6ulWXOxHH/WNYxzKwCvZD7WYWEZFdw4dHfTD9vUR0yPQO6GilCaQ==}
 
-  '@volar/vue-code-gen@0.38.9':
-    resolution: {integrity: sha512-tzj7AoarFBKl7e41MR006ncrEmNPHALuk8aG4WdDIaG387X5//5KhWC5Ff3ZfB2InGSeNT+CVUd74M0gS20rjA==}
-    deprecated: 'WARNING: This project has been renamed to @vue/language-core. Install using @vue/language-core instead.'
-
-  '@volar/vue-typescript@0.38.9':
-    resolution: {integrity: sha512-iJMQGU91ADi98u8V1vXd2UBmELDAaeSP0ZJaFjwosClQdKlJQYc6MlxxKfXBZisHqfbhdtrGRyaryulnYtliZw==}
-    deprecated: 'WARNING: This project has been renamed to @vue/typescript. Install using @vue/typescript instead.'
-
-  '@vue/babel-helper-vue-transform-on@1.2.5':
-    resolution: {integrity: sha512-lOz4t39ZdmU4DJAa2hwPYmKc8EsuGa2U0L9KaZaOJUt0UwQNjNA3AZTq6uEivhOKhhG1Wvy96SvYBoFmCg3uuw==}
-
-  '@vue/babel-plugin-jsx@1.2.5':
-    resolution: {integrity: sha512-zTrNmOd4939H9KsRIGmmzn3q2zvv1mjxkYZHgqHZgDrXz5B1Q3WyGEjO2f+JrmKghvl1JIRcvo63LgM1kH5zFg==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    peerDependenciesMeta:
-      '@babel/core':
-        optional: true
-
-  '@vue/babel-plugin-resolve-type@1.2.5':
-    resolution: {integrity: sha512-U/ibkQrf5sx0XXRnUZD1mo5F7PkpKyTbfXM3a3rC4YnUz6crHEz9Jg09jzzL6QYlXNto/9CePdOg/c87O4Nlfg==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
   '@vue/cli-overlay@5.0.8':
     resolution: {integrity: sha512-KmtievE/B4kcXp6SuM2gzsnSd8WebkQpg3XaB6GmFh1BJGRqa1UiW9up7L/Q67uOdTigHxr5Ar2lZms4RcDjwQ==}
 
@@ -5376,14 +5233,6 @@ packages:
       '@vue/server-renderer':
         optional: true
 
-  '@vue/tsconfig@0.1.3':
-    resolution: {integrity: sha512-kQVsh8yyWPvHpb8gIc9l/HIDiiVUy1amynLNpCy8p+FoCiZXCo6fQos5/097MmnNZc9AtseDsCrfkhqCrJ8Olg==}
-    peerDependencies:
-      '@types/node': '*'
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
-
   '@vue/tsconfig@0.4.0':
     resolution: {integrity: sha512-CPuIReonid9+zOG/CGTT05FXrPYATEqoDGNrEaqS4hwcw5BUNM2FguC0mOwJD4Jr16UpRVl9N0pY3P+srIbqmg==}
 
@@ -5592,9 +5441,6 @@ packages:
       mem-fs-editor:
         optional: true
 
-  '@zeit/schemas@2.6.0':
-    resolution: {integrity: sha512-uUrgZ8AxS+Lio0fZKAipJjAh415JyrOZowliZAzmnJSsf7piVL5w+G0+gFJ0KSu3QRhvui/7zuvpLz03YjXAhg==}
-
   '@zip.js/zip.js@2.7.48':
     resolution: {integrity: sha512-J7cliimZ2snAbr0IhLx2U8BwfA1pKucahKzTpFtYq4hEgKxwvFJcIjCIVNPwQpfVab7iVP+AKmoH1gidBlyhiQ==}
     engines: {bun: '>=0.7.0', deno: '>=1.0.0', node: '>=16.5.0'}
@@ -5884,9 +5730,6 @@ packages:
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
     deprecated: This package is no longer supported.
 
-  arg@2.0.0:
-    resolution: {integrity: sha512-XxNTUzKnz1ctK3ZIcI2XUPlD96wbHP2nGqkPKpvk/HNRlPveYrXIVSTk9m3LcqOgDPg3B1nMvdV/K8wZd7PG4w==}
-
   arg@5.0.2:
     resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
 
@@ -6480,10 +6323,6 @@ packages:
     resolution: {integrity: sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==}
     engines: {node: '>=0.10.0'}
 
-  chalk@2.4.1:
-    resolution: {integrity: sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==}
-    engines: {node: '>=4'}
-
   chalk@2.4.2:
     resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
     engines: {node: '>=4'}
@@ -6843,10 +6682,6 @@ packages:
     resolution: {integrity: sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==}
     engines: {node: '>= 0.6'}
 
-  compression@1.7.3:
-    resolution: {integrity: sha512-HSjyBG5N1Nnz7tF2+O7A9XUhyjru71/fwgNb7oIsEVHR0WShfs2tIS/EySLgiTe98aOK18YDlMXpzjCXY/n9mg==}
-    engines: {node: '>= 0.8.0'}
-
   compression@1.7.4:
     resolution: {integrity: sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==}
     engines: {node: '>= 0.8.0'}
@@ -7059,10 +6894,6 @@ packages:
   constantinople@4.0.1:
     resolution: {integrity: sha512-vCrqcSIq4//Gx74TXXCGnHpulY1dskqLTFGDmhrGxzeXL8lF8kvXv6mpNWlJj1uD4DW23D4ljAqbY4RRaaUZIw==}
 
-  content-disposition@0.5.2:
-    resolution: {integrity: sha512-kRGRZw3bLlFISDBgwTSA1TMBFN6J6GWDeubmDE3AF+3+yXL8hTWv8r5rkLbqYXY4RjPk/EzHnClI3zQf1cFmHA==}
-    engines: {node: '>= 0.6'}
-
   content-disposition@0.5.4:
     resolution: {integrity: sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==}
     engines: {node: '>= 0.6'}
@@ -7833,9 +7664,6 @@ packages:
   emoji-regex@9.2.2:
     resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
 
-  emoji-toolkit@6.6.0:
-    resolution: {integrity: sha512-pEu0kow2p1N8zCKnn/L6H0F3rWUBB3P3hVjr/O5yl1fK7N9jU4vO4G7EFapC5Y3XwZLUCY0FZbOPyTkH+4V2eQ==}
-
   emoji-toolkit@8.0.0:
     resolution: {integrity: sha512-Vz8YIqQJsQ+QZ4yuKMMzliXceayqfWbNjb6bST+vm77QAhU2is3I+/PRxrNknW+q1bvHHMgjLCQXxzINWLVapg==}
 
@@ -8515,9 +8343,6 @@ packages:
   fast-levenshtein@2.0.6:
     resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
 
-  fast-url-parser@1.1.3:
-    resolution: {integrity: sha512-5jOCVXADYNuRkKFzNJ0dCCewsZiYo0dz8QNYljkOpFC6r2U4OBmKtvm/Tsuh4w1YYdDqDb31a8TVhBJ2OJKdqQ==}
-
   fastest-levenshtein@1.0.16:
     resolution: {integrity: sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==}
     engines: {node: '>= 4.9.1'}
@@ -10529,13 +10354,6 @@ packages:
     resolution: {integrity: sha512-IpSVCk9AYvLHo5ctcIXxOBpMWUe+4TKN3VPWAKUbJikkmsGp0VrSM8IttVc32D6J4WUsiPE6aEFRNmIoF/gdow==}
     engines: {node: '>= 0.10'}
 
-  less-loader@11.1.4:
-    resolution: {integrity: sha512-6/GrYaB6QcW6Vj+/9ZPgKKs6G10YZai/l/eJ4SLwbzqNTBsAqt5hSLVF47TgsiBxV1P6eAU0GYRH3YRuQU9V3A==}
-    engines: {node: '>= 14.15.0'}
-    peerDependencies:
-      less: ^3.5.0 || ^4.0.0
-      webpack: ^5.0.0
-
   less@4.2.0:
     resolution: {integrity: sha512-P3b3HJDBtSzsXUl0im2L7gTO5Ubg8mEN6G8qoTS77iXxXX4Hvu4Qj540PZDvQ8V6DmX6iXo98k7Md0Cm1PrLaA==}
     engines: {node: '>=6'}
@@ -11219,18 +11037,10 @@ packages:
     resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==}
     engines: {node: '>=8.6'}
 
-  mime-db@1.33.0:
-    resolution: {integrity: sha512-BHJ/EKruNIqJf/QahvxwQZXKygOQ256myeN/Ew+THcAa5q+PjyTTMMeNQC4DZw5AwfvelsUrA6B67NKMqXDbzQ==}
-    engines: {node: '>= 0.6'}
-
   mime-db@1.52.0:
     resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
     engines: {node: '>= 0.6'}
 
-  mime-types@2.1.18:
-    resolution: {integrity: sha512-lc/aahn+t4/SWV/qcmumYjymLsWfN3ELhpmVuUFjgsORruuZPVSwAQryq+HHGvO/SI2KVX26bx+En+zhM8g8hQ==}
-    engines: {node: '>= 0.6'}
-
   mime-types@2.1.35:
     resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
     engines: {node: '>= 0.6'}
@@ -12433,9 +12243,6 @@ packages:
     resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
     engines: {node: '>=0.10.0'}
 
-  path-is-inside@1.0.2:
-    resolution: {integrity: sha512-DUWJr3+ULp4zXmol/SZkFf3JGsS9/SIv+Y3Rt93/UjPpDpklB5f1er4O3POIbUuUJ3FXgqte2Q7SrU6zAqwk8w==}
-
   path-key@2.0.1:
     resolution: {integrity: sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==}
     engines: {node: '>=4'}
@@ -12469,9 +12276,6 @@ packages:
   path-to-regexp@1.8.0:
     resolution: {integrity: sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==}
 
-  path-to-regexp@2.2.1:
-    resolution: {integrity: sha512-gu9bD6Ta5bwGrrU8muHzVOBFFREpp2iRkVfhBJahwJ6p6Xw20SjT0MxLnwkjOibQmGSYhiUnf2FLe7k+jcFmGQ==}
-
   path-to-regexp@6.2.1:
     resolution: {integrity: sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw==}
 
@@ -13595,10 +13399,6 @@ packages:
   randombytes@2.1.0:
     resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==}
 
-  range-parser@1.2.0:
-    resolution: {integrity: sha512-kA5WQoNVo4t9lNx2kQNFCxKeBl5IbbSNBl1M/tLkw9WCn+hxNBAW5Qh8gdhs63CJnhjJ2zQWFoqPJP2sK1AV5A==}
-    engines: {node: '>= 0.6'}
-
   range-parser@1.2.1:
     resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==}
     engines: {node: '>= 0.6'}
@@ -13811,9 +13611,6 @@ packages:
     resolution: {integrity: sha512-RAM5FlZz+Lhmo7db9L298p2vHP5ZywrVXmVXpmAD9GuL5MPH6t9ROw1iA/wfHkQ76Qe7AaPF0nGuim96/IrQMQ==}
     engines: {node: '>=4'}
 
-  registry-auth-token@3.3.2:
-    resolution: {integrity: sha512-JL39c60XlzCVgNrO+qq68FoNb56w/m7JYvGR2jT5iR1xBrUA3Mfx5Twk5rqTThPmQKMWydGmq8oFtDlxfrmxnQ==}
-
   registry-auth-token@3.4.0:
     resolution: {integrity: sha512-4LM6Fw8eBQdwMYcES4yTnn2TqIasbXuwDx3um+QRs7S55aMKCBKBxvPXl2RiUjHwuJLTyYfxSpmfSAjQpcuP+A==}
 
@@ -14239,9 +14036,6 @@ packages:
   serialize-javascript@6.0.1:
     resolution: {integrity: sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==}
 
-  serve-handler@6.1.3:
-    resolution: {integrity: sha512-FosMqFBNrLyeiIDvP1zgO6YoTzFYHxLDEIavhlmQ+knB2Z7l1t+kGLHkZIDN7UVWqQAmKI3D20A6F6jo3nDd4w==}
-
   serve-index@1.9.1:
     resolution: {integrity: sha512-pXHfKNP4qujrtteMrSBb0rc8HJ9Ms/GrXwcUtUtD5s4ewDJI8bT3Cz2zTVRMKtri49pLx2e0Ya8ziP5Ya2pZZw==}
     engines: {node: '>= 0.8.0'}
@@ -14250,10 +14044,6 @@ packages:
     resolution: {integrity: sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==}
     engines: {node: '>= 0.8.0'}
 
-  serve@13.0.4:
-    resolution: {integrity: sha512-Lj8rhXmphJCRQVv5qwu0NQZ2h+0MrRyRJxDZu5y3qLH2i/XY6a0FPj/VmjMUdkJb672MBfE8hJ274PU6JzBd0Q==}
-    hasBin: true
-
   set-blocking@2.0.0:
     resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
 
@@ -15569,9 +15359,6 @@ packages:
     peerDependencies:
       browserslist: '>= 4.21.0'
 
-  update-check@1.5.2:
-    resolution: {integrity: sha512-1TrmYLuLj/5ZovwUS7fFd1jMH3NnFDN1y1A8dboedIDt7zs/zJMo6TwwlhYKkSeEwzleeiSBV5/3c9ufAQWDaQ==}
-
   update-notifier@5.1.0:
     resolution: {integrity: sha512-ItnICHbeMh9GqUy31hFPrD1kcuZ3rpxDZbf4KUDavXwS0bW5m7SLbDQpGX3UYr072cbrF5hFUs3r5tUsPwjfHw==}
     engines: {node: '>=10'}
@@ -15954,12 +15741,6 @@ packages:
     peerDependencies:
       vue: ^2.6 || ^3.2
 
-  vue-tsc@0.38.9:
-    resolution: {integrity: sha512-Yoy5phgvGqyF98Fb4mYqboR4Q149jrdcGv5kSmufXJUq++RZJ2iMVG0g6zl+v3t4ORVWkQmRpsV4x2szufZ0LQ==}
-    hasBin: true
-    peerDependencies:
-      typescript: '*'
-
   vue-tsc@1.8.25:
     resolution: {integrity: sha512-lHsRhDc/Y7LINvYhZ3pv4elflFADoEOo67vfClAfF2heVHpHmVquLSjojgCSIwzA4F0Pc4vowT/psXCYcfk+iQ==}
     hasBin: true
@@ -16612,11 +16393,6 @@ snapshots:
       '@babel/highlight': 7.22.20
       chalk: 2.4.2
 
-  '@babel/code-frame@7.24.7':
-    dependencies:
-      '@babel/highlight': 7.24.7
-      picocolors: 1.0.1
-
   '@babel/compat-data@7.23.3': {}
 
   '@babel/core@7.23.2':
@@ -16646,13 +16422,6 @@ snapshots:
       '@jridgewell/trace-mapping': 0.3.20
       jsesc: 2.5.2
 
-  '@babel/generator@7.25.6':
-    dependencies:
-      '@babel/types': 7.25.6
-      '@jridgewell/gen-mapping': 0.3.5
-      '@jridgewell/trace-mapping': 0.3.25
-      jsesc: 2.5.2
-
   '@babel/helper-annotate-as-pure@7.22.5':
     dependencies:
       '@babel/types': 7.23.0
@@ -16719,13 +16488,6 @@ snapshots:
     dependencies:
       '@babel/types': 7.23.0
 
-  '@babel/helper-module-imports@7.24.7':
-    dependencies:
-      '@babel/traverse': 7.25.6
-      '@babel/types': 7.25.6
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/helper-module-transforms@7.23.3(@babel/core@7.23.2)':
     dependencies:
       '@babel/core': 7.23.2
@@ -16741,8 +16503,6 @@ snapshots:
 
   '@babel/helper-plugin-utils@7.22.5': {}
 
-  '@babel/helper-plugin-utils@7.24.8': {}
-
   '@babel/helper-remap-async-to-generator@7.22.20(@babel/core@7.23.2)':
     dependencies:
       '@babel/core': 7.23.2
@@ -16771,11 +16531,13 @@ snapshots:
 
   '@babel/helper-string-parser@7.22.5': {}
 
-  '@babel/helper-string-parser@7.24.8': {}
+  '@babel/helper-string-parser@7.24.8':
+    optional: true
 
   '@babel/helper-validator-identifier@7.22.20': {}
 
-  '@babel/helper-validator-identifier@7.24.7': {}
+  '@babel/helper-validator-identifier@7.24.7':
+    optional: true
 
   '@babel/helper-validator-option@7.22.15': {}
 
@@ -16799,13 +16561,6 @@ snapshots:
       chalk: 2.4.2
       js-tokens: 4.0.0
 
-  '@babel/highlight@7.24.7':
-    dependencies:
-      '@babel/helper-validator-identifier': 7.24.7
-      chalk: 2.4.2
-      js-tokens: 4.0.0
-      picocolors: 1.0.1
-
   '@babel/parser@7.23.9':
     dependencies:
       '@babel/types': 7.23.0
@@ -16813,6 +16568,7 @@ snapshots:
   '@babel/parser@7.25.6':
     dependencies:
       '@babel/types': 7.25.6
+    optional: true
 
   '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.23.3(@babel/core@7.23.2)':
     dependencies:
@@ -16896,11 +16652,6 @@ snapshots:
       '@babel/core': 7.23.2
       '@babel/helper-plugin-utils': 7.22.5
 
-  '@babel/plugin-syntax-jsx@7.24.7(@babel/core@7.23.2)':
-    dependencies:
-      '@babel/core': 7.23.2
-      '@babel/helper-plugin-utils': 7.24.8
-
   '@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.23.2)':
     dependencies:
       '@babel/core': 7.23.2
@@ -17393,12 +17144,6 @@ snapshots:
       '@babel/parser': 7.23.9
       '@babel/types': 7.23.0
 
-  '@babel/template@7.25.0':
-    dependencies:
-      '@babel/code-frame': 7.24.7
-      '@babel/parser': 7.25.6
-      '@babel/types': 7.25.6
-
   '@babel/traverse@7.23.2':
     dependencies:
       '@babel/code-frame': 7.22.13
@@ -17414,18 +17159,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/traverse@7.25.6':
-    dependencies:
-      '@babel/code-frame': 7.24.7
-      '@babel/generator': 7.25.6
-      '@babel/parser': 7.25.6
-      '@babel/template': 7.25.0
-      '@babel/types': 7.25.6
-      debug: 4.3.6
-      globals: 11.12.0
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/types@7.23.0':
     dependencies:
       '@babel/helper-string-parser': 7.22.5
@@ -17437,6 +17170,7 @@ snapshots:
       '@babel/helper-string-parser': 7.24.8
       '@babel/helper-validator-identifier': 7.24.7
       to-fast-properties: 2.0.0
+    optional: true
 
   '@bcoe/v8-coverage@0.2.3': {}
 
@@ -17614,24 +17348,6 @@ snapshots:
 
   '@dialpad/dialtone-combinator@0.3.1': {}
 
-  '@dialpad/dialtone-vue@3.13.0(@dialpad/dialtone@6.35.0(react-dom@16.14.0(react@16.14.0))(react@16.14.0))(vue@3.4.15(typescript@5.4.2))':
-    dependencies:
-      '@dialpad/dialtone': 6.35.0(react-dom@16.14.0(react@16.14.0))(react@16.14.0)
-      emoji-regex: 10.3.0
-      emoji-toolkit: 6.6.0
-      tippy.js: 6.3.7
-      vue: 3.4.15(typescript@5.4.2)
-
-  '@dialpad/dialtone@6.35.0(react-dom@16.14.0(react@16.14.0))(react@16.14.0)':
-    dependencies:
-      '@docsearch/js': 3.5.2(@algolia/client-search@4.20.0)(@types/react@18.2.37)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(search-insights@2.10.0)
-    transitivePeerDependencies:
-      - '@algolia/client-search'
-      - '@types/react'
-      - react
-      - react-dom
-      - search-insights
-
   '@dialpad/postcss-responsive-variations@1.1.5(postcss@8.4.39)':
     dependencies:
       postcss: 8.4.39
@@ -18479,18 +18195,10 @@ snapshots:
       '@jridgewell/sourcemap-codec': 1.5.0
       '@jridgewell/trace-mapping': 0.3.20
 
-  '@jridgewell/gen-mapping@0.3.5':
-    dependencies:
-      '@jridgewell/set-array': 1.2.1
-      '@jridgewell/sourcemap-codec': 1.5.0
-      '@jridgewell/trace-mapping': 0.3.25
-
   '@jridgewell/resolve-uri@3.1.1': {}
 
   '@jridgewell/set-array@1.1.2': {}
 
-  '@jridgewell/set-array@1.2.1': {}
-
   '@jridgewell/source-map@0.3.5':
     dependencies:
       '@jridgewell/gen-mapping': 0.3.3
@@ -18503,11 +18211,6 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.1
       '@jridgewell/sourcemap-codec': 1.5.0
 
-  '@jridgewell/trace-mapping@0.3.25':
-    dependencies:
-      '@jridgewell/resolve-uri': 3.1.1
-      '@jridgewell/sourcemap-codec': 1.5.0
-
   '@jsonjoy.com/base64@1.1.2(tslib@2.6.2)':
     dependencies:
       tslib: 2.6.2
@@ -19594,11 +19297,6 @@ snapshots:
       '@resvg/resvg-js-win32-ia32-msvc': 2.6.0
       '@resvg/resvg-js-win32-x64-msvc': 2.6.0
 
-  '@rollup/pluginutils@4.2.1':
-    dependencies:
-      estree-walker: 2.0.2
-      picomatch: 2.3.1
-
   '@rollup/pluginutils@5.1.0(rollup@4.21.1)':
     dependencies:
       '@types/estree': 1.0.5
@@ -21321,6 +21019,7 @@ snapshots:
       typescript: 5.4.2
     transitivePeerDependencies:
       - supports-color
+    optional: true
 
   '@typescript-eslint/eslint-plugin@7.0.1(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0)(typescript@5.4.2)':
     dependencies:
@@ -21389,6 +21088,7 @@ snapshots:
       typescript: 5.4.2
     transitivePeerDependencies:
       - supports-color
+    optional: true
 
   '@typescript-eslint/type-utils@7.0.1(eslint@8.56.0)(typescript@5.4.2)':
     dependencies:
@@ -21513,27 +21213,11 @@ snapshots:
 
   '@ungap/structured-clone@1.2.0': {}
 
-  '@vitejs/plugin-vue-jsx@1.3.10':
-    dependencies:
-      '@babel/core': 7.23.2
-      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.23.2)
-      '@babel/plugin-transform-typescript': 7.23.3(@babel/core@7.23.2)
-      '@rollup/pluginutils': 4.2.1
-      '@vue/babel-plugin-jsx': 1.2.5(@babel/core@7.23.2)
-      hash-sum: 2.0.0
-    transitivePeerDependencies:
-      - supports-color
-
   '@vitejs/plugin-vue2@2.3.1(vite@5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@2.7.16)':
     dependencies:
       vite: 5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
       vue: 2.7.16
 
-  '@vitejs/plugin-vue@2.3.4(vite@5.4.2(@types/node@16.18.83)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@3.4.15(typescript@5.4.2))':
-    dependencies:
-      vite: 5.4.2(@types/node@16.18.83)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
-      vue: 3.4.15(typescript@5.4.2)
-
   '@vitejs/plugin-vue@4.5.0(vite@4.0.5(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@3.4.15(typescript@5.4.2))':
     dependencies:
       vite: 4.0.5(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
@@ -21549,6 +21233,11 @@ snapshots:
       vite: 5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
       vue: 3.4.15(typescript@5.4.2)
 
+  '@vitejs/plugin-vue@5.1.3(vite@5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@3.4.15(typescript@5.4.2))':
+    dependencies:
+      vite: 5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
+      vue: 3.4.15(typescript@5.4.2)
+
   '@vitest/expect@1.0.4':
     dependencies:
       '@vitest/spy': 1.0.4
@@ -21577,10 +21266,6 @@ snapshots:
       loupe: 2.3.7
       pretty-format: 29.7.0
 
-  '@volar/code-gen@0.38.9':
-    dependencies:
-      '@volar/source-map': 0.38.9
-
   '@volar/language-core@1.11.1':
     dependencies:
       '@volar/source-map': 1.11.1
@@ -21589,8 +21274,6 @@ snapshots:
     dependencies:
       '@volar/source-map': 2.4.0
 
-  '@volar/source-map@0.38.9': {}
-
   '@volar/source-map@1.11.1':
     dependencies:
       muggle-string: 0.3.1
@@ -21608,52 +21291,6 @@ snapshots:
       path-browserify: 1.0.1
       vscode-uri: 3.0.8
 
-  '@volar/vue-code-gen@0.38.9':
-    dependencies:
-      '@volar/code-gen': 0.38.9
-      '@volar/source-map': 0.38.9
-      '@vue/compiler-core': 3.4.15
-      '@vue/compiler-dom': 3.4.15
-      '@vue/shared': 3.4.15
-
-  '@volar/vue-typescript@0.38.9':
-    dependencies:
-      '@volar/code-gen': 0.38.9
-      '@volar/source-map': 0.38.9
-      '@volar/vue-code-gen': 0.38.9
-      '@vue/compiler-sfc': 3.4.15
-      '@vue/reactivity': 3.4.15
-
-  '@vue/babel-helper-vue-transform-on@1.2.5': {}
-
-  '@vue/babel-plugin-jsx@1.2.5(@babel/core@7.23.2)':
-    dependencies:
-      '@babel/helper-module-imports': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.8
-      '@babel/plugin-syntax-jsx': 7.24.7(@babel/core@7.23.2)
-      '@babel/template': 7.25.0
-      '@babel/traverse': 7.25.6
-      '@babel/types': 7.25.6
-      '@vue/babel-helper-vue-transform-on': 1.2.5
-      '@vue/babel-plugin-resolve-type': 1.2.5(@babel/core@7.23.2)
-      html-tags: 3.3.1
-      svg-tags: 1.0.0
-    optionalDependencies:
-      '@babel/core': 7.23.2
-    transitivePeerDependencies:
-      - supports-color
-
-  '@vue/babel-plugin-resolve-type@1.2.5(@babel/core@7.23.2)':
-    dependencies:
-      '@babel/code-frame': 7.24.7
-      '@babel/core': 7.23.2
-      '@babel/helper-module-imports': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.8
-      '@babel/parser': 7.25.6
-      '@vue/compiler-sfc': 3.5.5
-    transitivePeerDependencies:
-      - supports-color
-
   '@vue/cli-overlay@5.0.8': {}
 
   '@vue/cli-plugin-eslint@5.0.8(@swc/core@1.3.96)(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))(encoding@0.1.13)(eslint@8.56.0)':
@@ -21672,13 +21309,6 @@ snapshots:
       - uglify-js
       - webpack-cli
 
-  '@vue/cli-plugin-router@5.0.8(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(less-loader@11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96)))(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))(encoding@0.1.13)':
-    dependencies:
-      '@vue/cli-service': 5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(less-loader@11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96)))(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3)
-      '@vue/cli-shared-utils': 5.0.8(encoding@0.1.13)
-    transitivePeerDependencies:
-      - encoding
-
   '@vue/cli-plugin-router@5.0.8(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))(encoding@0.1.13)':
     dependencies:
       '@vue/cli-service': 5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3)
@@ -21686,9 +21316,9 @@ snapshots:
     transitivePeerDependencies:
       - encoding
 
-  '@vue/cli-plugin-unit-mocha@5.0.8(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(less-loader@11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96)))(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))(encoding@0.1.13)(webpack@5.89.0(@swc/core@1.3.96))':
+  '@vue/cli-plugin-unit-mocha@5.0.8(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))(encoding@0.1.13)(webpack@5.89.0(@swc/core@1.3.96))':
     dependencies:
-      '@vue/cli-service': 5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(less-loader@11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96)))(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3)
+      '@vue/cli-service': 5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3)
       '@vue/cli-shared-utils': 5.0.8(encoding@0.1.13)
       jsdom: 18.1.1
       jsdom-global: 3.0.2(jsdom@18.1.1)
@@ -21702,144 +21332,10 @@ snapshots:
       - utf-8-validate
       - webpack
 
-  '@vue/cli-plugin-vuex@5.0.8(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(less-loader@11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96)))(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))':
-    dependencies:
-      '@vue/cli-service': 5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(less-loader@11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96)))(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3)
-
   '@vue/cli-plugin-vuex@5.0.8(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))':
     dependencies:
       '@vue/cli-service': 5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3)
 
-  '@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(less-loader@11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96)))(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3)':
-    dependencies:
-      '@babel/helper-compilation-targets': 7.22.15
-      '@soda/friendly-errors-webpack-plugin': 1.8.1(webpack@5.89.0(@swc/core@1.3.96))
-      '@soda/get-current-script': 1.0.2
-      '@types/minimist': 1.2.5
-      '@vue/cli-overlay': 5.0.8
-      '@vue/cli-plugin-router': 5.0.8(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(less-loader@11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96)))(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))(encoding@0.1.13)
-      '@vue/cli-plugin-vuex': 5.0.8(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(less-loader@11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96)))(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))
-      '@vue/cli-shared-utils': 5.0.8(encoding@0.1.13)
-      '@vue/component-compiler-utils': 3.3.0(ejs@3.1.9)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)
-      '@vue/vue-loader-v15': vue-loader@15.11.1(@vue/compiler-sfc@3.5.5)(css-loader@6.8.1(webpack@5.89.0(@swc/core@1.3.96)))(ejs@3.1.9)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(webpack@5.89.0(@swc/core@1.3.96))
-      '@vue/web-component-wrapper': 1.3.0
-      acorn: 8.11.2
-      acorn-walk: 8.3.0
-      address: 1.2.2
-      autoprefixer: 10.4.16(postcss@8.4.39)
-      browserslist: 4.22.1
-      case-sensitive-paths-webpack-plugin: 2.4.0
-      cli-highlight: 2.1.11
-      clipboardy: 2.3.0
-      cliui: 7.0.4
-      copy-webpack-plugin: 9.1.0(webpack@5.89.0(@swc/core@1.3.96))
-      css-loader: 6.8.1(webpack@5.89.0(@swc/core@1.3.96))
-      css-minimizer-webpack-plugin: 3.4.1(webpack@5.89.0(@swc/core@1.3.96))
-      cssnano: 5.1.15(postcss@8.4.39)
-      debug: 4.3.6
-      default-gateway: 6.0.3
-      dotenv: 10.0.0
-      dotenv-expand: 5.1.0
-      fs-extra: 9.1.0
-      globby: 11.1.0
-      hash-sum: 2.0.0
-      html-webpack-plugin: 5.5.3(webpack@5.89.0(@swc/core@1.3.96))
-      is-file-esm: 1.0.0
-      launch-editor-middleware: 2.6.1
-      lodash.defaultsdeep: 4.6.1
-      lodash.mapvalues: 4.6.0
-      mini-css-extract-plugin: 2.7.6(webpack@5.89.0(@swc/core@1.3.96))
-      minimist: 1.2.8
-      module-alias: 2.2.3
-      portfinder: 1.0.32
-      postcss: 8.4.39
-      postcss-loader: 6.2.1(postcss@8.4.39)(webpack@5.89.0(@swc/core@1.3.96))
-      progress-webpack-plugin: 1.0.16(webpack@5.89.0(@swc/core@1.3.96))
-      ssri: 8.0.1
-      terser-webpack-plugin: 5.3.9(@swc/core@1.3.96)(webpack@5.89.0(@swc/core@1.3.96))
-      thread-loader: 3.0.4(webpack@5.89.0(@swc/core@1.3.96))
-      vue-loader: 17.3.1(@vue/compiler-sfc@3.5.5)(vue@3.4.15(typescript@5.4.2))(webpack@5.89.0(@swc/core@1.3.96))
-      vue-style-loader: 4.1.3
-      webpack: 5.89.0(@swc/core@1.3.96)
-      webpack-bundle-analyzer: 4.10.1
-      webpack-chain: 6.5.1
-      webpack-dev-server: 4.15.1(debug@4.3.6)(webpack@5.89.0(@swc/core@1.3.96))
-      webpack-merge: 5.10.0
-      webpack-virtual-modules: 0.4.6
-      whatwg-fetch: 3.6.19
-    optionalDependencies:
-      less-loader: 11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96))
-      vue-template-compiler: 2.7.16(vue@3.4.15(typescript@5.4.2))
-      webpack-sources: 3.2.3
-    transitivePeerDependencies:
-      - '@parcel/css'
-      - '@swc/core'
-      - '@vue/compiler-sfc'
-      - arc-templates
-      - atpl
-      - babel-core
-      - bracket-template
-      - bufferutil
-      - clean-css
-      - coffee-script
-      - csso
-      - dot
-      - dust
-      - dustjs-helpers
-      - dustjs-linkedin
-      - eco
-      - ect
-      - ejs
-      - encoding
-      - esbuild
-      - haml-coffee
-      - hamlet
-      - hamljs
-      - handlebars
-      - hogan.js
-      - htmling
-      - jade
-      - jazz
-      - jqtpl
-      - just
-      - liquid-node
-      - liquor
-      - lodash
-      - marko
-      - mote
-      - mustache
-      - nunjucks
-      - plates
-      - prettier
-      - pug
-      - qejs
-      - ractive
-      - razor-tmpl
-      - react
-      - react-dom
-      - slm
-      - squirrelly
-      - supports-color
-      - swig
-      - swig-templates
-      - teacup
-      - templayed
-      - then-jade
-      - then-pug
-      - tinyliquid
-      - toffee
-      - twig
-      - twing
-      - uglify-js
-      - underscore
-      - utf-8-validate
-      - vash
-      - velocityjs
-      - vue
-      - walrus
-      - webpack-cli
-      - whiskers
-
   '@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3)':
     dependencies:
       '@babel/helper-compilation-targets': 7.22.15
@@ -22001,6 +21497,7 @@ snapshots:
       entities: 4.5.0
       estree-walker: 2.0.2
       source-map-js: 1.2.0
+    optional: true
 
   '@vue/compiler-dom@3.4.15':
     dependencies:
@@ -22011,6 +21508,7 @@ snapshots:
     dependencies:
       '@vue/compiler-core': 3.5.5
       '@vue/shared': 3.5.5
+    optional: true
 
   '@vue/compiler-sfc@2.7.16':
     dependencies:
@@ -22043,6 +21541,7 @@ snapshots:
       magic-string: 0.30.11
       postcss: 8.4.45
       source-map-js: 1.2.0
+    optional: true
 
   '@vue/compiler-ssr@3.4.15':
     dependencies:
@@ -22053,6 +21552,7 @@ snapshots:
     dependencies:
       '@vue/compiler-dom': 3.5.5
       '@vue/shared': 3.5.5
+    optional: true
 
   '@vue/compiler-vue2@2.7.16':
     dependencies:
@@ -22196,7 +21696,8 @@ snapshots:
 
   '@vue/shared@3.4.15': {}
 
-  '@vue/shared@3.5.5': {}
+  '@vue/shared@3.5.5':
+    optional: true
 
   '@vue/test-utils@1.3.6(vue-template-compiler@2.7.16(vue@2.7.16))(vue@2.7.16)':
     dependencies:
@@ -22214,10 +21715,6 @@ snapshots:
     optionalDependencies:
       '@vue/server-renderer': 3.4.15(vue@3.4.15(typescript@5.4.2))
 
-  '@vue/tsconfig@0.1.3(@types/node@16.18.83)':
-    optionalDependencies:
-      '@types/node': 16.18.83
-
   '@vue/tsconfig@0.4.0': {}
 
   '@vue/web-component-wrapper@1.3.0': {}
@@ -22721,8 +22218,6 @@ snapshots:
     optionalDependencies:
       mem-fs: 4.0.0
 
-  '@zeit/schemas@2.6.0': {}
-
   '@zip.js/zip.js@2.7.48': {}
 
   '@zkochan/js-yaml@0.0.6':
@@ -22976,8 +22471,6 @@ snapshots:
 
   are-we-there-yet@4.0.2: {}
 
-  arg@2.0.0: {}
-
   arg@5.0.2: {}
 
   argparse@1.0.10:
@@ -23169,16 +22662,6 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  autoprefixer@10.4.16(postcss@8.4.45):
-    dependencies:
-      browserslist: 4.22.1
-      caniuse-lite: 1.0.30001561
-      fraction.js: 4.3.7
-      normalize-range: 0.1.2
-      picocolors: 1.0.1
-      postcss: 8.4.45
-      postcss-value-parser: 4.2.0
-
   autoprefixer@9.8.8:
     dependencies:
       browserslist: 4.22.1
@@ -23729,12 +23212,6 @@ snapshots:
       strip-ansi: 3.0.1
       supports-color: 2.0.0
 
-  chalk@2.4.1:
-    dependencies:
-      ansi-styles: 3.2.1
-      escape-string-regexp: 1.0.5
-      supports-color: 5.5.0
-
   chalk@2.4.2:
     dependencies:
       ansi-styles: 3.2.1
@@ -24091,18 +23568,6 @@ snapshots:
     dependencies:
       mime-db: 1.52.0
 
-  compression@1.7.3:
-    dependencies:
-      accepts: 1.3.8
-      bytes: 3.0.0
-      compressible: 2.0.18
-      debug: 2.6.9
-      on-headers: 1.0.2
-      safe-buffer: 5.1.2
-      vary: 1.1.2
-    transitivePeerDependencies:
-      - supports-color
-
   compression@1.7.4:
     dependencies:
       accepts: 1.3.8
@@ -24189,8 +23654,6 @@ snapshots:
       '@babel/parser': 7.23.9
       '@babel/types': 7.23.0
 
-  content-disposition@0.5.2: {}
-
   content-disposition@0.5.4:
     dependencies:
       safe-buffer: 5.2.1
@@ -24391,10 +23854,6 @@ snapshots:
     dependencies:
       postcss: 8.4.39
 
-  css-declaration-sorter@6.4.1(postcss@8.4.45):
-    dependencies:
-      postcss: 8.4.45
-
   css-functions-list@3.2.1: {}
 
   css-has-pseudo@0.10.0:
@@ -24518,46 +23977,46 @@ snapshots:
       postcss-svgo: 5.1.0(postcss@8.4.39)
       postcss-unique-selectors: 5.1.1(postcss@8.4.39)
 
-  cssnano-preset-default@6.0.1(postcss@8.4.45):
+  cssnano-preset-default@6.0.1(postcss@8.4.39):
     dependencies:
-      css-declaration-sorter: 6.4.1(postcss@8.4.45)
-      cssnano-utils: 4.0.0(postcss@8.4.45)
-      postcss: 8.4.45
-      postcss-calc: 9.0.1(postcss@8.4.45)
-      postcss-colormin: 6.0.0(postcss@8.4.45)
-      postcss-convert-values: 6.0.0(postcss@8.4.45)
-      postcss-discard-comments: 6.0.0(postcss@8.4.45)
-      postcss-discard-duplicates: 6.0.0(postcss@8.4.45)
-      postcss-discard-empty: 6.0.0(postcss@8.4.45)
-      postcss-discard-overridden: 6.0.0(postcss@8.4.45)
-      postcss-merge-longhand: 6.0.0(postcss@8.4.45)
-      postcss-merge-rules: 6.0.1(postcss@8.4.45)
-      postcss-minify-font-values: 6.0.0(postcss@8.4.45)
-      postcss-minify-gradients: 6.0.0(postcss@8.4.45)
-      postcss-minify-params: 6.0.0(postcss@8.4.45)
-      postcss-minify-selectors: 6.0.0(postcss@8.4.45)
-      postcss-normalize-charset: 6.0.0(postcss@8.4.45)
-      postcss-normalize-display-values: 6.0.0(postcss@8.4.45)
-      postcss-normalize-positions: 6.0.0(postcss@8.4.45)
-      postcss-normalize-repeat-style: 6.0.0(postcss@8.4.45)
-      postcss-normalize-string: 6.0.0(postcss@8.4.45)
-      postcss-normalize-timing-functions: 6.0.0(postcss@8.4.45)
-      postcss-normalize-unicode: 6.0.0(postcss@8.4.45)
-      postcss-normalize-url: 6.0.0(postcss@8.4.45)
-      postcss-normalize-whitespace: 6.0.0(postcss@8.4.45)
-      postcss-ordered-values: 6.0.0(postcss@8.4.45)
-      postcss-reduce-initial: 6.0.0(postcss@8.4.45)
-      postcss-reduce-transforms: 6.0.0(postcss@8.4.45)
-      postcss-svgo: 6.0.0(postcss@8.4.45)
-      postcss-unique-selectors: 6.0.0(postcss@8.4.45)
+      css-declaration-sorter: 6.4.1(postcss@8.4.39)
+      cssnano-utils: 4.0.0(postcss@8.4.39)
+      postcss: 8.4.39
+      postcss-calc: 9.0.1(postcss@8.4.39)
+      postcss-colormin: 6.0.0(postcss@8.4.39)
+      postcss-convert-values: 6.0.0(postcss@8.4.39)
+      postcss-discard-comments: 6.0.0(postcss@8.4.39)
+      postcss-discard-duplicates: 6.0.0(postcss@8.4.39)
+      postcss-discard-empty: 6.0.0(postcss@8.4.39)
+      postcss-discard-overridden: 6.0.0(postcss@8.4.39)
+      postcss-merge-longhand: 6.0.0(postcss@8.4.39)
+      postcss-merge-rules: 6.0.1(postcss@8.4.39)
+      postcss-minify-font-values: 6.0.0(postcss@8.4.39)
+      postcss-minify-gradients: 6.0.0(postcss@8.4.39)
+      postcss-minify-params: 6.0.0(postcss@8.4.39)
+      postcss-minify-selectors: 6.0.0(postcss@8.4.39)
+      postcss-normalize-charset: 6.0.0(postcss@8.4.39)
+      postcss-normalize-display-values: 6.0.0(postcss@8.4.39)
+      postcss-normalize-positions: 6.0.0(postcss@8.4.39)
+      postcss-normalize-repeat-style: 6.0.0(postcss@8.4.39)
+      postcss-normalize-string: 6.0.0(postcss@8.4.39)
+      postcss-normalize-timing-functions: 6.0.0(postcss@8.4.39)
+      postcss-normalize-unicode: 6.0.0(postcss@8.4.39)
+      postcss-normalize-url: 6.0.0(postcss@8.4.39)
+      postcss-normalize-whitespace: 6.0.0(postcss@8.4.39)
+      postcss-ordered-values: 6.0.0(postcss@8.4.39)
+      postcss-reduce-initial: 6.0.0(postcss@8.4.39)
+      postcss-reduce-transforms: 6.0.0(postcss@8.4.39)
+      postcss-svgo: 6.0.0(postcss@8.4.39)
+      postcss-unique-selectors: 6.0.0(postcss@8.4.39)
 
   cssnano-utils@3.1.0(postcss@8.4.39):
     dependencies:
       postcss: 8.4.39
 
-  cssnano-utils@4.0.0(postcss@8.4.45):
+  cssnano-utils@4.0.0(postcss@8.4.39):
     dependencies:
-      postcss: 8.4.45
+      postcss: 8.4.39
 
   cssnano@5.1.15(postcss@8.4.39):
     dependencies:
@@ -24566,11 +24025,11 @@ snapshots:
       postcss: 8.4.39
       yaml: 1.10.2
 
-  cssnano@6.0.1(postcss@8.4.45):
+  cssnano@6.0.1(postcss@8.4.39):
     dependencies:
-      cssnano-preset-default: 6.0.1(postcss@8.4.45)
+      cssnano-preset-default: 6.0.1(postcss@8.4.39)
       lilconfig: 2.1.0
-      postcss: 8.4.45
+      postcss: 8.4.39
 
   csso@4.2.0:
     dependencies:
@@ -25014,8 +24473,6 @@ snapshots:
 
   emoji-regex@9.2.2: {}
 
-  emoji-toolkit@6.6.0: {}
-
   emoji-toolkit@8.0.0: {}
 
   emojis-list@3.0.0: {}
@@ -25945,10 +25402,6 @@ snapshots:
 
   fast-levenshtein@2.0.6: {}
 
-  fast-url-parser@1.1.3:
-    dependencies:
-      punycode: 1.4.1
-
   fastest-levenshtein@1.0.16: {}
 
   fastq@1.15.0:
@@ -26810,12 +26263,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  gulp-postcss@9.0.1(postcss@8.4.45):
+  gulp-postcss@9.0.1(postcss@8.4.39):
     dependencies:
       fancy-log: 1.3.3
       plugin-error: 1.0.1
-      postcss: 8.4.45
-      postcss-load-config: 3.1.4(postcss@8.4.45)
+      postcss: 8.4.39
+      postcss-load-config: 3.1.4(postcss@8.4.39)
       vinyl-sourcemaps-apply: 0.2.1
     transitivePeerDependencies:
       - ts-node
@@ -28434,11 +27887,6 @@ snapshots:
     dependencies:
       flush-write-stream: 1.1.1
 
-  less-loader@11.1.4(less@4.2.0)(webpack@5.89.0(@swc/core@1.3.96)):
-    dependencies:
-      less: 4.2.0
-      webpack: 5.89.0(@swc/core@1.3.96)
-
   less@4.2.0:
     dependencies:
       copy-anything: 2.0.6
@@ -29437,14 +28885,8 @@ snapshots:
       braces: 3.0.2
       picomatch: 2.3.1
 
-  mime-db@1.33.0: {}
-
   mime-db@1.52.0: {}
 
-  mime-types@2.1.18:
-    dependencies:
-      mime-db: 1.33.0
-
   mime-types@2.1.35:
     dependencies:
       mime-db: 1.52.0
@@ -29752,7 +29194,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  natural-compare-lite@1.4.0: {}
+  natural-compare-lite@1.4.0:
+    optional: true
 
   natural-compare@1.4.0: {}
 
@@ -30665,8 +30108,6 @@ snapshots:
 
   path-is-absolute@1.0.1: {}
 
-  path-is-inside@1.0.2: {}
-
   path-key@2.0.1: {}
 
   path-key@3.1.1: {}
@@ -30692,8 +30133,6 @@ snapshots:
     dependencies:
       isarray: 0.0.1
 
-  path-to-regexp@2.2.1: {}
-
   path-to-regexp@6.2.1: {}
 
   path-type@1.1.0:
@@ -30839,9 +30278,9 @@ snapshots:
       postcss-selector-parser: 6.0.13
       postcss-value-parser: 4.2.0
 
-  postcss-calc@9.0.1(postcss@8.4.45):
+  postcss-calc@9.0.1(postcss@8.4.39):
     dependencies:
-      postcss: 8.4.45
+      postcss: 8.4.39
       postcss-selector-parser: 6.0.13
       postcss-value-parser: 4.2.0
 
@@ -30899,12 +30338,12 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-colormin@6.0.0(postcss@8.4.45):
+  postcss-colormin@6.0.0(postcss@8.4.39):
     dependencies:
       browserslist: 4.22.1
       caniuse-api: 3.0.0
       colord: 2.9.3
-      postcss: 8.4.45
+      postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
   postcss-convert-values@5.1.3(postcss@8.4.39):
@@ -30913,10 +30352,10 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-convert-values@6.0.0(postcss@8.4.45):
+  postcss-convert-values@6.0.0(postcss@8.4.39):
     dependencies:
       browserslist: 4.22.1
-      postcss: 8.4.45
+      postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
   postcss-custom-media@7.0.8:
@@ -30942,33 +30381,33 @@ snapshots:
     dependencies:
       postcss: 8.4.39
 
-  postcss-discard-comments@6.0.0(postcss@8.4.45):
+  postcss-discard-comments@6.0.0(postcss@8.4.39):
     dependencies:
-      postcss: 8.4.45
+      postcss: 8.4.39
 
   postcss-discard-duplicates@5.1.0(postcss@8.4.39):
     dependencies:
       postcss: 8.4.39
 
-  postcss-discard-duplicates@6.0.0(postcss@8.4.45):
+  postcss-discard-duplicates@6.0.0(postcss@8.4.39):
     dependencies:
-      postcss: 8.4.45
+      postcss: 8.4.39
 
   postcss-discard-empty@5.1.1(postcss@8.4.39):
     dependencies:
       postcss: 8.4.39
 
-  postcss-discard-empty@6.0.0(postcss@8.4.45):
+  postcss-discard-empty@6.0.0(postcss@8.4.39):
     dependencies:
-      postcss: 8.4.45
+      postcss: 8.4.39
 
   postcss-discard-overridden@5.1.0(postcss@8.4.39):
     dependencies:
       postcss: 8.4.39
 
-  postcss-discard-overridden@6.0.0(postcss@8.4.45):
+  postcss-discard-overridden@6.0.0(postcss@8.4.39):
     dependencies:
-      postcss: 8.4.45
+      postcss: 8.4.39
 
   postcss-double-position-gradients@1.0.0:
     dependencies:
@@ -31005,7 +30444,7 @@ snapshots:
     dependencies:
       htmlparser2: 3.10.1
       postcss: 7.0.39
-      postcss-syntax: 0.36.2(postcss-html@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-jsx@0.36.4)(postcss-less@3.1.4)(postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-scss@2.1.1)(postcss@7.0.39)
+      postcss-syntax: 0.36.2(postcss-html@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-jsx@0.36.4(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-less@3.1.4)(postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-scss@2.1.1)(postcss@7.0.39)
 
   postcss-image-set-function@3.0.1:
     dependencies:
@@ -31020,7 +30459,7 @@ snapshots:
     dependencies:
       '@babel/core': 7.23.2
       postcss: 7.0.39
-      postcss-syntax: 0.36.2(postcss-html@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-jsx@0.36.4)(postcss-less@3.1.4)(postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-scss@2.1.1)(postcss@7.0.39)
+      postcss-syntax: 0.36.2(postcss-html@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-jsx@0.36.4(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-less@3.1.4)(postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-scss@2.1.1)(postcss@7.0.39)
     transitivePeerDependencies:
       - supports-color
 
@@ -31034,16 +30473,16 @@ snapshots:
     dependencies:
       postcss: 7.0.39
 
-  postcss-less@6.0.0(postcss@8.4.45):
+  postcss-less@6.0.0(postcss@8.4.39):
     dependencies:
-      postcss: 8.4.45
+      postcss: 8.4.39
 
-  postcss-load-config@3.1.4(postcss@8.4.45):
+  postcss-load-config@3.1.4(postcss@8.4.39):
     dependencies:
       lilconfig: 2.1.0
       yaml: 1.10.2
     optionalDependencies:
-      postcss: 8.4.45
+      postcss: 8.4.39
 
   postcss-load-config@4.0.1(postcss@8.4.39):
     dependencies:
@@ -31076,7 +30515,7 @@ snapshots:
   postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39):
     dependencies:
       postcss: 7.0.39
-      postcss-syntax: 0.36.2(postcss-html@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-jsx@0.36.4)(postcss-less@3.1.4)(postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-scss@2.1.1)(postcss@7.0.39)
+      postcss-syntax: 0.36.2(postcss-html@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-jsx@0.36.4(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-less@3.1.4)(postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-scss@2.1.1)(postcss@7.0.39)
       remark: 10.0.1
       unist-util-find-all-after: 1.0.5
 
@@ -31092,11 +30531,11 @@ snapshots:
       postcss-value-parser: 4.2.0
       stylehacks: 5.1.1(postcss@8.4.39)
 
-  postcss-merge-longhand@6.0.0(postcss@8.4.45):
+  postcss-merge-longhand@6.0.0(postcss@8.4.39):
     dependencies:
-      postcss: 8.4.45
+      postcss: 8.4.39
       postcss-value-parser: 4.2.0
-      stylehacks: 6.0.0(postcss@8.4.45)
+      stylehacks: 6.0.0(postcss@8.4.39)
 
   postcss-merge-rules@5.1.4(postcss@8.4.39):
     dependencies:
@@ -31106,12 +30545,12 @@ snapshots:
       postcss: 8.4.39
       postcss-selector-parser: 6.0.13
 
-  postcss-merge-rules@6.0.1(postcss@8.4.45):
+  postcss-merge-rules@6.0.1(postcss@8.4.39):
     dependencies:
       browserslist: 4.22.1
       caniuse-api: 3.0.0
-      cssnano-utils: 4.0.0(postcss@8.4.45)
-      postcss: 8.4.45
+      cssnano-utils: 4.0.0(postcss@8.4.39)
+      postcss: 8.4.39
       postcss-selector-parser: 6.0.13
 
   postcss-minify-font-values@5.1.0(postcss@8.4.39):
@@ -31119,9 +30558,9 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-minify-font-values@6.0.0(postcss@8.4.45):
+  postcss-minify-font-values@6.0.0(postcss@8.4.39):
     dependencies:
-      postcss: 8.4.45
+      postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
   postcss-minify-gradients@5.1.1(postcss@8.4.39):
@@ -31131,11 +30570,11 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-minify-gradients@6.0.0(postcss@8.4.45):
+  postcss-minify-gradients@6.0.0(postcss@8.4.39):
     dependencies:
       colord: 2.9.3
-      cssnano-utils: 4.0.0(postcss@8.4.45)
-      postcss: 8.4.45
+      cssnano-utils: 4.0.0(postcss@8.4.39)
+      postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
   postcss-minify-params@5.1.4(postcss@8.4.39):
@@ -31145,11 +30584,11 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-minify-params@6.0.0(postcss@8.4.45):
+  postcss-minify-params@6.0.0(postcss@8.4.39):
     dependencies:
       browserslist: 4.22.1
-      cssnano-utils: 4.0.0(postcss@8.4.45)
-      postcss: 8.4.45
+      cssnano-utils: 4.0.0(postcss@8.4.39)
+      postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
   postcss-minify-selectors@5.2.1(postcss@8.4.39):
@@ -31157,9 +30596,9 @@ snapshots:
       postcss: 8.4.39
       postcss-selector-parser: 6.0.13
 
-  postcss-minify-selectors@6.0.0(postcss@8.4.45):
+  postcss-minify-selectors@6.0.0(postcss@8.4.39):
     dependencies:
-      postcss: 8.4.45
+      postcss: 8.4.39
       postcss-selector-parser: 6.0.13
 
   postcss-modules-extract-imports@3.0.0(postcss@8.4.39):
@@ -31200,18 +30639,18 @@ snapshots:
     dependencies:
       postcss: 8.4.39
 
-  postcss-normalize-charset@6.0.0(postcss@8.4.45):
+  postcss-normalize-charset@6.0.0(postcss@8.4.39):
     dependencies:
-      postcss: 8.4.45
+      postcss: 8.4.39
 
   postcss-normalize-display-values@5.1.0(postcss@8.4.39):
     dependencies:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-display-values@6.0.0(postcss@8.4.45):
+  postcss-normalize-display-values@6.0.0(postcss@8.4.39):
     dependencies:
-      postcss: 8.4.45
+      postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
   postcss-normalize-positions@5.1.1(postcss@8.4.39):
@@ -31219,9 +30658,9 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-positions@6.0.0(postcss@8.4.45):
+  postcss-normalize-positions@6.0.0(postcss@8.4.39):
     dependencies:
-      postcss: 8.4.45
+      postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
   postcss-normalize-repeat-style@5.1.1(postcss@8.4.39):
@@ -31229,9 +30668,9 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-repeat-style@6.0.0(postcss@8.4.45):
+  postcss-normalize-repeat-style@6.0.0(postcss@8.4.39):
     dependencies:
-      postcss: 8.4.45
+      postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
   postcss-normalize-string@5.1.0(postcss@8.4.39):
@@ -31239,9 +30678,9 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-string@6.0.0(postcss@8.4.45):
+  postcss-normalize-string@6.0.0(postcss@8.4.39):
     dependencies:
-      postcss: 8.4.45
+      postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
   postcss-normalize-timing-functions@5.1.0(postcss@8.4.39):
@@ -31249,9 +30688,9 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-timing-functions@6.0.0(postcss@8.4.45):
+  postcss-normalize-timing-functions@6.0.0(postcss@8.4.39):
     dependencies:
-      postcss: 8.4.45
+      postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
   postcss-normalize-unicode@5.1.1(postcss@8.4.39):
@@ -31260,10 +30699,10 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-unicode@6.0.0(postcss@8.4.45):
+  postcss-normalize-unicode@6.0.0(postcss@8.4.39):
     dependencies:
       browserslist: 4.22.1
-      postcss: 8.4.45
+      postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
   postcss-normalize-url@5.1.0(postcss@8.4.39):
@@ -31272,9 +30711,9 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-url@6.0.0(postcss@8.4.45):
+  postcss-normalize-url@6.0.0(postcss@8.4.39):
     dependencies:
-      postcss: 8.4.45
+      postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
   postcss-normalize-whitespace@5.1.1(postcss@8.4.39):
@@ -31282,9 +30721,9 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-whitespace@6.0.0(postcss@8.4.45):
+  postcss-normalize-whitespace@6.0.0(postcss@8.4.39):
     dependencies:
-      postcss: 8.4.45
+      postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
   postcss-ordered-values@5.1.3(postcss@8.4.39):
@@ -31293,10 +30732,10 @@ snapshots:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-ordered-values@6.0.0(postcss@8.4.45):
+  postcss-ordered-values@6.0.0(postcss@8.4.39):
     dependencies:
-      cssnano-utils: 4.0.0(postcss@8.4.45)
-      postcss: 8.4.45
+      cssnano-utils: 4.0.0(postcss@8.4.39)
+      postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
   postcss-overflow-shorthand@2.0.0:
@@ -31369,20 +30808,20 @@ snapshots:
       caniuse-api: 3.0.0
       postcss: 8.4.39
 
-  postcss-reduce-initial@6.0.0(postcss@8.4.45):
+  postcss-reduce-initial@6.0.0(postcss@8.4.39):
     dependencies:
       browserslist: 4.22.1
       caniuse-api: 3.0.0
-      postcss: 8.4.45
+      postcss: 8.4.39
 
   postcss-reduce-transforms@5.1.0(postcss@8.4.39):
     dependencies:
       postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
-  postcss-reduce-transforms@6.0.0(postcss@8.4.45):
+  postcss-reduce-transforms@6.0.0(postcss@8.4.39):
     dependencies:
-      postcss: 8.4.45
+      postcss: 8.4.39
       postcss-value-parser: 4.2.0
 
   postcss-replace-overflow-wrap@3.0.0:
@@ -31453,9 +30892,9 @@ snapshots:
       lodash: 4.17.21
       postcss: 7.0.39
 
-  postcss-sorting@8.0.2(postcss@8.4.45):
+  postcss-sorting@8.0.2(postcss@8.4.39):
     dependencies:
-      postcss: 8.4.45
+      postcss: 8.4.39
 
   postcss-svgo@5.1.0(postcss@8.4.39):
     dependencies:
@@ -31463,13 +30902,13 @@ snapshots:
       postcss-value-parser: 4.2.0
       svgo: 2.8.0
 
-  postcss-svgo@6.0.0(postcss@8.4.45):
+  postcss-svgo@6.0.0(postcss@8.4.39):
     dependencies:
-      postcss: 8.4.45
+      postcss: 8.4.39
       postcss-value-parser: 4.2.0
       svgo: 3.0.2
 
-  postcss-syntax@0.36.2(postcss-html@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-jsx@0.36.4)(postcss-less@3.1.4)(postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-scss@2.1.1)(postcss@7.0.39):
+  postcss-syntax@0.36.2(postcss-html@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-jsx@0.36.4(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-less@3.1.4)(postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-scss@2.1.1)(postcss@7.0.39):
     dependencies:
       postcss: 7.0.39
     optionalDependencies:
@@ -31484,9 +30923,9 @@ snapshots:
       postcss: 8.4.39
       postcss-selector-parser: 6.0.13
 
-  postcss-unique-selectors@6.0.0(postcss@8.4.45):
+  postcss-unique-selectors@6.0.0(postcss@8.4.39):
     dependencies:
-      postcss: 8.4.45
+      postcss: 8.4.39
       postcss-selector-parser: 6.0.13
 
   postcss-value-parser@3.3.1: {}
@@ -31536,6 +30975,7 @@ snapshots:
       nanoid: 3.3.7
       picocolors: 1.0.1
       source-map-js: 1.2.0
+    optional: true
 
   preact@10.18.2: {}
 
@@ -31896,8 +31336,6 @@ snapshots:
     dependencies:
       safe-buffer: 5.2.1
 
-  range-parser@1.2.0: {}
-
   range-parser@1.2.1: {}
 
   raw-body@2.5.1:
@@ -32166,11 +31604,6 @@ snapshots:
       unicode-match-property-ecmascript: 2.0.0
       unicode-match-property-value-ecmascript: 2.1.0
 
-  registry-auth-token@3.3.2:
-    dependencies:
-      rc: 1.2.8
-      safe-buffer: 5.2.1
-
   registry-auth-token@3.4.0:
     dependencies:
       rc: 1.2.8
@@ -32725,17 +32158,6 @@ snapshots:
     dependencies:
       randombytes: 2.1.0
 
-  serve-handler@6.1.3:
-    dependencies:
-      bytes: 3.0.0
-      content-disposition: 0.5.2
-      fast-url-parser: 1.1.3
-      mime-types: 2.1.18
-      minimatch: 3.0.4
-      path-is-inside: 1.0.2
-      path-to-regexp: 2.2.1
-      range-parser: 1.2.0
-
   serve-index@1.9.1:
     dependencies:
       accepts: 1.3.8
@@ -32757,20 +32179,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  serve@13.0.4:
-    dependencies:
-      '@zeit/schemas': 2.6.0
-      ajv: 6.12.6
-      arg: 2.0.0
-      boxen: 5.1.2
-      chalk: 2.4.1
-      clipboardy: 2.3.0
-      compression: 1.7.3
-      serve-handler: 6.1.3
-      update-check: 1.5.2
-    transitivePeerDependencies:
-      - supports-color
-
   set-blocking@2.0.0: {}
 
   set-function-length@1.2.2:
@@ -33400,10 +32808,10 @@ snapshots:
       postcss: 8.4.39
       postcss-selector-parser: 6.0.13
 
-  stylehacks@6.0.0(postcss@8.4.45):
+  stylehacks@6.0.0(postcss@8.4.39):
     dependencies:
       browserslist: 4.22.1
-      postcss: 8.4.45
+      postcss: 8.4.39
       postcss-selector-parser: 6.0.13
 
   stylelint-config-rational-order@0.1.2:
@@ -33585,7 +32993,7 @@ snapshots:
       postcss-sass: 0.3.5
       postcss-scss: 2.1.1
       postcss-selector-parser: 3.1.2
-      postcss-syntax: 0.36.2(postcss-html@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-jsx@0.36.4)(postcss-less@3.1.4)(postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-scss@2.1.1)(postcss@7.0.39)
+      postcss-syntax: 0.36.2(postcss-html@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-jsx@0.36.4(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-less@3.1.4)(postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-scss@2.1.1)(postcss@7.0.39)
       postcss-value-parser: 3.3.1
       resolve-from: 4.0.0
       signal-exit: 3.0.7
@@ -34342,11 +33750,6 @@ snapshots:
       escalade: 3.1.1
       picocolors: 1.0.1
 
-  update-check@1.5.2:
-    dependencies:
-      registry-auth-token: 3.3.2
-      registry-url: 3.1.0
-
   update-notifier@5.1.0:
     dependencies:
       boxen: 5.1.2
@@ -34642,19 +34045,6 @@ snapshots:
       sugarss: 2.0.0
       terser: 5.24.0
 
-  vite@5.4.2(@types/node@16.18.83)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0):
-    dependencies:
-      esbuild: 0.21.5
-      postcss: 8.4.41
-      rollup: 4.21.1
-    optionalDependencies:
-      '@types/node': 16.18.83
-      fsevents: 2.3.3
-      less: 4.2.0
-      sass: 1.69.5
-      sugarss: 2.0.0
-      terser: 5.24.0
-
   vite@5.4.2(@types/node@18.18.9)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0):
     dependencies:
       esbuild: 0.21.5
@@ -34895,11 +34285,6 @@ snapshots:
     dependencies:
       vue: 3.4.15(typescript@5.4.2)
 
-  vue-tsc@0.38.9(typescript@5.4.2):
-    dependencies:
-      '@volar/vue-typescript': 0.38.9
-      typescript: 5.4.2
-
   vue-tsc@1.8.25(typescript@5.4.2)(vue@2.7.16):
     dependencies:
       '@volar/typescript': 1.11.1

From 95556c89e754a2f6658c3ad4e9895f3935930ca2 Mon Sep 17 00:00:00 2001
From: Julio Ortega <julio.ortega@dialpad.com>
Date: Thu, 26 Sep 2024 09:27:26 -0600
Subject: [PATCH 5/6] update pnpm-lock

Signed-off-by: Julio Ortega <julio.ortega@dialpad.com>
---
 pnpm-lock.yaml | 1366 +++++++++++++++++++++---------------------------
 1 file changed, 592 insertions(+), 774 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7aa2cc0eed..b055ecd44c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -106,9 +106,6 @@ importers:
       regex-combined-emojis:
         specifier: 1.6.0
         version: 1.6.0
-      stylelint:
-        specifier: 15.11.0
-        version: 15.11.0(typescript@5.4.2)
       tippy.js:
         specifier: 6.3.7
         version: 6.3.7
@@ -128,6 +125,15 @@ importers:
       '@dialpad/semantic-release-changelog-json':
         specifier: ^1.0.0
         version: 1.0.0(semantic-release@21.1.2(typescript@5.4.2))
+      '@faker-js/faker':
+        specifier: 8.4.1
+        version: 8.4.1
+      '@percy/cli':
+        specifier: 1.29.3
+        version: 1.29.3(typescript@5.4.2)
+      '@percy/storybook':
+        specifier: 6.0.2
+        version: 6.0.2(typescript@5.4.2)
       '@semantic-release/changelog':
         specifier: ^6.0.3
         version: 6.0.3(semantic-release@21.1.2(typescript@5.4.2))
@@ -137,9 +143,66 @@ importers:
       '@semantic-release/git':
         specifier: ^10.0.1
         version: 10.0.1(semantic-release@21.1.2(typescript@5.4.2))
+      '@storybook/addon-a11y':
+        specifier: 7.6.20
+        version: 7.6.20
+      '@storybook/addon-actions':
+        specifier: 7.6.20
+        version: 7.6.20
+      '@storybook/addon-docs':
+        specifier: 7.6.20
+        version: 7.6.20(@types/react@18.2.37)(encoding@0.1.13)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)
+      '@storybook/addon-essentials':
+        specifier: 7.6.20
+        version: 7.6.20(@types/react@18.2.37)(encoding@0.1.13)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)
+      '@storybook/addon-links':
+        specifier: 7.6.20
+        version: 7.6.20(react@16.14.0)
+      '@storybook/addon-mdx-gfm':
+        specifier: 7.6.20
+        version: 7.6.20
+      '@storybook/addon-viewport':
+        specifier: 7.6.20
+        version: 7.6.20
+      '@storybook/blocks':
+        specifier: 7.6.20
+        version: 7.6.20(@types/react@18.2.37)(encoding@0.1.13)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)
+      '@storybook/manager-api':
+        specifier: 7.6.20
+        version: 7.6.20(react-dom@16.14.0(react@16.14.0))(react@16.14.0)
+      '@storybook/test-runner':
+        specifier: ^0.16.0
+        version: 0.16.0(@types/node@18.18.9)(encoding@0.1.13)
+      '@storybook/testing-library':
+        specifier: ^0.2.2
+        version: 0.2.2
+      '@storybook/theming':
+        specifier: 7.6.20
+        version: 7.6.20(react-dom@16.14.0(react@16.14.0))(react@16.14.0)
+      '@vitejs/plugin-vue':
+        specifier: ^5.0.3
+        version: 5.1.3(vite@5.4.2(@types/node@18.18.9)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@3.4.15(typescript@5.4.2))
+      '@vitejs/plugin-vue2':
+        specifier: ^2.3.1
+        version: 2.3.1(vite@5.4.2(@types/node@18.18.9)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@3.4.15(typescript@5.4.2))
+      '@vue/tsconfig':
+        specifier: ^0.4.0
+        version: 0.4.0
+      axe-core:
+        specifier: ^4.7.2
+        version: 4.8.2
+      axe-playwright:
+        specifier: ^1.2.3
+        version: 1.2.3(playwright@1.42.1)
+      c8:
+        specifier: ^8.0.0
+        version: 8.0.1
       concurrently:
         specifier: ^8.2.2
         version: 8.2.2
+      del:
+        specifier: ^6.1.1
+        version: 6.1.1
       eslint:
         specifier: ^8.55.0
         version: 8.56.0
@@ -154,7 +217,7 @@ importers:
         version: 2.29.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0)
       eslint-plugin-jest:
         specifier: ^25.2.2
-        version: 25.7.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0)(typescript@5.4.2)
+        version: 25.7.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0)(jest@29.7.0(@types/node@18.18.9))(typescript@5.4.2)
       eslint-plugin-node:
         specifier: ^11.1.0
         version: 11.1.0(eslint@8.56.0)
@@ -176,33 +239,63 @@ importers:
       eslint-plugin-vuejs-accessibility:
         specifier: ^2.1.0
         version: 2.2.0(eslint@8.56.0)
+      glob:
+        specifier: ^10.3.10
+        version: 10.4.5
       gulp:
         specifier: ^4.0.2
         version: 4.0.2
+      gulp-rename:
+        specifier: ^2.0.0
+        version: 2.0.0
+      gulp-replace:
+        specifier: ^1.1.4
+        version: 1.1.4
+      gulp-svgmin:
+        specifier: ^4.1.0
+        version: 4.1.0
       http-server:
         specifier: ^14.1.1
         version: 14.1.1
       husky:
         specifier: ^8.0.3
         version: 8.0.3
+      jsdom:
+        specifier: ^24.0.0
+        version: 24.0.0
       lesshint:
         specifier: ^6.3.7
         version: 6.3.7
       lint-staged:
         specifier: ^15.2.0
         version: 15.2.0
+      macos-release:
+        specifier: ^3.2.0
+        version: 3.2.0
       markdownlint:
         specifier: ^0.32.1
         version: 0.32.1
       markdownlint-cli:
         specifier: ^0.35.0
         version: 0.35.0
+      npm-run-all:
+        specifier: ^4.1.5
+        version: 4.1.5
+      null-loader:
+        specifier: ^4.0.1
+        version: 4.0.1(webpack@5.89.0(@swc/core@1.3.96))
       nx:
-        specifier: ^17.2.1
-        version: 17.2.1(@swc/core@1.3.96)
+        specifier: 19.8.0
+        version: 19.8.0(@swc/core@1.3.96)
       playwright:
         specifier: ^1.42.1
         version: 1.42.1
+      react:
+        specifier: ^16.13.1
+        version: 16.14.0
+      react-dom:
+        specifier: ^16.13.1
+        version: 16.14.0(react@16.14.0)
       semantic-release:
         specifier: ^21.0.6
         version: 21.1.2(typescript@5.4.2)
@@ -212,6 +305,21 @@ importers:
       semantic-release-plus:
         specifier: ^20.0.0
         version: 20.0.0(encoding@0.1.13)(semantic-release@21.1.2(typescript@5.4.2))
+      source-map-support:
+        specifier: ^0.5.21
+        version: 0.5.21
+      storybook:
+        specifier: 7.6.20
+        version: 7.6.20(encoding@0.1.13)
+      storybook-dark-mode:
+        specifier: ^3.0.3
+        version: 3.0.3(@types/react@18.2.37)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)
+      string-hash:
+        specifier: ^1.1.3
+        version: 1.1.3
+      stylelint:
+        specifier: ^15.11.0
+        version: 15.11.0(typescript@5.4.2)
       stylelint-config-rational-order:
         specifier: ^0.1.2
         version: 0.1.2
@@ -227,39 +335,56 @@ importers:
       stylelint-no-px:
         specifier: ^1.0.1
         version: 1.0.1(stylelint@15.11.0(typescript@5.4.2))
+      tinycolor2:
+        specifier: ^1.6.0
+        version: 1.6.0
+      typedoc:
+        specifier: ^0.25.2
+        version: 0.25.3(typescript@5.4.2)
+      typedoc-plugin-markdown:
+        specifier: ^3.16.0
+        version: 3.17.1(typedoc@0.25.3(typescript@5.4.2))
+      typescript:
+        specifier: ^5.2
+        version: 5.4.2
       vite:
         specifier: ^5.4.2
         version: 5.4.2(@types/node@18.18.9)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
+      vite-bundle-visualizer:
+        specifier: ^1.0.1
+        version: 1.0.1(rollup@4.21.1)
+      vite-plugin-dts:
+        specifier: ^4.0.3
+        version: 4.0.3(@types/node@18.18.9)(rollup@4.21.1)(typescript@5.4.2)(vite@5.4.2(@types/node@18.18.9)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))
       vitest:
         specifier: ^1.0.4
         version: 1.0.4(@types/node@18.18.9)(jsdom@24.0.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
       vue-docgen-api:
         specifier: ^4.75.0
         version: 4.75.0(vue@3.4.15(typescript@5.4.2))
+      vue-template-compiler:
+        specifier: ^2.7.16
+        version: 2.7.16(vue@3.4.15(typescript@5.4.2))
       wait-on:
         specifier: ^7.2.0
         version: 7.2.0
+      yo:
+        specifier: ^5.0.0
+        version: 5.0.0(@yeoman/types@1.1.2(@types/inquirer@9.0.7)(mem-fs@4.0.0))(mem-fs@4.0.0)
 
   apps/dialtone-documentation:
-    dependencies:
-      '@dialpad/dialtone':
-        specifier: workspace:*
-        version: link:../..
+    devDependencies:
       '@dialpad/dialtone-css':
         specifier: workspace:*
         version: link:../../packages/dialtone-css
       '@dialpad/dialtone-icons':
         specifier: workspace:*
         version: link:../../packages/dialtone-icons
-    devDependencies:
-      '@dialpad/dialtone-combinator':
-        specifier: ^0.3.1
-        version: 0.3.1
       '@dialpad/dialtone-tokens':
         specifier: workspace:*
         version: link:../../packages/dialtone-tokens
       '@dialpad/dialtone-vue':
-        specifier: workspace:*
+        specifier: workspace:^3
         version: link:../../packages/dialtone-vue3
       '@dialpad/postcss-responsive-variations':
         specifier: ^1.1.5
@@ -315,9 +440,6 @@ importers:
       markdown-it-anchor:
         specifier: ^8.6.7
         version: 8.6.7(@types/markdown-it@12.2.3)(markdown-it@13.0.2)
-      npm-run-all:
-        specifier: ^4.1.5
-        version: 4.1.5
       prettier:
         specifier: 3.3.2
         version: 3.3.2
@@ -347,7 +469,7 @@ importers:
     dependencies:
       yeoman-generator:
         specifier: ^5.7.0
-        version: 5.10.0(encoding@0.1.13)
+        version: 5.10.0(encoding@0.1.13)(mem-fs@4.0.0)
 
   packages/combinator:
     dependencies:
@@ -499,84 +621,27 @@ importers:
 
   packages/dialtone-icons:
     devDependencies:
-      del:
-        specifier: ^6.1.1
-        version: 6.1.1
-      glob:
-        specifier: ^10.3.10
-        version: 10.4.5
-      gulp:
-        specifier: ^4.0.2
-        version: 4.0.2
       gulp-json-format:
         specifier: ^2.0.0
         version: 2.0.0
-      gulp-rename:
-        specifier: ^2.0.0
-        version: 2.0.0
-      gulp-replace:
-        specifier: ^1.1.3
-        version: 1.1.4
-      gulp-svgmin:
-        specifier: ^4.1.0
-        version: 4.1.0
       lodash:
         specifier: ^4.17.21
         version: 4.17.21
 
   packages/dialtone-icons/vue2:
     devDependencies:
-      '@vitejs/plugin-vue2':
-        specifier: ^2.3.1
-        version: 2.3.1(vite@5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@2.7.16)
-      '@vue/tsconfig':
-        specifier: ^0.4.0
-        version: 0.4.0
-      glob:
-        specifier: ^10.3.10
-        version: 10.4.5
-      npm-run-all:
-        specifier: ^4.1.5
-        version: 4.1.5
-      vite:
-        specifier: ^5.4.2
-        version: 5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
       vue:
         specifier: ^2.7.16
         version: 2.7.16
-      vue-template-compiler:
-        specifier: ^2.7.16
-        version: 2.7.16(vue@2.7.16)
-      vue-tsc:
-        specifier: ^1.8.25
-        version: 1.8.25(typescript@5.4.2)(vue@2.7.16)
 
   packages/dialtone-icons/vue3:
     devDependencies:
-      '@vitejs/plugin-vue':
-        specifier: ^5.0.3
-        version: 5.0.4(vite@5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@3.4.15(typescript@5.4.2))
       '@vue/compiler-sfc':
         specifier: ^3.4.15
         version: 3.4.15
-      '@vue/tsconfig':
-        specifier: ^0.4.0
-        version: 0.4.0
-      glob:
-        specifier: ^10.3.10
-        version: 10.4.5
-      npm-run-all:
-        specifier: ^4.1.5
-        version: 4.1.5
-      vite:
-        specifier: ^5.4.2
-        version: 5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
       vue:
         specifier: ^3.4.15
         version: 3.4.15(typescript@5.4.2)
-      vue-tsc:
-        specifier: ^1.8.25
-        version: 1.8.25(typescript@5.4.2)(vue@3.4.15(typescript@5.4.2))
 
   packages/dialtone-tokens:
     devDependencies:
@@ -610,18 +675,9 @@ importers:
       style-dictionary:
         specifier: ^4.1.0
         version: 4.1.0
-      tinycolor2:
-        specifier: ^1.6.0
-        version: 1.6.0
       tsx:
         specifier: ^4.19.0
         version: 4.19.0
-      typescript:
-        specifier: ^5.1.6
-        version: 5.4.2
-      vite-plugin-dts:
-        specifier: ^4.0.3
-        version: 4.0.3(@types/node@20.9.0)(rollup@4.21.1)(typescript@5.4.2)(vite@5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))
 
   packages/dialtone-vue2:
     dependencies:
@@ -722,144 +778,18 @@ importers:
       '@dialpad/generator-dialtone':
         specifier: workspace:*
         version: link:../../generator-dialtone
-      '@faker-js/faker':
-        specifier: 8.4.1
-        version: 8.4.1
-      '@percy/cli':
-        specifier: 1.28.2
-        version: 1.28.2(typescript@5.4.2)
-      '@percy/storybook':
-        specifier: 5.0.3
-        version: 5.0.3(typescript@5.4.2)
-      '@storybook/addon-a11y':
-        specifier: 7.6.20
-        version: 7.6.20
-      '@storybook/addon-actions':
-        specifier: 7.6.20
-        version: 7.6.20
-      '@storybook/addon-docs':
-        specifier: 7.6.20
-        version: 7.6.20(@types/react@18.2.37)(encoding@0.1.13)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)
-      '@storybook/addon-essentials':
-        specifier: 7.6.20
-        version: 7.6.20(@types/react@18.2.37)(encoding@0.1.13)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)
-      '@storybook/addon-links':
-        specifier: 7.6.20
-        version: 7.6.20(react@16.14.0)
-      '@storybook/addon-mdx-gfm':
-        specifier: 7.6.20
-        version: 7.6.20
-      '@storybook/addon-viewport':
-        specifier: 7.6.20
-        version: 7.6.20
-      '@storybook/blocks':
-        specifier: 7.6.20
-        version: 7.6.20(@types/react@18.2.37)(encoding@0.1.13)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)
-      '@storybook/manager-api':
-        specifier: 7.6.20
-        version: 7.6.20(react-dom@16.14.0(react@16.14.0))(react@16.14.0)
-      '@storybook/test-runner':
-        specifier: ^0.16.0
-        version: 0.16.0(@types/node@20.9.0)(encoding@0.1.13)
-      '@storybook/testing-library':
-        specifier: ^0.2.2
-        version: 0.2.2
-      '@storybook/theming':
-        specifier: 7.6.20
-        version: 7.6.20(react-dom@16.14.0(react@16.14.0))(react@16.14.0)
       '@storybook/vue':
         specifier: 7.6.20
         version: 7.6.20(@babel/core@7.23.2)(css-loader@6.8.1(webpack@5.89.0(@swc/core@1.3.96)(esbuild@0.18.20)))(encoding@0.1.13)(vue@2.7.16)
       '@storybook/vue-vite':
         specifier: 7.6.20
         version: 7.6.20(@babel/core@7.23.2)(css-loader@6.8.1(webpack@5.89.0(@swc/core@1.3.96)(esbuild@0.18.20)))(encoding@0.1.13)(typescript@5.4.2)(vite@5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@2.7.16)
-      '@vitejs/plugin-vue2':
-        specifier: ^2.3.1
-        version: 2.3.1(vite@5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@2.7.16)
       '@vue/test-utils':
         specifier: '1.3'
         version: 1.3.6(vue-template-compiler@2.7.16(vue@2.7.16))(vue@2.7.16)
-      '@vue/tsconfig':
-        specifier: ^0.4.0
-        version: 0.4.0
-      axe-core:
-        specifier: ^4.7.2
-        version: 4.8.2
-      axe-playwright:
-        specifier: ^1.2.3
-        version: 1.2.3(playwright@1.42.1)
-      c8:
-        specifier: ^8.0.0
-        version: 8.0.1
-      chai:
-        specifier: ^4.3.7
-        version: 4.3.10
-      glob:
-        specifier: ^10.3.10
-        version: 10.4.5
-      jsdom:
-        specifier: ^24.0.0
-        version: 24.0.0
-      less:
-        specifier: ^4.2.0
-        version: 4.2.0
-      macos-release:
-        specifier: ^3.2.0
-        version: 3.2.0
-      npm-run-all:
-        specifier: ^4.1.5
-        version: 4.1.5
-      null-loader:
-        specifier: ^4.0.1
-        version: 4.0.1(webpack@5.89.0(@swc/core@1.3.96)(esbuild@0.18.20))
-      react:
-        specifier: ^16.13.1
-        version: 16.14.0
-      react-dom:
-        specifier: ^16.13.1
-        version: 16.14.0(react@16.14.0)
-      sinon:
-        specifier: ^15.2.0
-        version: 15.2.0
-      source-map-support:
-        specifier: ^0.5.21
-        version: 0.5.21
-      storybook:
-        specifier: 7.6.20
-        version: 7.6.20(encoding@0.1.13)
-      storybook-dark-mode:
-        specifier: ^3.0.3
-        version: 3.0.3(@types/react@18.2.37)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)
-      string-hash:
-        specifier: ^1.1.3
-        version: 1.1.3
-      typedoc:
-        specifier: ^0.25.2
-        version: 0.25.3(typescript@5.4.2)
-      typedoc-plugin-markdown:
-        specifier: ^3.16.0
-        version: 3.17.1(typedoc@0.25.3(typescript@5.4.2))
-      vite:
-        specifier: ^5.4.2
-        version: 5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
-      vite-bundle-visualizer:
-        specifier: ^1.0.1
-        version: 1.0.1(rollup@4.21.1)
       vue:
         specifier: ^2.7.15
         version: 2.7.16
-      vue-template-compiler:
-        specifier: ^2.7.15
-        version: 2.7.16(vue@2.7.16)
-      vue-tsc:
-        specifier: ^1.8.25
-        version: 1.8.25(typescript@5.4.2)(vue@2.7.16)
-      yo:
-        specifier: ^5.0.0
-        version: 5.0.0(@yeoman/types@1.1.2(@types/inquirer@9.0.7)(mem-fs@4.0.0))(mem-fs@4.0.0)
-      yorkie:
-        specifier: ^2.0.0
-        version: 2.0.0
 
   packages/dialtone-vue3:
     dependencies:
@@ -957,141 +887,18 @@ importers:
       '@dialpad/generator-dialtone':
         specifier: workspace:*
         version: link:../../generator-dialtone
-      '@faker-js/faker':
-        specifier: 8.4.1
-        version: 8.4.1
-      '@percy/cli':
-        specifier: 1.28.2
-        version: 1.28.2(typescript@5.4.2)
-      '@percy/storybook':
-        specifier: 5.0.3
-        version: 5.0.3(typescript@5.4.2)
-      '@storybook/addon-a11y':
-        specifier: 7.6.20
-        version: 7.6.20
-      '@storybook/addon-actions':
-        specifier: 7.6.20
-        version: 7.6.20
-      '@storybook/addon-docs':
-        specifier: 7.6.20
-        version: 7.6.20(@types/react@18.2.37)(encoding@0.1.13)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)
-      '@storybook/addon-essentials':
-        specifier: 7.6.20
-        version: 7.6.20(@types/react@18.2.37)(encoding@0.1.13)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)
-      '@storybook/addon-links':
-        specifier: 7.6.20
-        version: 7.6.20(react@16.14.0)
-      '@storybook/addon-mdx-gfm':
-        specifier: 7.6.20
-        version: 7.6.20
-      '@storybook/addon-viewport':
-        specifier: 7.6.20
-        version: 7.6.20
-      '@storybook/blocks':
-        specifier: 7.6.20
-        version: 7.6.20(@types/react@18.2.37)(encoding@0.1.13)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)
-      '@storybook/manager-api':
-        specifier: 7.6.20
-        version: 7.6.20(react-dom@16.14.0(react@16.14.0))(react@16.14.0)
-      '@storybook/test-runner':
-        specifier: ^0.16.0
-        version: 0.16.0(@types/node@20.9.0)(encoding@0.1.13)
-      '@storybook/testing-library':
-        specifier: ^0.2.2
-        version: 0.2.2
-      '@storybook/theming':
-        specifier: 7.6.20
-        version: 7.6.20(react-dom@16.14.0(react@16.14.0))(react@16.14.0)
       '@storybook/vue3':
         specifier: 7.6.20
         version: 7.6.20(encoding@0.1.13)(vue@3.4.15(typescript@5.4.2))
       '@storybook/vue3-vite':
         specifier: 7.6.20
         version: 7.6.20(encoding@0.1.13)(typescript@5.4.2)(vite@5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@3.4.15(typescript@5.4.2))
-      '@vitejs/plugin-vue':
-        specifier: ^4.5.0
-        version: 4.5.0(vite@5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@3.4.15(typescript@5.4.2))
       '@vue/test-utils':
         specifier: ^2.4.0
         version: 2.4.2(@vue/server-renderer@3.4.15(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))
-      '@vue/tsconfig':
-        specifier: ^0.4.0
-        version: 0.4.0
-      axe-core:
-        specifier: ^4.7.2
-        version: 4.8.2
-      axe-playwright:
-        specifier: ^1.2.3
-        version: 1.2.3(playwright@1.42.1)
-      c8:
-        specifier: ^8.0.0
-        version: 8.0.1
-      chai:
-        specifier: ^4.3.7
-        version: 4.3.10
-      glob:
-        specifier: ^10.3.10
-        version: 10.4.5
-      jsdom:
-        specifier: ^24.0.0
-        version: 24.0.0
-      less:
-        specifier: ^4.2.0
-        version: 4.2.0
-      macos-release:
-        specifier: ^3.2.0
-        version: 3.2.0
-      npm-run-all:
-        specifier: ^4.1.5
-        version: 4.1.5
-      null-loader:
-        specifier: ^4.0.1
-        version: 4.0.1(webpack@5.89.0(@swc/core@1.3.96))
-      react:
-        specifier: ^16.13.1
-        version: 16.14.0
-      react-dom:
-        specifier: ^16.13.1
-        version: 16.14.0(react@16.14.0)
-      sinon:
-        specifier: ^15.2.0
-        version: 15.2.0
-      source-map-support:
-        specifier: ^0.5.21
-        version: 0.5.21
-      storybook:
-        specifier: 7.6.20
-        version: 7.6.20(encoding@0.1.13)
-      storybook-dark-mode:
-        specifier: ^3.0.3
-        version: 3.0.3(@types/react@18.2.37)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)
-      string-hash:
-        specifier: ^1.1.3
-        version: 1.1.3
-      typedoc:
-        specifier: ^0.25.2
-        version: 0.25.3(typescript@5.4.2)
-      typedoc-plugin-markdown:
-        specifier: ^3.16.0
-        version: 3.17.1(typedoc@0.25.3(typescript@5.4.2))
-      vite:
-        specifier: ^5.4.2
-        version: 5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
-      vite-bundle-visualizer:
-        specifier: ^1.0.1
-        version: 1.0.1(rollup@4.21.1)
       vue:
         specifier: ^3.3.4
         version: 3.4.15(typescript@5.4.2)
-      vue-tsc:
-        specifier: ^1.8.25
-        version: 1.8.25(typescript@5.4.2)(vue@3.4.15(typescript@5.4.2))
-      yo:
-        specifier: ^5.0.0
-        version: 5.0.0(@yeoman/types@1.1.2(@types/inquirer@9.0.7)(mem-fs@4.0.0))(mem-fs@4.0.0)
-      yorkie:
-        specifier: ^2.0.0
-        version: 2.0.0
 
   packages/eslint-plugin-dialtone:
     dependencies:
@@ -1102,18 +909,16 @@ importers:
         specifier: ^1.2.0
         version: 1.2.0
     devDependencies:
-      eslint-plugin-eslint-plugin:
-        specifier: ^5.2.1
-        version: 5.2.1(eslint@8.56.0)
       mocha:
         specifier: ^10.0.0
         version: 10.2.0
 
   packages/stylelint-plugin-dialtone:
-    devDependencies:
+    dependencies:
       stylelint:
-        specifier: 15.11.0
+        specifier: ^14.0.0 || ^15.0.0
         version: 15.11.0(typescript@5.4.2)
+    devDependencies:
       stylelint-test-rule-node:
         specifier: ^0.2.1
         version: 0.2.1(stylelint@15.11.0(typescript@5.4.2))
@@ -1971,9 +1776,6 @@ packages:
     resolution: {integrity: sha512-qUT8qgaypYlGPXDO5HqYdq0Q670fqAxr5AaJUo3AOzBJ6IRTcG48kXo6Z9GRVgqrL21jd6MS+fx5nu1wKM0W0w==}
     engines: {node: '>=10'}
 
-  '@dialpad/dialtone-combinator@0.3.1':
-    resolution: {integrity: sha512-6Tnt72vgL5XirVA/0wahkVk2Ayx480xgTBSgZ4Rnk6HFzzFhPg4VNmEgt55vXlk/owxqZMVRXwNc8Po5t7WnoA==}
-
   '@dialpad/postcss-responsive-variations@1.1.5':
     resolution: {integrity: sha512-vCeaoF+QKZOVPHYsenCRh/XSl1ppUmXS+XUZqRa2gXtQDe6je5qeAK2H7PIwZiNM9gMA7g6EyHs1PshCWDCl9w==}
     engines: {node: '>=12.0.0'}
@@ -2013,6 +1815,15 @@ packages:
       search-insights:
         optional: true
 
+  '@emnapi/core@1.2.0':
+    resolution: {integrity: sha512-E7Vgw78I93we4ZWdYCb4DGAwRROGkMIXk7/y87UmANR+J6qsWusmC3gLt0H+O0KOt5e6O38U8oJamgbudrES/w==}
+
+  '@emnapi/runtime@1.2.0':
+    resolution: {integrity: sha512-bV21/9LQmcQeCPEg3BDFtvwL6cwiTMksYNWQQ4KOxCZikEGalWtenoZ0wCiukJINlGCIi2KXx01g4FoH/LxpzQ==}
+
+  '@emnapi/wasi-threads@1.0.1':
+    resolution: {integrity: sha512-iIBu7mwkq4UQGeMEM8bLwNK962nXdhodeScX4slfQnRhEMMzvYivHhutCIk8uojvmASXXPC2WNEjwxFWk72Oqw==}
+
   '@emotion/use-insertion-effect-with-fallbacks@1.0.1':
     resolution: {integrity: sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==}
     peerDependencies:
@@ -2998,6 +2809,9 @@ packages:
     resolution: {integrity: sha512-bPHp6Ji8b41szTOcaP63VlnbbO5Ny6dwAATtY6JTjh5N2OLrb5Qk/Th5cRkRQhkWCt+EJsYrNB0MiL+Gpn6e3g==}
     engines: {node: '>=4'}
 
+  '@napi-rs/wasm-runtime@0.2.4':
+    resolution: {integrity: sha512-9zESzOO5aDByvhIAsOy9TbpZ0Ur2AJbUI7UT73kcUTS2mxAMHOBaa1st/jAymNoCtvrit99kkzT1FZuXVcgfIQ==}
+
   '@ndelangen/get-tarball@3.0.9':
     resolution: {integrity: sha512-9JKTEik4vq+yGosHYhZ1tiH/3WpUS0Nh0kej4Agndhox8pAdWhEx5knFVRcb/ya9knCRCs1rPxNrSXTDdfVqpA==}
 
@@ -3096,66 +2910,66 @@ packages:
     resolution: {integrity: sha512-9ApYM/3+rBt9V80aYg6tZfzj3UWdiYyCt7gJUD1VJKvWF5nwKDSICXbYIQbspFTq6TOpbsEtIC0LArB8d9PFmg==}
     engines: {node: ^16.14.0 || >=18.0.0}
 
-  '@nrwl/tao@17.2.1':
-    resolution: {integrity: sha512-u/r3w6gLxYfWjiyjFZ7RVWgcpF6GQOAK8h9mu8dqYmwiihdbsFxcA+Kac4bf+LJRXuNbJCGX2em2CMumvkkGBQ==}
+  '@nrwl/tao@19.8.0':
+    resolution: {integrity: sha512-tybyYdhHNfyBRb8SOc/SasT1iwjYkp/QibS8L3ayTvpvvzJpNr8BpuTznQWIkaIjilflmcdHl+rMiQDqwABqpg==}
     hasBin: true
 
-  '@nx/nx-darwin-arm64@17.2.1':
-    resolution: {integrity: sha512-trAguPa90wUKgGJtsh5XUIZ6Sc17wKr7kAx3RIT9vOp7wd8b7XDdPumLVfm18t86WDRKKvnkr25IlY6ww+2jRg==}
+  '@nx/nx-darwin-arm64@19.8.0':
+    resolution: {integrity: sha512-JWtBb6ndCdGE+RBIwKN85BZnX41lFGsFxnsmot71GeAj/g7Cb0PM2qcmxawoy8yLPTBGZhb+eHER3z3nDIqRog==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
 
-  '@nx/nx-darwin-x64@17.2.1':
-    resolution: {integrity: sha512-7vudbcSh5J9PQ66tV5/o1o5M38r7xW2rE+UllhijwOY2aro4leGrfwaKcSH8iapwfpAnafU/t8nP5ghONC/cyA==}
+  '@nx/nx-darwin-x64@19.8.0':
+    resolution: {integrity: sha512-NcNaqbbStBkyahLaoKFtW6nEdjCjYT5ZOmGjc6UpAx1Y3pkk/FcIOYJRCBxwuOsRRsEAyeVcHPdYrouZmV+6Yw==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
 
-  '@nx/nx-freebsd-x64@17.2.1':
-    resolution: {integrity: sha512-h7UwvCCGUiChKbuwbv9/rC6VDC/Agv4do2ClOmIa0d+hHw6GJB68mVwNLFIttaToO9CKaTi8f7wj79QQ7cyesg==}
+  '@nx/nx-freebsd-x64@19.8.0':
+    resolution: {integrity: sha512-QXHRnMW5LrpYvtmdFRL2CRgX9CWDccrs2xhQNNzcgsLgL87Wte5kjDoJJN4GQjtrmjD3Q93w67CE9lhqnpXBvQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [freebsd]
 
-  '@nx/nx-linux-arm-gnueabihf@17.2.1':
-    resolution: {integrity: sha512-BZbW36KRLvfu8VV0Tdl8ySZfQyBguTtumkDZTefhdTYV08l3Xs6InLvftnc5GVObYTW7DF4XvcSsyjFsFs+CPw==}
+  '@nx/nx-linux-arm-gnueabihf@19.8.0':
+    resolution: {integrity: sha512-VjZOLMxz0gT+0AdDygxQS0Vvi3AcEzO3y9o9WdGKKaDVUDycrFn72X+ZbvFoio1dF7S1s2TbmOlR09Bu1yTgGg==}
     engines: {node: '>= 10'}
     cpu: [arm]
     os: [linux]
 
-  '@nx/nx-linux-arm64-gnu@17.2.1':
-    resolution: {integrity: sha512-jnTg614vi9OtVCXW6BHl+UC/LgQmMziIwTzRfeIUFzmOIpJpPmLAtt+etucB0UbKh71qbLF37F7TJe9LmF3QSA==}
+  '@nx/nx-linux-arm64-gnu@19.8.0':
+    resolution: {integrity: sha512-sCSrXkSmEfDUDGLESXB3eHXECAIYz9nosFZpCggyUP1vgF/QcV40fHnV38nrFbKaVHuoaxy43RgnD+I3o6sDSw==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
-  '@nx/nx-linux-arm64-musl@17.2.1':
-    resolution: {integrity: sha512-PeqU0TZRogRqra54ZM8Arn4uLX9PlvdWcTqR95V/rTkV4j76mBy1/RCyoV+wpC6g+e3PD0iaQLAh7ZMpL5RTYg==}
+  '@nx/nx-linux-arm64-musl@19.8.0':
+    resolution: {integrity: sha512-F3xEe7NGjsVKZTVlvUiUOTmCzxteRsQH2SSsYXyAfgJ42P3eZPc9HgeLx6RByjC/NBCwc7XEECMP1FjQgQXHVw==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
-  '@nx/nx-linux-x64-gnu@17.2.1':
-    resolution: {integrity: sha512-h4CLVyKc5HtC69ViewSHXSJmgNkWncQZg9MignkTOlwHAdM/vR0ZWm2DZh5oJFibUBgJK4fGlI+EnXggMMU41A==}
+  '@nx/nx-linux-x64-gnu@19.8.0':
+    resolution: {integrity: sha512-4uYuE+LvxOFXvi9z9ueJSVrME5D383SHNCjs6jYwc9KovCsmL5oPVXRieoE4/hYI4lrjly+CrAnPZU1P7ocBiw==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
-  '@nx/nx-linux-x64-musl@17.2.1':
-    resolution: {integrity: sha512-iHqjQQTcqAf9l3zksQLZeRrH8XVlGNH9Rz/SknFp0I3Wym+GYaXomwuDENln5PXmXzrL1Fw6jfgtlxqaOU52Rw==}
+  '@nx/nx-linux-x64-musl@19.8.0':
+    resolution: {integrity: sha512-9UDEGjOvNt+m+kMBCAB7CGisSwv05Xvaq8K3NJ+xM5GPG74EkQel24mSoIJfm/6zmDkdZCiRzNN9VRjOjzOz6Q==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
-  '@nx/nx-win32-arm64-msvc@17.2.1':
-    resolution: {integrity: sha512-e/VVRNB2XEE1ywjz3RwUtxYSrElfLxNzsvIpCsObuzE+mtw6ogRlsIWpcV/fe5BOyUGQuDEFqXJTVdOMAptQ9g==}
+  '@nx/nx-win32-arm64-msvc@19.8.0':
+    resolution: {integrity: sha512-JVzm0KjyLZY5ponBukZ/b35wttW0b3LB0nqaiiHY7WKwSzo+m0UGEYHD/Yk6rKA0RRZN2wQVeIzLeWfYcZYrhA==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
 
-  '@nx/nx-win32-x64-msvc@17.2.1':
-    resolution: {integrity: sha512-fH+dJEgFMyhlUcnlOj9IYF7F+bSBrOgG5q+VLZxmSMkETvVx12OTvmML38VKWExBdPSJHjSHlrvmsxK1toadnQ==}
+  '@nx/nx-win32-x64-msvc@19.8.0':
+    resolution: {integrity: sha512-IRLhMZIInvp9okLsjnj76zaz8iaMovtLr6MHIFOOPIMsZYRhqQTArF5Os/NqEezeYYxvX6YZ5hKYe0xQO7A5LA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [win32]
@@ -3307,73 +3121,73 @@ packages:
   '@originjs/vite-plugin-commonjs@1.0.3':
     resolution: {integrity: sha512-KuEXeGPptM2lyxdIEJ4R11+5ztipHoE7hy8ClZt3PYaOVQ/pyngd2alaSrPnwyFeOW1UagRBaQ752aA1dTMdOQ==}
 
-  '@percy/cli-app@1.28.2':
-    resolution: {integrity: sha512-UhuxmBRcgeyBnzV7ixiSqUlMdcBg7LyrTtDJWEjQ36SH0jJOAVu020cGcPLNDDTmqXDU7DsDoNifxtPzXT+d5w==}
+  '@percy/cli-app@1.29.3':
+    resolution: {integrity: sha512-7yGEDFIRLMsJ6nzl6aMem9nMj5rfkxODEQIciuIcuao5ZD1x23KhuN3u4QLLwQFOFgy7h4WAePnUTCR6ZtpGCQ==}
     engines: {node: '>=14'}
 
-  '@percy/cli-build@1.28.2':
-    resolution: {integrity: sha512-VWfrgcOaN6rxSCwifQ5aJuGQDU2Nmq3lvvqZsVVSj3lBbE4KsEaxyoH2Hmm2pCOXi1DzOQ0+zHv+Ra+m4CyBvA==}
+  '@percy/cli-build@1.29.3':
+    resolution: {integrity: sha512-fvDr4mUFIG/TQmMWnzQqWi2ga57SWPzXwlh65a4/0PPRKo0dKybFhvZvhCFYhcnVWqXEVYRHM21/oUvFhgnsCw==}
     engines: {node: '>=14'}
 
-  '@percy/cli-command@1.28.2':
-    resolution: {integrity: sha512-UUa+dSpzTcXVjzvElL4wD315QYDuGrbnXObgaztyGWdufEbvLWflU4AiQZrxC5abDXQdNWQUAAizorA5dGhaCg==}
+  '@percy/cli-command@1.29.3':
+    resolution: {integrity: sha512-jSltYf97E5u4jjTaW6gLU+5T/sRBwS0RlvraE21gKa0N9SH1l5nWs4YFfsIwamYg3EnCmIrwAf0gupQcQgAuaA==}
     engines: {node: '>=14'}
     hasBin: true
 
-  '@percy/cli-config@1.28.2':
-    resolution: {integrity: sha512-O1O2n16jOm6HCzGM207/NbX+IR7ezUaQGnExi4G5SbOYqZeBIrsKpbEi/SERBfg4Kexv16LrF6NLOs75N2oaSw==}
+  '@percy/cli-config@1.29.3':
+    resolution: {integrity: sha512-lVrOqeS1ACaQp9tM4LE7joW/cuGaSJcM/182ci5D3Zr9Yz6Ik/oe1MQnIM9dqnsHmnwasuGBsICsflbVqqcXHQ==}
     engines: {node: '>=14'}
 
-  '@percy/cli-exec@1.28.2':
-    resolution: {integrity: sha512-tRvmoDJMb94XjA60a0lmN2XphzC/r70ruic+VfhFwEqDVoLY/6LxqjSXjehiSD5huXYDyPtaMeJo7oU1FxJyZg==}
+  '@percy/cli-exec@1.29.3':
+    resolution: {integrity: sha512-AfZ2hI/snahjgXHuI0bKhRLJoEOfod8Uph6fu1UdjI2r6gacgBurvJmrwZOT5yChp2i8+B99e+qFqWNUi9AI7Q==}
     engines: {node: '>=14'}
 
-  '@percy/cli-snapshot@1.28.2':
-    resolution: {integrity: sha512-Qda4MKjKxoM/TEBjl54lCXMJAmQB6ZZheE96pJzEJzlPQtlj9r/moM3etCV+res0qaSOgx9BL0DncruvAwM/4g==}
+  '@percy/cli-snapshot@1.29.3':
+    resolution: {integrity: sha512-5buoW+tSdfCu0Df7LYzOpjJlb9u+4aCTDrYlmwBcyEVUq01E39LN1kRWCYL6jU/APNB+ybUKtLr9w0RtcPDYTQ==}
     engines: {node: '>=14'}
 
-  '@percy/cli-upload@1.28.2':
-    resolution: {integrity: sha512-vzH4wRdAFGvktNlh57p4s9Qq+rT0MsiQ/kh7pDvzQ1lJ6glpCBXSiiahMtkR8AP8gMMzxYONAuV/htB/t8sFUw==}
+  '@percy/cli-upload@1.29.3':
+    resolution: {integrity: sha512-KYAtcAzE50lbZ8NTqao/GSVurESUi2iQFCJ0zRwEccxViOJy/dfb5j1i10VPlqP5glCZS+eXXY2YYoxjxVCz3w==}
     engines: {node: '>=14'}
 
-  '@percy/cli@1.28.2':
-    resolution: {integrity: sha512-hwibBu6zsjfWXIe8WFgrKizGjxkTzYcGQ4eOPcMQXfgK3yUZ24N5v8sqCOobRA/SbdD117zp2WUEkBRWCJ85gg==}
+  '@percy/cli@1.29.3':
+    resolution: {integrity: sha512-j+LEHQrrtQV0uOe1u38U6RExPl86rwof+qWtkV8cOvPwucAo0DmeVfperLhZFIU/qrZjA9lHkDdYHZyzRndOBw==}
     engines: {node: '>=14'}
     hasBin: true
 
-  '@percy/client@1.28.2':
-    resolution: {integrity: sha512-UoQ4WY8zJhwv/7vKJS+1vbeu/T7YckSmOp/moCoAnHY6QOIXYs7EGkNyeEw5iXoQYzMw6KkkLYPC7YC0rt5pSg==}
+  '@percy/client@1.29.3':
+    resolution: {integrity: sha512-BTP/wfgs2/Hjj650tGmp+jkATEIOdNNZFZSRWPXGXF+PFG4zK5jTejBEZlBl3NUqhwMqtfLX/uyvsfKFaWfYDA==}
     engines: {node: '>=14'}
 
-  '@percy/config@1.28.2':
-    resolution: {integrity: sha512-Q9NoenDuhRiY+eBGrw8FJmmU8hErTsjBxccUOvrfn0A4JXRvcFHitvrh85rXG/HhyT4bcoB9O93QhV6F9KTq7A==}
+  '@percy/config@1.29.3':
+    resolution: {integrity: sha512-Jk79XGpiCNI7gmdCoWkn5V7HVa6FFfcYvFg3H1OMd2BqZEDKkPq9bbk0e4AZ93xc2BOjmYWHHj69w7VCu1peug==}
     engines: {node: '>=14'}
 
-  '@percy/core@1.28.2':
-    resolution: {integrity: sha512-7JkZrsLoHDD2bkhN4u5T/+0sC0UT73Lv1qF3lIMLu+Qjt1BhyKdnitbOnjFlrVOwqC5uNgr7/gvcULLVbJga8Q==}
+  '@percy/core@1.29.3':
+    resolution: {integrity: sha512-5RwQyezq/i4fqSMeoKJole/kZ7n7lABITS6py2e9een6svNFRKI8VqWBlMuFsL50Z5mUcbSJDhIl8O8NbIpdwQ==}
     engines: {node: '>=14'}
 
-  '@percy/dom@1.28.2':
-    resolution: {integrity: sha512-bUU38EMowO+y+pnLzl0naikv0pVQvcrkrBm7K7eVGUt6orRTqr5Tr8bMV7Ooac4mlMwaZvCkAH7gPhiDAONUmw==}
+  '@percy/dom@1.29.3':
+    resolution: {integrity: sha512-wz5PV5IW/ooYTmeiq4qFDWyZrVoyp4x+cOQ4ndYStDMkiFMnN5zvvqJlSsUOJ9/YKh/BeMn+ed8hlfKOWW3zEQ==}
 
-  '@percy/env@1.28.2':
-    resolution: {integrity: sha512-40UhiL5MylFN39pzzoyDKgult2ZmSbuc3ADrNGBx9zyMdFEoTLZg5BcFZoSUHHjPboe2jYZFYrRqoXxix++OfA==}
+  '@percy/env@1.29.3':
+    resolution: {integrity: sha512-DwWsnrGWsBQkIuNvw//CNQpyd5LY2rzc6wqB/2GMpVf4iuzKvm5ND55GX8j0FYhf0kJan0aS/+mDKEgZfea1LA==}
     engines: {node: '>=14'}
 
-  '@percy/logger@1.28.2':
-    resolution: {integrity: sha512-ZF1iDjY9oBL+4WEqGuJ4JJaUdyUqGhdJtS+qDV8iqrQ6VngWBpO3lg0Uhy8RIkqUSLGKbwVbnxkfvA5kXx+yAw==}
+  '@percy/logger@1.29.3':
+    resolution: {integrity: sha512-nNslGmznG5ChKHFtPtRFcjAeuG/Zhr1OgRapLLeikyXyxy8bT929kUgBuGh4ADhp95iovcN7zlHQmpuwbOPQ2Q==}
     engines: {node: '>=14'}
 
-  '@percy/sdk-utils@1.28.2':
-    resolution: {integrity: sha512-cMFz8AjZ2KunN0dVwzA+Wosk4B+6G9dUkh2YPhYvqs0KLcCyYs3s91IzOQmtBOYwAUVja/W/u6XmBHw0jaxg0A==}
+  '@percy/sdk-utils@1.29.3':
+    resolution: {integrity: sha512-ITUZinf+50O/Izs/X3HaRxnZvLv4Fw8lV2mSqVD/500au6bApUNeMHnoaAHOC57FgyUOUaYldiAAXNtE/zANtw==}
     engines: {node: '>=14'}
 
-  '@percy/storybook@5.0.3':
-    resolution: {integrity: sha512-Q1pi1x6Po89eejM2Z2ahKJ0M+qWgWHNcFmQ0Mu7mRrtafv41khwwZxQXrthcGK2R3fbbfYBXPANbJhALyNiZuw==}
+  '@percy/storybook@6.0.2':
+    resolution: {integrity: sha512-4NkElEIlbuo0HjS6sKiC19JzJwXOh996gwxu4p5QCx9pchnac30KlYAsJoYzu/2n+QrNBNEAe1atmC0eN9ldEg==}
     hasBin: true
 
-  '@percy/webdriver-utils@1.28.2':
-    resolution: {integrity: sha512-bD0UoR1/69xcsL2mhvZ4xQKhWJYbqUJUFMiNr8xqR55Z4dArbeN9S2ZYU6aMVRemuKyn7ki0ttNFHq0z2GFvGg==}
+  '@percy/webdriver-utils@1.29.3':
+    resolution: {integrity: sha512-+0qyRGKLfYdtzhc9U1m7RCBk6c3+aGy8DPLM6FdlvCrX5+Z93PLLMpoQcXid9cUFFTGAnxOKtYUWS2kc6Q32mg==}
     engines: {node: '>=14'}
 
   '@pkgjs/parseargs@0.11.0':
@@ -4060,21 +3874,12 @@ packages:
     resolution: {integrity: sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==}
     engines: {node: '>=18'}
 
-  '@sinonjs/commons@2.0.0':
-    resolution: {integrity: sha512-uLa0j859mMrg2slwQYdO/AkrOfmH+X6LTVmNTS9CqexuE2IvVORIkSpJLqePAbEnKJ77aMmCwr1NUZ57120Xcg==}
-
   '@sinonjs/commons@3.0.0':
     resolution: {integrity: sha512-jXBtWAF4vmdNmZgD5FoKsVLv3rPgDnLgPbU84LIJ3otV44vJlDRokVng5v8NFJdCf/da9legHcKaRuZs4L7faA==}
 
   '@sinonjs/fake-timers@10.3.0':
     resolution: {integrity: sha512-V4BG07kuYSUkTCSBHG8G8TNhM+F19jXFWnQtzj+we8DrkpSBCee9Z3Ms8yiGer/dlmhe35/Xdgyo3/0rQKg7YA==}
 
-  '@sinonjs/samsam@8.0.0':
-    resolution: {integrity: sha512-Bp8KUVlLp8ibJZrnvq2foVhP0IVX2CIprMJPK0vqGqgrDa0OHVKeZyBykqskkrdxV6yKBPmGasO8LVjAKR3Gew==}
-
-  '@sinonjs/text-encoding@0.7.2':
-    resolution: {integrity: sha512-sXXKG+uL9IrKqViTtao2Ws6dy0znu9sOaP1di/jKGW1M6VssO8vlpXCQcpZ+jisQ1tTFAC5Jo/EOzFbggBagFQ==}
-
   '@soda/friendly-errors-webpack-plugin@1.8.1':
     resolution: {integrity: sha512-h2ooWqP8XuFqTXT+NyAFbrArzfQA7R6HTezADrvD9Re8fxMLTPPniLdqVTdDaO0eIoLaAwKT+d6w+5GeTk7Vbg==}
     engines: {node: '>=8.0.0'}
@@ -4605,6 +4410,9 @@ packages:
     resolution: {integrity: sha512-c8nj8BaOExmZKO2DXhDfegyhSGcG9E/mPN3U13L+/PsoWm1uaGiHHjxqSHQiasDBQwDA3aHuw9+9spYAP1qvvg==}
     engines: {node: ^16.14.0 || >=18.0.0}
 
+  '@tybys/wasm-util@0.9.0':
+    resolution: {integrity: sha512-6+7nlbMVX/PVDCwaIQ8nTOPveOcFLSt8GcXdx8hD0bt39uWxYT88uXzqTd4fTvqta7oeUJqudepapKNt2DYJFw==}
+
   '@types/argparse@1.0.38':
     resolution: {integrity: sha512-ebDJ9b0e702Yr7pWgB0jzm+CX4Srzz8RcXtLJDJB+BSccqMa36uyH/zUsSYao5+BD1ytv3k3rPYCq4mAE1hsXA==}
 
@@ -5041,13 +4849,6 @@ packages:
       vite: ^4.0.0 || ^5.0.0
       vue: ^3.2.25
 
-  '@vitejs/plugin-vue@5.0.4':
-    resolution: {integrity: sha512-WS3hevEszI6CEVEx28F8RjTX97k3KsrcY6kvTg7+Whm5y3oYvcqzVeGCU3hxSAn4uY2CLCkeokkGKpoctccilQ==}
-    engines: {node: ^18.0.0 || >=20.0.0}
-    peerDependencies:
-      vite: ^5.0.0
-      vue: ^3.2.25
-
   '@vitejs/plugin-vue@5.1.3':
     resolution: {integrity: sha512-3xbWsKEKXYlmX82aOHufFQVnkbMC/v8fLpWwh6hWOUrK5fbbtBh9Q/WWse27BFgSy2/e2c0fz5Scgya9h2GLhw==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -5070,21 +4871,12 @@ packages:
   '@vitest/utils@1.0.4':
     resolution: {integrity: sha512-gsswWDXxtt0QvtK/y/LWukN7sGMYmnCcv1qv05CsY6cU/Y1zpGX1QuvLs+GO1inczpE6Owixeel3ShkjhYtGfA==}
 
-  '@volar/language-core@1.11.1':
-    resolution: {integrity: sha512-dOcNn3i9GgZAcJt43wuaEykSluAuOkQgzni1cuxLxTV0nJKanQztp7FxyswdRILaKH+P2XZMPRp2S4MV/pElCw==}
-
   '@volar/language-core@2.4.0':
     resolution: {integrity: sha512-FTla+khE+sYK0qJP+6hwPAAUwiNHVMph4RUXpxf/FIPKUP61NFrVZorml4mjFShnueR2y9/j8/vnh09YwVdH7A==}
 
-  '@volar/source-map@1.11.1':
-    resolution: {integrity: sha512-hJnOnwZ4+WT5iupLRnuzbULZ42L7BWWPMmruzwtLhJfpDVoZLjNBxHDi2sY2bgZXCKlpU5XcsMFoYrsQmPhfZg==}
-
   '@volar/source-map@2.4.0':
     resolution: {integrity: sha512-2ceY8/NEZvN6F44TXw2qRP6AQsvCYhV2bxaBPWxV9HqIfkbRydSksTFObCF1DBDNBfKiZTS8G/4vqV6cvjdOIQ==}
 
-  '@volar/typescript@1.11.1':
-    resolution: {integrity: sha512-iU+t2mas/4lYierSnoFOeRFQUhAEMgsFuQxoxvwn5EdQopw43j+J27a4lt9LMInx1gLJBC6qL14WYGlgymaSMQ==}
-
   '@volar/typescript@2.4.0':
     resolution: {integrity: sha512-9zx3lQWgHmVd+JRRAHUSRiEhe4TlzL7U7e6ulWXOxHH/WNYxzKwCvZD7WYWEZFdw4dHfTD9vUR0yPQO6GilCaQ==}
 
@@ -5182,14 +4974,6 @@ packages:
   '@vue/devtools-api@6.5.1':
     resolution: {integrity: sha512-+KpckaAQyfbvshdDW5xQylLni1asvNSGme1JFs8I1+/H5pHEhqUKMEQD/qn3Nx5+/nycBq11qAEi8lk+LXI2dA==}
 
-  '@vue/language-core@1.8.25':
-    resolution: {integrity: sha512-NJk/5DnAZlpvXX8BdWmHI45bWGLViUaS3R/RMrmFSvFMSbJKuEODpM4kR0F0Ofv5SFzCWuNiMhxameWpVdQsnA==}
-    peerDependencies:
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
   '@vue/language-core@2.0.29':
     resolution: {integrity: sha512-o2qz9JPjhdoVj8D2+9bDXbaI4q2uZTHQA/dbyZT4Bj1FR9viZxDJnLcKVHfxdn6wsOzRgpqIzJEEmSSvgMvDTQ==}
     peerDependencies:
@@ -5445,8 +5229,8 @@ packages:
     resolution: {integrity: sha512-J7cliimZ2snAbr0IhLx2U8BwfA1pKucahKzTpFtYq4hEgKxwvFJcIjCIVNPwQpfVab7iVP+AKmoH1gidBlyhiQ==}
     engines: {bun: '>=0.7.0', deno: '>=1.0.0', node: '>=16.5.0'}
 
-  '@zkochan/js-yaml@0.0.6':
-    resolution: {integrity: sha512-nzvgl3VfhcELQ8LyVrYOru+UtAy1nrygk2+AGbTm8a5YcO6o8lSjAT+pfg3vJWxIoZKOUhrK6UU7xW/+00kQrg==}
+  '@zkochan/js-yaml@0.0.7':
+    resolution: {integrity: sha512-nrUSn7hzt7J6JWgWGz78ZYI8wj+gdIJdk0Ynjpp8l+trkn58Uqsf6RYrYkEK+3X18EX+TNdtJI0WxAtc+L84SQ==}
     hasBin: true
 
   JSONStream@1.3.5:
@@ -5961,6 +5745,9 @@ packages:
   axios@1.6.2:
     resolution: {integrity: sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==}
 
+  axios@1.7.7:
+    resolution: {integrity: sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==}
+
   babel-core@7.0.0-bridge.0:
     resolution: {integrity: sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg==}
     peerDependencies:
@@ -6138,6 +5925,10 @@ packages:
     resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==}
     engines: {node: '>=8'}
 
+  braces@3.0.3:
+    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
+    engines: {node: '>=8'}
+
   browser-assert@1.2.1:
     resolution: {integrity: sha512-nfulgvOR6S4gt9UKCeGJOuSGBPGiFT6oQ/2UBnvTY/5aQ1PnksW72fhZkM30DzoRRv2WpwZf1vHHEr3mtuXIWQ==}
 
@@ -7595,6 +7386,10 @@ packages:
     resolution: {integrity: sha512-GopVGCpVS1UKH75VKHGuQFqS1Gusej0z4FyQkPdwjil2gNIv+LNsqBlboOzpJFZKVT95GkCyWJbBSdFEFUWI2A==}
     engines: {node: '>=12'}
 
+  dotenv-expand@11.0.6:
+    resolution: {integrity: sha512-8NHi73otpWsZGBSZwwknTXS5pqMOrk9+Ssrna8xCaxkzEpU9OTf9R5ArQGVw03//Zmk9MOwLPng9WwndvpAJ5g==}
+    engines: {node: '>=12'}
+
   dotenv-expand@5.1.0:
     resolution: {integrity: sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==}
 
@@ -7606,6 +7401,10 @@ packages:
     resolution: {integrity: sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==}
     engines: {node: '>=12'}
 
+  dotenv@16.4.5:
+    resolution: {integrity: sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==}
+    engines: {node: '>=12'}
+
   downgrade-root@1.2.2:
     resolution: {integrity: sha512-K/QnPfqybcxP6rriuM17fnaQ/zDnG0hh8ISbm9szzIqZSI4wtfaj4D5oL6WscT2xVFQ3kDISZrrgeUtd+rW8pQ==}
     engines: {node: '>=0.10.0'}
@@ -8024,12 +7823,6 @@ packages:
     peerDependencies:
       eslint: '>=4.19.1'
 
-  eslint-plugin-eslint-plugin@5.2.1:
-    resolution: {integrity: sha512-W+WergGahmRTz5yhw/+6TVqlXZkxucK0rM6KWRjona3MYx8+QJ+9KpXn3sYi1lgLduitfmT8YiAmO4RPC/mxEQ==}
-    engines: {node: ^14.17.0 || ^16.0.0 || >= 18.0.0}
-    peerDependencies:
-      eslint: '>=7.0.0'
-
   eslint-plugin-import@2.29.0:
     resolution: {integrity: sha512-QPOO5NO6Odv5lpoTkddtutccQjysJuFxoPS7fAHO+9m9udNHvTCPSAMW9zGAYj8lAIdr40I8yPCdUYrncXtrwg==}
     engines: {node: '>=4'}
@@ -8415,6 +8208,10 @@ packages:
     resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==}
     engines: {node: '>=8'}
 
+  fill-range@7.1.1:
+    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
+    engines: {node: '>=8'}
+
   filter-obj@2.0.2:
     resolution: {integrity: sha512-lO3ttPjHZRfjMcxWKb1j1eDhTFsu4meeR3lnMcnBFhk6RuLhvEiuALu2TlfL310ph4lCYYwgF/ElIjdP739tdg==}
     engines: {node: '>=8'}
@@ -8544,6 +8341,15 @@ packages:
       debug:
         optional: true
 
+  follow-redirects@1.15.9:
+    resolution: {integrity: sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+
   for-each@0.3.3:
     resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
 
@@ -8591,6 +8397,9 @@ packages:
   fromentries@1.3.2:
     resolution: {integrity: sha512-cHEpEQHUg0f8XdtZCc2ZAhrHzKzT0MrFUTcvx+hfxYu7rGMDc5SKoXFh+n4YigxsHXRzc6OrCshdR1bWH6HHyg==}
 
+  front-matter@4.0.2:
+    resolution: {integrity: sha512-I8ZuJ/qG92NWX8i5x1Y8qyj3vizhXS31OxjKDu3LKP+7/qBgfIKValiZIEwoVoJKUHlhWtYrktkxV1XsX+pPlg==}
+
   fs-constants@1.0.0:
     resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==}
 
@@ -8817,10 +8626,6 @@ packages:
     resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==}
     hasBin: true
 
-  glob@7.1.4:
-    resolution: {integrity: sha512-hkLPepehmnKk41pUGm3sYxoFs/umurYfYJCerbXEyFIWcAzvpipAgVkBqqT9RBKMGjnq6kMuyYwha6csxbiM1A==}
-    deprecated: Glob versions prior to v9 are no longer supported
-
   glob@7.1.6:
     resolution: {integrity: sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==}
     deprecated: Glob versions prior to v9 are no longer supported
@@ -9842,9 +9647,6 @@ packages:
   is-yarn-global@0.3.0:
     resolution: {integrity: sha512-VjSeb/lHmkoyd8ryPVIKvOCn4D1koMqY+vqyjjUfc3xyKtP4dYOxM44sZrnqQSzSds3xyOrUTLTC9LVCVgLngw==}
 
-  isarray@0.0.1:
-    resolution: {integrity: sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==}
-
   isarray@1.0.0:
     resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
 
@@ -10268,9 +10070,6 @@ packages:
   just-diff@6.0.2:
     resolution: {integrity: sha512-S59eriX5u3/QhMNq3v/gm8Kd0w8OS6Tz2FS1NG4blv+z0MuQcBRJyFWjdovM0Rad4/P4aUPFtnkNjMjyMlMSYA==}
 
-  just-extend@4.2.1:
-    resolution: {integrity: sha512-g3UB796vUFIY90VIv/WX3L2c8CS2MdWUww3CNrYmqza1Fg0DURc2K/O4YrnklBdQarSJ/y8JnJYDGc+1iumQjg==}
-
   keyv@3.1.0:
     resolution: {integrity: sha512-9ykJ/46SN/9KPM/sichzQ7OvXyGDYKGTaDlKMGCAlg2UK8KRy4jb0d8sFc+0Tt0YYnThq8X2RZgCg74RPxgcVA==}
 
@@ -10398,6 +10197,10 @@ packages:
   lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
 
+  lines-and-columns@2.0.3:
+    resolution: {integrity: sha512-cNOjgCnLB+FnvWWtyRTzmB3POJ+cXxTA81LoW7u8JdmhfXzriropYwpjShnz1QLLWsQwY7nIxoDmcPTwphDK9w==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
   lines-and-columns@2.0.4:
     resolution: {integrity: sha512-wM1+Z03eypVAVUCE7QdSqpVIvelbOakn1M0bPDoA4SGWPx3sNDVUiMo3L6To6WWGClB7VyXnhQ4Sn7gxiJbE6A==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -10498,9 +10301,6 @@ packages:
   lodash.flattendeep@4.4.0:
     resolution: {integrity: sha512-uHaJFihxmJcEX3kT4I23ABqKKalJ/zDrDg0lsFtc1h+3uw49SIJ5beyhx5ExVRti3AvKoOJngIj7xz3oylPdWQ==}
 
-  lodash.get@4.4.2:
-    resolution: {integrity: sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==}
-
   lodash.isfunction@3.0.9:
     resolution: {integrity: sha512-AirXNj15uRIMMPihnkInB4i3NHeb4iBtNg9WRWuK2o31S+ePwwNmDPaTL3o7dTJ+VXNZim7rFs4rxN4YU1oUJw==}
 
@@ -11037,6 +10837,10 @@ packages:
     resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==}
     engines: {node: '>=8.6'}
 
+  micromatch@4.0.8:
+    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
+    engines: {node: '>=8.6'}
+
   mime-db@1.52.0:
     resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
     engines: {node: '>= 0.6'}
@@ -11247,9 +11051,6 @@ packages:
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
-  muggle-string@0.3.1:
-    resolution: {integrity: sha512-ckmWDJjphvd/FvZawgygcUeQCxzvohjFO5RxTjj4eq8kw359gFF3E1brjfI+viLMxss5JrHTDRHZvu2/tuy0Qg==}
-
   muggle-string@0.4.1:
     resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==}
 
@@ -11335,9 +11136,6 @@ packages:
   nice-try@1.0.5:
     resolution: {integrity: sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==}
 
-  nise@5.1.5:
-    resolution: {integrity: sha512-VJuPIfUFaXNRzETTQEEItTOP8Y171ijr+JLq42wHes3DiryR8vT+1TXQW/Rx8JNUhyYYWyIvjXTU6dOhJcs9Nw==}
-
   no-case@3.0.4:
     resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==}
 
@@ -11783,11 +11581,11 @@ packages:
   nwsapi@2.2.7:
     resolution: {integrity: sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ==}
 
-  nx@17.2.1:
-    resolution: {integrity: sha512-DfjJQmdcdcgBkvNnFkN1z2VU4sweMF6WF6ZEjQ+GsFs3xglhT7KLjCvo0Q8owUSx2I28THUw7E5LAGmKzgiG/Q==}
+  nx@19.8.0:
+    resolution: {integrity: sha512-zD1ZvkfxECrd9QnvUyAUVLESmjl0bpIhB1gLcYN2BqsCkB1vkngbxIvXDorI98keOVEfHzeuwNSkufQNls1hug==}
     hasBin: true
     peerDependencies:
-      '@swc-node/register': ^1.6.7
+      '@swc-node/register': ^1.8.0
       '@swc/core': ^1.3.85
     peerDependenciesMeta:
       '@swc-node/register':
@@ -11903,6 +11701,10 @@ packages:
     resolution: {integrity: sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==}
     engines: {node: '>= 0.8.0'}
 
+  ora@5.3.0:
+    resolution: {integrity: sha512-zAKMgGXUim0Jyd6CXK9lraBnD3H5yPGBPPOkC23a2BG6hsm4Zu6OQSjQuEtV0BHDf4aKHcUFvJiGRrFuW3MG8g==}
+    engines: {node: '>=10'}
+
   ora@5.4.1:
     resolution: {integrity: sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==}
     engines: {node: '>=10'}
@@ -12124,6 +11926,9 @@ packages:
   pako@1.0.11:
     resolution: {integrity: sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==}
 
+  pako@2.1.0:
+    resolution: {integrity: sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==}
+
   param-case@3.0.4:
     resolution: {integrity: sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==}
 
@@ -12273,9 +12078,6 @@ packages:
   path-to-regexp@0.1.7:
     resolution: {integrity: sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==}
 
-  path-to-regexp@1.8.0:
-    resolution: {integrity: sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==}
-
   path-to-regexp@6.2.1:
     resolution: {integrity: sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw==}
 
@@ -14006,11 +13808,6 @@ packages:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
 
-  semver@7.5.3:
-    resolution: {integrity: sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==}
-    engines: {node: '>=10'}
-    hasBin: true
-
   semver@7.5.4:
     resolution: {integrity: sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==}
     engines: {node: '>=10'}
@@ -14123,10 +13920,6 @@ packages:
     resolution: {integrity: sha512-2A3WvXkQurhuMgORgT60r6pOWiCOO5LlEqY2ADxGBDGVYLSo5HN0uLtb68YpVpuL/Vi8mLTe7+0Dx2Fq8lLqEg==}
     engines: {node: ^16.14.0 || >=18.0.0}
 
-  sinon@15.2.0:
-    resolution: {integrity: sha512-nPS85arNqwBXaIsFCkolHjGIkFo+Oxu9vbgmBJizLAhqe6P2o3Qmj3KCUoRkfhHtvgDhZdWD3risLHAUJ8npjw==}
-    deprecated: 16.1.1
-
   sirv@2.0.3:
     resolution: {integrity: sha512-O9jm9BsID1P+0HOi81VpXPoDxYP374pkOLzACAoyUQ/3OUVndNpsz6wMnY2z+yOxzbllCKZrM+9QrWsv4THnyA==}
     engines: {node: '>= 10'}
@@ -15741,12 +15534,6 @@ packages:
     peerDependencies:
       vue: ^2.6 || ^3.2
 
-  vue-tsc@1.8.25:
-    resolution: {integrity: sha512-lHsRhDc/Y7LINvYhZ3pv4elflFADoEOo67vfClAfF2heVHpHmVquLSjojgCSIwzA4F0Pc4vowT/psXCYcfk+iQ==}
-    hasBin: true
-    peerDependencies:
-      typescript: '*'
-
   vue-tsc@2.0.29:
     resolution: {integrity: sha512-MHhsfyxO3mYShZCGYNziSbc63x7cQ5g9kvijV7dRe1TTXBRLxXyL0FnXWpUF1xII2mJ86mwYpYsUmMwkmerq7Q==}
     hasBin: true
@@ -16103,6 +15890,18 @@ packages:
       utf-8-validate:
         optional: true
 
+  ws@8.18.0:
+    resolution: {integrity: sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
   x-is-string@0.1.0:
     resolution: {integrity: sha512-GojqklwG8gpzOVEVki5KudKNoq7MbbjYZCbyWzEz7tyPA7eleiE0+ePwOWQQRb5fm86rD3S8Tc0tSFf3AOv50w==}
 
@@ -16403,10 +16202,10 @@ snapshots:
       '@babel/helper-compilation-targets': 7.22.15
       '@babel/helper-module-transforms': 7.23.3(@babel/core@7.23.2)
       '@babel/helpers': 7.23.2
-      '@babel/parser': 7.23.9
+      '@babel/parser': 7.25.6
       '@babel/template': 7.22.15
       '@babel/traverse': 7.23.2
-      '@babel/types': 7.23.0
+      '@babel/types': 7.25.6
       convert-source-map: 2.0.0
       debug: 4.3.6
       gensync: 1.0.0-beta.2
@@ -16424,11 +16223,11 @@ snapshots:
 
   '@babel/helper-annotate-as-pure@7.22.5':
     dependencies:
-      '@babel/types': 7.23.0
+      '@babel/types': 7.25.6
 
   '@babel/helper-builder-binary-assignment-operator-visitor@7.22.15':
     dependencies:
-      '@babel/types': 7.23.0
+      '@babel/types': 7.25.6
 
   '@babel/helper-compilation-targets@7.22.15':
     dependencies:
@@ -16474,19 +16273,19 @@ snapshots:
   '@babel/helper-function-name@7.23.0':
     dependencies:
       '@babel/template': 7.22.15
-      '@babel/types': 7.23.0
+      '@babel/types': 7.25.6
 
   '@babel/helper-hoist-variables@7.22.5':
     dependencies:
-      '@babel/types': 7.23.0
+      '@babel/types': 7.25.6
 
   '@babel/helper-member-expression-to-functions@7.23.0':
     dependencies:
-      '@babel/types': 7.23.0
+      '@babel/types': 7.25.6
 
   '@babel/helper-module-imports@7.22.15':
     dependencies:
-      '@babel/types': 7.23.0
+      '@babel/types': 7.25.6
 
   '@babel/helper-module-transforms@7.23.3(@babel/core@7.23.2)':
     dependencies:
@@ -16495,11 +16294,11 @@ snapshots:
       '@babel/helper-module-imports': 7.22.15
       '@babel/helper-simple-access': 7.22.5
       '@babel/helper-split-export-declaration': 7.22.6
-      '@babel/helper-validator-identifier': 7.22.20
+      '@babel/helper-validator-identifier': 7.24.7
 
   '@babel/helper-optimise-call-expression@7.22.5':
     dependencies:
-      '@babel/types': 7.23.0
+      '@babel/types': 7.25.6
 
   '@babel/helper-plugin-utils@7.22.5': {}
 
@@ -16519,25 +16318,23 @@ snapshots:
 
   '@babel/helper-simple-access@7.22.5':
     dependencies:
-      '@babel/types': 7.23.0
+      '@babel/types': 7.25.6
 
   '@babel/helper-skip-transparent-expression-wrappers@7.22.5':
     dependencies:
-      '@babel/types': 7.23.0
+      '@babel/types': 7.25.6
 
   '@babel/helper-split-export-declaration@7.22.6':
     dependencies:
-      '@babel/types': 7.23.0
+      '@babel/types': 7.25.6
 
   '@babel/helper-string-parser@7.22.5': {}
 
-  '@babel/helper-string-parser@7.24.8':
-    optional: true
+  '@babel/helper-string-parser@7.24.8': {}
 
   '@babel/helper-validator-identifier@7.22.20': {}
 
-  '@babel/helper-validator-identifier@7.24.7':
-    optional: true
+  '@babel/helper-validator-identifier@7.24.7': {}
 
   '@babel/helper-validator-option@7.22.15': {}
 
@@ -16545,13 +16342,13 @@ snapshots:
     dependencies:
       '@babel/helper-function-name': 7.23.0
       '@babel/template': 7.22.15
-      '@babel/types': 7.23.0
+      '@babel/types': 7.25.6
 
   '@babel/helpers@7.23.2':
     dependencies:
       '@babel/template': 7.22.15
       '@babel/traverse': 7.23.2
-      '@babel/types': 7.23.0
+      '@babel/types': 7.25.6
     transitivePeerDependencies:
       - supports-color
 
@@ -16568,7 +16365,6 @@ snapshots:
   '@babel/parser@7.25.6':
     dependencies:
       '@babel/types': 7.25.6
-    optional: true
 
   '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.23.3(@babel/core@7.23.2)':
     dependencies:
@@ -16858,7 +16654,7 @@ snapshots:
       '@babel/helper-hoist-variables': 7.22.5
       '@babel/helper-module-transforms': 7.23.3(@babel/core@7.23.2)
       '@babel/helper-plugin-utils': 7.22.5
-      '@babel/helper-validator-identifier': 7.22.20
+      '@babel/helper-validator-identifier': 7.24.7
 
   '@babel/plugin-transform-modules-umd@7.23.3(@babel/core@7.23.2)':
     dependencies:
@@ -17106,7 +16902,7 @@ snapshots:
     dependencies:
       '@babel/core': 7.23.2
       '@babel/helper-plugin-utils': 7.22.5
-      '@babel/types': 7.23.0
+      '@babel/types': 7.25.6
       esutils: 2.0.3
 
   '@babel/preset-typescript@7.23.3(@babel/core@7.23.2)':
@@ -17141,8 +16937,8 @@ snapshots:
   '@babel/template@7.22.15':
     dependencies:
       '@babel/code-frame': 7.22.13
-      '@babel/parser': 7.23.9
-      '@babel/types': 7.23.0
+      '@babel/parser': 7.25.6
+      '@babel/types': 7.25.6
 
   '@babel/traverse@7.23.2':
     dependencies:
@@ -17152,8 +16948,8 @@ snapshots:
       '@babel/helper-function-name': 7.23.0
       '@babel/helper-hoist-variables': 7.22.5
       '@babel/helper-split-export-declaration': 7.22.6
-      '@babel/parser': 7.23.9
-      '@babel/types': 7.23.0
+      '@babel/parser': 7.25.6
+      '@babel/types': 7.25.6
       debug: 4.3.6
       globals: 11.12.0
     transitivePeerDependencies:
@@ -17170,7 +16966,6 @@ snapshots:
       '@babel/helper-string-parser': 7.24.8
       '@babel/helper-validator-identifier': 7.24.7
       to-fast-properties: 2.0.0
-    optional: true
 
   '@bcoe/v8-coverage@0.2.3': {}
 
@@ -17346,8 +17141,6 @@ snapshots:
       compare-func: 2.0.0
       q: 1.5.1
 
-  '@dialpad/dialtone-combinator@0.3.1': {}
-
   '@dialpad/postcss-responsive-variations@1.1.5(postcss@8.4.39)':
     dependencies:
       postcss: 8.4.39
@@ -17390,6 +17183,19 @@ snapshots:
     transitivePeerDependencies:
       - '@algolia/client-search'
 
+  '@emnapi/core@1.2.0':
+    dependencies:
+      '@emnapi/wasi-threads': 1.0.1
+      tslib: 2.6.2
+
+  '@emnapi/runtime@1.2.0':
+    dependencies:
+      tslib: 2.6.2
+
+  '@emnapi/wasi-threads@1.0.1':
+    dependencies:
+      tslib: 2.6.2
+
   '@emotion/use-insertion-effect-with-fallbacks@1.0.1(react@16.14.0)':
     dependencies:
       react: 16.14.0
@@ -18298,23 +18104,23 @@ snapshots:
       '@types/react': 18.2.37
       react: 16.14.0
 
-  '@microsoft/api-extractor-model@7.29.4(@types/node@20.9.0)':
+  '@microsoft/api-extractor-model@7.29.4(@types/node@18.18.9)':
     dependencies:
       '@microsoft/tsdoc': 0.15.0
       '@microsoft/tsdoc-config': 0.17.0
-      '@rushstack/node-core-library': 5.5.1(@types/node@20.9.0)
+      '@rushstack/node-core-library': 5.5.1(@types/node@18.18.9)
     transitivePeerDependencies:
       - '@types/node'
 
-  '@microsoft/api-extractor@7.47.4(@types/node@20.9.0)':
+  '@microsoft/api-extractor@7.47.4(@types/node@18.18.9)':
     dependencies:
-      '@microsoft/api-extractor-model': 7.29.4(@types/node@20.9.0)
+      '@microsoft/api-extractor-model': 7.29.4(@types/node@18.18.9)
       '@microsoft/tsdoc': 0.15.0
       '@microsoft/tsdoc-config': 0.17.0
-      '@rushstack/node-core-library': 5.5.1(@types/node@20.9.0)
+      '@rushstack/node-core-library': 5.5.1(@types/node@18.18.9)
       '@rushstack/rig-package': 0.5.3
-      '@rushstack/terminal': 0.13.3(@types/node@20.9.0)
-      '@rushstack/ts-command-line': 4.22.3(@types/node@20.9.0)
+      '@rushstack/terminal': 0.13.3(@types/node@18.18.9)
+      '@rushstack/ts-command-line': 4.22.3(@types/node@18.18.9)
       lodash: 4.17.21
       minimatch: 3.0.5
       resolve: 1.22.8
@@ -18338,6 +18144,12 @@ snapshots:
       call-me-maybe: 1.0.2
       glob-to-regexp: 0.3.0
 
+  '@napi-rs/wasm-runtime@0.2.4':
+    dependencies:
+      '@emnapi/core': 1.2.0
+      '@emnapi/runtime': 1.2.0
+      '@tybys/wasm-util': 0.9.0
+
   '@ndelangen/get-tarball@3.0.9':
     dependencies:
       gunzip-maybe: 1.4.2
@@ -18523,43 +18335,43 @@ snapshots:
       - bluebird
       - supports-color
 
-  '@nrwl/tao@17.2.1(@swc/core@1.3.96)':
+  '@nrwl/tao@19.8.0(@swc/core@1.3.96)':
     dependencies:
-      nx: 17.2.1(@swc/core@1.3.96)
+      nx: 19.8.0(@swc/core@1.3.96)
       tslib: 2.6.2
     transitivePeerDependencies:
       - '@swc-node/register'
       - '@swc/core'
       - debug
 
-  '@nx/nx-darwin-arm64@17.2.1':
+  '@nx/nx-darwin-arm64@19.8.0':
     optional: true
 
-  '@nx/nx-darwin-x64@17.2.1':
+  '@nx/nx-darwin-x64@19.8.0':
     optional: true
 
-  '@nx/nx-freebsd-x64@17.2.1':
+  '@nx/nx-freebsd-x64@19.8.0':
     optional: true
 
-  '@nx/nx-linux-arm-gnueabihf@17.2.1':
+  '@nx/nx-linux-arm-gnueabihf@19.8.0':
     optional: true
 
-  '@nx/nx-linux-arm64-gnu@17.2.1':
+  '@nx/nx-linux-arm64-gnu@19.8.0':
     optional: true
 
-  '@nx/nx-linux-arm64-musl@17.2.1':
+  '@nx/nx-linux-arm64-musl@19.8.0':
     optional: true
 
-  '@nx/nx-linux-x64-gnu@17.2.1':
+  '@nx/nx-linux-x64-gnu@19.8.0':
     optional: true
 
-  '@nx/nx-linux-x64-musl@17.2.1':
+  '@nx/nx-linux-x64-musl@19.8.0':
     optional: true
 
-  '@nx/nx-win32-arm64-msvc@17.2.1':
+  '@nx/nx-win32-arm64-msvc@19.8.0':
     optional: true
 
-  '@nx/nx-win32-x64-msvc@17.2.1':
+  '@nx/nx-win32-x64-msvc@19.8.0':
     optional: true
 
   '@octokit/auth-token@2.5.0':
@@ -18778,48 +18590,49 @@ snapshots:
     dependencies:
       esbuild: 0.14.54
 
-  '@percy/cli-app@1.28.2(typescript@5.4.2)':
+  '@percy/cli-app@1.29.3(typescript@5.4.2)':
     dependencies:
-      '@percy/cli-command': 1.28.2(typescript@5.4.2)
-      '@percy/cli-exec': 1.28.2(typescript@5.4.2)
+      '@percy/cli-command': 1.29.3(typescript@5.4.2)
+      '@percy/cli-exec': 1.29.3(typescript@5.4.2)
     transitivePeerDependencies:
       - bufferutil
       - supports-color
       - typescript
       - utf-8-validate
 
-  '@percy/cli-build@1.28.2(typescript@5.4.2)':
+  '@percy/cli-build@1.29.3(typescript@5.4.2)':
     dependencies:
-      '@percy/cli-command': 1.28.2(typescript@5.4.2)
+      '@percy/cli-command': 1.29.3(typescript@5.4.2)
     transitivePeerDependencies:
       - bufferutil
       - supports-color
       - typescript
       - utf-8-validate
 
-  '@percy/cli-command@1.28.2(typescript@5.4.2)':
+  '@percy/cli-command@1.29.3(typescript@5.4.2)':
     dependencies:
-      '@percy/config': 1.28.2(typescript@5.4.2)
-      '@percy/core': 1.28.2(typescript@5.4.2)
-      '@percy/logger': 1.28.2
+      '@percy/config': 1.29.3(typescript@5.4.2)
+      '@percy/core': 1.29.3(typescript@5.4.2)
+      '@percy/logger': 1.29.3
     transitivePeerDependencies:
       - bufferutil
       - supports-color
       - typescript
       - utf-8-validate
 
-  '@percy/cli-config@1.28.2(typescript@5.4.2)':
+  '@percy/cli-config@1.29.3(typescript@5.4.2)':
     dependencies:
-      '@percy/cli-command': 1.28.2(typescript@5.4.2)
+      '@percy/cli-command': 1.29.3(typescript@5.4.2)
     transitivePeerDependencies:
       - bufferutil
       - supports-color
       - typescript
       - utf-8-validate
 
-  '@percy/cli-exec@1.28.2(typescript@5.4.2)':
+  '@percy/cli-exec@1.29.3(typescript@5.4.2)':
     dependencies:
-      '@percy/cli-command': 1.28.2(typescript@5.4.2)
+      '@percy/cli-command': 1.29.3(typescript@5.4.2)
+      '@percy/logger': 1.29.3
       cross-spawn: 7.0.3
       which: 2.0.2
     transitivePeerDependencies:
@@ -18828,9 +18641,9 @@ snapshots:
       - typescript
       - utf-8-validate
 
-  '@percy/cli-snapshot@1.28.2(typescript@5.4.2)':
+  '@percy/cli-snapshot@1.29.3(typescript@5.4.2)':
     dependencies:
-      '@percy/cli-command': 1.28.2(typescript@5.4.2)
+      '@percy/cli-command': 1.29.3(typescript@5.4.2)
       yaml: 2.4.5
     transitivePeerDependencies:
       - bufferutil
@@ -18838,9 +18651,9 @@ snapshots:
       - typescript
       - utf-8-validate
 
-  '@percy/cli-upload@1.28.2(typescript@5.4.2)':
+  '@percy/cli-upload@1.29.3(typescript@5.4.2)':
     dependencies:
-      '@percy/cli-command': 1.28.2(typescript@5.4.2)
+      '@percy/cli-command': 1.29.3(typescript@5.4.2)
       fast-glob: 3.3.2
       image-size: 1.0.2
     transitivePeerDependencies:
@@ -18849,72 +18662,75 @@ snapshots:
       - typescript
       - utf-8-validate
 
-  '@percy/cli@1.28.2(typescript@5.4.2)':
+  '@percy/cli@1.29.3(typescript@5.4.2)':
     dependencies:
-      '@percy/cli-app': 1.28.2(typescript@5.4.2)
-      '@percy/cli-build': 1.28.2(typescript@5.4.2)
-      '@percy/cli-command': 1.28.2(typescript@5.4.2)
-      '@percy/cli-config': 1.28.2(typescript@5.4.2)
-      '@percy/cli-exec': 1.28.2(typescript@5.4.2)
-      '@percy/cli-snapshot': 1.28.2(typescript@5.4.2)
-      '@percy/cli-upload': 1.28.2(typescript@5.4.2)
-      '@percy/client': 1.28.2
-      '@percy/logger': 1.28.2
+      '@percy/cli-app': 1.29.3(typescript@5.4.2)
+      '@percy/cli-build': 1.29.3(typescript@5.4.2)
+      '@percy/cli-command': 1.29.3(typescript@5.4.2)
+      '@percy/cli-config': 1.29.3(typescript@5.4.2)
+      '@percy/cli-exec': 1.29.3(typescript@5.4.2)
+      '@percy/cli-snapshot': 1.29.3(typescript@5.4.2)
+      '@percy/cli-upload': 1.29.3(typescript@5.4.2)
+      '@percy/client': 1.29.3
+      '@percy/logger': 1.29.3
     transitivePeerDependencies:
       - bufferutil
       - supports-color
       - typescript
       - utf-8-validate
 
-  '@percy/client@1.28.2':
+  '@percy/client@1.29.3':
     dependencies:
-      '@percy/env': 1.28.2
-      '@percy/logger': 1.28.2
+      '@percy/env': 1.29.3
+      '@percy/logger': 1.29.3
+      pako: 2.1.0
 
-  '@percy/config@1.28.2(typescript@5.4.2)':
+  '@percy/config@1.29.3(typescript@5.4.2)':
     dependencies:
-      '@percy/logger': 1.28.2
+      '@percy/logger': 1.29.3
       ajv: 8.13.0
       cosmiconfig: 8.3.6(typescript@5.4.2)
       yaml: 2.4.5
     transitivePeerDependencies:
       - typescript
 
-  '@percy/core@1.28.2(typescript@5.4.2)':
+  '@percy/core@1.29.3(typescript@5.4.2)':
     dependencies:
-      '@percy/client': 1.28.2
-      '@percy/config': 1.28.2(typescript@5.4.2)
-      '@percy/dom': 1.28.2
-      '@percy/logger': 1.28.2
-      '@percy/webdriver-utils': 1.28.2(typescript@5.4.2)
+      '@percy/client': 1.29.3
+      '@percy/config': 1.29.3(typescript@5.4.2)
+      '@percy/dom': 1.29.3
+      '@percy/logger': 1.29.3
+      '@percy/webdriver-utils': 1.29.3(typescript@5.4.2)
       content-disposition: 0.5.4
       cross-spawn: 7.0.3
       extract-zip: 2.0.1
       fast-glob: 3.3.2
-      micromatch: 4.0.5
+      micromatch: 4.0.8
       mime-types: 2.1.35
+      pako: 2.1.0
       path-to-regexp: 6.2.1
       rimraf: 3.0.2
-      ws: 8.16.0
+      ws: 8.18.0
+      yaml: 2.4.5
     transitivePeerDependencies:
       - bufferutil
       - supports-color
       - typescript
       - utf-8-validate
 
-  '@percy/dom@1.28.2': {}
+  '@percy/dom@1.29.3': {}
 
-  '@percy/env@1.28.2':
+  '@percy/env@1.29.3':
     dependencies:
-      '@percy/logger': 1.28.2
+      '@percy/logger': 1.29.3
 
-  '@percy/logger@1.28.2': {}
+  '@percy/logger@1.29.3': {}
 
-  '@percy/sdk-utils@1.28.2': {}
+  '@percy/sdk-utils@1.29.3': {}
 
-  '@percy/storybook@5.0.3(typescript@5.4.2)':
+  '@percy/storybook@6.0.2(typescript@5.4.2)':
     dependencies:
-      '@percy/cli-command': 1.28.2(typescript@5.4.2)
+      '@percy/cli-command': 1.29.3(typescript@5.4.2)
       cross-spawn: 7.0.3
       qs: 6.12.3
     transitivePeerDependencies:
@@ -18923,10 +18739,10 @@ snapshots:
       - typescript
       - utf-8-validate
 
-  '@percy/webdriver-utils@1.28.2(typescript@5.4.2)':
+  '@percy/webdriver-utils@1.29.3(typescript@5.4.2)':
     dependencies:
-      '@percy/config': 1.28.2(typescript@5.4.2)
-      '@percy/sdk-utils': 1.28.2
+      '@percy/config': 1.29.3(typescript@5.4.2)
+      '@percy/sdk-utils': 1.29.3
     transitivePeerDependencies:
       - typescript
 
@@ -19353,7 +19169,7 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.21.1':
     optional: true
 
-  '@rushstack/node-core-library@5.5.1(@types/node@20.9.0)':
+  '@rushstack/node-core-library@5.5.1(@types/node@18.18.9)':
     dependencies:
       ajv: 8.13.0
       ajv-draft-04: 1.0.0(ajv@8.13.0)
@@ -19364,23 +19180,23 @@ snapshots:
       resolve: 1.22.8
       semver: 7.5.4
     optionalDependencies:
-      '@types/node': 20.9.0
+      '@types/node': 18.18.9
 
   '@rushstack/rig-package@0.5.3':
     dependencies:
       resolve: 1.22.8
       strip-json-comments: 3.1.1
 
-  '@rushstack/terminal@0.13.3(@types/node@20.9.0)':
+  '@rushstack/terminal@0.13.3(@types/node@18.18.9)':
     dependencies:
-      '@rushstack/node-core-library': 5.5.1(@types/node@20.9.0)
+      '@rushstack/node-core-library': 5.5.1(@types/node@18.18.9)
       supports-color: 8.1.1
     optionalDependencies:
-      '@types/node': 20.9.0
+      '@types/node': 18.18.9
 
-  '@rushstack/ts-command-line@4.22.3(@types/node@20.9.0)':
+  '@rushstack/ts-command-line@4.22.3(@types/node@18.18.9)':
     dependencies:
-      '@rushstack/terminal': 0.13.3(@types/node@20.9.0)
+      '@rushstack/terminal': 0.13.3(@types/node@18.18.9)
       '@types/argparse': 1.0.38
       argparse: 1.0.10
       string-argv: 0.3.2
@@ -19674,10 +19490,6 @@ snapshots:
 
   '@sindresorhus/merge-streams@2.3.0': {}
 
-  '@sinonjs/commons@2.0.0':
-    dependencies:
-      type-detect: 4.0.8
-
   '@sinonjs/commons@3.0.0':
     dependencies:
       type-detect: 4.0.8
@@ -19686,14 +19498,6 @@ snapshots:
     dependencies:
       '@sinonjs/commons': 3.0.0
 
-  '@sinonjs/samsam@8.0.0':
-    dependencies:
-      '@sinonjs/commons': 2.0.0
-      lodash.get: 4.4.2
-      type-detect: 4.0.8
-
-  '@sinonjs/text-encoding@0.7.2': {}
-
   '@soda/friendly-errors-webpack-plugin@1.8.1(webpack@5.89.0(@swc/core@1.3.96))':
     dependencies:
       chalk: 3.0.0
@@ -19936,7 +19740,7 @@ snapshots:
     dependencies:
       '@babel/core': 7.23.2
       '@babel/preset-env': 7.23.3(@babel/core@7.23.2)
-      '@babel/types': 7.23.0
+      '@babel/types': 7.25.6
       '@ndelangen/get-tarball': 3.0.9
       '@storybook/codemod': 7.6.20
       '@storybook/core-common': 7.6.20(encoding@0.1.13)
@@ -19992,7 +19796,7 @@ snapshots:
     dependencies:
       '@babel/core': 7.23.2
       '@babel/preset-env': 7.23.3(@babel/core@7.23.2)
-      '@babel/types': 7.23.0
+      '@babel/types': 7.25.6
       '@storybook/csf': 0.1.2
       '@storybook/csf-tools': 7.6.20
       '@storybook/node-logger': 7.6.20
@@ -20125,9 +19929,9 @@ snapshots:
   '@storybook/csf-tools@7.6.20':
     dependencies:
       '@babel/generator': 7.23.0
-      '@babel/parser': 7.23.9
+      '@babel/parser': 7.25.6
       '@babel/traverse': 7.23.2
-      '@babel/types': 7.23.0
+      '@babel/types': 7.25.6
       '@storybook/csf': 0.1.2
       '@storybook/types': 7.6.20
       fs-extra: 11.1.1
@@ -20278,12 +20082,12 @@ snapshots:
       - encoding
       - supports-color
 
-  '@storybook/test-runner@0.16.0(@types/node@20.9.0)(encoding@0.1.13)':
+  '@storybook/test-runner@0.16.0(@types/node@18.18.9)(encoding@0.1.13)':
     dependencies:
       '@babel/core': 7.23.2
       '@babel/generator': 7.23.0
       '@babel/template': 7.22.15
-      '@babel/types': 7.23.0
+      '@babel/types': 7.25.6
       '@jest/types': 29.6.3
       '@storybook/core-common': 7.6.20(encoding@0.1.13)
       '@storybook/csf': 0.1.2
@@ -20295,14 +20099,14 @@ snapshots:
       commander: 9.5.0
       expect-playwright: 0.8.0
       glob: 10.4.5
-      jest: 29.7.0(@types/node@20.9.0)
+      jest: 29.7.0(@types/node@18.18.9)
       jest-circus: 29.7.0
       jest-environment-node: 29.7.0
       jest-junit: 16.0.0
-      jest-playwright-preset: 4.0.0(jest-circus@29.7.0)(jest-environment-node@29.7.0)(jest-runner@29.7.0)(jest@29.7.0(@types/node@20.9.0))
+      jest-playwright-preset: 4.0.0(jest-circus@29.7.0)(jest-environment-node@29.7.0)(jest-runner@29.7.0)(jest@29.7.0(@types/node@18.18.9))
       jest-runner: 29.7.0
       jest-serializer-html: 7.1.0
-      jest-watch-typeahead: 2.2.2(jest@29.7.0(@types/node@20.9.0))
+      jest-watch-typeahead: 2.2.2(jest@29.7.0(@types/node@18.18.9))
       node-fetch: 2.7.0(encoding@0.1.13)
       playwright: 1.42.1
       read-pkg-up: 7.0.1
@@ -20691,6 +20495,10 @@ snapshots:
       '@tufjs/canonical-json': 2.0.0
       minimatch: 9.0.5
 
+  '@tybys/wasm-util@0.9.0':
+    dependencies:
+      tslib: 2.6.2
+
   '@types/argparse@1.0.38': {}
 
   '@types/aria-query@5.0.4': {}
@@ -21213,10 +21021,10 @@ snapshots:
 
   '@ungap/structured-clone@1.2.0': {}
 
-  '@vitejs/plugin-vue2@2.3.1(vite@5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@2.7.16)':
+  '@vitejs/plugin-vue2@2.3.1(vite@5.4.2(@types/node@18.18.9)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@3.4.15(typescript@5.4.2))':
     dependencies:
-      vite: 5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
-      vue: 2.7.16
+      vite: 5.4.2(@types/node@18.18.9)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
+      vue: 3.4.15(typescript@5.4.2)
 
   '@vitejs/plugin-vue@4.5.0(vite@4.0.5(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@3.4.15(typescript@5.4.2))':
     dependencies:
@@ -21228,9 +21036,9 @@ snapshots:
       vite: 5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
       vue: 3.4.15(typescript@5.4.2)
 
-  '@vitejs/plugin-vue@5.0.4(vite@5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@3.4.15(typescript@5.4.2))':
+  '@vitejs/plugin-vue@5.1.3(vite@5.4.2(@types/node@18.18.9)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@3.4.15(typescript@5.4.2))':
     dependencies:
-      vite: 5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
+      vite: 5.4.2(@types/node@18.18.9)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
       vue: 3.4.15(typescript@5.4.2)
 
   '@vitejs/plugin-vue@5.1.3(vite@5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@3.4.15(typescript@5.4.2))':
@@ -21266,25 +21074,12 @@ snapshots:
       loupe: 2.3.7
       pretty-format: 29.7.0
 
-  '@volar/language-core@1.11.1':
-    dependencies:
-      '@volar/source-map': 1.11.1
-
   '@volar/language-core@2.4.0':
     dependencies:
       '@volar/source-map': 2.4.0
 
-  '@volar/source-map@1.11.1':
-    dependencies:
-      muggle-string: 0.3.1
-
   '@volar/source-map@2.4.0': {}
 
-  '@volar/typescript@1.11.1':
-    dependencies:
-      '@volar/language-core': 1.11.1
-      path-browserify: 1.0.1
-
   '@volar/typescript@2.4.0':
     dependencies:
       '@volar/language-core': 2.4.0
@@ -21497,7 +21292,6 @@ snapshots:
       entities: 4.5.0
       estree-walker: 2.0.2
       source-map-js: 1.2.0
-    optional: true
 
   '@vue/compiler-dom@3.4.15':
     dependencies:
@@ -21508,7 +21302,6 @@ snapshots:
     dependencies:
       '@vue/compiler-core': 3.5.5
       '@vue/shared': 3.5.5
-    optional: true
 
   '@vue/compiler-sfc@2.7.16':
     dependencies:
@@ -21628,44 +21421,12 @@ snapshots:
 
   '@vue/devtools-api@6.5.1': {}
 
-  '@vue/language-core@1.8.25(typescript@5.4.2)(vue@2.7.16)':
-    dependencies:
-      '@volar/language-core': 1.11.1
-      '@volar/source-map': 1.11.1
-      '@vue/compiler-dom': 3.4.15
-      '@vue/shared': 3.4.15
-      computeds: 0.0.1
-      minimatch: 9.0.5
-      muggle-string: 0.3.1
-      path-browserify: 1.0.1
-      vue-template-compiler: 2.7.16(vue@2.7.16)
-    optionalDependencies:
-      typescript: 5.4.2
-    transitivePeerDependencies:
-      - vue
-
-  '@vue/language-core@1.8.25(typescript@5.4.2)(vue@3.4.15(typescript@5.4.2))':
-    dependencies:
-      '@volar/language-core': 1.11.1
-      '@volar/source-map': 1.11.1
-      '@vue/compiler-dom': 3.4.15
-      '@vue/shared': 3.4.15
-      computeds: 0.0.1
-      minimatch: 9.0.5
-      muggle-string: 0.3.1
-      path-browserify: 1.0.1
-      vue-template-compiler: 2.7.16(vue@3.4.15(typescript@5.4.2))
-    optionalDependencies:
-      typescript: 5.4.2
-    transitivePeerDependencies:
-      - vue
-
   '@vue/language-core@2.0.29(typescript@5.4.2)':
     dependencies:
       '@volar/language-core': 2.4.0
-      '@vue/compiler-dom': 3.4.15
+      '@vue/compiler-dom': 3.5.5
       '@vue/compiler-vue2': 2.7.16
-      '@vue/shared': 3.4.15
+      '@vue/shared': 3.5.5
       computeds: 0.0.1
       minimatch: 9.0.5
       muggle-string: 0.4.1
@@ -21696,8 +21457,7 @@ snapshots:
 
   '@vue/shared@3.4.15': {}
 
-  '@vue/shared@3.5.5':
-    optional: true
+  '@vue/shared@3.5.5': {}
 
   '@vue/test-utils@1.3.6(vue-template-compiler@2.7.16(vue@2.7.16))(vue@2.7.16)':
     dependencies:
@@ -22220,7 +21980,7 @@ snapshots:
 
   '@zip.js/zip.js@2.7.48': {}
 
-  '@zkochan/js-yaml@0.0.6':
+  '@zkochan/js-yaml@0.0.7':
     dependencies:
       argparse: 2.0.1
 
@@ -22697,6 +22457,14 @@ snapshots:
     transitivePeerDependencies:
       - debug
 
+  axios@1.7.7:
+    dependencies:
+      follow-redirects: 1.15.9
+      form-data: 4.0.0
+      proxy-from-env: 1.1.0
+    transitivePeerDependencies:
+      - debug
+
   babel-core@7.0.0-bridge.0(@babel/core@7.23.2):
     dependencies:
       '@babel/core': 7.23.2
@@ -22727,7 +22495,7 @@ snapshots:
   babel-plugin-jest-hoist@29.6.3:
     dependencies:
       '@babel/template': 7.22.15
-      '@babel/types': 7.23.0
+      '@babel/types': 7.25.6
       '@types/babel__core': 7.20.4
       '@types/babel__traverse': 7.20.4
 
@@ -22952,6 +22720,10 @@ snapshots:
     dependencies:
       fill-range: 7.0.1
 
+  braces@3.0.3:
+    dependencies:
+      fill-range: 7.1.1
+
   browser-assert@1.2.1: {}
 
   browser-process-hrtime@1.0.0: {}
@@ -23803,6 +23575,21 @@ snapshots:
     dependencies:
       capture-stack-trace: 1.0.2
 
+  create-jest@29.7.0(@types/node@18.18.9):
+    dependencies:
+      '@jest/types': 29.6.3
+      chalk: 4.1.2
+      exit: 0.1.2
+      graceful-fs: 4.2.11
+      jest-config: 29.7.0(@types/node@18.18.9)
+      jest-util: 29.7.0
+      prompts: 2.4.2
+    transitivePeerDependencies:
+      - '@types/node'
+      - babel-plugin-macros
+      - supports-color
+      - ts-node
+
   create-jest@29.7.0(@types/node@20.9.0):
     dependencies:
       '@jest/types': 29.6.3
@@ -24413,12 +24200,18 @@ snapshots:
 
   dotenv-expand@10.0.0: {}
 
+  dotenv-expand@11.0.6:
+    dependencies:
+      dotenv: 16.4.5
+
   dotenv-expand@5.1.0: {}
 
   dotenv@10.0.0: {}
 
   dotenv@16.3.1: {}
 
+  dotenv@16.4.5: {}
+
   downgrade-root@1.2.2:
     dependencies:
       default-uid: 1.0.0
@@ -24905,12 +24698,6 @@ snapshots:
       eslint-utils: 2.1.0
       regexpp: 3.2.0
 
-  eslint-plugin-eslint-plugin@5.2.1(eslint@8.56.0):
-    dependencies:
-      eslint: 8.56.0
-      eslint-utils: 3.0.0(eslint@8.56.0)
-      estraverse: 5.3.0
-
   eslint-plugin-import@2.29.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0):
     dependencies:
       array-includes: 3.1.7
@@ -24938,12 +24725,13 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-plugin-jest@25.7.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0)(typescript@5.4.2):
+  eslint-plugin-jest@25.7.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0)(jest@29.7.0(@types/node@18.18.9))(typescript@5.4.2):
     dependencies:
       '@typescript-eslint/experimental-utils': 5.62.0(eslint@8.56.0)(typescript@5.4.2)
       eslint: 8.56.0
     optionalDependencies:
       '@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.4.2))(eslint@8.56.0)(typescript@5.4.2)
+      jest: 29.7.0(@types/node@18.18.9)
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -25483,6 +25271,10 @@ snapshots:
     dependencies:
       to-regex-range: 5.0.1
 
+  fill-range@7.1.1:
+    dependencies:
+      to-regex-range: 5.0.1
+
   filter-obj@2.0.2: {}
 
   finalhandler@1.2.0:
@@ -25641,6 +25433,8 @@ snapshots:
     optionalDependencies:
       debug: 4.3.6
 
+  follow-redirects@1.15.9: {}
+
   for-each@0.3.3:
     dependencies:
       is-callable: 1.2.7
@@ -25686,6 +25480,10 @@ snapshots:
 
   fromentries@1.3.2: {}
 
+  front-matter@4.0.2:
+    dependencies:
+      js-yaml: 3.14.1
+
   fs-constants@1.0.0: {}
 
   fs-exists-sync@0.1.0: {}
@@ -25954,15 +25752,6 @@ snapshots:
       package-json-from-dist: 1.0.0
       path-scurry: 1.11.1
 
-  glob@7.1.4:
-    dependencies:
-      fs.realpath: 1.0.0
-      inflight: 1.0.6
-      inherits: 2.0.4
-      minimatch: 3.1.2
-      once: 1.4.0
-      path-is-absolute: 1.0.1
-
   glob@7.1.6:
     dependencies:
       fs.realpath: 1.0.0
@@ -27099,8 +26888,6 @@ snapshots:
 
   is-yarn-global@0.3.0: {}
 
-  isarray@0.0.1: {}
-
   isarray@1.0.0: {}
 
   isarray@2.0.5: {}
@@ -27153,7 +26940,7 @@ snapshots:
   istanbul-lib-instrument@6.0.1:
     dependencies:
       '@babel/core': 7.23.2
-      '@babel/parser': 7.23.9
+      '@babel/parser': 7.25.6
       '@istanbuljs/schema': 0.1.3
       istanbul-lib-coverage: 3.2.1
       semver: 7.5.4
@@ -27248,6 +27035,25 @@ snapshots:
       - babel-plugin-macros
       - supports-color
 
+  jest-cli@29.7.0(@types/node@18.18.9):
+    dependencies:
+      '@jest/core': 29.7.0
+      '@jest/test-result': 29.7.0
+      '@jest/types': 29.6.3
+      chalk: 4.1.2
+      create-jest: 29.7.0(@types/node@18.18.9)
+      exit: 0.1.2
+      import-local: 3.1.0
+      jest-config: 29.7.0(@types/node@18.18.9)
+      jest-util: 29.7.0
+      jest-validate: 29.7.0
+      yargs: 17.7.2
+    transitivePeerDependencies:
+      - '@types/node'
+      - babel-plugin-macros
+      - supports-color
+      - ts-node
+
   jest-cli@29.7.0(@types/node@20.9.0):
     dependencies:
       '@jest/core': 29.7.0
@@ -27267,6 +27073,36 @@ snapshots:
       - supports-color
       - ts-node
 
+  jest-config@29.7.0(@types/node@18.18.9):
+    dependencies:
+      '@babel/core': 7.23.2
+      '@jest/test-sequencer': 29.7.0
+      '@jest/types': 29.6.3
+      babel-jest: 29.7.0(@babel/core@7.23.2)
+      chalk: 4.1.2
+      ci-info: 3.9.0
+      deepmerge: 4.3.1
+      glob: 7.2.3
+      graceful-fs: 4.2.11
+      jest-circus: 29.7.0
+      jest-environment-node: 29.7.0
+      jest-get-type: 29.6.3
+      jest-regex-util: 29.6.3
+      jest-resolve: 29.7.0
+      jest-runner: 29.7.0
+      jest-util: 29.7.0
+      jest-validate: 29.7.0
+      micromatch: 4.0.5
+      parse-json: 5.2.0
+      pretty-format: 29.7.0
+      slash: 3.0.0
+      strip-json-comments: 3.1.1
+    optionalDependencies:
+      '@types/node': 18.18.9
+    transitivePeerDependencies:
+      - babel-plugin-macros
+      - supports-color
+
   jest-config@29.7.0(@types/node@20.9.0):
     dependencies:
       '@babel/core': 7.23.2
@@ -27380,10 +27216,10 @@ snapshots:
       '@types/node': 20.9.0
       jest-util: 29.7.0
 
-  jest-playwright-preset@4.0.0(jest-circus@29.7.0)(jest-environment-node@29.7.0)(jest-runner@29.7.0)(jest@29.7.0(@types/node@20.9.0)):
+  jest-playwright-preset@4.0.0(jest-circus@29.7.0)(jest-environment-node@29.7.0)(jest-runner@29.7.0)(jest@29.7.0(@types/node@18.18.9)):
     dependencies:
       expect-playwright: 0.8.0
-      jest: 29.7.0(@types/node@20.9.0)
+      jest: 29.7.0(@types/node@18.18.9)
       jest-circus: 29.7.0
       jest-environment-node: 29.7.0
       jest-process-manager: 0.4.0
@@ -27537,11 +27373,11 @@ snapshots:
       leven: 3.1.0
       pretty-format: 29.7.0
 
-  jest-watch-typeahead@2.2.2(jest@29.7.0(@types/node@20.9.0)):
+  jest-watch-typeahead@2.2.2(jest@29.7.0(@types/node@18.18.9)):
     dependencies:
       ansi-escapes: 6.2.0
       chalk: 5.3.0
-      jest: 29.7.0(@types/node@20.9.0)
+      jest: 29.7.0(@types/node@18.18.9)
       jest-regex-util: 29.6.3
       jest-watcher: 29.7.0
       slash: 5.1.0
@@ -27578,6 +27414,18 @@ snapshots:
       merge-stream: 2.0.0
       supports-color: 8.1.1
 
+  jest@29.7.0(@types/node@18.18.9):
+    dependencies:
+      '@jest/core': 29.7.0
+      '@jest/types': 29.6.3
+      import-local: 3.1.0
+      jest-cli: 29.7.0(@types/node@18.18.9)
+    transitivePeerDependencies:
+      - '@types/node'
+      - babel-plugin-macros
+      - supports-color
+      - ts-node
+
   jest@29.7.0(@types/node@20.9.0):
     dependencies:
       '@jest/core': 29.7.0
@@ -27645,7 +27493,7 @@ snapshots:
   jscodeshift@0.15.1(@babel/preset-env@7.23.3(@babel/core@7.23.2)):
     dependencies:
       '@babel/core': 7.23.2
-      '@babel/parser': 7.23.9
+      '@babel/parser': 7.25.6
       '@babel/plugin-transform-class-properties': 7.23.3(@babel/core@7.23.2)
       '@babel/plugin-transform-modules-commonjs': 7.23.3(@babel/core@7.23.2)
       '@babel/plugin-transform-nullish-coalescing-operator': 7.23.3(@babel/core@7.23.2)
@@ -27807,8 +27655,6 @@ snapshots:
 
   just-diff@6.0.2: {}
 
-  just-extend@4.2.1: {}
-
   keyv@3.1.0:
     dependencies:
       json-buffer: 3.0.0
@@ -27950,6 +27796,8 @@ snapshots:
 
   lines-and-columns@1.2.4: {}
 
+  lines-and-columns@2.0.3: {}
+
   lines-and-columns@2.0.4: {}
 
   linkify-it@4.0.1:
@@ -28073,8 +27921,6 @@ snapshots:
 
   lodash.flattendeep@4.4.0: {}
 
-  lodash.get@4.4.2: {}
-
   lodash.isfunction@3.0.9: {}
 
   lodash.ismatch@4.4.0: {}
@@ -28542,7 +28388,7 @@ snapshots:
       textextensions: 5.16.0
       vinyl: 3.0.0
 
-  mem-fs-editor@9.7.0:
+  mem-fs-editor@9.7.0(mem-fs@4.0.0):
     dependencies:
       binaryextensions: 4.19.0
       commondir: 1.0.1
@@ -28554,6 +28400,8 @@ snapshots:
       multimatch: 5.0.0
       normalize-path: 3.0.0
       textextensions: 5.16.0
+    optionalDependencies:
+      mem-fs: 4.0.0
 
   mem-fs@4.0.0:
     dependencies:
@@ -28885,6 +28733,11 @@ snapshots:
       braces: 3.0.2
       picomatch: 2.3.1
 
+  micromatch@4.0.8:
+    dependencies:
+      braces: 3.0.3
+      picomatch: 2.3.1
+
   mime-db@1.52.0: {}
 
   mime-types@2.1.35:
@@ -29129,8 +28982,6 @@ snapshots:
 
   ms@2.1.3: {}
 
-  muggle-string@0.3.1: {}
-
   muggle-string@0.4.1: {}
 
   multicast-dns@7.2.5:
@@ -29218,14 +29069,6 @@ snapshots:
 
   nice-try@1.0.5: {}
 
-  nise@5.1.5:
-    dependencies:
-      '@sinonjs/commons': 2.0.0
-      '@sinonjs/fake-timers': 10.3.0
-      '@sinonjs/text-encoding': 0.7.2
-      just-extend: 4.2.1
-      path-to-regexp: 1.8.0
-
   no-case@3.0.4:
     dependencies:
       lower-case: 2.0.2
@@ -29485,12 +29328,6 @@ snapshots:
     dependencies:
       boolbase: 1.0.0
 
-  null-loader@4.0.1(webpack@5.89.0(@swc/core@1.3.96)(esbuild@0.18.20)):
-    dependencies:
-      loader-utils: 2.0.4
-      schema-utils: 3.3.0
-      webpack: 5.89.0(@swc/core@1.3.96)(esbuild@0.18.20)
-
   null-loader@4.0.1(webpack@5.89.0(@swc/core@1.3.96)):
     dependencies:
       loader-utils: 2.0.4
@@ -29503,34 +29340,35 @@ snapshots:
 
   nwsapi@2.2.7: {}
 
-  nx@17.2.1(@swc/core@1.3.96):
+  nx@19.8.0(@swc/core@1.3.96):
     dependencies:
-      '@nrwl/tao': 17.2.1(@swc/core@1.3.96)
+      '@napi-rs/wasm-runtime': 0.2.4
+      '@nrwl/tao': 19.8.0(@swc/core@1.3.96)
       '@yarnpkg/lockfile': 1.1.0
       '@yarnpkg/parsers': 3.0.0-rc.46
-      '@zkochan/js-yaml': 0.0.6
-      axios: 1.6.2
+      '@zkochan/js-yaml': 0.0.7
+      axios: 1.7.7
       chalk: 4.1.2
       cli-cursor: 3.1.0
       cli-spinners: 2.6.1
       cliui: 8.0.1
-      dotenv: 16.3.1
-      dotenv-expand: 10.0.0
+      dotenv: 16.4.5
+      dotenv-expand: 11.0.6
       enquirer: 2.3.6
       figures: 3.2.0
       flat: 5.0.2
+      front-matter: 4.0.2
       fs-extra: 11.1.1
-      glob: 7.1.4
       ignore: 5.3.0
       jest-diff: 29.7.0
-      js-yaml: 4.1.0
       jsonc-parser: 3.2.0
-      lines-and-columns: 2.0.4
-      minimatch: 3.0.5
+      lines-and-columns: 2.0.3
+      minimatch: 9.0.3
       node-machine-id: 1.1.12
       npm-run-path: 4.0.1
       open: 8.4.2
-      semver: 7.5.3
+      ora: 5.3.0
+      semver: 7.5.4
       string-width: 4.2.3
       strong-log-transformer: 2.1.0
       tar-stream: 2.2.0
@@ -29540,16 +29378,16 @@ snapshots:
       yargs: 17.7.2
       yargs-parser: 21.1.1
     optionalDependencies:
-      '@nx/nx-darwin-arm64': 17.2.1
-      '@nx/nx-darwin-x64': 17.2.1
-      '@nx/nx-freebsd-x64': 17.2.1
-      '@nx/nx-linux-arm-gnueabihf': 17.2.1
-      '@nx/nx-linux-arm64-gnu': 17.2.1
-      '@nx/nx-linux-arm64-musl': 17.2.1
-      '@nx/nx-linux-x64-gnu': 17.2.1
-      '@nx/nx-linux-x64-musl': 17.2.1
-      '@nx/nx-win32-arm64-msvc': 17.2.1
-      '@nx/nx-win32-x64-msvc': 17.2.1
+      '@nx/nx-darwin-arm64': 19.8.0
+      '@nx/nx-darwin-x64': 19.8.0
+      '@nx/nx-freebsd-x64': 19.8.0
+      '@nx/nx-linux-arm-gnueabihf': 19.8.0
+      '@nx/nx-linux-arm64-gnu': 19.8.0
+      '@nx/nx-linux-arm64-musl': 19.8.0
+      '@nx/nx-linux-x64-gnu': 19.8.0
+      '@nx/nx-linux-x64-musl': 19.8.0
+      '@nx/nx-win32-arm64-msvc': 19.8.0
+      '@nx/nx-win32-x64-msvc': 19.8.0
       '@swc/core': 1.3.96
     transitivePeerDependencies:
       - debug
@@ -29704,6 +29542,17 @@ snapshots:
       prelude-ls: 1.2.1
       type-check: 0.4.0
 
+  ora@5.3.0:
+    dependencies:
+      bl: 4.1.0
+      chalk: 4.1.2
+      cli-cursor: 3.1.0
+      cli-spinners: 2.9.1
+      is-interactive: 1.0.0
+      log-symbols: 4.1.0
+      strip-ansi: 6.0.1
+      wcwidth: 1.0.1
+
   ora@5.4.1:
     dependencies:
       bl: 4.1.0
@@ -29971,6 +29820,8 @@ snapshots:
 
   pako@1.0.11: {}
 
+  pako@2.1.0: {}
+
   param-case@3.0.4:
     dependencies:
       dot-case: 3.0.4
@@ -30129,10 +29980,6 @@ snapshots:
 
   path-to-regexp@0.1.7: {}
 
-  path-to-regexp@1.8.0:
-    dependencies:
-      isarray: 0.0.1
-
   path-to-regexp@6.2.1: {}
 
   path-type@1.1.0:
@@ -30444,7 +30291,7 @@ snapshots:
     dependencies:
       htmlparser2: 3.10.1
       postcss: 7.0.39
-      postcss-syntax: 0.36.2(postcss-html@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-jsx@0.36.4(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-less@3.1.4)(postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-scss@2.1.1)(postcss@7.0.39)
+      postcss-syntax: 0.36.2(postcss-html@0.36.0)(postcss-jsx@0.36.4)(postcss-less@3.1.4)(postcss-markdown@0.36.0)(postcss-scss@2.1.1)(postcss@7.0.39)
 
   postcss-image-set-function@3.0.1:
     dependencies:
@@ -30459,7 +30306,7 @@ snapshots:
     dependencies:
       '@babel/core': 7.23.2
       postcss: 7.0.39
-      postcss-syntax: 0.36.2(postcss-html@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-jsx@0.36.4(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-less@3.1.4)(postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-scss@2.1.1)(postcss@7.0.39)
+      postcss-syntax: 0.36.2(postcss-html@0.36.0)(postcss-jsx@0.36.4)(postcss-less@3.1.4)(postcss-markdown@0.36.0)(postcss-scss@2.1.1)(postcss@7.0.39)
     transitivePeerDependencies:
       - supports-color
 
@@ -30515,7 +30362,7 @@ snapshots:
   postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39):
     dependencies:
       postcss: 7.0.39
-      postcss-syntax: 0.36.2(postcss-html@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-jsx@0.36.4(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-less@3.1.4)(postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-scss@2.1.1)(postcss@7.0.39)
+      postcss-syntax: 0.36.2(postcss-html@0.36.0)(postcss-jsx@0.36.4)(postcss-less@3.1.4)(postcss-markdown@0.36.0)(postcss-scss@2.1.1)(postcss@7.0.39)
       remark: 10.0.1
       unist-util-find-all-after: 1.0.5
 
@@ -30908,7 +30755,7 @@ snapshots:
       postcss-value-parser: 4.2.0
       svgo: 3.0.2
 
-  postcss-syntax@0.36.2(postcss-html@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-jsx@0.36.4(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-less@3.1.4)(postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-scss@2.1.1)(postcss@7.0.39):
+  postcss-syntax@0.36.2(postcss-html@0.36.0)(postcss-jsx@0.36.4)(postcss-less@3.1.4)(postcss-markdown@0.36.0)(postcss-scss@2.1.1)(postcss@7.0.39):
     dependencies:
       postcss: 7.0.39
     optionalDependencies:
@@ -32110,10 +31957,6 @@ snapshots:
 
   semver@6.3.1: {}
 
-  semver@7.5.3:
-    dependencies:
-      lru-cache: 6.0.0
-
   semver@7.5.4:
     dependencies:
       lru-cache: 6.0.0
@@ -32278,15 +32121,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  sinon@15.2.0:
-    dependencies:
-      '@sinonjs/commons': 3.0.0
-      '@sinonjs/fake-timers': 10.3.0
-      '@sinonjs/samsam': 8.0.0
-      diff: 5.1.0
-      nise: 5.1.5
-      supports-color: 7.2.0
-
   sirv@2.0.3:
     dependencies:
       '@polka/url': 1.0.0-next.23
@@ -32993,7 +32827,7 @@ snapshots:
       postcss-sass: 0.3.5
       postcss-scss: 2.1.1
       postcss-selector-parser: 3.1.2
-      postcss-syntax: 0.36.2(postcss-html@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-jsx@0.36.4(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-less@3.1.4)(postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-scss@2.1.1)(postcss@7.0.39)
+      postcss-syntax: 0.36.2(postcss-html@0.36.0)(postcss-jsx@0.36.4)(postcss-less@3.1.4)(postcss-markdown@0.36.0)(postcss-scss@2.1.1)(postcss@7.0.39)
       postcss-value-parser: 3.3.1
       resolve-from: 4.0.0
       signal-exit: 3.0.7
@@ -34006,9 +33840,9 @@ snapshots:
       - supports-color
       - terser
 
-  vite-plugin-dts@4.0.3(@types/node@20.9.0)(rollup@4.21.1)(typescript@5.4.2)(vite@5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)):
+  vite-plugin-dts@4.0.3(@types/node@18.18.9)(rollup@4.21.1)(typescript@5.4.2)(vite@5.4.2(@types/node@18.18.9)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)):
     dependencies:
-      '@microsoft/api-extractor': 7.47.4(@types/node@20.9.0)
+      '@microsoft/api-extractor': 7.47.4(@types/node@18.18.9)
       '@rollup/pluginutils': 5.1.0(rollup@4.21.1)
       '@volar/typescript': 2.4.0
       '@vue/language-core': 2.0.29(typescript@5.4.2)
@@ -34020,7 +33854,7 @@ snapshots:
       typescript: 5.4.2
       vue-tsc: 2.0.29(typescript@5.4.2)
     optionalDependencies:
-      vite: 5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
+      vite: 5.4.2(@types/node@18.18.9)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
     transitivePeerDependencies:
       - '@types/node'
       - rollup
@@ -34285,24 +34119,6 @@ snapshots:
     dependencies:
       vue: 3.4.15(typescript@5.4.2)
 
-  vue-tsc@1.8.25(typescript@5.4.2)(vue@2.7.16):
-    dependencies:
-      '@volar/typescript': 1.11.1
-      '@vue/language-core': 1.8.25(typescript@5.4.2)(vue@2.7.16)
-      semver: 7.5.4
-      typescript: 5.4.2
-    transitivePeerDependencies:
-      - vue
-
-  vue-tsc@1.8.25(typescript@5.4.2)(vue@3.4.15(typescript@5.4.2)):
-    dependencies:
-      '@volar/typescript': 1.11.1
-      '@vue/language-core': 1.8.25(typescript@5.4.2)(vue@3.4.15(typescript@5.4.2))
-      semver: 7.5.4
-      typescript: 5.4.2
-    transitivePeerDependencies:
-      - vue
-
   vue-tsc@2.0.29(typescript@5.4.2):
     dependencies:
       '@volar/typescript': 2.4.0
@@ -34808,6 +34624,8 @@ snapshots:
 
   ws@8.16.0: {}
 
+  ws@8.18.0: {}
+
   x-is-string@0.1.0: {}
 
   xdg-basedir@4.0.0: {}
@@ -35002,7 +34820,7 @@ snapshots:
       - bluebird
       - supports-color
 
-  yeoman-generator@5.10.0(encoding@0.1.13):
+  yeoman-generator@5.10.0(encoding@0.1.13)(mem-fs@4.0.0):
     dependencies:
       chalk: 4.1.2
       dargs: 7.0.0
@@ -35010,7 +34828,7 @@ snapshots:
       execa: 5.1.1
       github-username: 6.0.0(encoding@0.1.13)
       lodash: 4.17.21
-      mem-fs-editor: 9.7.0
+      mem-fs-editor: 9.7.0(mem-fs@4.0.0)
       minimist: 1.2.8
       pacote: 15.2.0
       read-pkg-up: 7.0.1

From ef784d12b4b3044864217afde0acd3249c739454 Mon Sep 17 00:00:00 2001
From: Julio Ortega <julio.ortega@dialpad.com>
Date: Wed, 2 Oct 2024 11:51:11 -0600
Subject: [PATCH 6/6] chore: DLT-1942 combinator POC (#513)

Signed-off-by: Julio Ortega <julio.ortega@dialpad.com>
---
 .../baseComponents/ComponentCombinator.vue    | 95 +++----------------
 .../docs/.vuepress/config.js                  | 10 +-
 .../docs/.vuepress/theme/client.js            | 44 ++++++---
 .../docs/components/button.md                 |  6 +-
 .../docs/components/datepicker.md             |  4 +-
 apps/dialtone-documentation/package.json      |  1 +
 apps/dialtone-documentation/project.json      | 12 +--
 packages/combinator/package.json              | 12 +--
 packages/combinator/project.json              | 42 ++++++++
 packages/combinator/src/App.vue               | 86 +++++++----------
 packages/combinator/src/assets/dialtone.less  |  1 -
 .../combinator/src/assets/themes/dark.less    | 26 -----
 .../combinator/src/assets/themes/light.less   | 16 ----
 .../combinator/src/components/combinator.vue  | 41 ++------
 .../controls/control_suggestion.vue           |  2 +-
 .../src/components/renderer/renderer.vue      |  4 +-
 .../src/components/renderer/renderer_menu.vue | 12 +--
 .../components/renderer/renderer_target.vue   |  2 +
 packages/combinator/src/lib/info.js           |  9 +-
 packages/combinator/src/main.js               |  5 +-
 packages/combinator/vite.config.js            |  1 +
 pnpm-lock.yaml                                | 27 ++----
 22 files changed, 176 insertions(+), 282 deletions(-)
 create mode 100644 packages/combinator/project.json
 delete mode 100644 packages/combinator/src/assets/dialtone.less
 delete mode 100644 packages/combinator/src/assets/themes/dark.less
 delete mode 100644 packages/combinator/src/assets/themes/light.less

diff --git a/apps/dialtone-documentation/docs/.vuepress/baseComponents/ComponentCombinator.vue b/apps/dialtone-documentation/docs/.vuepress/baseComponents/ComponentCombinator.vue
index 8907850c76..a5548be709 100644
--- a/apps/dialtone-documentation/docs/.vuepress/baseComponents/ComponentCombinator.vue
+++ b/apps/dialtone-documentation/docs/.vuepress/baseComponents/ComponentCombinator.vue
@@ -1,51 +1,20 @@
 <template>
-  <div v-if="component && documentation">
-    <div class="d-d-flex d-mt64 d-h628">
-      <dtc-combinator
-        :documentation="documentation"
-        :component="component"
-        :library="library"
-        :variants="variants"
-      />
-    </div>
-    <ul
-      v-if="hasBlueprints"
-      class="d-ls-reset d-mt64 d-bgc-black-025 d-ba d-bar4"
-    >
-      <template
-        v-for="(variant, name) in variants"
-        :key="name"
-      >
-        <dtc-section
-          :heading="capitalize(name)"
-          :open="false"
-        >
-          <div class="d-d-flex d-hmx332">
-            <dtc-combinator
-              :documentation="documentation"
-              :component="component"
-              :library="library"
-              :variants="{ default: variant }"
-              root-class="d-baw0"
-              blueprint
-            />
-          </div>
-        </dtc-section>
-      </template>
-    </ul>
-  </div>
+  <dtc-combinator
+    :component="component"
+    :library="library"
+    :documentation="componentDocumentation"
+  />
 </template>
 
 <script>
-import { capitalize, resolveComponent } from 'vue';
-
 export default {
   name: 'ComponentCombinator',
 
   inject: [
     'dialtoneComponents',
+    'dialtoneComponentsDocumentation',
     'dialtoneIcons',
-    'variantBank',
+    'dialtoneIllustrations',
   ],
 
   props: {
@@ -60,58 +29,24 @@ export default {
     },
   },
 
-  data () {
-    return {
-      documentation: null,
-      iconLibrary: null,
-    };
-  },
-
   computed: {
     component () {
-      return resolveComponent(this.componentName);
+      return this.dialtoneComponents[this.componentName];
     },
 
-    variants () {
-      switch (this.componentName) {
-        case 'DtAvatar': return {
-          default: {
-            slots: {
-              default: {
-                initialValue: '<img src="/assets/images/person.png" alt="Avatar image">',
-              },
-            },
-          },
-        };
-        default: return this.variantBank[this.componentName];
-      }
+    componentDocumentation () {
+      return this.dialtoneComponentsDocumentation.find(
+        componentInfo => componentInfo.displayName === this.componentName,
+      );
     },
 
     library () {
       return {
-        ...Object.fromEntries(this.dialtoneComponents.map(componentName => {
-          return [componentName, resolveComponent(componentName)];
-        })),
-
-        ...Object.fromEntries(this.dialtoneIcons.map(componentName => {
-          return [componentName, resolveComponent(componentName)];
-        })),
+        ...this.dialtoneComponents,
+        ...this.dialtoneIcons,
+        ...this.dialtoneIllustrations,
       };
     },
-
-    hasBlueprints () {
-      return this.showBlueprints && Object.keys(this.variants).length > 0;
-    },
-  },
-
-  async beforeCreate () {
-    this.documentation = (
-      await import('@dialpad/dialtone-vue/component-documentation.json')
-    ).default;
-  },
-
-  methods: {
-    capitalize,
   },
 };
 </script>
diff --git a/apps/dialtone-documentation/docs/.vuepress/config.js b/apps/dialtone-documentation/docs/.vuepress/config.js
index d6dd4f8160..9384f0e2bf 100644
--- a/apps/dialtone-documentation/docs/.vuepress/config.js
+++ b/apps/dialtone-documentation/docs/.vuepress/config.js
@@ -1,11 +1,12 @@
 import { viteCommonjs } from '@originjs/vite-plugin-commonjs';
 import { defineUserConfig } from 'vuepress';
-import { getDirname, path } from '@vuepress/utils';
+import { getDirname } from '@vuepress/utils';
 import { viteBundler } from '@vuepress/bundler-vite';
 import viteSvgLoader from 'vite-svg-loader';
 import { googleAnalyticsPlugin } from '@vuepress/plugin-google-analytics';
 import { seoPlugin } from 'vuepress-plugin-seo2';
 import anchor from 'markdown-it-anchor';
+import path from 'path';
 
 const sidebar = require('../_data/site-nav.json');
 const { dialtoneVuepressTheme } = require('./theme');
@@ -55,15 +56,18 @@ export default defineUserConfig({
       },
       resolve: {
         alias: {
-          vue$: 'vue/dist/vue.esm-bundler.js',
+          'vue/server-renderer': path.resolve(__dirname, '../../node_modules/vue/server-renderer/index.js'),
+          vue: path.resolve(__dirname, '../../node_modules/vue/dist/vue.esm-bundler.js'),
         },
       },
+      define: {
+        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false,
+      },
     },
     vuePluginOptions: {
       template: {
         compilerOptions: {
           whitespace: 'preserve',
-          // isCustomElement: (tag) => tag.startsWith('dt-'),
         },
       },
     },
diff --git a/apps/dialtone-documentation/docs/.vuepress/theme/client.js b/apps/dialtone-documentation/docs/.vuepress/theme/client.js
index 1614c29895..b299b6d99b 100644
--- a/apps/dialtone-documentation/docs/.vuepress/theme/client.js
+++ b/apps/dialtone-documentation/docs/.vuepress/theme/client.js
@@ -10,6 +10,7 @@ import { flushPromises } from '@workspaceRoot/common/utils';
 // CSS
 import '@dialpad/dialtone-css/lib/dist/dialtone.css';
 import '@dialpad/dialtone-vue/css';
+import '@dialpad/dialtone-combinator/css';
 import './assets/less/dialtone-docs.less';
 import './assets/less/dialtone-syntax.less';
 
@@ -41,7 +42,8 @@ export default defineClientConfig({
     if (!__VUEPRESS_SSR__) {
       await initOverlayScrollbars();
       await registerDialtoneVue(app);
-      // await registerDialtoneCombinator(app);
+      await registerDialtoneCombinator(app);
+      await registerDialtoneIcons(app);
     }
     router.options.scrollBehavior = async (to, from, savedPosition) => {
       if (to.hash) {
@@ -75,36 +77,56 @@ export default defineClientConfig({
 
 async function registerDialtoneVue (app) {
   const module = await import('@dialpad/dialtone-vue');
+  const documentation = await import('@dialpad/dialtone-vue/component-documentation.json');
+
   const dialtoneConstants = [];
   const dialtoneComponents = [];
+  const dialtoneUtils = [];
 
   Object.keys(module).forEach(key => {
     if (/^[A-Z_]+$/.test(key)) {
       dialtoneConstants[key] = module[key];
     } else if (key.endsWith('Directive')) {
       app.use(module[key]);
-    } else {
+    } else if (key.startsWith('Dt')) {
       dialtoneComponents[key] = module[key];
       app.component(key, module[key]);
+    } else {
+      dialtoneUtils[key] = module[key];
     }
   });
 
+  app.provide('dialtoneUtils', dialtoneUtils);
   app.provide('dialtoneComponents', dialtoneComponents);
+  app.provide('dialtoneComponentsDocumentation', documentation.default);
 
   window.DIALTONE_CONSTANTS = dialtoneConstants;
 
   // setup custom emojis
-  const { setCustomEmojiUrl, setCustomEmojiJson } = dialtoneComponents;
+  const { setCustomEmojiUrl, setCustomEmojiJson } = dialtoneUtils;
   setCustomEmojiUrl('https://github.githubassets.com/images/icons/emoji/');
   setCustomEmojiJson(customEmojis);
 }
 
-// This is commented because we are currently not using the combinator and it's
-// adding some wrong styles to the page for the dt-list-item component.
+async function registerDialtoneCombinator (app) {
+  const { DtcCombinator } = await import('@dialpad/dialtone-combinator');
+  app.component('DtcCombinator', DtcCombinator);
+}
+
+async function registerDialtoneIcons (app) {
+  const icons = await import('@dialpad/dialtone-icons/vue3');
 
-// async function registerDialtoneCombinator (app) {
-//   const module = await import('@dialpad/dialtone-combinator');
-//   app.component('DtcCombinator', module.DtcCombinator);
-//   app.component('DtcSection', module.DtcSection);
-//   app.provide('variantBank', module.variantBank());
-// }
+  const dialtoneIcons = [];
+  const dialtoneIllustrations = [];
+
+  Object.keys(icons).forEach(key => {
+    if (key.startsWith('DtIcon')) {
+      dialtoneIcons[key] = icons[key];
+    } else if (key.startsWith('DtIllustration')) {
+      dialtoneIllustrations[key] = icons[key];
+    }
+  });
+
+  app.provide('dialtoneIcons', dialtoneIcons);
+  app.provide('dialtoneIllustrations', dialtoneIllustrations);
+}
diff --git a/apps/dialtone-documentation/docs/components/button.md b/apps/dialtone-documentation/docs/components/button.md
index 82cedc3f58..6d2aeb9f57 100644
--- a/apps/dialtone-documentation/docs/components/button.md
+++ b/apps/dialtone-documentation/docs/components/button.md
@@ -8,11 +8,7 @@ storybook: https://dialtone.dialpad.com/vue/?path=/story/components-button--defa
 figma_url: https://www.figma.com/file/2adf7JhZOncRyjYiy2joil/DT-Core%3A-Components-7?node-id=8923%3A20208&viewport=-1695%2C219%2C0.19&t=xHutRjwo1o5zMTgT-11
 ---
 
-<code-well-header>
-  <dt-button> Place Call </dt-button>
-</code-well-header>
-
-<!-- <component-combinator component-name="DtButton" /> -->
+<component-combinator component-name="DtButton"></component-combinator>
 
 ## Usage
 
diff --git a/apps/dialtone-documentation/docs/components/datepicker.md b/apps/dialtone-documentation/docs/components/datepicker.md
index 8eda8c3072..15a4e3afc6 100644
--- a/apps/dialtone-documentation/docs/components/datepicker.md
+++ b/apps/dialtone-documentation/docs/components/datepicker.md
@@ -577,8 +577,8 @@ The formatted numerical date string.
 <script setup>
 import { ref, inject } from 'vue';
 
-const dialtoneComponents = inject('dialtoneComponents');
-const { formatLong, formatMedium, formatShort, formatNoYear, formatNumerical } = dialtoneComponents;
+const dialtoneUtils = inject('dialtoneUtils');
+const { formatLong, formatMedium, formatShort, formatNoYear, formatNumerical } = dialtoneUtils;
 
 const locale = 'en-US';
 const changeToLabel = 'Change to';
diff --git a/apps/dialtone-documentation/package.json b/apps/dialtone-documentation/package.json
index 41f549b828..092767bd5b 100644
--- a/apps/dialtone-documentation/package.json
+++ b/apps/dialtone-documentation/package.json
@@ -46,6 +46,7 @@
   },
   "type": "module",
   "devDependencies": {
+    "@dialpad/dialtone-combinator": "workspace:*",
     "@dialpad/dialtone-css": "workspace:*",
     "@dialpad/dialtone-icons": "workspace:*",
     "@dialpad/dialtone-tokens": "workspace:*",
diff --git a/apps/dialtone-documentation/project.json b/apps/dialtone-documentation/project.json
index b1a0a5edf8..1f0e68bae7 100644
--- a/apps/dialtone-documentation/project.json
+++ b/apps/dialtone-documentation/project.json
@@ -7,7 +7,8 @@
         "dialtone-css:build",
         "dialtone-icons:build",
         "dialtone-tokens:build",
-        "dialtone-vue3:build"
+        "dialtone-vue3:build",
+        "dialtone-combinator:build"
       ],
       "inputs": [
         "{projectRoot}/docs/**/*",
@@ -15,9 +16,7 @@
         "!{projectRoot}/docs/.vuepress/.temp",
         "!{projectRoot}/docs/.vuepress/dist"
       ],
-      "outputs": [
-        "{projectRoot}/docs/.vuepress/dist"
-      ],
+      "outputs": ["{projectRoot}/docs/.vuepress/dist"],
       "options": {
         "cwd": "{projectRoot}",
         "command": "vuepress build docs"
@@ -29,13 +28,14 @@
         "dialtone-css:build",
         "dialtone-icons:build",
         "dialtone-tokens:build",
-        "dialtone-vue3:build"
+        "dialtone-vue3:build",
+        "dialtone-combinator:build"
       ],
       "options": {
         "cwd": "{projectRoot}",
         "commands": [
           {
-            "command": "nx watch --projects=dialtone-css,dialtone-icons,dialtone-tokens,dialtone-vue3 --includeDependentProjects -- nx run \\$NX_PROJECT_NAME:build"
+            "command": "nx watch --projects=dialtone-css,dialtone-icons,dialtone-tokens,dialtone-vue3,dialtone-combinator --includeDependentProjects -- nx run \\$NX_PROJECT_NAME:build"
           },
           {
             "command": "vuepress dev docs"
diff --git a/packages/combinator/package.json b/packages/combinator/package.json
index e80788f872..a5c5e1123b 100644
--- a/packages/combinator/package.json
+++ b/packages/combinator/package.json
@@ -3,10 +3,7 @@
   "version": "0.3.1",
   "description": "Dialtone vue component combinator playground",
   "scripts": {
-    "build": "vite build",
-    "dev": "vite",
     "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
-    "serve": "vite preview",
     "test": "vue-cli-service test:unit --timeout 100000 --colors --recursive --glob *.test.js src"
   },
   "bugs": {
@@ -18,9 +15,7 @@
   },
   "type": "module",
   "module": "./dist/dialtone-combinator.js",
-  "files": [
-    "dist"
-  ],
+  "files": ["dist"],
   "exports": {
     ".": "./dist/dialtone-combinator.js",
     "./css": "./dist/style.css",
@@ -36,13 +31,10 @@
     "just-clone": "^6.1.1"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.1.3",
     "@vue/cli-plugin-unit-mocha": "^5.0.8",
-    "@vue/test-utils": "^2.0.2",
     "chai": "^4.3.6",
     "eslint-plugin-jsdoc": "^39.3.6",
-    "eslint-plugin-mocha": "^10.1.0",
-    "vite": "^5.4.2"
+    "eslint-plugin-mocha": "^10.1.0"
   },
   "peerDependencies": {
     "vue": ">=3.2"
diff --git a/packages/combinator/project.json b/packages/combinator/project.json
new file mode 100644
index 0000000000..d91b7721cd
--- /dev/null
+++ b/packages/combinator/project.json
@@ -0,0 +1,42 @@
+{
+  "name": "dialtone-combinator",
+  "targets": {
+    "build": {
+      "executor": "nx:run-commands",
+      "dependsOn": [
+        "dialtone-css:build",
+        "dialtone-icons:build",
+        "dialtone-vue3:build"
+      ],
+      "inputs": [
+        "{projectRoot}/src/**/*",
+        "{projectRoot}/vite.config.js"
+      ],
+      "outputs": [ "{projectRoot}/dist" ],
+      "options": {
+        "cwd": "{projectRoot}",
+        "command": "vite build"
+      }
+    },
+    "start": {
+      "executor": "nx:run-commands",
+      "dependsOn": [
+        "dialtone-css:build",
+        "dialtone-icons:build",
+        "dialtone-tokens:build",
+        "dialtone-vue3:build"
+      ],
+      "options": {
+        "cwd": "{projectRoot}",
+        "commands": [
+          {
+            "command": "nx watch --projects=dialtone-css,dialtone-icons,dialtone-tokens,dialtone-vue3 --includeDependentProjects -- nx run \\$NX_PROJECT_NAME:build"
+          },
+          {
+            "command": "vite"
+          }
+        ]
+      }
+    }
+  }
+}
diff --git a/packages/combinator/src/App.vue b/packages/combinator/src/App.vue
index 7d3e291eae..4dc42c9c2a 100644
--- a/packages/combinator/src/App.vue
+++ b/packages/combinator/src/App.vue
@@ -1,70 +1,52 @@
 <template>
-  <div
-    class="dtc-preview d-d-flex d-fd-column d-ai-center d-w100p"
-    :class="`d-bgc-${background}`"
+  <dt-stack
+    gap="500"
+    class="d-ai-center"
   >
-    <dtc-button-bar
-      class="d-ps-absolute d-m8 d-t0 d-r0"
-      :value="background"
-      @click="updateBackground"
+    <dtc-suggestion
+      :value="component.name"
+      :suggestions="options"
+      @update:value="updateComponent"
     >
-      <template #orange-200>
-        <div class="d-w16 d-h16 d-ba d-bc-black d-bgc-orange-200" />
+      <span>Target Component</span>
+      <template #item="{ value }">
+        <span class="d-d-flex d-jc-space-between">
+          <span>{{ value }}</span>
+          <dt-badge
+            v-if="!isSupportedComponent(value)"
+            class="d-ml6"
+            color="yellow-300"
+          >
+            Unsupported
+          </dt-badge>
+          <dt-badge
+            v-if="value === DEFAULT_COMPONENT"
+            color="purple-500"
+          >
+            Default
+          </dt-badge>
+        </span>
       </template>
-      <template #black-800>
-        <div class="d-w16 d-h16 d-ba d-bc-black d-bgc-black-800" />
-      </template>
-      <template #white>
-        <div class="d-w16 d-h16 d-ba d-bc-black d-bgc-white" />
-      </template>
-    </dtc-button-bar>
-    <div class="d-mb16">
-      <dtc-suggestion
-        :value="component.name"
-        :suggestions="options"
-        @update:value="updateComponent"
-      >
-        <span>Target Component</span>
-        <template #item="{ value }">
-          <span class="d-d-flex d-jc-space-between">
-            <span>{{ value }}</span>
-            <dt-badge
-              v-if="!isSupportedComponent(value)"
-              class="d-ml6"
-              color="yellow-300"
-            >
-              Unsupported
-            </dt-badge>
-            <dt-badge
-              v-if="value === DEFAULT_COMPONENT"
-              color="purple-500"
-            >
-              Default
-            </dt-badge>
-          </span>
-        </template>
-      </dtc-suggestion>
-    </div>
-    <div class="d-d-flex d-as-stretch d-hmn0">
+    </dtc-suggestion>
+    <div class="d-mx128 lg:d-mx16">
       <Combinator
         :key="componentKey"
         :component="component"
         :variants="variants"
-        :documentation="documentation"
+        :documentation="componentDocumentation"
         :library="library"
       />
     </div>
-  </div>
+  </dt-stack>
 </template>
 
 <script setup>
-import documentation from '@/node_modules/@dialpad/dialtone-vue/dist/component-documentation.json';
+import documentation from '@dialpad/dialtone-vue/component-documentation.json';
 import * as modules from '@dialpad/dialtone-vue';
 import Combinator from './components/combinator.vue';
 import { computed, markRaw, onMounted, ref } from 'vue';
 import { DIALTONE_PREFIX } from '@/src/lib/constants';
-import { DtBadge } from '@dialpad/dialtone-vue';
-import DtcButtonBar from '@/src/components/tools/button_bar.vue';
+import { DtBadge, DtStack } from '@dialpad/dialtone-vue';
 import DtcSuggestion from '@/src/components/controls/control_suggestion.vue';
 import supportedComponentData from '@/src/supported_components.json';
 import variantBank from '@/src/variants/variants';
@@ -122,6 +104,10 @@ const library = computed(() => {
   };
 });
 
+const componentDocumentation = computed(() => {
+  return documentation.find(componentInfo => componentInfo.displayName === component.value.name);
+});
+
 onMounted(async () => {
   addEventListener('hashchange', () => {
     component.value = getComponentFromHash();
@@ -139,8 +125,6 @@ onMounted(async () => {
 
 </script>
 
-<style lang="less" src="./assets/transitions.less" />
-
 <style>
   .dtc-preview {
     padding-left: var(--dt-space-800);
diff --git a/packages/combinator/src/assets/dialtone.less b/packages/combinator/src/assets/dialtone.less
deleted file mode 100644
index 4c1c04770b..0000000000
--- a/packages/combinator/src/assets/dialtone.less
+++ /dev/null
@@ -1 +0,0 @@
-@import '@dialpad/dialtone-css/lib/build/less/dialtone';
diff --git a/packages/combinator/src/assets/themes/dark.less b/packages/combinator/src/assets/themes/dark.less
deleted file mode 100644
index aa84df8d1d..0000000000
--- a/packages/combinator/src/assets/themes/dark.less
+++ /dev/null
@@ -1,26 +0,0 @@
-@import (reference) "@/src/assets/dialtone.less";
-
-& {
-  --dtc-theme-color-foreground: var(--black-025);
-  --dtc-theme-color-foreground-darken: var(--black-050);
-  --dtc-theme-color-foreground-lighten: var(--dt-color-neutral-white);
-
-  --dtc-theme-color-background: var(--dt-color-black-700);
-  --dtc-theme-color-background-darken: var(--dt-color-black-800);
-  --dtc-theme-color-background-lighten: var(--dt-color-black-600);
-
-  color-scheme: dark;
-}
-
-.dtc-theme__button {
-  .d-btn--inverted();
-}
-
-.dtc-theme__tabs {
-  .d-tablist--inverted();
-  background-color: var(--dtc-theme-color-background-darken);
-}
-
-.dtc-theme__interactive {
-  color: var(--dt-color-purple-300);
-}
diff --git a/packages/combinator/src/assets/themes/light.less b/packages/combinator/src/assets/themes/light.less
deleted file mode 100644
index 25e1b6465a..0000000000
--- a/packages/combinator/src/assets/themes/light.less
+++ /dev/null
@@ -1,16 +0,0 @@
-& {
-  --dtc-theme-color-foreground: var(--dt-color-black-800);
-  --dtc-theme-color-foreground-darken: var(--dt-color-black-900);
-  --dtc-theme-color-foreground-lighten: var(--dt-color-black-700);
-
-  --dtc-theme-color-background: var(--dt-color-neutral-white);
-  --dtc-theme-color-background-darken: var(--black-050);
-  --dtc-theme-color-background-lighten: var(--dt-color-neutral-white);
-
-  color-scheme: light;
-}
-
-.dtc-theme__tabs {
-  background-color: var(--dtc-theme-color-background-lighten);
-  box-shadow: 0 1px 6px var(--dtc-theme-color-foreground-lighten);
-}
diff --git a/packages/combinator/src/components/combinator.vue b/packages/combinator/src/components/combinator.vue
index 915ae03328..e4bd926c05 100644
--- a/packages/combinator/src/components/combinator.vue
+++ b/packages/combinator/src/components/combinator.vue
@@ -1,24 +1,5 @@
 <template>
-  <div
-    class="dtc-combinator d-d-flex d-fd-column d-w100p"
-    :class="`dtc-theme--${settings.root.theme}`"
-  >
-    <div
-      v-if="!blueprint"
-      class="d-mb6"
-    >
-      <div
-        :class="headerClass"
-        class="d-of-hidden d-ba d-bar4"
-      >
-        <dtc-header
-          :component="component"
-          :variants="variants"
-          :selected-variant="selectedVariant"
-          @update:variant="updateVariant"
-        />
-      </div>
-    </div>
+  <div class="dtc-combinator">
     <dt-notice
       v-if="showUnsupportedWarning"
       class="d-wmx-unset"
@@ -29,14 +10,14 @@
     >
       May have unexpected behaviour.
     </dt-notice>
-    <div class="d-d-flex d-fl-grow1 d-hmx464">
+    <div class="d-d-flex d-hmx464">
       <div
-        class="dtc-root d-d-grid d-of-hidden d-ba d-bar4 d-w100p"
-        :class="{
-          [rootClass]: true,
-          [`dtc-root--sidebar-${settings.root.sidebar}`]: true,
-          'dtc-root--blueprint': blueprint,
-        }"
+        :class="[
+          'dtc-root d-d-grid d-of-hidden d-ba d-bar4 d-w100p',
+          `dtc-root--sidebar-${settings.root.sidebar}`,
+          rootClass,
+          { 'dtc-root--blueprint': blueprint },
+        ]"
       >
         <div class="dtc-root__top">
           <dtc-renderer
@@ -166,7 +147,7 @@ function updateVariant (e) {
 function initializeInfo () {
   const info = getComponentInfo(props.component, props.documentation);
 
-  const variantInfo = props.variants[selectedVariant.value];
+  const variantInfo = props.variants?.[selectedVariant.value];
 
   if (variantInfo) {
     Object.entries(variantInfo).forEach(([memberGroup, members]) => {
@@ -307,7 +288,7 @@ const settings = computedModel(
   },
 );
 
-const showUnsupportedWarning = ref(!supportedComponents.includes(props.component.name));
+const showUnsupportedWarning = ref(!supportedComponents.includes(props.component?.name));
 
 function hideUnsupportedMessage () {
   showUnsupportedWarning.value = false;
@@ -337,8 +318,6 @@ export default {
 
 <style lang="less">
 @import "@/src/assets/themes/base.less";
-.dtc-theme--light { @import "@/src/assets/themes/light.less"; }
-.dtc-theme--dark { @import "@/src/assets/themes/dark.less"; }
 
 .dtc-root {
   grid-template-rows: repeat(2, 1fr);
diff --git a/packages/combinator/src/components/controls/control_suggestion.vue b/packages/combinator/src/components/controls/control_suggestion.vue
index 32ebfef9bc..e2c106132d 100644
--- a/packages/combinator/src/components/controls/control_suggestion.vue
+++ b/packages/combinator/src/components/controls/control_suggestion.vue
@@ -2,7 +2,7 @@
   <div>
     <dt-recipe-combobox-with-popover
       ref="combobox"
-      list-aria-label="Valid values"
+      label="Valid values"
       max-height="512px"
       @select="e => onUpdate(suggestions[e])"
       @opened="onOpen"
diff --git a/packages/combinator/src/components/renderer/renderer.vue b/packages/combinator/src/components/renderer/renderer.vue
index ff46371298..26686baab6 100644
--- a/packages/combinator/src/components/renderer/renderer.vue
+++ b/packages/combinator/src/components/renderer/renderer.vue
@@ -31,12 +31,12 @@
     </template>
     <template #overlay>
       <div class="d-d-flex d-jc-flex-end d-pt4 d-pe-auto">
-        <dtc-renderer-menu
+        <!--<dtc-renderer-menu
           :theme="theme"
           :background="background"
           :positioning="positioning"
           @update:settings="updateSettings"
-        />
+        />-->
       </div>
     </template>
   </dtc-overlay>
diff --git a/packages/combinator/src/components/renderer/renderer_menu.vue b/packages/combinator/src/components/renderer/renderer_menu.vue
index 83f798c4dd..ab402fcdbc 100644
--- a/packages/combinator/src/components/renderer/renderer_menu.vue
+++ b/packages/combinator/src/components/renderer/renderer_menu.vue
@@ -61,9 +61,7 @@
 </template>
 
 <script setup>
-import { DtIconArrowLeft } from '@dialpad/dialtone-icons/vue3'
-import { DtIconAlignCenter } from '@dialpad/dialtone-icons/vue3'
-import { DtIconMenu } from '@dialpad/dialtone-icons/vue3'
+import { DtIconArrowLeft, DtIconAlignCenter, DtIconMenu } from '@dialpad/dialtone-icons/vue3';
 import DtcButtonBar from '../tools/button_bar.vue';
 import { DtButton, DtPopover } from '@dialpad/dialtone-vue';
 import { SETTINGS_UPDATE_EVENT } from '@/src/lib/constants';
@@ -101,11 +99,3 @@ export default {
   name: 'DtcRendererMenu',
 };
 </script>
-
-<style lang="less">
-@import (reference) "@/src/assets/dialtone.less";
-
-  .dtc-renderer-menu__button--dark {
-    .d-btn--inverted() !important;
-  }
-</style>
diff --git a/packages/combinator/src/components/renderer/renderer_target.vue b/packages/combinator/src/components/renderer/renderer_target.vue
index d2b97eeb65..fa462bea37 100644
--- a/packages/combinator/src/components/renderer/renderer_target.vue
+++ b/packages/combinator/src/components/renderer/renderer_target.vue
@@ -16,6 +16,7 @@ const props = defineProps({
     type: Object,
     required: true,
   },
+
   /**
    * Members to bind to the target component.
    */
@@ -23,6 +24,7 @@ const props = defineProps({
     type: undefined,
     required: true,
   },
+
   /**
    * Events to bind to the target component.
    */
diff --git a/packages/combinator/src/lib/info.js b/packages/combinator/src/lib/info.js
index 866c509253..17e0cd4677 100644
--- a/packages/combinator/src/lib/info.js
+++ b/packages/combinator/src/lib/info.js
@@ -1,6 +1,5 @@
 import { controlMap } from '@/src/lib/control';
 import { extendBinding, extendEvent, extendMember } from '@/src/lib/info_extend';
-import clone from 'just-clone';
 
 /**
  * Gets component data from the documentation and processing on it
@@ -11,12 +10,11 @@ import clone from 'just-clone';
  *
  * @param {object} component - The target component.
  * @param {object} documentation - The component documentation.
- * @returns {Array} A newly instantiated info object.
+ * @returns {object} A newly instantiated info object.
  */
 export function getComponentInfo (component, documentation) {
-  const info = clone(documentation.find(componentInfo => componentInfo.displayName === component.name));
-  extendInfo(info, component);
-  return info;
+  extendInfo(documentation, component);
+  return documentation;
 }
 
 /**
@@ -35,6 +33,7 @@ export function getComponentInfo (component, documentation) {
  * @param {object} info - The unprocessed info object.
  * @param {object} component - The target component.
  */
+// eslint-disable-next-line complexity
 function extendInfo (info, component) {
   if (!info) {
     return;
diff --git a/packages/combinator/src/main.js b/packages/combinator/src/main.js
index 93101cdbf3..872a2ed437 100644
--- a/packages/combinator/src/main.js
+++ b/packages/combinator/src/main.js
@@ -1,11 +1,12 @@
 import { createApp } from 'vue';
 import App from './App.vue';
 
-import '@dialpad/dialtone-css/lib/dist/dialtone.css';
+import '@dialpad/dialtone-css';
 import '@dialpad/dialtone-vue/css';
+import './assets/transitions.less';
 
 import { setTheme } from '@dialpad/dialtone-tokens/themes/config';
-import DpLight from '@dialpad/dialtone-tokens/themes/dp-light.js';
+import DpLight from '@dialpad/dialtone-tokens/themes/dp-light';
 
 setTheme(DpLight);
 
diff --git a/packages/combinator/vite.config.js b/packages/combinator/vite.config.js
index e0019aa5e8..c658359993 100644
--- a/packages/combinator/vite.config.js
+++ b/packages/combinator/vite.config.js
@@ -34,6 +34,7 @@ export default defineConfig({
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('.', import.meta.url)),
+      vue: 'vue/dist/vue.esm-bundler.js',
     },
   },
 });
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b055ecd44c..937e44c4d1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -374,6 +374,9 @@ importers:
 
   apps/dialtone-documentation:
     devDependencies:
+      '@dialpad/dialtone-combinator':
+        specifier: workspace:*
+        version: link:../../packages/combinator
       '@dialpad/dialtone-css':
         specifier: workspace:*
         version: link:../../packages/dialtone-css
@@ -498,15 +501,9 @@ importers:
         specifier: '>=3.2'
         version: 3.4.15(typescript@5.4.2)
     devDependencies:
-      '@vitejs/plugin-vue':
-        specifier: ^5.1.3
-        version: 5.1.3(vite@5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@3.4.15(typescript@5.4.2))
       '@vue/cli-plugin-unit-mocha':
         specifier: ^5.0.8
         version: 5.0.8(@vue/cli-service@5.0.8(@swc/core@1.3.96)(@vue/compiler-sfc@3.5.5)(ejs@3.1.9)(encoding@0.1.13)(handlebars@4.7.8)(lodash@4.17.21)(pug@3.0.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(twig@1.17.1)(vue-template-compiler@2.7.16(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))(webpack-sources@3.2.3))(encoding@0.1.13)(webpack@5.89.0(@swc/core@1.3.96))
-      '@vue/test-utils':
-        specifier: ^2.0.2
-        version: 2.4.2(@vue/server-renderer@3.4.15(vue@3.4.15(typescript@5.4.2)))(vue@3.4.15(typescript@5.4.2))
       chai:
         specifier: ^4.3.6
         version: 4.3.10
@@ -516,9 +513,6 @@ importers:
       eslint-plugin-mocha:
         specifier: ^10.1.0
         version: 10.5.0(eslint@8.56.0)
-      vite:
-        specifier: ^5.4.2
-        version: 5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
 
   packages/dialtone-css:
     dependencies:
@@ -21041,11 +21035,6 @@ snapshots:
       vite: 5.4.2(@types/node@18.18.9)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
       vue: 3.4.15(typescript@5.4.2)
 
-  '@vitejs/plugin-vue@5.1.3(vite@5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0))(vue@3.4.15(typescript@5.4.2))':
-    dependencies:
-      vite: 5.4.2(@types/node@20.9.0)(less@4.2.0)(sass@1.69.5)(sugarss@2.0.0)(terser@5.24.0)
-      vue: 3.4.15(typescript@5.4.2)
-
   '@vitest/expect@1.0.4':
     dependencies:
       '@vitest/spy': 1.0.4
@@ -30291,7 +30280,7 @@ snapshots:
     dependencies:
       htmlparser2: 3.10.1
       postcss: 7.0.39
-      postcss-syntax: 0.36.2(postcss-html@0.36.0)(postcss-jsx@0.36.4)(postcss-less@3.1.4)(postcss-markdown@0.36.0)(postcss-scss@2.1.1)(postcss@7.0.39)
+      postcss-syntax: 0.36.2(postcss-html@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-jsx@0.36.4(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-less@3.1.4)(postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-scss@2.1.1)(postcss@7.0.39)
 
   postcss-image-set-function@3.0.1:
     dependencies:
@@ -30306,7 +30295,7 @@ snapshots:
     dependencies:
       '@babel/core': 7.23.2
       postcss: 7.0.39
-      postcss-syntax: 0.36.2(postcss-html@0.36.0)(postcss-jsx@0.36.4)(postcss-less@3.1.4)(postcss-markdown@0.36.0)(postcss-scss@2.1.1)(postcss@7.0.39)
+      postcss-syntax: 0.36.2(postcss-html@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-jsx@0.36.4(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-less@3.1.4)(postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-scss@2.1.1)(postcss@7.0.39)
     transitivePeerDependencies:
       - supports-color
 
@@ -30362,7 +30351,7 @@ snapshots:
   postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39):
     dependencies:
       postcss: 7.0.39
-      postcss-syntax: 0.36.2(postcss-html@0.36.0)(postcss-jsx@0.36.4)(postcss-less@3.1.4)(postcss-markdown@0.36.0)(postcss-scss@2.1.1)(postcss@7.0.39)
+      postcss-syntax: 0.36.2(postcss-html@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-jsx@0.36.4(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-less@3.1.4)(postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-scss@2.1.1)(postcss@7.0.39)
       remark: 10.0.1
       unist-util-find-all-after: 1.0.5
 
@@ -30755,7 +30744,7 @@ snapshots:
       postcss-value-parser: 4.2.0
       svgo: 3.0.2
 
-  postcss-syntax@0.36.2(postcss-html@0.36.0)(postcss-jsx@0.36.4)(postcss-less@3.1.4)(postcss-markdown@0.36.0)(postcss-scss@2.1.1)(postcss@7.0.39):
+  postcss-syntax@0.36.2(postcss-html@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-jsx@0.36.4(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-less@3.1.4)(postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-scss@2.1.1)(postcss@7.0.39):
     dependencies:
       postcss: 7.0.39
     optionalDependencies:
@@ -32827,7 +32816,7 @@ snapshots:
       postcss-sass: 0.3.5
       postcss-scss: 2.1.1
       postcss-selector-parser: 3.1.2
-      postcss-syntax: 0.36.2(postcss-html@0.36.0)(postcss-jsx@0.36.4)(postcss-less@3.1.4)(postcss-markdown@0.36.0)(postcss-scss@2.1.1)(postcss@7.0.39)
+      postcss-syntax: 0.36.2(postcss-html@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-jsx@0.36.4(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-less@3.1.4)(postcss-markdown@0.36.0(postcss-syntax@0.36.2(postcss@8.4.39))(postcss@7.0.39))(postcss-scss@2.1.1)(postcss@7.0.39)
       postcss-value-parser: 3.3.1
       resolve-from: 4.0.0
       signal-exit: 3.0.7