From 5fe28db539fcac5dfd6a529dc78338fe32d1d475 Mon Sep 17 00:00:00 2001
From: Nitwel <nitwel@arcor.de>
Date: Thu, 1 Sep 2022 22:07:31 +0200
Subject: [PATCH] Add Components Package (#15094)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* move components without dependencies to packages

* make every components use vue script setup

* move components and utils from shared to @directus/components

* fix imports

* move over some more components

* get rid of unnecessary isEmpty and notEmpty

* move pagination

* fix missing !

* move groupable components

* move text-overflow and useElementSize

* fix icons not being shown

* add first unit tests

* remove capitalizeFirst

* simple cleanup

* add css-var unit test

* move over most other components

* make every component use script setup

* add some more unit tests

* add more tests and burn v-switch to the ground. 🔥

* add checkbox tests

* start with next test

* add storybook

* add more pages to storybook

* add final stories

* fix stories actions

* improve action fix

* cleaning props and adding tests

* unit tests -.-

* add some documentation to components

* Add docs to each prop

* clean storybook paths

* add more unit tests

* apply v-select fix

* update lock file

* small tweaks

* move back to shared

* fix imports

* fix imports

* cleaning

* stories to typescript

* Fix version number

Co-authored-by: Rijk van Zanten <rijkvanzanten@me.com>
---
 .eslintignore                                 |    1 +
 app/package.json                              |    2 +-
 app/src/components/register.ts                |  106 +-
 app/src/components/transition/bounce/index.ts |    4 -
 app/src/components/transition/dialog/index.ts |    4 -
 app/src/components/transition/expand/index.ts |    4 -
 .../transition/expand/transition-expand.vue   |   28 -
 app/src/components/transition/index.ts        |    4 -
 .../v-checkbox-tree-checkbox.vue              |  477 -
 .../v-checkbox-tree/v-checkbox-tree.vue       |  164 -
 app/src/components/v-date-picker.vue          |  263 +-
 app/src/components/v-detail.vue               |   91 +-
 app/src/components/v-dialog.vue               |  112 +-
 app/src/components/v-drawer.vue               |   95 +-
 app/src/components/v-error.vue                |   70 +-
 .../v-field-list/v-field-list-item.vue        |    5 +-
 .../components/v-field-list/v-field-list.vue  |    2 +-
 .../v-field-template/field-list-item.vue      |   30 +-
 .../v-field-template/v-field-template.vue     |  511 +-
 .../v-form/form-field-interface.vue           |   88 +-
 .../components/v-form/form-field-label.vue    |   88 +-
 app/src/components/v-form/form-field-menu.vue |   78 +-
 app/src/components/v-form/form-field.vue      |    2 +-
 app/src/components/v-form/v-form.vue          |  610 +-
 app/src/components/v-highlight.vue            |  142 -
 app/src/components/v-hover.vue                |   51 -
 app/src/components/v-icon/social-icon.vue     |   28 -
 app/src/components/v-item-group.vue           |   52 -
 app/src/components/v-item.vue                 |   42 -
 app/src/components/v-list-group.vue           |  145 -
 app/src/components/v-menu.vue                 |  609 --
 app/src/components/v-pagination.vue           |  196 -
 app/src/components/v-select/v-select.vue      |  454 -
 app/src/components/v-switch.vue               |  155 -
 app/src/components/v-tab-item.vue             |   23 -
 app/src/components/v-table/table-header.vue   |    4 +-
 app/src/components/v-tabs-items.vue           |   26 -
 app/src/components/v-tabs.vue                 |   73 -
 app/src/components/v-template-input.vue       |  361 -
 app/src/components/v-text-overflow.vue        |   55 -
 app/src/components/v-upload.vue               |  376 +-
 app/src/displays/file/file.vue                |    2 +-
 .../displays/translations/translations.vue    |    4 +-
 .../select-multiple-checkbox.vue              |    2 +-
 .../interfaces/select-radio/select-radio.vue  |    2 +-
 .../interfaces/translations/translations.vue  |    4 +-
 app/src/layouts/cards/cards.vue               |    3 +-
 app/src/modules/insights/routes/dashboard.vue |    2 +-
 .../insights/routes/panel-configuration.vue   |    1 -
 .../field-detail-advanced-display.vue         |    1 -
 .../field-detail-advanced-interface.vue       |    1 -
 .../modules/settings/routes/flows/flow.vue    |    2 +-
 app/src/stores/collections.ts                 |    5 +-
 app/src/stores/fields.ts                      |    5 +-
 app/src/utils/capitalize-first.test.ts        |   11 -
 app/src/utils/capitalize-first.ts             |   15 -
 app/src/utils/get-js-type.ts                  |   28 +-
 app/src/utils/is-empty.test.ts                |   41 -
 app/src/utils/is-empty.ts                     |    7 -
 app/src/utils/percentage.ts                   |    2 +-
 app/src/utils/translate-shortcut.ts           |    6 +-
 .../private/components/comment-input.vue      |    1 -
 .../views/private/components/search-input.vue |    2 +-
 .../private/components/sidebar-detail.vue     |    2 +-
 app/src/views/private/private-view.vue        |    2 +-
 packages/components/.gitignore                |    1 +
 packages/components/.storybook/fix-actions.js |   22 +
 packages/components/.storybook/main.js        |   15 +
 .../components/.storybook/preview-body.html   |    2 +
 packages/components/.storybook/preview.js     |   46 +
 packages/components/.storybook/register.js    |  138 +
 packages/components/.storybook/styles.scss    |    3 +
 packages/components/package.json              |   77 +
 packages/components/shim.d.ts                 |    6 +
 packages/components/src/__utils__/focus.ts    |   11 +
 packages/components/src/__utils__/router.ts   |    9 +
 packages/components/src/__utils__/tooltip.ts  |    7 +
 .../__snapshots__/V-tab.test.ts.snap          |    3 +
 .../__snapshots__/v-avatar.test.ts.snap       |    3 +
 .../__snapshots__/v-badge.test.ts.snap        |    3 +
 .../__snapshots__/v-breadcrumb.test.ts.snap   |    3 +
 .../__snapshots__/v-button.test.ts.snap       |    9 +
 .../__snapshots__/v-card-actions.test.ts.snap |    3 +
 .../v-card-subtitle.test.ts.snap              |    3 +
 .../__snapshots__/v-card-text.test.ts.snap    |    3 +
 .../__snapshots__/v-card-title.test.ts.snap   |    3 +
 .../__snapshots__/v-card.test.ts.snap         |    3 +
 .../__snapshots__/v-checkbox.test.ts.snap     |    9 +
 .../__snapshots__/v-chip.test.ts.snap         |    3 +
 .../__snapshots__/v-divider.test.ts.snap      |    7 +
 .../__snapshots__/v-fancy-select.test.ts.snap |   39 +
 .../__snapshots__/v-highlight.test.ts.snap    |   10 +
 .../__snapshots__/v-hover.test.ts.snap        |    3 +
 .../__snapshots__/v-icon-file.test.ts.snap    |    7 +
 .../__snapshots__/v-info.test.ts.snap         |   11 +
 .../__snapshots__/v-input.test.ts.snap        |   15 +
 .../__snapshots__/v-menu.test.ts.snap         |    9 +
 .../__snapshots__/v-notice.test.ts.snap       |    7 +
 .../__snapshots__/v-overlay.test.ts.snap      |    8 +
 .../__snapshots__/v-pagination.test.ts.snap   |   18 +
 .../v-progress-circular.test.ts.snap          |    8 +
 .../v-progress-linear.test.ts.snap            |    7 +
 .../__snapshots__/v-radio.test.ts.snap        |    7 +
 .../__snapshots__/v-sheet.test.ts.snap        |    3 +
 .../v-skeleton-loader.test.ts.snap            |    8 +
 .../__snapshots__/v-slider.test.ts.snap       |   13 +
 .../__snapshots__/v-tabs.test.ts.snap         |    3 +
 .../v-text-overflow.test.ts.snap              |    3 +
 .../__snapshots__/v-textarea.test.ts.snap     |    8 +
 .../v-workspace-tile.test.ts.snap             |   18 +
 .../__snapshots__/v-workspace.test.ts.snap    |   10 +
 .../src/components/transition/bounce.vue      |    0
 .../src/components/transition/dialog.vue      |    0
 .../components/transition/expand-methods.ts   |    4 +-
 .../src/components/transition/expand.vue      |   33 +
 .../src/components/v-avatar.test.ts           |   36 +
 .../components}/src/components/v-avatar.vue   |   38 +-
 .../components/src/components/v-badge.test.ts |   60 +
 .../components}/src/components/v-badge.vue    |   60 +-
 .../src/components/v-breadcrumb.test.ts       |   37 +
 .../src/components/v-breadcrumb.vue           |   22 +-
 .../src/components/v-button.test.ts           |   60 +
 .../components}/src/components/v-button.vue   |  301 +-
 .../src/components/v-card-actions.test.ts     |   16 +
 .../src/components/v-card-actions.vue         |    0
 .../src/components/v-card-subtitle.test.ts    |   16 +
 .../src/components/v-card-subtitle.vue        |    0
 .../src/components/v-card-text.test.ts        |   16 +
 .../src/components/v-card-text.vue            |    0
 .../src/components/v-card-title.test.ts       |   16 +
 .../src/components/v-card-title.vue           |    0
 .../components/src/components/v-card.test.ts  |   30 +
 .../components}/src/components/v-card.vue     |   26 +-
 .../v-checkbox-tree.test.ts.snap              |    3 +
 .../v-checkbox-tree/use-visible-children.ts   |   13 +-
 .../v-checkbox-tree-checkbox.vue              |  431 +
 .../v-checkbox-tree/v-checkbox-tree.test.ts   |   91 +
 .../v-checkbox-tree/v-checkbox-tree.vue       |  157 +
 .../src/components/v-checkbox.test.ts         |   92 +
 .../components}/src/components/v-checkbox.vue |  176 +-
 .../components/src/components/v-chip.test.ts  |   65 +
 .../components}/src/components/v-chip.vue     |  118 +-
 .../src/components/v-divider.test.ts          |   30 +
 .../components}/src/components/v-divider.vue  |   30 +-
 .../src/components/v-emoji-picker.vue         |    0
 .../src/components/v-fancy-select.test.ts     |   59 +
 .../src/components/v-fancy-select.vue         |    8 +-
 .../src/components/v-highlight.test.ts        |   29 +
 .../components/src/components/v-highlight.vue |  139 +
 .../components/src/components/v-hover.test.ts |   90 +
 .../components/src/components/v-hover.vue     |   45 +
 .../src/components/v-icon-file.test.ts        |   19 +
 .../src/components/v-icon-file.vue            |    1 +
 .../v-icon/__snapshots__/v-icon.test.ts.snap  |    3 +
 .../v-icon/custom-icons/bookmark_save.vue     |    0
 .../components/v-icon/custom-icons/box.vue    |    0
 .../v-icon/custom-icons/commit_node.vue       |    0
 .../v-icon/custom-icons/directus.vue          |    0
 .../v-icon/custom-icons/flip_horizontal.vue   |    0
 .../v-icon/custom-icons/flip_vertical.vue     |    0
 .../v-icon/custom-icons/folder_lock.vue       |    0
 .../v-icon/custom-icons/folder_move.vue       |    0
 .../components/v-icon/custom-icons/grid_1.vue |    0
 .../components/v-icon/custom-icons/grid_2.vue |    0
 .../components/v-icon/custom-icons/grid_3.vue |    0
 .../components/v-icon/custom-icons/grid_4.vue |    0
 .../components/v-icon/custom-icons/grid_5.vue |    0
 .../components/v-icon/custom-icons/grid_6.vue |    0
 .../components/v-icon/custom-icons/logout.vue |    0
 .../v-icon/custom-icons/signal_wifi_1_bar.vue |    0
 .../v-icon/custom-icons/signal_wifi_2_bar.vue |    0
 .../v-icon/custom-icons/signal_wifi_3_bar.vue |    0
 .../src/components/v-icon/social-icon.vue     |   30 +
 .../src/components/v-icon/v-icon.test.ts      |   51 +
 .../src/components/v-icon/v-icon.vue          |  199 +-
 .../components/src/components/v-info.test.ts  |   53 +
 .../components}/src/components/v-info.vue     |   36 +-
 .../components/src/components/v-input.test.ts |   66 +
 .../components}/src/components/v-input.vue    |   21 +
 .../src/components/v-item-group.vue           |   47 +
 packages/components/src/components/v-item.vue |   36 +
 .../src/components/v-list-group.vue           |  128 +
 .../src/components/v-list-item-content.vue    |    0
 .../src/components/v-list-item-hint.vue       |   15 +-
 .../src/components/v-list-item-icon.vue       |   15 +-
 .../src/components/v-list-item.vue            |  226 +-
 .../components}/src/components/v-list.vue     |   97 +-
 .../components/src/components/v-menu._test.ts |   36 +
 packages/components/src/components/v-menu.vue |  576 +
 .../src/components/v-notice.test.ts           |   61 +
 .../components}/src/components/v-notice.vue   |   67 +-
 .../src/components/v-overlay.test.ts          |   39 +
 .../components}/src/components/v-overlay.vue  |   44 +-
 .../src/components/v-pagination.test.ts       |   65 +
 .../src/components/v-pagination.vue           |  202 +
 .../components/v-progress-circular.test.ts    |   40 +
 .../src/components/v-progress-circular.vue    |   54 +-
 .../src/components/v-progress-linear.test.ts  |   30 +
 .../src/components/v-progress-linear.vue      |   85 +-
 .../components/src/components/v-radio.test.ts |   43 +
 .../components}/src/components/v-radio.vue    |   89 +-
 .../__snapshots__/v-select.test.ts.snap       |    3 +
 .../v-select/select-list-item-group.vue       |   80 +-
 .../components/v-select/select-list-item.vue  |   64 +-
 .../src/components/v-select/types.ts          |    0
 .../src/components/v-select/v-select.test.ts  |   54 +
 .../src/components/v-select/v-select.vue      |  418 +
 .../src/components/v-sheet.test.ts            |    0
 .../components}/src/components/v-sheet.vue    |    0
 .../src/components/v-skeleton-loader.test.ts  |   30 +
 .../src/components/v-skeleton-loader.vue      |   16 +-
 .../src/components/v-slider.test.ts           |   50 +
 .../components}/src/components/v-slider.vue   |  111 +-
 .../components/src/components/v-tab-item.vue  |   20 +
 .../components}/src/components/v-tab.vue      |   50 +-
 .../src/components/v-tabs-items.vue           |   22 +
 .../components/src/components/v-tabs.test.ts  |   22 +
 packages/components/src/components/v-tabs.vue |   70 +
 .../src/components/v-template-input.vue       |  341 +
 .../src/components/v-text-overflow.test.ts    |   39 +
 .../src/components/v-text-overflow.vue        |   48 +
 .../src/components/v-textarea.test.ts         |   69 +
 .../components}/src/components/v-textarea.vue |  117 +-
 .../src/components/v-workspace-tile.test.ts   |   36 +
 .../src/components/v-workspace-tile.vue       |   12 +
 .../src/components/v-workspace.test.ts        |   66 +
 .../src/components/v-workspace.vue            |   31 +-
 packages/components/src/shims.d.ts            |    6 +
 packages/components/src/styles/no-wrap.scss   |    5 +
 .../stories/transition-bounce.stories.ts      |   23 +
 .../stories/transition-dialog.stories.ts      |   23 +
 .../stories/transition-expand.stories.ts      |   23 +
 .../components/stories/v-avatar.stories.ts    |   23 +
 .../components/stories/v-badge.stories.ts     |   24 +
 .../stories/v-breadcrumb.stories.ts           |   38 +
 .../components/stories/v-button.stories.ts    |   24 +
 packages/components/stories/v-card.stories.ts |   33 +
 .../stories/v-checkbox-tree.stories.ts        |   45 +
 .../components/stories/v-checkbox.stories.ts  |   24 +
 packages/components/stories/v-chip.stories.ts |   23 +
 .../components/stories/v-divider.stories.ts   |   23 +
 .../stories/v-emoji-picker.stories.ts         |   23 +
 .../stories/v-fancy-select.stories.ts         |   40 +
 .../components/stories/v-highlight.stories.ts |   25 +
 .../components/stories/v-hover.stories.ts     |   23 +
 .../components/stories/v-icon-file.stories.ts |   24 +
 packages/components/stories/v-icon.stories.ts |   24 +
 packages/components/stories/v-info.stories.ts |   25 +
 .../components/stories/v-input.stories.ts     |   25 +
 .../stories/v-item-group.stories.ts           |   24 +
 .../stories/v-list-group.stories.ts           |   40 +
 .../components/stories/v-list-item.stories.ts |   26 +
 packages/components/stories/v-list.stories.ts |   30 +
 packages/components/stories/v-menu.stories.ts |   43 +
 .../components/stories/v-notice.stories.ts    |   25 +
 .../components/stories/v-overlay.stories.ts   |   24 +
 .../stories/v-pagination.stories.ts           |   26 +
 .../stories/v-progress-circular.stories.ts    |   24 +
 .../stories/v-progress-linear.stories.ts      |   25 +
 .../components/stories/v-radio.stories.ts     |   26 +
 .../components/stories/v-select.stories.ts    |   37 +
 .../components/stories/v-sheet.stories.ts     |   23 +
 .../stories/v-skeleton-loader.stories.ts      |   28 +
 .../components/stories/v-slider.stories.ts    |   31 +
 packages/components/stories/v-tabs.stories.ts |   43 +
 .../stories/v-template-input.stories.ts       |   31 +
 .../stories/v-text-overflow.stories.ts        |   24 +
 .../components/stories/v-textarea.stories.ts  |   25 +
 .../stories/v-workspace-tile.stories.ts       |   24 +
 .../components/stories/v-workspace.stories.ts |   40 +
 packages/components/stub/empty.d.ts           |    1 +
 packages/components/tsconfig.json             |   24 +
 packages/components/vite.config.js            |   17 +
 packages/extensions-sdk/package.json          |    1 +
 packages/shared/package.json                  |    1 +
 packages/shared/src/composables/index.ts      |    4 +
 .../src/composables/use-custom-selection.ts   |    0
 .../src/composables/use-element-size.ts       |    5 +-
 .../shared}/src/composables/use-groupable.ts  |   13 +-
 packages/shared/src/composables/use-items.ts  |    3 +-
 .../shared}/src/composables/use-size-class.ts |   12 +-
 pnpm-lock.yaml                                | 9500 ++++++++++++++++-
 282 files changed, 17644 insertions(+), 6081 deletions(-)
 delete mode 100644 app/src/components/transition/bounce/index.ts
 delete mode 100644 app/src/components/transition/dialog/index.ts
 delete mode 100644 app/src/components/transition/expand/index.ts
 delete mode 100644 app/src/components/transition/expand/transition-expand.vue
 delete mode 100644 app/src/components/transition/index.ts
 delete mode 100644 app/src/components/v-checkbox-tree/v-checkbox-tree-checkbox.vue
 delete mode 100644 app/src/components/v-checkbox-tree/v-checkbox-tree.vue
 delete mode 100644 app/src/components/v-highlight.vue
 delete mode 100644 app/src/components/v-hover.vue
 delete mode 100644 app/src/components/v-icon/social-icon.vue
 delete mode 100644 app/src/components/v-item-group.vue
 delete mode 100644 app/src/components/v-item.vue
 delete mode 100644 app/src/components/v-list-group.vue
 delete mode 100644 app/src/components/v-menu.vue
 delete mode 100644 app/src/components/v-pagination.vue
 delete mode 100644 app/src/components/v-select/v-select.vue
 delete mode 100644 app/src/components/v-switch.vue
 delete mode 100644 app/src/components/v-tab-item.vue
 delete mode 100644 app/src/components/v-tabs-items.vue
 delete mode 100644 app/src/components/v-tabs.vue
 delete mode 100644 app/src/components/v-template-input.vue
 delete mode 100644 app/src/components/v-text-overflow.vue
 delete mode 100644 app/src/utils/capitalize-first.test.ts
 delete mode 100644 app/src/utils/capitalize-first.ts
 delete mode 100644 app/src/utils/is-empty.test.ts
 delete mode 100644 app/src/utils/is-empty.ts
 create mode 100644 packages/components/.gitignore
 create mode 100644 packages/components/.storybook/fix-actions.js
 create mode 100644 packages/components/.storybook/main.js
 create mode 100644 packages/components/.storybook/preview-body.html
 create mode 100644 packages/components/.storybook/preview.js
 create mode 100644 packages/components/.storybook/register.js
 create mode 100644 packages/components/.storybook/styles.scss
 create mode 100644 packages/components/package.json
 create mode 100644 packages/components/shim.d.ts
 create mode 100644 packages/components/src/__utils__/focus.ts
 create mode 100644 packages/components/src/__utils__/router.ts
 create mode 100644 packages/components/src/__utils__/tooltip.ts
 create mode 100644 packages/components/src/components/__snapshots__/V-tab.test.ts.snap
 create mode 100644 packages/components/src/components/__snapshots__/v-avatar.test.ts.snap
 create mode 100644 packages/components/src/components/__snapshots__/v-badge.test.ts.snap
 create mode 100644 packages/components/src/components/__snapshots__/v-breadcrumb.test.ts.snap
 create mode 100644 packages/components/src/components/__snapshots__/v-button.test.ts.snap
 create mode 100644 packages/components/src/components/__snapshots__/v-card-actions.test.ts.snap
 create mode 100644 packages/components/src/components/__snapshots__/v-card-subtitle.test.ts.snap
 create mode 100644 packages/components/src/components/__snapshots__/v-card-text.test.ts.snap
 create mode 100644 packages/components/src/components/__snapshots__/v-card-title.test.ts.snap
 create mode 100644 packages/components/src/components/__snapshots__/v-card.test.ts.snap
 create mode 100644 packages/components/src/components/__snapshots__/v-checkbox.test.ts.snap
 create mode 100644 packages/components/src/components/__snapshots__/v-chip.test.ts.snap
 create mode 100644 packages/components/src/components/__snapshots__/v-divider.test.ts.snap
 create mode 100644 packages/components/src/components/__snapshots__/v-fancy-select.test.ts.snap
 create mode 100644 packages/components/src/components/__snapshots__/v-highlight.test.ts.snap
 create mode 100644 packages/components/src/components/__snapshots__/v-hover.test.ts.snap
 create mode 100644 packages/components/src/components/__snapshots__/v-icon-file.test.ts.snap
 create mode 100644 packages/components/src/components/__snapshots__/v-info.test.ts.snap
 create mode 100644 packages/components/src/components/__snapshots__/v-input.test.ts.snap
 create mode 100644 packages/components/src/components/__snapshots__/v-menu.test.ts.snap
 create mode 100644 packages/components/src/components/__snapshots__/v-notice.test.ts.snap
 create mode 100644 packages/components/src/components/__snapshots__/v-overlay.test.ts.snap
 create mode 100644 packages/components/src/components/__snapshots__/v-pagination.test.ts.snap
 create mode 100644 packages/components/src/components/__snapshots__/v-progress-circular.test.ts.snap
 create mode 100644 packages/components/src/components/__snapshots__/v-progress-linear.test.ts.snap
 create mode 100644 packages/components/src/components/__snapshots__/v-radio.test.ts.snap
 create mode 100644 packages/components/src/components/__snapshots__/v-sheet.test.ts.snap
 create mode 100644 packages/components/src/components/__snapshots__/v-skeleton-loader.test.ts.snap
 create mode 100644 packages/components/src/components/__snapshots__/v-slider.test.ts.snap
 create mode 100644 packages/components/src/components/__snapshots__/v-tabs.test.ts.snap
 create mode 100644 packages/components/src/components/__snapshots__/v-text-overflow.test.ts.snap
 create mode 100644 packages/components/src/components/__snapshots__/v-textarea.test.ts.snap
 create mode 100644 packages/components/src/components/__snapshots__/v-workspace-tile.test.ts.snap
 create mode 100644 packages/components/src/components/__snapshots__/v-workspace.test.ts.snap
 rename app/src/components/transition/bounce/transition-bounce.vue => packages/components/src/components/transition/bounce.vue (100%)
 rename app/src/components/transition/dialog/transition-dialog.vue => packages/components/src/components/transition/dialog.vue (100%)
 rename app/src/components/transition/expand/transition-expand-methods.ts => packages/components/src/components/transition/expand-methods.ts (94%)
 create mode 100644 packages/components/src/components/transition/expand.vue
 create mode 100644 packages/components/src/components/v-avatar.test.ts
 rename {app => packages/components}/src/components/v-avatar.vue (64%)
 create mode 100644 packages/components/src/components/v-badge.test.ts
 rename {app => packages/components}/src/components/v-badge.vue (70%)
 create mode 100644 packages/components/src/components/v-breadcrumb.test.ts
 rename {app => packages/components}/src/components/v-breadcrumb.vue (87%)
 create mode 100644 packages/components/src/components/v-button.test.ts
 rename {app => packages/components}/src/components/v-button.vue (65%)
 create mode 100644 packages/components/src/components/v-card-actions.test.ts
 rename {app => packages/components}/src/components/v-card-actions.vue (100%)
 create mode 100644 packages/components/src/components/v-card-subtitle.test.ts
 rename {app => packages/components}/src/components/v-card-subtitle.vue (100%)
 create mode 100644 packages/components/src/components/v-card-text.test.ts
 rename {app => packages/components}/src/components/v-card-text.vue (100%)
 create mode 100644 packages/components/src/components/v-card-title.test.ts
 rename {app => packages/components}/src/components/v-card-title.vue (100%)
 create mode 100644 packages/components/src/components/v-card.test.ts
 rename {app => packages/components}/src/components/v-card.vue (82%)
 create mode 100644 packages/components/src/components/v-checkbox-tree/__snapshots__/v-checkbox-tree.test.ts.snap
 rename {app => packages/components}/src/components/v-checkbox-tree/use-visible-children.ts (79%)
 create mode 100644 packages/components/src/components/v-checkbox-tree/v-checkbox-tree-checkbox.vue
 create mode 100644 packages/components/src/components/v-checkbox-tree/v-checkbox-tree.test.ts
 create mode 100644 packages/components/src/components/v-checkbox-tree/v-checkbox-tree.vue
 create mode 100644 packages/components/src/components/v-checkbox.test.ts
 rename {app => packages/components}/src/components/v-checkbox.vue (55%)
 create mode 100644 packages/components/src/components/v-chip.test.ts
 rename {app => packages/components}/src/components/v-chip.vue (65%)
 create mode 100644 packages/components/src/components/v-divider.test.ts
 rename {app => packages/components}/src/components/v-divider.vue (82%)
 rename {app => packages/components}/src/components/v-emoji-picker.vue (100%)
 create mode 100644 packages/components/src/components/v-fancy-select.test.ts
 rename {app => packages/components}/src/components/v-fancy-select.vue (91%)
 create mode 100644 packages/components/src/components/v-highlight.test.ts
 create mode 100644 packages/components/src/components/v-highlight.vue
 create mode 100644 packages/components/src/components/v-hover.test.ts
 create mode 100644 packages/components/src/components/v-hover.vue
 create mode 100644 packages/components/src/components/v-icon-file.test.ts
 rename {app => packages/components}/src/components/v-icon-file.vue (96%)
 create mode 100644 packages/components/src/components/v-icon/__snapshots__/v-icon.test.ts.snap
 rename {app => packages/components}/src/components/v-icon/custom-icons/bookmark_save.vue (100%)
 rename {app => packages/components}/src/components/v-icon/custom-icons/box.vue (100%)
 rename {app => packages/components}/src/components/v-icon/custom-icons/commit_node.vue (100%)
 rename {app => packages/components}/src/components/v-icon/custom-icons/directus.vue (100%)
 rename {app => packages/components}/src/components/v-icon/custom-icons/flip_horizontal.vue (100%)
 rename {app => packages/components}/src/components/v-icon/custom-icons/flip_vertical.vue (100%)
 rename {app => packages/components}/src/components/v-icon/custom-icons/folder_lock.vue (100%)
 rename {app => packages/components}/src/components/v-icon/custom-icons/folder_move.vue (100%)
 rename {app => packages/components}/src/components/v-icon/custom-icons/grid_1.vue (100%)
 rename {app => packages/components}/src/components/v-icon/custom-icons/grid_2.vue (100%)
 rename {app => packages/components}/src/components/v-icon/custom-icons/grid_3.vue (100%)
 rename {app => packages/components}/src/components/v-icon/custom-icons/grid_4.vue (100%)
 rename {app => packages/components}/src/components/v-icon/custom-icons/grid_5.vue (100%)
 rename {app => packages/components}/src/components/v-icon/custom-icons/grid_6.vue (100%)
 rename {app => packages/components}/src/components/v-icon/custom-icons/logout.vue (100%)
 rename {app => packages/components}/src/components/v-icon/custom-icons/signal_wifi_1_bar.vue (100%)
 rename {app => packages/components}/src/components/v-icon/custom-icons/signal_wifi_2_bar.vue (100%)
 rename {app => packages/components}/src/components/v-icon/custom-icons/signal_wifi_3_bar.vue (100%)
 create mode 100644 packages/components/src/components/v-icon/social-icon.vue
 create mode 100644 packages/components/src/components/v-icon/v-icon.test.ts
 rename {app => packages/components}/src/components/v-icon/v-icon.vue (81%)
 create mode 100644 packages/components/src/components/v-info.test.ts
 rename {app => packages/components}/src/components/v-info.vue (75%)
 create mode 100644 packages/components/src/components/v-input.test.ts
 rename {app => packages/components}/src/components/v-input.vue (90%)
 create mode 100644 packages/components/src/components/v-item-group.vue
 create mode 100644 packages/components/src/components/v-item.vue
 create mode 100644 packages/components/src/components/v-list-group.vue
 rename {app => packages/components}/src/components/v-list-item-content.vue (100%)
 rename {app => packages/components}/src/components/v-list-item-hint.vue (83%)
 rename {app => packages/components}/src/components/v-list-item-icon.vue (85%)
 rename {app => packages/components}/src/components/v-list-item.vue (68%)
 rename {app => packages/components}/src/components/v-list.vue (51%)
 create mode 100644 packages/components/src/components/v-menu._test.ts
 create mode 100644 packages/components/src/components/v-menu.vue
 create mode 100644 packages/components/src/components/v-notice.test.ts
 rename {app => packages/components}/src/components/v-notice.vue (69%)
 create mode 100644 packages/components/src/components/v-overlay.test.ts
 rename {app => packages/components}/src/components/v-overlay.vue (69%)
 create mode 100644 packages/components/src/components/v-pagination.test.ts
 create mode 100644 packages/components/src/components/v-pagination.vue
 create mode 100644 packages/components/src/components/v-progress-circular.test.ts
 rename {app => packages/components}/src/components/v-progress-circular.vue (73%)
 create mode 100644 packages/components/src/components/v-progress-linear.test.ts
 rename {app => packages/components}/src/components/v-progress-linear.vue (66%)
 create mode 100644 packages/components/src/components/v-radio.test.ts
 rename {app => packages/components}/src/components/v-radio.vue (60%)
 create mode 100644 packages/components/src/components/v-select/__snapshots__/v-select.test.ts.snap
 rename {app => packages/components}/src/components/v-select/select-list-item-group.vue (57%)
 rename {app => packages/components}/src/components/v-select/select-list-item.vue (50%)
 rename {app => packages/components}/src/components/v-select/types.ts (100%)
 create mode 100644 packages/components/src/components/v-select/v-select.test.ts
 create mode 100644 packages/components/src/components/v-select/v-select.vue
 rename {app => packages/components}/src/components/v-sheet.test.ts (100%)
 rename {app => packages/components}/src/components/v-sheet.vue (100%)
 create mode 100644 packages/components/src/components/v-skeleton-loader.test.ts
 rename {app => packages/components}/src/components/v-skeleton-loader.vue (89%)
 create mode 100644 packages/components/src/components/v-slider.test.ts
 rename {app => packages/components}/src/components/v-slider.vue (77%)
 create mode 100644 packages/components/src/components/v-tab-item.vue
 rename {app => packages/components}/src/components/v-tab.vue (63%)
 create mode 100644 packages/components/src/components/v-tabs-items.vue
 create mode 100644 packages/components/src/components/v-tabs.test.ts
 create mode 100644 packages/components/src/components/v-tabs.vue
 create mode 100644 packages/components/src/components/v-template-input.vue
 create mode 100644 packages/components/src/components/v-text-overflow.test.ts
 create mode 100644 packages/components/src/components/v-text-overflow.vue
 create mode 100644 packages/components/src/components/v-textarea.test.ts
 rename {app => packages/components}/src/components/v-textarea.vue (62%)
 create mode 100644 packages/components/src/components/v-workspace-tile.test.ts
 rename {app => packages/components}/src/components/v-workspace-tile.vue (95%)
 create mode 100644 packages/components/src/components/v-workspace.test.ts
 rename {app => packages/components}/src/components/v-workspace.vue (89%)
 create mode 100644 packages/components/src/shims.d.ts
 create mode 100644 packages/components/src/styles/no-wrap.scss
 create mode 100644 packages/components/stories/transition-bounce.stories.ts
 create mode 100644 packages/components/stories/transition-dialog.stories.ts
 create mode 100644 packages/components/stories/transition-expand.stories.ts
 create mode 100644 packages/components/stories/v-avatar.stories.ts
 create mode 100644 packages/components/stories/v-badge.stories.ts
 create mode 100644 packages/components/stories/v-breadcrumb.stories.ts
 create mode 100644 packages/components/stories/v-button.stories.ts
 create mode 100644 packages/components/stories/v-card.stories.ts
 create mode 100644 packages/components/stories/v-checkbox-tree.stories.ts
 create mode 100644 packages/components/stories/v-checkbox.stories.ts
 create mode 100644 packages/components/stories/v-chip.stories.ts
 create mode 100644 packages/components/stories/v-divider.stories.ts
 create mode 100644 packages/components/stories/v-emoji-picker.stories.ts
 create mode 100644 packages/components/stories/v-fancy-select.stories.ts
 create mode 100644 packages/components/stories/v-highlight.stories.ts
 create mode 100644 packages/components/stories/v-hover.stories.ts
 create mode 100644 packages/components/stories/v-icon-file.stories.ts
 create mode 100644 packages/components/stories/v-icon.stories.ts
 create mode 100644 packages/components/stories/v-info.stories.ts
 create mode 100644 packages/components/stories/v-input.stories.ts
 create mode 100644 packages/components/stories/v-item-group.stories.ts
 create mode 100644 packages/components/stories/v-list-group.stories.ts
 create mode 100644 packages/components/stories/v-list-item.stories.ts
 create mode 100644 packages/components/stories/v-list.stories.ts
 create mode 100644 packages/components/stories/v-menu.stories.ts
 create mode 100644 packages/components/stories/v-notice.stories.ts
 create mode 100644 packages/components/stories/v-overlay.stories.ts
 create mode 100644 packages/components/stories/v-pagination.stories.ts
 create mode 100644 packages/components/stories/v-progress-circular.stories.ts
 create mode 100644 packages/components/stories/v-progress-linear.stories.ts
 create mode 100644 packages/components/stories/v-radio.stories.ts
 create mode 100644 packages/components/stories/v-select.stories.ts
 create mode 100644 packages/components/stories/v-sheet.stories.ts
 create mode 100644 packages/components/stories/v-skeleton-loader.stories.ts
 create mode 100644 packages/components/stories/v-slider.stories.ts
 create mode 100644 packages/components/stories/v-tabs.stories.ts
 create mode 100644 packages/components/stories/v-template-input.stories.ts
 create mode 100644 packages/components/stories/v-text-overflow.stories.ts
 create mode 100644 packages/components/stories/v-textarea.stories.ts
 create mode 100644 packages/components/stories/v-workspace-tile.stories.ts
 create mode 100644 packages/components/stories/v-workspace.stories.ts
 create mode 100644 packages/components/stub/empty.d.ts
 create mode 100644 packages/components/tsconfig.json
 create mode 100644 packages/components/vite.config.js
 rename {app => packages/shared}/src/composables/use-custom-selection.ts (100%)
 rename {app => packages/shared}/src/composables/use-element-size.ts (88%)
 rename {app => packages/shared}/src/composables/use-groupable.ts (95%)
 rename {app => packages/shared}/src/composables/use-size-class.ts (73%)

diff --git a/.eslintignore b/.eslintignore
index ae44c032fc..6204abbfee 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,3 +1,4 @@
 node_modules
 dist
 templates
+stories
\ No newline at end of file
diff --git a/app/package.json b/app/package.json
index 9bdf7a40b1..fe85fcdb7b 100644
--- a/app/package.json
+++ b/app/package.json
@@ -34,6 +34,7 @@
 		"@directus/extensions-sdk": "^9.14.1",
 		"@directus/format-title": "^9.15.0",
 		"@directus/shared": "workspace:*",
+		"@directus/components": "workspace:*",
 		"@fortawesome/fontawesome-svg-core": "1.2.36",
 		"@fortawesome/free-brands-svg-icons": "5.15.4",
 		"@fullcalendar/core": "5.11.0",
@@ -41,7 +42,6 @@
 		"@fullcalendar/interaction": "5.11.0",
 		"@fullcalendar/list": "5.11.0",
 		"@fullcalendar/timegrid": "5.11.0",
-		"@joeattardi/emoji-button": "^4.6.2",
 		"@mapbox/mapbox-gl-draw": "1.3.0",
 		"@mapbox/mapbox-gl-draw-static-mode": "1.0.1",
 		"@mapbox/mapbox-gl-geocoder": "4.7.4",
diff --git a/app/src/components/register.ts b/app/src/components/register.ts
index 062faf8171..9daf9a85c0 100644
--- a/app/src/components/register.ts
+++ b/app/src/components/register.ts
@@ -8,70 +8,69 @@ import DocsWrapper from '@/views/private/components/docs-wrapper.vue';
 import DrawerItem from '@/views/private/components/drawer-item.vue';
 import DrawerBatch from '@/views/private/components/drawer-batch.vue';
 import { App } from 'vue';
-import TransitionBounce from './transition/bounce';
-import TransitionDialog from './transition/dialog';
-import TransitionExpand from './transition/expand';
-import VAvatar from './v-avatar.vue';
-import VBadge from './v-badge.vue';
-import VBreadcrumb from './v-breadcrumb.vue';
-import VButton from './v-button.vue';
-import VCard from './v-card.vue';
-import VCardActions from './v-card-actions.vue';
-import VCardSubtitle from './v-card-subtitle.vue';
-import VCardText from './v-card-text.vue';
-import VCardTitle from './v-card-title.vue';
-import VCheckbox from './v-checkbox.vue';
-import VCheckboxTree from './v-checkbox-tree/v-checkbox-tree.vue';
-import VChip from './v-chip.vue';
+import TransitionBounce from '@directus/components/transition/bounce.vue';
+import TransitionDialog from '@directus/components/transition/dialog.vue';
+import TransitionExpand from '@directus/components/transition/expand.vue';
+import VAvatar from '@directus/components/v-avatar.vue';
+import VBadge from '@directus/components/v-badge.vue';
+import VBreadcrumb from '@directus/components/v-breadcrumb.vue';
+import VButton from '@directus/components/v-button.vue';
+import VCard from '@directus/components/v-card.vue';
+import VCardActions from '@directus/components/v-card-actions.vue';
+import VCardSubtitle from '@directus/components/v-card-subtitle.vue';
+import VCardText from '@directus/components/v-card-text.vue';
+import VCardTitle from '@directus/components/v-card-title.vue';
+import VCheckbox from '@directus/components/v-checkbox.vue';
+import VCheckboxTree from '@directus/components/v-checkbox-tree/v-checkbox-tree.vue';
+import VChip from '@directus/components/v-chip.vue';
 import VDetail from './v-detail.vue';
 import VDialog from './v-dialog.vue';
-import VDivider from './v-divider.vue';
+import VDivider from '@directus/components/v-divider.vue';
 import VDrawer from './v-drawer.vue';
 import VError from './v-error.vue';
-import VFancySelect from './v-fancy-select.vue';
+import VFancySelect from '@directus/components/v-fancy-select.vue';
 import VFieldTemplate from './v-field-template/v-field-template.vue';
 import VFieldList from './v-field-list/v-field-list.vue';
 import VForm from './v-form/v-form.vue';
-import VHover from './v-hover.vue';
-import VHighlight from './v-highlight.vue';
-import VIcon from './v-icon/v-icon.vue';
+import VHover from '@directus/components/v-hover.vue';
+import VHighlight from '@directus/components/v-highlight.vue';
+import VIcon from '@directus/components/v-icon/v-icon.vue';
 import VImage from './v-image.vue';
-import VIconFile from './v-icon-file.vue';
-import VInfo from './v-info.vue';
-import VInput from './v-input.vue';
-import VItemGroup from './v-item-group.vue';
-import VItem from './v-item.vue';
-import VList from './v-list.vue';
-import VListGroup from './v-list-group.vue';
-import VListItem from './v-list-item.vue';
-import VListItemContent from './v-list-item-content.vue';
-import VListItemHint from './v-list-item-hint.vue';
-import VListItemIcon from './v-list-item-icon.vue';
-import VMenu from './v-menu.vue';
-import VNotice from './v-notice.vue';
-import VOverlay from './v-overlay.vue';
-import VPagination from './v-pagination.vue';
-import VProgressCircular from './v-progress-circular.vue';
-import VProgressLinear from './v-progress-linear.vue';
-import VRadio from './v-radio.vue';
-import VSelect from './v-select/v-select.vue';
-import VSheet from './v-sheet.vue';
-import VSkeletonLoader from './v-skeleton-loader.vue';
-import VSlider from './v-slider.vue';
-import VSwitch from './v-switch.vue';
+import VIconFile from '@directus/components/v-icon-file.vue';
+import VInfo from '@directus/components/v-info.vue';
+import VInput from '@directus/components/v-input.vue';
+import VItemGroup from '@directus/components/v-item-group.vue';
+import VItem from '@directus/components/v-item.vue';
+import VList from '@directus/components/v-list.vue';
+import VListGroup from '@directus/components/v-list-group.vue';
+import VListItem from '@directus/components/v-list-item.vue';
+import VListItemContent from '@directus/components/v-list-item-content.vue';
+import VListItemHint from '@directus/components/v-list-item-hint.vue';
+import VListItemIcon from '@directus/components/v-list-item-icon.vue';
+import VMenu from '@directus/components/v-menu.vue';
+import VNotice from '@directus/components/v-notice.vue';
+import VOverlay from '@directus/components/v-overlay.vue';
+import VPagination from '@directus/components/v-pagination.vue';
+import VProgressCircular from '@directus/components/v-progress-circular.vue';
+import VProgressLinear from '@directus/components/v-progress-linear.vue';
+import VRadio from '@directus/components/v-radio.vue';
+import VSelect from '@directus/components/v-select/v-select.vue';
+import VSheet from '@directus/components/v-sheet.vue';
+import VSkeletonLoader from '@directus/components/v-skeleton-loader.vue';
+import VSlider from '@directus/components/v-slider.vue';
 import VTable from './v-table/v-table.vue';
-import VTabs from './v-tabs.vue';
-import VTab from './v-tab.vue';
-import VTabItem from './v-tab-item.vue';
-import VTabsItems from './v-tabs-items.vue';
-import VTemplateInput from './v-template-input.vue';
-import VTextOverflow from './v-text-overflow.vue';
-import VTextarea from './v-textarea.vue';
+import VTabs from '@directus/components/v-tabs.vue';
+import VTab from '@directus/components/v-tab.vue';
+import VTabItem from '@directus/components/v-tab-item.vue';
+import VTabsItems from '@directus/components/v-tabs-items.vue';
+import VTemplateInput from '@directus/components/v-template-input.vue';
+import VTextOverflow from '@directus/components/v-text-overflow.vue';
+import VTextarea from '@directus/components/v-textarea.vue';
 import VUpload from './v-upload.vue';
 import VDatePicker from './v-date-picker.vue';
-import VEmojiPicker from './v-emoji-picker.vue';
-import VWorkspace from './v-workspace.vue';
-import VWorkspaceTile from './v-workspace-tile.vue';
+import VEmojiPicker from '@directus/components/v-emoji-picker.vue';
+import VWorkspace from '@directus/components/v-workspace.vue';
+import VWorkspaceTile from '@directus/components/v-workspace-tile.vue';
 
 export function registerComponents(app: App): void {
 	app.component('VAvatar', VAvatar);
@@ -121,7 +120,6 @@ export function registerComponents(app: App): void {
 	app.component('VSheet', VSheet);
 	app.component('VSkeletonLoader', VSkeletonLoader);
 	app.component('VSlider', VSlider);
-	app.component('VSwitch', VSwitch);
 	app.component('VTabItem', VTabItem);
 	app.component('VTab', VTab);
 	app.component('VTable', VTable);
diff --git a/app/src/components/transition/bounce/index.ts b/app/src/components/transition/bounce/index.ts
deleted file mode 100644
index a39c8ebf63..0000000000
--- a/app/src/components/transition/bounce/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import TransitionBounce from './transition-bounce.vue';
-
-export { TransitionBounce };
-export default TransitionBounce;
diff --git a/app/src/components/transition/dialog/index.ts b/app/src/components/transition/dialog/index.ts
deleted file mode 100644
index 88e6948cbc..0000000000
--- a/app/src/components/transition/dialog/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import TransitionDialog from './transition-dialog.vue';
-
-export { TransitionDialog };
-export default TransitionDialog;
diff --git a/app/src/components/transition/expand/index.ts b/app/src/components/transition/expand/index.ts
deleted file mode 100644
index fb7fa3137d..0000000000
--- a/app/src/components/transition/expand/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import TransitionExpand from './transition-expand.vue';
-
-export { TransitionExpand };
-export default TransitionExpand;
diff --git a/app/src/components/transition/expand/transition-expand.vue b/app/src/components/transition/expand/transition-expand.vue
deleted file mode 100644
index df55f30c3a..0000000000
--- a/app/src/components/transition/expand/transition-expand.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-	<transition name="expand-transition" mode="in-out" v-on="methods">
-		<slot />
-	</transition>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import ExpandMethods from './transition-expand-methods';
-
-export default defineComponent({
-	props: {
-		xAxis: {
-			type: Boolean,
-			default: false,
-		},
-		expandedParentClass: {
-			type: String,
-			default: '',
-		},
-	},
-	emits: ['beforeEnter', 'enter', 'afterEnter', 'enterCancelled', 'leave', 'afterLeave', 'leaveCancelled'],
-	setup(props, { emit }) {
-		const methods = ExpandMethods(props.expandedParentClass, props.xAxis, emit);
-		return { methods };
-	},
-});
-</script>
diff --git a/app/src/components/transition/index.ts b/app/src/components/transition/index.ts
deleted file mode 100644
index aaafc65f71..0000000000
--- a/app/src/components/transition/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import TransitionExpand from './expand';
-
-export { TransitionExpand };
-export default { TransitionExpand };
diff --git a/app/src/components/v-checkbox-tree/v-checkbox-tree-checkbox.vue b/app/src/components/v-checkbox-tree/v-checkbox-tree-checkbox.vue
deleted file mode 100644
index 1d7c08a16b..0000000000
--- a/app/src/components/v-checkbox-tree/v-checkbox-tree-checkbox.vue
+++ /dev/null
@@ -1,477 +0,0 @@
-<template>
-	<v-list-group v-if="visibleChildrenValues.length > 0" v-show="groupShown" :value="value" arrow-placement="before">
-		<template #activator>
-			<v-checkbox
-				v-model="treeValue"
-				:indeterminate="groupIndeterminateState"
-				:checked="groupCheckedStateOverride"
-				:label="text"
-				:value="value"
-				:disabled="disabled"
-			>
-				<v-highlight :text="text" :query="search" />
-			</v-checkbox>
-		</template>
-
-		<v-checkbox-tree-checkbox
-			v-for="choice in children"
-			:key="choice[itemValue]"
-			v-model="treeValue"
-			:value-combining="valueCombining"
-			:checked="childrenCheckedStateOverride"
-			:hidden="visibleChildrenValues.includes(choice[itemValue]) === false"
-			:search="search"
-			:item-text="itemText"
-			:item-value="itemValue"
-			:item-children="itemChildren"
-			:text="choice[itemText]"
-			:value="choice[itemValue]"
-			:children="choice[itemChildren]"
-			:disabled="disabled"
-			:show-selection-only="showSelectionOnly"
-			:parent-value="value"
-		/>
-	</v-list-group>
-
-	<v-list-item v-else-if="!hidden" class="item">
-		<v-checkbox v-model="treeValue" :disabled="disabled" :checked="checked" :label="text" :value="value">
-			<v-highlight :text="text" :query="search" />
-		</v-checkbox>
-	</v-list-item>
-</template>
-
-<script lang="ts">
-import { defineComponent, computed, PropType, toRefs } from 'vue';
-import { difference } from 'lodash';
-import { useVisibleChildren } from './use-visible-children';
-
-type Delta = {
-	added?: (number | string)[];
-	removed?: (number | string)[];
-};
-
-export default defineComponent({
-	name: 'VCheckboxTreeCheckbox',
-	props: {
-		text: {
-			type: String,
-			required: true,
-		},
-		value: {
-			type: [String, Number],
-			required: true,
-		},
-		children: {
-			type: Array as PropType<Record<string, any>[]>,
-			default: null,
-		},
-		modelValue: {
-			type: Array as PropType<(string | number)[]>,
-			default: () => [],
-		},
-		valueCombining: {
-			type: String as PropType<'all' | 'branch' | 'leaf' | 'indeterminate' | 'exclusive'>,
-			required: true,
-		},
-		checked: {
-			type: Boolean,
-			default: null,
-		},
-		search: {
-			type: String,
-			default: null,
-		},
-		hidden: {
-			type: Boolean,
-			default: false,
-		},
-		itemText: {
-			type: String,
-			default: 'text',
-		},
-		itemValue: {
-			type: String,
-			default: 'value',
-		},
-		itemChildren: {
-			type: String,
-			default: 'children',
-		},
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-		showSelectionOnly: {
-			type: Boolean,
-			default: false,
-		},
-		parentValue: {
-			type: [String, Number],
-			default: null,
-		},
-	},
-	emits: ['update:modelValue'],
-	setup(props, { emit }) {
-		const { search, modelValue, children, showSelectionOnly, itemText, itemValue, itemChildren, parentValue, value } =
-			toRefs(props);
-
-		const { visibleChildrenValues } = useVisibleChildren(
-			search,
-			modelValue,
-			children,
-			showSelectionOnly,
-			itemText,
-			itemValue,
-			itemChildren,
-			parentValue,
-			value
-		);
-
-		const groupShown = computed(() => {
-			if (props.showSelectionOnly === true && props.modelValue.includes(props.value)) {
-				return true;
-			}
-
-			return !props.hidden;
-		});
-
-		const childrenValues = computed(() => props.children?.map((child) => child[props.itemValue]) || []);
-
-		const treeValue = computed({
-			get() {
-				return props.modelValue || [];
-			},
-			set(newValue: (string | number)[]) {
-				const added = difference(newValue, props.modelValue);
-				const removed = difference(props.modelValue, newValue);
-
-				if (props.children) {
-					switch (props.valueCombining) {
-						case 'all':
-							return emitAll(newValue, { added, removed });
-						case 'branch':
-							return emitBranch(newValue, { added, removed });
-						case 'leaf':
-							return emitLeaf(newValue, { added, removed });
-						case 'indeterminate':
-							return emitIndeterminate(newValue, { added, removed });
-						case 'exclusive':
-							return emitExclusive(newValue, { added, removed });
-						default:
-							return emitValue(newValue);
-					}
-				}
-
-				emitValue(newValue);
-			},
-		});
-
-		const groupCheckedStateOverride = computed(() => {
-			if (props.checked !== null) return props.checked;
-			if (props.valueCombining === 'all') return null;
-
-			if (props.valueCombining === 'leaf') {
-				const leafChildrenRecursive = getRecursiveChildrenValues('leaf');
-				return leafChildrenRecursive.every((childVal) => props.modelValue.includes(childVal));
-			}
-
-			return null;
-		});
-
-		const groupIndeterminateState = computed(() => {
-			const allChildrenValues = getRecursiveChildrenValues('all');
-
-			if (props.valueCombining === 'all' || props.valueCombining === 'branch') {
-				return (
-					allChildrenValues.some((childVal) => props.modelValue.includes(childVal)) &&
-					props.modelValue.includes(props.value) === false
-				);
-			}
-
-			if (props.valueCombining === 'indeterminate') {
-				return (
-					allChildrenValues.some((childVal) => props.modelValue.includes(childVal)) &&
-					allChildrenValues.every((childVal) => props.modelValue.includes(childVal)) === false
-				);
-			}
-
-			if (props.valueCombining === 'leaf') {
-				const leafChildrenRecursive = getRecursiveChildrenValues('leaf');
-				return (
-					leafChildrenRecursive.some((childVal) => props.modelValue.includes(childVal)) &&
-					leafChildrenRecursive.every((childVal) => props.modelValue.includes(childVal)) === false
-				);
-			}
-
-			if (props.valueCombining === 'exclusive') {
-				return allChildrenValues.some((childVal) => props.modelValue.includes(childVal));
-			}
-
-			return null;
-		});
-
-		const childrenCheckedStateOverride = computed(() => {
-			if (props.checked !== null) return props.checked;
-			if (props.valueCombining === 'all') return null;
-
-			if (props.valueCombining === 'branch') {
-				if (props.modelValue.includes(props.value)) return true;
-			}
-
-			return null;
-		});
-
-		return {
-			groupCheckedStateOverride,
-			childrenCheckedStateOverride,
-			treeValue,
-			groupIndeterminateState,
-			visibleChildrenValues,
-			groupShown,
-		};
-
-		function emitAll(rawValue: (string | number)[], { added, removed }: Delta) {
-			const childrenValuesRecursive = getRecursiveChildrenValues('all');
-
-			// When enabling the group level
-			if (added?.[0] === props.value) {
-				const newValue = [
-					...rawValue.filter((val) => val !== props.value && childrenValues.value.includes(val) === false),
-					...childrenValuesRecursive,
-					props.value,
-				];
-
-				return emitValue(newValue);
-			}
-
-			// When disabling the group level
-			if (removed?.[0] === props.value) {
-				const newValue = rawValue.filter(
-					(val) => val !== props.value && childrenValuesRecursive.includes(val) === false
-				);
-				return emitValue(newValue);
-			}
-
-			// When all children are clicked
-			if (childrenValues.value.every((childVal) => rawValue.includes(childVal))) {
-				const newValue = [
-					...rawValue.filter((val) => val !== props.value && childrenValuesRecursive.includes(val) === false),
-					...childrenValuesRecursive,
-					props.value,
-				];
-
-				return emitValue(newValue);
-			}
-
-			const newValue = rawValue.filter((val) => val !== props.value);
-			return emitValue(newValue);
-		}
-
-		function emitBranch(rawValue: (string | number)[], { added, removed }: Delta) {
-			const allChildrenRecursive = getRecursiveChildrenValues('all');
-
-			// Note: Added/removed is a tad confusing here, as an item that gets added to the array of
-			// selected items can immediately be negated by the logic below, as it's potentially
-			// replaced by the parent item's value
-
-			// When clicking on an individual item in the enabled group
-			if (
-				(props.modelValue.includes(props.value) || props.checked === true) &&
-				added &&
-				added.length === 1 &&
-				childrenValues.value.includes(added[0])
-			) {
-				const newValue = [
-					...rawValue.filter((val) => val !== props.value && val !== added[0]),
-					...childrenValues.value.filter((childVal) => childVal !== added[0]),
-				];
-
-				return emitValue(newValue);
-			}
-
-			// When a childgroup is modified
-			if (
-				props.modelValue.includes(props.value) &&
-				allChildrenRecursive.some((childVal) => rawValue.includes(childVal))
-			) {
-				const childThatContainsSelection = props.children.find((child) => {
-					const childNestedValues = getRecursiveChildrenValues('all', child[props.itemChildren]);
-					return rawValue.some((rawVal) => childNestedValues.includes(rawVal)) === true;
-				});
-
-				const newValue = [
-					...rawValue.filter((val) => val !== props.value),
-					...(props.children || [])
-						.filter((child) => {
-							if (!child[props.itemChildren]) return true;
-							return child[props.itemValue] !== childThatContainsSelection?.[props.itemValue];
-						})
-						.map((child) => child[props.itemValue]),
-					...(childThatContainsSelection?.[props.itemChildren] ?? [])
-						.filter((grandChild: Record<string, any>) => {
-							const childNestedValues = getRecursiveChildrenValues('all', grandChild[props.itemChildren]);
-							return rawValue.some((rawVal) => childNestedValues.includes(rawVal)) === false;
-						})
-						.map((grandChild: Record<string, any>) => grandChild[props.itemValue]),
-				];
-
-				return emitValue(newValue);
-			}
-
-			// When enabling the group level
-			if (added?.includes(props.value)) {
-				const newValue = [
-					...rawValue.filter((val) => val !== props.value && allChildrenRecursive.includes(val) === false),
-					props.value,
-				];
-
-				return emitValue(newValue);
-			}
-
-			// When disabling the group level
-			if (removed?.includes(props.value)) {
-				const newValue = rawValue.filter((val) => val !== props.value && allChildrenRecursive.includes(val) === false);
-				return emitValue(newValue);
-			}
-
-			// When all children are clicked
-			if (childrenValues.value.every((childVal) => rawValue.includes(childVal))) {
-				const newValue = [
-					...rawValue.filter((val) => val !== props.value && allChildrenRecursive.includes(val) === false),
-					props.value,
-				];
-
-				return emitValue(newValue);
-			}
-
-			return emitValue(rawValue);
-		}
-
-		function emitLeaf(rawValue: (string | number)[], { added }: Delta) {
-			const allChildrenRecursive = getRecursiveChildrenValues('all');
-			const leafChildrenRecursive = getRecursiveChildrenValues('leaf');
-
-			// When enabling the group level
-			if (added?.includes(props.value)) {
-				if (leafChildrenRecursive.every((childVal) => rawValue.includes(childVal))) {
-					const newValue = rawValue.filter(
-						(val) => val !== props.value && allChildrenRecursive.includes(val) === false
-					);
-					return emitValue(newValue);
-				} else {
-					const newValue = [
-						...rawValue.filter((val) => val !== props.value && allChildrenRecursive.includes(val) === false),
-						...leafChildrenRecursive,
-					];
-
-					return emitValue(newValue);
-				}
-			}
-
-			return emitValue(rawValue);
-		}
-
-		function emitIndeterminate(rawValue: (string | number)[], { added, removed }: Delta) {
-			const childrenValuesRecursive = getRecursiveChildrenValues('all');
-
-			// When enabling the group level
-			if (added?.[0] === props.value) {
-				const newValue = [
-					...rawValue.filter((val) => val !== props.value && childrenValues.value.includes(val) === false),
-					...childrenValuesRecursive,
-					props.value,
-				];
-
-				return emitValue(newValue);
-			}
-
-			// When disabling the group level
-			if (removed?.[0] === props.value) {
-				const newValue = rawValue.filter(
-					(val) => val !== props.value && childrenValuesRecursive.includes(val) === false
-				);
-				return emitValue(newValue);
-			}
-
-			// When a child value is clicked
-			if (childrenValues.value.some((childVal) => rawValue.includes(childVal))) {
-				const newValue = [...rawValue.filter((val) => val !== props.value), props.value];
-
-				return emitValue(newValue);
-			}
-
-			// When no children are clicked
-			if (childrenValues.value.every((childVal) => rawValue.includes(childVal) === false)) {
-				return emitValue(rawValue.filter((val) => val !== props.value));
-			}
-
-			return emitValue(rawValue);
-		}
-
-		function emitExclusive(rawValue: (string | number)[], { added }: Delta) {
-			const childrenValuesRecursive = getRecursiveChildrenValues('all');
-
-			// When enabling the group level
-			if (added?.[0] === props.value) {
-				const newValue = [
-					...rawValue.filter((val) => val !== props.value && childrenValuesRecursive.includes(val) === false),
-					props.value,
-				];
-
-				return emitValue(newValue);
-			}
-
-			// When a child value is clicked
-			if (childrenValuesRecursive.some((childVal) => rawValue.includes(childVal))) {
-				const newValue = [...rawValue.filter((val) => val !== props.value)];
-				return emitValue(newValue);
-			}
-
-			return emitValue(rawValue);
-		}
-
-		function emitValue(newValue: (string | number)[]) {
-			emit('update:modelValue', newValue);
-		}
-
-		function getRecursiveChildrenValues(
-			mode: 'all' | 'branch' | 'leaf',
-			children: Record<string, any>[] = props.children
-		) {
-			const values: (string | number)[] = [];
-
-			getChildrenValuesRecursive(children);
-
-			return values;
-
-			function getChildrenValuesRecursive(children: Record<string, any>[]) {
-				if (!children) return;
-
-				for (const child of children) {
-					if (mode === 'all') {
-						values.push(child[props.itemValue]);
-					}
-
-					if (mode === 'branch' && child[props.itemChildren]) {
-						values.push(child[props.itemValue]);
-					}
-
-					if (mode === 'leaf' && !child[props.itemChildren]) {
-						values.push(child[props.itemValue]);
-					}
-
-					if (child[props.itemChildren]) {
-						getChildrenValuesRecursive(child[props.itemChildren]);
-					}
-				}
-			}
-		}
-	},
-});
-</script>
-
-<style scoped>
-.item {
-	padding-left: 32px !important;
-}
-</style>
diff --git a/app/src/components/v-checkbox-tree/v-checkbox-tree.vue b/app/src/components/v-checkbox-tree/v-checkbox-tree.vue
deleted file mode 100644
index cc02fd2702..0000000000
--- a/app/src/components/v-checkbox-tree/v-checkbox-tree.vue
+++ /dev/null
@@ -1,164 +0,0 @@
-<template>
-	<v-list v-model="openSelection" :mandatory="false" @toggle="$emit('group-toggle', $event)">
-		<v-checkbox-tree-checkbox
-			v-for="choice in choices"
-			:key="choice[itemValue]"
-			v-model="value"
-			:value-combining="valueCombining"
-			:search="search"
-			:item-text="itemText"
-			:item-value="itemValue"
-			:item-children="itemChildren"
-			:text="choice[itemText]"
-			:hidden="visibleChildrenValues.includes(choice[itemValue]) === false"
-			:value="choice[itemValue]"
-			:children="choice[itemChildren]"
-			:disabled="disabled"
-			:show-selection-only="showSelectionOnly"
-		/>
-	</v-list>
-</template>
-
-<script lang="ts">
-import { computed, ref, defineComponent, PropType, watch, toRefs } from 'vue';
-import { useVisibleChildren } from './use-visible-children';
-import VCheckboxTreeCheckbox from './v-checkbox-tree-checkbox.vue';
-
-export default defineComponent({
-	name: 'VCheckboxTree',
-	components: { VCheckboxTreeCheckbox },
-	props: {
-		choices: {
-			type: Array as PropType<Record<string, any>[]>,
-			default: () => [],
-		},
-		modelValue: {
-			type: Array as PropType<string[]>,
-			default: null,
-		},
-		valueCombining: {
-			type: String as PropType<'all' | 'branch' | 'leaf' | 'indeterminate' | 'exclusive'>,
-			default: 'all',
-		},
-		search: {
-			type: String,
-			default: null,
-		},
-		itemText: {
-			type: String,
-			default: 'text',
-		},
-		itemValue: {
-			type: String,
-			default: 'value',
-		},
-		itemChildren: {
-			type: String,
-			default: 'children',
-		},
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-		showSelectionOnly: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	emits: ['update:modelValue', 'group-toggle'],
-	setup(props, { emit }) {
-		const value = computed({
-			get() {
-				return props.modelValue || [];
-			},
-			set(newValue: string[]) {
-				emit('update:modelValue', newValue);
-			},
-		});
-
-		const fakeValue = ref('');
-		const fakeParentValue = ref('');
-
-		const { search, modelValue, showSelectionOnly, itemText, itemValue, itemChildren, choices } = toRefs(props);
-
-		const { visibleChildrenValues } = useVisibleChildren(
-			search,
-			modelValue,
-			choices,
-			showSelectionOnly,
-			itemText,
-			itemValue,
-			itemChildren,
-			fakeParentValue,
-			fakeValue
-		);
-
-		let showAllSelection: (string | number)[] = [];
-		const openSelection = ref<(string | number)[]>([]);
-
-		watch(
-			() => props.search,
-			(newValue) => {
-				if (!newValue) return;
-
-				const selection = new Set([...openSelection.value, ...searchChoices(newValue, props.choices)]);
-
-				openSelection.value = [...selection];
-			},
-			{ immediate: true }
-		);
-
-		watch(showSelectionOnly, (isSelectionOnly) => {
-			if (isSelectionOnly) {
-				const selection = new Set([...openSelection.value, ...findSelectedChoices(props.choices, value.value)]);
-
-				showAllSelection = openSelection.value;
-				openSelection.value = [...selection];
-			} else {
-				openSelection.value = [...showAllSelection];
-			}
-		});
-
-		function searchChoices(text: string, target: Record<string, any>[]) {
-			const selection: string[] = [];
-
-			for (const item of target) {
-				if (item[props.itemText].toLowerCase().includes(text.toLowerCase())) {
-					selection.push(item[props.itemValue]);
-				}
-
-				if (item[props.itemChildren]) {
-					selection.push(...searchChoices(text, item[props.itemChildren]));
-				}
-			}
-
-			return selection;
-		}
-
-		function findSelectedChoices(choices: Record<string, any>[], checked: (string | number)[]) {
-			function selectedChoices(item: Record<string, any>): (string | number)[] {
-				if (!item[props.itemValue]) return [];
-				let result = [];
-
-				const itemValue: string | number = item[props.itemValue];
-				if (checked.includes(itemValue)) result.push(itemValue);
-
-				if (item[props.itemChildren]) {
-					const children = item[props.itemChildren];
-					if (Array.isArray(children) && children.length > 0) {
-						const nestedResult = children.flatMap((child) => selectedChoices(child));
-						if (nestedResult.length > 0) {
-							result.push(...nestedResult, itemValue);
-						}
-					}
-				}
-				return result;
-			}
-
-			return choices.flatMap((item) => selectedChoices(item));
-		}
-
-		return { value, openSelection, visibleChildrenValues };
-	},
-});
-</script>
diff --git a/app/src/components/v-date-picker.vue b/app/src/components/v-date-picker.vue
index cfa5453655..6c5d38ad66 100644
--- a/app/src/components/v-date-picker.vue
+++ b/app/src/components/v-date-picker.vue
@@ -4,151 +4,138 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { useI18n } from 'vue-i18n';
-import { defineComponent, ref, onMounted, onBeforeUnmount, computed, PropType, watch } from 'vue';
+import { ref, onMounted, onBeforeUnmount, computed, watch } from 'vue';
 import Flatpickr from 'flatpickr';
 import { format, formatISO } from 'date-fns';
 import { getFlatpickrLocale } from '@/utils/get-flatpickr-locale';
 
-export default defineComponent({
-	props: {
-		modelValue: {
-			type: String,
-			default: null,
-		},
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-		type: {
-			type: String as PropType<'timestamp' | 'dateTime' | 'time' | 'date'>,
-			required: true,
-			validator: (val: string) => ['dateTime', 'date', 'time', 'timestamp'].includes(val),
-		},
-		includeSeconds: {
-			type: Boolean,
-			default: false,
-		},
-		use24: {
-			type: Boolean,
-			default: true,
-		},
-	},
-	emits: ['update:modelValue', 'close'],
-	setup(props, { emit }) {
-		const { t } = useI18n();
+interface Props {
+	type: 'date' | 'time' | 'dateTime' | 'timestamp';
+	modelValue?: string;
+	disabled?: boolean;
+	includeSeconds?: boolean;
+	use24?: boolean;
+}
 
-		const wrapper = ref<HTMLElement | null>(null);
-		let flatpickr: Flatpickr.Instance | null;
-
-		onMounted(async () => {
-			if (wrapper.value) {
-				const flatpickrLocale = await getFlatpickrLocale();
-				flatpickr = Flatpickr(wrapper.value, { ...flatpickrOptions.value, locale: flatpickrLocale });
-			}
-
-			watch(
-				() => props.modelValue,
-				() => {
-					if (props.modelValue) {
-						flatpickr?.setDate(props.modelValue, false);
-					} else {
-						flatpickr?.clear();
-					}
-				},
-				{ immediate: true }
-			);
-		});
-
-		onBeforeUnmount(() => {
-			if (flatpickr) {
-				flatpickr.close();
-				flatpickr = null;
-			}
-		});
-
-		const defaultOptions = {
-			static: true,
-			inline: true,
-			nextArrow:
-				'<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z"/></svg>',
-			prevArrow:
-				'<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12l4.58-4.59z"/></svg>',
-			wrap: true,
-
-			onChange(selectedDates: Date[], _dateStr: string, _instance: Flatpickr.Instance) {
-				const selectedDate = selectedDates.length > 0 ? selectedDates[0] : null;
-				emitValue(selectedDate);
-			},
-			onClose(selectedDates: Date[], _dateStr: string, _instance: Flatpickr.Instance) {
-				const selectedDate = selectedDates.length > 0 ? selectedDates[0] : null;
-				emitValue(selectedDate);
-			},
-			onReady(_selectedDates: Date[], _dateStr: string, instance: Flatpickr.Instance) {
-				const setToNowButton: HTMLElement = document.createElement('button');
-				setToNowButton.innerHTML = t('interfaces.datetime.set_to_now');
-				setToNowButton.classList.add('set-to-now-button');
-				setToNowButton.tabIndex = -1;
-				setToNowButton.addEventListener('click', setToNow);
-				instance.calendarContainer.appendChild(setToNowButton);
-
-				if (!props.use24) {
-					instance.amPM?.addEventListener('keyup', enterToClose);
-				} else if (props.includeSeconds) {
-					instance.secondElement?.addEventListener('keyup', enterToClose);
-				} else {
-					instance.minuteElement?.addEventListener('keyup', enterToClose);
-				}
-			},
-		};
-
-		const flatpickrOptions = computed<Record<string, any>>(() => {
-			return Object.assign({}, defaultOptions, {
-				enableSeconds: props.includeSeconds,
-				enableTime: ['dateTime', 'time', 'timestamp'].includes(props.type),
-				noCalendar: props.type === 'time',
-				time_24hr: props.use24,
-			});
-		});
-
-		function emitValue(value: Date | null) {
-			if (!value) return emit('update:modelValue', null);
-
-			switch (props.type) {
-				case 'dateTime':
-					emit('update:modelValue', format(value, "yyyy-MM-dd'T'HH:mm:ss"));
-					break;
-				case 'date':
-					emit('update:modelValue', format(value, 'yyyy-MM-dd'));
-					break;
-				case 'time':
-					emit('update:modelValue', format(value, 'HH:mm:ss'));
-					break;
-				case 'timestamp':
-					emit('update:modelValue', formatISO(value));
-					break;
-			}
-
-			// close the calendar on input change if it's only a date picker without time input
-			if (props.type === 'date') {
-				emit('close');
-			}
-		}
-
-		function setToNow() {
-			flatpickr?.setDate(new Date(), true);
-		}
-
-		function enterToClose(e: any) {
-			if (e.key !== 'Enter') return;
-			flatpickr?.close();
-			emit('close');
-		}
-
-		return { t, wrapper };
-	},
+const props = withDefaults(defineProps<Props>(), {
+	modelValue: undefined,
+	disabled: false,
+	includeSeconds: false,
+	use24: true,
 });
+
+const emit = defineEmits(['update:modelValue', 'close']);
+
+const { t } = useI18n();
+
+const wrapper = ref<HTMLElement | null>(null);
+let flatpickr: Flatpickr.Instance | null;
+
+onMounted(async () => {
+	if (wrapper.value) {
+		const flatpickrLocale = await getFlatpickrLocale();
+		flatpickr = Flatpickr(wrapper.value, { ...flatpickrOptions.value, locale: flatpickrLocale } as any);
+	}
+
+	watch(
+		() => props.modelValue,
+		() => {
+			if (props.modelValue) {
+				flatpickr?.setDate(props.modelValue, false);
+			} else {
+				flatpickr?.clear();
+			}
+		},
+		{ immediate: true }
+	);
+});
+
+onBeforeUnmount(() => {
+	if (flatpickr) {
+		flatpickr.close();
+		flatpickr = null;
+	}
+});
+
+const defaultOptions = {
+	static: true,
+	inline: true,
+	nextArrow:
+		'<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z"/></svg>',
+	prevArrow:
+		'<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12l4.58-4.59z"/></svg>',
+	wrap: true,
+
+	onChange(selectedDates: Date[], _dateStr: string, _instance: Flatpickr.Instance) {
+		const selectedDate = selectedDates.length > 0 ? selectedDates[0] : null;
+		emitValue(selectedDate);
+	},
+	onClose(selectedDates: Date[], _dateStr: string, _instance: Flatpickr.Instance) {
+		const selectedDate = selectedDates.length > 0 ? selectedDates[0] : null;
+		emitValue(selectedDate);
+	},
+	onReady(_selectedDates: Date[], _dateStr: string, instance: Flatpickr.Instance) {
+		const setToNowButton: HTMLElement = document.createElement('button');
+		setToNowButton.innerHTML = t('interfaces.datetime.set_to_now');
+		setToNowButton.classList.add('set-to-now-button');
+		setToNowButton.tabIndex = -1;
+		setToNowButton.addEventListener('click', setToNow);
+		instance.calendarContainer.appendChild(setToNowButton);
+
+		if (!props.use24) {
+			instance.amPM?.addEventListener('keyup', enterToClose);
+		} else if (props.includeSeconds) {
+			instance.secondElement?.addEventListener('keyup', enterToClose);
+		} else {
+			instance.minuteElement?.addEventListener('keyup', enterToClose);
+		}
+	},
+};
+
+const flatpickrOptions = computed<Record<string, any>>(() => {
+	return Object.assign({}, defaultOptions, {
+		enableSeconds: props.includeSeconds,
+		enableTime: ['dateTime', 'time', 'timestamp'].includes(props.type),
+		noCalendar: props.type === 'time',
+		time_24hr: props.use24,
+	});
+});
+
+function emitValue(value: Date | null) {
+	if (!value) return emit('update:modelValue', null);
+
+	switch (props.type) {
+		case 'dateTime':
+			emit('update:modelValue', format(value, "yyyy-MM-dd'T'HH:mm:ss"));
+			break;
+		case 'date':
+			emit('update:modelValue', format(value, 'yyyy-MM-dd'));
+			break;
+		case 'time':
+			emit('update:modelValue', format(value, 'HH:mm:ss'));
+			break;
+		case 'timestamp':
+			emit('update:modelValue', formatISO(value));
+			break;
+	}
+
+	// close the calendar on input change if it's only a date picker without time input
+	if (props.type === 'date') {
+		emit('close');
+	}
+}
+
+function setToNow() {
+	flatpickr?.setDate(new Date(), true);
+}
+
+function enterToClose(e: any) {
+	if (e.key !== 'Enter') return;
+	flatpickr?.close();
+	emit('close');
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/app/src/components/v-detail.vue b/app/src/components/v-detail.vue
index 18dd668ea8..f7172bea27 100644
--- a/app/src/components/v-detail.vue
+++ b/app/src/components/v-detail.vue
@@ -14,61 +14,52 @@
 	</div>
 </template>
 
-<script lang="ts">
-import { defineComponent, computed, ref } from 'vue';
+<script setup lang="ts">
+import { computed, ref } from 'vue';
 import { i18n } from '@/lang';
 
-export default defineComponent({
-	props: {
-		modelValue: {
-			type: Boolean,
-			default: undefined,
-		},
-		label: {
-			type: String,
-			default: i18n.global.t('toggle'),
-		},
-		startOpen: {
-			type: Boolean,
-			default: false,
-		},
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
+interface Props {
+	modelValue?: boolean;
+	label?: string;
+	startOpen?: boolean;
+	disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	modelValue: undefined,
+	label: i18n.global.t('toggle'),
+	startOpen: false,
+	disabled: false,
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const localActive = ref(props.startOpen);
+
+const internalActive = computed({
+	get() {
+		if (props.modelValue !== undefined) {
+			return props.modelValue;
+		}
+		return localActive.value;
 	},
-	emits: ['update:modelValue'],
-	setup(props, { emit }) {
-		const localActive = ref(props.startOpen);
-
-		const internalActive = computed({
-			get() {
-				if (props.modelValue !== undefined) {
-					return props.modelValue;
-				}
-				return localActive.value;
-			},
-			set(newActive: boolean) {
-				localActive.value = newActive;
-				emit('update:modelValue', newActive);
-			},
-		});
-
-		return { internalActive, enable, disable, toggle };
-
-		function enable() {
-			internalActive.value = true;
-		}
-
-		function disable() {
-			internalActive.value = false;
-		}
-
-		function toggle() {
-			internalActive.value = !internalActive.value;
-		}
+	set(newActive: boolean) {
+		localActive.value = newActive;
+		emit('update:modelValue', newActive);
 	},
 });
+
+function enable() {
+	internalActive.value = true;
+}
+
+function disable() {
+	internalActive.value = false;
+}
+
+function toggle() {
+	internalActive.value = !internalActive.value;
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/app/src/components/v-dialog.vue b/app/src/components/v-dialog.vue
index e336f04bc7..e4647b5aea 100644
--- a/app/src/components/v-dialog.vue
+++ b/app/src/components/v-dialog.vue
@@ -18,73 +18,63 @@
 	</div>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref, computed } from 'vue';
-import { nanoid } from 'nanoid';
+<script setup lang="ts">
+import { ref, computed } from 'vue';
 import { useShortcut } from '@/composables/use-shortcut';
 import { useDialogRouteLeave } from '@/composables/use-dialog-route';
 
-export default defineComponent({
-	props: {
-		modelValue: {
-			type: Boolean,
-			default: undefined,
-		},
-		persistent: {
-			type: Boolean,
-			default: false,
-		},
-		placement: {
-			type: String,
-			default: 'center',
-			validator: (val: string) => ['center', 'right'].includes(val),
-		},
+interface Props {
+	modelValue?: boolean;
+	persistent?: boolean;
+	placement?: 'right' | 'center';
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	modelValue: undefined,
+	persistent: false,
+	placement: 'center',
+});
+
+const emit = defineEmits(['esc', 'update:modelValue']);
+
+useShortcut('escape', (event, cancelNext) => {
+	if (internalActive.value) {
+		emit('esc');
+		cancelNext();
+	}
+});
+
+const localActive = ref(false);
+
+const className = ref<string | null>(null);
+
+const internalActive = computed({
+	get() {
+		return props.modelValue !== undefined ? props.modelValue : localActive.value;
 	},
-	emits: ['esc', 'update:modelValue'],
-	setup(props, { emit }) {
-		useShortcut('escape', (event, cancelNext) => {
-			if (internalActive.value) {
-				emit('esc');
-				cancelNext();
-			}
-		});
-
-		const localActive = ref(false);
-
-		const className = ref<string | null>(null);
-		const id = computed(() => nanoid());
-
-		const internalActive = computed({
-			get() {
-				return props.modelValue !== undefined ? props.modelValue : localActive.value;
-			},
-			set(newActive: boolean) {
-				localActive.value = newActive;
-				emit('update:modelValue', newActive);
-			},
-		});
-
-		const leave = useDialogRouteLeave();
-
-		return { emitToggle, className, nudge, leave, id, internalActive };
-
-		function emitToggle() {
-			if (props.persistent === false) {
-				emit('update:modelValue', !props.modelValue);
-			} else {
-				nudge();
-			}
-		}
-
-		function nudge() {
-			className.value = 'nudge';
-
-			setTimeout(() => {
-				className.value = null;
-			}, 200);
-		}
+	set(newActive: boolean) {
+		localActive.value = newActive;
+		emit('update:modelValue', newActive);
 	},
 });
+
+const leave = useDialogRouteLeave();
+
+function emitToggle() {
+	if (props.persistent === false) {
+		emit('update:modelValue', !props.modelValue);
+	} else {
+		nudge();
+	}
+}
+
+function nudge() {
+	className.value = 'nudge';
+
+	setTimeout(() => {
+		className.value = null;
+	}, 200);
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/app/src/components/v-drawer.vue b/app/src/components/v-drawer.vue
index 1cfd8bccb6..a8cc9464f5 100644
--- a/app/src/components/v-drawer.vue
+++ b/app/src/components/v-drawer.vue
@@ -18,7 +18,7 @@
 			</v-button>
 
 			<div class="content">
-				<v-overlay v-if="$slots.sidebar" absolute @click="sidebarActive = false" />
+				<v-overlay v-if="$slots.sidebar" absolute />
 
 				<nav v-if="$slots.sidebar" class="sidebar">
 					<slot name="sidebar" />
@@ -60,67 +60,48 @@
 	</v-dialog>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { useI18n } from 'vue-i18n';
-import { defineComponent, ref, computed, provide } from 'vue';
+import { ref, computed, provide } from 'vue';
 import HeaderBar from '@/views/private/components/header-bar.vue';
 import { i18n } from '@/lang';
 
-export default defineComponent({
-	components: {
-		HeaderBar,
+interface Props {
+	title: string;
+	subtitle?: string | null;
+	modelValue?: boolean;
+	persistent?: boolean;
+	icon?: string;
+	sidebarLabel?: string;
+	cancelable?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	subtitle: null,
+	modelValue: undefined,
+	persistent: false,
+	icon: 'box',
+	sidebarLabel: i18n.global.t('sidebar'),
+	cancelable: true,
+});
+
+const emit = defineEmits(['cancel', 'update:modelValue']);
+
+const { t } = useI18n();
+
+const localActive = ref(false);
+
+const mainEl = ref<Element>();
+
+provide('main-element', mainEl);
+
+const internalActive = computed({
+	get() {
+		return props.modelValue === undefined ? localActive.value : props.modelValue;
 	},
-	props: {
-		title: {
-			type: String,
-			required: true,
-		},
-		subtitle: {
-			type: String,
-			default: null,
-		},
-		modelValue: {
-			type: Boolean,
-			default: undefined,
-		},
-		persistent: {
-			type: Boolean,
-			default: false,
-		},
-		icon: {
-			type: String,
-			default: 'box',
-		},
-		sidebarLabel: {
-			type: String,
-			default: i18n.global.t('sidebar'),
-		},
-		cancelable: {
-			type: Boolean,
-			default: true,
-		},
-	},
-	emits: ['cancel', 'update:modelValue'],
-	setup(props, { emit }) {
-		const { t } = useI18n();
-
-		const localActive = ref(false);
-
-		const mainEl = ref<Element>();
-
-		provide('main-element', mainEl);
-
-		const internalActive = computed({
-			get() {
-				return props.modelValue === undefined ? localActive.value : props.modelValue;
-			},
-			set(newActive: boolean) {
-				localActive.value = newActive;
-				emit('update:modelValue', newActive);
-			},
-		});
-
-		return { t, internalActive, mainEl };
+	set(newActive: boolean) {
+		localActive.value = newActive;
+		emit('update:modelValue', newActive);
 	},
 });
 </script>
diff --git a/app/src/components/v-error.vue b/app/src/components/v-error.vue
index 4fce9374e7..bb71af69c7 100644
--- a/app/src/components/v-error.vue
+++ b/app/src/components/v-error.vue
@@ -13,52 +13,46 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { useI18n } from 'vue-i18n';
-import { defineComponent, computed, PropType, ref } from 'vue';
+import { computed, ref } from 'vue';
 import { isPlainObject } from 'lodash';
 import { useClipboard } from '@/composables/use-clipboard';
 
-export default defineComponent({
-	props: {
-		error: {
-			type: [Object, Error] as PropType<Record<string, any>>,
-			required: true,
-		},
-	},
-	setup(props) {
-		const { t } = useI18n();
+interface Props {
+	error: Record<string, any>;
+}
 
-		const code = computed(() => {
-			return props.error?.response?.data?.errors?.[0]?.extensions?.code || props.error?.extensions?.code || 'UNKNOWN';
-		});
+const props = defineProps<Props>();
 
-		const message = computed(() => {
-			let message = props.error?.response?.data?.errors?.[0]?.message || props.error?.message;
+const { t } = useI18n();
 
-			if (message.length > 200) {
-				message = message.substring(0, 197) + '...';
-			}
-
-			return message;
-		});
-
-		const copied = ref(false);
-
-		const { isCopySupported, copyToClipboard } = useClipboard();
-
-		return { t, code, copyError, isCopySupported, copied, message };
-
-		async function copyError() {
-			const error = props.error?.response?.data || props.error;
-			const isCopied = await copyToClipboard(
-				JSON.stringify(error, isPlainObject(error) ? null : Object.getOwnPropertyNames(error), 2)
-			);
-			if (!isCopied) return;
-			copied.value = true;
-		}
-	},
+const code = computed(() => {
+	return props.error?.response?.data?.errors?.[0]?.extensions?.code || props.error?.extensions?.code || 'UNKNOWN';
 });
+
+const message = computed(() => {
+	let message = props.error?.response?.data?.errors?.[0]?.message || props.error?.message;
+
+	if (message.length > 200) {
+		message = message.substring(0, 197) + '...';
+	}
+
+	return message;
+});
+
+const copied = ref(false);
+
+const { isCopySupported, copyToClipboard } = useClipboard();
+
+async function copyError() {
+	const error = props.error?.response?.data || props.error;
+	const isCopied = await copyToClipboard(
+		JSON.stringify(error, isPlainObject(error) ? null : Object.getOwnPropertyNames(error), 2)
+	);
+	if (!isCopied) return;
+	copied.value = true;
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/app/src/components/v-field-list/v-field-list-item.vue b/app/src/components/v-field-list/v-field-list-item.vue
index cb6454fa22..4c5688aa37 100644
--- a/app/src/components/v-field-list/v-field-list-item.vue
+++ b/app/src/components/v-field-list/v-field-list-item.vue
@@ -74,7 +74,10 @@ interface Props {
 	includeFunctions?: boolean;
 }
 
-const props = withDefaults(defineProps<Props>(), { depth: undefined, search: undefined, includeFunctions: false });
+const props = withDefaults(defineProps<Props>(), {
+	search: undefined,
+	includeFunctions: false,
+});
 
 defineEmits(['add']);
 
diff --git a/app/src/components/v-field-list/v-field-list.vue b/app/src/components/v-field-list/v-field-list.vue
index 17cf57b43d..7182f596f0 100644
--- a/app/src/components/v-field-list/v-field-list.vue
+++ b/app/src/components/v-field-list/v-field-list.vue
@@ -40,10 +40,10 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
+	field: undefined,
 	disabledFields: () => [],
 	includeFunctions: false,
 	includeRelations: true,
-	field: undefined,
 });
 
 defineEmits(['select-field']);
diff --git a/app/src/components/v-field-template/field-list-item.vue b/app/src/components/v-field-template/field-list-item.vue
index 6eba71b1c8..1c223f370a 100644
--- a/app/src/components/v-field-template/field-list-item.vue
+++ b/app/src/components/v-field-template/field-list-item.vue
@@ -13,32 +13,24 @@
 			v-for="childField in field.children"
 			:key="childField.key"
 			:field="childField"
-			:depth="depth - 1"
+			:depth="depth ? depth - 1 : undefined"
 			@add="$emit('add', $event)"
 		/>
 	</v-list-group>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
+<script setup lang="ts">
 import { FieldTree } from './types';
 import formatTitle from '@directus/format-title';
 
-export default defineComponent({
-	name: 'FieldListItem',
-	props: {
-		field: {
-			type: Object as PropType<FieldTree>,
-			required: true,
-		},
-		depth: {
-			type: Number,
-			default: undefined,
-		},
-	},
-	emits: ['add'],
-	setup() {
-		return { formatTitle };
-	},
+interface Props {
+	field: FieldTree;
+	depth?: number;
+}
+
+withDefaults(defineProps<Props>(), {
+	depth: undefined,
 });
+
+defineEmits(['add']);
 </script>
diff --git a/app/src/components/v-field-template/v-field-template.vue b/app/src/components/v-field-template/v-field-template.vue
index efecb7d3dc..17d9f274e3 100644
--- a/app/src/components/v-field-template/v-field-template.vue
+++ b/app/src/components/v-field-template/v-field-template.vue
@@ -28,276 +28,263 @@
 	</v-menu>
 </template>
 
-<script lang="ts">
-import { defineComponent, toRefs, ref, watch, onMounted, onUnmounted, PropType, computed } from 'vue';
+<script setup lang="ts">
+import { toRefs, ref, watch, onMounted, onUnmounted, computed } from 'vue';
 import FieldListItem from './field-list-item.vue';
 import { FieldTree } from './types';
 import { Field, Relation } from '@directus/shared/types';
 import { useFieldTree } from '@/composables/use-field-tree';
 import { flattenFieldGroups } from '@/utils/flatten-field-groups';
 
-export default defineComponent({
-	components: { FieldListItem },
-	props: {
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-		modelValue: {
-			type: String,
-			default: null,
-		},
-		nullable: {
-			type: Boolean,
-			default: true,
-		},
-		collection: {
-			type: String,
-			default: null,
-		},
-		depth: {
-			type: Number,
-			default: undefined,
-		},
-		placeholder: {
-			type: String,
-			default: null,
-		},
-		inject: {
-			type: Object as PropType<{ fields: Field[]; relations: Relation[] }>,
-			default: null,
-		},
-	},
-	emits: ['update:modelValue'],
-	setup(props, { emit }) {
-		const contentEl = ref<HTMLElement | null>(null);
+interface Props {
+	disabled?: boolean;
+	modelValue?: string | null;
+	nullable?: boolean;
+	collection?: string | null;
+	depth?: number;
+	placeholder?: string | null;
+	inject?: {
+		fields: Field[];
+		relations: Relation[];
+	} | null;
+}
 
-		const menuActive = ref(false);
-
-		const { collection, inject } = toRefs(props);
-		const { treeList, loadFieldRelations } = useFieldTree(collection, inject);
-
-		watch(() => props.modelValue, setContent, { immediate: true });
-
-		const grouplessTree = computed(() => {
-			return flattenFieldGroups(treeList.value);
-		});
-
-		onMounted(() => {
-			if (contentEl.value) {
-				contentEl.value.addEventListener('selectstart', onSelect);
-				setContent();
-			}
-		});
-
-		onUnmounted(() => {
-			if (contentEl.value) {
-				contentEl.value.removeEventListener('selectstart', onSelect);
-			}
-		});
-
-		return { menuActive, treeList, addField, onInput, contentEl, onClick, loadFieldRelations, onKeyDown };
-
-		function onInput() {
-			if (!contentEl.value) return;
-
-			const valueString = getInputValue();
-			emit('update:modelValue', valueString);
-		}
-
-		function onClick(event: MouseEvent) {
-			const target = event.target as HTMLElement;
-
-			if (target.tagName.toLowerCase() !== 'button') return;
-
-			const field = target.dataset.field;
-			emit('update:modelValue', props.modelValue.replace(`{{${field}}}`, ''));
-
-			const before = target.previousElementSibling;
-			const after = target.nextElementSibling;
-
-			if (!before || !after || !(before instanceof HTMLElement) || !(after instanceof HTMLElement)) return;
-
-			target.remove();
-			joinElements(before, after);
-			window.getSelection()?.removeAllRanges();
-			onInput();
-		}
-
-		function onKeyDown(event: KeyboardEvent) {
-			if (event.key === '{' || event.key === '}') {
-				event.preventDefault();
-				menuActive.value = true;
-			}
-
-			if (contentEl.value?.innerHTML === '') {
-				contentEl.value.innerHTML = '<span class="text"></span>';
-			}
-		}
-
-		function onSelect() {
-			if (!contentEl.value) return;
-			const selection = window.getSelection();
-			if (!selection || selection.rangeCount <= 0) return;
-			const range = selection.getRangeAt(0);
-			if (!range) return;
-			const start = range.startContainer;
-
-			if (
-				!(start instanceof HTMLElement && start.classList.contains('text')) &&
-				!start.parentElement?.classList.contains('text')
-			) {
-				selection.removeAllRanges();
-				const range = new Range();
-				let textSpan = null;
-
-				for (let i = 0; i < contentEl.value.childNodes.length || !textSpan; i++) {
-					const child = contentEl.value.children[i];
-					if (child.classList.contains('text')) {
-						textSpan = child;
-					}
-				}
-
-				if (!textSpan) {
-					textSpan = document.createElement('span');
-					textSpan.classList.add('text');
-					contentEl.value.appendChild(textSpan);
-				}
-
-				range.setStart(textSpan, 0);
-				selection.addRange(range);
-			}
-		}
-
-		function addField(field: FieldTree) {
-			if (!contentEl.value) return;
-
-			const button = document.createElement('button');
-			button.dataset.field = field.key;
-			button.setAttribute('contenteditable', 'false');
-			button.innerText = String(field.name);
-
-			if (window.getSelection()?.rangeCount == 0) {
-				const range = document.createRange();
-				range.selectNodeContents(contentEl.value.children[0]);
-				window.getSelection()?.addRange(range);
-			}
-
-			const range = window.getSelection()?.getRangeAt(0);
-			if (!range) return;
-			range.deleteContents();
-
-			const end = splitElements();
-
-			if (end) {
-				contentEl.value.insertBefore(button, end);
-				window.getSelection()?.removeAllRanges();
-			} else {
-				contentEl.value.appendChild(button);
-				const span = document.createElement('span');
-				span.classList.add('text');
-				contentEl.value.appendChild(span);
-			}
-
-			onInput();
-		}
-
-		function findTree(tree: FieldTree[] | undefined, fieldSections: string[]): FieldTree | undefined {
-			if (tree === undefined) return undefined;
-
-			const fieldObject = tree.find((f) => f.field === fieldSections[0]);
-
-			if (fieldObject === undefined) return undefined;
-			if (fieldSections.length === 1) return fieldObject;
-			return findTree(fieldObject.children, fieldSections.slice(1));
-		}
-
-		function joinElements(first: HTMLElement, second: HTMLElement) {
-			first.innerText += second.innerText;
-			second.remove();
-		}
-
-		function splitElements() {
-			const range = window.getSelection()?.getRangeAt(0);
-			if (!range) return;
-
-			const textNode = range.startContainer;
-			if (textNode.nodeType !== Node.TEXT_NODE) return;
-			const start = textNode.parentElement;
-			if (!start || !(start instanceof HTMLSpanElement) || !start.classList.contains('text')) return;
-
-			const startOffset = range.startOffset;
-
-			const left = start.textContent?.slice(0, startOffset) || '';
-			const right = start.textContent?.slice(startOffset) || '';
-
-			start.innerText = left;
-
-			const nextSpan = document.createElement('span');
-			nextSpan.classList.add('text');
-			nextSpan.innerText = right;
-			contentEl.value?.insertBefore(nextSpan, start.nextSibling);
-			return nextSpan;
-		}
-
-		function getInputValue() {
-			if (!contentEl.value) return null;
-
-			const value = Array.from(contentEl.value.childNodes).reduce((acc, node) => {
-				const el = node as HTMLElement;
-				const tag = el.tagName;
-
-				if (tag && tag.toLowerCase() === 'button') return (acc += `{{${el.dataset.field}}}`);
-				else if ('textContent' in el) return (acc += el.textContent);
-
-				return (acc += '');
-			}, '');
-
-			if (props.nullable === true && value === '') {
-				return null;
-			}
-
-			return value;
-		}
-
-		function setContent() {
-			if (!contentEl.value) return;
-
-			if (props.modelValue === null || props.modelValue === '') {
-				contentEl.value.innerHTML = '<span class="text"></span>';
-				return;
-			}
-
-			if (props.modelValue !== getInputValue()) {
-				const regex = /({{.*?}})/g;
-
-				const newInnerHTML = props.modelValue
-					.split(regex)
-					.map((part) => {
-						if (part.startsWith('{{') === false) {
-							return `<span class="text">${part}</span>`;
-						}
-						const fieldKey = part.replace(/({|})/g, '').trim();
-						const fieldPath = fieldKey.split('.');
-
-						for (let i = 0; i < fieldPath.length; i++) {
-							loadFieldRelations(fieldPath.slice(0, i).join('.'));
-						}
-
-						const field = findTree(grouplessTree.value, fieldPath);
-
-						if (!field) return '';
-
-						return `<button contenteditable="false" data-field="${fieldKey}" ${props.disabled ? 'disabled' : ''}>${
-							field.name
-						}</button>`;
-					})
-					.join('');
-				contentEl.value.innerHTML = newInnerHTML;
-			}
-		}
-	},
+const props = withDefaults(defineProps<Props>(), {
+	disabled: false,
+	modelValue: null,
+	nullable: true,
+	collection: null,
+	depth: undefined,
+	placeholder: null,
+	inject: null,
 });
+
+const emit = defineEmits(['update:modelValue']);
+
+const contentEl = ref<HTMLElement | null>(null);
+
+const menuActive = ref(false);
+
+const { collection, inject } = toRefs(props);
+const { treeList, loadFieldRelations } = useFieldTree(collection, inject);
+
+watch(() => props.modelValue, setContent, { immediate: true });
+
+const grouplessTree = computed(() => {
+	return flattenFieldGroups(treeList.value);
+});
+
+onMounted(() => {
+	if (contentEl.value) {
+		contentEl.value.addEventListener('selectstart', onSelect);
+		setContent();
+	}
+});
+
+onUnmounted(() => {
+	if (contentEl.value) {
+		contentEl.value.removeEventListener('selectstart', onSelect);
+	}
+});
+
+function onInput() {
+	if (!contentEl.value) return;
+
+	const valueString = getInputValue();
+	emit('update:modelValue', valueString);
+}
+
+function onClick(event: MouseEvent) {
+	const target = event.target as HTMLElement;
+
+	if (target.tagName.toLowerCase() !== 'button') return;
+
+	const field = target.dataset.field;
+	emit('update:modelValue', props.modelValue?.replace(`{{${field}}}`, ''));
+
+	const before = target.previousElementSibling;
+	const after = target.nextElementSibling;
+
+	if (!before || !after || !(before instanceof HTMLElement) || !(after instanceof HTMLElement)) return;
+
+	target.remove();
+	joinElements(before, after);
+	window.getSelection()?.removeAllRanges();
+	onInput();
+}
+
+function onKeyDown(event: KeyboardEvent) {
+	if (event.key === '{' || event.key === '}') {
+		event.preventDefault();
+		menuActive.value = true;
+	}
+
+	if (contentEl.value?.innerHTML === '') {
+		contentEl.value.innerHTML = '<span class="text"></span>';
+	}
+}
+
+function onSelect() {
+	if (!contentEl.value) return;
+	const selection = window.getSelection();
+	if (!selection || selection.rangeCount <= 0) return;
+	const range = selection.getRangeAt(0);
+	if (!range) return;
+	const start = range.startContainer;
+
+	if (
+		!(start instanceof HTMLElement && start.classList.contains('text')) &&
+		!start.parentElement?.classList.contains('text')
+	) {
+		selection.removeAllRanges();
+		const range = new Range();
+		let textSpan = null;
+
+		for (let i = 0; i < contentEl.value.childNodes.length || !textSpan; i++) {
+			const child = contentEl.value.children[i];
+			if (child.classList.contains('text')) {
+				textSpan = child;
+			}
+		}
+
+		if (!textSpan) {
+			textSpan = document.createElement('span');
+			textSpan.classList.add('text');
+			contentEl.value.appendChild(textSpan);
+		}
+
+		range.setStart(textSpan, 0);
+		selection.addRange(range);
+	}
+}
+
+function addField(field: FieldTree) {
+	if (!contentEl.value) return;
+
+	const button = document.createElement('button');
+	button.dataset.field = field.key;
+	button.setAttribute('contenteditable', 'false');
+	button.innerText = String(field.name);
+
+	if (window.getSelection()?.rangeCount == 0) {
+		const range = document.createRange();
+		range.selectNodeContents(contentEl.value.children[0]);
+		window.getSelection()?.addRange(range);
+	}
+
+	const range = window.getSelection()?.getRangeAt(0);
+	if (!range) return;
+	range.deleteContents();
+
+	const end = splitElements();
+
+	if (end) {
+		contentEl.value.insertBefore(button, end);
+		window.getSelection()?.removeAllRanges();
+	} else {
+		contentEl.value.appendChild(button);
+		const span = document.createElement('span');
+		span.classList.add('text');
+		contentEl.value.appendChild(span);
+	}
+
+	onInput();
+}
+
+function findTree(tree: FieldTree[] | undefined, fieldSections: string[]): FieldTree | undefined {
+	if (tree === undefined) return undefined;
+
+	const fieldObject = tree.find((f) => f.field === fieldSections[0]);
+
+	if (fieldObject === undefined) return undefined;
+	if (fieldSections.length === 1) return fieldObject;
+	return findTree(fieldObject.children, fieldSections.slice(1));
+}
+
+function joinElements(first: HTMLElement, second: HTMLElement) {
+	first.innerText += second.innerText;
+	second.remove();
+}
+
+function splitElements() {
+	const range = window.getSelection()?.getRangeAt(0);
+	if (!range) return;
+
+	const textNode = range.startContainer;
+	if (textNode.nodeType !== Node.TEXT_NODE) return;
+	const start = textNode.parentElement;
+	if (!start || !(start instanceof HTMLSpanElement) || !start.classList.contains('text')) return;
+
+	const startOffset = range.startOffset;
+
+	const left = start.textContent?.slice(0, startOffset) || '';
+	const right = start.textContent?.slice(startOffset) || '';
+
+	start.innerText = left;
+
+	const nextSpan = document.createElement('span');
+	nextSpan.classList.add('text');
+	nextSpan.innerText = right;
+	contentEl.value?.insertBefore(nextSpan, start.nextSibling);
+	return nextSpan;
+}
+
+function getInputValue() {
+	if (!contentEl.value) return null;
+
+	const value = Array.from(contentEl.value.childNodes).reduce((acc, node) => {
+		const el = node as HTMLElement;
+		const tag = el.tagName;
+
+		if (tag && tag.toLowerCase() === 'button') return (acc += `{{${el.dataset.field}}}`);
+		else if ('textContent' in el) return (acc += el.textContent);
+
+		return (acc += '');
+	}, '');
+
+	if (props.nullable === true && value === '') {
+		return null;
+	}
+
+	return value;
+}
+
+function setContent() {
+	if (!contentEl.value) return;
+
+	if (props.modelValue === null || props.modelValue === '') {
+		contentEl.value.innerHTML = '<span class="text"></span>';
+		return;
+	}
+
+	if (props.modelValue !== getInputValue()) {
+		const regex = /({{.*?}})/g;
+
+		const newInnerHTML = props.modelValue
+			.split(regex)
+			.map((part) => {
+				if (part.startsWith('{{') === false) {
+					return `<span class="text">${part}</span>`;
+				}
+				const fieldKey = part.replace(/({|})/g, '').trim();
+				const fieldPath = fieldKey.split('.');
+
+				for (let i = 0; i < fieldPath.length; i++) {
+					loadFieldRelations(fieldPath.slice(0, i).join('.'));
+				}
+
+				const field = findTree(grouplessTree.value, fieldPath);
+
+				if (!field) return '';
+
+				return `<button contenteditable="false" data-field="${fieldKey}" ${props.disabled ? 'disabled' : ''}>${
+					field.name
+				}</button>`;
+			})
+			.join('');
+		contentEl.value.innerHTML = newInnerHTML;
+	}
+}
 </script>
 
 <style scoped>
diff --git a/app/src/components/v-form/form-field-interface.vue b/app/src/components/v-form/form-field-interface.vue
index 1fc35557dc..79646d050c 100644
--- a/app/src/components/v-form/form-field-interface.vue
+++ b/app/src/components/v-form/form-field-interface.vue
@@ -44,69 +44,45 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { useI18n } from 'vue-i18n';
-import { defineComponent, PropType, computed } from 'vue';
+import { computed } from 'vue';
 import { Field } from '@directus/shared/types';
 import { getInterface } from '@/interfaces';
 import { getDefaultInterfaceForType } from '@/utils/get-default-interface-for-type';
 
-export default defineComponent({
-	props: {
-		field: {
-			type: Object as PropType<Field>,
-			required: true,
-		},
-		batchMode: {
-			type: Boolean,
-			default: false,
-		},
-		batchActive: {
-			type: Boolean,
-			default: false,
-		},
-		primaryKey: {
-			type: [Number, String],
-			default: null,
-		},
-		modelValue: {
-			type: [String, Number, Object, Array, Boolean],
-			default: undefined,
-		},
-		loading: {
-			type: Boolean,
-			default: false,
-		},
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-		autofocus: {
-			type: Boolean,
-			default: false,
-		},
-		rawEditorEnabled: {
-			type: Boolean,
-			default: false,
-		},
-		rawEditorActive: {
-			type: Boolean,
-			default: false,
-		},
-		direction: {
-			type: String,
-			default: undefined,
-		},
-	},
-	emits: ['update:modelValue', 'setFieldValue'],
-	setup(props) {
-		const { t } = useI18n();
+interface Props {
+	field: Field;
+	batchMode?: boolean;
+	batchActive?: boolean;
+	primaryKey?: string | number | null;
+	modelValue?: string | number | boolean | Record<string, any> | Array<any>;
+	loading?: boolean;
+	disabled?: boolean;
+	autofocus?: boolean;
+	rawEditorEnabled?: boolean;
+	rawEditorActive?: boolean;
+	direction?: string;
+}
 
-		const interfaceExists = computed(() => !!getInterface(props.field?.meta?.interface || 'input'));
-
-		return { t, interfaceExists, getDefaultInterfaceForType };
-	},
+const props = withDefaults(defineProps<Props>(), {
+	batchMode: false,
+	batchActive: false,
+	primaryKey: null,
+	modelValue: undefined,
+	loading: false,
+	disabled: false,
+	autofocus: false,
+	rawEditorEnabled: false,
+	rawEditorActive: false,
+	direction: undefined,
 });
+
+defineEmits(['update:modelValue', 'setFieldValue']);
+
+const { t } = useI18n();
+
+const interfaceExists = computed(() => !!getInterface(props.field?.meta?.interface || 'input'));
 </script>
 
 <style lang="scss" scoped>
diff --git a/app/src/components/v-form/form-field-label.vue b/app/src/components/v-form/form-field-label.vue
index 743ae4693a..4c2664b281 100644
--- a/app/src/components/v-form/form-field-label.vue
+++ b/app/src/components/v-form/form-field-label.vue
@@ -26,69 +26,41 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { useI18n } from 'vue-i18n';
-import { defineComponent, PropType } from 'vue';
 import { Field } from '@directus/shared/types';
 
-export default defineComponent({
-	props: {
-		batchMode: {
-			type: Boolean,
-			default: false,
-		},
-		batchActive: {
-			type: Boolean,
-			default: false,
-		},
-		field: {
-			type: Object as PropType<Field>,
-			required: true,
-		},
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-		toggle: {
-			type: Function,
-			required: true,
-		},
-		active: {
-			type: Boolean,
-			default: false,
-		},
-		edited: {
-			type: Boolean,
-			default: false,
-		},
-		hasError: {
-			type: Boolean,
-			default: false,
-		},
-		badge: {
-			type: String,
-			default: null,
-		},
-		loading: {
-			type: Boolean,
-			default: false,
-		},
-		rawEditorEnabled: {
-			type: Boolean,
-			default: false,
-		},
-		rawEditorActive: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	emits: ['toggle-batch', 'toggle-raw'],
-	setup() {
-		const { t } = useI18n();
+interface Props {
+	field: Field;
+	toggle: (event: Event) => any;
+	batchMode?: boolean;
+	batchActive?: boolean;
+	disabled?: boolean;
+	active?: boolean;
+	edited?: boolean;
+	hasError?: boolean;
+	badge?: string | null;
+	loading?: boolean;
+	rawEditorEnabled?: boolean;
+	rawEditorActive?: boolean;
+}
 
-		return { t };
-	},
+withDefaults(defineProps<Props>(), {
+	batchMode: false,
+	batchActive: false,
+	disabled: false,
+	active: false,
+	edited: false,
+	hasError: false,
+	badge: null,
+	loading: false,
+	rawEditorEnabled: false,
+	rawEditorActive: false,
 });
+
+defineEmits(['toggle-batch', 'toggle-raw']);
+
+const { t } = useI18n();
 </script>
 
 <style lang="scss" scoped>
diff --git a/app/src/components/v-form/form-field-menu.vue b/app/src/components/v-form/form-field-menu.vue
index 569a0ce365..af91d49cea 100644
--- a/app/src/components/v-form/form-field-menu.vue
+++ b/app/src/components/v-form/form-field-menu.vue
@@ -47,54 +47,44 @@
 	</v-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { useI18n } from 'vue-i18n';
-import { defineComponent, PropType, computed } from 'vue';
+import { computed } from 'vue';
 import { Field } from '@directus/shared/types';
 import { useClipboard } from '@/composables/use-clipboard';
 
-export default defineComponent({
-	props: {
-		field: {
-			type: Object as PropType<Field>,
-			required: true,
-		},
-		modelValue: {
-			type: [String, Number, Object, Array, Boolean],
-			default: null,
-		},
-		initialValue: {
-			type: [String, Number, Object, Array, Boolean],
-			default: null,
-		},
-		restricted: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	emits: ['update:modelValue', 'unset', 'edit-raw', 'copy-raw', 'paste-raw'],
-	setup(props) {
-		const { t } = useI18n();
+interface Props {
+	field: Field;
+	modelValue?: string | number | boolean | Record<string, any> | Array<any> | null;
+	initialValue?: string | number | boolean | Record<string, any> | Array<any> | null;
+	restricted?: boolean;
+}
 
-		const { isCopySupported, isPasteSupported } = useClipboard();
-
-		const defaultValue = computed(() => {
-			const savedValue = props.field?.schema?.default_value;
-			return savedValue !== undefined ? savedValue : null;
-		});
-
-		const isRequired = computed(() => {
-			return props.field?.schema?.is_nullable === false;
-		});
-
-		const relational = computed(
-			() =>
-				props.field.meta?.special?.find((type) =>
-					['file', 'files', 'm2o', 'o2m', 'm2m', 'm2a', 'translations'].includes(type)
-				) !== undefined
-		);
-
-		return { t, defaultValue, isRequired, isCopySupported, isPasteSupported, relational };
-	},
+const props = withDefaults(defineProps<Props>(), {
+	modelValue: null,
+	initialValue: null,
+	restricted: false,
 });
+
+defineEmits(['update:modelValue', 'unset', 'edit-raw', 'copy-raw', 'paste-raw']);
+
+const { t } = useI18n();
+
+const { isCopySupported, isPasteSupported } = useClipboard();
+
+const defaultValue = computed(() => {
+	const savedValue = props.field?.schema?.default_value;
+	return savedValue !== undefined ? savedValue : null;
+});
+
+const isRequired = computed(() => {
+	return props.field?.schema?.is_nullable === false;
+});
+
+const relational = computed(
+	() =>
+		props.field.meta?.special?.find((type) =>
+			['file', 'files', 'm2o', 'o2m', 'm2m', 'm2a', 'translations'].includes(type)
+		) !== undefined
+);
 </script>
diff --git a/app/src/components/v-form/form-field.vue b/app/src/components/v-form/form-field.vue
index f84c4b39af..e8e66164c1 100644
--- a/app/src/components/v-form/form-field.vue
+++ b/app/src/components/v-form/form-field.vue
@@ -73,7 +73,7 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { getJSType } from '@/utils/get-js-type';
 import { Field, ValidationError } from '@directus/shared/types';
 import { isEqual } from 'lodash';
diff --git a/app/src/components/v-form/v-form.vue b/app/src/components/v-form/v-form.vue
index 9c11a4add5..d11e3818f2 100644
--- a/app/src/components/v-form/v-form.vue
+++ b/app/src/components/v-form/v-form.vue
@@ -41,7 +41,7 @@
 			<form-field
 				v-else-if="!fieldsMap[fieldName]?.meta?.hidden"
 				:ref="
-					(el: Element) => {
+					(el) => {
 						formFieldEls[fieldName] = el;
 					}
 				"
@@ -77,8 +77,8 @@
 	</div>
 </template>
 
-<script lang="ts">
-import { useElementSize } from '@/composables/use-element-size';
+<script setup lang="ts">
+import { useElementSize } from '@directus/shared/composables';
 import { useFormFields } from '@/composables/use-form-fields';
 import { useFieldsStore } from '@/stores/fields';
 import { applyConditions } from '@/utils/apply-conditions';
@@ -86,8 +86,7 @@ import { extractFieldFromFunction } from '@/utils/extract-field-from-function';
 import { getDefaultValuesFromFields } from '@/utils/get-default-values-from-fields';
 import { Field, ValidationError } from '@directus/shared/types';
 import { assign, cloneDeep, isEqual, isNil, omit, pick } from 'lodash';
-import { computed, ComputedRef, defineComponent, onBeforeUpdate, PropType, provide, ref, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { computed, ComputedRef, onBeforeUpdate, provide, ref, watch } from 'vue';
 import FormField from './form-field.vue';
 import ValidationErrors from './validation-errors.vue';
 
@@ -95,338 +94,279 @@ type FieldValues = {
 	[field: string]: any;
 };
 
-export default defineComponent({
-	name: 'VForm',
-	components: { FormField, ValidationErrors },
-	props: {
-		collection: {
-			type: String,
-			default: undefined,
-		},
-		fields: {
-			type: Array as PropType<Field[]>,
-			default: undefined,
-		},
-		initialValues: {
-			type: Object as PropType<FieldValues>,
-			default: null,
-		},
-		modelValue: {
-			type: Object as PropType<FieldValues>,
-			default: null,
-		},
-		loading: {
-			type: Boolean,
-			default: false,
-		},
-		batchMode: {
-			type: Boolean,
-			default: false,
-		},
-		// Note: can be null when the form is used in batch mode
-		primaryKey: {
-			type: [String, Number],
-			default: null,
-		},
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-		validationErrors: {
-			type: Array as PropType<ValidationError[]>,
-			default: () => [],
-		},
-		autofocus: {
-			type: Boolean,
-			default: false,
-		},
-		group: {
-			type: String,
-			default: null,
-		},
-		badge: {
-			type: String,
-			default: null,
-		},
-		nested: {
-			type: Boolean,
-			default: false,
-		},
-		rawEditorEnabled: {
-			type: Boolean,
-			default: false,
-		},
-		direction: {
-			type: String,
-			default: null,
-		},
-	},
-	emits: ['update:modelValue'],
-	setup(props, { emit }) {
-		const { t } = useI18n();
+interface Props {
+	collection?: string;
+	fields?: Field[];
+	initialValues?: FieldValues | null;
+	modelValue?: FieldValues | null;
+	loading?: boolean;
+	batchMode?: boolean;
+	primaryKey?: string | number;
+	disabled?: boolean;
+	validationErrors?: ValidationError[];
+	autofocus?: boolean;
+	group?: string | null;
+	badge?: string;
+	nested?: boolean;
+	rawEditorEnabled?: boolean;
+	direction?: string;
+}
 
-		const values = computed(() => {
-			return Object.assign({}, props.initialValues, props.modelValue);
-		});
-
-		const el = ref<Element>();
-
-		const { width } = useElementSize(el);
-
-		const gridClass = computed<string | null>(() => {
-			if (el.value === null) return null;
-
-			if (width.value > 792) {
-				return 'grid with-fill';
-			} else {
-				return 'grid';
-			}
-		});
-
-		const formFieldEls = ref<Record<string, any>>({});
-
-		onBeforeUpdate(() => {
-			formFieldEls.value = {};
-		});
-
-		const { fieldNames, fieldsMap, getFieldsForGroup, fieldsForGroup, isDisabled } = useForm();
-		const { toggleBatchField, batchActiveFields } = useBatch();
-		const { toggleRawField, rawActiveFields } = useRawEditor();
-
-		const firstEditableFieldIndex = computed(() => {
-			for (let i = 0; i < fieldNames.value.length; i++) {
-				const field = fieldsMap.value[fieldNames.value[i]];
-				if (field?.meta && !field.meta?.readonly && !field.meta?.hidden) {
-					return i;
-				}
-			}
-			return null;
-		});
-
-		const firstVisibleFieldIndex = computed(() => {
-			for (let i = 0; i < fieldNames.value.length; i++) {
-				const field = fieldsMap.value[fieldNames.value[i]];
-				if (field?.meta && !field.meta?.hidden) {
-					return i;
-				}
-			}
-			return null;
-		});
-
-		watch(
-			() => props.validationErrors,
-			(newVal, oldVal) => {
-				if (props.nested) return;
-				if (isEqual(newVal, oldVal)) return;
-				if (newVal?.length > 0) el?.value?.scrollIntoView({ behavior: 'smooth' });
-			}
-		);
-
-		provide('values', values);
-
-		return {
-			t,
-			values,
-			setValue,
-			batchActiveFields,
-			toggleBatchField,
-			rawActiveFields,
-			toggleRawField,
-			unsetValue,
-			firstEditableFieldIndex,
-			firstVisibleFieldIndex,
-			isNil,
-			apply,
-			el,
-			gridClass,
-			omit,
-			getFieldsForGroup,
-			fieldsForGroup,
-			isDisabled,
-			scrollToField,
-			formFieldEls,
-			fieldNames,
-			fieldsMap,
-		};
-
-		function useForm() {
-			const fieldsStore = useFieldsStore();
-			const fields = ref<Field[]>(getFields());
-
-			watch(
-				() => props.fields,
-				() => {
-					const newVal = getFields();
-					if (!isEqual(fields.value, newVal)) {
-						fields.value = newVal;
-					}
-				}
-			);
-
-			const defaultValues = getDefaultValuesFromFields(fields);
-
-			const { formFields } = useFormFields(fields);
-
-			const fieldsMap: ComputedRef<Record<string, Field | undefined>> = computed(() => {
-				if (props.loading) return {} as Record<string, undefined>;
-				const valuesWithDefaults = Object.assign({}, defaultValues.value, values.value);
-				return formFields.value.reduce((result: Record<string, Field>, field: Field) => {
-					const newField = applyConditions(valuesWithDefaults, setPrimaryKeyReadonly(field));
-					if (newField.field) result[newField.field] = newField;
-					return result;
-				}, {} as Record<string, Field>);
-			});
-
-			const fieldsInGroup = computed(() =>
-				formFields.value.filter(
-					(field: Field) => field.meta?.group === props.group || (props.group === null && isNil(field.meta?.group))
-				)
-			);
-			const fieldNames = computed(() => {
-				return fieldsInGroup.value.map((f) => f.field);
-			});
-
-			const fieldsForGroup = computed(() =>
-				fieldNames.value.map((name: string) => getFieldsForGroup(fieldsMap.value[name]?.meta?.field || null))
-			);
-
-			return { fieldNames, fieldsMap, isDisabled, getFieldsForGroup, fieldsForGroup };
-
-			function isDisabled(field: Field | undefined) {
-				if (!field) return true;
-				const meta = fieldsMap.value?.[field.field]?.meta;
-				return (
-					props.loading ||
-					props.disabled === true ||
-					meta?.readonly === true ||
-					field.schema?.is_generated === true ||
-					(props.batchMode && batchActiveFields.value.includes(field.field) === false)
-				);
-			}
-
-			function getFieldsForGroup(group: null | string, passed: string[] = []): Field[] {
-				const fieldsInGroup: Field[] = fields.value.filter((field) => {
-					const meta = fieldsMap.value?.[field.field]?.meta;
-					return meta?.group === group || (group === null && isNil(meta));
-				});
-
-				for (const field of fieldsInGroup) {
-					const meta = fieldsMap.value?.[field.field]?.meta;
-					if (meta?.special?.includes('group') && !passed.includes(meta!.field)) {
-						passed.push(meta!.field);
-						fieldsInGroup.push(...getFieldsForGroup(meta!.field, passed));
-					}
-				}
-
-				return fieldsInGroup;
-			}
-
-			function getFields(): Field[] {
-				if (props.collection) {
-					return fieldsStore.getFieldsForCollection(props.collection);
-				}
-				if (props.fields) {
-					return props.fields;
-				}
-
-				throw new Error('[v-form]: You need to pass either the collection or fields prop.');
-			}
-
-			function setPrimaryKeyReadonly(field: Field) {
-				if (
-					field.schema?.has_auto_increment === true ||
-					(field.schema?.is_primary_key === true && props.primaryKey !== '+')
-				) {
-					const fieldClone = cloneDeep(field) as any;
-					if (!fieldClone.meta) fieldClone.meta = {};
-					fieldClone.meta.readonly = true;
-					return fieldClone;
-				}
-
-				return field;
-			}
-		}
-
-		function setValue(fieldKey: string, value: any, opts?: { force?: boolean }) {
-			const field = fieldsMap.value[fieldKey];
-
-			if (opts?.force !== true && (!field || isDisabled(field))) return;
-
-			const edits = props.modelValue ? cloneDeep(props.modelValue) : {};
-			edits[fieldKey] = value;
-			emit('update:modelValue', edits);
-		}
-
-		function apply(updates: { [field: string]: any }) {
-			const updatableKeys = props.batchMode
-				? Object.keys(updates)
-				: Object.keys(updates).filter((key) => {
-						const field = fieldsMap.value[key];
-						if (!field) return false;
-						return field.schema?.is_primary_key || !isDisabled(field);
-				  });
-
-			if (!isNil(props.group)) {
-				const groupFields = getFieldsForGroup(props.group)
-					.filter((field) => !field.schema?.is_primary_key && !isDisabled(field))
-					.map((field) => field.field);
-				emit('update:modelValue', assign({}, omit(props.modelValue, groupFields), pick(updates, updatableKeys)));
-			} else {
-				emit('update:modelValue', pick(assign({}, props.modelValue, updates), updatableKeys));
-			}
-		}
-
-		function unsetValue(field: Field | undefined) {
-			if (!field) return;
-			if (!props.batchMode && isDisabled(field)) return;
-
-			if (field.field in (props.modelValue || {})) {
-				const newEdits = { ...props.modelValue };
-				delete newEdits[field.field];
-				emit('update:modelValue', newEdits);
-			}
-		}
-
-		function useBatch() {
-			const batchActiveFields = ref<string[]>([]);
-
-			return { batchActiveFields, toggleBatchField };
-
-			function toggleBatchField(field: Field | undefined) {
-				if (!field) return;
-				if (batchActiveFields.value.includes(field.field)) {
-					batchActiveFields.value = batchActiveFields.value.filter((fieldKey) => fieldKey !== field.field);
-
-					unsetValue(field);
-				} else {
-					batchActiveFields.value = [...batchActiveFields.value, field.field];
-					setValue(field.field, field.schema?.default_value);
-				}
-			}
-		}
-
-		function scrollToField(fieldKey: string) {
-			const { field } = extractFieldFromFunction(fieldKey);
-			if (!formFieldEls.value[field]) return;
-			formFieldEls.value[field].$el.scrollIntoView({ behavior: 'smooth' });
-		}
-
-		function useRawEditor() {
-			const rawActiveFields = ref(new Set<string>());
-
-			return { rawActiveFields, toggleRawField };
-
-			function toggleRawField(field: Field | undefined) {
-				if (!field) return;
-				if (rawActiveFields.value.has(field.field)) {
-					rawActiveFields.value.delete(field.field);
-				} else {
-					rawActiveFields.value.add(field.field);
-				}
-			}
-		}
-	},
+const props = withDefaults(defineProps<Props>(), {
+	collection: undefined,
+	fields: undefined,
+	initialValues: null,
+	modelValue: null,
+	loading: false,
+	batchMode: false,
+	primaryKey: undefined,
+	disabled: false,
+	validationErrors: () => [],
+	autofocus: false,
+	group: null,
+	badge: undefined,
+	nested: false,
+	rawEditorEnabled: false,
+	direction: undefined,
 });
+
+const emit = defineEmits(['update:modelValue']);
+
+const values = computed(() => {
+	return Object.assign({}, props.initialValues, props.modelValue);
+});
+
+const el = ref<Element>();
+
+const { width } = useElementSize(el);
+
+const gridClass = computed<string | null>(() => {
+	if (el.value === null) return null;
+
+	if (width.value > 792) {
+		return 'grid with-fill';
+	} else {
+		return 'grid';
+	}
+});
+
+const formFieldEls = ref<Record<string, any>>({});
+
+onBeforeUpdate(() => {
+	formFieldEls.value = {};
+});
+
+const { fieldNames, fieldsMap, getFieldsForGroup, fieldsForGroup, isDisabled } = useForm();
+const { toggleBatchField, batchActiveFields } = useBatch();
+const { toggleRawField, rawActiveFields } = useRawEditor();
+
+const firstEditableFieldIndex = computed(() => {
+	for (let i = 0; i < fieldNames.value.length; i++) {
+		const field = fieldsMap.value[fieldNames.value[i]];
+		if (field?.meta && !field.meta?.readonly && !field.meta?.hidden) {
+			return i;
+		}
+	}
+	return null;
+});
+
+const firstVisibleFieldIndex = computed(() => {
+	for (let i = 0; i < fieldNames.value.length; i++) {
+		const field = fieldsMap.value[fieldNames.value[i]];
+		if (field?.meta && !field.meta?.hidden) {
+			return i;
+		}
+	}
+	return null;
+});
+
+watch(
+	() => props.validationErrors,
+	(newVal, oldVal) => {
+		if (props.nested) return;
+		if (isEqual(newVal, oldVal)) return;
+		if (newVal?.length > 0) el?.value?.scrollIntoView({ behavior: 'smooth' });
+	}
+);
+
+provide('values', values);
+
+function useForm() {
+	const fieldsStore = useFieldsStore();
+	const fields = ref<Field[]>(getFields());
+
+	watch(
+		() => props.fields,
+		() => {
+			const newVal = getFields();
+			if (!isEqual(fields.value, newVal)) {
+				fields.value = newVal;
+			}
+		}
+	);
+
+	const defaultValues = getDefaultValuesFromFields(fields);
+
+	const { formFields } = useFormFields(fields);
+
+	const fieldsMap: ComputedRef<Record<string, Field | undefined>> = computed(() => {
+		if (props.loading) return {} as Record<string, undefined>;
+		const valuesWithDefaults = Object.assign({}, defaultValues.value, values.value);
+		return formFields.value.reduce((result: Record<string, Field>, field: Field) => {
+			const newField = applyConditions(valuesWithDefaults, setPrimaryKeyReadonly(field));
+			if (newField.field) result[newField.field] = newField;
+			return result;
+		}, {} as Record<string, Field>);
+	});
+
+	const fieldsInGroup = computed(() =>
+		formFields.value.filter(
+			(field: Field) => field.meta?.group === props.group || (props.group === null && isNil(field.meta?.group))
+		)
+	);
+	const fieldNames = computed(() => {
+		return fieldsInGroup.value.map((f) => f.field);
+	});
+
+	const fieldsForGroup = computed(() =>
+		fieldNames.value.map((name: string) => getFieldsForGroup(fieldsMap.value[name]?.meta?.field || null))
+	);
+
+	return { fieldNames, fieldsMap, isDisabled, getFieldsForGroup, fieldsForGroup };
+
+	function isDisabled(field: Field | undefined) {
+		if (!field) return true;
+		const meta = fieldsMap.value?.[field.field]?.meta;
+		return (
+			props.loading ||
+			props.disabled === true ||
+			meta?.readonly === true ||
+			field.schema?.is_generated === true ||
+			(props.batchMode && batchActiveFields.value.includes(field.field) === false)
+		);
+	}
+
+	function getFieldsForGroup(group: null | string, passed: string[] = []): Field[] {
+		const fieldsInGroup: Field[] = fields.value.filter((field) => {
+			const meta = fieldsMap.value?.[field.field]?.meta;
+			return meta?.group === group || (group === null && isNil(meta));
+		});
+
+		for (const field of fieldsInGroup) {
+			const meta = fieldsMap.value?.[field.field]?.meta;
+			if (meta?.special?.includes('group') && !passed.includes(meta!.field)) {
+				passed.push(meta!.field);
+				fieldsInGroup.push(...getFieldsForGroup(meta!.field, passed));
+			}
+		}
+
+		return fieldsInGroup;
+	}
+
+	function getFields(): Field[] {
+		if (props.collection) {
+			return fieldsStore.getFieldsForCollection(props.collection);
+		}
+		if (props.fields) {
+			return props.fields;
+		}
+
+		throw new Error('[v-form]: You need to pass either the collection or fields prop.');
+	}
+
+	function setPrimaryKeyReadonly(field: Field) {
+		if (
+			field.schema?.has_auto_increment === true ||
+			(field.schema?.is_primary_key === true && props.primaryKey !== '+')
+		) {
+			const fieldClone = cloneDeep(field) as any;
+			if (!fieldClone.meta) fieldClone.meta = {};
+			fieldClone.meta.readonly = true;
+			return fieldClone;
+		}
+
+		return field;
+	}
+}
+
+function setValue(fieldKey: string, value: any, opts?: { force?: boolean }) {
+	const field = fieldsMap.value[fieldKey];
+
+	if (opts?.force !== true && (!field || isDisabled(field))) return;
+
+	const edits = props.modelValue ? cloneDeep(props.modelValue) : {};
+	edits[fieldKey] = value;
+	emit('update:modelValue', edits);
+}
+
+function apply(updates: { [field: string]: any }) {
+	const updatableKeys = props.batchMode
+		? Object.keys(updates)
+		: Object.keys(updates).filter((key) => {
+				const field = fieldsMap.value[key];
+				if (!field) return false;
+				return field.schema?.is_primary_key || !isDisabled(field);
+		  });
+
+	if (!isNil(props.group)) {
+		const groupFields = getFieldsForGroup(props.group)
+			.filter((field) => !field.schema?.is_primary_key && !isDisabled(field))
+			.map((field) => field.field);
+		emit('update:modelValue', assign({}, omit(props.modelValue, groupFields), pick(updates, updatableKeys)));
+	} else {
+		emit('update:modelValue', pick(assign({}, props.modelValue, updates), updatableKeys));
+	}
+}
+
+function unsetValue(field: Field | undefined) {
+	if (!field) return;
+	if (!props.batchMode && isDisabled(field)) return;
+
+	if (field.field in (props.modelValue || {})) {
+		const newEdits = { ...props.modelValue };
+		delete newEdits[field.field];
+		emit('update:modelValue', newEdits);
+	}
+}
+
+function useBatch() {
+	const batchActiveFields = ref<string[]>([]);
+
+	return { batchActiveFields, toggleBatchField };
+
+	function toggleBatchField(field: Field | undefined) {
+		if (!field) return;
+		if (batchActiveFields.value.includes(field.field)) {
+			batchActiveFields.value = batchActiveFields.value.filter((fieldKey) => fieldKey !== field.field);
+
+			unsetValue(field);
+		} else {
+			batchActiveFields.value = [...batchActiveFields.value, field.field];
+			setValue(field.field, field.schema?.default_value);
+		}
+	}
+}
+
+function scrollToField(fieldKey: string) {
+	const { field } = extractFieldFromFunction(fieldKey);
+	if (!formFieldEls.value[field]) return;
+	formFieldEls.value[field].$el.scrollIntoView({ behavior: 'smooth' });
+}
+
+function useRawEditor() {
+	const rawActiveFields = ref(new Set<string>());
+
+	return { rawActiveFields, toggleRawField };
+
+	function toggleRawField(field: Field | undefined) {
+		if (!field) return;
+		if (rawActiveFields.value.has(field.field)) {
+			rawActiveFields.value.delete(field.field);
+		} else {
+			rawActiveFields.value.add(field.field);
+		}
+	}
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/app/src/components/v-highlight.vue b/app/src/components/v-highlight.vue
deleted file mode 100644
index dde84cc969..0000000000
--- a/app/src/components/v-highlight.vue
+++ /dev/null
@@ -1,142 +0,0 @@
-<template>
-	<template v-for="({ highlighted, text: textContent }, index) in parts">
-		<mark v-if="highlighted" :key="index" class="highlight">{{ textContent }}</mark>
-		<template v-else>{{ textContent }}</template>
-	</template>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType, computed } from 'vue';
-import { flatten } from 'lodash';
-import { remove as removeDiacritics } from 'diacritics';
-import { toArray } from '@directus/shared/utils';
-
-type HighlightPart = {
-	text: string;
-	highlighted: boolean;
-};
-
-export default defineComponent({
-	name: 'VHighlight',
-	props: {
-		query: {
-			type: [String, Array] as PropType<string | string[]>,
-			default: null,
-		},
-		text: {
-			type: String,
-			default: '',
-		},
-	},
-	setup(props) {
-		const parts = computed<HighlightPart[]>(() => {
-			let searchText = removeDiacritics(props.text.toLowerCase());
-
-			const queries = toArray(props.query);
-
-			if (queries.length === 0) {
-				return [
-					{
-						highlighted: false,
-						text: props.text,
-					},
-				];
-			}
-
-			const matches = flatten(
-				queries
-					.filter((query) => query)
-					.map((query) => {
-						query = removeDiacritics(query.toLowerCase());
-
-						const indices = [];
-
-						let startIndex = 0;
-						let index = searchText.indexOf(query, startIndex);
-
-						while (index > -1) {
-							startIndex = index + query.length;
-							indices.push([index, startIndex]);
-							index = searchText.indexOf(query, index + 1);
-						}
-
-						return indices;
-					})
-			);
-
-			matches.sort((a, b) => {
-				if (a[0] !== b[0]) return a[0] - b[0];
-				return a[1] - b[1];
-			});
-
-			if (matches.length === 0) {
-				return [
-					{
-						highlighted: false,
-						text: props.text,
-					},
-				];
-			}
-
-			const mergedMatches = [];
-
-			let curStart = matches[0][0];
-			let curEnd = matches[0][1];
-
-			matches.shift();
-
-			for (const [start, end] of matches) {
-				if (start >= curEnd) {
-					mergedMatches.push([curStart, curEnd]);
-					curStart = start;
-					curEnd = end;
-				} else if (end > curEnd) {
-					curEnd = end;
-				}
-			}
-
-			mergedMatches.push([curStart, curEnd]);
-
-			let lastEnd = 0;
-
-			const parts: HighlightPart[] = [];
-
-			for (const [start, end] of mergedMatches) {
-				if (lastEnd !== start) {
-					parts.push({
-						highlighted: false,
-						text: props.text.slice(lastEnd, start),
-					});
-				}
-
-				parts.push({
-					highlighted: true,
-					text: props.text.slice(start, end),
-				});
-
-				lastEnd = end;
-			}
-
-			if (lastEnd !== searchText.length) {
-				parts.push({
-					highlighted: false,
-					text: props.text.slice(lastEnd),
-				});
-			}
-
-			return parts;
-		});
-
-		return { parts };
-	},
-});
-</script>
-
-<style scoped>
-mark {
-	margin: -1px -2px;
-	padding: 1px 2px;
-	background-color: var(--primary-25);
-	border-radius: var(--border-radius);
-}
-</style>
diff --git a/app/src/components/v-hover.vue b/app/src/components/v-hover.vue
deleted file mode 100644
index 27a4a05a3a..0000000000
--- a/app/src/components/v-hover.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<template>
-	<component :is="tag" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
-		<slot v-bind="{ hover }" />
-	</component>
-</template>
-
-<script lang="ts">
-import { defineComponent, ref } from 'vue';
-
-export default defineComponent({
-	props: {
-		closeDelay: {
-			type: Number,
-			default: 0,
-		},
-		openDelay: {
-			type: Number,
-			default: 0,
-		},
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-		tag: {
-			type: String,
-			default: 'div',
-		},
-	},
-	setup(props) {
-		const hover = ref<boolean>(false);
-
-		return { hover, onMouseEnter, onMouseLeave };
-
-		function onMouseEnter() {
-			if (props.disabled === true) return;
-
-			setTimeout(() => {
-				hover.value = true;
-			}, props.openDelay);
-		}
-
-		function onMouseLeave() {
-			if (props.disabled === true) return;
-
-			setTimeout(() => {
-				hover.value = false;
-			}, props.closeDelay);
-		}
-	},
-});
-</script>
diff --git a/app/src/components/v-icon/social-icon.vue b/app/src/components/v-icon/social-icon.vue
deleted file mode 100644
index 616e23918d..0000000000
--- a/app/src/components/v-icon/social-icon.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<script lang="ts">
-import { defineComponent, h, PropType } from 'vue';
-import { icon, findIconDefinition, IconName } from '@fortawesome/fontawesome-svg-core';
-
-export default defineComponent({
-	props: {
-		name: {
-			type: String as PropType<IconName>,
-			required: true,
-		},
-	},
-	render() {
-		const socialIcon = icon(findIconDefinition({ prefix: 'fab', iconName: this.name }));
-
-		if (socialIcon && socialIcon.abstract[0] && socialIcon.abstract[0].children && socialIcon.abstract[0].children[0]) {
-			return h(
-				'svg',
-				{
-					...socialIcon.abstract[0].attributes,
-				},
-				h('path', { ...socialIcon.abstract![0].children![0].attributes })
-			);
-		}
-
-		return null;
-	},
-});
-</script>
diff --git a/app/src/components/v-item-group.vue b/app/src/components/v-item-group.vue
deleted file mode 100644
index 99ba549dc0..0000000000
--- a/app/src/components/v-item-group.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<template>
-	<div class="v-item-group">
-		<slot />
-	</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType, toRefs } from 'vue';
-import { useGroupableParent } from '@/composables/use-groupable';
-
-export default defineComponent({
-	props: {
-		mandatory: {
-			type: Boolean,
-			default: false,
-		},
-		max: {
-			type: Number,
-			default: -1,
-		},
-		multiple: {
-			type: Boolean,
-			default: false,
-		},
-		modelValue: {
-			type: Array as PropType<(string | number)[]>,
-			default: undefined,
-		},
-		scope: {
-			type: String,
-			default: 'item-group',
-		},
-	},
-	emits: ['update:modelValue'],
-	setup(props, { emit }) {
-		const { modelValue: selection, multiple, max, mandatory } = toRefs(props);
-		useGroupableParent(
-			{
-				selection: selection,
-				onSelectionChange: (newSelectionValues) => emit('update:modelValue', newSelectionValues),
-			},
-			{
-				multiple: multiple,
-				max: max,
-				mandatory: mandatory,
-			},
-			props.scope
-		);
-		return {};
-	},
-});
-</script>
diff --git a/app/src/components/v-item.vue b/app/src/components/v-item.vue
deleted file mode 100644
index ccb0d2c6dc..0000000000
--- a/app/src/components/v-item.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-	<div class="v-item">
-		<slot v-bind="{ active: isActive, toggle }" />
-	</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, toRefs } from 'vue';
-import { useGroupable } from '@/composables/use-groupable';
-
-export default defineComponent({
-	props: {
-		value: {
-			type: String,
-			default: null,
-		},
-		scope: {
-			type: String,
-			default: 'item-group',
-		},
-		active: {
-			type: Boolean,
-			default: undefined,
-		},
-		watch: {
-			type: Boolean,
-			default: true,
-		},
-	},
-	setup(props) {
-		const { active } = toRefs(props);
-		const { active: isActive, toggle } = useGroupable({
-			value: props.value,
-			group: props.scope,
-			watch: props.watch,
-			active,
-		});
-
-		return { isActive, toggle };
-	},
-});
-</script>
diff --git a/app/src/components/v-list-group.vue b/app/src/components/v-list-group.vue
deleted file mode 100644
index 50a20df1ec..0000000000
--- a/app/src/components/v-list-group.vue
+++ /dev/null
@@ -1,145 +0,0 @@
-<template>
-	<li class="v-list-group">
-		<v-list-item
-			class="activator"
-			:active="active"
-			:to="to"
-			:exact="exact"
-			:query="query"
-			:disabled="disabled"
-			:dense="dense"
-			:clickable="Boolean(clickable || to || !open)"
-			@click="onClick"
-		>
-			<v-list-item-icon
-				v-if="$slots.default && arrowPlacement && arrowPlacement === 'before'"
-				class="activator-icon"
-				:class="{ active: groupActive }"
-			>
-				<v-icon name="chevron_right" :disabled="disabled" @click.stop.prevent="toggle" />
-			</v-list-item-icon>
-
-			<slot name="activator" :active="groupActive" />
-
-			<v-list-item-icon
-				v-if="$slots.default && arrowPlacement && arrowPlacement === 'after'"
-				class="activator-icon"
-				:class="{ active: groupActive }"
-			>
-				<v-icon name="chevron_right" :disabled="disabled" @click.stop.prevent="toggle" />
-			</v-list-item-icon>
-		</v-list-item>
-
-		<ul v-if="groupActive" class="items">
-			<slot />
-		</ul>
-	</li>
-</template>
-
-<script lang="ts">
-import { defineComponent, computed } from 'vue';
-import { useGroupable } from '@/composables/use-groupable';
-
-export default defineComponent({
-	props: {
-		multiple: {
-			type: Boolean,
-			default: true,
-		},
-		to: {
-			type: String,
-			default: '',
-		},
-		active: {
-			type: Boolean,
-			default: undefined,
-		},
-		exact: {
-			type: Boolean,
-			default: false,
-		},
-		query: {
-			type: Boolean,
-			default: false,
-		},
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-		clickable: {
-			type: Boolean,
-			default: false,
-		},
-		scope: {
-			type: String,
-			default: 'v-list',
-		},
-		value: {
-			type: [String, Number],
-			default: undefined,
-		},
-		dense: {
-			type: Boolean,
-			default: false,
-		},
-		open: {
-			type: Boolean,
-			default: false,
-		},
-		arrowPlacement: {
-			type: [String, Boolean],
-			default: 'after',
-			validator: (val: string | boolean) => ['before', 'after', false].includes(val),
-		},
-	},
-	emits: ['click'],
-	setup(props, { emit }) {
-		const { active, toggle } = useGroupable({
-			group: props.scope,
-			value: props.value,
-		});
-
-		const groupActive = computed(() => active.value || props.open);
-
-		return { groupActive, toggle, onClick };
-
-		function onClick(event: MouseEvent) {
-			if (props.to) return null;
-			if (props.clickable) return emit('click', event);
-
-			event.stopPropagation();
-			toggle();
-		}
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.v-list-group {
-	margin-bottom: 4px;
-
-	&:last-child {
-		margin-bottom: 0;
-	}
-
-	.activator-icon {
-		margin-right: 0 !important;
-		color: var(--foreground-subdued);
-		transform: rotate(0deg);
-		transition: transform var(--medium) var(--transition);
-
-		&:hover {
-			color: var(--foreground-normal);
-		}
-
-		&.active {
-			transform: rotate(90deg);
-		}
-	}
-
-	.items {
-		padding-left: 18px;
-		list-style: none;
-	}
-}
-</style>
diff --git a/app/src/components/v-menu.vue b/app/src/components/v-menu.vue
deleted file mode 100644
index b2e5932a8b..0000000000
--- a/app/src/components/v-menu.vue
+++ /dev/null
@@ -1,609 +0,0 @@
-<template>
-	<div class="v-menu" @click="onClick">
-		<div
-			ref="activator"
-			class="v-menu-activator"
-			:class="{ attached }"
-			@pointerenter.stop="onPointerEnter"
-			@pointerleave.stop="onPointerLeave"
-		>
-			<slot
-				name="activator"
-				v-bind="{
-					toggle: toggle,
-					active: isActive,
-					activate: activate,
-					deactivate: deactivate,
-				}"
-			/>
-		</div>
-
-		<teleport to="#menu-outlet">
-			<transition-bounce>
-				<div
-					v-if="isActive"
-					:id="id"
-					:key="id"
-					v-click-outside="{
-						handler: deactivate,
-						middleware: onClickOutsideMiddleware,
-						disabled: isActive === false || closeOnClick === false,
-						events: ['click'],
-					}"
-					class="v-menu-popper"
-					:class="{ active: isActive, attached }"
-					:data-placement="popperPlacement"
-					:style="styles"
-				>
-					<div class="arrow" :class="{ active: showArrow && isActive }" :style="arrowStyles" data-popper-arrow />
-					<div
-						class="v-menu-content"
-						:class="{ 'full-height': fullHeight, seamless }"
-						@click.stop="onContentClick"
-						@pointerenter.stop="onPointerEnter"
-						@pointerleave.stop="onPointerLeave"
-					>
-						<slot
-							v-bind="{
-								toggle: toggle,
-								active: isActive,
-								activate: activate,
-								deactivate: deactivate,
-							}"
-						/>
-					</div>
-				</div>
-			</transition-bounce>
-		</teleport>
-	</div>
-</template>
-
-<script lang="ts">
-import { Instance, Modifier, Placement } from '@popperjs/core';
-import arrow from '@popperjs/core/lib/modifiers/arrow';
-import computeStyles from '@popperjs/core/lib/modifiers/computeStyles';
-import eventListeners from '@popperjs/core/lib/modifiers/eventListeners';
-import flip from '@popperjs/core/lib/modifiers/flip';
-import offset from '@popperjs/core/lib/modifiers/offset';
-import popperOffsets from '@popperjs/core/lib/modifiers/popperOffsets';
-import preventOverflow from '@popperjs/core/lib/modifiers/preventOverflow';
-import { createPopper } from '@popperjs/core/lib/popper-lite';
-import { debounce } from 'lodash';
-import { nanoid } from 'nanoid';
-import { computed, defineComponent, nextTick, onUnmounted, PropType, ref, Ref, watch } from 'vue';
-
-export default defineComponent({
-	props: {
-		placement: {
-			type: String as PropType<Placement>,
-			default: 'bottom',
-		},
-		modelValue: {
-			type: Boolean,
-			default: undefined,
-		},
-		closeOnClick: {
-			type: Boolean,
-			default: true,
-		},
-		closeOnContentClick: {
-			type: Boolean,
-			default: true,
-		},
-		attached: {
-			type: Boolean,
-			default: false,
-		},
-		showArrow: {
-			type: Boolean,
-			default: false,
-		},
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-		trigger: {
-			type: String,
-			default: null,
-			validator: (val: string) => ['hover', 'click', 'keyDown'].includes(val),
-		},
-		delay: {
-			type: Number,
-			default: 0,
-		},
-		offsetY: {
-			type: Number,
-			default: 8,
-		},
-		offsetX: {
-			type: Number,
-			default: 0,
-		},
-		fullHeight: {
-			type: Boolean,
-			default: false,
-		},
-		seamless: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	emits: ['update:modelValue'],
-	setup(props, { emit }) {
-		const activator = ref<HTMLElement | null>(null);
-		const reference = ref<HTMLElement | null>(null);
-
-		const virtualReference = ref({
-			getBoundingClientRect() {
-				return {
-					top: 0,
-					left: 0,
-					bottom: 0,
-					right: 0,
-					width: 0,
-					height: 0,
-				};
-			},
-		});
-
-		const id = computed(() => nanoid());
-		const popper = ref<HTMLElement | null>(null);
-
-		const {
-			start,
-			stop,
-			styles,
-			arrowStyles,
-			placement: popperPlacement,
-		} = usePopper(
-			reference,
-			popper,
-			computed(() => ({
-				placement: props.placement,
-				attached: props.attached,
-				arrow: props.showArrow,
-				offsetY: props.offsetY,
-				offsetX: props.offsetX,
-			}))
-		);
-
-		const { isActive, activate, deactivate, toggle } = useActiveState();
-
-		watch(isActive, (newActive) => {
-			if (newActive === true) {
-				reference.value = (activator.value?.children[0] as HTMLElement) || virtualReference.value;
-
-				nextTick(() => {
-					popper.value = document.getElementById(id.value);
-				});
-			}
-		});
-
-		const { onClick, onPointerEnter, onPointerLeave } = useEvents();
-
-		const hoveringOnPopperContent = ref(false);
-
-		return {
-			id,
-			activator,
-			popper,
-			reference,
-			isActive,
-			toggle,
-			deactivate,
-			onContentClick,
-			onClickOutsideMiddleware,
-			styles,
-			arrowStyles,
-			popperPlacement,
-			activate,
-			onClick,
-			onPointerLeave,
-			onPointerEnter,
-			hoveringOnPopperContent,
-		};
-
-		function useActiveState() {
-			const localIsActive = ref(false);
-
-			const isActive = computed<boolean>({
-				get() {
-					if (props.modelValue !== undefined) {
-						return props.modelValue;
-					}
-
-					return localIsActive.value;
-				},
-				async set(newActive) {
-					localIsActive.value = newActive;
-					emit('update:modelValue', newActive);
-				},
-			});
-
-			watch(
-				popper,
-				async () => {
-					if (popper.value !== null) {
-						await start();
-					} else {
-						stop();
-					}
-				},
-				{ immediate: true }
-			);
-
-			return { isActive, activate, deactivate, toggle };
-
-			function activate(event?: MouseEvent) {
-				if (event) {
-					virtualReference.value = {
-						getBoundingClientRect() {
-							return {
-								top: event.clientY,
-								left: event.clientX,
-								bottom: 0,
-								right: 0,
-								width: 0,
-								height: 0,
-							};
-						},
-					};
-				}
-				isActive.value = true;
-			}
-
-			function deactivate() {
-				isActive.value = false;
-			}
-
-			function toggle() {
-				if (props.disabled === true) return;
-				isActive.value = !isActive.value;
-			}
-		}
-
-		function onClickOutsideMiddleware(e: Event) {
-			return !activator.value?.contains(e.target as Node);
-		}
-
-		function onContentClick(e: Event) {
-			if (props.closeOnContentClick === true && e.target !== e.currentTarget) {
-				deactivate();
-			}
-		}
-
-		function useEvents() {
-			const isHovered = ref(false);
-
-			watch(
-				isHovered,
-				debounce((newHoveredState) => {
-					if (newHoveredState) {
-						if (!isActive.value) activate();
-					} else {
-						deactivate();
-					}
-				}, props.delay)
-			);
-
-			return { onClick, onPointerLeave, onPointerEnter };
-
-			function onClick() {
-				if (props.trigger !== 'click') return;
-
-				toggle();
-			}
-
-			function onPointerEnter() {
-				if (props.trigger !== 'hover') return;
-				isHovered.value = true;
-			}
-
-			function onPointerLeave() {
-				if (props.trigger !== 'hover') return;
-				isHovered.value = false;
-			}
-		}
-
-		function usePopper(
-			reference: Ref<HTMLElement | null>,
-			popper: Ref<HTMLElement | null>,
-			options: Readonly<
-				Ref<Readonly<{ placement: Placement; attached: boolean; arrow: boolean; offsetY: number; offsetX: number }>>
-			>
-		): Record<string, any> {
-			const popperInstance = ref<Instance | null>(null);
-			const styles = ref({});
-			const arrowStyles = ref({});
-
-			// The internal placement can change based on the flip / overflow modifiers
-			const placement = ref(options.value.placement);
-
-			onUnmounted(() => {
-				stop();
-			});
-
-			watch(
-				options,
-				() => {
-					popperInstance.value?.setOptions({
-						placement: options.value.attached ? 'bottom-start' : options.value.placement,
-						modifiers: getModifiers(),
-					});
-				},
-				{ immediate: true }
-			);
-
-			const observer = new MutationObserver(() => {
-				popperInstance.value?.forceUpdate();
-			});
-
-			return { popperInstance, placement, start, stop, styles, arrowStyles };
-
-			function start() {
-				return new Promise((resolve) => {
-					popperInstance.value = createPopper(reference.value!, popper.value!, {
-						placement: options.value.attached ? 'bottom-start' : options.value.placement,
-						modifiers: getModifiers(resolve),
-						strategy: 'fixed',
-					});
-					popperInstance.value.forceUpdate();
-					observer.observe(popper.value!, {
-						attributes: false,
-						childList: true,
-						characterData: true,
-						subtree: true,
-					});
-				});
-			}
-
-			function stop() {
-				popperInstance.value?.destroy();
-				observer.disconnect();
-			}
-
-			function getModifiers(callback: (value?: unknown) => void = () => undefined) {
-				const modifiers: Modifier<string, any>[] = [
-					popperOffsets,
-					{
-						...offset,
-						options: {
-							offset: options.value.attached ? [0, 0] : [options.value.offsetX ?? 0, options.value.offsetY ?? 8],
-						},
-					},
-					{
-						...preventOverflow,
-						options: {
-							padding: 8,
-						},
-					},
-					computeStyles,
-					flip,
-					eventListeners,
-					{
-						name: 'placementUpdater',
-						enabled: true,
-						phase: 'afterWrite',
-						fn({ state }) {
-							placement.value = state.placement;
-						},
-					},
-					{
-						name: 'applyStyles',
-						enabled: true,
-						phase: 'write',
-						fn({ state }) {
-							styles.value = state.styles.popper;
-							arrowStyles.value = state.styles.arrow;
-							callback();
-						},
-					},
-				];
-
-				if (options.value.arrow === true) {
-					modifiers.push({
-						...arrow,
-						options: {
-							padding: 6,
-						},
-					});
-				}
-
-				if (options.value.attached === true) {
-					modifiers.push({
-						name: 'sameWidth',
-						enabled: true,
-						fn: ({ state }) => {
-							state.styles.popper.width = `${state.rects.reference.width}px`;
-						},
-						phase: 'beforeWrite',
-						requires: ['computeStyles'],
-					});
-				}
-
-				return modifiers;
-			}
-		}
-	},
-});
-</script>
-
-<style>
-body {
-	--v-menu-min-width: 100px;
-}
-</style>
-
-<style lang="scss" scoped>
-.v-menu {
-	display: contents;
-}
-
-.v-menu-activator {
-	display: contents;
-}
-
-.v-menu-popper {
-	position: fixed;
-	left: -999px;
-	z-index: 500;
-	min-width: var(--v-menu-min-width);
-	transform: translateY(2px);
-	pointer-events: none;
-
-	&.active {
-		pointer-events: all;
-	}
-}
-
-.arrow,
-.arrow::after {
-	position: absolute;
-	z-index: 1;
-	width: 10px;
-	height: 10px;
-	overflow: hidden;
-	border-radius: 2px;
-	box-shadow: none;
-}
-
-.arrow {
-	&::after {
-		background: var(--card-face-color);
-		transform: rotate(45deg) scale(0);
-		transition: transform var(--fast) var(--transition-out);
-		transition-delay: 0;
-		content: '';
-	}
-
-	&.active::after {
-		transform: rotate(45deg) scale(1);
-		transition: transform var(--medium) var(--transition-in);
-	}
-}
-
-[data-placement^='top'] .arrow {
-	bottom: -6px;
-
-	&::after {
-		bottom: 3px;
-		box-shadow: 2px 2px 4px -2px rgba(var(--card-shadow-color), 0.2);
-	}
-}
-
-[data-placement^='bottom'] .arrow {
-	top: -6px;
-
-	&::after {
-		top: 3px;
-		box-shadow: -2px -2px 4px -2px rgba(var(--card-shadow-color), 0.2);
-	}
-}
-
-[data-placement^='right'] .arrow {
-	left: -6px;
-
-	&::after {
-		left: 2px;
-		box-shadow: -2px 2px 4px -2px rgba(var(--card-shadow-color), 0.2);
-	}
-}
-
-[data-placement^='left'] .arrow {
-	right: -6px;
-
-	&::after {
-		right: 2px;
-		box-shadow: 2px -2px 4px -2px rgba(var(--card-shadow-color), 0.2);
-	}
-}
-
-.v-menu-content {
-	max-height: 30vh;
-	padding: 0 4px;
-	overflow-x: hidden;
-	overflow-y: auto;
-	background-color: var(--card-face-color);
-	border: none;
-	border-radius: var(--border-radius);
-	box-shadow: 0px 0px 6px 0px rgb(var(--card-shadow-color), 0.2), 0px 0px 12px 2px rgb(var(--card-shadow-color), 0.05);
-	transition-timing-function: var(--transition-out);
-	transition-duration: var(--fast);
-	transition-property: opacity, transform;
-	contain: content;
-
-	.v-list {
-		--v-list-background-color: transparent;
-	}
-}
-
-.v-menu-content.full-height {
-	max-height: none;
-}
-
-.v-menu-content.seamless {
-	padding: 0;
-}
-
-[data-placement='top'] > .v-menu-content {
-	transform-origin: bottom center;
-}
-
-[data-placement='top-start'] > .v-menu-content {
-	transform-origin: bottom left;
-}
-
-[data-placement='top-end'] > .v-menu-content {
-	transform-origin: bottom right;
-}
-
-[data-placement='right'] > .v-menu-content {
-	transform-origin: center left;
-}
-
-[data-placement='right-start'] > .v-menu-content {
-	transform-origin: top left;
-}
-
-[data-placement='right-end'] > .v-menu-content {
-	transform-origin: bottom left;
-}
-
-[data-placement='bottom'] > .v-menu-content {
-	transform-origin: top center;
-}
-
-[data-placement='bottom-start'] > .v-menu-content {
-	transform-origin: top left;
-}
-
-[data-placement='bottom-end'] > .v-menu-content {
-	transform-origin: top right;
-}
-
-[data-placement='left'] > .v-menu-content {
-	transform-origin: center right;
-}
-
-[data-placement='left-start'] > .v-menu-content {
-	transform-origin: top right;
-}
-
-[data-placement='left-end'] > .v-menu-content {
-	transform-origin: bottom right;
-}
-
-.attached {
-	&[data-placement^='top'] {
-		> .v-menu-content {
-			transform: translateY(-2px);
-		}
-	}
-
-	&[data-placement^='bottom'] {
-		> .v-menu-content {
-			transform: translateY(2px);
-		}
-	}
-}
-</style>
diff --git a/app/src/components/v-pagination.vue b/app/src/components/v-pagination.vue
deleted file mode 100644
index af1fbc078b..0000000000
--- a/app/src/components/v-pagination.vue
+++ /dev/null
@@ -1,196 +0,0 @@
-<template>
-	<div class="v-pagination">
-		<v-button class="previous" :disabled="disabled || modelValue === 1" secondary icon small @click="toPrev">
-			<v-icon name="chevron_left" />
-		</v-button>
-
-		<v-button
-			v-if="showFirstLast && modelValue > Math.ceil(totalVisible / 2) + 1 && length > totalVisible"
-			class="page"
-			secondary
-			small
-			:disabled="disabled"
-			@click="toPage(1)"
-		>
-			1
-		</v-button>
-
-		<span v-if="showFirstLast && modelValue > Math.ceil(totalVisible / 2) + 1 && length > totalVisible + 1" class="gap">
-			...
-		</span>
-
-		<v-button
-			v-for="page in visiblePages"
-			:key="page"
-			:class="{ active: modelValue === page }"
-			class="page"
-			secondary
-			small
-			:disabled="disabled"
-			@click="toPage(page)"
-		>
-			{{ page }}
-		</v-button>
-
-		<span
-			v-if="showFirstLast && modelValue < length - Math.ceil(totalVisible / 2) && length > totalVisible + 1"
-			class="gap"
-		>
-			...
-		</span>
-
-		<v-button
-			v-if="showFirstLast && modelValue <= length - Math.ceil(totalVisible / 2) && length > totalVisible"
-			:class="{ active: modelValue === length }"
-			class="page"
-			secondary
-			small
-			:disabled="disabled"
-			@click="toPage(length)"
-		>
-			{{ length }}
-		</v-button>
-
-		<v-button class="next" :disabled="disabled || modelValue === length" secondary icon small @click="toNext">
-			<v-icon name="chevron_right" />
-		</v-button>
-	</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, computed } from 'vue';
-import { isEmpty } from '@/utils/is-empty';
-
-export default defineComponent({
-	props: {
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-		length: {
-			type: Number,
-			default: null,
-			required: true,
-			validator: (val: number) => val % 1 === 0,
-		},
-		totalVisible: {
-			type: Number,
-			default: undefined,
-			validator: (val: number) => val >= 0,
-		},
-		modelValue: {
-			type: Number,
-			default: null,
-		},
-		showFirstLast: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	emits: ['update:modelValue'],
-	setup(props, { emit }) {
-		const visiblePages = computed<number[]>(() => {
-			if (props.totalVisible === undefined) return [];
-
-			let startPage: number;
-			let endPage: number;
-
-			if (isEmpty(props.totalVisible) || props.length <= props.totalVisible) {
-				startPage = 1;
-				endPage = props.length;
-			} else {
-				const pagesBeforeCurrentPage = Math.floor(props.totalVisible / 2);
-				const pagesAfterCurrentPage = Math.ceil(props.totalVisible / 2) - 1;
-
-				if (props.modelValue <= pagesBeforeCurrentPage) {
-					startPage = 1;
-					endPage = props.totalVisible;
-				} else if (props.modelValue + pagesAfterCurrentPage >= props.length) {
-					startPage = props.length - props.totalVisible + 1;
-					endPage = props.length;
-				} else {
-					startPage = props.modelValue - pagesBeforeCurrentPage;
-					endPage = props.modelValue + pagesAfterCurrentPage;
-				}
-			}
-
-			return Array.from(Array(endPage + 1 - startPage).keys()).map((i) => startPage + i);
-		});
-
-		return { toPage, toPrev, toNext, visiblePages };
-
-		function toPrev() {
-			toPage(props.modelValue - 1);
-		}
-
-		function toNext() {
-			toPage(props.modelValue + 1);
-		}
-
-		function toPage(page: number) {
-			emit('update:modelValue', page);
-		}
-	},
-});
-</script>
-
-<style scoped>
-:global(body) {
-	--v-pagination-active-color: var(--primary);
-}
-
-.v-pagination {
-	display: flex;
-}
-
-.gap {
-	display: none;
-	margin: 0 4px;
-	color: var(--foreground-subdued);
-	line-height: 2em;
-}
-
-@media (min-width: 600px) {
-	.gap {
-		display: inline;
-	}
-}
-
-.v-button {
-	--v-button-background-color-hover: var(--background-normal);
-	--v-button-background-color: var(--background-subdued);
-	--v-button-color: var(--foreground-normal);
-
-	margin: 0 2px;
-	vertical-align: middle;
-}
-
-.v-button.page:not(.active) {
-	display: none;
-}
-
-@media (min-width: 600px) {
-	.v-button.page:not(.active) {
-		display: inline;
-	}
-}
-
-.v-button :deep(.small) {
-	--v-button-min-width: 32px;
-}
-
-.v-button:first-child {
-	margin-left: 0;
-}
-
-.v-button:last-child {
-	margin-right: 0;
-}
-
-.v-button.active {
-	--v-button-background-color-hover: var(--primary);
-	--v-button-color-hover: var(--foreground-inverted);
-	--v-button-background-color: var(--primary);
-	--v-button-color: var(--foreground-inverted);
-}
-</style>
diff --git a/app/src/components/v-select/v-select.vue b/app/src/components/v-select/v-select.vue
deleted file mode 100644
index 62955e5f00..0000000000
--- a/app/src/components/v-select/v-select.vue
+++ /dev/null
@@ -1,454 +0,0 @@
-<template>
-	<v-menu
-		class="v-select"
-		:disabled="disabled"
-		:attached="inline === false"
-		:show-arrow="inline === true"
-		:close-on-content-click="closeOnContentClick"
-		:placement="placement"
-	>
-		<template #activator="{ toggle, active }">
-			<div v-if="inline" class="inline-display" :class="{ placeholder: !displayValue, label, active }" @click="toggle">
-				<slot name="preview">{{ displayValue || placeholder }}</slot>
-				<v-icon name="expand_more" :class="{ active }" />
-			</div>
-			<slot v-else name="preview">
-				<v-input
-					:full-width="fullWidth"
-					readonly
-					:model-value="displayValue"
-					clickable
-					:placeholder="placeholder"
-					:disabled="disabled"
-					:active="active"
-					@click="toggle"
-				>
-					<template v-if="$slots.prepend" #prepend><slot name="prepend" /></template>
-					<template #append>
-						<v-icon name="expand_more" :class="{ active }" />
-						<slot name="append" />
-					</template>
-				</v-input>
-			</slot>
-		</template>
-
-		<v-list class="list" :mandatory="mandatory" @toggle="$emit('group-toggle', $event)">
-			<template v-if="showDeselect">
-				<v-list-item clickable :disabled="modelValue === null" @click="$emit('update:modelValue', null)">
-					<v-list-item-icon v-if="multiple === true">
-						<v-icon name="close" />
-					</v-list-item-icon>
-					<v-list-item-content>
-						{{ multiple ? t('deselect_all') : t('deselect') }}
-					</v-list-item-content>
-					<v-list-item-icon v-if="multiple === false">
-						<v-icon name="close" />
-					</v-list-item-icon>
-				</v-list-item>
-				<v-divider />
-			</template>
-
-			<v-list-item v-if="internalItemsCount > 20 || search">
-				<v-list-item-content>
-					<v-input v-model="search" autofocus small :placeholder="t('search')" @click.stop.prevent>
-						<template #append>
-							<v-icon small name="search" />
-						</template>
-					</v-input>
-				</v-list-item-content>
-			</v-list-item>
-
-			<template v-for="(item, index) in internalItems" :key="index">
-				<select-list-item-group
-					v-if="item.children"
-					:item="item"
-					:model-value="modelValue"
-					:multiple="multiple"
-					:allow-other="allowOther"
-					:group-selectable="groupSelectable"
-					@update:model-value="$emit('update:modelValue', $event)"
-				/>
-				<select-list-item
-					v-else
-					:model-value="modelValue"
-					:item="item"
-					:multiple="multiple"
-					:allow-other="allowOther"
-					@update:model-value="$emit('update:modelValue', $event)"
-				/>
-			</template>
-
-			<v-list-item v-if="allowOther && multiple === false" :active="usesOtherValue" @click.stop>
-				<v-list-item-content>
-					<input
-						v-model="otherValue"
-						class="other-input"
-						:placeholder="t('other')"
-						@focus="otherValue ? $emit('update:modelValue', otherValue) : null"
-					/>
-				</v-list-item-content>
-			</v-list-item>
-
-			<template v-if="allowOther && multiple === true">
-				<v-list-item
-					v-for="otherVal in otherValues"
-					:key="otherVal.key"
-					:active="(modelValue || []).includes(otherVal.value)"
-					@click.stop
-				>
-					<v-list-item-icon>
-						<v-checkbox
-							:model-value="modelValue || []"
-							:value="otherVal.value"
-							@update:model-value="$emit('update:modelValue', $event.length > 0 ? $event : null)"
-						/>
-					</v-list-item-icon>
-					<v-list-item-content>
-						<input
-							v-focus
-							class="other-input"
-							:value="otherVal.value"
-							:placeholder="t('other')"
-							@input="setOtherValue(otherVal.key, $event.target.value)"
-							@blur="otherVal.value.length === 0 && setOtherValue(otherVal.key, null)"
-						/>
-					</v-list-item-content>
-					<v-list-item-icon>
-						<v-icon name="close" clickable @click="setOtherValue(otherVal.key, null)" />
-					</v-list-item-icon>
-				</v-list-item>
-
-				<v-list-item @click.stop="addOtherValue()">
-					<v-list-item-icon><v-icon name="add" /></v-list-item-icon>
-					<v-list-item-content>{{ t('other') }}</v-list-item-content>
-				</v-list-item>
-			</template>
-		</v-list>
-	</v-menu>
-</template>
-
-<script lang="ts">
-import { useCustomSelection, useCustomSelectionMultiple } from '@/composables/use-custom-selection';
-import { Placement } from '@popperjs/core';
-import { debounce, get } from 'lodash';
-import { computed, defineComponent, PropType, Ref, ref, toRefs, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-import SelectListItemGroup from './select-list-item-group.vue';
-import SelectListItem from './select-list-item.vue';
-import { Option } from './types';
-
-type ItemsRaw = (string | any)[];
-type InputValue = string[] | string;
-
-export default defineComponent({
-	components: { SelectListItemGroup, SelectListItem },
-	props: {
-		items: {
-			type: Array as PropType<ItemsRaw>,
-			required: true,
-		},
-		itemText: {
-			type: String,
-			default: 'text',
-		},
-		itemValue: {
-			type: String,
-			default: 'value',
-		},
-		itemIcon: {
-			type: String,
-			default: null,
-		},
-		itemDisabled: {
-			type: String,
-			default: 'disabled',
-		},
-		itemSelectable: {
-			type: String,
-			default: 'selectable',
-		},
-		itemChildren: {
-			type: String,
-			default: 'children',
-		},
-		modelValue: {
-			type: [Array, String, Number, Boolean] as PropType<InputValue>,
-			default: null,
-		},
-		multiple: {
-			type: Boolean,
-			default: false,
-		},
-		groupSelectable: {
-			type: Boolean,
-			default: false,
-		},
-		mandatory: {
-			type: Boolean,
-			default: true,
-		},
-		placeholder: {
-			type: String,
-			default: null,
-		},
-		fullWidth: {
-			type: Boolean,
-			default: true,
-		},
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-		showDeselect: {
-			type: Boolean,
-			default: false,
-		},
-		allowOther: {
-			type: Boolean,
-			default: false,
-		},
-		closeOnContentClick: {
-			type: Boolean,
-			default: true,
-		},
-		inline: {
-			type: Boolean,
-			default: false,
-		},
-		label: {
-			type: Boolean,
-			default: false,
-		},
-		multiplePreviewThreshold: {
-			type: Number,
-			default: 3,
-		},
-		placement: {
-			type: String as PropType<Placement>,
-			default: 'bottom',
-		},
-	},
-	emits: ['update:modelValue', 'group-toggle'],
-	setup(props, { emit }) {
-		const { t } = useI18n();
-
-		const { internalItems, internalItemsCount, internalSearch } = useItems();
-		const { displayValue } = useDisplayValue();
-		const { modelValue } = toRefs(props);
-		const { otherValue, usesOtherValue } = useCustomSelection(modelValue as Ref<string>, internalItems, (value) =>
-			emit('update:modelValue', value)
-		);
-		const { otherValues, addOtherValue, setOtherValue } = useCustomSelectionMultiple(
-			modelValue as Ref<string[]>,
-			internalItems,
-			(value) => emit('update:modelValue', value)
-		);
-
-		const search = ref<string | null>(null);
-		watch(
-			search,
-			debounce((val: string | null) => {
-				internalSearch.value = val;
-			}, 250)
-		);
-
-		return {
-			t,
-			internalItems,
-			internalItemsCount,
-			displayValue,
-			otherValue,
-			usesOtherValue,
-			otherValues,
-			addOtherValue,
-			setOtherValue,
-			search,
-		};
-
-		function useItems() {
-			const internalSearch = ref<string | null>(null);
-
-			const internalItems = computed(() => {
-				const parseItem = (item: Record<string, any>): Option => {
-					if (typeof item === 'string') {
-						return {
-							text: item,
-							value: item,
-						};
-					}
-
-					if (item.divider === true) return { value: null, divider: true };
-
-					const children = get(item, props.itemChildren) ? get(item, props.itemChildren).map(parseItem) : null;
-
-					return {
-						text: get(item, props.itemText),
-						value: get(item, props.itemValue),
-						icon: get(item, props.itemIcon),
-						disabled: get(item, props.itemDisabled),
-						selectable: get(item, props.itemSelectable),
-						children: children ? children.filter(filterItem) : children,
-					};
-				};
-
-				const filterItem = (item: Record<string, any>): boolean => {
-					if (!internalSearch.value) return true;
-
-					const searchValue = internalSearch.value.toLowerCase();
-
-					return item?.children
-						? isMatchingCurrentItem(item, searchValue) ||
-								item.children.some((item: Record<string, any>) => filterItem(item))
-						: isMatchingCurrentItem(item, searchValue);
-
-					function isMatchingCurrentItem(item: Record<string, any>, searchValue: string): boolean {
-						const text = get(item, props.itemText);
-						const value = get(item, props.itemValue);
-						return (
-							(text ? String(text).toLowerCase().includes(searchValue) : false) ||
-							(value ? String(value).toLowerCase().includes(searchValue) : false)
-						);
-					}
-				};
-
-				const items = internalSearch.value ? props.items.filter(filterItem).map(parseItem) : props.items.map(parseItem);
-
-				return items;
-			});
-
-			const internalItemsCount = computed<number>(() => {
-				const countItems = (items: Option[]): number => {
-					const count = items.reduce((acc, item): number => {
-						if (item?.children) {
-							acc += countItems(item.children);
-						}
-						return acc + 1;
-					}, 0);
-
-					return count;
-				};
-
-				return countItems(props.items);
-			});
-
-			return { internalItems, internalItemsCount, internalSearch };
-		}
-
-		function useDisplayValue() {
-			const displayValue = computed(() => {
-				if (Array.isArray(props.modelValue)) {
-					if (props.modelValue.length < props.multiplePreviewThreshold) {
-						return props.modelValue
-							.map((value) => {
-								return getTextForValue(value) || value;
-							})
-							.join(', ');
-					} else {
-						const itemCount = internalItems.value.length + otherValues.value.length;
-						const selectionCount = props.modelValue.length;
-
-						if (itemCount === selectionCount) {
-							return t('all_items');
-						} else {
-							return t('item_count', selectionCount);
-						}
-					}
-				}
-
-				return getTextForValue(props.modelValue) || props.modelValue;
-			});
-
-			return { displayValue };
-
-			function getTextForValue(value: string | number) {
-				return findValue(internalItems.value);
-
-				function findValue(choices: Option[]): string | undefined {
-					let textValue: string | undefined = choices.find((item) => item.value === value)?.['text'];
-
-					for (const choice of choices) {
-						if (!textValue) {
-							if (choice.children) {
-								textValue = findValue(choice.children);
-							}
-						}
-					}
-
-					return textValue;
-				}
-			}
-		}
-	},
-});
-</script>
-
-<style scoped lang="scss">
-:global(body) {
-	--v-select-font-family: var(--family-sans-serif);
-	--v-select-placeholder-color: var(--foreground-subdued);
-}
-
-.list {
-	--v-list-min-width: 0;
-}
-
-.item-text {
-	font-family: var(--v-select-font-family);
-}
-
-.v-input {
-	--v-input-font-family: var(--v-select-font-family);
-
-	cursor: pointer;
-}
-
-.v-input .v-icon {
-	transition: transform var(--medium) var(--transition-out);
-}
-
-.v-input .v-icon.active {
-	transform: scaleY(-1);
-	transition-timing-function: var(--transition-in);
-}
-
-.v-input :deep(input) {
-	cursor: pointer;
-}
-
-.other-input {
-	margin: 0;
-	padding: 0;
-	line-height: 1.2;
-	background-color: transparent;
-	border: none;
-	border-radius: 0;
-}
-
-.inline-display {
-	width: max-content;
-	padding-right: 18px;
-	cursor: pointer;
-}
-
-.inline-display.label {
-	padding: 4px 8px;
-	padding-right: 26px;
-	color: var(--foreground-subdued);
-	background-color: var(--background-subdued);
-	border-radius: var(--border-radius);
-	transition: color var(--fast) var(--transition);
-
-	&:hover,
-	&.active {
-		color: var(--foreground);
-	}
-}
-
-.inline-display .v-icon {
-	position: absolute;
-}
-
-.inline-display.placeholder {
-	color: var(--v-select-placeholder-color);
-}
-</style>
diff --git a/app/src/components/v-switch.vue b/app/src/components/v-switch.vue
deleted file mode 100644
index 0956d534c6..0000000000
--- a/app/src/components/v-switch.vue
+++ /dev/null
@@ -1,155 +0,0 @@
-<template>
-	<button
-		class="v-switch"
-		type="button"
-		role="switch"
-		:aria-pressed="isChecked ? 'true' : 'false'"
-		:disabled="disabled"
-		@click="toggleInput"
-	>
-		<span class="switch" />
-		<span class="label type-label">
-			<slot name="label">{{ label }}</slot>
-		</span>
-	</button>
-</template>
-
-<script lang="ts">
-import { defineComponent, computed } from 'vue';
-
-export default defineComponent({
-	props: {
-		value: {
-			type: String,
-			default: null,
-		},
-		modelValue: {
-			type: [Boolean, Array],
-			default: false,
-		},
-		label: {
-			type: String,
-			default: null,
-		},
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	emits: ['update:modelValue'],
-	setup(props, { emit }) {
-		const isChecked = computed<boolean>(() => {
-			if (props.modelValue instanceof Array) {
-				return props.modelValue.includes(props.value);
-			}
-
-			return props.modelValue === true;
-		});
-
-		return { isChecked, toggleInput };
-
-		function toggleInput(): void {
-			if (props.modelValue instanceof Array) {
-				const newValue = [...props.modelValue];
-
-				if (isChecked.value === false) {
-					newValue.push(props.value);
-				} else {
-					newValue.splice(newValue.indexOf(props.value), 1);
-				}
-
-				emit('update:modelValue', newValue);
-			} else {
-				emit('update:modelValue', !isChecked.value);
-			}
-		}
-	},
-});
-</script>
-
-<style>
-body {
-	--v-switch-color: var(--foreground-normal);
-}
-</style>
-
-<style lang="scss" scoped>
-.v-switch {
-	display: flex;
-	align-items: center;
-	font-size: 0;
-	background-color: transparent;
-	border: none;
-	border-radius: 0;
-	appearance: none;
-
-	.switch {
-		position: relative;
-		display: inline-block;
-		width: 44px;
-		height: 24px;
-		vertical-align: middle;
-		border: var(--border-width) solid var(--border-normal);
-		border-radius: 12px;
-		transition: var(--fast) var(--transition);
-		transition-property: background-color border;
-
-		&:focus {
-			outline: 0;
-		}
-
-		&::after {
-			position: absolute;
-			top: 2px;
-			left: 2px;
-			display: block;
-			width: 16px;
-			height: 16px;
-			background-color: var(--border-normal);
-			border-radius: 8px;
-			transition: transform var(--fast) var(--transition);
-			content: '';
-		}
-
-		&:hover {
-			border-color: var(--border-normal);
-		}
-	}
-
-	&[aria-pressed='true'] .switch {
-		background-color: var(--v-switch-color);
-		border-color: var(--v-switch-color);
-
-		&::after {
-			background-color: var(--background-page);
-			transform: translateX(20px);
-		}
-	}
-
-	.label:not(:empty) {
-		margin-left: 8px;
-		vertical-align: middle;
-	}
-
-	&:disabled {
-		cursor: not-allowed;
-
-		.switch {
-			background-color: var(--background-normal-alt);
-			border-color: var(--border-normal);
-
-			&::after {
-				background-color: var(--border-normal);
-			}
-
-			&:hover {
-				border-color: var(--border-normal);
-			}
-		}
-
-		.label {
-			color: var(--foreground-subdued);
-		}
-	}
-}
-</style>
diff --git a/app/src/components/v-tab-item.vue b/app/src/components/v-tab-item.vue
deleted file mode 100644
index 00e3f8cf56..0000000000
--- a/app/src/components/v-tab-item.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-	<div v-if="active" class="v-tab-item">
-		<slot v-bind="{ active, toggle }" />
-	</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { useGroupable } from '@/composables/use-groupable';
-
-export default defineComponent({
-	props: {
-		value: {
-			type: String,
-			default: null,
-		},
-	},
-	setup(props) {
-		const { active, toggle } = useGroupable({ value: props.value, group: 'v-tabs-items' });
-		return { active, toggle };
-	},
-});
-</script>
diff --git a/app/src/components/v-table/table-header.vue b/app/src/components/v-table/table-header.vue
index 98da0077a7..1de5079c12 100644
--- a/app/src/components/v-table/table-header.vue
+++ b/app/src/components/v-table/table-header.vue
@@ -111,11 +111,11 @@ import { useSync } from '@directus/shared/composables';
 interface Props {
 	headers: Header[];
 	sort: Sort;
+	reordering: boolean;
+	allowHeaderReorder: boolean;
 	showSelect?: ShowSelect;
 	showResize?: boolean;
 	showManualSort?: boolean;
-	allowHeaderReorder: boolean;
-	reordering: boolean;
 	someItemsSelected?: boolean;
 	allItemsSelected?: boolean;
 	fixed?: boolean;
diff --git a/app/src/components/v-tabs-items.vue b/app/src/components/v-tabs-items.vue
deleted file mode 100644
index fcfc2a2ff4..0000000000
--- a/app/src/components/v-tabs-items.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-	<v-item-group class="v-tabs-items" :model-value="modelValue" scope="v-tabs-items" @update:model-value="update">
-		<slot />
-	</v-item-group>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
-
-export default defineComponent({
-	props: {
-		modelValue: {
-			type: Array as PropType<(string | number)[]>,
-			default: undefined,
-		},
-	},
-	emits: ['update:modelValue'],
-	setup(props, { emit }) {
-		function update(newSelection: readonly (string | number)[]) {
-			emit('update:modelValue', newSelection);
-		}
-
-		return { update };
-	},
-});
-</script>
diff --git a/app/src/components/v-tabs.vue b/app/src/components/v-tabs.vue
deleted file mode 100644
index ef0e251ba3..0000000000
--- a/app/src/components/v-tabs.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<template>
-	<v-list v-if="vertical" class="v-tabs vertical alt-colors" nav>
-		<slot />
-	</v-list>
-	<div v-else class="v-tabs horizontal">
-		<slot />
-	</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType, toRefs, provide, ref } from 'vue';
-import { useGroupableParent } from '@/composables/use-groupable';
-
-export default defineComponent({
-	props: {
-		vertical: {
-			type: Boolean,
-			default: false,
-		},
-		modelValue: {
-			type: Array as PropType<(string | number)[]>,
-			default: undefined,
-		},
-	},
-	emits: ['update:modelValue'],
-	setup(props, { emit }) {
-		const { modelValue: selection, vertical } = toRefs(props);
-
-		provide('v-tabs-vertical', vertical);
-
-		const { items } = useGroupableParent(
-			{
-				selection: selection,
-				onSelectionChange: update,
-			},
-			{
-				multiple: ref(false),
-				mandatory: ref(true),
-			},
-			'v-tabs'
-		);
-
-		function update(newSelection: readonly (string | number)[]) {
-			emit('update:modelValue', newSelection);
-		}
-
-		return { update, items };
-	},
-});
-</script>
-
-<style scoped>
-:global(body) {
-	--v-tabs-underline-color: var(--foreground-normal);
-}
-
-.v-tabs.horizontal {
-	position: relative;
-	display: inline-flex;
-}
-
-.v-tabs.horizontal :slotted(.v-tab) {
-	display: flex;
-	flex-basis: 0px;
-	flex-grow: 1;
-	flex-shrink: 0;
-	align-items: center;
-	justify-content: center;
-	height: 38px;
-	padding: 8px 20px;
-	cursor: pointer;
-}
-</style>
diff --git a/app/src/components/v-template-input.vue b/app/src/components/v-template-input.vue
deleted file mode 100644
index e8e1c0ab49..0000000000
--- a/app/src/components/v-template-input.vue
+++ /dev/null
@@ -1,361 +0,0 @@
-<template>
-	<div
-		ref="input"
-		class="v-template-input"
-		:class="{ multiline }"
-		contenteditable="true"
-		tabindex="1"
-		:placeholder="placeholder"
-		@input="processText"
-	/>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType, ref, watch, onMounted, onUnmounted } from 'vue';
-import { position } from 'caret-pos';
-
-export default defineComponent({
-	props: {
-		modelValue: {
-			type: String,
-			default: null,
-		},
-		captureGroup: {
-			type: String,
-			required: true,
-		},
-		multiline: {
-			type: Boolean,
-			default: false,
-		},
-		triggerCharacter: {
-			type: String,
-			required: true,
-		},
-		items: {
-			type: Object as PropType<Record<string, string>>,
-			required: true,
-		},
-		placeholder: {
-			type: String,
-			default: null,
-		},
-	},
-	emits: ['update:modelValue', 'trigger', 'deactivate', 'up', 'down', 'enter'],
-	setup(props, { emit }) {
-		const input = ref<HTMLDivElement>();
-
-		let hasTriggered = false;
-		let matchedPositions: number[] = [];
-		let previousInnerTextLength = 0;
-		let previousCaretPos = 0;
-
-		watch(
-			() => props.modelValue,
-			(newText) => {
-				if (!input.value) return;
-
-				if (newText !== input.value.innerText) {
-					parseHTML(newText, true);
-				}
-			}
-		);
-
-		onMounted(() => {
-			if (props.modelValue && props.modelValue !== input.value!.innerText) {
-				parseHTML(props.modelValue);
-			}
-
-			if (input.value) {
-				input.value.addEventListener('click', checkClick);
-				input.value.addEventListener('keydown', checkKeyDown);
-				input.value.addEventListener('keyup', checkKeyUp);
-			}
-		});
-
-		onUnmounted(() => {
-			if (input.value) {
-				input.value.removeEventListener('click', checkClick);
-				input.value.removeEventListener('keydown', checkKeyDown);
-				input.value.removeEventListener('keyup', checkKeyUp);
-			}
-		});
-
-		return { processText, input };
-
-		function checkKeyDown(event: any) {
-			const caretPos = window.getSelection()?.rangeCount ? position(input.value as Element).pos : 0;
-
-			if (event.code === 'Enter') {
-				event.preventDefault();
-
-				if (hasTriggered) {
-					emit('enter');
-				} else {
-					parseHTML(
-						input.value!.innerText.substring(0, caretPos) +
-							(caretPos === input.value!.innerText.length && input.value!.innerText.charAt(caretPos - 1) !== '\n'
-								? '\n\n'
-								: '\n') +
-							input.value!.innerText.substring(caretPos),
-						true
-					);
-					position(input.value!, caretPos + 1);
-				}
-			} else if (event.code === 'ArrowUp' && !event.shiftKey) {
-				if (hasTriggered) {
-					event.preventDefault();
-
-					emit('up');
-				}
-			} else if (event.code === 'ArrowDown' && !event.shiftKey) {
-				if (hasTriggered) {
-					event.preventDefault();
-
-					emit('down');
-				}
-			} else if (event.code === 'ArrowLeft' && !event.shiftKey) {
-				const checkCaretPos = matchedPositions.indexOf(caretPos - 1);
-				if (checkCaretPos !== -1 && checkCaretPos % 2 === 1) {
-					event.preventDefault();
-
-					position(input.value!, matchedPositions[checkCaretPos - 1] - 1);
-				}
-			} else if (event.code === 'ArrowRight' && !event.shiftKey) {
-				const checkCaretPos = matchedPositions.indexOf(caretPos + 1);
-				if (checkCaretPos !== -1 && checkCaretPos % 2 === 0) {
-					event.preventDefault();
-
-					position(input.value!, matchedPositions[checkCaretPos + 1] + 1);
-				}
-			} else if (event.code === 'Backspace') {
-				const checkCaretPos = matchedPositions.indexOf(caretPos - 1);
-				if (checkCaretPos !== -1 && checkCaretPos % 2 === 1) {
-					event.preventDefault();
-
-					const newCaretPos = matchedPositions[checkCaretPos - 1];
-					parseHTML(
-						(input.value!.innerText.substring(0, newCaretPos) + input.value!.innerText.substring(caretPos)).replaceAll(
-							String.fromCharCode(160),
-							' '
-						),
-						true
-					);
-					position(input.value!, newCaretPos);
-					emit('update:modelValue', input.value!.innerText);
-				}
-			} else if (event.code === 'Delete') {
-				const checkCaretPos = matchedPositions.indexOf(caretPos + 1);
-				if (checkCaretPos !== -1 && checkCaretPos % 2 === 0) {
-					event.preventDefault();
-
-					parseHTML(
-						(
-							input.value!.innerText.substring(0, caretPos) +
-							input.value!.innerText.substring(matchedPositions[checkCaretPos + 1])
-						).replaceAll(String.fromCharCode(160), ' '),
-						true
-					);
-					position(input.value!, caretPos);
-					emit('update:modelValue', input.value!.innerText);
-				}
-			}
-		}
-
-		function checkKeyUp(event: any) {
-			const caretPos = window.getSelection()?.rangeCount ? position(input.value as Element).pos : 0;
-
-			if ((event.code === 'ArrowUp' || event.code === 'ArrowDown') && !event.shiftKey) {
-				const checkCaretPos = matchedPositions.indexOf(caretPos);
-				if (checkCaretPos !== -1 && checkCaretPos % 2 === 1) {
-					position(input.value!, matchedPositions[checkCaretPos] + 1);
-				} else if (checkCaretPos !== -1 && checkCaretPos % 2 === 0) {
-					position(input.value!, matchedPositions[checkCaretPos] - 1);
-				}
-			}
-		}
-
-		function checkClick(event: any) {
-			const caretPos = window.getSelection()?.rangeCount ? position(input.value as Element).pos : 0;
-
-			const checkCaretPos = matchedPositions.indexOf(caretPos);
-			if (checkCaretPos !== -1) {
-				if (checkCaretPos % 2 === 0) {
-					position(input.value!, caretPos - 1);
-				} else {
-					position(input.value!, caretPos + 1);
-				}
-				event.preventDefault();
-			}
-		}
-
-		function processText(event: KeyboardEvent) {
-			const input = event.target as HTMLDivElement;
-
-			const caretPos = window.getSelection()?.rangeCount ? position(input).pos : 0;
-
-			const text = input.innerText ?? '';
-
-			let endPos = text.indexOf(' ', caretPos);
-			if (endPos === -1) endPos = text.indexOf('\n', caretPos);
-			if (endPos === -1) endPos = text.length;
-			const result = /\S+$/.exec(text.slice(0, endPos));
-			let word = result ? result[0] : null;
-			if (word) word = word.replace(/[\s'";:,./?\\-]$/, '');
-
-			if (word?.startsWith(props.triggerCharacter)) {
-				emit('trigger', { searchQuery: word.substring(props.triggerCharacter.length), caretPosition: caretPos });
-				hasTriggered = true;
-			} else {
-				if (hasTriggered) {
-					emit('deactivate');
-					hasTriggered = false;
-				}
-			}
-
-			parseHTML();
-
-			emit('update:modelValue', input.innerText);
-		}
-
-		function parseHTML(innerText?: string, isDirectInput = false) {
-			if (!input.value) return;
-
-			if (input.value.innerText === '\n') {
-				input.value.innerText = '';
-			}
-
-			if (innerText !== undefined) {
-				input.value.innerText = innerText;
-				hasTriggered = false;
-			}
-
-			let newHTML = input.value.innerText;
-
-			const caretPos = isDirectInput
-				? previousCaretPos
-				: window.getSelection()?.rangeCount
-				? position(input.value).pos
-				: 0;
-
-			let lastMatchIndex = 0;
-			const matches = newHTML.match(new RegExp(`${props.captureGroup}(?!</mark>)`, 'gi'));
-			matchedPositions = [];
-
-			if (matches) {
-				for (const match of matches ?? []) {
-					let replaceSpaceBefore = '';
-					let replaceSpaceAfter = '';
-					let addSpaceBefore = '';
-					let addSpaceAfter = '';
-
-					let htmlMatchIndex = newHTML.indexOf(match, lastMatchIndex);
-					const charCodeBefore = newHTML.charCodeAt(htmlMatchIndex - 1);
-					const charCodeAfter = newHTML.charCodeAt(htmlMatchIndex + match.length);
-
-					if (charCodeBefore === 32) {
-						replaceSpaceBefore = ' ';
-						addSpaceBefore = '&nbsp;';
-					} else if (charCodeBefore !== 160) {
-						addSpaceBefore = '&nbsp;';
-					}
-
-					if (charCodeAfter === 32) {
-						replaceSpaceAfter = ' ';
-						addSpaceAfter = '&nbsp;';
-					} else if (charCodeAfter !== 160) {
-						addSpaceAfter = '&nbsp;';
-					}
-
-					let searchString = replaceSpaceBefore + match + replaceSpaceAfter;
-					let replacementString = `${addSpaceBefore}<mark class="preview" data-preview="${
-						props.items[match.substring(props.triggerCharacter.length)]
-					}" contenteditable="false">${match}</mark>${addSpaceAfter}`;
-
-					newHTML = newHTML.replace(new RegExp(`(${searchString})(?!</mark>)`), replacementString);
-					lastMatchIndex = htmlMatchIndex + replacementString.length - searchString.length;
-				}
-			}
-
-			if (input.value.innerHTML !== newHTML.replaceAll(String.fromCharCode(160), '&nbsp;')) {
-				input.value.innerHTML = newHTML;
-
-				const delta = input.value.innerText.length - previousInnerTextLength;
-				const newPosition = caretPos + delta;
-
-				if (newPosition > input.value.innerText.length || newPosition < 0) {
-					position(input.value, input.value.innerText.length);
-				} else {
-					position(input.value, newPosition);
-				}
-			}
-
-			lastMatchIndex = 0;
-			for (const match of matches ?? []) {
-				let matchIndex = input.value.innerText.indexOf(match, lastMatchIndex);
-				matchedPositions.push(matchIndex, matchIndex + match.length);
-				lastMatchIndex = matchIndex + match.length;
-			}
-
-			previousInnerTextLength = input.value.innerText.length;
-			previousCaretPos = caretPos;
-		}
-	},
-});
-</script>
-
-<style scoped lang="scss">
-.v-template-input {
-	position: relative;
-	height: var(--input-height);
-	padding: var(--input-padding);
-	padding-bottom: 32px;
-	overflow: hidden;
-	color: var(--foreground-normal);
-	font-family: var(--family-sans-serif);
-	white-space: nowrap;
-	background-color: var(--background-page);
-	border: var(--border-width) solid var(--border-normal);
-	border-radius: var(--border-radius);
-	transition: border-color var(--fast) var(--transition);
-
-	&:empty::before {
-		pointer-events: none;
-		content: attr(placeholder);
-		color: var(--foreground-subdued);
-	}
-
-	&.multiline {
-		height: var(--input-height-tall);
-		overflow-y: auto;
-		white-space: pre-wrap;
-	}
-
-	&:hover {
-		border-color: var(--border-normal-alt);
-	}
-
-	&:focus-within {
-		border-color: var(--primary);
-	}
-
-	:deep(.preview) {
-		display: inline-block;
-		margin: 0px;
-		padding: 2px 4px;
-		color: var(--primary);
-		font-size: 0;
-		line-height: 1;
-		vertical-align: -2px;
-		background: var(--primary-alt);
-		border-radius: var(--border-radius);
-		user-select: text;
-
-		&::before {
-			display: block;
-			font-size: 1rem;
-			content: attr(data-preview);
-		}
-	}
-}
-</style>
diff --git a/app/src/components/v-text-overflow.vue b/app/src/components/v-text-overflow.vue
deleted file mode 100644
index 9ef01499b2..0000000000
--- a/app/src/components/v-text-overflow.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-	<div ref="el" v-tooltip:[placement]="hasEllipsis && text" class="v-text-overflow">
-		<v-highlight v-if="highlight" :query="highlight" :text="text" />
-		<template v-else>{{ text }}</template>
-	</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, ref, watch } from 'vue';
-import { useElementSize } from '@/composables/use-element-size';
-
-export default defineComponent({
-	props: {
-		text: {
-			type: [String, Number, Array, Object, Boolean],
-			required: true,
-		},
-		highlight: {
-			type: String,
-			default: null,
-		},
-		placement: {
-			type: String,
-			default: 'top',
-			validator: (val: string) => ['top', 'bottom', 'left', 'right', 'start', 'end'].includes(val),
-		},
-	},
-	setup() {
-		const el = ref<HTMLElement>();
-		const hasEllipsis = ref(false);
-
-		const { width } = useElementSize(el);
-
-		watch(
-			width,
-			() => {
-				if (!el.value) return;
-				hasEllipsis.value = el.value.offsetWidth < el.value.scrollWidth;
-			},
-			{ immediate: true }
-		);
-
-		return { el, hasEllipsis };
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.v-text-overflow {
-	overflow: hidden;
-	line-height: normal;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-}
-</style>
diff --git a/app/src/components/v-upload.vue b/app/src/components/v-upload.vue
index de738201f3..fe35b64d88 100644
--- a/app/src/components/v-upload.vue
+++ b/app/src/components/v-upload.vue
@@ -84,9 +84,9 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { useI18n } from 'vue-i18n';
-import { defineComponent, ref, computed } from 'vue';
+import { ref, computed } from 'vue';
 import { uploadFiles } from '@/utils/upload-files';
 import { uploadFile } from '@/utils/upload-file';
 import DrawerCollection from '@/views/private/components/drawer-collection.vue';
@@ -95,237 +95,203 @@ import emitter, { Events } from '@/events';
 import { unexpectedError } from '@/utils/unexpected-error';
 import { Filter } from '@directus/shared/types';
 
-export default defineComponent({
-	components: { DrawerCollection },
-	props: {
-		multiple: {
-			type: Boolean,
-			default: false,
-		},
-		preset: {
-			type: Object,
-			default: () => ({}),
-		},
-		fileId: {
-			type: String,
-			default: null,
-		},
-		fromUrl: {
-			type: Boolean,
-			default: false,
-		},
-		fromLibrary: {
-			type: Boolean,
-			default: false,
-		},
-		folder: {
-			type: String,
-			default: undefined,
-		},
-	},
-	emits: ['input'],
-	setup(props, { emit }) {
-		const { t } = useI18n();
+interface Props {
+	multiple?: boolean;
+	preset?: Record<string, any>;
+	fileId?: string;
+	fromUrl?: boolean;
+	fromLibrary?: boolean;
+	folder?: string;
+}
 
-		const { uploading, progress, upload, onBrowseSelect, done, numberOfFiles } = useUpload();
-		const { onDragEnter, onDragLeave, onDrop, dragging } = useDragging();
-		const { url, isValidURL, loading: urlLoading, importFromURL } = useURLImport();
-		const { setSelection } = useSelection();
-		const activeDialog = ref<'choose' | 'url' | null>(null);
-		const input = ref(null);
+const props = withDefaults(defineProps<Props>(), {
+	multiple: false,
+	preset: () => ({}),
+	fileId: undefined,
+	fromUrl: false,
+	fromLibrary: false,
+	folder: undefined,
+});
 
-		const filterByFolder = computed(() => {
-			if (!props.folder) return undefined;
-			return { folder: { id: { _eq: props.folder } } } as Filter;
-		});
+const emit = defineEmits(['input']);
 
-		return {
-			t,
-			uploading,
-			progress,
-			onDragEnter,
-			onDragLeave,
-			onDrop,
-			dragging,
-			onBrowseSelect,
-			done,
-			numberOfFiles,
-			activeDialog,
-			filterByFolder,
-			url,
-			isValidURL,
-			urlLoading,
-			importFromURL,
-			setSelection,
-			openFileBrowser,
-			input,
-		};
+const { t } = useI18n();
 
-		function useUpload() {
-			const uploading = ref(false);
-			const progress = ref(0);
-			const numberOfFiles = ref(0);
-			const done = ref(0);
+const { uploading, progress, upload, onBrowseSelect, done, numberOfFiles } = useUpload();
+const { onDragEnter, onDragLeave, onDrop, dragging } = useDragging();
+const { url, isValidURL, loading: urlLoading, importFromURL } = useURLImport();
+const { setSelection } = useSelection();
+const activeDialog = ref<'choose' | 'url' | null>(null);
+const input = ref<HTMLInputElement>();
 
-			return { uploading, progress, upload, onBrowseSelect, numberOfFiles, done };
+const filterByFolder = computed(() => {
+	if (!props.folder) return undefined;
+	return { folder: { id: { _eq: props.folder } } } as Filter;
+});
 
-			async function upload(files: FileList) {
-				uploading.value = true;
-				progress.value = 0;
+function useUpload() {
+	const uploading = ref(false);
+	const progress = ref(0);
+	const numberOfFiles = ref(0);
+	const done = ref(0);
 
-				const folderPreset: { folder?: string } = {};
+	return { uploading, progress, upload, onBrowseSelect, numberOfFiles, done };
 
-				if (props.folder) {
-					folderPreset.folder = props.folder;
-				}
+	async function upload(files: FileList) {
+		uploading.value = true;
+		progress.value = 0;
 
-				try {
-					numberOfFiles.value = files.length;
+		const folderPreset: { folder?: string } = {};
 
-					if (props.multiple === true) {
-						const uploadedFiles = await uploadFiles(Array.from(files), {
-							onProgressChange: (percentage) => {
-								progress.value = Math.round(percentage.reduce((acc, cur) => (acc += cur)) / files.length);
-								done.value = percentage.filter((p) => p === 100).length;
-							},
-							preset: {
-								...props.preset,
-								...folderPreset,
-							},
-						});
-
-						uploadedFiles && emit('input', uploadedFiles);
-					} else {
-						const uploadedFile = await uploadFile(Array.from(files)[0], {
-							onProgressChange: (percentage) => {
-								progress.value = percentage;
-								done.value = percentage === 100 ? 1 : 0;
-							},
-							fileId: props.fileId,
-							preset: {
-								...props.preset,
-								...folderPreset,
-							},
-						});
-
-						uploadedFile && emit('input', uploadedFile);
-					}
-				} catch (err: any) {
-					unexpectedError(err);
-				} finally {
-					uploading.value = false;
-					done.value = 0;
-					numberOfFiles.value = 0;
-				}
-			}
-
-			function onBrowseSelect(event: InputEvent) {
-				const files = (event.target as HTMLInputElement)?.files;
-
-				if (files) {
-					upload(files);
-				}
-			}
+		if (props.folder) {
+			folderPreset.folder = props.folder;
 		}
 
-		function useDragging() {
-			const dragging = ref(false);
+		try {
+			numberOfFiles.value = files.length;
 
-			let dragCounter = 0;
+			if (props.multiple === true) {
+				const uploadedFiles = await uploadFiles(Array.from(files), {
+					onProgressChange: (percentage) => {
+						progress.value = Math.round(percentage.reduce((acc, cur) => (acc += cur)) / files.length);
+						done.value = percentage.filter((p) => p === 100).length;
+					},
+					preset: {
+						...props.preset,
+						...folderPreset,
+					},
+				});
 
-			return { onDragEnter, onDragLeave, onDrop, dragging };
+				uploadedFiles && emit('input', uploadedFiles);
+			} else {
+				const uploadedFile = await uploadFile(Array.from(files)[0], {
+					onProgressChange: (percentage) => {
+						progress.value = percentage;
+						done.value = percentage === 100 ? 1 : 0;
+					},
+					fileId: props.fileId,
+					preset: {
+						...props.preset,
+						...folderPreset,
+					},
+				});
 
-			function onDragEnter() {
-				dragCounter++;
-
-				if (dragCounter === 1) {
-					dragging.value = true;
-				}
-			}
-
-			function onDragLeave() {
-				dragCounter--;
-
-				if (dragCounter === 0) {
-					dragging.value = false;
-				}
-			}
-
-			function onDrop(event: DragEvent) {
-				dragCounter = 0;
-				dragging.value = false;
-
-				const files = event.dataTransfer?.files;
-
-				if (files) {
-					upload(files);
-				}
+				uploadedFile && emit('input', uploadedFile);
 			}
+		} catch (err: any) {
+			unexpectedError(err);
+		} finally {
+			uploading.value = false;
+			done.value = 0;
+			numberOfFiles.value = 0;
 		}
+	}
 
-		function useSelection() {
-			return { setSelection };
+	function onBrowseSelect(event: Event) {
+		const files = (event.target as HTMLInputElement)?.files;
 
-			async function setSelection(selection: string[]) {
-				if (selection[0]) {
-					const id = selection[0];
-					const fileResponse = await api.get(`/files/${id}`);
-					emit('input', fileResponse.data.data);
-				} else {
-					emit('input', null);
-				}
-			}
+		if (files) {
+			upload(files);
 		}
+	}
+}
 
-		function useURLImport() {
-			const url = ref('');
-			const loading = ref(false);
+function useDragging() {
+	const dragging = ref(false);
 
-			const isValidURL = computed(() => {
-				try {
-					new URL(url.value);
-					return true;
-				} catch {
-					return false;
-				}
+	let dragCounter = 0;
+
+	return { onDragEnter, onDragLeave, onDrop, dragging };
+
+	function onDragEnter() {
+		dragCounter++;
+
+		if (dragCounter === 1) {
+			dragging.value = true;
+		}
+	}
+
+	function onDragLeave() {
+		dragCounter--;
+
+		if (dragCounter === 0) {
+			dragging.value = false;
+		}
+	}
+
+	function onDrop(event: DragEvent) {
+		dragCounter = 0;
+		dragging.value = false;
+
+		const files = event.dataTransfer?.files;
+
+		if (files) {
+			upload(files);
+		}
+	}
+}
+
+function useSelection() {
+	return { setSelection };
+
+	async function setSelection(selection: string[]) {
+		if (selection[0]) {
+			const id = selection[0];
+			const fileResponse = await api.get(`/files/${id}`);
+			emit('input', fileResponse.data.data);
+		} else {
+			emit('input', null);
+		}
+	}
+}
+
+function useURLImport() {
+	const url = ref('');
+	const loading = ref(false);
+
+	const isValidURL = computed(() => {
+		try {
+			new URL(url.value);
+			return true;
+		} catch {
+			return false;
+		}
+	});
+
+	return { url, loading, isValidURL, importFromURL };
+
+	async function importFromURL() {
+		loading.value = true;
+
+		try {
+			const response = await api.post(`/files/import`, {
+				url: url.value,
+				data: {
+					folder: props.folder,
+				},
 			});
 
-			return { url, loading, isValidURL, importFromURL };
+			emitter.emit(Events.upload);
 
-			async function importFromURL() {
-				loading.value = true;
-
-				try {
-					const response = await api.post(`/files/import`, {
-						url: url.value,
-						data: {
-							folder: props.folder,
-						},
-					});
-
-					emitter.emit(Events.upload);
-
-					if (props.multiple) {
-						emit('input', [response.data.data]);
-					} else {
-						emit('input', response.data.data);
-					}
-
-					activeDialog.value = null;
-					url.value = '';
-				} catch (err: any) {
-					unexpectedError(err);
-				} finally {
-					loading.value = false;
-				}
+			if (props.multiple) {
+				emit('input', [response.data.data]);
+			} else {
+				emit('input', response.data.data);
 			}
-		}
 
-		function openFileBrowser() {
-			input.value.click();
+			activeDialog.value = null;
+			url.value = '';
+		} catch (err: any) {
+			unexpectedError(err);
+		} finally {
+			loading.value = false;
 		}
-	},
-});
+	}
+}
+
+function openFileBrowser() {
+	input.value?.click();
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/app/src/displays/file/file.vue b/app/src/displays/file/file.vue
index cc99fa68f0..a9e144583a 100644
--- a/app/src/displays/file/file.vue
+++ b/app/src/displays/file/file.vue
@@ -18,7 +18,7 @@
 <script lang="ts">
 import { defineComponent, PropType, computed, ref } from 'vue';
 import { readableMimeType } from '@/utils/readable-mime-type';
-import { useElementSize } from '@/composables/use-element-size';
+import { useElementSize } from '@directus/shared/composables';
 
 type File = {
 	id: string;
diff --git a/app/src/displays/translations/translations.vue b/app/src/displays/translations/translations.vue
index 37fe40086b..75740483ca 100644
--- a/app/src/displays/translations/translations.vue
+++ b/app/src/displays/translations/translations.vue
@@ -33,7 +33,7 @@
 import { defineComponent, computed, PropType, toRefs } from 'vue';
 import { useRelation } from '@/composables/use-m2m';
 import { useUserStore } from '@/stores/user';
-import { notEmpty } from '@/utils/is-empty';
+import { isNil } from 'lodash';
 
 export default defineComponent({
 	props: {
@@ -112,7 +112,7 @@ export default defineComponent({
 		const translations = computed(() => {
 			return props.value.map((item) => {
 				const filledFields = writableFields.value.filter((field) => {
-					return field.field in item && notEmpty(item?.[field.field]);
+					return field.field in item && !isNil(item?.[field.field]);
 				}).length;
 
 				return {
diff --git a/app/src/interfaces/select-multiple-checkbox/select-multiple-checkbox.vue b/app/src/interfaces/select-multiple-checkbox/select-multiple-checkbox.vue
index 244165e1a2..46f79180ee 100644
--- a/app/src/interfaces/select-multiple-checkbox/select-multiple-checkbox.vue
+++ b/app/src/interfaces/select-multiple-checkbox/select-multiple-checkbox.vue
@@ -64,7 +64,7 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, computed, toRefs, PropType, ref } from 'vue';
-import { useCustomSelectionMultiple } from '@/composables/use-custom-selection';
+import { useCustomSelectionMultiple } from '@directus/shared/composables';
 
 type Option = {
 	text: string;
diff --git a/app/src/interfaces/select-radio/select-radio.vue b/app/src/interfaces/select-radio/select-radio.vue
index 690716a212..94b7c1646e 100644
--- a/app/src/interfaces/select-radio/select-radio.vue
+++ b/app/src/interfaces/select-radio/select-radio.vue
@@ -40,7 +40,7 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, computed, toRefs, PropType } from 'vue';
-import { useCustomSelection } from '@/composables/use-custom-selection';
+import { useCustomSelection } from '@directus/shared/composables';
 
 type Option = {
 	text: string;
diff --git a/app/src/interfaces/translations/translations.vue b/app/src/interfaces/translations/translations.vue
index d60c809330..c51b36efb1 100644
--- a/app/src/interfaces/translations/translations.vue
+++ b/app/src/interfaces/translations/translations.vue
@@ -69,12 +69,12 @@ import { DisplayItem, RelationQueryMultiple, useRelationMultiple } from '@/compo
 import { useRelationM2M } from '@/composables/use-relation-m2m';
 import { useWindowSize } from '@/composables/use-window-size';
 import { useFieldsStore } from '@/stores/fields';
-import { notEmpty } from '@/utils/is-empty';
 import { unexpectedError } from '@/utils/unexpected-error';
 import { toArray } from '@directus/shared/utils';
 import { computed, ref, toRefs, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import LanguageSelect from './language-select.vue';
+import { isNil } from 'lodash';
 
 const props = withDefaults(
 	defineProps<{
@@ -227,7 +227,7 @@ function useLanguages() {
 
 			const edits = getItemWithLang(displayItems.value, langCode);
 
-			const filledFields = writableFields.filter((field) => notEmpty((edits ?? {})[field.field])).length;
+			const filledFields = writableFields.filter((field) => !isNil((edits ?? {})[field.field])).length;
 
 			return {
 				text: language[props.languageField ?? relationInfo.value.relatedPrimaryKeyField.field],
diff --git a/app/src/layouts/cards/cards.vue b/app/src/layouts/cards/cards.vue
index d9a289412e..428ffce5d2 100644
--- a/app/src/layouts/cards/cards.vue
+++ b/app/src/layouts/cards/cards.vue
@@ -80,9 +80,8 @@ import { defineComponent, watch, PropType, ref, inject, Ref } from 'vue';
 
 import Card from './components/card.vue';
 import CardsHeader from './components/header.vue';
-import { useElementSize } from '@/composables/use-element-size';
 import { Field, Item } from '@directus/shared/types';
-import { useSync } from '@directus/shared/composables';
+import { useSync, useElementSize } from '@directus/shared/composables';
 import { Collection } from '@/types/collections';
 import { Filter, ShowSelect } from '@directus/shared/types';
 
diff --git a/app/src/modules/insights/routes/dashboard.vue b/app/src/modules/insights/routes/dashboard.vue
index a2be52476e..20dc8660a2 100644
--- a/app/src/modules/insights/routes/dashboard.vue
+++ b/app/src/modules/insights/routes/dashboard.vue
@@ -191,7 +191,7 @@
 </template>
 
 <script lang="ts" setup>
-import { AppTile } from '@/components/v-workspace-tile.vue';
+import { AppTile } from '@directus/components/v-workspace-tile.vue';
 import { useEditsGuard } from '@/composables/use-edits-guard';
 import { useShortcut } from '@/composables/use-shortcut';
 import { getPanels } from '@/panels';
diff --git a/app/src/modules/insights/routes/panel-configuration.vue b/app/src/modules/insights/routes/panel-configuration.vue
index 6cca6d1ff2..f7ef7f0c32 100644
--- a/app/src/modules/insights/routes/panel-configuration.vue
+++ b/app/src/modules/insights/routes/panel-configuration.vue
@@ -94,7 +94,6 @@
 </template>
 
 <script lang="ts" setup>
-import { FancySelectItem } from '@/components/v-fancy-select.vue';
 import { useDialogRoute } from '@/composables/use-dialog-route';
 import { getPanel, getPanels } from '@/panels';
 import { useInsightsStore } from '@/stores/insights';
diff --git a/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-display.vue b/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-display.vue
index fc3a31c907..33d7e947c9 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-display.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-display.vue
@@ -23,7 +23,6 @@ import { useI18n } from 'vue-i18n';
 import { defineComponent, computed } from 'vue';
 import { getDisplay } from '@/displays';
 import { getInterface } from '@/interfaces';
-import { FancySelectItem } from '@/components/v-fancy-select.vue';
 import { clone } from 'lodash';
 import { useFieldDetailStore, syncFieldDetailStoreProperty } from '../store';
 import { storeToRefs } from 'pinia';
diff --git a/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-interface.vue b/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-interface.vue
index e9833c6cb3..7b9be51c54 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-interface.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-interface.vue
@@ -23,7 +23,6 @@
 import { useI18n } from 'vue-i18n';
 import { defineComponent, computed } from 'vue';
 import { getInterface } from '@/interfaces';
-import { FancySelectItem } from '@/components/v-fancy-select.vue';
 import { useFieldDetailStore, syncFieldDetailStoreProperty } from '../store/';
 import { storeToRefs } from 'pinia';
 import ExtensionOptions from '../shared/extension-options.vue';
diff --git a/app/src/modules/settings/routes/flows/flow.vue b/app/src/modules/settings/routes/flows/flow.vue
index 3e6ae07e04..ed391455ab 100644
--- a/app/src/modules/settings/routes/flows/flow.vue
+++ b/app/src/modules/settings/routes/flows/flow.vue
@@ -194,7 +194,7 @@ import { nanoid, customAlphabet } from 'nanoid';
 import SettingsNotFound from '../not-found.vue';
 import SettingsNavigation from '../../components/navigation.vue';
 import Operation, { ArrowInfo, Target } from './components/operation.vue';
-import { AppTile } from '@/components/v-workspace-tile.vue';
+import { AppTile } from '@directus/components/v-workspace-tile.vue';
 import { ATTACHMENT_OFFSET, PANEL_HEIGHT, PANEL_WIDTH } from './constants';
 import Arrows from './components/arrows.vue';
 import { Vector2 } from '@/utils/vector2';
diff --git a/app/src/stores/collections.ts b/app/src/stores/collections.ts
index 8e14e268a7..27d8ed71f1 100644
--- a/app/src/stores/collections.ts
+++ b/app/src/stores/collections.ts
@@ -3,13 +3,12 @@ import { i18n } from '@/lang';
 import { Collection as CollectionRaw, DeepPartial, Field } from '@directus/shared/types';
 import { Collection } from '@/types/collections';
 import { getCollectionType } from '@directus/shared/utils';
-import { notEmpty } from '@/utils/is-empty';
 import { notify } from '@/utils/notify';
 import { unexpectedError } from '@/utils/unexpected-error';
 import formatTitle from '@directus/format-title';
 import { defineStore } from 'pinia';
 import { COLLECTIONS_DENY_LIST } from '@/constants';
-import { isEqual, orderBy, omit } from 'lodash';
+import { isEqual, orderBy, omit, isNil } from 'lodash';
 import { useRelationsStore } from './relations';
 
 export const useCollectionsStore = defineStore({
@@ -53,7 +52,7 @@ export const useCollectionsStore = defineStore({
 			let name = formatTitle(collection.collection);
 			const type = getCollectionType(collection);
 
-			if (collection.meta && notEmpty(collection.meta.translations)) {
+			if (collection.meta && !isNil(collection.meta.translations)) {
 				for (let i = 0; i < collection.meta.translations.length; i++) {
 					const { language, translation, singular, plural } = collection.meta.translations[i];
 
diff --git a/app/src/stores/fields.ts b/app/src/stores/fields.ts
index cff4fa4a19..7a9d3f5dd9 100644
--- a/app/src/stores/fields.ts
+++ b/app/src/stores/fields.ts
@@ -2,11 +2,10 @@ import api from '@/api';
 import { i18n } from '@/lang';
 import { useCollectionsStore } from '@/stores/collections';
 import { useRelationsStore } from '@/stores/relations';
-import { notEmpty } from '@/utils/is-empty';
 import { unexpectedError } from '@/utils/unexpected-error';
 import formatTitle from '@directus/format-title';
 import { DeepPartial, Field, FieldRaw, Relation } from '@directus/shared/types';
-import { isEqual, merge, omit, orderBy } from 'lodash';
+import { isEqual, isNil, merge, omit, orderBy } from 'lodash';
 import { nanoid } from 'nanoid';
 import { defineStore } from 'pinia';
 
@@ -72,7 +71,7 @@ export const useFieldsStore = defineStore({
 		parseField(field: FieldRaw): Field {
 			let name = formatTitle(field.field);
 
-			if (field.meta && notEmpty(field.meta.translations) && field.meta.translations.length > 0) {
+			if (field.meta && !isNil(field.meta.translations) && field.meta.translations.length > 0) {
 				for (let i = 0; i < field.meta.translations.length; i++) {
 					const { language, translation } = field.meta.translations[i];
 
diff --git a/app/src/utils/capitalize-first.test.ts b/app/src/utils/capitalize-first.test.ts
deleted file mode 100644
index ee667b07a2..0000000000
--- a/app/src/utils/capitalize-first.test.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { test, expect } from 'vitest';
-
-import { capitalizeFirst } from '@/utils/capitalize-first';
-
-test('Capitalizes first character', () => {
-	expect(capitalizeFirst('test')).toBe('Test');
-});
-
-test('Does not explode on empty strings', () => {
-	expect(capitalizeFirst('')).toBe('');
-});
diff --git a/app/src/utils/capitalize-first.ts b/app/src/utils/capitalize-first.ts
deleted file mode 100644
index d513b2d600..0000000000
--- a/app/src/utils/capitalize-first.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * Capitalizes the first character in a given string
- *
- * @param str - String to capitalize
- * @returns same string with first character capitalized
- *
- * @example
- * ```js
- * capitalizeFirst('test');
- * // => 'Test'
- * ```
- */
-export function capitalizeFirst(str: string): string {
-	return str.charAt(0).toUpperCase() + str.slice(1);
-}
diff --git a/app/src/utils/get-js-type.ts b/app/src/utils/get-js-type.ts
index a825c09146..3ddaaa6e6f 100644
--- a/app/src/utils/get-js-type.ts
+++ b/app/src/utils/get-js-type.ts
@@ -6,11 +6,29 @@ export function getJSType(field: Field): string {
 		field.meta!.special.some((special) => ['m2o', 'o2m', 'm2m', 'm2a', 'files', 'translations'].includes(special))
 	)
 		return 'object';
-	if (['bigInteger', 'integer', 'float', 'decimal'].includes(field.type)) return 'number';
-	if (['string', 'text', 'uuid', 'hash'].includes(field.type)) return 'string';
-	if (['boolean'].includes(field.type)) return 'boolean';
-	if (['time', 'timestamp', 'date', 'dateTime'].includes(field.type)) return 'string';
-	if (['json', 'csv'].includes(field.type)) return 'object';
+
+	switch (field.type) {
+		case 'bigInteger':
+		case 'integer':
+		case 'float':
+		case 'decimal':
+			return 'number';
+		case 'string':
+		case 'text':
+		case 'uuid':
+		case 'hash':
+		case 'time':
+		case 'timestamp':
+		case 'date':
+		case 'dateTime':
+			return 'string';
+		case 'boolean':
+			return 'boolean';
+		case 'json':
+		case 'csv':
+			return 'object';
+	}
+
 	if (field.type?.startsWith('geometry')) return 'object';
 	return 'undefined';
 }
diff --git a/app/src/utils/is-empty.test.ts b/app/src/utils/is-empty.test.ts
deleted file mode 100644
index f6e7c1f2c5..0000000000
--- a/app/src/utils/is-empty.test.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { describe, it, expect } from 'vitest';
-
-import { isEmpty, notEmpty } from '@/utils/is-empty';
-
-describe('isEmpty', () => {
-	it('Returns true for null', () => {
-		expect(isEmpty(null)).toBe(true);
-	});
-
-	it('Returns true for undefined', () => {
-		expect(isEmpty(undefined)).toBe(true);
-	});
-
-	it('Returns false for strings/numbers/etc', () => {
-		expect(isEmpty('')).toBe(false);
-		expect(isEmpty('hello')).toBe(false);
-		expect(isEmpty(123)).toBe(false);
-		expect(isEmpty(0)).toBe(false);
-		expect(isEmpty([])).toBe(false);
-		expect(isEmpty({})).toBe(false);
-	});
-});
-
-describe('notEmpty', () => {
-	it('Returns false for null', () => {
-		expect(notEmpty(null)).toBe(false);
-	});
-
-	it('Returns false for undefined', () => {
-		expect(notEmpty(undefined)).toBe(false);
-	});
-
-	it('Returns true for strings/numbers/etc', () => {
-		expect(notEmpty('')).toBe(true);
-		expect(notEmpty('hello')).toBe(true);
-		expect(notEmpty(123)).toBe(true);
-		expect(notEmpty(0)).toBe(true);
-		expect(notEmpty([])).toBe(true);
-		expect(notEmpty({})).toBe(true);
-	});
-});
diff --git a/app/src/utils/is-empty.ts b/app/src/utils/is-empty.ts
deleted file mode 100644
index 100243a9c3..0000000000
--- a/app/src/utils/is-empty.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export function isEmpty<Value>(value: Value | null | undefined): value is Value {
-	return value == null || value === undefined;
-}
-
-export function notEmpty<Value>(value: Value | null | undefined): value is Value {
-	return value !== null && value !== undefined;
-}
diff --git a/app/src/utils/percentage.ts b/app/src/utils/percentage.ts
index d6e39ef546..d54a2c6106 100644
--- a/app/src/utils/percentage.ts
+++ b/app/src/utils/percentage.ts
@@ -1,5 +1,5 @@
 export const percentage = (value: number, limit: number | undefined) => {
 	if (!limit) return null;
 	if (!value) return 100;
-	return 100 - (value / +limit) * 100;
+	return 100 - (value / Number(limit)) * 100;
 };
diff --git a/app/src/utils/translate-shortcut.ts b/app/src/utils/translate-shortcut.ts
index bb93d03868..c9bab050c1 100644
--- a/app/src/utils/translate-shortcut.ts
+++ b/app/src/utils/translate-shortcut.ts
@@ -1,4 +1,4 @@
-import { capitalizeFirst } from '@/utils/capitalize-first';
+import { capitalize } from 'lodash';
 
 export function translateShortcut(keys: string[]): string {
 	const isMac = navigator.platform.toLowerCase().startsWith('mac') || navigator.platform.startsWith('iP');
@@ -10,14 +10,14 @@ export function translateShortcut(keys: string[]): string {
 				if (key === 'option') return '⌥';
 				if (key === 'shift') return '⇧';
 				if (key === 'alt') return '⌥';
-				return capitalizeFirst(key);
+				return capitalize(key);
 			})
 			.join('');
 	} else {
 		return keys
 			.map((key) => {
 				if (key === 'meta') return 'Ctrl';
-				return capitalizeFirst(key);
+				return capitalize(key);
 			})
 			.join('+');
 	}
diff --git a/app/src/views/private/components/comment-input.vue b/app/src/views/private/components/comment-input.vue
index ce825fc204..564a6e4f7a 100644
--- a/app/src/views/private/components/comment-input.vue
+++ b/app/src/views/private/components/comment-input.vue
@@ -67,7 +67,6 @@
 
 <script setup lang="ts">
 import api from '@/api';
-import vTemplateInput from '@/components/v-template-input.vue';
 import { useShortcut } from '@/composables/use-shortcut';
 import { notify } from '@/utils/notify';
 import { unexpectedError } from '@/utils/unexpected-error';
diff --git a/app/src/views/private/components/search-input.vue b/app/src/views/private/components/search-input.vue
index b1e233016a..ec331b1540 100644
--- a/app/src/views/private/components/search-input.vue
+++ b/app/src/views/private/components/search-input.vue
@@ -47,7 +47,7 @@ import { useI18n } from 'vue-i18n';
 import { defineComponent, ref, watch, PropType, computed, inject, Ref } from 'vue';
 import { Filter } from '@directus/shared/types';
 import { isObject } from 'lodash';
-import { useElementSize } from '@/composables/use-element-size';
+import { useElementSize } from '@directus/shared/composables';
 
 export default defineComponent({
 	props: {
diff --git a/app/src/views/private/components/sidebar-detail.vue b/app/src/views/private/components/sidebar-detail.vue
index 4a82aa3d50..d0321127b8 100644
--- a/app/src/views/private/components/sidebar-detail.vue
+++ b/app/src/views/private/components/sidebar-detail.vue
@@ -29,7 +29,7 @@
 <script lang="ts">
 import { defineComponent, toRefs } from 'vue';
 import { useAppStore } from '@/stores/app';
-import { useGroupable } from '@/composables/use-groupable';
+import { useGroupable } from '@directus/shared/composables';
 
 export default defineComponent({
 	props: {
diff --git a/app/src/views/private/private-view.vue b/app/src/views/private/private-view.vue
index f4187c2106..fd55c0c667 100644
--- a/app/src/views/private/private-view.vue
+++ b/app/src/views/private/private-view.vue
@@ -74,7 +74,7 @@
 </template>
 
 <script lang="ts" setup>
-import { useElementSize } from '@/composables/use-element-size';
+import { useElementSize } from '@directus/shared/composables';
 import { useEventListener } from '@/composables/use-event-listener';
 import { useLocalStorage } from '@/composables/use-local-storage';
 import { useTitle } from '@/composables/use-title';
diff --git a/packages/components/.gitignore b/packages/components/.gitignore
new file mode 100644
index 0000000000..02f605b146
--- /dev/null
+++ b/packages/components/.gitignore
@@ -0,0 +1 @@
+storybook-static/
\ No newline at end of file
diff --git a/packages/components/.storybook/fix-actions.js b/packages/components/.storybook/fix-actions.js
new file mode 100644
index 0000000000..f9e9b678a8
--- /dev/null
+++ b/packages/components/.storybook/fix-actions.js
@@ -0,0 +1,22 @@
+import { action } from '@storybook/addon-actions';
+
+export function fix(args, argTypes, update) {
+
+    if(args === undefined) args = {}
+
+    for(let type of Object.values(argTypes)) {
+        if(type.table.category !== 'events') continue
+
+        if(type.name.startsWith('update:')) {
+            args[type.name] = (event) => {
+                // update({
+                //     [type.name.substring(7)]: event
+                // })
+                action(type.name)(event)
+            }
+        } else
+            args[type.name] = action(type.name);
+    }
+
+    return {args}
+}
\ No newline at end of file
diff --git a/packages/components/.storybook/main.js b/packages/components/.storybook/main.js
new file mode 100644
index 0000000000..eb0624c205
--- /dev/null
+++ b/packages/components/.storybook/main.js
@@ -0,0 +1,15 @@
+module.exports = {
+    stories: [
+        '../stories/**/*.stories.mdx',
+        '../stories/**/*.stories.@(js|jsx|ts|tsx)',
+    ],
+    addons: [
+        '@storybook/addon-links',
+        '@storybook/addon-essentials',
+        '@storybook/addon-actions'
+    ],
+    core: {
+        builder: '@storybook/builder-vite',
+    },
+    framework: '@storybook/vue3'
+}
\ No newline at end of file
diff --git a/packages/components/.storybook/preview-body.html b/packages/components/.storybook/preview-body.html
new file mode 100644
index 0000000000..2d27bbee37
--- /dev/null
+++ b/packages/components/.storybook/preview-body.html
@@ -0,0 +1,2 @@
+<div id="dialog-outlet"></div>
+<div id="menu-outlet"></div>
\ No newline at end of file
diff --git a/packages/components/.storybook/preview.js b/packages/components/.storybook/preview.js
new file mode 100644
index 0000000000..a1fd19ac8a
--- /dev/null
+++ b/packages/components/.storybook/preview.js
@@ -0,0 +1,46 @@
+import '../../../app/src/styles/main.scss';
+import './styles.scss';
+import { useArgs } from '@storybook/client-api';
+import { app } from "@storybook/vue3";
+import { createRouter, createWebHistory } from 'vue-router';
+import { createI18n } from 'vue-i18n';
+import { register } from './register';
+import { fix } from './fix-actions';
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes: [
+        {
+            path: '/',
+        }
+    ],
+});
+
+const i18n = createI18n();
+
+export const decorators = [
+    (Story, { args, argTypes }) => {
+        const [_, update] = useArgs()
+        const newArgs = fix(args, argTypes, update)
+        return {
+            args: newArgs,
+            template: '<story />'
+        };
+    }
+]
+
+export const parameters = {
+    // actions: { argTypesRegex: "(change|emoji-selected|update:.*?)" },
+    controls: {
+        matchers: {
+            color: /(background|color)$/i,
+            date: /Date$/,
+        },
+    },
+}
+
+app.use(router)
+app.use(i18n)
+
+
+register(app)
\ No newline at end of file
diff --git a/packages/components/.storybook/register.js b/packages/components/.storybook/register.js
new file mode 100644
index 0000000000..7c31f2fd5a
--- /dev/null
+++ b/packages/components/.storybook/register.js
@@ -0,0 +1,138 @@
+import TransitionBounce from '../src/components/transition/bounce.vue';
+import TransitionDialog from '../src/components/transition/dialog.vue';
+import TransitionExpand from '../src/components/transition/expand.vue';
+import VAvatar from '../src/components/v-avatar.vue';
+import VBadge from '../src/components/v-badge.vue';
+import VBreadcrumb from '../src/components/v-breadcrumb.vue';
+import VButton from '../src/components/v-button.vue';
+import VCard from '../src/components/v-card.vue';
+import VCardActions from '../src/components/v-card-actions.vue';
+import VCardSubtitle from '../src/components/v-card-subtitle.vue';
+import VCardText from '../src/components/v-card-text.vue';
+import VCardTitle from '../src/components/v-card-title.vue';
+import VCheckbox from '../src/components/v-checkbox.vue';
+import VCheckboxTree from '../src/components/v-checkbox-tree/v-checkbox-tree.vue';
+import VChip from '../src/components/v-chip.vue';
+import VDivider from '../src/components/v-divider.vue';
+import VFancySelect from '../src/components/v-fancy-select.vue';
+import VHover from '../src/components/v-hover.vue';
+import VHighlight from '../src/components/v-highlight.vue';
+import VIcon from '../src/components/v-icon/v-icon.vue';
+import VIconFile from '../src/components/v-icon-file.vue';
+import VInfo from '../src/components/v-info.vue';
+import VInput from '../src/components/v-input.vue';
+import VItemGroup from '../src/components/v-item-group.vue';
+import VItem from '../src/components/v-item.vue';
+import VList from '../src/components/v-list.vue';
+import VListGroup from '../src/components/v-list-group.vue';
+import VListItem from '../src/components/v-list-item.vue';
+import VListItemContent from '../src/components/v-list-item-content.vue';
+import VListItemHint from '../src/components/v-list-item-hint.vue';
+import VListItemIcon from '../src/components/v-list-item-icon.vue';
+import VMenu from '../src/components/v-menu.vue';
+import VNotice from '../src/components/v-notice.vue';
+import VOverlay from '../src/components/v-overlay.vue';
+import VPagination from '../src/components/v-pagination.vue';
+import VProgressCircular from '../src/components/v-progress-circular.vue';
+import VProgressLinear from '../src/components/v-progress-linear.vue';
+import VRadio from '../src/components/v-radio.vue';
+import VSelect from '../src/components/v-select/v-select.vue';
+import VSheet from '../src/components/v-sheet.vue';
+import VSkeletonLoader from '../src/components/v-skeleton-loader.vue';
+import VSlider from '../src/components/v-slider.vue';
+import VTabs from '../src/components/v-tabs.vue';
+import VTab from '../src/components/v-tab.vue';
+import VTabItem from '../src/components/v-tab-item.vue';
+import VTabsItems from '../src/components/v-tabs-items.vue';
+import VTemplateInput from '../src/components/v-template-input.vue';
+import VTextOverflow from '../src/components/v-text-overflow.vue';
+import VTextarea from '../src/components/v-textarea.vue';
+import VEmojiPicker from '../src/components/v-emoji-picker.vue';
+import VWorkspace from '../src/components/v-workspace.vue';
+import VWorkspaceTile from '../src/components/v-workspace-tile.vue';
+// import VTable from './v-table/v-table.vue';
+// import VUpload from './v-upload.vue';
+// import VDatePicker from './v-date-picker.vue';
+// import VDetail from './v-detail.vue';
+// import VDialog from './v-dialog.vue';
+// import VError from './v-error.vue';
+// import VDrawer from './v-drawer.vue';
+// import VFieldTemplate from './v-field-template/v-field-template.vue';
+// import VFieldList from './v-field-list/v-field-list.vue';
+// import VForm from './v-form/v-form.vue';
+// import VImage from './v-image.vue';
+
+import Focus from '../../../app/src/directives/focus';
+import Tooltip from '../../../app/src/directives/tooltip';
+import ClickOutside from '../../../app/src/directives/click-outside';
+
+export function register(app) {
+    app.directive('focus', Focus);
+    app.directive('tooltip', Tooltip);
+	app.directive('click-outside', ClickOutside);
+    
+    app.component('VAvatar', VAvatar);
+	app.component('VBadge', VBadge);
+	app.component('VBreadcrumb', VBreadcrumb);
+	app.component('VButton', VButton);
+	app.component('VCardActions', VCardActions);
+	app.component('VCardSubtitle', VCardSubtitle);
+	app.component('VCardText', VCardText);
+	app.component('VCardTitle', VCardTitle);
+	app.component('VCard', VCard);
+	app.component('VCheckbox', VCheckbox);
+	app.component('VCheckboxTree', VCheckboxTree);
+	app.component('VChip', VChip);
+	// app.component('VDetail', VDetail);
+	// app.component('VDialog', VDialog);
+	app.component('VDivider', VDivider);
+	// app.component('VError', VError);
+	app.component('VFancySelect', VFancySelect);
+	// app.component('VFieldTemplate', VFieldTemplate);
+	// app.component('VFieldList', VFieldList);
+	// app.component('VForm', VForm);
+	app.component('VHover', VHover);
+	app.component('VHighlight', VHighlight);
+	app.component('VIcon', VIcon);
+	// app.component('VImage', VImage);
+	app.component('VIconFile', VIconFile);
+	app.component('VInfo', VInfo);
+	app.component('VInput', VInput);
+	app.component('VItemGroup', VItemGroup);
+	app.component('VItem', VItem);
+	app.component('VListGroup', VListGroup);
+	app.component('VListItemContent', VListItemContent);
+	app.component('VListItemHint', VListItemHint);
+	app.component('VListItemIcon', VListItemIcon);
+	app.component('VListItem', VListItem);
+	app.component('VList', VList);
+	app.component('VMenu', VMenu);
+	// app.component('VDrawer', VDrawer);
+	app.component('VNotice', VNotice);
+	app.component('VOverlay', VOverlay);
+	app.component('VPagination', VPagination);
+	app.component('VProgressCircular', VProgressCircular);
+	app.component('VProgressLinear', VProgressLinear);
+	app.component('VRadio', VRadio);
+	app.component('VSelect', VSelect);
+	app.component('VSheet', VSheet);
+	app.component('VSkeletonLoader', VSkeletonLoader);
+	app.component('VSlider', VSlider);
+	app.component('VTabItem', VTabItem);
+	app.component('VTab', VTab);
+	// app.component('VTable', VTable);
+	app.component('VTabsItems', VTabsItems);
+	app.component('VTabs', VTabs);
+	app.component('VTemplateInput', VTemplateInput);
+	app.component('VTextarea', VTextarea);
+	app.component('VTextOverflow', VTextOverflow);
+	// app.component('VUpload', VUpload);
+	// app.component('VDatePicker', VDatePicker);
+	app.component('VEmojiPicker', VEmojiPicker);
+	app.component('VWorkspace', VWorkspace);
+	app.component('VWorkspaceTile', VWorkspaceTile);
+
+	app.component('TransitionBounce', TransitionBounce);
+	app.component('TransitionDialog', TransitionDialog);
+	app.component('TransitionExpand', TransitionExpand);
+}
\ No newline at end of file
diff --git a/packages/components/.storybook/styles.scss b/packages/components/.storybook/styles.scss
new file mode 100644
index 0000000000..ccd640e9df
--- /dev/null
+++ b/packages/components/.storybook/styles.scss
@@ -0,0 +1,3 @@
+.active {
+    color: var(--primary);
+}
\ No newline at end of file
diff --git a/packages/components/package.json b/packages/components/package.json
new file mode 100644
index 0000000000..2db35a4530
--- /dev/null
+++ b/packages/components/package.json
@@ -0,0 +1,77 @@
+{
+	"name": "@directus/components",
+	"version": "9.16.1",
+	"description": "Components of the Directus App.",
+	"exports": {
+		"./": "./src/components/"
+	},
+	"sideEffects": false,
+	"scripts": {
+		"test": "vitest run",
+		"test:coverage": "vitest run --coverage",
+		"test:watch": "vitest",
+		"storybook": "start-storybook -p 6006",
+		"build-storybook": "build-storybook"
+	},
+	"author": "Nils Twelker",
+	"maintainers": [
+		"Rijk van Zanten <rijkvanzanten@me.com>"
+	],
+	"dependencies": {
+		"lodash": "4.17.21",
+		"micromustache": "^8.0.3",
+		"vite": "2.9.9",
+		"vue": "3.2.37",
+		"vue-i18n": "9.1.10",
+		"vue-router": "4.0.15"
+	},
+	"peerDependencies": {
+		"vue": "3.2.37",
+		"@storybook/node-logger": ">=6.4.3"
+	},
+	"devDependencies": {
+		"@babel/core": "^7.17.9",
+		"@babel/preset-env": "7.16.11",
+		"@fortawesome/fontawesome-svg-core": "1.2.36",
+		"@fortawesome/free-brands-svg-icons": "5.15.4",
+		"@joeattardi/emoji-button": "^4.6.2",
+		"@mdx-js/react": "1.6.22",
+		"@popperjs/core": "2.10.2",
+		"@sindresorhus/slugify": "2.1.0",
+		"@storybook/addon-actions": "6.5.10",
+		"@storybook/addon-backgrounds": "6.5.10",
+		"@storybook/addon-docs": "6.5.10",
+		"@storybook/addon-essentials": "6.5.10",
+		"@storybook/addon-links": "6.5.10",
+		"@storybook/addon-measure": "6.5.10",
+		"@storybook/addon-outline": "6.5.10",
+		"@storybook/builder-vite": "^0.1.41",
+		"@storybook/client-api": "6.5.10",
+		"@storybook/client-logger": "6.5.10",
+		"@storybook/core-common": "6.5.10",
+		"@storybook/vue3": "6.5.10",
+		"@types/diacritics": "1.3.1",
+		"@types/lodash": "^4.14.182",
+		"@vitejs/plugin-vue": "2.3.3",
+		"@vitest/ui": "^0.22.0",
+		"@vue/compiler-sfc": "3.2.31",
+		"@vue/test-utils": "^2.0.2",
+		"babel-loader": "^8.2.4",
+		"c8": "^7.12.0",
+		"caret-pos": "2.0.0",
+		"css-loader": "^6.7.1",
+		"diacritics": "1.3.0",
+		"nanoid": "3.1.30",
+		"npm-run-all": "4.1.5",
+		"react": "16.14.0",
+		"react-dom": "16.14.0",
+		"rimraf": "3.0.2",
+		"sass-loader": "^13.0.2",
+		"style-loader": "^3.3.1",
+		"typescript": "4.5.2",
+		"vitest": "^0.18.1",
+		"vue-loader": "^16.8.3",
+		"vue-tsc": "^0.34.5",
+		"webpack": "5.72.0"
+	}
+}
diff --git a/packages/components/shim.d.ts b/packages/components/shim.d.ts
new file mode 100644
index 0000000000..34a8ce94e8
--- /dev/null
+++ b/packages/components/shim.d.ts
@@ -0,0 +1,6 @@
+declare module '*.vue' {
+	import { DefineComponent } from 'vue';
+	// eslint-disable-next-line @typescript-eslint/ban-types
+	const component: DefineComponent<{}, {}, any>;
+	export default component;
+}
diff --git a/packages/components/src/__utils__/focus.ts b/packages/components/src/__utils__/focus.ts
new file mode 100644
index 0000000000..d596a1f6d4
--- /dev/null
+++ b/packages/components/src/__utils__/focus.ts
@@ -0,0 +1,11 @@
+import { Directive } from 'vue';
+
+export const Focus: Directive = {
+	mounted(el, binding) {
+		if (binding.value) {
+			el.focus();
+		} else {
+			el.blur();
+		}
+	},
+};
diff --git a/packages/components/src/__utils__/router.ts b/packages/components/src/__utils__/router.ts
new file mode 100644
index 0000000000..60b421ab29
--- /dev/null
+++ b/packages/components/src/__utils__/router.ts
@@ -0,0 +1,9 @@
+import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
+
+export function generateRouter(routes: RouteRecordRaw[]) {
+	const router = createRouter({
+		history: createWebHistory(),
+		routes,
+	});
+	return router;
+}
diff --git a/packages/components/src/__utils__/tooltip.ts b/packages/components/src/__utils__/tooltip.ts
new file mode 100644
index 0000000000..3b877c438d
--- /dev/null
+++ b/packages/components/src/__utils__/tooltip.ts
@@ -0,0 +1,7 @@
+import { Directive } from 'vue';
+
+export const Tooltip: Directive = {
+	mounted() {
+		return undefined;
+	},
+};
diff --git a/packages/components/src/components/__snapshots__/V-tab.test.ts.snap b/packages/components/src/components/__snapshots__/V-tab.test.ts.snap
new file mode 100644
index 0000000000..7097a66509
--- /dev/null
+++ b/packages/components/src/components/__snapshots__/V-tab.test.ts.snap
@@ -0,0 +1,3 @@
+// Vitest Snapshot v1
+
+exports[`Mount component 1`] = `"<div class=\\"v-tab horizontal\\" data-v-964c7244=\\"\\">Slot Content</div>"`;
diff --git a/packages/components/src/components/__snapshots__/v-avatar.test.ts.snap b/packages/components/src/components/__snapshots__/v-avatar.test.ts.snap
new file mode 100644
index 0000000000..403bbed2ff
--- /dev/null
+++ b/packages/components/src/components/__snapshots__/v-avatar.test.ts.snap
@@ -0,0 +1,3 @@
+// Vitest Snapshot v1
+
+exports[`Mount component 1`] = `"<div class=\\"v-avatar\\" data-v-83da42c0=\\"\\">Slot Content</div>"`;
diff --git a/packages/components/src/components/__snapshots__/v-badge.test.ts.snap b/packages/components/src/components/__snapshots__/v-badge.test.ts.snap
new file mode 100644
index 0000000000..8284e52658
--- /dev/null
+++ b/packages/components/src/components/__snapshots__/v-badge.test.ts.snap
@@ -0,0 +1,3 @@
+// Vitest Snapshot v1
+
+exports[`Mount component 1`] = `"<div class=\\"v-badge\\" data-v-42b4e3ac=\\"\\"><span class=\\"badge\\" data-v-42b4e3ac=\\"\\"><span data-v-42b4e3ac=\\"\\"></span></span>Slot Content</div>"`;
diff --git a/packages/components/src/components/__snapshots__/v-breadcrumb.test.ts.snap b/packages/components/src/components/__snapshots__/v-breadcrumb.test.ts.snap
new file mode 100644
index 0000000000..366399d176
--- /dev/null
+++ b/packages/components/src/components/__snapshots__/v-breadcrumb.test.ts.snap
@@ -0,0 +1,3 @@
+// Vitest Snapshot v1
+
+exports[`Mount component 1`] = `"<span class=\\"v-breadcrumb\\" data-v-61eab8ca=\\"\\"><span class=\\"section\\" data-v-61eab8ca=\\"\\"><!--v-if--><router-link-stub to=\\"hi\\" class=\\"section-link\\" data-v-61eab8ca=\\"\\"></router-link-stub></span><span class=\\"section\\" data-v-61eab8ca=\\"\\"><v-icon-stub name=\\"chevron_right\\" small=\\"\\" data-v-61eab8ca=\\"\\"></v-icon-stub><router-link-stub to=\\"wow\\" class=\\"section-link\\" data-v-61eab8ca=\\"\\"></router-link-stub></span><span class=\\"section disabled\\" data-v-61eab8ca=\\"\\"><v-icon-stub name=\\"chevron_right\\" small=\\"\\" data-v-61eab8ca=\\"\\"></v-icon-stub><span class=\\"section-link\\" data-v-61eab8ca=\\"\\"><!--v-if--> Disabled</span></span></span>"`;
diff --git a/packages/components/src/components/__snapshots__/v-button.test.ts.snap b/packages/components/src/components/__snapshots__/v-button.test.ts.snap
new file mode 100644
index 0000000000..5a2f34c7e6
--- /dev/null
+++ b/packages/components/src/components/__snapshots__/v-button.test.ts.snap
@@ -0,0 +1,9 @@
+// Vitest Snapshot v1
+
+exports[`Mount component 1`] = `
+"<div class=\\"v-button\\" data-v-290ca00e=\\"\\"><button class=\\"button align-center normal\\" type=\\"button\\" disabled=\\"false\\" data-v-290ca00e=\\"\\"><span class=\\"content\\" data-v-290ca00e=\\"\\"></span>
+    <div class=\\"spinner\\" data-v-290ca00e=\\"\\">
+      <!--v-if-->
+    </div>
+  </button></div>"
+`;
diff --git a/packages/components/src/components/__snapshots__/v-card-actions.test.ts.snap b/packages/components/src/components/__snapshots__/v-card-actions.test.ts.snap
new file mode 100644
index 0000000000..d45465397c
--- /dev/null
+++ b/packages/components/src/components/__snapshots__/v-card-actions.test.ts.snap
@@ -0,0 +1,3 @@
+// Vitest Snapshot v1
+
+exports[`Mount component 1`] = `"<div class=\\"v-card-actions\\" data-v-f103ec72=\\"\\">Slot Content</div>"`;
diff --git a/packages/components/src/components/__snapshots__/v-card-subtitle.test.ts.snap b/packages/components/src/components/__snapshots__/v-card-subtitle.test.ts.snap
new file mode 100644
index 0000000000..a3c478ce9c
--- /dev/null
+++ b/packages/components/src/components/__snapshots__/v-card-subtitle.test.ts.snap
@@ -0,0 +1,3 @@
+// Vitest Snapshot v1
+
+exports[`Mount component 1`] = `"<div class=\\"v-card-subtitle\\" data-v-61aef43e=\\"\\">Slot Content</div>"`;
diff --git a/packages/components/src/components/__snapshots__/v-card-text.test.ts.snap b/packages/components/src/components/__snapshots__/v-card-text.test.ts.snap
new file mode 100644
index 0000000000..874551882f
--- /dev/null
+++ b/packages/components/src/components/__snapshots__/v-card-text.test.ts.snap
@@ -0,0 +1,3 @@
+// Vitest Snapshot v1
+
+exports[`Mount component 1`] = `"<div class=\\"v-card-text\\" data-v-028451d3=\\"\\">Slot Content</div>"`;
diff --git a/packages/components/src/components/__snapshots__/v-card-title.test.ts.snap b/packages/components/src/components/__snapshots__/v-card-title.test.ts.snap
new file mode 100644
index 0000000000..d538668103
--- /dev/null
+++ b/packages/components/src/components/__snapshots__/v-card-title.test.ts.snap
@@ -0,0 +1,3 @@
+// Vitest Snapshot v1
+
+exports[`Mount component 1`] = `"<div class=\\"v-card-title type-label\\" data-v-0f314222=\\"\\">Slot Content</div>"`;
diff --git a/packages/components/src/components/__snapshots__/v-card.test.ts.snap b/packages/components/src/components/__snapshots__/v-card.test.ts.snap
new file mode 100644
index 0000000000..930d3b6db6
--- /dev/null
+++ b/packages/components/src/components/__snapshots__/v-card.test.ts.snap
@@ -0,0 +1,3 @@
+// Vitest Snapshot v1
+
+exports[`Mount component 1`] = `"<div class=\\"v-card\\" data-v-1e90e497=\\"\\">Slot Content</div>"`;
diff --git a/packages/components/src/components/__snapshots__/v-checkbox.test.ts.snap b/packages/components/src/components/__snapshots__/v-checkbox.test.ts.snap
new file mode 100644
index 0000000000..fa21e3e7fb
--- /dev/null
+++ b/packages/components/src/components/__snapshots__/v-checkbox.test.ts.snap
@@ -0,0 +1,9 @@
+// Vitest Snapshot v1
+
+exports[`Mount component 1`] = `
+"<button class=\\"v-checkbox\\" type=\\"button\\" role=\\"checkbox\\" aria-pressed=\\"false\\" disabled=\\"false\\" data-v-d0be376c=\\"\\">
+  <!--v-if-->
+  <v-icon-stub class=\\"checkbox\\" name=\\"indeterminate_check_box\\" disabled=\\"false\\" data-v-d0be376c=\\"\\"></v-icon-stub><span class=\\"label type-text\\" data-v-d0be376c=\\"\\"><div>Hi</div></span>
+  <!--v-if-->
+</button>"
+`;
diff --git a/packages/components/src/components/__snapshots__/v-chip.test.ts.snap b/packages/components/src/components/__snapshots__/v-chip.test.ts.snap
new file mode 100644
index 0000000000..0020bbc8cc
--- /dev/null
+++ b/packages/components/src/components/__snapshots__/v-chip.test.ts.snap
@@ -0,0 +1,3 @@
+// Vitest Snapshot v1
+
+exports[`Mount component 1`] = `"<span class=\\"v-chip label\\" data-v-fbac005a=\\"\\"><span class=\\"chip-content\\" data-v-fbac005a=\\"\\"><!--v-if--></span></span>"`;
diff --git a/packages/components/src/components/__snapshots__/v-divider.test.ts.snap b/packages/components/src/components/__snapshots__/v-divider.test.ts.snap
new file mode 100644
index 0000000000..1b2d3b04e9
--- /dev/null
+++ b/packages/components/src/components/__snapshots__/v-divider.test.ts.snap
@@ -0,0 +1,7 @@
+// Vitest Snapshot v1
+
+exports[`Mount component 1`] = `
+"<div class=\\"v-divider inlineTitle\\" data-v-cb64903c=\\"\\"><span class=\\"wrapper\\" data-v-cb64903c=\\"\\"><span class=\\"type-text\\" data-v-cb64903c=\\"\\">Default slot</span></span>
+  <hr role=\\"separator\\" aria-orientation=\\"horizontal\\" data-v-cb64903c=\\"\\">
+</div>"
+`;
diff --git a/packages/components/src/components/__snapshots__/v-fancy-select.test.ts.snap b/packages/components/src/components/__snapshots__/v-fancy-select.test.ts.snap
new file mode 100644
index 0000000000..73379dff11
--- /dev/null
+++ b/packages/components/src/components/__snapshots__/v-fancy-select.test.ts.snap
@@ -0,0 +1,39 @@
+// Vitest Snapshot v1
+
+exports[`Mount component 1`] = `
+"<div class=\\"v-fancy-select\\" data-v-6904cf07=\\"\\">
+  <transition-group-stub data-v-6904cf07=\\"\\">
+    <div class=\\"v-fancy-select-option\\" data-v-6904cf07=\\"\\">
+      <div class=\\"icon\\" data-v-6904cf07=\\"\\">
+        <v-icon-stub name=\\"person\\" data-v-6904cf07=\\"\\"></v-icon-stub>
+      </div>
+      <div class=\\"content\\" data-v-6904cf07=\\"\\">
+        <div class=\\"text\\" data-v-6904cf07=\\"\\">Person</div>
+        <div class=\\"description\\" data-v-6904cf07=\\"\\"></div>
+      </div>
+      <!--v-if-->
+    </div>
+    <div class=\\"v-fancy-select-option\\" style=\\"--index: 1;\\" data-v-6904cf07=\\"\\">
+      <div class=\\"icon\\" data-v-6904cf07=\\"\\">
+        <v-icon-stub name=\\"directions_car\\" data-v-6904cf07=\\"\\"></v-icon-stub>
+      </div>
+      <div class=\\"content\\" data-v-6904cf07=\\"\\">
+        <div class=\\"text\\" data-v-6904cf07=\\"\\">Car</div>
+        <div class=\\"description\\" data-v-6904cf07=\\"\\"></div>
+      </div>
+      <!--v-if-->
+    </div>
+    <v-divider-stub data-v-6904cf07=\\"\\"></v-divider-stub>
+    <div class=\\"v-fancy-select-option\\" style=\\"--index: 3;\\" data-v-6904cf07=\\"\\">
+      <div class=\\"icon\\" data-v-6904cf07=\\"\\">
+        <v-icon-stub name=\\"home\\" data-v-6904cf07=\\"\\"></v-icon-stub>
+      </div>
+      <div class=\\"content\\" data-v-6904cf07=\\"\\">
+        <div class=\\"text\\" data-v-6904cf07=\\"\\">Home</div>
+        <div class=\\"description\\" data-v-6904cf07=\\"\\">A home is a nice place</div>
+      </div>
+      <!--v-if-->
+    </div>
+  </transition-group-stub>
+</div>"
+`;
diff --git a/packages/components/src/components/__snapshots__/v-highlight.test.ts.snap b/packages/components/src/components/__snapshots__/v-highlight.test.ts.snap
new file mode 100644
index 0000000000..7c27a7c715
--- /dev/null
+++ b/packages/components/src/components/__snapshots__/v-highlight.test.ts.snap
@@ -0,0 +1,10 @@
+// Vitest Snapshot v1
+
+exports[`Mount component 1`] = `
+"Th
+<mark class=\\"highlight\\" data-v-aec7f886=\\"\\">is</mark>
+
+<mark class=\\"highlight\\" data-v-aec7f886=\\"\\">is</mark>
+ a nice
+<mark class=\\"highlight\\" data-v-aec7f886=\\"\\">text</mark>"
+`;
diff --git a/packages/components/src/components/__snapshots__/v-hover.test.ts.snap b/packages/components/src/components/__snapshots__/v-hover.test.ts.snap
new file mode 100644
index 0000000000..7fdd964bd6
--- /dev/null
+++ b/packages/components/src/components/__snapshots__/v-hover.test.ts.snap
@@ -0,0 +1,3 @@
+// Vitest Snapshot v1
+
+exports[`Mount component 1`] = `"<div>hidden</div>"`;
diff --git a/packages/components/src/components/__snapshots__/v-icon-file.test.ts.snap b/packages/components/src/components/__snapshots__/v-icon-file.test.ts.snap
new file mode 100644
index 0000000000..b28a5060a5
--- /dev/null
+++ b/packages/components/src/components/__snapshots__/v-icon-file.test.ts.snap
@@ -0,0 +1,7 @@
+// Vitest Snapshot v1
+
+exports[`Mount component 1`] = `
+"<div class=\\"icon\\" data-v-f5b5f14e=\\"\\">
+  <v-icon-stub name=\\"insert_drive_file\\" data-v-f5b5f14e=\\"\\"></v-icon-stub><span class=\\"label\\" data-v-f5b5f14e=\\"\\">png</span>
+</div>"
+`;
diff --git a/packages/components/src/components/__snapshots__/v-info.test.ts.snap b/packages/components/src/components/__snapshots__/v-info.test.ts.snap
new file mode 100644
index 0000000000..7eab18fae3
--- /dev/null
+++ b/packages/components/src/components/__snapshots__/v-info.test.ts.snap
@@ -0,0 +1,11 @@
+// Vitest Snapshot v1
+
+exports[`Mount component 1`] = `
+"<div class=\\"v-info info\\" data-v-29a9cf35=\\"\\">
+  <div class=\\"icon\\" data-v-29a9cf35=\\"\\">
+    <v-icon-stub large=\\"\\" name=\\"box\\" outline=\\"\\" data-v-29a9cf35=\\"\\"></v-icon-stub>
+  </div>
+  <h2 class=\\"title type-title\\" data-v-29a9cf35=\\"\\">This is an info</h2>
+  <p class=\\"content\\" data-v-29a9cf35=\\"\\">content</p>
+</div>"
+`;
diff --git a/packages/components/src/components/__snapshots__/v-input.test.ts.snap b/packages/components/src/components/__snapshots__/v-input.test.ts.snap
new file mode 100644
index 0000000000..4bf5218957
--- /dev/null
+++ b/packages/components/src/components/__snapshots__/v-input.test.ts.snap
@@ -0,0 +1,15 @@
+// Vitest Snapshot v1
+
+exports[`Mount component 1`] = `
+"<div class=\\"v-input full-width\\" data-v-2a853453=\\"\\">
+  <!--v-if-->
+  <div class=\\"input\\" data-v-2a853453=\\"\\">
+    <!--v-if-->
+    <!--v-if--><input autocomplete=\\"off\\" type=\\"text\\" step=\\"1\\" data-v-2a853453=\\"\\">
+    <!--v-if-->
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+  <!--v-if-->
+</div>"
+`;
diff --git a/packages/components/src/components/__snapshots__/v-menu.test.ts.snap b/packages/components/src/components/__snapshots__/v-menu.test.ts.snap
new file mode 100644
index 0000000000..5ec3dec128
--- /dev/null
+++ b/packages/components/src/components/__snapshots__/v-menu.test.ts.snap
@@ -0,0 +1,9 @@
+// Vitest Snapshot v1
+
+exports[`Mount component 1`] = `
+"<div class=\\"v-menu\\" data-v-09dc8134=\\"\\">
+  <div class=\\"v-menu-activator\\" data-v-09dc8134=\\"\\"></div>
+  <!--teleport start-->
+  <!--teleport end-->
+</div>"
+`;
diff --git a/packages/components/src/components/__snapshots__/v-notice.test.ts.snap b/packages/components/src/components/__snapshots__/v-notice.test.ts.snap
new file mode 100644
index 0000000000..f0a5084643
--- /dev/null
+++ b/packages/components/src/components/__snapshots__/v-notice.test.ts.snap
@@ -0,0 +1,7 @@
+// Vitest Snapshot v1
+
+exports[`Mount component 1`] = `
+"<div class=\\"v-notice normal\\" data-v-eb1a46c2=\\"\\">
+  <v-icon-stub name=\\"info\\" left=\\"\\" data-v-eb1a46c2=\\"\\"></v-icon-stub>
+</div>"
+`;
diff --git a/packages/components/src/components/__snapshots__/v-overlay.test.ts.snap b/packages/components/src/components/__snapshots__/v-overlay.test.ts.snap
new file mode 100644
index 0000000000..3231e7134e
--- /dev/null
+++ b/packages/components/src/components/__snapshots__/v-overlay.test.ts.snap
@@ -0,0 +1,8 @@
+// Vitest Snapshot v1
+
+exports[`Mount component 1`] = `
+"<div class=\\"v-overlay active has-click\\" data-v-520714ce=\\"\\">
+  <div class=\\"overlay\\" data-v-520714ce=\\"\\"></div>
+  <div class=\\"content\\" data-v-520714ce=\\"\\">Slot Content</div>
+</div>"
+`;
diff --git a/packages/components/src/components/__snapshots__/v-pagination.test.ts.snap b/packages/components/src/components/__snapshots__/v-pagination.test.ts.snap
new file mode 100644
index 0000000000..fbb96fcc7f
--- /dev/null
+++ b/packages/components/src/components/__snapshots__/v-pagination.test.ts.snap
@@ -0,0 +1,18 @@
+// Vitest Snapshot v1
+
+exports[`Mount component 1`] = `
+"<div class=\\"v-pagination\\" data-v-57411ce1=\\"\\">
+  <v-button-stub class=\\"previous\\" disabled=\\"false\\" secondary=\\"\\" icon=\\"\\" small=\\"\\" data-v-57411ce1=\\"\\"></v-button-stub>
+  <!--v-if-->
+  <!--v-if-->
+  <v-button-stub class=\\"page\\" secondary=\\"\\" small=\\"\\" disabled=\\"false\\" data-v-57411ce1=\\"\\"></v-button-stub>
+  <v-button-stub class=\\"page\\" secondary=\\"\\" small=\\"\\" disabled=\\"false\\" data-v-57411ce1=\\"\\"></v-button-stub>
+  <v-button-stub class=\\"page\\" secondary=\\"\\" small=\\"\\" disabled=\\"false\\" data-v-57411ce1=\\"\\"></v-button-stub>
+  <v-button-stub class=\\"active page\\" secondary=\\"\\" small=\\"\\" disabled=\\"false\\" data-v-57411ce1=\\"\\"></v-button-stub>
+  <v-button-stub class=\\"page\\" secondary=\\"\\" small=\\"\\" disabled=\\"false\\" data-v-57411ce1=\\"\\"></v-button-stub>
+  <v-button-stub class=\\"page\\" secondary=\\"\\" small=\\"\\" disabled=\\"false\\" data-v-57411ce1=\\"\\"></v-button-stub>
+  <!--v-if-->
+  <!--v-if-->
+  <v-button-stub class=\\"next\\" disabled=\\"false\\" secondary=\\"\\" icon=\\"\\" small=\\"\\" data-v-57411ce1=\\"\\"></v-button-stub>
+</div>"
+`;
diff --git a/packages/components/src/components/__snapshots__/v-progress-circular.test.ts.snap b/packages/components/src/components/__snapshots__/v-progress-circular.test.ts.snap
new file mode 100644
index 0000000000..410d358a8e
--- /dev/null
+++ b/packages/components/src/components/__snapshots__/v-progress-circular.test.ts.snap
@@ -0,0 +1,8 @@
+// Vitest Snapshot v1
+
+exports[`Mount component 1`] = `
+"<div class=\\"v-progress-circular\\" data-v-5e88a2c8=\\"\\"><svg class=\\"circle\\" viewBox=\\"0 0 30 30\\" data-v-5e88a2c8=\\"\\">
+    <path class=\\"circle-background\\" d=\\"M12.5,0A12.5,12.5,0,1,1,0,12.5,12.5,12.5,0,0,1,12.5,0Z\\" transform=\\"translate(2.5 2.5)\\" data-v-5e88a2c8=\\"\\"></path>
+    <path class=\\"circle-path\\" style=\\"stroke-dasharray: 0, 78.5;\\" d=\\"M12.5,0A12.5,12.5,0,1,1,0,12.5,12.5,12.5,0,0,1,12.5,0Z\\" transform=\\"translate(2.5 2.5)\\" data-v-5e88a2c8=\\"\\"></path>
+  </svg>Slot Content</div>"
+`;
diff --git a/packages/components/src/components/__snapshots__/v-progress-linear.test.ts.snap b/packages/components/src/components/__snapshots__/v-progress-linear.test.ts.snap
new file mode 100644
index 0000000000..0f9d6b2584
--- /dev/null
+++ b/packages/components/src/components/__snapshots__/v-progress-linear.test.ts.snap
@@ -0,0 +1,7 @@
+// Vitest Snapshot v1
+
+exports[`Mount component 1`] = `
+"<div class=\\"v-progress-linear danger\\" data-v-7eeceee4=\\"\\">
+  <div class=\\"inner\\" style=\\"width: 0%;\\" data-v-7eeceee4=\\"\\"></div>Slot Content
+</div>"
+`;
diff --git a/packages/components/src/components/__snapshots__/v-radio.test.ts.snap b/packages/components/src/components/__snapshots__/v-radio.test.ts.snap
new file mode 100644
index 0000000000..5af020dc39
--- /dev/null
+++ b/packages/components/src/components/__snapshots__/v-radio.test.ts.snap
@@ -0,0 +1,7 @@
+// Vitest Snapshot v1
+
+exports[`Mount component 1`] = `
+"<button class=\\"v-radio\\" type=\\"button\\" aria-pressed=\\"false\\" disabled=\\"false\\" data-v-ea1b1ff8=\\"\\">
+  <v-icon-stub name=\\"radio_button_unchecked\\" data-v-ea1b1ff8=\\"\\"></v-icon-stub><span class=\\"label type-text\\" data-v-ea1b1ff8=\\"\\">My Label</span>
+</button>"
+`;
diff --git a/packages/components/src/components/__snapshots__/v-sheet.test.ts.snap b/packages/components/src/components/__snapshots__/v-sheet.test.ts.snap
new file mode 100644
index 0000000000..138cb1f1d9
--- /dev/null
+++ b/packages/components/src/components/__snapshots__/v-sheet.test.ts.snap
@@ -0,0 +1,3 @@
+// Vitest Snapshot v1
+
+exports[`Mount component 1`] = `"<div class=\\"v-sheet\\" data-v-24b86768=\\"\\">Slot Content</div>"`;
diff --git a/packages/components/src/components/__snapshots__/v-skeleton-loader.test.ts.snap b/packages/components/src/components/__snapshots__/v-skeleton-loader.test.ts.snap
new file mode 100644
index 0000000000..15f1a67797
--- /dev/null
+++ b/packages/components/src/components/__snapshots__/v-skeleton-loader.test.ts.snap
@@ -0,0 +1,8 @@
+// Vitest Snapshot v1
+
+exports[`Mount component 1`] = `
+"<div class=\\"list-item-icon v-skeleton-loader\\" data-v-499e8f48=\\"\\">
+  <div class=\\"icon\\" data-v-499e8f48=\\"\\"></div>
+  <div class=\\"text\\" data-v-499e8f48=\\"\\"></div>
+</div>"
+`;
diff --git a/packages/components/src/components/__snapshots__/v-slider.test.ts.snap b/packages/components/src/components/__snapshots__/v-slider.test.ts.snap
new file mode 100644
index 0000000000..586262255c
--- /dev/null
+++ b/packages/components/src/components/__snapshots__/v-slider.test.ts.snap
@@ -0,0 +1,13 @@
+// Vitest Snapshot v1
+
+exports[`Mount component 1`] = `
+"<div class=\\"v-slider\\" data-v-18099228=\\"\\">
+  <!--v-if-->
+  <div class=\\"slider\\" data-v-18099228=\\"\\"><input type=\\"range\\" max=\\"100\\" min=\\"0\\" step=\\"1\\" data-v-18099228=\\"\\">
+    <div class=\\"fill\\" data-v-18099228=\\"\\"></div>
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+  <!--v-if-->
+</div>"
+`;
diff --git a/packages/components/src/components/__snapshots__/v-tabs.test.ts.snap b/packages/components/src/components/__snapshots__/v-tabs.test.ts.snap
new file mode 100644
index 0000000000..bdade78597
--- /dev/null
+++ b/packages/components/src/components/__snapshots__/v-tabs.test.ts.snap
@@ -0,0 +1,3 @@
+// Vitest Snapshot v1
+
+exports[`Mount component 1`] = `"<div class=\\"v-tabs horizontal\\" data-v-2bea93f6=\\"\\">Some value</div>"`;
diff --git a/packages/components/src/components/__snapshots__/v-text-overflow.test.ts.snap b/packages/components/src/components/__snapshots__/v-text-overflow.test.ts.snap
new file mode 100644
index 0000000000..5fe99fdf06
--- /dev/null
+++ b/packages/components/src/components/__snapshots__/v-text-overflow.test.ts.snap
@@ -0,0 +1,3 @@
+// Vitest Snapshot v1
+
+exports[`Mount component 1`] = `"<div class=\\"v-text-overflow\\" data-v-6410b7aa=\\"\\">My text</div>"`;
diff --git a/packages/components/src/components/__snapshots__/v-textarea.test.ts.snap b/packages/components/src/components/__snapshots__/v-textarea.test.ts.snap
new file mode 100644
index 0000000000..71a67a5eba
--- /dev/null
+++ b/packages/components/src/components/__snapshots__/v-textarea.test.ts.snap
@@ -0,0 +1,8 @@
+// Vitest Snapshot v1
+
+exports[`Mount component 1`] = `
+"<div class=\\"v-textarea full-width has-content\\" data-v-f9fe277e=\\"\\">
+  <!--v-if--><textarea data-v-f9fe277e=\\"\\"></textarea>
+  <!--v-if-->
+</div>"
+`;
diff --git a/packages/components/src/components/__snapshots__/v-workspace-tile.test.ts.snap b/packages/components/src/components/__snapshots__/v-workspace-tile.test.ts.snap
new file mode 100644
index 0000000000..6fb2a31432
--- /dev/null
+++ b/packages/components/src/components/__snapshots__/v-workspace-tile.test.ts.snap
@@ -0,0 +1,18 @@
+// Vitest Snapshot v1
+
+exports[`Mount component 1`] = `
+"<div class=\\"v-workspace-tile draggable br-tl br-tr br-br br-bl\\" style=\\"--pos-x: 1; --pos-y: 1; --width: 10; --height: 10;\\" data-move=\\"\\" data-v-5fcd0cad=\\"\\">
+  <div class=\\"header\\" data-v-5fcd0cad=\\"\\">
+    <v-icon-stub class=\\"icon\\" style=\\"--v-icon-color: var(--primary);\\" name=\\"space_dashboard\\" small=\\"\\" data-v-5fcd0cad=\\"\\"></v-icon-stub>
+    <v-text-overflow-stub class=\\"name\\" text=\\"\\" data-v-5fcd0cad=\\"\\"></v-text-overflow-stub>
+    <div class=\\"spacer\\" data-v-5fcd0cad=\\"\\"></div>
+    <!--v-if-->
+  </div>
+  <!--v-if-->
+  <div class=\\"resize-details\\" data-v-5fcd0cad=\\"\\"> (0:0) 10×10</div>
+  <!--v-if-->
+  <div class=\\"tile-content has-header\\" data-v-5fcd0cad=\\"\\">
+    <!--v-if-->
+  </div>
+</div>"
+`;
diff --git a/packages/components/src/components/__snapshots__/v-workspace.test.ts.snap b/packages/components/src/components/__snapshots__/v-workspace.test.ts.snap
new file mode 100644
index 0000000000..afc3d6d502
--- /dev/null
+++ b/packages/components/src/components/__snapshots__/v-workspace.test.ts.snap
@@ -0,0 +1,10 @@
+// Vitest Snapshot v1
+
+exports[`Mount component 1`] = `
+"<div class=\\"v-workspace\\" style=\\"width: 480px; height: 280px;\\" data-v-9d2ce9c4=\\"\\">
+  <div class=\\"workspace\\" style=\\"transform: scale(1); width: 480px; height: 280px;\\" data-v-9d2ce9c4=\\"\\">
+    <v-workspace-tile-stub id=\\"1\\" x=\\"1\\" y=\\"1\\" width=\\"10\\" height=\\"10\\" name=\\"My Tile 1\\" edit-mode=\\"false\\" resizable=\\"true\\" data-v-9d2ce9c4=\\"\\"></v-workspace-tile-stub>
+    <v-workspace-tile-stub id=\\"2\\" x=\\"15\\" y=\\"5\\" width=\\"10\\" height=\\"10\\" name=\\"My Tile 2\\" edit-mode=\\"false\\" resizable=\\"true\\" data-v-9d2ce9c4=\\"\\"></v-workspace-tile-stub>
+  </div>
+</div>"
+`;
diff --git a/app/src/components/transition/bounce/transition-bounce.vue b/packages/components/src/components/transition/bounce.vue
similarity index 100%
rename from app/src/components/transition/bounce/transition-bounce.vue
rename to packages/components/src/components/transition/bounce.vue
diff --git a/app/src/components/transition/dialog/transition-dialog.vue b/packages/components/src/components/transition/dialog.vue
similarity index 100%
rename from app/src/components/transition/dialog/transition-dialog.vue
rename to packages/components/src/components/transition/dialog.vue
diff --git a/app/src/components/transition/expand/transition-expand-methods.ts b/packages/components/src/components/transition/expand-methods.ts
similarity index 94%
rename from app/src/components/transition/expand/transition-expand-methods.ts
rename to packages/components/src/components/transition/expand-methods.ts
index c028b67614..bc87aed5a8 100644
--- a/app/src/components/transition/expand/transition-expand-methods.ts
+++ b/packages/components/src/components/transition/expand-methods.ts
@@ -1,4 +1,4 @@
-import { capitalizeFirst } from '@/utils/capitalize-first';
+import { capitalize } from 'lodash';
 
 interface HTMLExpandElement extends HTMLElement {
 	_parent?: (Node & ParentNode & HTMLElement) | null;
@@ -20,7 +20,7 @@ export default function (
 	) => void
 ): Record<string, any> {
 	const sizeProperty = xAxis ? 'width' : ('height' as 'width' | 'height');
-	const offsetProperty = `offset${capitalizeFirst(sizeProperty)}` as 'offsetHeight' | 'offsetWidth';
+	const offsetProperty = `offset${capitalize(sizeProperty)}` as 'offsetHeight' | 'offsetWidth';
 
 	return {
 		beforeEnter(el: HTMLExpandElement) {
diff --git a/packages/components/src/components/transition/expand.vue b/packages/components/src/components/transition/expand.vue
new file mode 100644
index 0000000000..84ed135f67
--- /dev/null
+++ b/packages/components/src/components/transition/expand.vue
@@ -0,0 +1,33 @@
+<template>
+	<transition name="expand-transition" mode="in-out" v-on="methods">
+		<slot />
+	</transition>
+</template>
+
+<script setup lang="ts">
+import ExpandMethods from './expand-methods';
+
+interface Props {
+	/** Expand on the horizontal instead vertical axis */
+	xAxis?: boolean;
+	/** Add a custom class to the element that is expanded */
+	expandedParentClass?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	xAxis: false,
+	expandedParentClass: '',
+});
+
+const emit = defineEmits([
+	'beforeEnter',
+	'enter',
+	'afterEnter',
+	'enterCancelled',
+	'leave',
+	'afterLeave',
+	'leaveCancelled',
+]);
+
+const methods = ExpandMethods(props.expandedParentClass, props.xAxis, emit);
+</script>
diff --git a/packages/components/src/components/v-avatar.test.ts b/packages/components/src/components/v-avatar.test.ts
new file mode 100644
index 0000000000..2bc12304cc
--- /dev/null
+++ b/packages/components/src/components/v-avatar.test.ts
@@ -0,0 +1,36 @@
+import { test, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import VAvatar from './v-avatar.vue';
+
+test('Mount component', () => {
+	expect(VAvatar).toBeTruthy();
+
+	const wrapper = mount(VAvatar, {
+		slots: {
+			default: 'Slot Content',
+		},
+	});
+
+	expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('tile prop', () => {
+	const wrapper = mount(VAvatar, {
+		props: {
+			tile: true,
+		},
+	});
+
+	expect(wrapper.classes()).toContain('tile');
+});
+
+test('small prop', () => {
+	const wrapper = mount(VAvatar, {
+		props: {
+			small: true,
+		},
+	});
+
+	expect(wrapper.classes()).toContain('small');
+});
diff --git a/app/src/components/v-avatar.vue b/packages/components/src/components/v-avatar.vue
similarity index 64%
rename from app/src/components/v-avatar.vue
rename to packages/components/src/components/v-avatar.vue
index d467cfb46f..0a01da2665 100644
--- a/app/src/components/v-avatar.vue
+++ b/packages/components/src/components/v-avatar.vue
@@ -4,27 +4,27 @@
 	</div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { useSizeClass, sizeProps } from '@/composables/use-size-class';
+<script setup lang="ts">
+import { useSizeClass } from '@directus/shared/composables';
 
-export default defineComponent({
-	props: {
-		size: {
-			type: Number,
-			default: null,
-		},
-		tile: {
-			type: Boolean,
-			default: false,
-		},
-		...sizeProps,
-	},
-	setup(props) {
-		const sizeClass = useSizeClass(props);
-		return { sizeClass };
-	},
+interface Props {
+	/** Render as a tile (square) */
+	tile?: boolean;
+	/** Renders a smaller avatar */
+	xSmall?: boolean;
+	/** Renders a small avatar */
+	small?: boolean;
+	/** Renders a large avatar */
+	large?: boolean;
+	/** Renders a larger avatar */
+	xLarge?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	tile: false,
 });
+
+const sizeClass = useSizeClass(props);
 </script>
 
 <style>
diff --git a/packages/components/src/components/v-badge.test.ts b/packages/components/src/components/v-badge.test.ts
new file mode 100644
index 0000000000..0bc814a18e
--- /dev/null
+++ b/packages/components/src/components/v-badge.test.ts
@@ -0,0 +1,60 @@
+import { test, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import VBadge from './v-badge.vue';
+import { GlobalMountOptions } from '@vue/test-utils/dist/types';
+
+const global: GlobalMountOptions = {
+	stubs: ['v-icon'],
+};
+
+test('Mount component', () => {
+	expect(VBadge).toBeTruthy();
+
+	const wrapper = mount(VBadge, {
+		slots: {
+			default: 'Slot Content',
+		},
+		global,
+	});
+
+	expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('dot and bordered prop', () => {
+	const wrapper = mount(VBadge, {
+		props: {
+			dot: true,
+			bordered: true,
+		},
+		global,
+	});
+
+	expect(wrapper.classes()).toContain('dot');
+	expect(wrapper.classes()).toContain('bordered');
+	expect(wrapper.get('span').classes()).toContain('bordered');
+	expect(wrapper.get('span').classes()).toContain('dot');
+});
+
+test('icon prop', () => {
+	const wrapper = mount(VBadge, {
+		props: {
+			icon: 'close',
+		},
+		global,
+	});
+
+	expect(wrapper.get('v-icon-stub').attributes().name).toBe('close');
+});
+
+test('value prop', () => {
+	const wrapper = mount(VBadge, {
+		props: {
+			value: 'My Badge',
+		},
+		global,
+	});
+
+	expect(wrapper.find('span.badge span').exists()).toBeTruthy();
+	expect(wrapper.find('span.badge span').text()).toBe('My Badge');
+});
diff --git a/app/src/components/v-badge.vue b/packages/components/src/components/v-badge.vue
similarity index 70%
rename from app/src/components/v-badge.vue
rename to packages/components/src/components/v-badge.vue
index d2b59744f1..726e7b7728 100644
--- a/app/src/components/v-badge.vue
+++ b/packages/components/src/components/v-badge.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="v-badge" :class="{ dot, bordered }">
 		<span v-if="!disabled" class="badge" :class="{ dot, bordered, left, bottom }">
-			<v-icon v-if="icon" :name="icon" :color="color" x-small />
+			<v-icon v-if="icon" :name="icon" x-small />
 			<span v-else>{{ value }}</span>
 		</span>
 
@@ -9,40 +9,32 @@
 	</div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
+interface Props {
+	/** The value that will be displayed inside the badge Only 2 characters allowed) */
+	value?: string | number | boolean | null;
+	/** Only will show a small dot without any content */
+	dot?: boolean;
+	/** Aligns the badge on the left side */
+	left?: boolean;
+	/** Aligns the badge on the bottom side */
+	bottom?: boolean;
+	/** Shows an icon instead of text */
+	icon?: string | null;
+	/** Shows a border around the badge */
+	bordered?: boolean;
+	/** Hide the badge */
+	disabled?: boolean;
+}
 
-export default defineComponent({
-	props: {
-		value: {
-			type: [Boolean, String, Number],
-			default: null,
-		},
-		dot: {
-			type: Boolean,
-			default: false,
-		},
-		left: {
-			type: Boolean,
-			default: false,
-		},
-		bottom: {
-			type: Boolean,
-			default: false,
-		},
-		icon: {
-			type: String,
-			default: null,
-		},
-		bordered: {
-			type: Boolean,
-			default: false,
-		},
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-	},
+withDefaults(defineProps<Props>(), {
+	value: null,
+	dot: false,
+	left: false,
+	bottom: false,
+	icon: null,
+	bordered: false,
+	disabled: false,
 });
 </script>
 
diff --git a/packages/components/src/components/v-breadcrumb.test.ts b/packages/components/src/components/v-breadcrumb.test.ts
new file mode 100644
index 0000000000..2ba20d0d38
--- /dev/null
+++ b/packages/components/src/components/v-breadcrumb.test.ts
@@ -0,0 +1,37 @@
+import { test, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import VBreadcrumb from './v-breadcrumb.vue';
+import { GlobalMountOptions } from '@vue/test-utils/dist/types';
+
+const global: GlobalMountOptions = {
+	stubs: ['v-icon', 'router-link'],
+};
+
+test('Mount component', () => {
+	expect(VBreadcrumb).toBeTruthy();
+
+	const wrapper = mount(VBreadcrumb, {
+		props: {
+			items: [
+				{
+					to: 'hi',
+					name: 'Hi',
+				},
+				{
+					to: 'wow',
+					name: 'Wow',
+					icon: 'close',
+				},
+				{
+					to: 'disabled',
+					name: 'Disabled',
+					disabled: true,
+				},
+			],
+		},
+		global,
+	});
+
+	expect(wrapper.html()).toMatchSnapshot();
+});
diff --git a/app/src/components/v-breadcrumb.vue b/packages/components/src/components/v-breadcrumb.vue
similarity index 87%
rename from app/src/components/v-breadcrumb.vue
rename to packages/components/src/components/v-breadcrumb.vue
index 7c2c3a1f3d..f209e46cd7 100644
--- a/app/src/components/v-breadcrumb.vue
+++ b/packages/components/src/components/v-breadcrumb.vue
@@ -14,25 +14,21 @@
 	</span>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
-
+<script setup lang="ts">
 interface Breadcrumb {
 	to: string;
 	name: string;
 	disabled?: boolean;
+	icon?: string;
 }
 
-export default defineComponent({
-	props: {
-		items: {
-			type: Array as PropType<Breadcrumb[]>,
-			default: () => [],
-		},
-	},
-	setup() {
-		return {};
-	},
+interface Props {
+	/** An array of objects which information about each section */
+	items?: Breadcrumb[];
+}
+
+withDefaults(defineProps<Props>(), {
+	items: () => [],
 });
 </script>
 
diff --git a/packages/components/src/components/v-button.test.ts b/packages/components/src/components/v-button.test.ts
new file mode 100644
index 0000000000..cc40959327
--- /dev/null
+++ b/packages/components/src/components/v-button.test.ts
@@ -0,0 +1,60 @@
+import { test, expect, beforeEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import VButton from './v-button.vue';
+import { h } from 'vue';
+import { generateRouter } from '@/__utils__/router';
+import { Router } from 'vue-router';
+import { GlobalMountOptions } from '@vue/test-utils/dist/types';
+import { Focus } from '@/__utils__/focus';
+
+let router: Router;
+
+let global: GlobalMountOptions;
+
+beforeEach(async () => {
+	router = generateRouter([
+		{
+			path: '/',
+			component: h('div', VButton),
+		},
+		{
+			path: '/test',
+			component: h('div', 'empty'),
+		},
+	]);
+	router.push('/');
+	await router.isReady();
+
+	global = {
+		stubs: ['v-progress-circular'],
+		directives: {
+			focus: Focus,
+		},
+		plugins: [router],
+	};
+});
+
+test('Mount component', () => {
+	expect(VButton).toBeTruthy();
+
+	const wrapper = mount(VButton, {
+		global,
+	});
+
+	expect(wrapper.html()).toMatchSnapshot();
+});
+
+// test('Click on link', async () => {
+// 	const wrapper = mount(VButton, {
+//         props: {
+//             to: '/test'
+//         },
+// 		global
+// 	});
+
+//     await wrapper.get('a').trigger('click')
+
+//     expect(router.currentRoute.value.path).toBe('/test')
+
+// });
diff --git a/app/src/components/v-button.vue b/packages/components/src/components/v-button.vue
similarity index 65%
rename from app/src/components/v-button.vue
rename to packages/components/src/components/v-button.vue
index 77139c278b..7584638f4c 100644
--- a/app/src/components/v-button.vue
+++ b/packages/components/src/components/v-button.vue
@@ -38,169 +38,152 @@
 	</div>
 </template>
 
-<script lang="ts">
-import { defineComponent, computed, PropType } from 'vue';
+<script setup lang="ts">
+import { computed } from 'vue';
 import { RouteLocation, useRoute, useLink } from 'vue-router';
-import { useSizeClass, sizeProps } from '@/composables/use-size-class';
-import { useGroupable } from '@/composables/use-groupable';
-import { notEmpty } from '@/utils/is-empty';
-import { isEqual } from 'lodash';
+import { useSizeClass, useGroupable } from '@directus/shared/composables';
+import { isEqual, isNil } from 'lodash';
 
-export default defineComponent({
-	props: {
-		autofocus: {
-			type: Boolean,
-			default: false,
-		},
-		kind: {
-			type: String as PropType<'normal' | 'info' | 'success' | 'warning' | 'danger'>,
-			default: 'normal',
-		},
-		fullWidth: {
-			type: Boolean,
-			default: false,
-		},
-		rounded: {
-			type: Boolean,
-			default: false,
-		},
-		outlined: {
-			type: Boolean,
-			default: false,
-		},
-		icon: {
-			type: Boolean,
-			default: false,
-		},
-		type: {
-			type: String,
-			default: 'button',
-		},
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-		loading: {
-			type: Boolean,
-			default: false,
-		},
-		to: {
-			type: [String, Object] as PropType<string | RouteLocation>,
-			default: '',
-		},
-		href: {
-			type: String,
-			default: undefined,
-		},
-		active: {
-			type: Boolean,
-			default: undefined,
-		},
-		exact: {
-			type: Boolean,
-			default: false,
-		},
-		query: {
-			type: Boolean,
-			default: false,
-		},
-		secondary: {
-			type: Boolean,
-			default: false,
-		},
-		warning: {
-			type: Boolean,
-			default: false,
-		},
-		danger: {
-			type: Boolean,
-			default: false,
-		},
-		value: {
-			type: [Number, String],
-			default: undefined,
-		},
-		dashed: {
-			type: Boolean,
-			default: false,
-		},
-		tile: {
-			type: Boolean,
-			default: false,
-		},
-		align: {
-			type: String,
-			default: 'center',
-			validator: (val: string) => ['left', 'center', 'right'].includes(val),
-		},
-		download: {
-			type: String,
-			default: undefined,
-		},
-		...sizeProps,
-	},
-	emits: ['click'],
-	setup(props, { emit }) {
-		const route = useRoute();
+interface Props {
+	/** Automatically focuses on the button */
+	autofocus?: boolean;
+	/** Styling of the button */
+	kind?: 'normal' | 'info' | 'success' | 'warning' | 'danger';
+	/** Stretches the button to it's maximal width */
+	fullWidth?: boolean;
+	/** Enable rounded corners */
+	rounded?: boolean;
+	/** No background */
+	outlined?: boolean;
+	/** Remove padding / min-width. Meant to be used with just an icon as content */
+	icon?: boolean;
+	/** Element type to be used */
+	type?: string;
+	/** Disables the button */
+	disabled?: boolean;
+	/** Show a circular progress bar */
+	loading?: boolean;
+	/** To what internal link the button should direct */
+	to?: string | RouteLocation;
+	/** To what external link the button should direct */
+	href?: string;
+	/** Renders the button highlighted */
+	active?: boolean;
+	/** If the button should be highlighted if it matches the current internal link */
+	exact?: boolean;
+	/** Renders the button highlighted when it matches the given query  */
+	query?: boolean;
+	/** Renders the button in a less important styling */
+	secondary?: boolean;
+	/** @deprecated The `kind` prop should be used instead */
+	warning?: boolean;
+	/** @deprecated The `kind` prop should be used instead */
+	danger?: boolean;
+	/** What value to use for the button when rendered inside a group of buttons */
+	value?: number | string;
+	/** Renders the button with a dashed border */
+	dashed?: boolean;
+	/** Renders the button as a square */
+	tile?: boolean;
+	/** Align the button to a given side */
+	align?: 'left' | 'center' | 'right';
+	/** Add the download attribute (used in combo with `href`) */
+	download?: string;
+	/** Renders a smaller button */
+	xSmall?: boolean;
+	/** Renders a small button */
+	small?: boolean;
+	/** Renders a large button */
+	large?: boolean;
+	/** Renders a larger button */
+	xLarge?: boolean;
+}
 
-		const { route: linkRoute, isActive, isExactActive } = useLink(props);
-		const sizeClass = useSizeClass(props);
-
-		const component = computed(() => {
-			if (props.disabled) return 'button';
-			if (notEmpty(props.href)) return 'a';
-			if (props.to) return 'router-link';
-			return 'button';
-		});
-
-		const additionalProps = computed(() => {
-			if (props.to) {
-				return {
-					to: props.to,
-				};
-			}
-
-			if (component.value === 'a') {
-				return {
-					href: props.href,
-					target: '_blank',
-					rel: 'noopener noreferrer',
-				};
-			}
-
-			return {};
-		});
-
-		const { active, toggle } = useGroupable({
-			value: props.value,
-			group: 'item-group',
-		});
-
-		const isActiveRoute = computed(() => {
-			if (props.active !== undefined) return props.active;
-
-			if (props.to) {
-				const isQueryActive = !props.query || isEqual(route.query, linkRoute.value.query);
-
-				if (!props.exact) {
-					return (isActive.value && isQueryActive) || active.value;
-				} else {
-					return (isExactActive.value && isQueryActive) || active.value;
-				}
-			}
-
-			return false;
-		});
-		return { sizeClass, onClick, component, additionalProps, isActiveRoute, toggle };
-
-		function onClick(event: MouseEvent) {
-			if (props.loading === true) return;
-			// Toggles the active state in the parent groupable element. Allows buttons to work ootb in button-groups
-			toggle();
-			emit('click', event);
-		}
-	},
+const props = withDefaults(defineProps<Props>(), {
+	autofocus: false,
+	kind: 'normal',
+	fullWidth: false,
+	rounded: false,
+	outlined: false,
+	icon: false,
+	type: 'button',
+	disabled: false,
+	loading: false,
+	to: '',
+	href: undefined,
+	active: undefined,
+	exact: false,
+	query: false,
+	secondary: false,
+	warning: false,
+	danger: false,
+	value: undefined,
+	dashed: false,
+	tile: false,
+	align: 'center',
+	download: undefined,
 });
+
+const emit = defineEmits(['click']);
+
+const route = useRoute();
+
+const { route: linkRoute, isActive, isExactActive } = useLink(props);
+
+const sizeClass = useSizeClass(props);
+
+const component = computed(() => {
+	if (props.disabled) return 'button';
+	if (!isNil(props.href)) return 'a';
+	if (props.to) return 'router-link';
+	return 'button';
+});
+
+const additionalProps = computed(() => {
+	if (props.to) {
+		return {
+			to: props.to,
+		};
+	}
+
+	if (component.value === 'a') {
+		return {
+			href: props.href,
+			target: '_blank',
+			rel: 'noopener noreferrer',
+		};
+	}
+
+	return {};
+});
+
+const { active, toggle } = useGroupable({
+	value: props.value,
+	group: 'item-group',
+});
+
+const isActiveRoute = computed(() => {
+	if (props.active !== undefined) return props.active;
+
+	if (props.to) {
+		const isQueryActive = !props.query || isEqual(route.query, linkRoute.value.query);
+
+		if (!props.exact) {
+			return (isActive.value && isQueryActive) || active.value;
+		} else {
+			return (isExactActive.value && isQueryActive) || active.value;
+		}
+	}
+
+	return false;
+});
+
+async function onClick(event: MouseEvent) {
+	if (props.loading === true) return;
+	// Toggles the active state in the parent groupable element. Allows buttons to work ootb in button-groups
+	toggle();
+	emit('click', event);
+}
 </script>
 
 <style scoped>
diff --git a/packages/components/src/components/v-card-actions.test.ts b/packages/components/src/components/v-card-actions.test.ts
new file mode 100644
index 0000000000..52051fdbbe
--- /dev/null
+++ b/packages/components/src/components/v-card-actions.test.ts
@@ -0,0 +1,16 @@
+import { test, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import VCardActions from './v-card-actions.vue';
+
+test('Mount component', () => {
+	expect(VCardActions).toBeTruthy();
+
+	const wrapper = mount(VCardActions, {
+		slots: {
+			default: 'Slot Content',
+		},
+	});
+
+	expect(wrapper.html()).toMatchSnapshot();
+});
diff --git a/app/src/components/v-card-actions.vue b/packages/components/src/components/v-card-actions.vue
similarity index 100%
rename from app/src/components/v-card-actions.vue
rename to packages/components/src/components/v-card-actions.vue
diff --git a/packages/components/src/components/v-card-subtitle.test.ts b/packages/components/src/components/v-card-subtitle.test.ts
new file mode 100644
index 0000000000..49379e8409
--- /dev/null
+++ b/packages/components/src/components/v-card-subtitle.test.ts
@@ -0,0 +1,16 @@
+import { test, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import VCardSubtitle from './v-card-subtitle.vue';
+
+test('Mount component', () => {
+	expect(VCardSubtitle).toBeTruthy();
+
+	const wrapper = mount(VCardSubtitle, {
+		slots: {
+			default: 'Slot Content',
+		},
+	});
+
+	expect(wrapper.html()).toMatchSnapshot();
+});
diff --git a/app/src/components/v-card-subtitle.vue b/packages/components/src/components/v-card-subtitle.vue
similarity index 100%
rename from app/src/components/v-card-subtitle.vue
rename to packages/components/src/components/v-card-subtitle.vue
diff --git a/packages/components/src/components/v-card-text.test.ts b/packages/components/src/components/v-card-text.test.ts
new file mode 100644
index 0000000000..a4d6882c2a
--- /dev/null
+++ b/packages/components/src/components/v-card-text.test.ts
@@ -0,0 +1,16 @@
+import { test, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import VCardText from './v-card-text.vue';
+
+test('Mount component', () => {
+	expect(VCardText).toBeTruthy();
+
+	const wrapper = mount(VCardText, {
+		slots: {
+			default: 'Slot Content',
+		},
+	});
+
+	expect(wrapper.html()).toMatchSnapshot();
+});
diff --git a/app/src/components/v-card-text.vue b/packages/components/src/components/v-card-text.vue
similarity index 100%
rename from app/src/components/v-card-text.vue
rename to packages/components/src/components/v-card-text.vue
diff --git a/packages/components/src/components/v-card-title.test.ts b/packages/components/src/components/v-card-title.test.ts
new file mode 100644
index 0000000000..b47a420978
--- /dev/null
+++ b/packages/components/src/components/v-card-title.test.ts
@@ -0,0 +1,16 @@
+import { test, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import VCardTitle from './v-card-title.vue';
+
+test('Mount component', () => {
+	expect(VCardTitle).toBeTruthy();
+
+	const wrapper = mount(VCardTitle, {
+		slots: {
+			default: 'Slot Content',
+		},
+	});
+
+	expect(wrapper.html()).toMatchSnapshot();
+});
diff --git a/app/src/components/v-card-title.vue b/packages/components/src/components/v-card-title.vue
similarity index 100%
rename from app/src/components/v-card-title.vue
rename to packages/components/src/components/v-card-title.vue
diff --git a/packages/components/src/components/v-card.test.ts b/packages/components/src/components/v-card.test.ts
new file mode 100644
index 0000000000..d2bd329e86
--- /dev/null
+++ b/packages/components/src/components/v-card.test.ts
@@ -0,0 +1,30 @@
+import { test, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import VCard from './v-card.vue';
+
+test('Mount component', () => {
+	expect(VCard).toBeTruthy();
+
+	const wrapper = mount(VCard, {
+		slots: {
+			default: 'Slot Content',
+		},
+	});
+
+	expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('style props', () => {
+	const props = ['disabled', 'tile'];
+
+	for (const prop of props) {
+		const wrapper = mount(VCard, {
+			props: {
+				[prop]: true,
+			},
+		});
+
+		expect(wrapper.classes()).toContain(prop);
+	}
+});
diff --git a/app/src/components/v-card.vue b/packages/components/src/components/v-card.vue
similarity index 82%
rename from app/src/components/v-card.vue
rename to packages/components/src/components/v-card.vue
index 3ef40dd7bb..99240f0d55 100644
--- a/app/src/components/v-card.vue
+++ b/packages/components/src/components/v-card.vue
@@ -4,23 +4,17 @@
 	</div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
+interface Props {
+	/** Disables any interactions with the card */
+	disabled?: boolean;
+	/** Render without rounded corners */
+	tile?: boolean;
+}
 
-export default defineComponent({
-	props: {
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-		tile: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	setup() {
-		return {};
-	},
+withDefaults(defineProps<Props>(), {
+	disabled: false,
+	tile: false,
 });
 </script>
 
diff --git a/packages/components/src/components/v-checkbox-tree/__snapshots__/v-checkbox-tree.test.ts.snap b/packages/components/src/components/v-checkbox-tree/__snapshots__/v-checkbox-tree.test.ts.snap
new file mode 100644
index 0000000000..5aa4d76789
--- /dev/null
+++ b/packages/components/src/components/v-checkbox-tree/__snapshots__/v-checkbox-tree.test.ts.snap
@@ -0,0 +1,3 @@
+// Vitest Snapshot v1
+
+exports[`Mount component 1`] = `"<ul class=\\"v-list\\" data-v-6f43a325=\\"\\"></ul>"`;
diff --git a/app/src/components/v-checkbox-tree/use-visible-children.ts b/packages/components/src/components/v-checkbox-tree/use-visible-children.ts
similarity index 79%
rename from app/src/components/v-checkbox-tree/use-visible-children.ts
rename to packages/components/src/components/v-checkbox-tree/use-visible-children.ts
index cc113220f3..9e18a68940 100644
--- a/app/src/components/v-checkbox-tree/use-visible-children.ts
+++ b/packages/components/src/components/v-checkbox-tree/use-visible-children.ts
@@ -1,23 +1,24 @@
 import { computed, Ref } from 'vue';
 
 export function useVisibleChildren(
-	search: Ref<string>,
+	search: Ref<string | null>,
 	modelValue: Ref<(string | number)[]>,
 	children: Ref<Record<string, any>[]>,
 	showSelectionOnly: Ref<boolean>,
 	itemText: Ref<string>,
 	itemValue: Ref<string>,
 	itemChildren: Ref<string>,
-	parentValue: Ref<string | number>,
+	parentValue: Ref<string | number | null>,
 	value: Ref<string | number>
 ) {
 	const visibleChildrenValues = computed(() => {
 		let options = children.value || [];
+		const _search = search.value;
 
-		if (search.value) {
+		if (_search) {
 			options = options.filter(
 				(child) =>
-					child[itemText.value].toLowerCase().includes(search.value.toLowerCase()) ||
+					child[itemText.value].toLowerCase().includes(_search.toLowerCase()) ||
 					childrenHaveSearchMatch(child[itemChildren.value])
 			);
 		}
@@ -27,7 +28,7 @@ export function useVisibleChildren(
 				(child) =>
 					modelValue.value.includes(child[itemValue.value]) ||
 					childrenHaveValueMatch(child[itemChildren.value]) ||
-					modelValue.value.includes(parentValue.value) ||
+					(parentValue.value && modelValue.value.includes(parentValue.value)) ||
 					modelValue.value.includes(value.value)
 			);
 		}
@@ -38,7 +39,7 @@ export function useVisibleChildren(
 			if (!children) return false;
 			return children.some(
 				(child) =>
-					child[itemText.value].toLowerCase().includes(search.value.toLowerCase()) ||
+					child[itemText.value].toLowerCase().includes(search.value?.toLowerCase()) ||
 					childrenHaveSearchMatch(child[itemChildren.value])
 			);
 		}
diff --git a/packages/components/src/components/v-checkbox-tree/v-checkbox-tree-checkbox.vue b/packages/components/src/components/v-checkbox-tree/v-checkbox-tree-checkbox.vue
new file mode 100644
index 0000000000..fcd6714123
--- /dev/null
+++ b/packages/components/src/components/v-checkbox-tree/v-checkbox-tree-checkbox.vue
@@ -0,0 +1,431 @@
+<template>
+	<v-list-group v-if="visibleChildrenValues.length > 0" v-show="groupShown" :value="value" arrow-placement="before">
+		<template #activator>
+			<v-checkbox
+				v-model="treeValue"
+				:indeterminate="groupIndeterminateState"
+				:checked="groupCheckedStateOverride"
+				:label="text"
+				:value="value"
+				:disabled="disabled"
+			>
+				<v-highlight :text="text" :query="search" />
+			</v-checkbox>
+		</template>
+
+		<v-checkbox-tree-checkbox
+			v-for="choice in children"
+			:key="choice[itemValue]"
+			v-model="treeValue"
+			:value-combining="valueCombining"
+			:checked="childrenCheckedStateOverride"
+			:hidden="visibleChildrenValues.includes(choice[itemValue]) === false"
+			:search="search"
+			:item-text="itemText"
+			:item-value="itemValue"
+			:item-children="itemChildren"
+			:text="choice[itemText]"
+			:value="choice[itemValue]"
+			:children="choice[itemChildren]"
+			:disabled="disabled"
+			:show-selection-only="showSelectionOnly"
+			:parent-value="value"
+		/>
+	</v-list-group>
+
+	<v-list-item v-else-if="!hidden" class="item">
+		<v-checkbox v-model="treeValue" :disabled="disabled" :checked="checked" :label="text" :value="value">
+			<v-highlight :text="text" :query="search" />
+		</v-checkbox>
+	</v-list-item>
+</template>
+
+<script lang="ts">
+export default {
+	name: 'VCheckboxTreeCheckbox',
+};
+</script>
+
+<script setup lang="ts">
+import { computed, toRefs } from 'vue';
+import { difference } from 'lodash';
+import { useVisibleChildren } from './use-visible-children';
+
+type Delta = {
+	added?: (number | string)[];
+	removed?: (number | string)[];
+};
+
+interface Props {
+	text: string;
+	value: string | number;
+	valueCombining: 'all' | 'branch' | 'leaf' | 'indeterminate' | 'exclusive';
+	children?: Record<string, any>[];
+	modelValue?: (string | number)[];
+	checked?: boolean | null;
+	search?: string | null;
+	hidden?: boolean;
+	itemText?: string;
+	itemValue?: string;
+	itemChildren?: string;
+	disabled?: boolean;
+	showSelectionOnly?: boolean;
+	parentValue?: string | number | null;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	children: () => [],
+	modelValue: () => [],
+	checked: null,
+	search: null,
+	hidden: false,
+	itemText: 'text',
+	itemValue: 'value',
+	itemChildren: 'children',
+	disabled: false,
+	showSelectionOnly: false,
+	parentValue: null,
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const { search, modelValue, children, showSelectionOnly, itemText, itemValue, itemChildren, parentValue, value } =
+	toRefs(props);
+
+const { visibleChildrenValues } = useVisibleChildren(
+	search,
+	modelValue,
+	children,
+	showSelectionOnly,
+	itemText,
+	itemValue,
+	itemChildren,
+	parentValue,
+	value
+);
+
+const groupShown = computed(() => {
+	if (props.showSelectionOnly === true && props.modelValue.includes(props.value)) {
+		return true;
+	}
+
+	return !props.hidden;
+});
+
+const childrenValues = computed(() => props.children?.map((child) => child[props.itemValue]) || []);
+
+const treeValue = computed({
+	get() {
+		return props.modelValue || [];
+	},
+	set(newValue: (string | number)[]) {
+		const added = difference(newValue, props.modelValue);
+		const removed = difference(props.modelValue, newValue);
+
+		if (props.children) {
+			switch (props.valueCombining) {
+				case 'all':
+					return emitAll(newValue, { added, removed });
+				case 'branch':
+					return emitBranch(newValue, { added, removed });
+				case 'leaf':
+					return emitLeaf(newValue, { added, removed });
+				case 'indeterminate':
+					return emitIndeterminate(newValue, { added, removed });
+				case 'exclusive':
+					return emitExclusive(newValue, { added, removed });
+				default:
+					return emitValue(newValue);
+			}
+		}
+
+		emitValue(newValue);
+	},
+});
+
+const groupCheckedStateOverride = computed(() => {
+	if (props.checked !== null) return props.checked;
+	if (props.valueCombining === 'all') return null;
+
+	if (props.valueCombining === 'leaf') {
+		const leafChildrenRecursive = getRecursiveChildrenValues('leaf');
+		return leafChildrenRecursive.every((childVal) => props.modelValue.includes(childVal));
+	}
+
+	return null;
+});
+
+const groupIndeterminateState = computed(() => {
+	const allChildrenValues = getRecursiveChildrenValues('all');
+
+	if (props.valueCombining === 'all' || props.valueCombining === 'branch') {
+		return (
+			allChildrenValues.some((childVal) => props.modelValue.includes(childVal)) &&
+			props.modelValue.includes(props.value) === false
+		);
+	}
+
+	if (props.valueCombining === 'indeterminate') {
+		return (
+			allChildrenValues.some((childVal) => props.modelValue.includes(childVal)) &&
+			allChildrenValues.every((childVal) => props.modelValue.includes(childVal)) === false
+		);
+	}
+
+	if (props.valueCombining === 'leaf') {
+		const leafChildrenRecursive = getRecursiveChildrenValues('leaf');
+		return (
+			leafChildrenRecursive.some((childVal) => props.modelValue.includes(childVal)) &&
+			leafChildrenRecursive.every((childVal) => props.modelValue.includes(childVal)) === false
+		);
+	}
+
+	if (props.valueCombining === 'exclusive') {
+		return allChildrenValues.some((childVal) => props.modelValue.includes(childVal));
+	}
+
+	return null;
+});
+
+const childrenCheckedStateOverride = computed(() => {
+	if (props.checked !== null) return props.checked;
+	if (props.valueCombining === 'all') return null;
+
+	if (props.valueCombining === 'branch') {
+		if (props.modelValue.includes(props.value)) return true;
+	}
+
+	return null;
+});
+
+function emitAll(rawValue: (string | number)[], { added, removed }: Delta) {
+	const childrenValuesRecursive = getRecursiveChildrenValues('all');
+
+	// When enabling the group level
+	if (added?.[0] === props.value) {
+		const newValue = [
+			...rawValue.filter((val) => val !== props.value && childrenValues.value.includes(val) === false),
+			...childrenValuesRecursive,
+			props.value,
+		];
+
+		return emitValue(newValue);
+	}
+
+	// When disabling the group level
+	if (removed?.[0] === props.value) {
+		const newValue = rawValue.filter((val) => val !== props.value && childrenValuesRecursive.includes(val) === false);
+		return emitValue(newValue);
+	}
+
+	// When all children are clicked
+	if (childrenValues.value.every((childVal) => rawValue.includes(childVal))) {
+		const newValue = [
+			...rawValue.filter((val) => val !== props.value && childrenValuesRecursive.includes(val) === false),
+			...childrenValuesRecursive,
+			props.value,
+		];
+
+		return emitValue(newValue);
+	}
+
+	const newValue = rawValue.filter((val) => val !== props.value);
+	return emitValue(newValue);
+}
+
+function emitBranch(rawValue: (string | number)[], { added, removed }: Delta) {
+	const allChildrenRecursive = getRecursiveChildrenValues('all');
+
+	// Note: Added/removed is a tad confusing here, as an item that gets added to the array of
+	// selected items can immediately be negated by the logic below, as it's potentially
+	// replaced by the parent item's value
+
+	// When clicking on an individual item in the enabled group
+	if (
+		(props.modelValue.includes(props.value) || props.checked === true) &&
+		added &&
+		added.length === 1 &&
+		childrenValues.value.includes(added[0])
+	) {
+		const newValue = [
+			...rawValue.filter((val) => val !== props.value && val !== added[0]),
+			...childrenValues.value.filter((childVal) => childVal !== added[0]),
+		];
+
+		return emitValue(newValue);
+	}
+
+	// When a childgroup is modified
+	if (props.modelValue.includes(props.value) && allChildrenRecursive.some((childVal) => rawValue.includes(childVal))) {
+		const childThatContainsSelection = props.children.find((child) => {
+			const childNestedValues = getRecursiveChildrenValues('all', child[props.itemChildren]);
+			return rawValue.some((rawVal) => childNestedValues.includes(rawVal)) === true;
+		});
+
+		const newValue = [
+			...rawValue.filter((val) => val !== props.value),
+			...(props.children || [])
+				.filter((child) => {
+					if (!child[props.itemChildren]) return true;
+					return child[props.itemValue] !== childThatContainsSelection?.[props.itemValue];
+				})
+				.map((child) => child[props.itemValue]),
+			...(childThatContainsSelection?.[props.itemChildren] ?? [])
+				.filter((grandChild: Record<string, any>) => {
+					const childNestedValues = getRecursiveChildrenValues('all', grandChild[props.itemChildren]);
+					return rawValue.some((rawVal) => childNestedValues.includes(rawVal)) === false;
+				})
+				.map((grandChild: Record<string, any>) => grandChild[props.itemValue]),
+		];
+
+		return emitValue(newValue);
+	}
+
+	// When enabling the group level
+	if (added?.includes(props.value)) {
+		const newValue = [
+			...rawValue.filter((val) => val !== props.value && allChildrenRecursive.includes(val) === false),
+			props.value,
+		];
+
+		return emitValue(newValue);
+	}
+
+	// When disabling the group level
+	if (removed?.includes(props.value)) {
+		const newValue = rawValue.filter((val) => val !== props.value && allChildrenRecursive.includes(val) === false);
+		return emitValue(newValue);
+	}
+
+	// When all children are clicked
+	if (childrenValues.value.every((childVal) => rawValue.includes(childVal))) {
+		const newValue = [
+			...rawValue.filter((val) => val !== props.value && allChildrenRecursive.includes(val) === false),
+			props.value,
+		];
+
+		return emitValue(newValue);
+	}
+
+	return emitValue(rawValue);
+}
+
+function emitLeaf(rawValue: (string | number)[], { added }: Delta) {
+	const allChildrenRecursive = getRecursiveChildrenValues('all');
+	const leafChildrenRecursive = getRecursiveChildrenValues('leaf');
+
+	// When enabling the group level
+	if (added?.includes(props.value)) {
+		if (leafChildrenRecursive.every((childVal) => rawValue.includes(childVal))) {
+			const newValue = rawValue.filter((val) => val !== props.value && allChildrenRecursive.includes(val) === false);
+			return emitValue(newValue);
+		} else {
+			const newValue = [
+				...rawValue.filter((val) => val !== props.value && allChildrenRecursive.includes(val) === false),
+				...leafChildrenRecursive,
+			];
+
+			return emitValue(newValue);
+		}
+	}
+
+	return emitValue(rawValue);
+}
+
+function emitIndeterminate(rawValue: (string | number)[], { added, removed }: Delta) {
+	const childrenValuesRecursive = getRecursiveChildrenValues('all');
+
+	// When enabling the group level
+	if (added?.[0] === props.value) {
+		const newValue = [
+			...rawValue.filter((val) => val !== props.value && childrenValues.value.includes(val) === false),
+			...childrenValuesRecursive,
+			props.value,
+		];
+
+		return emitValue(newValue);
+	}
+
+	// When disabling the group level
+	if (removed?.[0] === props.value) {
+		const newValue = rawValue.filter((val) => val !== props.value && childrenValuesRecursive.includes(val) === false);
+		return emitValue(newValue);
+	}
+
+	// When a child value is clicked
+	if (childrenValues.value.some((childVal) => rawValue.includes(childVal))) {
+		const newValue = [...rawValue.filter((val) => val !== props.value), props.value];
+
+		return emitValue(newValue);
+	}
+
+	// When no children are clicked
+	if (childrenValues.value.every((childVal) => rawValue.includes(childVal) === false)) {
+		return emitValue(rawValue.filter((val) => val !== props.value));
+	}
+
+	return emitValue(rawValue);
+}
+
+function emitExclusive(rawValue: (string | number)[], { added }: Delta) {
+	const childrenValuesRecursive = getRecursiveChildrenValues('all');
+
+	// When enabling the group level
+	if (added?.[0] === props.value) {
+		const newValue = [
+			...rawValue.filter((val) => val !== props.value && childrenValuesRecursive.includes(val) === false),
+			props.value,
+		];
+
+		return emitValue(newValue);
+	}
+
+	// When a child value is clicked
+	if (childrenValuesRecursive.some((childVal) => rawValue.includes(childVal))) {
+		const newValue = [...rawValue.filter((val) => val !== props.value)];
+		return emitValue(newValue);
+	}
+
+	return emitValue(rawValue);
+}
+
+function emitValue(newValue: (string | number)[]) {
+	emit('update:modelValue', newValue);
+}
+
+function getRecursiveChildrenValues(mode: 'all' | 'branch' | 'leaf', children: Record<string, any>[] = props.children) {
+	const values: (string | number)[] = [];
+
+	getChildrenValuesRecursive(children);
+
+	return values;
+
+	function getChildrenValuesRecursive(children: Record<string, any>[]) {
+		if (!children) return;
+
+		for (const child of children) {
+			if (mode === 'all') {
+				values.push(child[props.itemValue]);
+			}
+
+			if (mode === 'branch' && child[props.itemChildren]) {
+				values.push(child[props.itemValue]);
+			}
+
+			if (mode === 'leaf' && !child[props.itemChildren]) {
+				values.push(child[props.itemValue]);
+			}
+
+			if (child[props.itemChildren]) {
+				getChildrenValuesRecursive(child[props.itemChildren]);
+			}
+		}
+	}
+}
+</script>
+
+<style scoped>
+.item {
+	padding-left: 32px !important;
+}
+</style>
diff --git a/packages/components/src/components/v-checkbox-tree/v-checkbox-tree.test.ts b/packages/components/src/components/v-checkbox-tree/v-checkbox-tree.test.ts
new file mode 100644
index 0000000000..955186e005
--- /dev/null
+++ b/packages/components/src/components/v-checkbox-tree/v-checkbox-tree.test.ts
@@ -0,0 +1,91 @@
+import { test, expect, beforeEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import VCheckboxTree from './v-checkbox-tree.vue';
+import VCheckboxTreeCheckbox from './v-checkbox-tree-checkbox.vue';
+import VListItem from '../v-list-item.vue';
+import VListItemIcon from '../v-list-item-icon.vue';
+import VList from '../v-list.vue';
+import VListGroup from '../v-list-group.vue';
+import VCheckbox from '../v-checkbox.vue';
+import { h } from 'vue';
+import { GlobalMountOptions } from '@vue/test-utils/dist/types';
+import { Router } from 'vue-router';
+import { generateRouter } from '@/__utils__/router';
+
+let router: Router;
+let global: GlobalMountOptions;
+
+beforeEach(async () => {
+	router = generateRouter([
+		{
+			path: '/',
+			component: h('div', 'test'),
+		},
+		{
+			path: '/test',
+			component: h('div', 'empty'),
+		},
+	]);
+	router.push('/');
+	await router.isReady();
+
+	global = {
+		components: {
+			VCheckboxTreeCheckbox,
+			VListItem,
+			VListItemIcon,
+			VListGroup,
+			VCheckbox,
+			VList,
+		},
+		stubs: ['v-highlight', 'v-icon'],
+		plugins: [router],
+	};
+});
+
+test('Mount component', () => {
+	expect(VCheckboxTree).toBeTruthy();
+
+	const wrapper = mount(VCheckboxTree, {
+		global,
+	});
+
+	expect(wrapper.html()).toMatchSnapshot();
+});
+
+// test('Choices prop', async () => {
+// 	const wrapper = mount(VCheckboxTree, {
+// 		props: {
+// 			modelValue: ['p1', 'c1'],
+// 			showSelectionOnly: true,
+// 			choices: [
+// 				{
+// 					text: 'Parent 1',
+// 					value: 'p1',
+// 				},
+// 				{
+// 					text: 'Parent 2',
+// 					value: 'p2',
+// 					children: [
+// 						{
+// 							text: 'Child 1',
+// 							value: 'c1',
+// 						},
+// 					],
+// 				},
+// 			],
+// 		},
+// 		global,
+// 	});
+
+// 	expect(wrapper.getComponent('.v-checkbox:nth-child(1)').classes()).toContain('checked');
+// 	expect(wrapper.getComponent('.v-checkbox:nth-child(1)').props().label).toBe('Parent 1');
+// 	expect(wrapper.getComponent('.v-checkbox:nth-child(2)').classes()).not.toContain('checked');
+
+// 	await wrapper.get('.v-checkbox:nth-child(2)').trigger('click');
+
+// 	const child1 = wrapper.get('.v-checkbox:nth-child(2)').find('.v-checkbox');
+// 	expect(child1.exists()).toBeTruthy();
+// 	expect(child1.props().label).toBe('Child 1');
+// });
diff --git a/packages/components/src/components/v-checkbox-tree/v-checkbox-tree.vue b/packages/components/src/components/v-checkbox-tree/v-checkbox-tree.vue
new file mode 100644
index 0000000000..511f6a66ad
--- /dev/null
+++ b/packages/components/src/components/v-checkbox-tree/v-checkbox-tree.vue
@@ -0,0 +1,157 @@
+<template>
+	<v-list v-model="openSelection" :mandatory="false" @toggle="$emit('group-toggle', $event)">
+		<v-checkbox-tree-checkbox
+			v-for="choice in choices"
+			:key="choice[itemValue]"
+			v-model="value"
+			:value-combining="valueCombining"
+			:search="search"
+			:item-text="itemText"
+			:item-value="itemValue"
+			:item-children="itemChildren"
+			:text="choice[itemText]"
+			:hidden="visibleChildrenValues.includes(choice[itemValue]) === false"
+			:value="choice[itemValue]"
+			:children="choice[itemChildren]"
+			:disabled="disabled"
+			:show-selection-only="showSelectionOnly"
+		/>
+	</v-list>
+</template>
+
+<script lang="ts">
+export default {
+	name: 'VCheckboxTree',
+};
+</script>
+
+<script setup lang="ts">
+import { computed, ref, watch, toRefs } from 'vue';
+import { useVisibleChildren } from './use-visible-children';
+import VCheckboxTreeCheckbox from './v-checkbox-tree-checkbox.vue';
+
+interface Props {
+	/** The choices that will be rendered as checkboxes */
+	choices?: Record<string, any>[];
+	/** Which choices should be shown as selected, depending on their value */
+	modelValue?: (string | number)[];
+	valueCombining?: 'all' | 'branch' | 'leaf' | 'indeterminate' | 'exclusive';
+	/** Will highlight every text that matches the given search */
+	search?: string | null;
+	/** Which key in choices is used to display the text */
+	itemText?: string;
+	/** Which key in choices is used to model the active state */
+	itemValue?: string;
+	/** Which key in choices is used to render children */
+	itemChildren?: string;
+	/** Disables any interaction */
+	disabled?: boolean;
+	/** Show only the selected choices */
+	showSelectionOnly?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	choices: () => [],
+	modelValue: () => [],
+	valueCombining: 'all',
+	search: null,
+	itemText: 'text',
+	itemValue: 'value',
+	itemChildren: 'children',
+	disabled: false,
+	showSelectionOnly: false,
+});
+
+const emit = defineEmits(['update:modelValue', 'group-toggle']);
+
+const value = computed({
+	get() {
+		return props.modelValue || [];
+	},
+	set(newValue: (string | number)[]) {
+		emit('update:modelValue', newValue);
+	},
+});
+
+const fakeValue = ref('');
+const fakeParentValue = ref('');
+
+const { search, modelValue, showSelectionOnly, itemText, itemValue, itemChildren, choices } = toRefs(props);
+
+const { visibleChildrenValues } = useVisibleChildren(
+	search,
+	modelValue,
+	choices,
+	showSelectionOnly,
+	itemText,
+	itemValue,
+	itemChildren,
+	fakeParentValue,
+	fakeValue
+);
+
+let showAllSelection: (string | number)[] = [];
+const openSelection = ref<(string | number)[]>([]);
+
+watch(
+	() => props.search,
+	(newValue) => {
+		if (!newValue) return;
+
+		const selection = new Set([...openSelection.value, ...searchChoices(newValue, props.choices)]);
+
+		openSelection.value = [...selection];
+	},
+	{ immediate: true }
+);
+
+watch(showSelectionOnly, (isSelectionOnly) => {
+	if (isSelectionOnly) {
+		const selection = new Set([...openSelection.value, ...findSelectedChoices(props.choices, value.value)]);
+
+		showAllSelection = openSelection.value;
+		openSelection.value = [...selection];
+	} else {
+		openSelection.value = [...showAllSelection];
+	}
+});
+
+function searchChoices(text: string, target: Record<string, any>[]) {
+	const selection: string[] = [];
+
+	for (const item of target) {
+		if (item[props.itemText].toLowerCase().includes(text.toLowerCase())) {
+			selection.push(item[props.itemValue]);
+		}
+
+		if (item[props.itemChildren]) {
+			selection.push(...searchChoices(text, item[props.itemChildren]));
+		}
+	}
+
+	return selection;
+}
+
+function findSelectedChoices(choices: Record<string, any>[], checked: (string | number)[]) {
+	function selectedChoices(item: Record<string, any>): (string | number)[] {
+		if (!item[props.itemValue]) return [];
+		let result: (string | number)[] = [];
+
+		const itemValue: string | number = item[props.itemValue];
+		if (checked.includes(itemValue)) result.push(itemValue);
+
+		if (item[props.itemChildren]) {
+			const children = item[props.itemChildren];
+			if (Array.isArray(children) && children.length > 0) {
+				const nestedResult = children.flatMap((child) => selectedChoices(child));
+				if (nestedResult.length > 0) {
+					result.push(...nestedResult, itemValue);
+				}
+			}
+		}
+		return result;
+	}
+
+	return choices.flatMap((item) => selectedChoices(item));
+}
+</script>
diff --git a/packages/components/src/components/v-checkbox.test.ts b/packages/components/src/components/v-checkbox.test.ts
new file mode 100644
index 0000000000..3ba99eeb2a
--- /dev/null
+++ b/packages/components/src/components/v-checkbox.test.ts
@@ -0,0 +1,92 @@
+import { test, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import VCheckbox from './v-checkbox.vue';
+import { h } from 'vue';
+import { GlobalMountOptions } from '@vue/test-utils/dist/types';
+
+const global: GlobalMountOptions = {
+	stubs: ['v-icon'],
+};
+
+test('Mount component', () => {
+	expect(VCheckbox).toBeTruthy();
+
+	const wrapper = mount(VCheckbox, {
+		slots: {
+			default: h('div', 'Hi'),
+		},
+		global,
+	});
+
+	expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('modelValue prop', async () => {
+	const wrapper = mount(VCheckbox, {
+		props: {
+			modelValue: true,
+		},
+		global,
+	});
+
+	expect(wrapper.attributes()['aria-pressed']).toBe('true');
+
+	await wrapper.get('.checkbox').trigger('click');
+
+	expect(wrapper.emitted()['update:modelValue'][0]).toEqual([false]);
+});
+
+test('value prop', async () => {
+	const wrapper = mount(VCheckbox, {
+		props: {
+			value: 'test',
+			modelValue: ['test', 'test2'],
+		},
+		global,
+	});
+
+	expect(wrapper.attributes()['aria-pressed']).toBe('true');
+
+	await wrapper.get('.checkbox').trigger('click');
+
+	expect(wrapper.emitted()['update:modelValue'][0]).toEqual([['test2']]);
+});
+
+test('label prop', async () => {
+	const wrapper = mount(VCheckbox, {
+		props: {
+			label: 'my label',
+		},
+		global,
+	});
+
+	expect(wrapper.html()).toContain('my label');
+});
+
+test('customValue prop', async () => {
+	const wrapper = mount(VCheckbox, {
+		props: {
+			customValue: true,
+		},
+		global,
+	});
+
+	wrapper.find('input').setValue('my custom value');
+
+	expect(wrapper.emitted()['update:value'][0]).toEqual(['my custom value']);
+});
+
+test('disabled prop', async () => {
+	const wrapper = mount(VCheckbox, {
+		props: {
+			disabled: true,
+			modelValue: true,
+		},
+		global,
+	});
+
+	await wrapper.get('.checkbox').trigger('click');
+
+	expect(wrapper.emitted()['update:modelValue']).not.toBeDefined();
+});
diff --git a/app/src/components/v-checkbox.vue b/packages/components/src/components/v-checkbox.vue
similarity index 55%
rename from app/src/components/v-checkbox.vue
rename to packages/components/src/components/v-checkbox.vue
index bac53fd88f..ce1bc55a35 100644
--- a/app/src/components/v-checkbox.vue
+++ b/packages/components/src/components/v-checkbox.vue
@@ -19,101 +19,93 @@
 	</component>
 </template>
 
-<script lang="ts">
-import { defineComponent, computed } from 'vue';
+<script setup lang="ts">
+import { computed } from 'vue';
 import { useSync } from '@directus/shared/composables';
 
-export default defineComponent({
-	props: {
-		value: {
-			type: String,
-			default: null,
-		},
-		modelValue: {
-			type: [Boolean, Array],
-			default: null,
-		},
-		label: {
-			type: String,
-			default: null,
-		},
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-		indeterminate: {
-			type: Boolean,
-			default: false,
-		},
-		iconOn: {
-			type: String,
-			default: 'check_box',
-		},
-		iconOff: {
-			type: String,
-			default: 'check_box_outline_blank',
-		},
-		iconIndeterminate: {
-			type: String,
-			default: 'indeterminate_check_box',
-		},
-		block: {
-			type: Boolean,
-			default: false,
-		},
-		customValue: {
-			type: Boolean,
-			default: false,
-		},
-		checked: {
-			type: Boolean,
-			default: null,
-		},
-	},
-	emits: ['update:indeterminate', 'update:modelValue', 'update:value'],
-	setup(props, { emit }) {
-		const internalValue = useSync(props, 'value', emit);
+interface Props {
+	/** If the `modelValue` is an array of strings, activates the checkbox if the value is inside it */
+	value?: string | null;
+	/** Used to model the active state */
+	modelValue?: boolean | string[] | null;
+	/** Label for the checkbox */
+	label?: string | null;
+	/** Disable the checkbox */
+	disabled?: boolean;
+	/** Renders the checkbox neither selected nor unselected */
+	indeterminate?: boolean;
+	/** What icon to use for the on state */
+	iconOn?: string;
+	/** What icon to use for the off state */
+	iconOff?: string;
+	/** What icon to use for the indeterminate state */
+	iconIndeterminate?: string;
+	/** Show as styled block. Matches input size */
+	block?: boolean;
+	/** If a custom value can be entered next to it */
+	customValue?: boolean;
+	/** TODO: What the? */
+	checked?: boolean | null;
+}
 
-		const isChecked = computed<boolean>(() => {
-			if (props.checked !== null) return props.checked;
-
-			if (props.modelValue instanceof Array) {
-				return props.modelValue.includes(props.value);
-			}
-
-			return props.modelValue === true;
-		});
-
-		const icon = computed<string>(() => {
-			if (props.indeterminate === true) return props.iconIndeterminate;
-			if (props.checked === null && props.modelValue === null) return props.iconIndeterminate;
-
-			return isChecked.value ? props.iconOn : props.iconOff;
-		});
-
-		return { isChecked, toggleInput, icon, internalValue };
-
-		function toggleInput(): void {
-			if (props.indeterminate === true) {
-				emit('update:indeterminate', false);
-			}
-
-			if (props.modelValue instanceof Array) {
-				const newValue = [...props.modelValue];
-
-				if (props.modelValue.includes(props.value) === false) {
-					newValue.push(props.value);
-				} else {
-					newValue.splice(newValue.indexOf(props.value), 1);
-				}
-
-				emit('update:modelValue', newValue);
-			} else {
-				emit('update:modelValue', !props.modelValue);
-			}
-		}
-	},
+const props = withDefaults(defineProps<Props>(), {
+	value: null,
+	modelValue: null,
+	label: null,
+	disabled: false,
+	indeterminate: false,
+	iconOn: 'check_box',
+	iconOff: 'check_box_outline_blank',
+	iconIndeterminate: 'indeterminate_check_box',
+	block: false,
+	customValue: false,
+	checked: null,
 });
+
+const emit = defineEmits(['update:indeterminate', 'update:modelValue', 'update:value']);
+
+const internalValue = useSync(props, 'value', emit);
+
+const isChecked = computed<boolean>(() => {
+	if (props.checked !== null) return props.checked;
+
+	if (props.modelValue instanceof Array) {
+		if (!props.value) return false;
+
+		return props.modelValue.includes(props.value);
+	}
+
+	return props.modelValue === true;
+});
+
+const icon = computed<string>(() => {
+	if (props.indeterminate === true) return props.iconIndeterminate;
+	if (props.checked === null && props.modelValue === null) return props.iconIndeterminate;
+
+	return isChecked.value ? props.iconOn : props.iconOff;
+});
+
+function toggleInput(): void {
+	if (props.disabled) return;
+
+	if (props.indeterminate === true) {
+		emit('update:indeterminate', false);
+	}
+
+	if (props.modelValue instanceof Array && props.value) {
+		const newValue = [...props.modelValue];
+
+		if (props.modelValue.includes(props.value) === false) {
+			newValue.push(props.value);
+		} else {
+			newValue.splice(newValue.indexOf(props.value), 1);
+		}
+
+		emit('update:modelValue', newValue);
+	} else {
+		emit('update:modelValue', !props.modelValue);
+	}
+}
 </script>
 
 <style>
@@ -124,7 +116,7 @@ body {
 </style>
 
 <style lang="scss" scoped>
-@import '@/styles/mixins/no-wrap';
+@import '../styles/no-wrap'; // TODO: this has to be thought trough
 
 .v-checkbox {
 	--v-icon-color: var(--v-checkbox-unchecked-color);
diff --git a/packages/components/src/components/v-chip.test.ts b/packages/components/src/components/v-chip.test.ts
new file mode 100644
index 0000000000..17c7715797
--- /dev/null
+++ b/packages/components/src/components/v-chip.test.ts
@@ -0,0 +1,65 @@
+import { test, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import VChip from './v-chip.vue';
+import { GlobalMountOptions } from '@vue/test-utils/dist/types';
+
+const global: GlobalMountOptions = {
+	stubs: ['v-icon'],
+};
+
+test('Mount component', () => {
+	expect(VChip).toBeTruthy();
+
+	const wrapper = mount(VChip, {
+		global,
+	});
+
+	expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('active prop', async () => {
+	const wrapper = mount(VChip, {
+		props: {
+			active: true,
+			close: true,
+		},
+		global,
+	});
+
+	expect(wrapper.find('.v-chip').exists()).toBeTruthy();
+
+	await wrapper.get('.close-outline').trigger('click');
+
+	expect(wrapper.emitted()['update:active'][0]).toEqual([false]);
+});
+
+test('close prop', async () => {
+	const wrapper = mount(VChip, {
+		props: {
+			close: true,
+		},
+		global,
+	});
+
+	expect(wrapper.find('.v-chip').exists()).toBeTruthy();
+
+	await wrapper.get('.close-outline').trigger('click');
+
+	expect(wrapper.find('.v-chip').exists()).toBeFalsy();
+});
+
+test('style props', async () => {
+	const props = ['outlined', 'label', 'disabled', 'close', 'x-small', 'small', 'large', 'x-large'];
+
+	for (const prop of props) {
+		const wrapper = mount(VChip, {
+			props: {
+				[prop]: true,
+			},
+			global,
+		});
+
+		expect(wrapper.classes()).toContain(prop);
+	}
+});
diff --git a/app/src/components/v-chip.vue b/packages/components/src/components/v-chip.vue
similarity index 65%
rename from app/src/components/v-chip.vue
rename to packages/components/src/components/v-chip.vue
index 5c08923d75..b304a226f7 100644
--- a/app/src/components/v-chip.vue
+++ b/packages/components/src/components/v-chip.vue
@@ -14,69 +14,69 @@
 	</span>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref, computed } from 'vue';
-import { useSizeClass, sizeProps } from '@/composables/use-size-class';
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { useSizeClass } from '@directus/shared/composables';
 
-export default defineComponent({
-	props: {
-		active: {
-			type: Boolean,
-			default: null,
-		},
-		close: {
-			type: Boolean,
-			default: false,
-		},
-		closeIcon: {
-			type: String,
-			default: 'close',
-		},
-		outlined: {
-			type: Boolean,
-			default: false,
-		},
-		label: {
-			type: Boolean,
-			default: true,
-		},
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-		...sizeProps,
+interface Props {
+	/** Model the active state */
+	active?: boolean;
+	/** Displays a close icon which triggers the close event */
+	close?: boolean;
+	/** Which icon should be displayed to close it */
+	closeIcon?: string;
+	/** No background */
+	outlined?: boolean;
+	/** Adds a border radius */
+	label?: boolean;
+	/** Disables the chip */
+	disabled?: boolean;
+	/** Renders a smaller chip */
+	xSmall?: boolean;
+	/** Renders a small chip */
+	small?: boolean;
+	/** Renders a large chip */
+	large?: boolean;
+	/** Renders a larger chip */
+	xLarge?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	active: undefined,
+	close: false,
+	closeIcon: 'close',
+	outlined: false,
+	label: true,
+	disabled: false,
+});
+
+const emit = defineEmits(['update:active', 'click', 'close']);
+
+const internalLocalActive = ref(true);
+
+const internalActive = computed<boolean>({
+	get: () => {
+		if (props.active !== undefined) return props.active;
+		return internalLocalActive.value;
 	},
-	emits: ['update:active', 'click', 'close'],
-	setup(props, { emit }) {
-		const internalLocalActive = ref(true);
-
-		const internalActive = computed<boolean>({
-			get: () => {
-				if (props.active !== null) return props.active;
-				return internalLocalActive.value;
-			},
-			set: (active: boolean) => {
-				emit('update:active', active);
-				internalLocalActive.value = active;
-			},
-		});
-
-		const sizeClass = useSizeClass(props);
-
-		return { sizeClass, internalActive, onClick, onCloseClick };
-
-		function onClick(event: MouseEvent) {
-			if (props.disabled) return;
-			emit('click', event);
-		}
-
-		function onCloseClick(event: MouseEvent) {
-			if (props.disabled) return;
-			internalActive.value = !internalActive.value;
-			emit('close', event);
-		}
+	set: (active: boolean) => {
+		emit('update:active', active);
+		internalLocalActive.value = active;
 	},
 });
+
+const sizeClass = useSizeClass(props);
+
+function onClick(event: MouseEvent) {
+	if (props.disabled) return;
+	emit('click', event);
+}
+
+function onCloseClick(event: MouseEvent) {
+	if (props.disabled) return;
+	internalActive.value = !internalActive.value;
+	emit('close', event);
+}
 </script>
 
 <style>
diff --git a/packages/components/src/components/v-divider.test.ts b/packages/components/src/components/v-divider.test.ts
new file mode 100644
index 0000000000..4217c12b33
--- /dev/null
+++ b/packages/components/src/components/v-divider.test.ts
@@ -0,0 +1,30 @@
+import { test, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import VDivider from './v-divider.vue';
+
+test('Mount component', () => {
+	expect(VDivider).toBeTruthy();
+
+	const wrapper = mount(VDivider, {
+		slots: {
+			default: 'Default slot',
+		},
+	});
+
+	expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('style props', async () => {
+	const props = ['vertical', 'inlineTitle', 'large'];
+
+	for (const prop of props) {
+		const wrapper = mount(VDivider, {
+			props: {
+				[prop]: true,
+			},
+		});
+
+		expect(wrapper.classes()).toContain(prop);
+	}
+});
diff --git a/app/src/components/v-divider.vue b/packages/components/src/components/v-divider.vue
similarity index 82%
rename from app/src/components/v-divider.vue
rename to packages/components/src/components/v-divider.vue
index 85df25d886..22b961e0d5 100644
--- a/app/src/components/v-divider.vue
+++ b/packages/components/src/components/v-divider.vue
@@ -8,24 +8,20 @@
 	</div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
+interface Props {
+	/** Render the divider vertically */
+	vertical?: boolean;
+	/** Render the title inline with the divider, or under it */
+	inlineTitle?: boolean;
+	/** Renders a larger divider text */
+	large?: boolean;
+}
 
-export default defineComponent({
-	props: {
-		vertical: {
-			type: Boolean,
-			default: false,
-		},
-		inlineTitle: {
-			type: Boolean,
-			default: true,
-		},
-		large: {
-			type: Boolean,
-			default: false,
-		},
-	},
+withDefaults(defineProps<Props>(), {
+	vertical: false,
+	inlineTitle: true,
+	large: false,
 });
 </script>
 
diff --git a/app/src/components/v-emoji-picker.vue b/packages/components/src/components/v-emoji-picker.vue
similarity index 100%
rename from app/src/components/v-emoji-picker.vue
rename to packages/components/src/components/v-emoji-picker.vue
diff --git a/packages/components/src/components/v-fancy-select.test.ts b/packages/components/src/components/v-fancy-select.test.ts
new file mode 100644
index 0000000000..b2f7f29643
--- /dev/null
+++ b/packages/components/src/components/v-fancy-select.test.ts
@@ -0,0 +1,59 @@
+import { test, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import VFancySelect from './v-fancy-select.vue';
+import { GlobalMountOptions } from '@vue/test-utils/dist/types';
+
+const global: GlobalMountOptions = {
+	stubs: ['v-icon', 'v-divider'],
+};
+
+const items = [
+	{
+		icon: 'person',
+		value: 'person',
+		text: 'Person',
+	},
+	{
+		icon: 'directions_car',
+		value: 'car',
+		text: 'Car',
+	},
+	{
+		divider: true,
+	},
+	{
+		icon: 'home',
+		value: 'home',
+		text: 'Home',
+		description: 'A home is a nice place',
+	},
+];
+
+test('Mount component', () => {
+	expect(VFancySelect).toBeTruthy();
+
+	const wrapper = mount(VFancySelect, {
+		props: {
+			items,
+		},
+		global,
+	});
+
+	expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('modelValue prop', async () => {
+	const wrapper = mount(VFancySelect, {
+		props: {
+			items,
+		},
+		global,
+	});
+
+	expect(wrapper.element.children[0].children.length).toBe(4);
+
+	await wrapper.setProps({ modelValue: 'car' });
+
+	expect(wrapper.element.children[0].children.length).toBe(1);
+});
diff --git a/app/src/components/v-fancy-select.vue b/packages/components/src/components/v-fancy-select.vue
similarity index 91%
rename from app/src/components/v-fancy-select.vue
rename to packages/components/src/components/v-fancy-select.vue
index 8c578d49b6..b18f90ca99 100644
--- a/app/src/components/v-fancy-select.vue
+++ b/packages/components/src/components/v-fancy-select.vue
@@ -43,14 +43,20 @@ export type FancySelectItem = {
 	description?: string;
 	divider?: boolean;
 	iconRight?: string;
-};
+} & Record<string, any>;
 
 interface Props {
+	/** The list of possible items to display */
 	items: FancySelectItem[];
+	/** Used to model the current selected item */
 	modelValue?: string | number | null;
+	/** Disable selecting / deselecting a value */
 	disabled?: boolean;
+	/** What key in items to use to display text */
 	itemText?: string;
+	/** What key in items to use to model the selected item */
 	itemValue?: string;
+	/** What key in items to use to display a description */
 	itemDescription?: string;
 }
 
diff --git a/packages/components/src/components/v-highlight.test.ts b/packages/components/src/components/v-highlight.test.ts
new file mode 100644
index 0000000000..204a0cfcdc
--- /dev/null
+++ b/packages/components/src/components/v-highlight.test.ts
@@ -0,0 +1,29 @@
+import { test, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import VHighlight from './v-highlight.vue';
+
+test('Mount component', () => {
+	expect(VHighlight).toBeTruthy();
+
+	const wrapper = mount(VHighlight, {
+		props: {
+			text: 'This is a nice text',
+			query: ['is', 'text'],
+		},
+	});
+
+	expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('query prop', async () => {
+	const wrapper = mount(VHighlight, {
+		props: {
+			text: 'This is a nice text',
+			query: 'nice',
+		},
+	});
+
+	expect(wrapper.find('.highlight').exists()).toBeTruthy();
+	expect(wrapper.find('.highlight').text()).toBe('nice');
+});
diff --git a/packages/components/src/components/v-highlight.vue b/packages/components/src/components/v-highlight.vue
new file mode 100644
index 0000000000..85568a8d8c
--- /dev/null
+++ b/packages/components/src/components/v-highlight.vue
@@ -0,0 +1,139 @@
+<template>
+	<template v-for="(part, index) in parts">
+		<mark v-if="part.highlighted" :key="index" class="highlight">{{ part.text }}</mark>
+		<template v-else>{{ part.text }}</template>
+	</template>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { flatten } from 'lodash';
+import { remove as removeDiacritics } from 'diacritics';
+import { toArray } from '@directus/shared/utils';
+
+type HighlightPart = {
+	text: string;
+	highlighted: boolean;
+};
+
+interface Props {
+	/** What parts of the `text` should be highlighted */
+	query?: string | string[] | null;
+	/** The text to display */
+	text?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	query: null,
+	text: '',
+});
+
+const parts = computed<HighlightPart[]>(() => {
+	let searchText = removeDiacritics(props.text.toLowerCase());
+
+	const queries = toArray(props.query);
+
+	if (queries.length === 0) {
+		return [
+			{
+				highlighted: false,
+				text: props.text,
+			},
+		];
+	}
+
+	const matches = flatten(
+		queries.reduce<number[][][]>((acc, query) => {
+			if (query === null) return acc;
+
+			query = removeDiacritics(query.toLowerCase());
+
+			const indices = [];
+
+			let startIndex = 0;
+			let index = searchText.indexOf(query, startIndex);
+
+			while (index > -1) {
+				startIndex = index + query.length;
+				indices.push([index, startIndex]);
+				index = searchText.indexOf(query, index + 1);
+			}
+
+			acc.push(indices);
+
+			return acc;
+		}, [])
+	);
+
+	matches.sort((a, b) => {
+		if (a[0] !== b[0]) return a[0] - b[0];
+		return a[1] - b[1];
+	});
+
+	if (matches.length === 0) {
+		return [
+			{
+				highlighted: false,
+				text: props.text,
+			},
+		];
+	}
+
+	const mergedMatches = [];
+
+	let curStart = matches[0][0];
+	let curEnd = matches[0][1];
+
+	matches.shift();
+
+	for (const [start, end] of matches) {
+		if (start >= curEnd) {
+			mergedMatches.push([curStart, curEnd]);
+			curStart = start;
+			curEnd = end;
+		} else if (end > curEnd) {
+			curEnd = end;
+		}
+	}
+
+	mergedMatches.push([curStart, curEnd]);
+
+	let lastEnd = 0;
+
+	const parts: HighlightPart[] = [];
+
+	for (const [start, end] of mergedMatches) {
+		if (lastEnd !== start) {
+			parts.push({
+				highlighted: false,
+				text: props.text.slice(lastEnd, start),
+			});
+		}
+
+		parts.push({
+			highlighted: true,
+			text: props.text.slice(start, end),
+		});
+
+		lastEnd = end;
+	}
+
+	if (lastEnd !== searchText.length) {
+		parts.push({
+			highlighted: false,
+			text: props.text.slice(lastEnd),
+		});
+	}
+
+	return parts;
+});
+</script>
+
+<style scoped>
+mark {
+	margin: -1px -2px;
+	padding: 1px 2px;
+	background-color: var(--primary-25);
+	border-radius: var(--border-radius);
+}
+</style>
diff --git a/packages/components/src/components/v-hover.test.ts b/packages/components/src/components/v-hover.test.ts
new file mode 100644
index 0000000000..5f802d4bf6
--- /dev/null
+++ b/packages/components/src/components/v-hover.test.ts
@@ -0,0 +1,90 @@
+import { test, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import VHover from './v-hover.vue';
+
+test('Mount component', () => {
+	expect(VHover).toBeTruthy();
+
+	const wrapper = mount(VHover, {
+		slots: {
+			default: ({ hover }) => (hover ? 'shown' : 'hidden'),
+		},
+	});
+
+	expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('hover interaction', async () => {
+	const wrapper = mount(VHover, {
+		slots: {
+			default: ({ hover }) => (hover ? 'shown' : 'hidden'),
+		},
+	});
+
+	vi.useFakeTimers();
+
+	expect(wrapper.text()).toBe('hidden');
+	await wrapper.trigger('mouseenter');
+	await vi.advanceTimersByTime(1);
+	expect(wrapper.text()).toBe('shown');
+	await wrapper.trigger('mouseleave');
+	await vi.advanceTimersByTime(1);
+	expect(wrapper.text()).toBe('hidden');
+});
+
+test('openDelay prop', async () => {
+	const wrapper = mount(VHover, {
+		props: {
+			openDelay: 20,
+		},
+		slots: {
+			default: ({ hover }) => (hover ? 'shown' : 'hidden'),
+		},
+	});
+
+	vi.useFakeTimers();
+
+	expect(wrapper.text()).toBe('hidden');
+	await wrapper.trigger('mouseenter');
+	await vi.advanceTimersByTime(10);
+	expect(wrapper.text()).toBe('hidden');
+	await vi.advanceTimersByTime(10);
+	expect(wrapper.text()).toBe('shown');
+});
+
+test('closeDelay prop', async () => {
+	const wrapper = mount(VHover, {
+		props: {
+			closeDelay: 20,
+		},
+		slots: {
+			default: ({ hover }) => (hover ? 'shown' : 'hidden'),
+		},
+	});
+
+	vi.useFakeTimers();
+
+	expect(wrapper.text()).toBe('hidden');
+	await wrapper.trigger('mouseenter');
+	await vi.advanceTimersByTime(1);
+	expect(wrapper.text()).toBe('shown');
+	await wrapper.trigger('mouseleave');
+	await vi.advanceTimersByTime(10);
+	expect(wrapper.text()).toBe('shown');
+	await vi.advanceTimersByTime(10);
+	expect(wrapper.text()).toBe('hidden');
+});
+
+test('tag prop', async () => {
+	const wrapper = mount(VHover, {
+		props: {
+			tag: 'span',
+		},
+		slots: {
+			default: ({ hover }) => (hover ? 'shown' : 'hidden'),
+		},
+	});
+
+	expect(wrapper.element.tagName).toBe('SPAN');
+});
diff --git a/packages/components/src/components/v-hover.vue b/packages/components/src/components/v-hover.vue
new file mode 100644
index 0000000000..2dbede5183
--- /dev/null
+++ b/packages/components/src/components/v-hover.vue
@@ -0,0 +1,45 @@
+<template>
+	<component :is="tag" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
+		<slot v-bind="{ hover }" />
+	</component>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+interface Props {
+	/** Time in ms until closing */
+	closeDelay?: number;
+	/** Time in ms until opening */
+	openDelay?: number;
+	/** Disables any intractability */
+	disabled?: boolean;
+	/** The type of element to wrap around the slot */
+	tag?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	closeDelay: 0,
+	openDelay: 0,
+	disabled: false,
+	tag: 'div',
+});
+
+const hover = ref<boolean>(false);
+
+function onMouseEnter() {
+	if (props.disabled === true) return;
+
+	setTimeout(() => {
+		hover.value = true;
+	}, props.openDelay);
+}
+
+function onMouseLeave() {
+	if (props.disabled === true) return;
+
+	setTimeout(() => {
+		hover.value = false;
+	}, props.closeDelay);
+}
+</script>
diff --git a/packages/components/src/components/v-icon-file.test.ts b/packages/components/src/components/v-icon-file.test.ts
new file mode 100644
index 0000000000..59cfda857c
--- /dev/null
+++ b/packages/components/src/components/v-icon-file.test.ts
@@ -0,0 +1,19 @@
+import { test, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import VIconFile from './v-icon-file.vue';
+
+test('Mount component', () => {
+	expect(VIconFile).toBeTruthy();
+
+	const wrapper = mount(VIconFile, {
+		props: {
+			ext: 'png',
+		},
+		global: {
+			stubs: ['v-icon'],
+		},
+	});
+
+	expect(wrapper.html()).toMatchSnapshot();
+});
diff --git a/app/src/components/v-icon-file.vue b/packages/components/src/components/v-icon-file.vue
similarity index 96%
rename from app/src/components/v-icon-file.vue
rename to packages/components/src/components/v-icon-file.vue
index 77b8710c09..1cbf00e703 100644
--- a/app/src/components/v-icon-file.vue
+++ b/packages/components/src/components/v-icon-file.vue
@@ -7,6 +7,7 @@
 
 <script lang="ts" setup>
 interface Props {
+	/** The extension type of the file */
 	ext: string;
 }
 
diff --git a/packages/components/src/components/v-icon/__snapshots__/v-icon.test.ts.snap b/packages/components/src/components/v-icon/__snapshots__/v-icon.test.ts.snap
new file mode 100644
index 0000000000..9b532131d4
--- /dev/null
+++ b/packages/components/src/components/v-icon/__snapshots__/v-icon.test.ts.snap
@@ -0,0 +1,3 @@
+// Vitest Snapshot v1
+
+exports[`Mount component 1`] = `"<span class=\\"v-icon\\" data-v-4b41578f=\\"\\"><i class=\\"\\" data-icon=\\"close\\" data-v-4b41578f=\\"\\"></i></span>"`;
diff --git a/app/src/components/v-icon/custom-icons/bookmark_save.vue b/packages/components/src/components/v-icon/custom-icons/bookmark_save.vue
similarity index 100%
rename from app/src/components/v-icon/custom-icons/bookmark_save.vue
rename to packages/components/src/components/v-icon/custom-icons/bookmark_save.vue
diff --git a/app/src/components/v-icon/custom-icons/box.vue b/packages/components/src/components/v-icon/custom-icons/box.vue
similarity index 100%
rename from app/src/components/v-icon/custom-icons/box.vue
rename to packages/components/src/components/v-icon/custom-icons/box.vue
diff --git a/app/src/components/v-icon/custom-icons/commit_node.vue b/packages/components/src/components/v-icon/custom-icons/commit_node.vue
similarity index 100%
rename from app/src/components/v-icon/custom-icons/commit_node.vue
rename to packages/components/src/components/v-icon/custom-icons/commit_node.vue
diff --git a/app/src/components/v-icon/custom-icons/directus.vue b/packages/components/src/components/v-icon/custom-icons/directus.vue
similarity index 100%
rename from app/src/components/v-icon/custom-icons/directus.vue
rename to packages/components/src/components/v-icon/custom-icons/directus.vue
diff --git a/app/src/components/v-icon/custom-icons/flip_horizontal.vue b/packages/components/src/components/v-icon/custom-icons/flip_horizontal.vue
similarity index 100%
rename from app/src/components/v-icon/custom-icons/flip_horizontal.vue
rename to packages/components/src/components/v-icon/custom-icons/flip_horizontal.vue
diff --git a/app/src/components/v-icon/custom-icons/flip_vertical.vue b/packages/components/src/components/v-icon/custom-icons/flip_vertical.vue
similarity index 100%
rename from app/src/components/v-icon/custom-icons/flip_vertical.vue
rename to packages/components/src/components/v-icon/custom-icons/flip_vertical.vue
diff --git a/app/src/components/v-icon/custom-icons/folder_lock.vue b/packages/components/src/components/v-icon/custom-icons/folder_lock.vue
similarity index 100%
rename from app/src/components/v-icon/custom-icons/folder_lock.vue
rename to packages/components/src/components/v-icon/custom-icons/folder_lock.vue
diff --git a/app/src/components/v-icon/custom-icons/folder_move.vue b/packages/components/src/components/v-icon/custom-icons/folder_move.vue
similarity index 100%
rename from app/src/components/v-icon/custom-icons/folder_move.vue
rename to packages/components/src/components/v-icon/custom-icons/folder_move.vue
diff --git a/app/src/components/v-icon/custom-icons/grid_1.vue b/packages/components/src/components/v-icon/custom-icons/grid_1.vue
similarity index 100%
rename from app/src/components/v-icon/custom-icons/grid_1.vue
rename to packages/components/src/components/v-icon/custom-icons/grid_1.vue
diff --git a/app/src/components/v-icon/custom-icons/grid_2.vue b/packages/components/src/components/v-icon/custom-icons/grid_2.vue
similarity index 100%
rename from app/src/components/v-icon/custom-icons/grid_2.vue
rename to packages/components/src/components/v-icon/custom-icons/grid_2.vue
diff --git a/app/src/components/v-icon/custom-icons/grid_3.vue b/packages/components/src/components/v-icon/custom-icons/grid_3.vue
similarity index 100%
rename from app/src/components/v-icon/custom-icons/grid_3.vue
rename to packages/components/src/components/v-icon/custom-icons/grid_3.vue
diff --git a/app/src/components/v-icon/custom-icons/grid_4.vue b/packages/components/src/components/v-icon/custom-icons/grid_4.vue
similarity index 100%
rename from app/src/components/v-icon/custom-icons/grid_4.vue
rename to packages/components/src/components/v-icon/custom-icons/grid_4.vue
diff --git a/app/src/components/v-icon/custom-icons/grid_5.vue b/packages/components/src/components/v-icon/custom-icons/grid_5.vue
similarity index 100%
rename from app/src/components/v-icon/custom-icons/grid_5.vue
rename to packages/components/src/components/v-icon/custom-icons/grid_5.vue
diff --git a/app/src/components/v-icon/custom-icons/grid_6.vue b/packages/components/src/components/v-icon/custom-icons/grid_6.vue
similarity index 100%
rename from app/src/components/v-icon/custom-icons/grid_6.vue
rename to packages/components/src/components/v-icon/custom-icons/grid_6.vue
diff --git a/app/src/components/v-icon/custom-icons/logout.vue b/packages/components/src/components/v-icon/custom-icons/logout.vue
similarity index 100%
rename from app/src/components/v-icon/custom-icons/logout.vue
rename to packages/components/src/components/v-icon/custom-icons/logout.vue
diff --git a/app/src/components/v-icon/custom-icons/signal_wifi_1_bar.vue b/packages/components/src/components/v-icon/custom-icons/signal_wifi_1_bar.vue
similarity index 100%
rename from app/src/components/v-icon/custom-icons/signal_wifi_1_bar.vue
rename to packages/components/src/components/v-icon/custom-icons/signal_wifi_1_bar.vue
diff --git a/app/src/components/v-icon/custom-icons/signal_wifi_2_bar.vue b/packages/components/src/components/v-icon/custom-icons/signal_wifi_2_bar.vue
similarity index 100%
rename from app/src/components/v-icon/custom-icons/signal_wifi_2_bar.vue
rename to packages/components/src/components/v-icon/custom-icons/signal_wifi_2_bar.vue
diff --git a/app/src/components/v-icon/custom-icons/signal_wifi_3_bar.vue b/packages/components/src/components/v-icon/custom-icons/signal_wifi_3_bar.vue
similarity index 100%
rename from app/src/components/v-icon/custom-icons/signal_wifi_3_bar.vue
rename to packages/components/src/components/v-icon/custom-icons/signal_wifi_3_bar.vue
diff --git a/packages/components/src/components/v-icon/social-icon.vue b/packages/components/src/components/v-icon/social-icon.vue
new file mode 100644
index 0000000000..d9e670fa3f
--- /dev/null
+++ b/packages/components/src/components/v-icon/social-icon.vue
@@ -0,0 +1,30 @@
+<template>
+	<render />
+</template>
+
+<script setup lang="ts">
+import { h } from 'vue';
+import { icon, findIconDefinition, IconName } from '@fortawesome/fontawesome-svg-core';
+
+interface Props {
+	name: IconName;
+}
+
+const props = defineProps<Props>();
+
+const render = () => {
+	const socialIcon = icon(findIconDefinition({ prefix: 'fab', iconName: props.name }));
+
+	if (socialIcon && socialIcon.abstract[0] && socialIcon.abstract[0].children && socialIcon.abstract[0].children[0]) {
+		return h(
+			'svg',
+			{
+				...socialIcon.abstract[0].attributes,
+			},
+			h('path', { ...socialIcon.abstract![0].children![0].attributes })
+		);
+	}
+
+	return null;
+};
+</script>
diff --git a/packages/components/src/components/v-icon/v-icon.test.ts b/packages/components/src/components/v-icon/v-icon.test.ts
new file mode 100644
index 0000000000..b1c4c354e5
--- /dev/null
+++ b/packages/components/src/components/v-icon/v-icon.test.ts
@@ -0,0 +1,51 @@
+import { test, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import VIcon from './v-icon.vue';
+
+test('Mount component', () => {
+	expect(VIcon).toBeTruthy();
+
+	const wrapper = mount(VIcon, {
+		props: {
+			name: 'close',
+		},
+	});
+
+	expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('style props', () => {
+	const props = ['x-small', 'small', 'large', 'x-large', 'left', 'right'];
+
+	for (const prop of props) {
+		const wrapper = mount(VIcon, {
+			props: {
+				name: 'close',
+				[prop]: true,
+			},
+		});
+
+		expect(wrapper.classes()).toContain(prop);
+	}
+});
+
+test('custom icon', () => {
+	const wrapper = mount(VIcon, {
+		props: {
+			name: 'directus',
+		},
+	});
+
+	expect(wrapper.find('svg').exists()).toBeTruthy();
+});
+
+test('social icon', () => {
+	const wrapper = mount(VIcon, {
+		props: {
+			name: 'docker',
+		},
+	});
+
+	expect(wrapper.find('svg').exists()).toBeTruthy();
+});
diff --git a/app/src/components/v-icon/v-icon.vue b/packages/components/src/components/v-icon/v-icon.vue
similarity index 81%
rename from app/src/components/v-icon/v-icon.vue
rename to packages/components/src/components/v-icon/v-icon.vue
index ab812eb0d3..8729dde16a 100644
--- a/app/src/components/v-icon/v-icon.vue
+++ b/packages/components/src/components/v-icon/v-icon.vue
@@ -2,22 +2,24 @@
 	<span
 		class="v-icon"
 		:class="[sizeClass, { 'has-click': !disabled && clickable, left, right }]"
-		:role="clickable ? 'button' : null"
-		:tabindex="clickable ? 0 : null"
+		:role="clickable ? 'button' : undefined"
+		:tabindex="clickable ? 0 : undefined"
 		:style="{ '--v-icon-color': color }"
 		@click="emitClick"
 	>
 		<component :is="customIconName" v-if="customIconName" />
-		<socialIcon v-else-if="socialIconName" :name="socialIconName" />
+		<SocialIcon v-else-if="socialIconName" :name="socialIconName" />
 		<i v-else :class="{ filled }" :data-icon="name"></i>
 	</span>
 </template>
 
-<script lang="ts">
-import { defineComponent, computed } from 'vue';
+<script setup lang="ts">
+import { computed } from 'vue';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { fab } from '@fortawesome/free-brands-svg-icons';
-import { useSizeClass, sizeProps } from '@/composables/use-size-class';
+import { useSizeClass } from '@directus/shared/composables';
+import { IconName } from '@fortawesome/fontawesome-svg-core';
+import { capitalize } from 'lodash';
 
 import CustomIconDirectus from './custom-icons/directus.vue';
 import CustomIconBookmarkSave from './custom-icons/bookmark_save.vue';
@@ -40,28 +42,28 @@ import CustomIconLogout from './custom-icons/logout.vue';
 
 import SocialIcon from './social-icon.vue';
 
-library.add(fab);
+const components: Record<string, any> = {
+	CustomIconDirectus,
+	CustomIconBookmarkSave,
+	CustomIconBox,
+	CustomIconCommitNode,
+	CustomIconGrid1,
+	CustomIconGrid2,
+	CustomIconGrid3,
+	CustomIconGrid4,
+	CustomIconGrid5,
+	CustomIconGrid6,
+	CustomIconSignalWifi1Bar,
+	CustomIconSignalWifi2Bar,
+	CustomIconSignalWifi3Bar,
+	CustomIconFlipHorizontal,
+	CustomIconFlipVertical,
+	CustomIconFolderMove,
+	CustomIconFolderLock,
+	CustomIconLogout,
+};
 
-const customIcons: string[] = [
-	'directus',
-	'bookmark_save',
-	'box',
-	'commit_node',
-	'grid_1',
-	'grid_2',
-	'grid_3',
-	'grid_4',
-	'grid_5',
-	'grid_6',
-	'signal_wifi_1_bar',
-	'signal_wifi_2_bar',
-	'signal_wifi_3_bar',
-	'flip_horizontal',
-	'flip_vertical',
-	'folder_move',
-	'folder_lock',
-	'logout',
-];
+library.add(fab);
 
 const socialIcons: string[] = [
 	'500px',
@@ -522,94 +524,65 @@ const socialIcons: string[] = [
 	'zhihu',
 ];
 
-export default defineComponent({
-	components: {
-		CustomIconDirectus,
-		CustomIconBookmarkSave,
-		CustomIconBox,
-		CustomIconCommitNode,
-		CustomIconGrid1,
-		CustomIconGrid2,
-		CustomIconGrid3,
-		CustomIconGrid4,
-		CustomIconGrid5,
-		CustomIconGrid6,
-		CustomIconSignalWifi1Bar,
-		CustomIconSignalWifi2Bar,
-		CustomIconSignalWifi3Bar,
-		CustomIconFlipHorizontal,
-		CustomIconFlipVertical,
-		CustomIconFolderMove,
-		CustomIconFolderLock,
-		CustomIconLogout,
-		SocialIcon,
-	},
-	props: {
-		name: {
-			type: String,
-			required: true,
-		},
-		filled: {
-			type: Boolean,
-			default: false,
-		},
-		sup: {
-			type: Boolean,
-			default: false,
-		},
-		left: {
-			type: Boolean,
-			default: false,
-		},
-		right: {
-			type: Boolean,
-			default: false,
-		},
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-		clickable: {
-			type: Boolean,
-			default: false,
-		},
-		color: {
-			type: String,
-			default: null,
-		},
-		...sizeProps,
-	},
-	emits: ['click'],
+interface Props {
+	/** Which type of icon to display */
+	name: string;
+	/** Removes the outline style if enabled */
+	filled?: boolean;
+	/** Makes the icon very small */
+	sup?: boolean;
+	/** Displays the icon more to the left */
+	left?: boolean;
+	/** Displays the icon more to the right */
+	right?: boolean;
+	/** Disables the icon */
+	disabled?: boolean;
+	/** If it should render inside a button */
+	clickable?: boolean;
+	/** What color for the icon to use */
+	color?: string;
+	/** Makes the icon smaller */
+	xSmall?: boolean;
+	/** Makes the icon small */
+	small?: boolean;
+	/** Makes the icon large */
+	large?: boolean;
+	/**	Makes the icon larger */
+	xLarge?: boolean;
+}
 
-	setup(props, { emit }) {
-		const sizeClass = computed<string | null>(() => {
-			if (props.sup) return 'sup';
-			return useSizeClass(props).value;
-		});
-
-		const customIconName = computed<string | null>(() => {
-			if (customIcons.includes(props.name)) return `custom-icon-${props.name}`.replace(/_/g, '-');
-			return null;
-		});
-
-		const socialIconName = computed<string | null>(() => {
-			if (socialIcons.includes(props.name)) return props.name.replace(/_/g, '-');
-			return null;
-		});
-
-		return {
-			sizeClass,
-			customIconName,
-			socialIconName,
-			emitClick,
-		};
-
-		function emitClick(event: MouseEvent) {
-			if (props.disabled) return;
-			emit('click', event);
-		}
-	},
+const props = withDefaults(defineProps<Props>(), {
+	filled: false,
+	sup: false,
+	left: false,
+	right: false,
+	disabled: false,
+	clickable: false,
+	color: undefined,
 });
+
+const emit = defineEmits(['click']);
+
+const sizeClass = computed<string | null>(() => {
+	if (props.sup) return 'sup';
+	return useSizeClass(props).value;
+});
+
+const customIconName = computed(() => {
+	const name = `CustomIcon${capitalize(props.name.replace(/_/g, '-'))}`;
+	if (name in components) return components[name];
+	return null;
+});
+
+const socialIconName = computed<IconName | null>(() => {
+	if (socialIcons.includes(props.name)) return props.name.replace(/_/g, '-') as IconName;
+	return null;
+});
+
+function emitClick(event: MouseEvent) {
+	if (props.disabled) return;
+	emit('click', event);
+}
 </script>
 
 <style>
diff --git a/packages/components/src/components/v-info.test.ts b/packages/components/src/components/v-info.test.ts
new file mode 100644
index 0000000000..3d520097af
--- /dev/null
+++ b/packages/components/src/components/v-info.test.ts
@@ -0,0 +1,53 @@
+import { test, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import VInfo from './v-info.vue';
+import { GlobalMountOptions } from '@vue/test-utils/dist/types';
+
+const global: GlobalMountOptions = {
+	stubs: ['v-icon'],
+};
+
+test('Mount component', () => {
+	expect(VInfo).toBeTruthy();
+
+	const wrapper = mount(VInfo, {
+		props: {
+			title: 'This is an info',
+		},
+		slots: {
+			default: 'content',
+		},
+		global,
+	});
+
+	expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('stlye props', async () => {
+	const types = ['info', 'success', 'warning', 'danger', 'center'];
+
+	for (const type of types) {
+		const wrapper = mount(VInfo, {
+			props: {
+				title: 'This is an info',
+				type,
+			},
+			global,
+		});
+
+		expect(wrapper.classes()).toContain(type);
+	}
+});
+
+test('icon prop', async () => {
+	const wrapper = mount(VInfo, {
+		props: {
+			title: 'This is an info',
+			icon: 'close',
+		},
+		global,
+	});
+
+	expect(wrapper.getComponent({ name: 'v-icon' }).attributes().name).toBe('close');
+});
diff --git a/app/src/components/v-info.vue b/packages/components/src/components/v-info.vue
similarity index 75%
rename from app/src/components/v-info.vue
rename to packages/components/src/components/v-info.vue
index f4ab85a386..d19e500edf 100644
--- a/app/src/components/v-info.vue
+++ b/packages/components/src/components/v-info.vue
@@ -9,28 +9,22 @@
 	</div>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
+<script setup lang="ts">
+interface Props {
+	/** The title to display in the info */
+	title: string;
+	/** What icon to render above the title */
+	icon?: string;
+	/** Styling of the info */
+	type?: 'info' | 'success' | 'warning' | 'danger';
+	/** Displays the info centered */
+	center?: boolean;
+}
 
-export default defineComponent({
-	props: {
-		icon: {
-			type: String,
-			default: 'box',
-		},
-		title: {
-			type: String,
-			required: true,
-		},
-		type: {
-			type: String as PropType<'info' | 'success' | 'warning' | 'danger'>,
-			default: 'info',
-		},
-		center: {
-			type: Boolean,
-			default: false,
-		},
-	},
+withDefaults(defineProps<Props>(), {
+	icon: 'box',
+	type: 'info',
+	center: false,
 });
 </script>
 
diff --git a/packages/components/src/components/v-input.test.ts b/packages/components/src/components/v-input.test.ts
new file mode 100644
index 0000000000..ac51849e1c
--- /dev/null
+++ b/packages/components/src/components/v-input.test.ts
@@ -0,0 +1,66 @@
+import { test, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import VInput from './v-input.vue';
+import { GlobalMountOptions } from '@vue/test-utils/dist/types';
+import { Focus } from '@/__utils__/focus';
+
+const global: GlobalMountOptions = {
+	stubs: ['v-icon'],
+	directives: {
+		focus: Focus,
+	},
+};
+
+test('Mount component', () => {
+	expect(VInput).toBeTruthy();
+
+	const wrapper = mount(VInput, {
+		global,
+	});
+
+	expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('modelValue prop', async () => {
+	const wrapper = mount(VInput, {
+		props: {
+			modelValue: 'my value',
+		},
+		global,
+	});
+
+	expect(wrapper.get('input').element.value).toBe('my value');
+
+	await wrapper.find('input').setValue('my value1');
+
+	expect(wrapper.emitted()['update:modelValue'][0]).toEqual(['my value1']);
+});
+
+test('modelValue trim', async () => {
+	const wrapper = mount(VInput, {
+		props: {
+			modelValue: '  please trim that beard    ',
+			trim: true,
+		},
+		global,
+	});
+
+	await wrapper.find('input').trigger('blur');
+
+	expect(wrapper.emitted()['update:modelValue'][0]).toEqual(['please trim that beard']);
+});
+
+test('modelValue dbSafe', async () => {
+	const wrapper = mount(VInput, {
+		props: {
+			modelValue: 'this $hould be Dß save!!',
+			dbSafe: true,
+		},
+		global,
+	});
+
+	await wrapper.find('input').trigger('input');
+
+	expect(wrapper.emitted()['update:modelValue'][0]).toEqual(['this_hould_be_D_save']);
+});
diff --git a/app/src/components/v-input.vue b/packages/components/src/components/v-input.vue
similarity index 90%
rename from app/src/components/v-input.vue
rename to packages/components/src/components/v-input.vue
index 1ed4f1a416..281d461555 100644
--- a/app/src/components/v-input.vue
+++ b/packages/components/src/components/v-input.vue
@@ -67,26 +67,47 @@ import { omit } from 'lodash';
 import slugify from '@sindresorhus/slugify';
 
 interface Props {
+	/** Autofocusses the input on render */
 	autofocus?: boolean;
+	/** Set the disabled state for the input */
 	disabled?: boolean;
+	/** If the input should be clickable */
 	clickable?: boolean;
+	/** Prefix the users value with a value */
 	prefix?: string;
+	/** Show a value at the end of the input */
 	suffix?: string;
+	/** Render the input with 100% width */
 	fullWidth?: boolean;
+	/** What text to display if the input is empty */
 	placeholder?: string | number;
+	/** Used to model the value written inside the input */
 	modelValue?: string | number;
+	/** When active, sets an empty entry to null */
 	nullable?: boolean;
+	/** Force the value to be URL safe */
 	slug?: boolean;
+	/** What character to use as separator in slugs */
 	slugSeparator?: string;
+	/** Defines the type of the input. Either `text` or `number` */
 	type?: string;
+	/** Hide the arrows that are used to increase or decrease a number */
 	hideArrows?: boolean;
+	/** The maximum number that can be entered */
 	max?: number;
+	/** The minimum number that can be entered */
 	min?: number;
+	/** In which unit steps should be counted up or down */
 	step?: number;
+	/** Force the focus state */
 	active?: boolean;
+	/** Make the value save to be used with the DB */
 	dbSafe?: boolean;
+	/** Trim the start and end whitespace */
 	trim?: boolean;
+	/** The kind of autocompletion the browser should do on the input */
 	autocomplete?: string;
+	/** Makes the input smaller */
 	small?: boolean;
 }
 
diff --git a/packages/components/src/components/v-item-group.vue b/packages/components/src/components/v-item-group.vue
new file mode 100644
index 0000000000..559838f4e5
--- /dev/null
+++ b/packages/components/src/components/v-item-group.vue
@@ -0,0 +1,47 @@
+<template>
+	<div class="v-item-group">
+		<slot />
+	</div>
+</template>
+
+<script setup lang="ts">
+import { toRefs } from 'vue';
+import { useGroupableParent } from '@directus/shared/composables';
+
+interface Props {
+	/** If enabled, at least one item has to be selected */
+	mandatory?: boolean;
+	/** The maximum amount of items that can be selected */
+	max?: number;
+	/** If enabled, multiple elements can be selected */
+	multiple?: boolean;
+	/** Model what items should be selected */
+	modelValue?: (number | string)[];
+	/** Items that do not have the same scope will be ignored */
+	scope?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	mandatory: false,
+	max: -1,
+	multiple: false,
+	modelValue: undefined,
+	scope: 'item-group',
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const { modelValue: selection, multiple, max, mandatory } = toRefs(props);
+useGroupableParent(
+	{
+		selection: selection,
+		onSelectionChange: (newSelectionValues) => emit('update:modelValue', newSelectionValues),
+	},
+	{
+		multiple: multiple,
+		max: max,
+		mandatory: mandatory,
+	},
+	props.scope
+);
+</script>
diff --git a/packages/components/src/components/v-item.vue b/packages/components/src/components/v-item.vue
new file mode 100644
index 0000000000..04e7ad3353
--- /dev/null
+++ b/packages/components/src/components/v-item.vue
@@ -0,0 +1,36 @@
+<template>
+	<div class="v-item">
+		<slot v-bind="{ active: isActive, toggle }" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import { toRefs } from 'vue';
+import { useGroupable } from '@directus/shared/composables';
+
+interface Props {
+	/** Which value to represent when active */
+	value?: string | number;
+	/** Only matches to a group when both scopes are the same */
+	scope?: string;
+	/** If the item is currently activated */
+	active?: boolean;
+	/** If the active state should update after initially set */
+	watch?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	value: undefined,
+	scope: 'item-group',
+	active: undefined,
+	watch: true,
+});
+
+const { active } = toRefs(props);
+const { active: isActive, toggle } = useGroupable({
+	value: props.value,
+	group: props.scope,
+	watch: props.watch,
+	active,
+});
+</script>
diff --git a/packages/components/src/components/v-list-group.vue b/packages/components/src/components/v-list-group.vue
new file mode 100644
index 0000000000..8e7bc7b7c3
--- /dev/null
+++ b/packages/components/src/components/v-list-group.vue
@@ -0,0 +1,128 @@
+<template>
+	<li class="v-list-group">
+		<v-list-item
+			class="activator"
+			:active="active"
+			:to="to"
+			:exact="exact"
+			:query="query"
+			:disabled="disabled"
+			:dense="dense"
+			:clickable="Boolean(clickable || to || !open)"
+			@click="onClick"
+		>
+			<v-list-item-icon
+				v-if="$slots.default && arrowPlacement && arrowPlacement === 'before'"
+				class="activator-icon"
+				:class="{ active: groupActive }"
+			>
+				<v-icon name="chevron_right" :disabled="disabled" @click.stop.prevent="toggle" />
+			</v-list-item-icon>
+
+			<slot name="activator" :active="groupActive" />
+
+			<v-list-item-icon
+				v-if="$slots.default && arrowPlacement && arrowPlacement === 'after'"
+				class="activator-icon"
+				:class="{ active: groupActive }"
+			>
+				<v-icon name="chevron_right" :disabled="disabled" @click.stop.prevent="toggle" />
+			</v-list-item-icon>
+		</v-list-item>
+
+		<ul v-if="groupActive" class="items">
+			<slot />
+		</ul>
+	</li>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useGroupable } from '@directus/shared/composables';
+
+interface Props {
+	/** If enabled, multiple elements can be selected */
+	multiple?: boolean;
+	/** To what route the item should link to */
+	to?: string;
+	/** Renders an active state if the route matches exactly */
+	exact?: boolean;
+	/** Renders an active state it the route matches the query  */
+	query?: boolean;
+	/** Disables the group */
+	disabled?: boolean;
+	/** If the group itself should be selectable */
+	clickable?: boolean;
+	/** Only matches to a group when both scopes are the same */
+	scope?: string;
+	/** Which value to represent when active */
+	value?: number | string;
+	/** Renders the group densely */
+	dense?: boolean;
+	/** Overrides the internal open state */
+	open?: boolean;
+	/** Where the visual arrow should be placed */
+	arrowPlacement?: 'before' | 'after' | false;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	multiple: true,
+	to: '',
+	exact: false,
+	query: false,
+	disabled: false,
+	clickable: false,
+	scope: 'v-list',
+	value: undefined,
+	dense: false,
+	open: false,
+	arrowPlacement: 'after',
+});
+
+const emit = defineEmits(['click']);
+
+const { active, toggle } = useGroupable({
+	group: props.scope,
+	value: props.value,
+});
+
+const groupActive = computed(() => active.value || props.open);
+
+function onClick(event: MouseEvent) {
+	if (props.to) return null;
+	if (props.clickable) return emit('click', event);
+
+	event.stopPropagation();
+	toggle();
+}
+</script>
+
+<style lang="scss" scoped>
+.v-list-group {
+	margin-bottom: 4px;
+
+	&:last-child {
+		margin-bottom: 0;
+	}
+
+	.activator-icon {
+		margin-right: 0 !important;
+		color: var(--foreground-subdued);
+		transform: rotate(0deg);
+		transition: transform var(--medium) var(--transition);
+
+		&:hover {
+			color: var(--foreground-normal);
+		}
+
+		&.active {
+			transform: rotate(90deg);
+		}
+	}
+
+	.items {
+		padding-left: 18px;
+		list-style: none;
+	}
+}
+</style>
diff --git a/app/src/components/v-list-item-content.vue b/packages/components/src/components/v-list-item-content.vue
similarity index 100%
rename from app/src/components/v-list-item-content.vue
rename to packages/components/src/components/v-list-item-content.vue
diff --git a/app/src/components/v-list-item-hint.vue b/packages/components/src/components/v-list-item-hint.vue
similarity index 83%
rename from app/src/components/v-list-item-hint.vue
rename to packages/components/src/components/v-list-item-hint.vue
index e1a30dad41..853f6c79c0 100644
--- a/app/src/components/v-list-item-hint.vue
+++ b/packages/components/src/components/v-list-item-hint.vue
@@ -4,16 +4,13 @@
 	</div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
+interface Props {
+	center?: boolean;
+}
 
-export default defineComponent({
-	props: {
-		center: {
-			type: Boolean,
-			default: false,
-		},
-	},
+withDefaults(defineProps<Props>(), {
+	center: false,
 });
 </script>
 
diff --git a/app/src/components/v-list-item-icon.vue b/packages/components/src/components/v-list-item-icon.vue
similarity index 85%
rename from app/src/components/v-list-item-icon.vue
rename to packages/components/src/components/v-list-item-icon.vue
index 0fa3038998..8d73280968 100644
--- a/app/src/components/v-list-item-icon.vue
+++ b/packages/components/src/components/v-list-item-icon.vue
@@ -4,16 +4,13 @@
 	</div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
+interface Props {
+	center?: boolean;
+}
 
-export default defineComponent({
-	props: {
-		center: {
-			type: Boolean,
-			default: false,
-		},
-	},
+withDefaults(defineProps<Props>(), {
+	center: false,
 });
 </script>
 
diff --git a/app/src/components/v-list-item.vue b/packages/components/src/components/v-list-item.vue
similarity index 68%
rename from app/src/components/v-list-item.vue
rename to packages/components/src/components/v-list-item.vue
index 75fd80055b..78cfa20256 100644
--- a/app/src/components/v-list-item.vue
+++ b/packages/components/src/components/v-list-item.vue
@@ -20,132 +20,116 @@
 	</component>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { RouteLocation, useLink, useRoute } from 'vue-router';
-import { defineComponent, PropType, computed } from 'vue';
-import { useGroupable } from '@/composables/use-groupable';
+import { computed } from 'vue';
+import { useGroupable } from '@directus/shared/composables';
 import { isEqual } from 'lodash';
 
-export default defineComponent({
-	props: {
-		block: {
-			type: Boolean,
-			default: false,
-		},
-		dense: {
-			type: Boolean,
-			default: false,
-		},
-		to: {
-			type: [String, Object] as PropType<string | RouteLocation>,
-			default: '',
-		},
-		href: {
-			type: String,
-			default: undefined,
-		},
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-		clickable: {
-			type: Boolean,
-			default: false,
-		},
-		active: {
-			type: Boolean,
-			default: undefined,
-		},
-		dashed: {
-			type: Boolean,
-			default: false,
-		},
-		exact: {
-			type: Boolean,
-			default: false,
-		},
-		query: {
-			type: Boolean,
-			default: false,
-		},
-		download: {
-			type: String,
-			default: undefined,
-		},
-		value: {
-			type: [String, Number],
-			default: undefined,
-		},
-		nav: {
-			type: Boolean,
-			default: false,
-		},
-		scope: {
-			type: String,
-			default: 'v-list',
-		},
-	},
-	emits: ['click'],
-	setup(props, { emit }) {
-		const route = useRoute();
+interface Props {
+	block?: boolean;
+	/** Makes the item smaller */
+	dense?: boolean;
+	/** Where the item should link to */
+	to?: string | RouteLocation;
+	/** Same as to except that it takes an external link */
+	href?: string;
+	/** Disables the item */
+	disabled?: boolean;
+	/** If the item should be clickable */
+	clickable?: boolean;
+	/** If the item should be active or not */
+	active?: boolean;
+	/** Adds a dashed style */
+	dashed?: boolean;
+	/** Renders an active state if the route matches exactly */
+	exact?: boolean;
+	/** Renders an active state it the route matches the query  */
+	query?: boolean;
+	/** Signal that the target link is a downloadable file */
+	download?: string;
+	/** What value to represent when active */
+	value?: number | string;
+	/** If the item is inside the navigation */
+	nav?: boolean;
+	/** Only matches to a group when both scopes are the same */
+	scope?: string;
+}
 
-		const { route: linkRoute, isActive, isExactActive } = useLink(props);
-
-		const component = computed(() => {
-			if (props.to) return 'router-link';
-			if (props.href) return 'a';
-			return 'li';
-		});
-
-		const additionalProps = computed(() => {
-			if (props.to) {
-				return {
-					to: props.to,
-				};
-			}
-
-			if (component.value === 'a') {
-				return {
-					href: props.href,
-					target: '_blank',
-					rel: 'noopener noreferrer',
-				};
-			}
-
-			return {};
-		});
-
-		useGroupable({
-			value: props.value,
-			group: props.scope,
-		});
-
-		const isLink = computed(() => Boolean(props.to || props.href || props.clickable));
-
-		const isActiveRoute = computed(() => {
-			if (props.active !== undefined) return props.active;
-
-			if (props.to) {
-				const isQueryActive = !props.query || isEqual(route.query, linkRoute.value.query);
-
-				if (!props.exact) {
-					return isActive.value && isQueryActive;
-				} else {
-					return isExactActive.value && isQueryActive;
-				}
-			}
-
-			return false;
-		});
-
-		return { component, additionalProps, isLink, isActiveRoute, onClick };
-
-		function onClick(event: PointerEvent) {
-			if (props.disabled === true) return;
-			emit('click', event);
-		}
-	},
+const props = withDefaults(defineProps<Props>(), {
+	block: false,
+	dense: false,
+	to: '',
+	href: undefined,
+	disabled: false,
+	clickable: false,
+	active: undefined,
+	dashed: false,
+	exact: false,
+	query: false,
+	download: undefined,
+	value: undefined,
+	nav: false,
+	scope: 'v-list',
 });
+
+const emit = defineEmits(['click']);
+
+const route = useRoute();
+
+const { route: linkRoute, isActive, isExactActive } = useLink(props);
+
+const component = computed(() => {
+	if (props.to) return 'router-link';
+	if (props.href) return 'a';
+	return 'li';
+});
+
+const additionalProps = computed(() => {
+	if (props.to) {
+		return {
+			to: props.to,
+		};
+	}
+
+	if (component.value === 'a') {
+		return {
+			href: props.href,
+			target: '_blank',
+			rel: 'noopener noreferrer',
+		};
+	}
+
+	return {};
+});
+
+useGroupable({
+	value: props.value,
+	group: props.scope,
+});
+
+const isLink = computed(() => Boolean(props.to || props.href || props.clickable));
+
+const isActiveRoute = computed(() => {
+	if (props.active !== undefined) return props.active;
+
+	if (props.to) {
+		const isQueryActive = !props.query || isEqual(route.query, linkRoute.value.query);
+
+		if (!props.exact) {
+			return isActive.value && isQueryActive;
+		} else {
+			return isExactActive.value && isQueryActive;
+		}
+	}
+
+	return false;
+});
+
+function onClick(event: PointerEvent) {
+	if (props.disabled === true) return;
+	emit('click', event);
+}
 </script>
 
 <style>
diff --git a/app/src/components/v-list.vue b/packages/components/src/components/v-list.vue
similarity index 51%
rename from app/src/components/v-list.vue
rename to packages/components/src/components/v-list.vue
index d62d6ac6df..98bb88f480 100644
--- a/app/src/components/v-list.vue
+++ b/packages/components/src/components/v-list.vue
@@ -4,61 +4,54 @@
 	</ul>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType, toRefs } from 'vue';
-import { useGroupableParent } from '@/composables/use-groupable';
+<script setup lang="ts">
+import { toRefs } from 'vue';
+import { useGroupableParent } from '@directus/shared/composables';
 
-export default defineComponent({
-	props: {
-		modelValue: {
-			type: Array as PropType<(number | string)[]>,
-			default: null,
-		},
-		nav: {
-			type: Boolean,
-			default: false,
-		},
-		dense: {
-			type: Boolean,
-			default: false,
-		},
-		multiple: {
-			type: Boolean,
-			default: true,
-		},
-		mandatory: {
-			type: Boolean,
-			default: true,
-		},
-		scope: {
-			type: String,
-			default: 'v-list',
-		},
-	},
-	emits: ['update:modelValue', 'toggle'],
-	setup(props, { emit }) {
-		const { modelValue, multiple, mandatory } = toRefs(props);
+interface Props {
+	/** Model what elements should be currently active */
+	modelValue?: (string | number)[];
+	/** If the item is inside the navigation */
+	nav?: boolean;
+	/** Renders the list densely */
+	dense?: boolean;
+	/** Allows to select multiple items in the list */
+	multiple?: boolean;
+	/** At least one item has to be selected */
+	mandatory?: boolean;
+	/** Items that do not have the same scope will be ignored */
+	scope?: string;
+}
 
-		useGroupableParent(
-			{
-				selection: modelValue,
-				onSelectionChange: (newSelection) => {
-					emit('update:modelValue', newSelection);
-				},
-				onToggle: (item) => {
-					emit('toggle', item);
-				},
-			},
-			{
-				mandatory,
-				multiple,
-			},
-			props.scope
-		);
-
-		return {};
-	},
+const props = withDefaults(defineProps<Props>(), {
+	modelValue: undefined,
+	nav: false,
+	dense: false,
+	multiple: true,
+	mandatory: true,
+	scope: 'v-list',
 });
+
+const emit = defineEmits(['update:modelValue', 'toggle']);
+
+const { modelValue, multiple, mandatory } = toRefs(props);
+
+useGroupableParent(
+	{
+		selection: modelValue,
+		onSelectionChange: (newSelection) => {
+			emit('update:modelValue', newSelection);
+		},
+		onToggle: (item) => {
+			emit('toggle', item);
+		},
+	},
+	{
+		mandatory,
+		multiple,
+	},
+	props.scope
+);
 </script>
 
 <style scoped>
diff --git a/packages/components/src/components/v-menu._test.ts b/packages/components/src/components/v-menu._test.ts
new file mode 100644
index 0000000000..fc3f300486
--- /dev/null
+++ b/packages/components/src/components/v-menu._test.ts
@@ -0,0 +1,36 @@
+import { test, expect, beforeEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import VMenu from './v-menu.vue';
+import TransitionBounce from './transition/bounce.vue';
+import { GlobalMountOptions } from '@vue/test-utils/dist/types';
+import { directive } from '../../../../app/src/directives/click-outside';
+
+beforeEach(() => {
+	// create teleport target
+	const el = document.createElement('div');
+	el.id = 'menu-outlet';
+	document.body.appendChild(el);
+});
+
+const global: GlobalMountOptions = {
+	directives: {
+		'click-outside': directive as any,
+	},
+	components: {
+		TransitionBounce,
+	},
+};
+
+test('Mount component', () => {
+	expect(VMenu).toBeTruthy();
+
+	const wrapper = mount(VMenu, {
+		slots: {
+			default: 'Slot Content',
+		},
+		global,
+	});
+
+	expect(wrapper.html()).toMatchSnapshot();
+});
diff --git a/packages/components/src/components/v-menu.vue b/packages/components/src/components/v-menu.vue
new file mode 100644
index 0000000000..ab3c45c301
--- /dev/null
+++ b/packages/components/src/components/v-menu.vue
@@ -0,0 +1,576 @@
+<template>
+	<div class="v-menu" @click="onClick">
+		<div
+			ref="activator"
+			class="v-menu-activator"
+			:class="{ attached }"
+			@pointerenter.stop="onPointerEnter"
+			@pointerleave.stop="onPointerLeave"
+		>
+			<slot
+				name="activator"
+				v-bind="{
+					toggle: toggle,
+					active: isActive,
+					activate: activate,
+					deactivate: deactivate,
+				}"
+			/>
+		</div>
+
+		<teleport to="#menu-outlet">
+			<transition-bounce>
+				<div
+					v-if="isActive"
+					:id="id"
+					:key="id"
+					v-click-outside="{
+						handler: deactivate,
+						middleware: onClickOutsideMiddleware,
+						disabled: closeOnClick === false,
+						events: ['click'],
+					}"
+					class="v-menu-popper"
+					:class="{ active: isActive, attached }"
+					:data-placement="popperPlacement"
+					:style="styles"
+				>
+					<div class="arrow" :class="{ active: showArrow && isActive }" :style="arrowStyles" data-popper-arrow />
+					<div
+						class="v-menu-content"
+						:class="{ 'full-height': fullHeight, seamless }"
+						@click.stop="onContentClick"
+						@pointerenter.stop="onPointerEnter"
+						@pointerleave.stop="onPointerLeave"
+					>
+						<slot
+							v-bind="{
+								toggle: toggle,
+								active: isActive,
+								activate: activate,
+								deactivate: deactivate,
+							}"
+						/>
+					</div>
+				</div>
+			</transition-bounce>
+		</teleport>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { Instance, Modifier, Placement } from '@popperjs/core';
+import arrow from '@popperjs/core/lib/modifiers/arrow';
+import computeStyles from '@popperjs/core/lib/modifiers/computeStyles';
+import eventListeners from '@popperjs/core/lib/modifiers/eventListeners';
+import flip from '@popperjs/core/lib/modifiers/flip';
+import offset from '@popperjs/core/lib/modifiers/offset';
+import popperOffsets from '@popperjs/core/lib/modifiers/popperOffsets';
+import preventOverflow from '@popperjs/core/lib/modifiers/preventOverflow';
+import { createPopper } from '@popperjs/core/lib/popper-lite';
+import { debounce } from 'lodash';
+import { nanoid } from 'nanoid/non-secure';
+import { computed, nextTick, onUnmounted, ref, Ref, watch } from 'vue';
+
+interface Props {
+	/** Where to position the popper */
+	placement?: Placement;
+	/** Model the open state */
+	modelValue?: boolean;
+	/** Close the menu when clicking outside of the menu */
+	closeOnClick?: boolean;
+	/** Close the menu when clicking the content of the menu */
+	closeOnContentClick?: boolean;
+	/** Attach the menu to an input */
+	attached?: boolean;
+	/** Show an arrow pointer */
+	showArrow?: boolean;
+	/** Menu does not appear */
+	disabled?: boolean;
+	/** Activate the menu on a trigger */
+	trigger?: 'hover' | 'click' | 'keyDown' | null;
+	/** Time in ms before menu activates after trigger */
+	delay?: number;
+	/** Offset from the top */
+	offsetY?: number;
+	/** Offset from the left */
+	offsetX?: number;
+	/** Removes the scrollbar */
+	fullHeight?: boolean;
+	/** Removes any styling from the menu */
+	seamless?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	placement: 'bottom',
+	modelValue: undefined,
+	closeOnClick: true,
+	closeOnContentClick: true,
+	attached: false,
+	showArrow: false,
+	disabled: false,
+	trigger: null,
+	delay: 0,
+	offsetY: 8,
+	offsetX: 0,
+	fullHeight: false,
+	seamless: false,
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const activator = ref<HTMLElement | null>(null);
+const reference = ref<HTMLElement | null>(null);
+
+defineExpose({ activator });
+
+const virtualReference = ref({
+	getBoundingClientRect() {
+		return {
+			top: 0,
+			left: 0,
+			bottom: 0,
+			right: 0,
+			width: 0,
+			height: 0,
+		};
+	},
+});
+
+const id = computed(() => nanoid());
+const popper = ref<HTMLElement | null>(null);
+
+const {
+	start,
+	stop,
+	styles,
+	arrowStyles,
+	placement: popperPlacement,
+} = usePopper(
+	reference as any, // Fix as TS thinks Ref<HTMLElement | null> !== Ref<HTMLElement | null> 🙃
+	popper as any,
+	computed(() => ({
+		placement: props.placement,
+		attached: props.attached,
+		arrow: props.showArrow,
+		offsetY: props.offsetY,
+		offsetX: props.offsetX,
+	}))
+);
+
+const { isActive, activate, deactivate, toggle } = useActiveState();
+
+watch(isActive, (newActive) => {
+	if (newActive === true) {
+		reference.value = (activator.value?.children[0] as HTMLElement) || virtualReference.value;
+
+		nextTick(() => {
+			popper.value = document.getElementById(id.value);
+		});
+	}
+});
+
+const { onClick, onPointerEnter, onPointerLeave } = useEvents();
+
+function useActiveState() {
+	const localIsActive = ref(false);
+
+	const isActive = computed<boolean>({
+		get() {
+			if (props.modelValue !== undefined) {
+				return props.modelValue;
+			}
+
+			return localIsActive.value;
+		},
+		async set(newActive) {
+			localIsActive.value = newActive;
+			emit('update:modelValue', newActive);
+		},
+	});
+
+	watch(
+		popper,
+		async () => {
+			if (popper.value !== null) {
+				await start();
+			} else {
+				stop();
+			}
+		},
+		{ immediate: true }
+	);
+
+	return { isActive, activate, deactivate, toggle };
+
+	function activate(event?: MouseEvent) {
+		if (event) {
+			virtualReference.value = {
+				getBoundingClientRect() {
+					return {
+						top: event.clientY,
+						left: event.clientX,
+						bottom: 0,
+						right: 0,
+						width: 0,
+						height: 0,
+					};
+				},
+			};
+		}
+		isActive.value = true;
+	}
+
+	function deactivate() {
+		isActive.value = false;
+	}
+
+	function toggle() {
+		if (props.disabled === true) return;
+		isActive.value = !isActive.value;
+	}
+}
+
+function onClickOutsideMiddleware(e: Event) {
+	return !activator.value?.contains(e.target as Node);
+}
+
+function onContentClick(e: Event) {
+	if (props.closeOnContentClick === true && e.target !== e.currentTarget) {
+		deactivate();
+	}
+}
+
+function useEvents() {
+	const isHovered = ref(false);
+
+	watch(
+		isHovered,
+		debounce((newHoveredState) => {
+			if (newHoveredState) {
+				if (!isActive.value) activate();
+			} else {
+				deactivate();
+			}
+		}, props.delay)
+	);
+
+	return { onClick, onPointerLeave, onPointerEnter };
+
+	function onClick() {
+		if (props.trigger !== 'click') return;
+
+		toggle();
+	}
+
+	function onPointerEnter() {
+		if (props.trigger !== 'hover') return;
+		isHovered.value = true;
+	}
+
+	function onPointerLeave() {
+		if (props.trigger !== 'hover') return;
+		isHovered.value = false;
+	}
+}
+
+function usePopper(
+	reference: Ref<HTMLElement | null>,
+	popper: Ref<HTMLElement | null>,
+	options: Readonly<
+		Ref<Readonly<{ placement: Placement; attached: boolean; arrow: boolean; offsetY: number; offsetX: number }>>
+	>
+): Record<string, any> {
+	const popperInstance = ref<Instance | null>(null);
+	const styles = ref({});
+	const arrowStyles = ref({});
+
+	// The internal placement can change based on the flip / overflow modifiers
+	const placement = ref(options.value.placement);
+
+	onUnmounted(() => {
+		stop();
+	});
+
+	watch(
+		options,
+		() => {
+			popperInstance.value?.setOptions({
+				placement: options.value.attached ? 'bottom-start' : options.value.placement,
+				modifiers: getModifiers(),
+			});
+		},
+		{ immediate: true }
+	);
+
+	const observer = new MutationObserver(() => {
+		popperInstance.value?.forceUpdate();
+	});
+
+	return { popperInstance, placement, start, stop, styles, arrowStyles };
+
+	function start() {
+		return new Promise((resolve) => {
+			popperInstance.value = createPopper(reference.value!, popper.value!, {
+				placement: options.value.attached ? 'bottom-start' : options.value.placement,
+				modifiers: getModifiers(resolve),
+				strategy: 'fixed',
+			});
+			popperInstance.value.forceUpdate();
+			observer.observe(popper.value!, {
+				attributes: false,
+				childList: true,
+				characterData: true,
+				subtree: true,
+			});
+		});
+	}
+
+	function stop() {
+		popperInstance.value?.destroy();
+		observer.disconnect();
+	}
+
+	function getModifiers(callback: (value?: unknown) => void = () => undefined) {
+		const modifiers: Modifier<string, any>[] = [
+			popperOffsets,
+			{
+				...offset,
+				options: {
+					offset: options.value.attached ? [0, 0] : [options.value.offsetX ?? 0, options.value.offsetY ?? 8],
+				},
+			},
+			{
+				...preventOverflow,
+				options: {
+					padding: 8,
+				},
+			},
+			computeStyles,
+			flip,
+			eventListeners,
+			{
+				name: 'placementUpdater',
+				enabled: true,
+				phase: 'afterWrite',
+				fn({ state }) {
+					placement.value = state.placement;
+				},
+			},
+			{
+				name: 'applyStyles',
+				enabled: true,
+				phase: 'write',
+				fn({ state }) {
+					styles.value = state.styles.popper;
+					arrowStyles.value = state.styles.arrow;
+					callback();
+				},
+			},
+		];
+
+		if (options.value.arrow === true) {
+			modifiers.push({
+				...arrow,
+				options: {
+					padding: 6,
+				},
+			});
+		}
+
+		if (options.value.attached === true) {
+			modifiers.push({
+				name: 'sameWidth',
+				enabled: true,
+				fn: ({ state }) => {
+					state.styles.popper.width = `${state.rects.reference.width}px`;
+				},
+				phase: 'beforeWrite',
+				requires: ['computeStyles'],
+			});
+		}
+
+		return modifiers;
+	}
+}
+</script>
+
+<style>
+body {
+	--v-menu-min-width: 100px;
+}
+</style>
+
+<style lang="scss" scoped>
+.v-menu {
+	display: contents;
+}
+
+.v-menu-activator {
+	display: contents;
+}
+
+.v-menu-popper {
+	position: fixed;
+	left: -999px;
+	z-index: 500;
+	min-width: var(--v-menu-min-width);
+	transform: translateY(2px);
+	pointer-events: none;
+
+	&.active {
+		pointer-events: all;
+	}
+}
+
+.arrow,
+.arrow::after {
+	position: absolute;
+	z-index: 1;
+	width: 10px;
+	height: 10px;
+	overflow: hidden;
+	border-radius: 2px;
+	box-shadow: none;
+}
+
+.arrow {
+	&::after {
+		background: var(--card-face-color);
+		transform: rotate(45deg) scale(0);
+		transition: transform var(--fast) var(--transition-out);
+		transition-delay: 0;
+		content: '';
+	}
+
+	&.active::after {
+		transform: rotate(45deg) scale(1);
+		transition: transform var(--medium) var(--transition-in);
+	}
+}
+
+[data-placement^='top'] .arrow {
+	bottom: -6px;
+
+	&::after {
+		bottom: 3px;
+		box-shadow: 2px 2px 4px -2px rgba(var(--card-shadow-color), 0.2);
+	}
+}
+
+[data-placement^='bottom'] .arrow {
+	top: -6px;
+
+	&::after {
+		top: 3px;
+		box-shadow: -2px -2px 4px -2px rgba(var(--card-shadow-color), 0.2);
+	}
+}
+
+[data-placement^='right'] .arrow {
+	left: -6px;
+
+	&::after {
+		left: 2px;
+		box-shadow: -2px 2px 4px -2px rgba(var(--card-shadow-color), 0.2);
+	}
+}
+
+[data-placement^='left'] .arrow {
+	right: -6px;
+
+	&::after {
+		right: 2px;
+		box-shadow: 2px -2px 4px -2px rgba(var(--card-shadow-color), 0.2);
+	}
+}
+
+.v-menu-content {
+	max-height: 30vh;
+	padding: 0 4px;
+	overflow-x: hidden;
+	overflow-y: auto;
+	background-color: var(--card-face-color);
+	border: none;
+	border-radius: var(--border-radius);
+	box-shadow: 0px 0px 6px 0px rgb(var(--card-shadow-color), 0.2), 0px 0px 12px 2px rgb(var(--card-shadow-color), 0.05);
+	transition-timing-function: var(--transition-out);
+	transition-duration: var(--fast);
+	transition-property: opacity, transform;
+	contain: content;
+
+	.v-list {
+		--v-list-background-color: transparent;
+	}
+}
+
+.v-menu-content.full-height {
+	max-height: none;
+}
+
+.v-menu-content.seamless {
+	padding: 0;
+}
+
+[data-placement='top'] > .v-menu-content {
+	transform-origin: bottom center;
+}
+
+[data-placement='top-start'] > .v-menu-content {
+	transform-origin: bottom left;
+}
+
+[data-placement='top-end'] > .v-menu-content {
+	transform-origin: bottom right;
+}
+
+[data-placement='right'] > .v-menu-content {
+	transform-origin: center left;
+}
+
+[data-placement='right-start'] > .v-menu-content {
+	transform-origin: top left;
+}
+
+[data-placement='right-end'] > .v-menu-content {
+	transform-origin: bottom left;
+}
+
+[data-placement='bottom'] > .v-menu-content {
+	transform-origin: top center;
+}
+
+[data-placement='bottom-start'] > .v-menu-content {
+	transform-origin: top left;
+}
+
+[data-placement='bottom-end'] > .v-menu-content {
+	transform-origin: top right;
+}
+
+[data-placement='left'] > .v-menu-content {
+	transform-origin: center right;
+}
+
+[data-placement='left-start'] > .v-menu-content {
+	transform-origin: top right;
+}
+
+[data-placement='left-end'] > .v-menu-content {
+	transform-origin: bottom right;
+}
+
+.attached {
+	&[data-placement^='top'] {
+		> .v-menu-content {
+			transform: translateY(-2px);
+		}
+	}
+
+	&[data-placement^='bottom'] {
+		> .v-menu-content {
+			transform: translateY(2px);
+		}
+	}
+}
+</style>
diff --git a/packages/components/src/components/v-notice.test.ts b/packages/components/src/components/v-notice.test.ts
new file mode 100644
index 0000000000..9945ec9711
--- /dev/null
+++ b/packages/components/src/components/v-notice.test.ts
@@ -0,0 +1,61 @@
+import { test, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import VNotice from './v-notice.vue';
+import { GlobalMountOptions } from '@vue/test-utils/dist/types';
+import { zip } from 'lodash';
+
+const global: GlobalMountOptions = {
+	stubs: ['v-icon'],
+};
+
+test('Mount component', () => {
+	expect(VNotice).toBeTruthy();
+
+	const wrapper = mount(VNotice, {
+		global,
+	});
+
+	expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('type prop', async () => {
+	const types = ['normal', 'info', 'success', 'warning', 'danger'];
+
+	for (const type of types) {
+		const wrapper = mount(VNotice, {
+			props: {
+				type,
+			},
+			global,
+		});
+
+		expect(wrapper.classes()).toContain(type);
+	}
+});
+
+test('icon prop', async () => {
+	const types = ['normal', 'info', 'success', 'warning', 'danger'];
+	const icons = ['info', 'info', 'check_circle', 'warning', 'error'];
+
+	for (const [type, icon] of zip(types, icons)) {
+		const wrapper = mount(VNotice, {
+			props: {
+				type,
+				icon: true,
+			},
+			global,
+		});
+
+		expect(wrapper.getComponent('v-icon-stub').attributes().name).toBe(icon);
+	}
+
+	const wrapper = mount(VNotice, {
+		props: {
+			icon: 'my-icon',
+		},
+		global,
+	});
+
+	expect(wrapper.getComponent('v-icon-stub').attributes().name).toBe('my-icon');
+});
diff --git a/app/src/components/v-notice.vue b/packages/components/src/components/v-notice.vue
similarity index 69%
rename from app/src/components/v-notice.vue
rename to packages/components/src/components/v-notice.vue
index cbb411bdd1..5baa7ce5de 100644
--- a/app/src/components/v-notice.vue
+++ b/packages/components/src/components/v-notice.vue
@@ -5,45 +5,40 @@
 	</div>
 </template>
 
-<script lang="ts">
-import { defineComponent, computed, PropType } from 'vue';
+<script setup lang="ts">
+import { computed } from 'vue';
 
-export default defineComponent({
-	props: {
-		type: {
-			type: String as PropType<'normal' | 'info' | 'success' | 'warning' | 'danger'>,
-			default: 'normal',
-		},
-		icon: {
-			type: [String, Boolean],
-			default: null,
-		},
-		center: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	setup(props) {
-		const iconName = computed(() => {
-			if (props.icon !== false && typeof props.icon === 'string') {
-				return props.icon;
-			}
+interface Props {
+	/** Renders the components in each of it styles */
+	type?: 'normal' | 'info' | 'success' | 'warning' | 'danger';
+	/** Custom icon name, or false if you want to hide the icon completely */
+	icon?: string | boolean | null;
+	/** Render notice content centered */
+	center?: boolean;
+}
 
-			if (props.type == 'info') {
-				return 'info';
-			} else if (props.type == 'success') {
-				return 'check_circle';
-			} else if (props.type == 'warning') {
-				return 'warning';
-			} else if (props.type == 'danger') {
-				return 'error';
-			} else {
-				return 'info';
-			}
-		});
+const props = withDefaults(defineProps<Props>(), {
+	icon: null,
+	type: 'normal',
+	center: false,
+});
 
-		return { iconName };
-	},
+const iconName = computed(() => {
+	if (props.icon !== false && typeof props.icon === 'string') {
+		return props.icon;
+	}
+
+	if (props.type == 'info') {
+		return 'info';
+	} else if (props.type == 'success') {
+		return 'check_circle';
+	} else if (props.type == 'warning') {
+		return 'warning';
+	} else if (props.type == 'danger') {
+		return 'error';
+	} else {
+		return 'info';
+	}
 });
 </script>
 
diff --git a/packages/components/src/components/v-overlay.test.ts b/packages/components/src/components/v-overlay.test.ts
new file mode 100644
index 0000000000..18aedad129
--- /dev/null
+++ b/packages/components/src/components/v-overlay.test.ts
@@ -0,0 +1,39 @@
+import { test, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import VOverlay from './v-overlay.vue';
+
+test('Mount component', () => {
+	expect(VOverlay).toBeTruthy();
+
+	const wrapper = mount(VOverlay, {
+		props: {
+			active: true,
+		},
+		slots: {
+			default: 'Slot Content',
+		},
+	});
+
+	expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('absolute prop', () => {
+	const wrapper = mount(VOverlay, {
+		props: {
+			absolute: true,
+		},
+	});
+
+	expect(wrapper.classes()).toContain('absolute');
+});
+
+test('clickable prop', () => {
+	const wrapper = mount(VOverlay, {
+		props: {
+			clickable: true,
+		},
+	});
+
+	expect(wrapper.classes()).toContain('has-click');
+});
diff --git a/app/src/components/v-overlay.vue b/packages/components/src/components/v-overlay.vue
similarity index 69%
rename from app/src/components/v-overlay.vue
rename to packages/components/src/components/v-overlay.vue
index e47cfae707..6f26cf8168 100644
--- a/app/src/components/v-overlay.vue
+++ b/packages/components/src/components/v-overlay.vue
@@ -5,33 +5,27 @@
 	</div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
+interface Props {
+	/** Show / hide the overlay */
+	active?: boolean;
+	/** Makes the position absolute */
+	absolute?: boolean;
+	/** Makes the overlay clickable */
+	clickable?: boolean;
+}
 
-export default defineComponent({
-	props: {
-		active: {
-			type: Boolean,
-			default: false,
-		},
-		absolute: {
-			type: Boolean,
-			default: false,
-		},
-		clickable: {
-			type: Boolean,
-			default: true,
-		},
-	},
-	emits: ['click'],
-	setup(props, { emit }) {
-		return { onClick };
-
-		function onClick(event: MouseEvent) {
-			emit('click', event);
-		}
-	},
+withDefaults(defineProps<Props>(), {
+	active: false,
+	absolute: false,
+	clickable: true,
 });
+
+const emit = defineEmits(['click']);
+
+function onClick(event: MouseEvent) {
+	emit('click', event);
+}
 </script>
 
 <style>
diff --git a/packages/components/src/components/v-pagination.test.ts b/packages/components/src/components/v-pagination.test.ts
new file mode 100644
index 0000000000..99f8fc15f5
--- /dev/null
+++ b/packages/components/src/components/v-pagination.test.ts
@@ -0,0 +1,65 @@
+import { test, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import VPagination from './v-pagination.vue';
+import { GlobalMountOptions } from '@vue/test-utils/dist/types';
+
+const global: GlobalMountOptions = {
+	stubs: ['v-icon', 'v-button'],
+};
+
+test('Mount component', () => {
+	expect(VPagination).toBeTruthy();
+
+	const wrapper = mount(VPagination, {
+		props: {
+			length: 10,
+			totalVisible: 6,
+			modelValue: 7,
+		},
+		global,
+	});
+
+	expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('length prop', async () => {
+	const wrapper = mount(VPagination, {
+		props: {
+			length: 5,
+		},
+		global,
+	});
+
+	expect(wrapper.element.querySelectorAll('.page').length).toBe(0);
+
+	await wrapper.setProps({ length: 6, totalVisible: 10 });
+
+	expect(wrapper.element.querySelectorAll('.page').length).toBe(6);
+});
+
+test('totalVisible prop', async () => {
+	const wrapper = mount(VPagination, {
+		props: {
+			length: 5,
+			totalVisible: 3,
+		},
+		global,
+	});
+
+	expect(wrapper.element.querySelectorAll('.page').length).toBe(3);
+});
+
+test('showFirstLast prop', async () => {
+	const wrapper = mount(VPagination, {
+		props: {
+			length: 7,
+			totalVisible: 3,
+			modelValue: 4,
+			showFirstLast: true,
+		},
+		global,
+	});
+
+	expect(wrapper.element.querySelectorAll('.page').length).toBe(5);
+});
diff --git a/packages/components/src/components/v-pagination.vue b/packages/components/src/components/v-pagination.vue
new file mode 100644
index 0000000000..42eb156087
--- /dev/null
+++ b/packages/components/src/components/v-pagination.vue
@@ -0,0 +1,202 @@
+<template>
+	<div class="v-pagination">
+		<v-button class="previous" :disabled="disabled || modelValue === 1" secondary icon small @click="toPrev">
+			<v-icon name="chevron_left" />
+		</v-button>
+
+		<v-button
+			v-if="showFirstLast && totalVisible && modelValue > Math.ceil(totalVisible / 2) + 1 && length > totalVisible"
+			class="page"
+			secondary
+			small
+			:disabled="disabled"
+			@click="toPage(1)"
+		>
+			1
+		</v-button>
+
+		<span
+			v-if="showFirstLast && totalVisible && modelValue > Math.ceil(totalVisible / 2) + 1 && length > totalVisible + 1"
+			class="gap"
+		>
+			...
+		</span>
+
+		<v-button
+			v-for="page in visiblePages"
+			:key="page"
+			:class="{ active: modelValue === page }"
+			class="page"
+			secondary
+			small
+			:disabled="disabled"
+			@click="toPage(page)"
+		>
+			{{ page }}
+		</v-button>
+
+		<span
+			v-if="
+				showFirstLast && totalVisible && modelValue < length - Math.ceil(totalVisible / 2) && length > totalVisible + 1
+			"
+			class="gap"
+		>
+			...
+		</span>
+
+		<v-button
+			v-if="
+				showFirstLast && totalVisible && modelValue <= length - Math.ceil(totalVisible / 2) && length > totalVisible
+			"
+			:class="{ active: modelValue === length }"
+			class="page"
+			secondary
+			small
+			:disabled="disabled"
+			@click="toPage(length)"
+		>
+			{{ length }}
+		</v-button>
+
+		<v-button class="next" :disabled="disabled || modelValue === length" secondary icon small @click="toNext">
+			<v-icon name="chevron_right" />
+		</v-button>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps({
+	/** Disables the pagination */
+	disabled: {
+		type: Boolean,
+		default: false,
+	},
+	/** The amount of pages to render */
+	length: {
+		type: Number,
+		required: true,
+		validator: Number.isInteger,
+	},
+	/** Specify the max total visible pagination numbers */
+	totalVisible: {
+		type: Number,
+		default: undefined,
+		validator: (val: number) => val >= 0,
+	},
+	/** Currently selected page */
+	modelValue: {
+		type: Number,
+		default: null,
+	},
+	/** Show first/last buttons */
+	showFirstLast: {
+		type: Boolean,
+		default: false,
+	},
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const visiblePages = computed<number[]>(() => {
+	if (props.totalVisible === undefined) return [];
+
+	let startPage: number;
+	let endPage: number;
+
+	if (!Number.isInteger(props.totalVisible) || props.length <= props.totalVisible) {
+		startPage = 1;
+		endPage = props.length;
+	} else {
+		const pagesBeforeCurrentPage = Math.floor(props.totalVisible / 2);
+		const pagesAfterCurrentPage = Math.ceil(props.totalVisible / 2) - 1;
+
+		if (props.modelValue <= pagesBeforeCurrentPage) {
+			startPage = 1;
+			endPage = props.totalVisible;
+		} else if (props.modelValue + pagesAfterCurrentPage >= props.length) {
+			startPage = props.length - props.totalVisible + 1;
+			endPage = props.length;
+		} else {
+			startPage = props.modelValue - pagesBeforeCurrentPage;
+			endPage = props.modelValue + pagesAfterCurrentPage;
+		}
+	}
+
+	return Array.from(Array(endPage + 1 - startPage).keys()).map((i) => startPage + i);
+});
+
+function toPrev() {
+	toPage(props.modelValue - 1);
+}
+
+function toNext() {
+	toPage(props.modelValue + 1);
+}
+
+function toPage(page: number) {
+	emit('update:modelValue', page);
+}
+</script>
+
+<style scoped>
+:global(body) {
+	--v-pagination-active-color: var(--primary);
+}
+
+.v-pagination {
+	display: flex;
+}
+
+.gap {
+	display: none;
+	margin: 0 4px;
+	color: var(--foreground-subdued);
+	line-height: 2em;
+}
+
+@media (min-width: 600px) {
+	.gap {
+		display: inline;
+	}
+}
+
+.v-button {
+	--v-button-background-color-hover: var(--background-normal);
+	--v-button-background-color: var(--background-subdued);
+	--v-button-color: var(--foreground-normal);
+
+	margin: 0 2px;
+	vertical-align: middle;
+}
+
+.v-button.page:not(.active) {
+	display: none;
+}
+
+@media (min-width: 600px) {
+	.v-button.page:not(.active) {
+		display: inline;
+	}
+}
+
+.v-button :deep(.small) {
+	--v-button-min-width: 32px;
+}
+
+.v-button:first-child {
+	margin-left: 0;
+}
+
+.v-button:last-child {
+	margin-right: 0;
+}
+
+.v-button.active {
+	--v-button-background-color-hover: var(--primary);
+	--v-button-color-hover: var(--foreground-inverted);
+	--v-button-background-color: var(--primary);
+	--v-button-color: var(--foreground-inverted);
+}
+</style>
diff --git a/packages/components/src/components/v-progress-circular.test.ts b/packages/components/src/components/v-progress-circular.test.ts
new file mode 100644
index 0000000000..1d48d23685
--- /dev/null
+++ b/packages/components/src/components/v-progress-circular.test.ts
@@ -0,0 +1,40 @@
+import { test, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import VProgressCircular from './v-progress-circular.vue';
+
+test('Mount component', () => {
+	expect(VProgressCircular).toBeTruthy();
+
+	const wrapper = mount(VProgressCircular, {
+		slots: {
+			default: 'Slot Content',
+		},
+	});
+
+	expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('size props', () => {
+	const props = ['x-small', 'small', 'large', 'x-large'];
+
+	for (const prop of props) {
+		const wrapper = mount(VProgressCircular, {
+			props: {
+				[prop]: true,
+			},
+		});
+
+		expect(wrapper.classes()).toContain(prop);
+	}
+});
+
+test('indeterminate prop', () => {
+	const wrapper = mount(VProgressCircular, {
+		props: {
+			indeterminate: true,
+		},
+	});
+
+	expect(wrapper.get('.circle').classes()).toContain('indeterminate');
+});
diff --git a/app/src/components/v-progress-circular.vue b/packages/components/src/components/v-progress-circular.vue
similarity index 73%
rename from app/src/components/v-progress-circular.vue
rename to packages/components/src/components/v-progress-circular.vue
index dfeb21dc7f..9fefb43778 100644
--- a/app/src/components/v-progress-circular.vue
+++ b/packages/components/src/components/v-progress-circular.vue
@@ -4,7 +4,7 @@
 			class="circle"
 			viewBox="0 0 30 30"
 			:class="{ indeterminate }"
-			@animationiteration="$emit('animationiteration')"
+			@animationiteration="$emit('animationiteration', $event)"
 		>
 			<path
 				class="circle-background"
@@ -22,33 +22,37 @@
 	</div>
 </template>
 
-<script lang="ts">
-import { defineComponent, computed } from 'vue';
-import { useSizeClass, sizeProps } from '@/composables/use-size-class';
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useSizeClass } from '@directus/shared/composables';
 
-export default defineComponent({
-	props: {
-		indeterminate: {
-			type: Boolean,
-			default: false,
-		},
-		value: {
-			type: Number,
-			default: 0,
-		},
-		...sizeProps,
-	},
-	emits: ['animationiteration'],
-	setup(props) {
-		const sizeClass = useSizeClass(props);
+interface Props {
+	/** If set to true displays no value but spins indefinitely */
+	indeterminate?: boolean;
+	/** Which value to represent going from 0 to 100 */
+	value?: number;
+	/** Renders the progress circular smaller */
+	xSmall?: boolean;
+	/** Renders the progress circular small */
+	small?: boolean;
+	/** Renders the progress circular large */
+	large?: boolean;
+	/** Renders the progress circular larger */
+	xLarge?: boolean;
+}
 
-		const circleStyle = computed(() => ({
-			'stroke-dasharray': (props.value / 100) * 78.5 + ', 78.5',
-		}));
-
-		return { sizeClass, circleStyle };
-	},
+const props = withDefaults(defineProps<Props>(), {
+	indeterminate: false,
+	value: 0,
 });
+
+defineEmits(['animationiteration']);
+
+const sizeClass = useSizeClass(props);
+
+const circleStyle = computed(() => ({
+	'stroke-dasharray': (props.value / 100) * 78.5 + ', 78.5',
+}));
 </script>
 
 <style>
diff --git a/packages/components/src/components/v-progress-linear.test.ts b/packages/components/src/components/v-progress-linear.test.ts
new file mode 100644
index 0000000000..fcb315711a
--- /dev/null
+++ b/packages/components/src/components/v-progress-linear.test.ts
@@ -0,0 +1,30 @@
+import { test, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import VProgressLinear from './v-progress-linear.vue';
+
+test('Mount component', () => {
+	expect(VProgressLinear).toBeTruthy();
+
+	const wrapper = mount(VProgressLinear, {
+		slots: {
+			default: 'Slot Content',
+		},
+	});
+
+	expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('style props', () => {
+	const props = ['absolute', 'bottom', 'fixed', 'indeterminate', 'rounded', 'top', 'colorful'];
+
+	for (const prop of props) {
+		const wrapper = mount(VProgressLinear, {
+			props: {
+				[prop]: true,
+			},
+		});
+
+		expect(wrapper.classes()).toContain(prop);
+	}
+});
diff --git a/app/src/components/v-progress-linear.vue b/packages/components/src/components/v-progress-linear.vue
similarity index 66%
rename from app/src/components/v-progress-linear.vue
rename to packages/components/src/components/v-progress-linear.vue
index 0afc90d6b7..2b879ca2c8 100644
--- a/app/src/components/v-progress-linear.vue
+++ b/packages/components/src/components/v-progress-linear.vue
@@ -13,7 +13,7 @@
 			},
 			color,
 		]"
-		@animationiteration="$emit('animationiteration')"
+		@animationiteration="$emit('animationiteration', $event)"
 	>
 		<div
 			class="inner"
@@ -25,54 +25,45 @@
 	</div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent } from 'vue';
+<script setup lang="ts">
+import { computed } from 'vue';
 
-export default defineComponent({
-	props: {
-		absolute: {
-			type: Boolean,
-			default: false,
-		},
-		bottom: {
-			type: Boolean,
-			default: false,
-		},
-		fixed: {
-			type: Boolean,
-			default: false,
-		},
-		indeterminate: {
-			type: Boolean,
-			default: false,
-		},
-		rounded: {
-			type: Boolean,
-			default: false,
-		},
-		top: {
-			type: Boolean,
-			default: false,
-		},
-		value: {
-			type: Number,
-			default: 0,
-		},
-		colorful: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	emits: ['animationiteration'],
-	setup(props) {
-		const color = computed(() => {
-			if (props.value <= 33) return 'danger';
-			if (props.value <= 66) return 'warning';
-			return 'success';
-		});
+interface Props {
+	/** Sets position to absolute */
+	absolute?: boolean;
+	/** Positions the bar at the bottom */
+	bottom?: boolean;
+	/** Sets position to fixed */
+	fixed?: boolean;
+	/** Play a general loading animation */
+	indeterminate?: boolean;
+	/** Rounds up the corners of the progress */
+	rounded?: boolean;
+	/** Positions the bar at the top */
+	top?: boolean;
+	/** Which value to represent from 0 to 100 */
+	value?: number;
+	/** Adds color to progress linear depending on the current percentage */
+	colorful?: boolean;
+}
 
-		return { color };
-	},
+const props = withDefaults(defineProps<Props>(), {
+	absolute: false,
+	bottom: false,
+	fixed: false,
+	indeterminate: false,
+	rounded: false,
+	top: false,
+	value: 0,
+	colorful: false,
+});
+
+defineEmits(['animationiteration']);
+
+const color = computed(() => {
+	if (props.value <= 33) return 'danger';
+	if (props.value <= 66) return 'warning';
+	return 'success';
 });
 </script>
 
diff --git a/packages/components/src/components/v-radio.test.ts b/packages/components/src/components/v-radio.test.ts
new file mode 100644
index 0000000000..36c4b2e088
--- /dev/null
+++ b/packages/components/src/components/v-radio.test.ts
@@ -0,0 +1,43 @@
+import { test, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import VRadio from './v-radio.vue';
+import { GlobalMountOptions } from '@vue/test-utils/dist/types';
+
+const global: GlobalMountOptions = {
+	stubs: ['v-icon'],
+};
+
+test('Mount component', () => {
+	expect(VRadio).toBeTruthy();
+
+	const wrapper = mount(VRadio, {
+		props: {
+			value: 'test',
+			label: 'My Label',
+		},
+		global,
+	});
+
+	expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('modelValue prop', async () => {
+	const wrapper = mount(VRadio, {
+		props: {
+			value: 'test',
+			modelValue: 'test',
+		},
+		global,
+	});
+
+	expect(wrapper.classes()).toContain('checked');
+
+	await wrapper.get('.label').trigger('click');
+
+	expect(wrapper.emitted()['update:modelValue'][0]).toEqual(['test']);
+
+	await wrapper.setProps({ modelValue: null });
+
+	expect(wrapper.classes()).not.toContain('checked');
+});
diff --git a/app/src/components/v-radio.vue b/packages/components/src/components/v-radio.vue
similarity index 60%
rename from app/src/components/v-radio.vue
rename to packages/components/src/components/v-radio.vue
index d2aaf8aa22..7c65237847 100644
--- a/app/src/components/v-radio.vue
+++ b/packages/components/src/components/v-radio.vue
@@ -14,57 +14,48 @@
 	</button>
 </template>
 
-<script lang="ts">
-import { defineComponent, computed } from 'vue';
+<script setup lang="ts">
+import { computed } from 'vue';
 
-export default defineComponent({
-	props: {
-		value: {
-			type: [String, Number],
-			required: true,
-		},
-		modelValue: {
-			type: [String, Number],
-			default: null,
-		},
-		label: {
-			type: String,
-			default: null,
-		},
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-		iconOn: {
-			type: String,
-			default: 'radio_button_checked',
-		},
-		iconOff: {
-			type: String,
-			default: 'radio_button_unchecked',
-		},
-		block: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	emits: ['update:modelValue'],
-	setup(props, { emit }) {
-		const isChecked = computed<boolean>(() => {
-			return props.modelValue === props.value;
-		});
+interface Props {
+	/** What value to represent when selected */
+	value: string | number;
+	/** If `value` and `modelValue` match, the radio is selected */
+	modelValue?: string | number | null;
+	/** Label to render next to the radio */
+	label?: string | null;
+	/** Disable the radio button */
+	disabled?: boolean;
+	/** Change the icon to display when enabled */
+	iconOn?: string;
+	/** Change the icon to display when disabled */
+	iconOff?: string;
+	/** Render the radio in a block like style */
+	block?: boolean;
+}
 
-		const icon = computed<string>(() => {
-			return isChecked.value ? props.iconOn : props.iconOff;
-		});
-
-		return { isChecked, emitValue, icon };
-
-		function emitValue(): void {
-			emit('update:modelValue', props.value);
-		}
-	},
+const props = withDefaults(defineProps<Props>(), {
+	modelValue: null,
+	label: null,
+	disabled: false,
+	iconOn: 'radio_button_checked',
+	iconOff: 'radio_button_unchecked',
+	block: false,
 });
+
+const emit = defineEmits(['update:modelValue']);
+
+const isChecked = computed<boolean>(() => {
+	return props.modelValue === props.value;
+});
+
+const icon = computed<string>(() => {
+	return isChecked.value ? props.iconOn : props.iconOff;
+});
+
+function emitValue(): void {
+	emit('update:modelValue', props.value);
+}
 </script>
 
 <style>
@@ -74,7 +65,7 @@ body {
 </style>
 
 <style lang="scss" scoped>
-@import '@/styles/mixins/no-wrap';
+@import '../styles/no-wrap';
 
 .v-radio {
 	display: flex;
diff --git a/packages/components/src/components/v-select/__snapshots__/v-select.test.ts.snap b/packages/components/src/components/v-select/__snapshots__/v-select.test.ts.snap
new file mode 100644
index 0000000000..3da0518915
--- /dev/null
+++ b/packages/components/src/components/v-select/__snapshots__/v-select.test.ts.snap
@@ -0,0 +1,3 @@
+// Vitest Snapshot v1
+
+exports[`Mount component 1`] = `"<v-menu-stub class=\\"v-select\\" disabled=\\"false\\" attached=\\"true\\" show-arrow=\\"false\\" close-on-content-click=\\"true\\" placement=\\"bottom\\" data-v-83c4e9a2=\\"\\"></v-menu-stub>"`;
diff --git a/app/src/components/v-select/select-list-item-group.vue b/packages/components/src/components/v-select/select-list-item-group.vue
similarity index 57%
rename from app/src/components/v-select/select-list-item-group.vue
rename to packages/components/src/components/v-select/select-list-item-group.vue
index cf3360788e..7602e62321 100644
--- a/app/src/components/v-select/select-list-item-group.vue
+++ b/packages/components/src/components/v-select/select-list-item-group.vue
@@ -44,56 +44,42 @@
 	</v-list-group>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
+<script setup lang="ts">
+import { computed } from 'vue';
 import { Option } from './types';
 import SelectListItem from './select-list-item.vue';
 
-export default defineComponent({
-	name: 'SelectListItemGroup',
-	components: { SelectListItem },
-	props: {
-		item: {
-			type: Object as PropType<Option>,
-			required: true,
-		},
-		modelValue: {
-			type: [String, Number, Array] as PropType<string | number | (string | number)[]>,
-			default: null,
-		},
-		multiple: {
-			type: Boolean,
-			required: true,
-		},
-		allowOther: {
-			type: Boolean,
-			required: true,
-		},
-		groupSelectable: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	emits: ['update:modelValue'],
-	setup(props, { emit }) {
-		const isActive = computed(() => {
-			if (props.multiple) {
-				if (!Array.isArray(props.modelValue) || !props.item.value) {
-					return false;
-				}
-				return props.modelValue.includes(props.item.value);
-			} else {
-				return props.modelValue === props.item.value;
-			}
-		});
+interface Props {
+	item: Option;
+	modelValue?: string | number | (string | number)[] | null;
+	multiple?: boolean;
+	allowOther?: boolean;
+	groupSelectable?: boolean;
+}
 
-		return { isActive, onGroupClick };
-
-		function onGroupClick(item: Option) {
-			if (!props.groupSelectable) return;
-
-			emit('update:modelValue', item.value);
-		}
-	},
+const props = withDefaults(defineProps<Props>(), {
+	modelValue: null,
+	multiple: true,
+	allowOther: true,
+	groupSelectable: false,
 });
+
+const emit = defineEmits(['update:modelValue']);
+
+const isActive = computed(() => {
+	if (props.multiple) {
+		if (!Array.isArray(props.modelValue) || !props.item.value) {
+			return false;
+		}
+		return props.modelValue.includes(props.item.value);
+	} else {
+		return props.modelValue === props.item.value;
+	}
+});
+
+function onGroupClick(item: Option) {
+	if (!props.groupSelectable) return;
+
+	emit('update:modelValue', item.value);
+}
 </script>
diff --git a/app/src/components/v-select/select-list-item.vue b/packages/components/src/components/v-select/select-list-item.vue
similarity index 50%
rename from app/src/components/v-select/select-list-item.vue
rename to packages/components/src/components/v-select/select-list-item.vue
index 0983516e04..21d5d4ec81 100644
--- a/app/src/components/v-select/select-list-item.vue
+++ b/packages/components/src/components/v-select/select-list-item.vue
@@ -26,45 +26,33 @@
 	</v-list-item>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
+<script setup lang="ts">
+import { computed } from 'vue';
 import { Option } from './types';
 
-export default defineComponent({
-	name: 'SelectListItem',
-	props: {
-		item: {
-			type: Object as PropType<Option>,
-			required: true,
-		},
-		modelValue: {
-			type: [String, Number, Array] as PropType<string | number | (string | number)[]>,
-			default: null,
-		},
-		multiple: {
-			type: Boolean,
-			required: true,
-		},
-		allowOther: {
-			type: Boolean,
-			required: true,
-		},
-	},
-	emits: ['update:modelValue'],
-	setup(props) {
-		const isActive = computed(() => {
-			if (props.multiple) {
-				if (!Array.isArray(props.modelValue) || !props.item.value) {
-					return false;
-				}
-				return props.modelValue.includes(props.item.value);
-			} else {
-				return props.modelValue === props.item.value;
-			}
-		});
-		return {
-			isActive,
-		};
-	},
+interface Props {
+	item: Option;
+	modelValue?: string | number | (string | number)[] | null;
+	multiple?: boolean;
+	allowOther?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	modelValue: null,
+	multiple: true,
+	allowOther: false,
+});
+
+defineEmits(['update:modelValue']);
+
+const isActive = computed(() => {
+	if (props.multiple) {
+		if (!Array.isArray(props.modelValue) || !props.item.value) {
+			return false;
+		}
+		return props.modelValue.includes(props.item.value);
+	} else {
+		return props.modelValue === props.item.value;
+	}
 });
 </script>
diff --git a/app/src/components/v-select/types.ts b/packages/components/src/components/v-select/types.ts
similarity index 100%
rename from app/src/components/v-select/types.ts
rename to packages/components/src/components/v-select/types.ts
diff --git a/packages/components/src/components/v-select/v-select.test.ts b/packages/components/src/components/v-select/v-select.test.ts
new file mode 100644
index 0000000000..c30cc818ec
--- /dev/null
+++ b/packages/components/src/components/v-select/v-select.test.ts
@@ -0,0 +1,54 @@
+import { test, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import VSelect from './v-select.vue';
+import { GlobalMountOptions } from '@vue/test-utils/dist/types';
+import { createI18n } from 'vue-i18n';
+import { Focus } from '@/__utils__/focus';
+
+const i18n = createI18n();
+const global: GlobalMountOptions = {
+	stubs: [
+		'v-list',
+		'v-list-item',
+		'v-list-item-icon',
+		'v-list-item-content',
+		'v-divider',
+		'v-checkbox',
+		'v-menu',
+		'v-icon',
+		'v-input',
+	],
+	plugins: [i18n],
+	directives: {
+		Focus,
+	},
+};
+
+const items = [
+	{
+		text: 'Item 1',
+		value: 'item1',
+	},
+	{
+		text: 'Item 2',
+		value: 'item2',
+	},
+	{
+		text: 'Item 3',
+		value: 'item3',
+	},
+];
+
+test('Mount component', () => {
+	expect(VSelect).toBeTruthy();
+
+	const wrapper = mount(VSelect, {
+		props: {
+			items,
+		},
+		global,
+	});
+
+	expect(wrapper.html()).toMatchSnapshot();
+});
diff --git a/packages/components/src/components/v-select/v-select.vue b/packages/components/src/components/v-select/v-select.vue
new file mode 100644
index 0000000000..d8de9b3e89
--- /dev/null
+++ b/packages/components/src/components/v-select/v-select.vue
@@ -0,0 +1,418 @@
+<template>
+	<v-menu
+		class="v-select"
+		:disabled="disabled"
+		:attached="inline === false"
+		:show-arrow="inline === true"
+		:close-on-content-click="closeOnContentClick"
+		:placement="placement"
+	>
+		<template #activator="{ toggle, active }">
+			<div v-if="inline" class="inline-display" :class="{ placeholder: !displayValue, label, active }" @click="toggle">
+				<slot name="preview">{{ displayValue || placeholder }}</slot>
+				<v-icon name="expand_more" :class="{ active }" />
+			</div>
+			<slot v-else name="preview">
+				<v-input
+					:full-width="fullWidth"
+					readonly
+					:model-value="displayValue"
+					clickable
+					:placeholder="placeholder"
+					:disabled="disabled"
+					:active="active"
+					@click="toggle"
+				>
+					<template v-if="$slots.prepend" #prepend><slot name="prepend" /></template>
+					<template #append>
+						<v-icon name="expand_more" :class="{ active }" />
+						<slot name="append" />
+					</template>
+				</v-input>
+			</slot>
+		</template>
+
+		<v-list class="list" :mandatory="mandatory" @toggle="$emit('group-toggle', $event)">
+			<template v-if="showDeselect">
+				<v-list-item clickable :disabled="modelValue === null" @click="$emit('update:modelValue', null)">
+					<v-list-item-icon v-if="multiple === true">
+						<v-icon name="close" />
+					</v-list-item-icon>
+					<v-list-item-content>
+						{{ multiple ? t('deselect_all') : t('deselect') }}
+					</v-list-item-content>
+					<v-list-item-icon v-if="multiple === false">
+						<v-icon name="close" />
+					</v-list-item-icon>
+				</v-list-item>
+				<v-divider />
+			</template>
+
+			<v-list-item v-if="internalItemsCount > 20 || search">
+				<v-list-item-content>
+					<v-input v-model="search" autofocus small :placeholder="t('search')" @click.stop.prevent>
+						<template #append>
+							<v-icon small name="search" />
+						</template>
+					</v-input>
+				</v-list-item-content>
+			</v-list-item>
+
+			<template v-for="(item, index) in internalItems" :key="index">
+				<select-list-item-group
+					v-if="item.children"
+					:item="item"
+					:model-value="modelValue"
+					:multiple="multiple"
+					:allow-other="allowOther"
+					:group-selectable="groupSelectable"
+					@update:model-value="$emit('update:modelValue', $event)"
+				/>
+				<select-list-item
+					v-else
+					:model-value="modelValue"
+					:item="item"
+					:multiple="multiple"
+					:allow-other="allowOther"
+					@update:model-value="$emit('update:modelValue', $event)"
+				/>
+			</template>
+
+			<v-list-item v-if="allowOther && multiple === false" :active="usesOtherValue" @click.stop>
+				<v-list-item-content>
+					<input
+						v-model="otherValue"
+						class="other-input"
+						:placeholder="t('other')"
+						@focus="otherValue ? $emit('update:modelValue', otherValue) : null"
+					/>
+				</v-list-item-content>
+			</v-list-item>
+
+			<template v-if="allowOther && multiple === true">
+				<v-list-item
+					v-for="otherVal in otherValues"
+					:key="otherVal.key"
+					:active="(modelValue || []).includes(otherVal.value)"
+					@click.stop
+				>
+					<v-list-item-icon>
+						<v-checkbox
+							:model-value="modelValue || []"
+							:value="otherVal.value"
+							@update:model-value="$emit('update:modelValue', $event.length > 0 ? $event : null)"
+						/>
+					</v-list-item-icon>
+					<v-list-item-content>
+						<input
+							v-focus
+							class="other-input"
+							:value="otherVal.value"
+							:placeholder="t('other')"
+							@input="setOtherValue(otherVal.key, ($event.target as any)?.value)"
+							@blur="otherVal.value.length === 0 && setOtherValue(otherVal.key, null)"
+						/>
+					</v-list-item-content>
+					<v-list-item-icon>
+						<v-icon name="close" clickable @click="setOtherValue(otherVal.key, null)" />
+					</v-list-item-icon>
+				</v-list-item>
+
+				<v-list-item @click.stop="addOtherValue()">
+					<v-list-item-icon><v-icon name="add" /></v-list-item-icon>
+					<v-list-item-content>{{ t('other') }}</v-list-item-content>
+				</v-list-item>
+			</template>
+		</v-list>
+	</v-menu>
+</template>
+
+<script setup lang="ts">
+import { useCustomSelection, useCustomSelectionMultiple } from '@directus/shared/composables';
+import { Placement } from '@popperjs/core';
+import { debounce, get } from 'lodash';
+import { computed, Ref, ref, toRefs, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import SelectListItemGroup from './select-list-item-group.vue';
+import SelectListItem from './select-list-item.vue';
+import { Option } from './types';
+
+type ItemsRaw = (string | any)[];
+type InputValue = string[] | string | null;
+
+interface Props {
+	/** The items that should be selectable */
+	items: ItemsRaw;
+	/** Which key in items is used to display the text */
+	itemText?: string;
+	/** Which key in items is used to model the active state */
+	itemValue?: string;
+	/** Which key in items is used to show an icon */
+	itemIcon?: string | null;
+	/** Which key in items is used to model the disabled state */
+	itemDisabled?: string;
+	/** Which key in items is used to model the selectable state */
+	itemSelectable?: string;
+	/** Which key in items is used to render the children */
+	itemChildren?: string;
+	/** Which items should be shown as selected, depending on their value */
+	modelValue?: InputValue;
+	/** Allow to select multiple values */
+	multiple?: boolean;
+	/** Allow to select the parent of a group */
+	groupSelectable?: boolean;
+	/** Require a minimum selection of at least one element */
+	mandatory?: boolean;
+	/** Text that is displayed when no items are selected */
+	placeholder?: string | null;
+	/** Spreads the select element to it's maximal width */
+	fullWidth?: boolean;
+	/** Disables any interaction */
+	disabled?: boolean;
+	/** Allow to deselect all currently selected items */
+	showDeselect?: boolean;
+	/** Allow to enter custom values */
+	allowOther?: boolean;
+	/** Closes the dropdown after an items has been selected  */
+	closeOnContentClick?: boolean;
+	/** Renders the element inline, good for seamless selections */
+	inline?: boolean;
+	label?: boolean;
+	/** Limits the amount of items inside the preview */
+	multiplePreviewThreshold?: number;
+	/** The direction the menu should open */
+	placement?: Placement;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	itemText: 'text',
+	itemValue: 'value',
+	itemIcon: null,
+	itemDisabled: 'disabled',
+	itemSelectable: 'selectable',
+	itemChildren: 'children',
+	modelValue: null,
+	multiple: false,
+	groupSelectable: false,
+	mandatory: true,
+	placeholder: null,
+	fullWidth: true,
+	disabled: false,
+	showDeselect: false,
+	allowOther: false,
+	closeOnContentClick: true,
+	inline: false,
+	label: false,
+	multiplePreviewThreshold: 3,
+	placement: 'bottom',
+});
+
+const emit = defineEmits(['update:modelValue', 'group-toggle']);
+
+const { t } = useI18n();
+
+const { internalItems, internalItemsCount, internalSearch } = useItems();
+const { displayValue } = useDisplayValue();
+const { modelValue } = toRefs(props);
+const { otherValue, usesOtherValue } = useCustomSelection(modelValue as Ref<string>, internalItems, (value) =>
+	emit('update:modelValue', value)
+);
+const { otherValues, addOtherValue, setOtherValue } = useCustomSelectionMultiple(
+	modelValue as Ref<string[]>,
+	internalItems,
+	(value) => emit('update:modelValue', value)
+);
+
+const search = ref<string | null>(null);
+watch(
+	search,
+	debounce((val: string | null) => {
+		internalSearch.value = val;
+	}, 250)
+);
+
+function useItems() {
+	const internalSearch = ref<string | null>(null);
+
+	const internalItems = computed(() => {
+		const parseItem = (item: Record<string, any>): Option => {
+			if (typeof item === 'string') {
+				return {
+					text: item,
+					value: item,
+				};
+			}
+
+			if (item.divider === true) return { value: null, divider: true };
+
+			const children = get(item, props.itemChildren) ? get(item, props.itemChildren).map(parseItem) : null;
+
+			return {
+				text: get(item, props.itemText),
+				value: get(item, props.itemValue),
+				icon: props.itemIcon ? get(item, props.itemIcon) : undefined,
+				disabled: get(item, props.itemDisabled),
+				selectable: get(item, props.itemSelectable),
+				children: children ? children.filter(filterItem) : children,
+			};
+		};
+
+		const filterItem = (item: Record<string, any>): boolean => {
+			if (!internalSearch.value) return true;
+
+			const searchValue = internalSearch.value.toLowerCase();
+
+			return item?.children
+				? isMatchingCurrentItem(item, searchValue) ||
+						item.children.some((item: Record<string, any>) => filterItem(item))
+				: isMatchingCurrentItem(item, searchValue);
+
+			function isMatchingCurrentItem(item: Record<string, any>, searchValue: string): boolean {
+				const text = get(item, props.itemText);
+				const value = get(item, props.itemValue);
+				return (
+					(text ? String(text).toLowerCase().includes(searchValue) : false) ||
+					(value ? String(value).toLowerCase().includes(searchValue) : false)
+				);
+			}
+		};
+
+		const items = internalSearch.value ? props.items.filter(filterItem).map(parseItem) : props.items.map(parseItem);
+
+		return items;
+	});
+
+	const internalItemsCount = computed<number>(() => {
+		const countItems = (items: Option[]): number => {
+			const count = items.reduce((acc, item): number => {
+				if (item?.children) {
+					acc += countItems(item.children);
+				}
+				return acc + 1;
+			}, 0);
+
+			return count;
+		};
+
+		return countItems(props.items);
+	});
+
+	return { internalItems, internalItemsCount, internalSearch };
+}
+
+function useDisplayValue() {
+	const displayValue = computed(() => {
+		if (Array.isArray(props.modelValue)) {
+			if (props.modelValue.length < props.multiplePreviewThreshold) {
+				return props.modelValue
+					.map((value) => {
+						return getTextForValue(value) || value;
+					})
+					.join(', ');
+			} else {
+				const itemCount = internalItems.value.length + otherValues.value.length;
+				const selectionCount = props.modelValue.length;
+
+				if (itemCount === selectionCount) {
+					return t('all_items');
+				} else {
+					return t('item_count', selectionCount);
+				}
+			}
+		}
+
+		return getTextForValue(props.modelValue) || props.modelValue;
+	});
+
+	return { displayValue };
+
+	function getTextForValue(value: string | number | null) {
+		return findValue(internalItems.value);
+
+		function findValue(choices: Option[]): string | undefined {
+			let textValue: string | undefined = choices.find((item) => item.value === value)?.['text'];
+
+			for (const choice of choices) {
+				if (!textValue) {
+					if (choice.children) {
+						textValue = findValue(choice.children);
+					}
+				}
+			}
+
+			return textValue;
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+:global(body) {
+	--v-select-font-family: var(--family-sans-serif);
+	--v-select-placeholder-color: var(--foreground-subdued);
+}
+
+.list {
+	--v-list-min-width: 0;
+}
+
+.item-text {
+	font-family: var(--v-select-font-family);
+}
+
+.v-input {
+	--v-input-font-family: var(--v-select-font-family);
+
+	cursor: pointer;
+}
+
+.v-input .v-icon {
+	transition: transform var(--medium) var(--transition-out);
+}
+
+.v-input .v-icon.active {
+	transform: scaleY(-1);
+	transition-timing-function: var(--transition-in);
+}
+
+.v-input :deep(input) {
+	cursor: pointer;
+}
+
+.other-input {
+	margin: 0;
+	padding: 0;
+	line-height: 1.2;
+	background-color: transparent;
+	border: none;
+	border-radius: 0;
+}
+
+.inline-display {
+	width: max-content;
+	padding-right: 18px;
+	cursor: pointer;
+}
+
+.inline-display.label {
+	padding: 4px 8px;
+	padding-right: 26px;
+	color: var(--foreground-subdued);
+	background-color: var(--background-subdued);
+	border-radius: var(--border-radius);
+	transition: color var(--fast) var(--transition);
+
+	&:hover,
+	&.active {
+		color: var(--foreground);
+	}
+}
+
+.inline-display .v-icon {
+	position: absolute;
+}
+
+.inline-display.placeholder {
+	color: var(--v-select-placeholder-color);
+}
+</style>
diff --git a/app/src/components/v-sheet.test.ts b/packages/components/src/components/v-sheet.test.ts
similarity index 100%
rename from app/src/components/v-sheet.test.ts
rename to packages/components/src/components/v-sheet.test.ts
diff --git a/app/src/components/v-sheet.vue b/packages/components/src/components/v-sheet.vue
similarity index 100%
rename from app/src/components/v-sheet.vue
rename to packages/components/src/components/v-sheet.vue
diff --git a/packages/components/src/components/v-skeleton-loader.test.ts b/packages/components/src/components/v-skeleton-loader.test.ts
new file mode 100644
index 0000000000..db8f9b2c96
--- /dev/null
+++ b/packages/components/src/components/v-skeleton-loader.test.ts
@@ -0,0 +1,30 @@
+import { test, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import VSkeletonLoader from './v-skeleton-loader.vue';
+
+test('Mount component', () => {
+	expect(VSkeletonLoader).toBeTruthy();
+
+	const wrapper = mount(VSkeletonLoader, {
+		props: {
+			type: 'list-item-icon',
+		},
+	});
+
+	expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('type prop', () => {
+	const types = ['input', 'input-tall', 'block-list-item', 'block-list-item-dense', 'text', 'list-item-icon'];
+
+	for (const type of types) {
+		const wrapper = mount(VSkeletonLoader, {
+			props: {
+				type,
+			},
+		});
+
+		expect(wrapper.classes()).toContain(type);
+	}
+});
diff --git a/app/src/components/v-skeleton-loader.vue b/packages/components/src/components/v-skeleton-loader.vue
similarity index 89%
rename from app/src/components/v-skeleton-loader.vue
rename to packages/components/src/components/v-skeleton-loader.vue
index 5ed09fcaea..529bdf3c8e 100644
--- a/app/src/components/v-skeleton-loader.vue
+++ b/packages/components/src/components/v-skeleton-loader.vue
@@ -7,16 +7,14 @@
 	</div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
+interface Props {
+	/** Name of another component to mirror */
+	type?: 'input' | 'input-tall' | 'block-list-item' | 'block-list-item-dense' | 'list-item-icon' | 'text';
+}
 
-export default defineComponent({
-	props: {
-		type: {
-			type: String,
-			default: 'input',
-		},
-	},
+withDefaults(defineProps<Props>(), {
+	type: 'input',
 });
 </script>
 
diff --git a/packages/components/src/components/v-slider.test.ts b/packages/components/src/components/v-slider.test.ts
new file mode 100644
index 0000000000..c5448875e4
--- /dev/null
+++ b/packages/components/src/components/v-slider.test.ts
@@ -0,0 +1,50 @@
+import { test, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import VSlider from './v-slider.vue';
+
+test('Mount component', () => {
+	expect(VSlider).toBeTruthy();
+
+	const wrapper = mount(VSlider);
+
+	expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('modelValue prop', async () => {
+	const wrapper = mount(VSlider, {
+		props: {
+			modelValue: 20,
+		},
+	});
+
+	expect(wrapper.get('input').element.value).toBe(20);
+
+	await wrapper.get('input').setValue(30);
+
+	expect(wrapper.emitted()['update:modelValue'][0]).toEqual([30]);
+});
+
+test('min prop', async () => {
+	const wrapper = mount(VSlider, {
+		props: {
+			min: 40,
+		},
+	});
+
+	await wrapper.get('input').setValue(30);
+
+	expect(wrapper.emitted()['update:modelValue'][0]).toEqual([40]);
+});
+
+test('max prop', async () => {
+	const wrapper = mount(VSlider, {
+		props: {
+			max: 40,
+		},
+	});
+
+	await wrapper.get('input').setValue(50);
+
+	expect(wrapper.emitted()['update:modelValue'][0]).toEqual([40]);
+});
diff --git a/app/src/components/v-slider.vue b/packages/components/src/components/v-slider.vue
similarity index 77%
rename from app/src/components/v-slider.vue
rename to packages/components/src/components/v-slider.vue
index 3e28e8f1b4..23e6cf7f35 100644
--- a/app/src/components/v-slider.vue
+++ b/packages/components/src/components/v-slider.vue
@@ -32,71 +32,58 @@
 	</div>
 </template>
 
-<script lang="ts">
-import { defineComponent, computed } from 'vue';
+<script setup lang="ts">
+import { computed } from 'vue';
 
-export default defineComponent({
-	props: {
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-		showThumbLabel: {
-			type: Boolean,
-			default: false,
-		},
-		max: {
-			type: Number,
-			default: 100,
-		},
-		min: {
-			type: Number,
-			default: 0,
-		},
-		step: {
-			type: Number,
-			default: 1,
-		},
-		showTicks: {
-			type: Boolean,
-			default: false,
-		},
-		alwaysShowValue: {
-			type: Boolean,
-			default: true,
-		},
-		modelValue: {
-			type: Number,
-			default: 0,
-		},
-	},
-	emits: ['change', 'update:modelValue'],
-	setup(props, { emit }) {
-		const styles = computed(() => {
-			if (props.modelValue === null) return { '--_v-slider-percentage': 50 };
+interface Props {
+	/** Disables the slider */
+	disabled?: boolean;
+	/** Show the thumb label on drag of the thumb */
+	showThumbLabel?: boolean;
+	/** Maximum allowed value */
+	max?: number;
+	/** Minimum allowed value */
+	min?: number;
+	/** In what step the value can be entered */
+	step?: number;
+	/** Show tick for each step */
+	showTicks?: boolean;
+	/** Always the current selected value */
+	alwaysShowValue?: boolean;
+	/** Model the current selected value */
+	modelValue?: number;
+}
 
-			let percentage = ((props.modelValue - props.min) / (props.max - props.min)) * 100;
-			if (isNaN(percentage)) percentage = 0;
-			return { '--_v-slider-percentage': percentage };
-		});
-
-		return {
-			styles,
-			onChange,
-			onInput,
-		};
-
-		function onChange(event: InputEvent) {
-			const target = event.target as HTMLInputElement;
-			emit('change', Number(target.value));
-		}
-
-		function onInput(event: InputEvent) {
-			const target = event.target as HTMLInputElement;
-			emit('update:modelValue', Number(target.value));
-		}
-	},
+const props = withDefaults(defineProps<Props>(), {
+	disabled: false,
+	showThumbLabel: false,
+	max: 100,
+	min: 0,
+	step: 1,
+	showTicks: false,
+	alwaysShowValue: true,
+	modelValue: 0,
 });
+
+const emit = defineEmits(['change', 'update:modelValue']);
+
+const styles = computed(() => {
+	if (props.modelValue === null) return { '--_v-slider-percentage': 50 };
+
+	let percentage = ((props.modelValue - props.min) / (props.max - props.min)) * 100;
+	if (isNaN(percentage)) percentage = 0;
+	return { '--_v-slider-percentage': percentage };
+});
+
+function onChange(event: Event) {
+	const target = event.target as HTMLInputElement;
+	emit('change', Number(target.value));
+}
+
+function onInput(event: Event) {
+	const target = event.target as HTMLInputElement;
+	emit('update:modelValue', Number(target.value));
+}
 </script>
 
 <style>
diff --git a/packages/components/src/components/v-tab-item.vue b/packages/components/src/components/v-tab-item.vue
new file mode 100644
index 0000000000..91711772aa
--- /dev/null
+++ b/packages/components/src/components/v-tab-item.vue
@@ -0,0 +1,20 @@
+<template>
+	<div v-if="active" class="v-tab-item">
+		<slot v-bind="{ active, toggle }" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import { useGroupable } from '@directus/shared/composables';
+
+interface Props {
+	/** Custom value to use for selection state */
+	value?: string | number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	value: undefined,
+});
+
+const { active, toggle } = useGroupable({ value: props.value, group: 'v-tabs-items' });
+</script>
diff --git a/app/src/components/v-tab.vue b/packages/components/src/components/v-tab.vue
similarity index 63%
rename from app/src/components/v-tab.vue
rename to packages/components/src/components/v-tab.vue
index 08e7b417d8..0caba872ad 100644
--- a/app/src/components/v-tab.vue
+++ b/packages/components/src/components/v-tab.vue
@@ -7,36 +7,32 @@
 	</div>
 </template>
 
-<script lang="ts">
-import { defineComponent, inject, ref } from 'vue';
-import { useGroupable } from '@/composables/use-groupable';
+<script setup lang="ts">
+import { inject, ref } from 'vue';
+import { useGroupable } from '@directus/shared/composables';
 
-export default defineComponent({
-	props: {
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-		value: {
-			type: String,
-			default: null,
-		},
-	},
-	setup(props) {
-		const { active, toggle } = useGroupable({
-			value: props.value,
-			group: 'v-tabs',
-		});
+interface Props {
+	/** A custom value to be used with `v-tabs` */
+	value?: string | number;
+	/** Disable the tab */
+	disabled?: boolean;
+}
 
-		const vertical = inject('v-tabs-vertical', ref(false));
-
-		return { active, toggle, onClick, vertical };
-
-		function onClick() {
-			if (props.disabled === false) toggle();
-		}
-	},
+const props = withDefaults(defineProps<Props>(), {
+	value: undefined,
+	disabled: false,
 });
+
+const { active, toggle } = useGroupable({
+	value: props.value,
+	group: 'v-tabs',
+});
+
+const vertical = inject('v-tabs-vertical', ref(false));
+
+function onClick() {
+	if (props.disabled === false) toggle();
+}
 </script>
 
 <style>
diff --git a/packages/components/src/components/v-tabs-items.vue b/packages/components/src/components/v-tabs-items.vue
new file mode 100644
index 0000000000..8451e3067a
--- /dev/null
+++ b/packages/components/src/components/v-tabs-items.vue
@@ -0,0 +1,22 @@
+<template>
+	<v-item-group class="v-tabs-items" :model-value="modelValue" scope="v-tabs-items" @update:model-value="update">
+		<slot />
+	</v-item-group>
+</template>
+
+<script setup lang="ts">
+interface Props {
+	/** What tab should be currently active */
+	modelValue?: (number | string)[];
+}
+
+withDefaults(defineProps<Props>(), {
+	modelValue: undefined,
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+function update(newSelection: readonly (string | number)[]) {
+	emit('update:modelValue', newSelection);
+}
+</script>
diff --git a/packages/components/src/components/v-tabs.test.ts b/packages/components/src/components/v-tabs.test.ts
new file mode 100644
index 0000000000..bb9f74f093
--- /dev/null
+++ b/packages/components/src/components/v-tabs.test.ts
@@ -0,0 +1,22 @@
+import { test, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import VTabs from './v-tabs.vue';
+import { GlobalMountOptions } from '@vue/test-utils/dist/types';
+
+const global: GlobalMountOptions = {
+	stubs: ['v-tabs-items', 'v-list'],
+};
+
+test('Mount component', () => {
+	expect(VTabs).toBeTruthy();
+
+	const wrapper = mount(VTabs, {
+		slots: {
+			default: 'Some value',
+		},
+		global,
+	});
+
+	expect(wrapper.html()).toMatchSnapshot();
+});
diff --git a/packages/components/src/components/v-tabs.vue b/packages/components/src/components/v-tabs.vue
new file mode 100644
index 0000000000..9562d39e39
--- /dev/null
+++ b/packages/components/src/components/v-tabs.vue
@@ -0,0 +1,70 @@
+<template>
+	<v-list v-if="vertical" class="v-tabs vertical alt-colors" nav>
+		<slot />
+	</v-list>
+	<div v-else class="v-tabs horizontal">
+		<slot />
+	</div>
+</template>
+
+<script setup lang="ts">
+import { toRefs, provide, ref } from 'vue';
+import { useGroupableParent } from '@directus/shared/composables';
+
+interface Props {
+	/** Display the tabs in a vertical format */
+	vertical?: boolean;
+	/** The currently selected tab */
+	modelValue?: (number | string)[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	vertical: false,
+	modelValue: undefined,
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const { modelValue: selection, vertical } = toRefs(props);
+
+provide('v-tabs-vertical', vertical);
+
+useGroupableParent(
+	{
+		selection: selection,
+		onSelectionChange: update,
+	},
+	{
+		multiple: ref(false),
+		mandatory: ref(true),
+	},
+	'v-tabs'
+);
+
+function update(newSelection: readonly (string | number)[]) {
+	emit('update:modelValue', newSelection);
+}
+</script>
+
+<style scoped>
+:global(body) {
+	--v-tabs-underline-color: var(--foreground-normal);
+}
+
+.v-tabs.horizontal {
+	position: relative;
+	display: inline-flex;
+}
+
+.v-tabs.horizontal :slotted(.v-tab) {
+	display: flex;
+	flex-basis: 0px;
+	flex-grow: 1;
+	flex-shrink: 0;
+	align-items: center;
+	justify-content: center;
+	height: 38px;
+	padding: 8px 20px;
+	cursor: pointer;
+}
+</style>
diff --git a/packages/components/src/components/v-template-input.vue b/packages/components/src/components/v-template-input.vue
new file mode 100644
index 0000000000..12d57bd9dc
--- /dev/null
+++ b/packages/components/src/components/v-template-input.vue
@@ -0,0 +1,341 @@
+<template>
+	<div
+		ref="input"
+		class="v-template-input"
+		:class="{ multiline }"
+		contenteditable="true"
+		tabindex="1"
+		:placeholder="placeholder"
+		@input="processText"
+	/>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted, onUnmounted } from 'vue';
+import { position } from 'caret-pos';
+
+interface Props {
+	captureGroup: string;
+	triggerCharacter: string;
+	items: Record<string, string>;
+	modelValue?: string;
+	multiline?: boolean;
+	placeholder?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	modelValue: undefined,
+	multiline: false,
+	placeholder: undefined,
+});
+
+const emit = defineEmits(['update:modelValue', 'trigger', 'deactivate', 'up', 'down', 'enter']);
+
+const input = ref<HTMLDivElement>();
+
+let hasTriggered = false;
+let matchedPositions: number[] = [];
+let previousInnerTextLength = 0;
+let previousCaretPos = 0;
+
+watch(
+	() => props.modelValue,
+	(newText) => {
+		if (!input.value) return;
+
+		if (newText !== input.value.innerText) {
+			parseHTML(newText, true);
+		}
+	}
+);
+
+onMounted(() => {
+	if (props.modelValue && props.modelValue !== input.value!.innerText) {
+		parseHTML(props.modelValue);
+	}
+
+	if (input.value) {
+		input.value.addEventListener('click', checkClick);
+		input.value.addEventListener('keydown', checkKeyDown);
+		input.value.addEventListener('keyup', checkKeyUp);
+	}
+});
+
+onUnmounted(() => {
+	if (input.value) {
+		input.value.removeEventListener('click', checkClick);
+		input.value.removeEventListener('keydown', checkKeyDown);
+		input.value.removeEventListener('keyup', checkKeyUp);
+	}
+});
+
+function checkKeyDown(event: any) {
+	const caretPos = window.getSelection()?.rangeCount ? position(input.value as Element).pos : 0;
+
+	if (event.code === 'Enter') {
+		event.preventDefault();
+
+		if (hasTriggered) {
+			emit('enter');
+		} else {
+			parseHTML(
+				input.value!.innerText.substring(0, caretPos) +
+					(caretPos === input.value!.innerText.length && input.value!.innerText.charAt(caretPos - 1) !== '\n'
+						? '\n\n'
+						: '\n') +
+					input.value!.innerText.substring(caretPos),
+				true
+			);
+			position(input.value!, caretPos + 1);
+		}
+	} else if (event.code === 'ArrowUp' && !event.shiftKey) {
+		if (hasTriggered) {
+			event.preventDefault();
+
+			emit('up');
+		}
+	} else if (event.code === 'ArrowDown' && !event.shiftKey) {
+		if (hasTriggered) {
+			event.preventDefault();
+
+			emit('down');
+		}
+	} else if (event.code === 'ArrowLeft' && !event.shiftKey) {
+		const checkCaretPos = matchedPositions.indexOf(caretPos - 1);
+		if (checkCaretPos !== -1 && checkCaretPos % 2 === 1) {
+			event.preventDefault();
+
+			position(input.value!, matchedPositions[checkCaretPos - 1] - 1);
+		}
+	} else if (event.code === 'ArrowRight' && !event.shiftKey) {
+		const checkCaretPos = matchedPositions.indexOf(caretPos + 1);
+		if (checkCaretPos !== -1 && checkCaretPos % 2 === 0) {
+			event.preventDefault();
+
+			position(input.value!, matchedPositions[checkCaretPos + 1] + 1);
+		}
+	} else if (event.code === 'Backspace') {
+		const checkCaretPos = matchedPositions.indexOf(caretPos - 1);
+		if (checkCaretPos !== -1 && checkCaretPos % 2 === 1) {
+			event.preventDefault();
+
+			const newCaretPos = matchedPositions[checkCaretPos - 1];
+			parseHTML(
+				(input.value!.innerText.substring(0, newCaretPos) + input.value!.innerText.substring(caretPos)).replaceAll(
+					String.fromCharCode(160),
+					' '
+				),
+				true
+			);
+			position(input.value!, newCaretPos);
+			emit('update:modelValue', input.value!.innerText);
+		}
+	} else if (event.code === 'Delete') {
+		const checkCaretPos = matchedPositions.indexOf(caretPos + 1);
+		if (checkCaretPos !== -1 && checkCaretPos % 2 === 0) {
+			event.preventDefault();
+
+			parseHTML(
+				(
+					input.value!.innerText.substring(0, caretPos) +
+					input.value!.innerText.substring(matchedPositions[checkCaretPos + 1])
+				).replaceAll(String.fromCharCode(160), ' '),
+				true
+			);
+			position(input.value!, caretPos);
+			emit('update:modelValue', input.value!.innerText);
+		}
+	}
+}
+
+function checkKeyUp(event: any) {
+	const caretPos = window.getSelection()?.rangeCount ? position(input.value as Element).pos : 0;
+
+	if ((event.code === 'ArrowUp' || event.code === 'ArrowDown') && !event.shiftKey) {
+		const checkCaretPos = matchedPositions.indexOf(caretPos);
+		if (checkCaretPos !== -1 && checkCaretPos % 2 === 1) {
+			position(input.value!, matchedPositions[checkCaretPos] + 1);
+		} else if (checkCaretPos !== -1 && checkCaretPos % 2 === 0) {
+			position(input.value!, matchedPositions[checkCaretPos] - 1);
+		}
+	}
+}
+
+function checkClick(event: any) {
+	const caretPos = window.getSelection()?.rangeCount ? position(input.value as Element).pos : 0;
+
+	const checkCaretPos = matchedPositions.indexOf(caretPos);
+	if (checkCaretPos !== -1) {
+		if (checkCaretPos % 2 === 0) {
+			position(input.value!, caretPos - 1);
+		} else {
+			position(input.value!, caretPos + 1);
+		}
+		event.preventDefault();
+	}
+}
+
+function processText(event: Event) {
+	const input = event.target as HTMLDivElement;
+
+	const caretPos = window.getSelection()?.rangeCount ? position(input).pos : 0;
+
+	const text = input.innerText ?? '';
+
+	let endPos = text.indexOf(' ', caretPos);
+	if (endPos === -1) endPos = text.indexOf('\n', caretPos);
+	if (endPos === -1) endPos = text.length;
+	const result = /\S+$/.exec(text.slice(0, endPos));
+	let word = result ? result[0] : null;
+	if (word) word = word.replace(/[\s'";:,./?\\-]$/, '');
+
+	if (word?.startsWith(props.triggerCharacter)) {
+		emit('trigger', { searchQuery: word.substring(props.triggerCharacter.length), caretPosition: caretPos });
+		hasTriggered = true;
+	} else {
+		if (hasTriggered) {
+			emit('deactivate');
+			hasTriggered = false;
+		}
+	}
+
+	parseHTML();
+
+	emit('update:modelValue', input.innerText);
+}
+
+function parseHTML(innerText?: string, isDirectInput = false) {
+	if (!input.value) return;
+
+	if (input.value.innerText === '\n') {
+		input.value.innerText = '';
+	}
+
+	if (innerText !== undefined) {
+		input.value.innerText = innerText;
+		hasTriggered = false;
+	}
+
+	let newHTML = input.value.innerText;
+
+	const caretPos = isDirectInput ? previousCaretPos : window.getSelection()?.rangeCount ? position(input.value).pos : 0;
+
+	let lastMatchIndex = 0;
+	const matches = newHTML.match(new RegExp(`${props.captureGroup}(?!</mark>)`, 'gi'));
+	matchedPositions = [];
+
+	if (matches) {
+		for (const match of matches ?? []) {
+			let replaceSpaceBefore = '';
+			let replaceSpaceAfter = '';
+			let addSpaceBefore = '';
+			let addSpaceAfter = '';
+
+			let htmlMatchIndex = newHTML.indexOf(match, lastMatchIndex);
+			const charCodeBefore = newHTML.charCodeAt(htmlMatchIndex - 1);
+			const charCodeAfter = newHTML.charCodeAt(htmlMatchIndex + match.length);
+
+			if (charCodeBefore === 32) {
+				replaceSpaceBefore = ' ';
+				addSpaceBefore = '&nbsp;';
+			} else if (charCodeBefore !== 160) {
+				addSpaceBefore = '&nbsp;';
+			}
+
+			if (charCodeAfter === 32) {
+				replaceSpaceAfter = ' ';
+				addSpaceAfter = '&nbsp;';
+			} else if (charCodeAfter !== 160) {
+				addSpaceAfter = '&nbsp;';
+			}
+
+			let searchString = replaceSpaceBefore + match + replaceSpaceAfter;
+			let replacementString = `${addSpaceBefore}<mark class="preview" data-preview="${
+				props.items[match.substring(props.triggerCharacter.length)]
+			}" contenteditable="false">${match}</mark>${addSpaceAfter}`;
+
+			newHTML = newHTML.replace(new RegExp(`(${searchString})(?!</mark>)`), replacementString);
+			lastMatchIndex = htmlMatchIndex + replacementString.length - searchString.length;
+		}
+	}
+
+	if (input.value.innerHTML !== newHTML.replaceAll(String.fromCharCode(160), '&nbsp;')) {
+		input.value.innerHTML = newHTML;
+
+		const delta = input.value.innerText.length - previousInnerTextLength;
+		const newPosition = caretPos + delta;
+
+		if (newPosition > input.value.innerText.length || newPosition < 0) {
+			position(input.value, input.value.innerText.length);
+		} else {
+			position(input.value, newPosition);
+		}
+	}
+
+	lastMatchIndex = 0;
+	for (const match of matches ?? []) {
+		let matchIndex = input.value.innerText.indexOf(match, lastMatchIndex);
+		matchedPositions.push(matchIndex, matchIndex + match.length);
+		lastMatchIndex = matchIndex + match.length;
+	}
+
+	previousInnerTextLength = input.value.innerText.length;
+	previousCaretPos = caretPos;
+}
+</script>
+
+<style scoped lang="scss">
+.v-template-input {
+	position: relative;
+	height: var(--input-height);
+	padding: var(--input-padding);
+	padding-bottom: 32px;
+	overflow: hidden;
+	color: var(--foreground-normal);
+	font-family: var(--family-sans-serif);
+	white-space: nowrap;
+	background-color: var(--background-page);
+	border: var(--border-width) solid var(--border-normal);
+	border-radius: var(--border-radius);
+	transition: border-color var(--fast) var(--transition);
+
+	&:empty::before {
+		pointer-events: none;
+		content: attr(placeholder);
+		color: var(--foreground-subdued);
+	}
+
+	&.multiline {
+		height: var(--input-height-tall);
+		overflow-y: auto;
+		white-space: pre-wrap;
+	}
+
+	&:hover {
+		border-color: var(--border-normal-alt);
+	}
+
+	&:focus-within {
+		border-color: var(--primary);
+	}
+
+	:deep(.preview) {
+		display: inline-block;
+		margin: 0px;
+		padding: 2px 4px;
+		color: var(--primary);
+		font-size: 0;
+		line-height: 1;
+		vertical-align: -2px;
+		background: var(--primary-alt);
+		border-radius: var(--border-radius);
+		user-select: text;
+
+		&::before {
+			display: block;
+			font-size: 1rem;
+			content: attr(data-preview);
+		}
+	}
+}
+</style>
diff --git a/packages/components/src/components/v-text-overflow.test.ts b/packages/components/src/components/v-text-overflow.test.ts
new file mode 100644
index 0000000000..efcf0567ed
--- /dev/null
+++ b/packages/components/src/components/v-text-overflow.test.ts
@@ -0,0 +1,39 @@
+import { test, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import VTextOverflow from './v-text-overflow.vue';
+import { GlobalMountOptions } from '@vue/test-utils/dist/types';
+import { Tooltip } from '@/__utils__/tooltip';
+
+const global: GlobalMountOptions = {
+	stubs: ['v-icon', 'v-highlight'],
+	directives: {
+		Tooltip,
+	},
+};
+
+test('Mount component', () => {
+	expect(VTextOverflow).toBeTruthy();
+
+	const wrapper = mount(VTextOverflow, {
+		props: {
+			text: 'My text',
+		},
+		global,
+	});
+
+	expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('highlight prop', () => {
+	const wrapper = mount(VTextOverflow, {
+		props: {
+			text: 'my Text',
+			highlight: 'text',
+		},
+		global,
+	});
+
+	expect(wrapper.getComponent({ name: 'v-highlight' }).attributes().query).toBe('text');
+	expect(wrapper.getComponent({ name: 'v-highlight' }).attributes().text).toBe('my Text');
+});
diff --git a/packages/components/src/components/v-text-overflow.vue b/packages/components/src/components/v-text-overflow.vue
new file mode 100644
index 0000000000..8ada361427
--- /dev/null
+++ b/packages/components/src/components/v-text-overflow.vue
@@ -0,0 +1,48 @@
+<template>
+	<div ref="el" v-tooltip:[placement]="hasEllipsis && text" class="v-text-overflow">
+		<v-highlight v-if="highlight" :query="highlight" :text="text" />
+		<template v-else>{{ text }}</template>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { useElementSize } from '@directus/shared/composables';
+
+interface Props {
+	/** The text that should be displayed */
+	text: string | number | boolean | Record<string, any> | Array<any>;
+	/** What parts of the text should be highlighted */
+	highlight?: string;
+	/** The placement of the tooltip */
+	placement?: 'top' | 'bottom' | 'left' | 'right' | 'start' | 'end';
+}
+
+withDefaults(defineProps<Props>(), {
+	highlight: undefined,
+	placement: 'top',
+});
+
+const el = ref<HTMLElement>();
+const hasEllipsis = ref(false);
+
+const { width } = useElementSize(el);
+
+watch(
+	width,
+	() => {
+		if (!el.value) return;
+		hasEllipsis.value = el.value.offsetWidth < el.value.scrollWidth;
+	},
+	{ immediate: true }
+);
+</script>
+
+<style lang="scss" scoped>
+.v-text-overflow {
+	overflow: hidden;
+	line-height: normal;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+</style>
diff --git a/packages/components/src/components/v-textarea.test.ts b/packages/components/src/components/v-textarea.test.ts
new file mode 100644
index 0000000000..24866a60a7
--- /dev/null
+++ b/packages/components/src/components/v-textarea.test.ts
@@ -0,0 +1,69 @@
+import { test, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import VTextarea from './v-textarea.vue';
+import { Focus } from '@/__utils__/focus';
+import { GlobalMountOptions } from '@vue/test-utils/dist/types';
+
+const global: GlobalMountOptions = {
+	directives: {
+		focus: Focus,
+	},
+};
+
+test('Mount component', () => {
+	expect(VTextarea).toBeTruthy();
+
+	const wrapper = mount(VTextarea, {
+		props: {
+			modelValue: `This is the first paragraph.
+This is the second one.`,
+		},
+		global,
+	});
+
+	expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('stlye props', async () => {
+	const types = ['expand-on-focus', 'full-width', 'disabled'];
+
+	for (const type of types) {
+		const wrapper = mount(VTextarea, {
+			props: {
+				[type]: true,
+			},
+			global,
+		});
+
+		expect(wrapper.classes()).toContain(type);
+	}
+});
+
+test('trim prop', async () => {
+	const wrapper = mount(VTextarea, {
+		props: {
+			modelValue: '  This is an info  ',
+			trim: true,
+		},
+		global,
+	});
+
+	await wrapper.get('textarea').trigger('blur');
+
+	expect(wrapper.emitted()['update:modelValue'][0]).toEqual(['This is an info']);
+});
+
+test('nullable prop', async () => {
+	const wrapper = mount(VTextarea, {
+		props: {
+			modelValue: '  This is an info  ',
+			nullable: true,
+		},
+		global,
+	});
+
+	await wrapper.get('textarea').setValue('');
+
+	expect(wrapper.emitted()['update:modelValue'][0]).toEqual([null]);
+});
diff --git a/app/src/components/v-textarea.vue b/packages/components/src/components/v-textarea.vue
similarity index 62%
rename from app/src/components/v-textarea.vue
rename to packages/components/src/components/v-textarea.vue
index 7a33a08e87..588e590026 100644
--- a/app/src/components/v-textarea.vue
+++ b/packages/components/src/components/v-textarea.vue
@@ -21,72 +21,63 @@
 	</div>
 </template>
 
-<script lang="ts">
-import { defineComponent, computed } from 'vue';
+<script setup lang="ts">
+import { computed } from 'vue';
 
-export default defineComponent({
-	props: {
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-		autofocus: {
-			type: Boolean,
-			default: false,
-		},
-		fullWidth: {
-			type: Boolean,
-			default: true,
-		},
-		modelValue: {
-			type: String,
-			default: null,
-		},
-		nullable: {
-			type: Boolean,
-			default: true,
-		},
-		expandOnFocus: {
-			type: Boolean,
-			default: false,
-		},
-		placeholder: {
-			type: String,
-			default: null,
-		},
-		trim: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	emits: ['update:modelValue'],
-	setup(props, { emit }) {
-		const listeners = computed(() => ({
-			input: emitValue,
-			blur: trimIfEnabled,
-		}));
+interface Props {
+	/** Disables the input */
+	disabled?: boolean;
+	/** Autofocusses the input on render */
+	autofocus?: boolean;
+	/** Render the input with 100% width */
+	fullWidth?: boolean;
+	/** Model the text inside the input */
+	modelValue?: string;
+	/** If the input is empty, return `null` instead of `''` */
+	nullable?: boolean;
+	/** Renders the textarea at regular input size, and expands to max-height on focus */
+	expandOnFocus?: boolean;
+	/** Text to show when no input is entered */
+	placeholder?: string;
+	/** Trim leading and trailing whitespace */
+	trim?: boolean;
+}
 
-		const hasContent = computed(() => props.modelValue && props.modelValue.length > 0);
-
-		return { listeners, hasContent };
-
-		function emitValue(event: InputEvent) {
-			const value = (event.target as HTMLInputElement).value;
-
-			if (props.nullable === true && value === '') {
-				emit('update:modelValue', null);
-			} else {
-				emit('update:modelValue', value);
-			}
-		}
-
-		function trimIfEnabled() {
-			if (props.modelValue && props.trim) {
-				emit('update:modelValue', props.modelValue.trim());
-			}
-		}
-	},
+const props = withDefaults(defineProps<Props>(), {
+	disabled: false,
+	autofocus: false,
+	fullWidth: true,
+	modelValue: undefined,
+	nullable: true,
+	expandOnFocus: false,
+	placeholder: undefined,
+	trim: false,
 });
+
+const emit = defineEmits(['update:modelValue']);
+
+const listeners = computed(() => ({
+	input: emitValue,
+	blur: trimIfEnabled,
+}));
+
+const hasContent = computed(() => props.modelValue && props.modelValue.length > 0);
+
+function emitValue(event: InputEvent) {
+	const value = (event.target as HTMLInputElement).value;
+
+	if (props.nullable === true && value === '') {
+		emit('update:modelValue', null);
+	} else {
+		emit('update:modelValue', value);
+	}
+}
+
+function trimIfEnabled() {
+	if (props.modelValue && props.trim) {
+		emit('update:modelValue', props.modelValue.trim());
+	}
+}
 </script>
 
 <style>
diff --git a/packages/components/src/components/v-workspace-tile.test.ts b/packages/components/src/components/v-workspace-tile.test.ts
new file mode 100644
index 0000000000..bc5d2fd3c2
--- /dev/null
+++ b/packages/components/src/components/v-workspace-tile.test.ts
@@ -0,0 +1,36 @@
+import { test, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import VWorkspaceTile from './v-workspace-tile.vue';
+import { GlobalMountOptions } from '@vue/test-utils/dist/types';
+import { createI18n } from 'vue-i18n';
+import { Tooltip } from '../__utils__/tooltip';
+
+const i18n = createI18n();
+
+const props = {
+	id: '1',
+	x: 1,
+	y: 1,
+	width: 10,
+	height: 10,
+};
+
+const global: GlobalMountOptions = {
+	stubs: ['v-icon', 'v-menu', 'v-text-overflow', 'v-list', 'v-list-item', 'v-list-item-icon', 'v-list-item-content'],
+	plugins: [i18n],
+	directives: {
+		Tooltip,
+	},
+};
+
+test('Mount component', () => {
+	expect(VWorkspaceTile).toBeTruthy();
+
+	const wrapper = mount(VWorkspaceTile, {
+		props,
+		global,
+	});
+
+	expect(wrapper.html()).toMatchSnapshot();
+});
diff --git a/app/src/components/v-workspace-tile.vue b/packages/components/src/components/v-workspace-tile.vue
similarity index 95%
rename from app/src/components/v-workspace-tile.vue
rename to packages/components/src/components/v-workspace-tile.vue
index cd2def2fc8..e10a4554c8 100644
--- a/app/src/components/v-workspace-tile.vue
+++ b/packages/components/src/components/v-workspace-tile.vue
@@ -108,23 +108,35 @@ export type AppTile = {
 
 // Right now, it is not possible to do type Props = AppTile & {resizable?: boolean; editMode?: boolean}
 type Props = {
+	/** The id of the tile */
 	id: string;
 	x: number;
 	y: number;
 	width: number;
 	height: number;
+	/** What title to display on the panel */
 	name?: string;
+	/** What icon to show next to the title */
 	icon?: string;
+	/** The color theme of the panel */
 	color?: string;
+	/** Adds a note beneath the title */
 	note?: string;
+	/** Allows to hide the header */
 	showHeader?: boolean;
 	minWidth?: number;
 	minHeight?: number;
+	/** If enabled, makes the tile draggable */
 	draggable?: boolean;
+	/** Add or remove rounded corners from the panels */
 	borderRadius?: [boolean, boolean, boolean, boolean];
+	/** If enabled, allows for resizing of the tile */
 	resizable?: boolean;
+	/** Enable the edit mode of the panel */
 	editMode?: boolean;
+	/** Shows options when the `editMode` is active */
 	showOptions?: boolean;
+	/** Constantly updates position, not only after the dragend */
 	alwaysUpdatePosition?: boolean;
 };
 
diff --git a/packages/components/src/components/v-workspace.test.ts b/packages/components/src/components/v-workspace.test.ts
new file mode 100644
index 0000000000..e416d3c532
--- /dev/null
+++ b/packages/components/src/components/v-workspace.test.ts
@@ -0,0 +1,66 @@
+import { test, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import VWorkspace from './v-workspace.vue';
+import { GlobalMountOptions } from '@vue/test-utils/dist/types';
+
+const global: GlobalMountOptions = {
+	stubs: ['v-workspace-tile'],
+};
+
+const tiles = [
+	{
+		id: '1',
+		x: 1,
+		y: 1,
+		width: 10,
+		height: 10,
+		name: 'My Tile 1',
+	},
+	{
+		id: '2',
+		x: 15,
+		y: 5,
+		width: 10,
+		height: 10,
+		name: 'My Tile 2',
+	},
+];
+
+test('Mount component', () => {
+	expect(VWorkspace).toBeTruthy();
+
+	const wrapper = mount(VWorkspace, {
+		props: {
+			tiles,
+		},
+		global,
+	});
+
+	expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('editMode prop', async () => {
+	const wrapper = mount(VWorkspace, {
+		props: {
+			tiles,
+			editMode: true,
+		},
+		global,
+	});
+
+	expect(wrapper.classes()).toContain('editing');
+	expect(wrapper.getComponent({ name: 'v-workspace-tile' }).attributes()['edit-mode']).toBeTruthy();
+});
+
+test('zoomToFit prop', async () => {
+	const wrapper = mount(VWorkspace, {
+		props: {
+			tiles,
+			zoomToFit: true,
+		},
+		global,
+	});
+
+	expect(wrapper.get('.workspace').attributes().style).toContain('transform: scale(-0.40714285714285714)');
+});
diff --git a/app/src/components/v-workspace.vue b/packages/components/src/components/v-workspace.vue
similarity index 89%
rename from app/src/components/v-workspace.vue
rename to packages/components/src/components/v-workspace.vue
index 08f7568c86..792479f121 100644
--- a/app/src/components/v-workspace.vue
+++ b/packages/components/src/components/v-workspace.vue
@@ -40,23 +40,26 @@
 
 <script setup lang="ts">
 import { computed, inject, ref } from 'vue';
-import { useElementSize } from '@/composables/use-element-size';
+import { useElementSize } from '@directus/shared/composables';
 import { AppTile } from './v-workspace-tile.vue';
 import { cssVar } from '@directus/shared/utils/browser';
 
-const props = withDefaults(
-	defineProps<{
-		tiles: AppTile[];
-		editMode?: boolean;
-		zoomToFit?: boolean;
-		resizable?: boolean;
-	}>(),
-	{
-		editMode: false,
-		zoomToFit: false,
-		resizable: true,
-	}
-);
+interface Props {
+	/** What tiles to render inside the workspace */
+	tiles: AppTile[];
+	/** Enables the edit mode */
+	editMode?: boolean;
+	/** Sets zoom and position so that all components are perfectly shown */
+	zoomToFit?: boolean;
+	/** Makes the panel resizable */
+	resizable?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	editMode: false,
+	zoomToFit: false,
+	resizable: true,
+});
 
 defineEmits(['update', 'move', 'delete', 'duplicate', 'edit', 'preview']);
 
diff --git a/packages/components/src/shims.d.ts b/packages/components/src/shims.d.ts
new file mode 100644
index 0000000000..34a8ce94e8
--- /dev/null
+++ b/packages/components/src/shims.d.ts
@@ -0,0 +1,6 @@
+declare module '*.vue' {
+	import { DefineComponent } from 'vue';
+	// eslint-disable-next-line @typescript-eslint/ban-types
+	const component: DefineComponent<{}, {}, any>;
+	export default component;
+}
diff --git a/packages/components/src/styles/no-wrap.scss b/packages/components/src/styles/no-wrap.scss
new file mode 100644
index 0000000000..2ad932991b
--- /dev/null
+++ b/packages/components/src/styles/no-wrap.scss
@@ -0,0 +1,5 @@
+@mixin no-wrap {
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
diff --git a/packages/components/stories/transition-bounce.stories.ts b/packages/components/stories/transition-bounce.stories.ts
new file mode 100644
index 0000000000..304ee6f34f
--- /dev/null
+++ b/packages/components/stories/transition-bounce.stories.ts
@@ -0,0 +1,23 @@
+import TransitionBounce from '../src/components/transition/bounce.vue';
+document.body.classList.add('light')
+
+
+
+export default {
+    title: 'Components/Transition/TransitionBounce',
+    component: TransitionBounce,
+    argTypes: {
+
+    },
+};
+
+const Template = (args) => ({
+    setup() {
+        return { args };
+    },
+    template: '<v-hover v-slot="{ hover }">Hover me!<transition-bounce v-bind="args" v-on="args"><div v-if="hover" style="background-color: var(--background-normal); height: 200px; width: 400px; display: flex; justify-content: center; align-items: center">This is only shown on hover.</div></transition-bounce></v-hover>',
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+};
\ No newline at end of file
diff --git a/packages/components/stories/transition-dialog.stories.ts b/packages/components/stories/transition-dialog.stories.ts
new file mode 100644
index 0000000000..3d21b28c10
--- /dev/null
+++ b/packages/components/stories/transition-dialog.stories.ts
@@ -0,0 +1,23 @@
+import TransitionDialog from '../src/components/transition/dialog.vue';
+document.body.classList.add('light')
+
+
+
+export default {
+    title: 'Components/Transition/TransitionDialog',
+    component: TransitionDialog,
+    argTypes: {
+
+    },
+};
+
+const Template = (args) => ({
+    setup() {
+        return { args };
+    },
+    template: '<v-hover v-slot="{ hover }">Hover me!<transition-dialog v-bind="args" v-on="args"><div v-if="hover" style="background-color: var(--background-normal); height: 200px; width: 400px; display: flex; justify-content: center; align-items: center">This is only shown on hover.</div></transition-dialog></v-hover>',
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+};
\ No newline at end of file
diff --git a/packages/components/stories/transition-expand.stories.ts b/packages/components/stories/transition-expand.stories.ts
new file mode 100644
index 0000000000..f6595f6a9a
--- /dev/null
+++ b/packages/components/stories/transition-expand.stories.ts
@@ -0,0 +1,23 @@
+import TransitionExpand from '../src/components/transition/expand.vue';
+document.body.classList.add('light')
+
+
+
+export default {
+    title: 'Components/Transition/TransitionExpand',
+    component: TransitionExpand,
+    argTypes: {
+
+    },
+};
+
+const Template = (args) => ({
+    setup() {
+        return { args };
+    },
+    template: '<v-hover v-slot="{ hover }">Hover me!<transition-expand v-bind="args" v-on="args"><div v-if="hover" style="background-color: var(--background-normal); height: 200px; width: 400px; display: flex; justify-content: center; align-items: center">This is only shown on hover.</div></transition-expand></v-hover>',
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+};
\ No newline at end of file
diff --git a/packages/components/stories/v-avatar.stories.ts b/packages/components/stories/v-avatar.stories.ts
new file mode 100644
index 0000000000..8e55a3b6c0
--- /dev/null
+++ b/packages/components/stories/v-avatar.stories.ts
@@ -0,0 +1,23 @@
+import VAvatar from '../src/components/v-avatar.vue';
+document.body.classList.add('light')
+
+
+
+export default {
+  title: 'Components/VAvatar',
+  component: VAvatar,
+  argTypes: {
+    
+  },
+};
+
+const Template = (args) => ({
+  setup() {
+    return { args };
+  },
+  template: '<v-avatar v-bind="args" v-on="args" ><v-icon name="person" /></v-avatar>',
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+};
\ No newline at end of file
diff --git a/packages/components/stories/v-badge.stories.ts b/packages/components/stories/v-badge.stories.ts
new file mode 100644
index 0000000000..106e22b2ea
--- /dev/null
+++ b/packages/components/stories/v-badge.stories.ts
@@ -0,0 +1,24 @@
+import VBadge from '../src/components/v-badge.vue';
+document.body.classList.add('light')
+
+
+
+export default {
+  title: 'Components/VBadge',
+  component: VBadge,
+  argTypes: {
+    
+  },
+};
+
+const Template = (args) => ({
+  setup() {
+    return { args };
+  },
+  template: '<v-badge v-bind="args" v-on="args" ><v-icon name="notifications_active" /></v-badge>',
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+    value: '+9'
+};
\ No newline at end of file
diff --git a/packages/components/stories/v-breadcrumb.stories.ts b/packages/components/stories/v-breadcrumb.stories.ts
new file mode 100644
index 0000000000..97ec9860ea
--- /dev/null
+++ b/packages/components/stories/v-breadcrumb.stories.ts
@@ -0,0 +1,38 @@
+import VBreadcrumb from '../src/components/v-breadcrumb.vue';
+document.body.classList.add('light')
+
+
+
+export default {
+  title: 'Components/VBreadcrumb',
+  component: VBreadcrumb,
+  argTypes: {
+    
+  },
+};
+
+const Template = (args) => ({
+  setup() {
+    return { args };
+  },
+  template: '<v-breadcrumb v-bind="args" v-on="args" />',
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+    items: [
+        {
+            to: '/',
+            name: 'Home'
+        }, {
+            to: '/settings',
+            name: 'settings',
+            icon: 'settings'
+        }, {
+            to: '/settings/profile',
+            name: 'Profile',
+            icon: 'person',
+            disabled: true
+        }
+    ]
+};
\ No newline at end of file
diff --git a/packages/components/stories/v-button.stories.ts b/packages/components/stories/v-button.stories.ts
new file mode 100644
index 0000000000..54b4a22f27
--- /dev/null
+++ b/packages/components/stories/v-button.stories.ts
@@ -0,0 +1,24 @@
+import VButton from '../src/components/v-button.vue';
+
+
+document.body.classList.add('light')
+
+export default {
+    title: 'Components/VButton',
+    component: VButton,
+    
+    argTypes: {
+        click: { action: 'clicked' },
+    },
+};
+
+const Template = (args) => ({
+    setup() {
+        return { args };
+    },
+    template: '<v-button v-bind="args" v-on="args">My Button{{args.onClick}}</v-button>',
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+};
\ No newline at end of file
diff --git a/packages/components/stories/v-card.stories.ts b/packages/components/stories/v-card.stories.ts
new file mode 100644
index 0000000000..b09f8f78c6
--- /dev/null
+++ b/packages/components/stories/v-card.stories.ts
@@ -0,0 +1,33 @@
+import VCard from '../src/components/v-card.vue';
+document.body.classList.add('light')
+
+
+
+export default {
+    title: 'Components/VCard',
+    component: VCard,
+    argTypes: {
+
+    },
+};
+
+const Template = (args) => ({
+    setup() {
+        return { args };
+    },
+    template: `<v-card v-bind="args" v-on="args" >
+    <v-card-title>Want a cake?</v-card-title>
+    <v-card-text>
+        If you want a cake, you have to click on accept.
+        And the cake is definitely not a lie.
+    </v-card-text>
+    <v-card-actions>
+        <v-button secondary>Decline</v-button>
+        <v-button>Accept</v-button>
+    </v-card-actions>
+</v-card>`,
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+};
\ No newline at end of file
diff --git a/packages/components/stories/v-checkbox-tree.stories.ts b/packages/components/stories/v-checkbox-tree.stories.ts
new file mode 100644
index 0000000000..4e5930e068
--- /dev/null
+++ b/packages/components/stories/v-checkbox-tree.stories.ts
@@ -0,0 +1,45 @@
+import VCheckboxTree from '../src/components/v-checkbox-tree/v-checkbox-tree.vue';
+document.body.classList.add('light')
+
+
+
+export default {
+    title: 'Components/VCheckboxTree',
+    component: VCheckboxTree,
+    argTypes: {
+
+    },
+};
+
+const Template = (args) => ({
+    setup() {
+        return { args };
+    },
+    template: '<v-checkbox-tree v-bind="args" v-on="args" />',
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+    choices: [
+        {
+            text: 'Choice 1',
+            value: 'choice-1',
+            children: [
+                {
+                    text: 'Choice 1.1',
+                    value: 'choice-1.1',
+                }, {
+                    text: 'Choice 1.2',
+                    value: 'choice-1.2',
+                }
+            ],
+        }, {
+            text: 'Choice 2',
+            value: 'choice-2',
+        }, {
+            text: 'Choice 3',
+            value: 'choice-3',
+        }
+    ],
+    modelValue: ['choice-1.1', 'choice-3'],
+};
\ No newline at end of file
diff --git a/packages/components/stories/v-checkbox.stories.ts b/packages/components/stories/v-checkbox.stories.ts
new file mode 100644
index 0000000000..20243a78b2
--- /dev/null
+++ b/packages/components/stories/v-checkbox.stories.ts
@@ -0,0 +1,24 @@
+import VCheckbox from '../src/components/v-checkbox.vue';
+document.body.classList.add('light')
+
+
+
+export default {
+    title: 'Components/VCheckbox',
+    component: VCheckbox,
+    argTypes: {
+        'modelValue': { action: 'updateModelValue' },
+    },
+};
+
+const Template = (args) => ({
+    setup() {
+        return { args };
+    },
+    template: '<v-checkbox v-bind="args" v-on="args">My Checkbox</v-checkbox>',
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+    modelValue: true
+};
\ No newline at end of file
diff --git a/packages/components/stories/v-chip.stories.ts b/packages/components/stories/v-chip.stories.ts
new file mode 100644
index 0000000000..30e1adc46f
--- /dev/null
+++ b/packages/components/stories/v-chip.stories.ts
@@ -0,0 +1,23 @@
+import VChip from '../src/components/v-chip.vue';
+document.body.classList.add('light')
+
+
+
+export default {
+    title: 'Components/VChip',
+    component: VChip,
+    argTypes: {
+        close: { 'control': 'boolean' }
+    },
+};
+
+const Template = (args) => ({
+    setup() {
+        return { args };
+    },
+    template: '<v-chip v-bind="args" v-on="args" >Cake</v-chip>',
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+};
\ No newline at end of file
diff --git a/packages/components/stories/v-divider.stories.ts b/packages/components/stories/v-divider.stories.ts
new file mode 100644
index 0000000000..a3c08873e0
--- /dev/null
+++ b/packages/components/stories/v-divider.stories.ts
@@ -0,0 +1,23 @@
+import VDivider from '../src/components/v-divider.vue';
+document.body.classList.add('light')
+
+
+
+export default {
+    title: 'Components/VDivider',
+    component: VDivider,
+    argTypes: {
+
+    },
+};
+
+const Template = (args) => ({
+    setup() {
+        return { args };
+    },
+    template: '<v-divider v-bind="args" v-on="args" />',
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+};
\ No newline at end of file
diff --git a/packages/components/stories/v-emoji-picker.stories.ts b/packages/components/stories/v-emoji-picker.stories.ts
new file mode 100644
index 0000000000..dd047837c6
--- /dev/null
+++ b/packages/components/stories/v-emoji-picker.stories.ts
@@ -0,0 +1,23 @@
+import VEmojiPicker from '../src/components/v-emoji-picker.vue';
+document.body.classList.add('light')
+
+
+
+export default {
+    title: 'Components/VEmojiPicker',
+    component: VEmojiPicker,
+    argTypes: {
+
+    },
+};
+
+const Template = (args) => ({
+    setup() {
+        return { args };
+    },
+    template: '<v-emoji-picker v-bind="args" v-on="args" >My Button</v-emoji-picker>',
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+};
\ No newline at end of file
diff --git a/packages/components/stories/v-fancy-select.stories.ts b/packages/components/stories/v-fancy-select.stories.ts
new file mode 100644
index 0000000000..947e2b4057
--- /dev/null
+++ b/packages/components/stories/v-fancy-select.stories.ts
@@ -0,0 +1,40 @@
+import VFancySelect from '../src/components/v-fancy-select.vue';
+document.body.classList.add('light')
+
+
+
+export default {
+    title: 'Components/VFancySelect',
+    component: VFancySelect,
+    argTypes: {
+
+    },
+};
+
+const Template = (args) => ({
+    setup() {
+        return { args };
+    },
+    template: '<v-fancy-select v-bind="args" v-on="args" >My Button</v-fancy-select>',
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+    items: [
+        {
+            icon: 'person',
+            value: 'person',
+            text: 'Person',
+        }, {
+            icon: 'directions_car',
+            value: 'car',
+            text: 'Car',
+        }, {
+            divider: true
+        }, {
+            icon: 'home',
+            value: 'home',
+            text: 'Home',
+        }
+    ]
+};
\ No newline at end of file
diff --git a/packages/components/stories/v-highlight.stories.ts b/packages/components/stories/v-highlight.stories.ts
new file mode 100644
index 0000000000..ca574d9944
--- /dev/null
+++ b/packages/components/stories/v-highlight.stories.ts
@@ -0,0 +1,25 @@
+import VHighlight from '../src/components/v-highlight.vue';
+document.body.classList.add('light')
+
+
+
+export default {
+    title: 'Components/VHighlight',
+    component: VHighlight,
+    argTypes: {
+
+    },
+};
+
+const Template = (args) => ({
+    setup() {
+        return { args };
+    },
+    template: '<v-highlight v-bind="args" v-on="args" />',
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+    text: 'The cake is a lie.',
+    query: ['cake','lie'],
+};
\ No newline at end of file
diff --git a/packages/components/stories/v-hover.stories.ts b/packages/components/stories/v-hover.stories.ts
new file mode 100644
index 0000000000..1ad55289ef
--- /dev/null
+++ b/packages/components/stories/v-hover.stories.ts
@@ -0,0 +1,23 @@
+import VHover from '../src/components/v-hover.vue';
+document.body.classList.add('light')
+
+
+
+export default {
+    title: 'Components/VHover',
+    component: VHover,
+    argTypes: {
+
+    },
+};
+
+const Template = (args) => ({
+    setup() {
+        return { args };
+    },
+    template: '<v-hover v-bind="args" v-on="args" v-slot="{ hover }">Hover me!<div v-if="hover">This is only shown on hover.</div></v-hover>',
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+};
\ No newline at end of file
diff --git a/packages/components/stories/v-icon-file.stories.ts b/packages/components/stories/v-icon-file.stories.ts
new file mode 100644
index 0000000000..1476060cef
--- /dev/null
+++ b/packages/components/stories/v-icon-file.stories.ts
@@ -0,0 +1,24 @@
+import VIconFile from '../src/components/v-icon-file.vue';
+document.body.classList.add('light')
+
+
+
+export default {
+    title: 'Components/VIconFile',
+    component: VIconFile,
+    argTypes: {
+
+    },
+};
+
+const Template = (args) => ({
+    setup() {
+        return { args };
+    },
+    template: '<v-icon-file v-bind="args" v-on="args" >My Button</v-icon-file>',
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+    ext: "png"
+};
\ No newline at end of file
diff --git a/packages/components/stories/v-icon.stories.ts b/packages/components/stories/v-icon.stories.ts
new file mode 100644
index 0000000000..17c689a538
--- /dev/null
+++ b/packages/components/stories/v-icon.stories.ts
@@ -0,0 +1,24 @@
+import VIcon from '../src/components/v-icon/v-icon.vue';
+document.body.classList.add('light')
+
+
+
+export default {
+  title: 'Components/VIcon',
+  component: VIcon,
+  argTypes: {
+    
+  },
+};
+
+const Template = (args) => ({
+  setup() {
+    return { args };
+  },
+  template: '<v-icon v-bind="args" v-on="args" />',
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+  name: 'delete'
+};
\ No newline at end of file
diff --git a/packages/components/stories/v-info.stories.ts b/packages/components/stories/v-info.stories.ts
new file mode 100644
index 0000000000..c09efd35fd
--- /dev/null
+++ b/packages/components/stories/v-info.stories.ts
@@ -0,0 +1,25 @@
+import VInfo from '../src/components/v-info.vue';
+document.body.classList.add('light')
+
+
+
+export default {
+    title: 'Components/VInfo',
+    component: VInfo,
+    argTypes: {
+
+    },
+};
+
+const Template = (args) => ({
+    setup() {
+        return { args };
+    },
+    template: '<v-info v-bind="args" v-on="args" >You have sadly eaten all the cookies!</v-info>',
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+    title: 'No more cookies',
+    icon: 'cookie'
+};
\ No newline at end of file
diff --git a/packages/components/stories/v-input.stories.ts b/packages/components/stories/v-input.stories.ts
new file mode 100644
index 0000000000..3bf35eb16e
--- /dev/null
+++ b/packages/components/stories/v-input.stories.ts
@@ -0,0 +1,25 @@
+import VInput from '../src/components/v-input.vue';
+document.body.classList.add('light')
+
+
+
+export default {
+    title: 'Components/VInput',
+    component: VInput,
+    argTypes: {
+
+    },
+};
+
+const Template = (args) => ({
+    setup() {
+        return { args };
+    },
+    template: '<v-input v-bind="args" v-on="args" />',
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+    modelValue: 'Shut up and take my money. 💸',
+    disabled: false
+};
\ No newline at end of file
diff --git a/packages/components/stories/v-item-group.stories.ts b/packages/components/stories/v-item-group.stories.ts
new file mode 100644
index 0000000000..978c06dffd
--- /dev/null
+++ b/packages/components/stories/v-item-group.stories.ts
@@ -0,0 +1,24 @@
+import VItemGroup from '../src/components/v-item-group.vue';
+document.body.classList.add('light')
+
+
+
+export default {
+    title: 'Components/VItemGroup',
+    component: VItemGroup,
+    argTypes: {
+
+    },
+};
+
+const Template = (args) => ({
+    setup() {
+        return { args };
+    },
+    template: '<v-item-group v-bind="args" v-on="args" ><v-item watch value="item1" v-slot="{active}">First item is active: {{active}}</v-item><v-item value="item2" v-slot="{active}">Second item is active: {{active}}</v-item></v-item-group>',
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+    modelValue: ['item1']
+};
\ No newline at end of file
diff --git a/packages/components/stories/v-list-group.stories.ts b/packages/components/stories/v-list-group.stories.ts
new file mode 100644
index 0000000000..5fa6ea18de
--- /dev/null
+++ b/packages/components/stories/v-list-group.stories.ts
@@ -0,0 +1,40 @@
+import VListGroup from '../src/components/v-list-group.vue';
+document.body.classList.add('light')
+
+
+
+export default {
+    title: 'Components/List/VListGroup',
+    component: VListGroup,
+    argTypes: {
+
+    },
+};
+
+const Template = (args) => ({
+    setup() {
+        return { args };
+    },
+    template: `
+<v-list>
+    <v-list-item>Item 1 </v-list-item>
+    <v-list-item>Item 2 </v-list-item>
+
+    <v-list-group v-bind="args" v-on="args">
+		<template #activator="{active}">
+			<v-list-item>Group Item 3</v-list-item>
+		</template>
+
+		<v-list-item>Item 3-1</v-list-item>
+		<v-list-item>Item 3-2</v-list-item>
+		<v-list-item>Item 3-2</v-list-item>
+	</v-list-group>
+    <v-list-item>Item 4 </v-list-item>
+</v-list>
+    `,
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+    open: true
+};
\ No newline at end of file
diff --git a/packages/components/stories/v-list-item.stories.ts b/packages/components/stories/v-list-item.stories.ts
new file mode 100644
index 0000000000..2118d78e15
--- /dev/null
+++ b/packages/components/stories/v-list-item.stories.ts
@@ -0,0 +1,26 @@
+import VListItem from '../src/components/v-list-item.vue';
+document.body.classList.add('light')
+
+
+
+export default {
+    title: 'Components/List/VListItem',
+    component: VListItem,
+    argTypes: {
+
+    },
+};
+
+const Template = (args) => ({
+    setup() {
+        return { args };
+    },
+    template: `
+<v-list-item v-bind="args" v-on="args" >List Item 1</v-list-item>
+    `,
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+    
+};
\ No newline at end of file
diff --git a/packages/components/stories/v-list.stories.ts b/packages/components/stories/v-list.stories.ts
new file mode 100644
index 0000000000..5b59cda8b2
--- /dev/null
+++ b/packages/components/stories/v-list.stories.ts
@@ -0,0 +1,30 @@
+import VList from '../src/components/v-list.vue';
+document.body.classList.add('light')
+
+
+
+export default {
+    title: 'Components/List/VList',
+    component: VList,
+    argTypes: {
+
+    },
+};
+
+const Template = (args) => ({
+    setup() {
+        return { args };
+    },
+    template: `
+<v-list v-bind="args" v-on="args" >
+    <v-list-item>Item 1 </v-list-item>
+    <v-list-item>Item 2 </v-list-item>
+    <v-list-item>Item 3 </v-list-item>
+</v-list>
+    `,
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+    modelValue: [1]
+};
\ No newline at end of file
diff --git a/packages/components/stories/v-menu.stories.ts b/packages/components/stories/v-menu.stories.ts
new file mode 100644
index 0000000000..69540d8632
--- /dev/null
+++ b/packages/components/stories/v-menu.stories.ts
@@ -0,0 +1,43 @@
+import VMenu from '../src/components/v-menu.vue';
+document.body.classList.add('light')
+
+
+
+export default {
+    title: 'Components/VMenu',
+    component: VMenu,
+    argTypes: {
+
+    },
+};
+
+const Template = (args) => ({
+    setup() {
+        return { args };
+    },
+    template: `
+<v-menu v-bind="args" v-on="args" >
+    <template #activator="{ toggle }">
+        <v-icon clickable class="options" name="more_vert" @click="toggle" />
+    </template>
+    <v-list>
+        <v-list-item clickable>
+            <v-list-item-icon><v-icon name="folder_open" /></v-list-item-icon>
+            <v-list-item-content>
+                Choose from Library
+            </v-list-item-content>
+        </v-list-item>
+
+        <v-list-item clickable>
+            <v-list-item-icon><v-icon name="link" /></v-list-item-icon>
+            <v-list-item-content>
+                Choose from Url
+            </v-list-item-content>
+        </v-list-item>
+    </v-list>
+</v-menu>`,
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+};
\ No newline at end of file
diff --git a/packages/components/stories/v-notice.stories.ts b/packages/components/stories/v-notice.stories.ts
new file mode 100644
index 0000000000..c760db1ed9
--- /dev/null
+++ b/packages/components/stories/v-notice.stories.ts
@@ -0,0 +1,25 @@
+import VNotice from '../src/components/v-notice.vue';
+document.body.classList.add('light')
+
+
+
+export default {
+    title: 'Components/VNotice',
+    component: VNotice,
+    argTypes: {
+        type: {
+            control: { type: 'select', options: ['normal','info', 'success', 'warning', 'danger'] },
+        }
+    },
+};
+
+const Template = (args) => ({
+    setup() {
+        return { args };
+    },
+    template: '<v-notice v-bind="args" v-on="args" >Making a pizza ist best done without ordering a pizza.</v-notice>',
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+};
\ No newline at end of file
diff --git a/packages/components/stories/v-overlay.stories.ts b/packages/components/stories/v-overlay.stories.ts
new file mode 100644
index 0000000000..70990342fa
--- /dev/null
+++ b/packages/components/stories/v-overlay.stories.ts
@@ -0,0 +1,24 @@
+import VOverlay from '../src/components/v-overlay.vue';
+document.body.classList.add('light')
+
+
+
+export default {
+    title: 'Components/VOverlay',
+    component: VOverlay,
+    argTypes: {
+
+    },
+};
+
+const Template = (args) => ({
+    setup() {
+        return { args };
+    },
+    template: '<div>This is hidden behind the overlay.</div><v-overlay v-bind="args" v-on="args" />',
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+    active: true
+};
\ No newline at end of file
diff --git a/packages/components/stories/v-pagination.stories.ts b/packages/components/stories/v-pagination.stories.ts
new file mode 100644
index 0000000000..5f3473d631
--- /dev/null
+++ b/packages/components/stories/v-pagination.stories.ts
@@ -0,0 +1,26 @@
+import VPagination from '../src/components/v-pagination.vue';
+document.body.classList.add('light')
+
+
+
+export default {
+    title: 'Components/VPagination',
+    component: VPagination,
+    argTypes: {
+
+    },
+};
+
+const Template = (args) => ({
+    setup() {
+        return { args };
+    },
+    template: '<v-pagination v-bind="args" v-on="args" />',
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+    length: 7,
+    totalVisible: 4,
+    modelValue: 3
+};
\ No newline at end of file
diff --git a/packages/components/stories/v-progress-circular.stories.ts b/packages/components/stories/v-progress-circular.stories.ts
new file mode 100644
index 0000000000..f473b6834c
--- /dev/null
+++ b/packages/components/stories/v-progress-circular.stories.ts
@@ -0,0 +1,24 @@
+import VProgressCircular from '../src/components/v-progress-circular.vue';
+document.body.classList.add('light')
+
+
+
+export default {
+    title: 'Components/VProgressCircular',
+    component: VProgressCircular,
+    argTypes: {
+
+    },
+};
+
+const Template = (args) => ({
+    setup() {
+        return { args };
+    },
+    template: '<v-progress-circular v-bind="args" v-on="args" />',
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+    value: 70
+};
\ No newline at end of file
diff --git a/packages/components/stories/v-progress-linear.stories.ts b/packages/components/stories/v-progress-linear.stories.ts
new file mode 100644
index 0000000000..fc28f02c01
--- /dev/null
+++ b/packages/components/stories/v-progress-linear.stories.ts
@@ -0,0 +1,25 @@
+import VProgressLinear from '../src/components/v-progress-linear.vue';
+document.body.classList.add('light')
+
+
+
+export default {
+    title: 'Components/VProgressLinear',
+    component: VProgressLinear,
+    argTypes: {
+
+    },
+};
+
+const Template = (args) => ({
+    setup() {
+        return { args };
+    },
+    template: '<v-progress-linear v-bind="args" v-on="args" />',
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+    value: 70,
+    colorful: true
+};
\ No newline at end of file
diff --git a/packages/components/stories/v-radio.stories.ts b/packages/components/stories/v-radio.stories.ts
new file mode 100644
index 0000000000..dd437d912e
--- /dev/null
+++ b/packages/components/stories/v-radio.stories.ts
@@ -0,0 +1,26 @@
+import VRadio from '../src/components/v-radio.vue';
+document.body.classList.add('light')
+
+
+
+export default {
+    title: 'Components/VRadio',
+    component: VRadio,
+    argTypes: {
+
+    },
+};
+
+const Template = (args) => ({
+    setup() {
+        return { args };
+    },
+    template: '<v-radio v-bind="args" v-on="args"/>',
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+    value: '1',
+    label: 'My Radio',
+    modelValue: '1'
+};
\ No newline at end of file
diff --git a/packages/components/stories/v-select.stories.ts b/packages/components/stories/v-select.stories.ts
new file mode 100644
index 0000000000..9b32cbeca9
--- /dev/null
+++ b/packages/components/stories/v-select.stories.ts
@@ -0,0 +1,37 @@
+import VSelect from '../src/components/v-select/v-select.vue';
+
+document.body.classList.add('light')
+
+
+
+export default {
+    title: 'Components/VSelect',
+    component: VSelect,
+    argTypes: {
+
+    },
+};
+
+const Template = (args) => ({
+    setup() {
+        return { args };
+    },
+    template: `<v-select v-bind="args" v-on="args"></v-select>`,
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+    items: [
+        {
+            text: 'Item 1',
+            value: 'item1',
+        }, {
+            text: 'Item 2',
+            value: 'item2',
+        }, {
+            text: 'Item 3',
+            value: 'item3',
+        }
+    ],
+    modelValue: 'item2',
+};
\ No newline at end of file
diff --git a/packages/components/stories/v-sheet.stories.ts b/packages/components/stories/v-sheet.stories.ts
new file mode 100644
index 0000000000..27db9669d8
--- /dev/null
+++ b/packages/components/stories/v-sheet.stories.ts
@@ -0,0 +1,23 @@
+import VSheet from '../src/components/v-sheet.vue';
+document.body.classList.add('light')
+
+
+
+export default {
+    title: 'Components/VSheet',
+    component: VSheet,
+    argTypes: {
+
+    },
+};
+
+const Template = (args) => ({
+    setup() {
+        return { args };
+    },
+    template: '<v-sheet v-bind="args" v-on="args" >This is some wanky sheet that is not even used inside Directus.</v-sheet>',
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+};
\ No newline at end of file
diff --git a/packages/components/stories/v-skeleton-loader.stories.ts b/packages/components/stories/v-skeleton-loader.stories.ts
new file mode 100644
index 0000000000..011c42c489
--- /dev/null
+++ b/packages/components/stories/v-skeleton-loader.stories.ts
@@ -0,0 +1,28 @@
+import VSkeletonLoader from '../src/components/v-skeleton-loader.vue';
+document.body.classList.add('light')
+
+
+
+export default {
+    title: 'Components/VSkeletonLoader',
+    component: VSkeletonLoader,
+    argTypes: {
+        type: {
+            control: {
+                type: 'select',
+                options: ['input','input-tall','block-list-item','block-list-item-dense','text','list-item-icon']
+            }
+        }
+    },
+};
+
+const Template = (args) => ({
+    setup() {
+        return { args };
+    },
+    template: '<v-skeleton-loader v-bind="args" v-on="args"  />',
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+};
\ No newline at end of file
diff --git a/packages/components/stories/v-slider.stories.ts b/packages/components/stories/v-slider.stories.ts
new file mode 100644
index 0000000000..767036b133
--- /dev/null
+++ b/packages/components/stories/v-slider.stories.ts
@@ -0,0 +1,31 @@
+import VSlider from '../src/components/v-slider.vue';
+
+document.body.classList.add('light')
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+
+
+export default {
+  title: 'Components/VSlider',
+  component: VSlider,
+  // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
+  argTypes: {
+    'update:modelValue': { action: 'update:modelValue' },
+  },
+};
+
+// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
+const Template = (args) => ({
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  setup() {
+    return { args };
+  },
+  // And then the `args` are bound to your component with `v-bind="args" v-on="args"`
+  template: '<v-slider v-bind="args" v-on="args" />',
+});
+
+export const Primary = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Primary.args = {
+  modelValue: 50,
+};
\ No newline at end of file
diff --git a/packages/components/stories/v-tabs.stories.ts b/packages/components/stories/v-tabs.stories.ts
new file mode 100644
index 0000000000..11712825e0
--- /dev/null
+++ b/packages/components/stories/v-tabs.stories.ts
@@ -0,0 +1,43 @@
+import VTabs from '../src/components/v-tabs.vue';
+document.body.classList.add('light')
+
+
+
+export default {
+    title: 'Components/VTabs',
+    component: VTabs,
+    argTypes: {
+
+    },
+};
+
+const Template = (args) => ({
+    setup() {
+        return { args };
+    },
+    template: `
+<div>
+    <v-tabs v-bind="args" v-on="args" >
+        <v-tab>Foods</v-tab>
+        <v-tab>Drinks</v-tab>
+        <v-tab>Extras</v-tab>
+    </v-tabs>
+    <v-tabs-items :modelValue="args.modelValue">
+        <v-tab-item>
+            <h1>This is the first page</h1>
+        </v-tab-item>
+        <v-tab-item>
+            <h1>This is the second page</h1>
+        </v-tab-item>
+        <v-tab-item>
+            <h1>This is the third page</h1>
+        </v-tab-item>
+    </v-tabs-items>
+</div>
+    `,
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+    modelValue: [1]
+};
\ No newline at end of file
diff --git a/packages/components/stories/v-template-input.stories.ts b/packages/components/stories/v-template-input.stories.ts
new file mode 100644
index 0000000000..e68b43f26e
--- /dev/null
+++ b/packages/components/stories/v-template-input.stories.ts
@@ -0,0 +1,31 @@
+import VTemplateInput from '../src/components/v-template-input.vue';
+document.body.classList.add('light')
+
+
+
+export default {
+    title: 'Components/VTemplateInput',
+    component: VTemplateInput,
+    argTypes: {
+
+    },
+};
+
+const Template = (args) => ({
+    setup() {
+        return { args };
+    },
+    template: '<v-template-input v-bind="args" v-on="args" >My Template Input</v-template-input>',
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+    modelValue: 'Hey ho everyone, I am a new comment!',
+    multiline: true,
+    'trigger-character': '@',
+    items: {
+        item1: 'Test1',
+        item2: 'Test2',
+    },
+    captureGroup: '(@[0-9A-F]{8}-[0-9A-F]{4}-4[0-9A-F]{3}-[89AB][0-9A-F]{3}-[0-9A-F]{12})'
+};
\ No newline at end of file
diff --git a/packages/components/stories/v-text-overflow.stories.ts b/packages/components/stories/v-text-overflow.stories.ts
new file mode 100644
index 0000000000..837258a75c
--- /dev/null
+++ b/packages/components/stories/v-text-overflow.stories.ts
@@ -0,0 +1,24 @@
+import VTextOverflow from '../src/components/v-text-overflow.vue';
+document.body.classList.add('light')
+
+
+
+export default {
+    title: 'Components/VTextOverflow',
+    component: VTextOverflow,
+    argTypes: {
+
+    },
+};
+
+const Template = (args) => ({
+    setup() {
+        return { args };
+    },
+    template: '<v-text-overflow v-bind="args" v-on="args"></v-text-overflow>',
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+    text: "This text should not wrap to a new line!"
+};
\ No newline at end of file
diff --git a/packages/components/stories/v-textarea.stories.ts b/packages/components/stories/v-textarea.stories.ts
new file mode 100644
index 0000000000..d23c41d92c
--- /dev/null
+++ b/packages/components/stories/v-textarea.stories.ts
@@ -0,0 +1,25 @@
+import VTextarea from '../src/components/v-textarea.vue';
+document.body.classList.add('light')
+
+
+
+export default {
+  title: 'Components/VTextarea',
+  component: VTextarea,
+  argTypes: {
+    
+  },
+};
+
+const Template = (args) => ({
+  setup() {
+    return { args };
+  },
+  template: '<v-textarea v-bind="args" v-on="args" >My Button</v-textarea>',
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+    modelValue: `This is some text that will be displayed in the textarea.
+This is a new line.`
+};
\ No newline at end of file
diff --git a/packages/components/stories/v-workspace-tile.stories.ts b/packages/components/stories/v-workspace-tile.stories.ts
new file mode 100644
index 0000000000..52119e8831
--- /dev/null
+++ b/packages/components/stories/v-workspace-tile.stories.ts
@@ -0,0 +1,24 @@
+import VWorkspaceTile from '../src/components/v-workspace-tile.vue';
+document.body.classList.add('light')
+
+
+
+export default {
+    title: 'Components/VWorkspaceTile',
+    component: VWorkspaceTile,
+    argTypes: {
+
+    },
+};
+
+const Template = (args) => ({
+    setup() {
+        return { args };
+    },
+    template: '<v-workspace-tile v-bind="args" v-on="args" >Contents of the tile</v-workspace-tile>',
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+    name: 'My Tile'
+};
\ No newline at end of file
diff --git a/packages/components/stories/v-workspace.stories.ts b/packages/components/stories/v-workspace.stories.ts
new file mode 100644
index 0000000000..bcc3a67026
--- /dev/null
+++ b/packages/components/stories/v-workspace.stories.ts
@@ -0,0 +1,40 @@
+import VWorkspace from '../src/components/v-workspace.vue';
+document.body.classList.add('light')
+
+
+
+export default {
+    title: 'Components/VWorkspace',
+    component: VWorkspace,
+    argTypes: {
+
+    },
+};
+
+const Template = (args) => ({
+    setup() {
+        return { args };
+    },
+    template: '<v-workspace v-bind="args" v-on="args" ></v-workspace>',
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+    tiles: [
+        {
+            id: '1',
+            x: 1,
+            y: 1,
+            width: 10,
+            height: 10,
+            name: 'My Tile 1',
+        }, {
+            id: '2',
+            x: 15,
+            y: 5,
+            width: 10,
+            height: 10,
+            name: 'My Tile 2',
+        }
+    ]
+};
\ No newline at end of file
diff --git a/packages/components/stub/empty.d.ts b/packages/components/stub/empty.d.ts
new file mode 100644
index 0000000000..cb0ff5c3b5
--- /dev/null
+++ b/packages/components/stub/empty.d.ts
@@ -0,0 +1 @@
+export {};
diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json
new file mode 100644
index 0000000000..c62607f201
--- /dev/null
+++ b/packages/components/tsconfig.json
@@ -0,0 +1,24 @@
+{
+	"compilerOptions": {
+		"target": "esnext",
+		"module": "esnext",
+		"strict": true,
+		"jsx": "preserve",
+		"importHelpers": true,
+		"skipLibCheck": true,
+		"moduleResolution": "node",
+		"esModuleInterop": true,
+		"allowSyntheticDefaultImports": true,
+		"resolveJsonModule": true,
+		"sourceMap": true,
+		"baseUrl": ".",
+		"types": ["vite/client"],
+		"paths": {
+			"@/*": ["src/*"],
+			"preact/*": ["stub/empty.d.ts"],
+		},
+		"lib": ["esnext", "dom", "dom.iterable", "scripthost"]
+	},
+	"include": ["src/**/*.ts", "src/**/*.vue"],
+	"exclude": ["node_modules"]
+}
diff --git a/packages/components/vite.config.js b/packages/components/vite.config.js
new file mode 100644
index 0000000000..261dc48367
--- /dev/null
+++ b/packages/components/vite.config.js
@@ -0,0 +1,17 @@
+import vue from '@vitejs/plugin-vue';
+import path from 'path';
+import { defineConfig } from 'vitest/config';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+	plugins: [vue()],
+	optimizeDeps: {
+		exclude: ['@directus/docs'],
+	},
+	resolve: {
+		alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }],
+	},
+	test: {
+		environment: 'happy-dom',
+	},
+});
diff --git a/packages/extensions-sdk/package.json b/packages/extensions-sdk/package.json
index c7e47efecd..42599967a7 100644
--- a/packages/extensions-sdk/package.json
+++ b/packages/extensions-sdk/package.json
@@ -33,6 +33,7 @@
 	"gitHead": "24621f3934dc77eb23441331040ed13c676ceffd",
 	"dependencies": {
 		"@directus/shared": "workspace:*",
+		"@directus/components": "workspace:*",
 		"@rollup/plugin-commonjs": "^21.0.1",
 		"@rollup/plugin-json": "^4.1.0",
 		"@rollup/plugin-node-resolve": "^13.1.3",
diff --git a/packages/shared/package.json b/packages/shared/package.json
index 123c5d7ded..dac5ffb97a 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -59,6 +59,7 @@
 		"knex-schema-inspector": "2.0.4",
 		"lodash": "4.17.21",
 		"micromustache": "^8.0.3",
+		"nanoid": "^4.0.0",
 		"pino": "6.13.3",
 		"vue": "3.2.36",
 		"vue-i18n": "9.1.10",
diff --git a/packages/shared/src/composables/index.ts b/packages/shared/src/composables/index.ts
index ace6516581..c5b506b81c 100644
--- a/packages/shared/src/composables/index.ts
+++ b/packages/shared/src/composables/index.ts
@@ -4,3 +4,7 @@ export * from './use-items';
 export * from './use-layout';
 export * from './use-sync';
 export * from './use-system';
+export * from './use-size-class';
+export * from './use-groupable';
+export * from './use-element-size';
+export * from './use-custom-selection';
diff --git a/app/src/composables/use-custom-selection.ts b/packages/shared/src/composables/use-custom-selection.ts
similarity index 100%
rename from app/src/composables/use-custom-selection.ts
rename to packages/shared/src/composables/use-custom-selection.ts
diff --git a/app/src/composables/use-element-size.ts b/packages/shared/src/composables/use-element-size.ts
similarity index 88%
rename from app/src/composables/use-element-size.ts
rename to packages/shared/src/composables/use-element-size.ts
index 316ecb58fe..7e16fb936f 100644
--- a/app/src/composables/use-element-size.ts
+++ b/packages/shared/src/composables/use-element-size.ts
@@ -1,4 +1,4 @@
-import { notEmpty } from '@/utils/is-empty';
+import { isNil } from 'lodash';
 import { isRef, onMounted, onUnmounted, Ref, ref } from 'vue';
 
 declare global {
@@ -17,6 +17,7 @@ export function useElementSize<T extends Element>(
 	const height = ref(0);
 
 	const resizeObserver = new ResizeObserver(([entry]) => {
+		if (entry === undefined) return;
 		width.value = entry.contentRect.width;
 		height.value = entry.contentRect.height;
 	});
@@ -24,7 +25,7 @@ export function useElementSize<T extends Element>(
 	onMounted(() => {
 		const t = isRef(target) ? target.value : target;
 
-		if (notEmpty(t)) {
+		if (!isNil(t)) {
 			resizeObserver.observe(t);
 		}
 	});
diff --git a/app/src/composables/use-groupable.ts b/packages/shared/src/composables/use-groupable.ts
similarity index 95%
rename from app/src/composables/use-groupable.ts
rename to packages/shared/src/composables/use-groupable.ts
index 4a7235cc44..27fea286ef 100644
--- a/app/src/composables/use-groupable.ts
+++ b/packages/shared/src/composables/use-groupable.ts
@@ -1,5 +1,4 @@
-import { isEmpty, notEmpty } from '@/utils/is-empty';
-import { isEqual } from 'lodash';
+import { isEqual, isNil } from 'lodash';
 import { computed, inject, nextTick, onBeforeUnmount, provide, ref, shallowRef, Ref, watch } from 'vue';
 
 export type GroupableInstance = {
@@ -29,7 +28,7 @@ export function useGroupable(options?: GroupableOptions): UsableGroupable {
 	// Injects the registration / toggle functions from the parent scope
 	const parentFunctions = inject(options?.group || 'item-group', null);
 
-	if (isEmpty(parentFunctions)) {
+	if (isNil(parentFunctions)) {
 		return {
 			active: ref(false),
 			toggle: () => {
@@ -138,14 +137,14 @@ export function useGroupableParent(
 	// handler if it's passed
 	const selection = computed<readonly (number | string)[]>({
 		get() {
-			if (notEmpty(state.selection) && notEmpty(state.selection.value)) {
+			if (!isNil(state.selection) && !isNil(state.selection.value)) {
 				return state.selection.value;
 			}
 
 			return internalSelection.value;
 		},
 		set(newSelection) {
-			if (notEmpty(state.onSelectionChange)) {
+			if (!isNil(state.onSelectionChange)) {
 				state.onSelectionChange(newSelection);
 			}
 
@@ -172,7 +171,7 @@ export function useGroupableParent(
 
 			// If you're required to select a value, make sure a value is selected on first render
 			if (!selection.value || (selection.value.length === 0 && options?.mandatory?.value === true)) {
-				selection.value = [getValueForItem(items.value[0])];
+				if (items.value[0]) selection.value = [getValueForItem(items.value[0])];
 			}
 		}
 	);
@@ -211,7 +210,7 @@ export function useGroupableParent(
 			toggleSingle(item);
 		}
 
-		if (notEmpty(state.onToggle)) {
+		if (!isNil(state.onToggle)) {
 			state.onToggle(item);
 		}
 	}
diff --git a/packages/shared/src/composables/use-items.ts b/packages/shared/src/composables/use-items.ts
index 52ac8e3db5..3909a0edd1 100644
--- a/packages/shared/src/composables/use-items.ts
+++ b/packages/shared/src/composables/use-items.ts
@@ -1,11 +1,10 @@
 import { useApi } from './use-system';
 import axios, { CancelTokenSource } from 'axios';
 import { useCollection } from './use-collection';
-import { Item } from '../types';
+import { Item, Query } from '../types';
 import { moveInArray } from '../utils';
 import { isEqual, throttle } from 'lodash';
 import { computed, ComputedRef, ref, Ref, watch, WritableComputedRef, unref } from 'vue';
-import { Query } from '../types/query';
 
 type ManualSortData = {
 	item: string | number;
diff --git a/app/src/composables/use-size-class.ts b/packages/shared/src/composables/use-size-class.ts
similarity index 73%
rename from app/src/composables/use-size-class.ts
rename to packages/shared/src/composables/use-size-class.ts
index 228ae45983..106248d464 100644
--- a/app/src/composables/use-size-class.ts
+++ b/packages/shared/src/composables/use-size-class.ts
@@ -19,14 +19,14 @@ export const sizeProps = {
 	},
 };
 
-interface RequiredProps {
-	xSmall: boolean;
-	small: boolean;
-	large: boolean;
-	xLarge: boolean;
+interface SizeProps {
+	xSmall?: boolean;
+	small?: boolean;
+	large?: boolean;
+	xLarge?: boolean;
 }
 
-export function useSizeClass<T>(props: T & RequiredProps): ComputedRef<string | null> {
+export function useSizeClass<T>(props: T & SizeProps): ComputedRef<string | null> {
 	const sizeClass = computed<string | null>(() => {
 		if (props.xSmall) return 'x-small';
 		if (props.small) return 'small';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 66dd080966..f11706df22 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -36,18 +36,18 @@ importers:
       '@directus/shared': link:packages/shared
       '@types/jest': 27.5.2
       '@types/listr': 0.14.4
-      '@types/lodash': 4.14.182
+      '@types/lodash': 4.14.184
       '@types/seedrandom': 3.0.2
       '@types/supertest': 2.0.12
       '@types/uuid': 8.3.4
-      '@typescript-eslint/eslint-plugin': 5.30.6_2vt5mtrqleafs33qg2bhpmbaqm
-      '@typescript-eslint/parser': 5.30.6_4x5o4skxv6sl53vpwefgt23khm
+      '@typescript-eslint/eslint-plugin': 5.36.1_lbwfnm54o3pmr3ypeqp3btnera
+      '@typescript-eslint/parser': 5.36.1_yqf6kl63nyoq5megxukfnom5rm
       axios: 0.27.2
       cross-env: 7.0.3
-      eslint: 8.19.0
-      eslint-config-prettier: 8.5.0_eslint@8.19.0
-      eslint-plugin-prettier: 4.2.1_w5u7id6tju6ajwzbl3jaybwdxe
-      eslint-plugin-vue: 9.2.0_eslint@8.19.0
+      eslint: 8.23.0
+      eslint-config-prettier: 8.5.0_eslint@8.23.0
+      eslint-plugin-prettier: 4.2.1_5gi7dmuso3kqr3jcl6a5zyhbke
+      eslint-plugin-vue: 9.4.0_eslint@8.23.0
       globby: 11.1.0
       jest: 28.1.2
       jest-environment-node: 28.1.3
@@ -59,8 +59,8 @@ importers:
       seedrandom: 3.0.5
       simple-git-hooks: 2.8.0
       supertest: 6.2.4
-      ts-jest: 28.0.5_lt5llx2ti6zt4eclhanfli5ynu
-      typescript: 4.7.4
+      ts-jest: 28.0.5_cvmb76wjcdignh37taegqrrccm
+      typescript: 4.8.2
       uuid: 8.3.2
 
   api:
@@ -371,6 +371,7 @@ importers:
 
   app:
     specifiers:
+      '@directus/components': workspace:*
       '@directus/docs': 9.16.0
       '@directus/extensions-sdk': ^9.14.1
       '@directus/format-title': ^9.15.0
@@ -382,7 +383,6 @@ importers:
       '@fullcalendar/interaction': 5.11.0
       '@fullcalendar/list': 5.11.0
       '@fullcalendar/timegrid': 5.11.0
-      '@joeattardi/emoji-button': ^4.6.2
       '@mapbox/mapbox-gl-draw': 1.3.0
       '@mapbox/mapbox-gl-draw-static-mode': 1.0.1
       '@mapbox/mapbox-gl-geocoder': 4.7.4
@@ -474,6 +474,7 @@ importers:
       vuedraggable: 4.1.0
       wellknown: 0.5.0
     devDependencies:
+      '@directus/components': link:../packages/components
       '@directus/docs': 9.16.0
       '@directus/extensions-sdk': link:../packages/extensions-sdk
       '@directus/format-title': 9.15.0
@@ -485,7 +486,6 @@ importers:
       '@fullcalendar/interaction': 5.11.0
       '@fullcalendar/list': 5.11.0
       '@fullcalendar/timegrid': 5.11.0
-      '@joeattardi/emoji-button': 4.6.4
       '@mapbox/mapbox-gl-draw': 1.3.0
       '@mapbox/mapbox-gl-draw-static-mode': 1.0.1
       '@mapbox/mapbox-gl-geocoder': 4.7.4_mapbox-gl@2.9.2
@@ -577,6 +577,109 @@ importers:
       vuedraggable: 4.1.0_vue@3.2.36
       wellknown: 0.5.0
 
+  packages/components:
+    specifiers:
+      '@babel/core': ^7.17.9
+      '@babel/preset-env': 7.16.11
+      '@fortawesome/fontawesome-svg-core': 1.2.36
+      '@fortawesome/free-brands-svg-icons': 5.15.4
+      '@joeattardi/emoji-button': ^4.6.2
+      '@mdx-js/react': 1.6.22
+      '@popperjs/core': 2.10.2
+      '@sindresorhus/slugify': 2.1.0
+      '@storybook/addon-actions': 6.5.10
+      '@storybook/addon-backgrounds': 6.5.10
+      '@storybook/addon-docs': 6.5.10
+      '@storybook/addon-essentials': 6.5.10
+      '@storybook/addon-links': 6.5.10
+      '@storybook/addon-measure': 6.5.10
+      '@storybook/addon-outline': 6.5.10
+      '@storybook/builder-vite': ^0.1.41
+      '@storybook/client-api': 6.5.10
+      '@storybook/client-logger': 6.5.10
+      '@storybook/core-common': 6.5.10
+      '@storybook/vue3': 6.5.10
+      '@types/diacritics': 1.3.1
+      '@types/lodash': ^4.14.182
+      '@vitejs/plugin-vue': 2.3.3
+      '@vitest/ui': ^0.22.0
+      '@vue/compiler-sfc': 3.2.31
+      '@vue/test-utils': ^2.0.2
+      babel-loader: ^8.2.4
+      c8: ^7.12.0
+      caret-pos: 2.0.0
+      css-loader: ^6.7.1
+      diacritics: 1.3.0
+      lodash: 4.17.21
+      micromustache: ^8.0.3
+      nanoid: 3.1.30
+      npm-run-all: 4.1.5
+      react: 16.14.0
+      react-dom: 16.14.0
+      rimraf: 3.0.2
+      sass-loader: ^13.0.2
+      style-loader: ^3.3.1
+      typescript: 4.5.2
+      vite: 2.9.9
+      vitest: ^0.18.1
+      vue: 3.2.37
+      vue-i18n: 9.1.10
+      vue-loader: ^16.8.3
+      vue-router: 4.0.15
+      vue-tsc: ^0.34.5
+      webpack: 5.72.0
+    dependencies:
+      lodash: 4.17.21
+      micromustache: 8.0.3
+      vite: 2.9.9
+      vue: 3.2.37
+      vue-i18n: 9.1.10_vue@3.2.37
+      vue-router: 4.0.15_vue@3.2.37
+    devDependencies:
+      '@babel/core': 7.18.6
+      '@babel/preset-env': 7.16.11_@babel+core@7.18.6
+      '@fortawesome/fontawesome-svg-core': 1.2.36
+      '@fortawesome/free-brands-svg-icons': 5.15.4
+      '@joeattardi/emoji-button': 4.6.4
+      '@mdx-js/react': 1.6.22_react@16.14.0
+      '@popperjs/core': 2.10.2
+      '@sindresorhus/slugify': 2.1.0
+      '@storybook/addon-actions': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/addon-backgrounds': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/addon-docs': 6.5.10_mxtbvbyeconf3ozmvtckayjtx4
+      '@storybook/addon-essentials': 6.5.10_q7blm2c46brqbndav6364dm75q
+      '@storybook/addon-links': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/addon-measure': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/addon-outline': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/builder-vite': 0.1.41_p5cdmbnbwksbdiptqbtw3aheee
+      '@storybook/client-api': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/client-logger': 6.5.10
+      '@storybook/core-common': 6.5.10_sk7tiidch4ak35d54sr6tbdsmy
+      '@storybook/vue3': 6.5.10_ozji4kp7bdtbjefnvy5lbyf6p4
+      '@types/diacritics': 1.3.1
+      '@types/lodash': 4.14.182
+      '@vitejs/plugin-vue': 2.3.3_vite@2.9.9+vue@3.2.37
+      '@vitest/ui': 0.22.1
+      '@vue/compiler-sfc': 3.2.31
+      '@vue/test-utils': 2.0.2_vue@3.2.37
+      babel-loader: 8.2.5_hdaic33o4wf65p5shr3xepeg4m
+      c8: 7.12.0
+      caret-pos: 2.0.0
+      css-loader: 6.7.1_webpack@5.72.0
+      diacritics: 1.3.0
+      nanoid: 3.1.30
+      npm-run-all: 4.1.5
+      react: 16.14.0
+      react-dom: 16.14.0_react@16.14.0
+      rimraf: 3.0.2
+      sass-loader: 13.0.2_webpack@5.72.0
+      style-loader: 3.3.1_webpack@5.72.0
+      typescript: 4.5.2
+      vitest: 0.18.1_4dctpwuq6wm6e2nilfwb6wz7rm
+      vue-loader: 16.8.3_6oodguqmvfajneapkegdgbg6h4
+      vue-tsc: 0.34.17_typescript@4.5.2
+      webpack: 5.72.0
+
   packages/create-directus-extension:
     specifiers:
       '@directus/extensions-sdk': workspace:*
@@ -713,6 +816,7 @@ importers:
 
   packages/extensions-sdk:
     specifiers:
+      '@directus/components': workspace:*
       '@directus/shared': workspace:*
       '@rollup/plugin-commonjs': ^21.0.1
       '@rollup/plugin-json': ^4.1.0
@@ -734,6 +838,7 @@ importers:
       rollup-plugin-vue: ^6.0.0
       typescript: 4.5.2
     dependencies:
+      '@directus/components': link:../components
       '@directus/shared': link:../shared
       '@rollup/plugin-commonjs': 21.1.0_rollup@2.77.0
       '@rollup/plugin-json': 4.1.0_rollup@2.77.0
@@ -790,6 +895,7 @@ importers:
       knex-schema-inspector: 2.0.4
       lodash: 4.17.21
       micromustache: ^8.0.3
+      nanoid: ^4.0.0
       npm-run-all: 4.1.5
       pino: 6.13.3
       rimraf: 3.0.2
@@ -810,6 +916,7 @@ importers:
       knex-schema-inspector: 2.0.4
       lodash: 4.17.21
       micromustache: 8.0.3
+      nanoid: 4.0.0
       pino: 6.13.3
       vue: 3.2.36
       vue-i18n: 9.1.10_vue@3.2.36
@@ -850,7 +957,7 @@ packages:
     engines: { node: '>=6.0.0' }
     dependencies:
       '@jridgewell/gen-mapping': 0.1.1
-      '@jridgewell/trace-mapping': 0.3.14
+      '@jridgewell/trace-mapping': 0.3.15
     dev: true
 
   /@antfu/utils/0.5.2:
@@ -1817,12 +1924,67 @@ packages:
     dependencies:
       '@babel/highlight': 7.18.6
 
+  /@babel/compat-data/7.18.13:
+    resolution:
+      { integrity: sha512-5yUzC5LqyTFp2HLmDoxGQelcdYgSpP9xsnMWBphAscOdFrHSAVbLNzWiy32sVNDqJRDiJK6klfDnAgu6PAGSHw== }
+    engines: { node: '>=6.9.0' }
+    dev: true
+
   /@babel/compat-data/7.18.8:
     resolution:
       { integrity: sha512-HSmX4WZPPK3FUxYp7g2T6EyO8j96HlZJlxmKPSh6KAcqwyDrfx7hKjXpAW/0FhFfTJsR0Yt4lAjLI2coMptIHQ== }
     engines: { node: '>=6.9.0' }
     dev: true
 
+  /@babel/core/7.12.9:
+    resolution:
+      { integrity: sha512-gTXYh3M5wb7FRXQy+FErKFAv90BnlOuNn1QkCK2lREoPAjrQCO49+HVSrFoe5uakFAF5eenS75KbO2vQiLrTMQ== }
+    engines: { node: '>=6.9.0' }
+    dependencies:
+      '@babel/code-frame': 7.18.6
+      '@babel/generator': 7.18.13
+      '@babel/helper-module-transforms': 7.18.9
+      '@babel/helpers': 7.18.6
+      '@babel/parser': 7.18.13
+      '@babel/template': 7.18.10
+      '@babel/traverse': 7.18.13
+      '@babel/types': 7.18.13
+      convert-source-map: 1.8.0
+      debug: 4.3.4
+      gensync: 1.0.0-beta.2
+      json5: 2.2.1
+      lodash: 4.17.21
+      resolve: 1.22.1
+      semver: 5.7.1
+      source-map: 0.5.7
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/core/7.18.13:
+    resolution:
+      { integrity: sha512-ZisbOvRRusFktksHSG6pjj1CSvkPkcZq/KHD45LAkVP/oiHJkNBZWfpvlLmX8OtHDG8IuzsFlVRWo08w7Qxn0A== }
+    engines: { node: '>=6.9.0' }
+    dependencies:
+      '@ampproject/remapping': 2.2.0
+      '@babel/code-frame': 7.18.6
+      '@babel/generator': 7.18.13
+      '@babel/helper-compilation-targets': 7.18.9_@babel+core@7.18.13
+      '@babel/helper-module-transforms': 7.18.9
+      '@babel/helpers': 7.18.9
+      '@babel/parser': 7.18.13
+      '@babel/template': 7.18.10
+      '@babel/traverse': 7.18.13
+      '@babel/types': 7.18.13
+      convert-source-map: 1.8.0
+      debug: 4.3.4
+      gensync: 1.0.0-beta.2
+      json5: 2.2.1
+      semver: 6.3.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@babel/core/7.18.6:
     resolution:
       { integrity: sha512-cQbWBpxcbbs/IUredIPkHiAGULLV8iwgNRMFzvbhEXISp4f3rUUXE5+TIw6KwUWUR3DwyI6gmBRnmAtYaWehwQ== }
@@ -1837,7 +1999,7 @@ packages:
       '@babel/parser': 7.18.8
       '@babel/template': 7.18.6
       '@babel/traverse': 7.18.8
-      '@babel/types': 7.18.8
+      '@babel/types': 7.18.13
       convert-source-map: 1.8.0
       debug: 4.3.4
       gensync: 1.0.0-beta.2
@@ -1847,16 +2009,43 @@ packages:
       - supports-color
     dev: true
 
+  /@babel/generator/7.18.13:
+    resolution:
+      { integrity: sha512-CkPg8ySSPuHTYPJYo7IRALdqyjM9HCbt/3uOBEFbzyGVP6Mn8bwFPB0jX6982JVNBlYzM1nnPkfjuXSOPtQeEQ== }
+    engines: { node: '>=6.9.0' }
+    dependencies:
+      '@babel/types': 7.18.13
+      '@jridgewell/gen-mapping': 0.3.2
+      jsesc: 2.5.2
+    dev: true
+
   /@babel/generator/7.18.7:
     resolution:
       { integrity: sha512-shck+7VLlY72a2w9c3zYWuE1pwOKEiQHV7GTUbSnhyl5eu3i04t30tBY82ZRWrDfo3gkakCFtevExnxbkf2a3A== }
     engines: { node: '>=6.9.0' }
     dependencies:
-      '@babel/types': 7.18.8
+      '@babel/types': 7.18.13
       '@jridgewell/gen-mapping': 0.3.2
       jsesc: 2.5.2
     dev: true
 
+  /@babel/helper-annotate-as-pure/7.18.6:
+    resolution:
+      { integrity: sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA== }
+    engines: { node: '>=6.9.0' }
+    dependencies:
+      '@babel/types': 7.18.13
+    dev: true
+
+  /@babel/helper-builder-binary-assignment-operator-visitor/7.18.9:
+    resolution:
+      { integrity: sha512-yFQ0YCHoIqarl8BCRwBL8ulYUaZpz3bNsA7oFepAzee+8/+ImtADXNOmO5vJvsPff3qi+hvpkY/NYBTrBQgdNw== }
+    engines: { node: '>=6.9.0' }
+    dependencies:
+      '@babel/helper-explode-assignable-expression': 7.18.6
+      '@babel/types': 7.18.13
+    dev: true
+
   /@babel/helper-compilation-targets/7.18.6_@babel+core@7.18.6:
     resolution:
       { integrity: sha512-vFjbfhNCzqdeAtZflUFrG5YIFqGTqsctrtkZ1D/NB0mDW9TwW3GmmUepYY4G9wCET5rY5ugz4OGTcLd614IzQg== }
@@ -1871,19 +2060,122 @@ packages:
       semver: 6.3.0
     dev: true
 
-  /@babel/helper-environment-visitor/7.18.6:
+  /@babel/helper-compilation-targets/7.18.9_@babel+core@7.18.13:
     resolution:
-      { integrity: sha512-8n6gSfn2baOY+qlp+VSzsosjCVGFqWKmDF0cCWOybh52Dw3SEyoWR1KrhMJASjLwIEkkAufZ0xvr+SxLHSpy2Q== }
+      { integrity: sha512-tzLCyVmqUiFlcFoAPLA/gL9TeYrF61VLNtb+hvkuVaB5SUjW7jcfrglBIX1vUIoT7CLP3bBlIMeyEsIl2eFQNg== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/compat-data': 7.18.13
+      '@babel/core': 7.18.13
+      '@babel/helper-validator-option': 7.18.6
+      browserslist: 4.21.3
+      semver: 6.3.0
+    dev: true
+
+  /@babel/helper-compilation-targets/7.18.9_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-tzLCyVmqUiFlcFoAPLA/gL9TeYrF61VLNtb+hvkuVaB5SUjW7jcfrglBIX1vUIoT7CLP3bBlIMeyEsIl2eFQNg== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/compat-data': 7.18.13
+      '@babel/core': 7.18.6
+      '@babel/helper-validator-option': 7.18.6
+      browserslist: 4.21.3
+      semver: 6.3.0
+    dev: true
+
+  /@babel/helper-create-class-features-plugin/7.18.13_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-hDvXp+QYxSRL+23mpAlSGxHMDyIGChm0/AwTfTAAK5Ufe40nCsyNdaYCGuK91phn/fVu9kqayImRDkvNAgdrsA== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-annotate-as-pure': 7.18.6
+      '@babel/helper-environment-visitor': 7.18.9
+      '@babel/helper-function-name': 7.18.9
+      '@babel/helper-member-expression-to-functions': 7.18.9
+      '@babel/helper-optimise-call-expression': 7.18.6
+      '@babel/helper-replace-supers': 7.18.9
+      '@babel/helper-split-export-declaration': 7.18.6
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/helper-create-regexp-features-plugin/7.18.6_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-7LcpH1wnQLGrI+4v+nPp+zUvIkF9x0ddv1Hkdue10tg3gmRnLy97DXh4STiOf1qeIInyD69Qv5kKSZzKD8B/7A== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-annotate-as-pure': 7.18.6
+      regexpu-core: 5.1.0
+    dev: true
+
+  /@babel/helper-define-polyfill-provider/0.1.5_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-nXuzCSwlJ/WKr8qxzW816gwyT6VZgiJG17zR40fou70yfAcqjoNyTLl/DQ+FExw5Hx5KNqshmN8Ldl/r2N7cTg== }
+    peerDependencies:
+      '@babel/core': ^7.4.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-compilation-targets': 7.18.9_@babel+core@7.18.6
+      '@babel/helper-module-imports': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+      '@babel/traverse': 7.18.13
+      debug: 4.3.4
+      lodash.debounce: 4.0.8
+      resolve: 1.22.1
+      semver: 6.3.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/helper-define-polyfill-provider/0.3.2_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-r9QJJ+uDWrd+94BSPcP6/de67ygLtvVy6cK4luE6MOuDsZIdoaPBnfSpbO/+LTifjPckbKXRuI9BB/Z2/y3iTg== }
+    peerDependencies:
+      '@babel/core': ^7.4.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-compilation-targets': 7.18.9_@babel+core@7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+      debug: 4.3.4
+      lodash.debounce: 4.0.8
+      resolve: 1.22.1
+      semver: 6.3.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/helper-environment-visitor/7.18.9:
+    resolution:
+      { integrity: sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg== }
     engines: { node: '>=6.9.0' }
     dev: true
 
-  /@babel/helper-function-name/7.18.6:
+  /@babel/helper-explode-assignable-expression/7.18.6:
     resolution:
-      { integrity: sha512-0mWMxV1aC97dhjCah5U5Ua7668r5ZmSC2DLfH2EZnf9c3/dHZKiFa5pRLMH5tjSl471tY6496ZWk/kjNONBxhw== }
+      { integrity: sha512-eyAYAsQmB80jNfg4baAtLeWAQHfHFiR483rzFK+BhETlGZaQC9bsfrugfXDCbRHLQbIA7U5NxhhOxN7p/dWIcg== }
     engines: { node: '>=6.9.0' }
     dependencies:
-      '@babel/template': 7.18.6
-      '@babel/types': 7.18.8
+      '@babel/types': 7.18.13
+    dev: true
+
+  /@babel/helper-function-name/7.18.9:
+    resolution:
+      { integrity: sha512-fJgWlZt7nxGksJS9a0XdSaI4XvpExnNIgRP+rVefWh5U7BL8pPuir6SJUmFKRfjWQ51OtWSzwOxhaH/EBWWc0A== }
+    engines: { node: '>=6.9.0' }
+    dependencies:
+      '@babel/template': 7.18.10
+      '@babel/types': 7.18.13
     dev: true
 
   /@babel/helper-hoist-variables/7.18.6:
@@ -1891,7 +2183,15 @@ packages:
       { integrity: sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q== }
     engines: { node: '>=6.9.0' }
     dependencies:
-      '@babel/types': 7.18.8
+      '@babel/types': 7.18.13
+    dev: true
+
+  /@babel/helper-member-expression-to-functions/7.18.9:
+    resolution:
+      { integrity: sha512-RxifAh2ZoVU67PyKIO4AMi1wTenGfMR/O/ae0CCRqwgBAt5v7xjdtRw7UoSbsreKrQn5t7r89eruK/9JjYHuDg== }
+    engines: { node: '>=6.9.0' }
+    dependencies:
+      '@babel/types': 7.18.13
     dev: true
 
   /@babel/helper-module-imports/7.18.6:
@@ -1899,7 +2199,7 @@ packages:
       { integrity: sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA== }
     engines: { node: '>=6.9.0' }
     dependencies:
-      '@babel/types': 7.18.8
+      '@babel/types': 7.18.13
     dev: true
 
   /@babel/helper-module-transforms/7.18.8:
@@ -1907,22 +2207,82 @@ packages:
       { integrity: sha512-che3jvZwIcZxrwh63VfnFTUzcAM9v/lznYkkRxIBGMPt1SudOKHAEec0SIRCfiuIzTcF7VGj/CaTT6gY4eWxvA== }
     engines: { node: '>=6.9.0' }
     dependencies:
-      '@babel/helper-environment-visitor': 7.18.6
+      '@babel/helper-environment-visitor': 7.18.9
       '@babel/helper-module-imports': 7.18.6
       '@babel/helper-simple-access': 7.18.6
       '@babel/helper-split-export-declaration': 7.18.6
       '@babel/helper-validator-identifier': 7.18.6
       '@babel/template': 7.18.6
       '@babel/traverse': 7.18.8
-      '@babel/types': 7.18.8
+      '@babel/types': 7.18.13
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@babel/helper-plugin-utils/7.18.6:
+  /@babel/helper-module-transforms/7.18.9:
     resolution:
-      { integrity: sha512-gvZnm1YAAxh13eJdkb9EWHBnF3eAub3XTLCZEehHT2kWxiKVRL64+ae5Y6Ivne0mVHmMYKT+xWgZO+gQhuLUBg== }
+      { integrity: sha512-KYNqY0ICwfv19b31XzvmI/mfcylOzbLtowkw+mfvGPAQ3kfCnMLYbED3YecL5tPd8nAYFQFAd6JHp2LxZk/J1g== }
     engines: { node: '>=6.9.0' }
+    dependencies:
+      '@babel/helper-environment-visitor': 7.18.9
+      '@babel/helper-module-imports': 7.18.6
+      '@babel/helper-simple-access': 7.18.6
+      '@babel/helper-split-export-declaration': 7.18.6
+      '@babel/helper-validator-identifier': 7.18.6
+      '@babel/template': 7.18.10
+      '@babel/traverse': 7.18.13
+      '@babel/types': 7.18.13
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/helper-optimise-call-expression/7.18.6:
+    resolution:
+      { integrity: sha512-HP59oD9/fEHQkdcbgFCnbmgH5vIQTJbxh2yf+CdM89/glUNnuzr87Q8GIjGEnOktTROemO0Pe0iPAYbqZuOUiA== }
+    engines: { node: '>=6.9.0' }
+    dependencies:
+      '@babel/types': 7.18.13
+    dev: true
+
+  /@babel/helper-plugin-utils/7.10.4:
+    resolution:
+      { integrity: sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg== }
+    dev: true
+
+  /@babel/helper-plugin-utils/7.18.9:
+    resolution:
+      { integrity: sha512-aBXPT3bmtLryXaoJLyYPXPlSD4p1ld9aYeR+sJNOZjJJGiOpb+fKfh3NkcCu7J54nUJwCERPBExCCpyCOHnu/w== }
+    engines: { node: '>=6.9.0' }
+    dev: true
+
+  /@babel/helper-remap-async-to-generator/7.18.9_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-dI7q50YKd8BAv3VEfgg7PS7yD3Rtbi2J1XMXaalXO0W0164hYLnh8zpjRS0mte9MfVp/tltvr/cfdXPvJr1opA== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-annotate-as-pure': 7.18.6
+      '@babel/helper-environment-visitor': 7.18.9
+      '@babel/helper-wrap-function': 7.18.11
+      '@babel/types': 7.18.13
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/helper-replace-supers/7.18.9:
+    resolution:
+      { integrity: sha512-dNsWibVI4lNT6HiuOIBr1oyxo40HvIVmbwPUm3XZ7wMh4k2WxrxTqZwSqw/eEmXDS9np0ey5M2bz9tBmO9c+YQ== }
+    engines: { node: '>=6.9.0' }
+    dependencies:
+      '@babel/helper-environment-visitor': 7.18.9
+      '@babel/helper-member-expression-to-functions': 7.18.9
+      '@babel/helper-optimise-call-expression': 7.18.6
+      '@babel/traverse': 7.18.13
+      '@babel/types': 7.18.13
+    transitivePeerDependencies:
+      - supports-color
     dev: true
 
   /@babel/helper-simple-access/7.18.6:
@@ -1930,7 +2290,15 @@ packages:
       { integrity: sha512-iNpIgTgyAvDQpDj76POqg+YEt8fPxx3yaNBg3S30dxNKm2SWfYhD0TGrK/Eu9wHpUW63VQU894TsTg+GLbUa1g== }
     engines: { node: '>=6.9.0' }
     dependencies:
-      '@babel/types': 7.18.8
+      '@babel/types': 7.18.13
+    dev: true
+
+  /@babel/helper-skip-transparent-expression-wrappers/7.18.9:
+    resolution:
+      { integrity: sha512-imytd2gHi3cJPsybLRbmFrF7u5BIEuI2cNheyKi3/iOBC63kNn3q8Crn2xVuESli0aM4KYsyEqKyS7lFL8YVtw== }
+    engines: { node: '>=6.9.0' }
+    dependencies:
+      '@babel/types': 7.18.13
     dev: true
 
   /@babel/helper-split-export-declaration/7.18.6:
@@ -1938,9 +2306,14 @@ packages:
       { integrity: sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA== }
     engines: { node: '>=6.9.0' }
     dependencies:
-      '@babel/types': 7.18.8
+      '@babel/types': 7.18.13
     dev: true
 
+  /@babel/helper-string-parser/7.18.10:
+    resolution:
+      { integrity: sha512-XtIfWmeNY3i4t7t4D2t02q50HvqHybPqW2ki1kosnvWCwuCMeo81Jf0gwr85jy/neUdg5XDdeFE/80DXiO+njw== }
+    engines: { node: '>=6.9.0' }
+
   /@babel/helper-validator-identifier/7.18.6:
     resolution:
       { integrity: sha512-MmetCkz9ej86nJQV+sFCxoGGrUbU3q02kgLciwkrt9QqEB7cP39oKEY0PakknEO0Gu20SskMRi+AYZ3b1TpN9g== }
@@ -1952,6 +2325,19 @@ packages:
     engines: { node: '>=6.9.0' }
     dev: true
 
+  /@babel/helper-wrap-function/7.18.11:
+    resolution:
+      { integrity: sha512-oBUlbv+rjZLh2Ks9SKi4aL7eKaAXBWleHzU89mP0G6BMUlRxSckk9tSIkgDGydhgFxHuGSlBQZfnaD47oBEB7w== }
+    engines: { node: '>=6.9.0' }
+    dependencies:
+      '@babel/helper-function-name': 7.18.9
+      '@babel/template': 7.18.10
+      '@babel/traverse': 7.18.13
+      '@babel/types': 7.18.13
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@babel/helpers/7.18.6:
     resolution:
       { integrity: sha512-vzSiiqbQOghPngUYt/zWGvK3LAsPhz55vc9XNN0xAl2gV4ieShI2OQli5duxWHD+72PZPTKAcfcZDE1Cwc5zsQ== }
@@ -1959,7 +2345,19 @@ packages:
     dependencies:
       '@babel/template': 7.18.6
       '@babel/traverse': 7.18.8
-      '@babel/types': 7.18.8
+      '@babel/types': 7.18.13
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/helpers/7.18.9:
+    resolution:
+      { integrity: sha512-Jf5a+rbrLoR4eNdUmnFu8cN5eNJT6qdTdOg5IHIzq87WwyRw9PwguLFOWYgktN/60IP4fgDUawJvs7PjQIzELQ== }
+    engines: { node: '>=6.9.0' }
+    dependencies:
+      '@babel/template': 7.18.10
+      '@babel/traverse': 7.18.13
+      '@babel/types': 7.18.13
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -1973,13 +2371,296 @@ packages:
       chalk: 2.4.2
       js-tokens: 4.0.0
 
+  /@babel/parser/7.18.13:
+    resolution:
+      { integrity: sha512-dgXcIfMuQ0kgzLB2b9tRZs7TTFFaGM2AbtA4fJgUUYukzGH4jwsS7hzQHEGs67jdehpm22vkgKwvbU+aEflgwg== }
+    engines: { node: '>=6.0.0' }
+    hasBin: true
+    dependencies:
+      '@babel/types': 7.18.13
+    dev: true
+
   /@babel/parser/7.18.8:
     resolution:
       { integrity: sha512-RSKRfYX20dyH+elbJK2uqAkVyucL+xXzhqlMD5/ZXx+dAAwpyB7HsvnHe/ZUGOF+xLr5Wx9/JoXVTj6BQE2/oA== }
     engines: { node: '>=6.0.0' }
     hasBin: true
     dependencies:
-      '@babel/types': 7.18.8
+      '@babel/types': 7.18.13
+
+  /@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/7.18.6_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-Dgxsyg54Fx1d4Nge8UnvTrED63vrwOdPmyvPzlNN/boaliRP54pm3pGzZD1SJUwrBA+Cs/xdG8kXX6Mn/RfISQ== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+    dev: true
+
+  /@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/7.18.9_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-AHrP9jadvH7qlOj6PINbgSuphjQUAK7AOT7DPjBo9EHoLhQTnnK5u45e1Hd4DbSQEO9nqPWtQ89r+XEOWFScKg== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.13.0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+      '@babel/helper-skip-transparent-expression-wrappers': 7.18.9
+      '@babel/plugin-proposal-optional-chaining': 7.18.9_@babel+core@7.18.6
+    dev: true
+
+  /@babel/plugin-proposal-async-generator-functions/7.18.10_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-1mFuY2TOsR1hxbjCo4QL+qlIjV07p4H4EUYw2J/WCqsvFV6V9X9z9YhXbWndc/4fw+hYGlDT7egYxliMp5O6Ew== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-environment-visitor': 7.18.9
+      '@babel/helper-plugin-utils': 7.18.9
+      '@babel/helper-remap-async-to-generator': 7.18.9_@babel+core@7.18.6
+      '@babel/plugin-syntax-async-generators': 7.8.4_@babel+core@7.18.6
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/plugin-proposal-class-properties/7.18.6_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-create-class-features-plugin': 7.18.13_@babel+core@7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/plugin-proposal-class-static-block/7.18.6_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-+I3oIiNxrCpup3Gi8n5IGMwj0gOCAjcJUSQEcotNnCCPMEnixawOQ+KeJPlgfjzx+FKQ1QSyZOWe7wmoJp7vhw== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.12.0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-create-class-features-plugin': 7.18.13_@babel+core@7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+      '@babel/plugin-syntax-class-static-block': 7.14.5_@babel+core@7.18.6
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/plugin-proposal-decorators/7.18.10_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-wdGTwWF5QtpTY/gbBtQLAiCnoxfD4qMbN87NYZle1dOZ9Os8Y6zXcKrIaOU8W+TIvFUWVGG9tUgNww3CjXRVVw== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-create-class-features-plugin': 7.18.13_@babel+core@7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+      '@babel/helper-replace-supers': 7.18.9
+      '@babel/helper-split-export-declaration': 7.18.6
+      '@babel/plugin-syntax-decorators': 7.18.6_@babel+core@7.18.6
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/plugin-proposal-dynamic-import/7.18.6_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-1auuwmK+Rz13SJj36R+jqFPMJWyKEDd7lLSdOj4oJK0UTgGueSAtkrCvz9ewmgyU/P941Rv2fQwZJN8s6QruXw== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+      '@babel/plugin-syntax-dynamic-import': 7.8.3_@babel+core@7.18.6
+    dev: true
+
+  /@babel/plugin-proposal-export-default-from/7.18.10_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-5H2N3R2aQFxkV4PIBUR/i7PUSwgTZjouJKzI8eKswfIjT0PhvzkPn0t0wIS5zn6maQuvtT0t1oHtMUz61LOuow== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+      '@babel/plugin-syntax-export-default-from': 7.18.6_@babel+core@7.18.6
+    dev: true
+
+  /@babel/plugin-proposal-export-namespace-from/7.18.9_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-k1NtHyOMvlDDFeb9G5PhUXuGj8m/wiwojgQVEhJ/fsVsMCpLyOP4h0uGEjYJKrRI+EVPlb5Jk+Gt9P97lOGwtA== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+      '@babel/plugin-syntax-export-namespace-from': 7.8.3_@babel+core@7.18.6
+    dev: true
+
+  /@babel/plugin-proposal-json-strings/7.18.6_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-lr1peyn9kOdbYc0xr0OdHTZ5FMqS6Di+H0Fz2I/JwMzGmzJETNeOFq2pBySw6X/KFL5EWDjlJuMsUGRFb8fQgQ== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+      '@babel/plugin-syntax-json-strings': 7.8.3_@babel+core@7.18.6
+    dev: true
+
+  /@babel/plugin-proposal-logical-assignment-operators/7.18.9_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-128YbMpjCrP35IOExw2Fq+x55LMP42DzhOhX2aNNIdI9avSWl2PI0yuBWarr3RYpZBSPtabfadkH2yeRiMD61Q== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4_@babel+core@7.18.6
+    dev: true
+
+  /@babel/plugin-proposal-nullish-coalescing-operator/7.18.6_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-wQxQzxYeJqHcfppzBDnm1yAY0jSRkUXR2z8RePZYrKwMKgMlE8+Z6LUno+bd6LvbGh8Gltvy74+9pIYkr+XkKA== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3_@babel+core@7.18.6
+    dev: true
+
+  /@babel/plugin-proposal-numeric-separator/7.18.6_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-ozlZFogPqoLm8WBr5Z8UckIoE4YQ5KESVcNudyXOR8uqIkliTEgJ3RoketfG6pmzLdeZF0H/wjE9/cCEitBl7Q== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+      '@babel/plugin-syntax-numeric-separator': 7.10.4_@babel+core@7.18.6
+    dev: true
+
+  /@babel/plugin-proposal-object-rest-spread/7.12.1_@babel+core@7.12.9:
+    resolution:
+      { integrity: sha512-s6SowJIjzlhx8o7lsFx5zmY4At6CTtDvgNQDdPzkBQucle58A6b/TTeEBYtyDgmcXjUTM+vE8YOGHZzzbc/ioA== }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.9
+      '@babel/helper-plugin-utils': 7.18.9
+      '@babel/plugin-syntax-object-rest-spread': 7.8.3_@babel+core@7.12.9
+      '@babel/plugin-transform-parameters': 7.18.8_@babel+core@7.12.9
+    dev: true
+
+  /@babel/plugin-proposal-object-rest-spread/7.18.9_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-kDDHQ5rflIeY5xl69CEqGEZ0KY369ehsCIEbTGb4siHG5BE9sga/T0r0OUwyZNLMmZE79E1kbsqAjwFCW4ds6Q== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/compat-data': 7.18.8
+      '@babel/core': 7.18.6
+      '@babel/helper-compilation-targets': 7.18.9_@babel+core@7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+      '@babel/plugin-syntax-object-rest-spread': 7.8.3_@babel+core@7.18.6
+      '@babel/plugin-transform-parameters': 7.18.8_@babel+core@7.18.6
+    dev: true
+
+  /@babel/plugin-proposal-optional-catch-binding/7.18.6_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-Q40HEhs9DJQyaZfUjjn6vE8Cv4GmMHCYuMGIWUnlxH6400VGxOuwWsPt4FxXxJkC/5eOzgn0z21M9gMT4MOhbw== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+      '@babel/plugin-syntax-optional-catch-binding': 7.8.3_@babel+core@7.18.6
+    dev: true
+
+  /@babel/plugin-proposal-optional-chaining/7.18.9_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-v5nwt4IqBXihxGsW2QmCWMDS3B3bzGIk/EQVZz2ei7f3NJl8NzAJVvUmpDW5q1CRNY+Beb/k58UAH1Km1N411w== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+      '@babel/helper-skip-transparent-expression-wrappers': 7.18.9
+      '@babel/plugin-syntax-optional-chaining': 7.8.3_@babel+core@7.18.6
+    dev: true
+
+  /@babel/plugin-proposal-private-methods/7.18.6_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-nutsvktDItsNn4rpGItSNV2sz1XwS+nfU0Rg8aCx3W3NOKVzdMjJRu0O5OkgDp3ZGICSTbgRpxZoWsxoKRvbeA== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-create-class-features-plugin': 7.18.13_@babel+core@7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/plugin-proposal-private-property-in-object/7.18.6_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-9Rysx7FOctvT5ouj5JODjAFAkgGoudQuLPamZb0v1TGLpapdNaftzifU8NTWQm0IRjqoYypdrSmyWgkocDQ8Dw== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-annotate-as-pure': 7.18.6
+      '@babel/helper-create-class-features-plugin': 7.18.13_@babel+core@7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+      '@babel/plugin-syntax-private-property-in-object': 7.14.5_@babel+core@7.18.6
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/plugin-proposal-unicode-property-regex/7.18.6_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-2BShG/d5yoZyXZfVePH91urL5wTG6ASZU9M4o03lKK8u8UW1y08OMttBSOADTcJrnPMpvDXRG3G8fyLh4ovs8w== }
+    engines: { node: '>=4' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-create-regexp-features-plugin': 7.18.6_@babel+core@7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+    dev: true
+
+  /@babel/plugin-syntax-async-generators/7.8.4_@babel+core@7.18.13:
+    resolution:
+      { integrity: sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw== }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.13
+      '@babel/helper-plugin-utils': 7.18.9
+    dev: true
 
   /@babel/plugin-syntax-async-generators/7.8.4_@babel+core@7.18.6:
     resolution:
@@ -1988,7 +2669,17 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.18.6
-      '@babel/helper-plugin-utils': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+    dev: true
+
+  /@babel/plugin-syntax-bigint/7.8.3_@babel+core@7.18.13:
+    resolution:
+      { integrity: sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg== }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.13
+      '@babel/helper-plugin-utils': 7.18.9
     dev: true
 
   /@babel/plugin-syntax-bigint/7.8.3_@babel+core@7.18.6:
@@ -1998,7 +2689,17 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.18.6
-      '@babel/helper-plugin-utils': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+    dev: true
+
+  /@babel/plugin-syntax-class-properties/7.12.13_@babel+core@7.18.13:
+    resolution:
+      { integrity: sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA== }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.13
+      '@babel/helper-plugin-utils': 7.18.9
     dev: true
 
   /@babel/plugin-syntax-class-properties/7.12.13_@babel+core@7.18.6:
@@ -2008,7 +2709,81 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.18.6
-      '@babel/helper-plugin-utils': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+    dev: true
+
+  /@babel/plugin-syntax-class-static-block/7.14.5_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+    dev: true
+
+  /@babel/plugin-syntax-decorators/7.18.6_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-fqyLgjcxf/1yhyZ6A+yo1u9gJ7eleFQod2lkaUsF9DQ7sbbY3Ligym3L0+I2c0WmqNKDpoD9UTb1AKP3qRMOAQ== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+    dev: true
+
+  /@babel/plugin-syntax-dynamic-import/7.8.3_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ== }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+    dev: true
+
+  /@babel/plugin-syntax-export-default-from/7.18.6_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-Kr//z3ujSVNx6E9z9ih5xXXMqK07VVTuqPmqGe6Mss/zW5XPeLZeSDZoP9ab/hT4wPKqAgjl2PnhPrcpk8Seew== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+    dev: true
+
+  /@babel/plugin-syntax-export-namespace-from/7.8.3_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q== }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+    dev: true
+
+  /@babel/plugin-syntax-flow/7.18.6_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-LUbR+KNTBWCUAqRG9ex5Gnzu2IOkt8jRJbHHXFT9q+L9zm7M/QQbEqXyw1n1pohYvOyWC8CjeyjrSaIwiYjK7A== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+    dev: true
+
+  /@babel/plugin-syntax-import-meta/7.10.4_@babel+core@7.18.13:
+    resolution:
+      { integrity: sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g== }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.13
+      '@babel/helper-plugin-utils': 7.18.9
     dev: true
 
   /@babel/plugin-syntax-import-meta/7.10.4_@babel+core@7.18.6:
@@ -2018,7 +2793,17 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.18.6
-      '@babel/helper-plugin-utils': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+    dev: true
+
+  /@babel/plugin-syntax-json-strings/7.8.3_@babel+core@7.18.13:
+    resolution:
+      { integrity: sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA== }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.13
+      '@babel/helper-plugin-utils': 7.18.9
     dev: true
 
   /@babel/plugin-syntax-json-strings/7.8.3_@babel+core@7.18.6:
@@ -2028,7 +2813,38 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.18.6
-      '@babel/helper-plugin-utils': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+    dev: true
+
+  /@babel/plugin-syntax-jsx/7.12.1_@babel+core@7.12.9:
+    resolution:
+      { integrity: sha512-1yRi7yAtB0ETgxdY9ti/p2TivUxJkTdhu/ZbF9MshVGqOx1TdB3b7xCXs49Fupgg50N45KcAsRP/ZqWjs9SRjg== }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.9
+      '@babel/helper-plugin-utils': 7.18.9
+    dev: true
+
+  /@babel/plugin-syntax-jsx/7.18.6_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+    dev: true
+
+  /@babel/plugin-syntax-logical-assignment-operators/7.10.4_@babel+core@7.18.13:
+    resolution:
+      { integrity: sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig== }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.13
+      '@babel/helper-plugin-utils': 7.18.9
     dev: true
 
   /@babel/plugin-syntax-logical-assignment-operators/7.10.4_@babel+core@7.18.6:
@@ -2038,7 +2854,17 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.18.6
-      '@babel/helper-plugin-utils': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+    dev: true
+
+  /@babel/plugin-syntax-nullish-coalescing-operator/7.8.3_@babel+core@7.18.13:
+    resolution:
+      { integrity: sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ== }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.13
+      '@babel/helper-plugin-utils': 7.18.9
     dev: true
 
   /@babel/plugin-syntax-nullish-coalescing-operator/7.8.3_@babel+core@7.18.6:
@@ -2048,7 +2874,17 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.18.6
-      '@babel/helper-plugin-utils': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+    dev: true
+
+  /@babel/plugin-syntax-numeric-separator/7.10.4_@babel+core@7.18.13:
+    resolution:
+      { integrity: sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug== }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.13
+      '@babel/helper-plugin-utils': 7.18.9
     dev: true
 
   /@babel/plugin-syntax-numeric-separator/7.10.4_@babel+core@7.18.6:
@@ -2058,7 +2894,27 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.18.6
-      '@babel/helper-plugin-utils': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+    dev: true
+
+  /@babel/plugin-syntax-object-rest-spread/7.8.3_@babel+core@7.12.9:
+    resolution:
+      { integrity: sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA== }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.9
+      '@babel/helper-plugin-utils': 7.18.9
+    dev: true
+
+  /@babel/plugin-syntax-object-rest-spread/7.8.3_@babel+core@7.18.13:
+    resolution:
+      { integrity: sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA== }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.13
+      '@babel/helper-plugin-utils': 7.18.9
     dev: true
 
   /@babel/plugin-syntax-object-rest-spread/7.8.3_@babel+core@7.18.6:
@@ -2068,7 +2924,17 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.18.6
-      '@babel/helper-plugin-utils': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+    dev: true
+
+  /@babel/plugin-syntax-optional-catch-binding/7.8.3_@babel+core@7.18.13:
+    resolution:
+      { integrity: sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q== }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.13
+      '@babel/helper-plugin-utils': 7.18.9
     dev: true
 
   /@babel/plugin-syntax-optional-catch-binding/7.8.3_@babel+core@7.18.6:
@@ -2078,7 +2944,17 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.18.6
-      '@babel/helper-plugin-utils': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+    dev: true
+
+  /@babel/plugin-syntax-optional-chaining/7.8.3_@babel+core@7.18.13:
+    resolution:
+      { integrity: sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg== }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.13
+      '@babel/helper-plugin-utils': 7.18.9
     dev: true
 
   /@babel/plugin-syntax-optional-chaining/7.8.3_@babel+core@7.18.6:
@@ -2088,7 +2964,29 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.18.6
-      '@babel/helper-plugin-utils': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+    dev: true
+
+  /@babel/plugin-syntax-private-property-in-object/7.14.5_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+    dev: true
+
+  /@babel/plugin-syntax-top-level-await/7.14.5_@babel+core@7.18.13:
+    resolution:
+      { integrity: sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.13
+      '@babel/helper-plugin-utils': 7.18.9
     dev: true
 
   /@babel/plugin-syntax-top-level-await/7.14.5_@babel+core@7.18.6:
@@ -2099,7 +2997,18 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.18.6
-      '@babel/helper-plugin-utils': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+    dev: true
+
+  /@babel/plugin-syntax-typescript/7.18.6_@babel+core@7.18.13:
+    resolution:
+      { integrity: sha512-mAWAuq4rvOepWCBid55JuRNvpTNf2UGVgoz4JV0fXEKolsVZDzsa4NqCef758WZJj/GDu0gVGItjKFiClTAmZA== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.13
+      '@babel/helper-plugin-utils': 7.18.9
     dev: true
 
   /@babel/plugin-syntax-typescript/7.18.6_@babel+core@7.18.6:
@@ -2110,7 +3019,687 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.18.6
-      '@babel/helper-plugin-utils': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+    dev: true
+
+  /@babel/plugin-transform-arrow-functions/7.18.6_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-9S9X9RUefzrsHZmKMbDXxweEH+YlE8JJEuat9FdvW9Qh1cw7W64jELCtWNkPBPX5En45uy28KGvA/AySqUh8CQ== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+    dev: true
+
+  /@babel/plugin-transform-async-to-generator/7.18.6_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-ARE5wZLKnTgPW7/1ftQmSi1CmkqqHo2DNmtztFhvgtOWSDfq0Cq9/9L+KnZNYSNrydBekhW3rwShduf59RoXag== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-module-imports': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+      '@babel/helper-remap-async-to-generator': 7.18.9_@babel+core@7.18.6
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/plugin-transform-block-scoped-functions/7.18.6_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-ExUcOqpPWnliRcPqves5HJcJOvHvIIWfuS4sroBUenPuMdmW+SMHDakmtS7qOo13sVppmUijqeTv7qqGsvURpQ== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+    dev: true
+
+  /@babel/plugin-transform-block-scoping/7.18.9_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-5sDIJRV1KtQVEbt/EIBwGy4T01uYIo4KRB3VUqzkhrAIOGx7AoctL9+Ux88btY0zXdDyPJ9mW+bg+v+XEkGmtw== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+    dev: true
+
+  /@babel/plugin-transform-classes/7.18.9_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-EkRQxsxoytpTlKJmSPYrsOMjCILacAjtSVkd4gChEe2kXjFCun3yohhW5I7plXJhCemM0gKsaGMcO8tinvCA5g== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-annotate-as-pure': 7.18.6
+      '@babel/helper-environment-visitor': 7.18.9
+      '@babel/helper-function-name': 7.18.9
+      '@babel/helper-optimise-call-expression': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+      '@babel/helper-replace-supers': 7.18.9
+      '@babel/helper-split-export-declaration': 7.18.6
+      globals: 11.12.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/plugin-transform-computed-properties/7.18.9_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-+i0ZU1bCDymKakLxn5srGHrsAPRELC2WIbzwjLhHW9SIE1cPYkLCL0NlnXMZaM1vhfgA2+M7hySk42VBvrkBRw== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+    dev: true
+
+  /@babel/plugin-transform-destructuring/7.18.13_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-TodpQ29XekIsex2A+YJPj5ax2plkGa8YYY6mFjCohk/IG9IY42Rtuj1FuDeemfg2ipxIFLzPeA83SIBnlhSIow== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+    dev: true
+
+  /@babel/plugin-transform-dotall-regex/7.18.6_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-6S3jpun1eEbAxq7TdjLotAsl4WpQI9DxfkycRcKrjhQYzU87qpXdknpBg/e+TdcMehqGnLFi7tnFUBR02Vq6wg== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-create-regexp-features-plugin': 7.18.6_@babel+core@7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+    dev: true
+
+  /@babel/plugin-transform-duplicate-keys/7.18.9_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-d2bmXCtZXYc59/0SanQKbiWINadaJXqtvIQIzd4+hNwkWBgyCd5F/2t1kXoUdvPMrxzPvhK6EMQRROxsue+mfw== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+    dev: true
+
+  /@babel/plugin-transform-exponentiation-operator/7.18.6_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-wzEtc0+2c88FVR34aQmiz56dxEkxr2g8DQb/KfaFa1JYXOFVsbhvAonFN6PwVWj++fKmku8NP80plJ5Et4wqHw== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-builder-binary-assignment-operator-visitor': 7.18.9
+      '@babel/helper-plugin-utils': 7.18.9
+    dev: true
+
+  /@babel/plugin-transform-flow-strip-types/7.18.9_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-+G6rp2zRuOAInY5wcggsx4+QVao1qPM0osC9fTUVlAV3zOrzTCnrMAFVnR6+a3T8wz1wFIH7KhYMcMB3u1n80A== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+      '@babel/plugin-syntax-flow': 7.18.6_@babel+core@7.18.6
+    dev: true
+
+  /@babel/plugin-transform-for-of/7.18.8_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-yEfTRnjuskWYo0k1mHUqrVWaZwrdq8AYbfrpqULOJOaucGSp4mNMVps+YtA8byoevxS/urwU75vyhQIxcCgiBQ== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+    dev: true
+
+  /@babel/plugin-transform-function-name/7.18.9_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-WvIBoRPaJQ5yVHzcnJFor7oS5Ls0PYixlTYE63lCj2RtdQEl15M68FXQlxnG6wdraJIXRdR7KI+hQ7q/9QjrCQ== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-compilation-targets': 7.18.9_@babel+core@7.18.6
+      '@babel/helper-function-name': 7.18.9
+      '@babel/helper-plugin-utils': 7.18.9
+    dev: true
+
+  /@babel/plugin-transform-literals/7.18.9_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-IFQDSRoTPnrAIrI5zoZv73IFeZu2dhu6irxQjY9rNjTT53VmKg9fenjvoiOWOkJ6mm4jKVPtdMzBY98Fp4Z4cg== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+    dev: true
+
+  /@babel/plugin-transform-member-expression-literals/7.18.6_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-qSF1ihLGO3q+/g48k85tUjD033C29TNTVB2paCwZPVmOsjn9pClvYYrM2VeJpBY2bcNkuny0YUyTNRyRxJ54KA== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+    dev: true
+
+  /@babel/plugin-transform-modules-amd/7.18.6_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-Pra5aXsmTsOnjM3IajS8rTaLCy++nGM4v3YR4esk5PCsyg9z8NA5oQLwxzMUtDBd8F+UmVza3VxoAaWCbzH1rg== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-module-transforms': 7.18.8
+      '@babel/helper-plugin-utils': 7.18.9
+      babel-plugin-dynamic-import-node: 2.3.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/plugin-transform-modules-commonjs/7.18.6_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-Qfv2ZOWikpvmedXQJDSbxNqy7Xr/j2Y8/KfijM0iJyKkBTmWuvCA1yeH1yDM7NJhBW/2aXxeucLj6i80/LAJ/Q== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-module-transforms': 7.18.8
+      '@babel/helper-plugin-utils': 7.18.9
+      '@babel/helper-simple-access': 7.18.6
+      babel-plugin-dynamic-import-node: 2.3.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/plugin-transform-modules-systemjs/7.18.9_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-zY/VSIbbqtoRoJKo2cDTewL364jSlZGvn0LKOf9ntbfxOvjfmyrdtEEOAdswOswhZEb8UH3jDkCKHd1sPgsS0A== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-hoist-variables': 7.18.6
+      '@babel/helper-module-transforms': 7.18.9
+      '@babel/helper-plugin-utils': 7.18.9
+      '@babel/helper-validator-identifier': 7.18.6
+      babel-plugin-dynamic-import-node: 2.3.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/plugin-transform-modules-umd/7.18.6_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-dcegErExVeXcRqNtkRU/z8WlBLnvD4MRnHgNs3MytRO1Mn1sHRyhbcpYbVMGclAqOjdW+9cfkdZno9dFdfKLfQ== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-module-transforms': 7.18.8
+      '@babel/helper-plugin-utils': 7.18.9
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/plugin-transform-named-capturing-groups-regex/7.18.6_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-UmEOGF8XgaIqD74bC8g7iV3RYj8lMf0Bw7NJzvnS9qQhM4mg+1WHKotUIdjxgD2RGrgFLZZPCFPFj3P/kVDYhg== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-create-regexp-features-plugin': 7.18.6_@babel+core@7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+    dev: true
+
+  /@babel/plugin-transform-new-target/7.18.6_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-DjwFA/9Iu3Z+vrAn+8pBUGcjhxKguSMlsFqeCKbhb9BAV756v0krzVK04CRDi/4aqmk8BsHb4a/gFcaA5joXRw== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+    dev: true
+
+  /@babel/plugin-transform-object-super/7.18.6_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-uvGz6zk+pZoS1aTZrOvrbj6Pp/kK2mp45t2B+bTDre2UgsZZ8EZLSJtUg7m/no0zOJUWgFONpB7Zv9W2tSaFlA== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+      '@babel/helper-replace-supers': 7.18.9
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/plugin-transform-parameters/7.18.8_@babel+core@7.12.9:
+    resolution:
+      { integrity: sha512-ivfbE3X2Ss+Fj8nnXvKJS6sjRG4gzwPMsP+taZC+ZzEGjAYlvENixmt1sZ5Ca6tWls+BlKSGKPJ6OOXvXCbkFg== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.9
+      '@babel/helper-plugin-utils': 7.18.9
+    dev: true
+
+  /@babel/plugin-transform-parameters/7.18.8_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-ivfbE3X2Ss+Fj8nnXvKJS6sjRG4gzwPMsP+taZC+ZzEGjAYlvENixmt1sZ5Ca6tWls+BlKSGKPJ6OOXvXCbkFg== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+    dev: true
+
+  /@babel/plugin-transform-property-literals/7.18.6_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-cYcs6qlgafTud3PAzrrRNbQtfpQ8+y/+M5tKmksS9+M1ckbH6kzY8MrexEM9mcA6JDsukE19iIRvAyYl463sMg== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+    dev: true
+
+  /@babel/plugin-transform-react-display-name/7.18.6_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-TV4sQ+T013n61uMoygyMRm+xf04Bd5oqFpv2jAEQwSZ8NwQA7zeRPg1LMVg2PWi3zWBz+CLKD+v5bcpZ/BS0aA== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+    dev: true
+
+  /@babel/plugin-transform-react-jsx-development/7.18.6_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-SA6HEjwYFKF7WDjWcMcMGUimmw/nhNRDWxr+KaLSCrkD/LMDBvWRmHAYgE1HDeF8KUuI8OAu+RT6EOtKxSW2qA== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/plugin-transform-react-jsx': 7.18.10_@babel+core@7.18.6
+    dev: true
+
+  /@babel/plugin-transform-react-jsx-self/7.18.6_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-A0LQGx4+4Jv7u/tWzoJF7alZwnBDQd6cGLh9P+Ttk4dpiL+J5p7NSNv/9tlEFFJDq3kjxOavWmbm6t0Gk+A3Ig== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+    dev: true
+
+  /@babel/plugin-transform-react-jsx-source/7.18.6_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-utZmlASneDfdaMh0m/WausbjUjEdGrQJz0vFK93d7wD3xf5wBtX219+q6IlCNZeguIcxS2f/CvLZrlLSvSHQXw== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+    dev: true
+
+  /@babel/plugin-transform-react-jsx/7.18.10_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-gCy7Iikrpu3IZjYZolFE4M1Sm+nrh1/6za2Ewj77Z+XirT4TsbJcvOFOyF+fRPwU6AKKK136CZxx6L8AbSFG6A== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-annotate-as-pure': 7.18.6
+      '@babel/helper-module-imports': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+      '@babel/plugin-syntax-jsx': 7.18.6_@babel+core@7.18.6
+      '@babel/types': 7.18.13
+    dev: true
+
+  /@babel/plugin-transform-react-pure-annotations/7.18.6_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-I8VfEPg9r2TRDdvnHgPepTKvuRomzA8+u+nhY7qSI1fR2hRNebasZEETLyM5mAUr0Ku56OkXJ0I7NHJnO6cJiQ== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-annotate-as-pure': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+    dev: true
+
+  /@babel/plugin-transform-regenerator/7.18.6_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-poqRI2+qiSdeldcz4wTSTXBRryoq3Gc70ye7m7UD5Ww0nE29IXqMl6r7Nd15WBgRd74vloEMlShtH6CKxVzfmQ== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+      regenerator-transform: 0.15.0
+    dev: true
+
+  /@babel/plugin-transform-reserved-words/7.18.6_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-oX/4MyMoypzHjFrT1CdivfKZ+XvIPMFXwwxHp/r0Ddy2Vuomt4HDFGmft1TAY2yiTKiNSsh3kjBAzcM8kSdsjA== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+    dev: true
+
+  /@babel/plugin-transform-shorthand-properties/7.18.6_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-eCLXXJqv8okzg86ywZJbRn19YJHU4XUa55oz2wbHhaQVn/MM+XhukiT7SYqp/7o00dg52Rj51Ny+Ecw4oyoygw== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+    dev: true
+
+  /@babel/plugin-transform-spread/7.18.9_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-39Q814wyoOPtIB/qGopNIL9xDChOE1pNU0ZY5dO0owhiVt/5kFm4li+/bBtwc7QotG0u5EPzqhZdjMtmqBqyQA== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+      '@babel/helper-skip-transparent-expression-wrappers': 7.18.9
+    dev: true
+
+  /@babel/plugin-transform-sticky-regex/7.18.6_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-kfiDrDQ+PBsQDO85yj1icueWMfGfJFKN1KCkndygtu/C9+XUfydLC8Iv5UYJqRwy4zk8EcplRxEOeLyjq1gm6Q== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+    dev: true
+
+  /@babel/plugin-transform-template-literals/7.18.9_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-S8cOWfT82gTezpYOiVaGHrCbhlHgKhQt8XH5ES46P2XWmX92yisoZywf5km75wv5sYcXDUCLMmMxOLCtthDgMA== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+    dev: true
+
+  /@babel/plugin-transform-typeof-symbol/7.18.9_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-SRfwTtF11G2aemAZWivL7PD+C9z52v9EvMqH9BuYbabyPuKUvSWks3oCg6041pT925L4zVFqaVBeECwsmlguEw== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+    dev: true
+
+  /@babel/plugin-transform-typescript/7.18.12_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-2vjjam0cum0miPkenUbQswKowuxs/NjMwIKEq0zwegRxXk12C9YOF9STXnaUptITOtOJHKHpzvvWYOjbm6tc0w== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-create-class-features-plugin': 7.18.13_@babel+core@7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+      '@babel/plugin-syntax-typescript': 7.18.6_@babel+core@7.18.6
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/plugin-transform-unicode-escapes/7.18.10_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-kKAdAI+YzPgGY/ftStBFXTI1LZFju38rYThnfMykS+IXy8BVx+res7s2fxf1l8I35DV2T97ezo6+SGrXz6B3iQ== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+    dev: true
+
+  /@babel/plugin-transform-unicode-regex/7.18.6_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-gE7A6Lt7YLnNOL3Pb9BNeZvi+d8l7tcRrG4+pwJjK9hD2xX4mEvjlQW60G9EEmfXVYRPv9VRQcyegIVHCql/AA== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-create-regexp-features-plugin': 7.18.6_@babel+core@7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+    dev: true
+
+  /@babel/preset-env/7.16.11_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-qcmWG8R7ZW6WBRPZK//y+E3Cli151B20W1Rv7ln27vuPaXU/8TKms6jFdiJtF7UDTxcrb7mZd88tAeK9LjdT8g== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/compat-data': 7.18.8
+      '@babel/core': 7.18.6
+      '@babel/helper-compilation-targets': 7.18.6_@babel+core@7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+      '@babel/helper-validator-option': 7.18.6
+      '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.18.9_@babel+core@7.18.6
+      '@babel/plugin-proposal-async-generator-functions': 7.18.10_@babel+core@7.18.6
+      '@babel/plugin-proposal-class-properties': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-proposal-class-static-block': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-proposal-dynamic-import': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-proposal-export-namespace-from': 7.18.9_@babel+core@7.18.6
+      '@babel/plugin-proposal-json-strings': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-proposal-logical-assignment-operators': 7.18.9_@babel+core@7.18.6
+      '@babel/plugin-proposal-nullish-coalescing-operator': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-proposal-numeric-separator': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-proposal-object-rest-spread': 7.18.9_@babel+core@7.18.6
+      '@babel/plugin-proposal-optional-catch-binding': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-proposal-optional-chaining': 7.18.9_@babel+core@7.18.6
+      '@babel/plugin-proposal-private-methods': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-proposal-private-property-in-object': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-proposal-unicode-property-regex': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-syntax-async-generators': 7.8.4_@babel+core@7.18.6
+      '@babel/plugin-syntax-class-properties': 7.12.13_@babel+core@7.18.6
+      '@babel/plugin-syntax-class-static-block': 7.14.5_@babel+core@7.18.6
+      '@babel/plugin-syntax-dynamic-import': 7.8.3_@babel+core@7.18.6
+      '@babel/plugin-syntax-export-namespace-from': 7.8.3_@babel+core@7.18.6
+      '@babel/plugin-syntax-json-strings': 7.8.3_@babel+core@7.18.6
+      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4_@babel+core@7.18.6
+      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3_@babel+core@7.18.6
+      '@babel/plugin-syntax-numeric-separator': 7.10.4_@babel+core@7.18.6
+      '@babel/plugin-syntax-object-rest-spread': 7.8.3_@babel+core@7.18.6
+      '@babel/plugin-syntax-optional-catch-binding': 7.8.3_@babel+core@7.18.6
+      '@babel/plugin-syntax-optional-chaining': 7.8.3_@babel+core@7.18.6
+      '@babel/plugin-syntax-private-property-in-object': 7.14.5_@babel+core@7.18.6
+      '@babel/plugin-syntax-top-level-await': 7.14.5_@babel+core@7.18.6
+      '@babel/plugin-transform-arrow-functions': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-async-to-generator': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-block-scoped-functions': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-block-scoping': 7.18.9_@babel+core@7.18.6
+      '@babel/plugin-transform-classes': 7.18.9_@babel+core@7.18.6
+      '@babel/plugin-transform-computed-properties': 7.18.9_@babel+core@7.18.6
+      '@babel/plugin-transform-destructuring': 7.18.13_@babel+core@7.18.6
+      '@babel/plugin-transform-dotall-regex': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-duplicate-keys': 7.18.9_@babel+core@7.18.6
+      '@babel/plugin-transform-exponentiation-operator': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-for-of': 7.18.8_@babel+core@7.18.6
+      '@babel/plugin-transform-function-name': 7.18.9_@babel+core@7.18.6
+      '@babel/plugin-transform-literals': 7.18.9_@babel+core@7.18.6
+      '@babel/plugin-transform-member-expression-literals': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-modules-amd': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-modules-commonjs': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-modules-systemjs': 7.18.9_@babel+core@7.18.6
+      '@babel/plugin-transform-modules-umd': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-named-capturing-groups-regex': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-new-target': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-object-super': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-parameters': 7.18.8_@babel+core@7.18.6
+      '@babel/plugin-transform-property-literals': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-regenerator': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-reserved-words': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-shorthand-properties': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-spread': 7.18.9_@babel+core@7.18.6
+      '@babel/plugin-transform-sticky-regex': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-template-literals': 7.18.9_@babel+core@7.18.6
+      '@babel/plugin-transform-typeof-symbol': 7.18.9_@babel+core@7.18.6
+      '@babel/plugin-transform-unicode-escapes': 7.18.10_@babel+core@7.18.6
+      '@babel/plugin-transform-unicode-regex': 7.18.6_@babel+core@7.18.6
+      '@babel/preset-modules': 0.1.5_@babel+core@7.18.6
+      '@babel/types': 7.18.13
+      babel-plugin-polyfill-corejs2: 0.3.2_@babel+core@7.18.6
+      babel-plugin-polyfill-corejs3: 0.5.3_@babel+core@7.18.6
+      babel-plugin-polyfill-regenerator: 0.3.1_@babel+core@7.18.6
+      core-js-compat: 3.25.0
+      semver: 6.3.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/preset-flow/7.18.6_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-E7BDhL64W6OUqpuyHnSroLnqyRTcG6ZdOBl1OKI/QK/HJfplqK/S3sq1Cckx7oTodJ5yOXyfw7rEADJ6UjoQDQ== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+      '@babel/helper-validator-option': 7.18.6
+      '@babel/plugin-transform-flow-strip-types': 7.18.9_@babel+core@7.18.6
+    dev: true
+
+  /@babel/preset-modules/0.1.5_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-A57th6YRG7oR3cq/yt/Y84MvGgE0eJG2F1JLhKuyG+jFxEgrd/HAMJatiFtmOiZurz+0DkrvbheCLaV5f2JfjA== }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+      '@babel/plugin-proposal-unicode-property-regex': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-dotall-regex': 7.18.6_@babel+core@7.18.6
+      '@babel/types': 7.18.13
+      esutils: 2.0.3
+    dev: true
+
+  /@babel/preset-react/7.18.6_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-zXr6atUmyYdiWRVLOZahakYmOBHtWc2WGCkP8PYTgZi0iJXDY2CN180TdrIW4OGOAdLc7TifzDIvtx6izaRIzg== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+      '@babel/helper-validator-option': 7.18.6
+      '@babel/plugin-transform-react-display-name': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-react-jsx': 7.18.10_@babel+core@7.18.6
+      '@babel/plugin-transform-react-jsx-development': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-react-pure-annotations': 7.18.6_@babel+core@7.18.6
+    dev: true
+
+  /@babel/preset-typescript/7.18.6_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-s9ik86kXBAnD760aybBucdpnLsAt0jK1xqJn2juOn9lkOvSHV60os5hxoVJsPzMQxvnUJFAlkont2DvvaYEBtQ== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
+      '@babel/helper-validator-option': 7.18.6
+      '@babel/plugin-transform-typescript': 7.18.12_@babel+core@7.18.6
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/register/7.18.9_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-ZlbnXDcNYHMR25ITwwNKT88JiaukkdVj/nG7r3wnuXkOTHc60Uy05PwMCPre0hSkY68E6zK3xz+vUJSP2jWmcw== }
+    engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      clone-deep: 4.0.1
+      find-cache-dir: 2.1.0
+      make-dir: 2.1.0
+      pirates: 4.0.5
+      source-map-support: 0.5.21
+    dev: true
+
+  /@babel/runtime/7.18.9:
+    resolution:
+      { integrity: sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw== }
+    engines: { node: '>=6.9.0' }
+    dependencies:
+      regenerator-runtime: 0.13.9
+    dev: true
+
+  /@babel/template/7.18.10:
+    resolution:
+      { integrity: sha512-TI+rCtooWHr3QJ27kJxfjutghu44DLnasDMwpDqCXVTal9RLp3RSYNh4NdBrRP2cQAoG9A8juOQl6P6oZG4JxA== }
+    engines: { node: '>=6.9.0' }
+    dependencies:
+      '@babel/code-frame': 7.18.6
+      '@babel/parser': 7.18.13
+      '@babel/types': 7.18.13
     dev: true
 
   /@babel/template/7.18.6:
@@ -2120,7 +3709,26 @@ packages:
     dependencies:
       '@babel/code-frame': 7.18.6
       '@babel/parser': 7.18.8
-      '@babel/types': 7.18.8
+      '@babel/types': 7.18.13
+    dev: true
+
+  /@babel/traverse/7.18.13:
+    resolution:
+      { integrity: sha512-N6kt9X1jRMLPxxxPYWi7tgvJRH/rtoU+dbKAPDM44RFHiMH8igdsaSBgFeskhSl/kLWLDUvIh1RXCrTmg0/zvA== }
+    engines: { node: '>=6.9.0' }
+    dependencies:
+      '@babel/code-frame': 7.18.6
+      '@babel/generator': 7.18.13
+      '@babel/helper-environment-visitor': 7.18.9
+      '@babel/helper-function-name': 7.18.9
+      '@babel/helper-hoist-variables': 7.18.6
+      '@babel/helper-split-export-declaration': 7.18.6
+      '@babel/parser': 7.18.13
+      '@babel/types': 7.18.13
+      debug: 4.3.4
+      globals: 11.12.0
+    transitivePeerDependencies:
+      - supports-color
     dev: true
 
   /@babel/traverse/7.18.8:
@@ -2130,18 +3738,27 @@ packages:
     dependencies:
       '@babel/code-frame': 7.18.6
       '@babel/generator': 7.18.7
-      '@babel/helper-environment-visitor': 7.18.6
-      '@babel/helper-function-name': 7.18.6
+      '@babel/helper-environment-visitor': 7.18.9
+      '@babel/helper-function-name': 7.18.9
       '@babel/helper-hoist-variables': 7.18.6
       '@babel/helper-split-export-declaration': 7.18.6
       '@babel/parser': 7.18.8
-      '@babel/types': 7.18.8
+      '@babel/types': 7.18.13
       debug: 4.3.4
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
     dev: true
 
+  /@babel/types/7.18.13:
+    resolution:
+      { integrity: sha512-ePqfTihzW0W6XAU+aMw2ykilisStJfDnsejDCXRchCcMJ4O0+8DhPXf2YUbZ6wjBlsEmZwLK/sPweWtu8hcJYQ== }
+    engines: { node: '>=6.9.0' }
+    dependencies:
+      '@babel/helper-string-parser': 7.18.10
+      '@babel/helper-validator-identifier': 7.18.6
+      to-fast-properties: 2.0.0
+
   /@babel/types/7.18.8:
     resolution:
       { integrity: sha512-qwpdsmraq0aJ3osLJRApsc2ouSJCdnMeZwB0DhbtHAtRpZNZCdlbRnHIgcRKzdE1g0iOGg644fzjOBcdOz9cPw== }
@@ -2149,12 +3766,31 @@ packages:
     dependencies:
       '@babel/helper-validator-identifier': 7.18.6
       to-fast-properties: 2.0.0
+    dev: true
 
   /@bcoe/v8-coverage/0.2.3:
     resolution:
       { integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw== }
     dev: true
 
+  /@cnakazawa/watch/1.0.4:
+    resolution:
+      { integrity: sha512-v9kIhKwjeZThiWrLmj0y17CWoyddASLj9O2yvbZkbvw/N3rWOYy9zkV66ursAoVr0mV15bL8g0c4QZUE6cdDoQ== }
+    engines: { node: '>=0.1.95' }
+    hasBin: true
+    dependencies:
+      exec-sh: 0.3.6
+      minimist: 1.2.6
+    dev: true
+
+  /@colors/colors/1.5.0:
+    resolution:
+      { integrity: sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ== }
+    engines: { node: '>=0.1.90' }
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@cspotcode/source-map-support/0.8.1:
     resolution:
       { integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw== }
@@ -2173,6 +3809,12 @@ packages:
       { integrity: sha512-2korjLjPrVA3kZlMiGWIJwWdiqwK5t9d84cMriUW4HIWDIvexjHRpOMX0Ju/89RqdXwIYbR19xqyTlK2GKQbIw== }
     engines: { node: '>=6.0.0' }
 
+  /@discoveryjs/json-ext/0.5.7:
+    resolution:
+      { integrity: sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw== }
+    engines: { node: '>=10.0.0' }
+    dev: true
+
   /@eslint/eslintrc/1.3.0:
     resolution:
       { integrity: sha512-UWW0TMTmk2d7hLcWD1/e2g5HDM/HQ3csaLSqXCfqwh4uNDuNqlaKWXmEsL4Cs41Z0KnILNvwbHAah3C2yt06kw== }
@@ -2191,6 +3833,24 @@ packages:
       - supports-color
     dev: true
 
+  /@eslint/eslintrc/1.3.1:
+    resolution:
+      { integrity: sha512-OhSY22oQQdw3zgPOOwdoj01l/Dzl1Z+xyUP33tkSN+aqyEhymJCcPHyXt+ylW8FSe0TfRC2VG+ROQOapD0aZSQ== }
+    engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 }
+    dependencies:
+      ajv: 6.12.6
+      debug: 4.3.4
+      espree: 9.4.0
+      globals: 13.17.0
+      ignore: 5.2.0
+      import-fresh: 3.3.0
+      js-yaml: 4.1.0
+      minimatch: 3.1.2
+      strip-json-comments: 3.1.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@fortawesome/fontawesome-common-types/0.2.36:
     resolution:
       { integrity: sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg== }
@@ -2286,7 +3946,6 @@ packages:
   /@gar/promisify/1.1.3:
     resolution:
       { integrity: sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw== }
-    optional: true
 
   /@godaddy/terminus/4.11.1:
     resolution:
@@ -2359,6 +4018,18 @@ packages:
     dependencies:
       '@hapi/hoek': 9.3.0
 
+  /@humanwhocodes/config-array/0.10.4:
+    resolution:
+      { integrity: sha512-mXAIHxZT3Vcpg83opl1wGlVZ9xydbfZO3r5YfRSH6Gpp2J/PfdBP0wbDa2sO6/qRbcalpoevVyW6A/fI6LfeMw== }
+    engines: { node: '>=10.10.0' }
+    dependencies:
+      '@humanwhocodes/object-schema': 1.2.1
+      debug: 4.3.4
+      minimatch: 3.1.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@humanwhocodes/config-array/0.9.5:
     resolution:
       { integrity: sha512-ObyMyWxZiCu/yTisA7uzx81s40xR2fD5Cg/2Kq7G02ajkNubJf6BopgDTmDyc3U7sXpNKM8cYOw7s7Tyr+DnCw== }
@@ -2371,6 +4042,17 @@ packages:
       - supports-color
     dev: true
 
+  /@humanwhocodes/gitignore-to-minimatch/1.0.2:
+    resolution:
+      { integrity: sha512-rSqmMJDdLFUsyxR6FMtD00nfQKKLFb1kv+qBbOVKqErvloEIJLo5bDTJTQNTYgeyp78JsA7u/NPi5jT1GR/MuA== }
+    dev: true
+
+  /@humanwhocodes/module-importer/1.0.1:
+    resolution:
+      { integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA== }
+    engines: { node: '>=12.22' }
+    dev: true
+
   /@humanwhocodes/object-schema/1.2.1:
     resolution:
       { integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA== }
@@ -2475,7 +4157,7 @@ packages:
     engines: { node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0 }
     dependencies:
       '@jest/types': 28.1.3
-      '@types/node': 18.0.4
+      '@types/node': 18.7.14
       chalk: 4.1.2
       jest-message-util: 28.1.3
       jest-util: 28.1.3
@@ -2543,14 +4225,14 @@ packages:
       '@jest/test-result': 28.1.3
       '@jest/transform': 28.1.3
       '@jest/types': 28.1.3
-      '@types/node': 18.0.4
+      '@types/node': 18.7.14
       ansi-escapes: 4.3.2
       chalk: 4.1.2
       ci-info: 3.3.2
       exit: 0.1.2
       graceful-fs: 4.2.10
       jest-changed-files: 28.1.3
-      jest-config: 28.1.3_@types+node@18.0.4
+      jest-config: 28.1.3_@types+node@18.7.14
       jest-haste-map: 28.1.3
       jest-message-util: 28.1.3
       jest-regex-util: 28.0.2
@@ -2587,14 +4269,14 @@ packages:
       '@jest/test-result': 28.1.3
       '@jest/transform': 28.1.3
       '@jest/types': 28.1.3
-      '@types/node': 18.0.4
+      '@types/node': 18.7.14
       ansi-escapes: 4.3.2
       chalk: 4.1.2
       ci-info: 3.3.2
       exit: 0.1.2
       graceful-fs: 4.2.10
       jest-changed-files: 28.1.3
-      jest-config: 28.1.3_eio7cbjqhmwmavckftygdsgouq
+      jest-config: 28.1.3_gsb7asu77en4txj3es3i65pxci
       jest-haste-map: 28.1.3
       jest-message-util: 28.1.3
       jest-regex-util: 28.0.2
@@ -2634,7 +4316,7 @@ packages:
     dependencies:
       '@jest/fake-timers': 28.1.3
       '@jest/types': 28.1.3
-      '@types/node': 18.0.4
+      '@types/node': 18.7.14
       jest-mock: 28.1.3
     dev: true
 
@@ -2677,7 +4359,7 @@ packages:
     dependencies:
       '@jest/types': 28.1.3
       '@sinonjs/fake-timers': 9.1.2
-      '@types/node': 18.0.4
+      '@types/node': 18.7.14
       jest-message-util: 28.1.3
       jest-mock: 28.1.3
       jest-util: 28.1.3
@@ -2759,8 +4441,8 @@ packages:
       '@jest/test-result': 28.1.3
       '@jest/transform': 28.1.3
       '@jest/types': 28.1.3
-      '@jridgewell/trace-mapping': 0.3.14
-      '@types/node': 18.0.4
+      '@jridgewell/trace-mapping': 0.3.15
+      '@types/node': 18.7.14
       chalk: 4.1.2
       collect-v8-coverage: 1.0.1
       exit: 0.1.2
@@ -2788,7 +4470,7 @@ packages:
       { integrity: sha512-/l/VWsdt/aBXgjshLWOFyFt3IVdYypu5y2Wn2rOO1un6nkqIn8SLXzgIMYXFyYsRWDyF5EthmKJMIdJvk08grg== }
     engines: { node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0 }
     dependencies:
-      '@sinclair/typebox': 0.24.20
+      '@sinclair/typebox': 0.24.34
     dev: true
 
   /@jest/source-map/27.5.1:
@@ -2806,7 +4488,7 @@ packages:
       { integrity: sha512-cV8Lx3BeStJb8ipPHnqVw/IM2VCMWO3crWZzYodSIkxXnRcXJipCdx1JCK0K5MsJJouZQTH73mzf4vgxRaH9ww== }
     engines: { node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0 }
     dependencies:
-      '@jridgewell/trace-mapping': 0.3.14
+      '@jridgewell/trace-mapping': 0.3.15
       callsites: 3.1.0
       graceful-fs: 4.2.10
     dev: true
@@ -2857,6 +4539,30 @@ packages:
       slash: 3.0.0
     dev: true
 
+  /@jest/transform/26.6.2:
+    resolution:
+      { integrity: sha512-E9JjhUgNzvuQ+vVAL21vlyfy12gP0GhazGgJC4h6qUt1jSdUXGWJ1wfu/X7Sd8etSgxV4ovT1pb9v5D6QW4XgA== }
+    engines: { node: '>= 10.14.2' }
+    dependencies:
+      '@babel/core': 7.18.6
+      '@jest/types': 26.6.2
+      babel-plugin-istanbul: 6.1.1
+      chalk: 4.1.2
+      convert-source-map: 1.8.0
+      fast-json-stable-stringify: 2.1.0
+      graceful-fs: 4.2.10
+      jest-haste-map: 26.6.2
+      jest-regex-util: 26.0.0
+      jest-util: 26.6.2
+      micromatch: 4.0.5
+      pirates: 4.0.5
+      slash: 3.0.0
+      source-map: 0.6.1
+      write-file-atomic: 3.0.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@jest/transform/27.5.1:
     resolution:
       { integrity: sha512-ipON6WtYgl/1329g5AIJVbUuEh0wZVbdpGwC99Jw4LwuoBNS95MVphU6zOeD9pDkon+LLbFL7lOQRapbB8SCHw== }
@@ -2886,9 +4592,9 @@ packages:
       { integrity: sha512-u5dT5di+oFI6hfcLOHGTAfmUxFRrjK+vnaP0kkVow9Md/M7V/MxqQMOz/VV25UZO8pzeA9PjfTpOu6BDuwSPQA== }
     engines: { node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0 }
     dependencies:
-      '@babel/core': 7.18.6
+      '@babel/core': 7.18.13
       '@jest/types': 28.1.3
-      '@jridgewell/trace-mapping': 0.3.14
+      '@jridgewell/trace-mapping': 0.3.15
       babel-plugin-istanbul: 6.1.1
       chalk: 4.1.2
       convert-source-map: 1.8.0
@@ -2900,11 +4606,23 @@ packages:
       micromatch: 4.0.5
       pirates: 4.0.5
       slash: 3.0.0
-      write-file-atomic: 4.0.1
+      write-file-atomic: 4.0.2
     transitivePeerDependencies:
       - supports-color
     dev: true
 
+  /@jest/types/26.6.2:
+    resolution:
+      { integrity: sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ== }
+    engines: { node: '>= 10.14.2' }
+    dependencies:
+      '@types/istanbul-lib-coverage': 2.0.4
+      '@types/istanbul-reports': 3.0.1
+      '@types/node': 18.0.4
+      '@types/yargs': 15.0.14
+      chalk: 4.1.2
+    dev: true
+
   /@jest/types/27.5.1:
     resolution:
       { integrity: sha512-Cx46iJ9QpwQTjIdq5VJu2QTMMs3QlEjI0x1QbBP5W1+nMzyc2XmimiRR/CbX9TO0cPTeUlxWMOu8mslYsJ8DEw== }
@@ -2925,8 +4643,8 @@ packages:
       '@jest/schemas': 28.1.3
       '@types/istanbul-lib-coverage': 2.0.4
       '@types/istanbul-reports': 3.0.1
-      '@types/node': 18.0.4
-      '@types/yargs': 17.0.10
+      '@types/node': 18.7.14
+      '@types/yargs': 17.0.12
       chalk: 4.1.2
     dev: true
 
@@ -2947,6 +4665,21 @@ packages:
       twemoji: 12.1.6
     dev: true
 
+  /@joshwooding/vite-plugin-react-docgen-typescript/0.0.4_v7l6wjf37eg7lmzcxn4fl266ma:
+    resolution:
+      { integrity: sha512-ezL7SU//1OV4Oyt/zQ3CsX8uLujVEYUHuULkqgcW6wOuQfRnvgkn99HZtLWwS257GmZVwszGQzhL7VE3PbMAYw== }
+    peerDependencies:
+      typescript: '>= 4.3.x'
+      vite: '>2.0.0-0'
+    dependencies:
+      glob: 7.2.3
+      glob-promise: 4.2.2_glob@7.2.3
+      magic-string: 0.26.3
+      react-docgen-typescript: 2.2.2_typescript@4.5.2
+      typescript: 4.5.2
+      vite: 2.9.9
+    dev: true
+
   /@jridgewell/gen-mapping/0.1.1:
     resolution:
       { integrity: sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w== }
@@ -2963,7 +4696,7 @@ packages:
     dependencies:
       '@jridgewell/set-array': 1.1.2
       '@jridgewell/sourcemap-codec': 1.4.14
-      '@jridgewell/trace-mapping': 0.3.14
+      '@jridgewell/trace-mapping': 0.3.15
 
   /@jridgewell/resolve-uri/3.1.0:
     resolution:
@@ -2981,7 +4714,6 @@ packages:
     dependencies:
       '@jridgewell/gen-mapping': 0.3.2
       '@jridgewell/trace-mapping': 0.3.14
-    dev: false
 
   /@jridgewell/sourcemap-codec/1.4.14:
     resolution:
@@ -2994,6 +4726,13 @@ packages:
       '@jridgewell/resolve-uri': 3.1.0
       '@jridgewell/sourcemap-codec': 1.4.14
 
+  /@jridgewell/trace-mapping/0.3.15:
+    resolution:
+      { integrity: sha512-oWZNOULl+UbhsgB51uuZzglikfIKSUBO/M9W2OfEjn7cmqoAiCgmv9lyACTUacZwBz0ITnJ2NqjU8Tx0DHL88g== }
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.0
+      '@jridgewell/sourcemap-codec': 1.4.14
+
   /@jridgewell/trace-mapping/0.3.9:
     resolution:
       { integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ== }
@@ -3231,6 +4970,56 @@ packages:
     engines: { node: '>=6.0.0' }
     dev: true
 
+  /@mdx-js/mdx/1.6.22:
+    resolution:
+      { integrity: sha512-AMxuLxPz2j5/6TpF/XSdKpQP1NlG0z11dFOlq+2IP/lSgl11GY8ji6S/rgsViN/L0BDvHvUMruRb7ub+24LUYA== }
+    dependencies:
+      '@babel/core': 7.12.9
+      '@babel/plugin-syntax-jsx': 7.12.1_@babel+core@7.12.9
+      '@babel/plugin-syntax-object-rest-spread': 7.8.3_@babel+core@7.12.9
+      '@mdx-js/util': 1.6.22
+      babel-plugin-apply-mdx-type-prop: 1.6.22_@babel+core@7.12.9
+      babel-plugin-extract-import-names: 1.6.22
+      camelcase-css: 2.0.1
+      detab: 2.0.4
+      hast-util-raw: 6.0.1
+      lodash.uniq: 4.5.0
+      mdast-util-to-hast: 10.0.1
+      remark-footnotes: 2.0.0
+      remark-mdx: 1.6.22
+      remark-parse: 8.0.3
+      remark-squeeze-paragraphs: 4.0.0
+      style-to-object: 0.3.0
+      unified: 9.2.0
+      unist-builder: 2.0.3
+      unist-util-visit: 2.0.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@mdx-js/react/1.6.22_react@16.14.0:
+    resolution:
+      { integrity: sha512-TDoPum4SHdfPiGSAaRBw7ECyI8VaHpK8GJugbJIJuqyh6kzw9ZLJZW3HGL3NNrJGxcAixUvqROm+YuQOo5eXtg== }
+    peerDependencies:
+      react: ^16.13.1 || ^17.0.0
+    dependencies:
+      react: 16.14.0
+    dev: true
+
+  /@mdx-js/util/1.6.22:
+    resolution:
+      { integrity: sha512-H1rQc1ZOHANWBvPcW+JpGwr+juXSxM8Q8YCkm3GhZd8REu1fHR3z99CErO1p9pkcfcxZnMdIZdIsXkOHY0NilA== }
+    dev: true
+
+  /@mrmlnc/readdir-enhanced/2.2.1:
+    resolution:
+      { integrity: sha512-bPHp6Ji8b41szTOcaP63VlnbbO5Ny6dwAATtY6JTjh5N2OLrb5Qk/Th5cRkRQhkWCt+EJsYrNB0MiL+Gpn6e3g== }
+    engines: { node: '>=4' }
+    dependencies:
+      call-me-maybe: 1.0.1
+      glob-to-regexp: 0.3.0
+    dev: true
+
   /@napi-rs/snappy-android-arm-eabi/7.1.1:
     resolution:
       { integrity: sha512-NKd/ztuVEgQaAaNVQ5zZaCB9VV+7+uBXBHqhaE5iSapQhLc41szTlT0s68FCee75OoT3vhqdA6Jp5TrzZ2WOaw== }
@@ -3369,6 +5158,12 @@ packages:
       '@nodelib/fs.stat': 2.0.5
       run-parallel: 1.2.0
 
+  /@nodelib/fs.stat/1.1.3:
+    resolution:
+      { integrity: sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw== }
+    engines: { node: '>= 6' }
+    dev: true
+
   /@nodelib/fs.stat/2.0.5:
     resolution:
       { integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A== }
@@ -3388,7 +5183,6 @@ packages:
     dependencies:
       '@gar/promisify': 1.1.3
       semver: 7.3.7
-    optional: true
 
   /@npmcli/move-file/1.1.2:
     resolution:
@@ -3397,7 +5191,6 @@ packages:
     dependencies:
       mkdirp: 1.0.4
       rimraf: 3.0.2
-    optional: true
 
   /@opentelemetry/api/1.1.0:
     resolution:
@@ -3457,6 +5250,11 @@ packages:
       - vue
     dev: true
 
+  /@polka/url/1.0.0-next.21:
+    resolution:
+      { integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g== }
+    dev: true
+
   /@popperjs/core/2.10.2:
     resolution:
       { integrity: sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ== }
@@ -3603,9 +5401,9 @@ packages:
     resolution:
       { integrity: sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ== }
 
-  /@sinclair/typebox/0.24.20:
+  /@sinclair/typebox/0.24.34:
     resolution:
-      { integrity: sha512-kVaO5aEFZb33nPMTZBxiPEkY+slxiPtqC7QX8f9B3eGOMBvEfuMfxp9DSTTCsRJPumPKjrge4yagyssO4q6qzQ== }
+      { integrity: sha512-x3ejWKw7rpy30Bvm6U0AQMOHdjqe2E3YJrBHlTxH0KFsp77bBa+MH324nJxtXZFpnTy/JW2h5HPYVm0vG2WPnw== }
     dev: true
 
   /@sindresorhus/is/2.1.1:
@@ -3653,6 +5451,1286 @@ packages:
       '@sinonjs/commons': 1.8.3
     dev: true
 
+  /@storybook/addon-actions/6.5.10_wcqkhtmu7mswc6yz4uyexck3ty:
+    resolution:
+      { integrity: sha512-vpCnEu81fmtYzOf0QsRYoDuf9wXgVVl2VysE1dWRebRhIUDU0JurrthTnw322e38D4FzaoNGqZE7wnBYBohzZA== }
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@storybook/addons': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/api': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/client-logger': 6.5.10
+      '@storybook/components': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/core-events': 6.5.10
+      '@storybook/csf': 0.0.2--canary.4566f4d.1
+      '@storybook/theming': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      core-js: 3.25.0
+      fast-deep-equal: 3.1.3
+      global: 4.4.0
+      lodash: 4.17.21
+      polished: 4.2.2
+      prop-types: 15.8.1
+      react: 16.14.0
+      react-dom: 16.14.0_react@16.14.0
+      react-inspector: 5.1.1_react@16.14.0
+      regenerator-runtime: 0.13.9
+      telejson: 6.0.8
+      ts-dedent: 2.2.0
+      util-deprecate: 1.0.2
+      uuid-browser: 3.1.0
+    dev: true
+
+  /@storybook/addon-backgrounds/6.5.10_wcqkhtmu7mswc6yz4uyexck3ty:
+    resolution:
+      { integrity: sha512-5uzQda3dh891h7BL8e9Ymk7BI+QgkkzDJXuA4mHjOXfIiD3S3efhJI8amXuBC2ZpIr6zmVit0MqZVyoVve46cQ== }
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@storybook/addons': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/api': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/client-logger': 6.5.10
+      '@storybook/components': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/core-events': 6.5.10
+      '@storybook/csf': 0.0.2--canary.4566f4d.1
+      '@storybook/theming': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      core-js: 3.25.0
+      global: 4.4.0
+      memoizerific: 1.11.3
+      react: 16.14.0
+      react-dom: 16.14.0_react@16.14.0
+      regenerator-runtime: 0.13.9
+      ts-dedent: 2.2.0
+      util-deprecate: 1.0.2
+    dev: true
+
+  /@storybook/addon-controls/6.5.10_sk7tiidch4ak35d54sr6tbdsmy:
+    resolution:
+      { integrity: sha512-lC2y3XcolmQAJwFurIyGrynAHPWmfNtTCdu3rQBTVGwyxCoNwdOOeC2jV0BRqX2+CW6OHzJr9frNWXPSaZ8c4w== }
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@storybook/addons': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/api': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/client-logger': 6.5.10
+      '@storybook/components': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/core-common': 6.5.10_sk7tiidch4ak35d54sr6tbdsmy
+      '@storybook/csf': 0.0.2--canary.4566f4d.1
+      '@storybook/node-logger': 6.5.10
+      '@storybook/store': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/theming': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      core-js: 3.25.0
+      lodash: 4.17.21
+      react: 16.14.0
+      react-dom: 16.14.0_react@16.14.0
+      ts-dedent: 2.2.0
+    transitivePeerDependencies:
+      - eslint
+      - supports-color
+      - typescript
+      - vue-template-compiler
+      - webpack-cli
+      - webpack-command
+    dev: true
+
+  /@storybook/addon-docs/6.5.10_mxtbvbyeconf3ozmvtckayjtx4:
+    resolution:
+      { integrity: sha512-1kgjo3f0vL6GN8fTwLL05M/q/kDdzvuqwhxPY/v5hubFb3aQZGr2yk9pRBaLAbs4bez0yG0ASXcwhYnrEZUppg== }
+    peerDependencies:
+      '@storybook/mdx2-csf': ^0.0.3
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@storybook/mdx2-csf':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@babel/plugin-transform-react-jsx': 7.18.10_@babel+core@7.18.6
+      '@babel/preset-env': 7.16.11_@babel+core@7.18.6
+      '@jest/transform': 26.6.2
+      '@mdx-js/react': 1.6.22_react@16.14.0
+      '@storybook/addons': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/api': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/components': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/core-common': 6.5.10_sk7tiidch4ak35d54sr6tbdsmy
+      '@storybook/core-events': 6.5.10
+      '@storybook/csf': 0.0.2--canary.4566f4d.1
+      '@storybook/docs-tools': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/mdx1-csf': 0.0.1_@babel+core@7.18.6
+      '@storybook/node-logger': 6.5.10
+      '@storybook/postinstall': 6.5.10
+      '@storybook/preview-web': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/source-loader': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/store': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/theming': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      babel-loader: 8.2.5_hdaic33o4wf65p5shr3xepeg4m
+      core-js: 3.25.0
+      fast-deep-equal: 3.1.3
+      global: 4.4.0
+      lodash: 4.17.21
+      react: 16.14.0
+      react-dom: 16.14.0_react@16.14.0
+      regenerator-runtime: 0.13.9
+      remark-external-links: 8.0.0
+      remark-slug: 6.1.0
+      ts-dedent: 2.2.0
+      util-deprecate: 1.0.2
+    transitivePeerDependencies:
+      - '@babel/core'
+      - eslint
+      - supports-color
+      - typescript
+      - vue-template-compiler
+      - webpack
+      - webpack-cli
+      - webpack-command
+    dev: true
+
+  /@storybook/addon-essentials/6.5.10_q7blm2c46brqbndav6364dm75q:
+    resolution:
+      { integrity: sha512-PT2aiR4vgAyB0pl3HNBUa4/a7NDRxASxAazz7zt9ZDirkipDKfxwdcLeRoJzwSngVDWEhuz5/paN5x4eNp4Hww== }
+    peerDependencies:
+      '@babel/core': ^7.9.6
+      '@storybook/angular': '*'
+      '@storybook/builder-manager4': '*'
+      '@storybook/builder-manager5': '*'
+      '@storybook/builder-webpack4': '*'
+      '@storybook/builder-webpack5': '*'
+      '@storybook/html': '*'
+      '@storybook/vue': '*'
+      '@storybook/vue3': '*'
+      '@storybook/web-components': '*'
+      lit: '*'
+      lit-html: '*'
+      react: '*'
+      react-dom: '*'
+      svelte: '*'
+      sveltedoc-parser: '*'
+      vue: '*'
+      webpack: '*'
+    peerDependenciesMeta:
+      '@storybook/angular':
+        optional: true
+      '@storybook/builder-manager4':
+        optional: true
+      '@storybook/builder-manager5':
+        optional: true
+      '@storybook/builder-webpack4':
+        optional: true
+      '@storybook/builder-webpack5':
+        optional: true
+      '@storybook/html':
+        optional: true
+      '@storybook/vue':
+        optional: true
+      '@storybook/vue3':
+        optional: true
+      '@storybook/web-components':
+        optional: true
+      lit:
+        optional: true
+      lit-html:
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+      svelte:
+        optional: true
+      sveltedoc-parser:
+        optional: true
+      vue:
+        optional: true
+      webpack:
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@storybook/addon-actions': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/addon-backgrounds': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/addon-controls': 6.5.10_sk7tiidch4ak35d54sr6tbdsmy
+      '@storybook/addon-docs': 6.5.10_mxtbvbyeconf3ozmvtckayjtx4
+      '@storybook/addon-measure': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/addon-outline': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/addon-toolbars': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/addon-viewport': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/addons': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/api': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/core-common': 6.5.10_sk7tiidch4ak35d54sr6tbdsmy
+      '@storybook/node-logger': 6.5.10
+      '@storybook/vue3': 6.5.10_ozji4kp7bdtbjefnvy5lbyf6p4
+      core-js: 3.25.0
+      react: 16.14.0
+      react-dom: 16.14.0_react@16.14.0
+      regenerator-runtime: 0.13.9
+      ts-dedent: 2.2.0
+      vue: 3.2.37
+      webpack: 5.72.0
+    transitivePeerDependencies:
+      - '@storybook/mdx2-csf'
+      - eslint
+      - supports-color
+      - typescript
+      - vue-template-compiler
+      - webpack-cli
+      - webpack-command
+    dev: true
+
+  /@storybook/addon-links/6.5.10_wcqkhtmu7mswc6yz4uyexck3ty:
+    resolution:
+      { integrity: sha512-r3WzYIPz7WjHiaPObC2Tg6bHuZRBb/Kt/X+Eitw+jTqBel7ksvkO36tn81q8Eyj61qIdNQmUWAaX/0aewT0kLA== }
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@storybook/addons': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/client-logger': 6.5.10
+      '@storybook/core-events': 6.5.10
+      '@storybook/csf': 0.0.2--canary.4566f4d.1
+      '@storybook/router': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@types/qs': 6.9.7
+      core-js: 3.25.0
+      global: 4.4.0
+      prop-types: 15.8.1
+      qs: 6.11.0
+      react: 16.14.0
+      react-dom: 16.14.0_react@16.14.0
+      regenerator-runtime: 0.13.9
+      ts-dedent: 2.2.0
+    dev: true
+
+  /@storybook/addon-measure/6.5.10_wcqkhtmu7mswc6yz4uyexck3ty:
+    resolution:
+      { integrity: sha512-ss7L1H5K5hXygDIoVwj+QyVXbve5V67x7CofLiLCgQYuJzfO16+sPGjiTGWMpTb4ijox2uKWnTkpilt5bCjXgw== }
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@storybook/addons': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/api': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/client-logger': 6.5.10
+      '@storybook/components': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/core-events': 6.5.10
+      '@storybook/csf': 0.0.2--canary.4566f4d.1
+      core-js: 3.25.0
+      global: 4.4.0
+      react: 16.14.0
+      react-dom: 16.14.0_react@16.14.0
+    dev: true
+
+  /@storybook/addon-outline/6.5.10_wcqkhtmu7mswc6yz4uyexck3ty:
+    resolution:
+      { integrity: sha512-AjdaeQ+/iBKmGrAqRW4niwMB6AkgGnYmSzVs5Cf6F/Sb4Dp+vzgLNOwLABD9qs8Ri8dvHl5J4QpVwQKUhYZaOQ== }
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@storybook/addons': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/api': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/client-logger': 6.5.10
+      '@storybook/components': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/core-events': 6.5.10
+      '@storybook/csf': 0.0.2--canary.4566f4d.1
+      core-js: 3.25.0
+      global: 4.4.0
+      react: 16.14.0
+      react-dom: 16.14.0_react@16.14.0
+      regenerator-runtime: 0.13.9
+      ts-dedent: 2.2.0
+    dev: true
+
+  /@storybook/addon-toolbars/6.5.10_wcqkhtmu7mswc6yz4uyexck3ty:
+    resolution:
+      { integrity: sha512-S0Ljc6Wv+bPbx2e0iTveJ6bBDqjsemu+FZD4qDLsHreoI7DAcqyrF5Def1l8xNohixIVpx8dQpYXRtyzNlXekg== }
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@storybook/addons': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/api': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/client-logger': 6.5.10
+      '@storybook/components': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/theming': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      core-js: 3.25.0
+      react: 16.14.0
+      react-dom: 16.14.0_react@16.14.0
+      regenerator-runtime: 0.13.9
+    dev: true
+
+  /@storybook/addon-viewport/6.5.10_wcqkhtmu7mswc6yz4uyexck3ty:
+    resolution:
+      { integrity: sha512-RFMd+4kZljyuJjR9OJ2bFXHrSG7VTi5FDZYWEU+4W1sBxzC+JhnVnUP+HJH3gUxEFIRQC5neRzwWRE9RUUoALQ== }
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@storybook/addons': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/api': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/client-logger': 6.5.10
+      '@storybook/components': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/core-events': 6.5.10
+      '@storybook/theming': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      core-js: 3.25.0
+      global: 4.4.0
+      memoizerific: 1.11.3
+      prop-types: 15.8.1
+      react: 16.14.0
+      react-dom: 16.14.0_react@16.14.0
+      regenerator-runtime: 0.13.9
+    dev: true
+
+  /@storybook/addons/6.5.10_wcqkhtmu7mswc6yz4uyexck3ty:
+    resolution:
+      { integrity: sha512-VD4tBCQ23PkSeDoxuHcKy0RfhIs3oMYjBacOZx7d0bvOzK9WjPyvE2ysDAh7r/ceqnwmWHAScIpE+I1RU7gl+g== }
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      '@storybook/api': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/channels': 6.5.10
+      '@storybook/client-logger': 6.5.10
+      '@storybook/core-events': 6.5.10
+      '@storybook/csf': 0.0.2--canary.4566f4d.1
+      '@storybook/router': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/theming': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@types/webpack-env': 1.18.0
+      core-js: 3.25.0
+      global: 4.4.0
+      react: 16.14.0
+      react-dom: 16.14.0_react@16.14.0
+      regenerator-runtime: 0.13.9
+    dev: true
+
+  /@storybook/api/6.5.10_wcqkhtmu7mswc6yz4uyexck3ty:
+    resolution:
+      { integrity: sha512-AkmgSPNEGdKp4oZA4KQ+RJsacw7GwfvjsVDnCkcXqS9zmSr/RNL0fhpcd60KKkmx/hGKPTDFpK3ZayxDrJ/h4A== }
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      '@storybook/channels': 6.5.10
+      '@storybook/client-logger': 6.5.10
+      '@storybook/core-events': 6.5.10
+      '@storybook/csf': 0.0.2--canary.4566f4d.1
+      '@storybook/router': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/semver': 7.3.2
+      '@storybook/theming': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      core-js: 3.25.0
+      fast-deep-equal: 3.1.3
+      global: 4.4.0
+      lodash: 4.17.21
+      memoizerific: 1.11.3
+      react: 16.14.0
+      react-dom: 16.14.0_react@16.14.0
+      regenerator-runtime: 0.13.9
+      store2: 2.14.2
+      telejson: 6.0.8
+      ts-dedent: 2.2.0
+      util-deprecate: 1.0.2
+    dev: true
+
+  /@storybook/builder-vite/0.1.41_p5cdmbnbwksbdiptqbtw3aheee:
+    resolution:
+      { integrity: sha512-h/7AgEUfSuVexTD6LuJ6BCNu+FSo/+IKYBQ1O3TyF2BEgcob5/BGrx9QcwM0LJCF44L1zNKaxkKpCZs9p+LRRA== }
+    peerDependencies:
+      '@storybook/core-common': '>=6.4.3 || >=6.5.0-alpha.0'
+      '@storybook/mdx2-csf': ^0.0.3
+      '@storybook/node-logger': '>=6.4.3 || >=6.5.0-alpha.0'
+      vite: '>=2.6.7'
+    peerDependenciesMeta:
+      '@storybook/mdx2-csf':
+        optional: true
+    dependencies:
+      '@joshwooding/vite-plugin-react-docgen-typescript': 0.0.4_v7l6wjf37eg7lmzcxn4fl266ma
+      '@storybook/core-common': 6.5.10_sk7tiidch4ak35d54sr6tbdsmy
+      '@storybook/mdx1-csf': 0.0.4_v2wnvfwwhgapxbqqkw3slx2zde
+      '@storybook/source-loader': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@vitejs/plugin-react': 1.3.2
+      ast-types: 0.14.2
+      es-module-lexer: 0.9.3
+      glob: 7.2.3
+      glob-promise: 4.2.2_glob@7.2.3
+      magic-string: 0.26.3
+      react-docgen: 6.0.0-alpha.3
+      slash: 3.0.0
+      sveltedoc-parser: 4.2.1
+      vite: 2.9.9
+    transitivePeerDependencies:
+      - '@babel/core'
+      - react
+      - react-dom
+      - supports-color
+      - typescript
+    dev: true
+
+  /@storybook/builder-webpack4/6.5.10_sk7tiidch4ak35d54sr6tbdsmy:
+    resolution:
+      { integrity: sha512-AoKjsCNoQQoZXYwBDxO8s+yVEd5FjBJAaysEuUTHq2fb81jwLrGcEOo6hjw4jqfugZQIzYUEjPazlvubS78zpw== }
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@storybook/addons': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/api': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/channel-postmessage': 6.5.10
+      '@storybook/channels': 6.5.10
+      '@storybook/client-api': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/client-logger': 6.5.10
+      '@storybook/components': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/core-common': 6.5.10_sk7tiidch4ak35d54sr6tbdsmy
+      '@storybook/core-events': 6.5.10
+      '@storybook/node-logger': 6.5.10
+      '@storybook/preview-web': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/router': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/semver': 7.3.2
+      '@storybook/store': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/theming': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/ui': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@types/node': 16.11.9
+      '@types/webpack': 4.41.32
+      autoprefixer: 9.8.8
+      babel-loader: 8.2.5_xcbjw3zjektbxpb7yraegegdpi
+      case-sensitive-paths-webpack-plugin: 2.4.0
+      core-js: 3.25.0
+      css-loader: 3.6.0_webpack@4.46.0
+      file-loader: 6.2.0_webpack@4.46.0
+      find-up: 5.0.0
+      fork-ts-checker-webpack-plugin: 4.1.6_nsd4r6eogdup74sdidtzttwbxi
+      glob: 7.2.3
+      glob-promise: 3.4.0_glob@7.2.3
+      global: 4.4.0
+      html-webpack-plugin: 4.5.2_webpack@4.46.0
+      pnp-webpack-plugin: 1.6.4_typescript@4.5.2
+      postcss: 7.0.39
+      postcss-flexbugs-fixes: 4.2.1
+      postcss-loader: 4.3.0_gzaxsinx64nntyd3vmdqwl7coe
+      raw-loader: 4.0.2_webpack@4.46.0
+      react: 16.14.0
+      react-dom: 16.14.0_react@16.14.0
+      stable: 0.1.8
+      style-loader: 1.3.0_webpack@4.46.0
+      terser-webpack-plugin: 4.2.3_webpack@4.46.0
+      ts-dedent: 2.2.0
+      typescript: 4.5.2
+      url-loader: 4.1.1_lit45vopotvaqup7lrvlnvtxwy
+      util-deprecate: 1.0.2
+      webpack: 4.46.0
+      webpack-dev-middleware: 3.7.3_webpack@4.46.0
+      webpack-filter-warnings-plugin: 1.2.1_webpack@4.46.0
+      webpack-hot-middleware: 2.25.2
+      webpack-virtual-modules: 0.2.2
+    transitivePeerDependencies:
+      - bluebird
+      - eslint
+      - supports-color
+      - vue-template-compiler
+      - webpack-cli
+      - webpack-command
+    dev: true
+
+  /@storybook/channel-postmessage/6.5.10:
+    resolution:
+      { integrity: sha512-t9PTA0UzFvYa3IlOfpBOolfrRMPTjUMIeCQ6FNyM0aj5GqLKSvoQzP8NeoRpIrvyf6ljFKKdaMaZ3fiCvh45ag== }
+    dependencies:
+      '@storybook/channels': 6.5.10
+      '@storybook/client-logger': 6.5.10
+      '@storybook/core-events': 6.5.10
+      core-js: 3.25.0
+      global: 4.4.0
+      qs: 6.11.0
+      telejson: 6.0.8
+    dev: true
+
+  /@storybook/channel-websocket/6.5.10:
+    resolution:
+      { integrity: sha512-RTXMZbMWCS3xU+4GVIdfnUXsKcwg/WTozy88/5OxaKjGw6KgRedqLAQJKJ6Y5XlnwIcWelirkHj/COwTTXhbPg== }
+    dependencies:
+      '@storybook/channels': 6.5.10
+      '@storybook/client-logger': 6.5.10
+      core-js: 3.25.0
+      global: 4.4.0
+      telejson: 6.0.8
+    dev: true
+
+  /@storybook/channels/6.5.10:
+    resolution:
+      { integrity: sha512-lo26YZ6kWpHXLhuHJF4P/bICY7jD/rXEZqReKtGOSk1Lv99/xvG6pqmcy3hWLf3v3Dy/8otjRPSR7izFVIIZgQ== }
+    dependencies:
+      core-js: 3.25.0
+      ts-dedent: 2.2.0
+      util-deprecate: 1.0.2
+    dev: true
+
+  /@storybook/client-api/6.5.10_wcqkhtmu7mswc6yz4uyexck3ty:
+    resolution:
+      { integrity: sha512-3wBWZl3NvMFgMovgEh+euiARAT2FXzpvTF4Q1gerGMNNDlrGxHnFvSuy4FHg/irtOGLa4yLz43ULFbYtpKw0Lg== }
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      '@storybook/addons': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/channel-postmessage': 6.5.10
+      '@storybook/channels': 6.5.10
+      '@storybook/client-logger': 6.5.10
+      '@storybook/core-events': 6.5.10
+      '@storybook/csf': 0.0.2--canary.4566f4d.1
+      '@storybook/store': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@types/qs': 6.9.7
+      '@types/webpack-env': 1.18.0
+      core-js: 3.25.0
+      fast-deep-equal: 3.1.3
+      global: 4.4.0
+      lodash: 4.17.21
+      memoizerific: 1.11.3
+      qs: 6.11.0
+      react: 16.14.0
+      react-dom: 16.14.0_react@16.14.0
+      regenerator-runtime: 0.13.9
+      store2: 2.14.2
+      synchronous-promise: 2.0.16
+      ts-dedent: 2.2.0
+      util-deprecate: 1.0.2
+    dev: true
+
+  /@storybook/client-logger/6.5.10:
+    resolution:
+      { integrity: sha512-/xA0MHOevXev68hyLMQw8Qo8KczSIdXOxliAgrycMTkDmw5eKeA8TP7B8zP3wGuq/e3MrdD9/8MWhb/IQBNC3w== }
+    dependencies:
+      core-js: 3.25.0
+      global: 4.4.0
+    dev: true
+
+  /@storybook/components/6.5.10_wcqkhtmu7mswc6yz4uyexck3ty:
+    resolution:
+      { integrity: sha512-9OhgB8YQfGwOKjo/N96N5mrtJ6qDVVoEM1zuhea32tJUd2eYf0aSWpryA9VnOM0V1q/8DAoCg5rPBMYWMBU5uw== }
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      '@storybook/client-logger': 6.5.10
+      '@storybook/csf': 0.0.2--canary.4566f4d.1
+      '@storybook/theming': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      core-js: 3.25.0
+      memoizerific: 1.11.3
+      qs: 6.11.0
+      react: 16.14.0
+      react-dom: 16.14.0_react@16.14.0
+      regenerator-runtime: 0.13.9
+      util-deprecate: 1.0.2
+    dev: true
+
+  /@storybook/core-client/6.5.10_mdh2ssybvg4xieq3smw3zfcquy:
+    resolution:
+      { integrity: sha512-THsIjNrOrampTl0Lgfjvfjk1JnktKb4CQLOM80KpQb4cjDqorBjJmErzUkUQ2y3fXvrDmQ/kUREkShET4XEdtA== }
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+      typescript: '*'
+      webpack: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@storybook/addons': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/channel-postmessage': 6.5.10
+      '@storybook/channel-websocket': 6.5.10
+      '@storybook/client-api': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/client-logger': 6.5.10
+      '@storybook/core-events': 6.5.10
+      '@storybook/csf': 0.0.2--canary.4566f4d.1
+      '@storybook/preview-web': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/store': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/ui': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      airbnb-js-shims: 2.2.1
+      ansi-to-html: 0.6.15
+      core-js: 3.25.0
+      global: 4.4.0
+      lodash: 4.17.21
+      qs: 6.11.0
+      react: 16.14.0
+      react-dom: 16.14.0_react@16.14.0
+      regenerator-runtime: 0.13.9
+      ts-dedent: 2.2.0
+      typescript: 4.5.2
+      unfetch: 4.2.0
+      util-deprecate: 1.0.2
+      webpack: 5.72.0
+    dev: true
+
+  /@storybook/core-client/6.5.10_v7xolpmq63rzdbty7huqtq5j6a:
+    resolution:
+      { integrity: sha512-THsIjNrOrampTl0Lgfjvfjk1JnktKb4CQLOM80KpQb4cjDqorBjJmErzUkUQ2y3fXvrDmQ/kUREkShET4XEdtA== }
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+      typescript: '*'
+      webpack: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@storybook/addons': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/channel-postmessage': 6.5.10
+      '@storybook/channel-websocket': 6.5.10
+      '@storybook/client-api': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/client-logger': 6.5.10
+      '@storybook/core-events': 6.5.10
+      '@storybook/csf': 0.0.2--canary.4566f4d.1
+      '@storybook/preview-web': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/store': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/ui': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      airbnb-js-shims: 2.2.1
+      ansi-to-html: 0.6.15
+      core-js: 3.25.0
+      global: 4.4.0
+      lodash: 4.17.21
+      qs: 6.11.0
+      react: 16.14.0
+      react-dom: 16.14.0_react@16.14.0
+      regenerator-runtime: 0.13.9
+      ts-dedent: 2.2.0
+      typescript: 4.5.2
+      unfetch: 4.2.0
+      util-deprecate: 1.0.2
+      webpack: 4.46.0
+    dev: true
+
+  /@storybook/core-common/6.5.10_sk7tiidch4ak35d54sr6tbdsmy:
+    resolution:
+      { integrity: sha512-Bx+VKkfWdrAmD8T51Sjq/mMhRaiapBHcpG4cU5bc3DMbg+LF2/yrgqv/cjVu+m5gHAzYCac5D7gqzBgvG7Myww== }
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/plugin-proposal-class-properties': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-proposal-decorators': 7.18.10_@babel+core@7.18.6
+      '@babel/plugin-proposal-export-default-from': 7.18.10_@babel+core@7.18.6
+      '@babel/plugin-proposal-nullish-coalescing-operator': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-proposal-object-rest-spread': 7.18.9_@babel+core@7.18.6
+      '@babel/plugin-proposal-optional-chaining': 7.18.9_@babel+core@7.18.6
+      '@babel/plugin-proposal-private-methods': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-proposal-private-property-in-object': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-syntax-dynamic-import': 7.8.3_@babel+core@7.18.6
+      '@babel/plugin-transform-arrow-functions': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-block-scoping': 7.18.9_@babel+core@7.18.6
+      '@babel/plugin-transform-classes': 7.18.9_@babel+core@7.18.6
+      '@babel/plugin-transform-destructuring': 7.18.13_@babel+core@7.18.6
+      '@babel/plugin-transform-for-of': 7.18.8_@babel+core@7.18.6
+      '@babel/plugin-transform-parameters': 7.18.8_@babel+core@7.18.6
+      '@babel/plugin-transform-shorthand-properties': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-spread': 7.18.9_@babel+core@7.18.6
+      '@babel/preset-env': 7.16.11_@babel+core@7.18.6
+      '@babel/preset-react': 7.18.6_@babel+core@7.18.6
+      '@babel/preset-typescript': 7.18.6_@babel+core@7.18.6
+      '@babel/register': 7.18.9_@babel+core@7.18.6
+      '@storybook/node-logger': 6.5.10
+      '@storybook/semver': 7.3.2
+      '@types/node': 16.11.9
+      '@types/pretty-hrtime': 1.0.1
+      babel-loader: 8.2.5_xcbjw3zjektbxpb7yraegegdpi
+      babel-plugin-macros: 3.1.0
+      babel-plugin-polyfill-corejs3: 0.1.7_@babel+core@7.18.6
+      chalk: 4.1.2
+      core-js: 3.25.0
+      express: 4.18.1
+      file-system-cache: 1.1.0
+      find-up: 5.0.0
+      fork-ts-checker-webpack-plugin: 6.5.2_nsd4r6eogdup74sdidtzttwbxi
+      fs-extra: 9.1.0
+      glob: 7.2.3
+      handlebars: 4.7.7
+      interpret: 2.2.0
+      json5: 2.2.1
+      lazy-universal-dotenv: 3.0.1
+      picomatch: 2.3.1
+      pkg-dir: 5.0.0
+      pretty-hrtime: 1.0.3
+      react: 16.14.0
+      react-dom: 16.14.0_react@16.14.0
+      resolve-from: 5.0.0
+      slash: 3.0.0
+      telejson: 6.0.8
+      ts-dedent: 2.2.0
+      typescript: 4.5.2
+      util-deprecate: 1.0.2
+      webpack: 4.46.0
+    transitivePeerDependencies:
+      - eslint
+      - supports-color
+      - vue-template-compiler
+      - webpack-cli
+      - webpack-command
+    dev: true
+
+  /@storybook/core-events/6.5.10:
+    resolution:
+      { integrity: sha512-EVb1gO1172klVIAABLOoigFMx0V88uctY0K/qVCO8n6v+wd2+0Ccn63kl+gTxsAC3WZ8XhXh9q2w5ImHklVECw== }
+    dependencies:
+      core-js: 3.25.0
+    dev: true
+
+  /@storybook/core-server/6.5.10_sk7tiidch4ak35d54sr6tbdsmy:
+    resolution:
+      { integrity: sha512-jqwpA0ccA8X5ck4esWBid04+cEIVqirdAcqJeNb9IZAD+bRreO4Im8ilzr7jc5AmQ9fkqHs2NByFKh9TITp8NQ== }
+    peerDependencies:
+      '@storybook/builder-webpack5': '*'
+      '@storybook/manager-webpack5': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+      typescript: '*'
+    peerDependenciesMeta:
+      '@storybook/builder-webpack5':
+        optional: true
+      '@storybook/manager-webpack5':
+        optional: true
+      typescript:
+        optional: true
+    dependencies:
+      '@discoveryjs/json-ext': 0.5.7
+      '@storybook/builder-webpack4': 6.5.10_sk7tiidch4ak35d54sr6tbdsmy
+      '@storybook/core-client': 6.5.10_v7xolpmq63rzdbty7huqtq5j6a
+      '@storybook/core-common': 6.5.10_sk7tiidch4ak35d54sr6tbdsmy
+      '@storybook/core-events': 6.5.10
+      '@storybook/csf': 0.0.2--canary.4566f4d.1
+      '@storybook/csf-tools': 6.5.10
+      '@storybook/manager-webpack4': 6.5.10_sk7tiidch4ak35d54sr6tbdsmy
+      '@storybook/node-logger': 6.5.10
+      '@storybook/semver': 7.3.2
+      '@storybook/store': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/telemetry': 6.5.10_sk7tiidch4ak35d54sr6tbdsmy
+      '@types/node': 16.11.9
+      '@types/node-fetch': 2.6.2
+      '@types/pretty-hrtime': 1.0.1
+      '@types/webpack': 4.41.32
+      better-opn: 2.1.1
+      boxen: 5.1.2
+      chalk: 4.1.2
+      cli-table3: 0.6.2
+      commander: 6.2.1
+      compression: 1.7.4
+      core-js: 3.25.0
+      cpy: 8.1.2
+      detect-port: 1.3.0
+      express: 4.18.1
+      fs-extra: 9.1.0
+      global: 4.4.0
+      globby: 11.1.0
+      ip: 2.0.0
+      lodash: 4.17.21
+      node-fetch: 2.6.7
+      open: 8.4.0
+      pretty-hrtime: 1.0.3
+      prompts: 2.4.2
+      react: 16.14.0
+      react-dom: 16.14.0_react@16.14.0
+      regenerator-runtime: 0.13.9
+      serve-favicon: 2.5.0
+      slash: 3.0.0
+      telejson: 6.0.8
+      ts-dedent: 2.2.0
+      typescript: 4.5.2
+      util-deprecate: 1.0.2
+      watchpack: 2.4.0
+      webpack: 4.46.0
+      ws: 8.8.1
+      x-default-browser: 0.4.0
+    transitivePeerDependencies:
+      - '@storybook/mdx2-csf'
+      - bluebird
+      - bufferutil
+      - encoding
+      - eslint
+      - supports-color
+      - utf-8-validate
+      - vue-template-compiler
+      - webpack-cli
+      - webpack-command
+    dev: true
+
+  /@storybook/core/6.5.10_mdh2ssybvg4xieq3smw3zfcquy:
+    resolution:
+      { integrity: sha512-K86yYa0tYlMxADlwQTculYvPROokQau09SCVqpsLg3wJCTvYFL4+SIqcYoyBSbFmHOdnYbJgPydjN33MYLiOZQ== }
+    peerDependencies:
+      '@storybook/builder-webpack5': '*'
+      '@storybook/manager-webpack5': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+      typescript: '*'
+      webpack: '*'
+    peerDependenciesMeta:
+      '@storybook/builder-webpack5':
+        optional: true
+      '@storybook/manager-webpack5':
+        optional: true
+      typescript:
+        optional: true
+    dependencies:
+      '@storybook/core-client': 6.5.10_mdh2ssybvg4xieq3smw3zfcquy
+      '@storybook/core-server': 6.5.10_sk7tiidch4ak35d54sr6tbdsmy
+      react: 16.14.0
+      react-dom: 16.14.0_react@16.14.0
+      typescript: 4.5.2
+      webpack: 5.72.0
+    transitivePeerDependencies:
+      - '@storybook/mdx2-csf'
+      - bluebird
+      - bufferutil
+      - encoding
+      - eslint
+      - supports-color
+      - utf-8-validate
+      - vue-template-compiler
+      - webpack-cli
+      - webpack-command
+    dev: true
+
+  /@storybook/csf-tools/6.5.10:
+    resolution:
+      { integrity: sha512-H77kZQEisu7+skzeIbNZwmE09OqLjwJTeFhLN1pcjxKVa30LEI3pBHcNBxVKqgxl+Yg3KkB7W/ArLO2N+i2ohw== }
+    peerDependencies:
+      '@storybook/mdx2-csf': ^0.0.3
+    peerDependenciesMeta:
+      '@storybook/mdx2-csf':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/generator': 7.18.13
+      '@babel/parser': 7.18.13
+      '@babel/plugin-transform-react-jsx': 7.18.10_@babel+core@7.18.6
+      '@babel/preset-env': 7.16.11_@babel+core@7.18.6
+      '@babel/traverse': 7.18.13
+      '@babel/types': 7.18.13
+      '@storybook/csf': 0.0.2--canary.4566f4d.1
+      '@storybook/mdx1-csf': 0.0.1_@babel+core@7.18.6
+      core-js: 3.25.0
+      fs-extra: 9.1.0
+      global: 4.4.0
+      regenerator-runtime: 0.13.9
+      ts-dedent: 2.2.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@storybook/csf/0.0.2--canary.4566f4d.1:
+    resolution:
+      { integrity: sha512-9OVvMVh3t9znYZwb0Svf/YQoxX2gVOeQTGe2bses2yj+a3+OJnCrUF3/hGv6Em7KujtOdL2LL+JnG49oMVGFgQ== }
+    dependencies:
+      lodash: 4.17.21
+    dev: true
+
+  /@storybook/docs-tools/6.5.10_wcqkhtmu7mswc6yz4uyexck3ty:
+    resolution:
+      { integrity: sha512-/bvYgOO+CxMEcHifkjJg0A60OTGOhcjGxnsB1h0gJuxMrqA/7Qwc108bFmPiX0eiD1BovFkZLJV4O6OY7zP5Vw== }
+    dependencies:
+      '@babel/core': 7.18.6
+      '@storybook/csf': 0.0.2--canary.4566f4d.1
+      '@storybook/store': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      core-js: 3.25.0
+      doctrine: 3.0.0
+      lodash: 4.17.21
+      regenerator-runtime: 0.13.9
+    transitivePeerDependencies:
+      - react
+      - react-dom
+      - supports-color
+    dev: true
+
+  /@storybook/manager-webpack4/6.5.10_sk7tiidch4ak35d54sr6tbdsmy:
+    resolution:
+      { integrity: sha512-N/TlNDhuhARuFipR/ZJ/xEVESz23iIbCsZ4VNehLHm8PpiGlQUehk+jMjWmz5XV0bJItwjRclY+CU3GjZKblfQ== }
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/plugin-transform-template-literals': 7.18.9_@babel+core@7.18.6
+      '@babel/preset-react': 7.18.6_@babel+core@7.18.6
+      '@storybook/addons': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/core-client': 6.5.10_v7xolpmq63rzdbty7huqtq5j6a
+      '@storybook/core-common': 6.5.10_sk7tiidch4ak35d54sr6tbdsmy
+      '@storybook/node-logger': 6.5.10
+      '@storybook/theming': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/ui': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@types/node': 16.11.9
+      '@types/webpack': 4.41.32
+      babel-loader: 8.2.5_xcbjw3zjektbxpb7yraegegdpi
+      case-sensitive-paths-webpack-plugin: 2.4.0
+      chalk: 4.1.2
+      core-js: 3.25.0
+      css-loader: 3.6.0_webpack@4.46.0
+      express: 4.18.1
+      file-loader: 6.2.0_webpack@4.46.0
+      find-up: 5.0.0
+      fs-extra: 9.1.0
+      html-webpack-plugin: 4.5.2_webpack@4.46.0
+      node-fetch: 2.6.7
+      pnp-webpack-plugin: 1.6.4_typescript@4.5.2
+      react: 16.14.0
+      react-dom: 16.14.0_react@16.14.0
+      read-pkg-up: 7.0.1
+      regenerator-runtime: 0.13.9
+      resolve-from: 5.0.0
+      style-loader: 1.3.0_webpack@4.46.0
+      telejson: 6.0.8
+      terser-webpack-plugin: 4.2.3_webpack@4.46.0
+      ts-dedent: 2.2.0
+      typescript: 4.5.2
+      url-loader: 4.1.1_lit45vopotvaqup7lrvlnvtxwy
+      util-deprecate: 1.0.2
+      webpack: 4.46.0
+      webpack-dev-middleware: 3.7.3_webpack@4.46.0
+      webpack-virtual-modules: 0.2.2
+    transitivePeerDependencies:
+      - bluebird
+      - encoding
+      - eslint
+      - supports-color
+      - vue-template-compiler
+      - webpack-cli
+      - webpack-command
+    dev: true
+
+  /@storybook/mdx1-csf/0.0.1_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-4biZIWWzoWlCarMZmTpqcJNgo/RBesYZwGFbQeXiGYsswuvfWARZnW9RE9aUEMZ4XPn7B1N3EKkWcdcWe/K2tg== }
+    dependencies:
+      '@babel/generator': 7.18.7
+      '@babel/parser': 7.18.8
+      '@babel/preset-env': 7.16.11_@babel+core@7.18.6
+      '@babel/types': 7.18.13
+      '@mdx-js/mdx': 1.6.22
+      '@types/lodash': 4.14.182
+      js-string-escape: 1.0.1
+      loader-utils: 2.0.2
+      lodash: 4.17.21
+      prettier: 2.3.0
+      ts-dedent: 2.2.0
+    transitivePeerDependencies:
+      - '@babel/core'
+      - supports-color
+    dev: true
+
+  /@storybook/mdx1-csf/0.0.4_v2wnvfwwhgapxbqqkw3slx2zde:
+    resolution:
+      { integrity: sha512-xxUEMy0D+0G1aSYxbeVNbs+XBU5nCqW4I7awpBYSTywXDv/MJWeC6FDRpj5P1pgfq8j8jWDD5ZDvBQ7syFg0LQ== }
+    dependencies:
+      '@babel/generator': 7.18.7
+      '@babel/parser': 7.18.8
+      '@babel/preset-env': 7.16.11_@babel+core@7.18.6
+      '@babel/types': 7.18.13
+      '@mdx-js/mdx': 1.6.22
+      '@mdx-js/react': 1.6.22_react@16.14.0
+      '@types/lodash': 4.14.182
+      js-string-escape: 1.0.1
+      loader-utils: 2.0.2
+      lodash: 4.17.21
+      prettier: 2.3.0
+      ts-dedent: 2.2.0
+    transitivePeerDependencies:
+      - '@babel/core'
+      - react
+      - supports-color
+    dev: true
+
+  /@storybook/node-logger/6.5.10:
+    resolution:
+      { integrity: sha512-bYswXIKV7Stru8vYfkjUMNN8UhF7Qg7NRsUvG5Djt5lLIae1XmUIgnH40mU/nW4X4BSfcR9MKxsSsngvn2WmQg== }
+    dependencies:
+      '@types/npmlog': 4.1.4
+      chalk: 4.1.2
+      core-js: 3.25.0
+      npmlog: 5.0.1
+      pretty-hrtime: 1.0.3
+    dev: true
+
+  /@storybook/postinstall/6.5.10:
+    resolution:
+      { integrity: sha512-xqUdpnFHYkn8MgtV+QztvIsRWa6jQUk7QT1Mu17Y0S7PbslNGsuskRPHenHhACXBJF+TM86R+4BaAhnVYTmElw== }
+    dependencies:
+      core-js: 3.25.0
+    dev: true
+
+  /@storybook/preview-web/6.5.10_wcqkhtmu7mswc6yz4uyexck3ty:
+    resolution:
+      { integrity: sha512-sTC/o5gkvALOtcNgtApGKGN9EavvSxRHBeBh+5BQjV2qQ8ap+26RsfUizNBECAa2Jrn4osaDYn9HRhJLFL69WA== }
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      '@storybook/addons': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/channel-postmessage': 6.5.10
+      '@storybook/client-logger': 6.5.10
+      '@storybook/core-events': 6.5.10
+      '@storybook/csf': 0.0.2--canary.4566f4d.1
+      '@storybook/store': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      ansi-to-html: 0.6.15
+      core-js: 3.25.0
+      global: 4.4.0
+      lodash: 4.17.21
+      qs: 6.11.0
+      react: 16.14.0
+      react-dom: 16.14.0_react@16.14.0
+      regenerator-runtime: 0.13.9
+      synchronous-promise: 2.0.16
+      ts-dedent: 2.2.0
+      unfetch: 4.2.0
+      util-deprecate: 1.0.2
+    dev: true
+
+  /@storybook/router/6.5.10_wcqkhtmu7mswc6yz4uyexck3ty:
+    resolution:
+      { integrity: sha512-O+vNW/eEpYFF8eCg5jZjNQ6q2DKQVxqDRPCy9pJdEbvavMDZn6AFYgVK+VJe5F4211WW2yncOu922xObCxXJYg== }
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      '@storybook/client-logger': 6.5.10
+      core-js: 3.25.0
+      memoizerific: 1.11.3
+      qs: 6.11.0
+      react: 16.14.0
+      react-dom: 16.14.0_react@16.14.0
+      regenerator-runtime: 0.13.9
+    dev: true
+
+  /@storybook/semver/7.3.2:
+    resolution:
+      { integrity: sha512-SWeszlsiPsMI0Ps0jVNtH64cI5c0UF3f7KgjVKJoNP30crQ6wUSddY2hsdeczZXEKVJGEn50Q60flcGsQGIcrg== }
+    engines: { node: '>=10' }
+    hasBin: true
+    dependencies:
+      core-js: 3.25.0
+      find-up: 4.1.0
+    dev: true
+
+  /@storybook/source-loader/6.5.10_wcqkhtmu7mswc6yz4uyexck3ty:
+    resolution:
+      { integrity: sha512-1RxxRumpjs8VUUwES9LId+cuNQnixhZAcwCxd6jaKkTZbjiQCtAhXX6DBTjJGV1u/JnCsqEp5b1wB8j/EioNHw== }
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      '@storybook/addons': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/client-logger': 6.5.10
+      '@storybook/csf': 0.0.2--canary.4566f4d.1
+      core-js: 3.25.0
+      estraverse: 5.3.0
+      global: 4.4.0
+      loader-utils: 2.0.2
+      lodash: 4.17.21
+      prettier: 2.3.0
+      react: 16.14.0
+      react-dom: 16.14.0_react@16.14.0
+      regenerator-runtime: 0.13.9
+    dev: true
+
+  /@storybook/store/6.5.10_wcqkhtmu7mswc6yz4uyexck3ty:
+    resolution:
+      { integrity: sha512-RswrSYh2IiKkytFPxP9AvP+hekjrvHK2ILvyDk2ZgduCN4n5ivsekOb+N3M2t+dq1eLuW9or5n2T4OWwAwjxxQ== }
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      '@storybook/addons': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/client-logger': 6.5.10
+      '@storybook/core-events': 6.5.10
+      '@storybook/csf': 0.0.2--canary.4566f4d.1
+      core-js: 3.25.0
+      fast-deep-equal: 3.1.3
+      global: 4.4.0
+      lodash: 4.17.21
+      memoizerific: 1.11.3
+      react: 16.14.0
+      react-dom: 16.14.0_react@16.14.0
+      regenerator-runtime: 0.13.9
+      slash: 3.0.0
+      stable: 0.1.8
+      synchronous-promise: 2.0.16
+      ts-dedent: 2.2.0
+      util-deprecate: 1.0.2
+    dev: true
+
+  /@storybook/telemetry/6.5.10_sk7tiidch4ak35d54sr6tbdsmy:
+    resolution:
+      { integrity: sha512-+M5HILDFS8nDumLxeSeAwi1MTzIuV6UWzV4yB2wcsEXOBTdplcl9oYqFKtlst78oOIdGtpPYxYfivDlqxC2K4g== }
+    dependencies:
+      '@storybook/client-logger': 6.5.10
+      '@storybook/core-common': 6.5.10_sk7tiidch4ak35d54sr6tbdsmy
+      chalk: 4.1.2
+      core-js: 3.25.0
+      detect-package-manager: 2.0.1
+      fetch-retry: 5.0.3
+      fs-extra: 9.1.0
+      global: 4.4.0
+      isomorphic-unfetch: 3.1.0
+      nanoid: 3.3.4
+      read-pkg-up: 7.0.1
+      regenerator-runtime: 0.13.9
+    transitivePeerDependencies:
+      - encoding
+      - eslint
+      - react
+      - react-dom
+      - supports-color
+      - typescript
+      - vue-template-compiler
+      - webpack-cli
+      - webpack-command
+    dev: true
+
+  /@storybook/theming/6.5.10_wcqkhtmu7mswc6yz4uyexck3ty:
+    resolution:
+      { integrity: sha512-BvTQBBcSEwKKcsVmF+Ol6v0RIQUr+bxP7gb10wtfBd23mZTEFA0C1N5FnZr/dDeiBKG1pvf1UKvoYA731y0BsA== }
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      '@storybook/client-logger': 6.5.10
+      core-js: 3.25.0
+      memoizerific: 1.11.3
+      react: 16.14.0
+      react-dom: 16.14.0_react@16.14.0
+      regenerator-runtime: 0.13.9
+    dev: true
+
+  /@storybook/ui/6.5.10_wcqkhtmu7mswc6yz4uyexck3ty:
+    resolution:
+      { integrity: sha512-6iaoaRAiTqB1inTw35vao+5hjcDE0Qa0A3a9ZIeNa6yHvpB1k0lO/N/0PMrRdVvySYpXVD1iry4z4QYdo1rU+w== }
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      '@storybook/addons': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/api': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/channels': 6.5.10
+      '@storybook/client-logger': 6.5.10
+      '@storybook/components': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/core-events': 6.5.10
+      '@storybook/router': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/semver': 7.3.2
+      '@storybook/theming': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      core-js: 3.25.0
+      memoizerific: 1.11.3
+      qs: 6.11.0
+      react: 16.14.0
+      react-dom: 16.14.0_react@16.14.0
+      regenerator-runtime: 0.13.9
+      resolve-from: 5.0.0
+    dev: true
+
+  /@storybook/vue3/6.5.10_ozji4kp7bdtbjefnvy5lbyf6p4:
+    resolution:
+      { integrity: sha512-pIPiEeKrBLlJkkruzcLCmz1Mbku9wFEsNMlQaw0gPB/GuhZOf2xcoWxogfC2Yw2raUHZMQ5jO2rXAimtbrzq5g== }
+    engines: { node: '>=10.13.0' }
+    hasBin: true
+    peerDependencies:
+      '@babel/core': '*'
+      '@vue/compiler-sfc': ^3.0.0
+      babel-loader: ^7.0.0 || ^8.0.0
+      vue: ^3.0.0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@storybook/addons': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/core': 6.5.10_mdh2ssybvg4xieq3smw3zfcquy
+      '@storybook/core-common': 6.5.10_sk7tiidch4ak35d54sr6tbdsmy
+      '@storybook/csf': 0.0.2--canary.4566f4d.1
+      '@storybook/docs-tools': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@storybook/store': 6.5.10_wcqkhtmu7mswc6yz4uyexck3ty
+      '@types/node': 16.11.9
+      '@types/webpack-env': 1.18.0
+      '@vue/compiler-sfc': 3.2.31
+      babel-loader: 8.2.5_hdaic33o4wf65p5shr3xepeg4m
+      core-js: 3.25.0
+      global: 4.4.0
+      react: 16.14.0
+      react-dom: 16.14.0_react@16.14.0
+      read-pkg-up: 7.0.1
+      regenerator-runtime: 0.13.9
+      ts-dedent: 2.2.0
+      ts-loader: 8.4.0_x3ag2alrxtrovqdhtvz743erxe
+      vue: 3.2.37
+      vue-docgen-api: 4.52.0_vue@3.2.37
+      vue-docgen-loader: 1.5.1_sx2vwv4fhewfcfcbfmmreozr6y
+      vue-loader: 16.8.3_6oodguqmvfajneapkegdgbg6h4
+      webpack: 5.72.0
+    transitivePeerDependencies:
+      - '@babel/preset-env'
+      - '@storybook/builder-webpack5'
+      - '@storybook/manager-webpack5'
+      - '@storybook/mdx2-csf'
+      - '@swc/core'
+      - bluebird
+      - bufferutil
+      - encoding
+      - esbuild
+      - eslint
+      - supports-color
+      - typescript
+      - uglify-js
+      - utf-8-validate
+      - vue-template-compiler
+      - webpack-cli
+      - webpack-command
+    dev: true
+
   /@szmarczak/http-timer/4.0.6:
     resolution:
       { integrity: sha512-4BAffykYOgO+5nzBWYwE3W90sBgLJoUPRWWcL8wlyiM8IB8ipJz3UMJ9KXQd1RKQXpKp8Tutn80HZtWsu2u76w== }
@@ -3729,26 +6807,26 @@ packages:
     resolution:
       { integrity: sha512-WEOTgRsbYkvA/KCsDwVEGkd7WAr1e3g31VHQ8zy5gul/V1qKullU/BU5I68X5v7V3GnB9eotmom4v5a5gjxorw== }
     dependencies:
-      '@babel/parser': 7.18.8
-      '@babel/types': 7.18.8
+      '@babel/parser': 7.18.13
+      '@babel/types': 7.18.13
       '@types/babel__generator': 7.6.4
       '@types/babel__template': 7.4.1
-      '@types/babel__traverse': 7.17.1
+      '@types/babel__traverse': 7.18.1
     dev: true
 
   /@types/babel__generator/7.6.4:
     resolution:
       { integrity: sha512-tFkciB9j2K755yrTALxD44McOrk+gfpIpvC3sxHjRawj6PfnQxrse4Clq5y/Rq+G3mrBurMax/lG8Qn2t9mSsg== }
     dependencies:
-      '@babel/types': 7.18.8
+      '@babel/types': 7.18.13
     dev: true
 
   /@types/babel__template/7.4.1:
     resolution:
       { integrity: sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g== }
     dependencies:
-      '@babel/parser': 7.18.8
-      '@babel/types': 7.18.8
+      '@babel/parser': 7.18.13
+      '@babel/types': 7.18.13
     dev: true
 
   /@types/babel__traverse/7.17.1:
@@ -3758,6 +6836,13 @@ packages:
       '@babel/types': 7.18.8
     dev: true
 
+  /@types/babel__traverse/7.18.1:
+    resolution:
+      { integrity: sha512-FSdLaZh2UxaMuLp9lixWaHq/golWTRWOnRsAXzDTDSDOQLuZb1nsdCt6pJSPWSEQt2eFZ2YVk3oYhn+1kLMeMA== }
+    dependencies:
+      '@babel/types': 7.18.13
+    dev: true
+
   /@types/base-64/1.0.0:
     resolution:
       { integrity: sha512-AvCJx/HrfYHmOQRFdVvgKMplXfzTUizmh0tz9GFTpDePWgCY4uoKll84zKlaRoeiYiCr7c9ZnqSTzkl0BUVD6g== }
@@ -3917,10 +7002,31 @@ packages:
       { integrity: sha512-iO2Q6xQOJ5DtOB6wJ2KIetFq9JRTbpzcKTe2aS6CCsa+W9KNWX2yXx9KeB5sY/nBfAWN43LkPg6SFB+ldsW9ZA== }
     dev: true
 
+  /@types/eslint-scope/3.7.4:
+    resolution:
+      { integrity: sha512-9K4zoImiZc3HlIp6AVUDE4CWYx22a+lhSZMYNpbjW04+YF0KWj4pJXnEMjdnFTiQibFFmElcsasJXDbdI/EPhA== }
+    dependencies:
+      '@types/eslint': 8.4.6
+      '@types/estree': 1.0.0
+    dev: true
+
+  /@types/eslint/8.4.6:
+    resolution:
+      { integrity: sha512-/fqTbjxyFUaYNO7VcW5g+4npmqVACz1bB7RTHYuLj+PRjw9hrCwrUXVQFpChUS0JsyEFvMZ7U/PfmvWgxJhI9g== }
+    dependencies:
+      '@types/estree': 1.0.0
+      '@types/json-schema': 7.0.11
+    dev: true
+
   /@types/estree/0.0.39:
     resolution:
       { integrity: sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw== }
 
+  /@types/estree/0.0.51:
+    resolution:
+      { integrity: sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ== }
+    dev: true
+
   /@types/estree/1.0.0:
     resolution:
       { integrity: sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ== }
@@ -3993,11 +7099,39 @@ packages:
       { integrity: sha512-1rkryxURpr6aWP7R786/UQOkJ3PcpQiWkAXBmdWc7ryFWqN6a4xfK7BtjXvFBKO9LjQ+MWQSWxYeZX1OApnArA== }
     dev: true
 
+  /@types/glob/7.2.0:
+    resolution:
+      { integrity: sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA== }
+    dependencies:
+      '@types/minimatch': 5.1.2
+      '@types/node': 18.0.4
+    dev: true
+
+  /@types/glob/8.0.0:
+    resolution:
+      { integrity: sha512-l6NQsDDyQUVeoTynNpC9uRvCUint/gSUXQA2euwmTuWGvPY5LSDUu6tkCtJB2SvGQlJQzLaKqcGZP4//7EDveA== }
+    dependencies:
+      '@types/minimatch': 5.1.2
+      '@types/node': 18.0.4
+    dev: true
+
   /@types/graceful-fs/4.1.5:
     resolution:
       { integrity: sha512-anKkLmZZ+xm4p8JWBf4hElkM4XR+EZeA2M9BAkkTldmcyDY4mbdIJnRghDJH3Ov5ooY7/UAoENtmdMSkaAd7Cw== }
     dependencies:
-      '@types/node': 16.11.9
+      '@types/node': 18.7.14
+    dev: true
+
+  /@types/hast/2.3.4:
+    resolution:
+      { integrity: sha512-wLEm0QvaoawEDoTRwzTXp4b4jpwiJDvR5KMnFnVodm3scufTlBOWRD6N1OBf9TZMhjlNsSfcO5V+7AF4+Vy+9g== }
+    dependencies:
+      '@types/unist': 2.0.6
+    dev: true
+
+  /@types/html-minifier-terser/5.1.2:
+    resolution:
+      { integrity: sha512-h4lTMgMJctJybDp8CQrxTUiiYmedihHWkjnF/8Pxseu2S6Nlfcy8kwboQ8yejh456rP2yWoEVm1sS/FVsfM48w== }
     dev: true
 
   /@types/http-cache-semantics/4.0.1:
@@ -4020,6 +7154,11 @@ packages:
       '@types/node': 16.11.9
     dev: true
 
+  /@types/is-function/1.0.1:
+    resolution:
+      { integrity: sha512-A79HEEiwXTFtfY+Bcbo58M2GRYzCr9itHWzbzHVFNEYCcoU/MMGwYYf721gBrnhpj1s6RGVVha/IgNFnR0Iw/Q== }
+    dev: true
+
   /@types/istanbul-lib-coverage/2.0.4:
     resolution:
       { integrity: sha512-z/QT1XN4K4KYuslS23k62yDIDLwLFkzxOuMplDtObz0+y7VqJCaO2o+SPwHCvLFZh7xazvvoor2tA/hPz9ee7g== }
@@ -4106,7 +7245,7 @@ packages:
     resolution:
       { integrity: sha512-+MWvidNujBUgJsi4yMVwEQQwaHe6oHedPSy+dwk3akGEeuIbvhWkK+TGsXSwbFup7Y0cCBb+wzzdD+yGKp7sOg== }
     dependencies:
-      '@types/node': 18.0.4
+      '@types/node': 18.7.14
       rxjs: 6.6.7
     dev: true
 
@@ -4120,6 +7259,11 @@ packages:
       { integrity: sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q== }
     dev: true
 
+  /@types/lodash/4.14.184:
+    resolution:
+      { integrity: sha512-RoZphVtHbxPZizt4IcILciSWiC6dcn+eZ8oX9IWEYfDMcocdd42f7NPI6fQj+6zI8y4E0L7gu2pcZKLGTRaV9Q== }
+    dev: true
+
   /@types/mapbox-gl/2.7.3:
     resolution:
       { integrity: sha512-XdveeJptNNZw7ZoeiAJ2/dupNtWaV6qpBG/SOFEpQNQAc+oiO6qUznX85n+W1XbLeD8SVRVfVORKuR+I4CHDZw== }
@@ -4161,6 +7305,13 @@ packages:
       { integrity: sha512-HnMWQkLJEf/PnxZIfbm0yGJRRZYYMhb++O9M36UCTA9z53uPvVoSlAwJr3XOpDEryb7Hwl1qAx/MV6YIW1RXxg== }
     dev: true
 
+  /@types/mdast/3.0.10:
+    resolution:
+      { integrity: sha512-W864tg/Osz1+9f4lrGTZpCSO5/z4608eUp19tbozkq2HJK6i3z1kT0H9tlADXuYIb1YYOBByU4Jsqkk75q48qA== }
+    dependencies:
+      '@types/unist': 2.0.6
+    dev: true
+
   /@types/mdurl/1.0.2:
     resolution:
       { integrity: sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA== }
@@ -4181,6 +7332,11 @@ packages:
       { integrity: sha512-Jus9s4CDbqwocc5pOAnh8ShfrnMcPHuJYzVcSUU7lrh8Ni5HuIqX3oilL86p3dlTrk0LzHRCgA/GQ7uNCw6l2Q== }
     dev: true
 
+  /@types/minimatch/5.1.2:
+    resolution:
+      { integrity: sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA== }
+    dev: true
+
   /@types/minimist/1.2.2:
     resolution:
       { integrity: sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ== }
@@ -4218,6 +7374,11 @@ packages:
     resolution:
       { integrity: sha512-M0+G6V0Y4YV8cqzHssZpaNCqvYwlCiulmm0PwpNLF55r/+cT8Ol42CHRU1SEaYFH2rTwiiE1aYg/2g2rrtGdPA== }
 
+  /@types/node/18.7.14:
+    resolution:
+      { integrity: sha512-6bbDaETVi8oyIARulOE9qF1/Qdi/23z6emrUh0fNJRUmjznqrixD4MpGDdgOFk5Xb0m2H6Xu42JGdvAxaJR/wA== }
+    dev: true
+
   /@types/node/8.10.66:
     resolution:
       { integrity: sha512-tktOkFUA4kXx2hhhrB8bIFb5TbwzS4uOhKEmwiD+NoiL0qtP2OQ9mFldbgD4dV1djrlBYP6eBuQZiWjuHUpqFw== }
@@ -4240,6 +7401,11 @@ packages:
       { integrity: sha512-Nd8y/5t/7CRakPYiyPzr/IAfYusy1FkcZYFEAcoMZkwpJv2n4Wm+olW+e7xBdHEXhOnWdG9ddbar0gqZWS4x5Q== }
     dev: true
 
+  /@types/npmlog/4.1.4:
+    resolution:
+      { integrity: sha512-WKG4gTr8przEZBiJ5r3s8ZIAoMXNbOgQ+j/d5O4X3x6kZJRLNvyUJuUK/KoG3+8BaOHPhp2m7WC6JKKeovDSzQ== }
+    dev: true
+
   /@types/object-hash/2.2.1:
     resolution:
       { integrity: sha512-i/rtaJFCsPljrZvP/akBqEwUP2y5cZLOmvO+JaYnz01aPknrQ+hB5MRcO7iqCUsFaYfTG8kGfKUyboA07xeDHQ== }
@@ -4248,7 +7414,11 @@ packages:
   /@types/parse-json/4.0.0:
     resolution:
       { integrity: sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA== }
-    dev: false
+
+  /@types/parse5/5.0.3:
+    resolution:
+      { integrity: sha512-kUNnecmtkunAoQ3CnjmMkzNU/gtxG8guhi+Fk2U/kOpIKjIMKnXGp4IJCgQJrXSgMsWYimYG4TGjz/UzbGEBTw== }
+    dev: true
 
   /@types/pino-http/5.8.1:
     resolution:
@@ -4287,6 +7457,16 @@ packages:
       { integrity: sha512-ymZk3LEC/fsut+/Q5qejp6R9O1rMxz3XaRHDV6kX8MrGAhOSPqVARbDi+EZvInBpw+BnCX3TD240byVkOfQsHg== }
     dev: true
 
+  /@types/prettier/2.7.0:
+    resolution:
+      { integrity: sha512-RI1L7N4JnW5gQw2spvL7Sllfuf1SaHdrZpCHiBlCXjIlufi1SMNnbu2teze3/QE67Fg2tBlH7W+mi4hVNk4p0A== }
+    dev: true
+
+  /@types/pretty-hrtime/1.0.1:
+    resolution:
+      { integrity: sha512-VjID5MJb1eGKthz2qUerWT8+R4b9N+CHvGCzg9fn4kWZgaF9AhdYikQio3R7wV8YY1NsQKPaCwKz1Yff+aHNUQ== }
+    dev: true
+
   /@types/qrcode/1.4.1:
     resolution:
       { integrity: sha512-vxMyr7JM7tYPxu8vUE83NiosWX5DZieCyYeJRoOIg0pAkyofCBzknJ2ycUZkPGDFis2RS8GN/BeJLnRnAPxeCA== }
@@ -4345,6 +7525,11 @@ packages:
       '@types/node': 16.11.9
     dev: true
 
+  /@types/source-list-map/0.1.2:
+    resolution:
+      { integrity: sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA== }
+    dev: true
+
   /@types/stack-utils/2.0.1:
     resolution:
       { integrity: sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw== }
@@ -4386,7 +7571,7 @@ packages:
       { integrity: sha512-mu/N4uvfDN2zVQQ5AYJI/g4qxn2bHB6521t1UuH09ShNWjebTqN0ZFuYK9uYjcgmI0dTQEs+Owi1EO6U0OkOZQ== }
     dependencies:
       '@types/cookiejar': 2.1.2
-      '@types/node': 16.11.9
+      '@types/node': 18.7.14
     dev: true
 
   /@types/supertest/2.0.12:
@@ -4396,6 +7581,11 @@ packages:
       '@types/superagent': 4.1.15
     dev: true
 
+  /@types/tapable/1.0.8:
+    resolution:
+      { integrity: sha512-ipixuVrh2OdNmauvtT51o3d8z12p6LtFW9in7U79der/kwejjdNchQC5UMn5u/KxNoM7VHHOs/l8KS8uHxhODQ== }
+    dev: true
+
   /@types/tern/0.23.4:
     resolution:
       { integrity: sha512-JAUw1iXGO1qaWwEOzxTKJZ/5JxVeON9kvGZ/osgZaJImBnyjyn0cjovPsf6FNLmyGY8Vw9DoXZCMlfMkMwHRWg== }
@@ -4431,6 +7621,18 @@ packages:
       { integrity: sha512-XLD/llTSB6EBe3thkN+/I0L+yCTB6sjrcVovQdx2Cnl6N6bTzHmwe/J8mWnsXFgxLrj/emzdv8IR4evKYG2qxQ== }
     dev: true
 
+  /@types/uglify-js/3.17.0:
+    resolution:
+      { integrity: sha512-3HO6rm0y+/cqvOyA8xcYLweF0TKXlAxmQASjbOi49Co51A1N4nR4bEwBgRoD9kNM+rqFGArjKr654SLp2CoGmQ== }
+    dependencies:
+      source-map: 0.6.1
+    dev: true
+
+  /@types/unist/2.0.6:
+    resolution:
+      { integrity: sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ== }
+    dev: true
+
   /@types/uuid-validate/0.0.1:
     resolution:
       { integrity: sha512-RbX9q0U00SLoV+l7loYX0Wrtv4QTClBC0QcdNts6x2b5G1HJN8NI9YlS1HNA6THrI9EH3OXSgya6eMQIlDjKFA== }
@@ -4441,6 +7643,32 @@ packages:
       { integrity: sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw== }
     dev: true
 
+  /@types/webpack-env/1.18.0:
+    resolution:
+      { integrity: sha512-56/MAlX5WMsPVbOg7tAxnYvNYMMWr/QJiIp6BxVSW3JJXUVzzOn64qW8TzQyMSqSUFM2+PVI4aUHcHOzIz/1tg== }
+    dev: true
+
+  /@types/webpack-sources/3.2.0:
+    resolution:
+      { integrity: sha512-Ft7YH3lEVRQ6ls8k4Ff1oB4jN6oy/XmU6tQISKdhfh+1mR+viZFphS6WL0IrtDOzvefmJg5a0s7ZQoRXwqTEFg== }
+    dependencies:
+      '@types/node': 18.0.4
+      '@types/source-list-map': 0.1.2
+      source-map: 0.7.4
+    dev: true
+
+  /@types/webpack/4.41.32:
+    resolution:
+      { integrity: sha512-cb+0ioil/7oz5//7tZUSwbrSAN/NWHrQylz5cW8G0dWTcF/g+/dSdMlKVZspBYuMAN1+WnwHrkxiRrLcwd0Heg== }
+    dependencies:
+      '@types/node': 18.0.4
+      '@types/tapable': 1.0.8
+      '@types/uglify-js': 3.17.0
+      '@types/webpack-sources': 3.2.0
+      anymatch: 3.1.2
+      source-map: 0.6.1
+    dev: true
+
   /@types/wellknown/0.5.1:
     resolution:
       { integrity: sha512-Q654r/2cjmh4XdFcZbRUKrY9Z3KmJJhXGQ4snwjWJCNrDNsNCJRaKQZRd/KPJaNGC0gZUxcmAu7184JpDX2Sjw== }
@@ -4456,6 +7684,13 @@ packages:
       { integrity: sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA== }
     dev: true
 
+  /@types/yargs/15.0.14:
+    resolution:
+      { integrity: sha512-yEJzHoxf6SyQGhBhIYGXQDSCkJjB6HohDShto7m8vaKg9Yp0Yn8+71J9eakh2bnPg6BfsH9PRMhiRTZnd4eXGQ== }
+    dependencies:
+      '@types/yargs-parser': 21.0.0
+    dev: true
+
   /@types/yargs/16.0.4:
     resolution:
       { integrity: sha512-T8Yc9wt/5LbJyCaLiHPReJa0kApcIgJ7Bn735GjItUfh08Z1pJvu8QZqb9s+mMvKV6WUQRV7K2R46YbjMXTTJw== }
@@ -4463,16 +7698,16 @@ packages:
       '@types/yargs-parser': 21.0.0
     dev: true
 
-  /@types/yargs/17.0.10:
+  /@types/yargs/17.0.12:
     resolution:
-      { integrity: sha512-gmEaFwpj/7f/ROdtIlci1R1VYU1J4j95m8T+Tj3iBgiBFKg1foE/PSl93bBd5T9LDXNPo8UlNN6W0qwD8O5OaA== }
+      { integrity: sha512-Nz4MPhecOFArtm81gFQvQqdV7XYCrWKx5uUt6GNHredFHn1i2mtWqXTON7EPXMtNi1qjtjEM/VCHDhcHsAMLXQ== }
     dependencies:
       '@types/yargs-parser': 21.0.0
     dev: true
 
-  /@typescript-eslint/eslint-plugin/5.30.6_2vt5mtrqleafs33qg2bhpmbaqm:
+  /@typescript-eslint/eslint-plugin/5.36.1_lbwfnm54o3pmr3ypeqp3btnera:
     resolution:
-      { integrity: sha512-J4zYMIhgrx4MgnZrSDD7sEnQp7FmhKNOaqaOpaoQ/SfdMfRB/0yvK74hTnvH+VQxndZynqs5/Hn4t+2/j9bADg== }
+      { integrity: sha512-iC40UK8q1tMepSDwiLbTbMXKDxzNy+4TfPWgIL661Ym0sD42vRcQU93IsZIrmi+x292DBr60UI/gSwfdVYexCA== }
     engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 }
     peerDependencies:
       '@typescript-eslint/parser': ^5.0.0
@@ -4482,25 +7717,25 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.30.6_4x5o4skxv6sl53vpwefgt23khm
-      '@typescript-eslint/scope-manager': 5.30.6
-      '@typescript-eslint/type-utils': 5.30.6_4x5o4skxv6sl53vpwefgt23khm
-      '@typescript-eslint/utils': 5.30.6_4x5o4skxv6sl53vpwefgt23khm
+      '@typescript-eslint/parser': 5.36.1_yqf6kl63nyoq5megxukfnom5rm
+      '@typescript-eslint/scope-manager': 5.36.1
+      '@typescript-eslint/type-utils': 5.36.1_yqf6kl63nyoq5megxukfnom5rm
+      '@typescript-eslint/utils': 5.36.1_yqf6kl63nyoq5megxukfnom5rm
       debug: 4.3.4
-      eslint: 8.19.0
+      eslint: 8.23.0
       functional-red-black-tree: 1.0.1
       ignore: 5.2.0
       regexpp: 3.2.0
       semver: 7.3.7
-      tsutils: 3.21.0_typescript@4.7.4
-      typescript: 4.7.4
+      tsutils: 3.21.0_typescript@4.8.2
+      typescript: 4.8.2
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/parser/5.30.6_4x5o4skxv6sl53vpwefgt23khm:
+  /@typescript-eslint/parser/5.36.1_yqf6kl63nyoq5megxukfnom5rm:
     resolution:
-      { integrity: sha512-gfF9lZjT0p2ZSdxO70Xbw8w9sPPJGfAdjK7WikEjB3fcUI/yr9maUVEdqigBjKincUYNKOmf7QBMiTf719kbrA== }
+      { integrity: sha512-/IsgNGOkBi7CuDfUbwt1eOqUXF9WGVBW9dwEe1pi+L32XrTsZIgmDFIi2RxjzsvB/8i+MIf5JIoTEH8LOZ368A== }
     engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 }
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
@@ -4509,28 +7744,28 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/scope-manager': 5.30.6
-      '@typescript-eslint/types': 5.30.6
-      '@typescript-eslint/typescript-estree': 5.30.6_typescript@4.7.4
+      '@typescript-eslint/scope-manager': 5.36.1
+      '@typescript-eslint/types': 5.36.1
+      '@typescript-eslint/typescript-estree': 5.36.1_typescript@4.8.2
       debug: 4.3.4
-      eslint: 8.19.0
-      typescript: 4.7.4
+      eslint: 8.23.0
+      typescript: 4.8.2
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/scope-manager/5.30.6:
+  /@typescript-eslint/scope-manager/5.36.1:
     resolution:
-      { integrity: sha512-Hkq5PhLgtVoW1obkqYH0i4iELctEKixkhWLPTYs55doGUKCASvkjOXOd/pisVeLdO24ZX9D6yymJ/twqpJiG3g== }
+      { integrity: sha512-pGC2SH3/tXdu9IH3ItoqciD3f3RRGCh7hb9zPdN2Drsr341zgd6VbhP5OHQO/reUqihNltfPpMpTNihFMarP2w== }
     engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 }
     dependencies:
-      '@typescript-eslint/types': 5.30.6
-      '@typescript-eslint/visitor-keys': 5.30.6
+      '@typescript-eslint/types': 5.36.1
+      '@typescript-eslint/visitor-keys': 5.36.1
     dev: true
 
-  /@typescript-eslint/type-utils/5.30.6_4x5o4skxv6sl53vpwefgt23khm:
+  /@typescript-eslint/type-utils/5.36.1_yqf6kl63nyoq5megxukfnom5rm:
     resolution:
-      { integrity: sha512-GFVVzs2j0QPpM+NTDMXtNmJKlF842lkZKDSanIxf+ArJsGeZUIaeT4jGg+gAgHt7AcQSFwW7htzF/rbAh2jaVA== }
+      { integrity: sha512-xfZhfmoQT6m3lmlqDvDzv9TiCYdw22cdj06xY0obSznBsT///GK5IEZQdGliXpAOaRL34o8phEvXzEo/VJx13Q== }
     engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 }
     peerDependencies:
       eslint: '*'
@@ -4539,24 +7774,25 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/utils': 5.30.6_4x5o4skxv6sl53vpwefgt23khm
+      '@typescript-eslint/typescript-estree': 5.36.1_typescript@4.8.2
+      '@typescript-eslint/utils': 5.36.1_yqf6kl63nyoq5megxukfnom5rm
       debug: 4.3.4
-      eslint: 8.19.0
-      tsutils: 3.21.0_typescript@4.7.4
-      typescript: 4.7.4
+      eslint: 8.23.0
+      tsutils: 3.21.0_typescript@4.8.2
+      typescript: 4.8.2
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/types/5.30.6:
+  /@typescript-eslint/types/5.36.1:
     resolution:
-      { integrity: sha512-HdnP8HioL1F7CwVmT4RaaMX57RrfqsOMclZc08wGMiDYJBsLGBM7JwXM4cZJmbWLzIR/pXg1kkrBBVpxTOwfUg== }
+      { integrity: sha512-jd93ShpsIk1KgBTx9E+hCSEuLCUFwi9V/urhjOWnOaksGZFbTOxAT47OH2d4NLJnLhkVD+wDbB48BuaycZPLBg== }
     engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 }
     dev: true
 
-  /@typescript-eslint/typescript-estree/5.30.6_typescript@4.7.4:
+  /@typescript-eslint/typescript-estree/5.36.1_typescript@4.8.2:
     resolution:
-      { integrity: sha512-Z7TgPoeYUm06smfEfYF0RBkpF8csMyVnqQbLYiGgmUSTaSXTP57bt8f0UFXstbGxKIreTwQCujtaH0LY9w9B+A== }
+      { integrity: sha512-ih7V52zvHdiX6WcPjsOdmADhYMDN15SylWRZrT2OMy80wzKbc79n8wFW0xpWpU0x3VpBz/oDgTm2xwDAnFTl+g== }
     engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 }
     peerDependencies:
       typescript: '*'
@@ -4564,46 +7800,63 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/types': 5.30.6
-      '@typescript-eslint/visitor-keys': 5.30.6
+      '@typescript-eslint/types': 5.36.1
+      '@typescript-eslint/visitor-keys': 5.36.1
       debug: 4.3.4
       globby: 11.1.0
       is-glob: 4.0.3
       semver: 7.3.7
-      tsutils: 3.21.0_typescript@4.7.4
-      typescript: 4.7.4
+      tsutils: 3.21.0_typescript@4.8.2
+      typescript: 4.8.2
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/utils/5.30.6_4x5o4skxv6sl53vpwefgt23khm:
+  /@typescript-eslint/utils/5.36.1_yqf6kl63nyoq5megxukfnom5rm:
     resolution:
-      { integrity: sha512-xFBLc/esUbLOJLk9jKv0E9gD/OH966M40aY9jJ8GiqpSkP2xOV908cokJqqhVd85WoIvHVHYXxSFE4cCSDzVvA== }
+      { integrity: sha512-lNj4FtTiXm5c+u0pUehozaUWhh7UYKnwryku0nxJlYUEWetyG92uw2pr+2Iy4M/u0ONMKzfrx7AsGBTCzORmIg== }
     engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 }
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
       '@types/json-schema': 7.0.11
-      '@typescript-eslint/scope-manager': 5.30.6
-      '@typescript-eslint/types': 5.30.6
-      '@typescript-eslint/typescript-estree': 5.30.6_typescript@4.7.4
-      eslint: 8.19.0
+      '@typescript-eslint/scope-manager': 5.36.1
+      '@typescript-eslint/types': 5.36.1
+      '@typescript-eslint/typescript-estree': 5.36.1_typescript@4.8.2
+      eslint: 8.23.0
       eslint-scope: 5.1.1
-      eslint-utils: 3.0.0_eslint@8.19.0
+      eslint-utils: 3.0.0_eslint@8.23.0
     transitivePeerDependencies:
       - supports-color
       - typescript
     dev: true
 
-  /@typescript-eslint/visitor-keys/5.30.6:
+  /@typescript-eslint/visitor-keys/5.36.1:
     resolution:
-      { integrity: sha512-41OiCjdL2mCaSDi2SvYbzFLlqqlm5v1ZW9Ym55wXKL/Rx6OOB1IbuFGo71Fj6Xy90gJDFTlgOS+vbmtGHPTQQA== }
+      { integrity: sha512-ojB9aRyRFzVMN3b5joSYni6FAS10BBSCAfKJhjJAV08t/a95aM6tAhz+O1jF+EtgxktuSO3wJysp2R+Def/IWQ== }
     engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 }
     dependencies:
-      '@typescript-eslint/types': 5.30.6
+      '@typescript-eslint/types': 5.36.1
       eslint-visitor-keys: 3.3.0
     dev: true
 
+  /@vitejs/plugin-react/1.3.2:
+    resolution:
+      { integrity: sha512-aurBNmMo0kz1O4qRoY+FM4epSA39y3ShWGuqfLRA/3z0oEJAdtoSfgA3aO98/PCCHAqMaduLxIxErWrVKIFzXA== }
+    engines: { node: '>=12.0.0' }
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/plugin-transform-react-jsx': 7.18.10_@babel+core@7.18.6
+      '@babel/plugin-transform-react-jsx-development': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-react-jsx-self': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-react-jsx-source': 7.18.6_@babel+core@7.18.6
+      '@rollup/pluginutils': 4.2.1
+      react-refresh: 0.13.0
+      resolve: 1.22.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@vitejs/plugin-vue/2.3.3_vite@2.9.9+vue@3.2.36:
     resolution:
       { integrity: sha512-SmQLDyhz+6lGJhPELsBdzXGc+AcaT8stgkbiTFGpXPe8Tl1tJaBw1A6pxDqDuRsVkD8uscrkx3hA7QDOoKYtyw== }
@@ -4616,6 +7869,69 @@ packages:
       vue: 3.2.36
     dev: true
 
+  /@vitejs/plugin-vue/2.3.3_vite@2.9.9+vue@3.2.37:
+    resolution:
+      { integrity: sha512-SmQLDyhz+6lGJhPELsBdzXGc+AcaT8stgkbiTFGpXPe8Tl1tJaBw1A6pxDqDuRsVkD8uscrkx3hA7QDOoKYtyw== }
+    engines: { node: '>=12.0.0' }
+    peerDependencies:
+      vite: ^2.5.10
+      vue: ^3.2.25
+    dependencies:
+      vite: 2.9.9
+      vue: 3.2.37
+    dev: true
+
+  /@vitest/ui/0.22.1:
+    resolution:
+      { integrity: sha512-iiM2JN+vzY8pEejUbPPi0EgkEselI3RvrgMPNUOalxQRgtlNVGyMsM0Re99xQsrZ/eBkHgWrlW216gNDoeD5cA== }
+    dependencies:
+      sirv: 2.0.2
+    dev: true
+
+  /@volar/code-gen/0.34.17:
+    resolution:
+      { integrity: sha512-rHR7BA71BJ/4S7xUOPMPiB7uk6iU9oTWpEMZxFi5VGC9iJmDncE82WzU5iYpcbOBCVHsOjMh0+5CGMgdO6SaPA== }
+    dependencies:
+      '@volar/source-map': 0.34.17
+    dev: true
+
+  /@volar/source-map/0.34.17:
+    resolution:
+      { integrity: sha512-3yn1IMXJGGWB/G817/VFlFMi8oh5pmE7VzUqvgMZMrppaZpKj6/juvJIEiXNxRsgWc0RxIO8OSp4htdPUg1Raw== }
+    dev: true
+
+  /@volar/vue-code-gen/0.34.17:
+    resolution:
+      { integrity: sha512-17pzcK29fyFWUc+C82J3JYSnA+jy3QNrIldb9kPaP9Itbik05ZjEIyEue9FjhgIAuHeYSn4LDM5s6nGjxyfhsQ== }
+    dependencies:
+      '@volar/code-gen': 0.34.17
+      '@volar/source-map': 0.34.17
+      '@vue/compiler-core': 3.2.37
+      '@vue/compiler-dom': 3.2.37
+      '@vue/shared': 3.2.37
+    dev: true
+
+  /@volar/vue-typescript/0.34.17:
+    resolution:
+      { integrity: sha512-U0YSVIBPRWVPmgJHNa4nrfq88+oS+tmyZNxmnfajIw9A/GOGZQiKXHC0k09SVvbYXlsjgJ6NIjhm9NuAhGRQjg== }
+    dependencies:
+      '@volar/code-gen': 0.34.17
+      '@volar/source-map': 0.34.17
+      '@volar/vue-code-gen': 0.34.17
+      '@vue/compiler-sfc': 3.2.37
+      '@vue/reactivity': 3.2.37
+    dev: true
+
+  /@vue/compiler-core/3.2.31:
+    resolution:
+      { integrity: sha512-aKno00qoA4o+V/kR6i/pE+aP+esng5siNAVQ422TkBNM6qA4veXiZbSe8OTXHXquEi/f6Akc+nLfB4JGfe4/WQ== }
+    dependencies:
+      '@babel/parser': 7.18.8
+      '@vue/shared': 3.2.31
+      estree-walker: 2.0.2
+      source-map: 0.6.1
+    dev: true
+
   /@vue/compiler-core/3.2.36:
     resolution:
       { integrity: sha512-bbyZM5hvBicv0PW3KUfVi+x3ylHnfKG7DOn5wM+f2OztTzTjLEyBb/5yrarIYpmnGitVGbjZqDbODyW4iK8hqw== }
@@ -4633,7 +7949,14 @@ packages:
       '@vue/shared': 3.2.37
       estree-walker: 2.0.2
       source-map: 0.6.1
-    dev: false
+
+  /@vue/compiler-dom/3.2.31:
+    resolution:
+      { integrity: sha512-60zIlFfzIDf3u91cqfqy9KhCKIJgPeqxgveH2L+87RcGU/alT6BRrk5JtUso0OibH3O7NXuNOQ0cDc9beT0wrg== }
+    dependencies:
+      '@vue/compiler-core': 3.2.31
+      '@vue/shared': 3.2.31
+    dev: true
 
   /@vue/compiler-dom/3.2.36:
     resolution:
@@ -4648,7 +7971,22 @@ packages:
     dependencies:
       '@vue/compiler-core': 3.2.37
       '@vue/shared': 3.2.37
-    dev: false
+
+  /@vue/compiler-sfc/3.2.31:
+    resolution:
+      { integrity: sha512-748adc9msSPGzXgibHiO6T7RWgfnDcVQD+VVwYgSsyyY8Ans64tALHZANrKtOzvkwznV/F4H7OAod/jIlp/dkQ== }
+    dependencies:
+      '@babel/parser': 7.18.8
+      '@vue/compiler-core': 3.2.31
+      '@vue/compiler-dom': 3.2.31
+      '@vue/compiler-ssr': 3.2.31
+      '@vue/reactivity-transform': 3.2.31
+      '@vue/shared': 3.2.31
+      estree-walker: 2.0.2
+      magic-string: 0.25.9
+      postcss: 8.4.14
+      source-map: 0.6.1
+    dev: true
 
   /@vue/compiler-sfc/3.2.36:
     resolution:
@@ -4679,7 +8017,14 @@ packages:
       magic-string: 0.25.9
       postcss: 8.4.14
       source-map: 0.6.1
-    dev: false
+
+  /@vue/compiler-ssr/3.2.31:
+    resolution:
+      { integrity: sha512-mjN0rqig+A8TVDnsGPYJM5dpbjlXeHUm2oZHZwGyMYiGT/F4fhJf/cXy8QpjnLQK4Y9Et4GWzHn9PS8AHUnSkw== }
+    dependencies:
+      '@vue/compiler-dom': 3.2.31
+      '@vue/shared': 3.2.31
+    dev: true
 
   /@vue/compiler-ssr/3.2.36:
     resolution:
@@ -4694,12 +8039,22 @@ packages:
     dependencies:
       '@vue/compiler-dom': 3.2.37
       '@vue/shared': 3.2.37
-    dev: false
 
   /@vue/devtools-api/6.2.1:
     resolution:
       { integrity: sha512-OEgAMeQXvCoJ+1x8WyQuVZzFo0wcyCmUR3baRVLmKBo1LmYZWMlRiXlux5jd0fqVJu6PfDbOrZItVqUEzLobeQ== }
 
+  /@vue/reactivity-transform/3.2.31:
+    resolution:
+      { integrity: sha512-uS4l4z/W7wXdI+Va5pgVxBJ345wyGFKvpPYtdSgvfJfX/x2Ymm6ophQlXXB6acqGHtXuBqNyyO3zVp9b1r0MOA== }
+    dependencies:
+      '@babel/parser': 7.18.8
+      '@vue/compiler-core': 3.2.31
+      '@vue/shared': 3.2.31
+      estree-walker: 2.0.2
+      magic-string: 0.25.9
+    dev: true
+
   /@vue/reactivity-transform/3.2.36:
     resolution:
       { integrity: sha512-Jk5o2BhpODC9XTA7o4EL8hSJ4JyrFWErLtClG3NH8wDS7ri9jBDWxI7/549T7JY9uilKsaNM+4pJASLj5dtRwA== }
@@ -4719,7 +8074,6 @@ packages:
       '@vue/shared': 3.2.37
       estree-walker: 2.0.2
       magic-string: 0.25.9
-    dev: false
 
   /@vue/reactivity/3.2.36:
     resolution:
@@ -4727,6 +8081,12 @@ packages:
     dependencies:
       '@vue/shared': 3.2.36
 
+  /@vue/reactivity/3.2.37:
+    resolution:
+      { integrity: sha512-/7WRafBOshOc6m3F7plwzPeCu/RCVv9uMpOwa/5PiY1Zz+WLVRWiy0MYKwmg19KBdGtFWsmZ4cD+LOdVPcs52A== }
+    dependencies:
+      '@vue/shared': 3.2.37
+
   /@vue/runtime-core/3.2.36:
     resolution:
       { integrity: sha512-PTWBD+Lub+1U3/KhbCExrfxyS14hstLX+cBboxVHaz+kXoiDLNDEYAovPtxeTutbqtClIXtft+wcGdC+FUQ9qQ== }
@@ -4734,6 +8094,13 @@ packages:
       '@vue/reactivity': 3.2.36
       '@vue/shared': 3.2.36
 
+  /@vue/runtime-core/3.2.37:
+    resolution:
+      { integrity: sha512-JPcd9kFyEdXLl/i0ClS7lwgcs0QpUAWj+SKX2ZC3ANKi1U4DOtiEr6cRqFXsPwY5u1L9fAjkinIdB8Rz3FoYNQ== }
+    dependencies:
+      '@vue/reactivity': 3.2.37
+      '@vue/shared': 3.2.37
+
   /@vue/runtime-dom/3.2.36:
     resolution:
       { integrity: sha512-gYPYblm7QXHVuBohqNRRT7Wez0f2Mx2D40rb4fleehrJU9CnkjG0phhcGEZFfGwCmHZRqBCRgbFWE98bPULqkg== }
@@ -4742,6 +8109,14 @@ packages:
       '@vue/shared': 3.2.36
       csstype: 2.6.20
 
+  /@vue/runtime-dom/3.2.37:
+    resolution:
+      { integrity: sha512-HimKdh9BepShW6YozwRKAYjYQWg9mQn63RGEiSswMbW+ssIht1MILYlVGkAGGQbkhSh31PCdoUcfiu4apXJoPw== }
+    dependencies:
+      '@vue/runtime-core': 3.2.37
+      '@vue/shared': 3.2.37
+      csstype: 2.6.20
+
   /@vue/server-renderer/3.2.36_vue@3.2.36:
     resolution:
       { integrity: sha512-uZE0+jfye6yYXWvAQYeHZv+f50sRryvy16uiqzk3jn8hEY8zTjI+rzlmZSGoE915k+W/Ol9XSw6vxOUD8dGkUg== }
@@ -4752,6 +8127,21 @@ packages:
       '@vue/shared': 3.2.36
       vue: 3.2.36
 
+  /@vue/server-renderer/3.2.37_vue@3.2.37:
+    resolution:
+      { integrity: sha512-kLITEJvaYgZQ2h47hIzPh2K3jG8c1zCVbp/o/bzQOyvzaKiCquKS7AaioPI28GNxIsE/zSx+EwWYsNxDCX95MA== }
+    peerDependencies:
+      vue: 3.2.37
+    dependencies:
+      '@vue/compiler-ssr': 3.2.37
+      '@vue/shared': 3.2.37
+      vue: 3.2.37
+
+  /@vue/shared/3.2.31:
+    resolution:
+      { integrity: sha512-ymN2pj6zEjiKJZbrf98UM2pfDd6F2H7ksKw7NDt/ZZ1fh5Ei39X5tABugtT03ZRlWd9imccoK0hE8hpjpU7irQ== }
+    dev: true
+
   /@vue/shared/3.2.36:
     resolution:
       { integrity: sha512-JtB41wXl7Au3+Nl3gD16Cfpj7k/6aCroZ6BbOiCMFCMvrOpkg/qQUXTso2XowaNqBbnkuGHurLAqkLBxNGc1hQ== }
@@ -4759,7 +8149,6 @@ packages:
   /@vue/shared/3.2.37:
     resolution:
       { integrity: sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw== }
-    dev: false
 
   /@vue/test-utils/2.0.2_vue@3.2.36:
     resolution:
@@ -4770,6 +8159,291 @@ packages:
       vue: 3.2.36
     dev: true
 
+  /@vue/test-utils/2.0.2_vue@3.2.37:
+    resolution:
+      { integrity: sha512-E2P4oXSaWDqTZNbmKZFVLrNN/siVN78YkEqs7pHryWerrlZR9bBFLWdJwRoguX45Ru6HxIflzKl4vQvwRMwm5g== }
+    peerDependencies:
+      vue: ^3.0.1
+    dependencies:
+      vue: 3.2.37
+    dev: true
+
+  /@webassemblyjs/ast/1.11.1:
+    resolution:
+      { integrity: sha512-ukBh14qFLjxTQNTXocdyksN5QdM28S1CxHt2rdskFyL+xFV7VremuBLVbmCePj+URalXBENx/9Lm7lnhihtCSw== }
+    dependencies:
+      '@webassemblyjs/helper-numbers': 1.11.1
+      '@webassemblyjs/helper-wasm-bytecode': 1.11.1
+    dev: true
+
+  /@webassemblyjs/ast/1.9.0:
+    resolution:
+      { integrity: sha512-C6wW5L+b7ogSDVqymbkkvuW9kruN//YisMED04xzeBBqjHa2FYnmvOlS6Xj68xWQRgWvI9cIglsjFowH/RJyEA== }
+    dependencies:
+      '@webassemblyjs/helper-module-context': 1.9.0
+      '@webassemblyjs/helper-wasm-bytecode': 1.9.0
+      '@webassemblyjs/wast-parser': 1.9.0
+    dev: true
+
+  /@webassemblyjs/floating-point-hex-parser/1.11.1:
+    resolution:
+      { integrity: sha512-iGRfyc5Bq+NnNuX8b5hwBrRjzf0ocrJPI6GWFodBFzmFnyvrQ83SHKhmilCU/8Jv67i4GJZBMhEzltxzcNagtQ== }
+    dev: true
+
+  /@webassemblyjs/floating-point-hex-parser/1.9.0:
+    resolution:
+      { integrity: sha512-TG5qcFsS8QB4g4MhrxK5TqfdNe7Ey/7YL/xN+36rRjl/BlGE/NcBvJcqsRgCP6Z92mRE+7N50pRIi8SmKUbcQA== }
+    dev: true
+
+  /@webassemblyjs/helper-api-error/1.11.1:
+    resolution:
+      { integrity: sha512-RlhS8CBCXfRUR/cwo2ho9bkheSXG0+NwooXcc3PAILALf2QLdFyj7KGsKRbVc95hZnhnERon4kW/D3SZpp6Tcg== }
+    dev: true
+
+  /@webassemblyjs/helper-api-error/1.9.0:
+    resolution:
+      { integrity: sha512-NcMLjoFMXpsASZFxJ5h2HZRcEhDkvnNFOAKneP5RbKRzaWJN36NC4jqQHKwStIhGXu5mUWlUUk7ygdtrO8lbmw== }
+    dev: true
+
+  /@webassemblyjs/helper-buffer/1.11.1:
+    resolution:
+      { integrity: sha512-gwikF65aDNeeXa8JxXa2BAk+REjSyhrNC9ZwdT0f8jc4dQQeDQ7G4m0f2QCLPJiMTTO6wfDmRmj/pW0PsUvIcA== }
+    dev: true
+
+  /@webassemblyjs/helper-buffer/1.9.0:
+    resolution:
+      { integrity: sha512-qZol43oqhq6yBPx7YM3m9Bv7WMV9Eevj6kMi6InKOuZxhw+q9hOkvq5e/PpKSiLfyetpaBnogSbNCfBwyB00CA== }
+    dev: true
+
+  /@webassemblyjs/helper-code-frame/1.9.0:
+    resolution:
+      { integrity: sha512-ERCYdJBkD9Vu4vtjUYe8LZruWuNIToYq/ME22igL+2vj2dQ2OOujIZr3MEFvfEaqKoVqpsFKAGsRdBSBjrIvZA== }
+    dependencies:
+      '@webassemblyjs/wast-printer': 1.9.0
+    dev: true
+
+  /@webassemblyjs/helper-fsm/1.9.0:
+    resolution:
+      { integrity: sha512-OPRowhGbshCb5PxJ8LocpdX9Kl0uB4XsAjl6jH/dWKlk/mzsANvhwbiULsaiqT5GZGT9qinTICdj6PLuM5gslw== }
+    dev: true
+
+  /@webassemblyjs/helper-module-context/1.9.0:
+    resolution:
+      { integrity: sha512-MJCW8iGC08tMk2enck1aPW+BE5Cw8/7ph/VGZxwyvGbJwjktKkDK7vy7gAmMDx88D7mhDTCNKAW5tED+gZ0W8g== }
+    dependencies:
+      '@webassemblyjs/ast': 1.9.0
+    dev: true
+
+  /@webassemblyjs/helper-numbers/1.11.1:
+    resolution:
+      { integrity: sha512-vDkbxiB8zfnPdNK9Rajcey5C0w+QJugEglN0of+kmO8l7lDb77AnlKYQF7aarZuCrv+l0UvqL+68gSDr3k9LPQ== }
+    dependencies:
+      '@webassemblyjs/floating-point-hex-parser': 1.11.1
+      '@webassemblyjs/helper-api-error': 1.11.1
+      '@xtuc/long': 4.2.2
+    dev: true
+
+  /@webassemblyjs/helper-wasm-bytecode/1.11.1:
+    resolution:
+      { integrity: sha512-PvpoOGiJwXeTrSf/qfudJhwlvDQxFgelbMqtq52WWiXC6Xgg1IREdngmPN3bs4RoO83PnL/nFrxucXj1+BX62Q== }
+    dev: true
+
+  /@webassemblyjs/helper-wasm-bytecode/1.9.0:
+    resolution:
+      { integrity: sha512-R7FStIzyNcd7xKxCZH5lE0Bqy+hGTwS3LJjuv1ZVxd9O7eHCedSdrId/hMOd20I+v8wDXEn+bjfKDLzTepoaUw== }
+    dev: true
+
+  /@webassemblyjs/helper-wasm-section/1.11.1:
+    resolution:
+      { integrity: sha512-10P9No29rYX1j7F3EVPX3JvGPQPae+AomuSTPiF9eBQeChHI6iqjMIwR9JmOJXwpnn/oVGDk7I5IlskuMwU/pg== }
+    dependencies:
+      '@webassemblyjs/ast': 1.11.1
+      '@webassemblyjs/helper-buffer': 1.11.1
+      '@webassemblyjs/helper-wasm-bytecode': 1.11.1
+      '@webassemblyjs/wasm-gen': 1.11.1
+    dev: true
+
+  /@webassemblyjs/helper-wasm-section/1.9.0:
+    resolution:
+      { integrity: sha512-XnMB8l3ek4tvrKUUku+IVaXNHz2YsJyOOmz+MMkZvh8h1uSJpSen6vYnw3IoQ7WwEuAhL8Efjms1ZWjqh2agvw== }
+    dependencies:
+      '@webassemblyjs/ast': 1.9.0
+      '@webassemblyjs/helper-buffer': 1.9.0
+      '@webassemblyjs/helper-wasm-bytecode': 1.9.0
+      '@webassemblyjs/wasm-gen': 1.9.0
+    dev: true
+
+  /@webassemblyjs/ieee754/1.11.1:
+    resolution:
+      { integrity: sha512-hJ87QIPtAMKbFq6CGTkZYJivEwZDbQUgYd3qKSadTNOhVY7p+gfP6Sr0lLRVTaG1JjFj+r3YchoqRYxNH3M0GQ== }
+    dependencies:
+      '@xtuc/ieee754': 1.2.0
+    dev: true
+
+  /@webassemblyjs/ieee754/1.9.0:
+    resolution:
+      { integrity: sha512-dcX8JuYU/gvymzIHc9DgxTzUUTLexWwt8uCTWP3otys596io0L5aW02Gb1RjYpx2+0Jus1h4ZFqjla7umFniTg== }
+    dependencies:
+      '@xtuc/ieee754': 1.2.0
+    dev: true
+
+  /@webassemblyjs/leb128/1.11.1:
+    resolution:
+      { integrity: sha512-BJ2P0hNZ0u+Th1YZXJpzW6miwqQUGcIHT1G/sf72gLVD9DZ5AdYTqPNbHZh6K1M5VmKvFXwGSWZADz+qBWxeRw== }
+    dependencies:
+      '@xtuc/long': 4.2.2
+    dev: true
+
+  /@webassemblyjs/leb128/1.9.0:
+    resolution:
+      { integrity: sha512-ENVzM5VwV1ojs9jam6vPys97B/S65YQtv/aanqnU7D8aSoHFX8GyhGg0CMfyKNIHBuAVjy3tlzd5QMMINa7wpw== }
+    dependencies:
+      '@xtuc/long': 4.2.2
+    dev: true
+
+  /@webassemblyjs/utf8/1.11.1:
+    resolution:
+      { integrity: sha512-9kqcxAEdMhiwQkHpkNiorZzqpGrodQQ2IGrHHxCy+Ozng0ofyMA0lTqiLkVs1uzTRejX+/O0EOT7KxqVPuXosQ== }
+    dev: true
+
+  /@webassemblyjs/utf8/1.9.0:
+    resolution:
+      { integrity: sha512-GZbQlWtopBTP0u7cHrEx+73yZKrQoBMpwkGEIqlacljhXCkVM1kMQge/Mf+csMJAjEdSwhOyLAS0AoR3AG5P8w== }
+    dev: true
+
+  /@webassemblyjs/wasm-edit/1.11.1:
+    resolution:
+      { integrity: sha512-g+RsupUC1aTHfR8CDgnsVRVZFJqdkFHpsHMfJuWQzWU3tvnLC07UqHICfP+4XyL2tnr1amvl1Sdp06TnYCmVkA== }
+    dependencies:
+      '@webassemblyjs/ast': 1.11.1
+      '@webassemblyjs/helper-buffer': 1.11.1
+      '@webassemblyjs/helper-wasm-bytecode': 1.11.1
+      '@webassemblyjs/helper-wasm-section': 1.11.1
+      '@webassemblyjs/wasm-gen': 1.11.1
+      '@webassemblyjs/wasm-opt': 1.11.1
+      '@webassemblyjs/wasm-parser': 1.11.1
+      '@webassemblyjs/wast-printer': 1.11.1
+    dev: true
+
+  /@webassemblyjs/wasm-edit/1.9.0:
+    resolution:
+      { integrity: sha512-FgHzBm80uwz5M8WKnMTn6j/sVbqilPdQXTWraSjBwFXSYGirpkSWE2R9Qvz9tNiTKQvoKILpCuTjBKzOIm0nxw== }
+    dependencies:
+      '@webassemblyjs/ast': 1.9.0
+      '@webassemblyjs/helper-buffer': 1.9.0
+      '@webassemblyjs/helper-wasm-bytecode': 1.9.0
+      '@webassemblyjs/helper-wasm-section': 1.9.0
+      '@webassemblyjs/wasm-gen': 1.9.0
+      '@webassemblyjs/wasm-opt': 1.9.0
+      '@webassemblyjs/wasm-parser': 1.9.0
+      '@webassemblyjs/wast-printer': 1.9.0
+    dev: true
+
+  /@webassemblyjs/wasm-gen/1.11.1:
+    resolution:
+      { integrity: sha512-F7QqKXwwNlMmsulj6+O7r4mmtAlCWfO/0HdgOxSklZfQcDu0TpLiD1mRt/zF25Bk59FIjEuGAIyn5ei4yMfLhA== }
+    dependencies:
+      '@webassemblyjs/ast': 1.11.1
+      '@webassemblyjs/helper-wasm-bytecode': 1.11.1
+      '@webassemblyjs/ieee754': 1.11.1
+      '@webassemblyjs/leb128': 1.11.1
+      '@webassemblyjs/utf8': 1.11.1
+    dev: true
+
+  /@webassemblyjs/wasm-gen/1.9.0:
+    resolution:
+      { integrity: sha512-cPE3o44YzOOHvlsb4+E9qSqjc9Qf9Na1OO/BHFy4OI91XDE14MjFN4lTMezzaIWdPqHnsTodGGNP+iRSYfGkjA== }
+    dependencies:
+      '@webassemblyjs/ast': 1.9.0
+      '@webassemblyjs/helper-wasm-bytecode': 1.9.0
+      '@webassemblyjs/ieee754': 1.9.0
+      '@webassemblyjs/leb128': 1.9.0
+      '@webassemblyjs/utf8': 1.9.0
+    dev: true
+
+  /@webassemblyjs/wasm-opt/1.11.1:
+    resolution:
+      { integrity: sha512-VqnkNqnZlU5EB64pp1l7hdm3hmQw7Vgqa0KF/KCNO9sIpI6Fk6brDEiX+iCOYrvMuBWDws0NkTOxYEb85XQHHw== }
+    dependencies:
+      '@webassemblyjs/ast': 1.11.1
+      '@webassemblyjs/helper-buffer': 1.11.1
+      '@webassemblyjs/wasm-gen': 1.11.1
+      '@webassemblyjs/wasm-parser': 1.11.1
+    dev: true
+
+  /@webassemblyjs/wasm-opt/1.9.0:
+    resolution:
+      { integrity: sha512-Qkjgm6Anhm+OMbIL0iokO7meajkzQD71ioelnfPEj6r4eOFuqm4YC3VBPqXjFyyNwowzbMD+hizmprP/Fwkl2A== }
+    dependencies:
+      '@webassemblyjs/ast': 1.9.0
+      '@webassemblyjs/helper-buffer': 1.9.0
+      '@webassemblyjs/wasm-gen': 1.9.0
+      '@webassemblyjs/wasm-parser': 1.9.0
+    dev: true
+
+  /@webassemblyjs/wasm-parser/1.11.1:
+    resolution:
+      { integrity: sha512-rrBujw+dJu32gYB7/Lup6UhdkPx9S9SnobZzRVL7VcBH9Bt9bCBLEuX/YXOOtBsOZ4NQrRykKhffRWHvigQvOA== }
+    dependencies:
+      '@webassemblyjs/ast': 1.11.1
+      '@webassemblyjs/helper-api-error': 1.11.1
+      '@webassemblyjs/helper-wasm-bytecode': 1.11.1
+      '@webassemblyjs/ieee754': 1.11.1
+      '@webassemblyjs/leb128': 1.11.1
+      '@webassemblyjs/utf8': 1.11.1
+    dev: true
+
+  /@webassemblyjs/wasm-parser/1.9.0:
+    resolution:
+      { integrity: sha512-9+wkMowR2AmdSWQzsPEjFU7njh8HTO5MqO8vjwEHuM+AMHioNqSBONRdr0NQQ3dVQrzp0s8lTcYqzUdb7YgELA== }
+    dependencies:
+      '@webassemblyjs/ast': 1.9.0
+      '@webassemblyjs/helper-api-error': 1.9.0
+      '@webassemblyjs/helper-wasm-bytecode': 1.9.0
+      '@webassemblyjs/ieee754': 1.9.0
+      '@webassemblyjs/leb128': 1.9.0
+      '@webassemblyjs/utf8': 1.9.0
+    dev: true
+
+  /@webassemblyjs/wast-parser/1.9.0:
+    resolution:
+      { integrity: sha512-qsqSAP3QQ3LyZjNC/0jBJ/ToSxfYJ8kYyuiGvtn/8MK89VrNEfwj7BPQzJVHi0jGTRK2dGdJ5PRqhtjzoww+bw== }
+    dependencies:
+      '@webassemblyjs/ast': 1.9.0
+      '@webassemblyjs/floating-point-hex-parser': 1.9.0
+      '@webassemblyjs/helper-api-error': 1.9.0
+      '@webassemblyjs/helper-code-frame': 1.9.0
+      '@webassemblyjs/helper-fsm': 1.9.0
+      '@xtuc/long': 4.2.2
+    dev: true
+
+  /@webassemblyjs/wast-printer/1.11.1:
+    resolution:
+      { integrity: sha512-IQboUWM4eKzWW+N/jij2sRatKMh99QEelo3Eb2q0qXkvPRISAj8Qxtmw5itwqK+TTkBuUIE45AxYPToqPtL5gg== }
+    dependencies:
+      '@webassemblyjs/ast': 1.11.1
+      '@xtuc/long': 4.2.2
+    dev: true
+
+  /@webassemblyjs/wast-printer/1.9.0:
+    resolution:
+      { integrity: sha512-2J0nE95rHXHyQ24cWjMKJ1tqB/ds8z/cyeOZxJhcb+rW+SQASVjuznUSmdz5GpVJTzU8JkhYut0D3siFDD6wsA== }
+    dependencies:
+      '@webassemblyjs/ast': 1.9.0
+      '@webassemblyjs/wast-parser': 1.9.0
+      '@xtuc/long': 4.2.2
+    dev: true
+
+  /@xtuc/ieee754/1.2.0:
+    resolution:
+      { integrity: sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA== }
+    dev: true
+
+  /@xtuc/long/4.2.2:
+    resolution:
+      { integrity: sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ== }
+    dev: true
+
   /@yarn-tool/resolve-package/1.0.47:
     resolution:
       { integrity: sha512-Zaw58gQxjQceJqhqybJi1oUDaORT8i2GTgwICPs8v/X/Pkx35FXQba69ldHVg5pQZ6YLKpROXgyHvBaCJOFXiA== }
@@ -4822,6 +8496,15 @@ packages:
       acorn-walk: 7.2.0
     dev: true
 
+  /acorn-import-assertions/1.8.0_acorn@8.7.1:
+    resolution:
+      { integrity: sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw== }
+    peerDependencies:
+      acorn: ^8
+    dependencies:
+      acorn: 8.7.1
+    dev: true
+
   /acorn-jsx/5.3.2_acorn@8.7.1:
     resolution:
       { integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ== }
@@ -4831,6 +8514,15 @@ packages:
       acorn: 8.7.1
     dev: true
 
+  /acorn-jsx/5.3.2_acorn@8.8.0:
+    resolution:
+      { integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ== }
+    peerDependencies:
+      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+    dependencies:
+      acorn: 8.8.0
+    dev: true
+
   /acorn-walk/7.2.0:
     resolution:
       { integrity: sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA== }
@@ -4842,6 +8534,13 @@ packages:
       { integrity: sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA== }
     engines: { node: '>=0.4.0' }
 
+  /acorn/6.4.2:
+    resolution:
+      { integrity: sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ== }
+    engines: { node: '>=0.4.0' }
+    hasBin: true
+    dev: true
+
   /acorn/7.4.1:
     resolution:
       { integrity: sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A== }
@@ -4855,6 +8554,19 @@ packages:
     engines: { node: '>=0.4.0' }
     hasBin: true
 
+  /acorn/8.8.0:
+    resolution:
+      { integrity: sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w== }
+    engines: { node: '>=0.4.0' }
+    hasBin: true
+    dev: true
+
+  /address/1.2.0:
+    resolution:
+      { integrity: sha512-tNEZYz5G/zYunxFm7sfhAxkXEuLj3K6BKwv6ZURlsF6yiUQ65z0Q2wZW9L5cPUl9ocofGvXOdFYbFHp0+6MOig== }
+    engines: { node: '>= 10.0.0' }
+    dev: true
+
   /agent-base/6.0.2:
     resolution:
       { integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ== }
@@ -4884,6 +8596,29 @@ packages:
       clean-stack: 2.2.0
       indent-string: 4.0.0
 
+  /airbnb-js-shims/2.2.1:
+    resolution:
+      { integrity: sha512-wJNXPH66U2xjgo1Zwyjf9EydvJ2Si94+vSdk6EERcBfB2VZkeltpqIats0cqIZMLCXP3zcyaUKGYQeIBT6XjsQ== }
+    dependencies:
+      array-includes: 3.1.5
+      array.prototype.flat: 1.3.0
+      array.prototype.flatmap: 1.3.0
+      es5-shim: 4.6.7
+      es6-shim: 0.35.6
+      function.prototype.name: 1.1.5
+      globalthis: 1.0.3
+      object.entries: 1.1.5
+      object.fromentries: 2.0.5
+      object.getownpropertydescriptors: 2.1.4
+      object.values: 1.1.5
+      promise.allsettled: 1.0.5
+      promise.prototype.finally: 3.1.3
+      string.prototype.matchall: 4.0.7
+      string.prototype.padend: 3.1.3
+      string.prototype.padstart: 3.1.3
+      symbol.prototype.description: 1.0.5
+    dev: true
+
   /ajv-draft-04/1.0.0_ajv@8.11.0:
     resolution:
       { integrity: sha512-mv00Te6nmYbRp5DCwclxtt7yV/joXJPGS7nM+97GdxvuttCOfgI3K4U25zboyeX0O+myI8ERluxQe5wljMmVIw== }
@@ -4896,6 +8631,24 @@ packages:
       ajv: 8.11.0
     dev: true
 
+  /ajv-errors/1.0.1_ajv@6.12.6:
+    resolution:
+      { integrity: sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ== }
+    peerDependencies:
+      ajv: '>=5.0.0'
+    dependencies:
+      ajv: 6.12.6
+    dev: true
+
+  /ajv-keywords/3.5.2_ajv@6.12.6:
+    resolution:
+      { integrity: sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ== }
+    peerDependencies:
+      ajv: ^6.9.1
+    dependencies:
+      ajv: 6.12.6
+    dev: true
+
   /ajv/6.12.6:
     resolution:
       { integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g== }
@@ -4916,6 +8669,25 @@ packages:
       uri-js: 4.4.1
     dev: true
 
+  /ansi-align/3.0.1:
+    resolution:
+      { integrity: sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w== }
+    dependencies:
+      string-width: 4.2.3
+    dev: true
+
+  /ansi-colors/3.2.4:
+    resolution:
+      { integrity: sha512-hHUXGagefjN2iRrID63xckIvotOXOojhQKWIPUZ4mNUZ9nLZW+7FMNoE1lOkEhNWYsx/7ysGIuJYCiMAA9FnrA== }
+    engines: { node: '>=6' }
+    dev: true
+
+  /ansi-colors/4.1.3:
+    resolution:
+      { integrity: sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw== }
+    engines: { node: '>=6' }
+    dev: true
+
   /ansi-escapes/3.2.0:
     resolution:
       { integrity: sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ== }
@@ -4929,6 +8701,13 @@ packages:
     dependencies:
       type-fest: 0.21.3
 
+  /ansi-html-community/0.0.8:
+    resolution:
+      { integrity: sha512-1APHAyr3+PCamwNw3bXCPp4HFLONZt/yIH0sZp0/469KWNTEy+qN5jQ3GVX6DMZ1UXAi34yVwtTeaG/HpBuuzw== }
+    engines: { '0': node >= 0.8.0 }
+    hasBin: true
+    dev: true
+
   /ansi-regex/2.1.1:
     resolution:
       { integrity: sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA== }
@@ -4990,6 +8769,15 @@ packages:
     engines: { node: '>=12' }
     dev: true
 
+  /ansi-to-html/0.6.15:
+    resolution:
+      { integrity: sha512-28ijx2aHJGdzbs+O5SNQF65r6rrKYnkuwTYm8lZlChuoJ9P1vVzIpWO20sQTqTPDXYp6NFwk326vApTtLVFXpQ== }
+    engines: { node: '>=8.0.0' }
+    hasBin: true
+    dependencies:
+      entities: 2.2.0
+    dev: true
+
   /any-observable/0.3.0_rxjs@6.6.7:
     resolution:
       { integrity: sha512-/FQM1EDkTsf63Ub2C6O7GuYFDsSXUwsaZDurV0np41ocwq0jthUAYCmhBX9f+KwlaCgIuWyr/4WlUQUBfKfZog== }
@@ -5006,6 +8794,16 @@ packages:
       rxjs: 6.6.7
     dev: true
 
+  /anymatch/2.0.0:
+    resolution:
+      { integrity: sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw== }
+    dependencies:
+      micromatch: 3.1.10
+      normalize-path: 2.1.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /anymatch/3.1.2:
     resolution:
       { integrity: sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg== }
@@ -5026,6 +8824,16 @@ packages:
       svg.select.js: 3.0.1
     dev: true
 
+  /app-root-dir/1.0.2:
+    resolution:
+      { integrity: sha512-jlpIfsOoNoafl92Sz//64uQHGSyMrD2vYG5d8o2a4qGvyNCvXur7bzIsWtAC/6flI2RYAp3kv8rsfBtaLm7w0g== }
+    dev: true
+
+  /aproba/1.2.0:
+    resolution:
+      { integrity: sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw== }
+    dev: true
+
   /aproba/2.0.0:
     resolution:
       { integrity: sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ== }
@@ -5077,15 +8885,118 @@ packages:
     resolution:
       { integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q== }
 
+  /arr-diff/4.0.0:
+    resolution:
+      { integrity: sha512-YVIQ82gZPGBebQV/a8dar4AitzCQs0jjXwMPZllpXMaGjXPYVUawSxQrRsjhjupyVxEvbHgUmIhKVlND+j02kA== }
+    engines: { node: '>=0.10.0' }
+    dev: true
+
+  /arr-flatten/1.1.0:
+    resolution:
+      { integrity: sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg== }
+    engines: { node: '>=0.10.0' }
+    dev: true
+
+  /arr-union/3.1.0:
+    resolution:
+      { integrity: sha512-sKpyeERZ02v1FeCZT8lrfJq5u6goHCtpTAzPwJYe7c8SPFOboNjNg1vz2L4VTn9T4PQxEx13TbXLmYUcS6Ug7Q== }
+    engines: { node: '>=0.10.0' }
+    dev: true
+
+  /array-find-index/1.0.2:
+    resolution:
+      { integrity: sha512-M1HQyIXcBGtVywBt8WVdim+lrNaK7VHp99Qt5pSNziXznKHViIBbXWtfRTpEFpF/c4FdfxNAsCCwPp5phBYJtw== }
+    engines: { node: '>=0.10.0' }
+    dev: true
+    optional: true
+
   /array-flatten/1.1.1:
     resolution:
       { integrity: sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg== }
 
+  /array-includes/3.1.5:
+    resolution:
+      { integrity: sha512-iSDYZMMyTPkiFasVqfuAQnWAYcvO/SeBSCGKePoEthjp4LEMTe4uLc7b025o4jAZpHhihh8xPo99TNWUWWkGDQ== }
+    engines: { node: '>= 0.4' }
+    dependencies:
+      call-bind: 1.0.2
+      define-properties: 1.1.4
+      es-abstract: 1.20.1
+      get-intrinsic: 1.1.2
+      is-string: 1.0.7
+    dev: true
+
+  /array-union/1.0.2:
+    resolution:
+      { integrity: sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      array-uniq: 1.0.3
+    dev: true
+
   /array-union/2.1.0:
     resolution:
       { integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw== }
     engines: { node: '>=8' }
 
+  /array-uniq/1.0.3:
+    resolution:
+      { integrity: sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q== }
+    engines: { node: '>=0.10.0' }
+    dev: true
+
+  /array-unique/0.3.2:
+    resolution:
+      { integrity: sha512-SleRWjh9JUud2wH1hPs9rZBZ33H6T9HOiL0uwGnGx9FpE6wKGyfWugmbkEOIs6qWrZhg0LWeLziLrEwQJhs5mQ== }
+    engines: { node: '>=0.10.0' }
+    dev: true
+
+  /array.prototype.flat/1.3.0:
+    resolution:
+      { integrity: sha512-12IUEkHsAhA4DY5s0FPgNXIdc8VRSqD9Zp78a5au9abH/SOBrsp082JOWFNTjkMozh8mqcdiKuaLGhPeYztxSw== }
+    engines: { node: '>= 0.4' }
+    dependencies:
+      call-bind: 1.0.2
+      define-properties: 1.1.4
+      es-abstract: 1.20.1
+      es-shim-unscopables: 1.0.0
+    dev: true
+
+  /array.prototype.flatmap/1.3.0:
+    resolution:
+      { integrity: sha512-PZC9/8TKAIxcWKdyeb77EzULHPrIX/tIZebLJUQOMR1OwYosT8yggdfWScfTBCDj5utONvOuPQQumYsU2ULbkg== }
+    engines: { node: '>= 0.4' }
+    dependencies:
+      call-bind: 1.0.2
+      define-properties: 1.1.4
+      es-abstract: 1.20.1
+      es-shim-unscopables: 1.0.0
+    dev: true
+
+  /array.prototype.map/1.0.4:
+    resolution:
+      { integrity: sha512-Qds9QnX7A0qISY7JT5WuJO0NJPE9CMlC6JzHQfhpqAAQQzufVRoeH7EzUY5GcPTx72voG8LV/5eo+b8Qi8hmhA== }
+    engines: { node: '>= 0.4' }
+    dependencies:
+      call-bind: 1.0.2
+      define-properties: 1.1.4
+      es-abstract: 1.20.1
+      es-array-method-boxes-properly: 1.0.0
+      is-string: 1.0.7
+    dev: true
+
+  /array.prototype.reduce/1.0.4:
+    resolution:
+      { integrity: sha512-WnM+AjG/DvLRLo4DDl+r+SvCzYtD2Jd9oeBYMcEaI7t3fFrHY9M53/wdLcTvmZNQ70IU6Htj0emFkZ5TS+lrdw== }
+    engines: { node: '>= 0.4' }
+    dependencies:
+      call-bind: 1.0.2
+      define-properties: 1.1.4
+      es-abstract: 1.20.1
+      es-array-method-boxes-properly: 1.0.0
+      is-string: 1.0.7
+    dev: true
+
   /arrify/1.0.1:
     resolution:
       { integrity: sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA== }
@@ -5096,12 +9007,21 @@ packages:
     resolution:
       { integrity: sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug== }
     engines: { node: '>=8' }
-    dev: false
 
   /asap/2.0.6:
     resolution:
       { integrity: sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA== }
 
+  /asn1.js/5.4.1:
+    resolution:
+      { integrity: sha512-+I//4cYPccV8LdmBLiX8CYvf9Sp3vQsrqu2QNXRcrbiWvcx/UdlFiqUJJzxRQxgsZmvhXhn4cSKeSmoFjVdupA== }
+    dependencies:
+      bn.js: 4.12.0
+      inherits: 2.0.4
+      minimalistic-assert: 1.0.1
+      safer-buffer: 2.1.2
+    dev: true
+
   /asn1/0.2.6:
     resolution:
       { integrity: sha512-ix/FxPn0MDjeyJ7i/yoHGFt/EX6LyNbxSEhPPXODPL+KB0VPk86UYfL0lMdy+KCnv+fmvIzySwaK5COwqVbWTQ== }
@@ -5109,23 +9029,64 @@ packages:
       safer-buffer: 2.1.2
     dev: false
 
+  /assert-never/1.2.1:
+    resolution:
+      { integrity: sha512-TaTivMB6pYI1kXwrFlEhLeGfOqoDNdTxjCdwRfFFkEA30Eu+k48W34nlok2EYWJfFFzqaEmichdNM7th6M5HNw== }
+    dev: true
+
   /assert-plus/1.0.0:
     resolution:
       { integrity: sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw== }
     engines: { node: '>=0.8' }
     dev: false
 
+  /assert/1.5.0:
+    resolution:
+      { integrity: sha512-EDsgawzwoun2CZkCgtxJbv392v4nbk9XDD06zI+kQYoBM/3RBWLlEyJARDOmhAAosBjWACEkKL6S+lIZtcAubA== }
+    dependencies:
+      object-assign: 4.1.1
+      util: 0.10.3
+    dev: true
+
   /assertion-error/1.1.0:
     resolution:
       { integrity: sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw== }
     dev: true
 
+  /assign-symbols/1.0.0:
+    resolution:
+      { integrity: sha512-Q+JC7Whu8HhmTdBph/Tq59IoRtoy6KAm5zzPv00WdujX82lbAL8K7WVjne7vdCsAmbF4AYaDOPyO3k0kl8qIrw== }
+    engines: { node: '>=0.10.0' }
+    dev: true
+
+  /ast-types/0.14.2:
+    resolution:
+      { integrity: sha512-O0yuUDnZeQDL+ncNGlJ78BiO4jnYI3bvMsD5prT0/nsgijG/LpNBIr63gTjVTNsiGkgQhiyCShTgxt8oXOrklA== }
+    engines: { node: '>=4' }
+    dependencies:
+      tslib: 2.4.0
+    dev: true
+
+  /ast-types/0.15.2:
+    resolution:
+      { integrity: sha512-c27loCv9QkZinsa5ProX751khO9DJl/AcB5c2KNtA6NRvHKS0PgLfcftz72KVq504vB0Gku5s2kUZzDBvQWvHg== }
+    engines: { node: '>=4' }
+    dependencies:
+      tslib: 2.4.0
+    dev: true
+
   /astral-regex/2.0.0:
     resolution:
       { integrity: sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ== }
     engines: { node: '>=8' }
     dev: true
 
+  /async-each/1.0.3:
+    resolution:
+      { integrity: sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ== }
+    dev: true
+    optional: true
+
   /async-mutex/0.3.2:
     resolution:
       { integrity: sha512-HuTK7E7MT7jZEh1P9GtRW9+aTWiDWWi9InbZ5hjxrnRa39KS4BW04+xLBhYNS2aXhHUIKZSw3gj4Pn1pj+qGAA== }
@@ -5149,11 +9110,38 @@ packages:
     resolution:
       { integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q== }
 
+  /at-least-node/1.0.0:
+    resolution:
+      { integrity: sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg== }
+    engines: { node: '>= 4.0.0' }
+    dev: true
+
+  /atob/2.1.2:
+    resolution:
+      { integrity: sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg== }
+    engines: { node: '>= 4.5.0' }
+    hasBin: true
+    dev: true
+
   /atomic-sleep/1.0.0:
     resolution:
       { integrity: sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ== }
     engines: { node: '>=8.0.0' }
 
+  /autoprefixer/9.8.8:
+    resolution:
+      { integrity: sha512-eM9d/swFopRt5gdJ7jrpCwgvEMIayITpojhkkSMRsFHYuH5bkSQ4p/9qTEHtmNudUZh22Tehu7I6CxAW0IXTKA== }
+    hasBin: true
+    dependencies:
+      browserslist: 4.21.3
+      caniuse-lite: 1.0.30001387
+      normalize-range: 0.1.2
+      num2fraction: 1.2.2
+      picocolors: 0.2.1
+      postcss: 7.0.39
+      postcss-value-parser: 4.2.0
+    dev: true
+
   /available-typed-arrays/1.0.5:
     resolution:
       { integrity: sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw== }
@@ -5203,6 +9191,15 @@ packages:
     transitivePeerDependencies:
       - debug
 
+  /babel-core/7.0.0-bridge.0_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg== }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+    dev: true
+
   /babel-jest/27.5.1_@babel+core@7.18.6:
     resolution:
       { integrity: sha512-cdQ5dXjGRd0IBRATiQ4mZGlGlRE8kJpjPOixdNRdT+m3UcNqmYWN6rK6nvtXYfY3D76cb8s/O1Ss8ea24PIwcg== }
@@ -5223,18 +9220,18 @@ packages:
       - supports-color
     dev: true
 
-  /babel-jest/28.1.3_@babel+core@7.18.6:
+  /babel-jest/28.1.3_@babel+core@7.18.13:
     resolution:
       { integrity: sha512-epUaPOEWMk3cWX0M/sPvCHHCe9fMFAa/9hXEgKP8nFfNl/jlGkE9ucq9NqkZGXLDduCJYS0UvSlPUwC0S+rH6Q== }
     engines: { node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0 }
     peerDependencies:
       '@babel/core': ^7.8.0
     dependencies:
-      '@babel/core': 7.18.6
+      '@babel/core': 7.18.13
       '@jest/transform': 28.1.3
       '@types/babel__core': 7.1.19
       babel-plugin-istanbul: 6.1.1
-      babel-preset-jest: 28.1.3_@babel+core@7.18.6
+      babel-preset-jest: 28.1.3_@babel+core@7.18.13
       chalk: 4.1.2
       graceful-fs: 4.2.10
       slash: 3.0.0
@@ -5242,12 +9239,69 @@ packages:
       - supports-color
     dev: true
 
+  /babel-loader/8.2.5_hdaic33o4wf65p5shr3xepeg4m:
+    resolution:
+      { integrity: sha512-OSiFfH89LrEMiWd4pLNqGz4CwJDtbs2ZVc+iGu2HrkRfPxId9F2anQj38IxWpmRfsUY0aBZYi1EFcd3mhtRMLQ== }
+    engines: { node: '>= 8.9' }
+    peerDependencies:
+      '@babel/core': ^7.0.0
+      webpack: '>=2'
+    dependencies:
+      '@babel/core': 7.18.6
+      find-cache-dir: 3.3.2
+      loader-utils: 2.0.2
+      make-dir: 3.1.0
+      schema-utils: 2.7.1
+      webpack: 5.72.0
+    dev: true
+
+  /babel-loader/8.2.5_xcbjw3zjektbxpb7yraegegdpi:
+    resolution:
+      { integrity: sha512-OSiFfH89LrEMiWd4pLNqGz4CwJDtbs2ZVc+iGu2HrkRfPxId9F2anQj38IxWpmRfsUY0aBZYi1EFcd3mhtRMLQ== }
+    engines: { node: '>= 8.9' }
+    peerDependencies:
+      '@babel/core': ^7.0.0
+      webpack: '>=2'
+    dependencies:
+      '@babel/core': 7.18.6
+      find-cache-dir: 3.3.2
+      loader-utils: 2.0.2
+      make-dir: 3.1.0
+      schema-utils: 2.7.1
+      webpack: 4.46.0
+    dev: true
+
+  /babel-plugin-apply-mdx-type-prop/1.6.22_@babel+core@7.12.9:
+    resolution:
+      { integrity: sha512-VefL+8o+F/DfK24lPZMtJctrCVOfgbqLAGZSkxwhazQv4VxPg3Za/i40fu22KR2m8eEda+IfSOlPLUSIiLcnCQ== }
+    peerDependencies:
+      '@babel/core': ^7.11.6
+    dependencies:
+      '@babel/core': 7.12.9
+      '@babel/helper-plugin-utils': 7.10.4
+      '@mdx-js/util': 1.6.22
+    dev: true
+
+  /babel-plugin-dynamic-import-node/2.3.3:
+    resolution:
+      { integrity: sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ== }
+    dependencies:
+      object.assign: 4.1.2
+    dev: true
+
+  /babel-plugin-extract-import-names/1.6.22:
+    resolution:
+      { integrity: sha512-yJ9BsJaISua7d8zNT7oRG1ZLBJCIdZ4PZqmH8qa9N5AK01ifk3fnkc98AXhtzE7UkfCsEumvoQWgoYLhOnJ7jQ== }
+    dependencies:
+      '@babel/helper-plugin-utils': 7.10.4
+    dev: true
+
   /babel-plugin-istanbul/6.1.1:
     resolution:
       { integrity: sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA== }
     engines: { node: '>=8' }
     dependencies:
-      '@babel/helper-plugin-utils': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.9
       '@istanbuljs/load-nyc-config': 1.1.0
       '@istanbuljs/schema': 0.1.3
       istanbul-lib-instrument: 5.2.0
@@ -5272,10 +9326,93 @@ packages:
       { integrity: sha512-Ys3tUKAmfnkRUpPdpa98eYrAR0nV+sSFUZZEGuQ2EbFd1y4SOLtD5QDNHAq+bb9a+bbXvYQC4b+ID/THIMcU6Q== }
     engines: { node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0 }
     dependencies:
-      '@babel/template': 7.18.6
-      '@babel/types': 7.18.8
+      '@babel/template': 7.18.10
+      '@babel/types': 7.18.13
       '@types/babel__core': 7.1.19
-      '@types/babel__traverse': 7.17.1
+      '@types/babel__traverse': 7.18.1
+    dev: true
+
+  /babel-plugin-macros/3.1.0:
+    resolution:
+      { integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg== }
+    engines: { node: '>=10', npm: '>=6' }
+    dependencies:
+      '@babel/runtime': 7.18.9
+      cosmiconfig: 7.0.1
+      resolve: 1.22.1
+    dev: true
+
+  /babel-plugin-polyfill-corejs2/0.3.2_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-LPnodUl3lS0/4wN3Rb+m+UK8s7lj2jcLRrjho4gLw+OJs+I4bvGXshINesY5xx/apM+biTnQ9reDI8yj+0M5+Q== }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/compat-data': 7.18.8
+      '@babel/core': 7.18.6
+      '@babel/helper-define-polyfill-provider': 0.3.2_@babel+core@7.18.6
+      semver: 6.3.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /babel-plugin-polyfill-corejs3/0.1.7_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-u+gbS9bbPhZWEeyy1oR/YaaSpod/KDT07arZHb80aTpl8H5ZBq+uN1nN9/xtX7jQyfLdPfoqI4Rue/MQSWJquw== }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-define-polyfill-provider': 0.1.5_@babel+core@7.18.6
+      core-js-compat: 3.25.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /babel-plugin-polyfill-corejs3/0.5.3_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-zKsXDh0XjnrUEW0mxIHLfjBfnXSMr5Q/goMe/fxpQnLm07mcOZiIZHBNWCMx60HmdvjxfXcalac0tfFg0wqxyw== }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-define-polyfill-provider': 0.3.2_@babel+core@7.18.6
+      core-js-compat: 3.25.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /babel-plugin-polyfill-regenerator/0.3.1_@babel+core@7.18.6:
+    resolution:
+      { integrity: sha512-Y2B06tvgHYt1x0yz17jGkGeeMr5FeKUu+ASJ+N6nB5lQ8Dapfg42i0OVrf8PNGJ3zKL4A23snMi1IRwrqqND7A== }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-define-polyfill-provider': 0.3.2_@babel+core@7.18.6
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /babel-preset-current-node-syntax/1.0.1_@babel+core@7.18.13:
+    resolution:
+      { integrity: sha512-M7LQ0bxarkxQoN+vz5aJPsLBn77n8QgTFmo8WK0/44auK2xlCXrYcUxHFxgU7qW5Yzw/CjmLRK2uJzaCd7LvqQ== }
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.18.13
+      '@babel/plugin-syntax-async-generators': 7.8.4_@babel+core@7.18.13
+      '@babel/plugin-syntax-bigint': 7.8.3_@babel+core@7.18.13
+      '@babel/plugin-syntax-class-properties': 7.12.13_@babel+core@7.18.13
+      '@babel/plugin-syntax-import-meta': 7.10.4_@babel+core@7.18.13
+      '@babel/plugin-syntax-json-strings': 7.8.3_@babel+core@7.18.13
+      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4_@babel+core@7.18.13
+      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3_@babel+core@7.18.13
+      '@babel/plugin-syntax-numeric-separator': 7.10.4_@babel+core@7.18.13
+      '@babel/plugin-syntax-object-rest-spread': 7.8.3_@babel+core@7.18.13
+      '@babel/plugin-syntax-optional-catch-binding': 7.8.3_@babel+core@7.18.13
+      '@babel/plugin-syntax-optional-chaining': 7.8.3_@babel+core@7.18.13
+      '@babel/plugin-syntax-top-level-await': 7.14.5_@babel+core@7.18.13
     dev: true
 
   /babel-preset-current-node-syntax/1.0.1_@babel+core@7.18.6:
@@ -5311,16 +9448,24 @@ packages:
       babel-preset-current-node-syntax: 1.0.1_@babel+core@7.18.6
     dev: true
 
-  /babel-preset-jest/28.1.3_@babel+core@7.18.6:
+  /babel-preset-jest/28.1.3_@babel+core@7.18.13:
     resolution:
       { integrity: sha512-L+fupJvlWAHbQfn74coNX3zf60LXMJsezNvvx8eIh7iOR1luJ1poxYgQk1F8PYtNq/6QODDHCqsSnTFSWC491A== }
     engines: { node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0 }
     peerDependencies:
       '@babel/core': ^7.0.0
     dependencies:
-      '@babel/core': 7.18.6
+      '@babel/core': 7.18.13
       babel-plugin-jest-hoist: 28.1.3
-      babel-preset-current-node-syntax: 1.0.1_@babel+core@7.18.6
+      babel-preset-current-node-syntax: 1.0.1_@babel+core@7.18.13
+    dev: true
+
+  /babel-walk/3.0.0-canary-5:
+    resolution:
+      { integrity: sha512-GAwkz0AihzY5bkwIY5QDR+LvsRQgB/B+1foMPvi0FZPMl5fjD7ICiznUiBdLYMH1QYe6vqu4gWYytZOccLouFw== }
+    engines: { node: '>= 10.0.0' }
+    dependencies:
+      '@babel/types': 7.18.13
     dev: true
 
   /backoff/2.5.0:
@@ -5331,6 +9476,11 @@ packages:
       precond: 0.2.3
     dev: false
 
+  /bail/1.0.5:
+    resolution:
+      { integrity: sha512-xFbRxM1tahm08yHBP16MMjVUAvDaBMD38zsM9EMAUN61omwLmKlOpB/Zku5QkjZ8TZ4vn53pj+t518cH0S03RQ== }
+    dev: true
+
   /balanced-match/1.0.2:
     resolution:
       { integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw== }
@@ -5344,6 +9494,20 @@ packages:
     resolution:
       { integrity: sha512-kwDPIFCGx0NZHog36dj+tHiwP4QMzsZ3AgMViUBKI0+V5n4U0ufTCUMhnQ04diaRI8EX/QcPfql7zlhZ7j4zgg== }
 
+  /base/0.11.2:
+    resolution:
+      { integrity: sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      cache-base: 1.0.1
+      class-utils: 0.3.6
+      component-emitter: 1.3.0
+      define-property: 1.0.0
+      isobject: 3.0.1
+      mixin-deep: 1.3.2
+      pascalcase: 0.1.1
+    dev: true
+
   /base64-arraybuffer/0.1.4:
     resolution:
       { integrity: sha512-a1eIFi4R9ySrbiMuyTGx5e92uRH5tQY6kArNcFaKBUleIoLjdjBg7Zxm3Mqm3Kmkf27HLR/1fnxX9q8GQ7Iavg== }
@@ -5360,6 +9524,26 @@ packages:
     engines: { node: ^4.5.0 || >= 5.9 }
     dev: true
 
+  /better-opn/2.1.1:
+    resolution:
+      { integrity: sha512-kIPXZS5qwyKiX/HcRvDYfmBQUa8XP17I0mYZZ0y4UhpYOSvtsLHDYqmomS+Mj20aDvD3knEiQ0ecQy2nhio3yA== }
+    engines: { node: '>8.0.0' }
+    dependencies:
+      open: 7.4.2
+    dev: true
+
+  /big-integer/1.6.51:
+    resolution:
+      { integrity: sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg== }
+    engines: { node: '>=0.6' }
+    dev: true
+    optional: true
+
+  /big.js/5.2.2:
+    resolution:
+      { integrity: sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ== }
+    dev: true
+
   /bignumber.js/9.0.0:
     resolution:
       { integrity: sha512-t/OYhhJ2SD+YGBQcjY8GzzDHEk9f3nerxjtfa6tlMXfe7frs/WozhvCNoGvpM0P3bNf3Gq5ZRMlGr5f3r4/N8A== }
@@ -5369,11 +9553,27 @@ packages:
       { integrity: sha512-GAcQvbpsM0pUb0zw1EI0KhQEZ+lRwR5fYaAp3vPOYuP7aDvGy6cVN6XHLauvF8SOga2y0dcLcjt3iQDTSEliyw== }
     dev: false
 
+  /binary-extensions/1.13.1:
+    resolution:
+      { integrity: sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw== }
+    engines: { node: '>=0.10.0' }
+    dev: true
+    optional: true
+
   /binary-extensions/2.2.0:
     resolution:
       { integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA== }
     engines: { node: '>=8' }
 
+  /bindings/1.5.0:
+    resolution:
+      { integrity: sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ== }
+    requiresBuild: true
+    dependencies:
+      file-uri-to-path: 1.0.0
+    dev: true
+    optional: true
+
   /bl/4.1.0:
     resolution:
       { integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w== }
@@ -5393,8 +9593,16 @@ packages:
   /bluebird/3.7.2:
     resolution:
       { integrity: sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg== }
-    dev: false
-    optional: true
+
+  /bn.js/4.12.0:
+    resolution:
+      { integrity: sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA== }
+    dev: true
+
+  /bn.js/5.2.1:
+    resolution:
+      { integrity: sha512-eXRvHzWyYPBuB4NBy0cmYQjGitUrtqwbvlzP3G6VFnNRbsZQIxQ10PbKKHt8gZ/HW/D/747aDl+QkDqg3KQLMQ== }
+    dev: true
 
   /body-parser/1.20.0:
     resolution:
@@ -5425,6 +9633,29 @@ packages:
       { integrity: sha512-AlcaJBi/pqqJBIQ8U9Mcpc9i8Aqxn88Skv5d+xBX006BY5u8N3mGLHa5Lgppa7L/HfwgwLgZ6NYs+Ag6uUmJRA== }
     dev: false
 
+  /boxen/5.1.2:
+    resolution:
+      { integrity: sha512-9gYgQKXx+1nP8mP7CzFyaUARhg7D3n1dF/FnErWmu9l6JvGpNUN278h0aSb+QjoiKSWG+iZ3uHrcqk0qrY9RQQ== }
+    engines: { node: '>=10' }
+    dependencies:
+      ansi-align: 3.0.1
+      camelcase: 6.3.0
+      chalk: 4.1.2
+      cli-boxes: 2.2.1
+      string-width: 4.2.3
+      type-fest: 0.20.2
+      widest-line: 3.1.0
+      wrap-ansi: 7.0.0
+    dev: true
+
+  /bplist-parser/0.1.1:
+    resolution:
+      { integrity: sha512-2AEM0FXy8ZxVLBuqX0hqt1gDwcnz2zygEkQ6zaD5Wko/sB9paUNwlpawrFtKeHUAQUOzjVy9AO4oeonqIHKA9Q== }
+    dependencies:
+      big-integer: 1.6.51
+    dev: true
+    optional: true
+
   /brace-expansion/1.1.11:
     resolution:
       { integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA== }
@@ -5432,6 +9663,25 @@ packages:
       balanced-match: 1.0.2
       concat-map: 0.0.1
 
+  /braces/2.3.2:
+    resolution:
+      { integrity: sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      arr-flatten: 1.1.0
+      array-unique: 0.3.2
+      extend-shallow: 2.0.1
+      fill-range: 4.0.0
+      isobject: 3.0.1
+      repeat-element: 1.1.4
+      snapdragon: 0.8.2
+      snapdragon-node: 2.1.1
+      split-string: 3.1.0
+      to-regex: 3.0.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /braces/3.0.2:
     resolution:
       { integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A== }
@@ -5439,11 +9689,77 @@ packages:
     dependencies:
       fill-range: 7.0.1
 
+  /brorand/1.1.0:
+    resolution:
+      { integrity: sha512-cKV8tMCEpQs4hK/ik71d6LrPOnpkpGBR0wzxqr68g2m/LB2GxVYQroAjMJZRVM1Y4BCjCKc3vAamxSzOY2RP+w== }
+    dev: true
+
   /browser-process-hrtime/1.0.0:
     resolution:
       { integrity: sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow== }
     dev: true
 
+  /browserify-aes/1.2.0:
+    resolution:
+      { integrity: sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA== }
+    dependencies:
+      buffer-xor: 1.0.3
+      cipher-base: 1.0.4
+      create-hash: 1.2.0
+      evp_bytestokey: 1.0.3
+      inherits: 2.0.4
+      safe-buffer: 5.2.1
+    dev: true
+
+  /browserify-cipher/1.0.1:
+    resolution:
+      { integrity: sha512-sPhkz0ARKbf4rRQt2hTpAHqn47X3llLkUGn+xEJzLjwY8LRs2p0v7ljvI5EyoRO/mexrNunNECisZs+gw2zz1w== }
+    dependencies:
+      browserify-aes: 1.2.0
+      browserify-des: 1.0.2
+      evp_bytestokey: 1.0.3
+    dev: true
+
+  /browserify-des/1.0.2:
+    resolution:
+      { integrity: sha512-BioO1xf3hFwz4kc6iBhI3ieDFompMhrMlnDFC4/0/vd5MokpuAc3R+LYbwTA9A5Yc9pq9UYPqffKpW2ObuwX5A== }
+    dependencies:
+      cipher-base: 1.0.4
+      des.js: 1.0.1
+      inherits: 2.0.4
+      safe-buffer: 5.2.1
+    dev: true
+
+  /browserify-rsa/4.1.0:
+    resolution:
+      { integrity: sha512-AdEER0Hkspgno2aR97SAf6vi0y0k8NuOpGnVH3O99rcA5Q6sh8QxcngtHuJ6uXwnfAXNM4Gn1Gb7/MV1+Ymbog== }
+    dependencies:
+      bn.js: 5.2.1
+      randombytes: 2.1.0
+    dev: true
+
+  /browserify-sign/4.2.1:
+    resolution:
+      { integrity: sha512-/vrA5fguVAKKAVTNJjgSm1tRQDHUU6DbwO9IROu/0WAzC8PKhucDSh18J0RMvVeHAn5puMd+QHC2erPRNf8lmg== }
+    dependencies:
+      bn.js: 5.2.1
+      browserify-rsa: 4.1.0
+      create-hash: 1.2.0
+      create-hmac: 1.1.7
+      elliptic: 6.5.4
+      inherits: 2.0.4
+      parse-asn1: 5.1.6
+      readable-stream: 3.6.0
+      safe-buffer: 5.2.1
+    dev: true
+
+  /browserify-zlib/0.2.0:
+    resolution:
+      { integrity: sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA== }
+    dependencies:
+      pako: 1.0.11
+    dev: true
+
   /browserslist/4.21.2:
     resolution:
       { integrity: sha512-MonuOgAtUB46uP5CezYbRaYKBNt2LxP0yX+Pmj4LkcDFGkn9Cbpi83d9sCjwQDErXsIJSzY5oKGDbgOlF/LPAA== }
@@ -5455,6 +9771,18 @@ packages:
       node-releases: 2.0.6
       update-browserslist-db: 1.0.4_browserslist@4.21.2
 
+  /browserslist/4.21.3:
+    resolution:
+      { integrity: sha512-898rgRXLAyRkM1GryrrBHGkqA5hlpkV5MhtZwg9QXeiyLUYs2k00Un05aX5l2/yJIOObYKOpS2JNo8nJDE7fWQ== }
+    engines: { node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7 }
+    hasBin: true
+    dependencies:
+      caniuse-lite: 1.0.30001387
+      electron-to-chromium: 1.4.239
+      node-releases: 2.0.6
+      update-browserslist-db: 1.0.5_browserslist@4.21.3
+    dev: true
+
   /bs-logger/0.2.6:
     resolution:
       { integrity: sha512-pd8DCoxmbgc7hyPKOvxtqNcjYoOsABPQdcCUjGp3d42VR2CX1ORhk2A87oqqu5R1kk+76nsxZupkmyd+MVtCog== }
@@ -5501,14 +9829,18 @@ packages:
       { integrity: sha512-a7ZpuTZU1TRtnwyCNW3I5dc0wWNC3VR9S++Ewyk2HHZdrO3CQJqSpd+95Us590V6AL7JqUAH2IwZ/398PmNFgw== }
     engines: { node: '>=4' }
 
+  /buffer-xor/1.0.3:
+    resolution:
+      { integrity: sha512-571s0T7nZWK6vB67HI5dyUF7wXiNcfaPPPTl6zYCNApANjIvYJTg7hlud/+cJpdAhS7dVzqMLmfhfHR3rAcOjQ== }
+    dev: true
+
   /buffer/4.9.2:
     resolution:
       { integrity: sha512-xq+q3SRMOxGivLhBNaUdC64hDTQwejJ+H0T/NB1XMtTVEwNTrfFF3gAxiyW0Bu/xWEGhjVKgUcMhCrUy2+uCWg== }
     dependencies:
       base64-js: 1.5.1
-      ieee754: 1.1.13
+      ieee754: 1.2.1
       isarray: 1.0.0
-    dev: false
 
   /buffer/5.7.1:
     resolution:
@@ -5530,6 +9862,11 @@ packages:
     engines: { node: '>=6' }
     dev: false
 
+  /builtin-status-codes/3.0.0:
+    resolution:
+      { integrity: sha512-HpGFw18DgFWlncDfjTa2rcQ4W88O1mC8e8yZ2AvQY5KDaktSTwo+KRf6nHK6FRI5FyRyb/5T6+TSxfP7QyGsmQ== }
+    dev: true
+
   /busboy/1.6.0:
     resolution:
       { integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA== }
@@ -5538,6 +9875,12 @@ packages:
       streamsearch: 1.1.0
     dev: false
 
+  /bytes/3.0.0:
+    resolution:
+      { integrity: sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw== }
+    engines: { node: '>= 0.8' }
+    dev: true
+
   /bytes/3.1.2:
     resolution:
       { integrity: sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg== }
@@ -5563,6 +9906,27 @@ packages:
       yargs-parser: 20.2.9
     dev: true
 
+  /cacache/12.0.4:
+    resolution:
+      { integrity: sha512-a0tMB40oefvuInr4Cwb3GerbL9xTj1D5yg0T5xrjGCGyfvbxseIXX7BAO/u/hIXdafzOI5JC3wDwHyf24buOAQ== }
+    dependencies:
+      bluebird: 3.7.2
+      chownr: 1.1.4
+      figgy-pudding: 3.5.2
+      glob: 7.2.3
+      graceful-fs: 4.2.10
+      infer-owner: 1.0.4
+      lru-cache: 5.1.1
+      mississippi: 3.0.0
+      mkdirp: 0.5.6
+      move-concurrently: 1.0.1
+      promise-inflight: 1.0.1_bluebird@3.7.2
+      rimraf: 2.7.1
+      ssri: 6.0.2
+      unique-filename: 1.1.1
+      y18n: 4.0.3
+    dev: true
+
   /cacache/15.3.0:
     resolution:
       { integrity: sha512-VVdYzXEn+cnbXpFgWs5hTT7OScegHVmLhJIR8Ufqk3iFD6A6j5iSX1KuBTfNEv4tdJWE2PzA6IVFtcLC7fN9wQ== }
@@ -5588,7 +9952,22 @@ packages:
       unique-filename: 1.1.1
     transitivePeerDependencies:
       - bluebird
-    optional: true
+
+  /cache-base/1.0.1:
+    resolution:
+      { integrity: sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      collection-visit: 1.0.0
+      component-emitter: 1.3.0
+      get-value: 2.0.6
+      has-value: 1.0.0
+      isobject: 3.0.1
+      set-value: 2.0.1
+      to-object-path: 0.3.0
+      union-value: 1.0.1
+      unset-value: 1.0.0
+    dev: true
 
   /cacheable-lookup/2.0.1:
     resolution:
@@ -5630,6 +10009,30 @@ packages:
       { integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ== }
     engines: { node: '>=6' }
 
+  /camel-case/4.1.2:
+    resolution:
+      { integrity: sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw== }
+    dependencies:
+      pascal-case: 3.1.2
+      tslib: 2.4.0
+    dev: true
+
+  /camelcase-css/2.0.1:
+    resolution:
+      { integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA== }
+    engines: { node: '>= 6' }
+    dev: true
+
+  /camelcase-keys/2.1.0:
+    resolution:
+      { integrity: sha512-bA/Z/DERHKqoEOrp+qeGKw1QlvEQkGZSc0XaY6VnTxZr+Kv1G5zFwttpjv8qxZ/sBPT4nthwZaAcsAZTJlSKXQ== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      camelcase: 2.1.1
+      map-obj: 1.0.1
+    dev: true
+    optional: true
+
   /camelcase-keys/6.2.2:
     resolution:
       { integrity: sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg== }
@@ -5640,6 +10043,13 @@ packages:
       quick-lru: 4.0.1
     dev: true
 
+  /camelcase/2.1.1:
+    resolution:
+      { integrity: sha512-DLIsRzJVBQu72meAKPkWQOLcujdXT32hwdfnkI1frSiSRMK1MofjKHf+MEx0SB6fjEFXL8fBDv1dKymBlOp4Qw== }
+    engines: { node: '>=0.10.0' }
+    dev: true
+    optional: true
+
   /camelcase/5.3.1:
     resolution:
       { integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg== }
@@ -5671,16 +10081,40 @@ packages:
     resolution:
       { integrity: sha512-yy7XLWCubDobokgzudpkKux8e0UOOnLHE6mlNJBzT3lZJz6s5atSEzjoL+fsCPkI0G8MP5uVdDx1ur/fXEWkZA== }
 
+  /caniuse-lite/1.0.30001387:
+    resolution:
+      { integrity: sha512-fKDH0F1KOJvR+mWSOvhj8lVRr/Q/mc5u5nabU2vi1/sgvlSqEsE8dOq0Hy/BqVbDkCYQPRRHB1WRjW6PGB/7PA== }
+    dev: true
+
+  /capture-exit/2.0.0:
+    resolution:
+      { integrity: sha512-PiT/hQmTonHhl/HFGN+Lx3JJUznrVYJ3+AQsnthneZbvW7x+f08Tk7yLJTLEOUvBTbduLeeBkxEaYXUOUrRq6g== }
+    engines: { node: 6.* || 8.* || >= 10.* }
+    dependencies:
+      rsvp: 4.8.5
+    dev: true
+
   /caret-pos/2.0.0:
     resolution:
       { integrity: sha512-cOIiBS1SjzXg+LXSiQAzGg89dHDKq/y4c30+tB5hkVN7GbtXh1BNypOmjti4LwAWQrvP4y+bNG7RJFxLGoL3bA== }
     dev: true
 
+  /case-sensitive-paths-webpack-plugin/2.4.0:
+    resolution:
+      { integrity: sha512-roIFONhcxog0JSSWbvVAh3OocukmSgpqOH6YpMkCvav/ySIV3JKg4Dc8vYtQjYi/UxpNE36r/9v+VqTQqgkYmw== }
+    engines: { node: '>=4' }
+    dev: true
+
   /caseless/0.12.0:
     resolution:
       { integrity: sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw== }
     dev: true
 
+  /ccount/1.1.0:
+    resolution:
+      { integrity: sha512-vlNK021QdI7PNeiUh/lKkC/mNHHfV0m/Ad5JoI0TYtlBnJAslM/JIkm/tGC88bkLIwO6OQ5uV6ztS6kVAtCDlg== }
+    dev: true
+
   /chai/4.3.6:
     resolution:
       { integrity: sha512-bbcp3YfHCUzMOvKqsztczerVgBKSsEijCySNlHHbX3VG1nskvqjz5Rfso1gGwD6w6oOV3eI60pKuMOV5MV7p3Q== }
@@ -5739,6 +10173,28 @@ packages:
     engines: { node: '>=10' }
     dev: true
 
+  /character-entities-legacy/1.1.4:
+    resolution:
+      { integrity: sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA== }
+    dev: true
+
+  /character-entities/1.2.4:
+    resolution:
+      { integrity: sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw== }
+    dev: true
+
+  /character-parser/2.2.0:
+    resolution:
+      { integrity: sha512-+UqJQjFEFaTAs3bNsF2j2kEN1baG/zghZbdqoYEDxGZtJo9LBzl1A+m0D4n3qKx8N2FNv8/Xp6yV9mQmBuptaw== }
+    dependencies:
+      is-regex: 1.1.4
+    dev: true
+
+  /character-reference-invalid/1.1.4:
+    resolution:
+      { integrity: sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg== }
+    dev: true
+
   /chardet/0.7.0:
     resolution:
       { integrity: sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA== }
@@ -5749,6 +10205,30 @@ packages:
       { integrity: sha512-BrgHpW9NURQgzoNyjfq0Wu6VFO6D7IZEmJNdtgNqpzGG8RuNFHt2jQxWlAs4HMe119chBnv+34syEZtc6IhLtA== }
     dev: true
 
+  /chokidar/2.1.8:
+    resolution:
+      { integrity: sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg== }
+    deprecated:
+      Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
+    dependencies:
+      anymatch: 2.0.0
+      async-each: 1.0.3
+      braces: 2.3.2
+      glob-parent: 3.1.0
+      inherits: 2.0.4
+      is-binary-path: 1.0.1
+      is-glob: 4.0.3
+      normalize-path: 3.0.0
+      path-is-absolute: 1.0.1
+      readdirp: 2.2.1
+      upath: 1.2.0
+    optionalDependencies:
+      fsevents: 1.2.13
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+    optional: true
+
   /chokidar/3.5.3:
     resolution:
       { integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw== }
@@ -5773,21 +10253,65 @@ packages:
       { integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ== }
     engines: { node: '>=10' }
 
+  /chrome-trace-event/1.0.3:
+    resolution:
+      { integrity: sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg== }
+    engines: { node: '>=6.0' }
+    dev: true
+
+  /ci-info/2.0.0:
+    resolution:
+      { integrity: sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ== }
+    dev: true
+
   /ci-info/3.3.2:
     resolution:
       { integrity: sha512-xmDt/QIAdeZ9+nfdPsaBCpMvHNLFiLdjj59qjqn+6iPe6YmHGQ35sBnQ8uslRBXFmXkiZQOJRjvQeoGppoTjjg== }
     dev: true
 
+  /cipher-base/1.0.4:
+    resolution:
+      { integrity: sha512-Kkht5ye6ZGmwv40uUDZztayT2ThLQGfnj/T71N/XzeZeo3nf8foyW7zGTsPYkEya3m5f3cAypH+qe7YOrM1U2Q== }
+    dependencies:
+      inherits: 2.0.4
+      safe-buffer: 5.2.1
+    dev: true
+
   /cjs-module-lexer/1.2.2:
     resolution:
       { integrity: sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA== }
     dev: true
 
+  /class-utils/0.3.6:
+    resolution:
+      { integrity: sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      arr-union: 3.1.0
+      define-property: 0.2.5
+      isobject: 3.0.1
+      static-extend: 0.1.2
+    dev: true
+
+  /clean-css/4.2.4:
+    resolution:
+      { integrity: sha512-EJUDT7nDVFDvaQgAo2G/PJvxmp1o/c6iXLbswsBbUFXi1Nr+AjA2cKmfbKDMjMvzEe75g3P6JkaDDAKk96A85A== }
+    engines: { node: '>= 4.0' }
+    dependencies:
+      source-map: 0.6.1
+    dev: true
+
   /clean-stack/2.2.0:
     resolution:
       { integrity: sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A== }
     engines: { node: '>=6' }
 
+  /cli-boxes/2.2.1:
+    resolution:
+      { integrity: sha512-y4coMcylgSCdVinjiDBuR8PCC2bLjyGTwEmPb9NHR/QaNU6EUOXcTY/s6VjGMD6ENSEaeQYHCY0GNGS5jfMwPw== }
+    engines: { node: '>=6' }
+    dev: true
+
   /cli-cursor/2.1.0:
     resolution:
       { integrity: sha512-8lgKz8LmCRYZZQDpRyT2m5rKJ08TnU4tR9FFFW2rxpxR1FzWi4PQ/NfyODchAatHaUgnSPVcx/R5w6NuTBzFiw== }
@@ -5809,6 +10333,16 @@ packages:
     engines: { node: '>=6' }
     dev: false
 
+  /cli-table3/0.6.2:
+    resolution:
+      { integrity: sha512-QyavHCaIC80cMivimWu4aWHilIpiDpfm3hGmqAmXVL1UsnbLuBSMd21hTX6VY4ZSDSM73ESLeF8TOYId3rBTbw== }
+    engines: { node: 10.* || >= 12.* }
+    dependencies:
+      string-width: 4.2.3
+    optionalDependencies:
+      '@colors/colors': 1.5.0
+    dev: true
+
   /cli-truncate/0.2.1:
     resolution:
       { integrity: sha512-f4r4yJnbT++qUPI9NR4XLDLq41gQ+uqnPItWG0F5ZkehuNiTTa3EY0S4AqTSUOeJ7/zU41oWPQSNkW5BqPL9bg== }
@@ -5877,8 +10411,6 @@ packages:
       is-plain-object: 2.0.4
       kind-of: 6.0.3
       shallow-clone: 3.0.1
-    dev: false
-    optional: true
 
   /clone-response/1.0.2:
     resolution:
@@ -5893,6 +10425,12 @@ packages:
     engines: { node: '>=0.8' }
     dev: false
 
+  /clone/2.1.2:
+    resolution:
+      { integrity: sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w== }
+    engines: { node: '>=0.8' }
+    dev: true
+
   /cluster-key-slot/1.1.0:
     resolution:
       { integrity: sha512-2Nii8p3RwAPiFwsnZvukotvow2rIHM+yQ6ZcBXGHdniadkYGZYiGmkHJIbZPIV9nfv7m/U1IPMVVcAhoWFeklw== }
@@ -5916,11 +10454,25 @@ packages:
       { integrity: sha512-fqr6CtDQdJ6iNMbD8NX2gH2G876nNDk+TO1rrYkgWnqQdO3O1Xa9tK6q+psqhJJgE5SpbaDcgdfLmukoUVE8pg== }
     dev: true
 
+  /collapse-white-space/1.0.6:
+    resolution:
+      { integrity: sha512-jEovNnrhMuqyCcjfEJA56v0Xq8SkIoPKDyaHahwo3POf4qcSXqMYuwNcOTzp74vTsR9Tn08z4MxWqAhcekogkQ== }
+    dev: true
+
   /collect-v8-coverage/1.0.1:
     resolution:
       { integrity: sha512-iBPtljfCNcTKNAto0KEtDfZ3qzjJvqE3aTGZsbhjSBlorqpXJlaWWtPO35D+ZImoC3KWejX64o+yPGxhWSTzfg== }
     dev: true
 
+  /collection-visit/1.0.0:
+    resolution:
+      { integrity: sha512-lNkKvzEeMBBjUGHZ+q6z9pSJla0KWAQPvtzhEV9+iGyQYG+pBpl7xKDhxoNSOZH2hhv0v5k0y2yAM4o4SjoSkw== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      map-visit: 1.0.0
+      object-visit: 1.0.1
+    dev: true
+
   /color-convert/1.9.3:
     resolution:
       { integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg== }
@@ -5978,10 +10530,14 @@ packages:
     dependencies:
       delayed-stream: 1.0.0
 
+  /comma-separated-tokens/1.0.8:
+    resolution:
+      { integrity: sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw== }
+    dev: true
+
   /commander/2.20.3:
     resolution:
       { integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ== }
-    dev: false
 
   /commander/4.1.1:
     resolution:
@@ -6020,7 +10576,6 @@ packages:
   /commondir/1.0.1:
     resolution:
       { integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg== }
-    dev: false
 
   /component-emitter/1.3.0:
     resolution:
@@ -6040,7 +10595,22 @@ packages:
     engines: { node: '>= 0.6' }
     dependencies:
       mime-db: 1.52.0
-    dev: false
+
+  /compression/1.7.4:
+    resolution:
+      { integrity: sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ== }
+    engines: { node: '>= 0.8.0' }
+    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
+    dev: true
 
   /concat-map/0.0.1:
     resolution:
@@ -6085,6 +10655,11 @@ packages:
     dev: false
     optional: true
 
+  /console-browserify/1.2.0:
+    resolution:
+      { integrity: sha512-ZMkYO/LkF17QvCPqM0gxw8yUzigAOZOSWSHg91FH6orS7vcEj5dVZTidN2fQ14yBSdg97RqhSNwLUXInd52OTA== }
+    dev: true
+
   /console-control-strings/1.1.0:
     resolution:
       { integrity: sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ== }
@@ -6260,6 +10835,19 @@ packages:
     dev: false
     optional: true
 
+  /constantinople/4.0.1:
+    resolution:
+      { integrity: sha512-vCrqcSIq4//Gx74TXXCGnHpulY1dskqLTFGDmhrGxzeXL8lF8kvXv6mpNWlJj1uD4DW23D4ljAqbY4RRaaUZIw== }
+    dependencies:
+      '@babel/parser': 7.18.13
+      '@babel/types': 7.18.13
+    dev: true
+
+  /constants-browserify/1.0.0:
+    resolution:
+      { integrity: sha512-xFxOwqIzR/e1k1gLiWEophSCMqXcwVHIH7akf7b/vxcUeGunlj3hvZaaqxwHsTgn+IndtkQJgSztIDWeumWJDQ== }
+    dev: true
+
   /content-disposition/0.5.4:
     resolution:
       { integrity: sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ== }
@@ -6313,6 +10901,24 @@ packages:
     resolution:
       { integrity: sha512-JxbCBUdrfr6AQjOXrxoTvAMJO4HBTUIlBzslcJPAz+/KT8yk53fXun51u+RenNYvad/+Vc2DIz5o9UxlCDymFQ== }
 
+  /copy-concurrently/1.0.5:
+    resolution:
+      { integrity: sha512-f2domd9fsVDFtaFcbaRZuYXwtdmnzqbADSwhSWYxYB/Q8zsdUUFMXVRwXGDMWmbEzAn1kdRrtI1T/KTFOL4X2A== }
+    dependencies:
+      aproba: 1.2.0
+      fs-write-stream-atomic: 1.0.10
+      iferr: 0.1.5
+      mkdirp: 0.5.6
+      rimraf: 2.7.1
+      run-queue: 1.0.3
+    dev: true
+
+  /copy-descriptor/0.1.1:
+    resolution:
+      { integrity: sha512-XgZ0pFcakEUlbwQEVNg3+QAis1FyTL3Qel9FYy8pSkQqoG3PNoT0bOCQtOXcOkur21r2Eq2kI+IE+gsmAEVlYw== }
+    engines: { node: '>=0.10.0' }
+    dev: true
+
   /copyfiles/2.4.1:
     resolution:
       { integrity: sha512-fereAvAvxDrQDOXybk3Qu3dPbOoKoysFMWtkY3mv5BsL8//OSZVL5DCLYqgRfY5cWirgRzlC+WSrxp6Bo3eNZg== }
@@ -6327,6 +10933,20 @@ packages:
       yargs: 16.2.0
     dev: true
 
+  /core-js-compat/3.25.0:
+    resolution:
+      { integrity: sha512-extKQM0g8/3GjFx9US12FAgx8KJawB7RCQ5y8ipYLbmfzEzmFRWdDjIlxDx82g7ygcNG85qMVUSRyABouELdow== }
+    dependencies:
+      browserslist: 4.21.3
+      semver: 7.0.0
+    dev: true
+
+  /core-js/3.25.0:
+    resolution:
+      { integrity: sha512-CVU1xvJEfJGhyCpBrzzzU1kjCfgsGUxhEvwUV2e/cOedYWHdmluamx+knDnmhqALddMG16fZvIqvs9aijsHHaA== }
+    requiresBuild: true
+    dev: true
+
   /core-util-is/1.0.2:
     resolution:
       { integrity: sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ== }
@@ -6344,6 +10964,18 @@ packages:
       object-assign: 4.1.1
       vary: 1.1.2
 
+  /cosmiconfig/6.0.0:
+    resolution:
+      { integrity: sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg== }
+    engines: { node: '>=8' }
+    dependencies:
+      '@types/parse-json': 4.0.0
+      import-fresh: 3.3.0
+      parse-json: 5.2.0
+      path-type: 4.0.0
+      yaml: 1.10.2
+    dev: true
+
   /cosmiconfig/7.0.1:
     resolution:
       { integrity: sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ== }
@@ -6354,7 +10986,66 @@ packages:
       parse-json: 5.2.0
       path-type: 4.0.0
       yaml: 1.10.2
-    dev: false
+
+  /cp-file/7.0.0:
+    resolution:
+      { integrity: sha512-0Cbj7gyvFVApzpK/uhCtQ/9kE9UnYpxMzaq5nQQC/Dh4iaj5fxp7iEFIullrYwzj8nf0qnsI1Qsx34hAeAebvw== }
+    engines: { node: '>=8' }
+    dependencies:
+      graceful-fs: 4.2.10
+      make-dir: 3.1.0
+      nested-error-stacks: 2.1.1
+      p-event: 4.2.0
+    dev: true
+
+  /cpy/8.1.2:
+    resolution:
+      { integrity: sha512-dmC4mUesv0OYH2kNFEidtf/skUwv4zePmGeepjyyJ0qTo5+8KhA1o99oIAwVVLzQMAeDJml74d6wPPKb6EZUTg== }
+    engines: { node: '>=8' }
+    dependencies:
+      arrify: 2.0.1
+      cp-file: 7.0.0
+      globby: 9.2.0
+      has-glob: 1.0.0
+      junk: 3.1.0
+      nested-error-stacks: 2.1.1
+      p-all: 2.1.0
+      p-filter: 2.1.0
+      p-map: 3.0.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /create-ecdh/4.0.4:
+    resolution:
+      { integrity: sha512-mf+TCx8wWc9VpuxfP2ht0iSISLZnt0JgWlrOKZiNqyUZWnjIaCIVNQArMHnCZKfEYRg6IM7A+NeJoN8gf/Ws0A== }
+    dependencies:
+      bn.js: 4.12.0
+      elliptic: 6.5.4
+    dev: true
+
+  /create-hash/1.2.0:
+    resolution:
+      { integrity: sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg== }
+    dependencies:
+      cipher-base: 1.0.4
+      inherits: 2.0.4
+      md5.js: 1.3.5
+      ripemd160: 2.0.2
+      sha.js: 2.4.11
+    dev: true
+
+  /create-hmac/1.1.7:
+    resolution:
+      { integrity: sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg== }
+    dependencies:
+      cipher-base: 1.0.4
+      create-hash: 1.2.0
+      inherits: 2.0.4
+      ripemd160: 2.0.2
+      safe-buffer: 5.2.1
+      sha.js: 2.4.11
+    dev: true
 
   /create-require/1.1.1:
     resolution:
@@ -6396,6 +11087,23 @@ packages:
       shebang-command: 2.0.0
       which: 2.0.2
 
+  /crypto-browserify/3.12.0:
+    resolution:
+      { integrity: sha512-fz4spIh+znjO2VjL+IdhEpRJ3YN6sMzITSBijk6FK2UvTqruSQW+/cCZTSNsMiZNvUeq0CqurF+dAbyiGOY6Wg== }
+    dependencies:
+      browserify-cipher: 1.0.1
+      browserify-sign: 4.2.1
+      create-ecdh: 4.0.4
+      create-hash: 1.2.0
+      create-hmac: 1.1.7
+      diffie-hellman: 5.0.3
+      inherits: 2.0.4
+      pbkdf2: 3.1.2
+      public-encrypt: 4.0.3
+      randombytes: 2.1.0
+      randomfill: 1.0.4
+    dev: true
+
   /crypto-random-string/2.0.0:
     resolution:
       { integrity: sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA== }
@@ -6412,6 +11120,47 @@ packages:
       postcss: 8.4.14
     dev: false
 
+  /css-loader/3.6.0_webpack@4.46.0:
+    resolution:
+      { integrity: sha512-M5lSukoWi1If8dhQAUCvj4H8vUt3vOnwbQBH9DdTm/s4Ym2B/3dPMtYZeJmq7Q3S3Pa+I94DcZ7pc9bP14cWIQ== }
+    engines: { node: '>= 8.9.0' }
+    peerDependencies:
+      webpack: ^4.0.0 || ^5.0.0
+    dependencies:
+      camelcase: 5.3.1
+      cssesc: 3.0.0
+      icss-utils: 4.1.1
+      loader-utils: 1.4.0
+      normalize-path: 3.0.0
+      postcss: 7.0.39
+      postcss-modules-extract-imports: 2.0.0
+      postcss-modules-local-by-default: 3.0.3
+      postcss-modules-scope: 2.2.0
+      postcss-modules-values: 3.0.0
+      postcss-value-parser: 4.2.0
+      schema-utils: 2.7.1
+      semver: 6.3.0
+      webpack: 4.46.0
+    dev: true
+
+  /css-loader/6.7.1_webpack@5.72.0:
+    resolution:
+      { integrity: sha512-yB5CNFa14MbPJcomwNh3wLThtkZgcNyI2bNMRt8iE5Z8Vwl7f8vQXFAzn2HDOJvtDq2NTZBUGMSUNNyrv3/+cw== }
+    engines: { node: '>= 12.13.0' }
+    peerDependencies:
+      webpack: ^5.0.0
+    dependencies:
+      icss-utils: 5.1.0_postcss@8.4.14
+      postcss: 8.4.14
+      postcss-modules-extract-imports: 3.0.0_postcss@8.4.14
+      postcss-modules-local-by-default: 4.0.0_postcss@8.4.14
+      postcss-modules-scope: 3.0.0_postcss@8.4.14
+      postcss-modules-values: 4.0.0_postcss@8.4.14
+      postcss-value-parser: 4.2.0
+      semver: 7.3.7
+      webpack: 5.72.0
+    dev: true
+
   /css-select/4.3.0:
     resolution:
       { integrity: sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ== }
@@ -6421,7 +11170,6 @@ packages:
       domhandler: 4.3.1
       domutils: 2.8.0
       nth-check: 2.1.1
-    dev: false
 
   /css-tree/1.1.3:
     resolution:
@@ -6436,7 +11184,6 @@ packages:
     resolution:
       { integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw== }
     engines: { node: '>= 6' }
-    dev: false
 
   /css.escape/1.5.1:
     resolution:
@@ -6555,6 +11302,20 @@ packages:
       minimist: 1.2.6
     dev: false
 
+  /currently-unhandled/0.4.1:
+    resolution:
+      { integrity: sha512-/fITjgjGU50vjQ4FH6eUoYu+iUoUKIXws2hL15JJpIR+BbTxaXQsMuuyjtNh2WqsSBS5nsaZHFsFecyw5CCAng== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      array-find-index: 1.0.2
+    dev: true
+    optional: true
+
+  /cyclist/1.0.1:
+    resolution:
+      { integrity: sha512-NJGVKPS81XejHcLhaLJS7plab0fK3slPh11mESeeDq2W4ZI5kUKK/LRRdVDvjJseojbPB7ZwjnyOybg3Igea/A== }
+    dev: true
+
   /data-uri-to-buffer/3.0.1:
     resolution:
       { integrity: sha512-WboRycPNsVw3B3TL559F7kuBUM4d8CgMEvk6xEJlOp7OBPjt6G7z8WMWlD2rOFZLk6OYfFIUGsCOWzcQH9K2og== }
@@ -6599,6 +11360,18 @@ packages:
     dependencies:
       ms: 2.0.0
 
+  /debug/3.2.7:
+    resolution:
+      { integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ== }
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+    dependencies:
+      ms: 2.1.3
+    dev: true
+
   /debug/3.2.7_supports-color@5.5.0:
     resolution:
       { integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ== }
@@ -6648,7 +11421,6 @@ packages:
     resolution:
       { integrity: sha512-hjf+xovcEn31w/EUYdTXQh/8smFL/dzYjohQGEIgjyNavaJfBY2p5F527Bo1VPATxv0VYTUC2bOcXvqFwk78Og== }
     engines: { node: '>=0.10' }
-    dev: false
 
   /decompress-response/5.0.0:
     resolution:
@@ -6707,6 +11479,19 @@ packages:
       { integrity: sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg== }
     engines: { node: '>=0.10.0' }
 
+  /default-browser-id/1.0.4:
+    resolution:
+      { integrity: sha512-qPy925qewwul9Hifs+3sx1ZYn14obHxpkX+mPD369w4Rzg+YkJBgi3SOvwUq81nWSjqGUegIgEPwD8u+HUnxlw== }
+    engines: { node: '>=0.10.0' }
+    hasBin: true
+    requiresBuild: true
+    dependencies:
+      bplist-parser: 0.1.1
+      meow: 3.7.0
+      untildify: 2.1.0
+    dev: true
+    optional: true
+
   /defaults/1.0.3:
     resolution:
       { integrity: sha512-s82itHOnYrN0Ib8r+z7laQz3sdE+4FP3d9Q7VLO7U+KRT+CR0GsWuyHxzdAY82I7cXv0G/twrqomTJLOssO5HA== }
@@ -6720,6 +11505,12 @@ packages:
     engines: { node: '>=10' }
     dev: true
 
+  /define-lazy-prop/2.0.0:
+    resolution:
+      { integrity: sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og== }
+    engines: { node: '>=8' }
+    dev: true
+
   /define-properties/1.1.4:
     resolution:
       { integrity: sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA== }
@@ -6728,6 +11519,31 @@ packages:
       has-property-descriptors: 1.0.0
       object-keys: 1.1.1
 
+  /define-property/0.2.5:
+    resolution:
+      { integrity: sha512-Rr7ADjQZenceVOAKop6ALkkRAmH1A4Gx9hV/7ZujPUN2rkATqFO0JZLZInbAjpZYoJ1gUx8MRMQVkYemcbMSTA== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      is-descriptor: 0.1.6
+    dev: true
+
+  /define-property/1.0.0:
+    resolution:
+      { integrity: sha512-cZTYKFWspt9jZsMscWo8sc/5lbPC9Q0N5nBLgb+Yd915iL3udB1uFgS3B8YCx66UVHq018DAVFoee7x+gxggeA== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      is-descriptor: 1.0.2
+    dev: true
+
+  /define-property/2.0.2:
+    resolution:
+      { integrity: sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      is-descriptor: 1.0.2
+      isobject: 3.0.1
+    dev: true
+
   /delayed-stream/1.0.0:
     resolution:
       { integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ== }
@@ -6761,11 +11577,26 @@ packages:
       { integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw== }
     engines: { node: '>= 0.8' }
 
+  /des.js/1.0.1:
+    resolution:
+      { integrity: sha512-Q0I4pfFrv2VPd34/vfLrFOoRmlYj3OV50i7fskps1jZWK1kApMWWT9G6RRUeYedLcBDIhnSDaUvJMb3AhUlaEA== }
+    dependencies:
+      inherits: 2.0.4
+      minimalistic-assert: 1.0.1
+    dev: true
+
   /destroy/1.2.0:
     resolution:
       { integrity: sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg== }
     engines: { node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16 }
 
+  /detab/2.0.4:
+    resolution:
+      { integrity: sha512-8zdsQA5bIkoRECvCrNKPla84lyoR7DSAyf7p0YgXzBO9PDJx8KntPUay7NS6yp+KdxdVtiE5SpHKtbp2ZQyA9g== }
+    dependencies:
+      repeat-string: 1.6.1
+    dev: true
+
   /detect-libc/2.0.1:
     resolution:
       { integrity: sha512-463v3ZeIrcWtdgIg6vI6XUncguvr2TnGl4SzDXinkt9mSLpBJKXT3mW6xT3VQdDN11+WVs29pgvivTc4Lp8v+w== }
@@ -6777,6 +11608,26 @@ packages:
     engines: { node: '>=8' }
     dev: true
 
+  /detect-package-manager/2.0.1:
+    resolution:
+      { integrity: sha512-j/lJHyoLlWi6G1LDdLgvUtz60Zo5GEj+sVYtTVXnYLDPuzgC3llMxonXym9zIwhhUII8vjdw0LXxavpLqTbl1A== }
+    engines: { node: '>=12' }
+    dependencies:
+      execa: 5.1.1
+    dev: true
+
+  /detect-port/1.3.0:
+    resolution:
+      { integrity: sha512-E+B1gzkl2gqxt1IhUzwjrxBKRqx1UzC3WLONHinn8S3T6lwV/agVCyitiFOsGJ/eYuEUBvD71MZHy3Pv1G9doQ== }
+    engines: { node: '>= 4.2.1' }
+    hasBin: true
+    dependencies:
+      address: 1.2.0
+      debug: 2.6.9
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /dezalgo/1.0.3:
     resolution:
       { integrity: sha512-K7i4zNfT2kgQz3GylDw40ot9GAE47sFZ9EXHFSPP6zONLgH6kWXE0KWJchkbQJLBkRazq4APwZ4OwiFFlT95OQ== }
@@ -6813,11 +11664,28 @@ packages:
     engines: { node: '>=0.3.1' }
     dev: true
 
+  /diffie-hellman/5.0.3:
+    resolution:
+      { integrity: sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg== }
+    dependencies:
+      bn.js: 4.12.0
+      miller-rabin: 4.0.1
+      randombytes: 2.1.0
+    dev: true
+
   /dijkstrajs/1.0.2:
     resolution:
       { integrity: sha512-QV6PMaHTCNmKSeP6QoXhVTw9snc9VD8MulTT0Bd99Pacp4SS1cjcrYPgBPmibqKVtMJJfqC6XvOXgPMEEPH/fg== }
     dev: true
 
+  /dir-glob/2.2.2:
+    resolution:
+      { integrity: sha512-f9LBi5QWzIW3I6e//uxZoLBlUt9kcp66qo0sSCxL6YZKc75R1c4MFCoe/LaZiBGmgujvQdxc5Bn3QhfyvK5Hsw== }
+    engines: { node: '>=4' }
+    dependencies:
+      path-type: 3.0.0
+    dev: true
+
   /dir-glob/3.0.1:
     resolution:
       { integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA== }
@@ -6833,6 +11701,18 @@ packages:
       esutils: 2.0.3
     dev: true
 
+  /doctypes/1.1.0:
+    resolution:
+      { integrity: sha512-LLBi6pEqS6Do3EKQ3J0NqHWV5hhb78Pi8vvESYwyOy2c31ZEZVdtitdzsQsKb7878PEERhzUk0ftqGhG6Mz+pQ== }
+    dev: true
+
+  /dom-converter/0.2.0:
+    resolution:
+      { integrity: sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA== }
+    dependencies:
+      utila: 0.4.0
+    dev: true
+
   /dom-serializer/1.4.1:
     resolution:
       { integrity: sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag== }
@@ -6841,6 +11721,17 @@ packages:
       domhandler: 4.3.1
       entities: 2.2.0
 
+  /dom-walk/0.1.2:
+    resolution:
+      { integrity: sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w== }
+    dev: true
+
+  /domain-browser/1.2.0:
+    resolution:
+      { integrity: sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA== }
+    engines: { node: '>=0.4', npm: '>=1.2' }
+    dev: true
+
   /domelementtype/2.3.0:
     resolution:
       { integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw== }
@@ -6853,6 +11744,14 @@ packages:
       webidl-conversions: 5.0.0
     dev: true
 
+  /domhandler/3.3.0:
+    resolution:
+      { integrity: sha512-J1C5rIANUbuYK+FuFL98650rihynUOEzRLxW+90bKZRWB6A1X1Tf82GxR1qAWLyfNPRvjqfip3Q5tdYlmAa9lA== }
+    engines: { node: '>= 4' }
+    dependencies:
+      domelementtype: 2.3.0
+    dev: true
+
   /domhandler/4.3.1:
     resolution:
       { integrity: sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ== }
@@ -6873,6 +11772,14 @@ packages:
       domelementtype: 2.3.0
       domhandler: 4.3.1
 
+  /dot-case/3.0.4:
+    resolution:
+      { integrity: sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w== }
+    dependencies:
+      no-case: 3.0.4
+      tslib: 2.4.0
+    dev: true
+
   /dot-prop/5.3.0:
     resolution:
       { integrity: sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q== }
@@ -6881,16 +11788,37 @@ packages:
       is-obj: 2.0.0
     dev: false
 
+  /dotenv-expand/5.1.0:
+    resolution:
+      { integrity: sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA== }
+    dev: true
+
   /dotenv/10.0.0:
     resolution:
       { integrity: sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q== }
     engines: { node: '>=10' }
 
+  /dotenv/8.6.0:
+    resolution:
+      { integrity: sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g== }
+    engines: { node: '>=10' }
+    dev: true
+
   /duplexer3/0.1.5:
     resolution:
       { integrity: sha512-1A8za6ws41LQgv9HrE/66jyC5yuSjQ3L/KOpFtoBilsAK2iA2wuS5rTt1OCzIvtS2V7nVmedsUU+DGRcjBmOYA== }
     dev: true
 
+  /duplexify/3.7.1:
+    resolution:
+      { integrity: sha512-07z8uv2wMyS51kKhD1KsdXJg5WQ6t93RneqRxUHnskXVtlYYkLqM0gqStQZ3pj073g687jPCHrqNfCzawLYh5g== }
+    dependencies:
+      end-of-stream: 1.4.4
+      inherits: 2.0.4
+      readable-stream: 2.3.7
+      stream-shift: 1.0.1
+    dev: true
+
   /duplexify/4.1.2:
     resolution:
       { integrity: sha512-fz3OjcNCHmRP12MJoZMPglx8m4rrFP8rovnk4vT8Fs+aonZoCwGg10dSsQsfP/E62eZcPTMSMP6686fu9Qlqtw== }
@@ -6932,12 +11860,30 @@ packages:
     resolution:
       { integrity: sha512-MeEaiuoSFh4G+rrN+Ilm1KJr8pTTZloeLurcZ+PRcthvdK1gWThje+E6baL7/7LoNctrzCncavAG/j/vpES9jg== }
 
+  /electron-to-chromium/1.4.239:
+    resolution:
+      { integrity: sha512-XbhfzxPIFzMjJm17T7yUGZEyYh5XuUjrA/FQ7JUy2bEd4qQ7MvFTaKpZ6zXZog1cfVttESo2Lx0ctnf7eQOaAQ== }
+    dev: true
+
   /elegant-spinner/1.0.1:
     resolution:
       { integrity: sha512-B+ZM+RXvRqQaAmkMlO/oSe5nMUOaUnyfGYCEHoR8wrXsZR2mA0XVibsxV1bvTwxdRWah1PkQqso2EzhILGHtEQ== }
     engines: { node: '>=0.10.0' }
     dev: true
 
+  /elliptic/6.5.4:
+    resolution:
+      { integrity: sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ== }
+    dependencies:
+      bn.js: 4.12.0
+      brorand: 1.1.0
+      hash.js: 1.1.7
+      hmac-drbg: 1.0.1
+      inherits: 2.0.4
+      minimalistic-assert: 1.0.1
+      minimalistic-crypto-utils: 1.0.1
+    dev: true
+
   /emittery/0.10.2:
     resolution:
       { integrity: sha512-aITqOwnLanpHLNXZJENbOgjUBeHocD+xsSJmNrjovKBW5HbSpW3d1pEls7GFQPUWXiwG9+0P4GtHfEqC/4M0Iw== }
@@ -6964,6 +11910,12 @@ packages:
       { integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg== }
     dev: true
 
+  /emojis-list/3.0.0:
+    resolution:
+      { integrity: sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q== }
+    engines: { node: '>= 4' }
+    dev: true
+
   /encodeurl/1.0.2:
     resolution:
       { integrity: sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w== }
@@ -7009,6 +11961,33 @@ packages:
       - utf-8-validate
     dev: true
 
+  /enhanced-resolve/4.5.0:
+    resolution:
+      { integrity: sha512-Nv9m36S/vxpsI+Hc4/ZGRs0n9mXqSWGGq49zxb/cJfPAQMbUtttJAlNPS4AQzaBdw/pKskw5bMbekT/Y7W/Wlg== }
+    engines: { node: '>=6.9.0' }
+    dependencies:
+      graceful-fs: 4.2.10
+      memory-fs: 0.5.0
+      tapable: 1.1.3
+    dev: true
+
+  /enhanced-resolve/5.10.0:
+    resolution:
+      { integrity: sha512-T0yTFjdpldGY8PmuXXR0PyQ1ufZpEGiHVrp7zHKB7jdR4qlmZHhONVM5AQOAWXuF/w3dnHbEQVrNptJgt7F+cQ== }
+    engines: { node: '>=10.13.0' }
+    dependencies:
+      graceful-fs: 4.2.10
+      tapable: 2.2.1
+    dev: true
+
+  /enquirer/2.3.6:
+    resolution:
+      { integrity: sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg== }
+    engines: { node: '>=8.6' }
+    dependencies:
+      ansi-colors: 4.1.3
+    dev: true
+
   /ent/2.2.0:
     resolution:
       { integrity: sha512-GHrMyVZQWvTIdDtpiEXdHZnFQKzeO09apj8Cbl4pKWy4i0Oprcq17usfDt5aO63swf0JOeMWjWQE/LzgSRuWpA== }
@@ -7035,6 +12014,14 @@ packages:
       { integrity: sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA== }
     optional: true
 
+  /errno/0.1.8:
+    resolution:
+      { integrity: sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A== }
+    hasBin: true
+    dependencies:
+      prr: 1.0.1
+    dev: true
+
   /error-ex/1.3.2:
     resolution:
       { integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g== }
@@ -7070,6 +12057,37 @@ packages:
       string.prototype.trimstart: 1.0.5
       unbox-primitive: 1.0.2
 
+  /es-array-method-boxes-properly/1.0.0:
+    resolution:
+      { integrity: sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA== }
+    dev: true
+
+  /es-get-iterator/1.1.2:
+    resolution:
+      { integrity: sha512-+DTO8GYwbMCwbywjimwZMHp8AuYXOS2JZFWoi2AlPOS3ebnII9w/NLpNZtA7A0YLaVDw+O7KFCeoIV7OPvM7hQ== }
+    dependencies:
+      call-bind: 1.0.2
+      get-intrinsic: 1.1.2
+      has-symbols: 1.0.3
+      is-arguments: 1.1.1
+      is-map: 2.0.2
+      is-set: 2.0.2
+      is-string: 1.0.7
+      isarray: 2.0.5
+    dev: true
+
+  /es-module-lexer/0.9.3:
+    resolution:
+      { integrity: sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ== }
+    dev: true
+
+  /es-shim-unscopables/1.0.0:
+    resolution:
+      { integrity: sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w== }
+    dependencies:
+      has: 1.0.3
+    dev: true
+
   /es-to-primitive/1.2.1:
     resolution:
       { integrity: sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA== }
@@ -7079,6 +12097,17 @@ packages:
       is-date-object: 1.0.5
       is-symbol: 1.0.4
 
+  /es5-shim/4.6.7:
+    resolution:
+      { integrity: sha512-jg21/dmlrNQI7JyyA2w7n+yifSxBng0ZralnSfVZjoCawgNTCnS+yBCyVM9DL5itm7SUnDGgv7hcq2XCZX4iRQ== }
+    engines: { node: '>=0.4.0' }
+    dev: true
+
+  /es6-shim/0.35.6:
+    resolution:
+      { integrity: sha512-EmTr31wppcaIAgblChZiuN/l9Y7DPyw8Xtbg7fIVngn6zMW+IEBJDJngeKC3x6wr0V/vcA2wqeFnaw1bFJbDdA== }
+    dev: true
+
   /esbuild-android-64/0.14.49:
     resolution:
       { integrity: sha512-vYsdOTD+yi+kquhBiFWl3tyxnj2qZJsl4tAqwhT90ktUdnyTizgle7TjNx6Ar1bN7wcwWqZ9QInfdk2WVagSww== }
@@ -7086,7 +12115,6 @@ packages:
     cpu: [x64]
     os: [android]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-android-arm64/0.14.49:
@@ -7096,7 +12124,6 @@ packages:
     cpu: [arm64]
     os: [android]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-darwin-64/0.14.49:
@@ -7106,7 +12133,6 @@ packages:
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-darwin-arm64/0.14.49:
@@ -7116,7 +12142,6 @@ packages:
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-freebsd-64/0.14.49:
@@ -7126,7 +12151,6 @@ packages:
     cpu: [x64]
     os: [freebsd]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-freebsd-arm64/0.14.49:
@@ -7136,7 +12160,6 @@ packages:
     cpu: [arm64]
     os: [freebsd]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-linux-32/0.14.49:
@@ -7146,7 +12169,6 @@ packages:
     cpu: [ia32]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-linux-64/0.14.49:
@@ -7156,7 +12178,6 @@ packages:
     cpu: [x64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-linux-arm/0.14.49:
@@ -7166,7 +12187,6 @@ packages:
     cpu: [arm]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-linux-arm64/0.14.49:
@@ -7176,7 +12196,6 @@ packages:
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-linux-mips64le/0.14.49:
@@ -7186,7 +12205,6 @@ packages:
     cpu: [mips64el]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-linux-ppc64le/0.14.49:
@@ -7196,7 +12214,6 @@ packages:
     cpu: [ppc64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-linux-riscv64/0.14.49:
@@ -7206,7 +12223,6 @@ packages:
     cpu: [riscv64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-linux-s390x/0.14.49:
@@ -7216,7 +12232,6 @@ packages:
     cpu: [s390x]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-netbsd-64/0.14.49:
@@ -7226,7 +12241,6 @@ packages:
     cpu: [x64]
     os: [netbsd]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-openbsd-64/0.14.49:
@@ -7236,7 +12250,6 @@ packages:
     cpu: [x64]
     os: [openbsd]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-sunos-64/0.14.49:
@@ -7246,7 +12259,6 @@ packages:
     cpu: [x64]
     os: [sunos]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-windows-32/0.14.49:
@@ -7256,7 +12268,6 @@ packages:
     cpu: [ia32]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-windows-64/0.14.49:
@@ -7266,7 +12277,6 @@ packages:
     cpu: [x64]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-windows-arm64/0.14.49:
@@ -7276,7 +12286,6 @@ packages:
     cpu: [arm64]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild/0.14.49:
@@ -7306,7 +12315,6 @@ packages:
       esbuild-windows-32: 0.14.49
       esbuild-windows-64: 0.14.49
       esbuild-windows-arm64: 0.14.49
-    dev: true
 
   /escalade/3.1.1:
     resolution:
@@ -7353,17 +12361,17 @@ packages:
       source-map: 0.6.1
     dev: true
 
-  /eslint-config-prettier/8.5.0_eslint@8.19.0:
+  /eslint-config-prettier/8.5.0_eslint@8.23.0:
     resolution:
       { integrity: sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q== }
     hasBin: true
     peerDependencies:
       eslint: '>=7.0.0'
     dependencies:
-      eslint: 8.19.0
+      eslint: 8.23.0
     dev: true
 
-  /eslint-plugin-prettier/4.2.1_w5u7id6tju6ajwzbl3jaybwdxe:
+  /eslint-plugin-prettier/4.2.1_5gi7dmuso3kqr3jcl6a5zyhbke:
     resolution:
       { integrity: sha512-f/0rXLXUt0oFYs8ra4w49wYZBG5GKZpAYsJSm6rnYL5uVDjd+zowwMwVZHnAjf4edNrKpCDYfXDgmRE/Ak7QyQ== }
     engines: { node: '>=12.0.0' }
@@ -7375,31 +12383,40 @@ packages:
       eslint-config-prettier:
         optional: true
     dependencies:
-      eslint: 8.19.0
-      eslint-config-prettier: 8.5.0_eslint@8.19.0
+      eslint: 8.23.0
+      eslint-config-prettier: 8.5.0_eslint@8.23.0
       prettier: 2.4.1
       prettier-linter-helpers: 1.0.0
     dev: true
 
-  /eslint-plugin-vue/9.2.0_eslint@8.19.0:
+  /eslint-plugin-vue/9.4.0_eslint@8.23.0:
     resolution:
-      { integrity: sha512-W2hc+NUXoce8sZtWgZ45miQTy6jNyuSdub5aZ1IBune4JDeAyzucYX0TzkrQ1jMO52sNUDYlCIHDoaNePe0p5g== }
+      { integrity: sha512-Nzz2QIJ8FG+rtJaqT/7/ru5ie2XgT9KCudkbN0y3uFYhQ41nuHEaboLAiqwMcK006hZPQv/rVMRhUIwEGhIvfQ== }
     engines: { node: ^14.17.0 || >=16.0.0 }
     peerDependencies:
       eslint: ^6.2.0 || ^7.0.0 || ^8.0.0
     dependencies:
-      eslint: 8.19.0
-      eslint-utils: 3.0.0_eslint@8.19.0
+      eslint: 8.23.0
+      eslint-utils: 3.0.0_eslint@8.23.0
       natural-compare: 1.4.0
       nth-check: 2.1.1
       postcss-selector-parser: 6.0.10
       semver: 7.3.7
-      vue-eslint-parser: 9.0.3_eslint@8.19.0
+      vue-eslint-parser: 9.0.3_eslint@8.23.0
       xml-name-validator: 4.0.0
     transitivePeerDependencies:
       - supports-color
     dev: true
 
+  /eslint-scope/4.0.3:
+    resolution:
+      { integrity: sha512-p7VutNr1O/QrxysMo3E45FjYDTeXBy0iTltPFNSqKAIfjDSXC+4dj+qfyuD8bfAXrW/y6lW3O76VaYNPKfpKrg== }
+    engines: { node: '>=4.0.0' }
+    dependencies:
+      esrecurse: 4.3.0
+      estraverse: 4.3.0
+    dev: true
+
   /eslint-scope/5.1.1:
     resolution:
       { integrity: sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw== }
@@ -7418,14 +12435,25 @@ packages:
       estraverse: 5.3.0
     dev: true
 
-  /eslint-utils/3.0.0_eslint@8.19.0:
+  /eslint-utils/3.0.0_eslint@8.23.0:
     resolution:
       { integrity: sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA== }
     engines: { node: ^10.0.0 || ^12.0.0 || >= 14.0.0 }
     peerDependencies:
       eslint: '>=5'
     dependencies:
-      eslint: 8.19.0
+      eslint: 8.23.0
+      eslint-visitor-keys: 2.1.0
+    dev: true
+
+  /eslint-utils/3.0.0_eslint@8.4.1:
+    resolution:
+      { integrity: sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA== }
+    engines: { node: ^10.0.0 || ^12.0.0 || >= 14.0.0 }
+    peerDependencies:
+      eslint: '>=5'
+    dependencies:
+      eslint: 8.4.1
       eslint-visitor-keys: 2.1.0
     dev: true
 
@@ -7441,14 +12469,16 @@ packages:
     engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 }
     dev: true
 
-  /eslint/8.19.0:
+  /eslint/8.23.0:
     resolution:
-      { integrity: sha512-SXOPj3x9VKvPe81TjjUJCYlV4oJjQw68Uek+AM0X4p+33dj2HY5bpTZOgnQHcG2eAm1mtCU9uNMnJi7exU/kYw== }
+      { integrity: sha512-pBG/XOn0MsJcKcTRLr27S5HpzQo4kLr+HjLQIyK4EiCsijDl/TB+h5uEuJU6bQ8Edvwz1XWOjpaP2qgnXGpTcA== }
     engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 }
     hasBin: true
     dependencies:
-      '@eslint/eslintrc': 1.3.0
-      '@humanwhocodes/config-array': 0.9.5
+      '@eslint/eslintrc': 1.3.1
+      '@humanwhocodes/config-array': 0.10.4
+      '@humanwhocodes/gitignore-to-minimatch': 1.0.2
+      '@humanwhocodes/module-importer': 1.0.1
       ajv: 6.12.6
       chalk: 4.1.2
       cross-spawn: 7.0.3
@@ -7456,16 +12486,19 @@ packages:
       doctrine: 3.0.0
       escape-string-regexp: 4.0.0
       eslint-scope: 7.1.1
-      eslint-utils: 3.0.0_eslint@8.19.0
+      eslint-utils: 3.0.0_eslint@8.23.0
       eslint-visitor-keys: 3.3.0
-      espree: 9.3.2
+      espree: 9.4.0
       esquery: 1.4.0
       esutils: 2.0.3
       fast-deep-equal: 3.1.3
       file-entry-cache: 6.0.1
+      find-up: 5.0.0
       functional-red-black-tree: 1.0.1
       glob-parent: 6.0.2
-      globals: 13.16.0
+      globals: 13.17.0
+      globby: 11.1.0
+      grapheme-splitter: 1.0.4
       ignore: 5.2.0
       import-fresh: 3.3.0
       imurmurhash: 0.1.4
@@ -7481,6 +12514,53 @@ packages:
       strip-ansi: 6.0.1
       strip-json-comments: 3.1.1
       text-table: 0.2.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /eslint/8.4.1:
+    resolution:
+      { integrity: sha512-TxU/p7LB1KxQ6+7aztTnO7K0i+h0tDi81YRY9VzB6Id71kNz+fFYnf5HD5UOQmxkzcoa0TlVZf9dpMtUv0GpWg== }
+    engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 }
+    hasBin: true
+    dependencies:
+      '@eslint/eslintrc': 1.3.0
+      '@humanwhocodes/config-array': 0.9.5
+      ajv: 6.12.6
+      chalk: 4.1.2
+      cross-spawn: 7.0.3
+      debug: 4.3.4
+      doctrine: 3.0.0
+      enquirer: 2.3.6
+      escape-string-regexp: 4.0.0
+      eslint-scope: 7.1.1
+      eslint-utils: 3.0.0_eslint@8.4.1
+      eslint-visitor-keys: 3.3.0
+      espree: 9.3.2
+      esquery: 1.4.0
+      esutils: 2.0.3
+      fast-deep-equal: 3.1.3
+      file-entry-cache: 6.0.1
+      functional-red-black-tree: 1.0.1
+      glob-parent: 6.0.2
+      globals: 13.16.0
+      ignore: 4.0.6
+      import-fresh: 3.3.0
+      imurmurhash: 0.1.4
+      is-glob: 4.0.3
+      js-yaml: 4.1.0
+      json-stable-stringify-without-jsonify: 1.0.1
+      levn: 0.4.1
+      lodash.merge: 4.6.2
+      minimatch: 3.1.2
+      natural-compare: 1.4.0
+      optionator: 0.9.1
+      progress: 2.0.3
+      regexpp: 3.2.0
+      semver: 7.3.7
+      strip-ansi: 6.0.1
+      strip-json-comments: 3.1.1
+      text-table: 0.2.0
       v8-compile-cache: 2.3.0
     transitivePeerDependencies:
       - supports-color
@@ -7491,6 +12571,16 @@ packages:
       { integrity: sha512-U1suiZ2oDVWv4zPO56S0NcR5QriEahGtdN2OR6FiOG4WJvcjBVFB0qI4+eKoWFH483PKGuLuu6V8Z4T5g63UVA== }
     engines: { node: '>=6' }
 
+  /espree/9.2.0:
+    resolution:
+      { integrity: sha512-oP3utRkynpZWF/F2x/HZJ+AGtnIclaR7z1pYPxy7NYM2fSO6LgK/Rkny8anRSPK/VwEA1eqm2squui0T7ZMOBg== }
+    engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 }
+    dependencies:
+      acorn: 8.7.1
+      acorn-jsx: 5.3.2_acorn@8.7.1
+      eslint-visitor-keys: 3.3.0
+    dev: true
+
   /espree/9.3.2:
     resolution:
       { integrity: sha512-D211tC7ZwouTIuY5x9XnS0E9sWNChB7IYKX/Xp5eQj3nFXhqmiUDB9q27y76oFl8jTg3pXcQx/bpxMfs3CIZbA== }
@@ -7501,6 +12591,16 @@ packages:
       eslint-visitor-keys: 3.3.0
     dev: true
 
+  /espree/9.4.0:
+    resolution:
+      { integrity: sha512-DQmnRpLj7f6TgN/NYb0MTzJXL+vJF9h3pHy4JhCIs3zwcgez8xmGg3sXHcEO97BrmO2OSvCwMdfdlyl+E9KjOw== }
+    engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 }
+    dependencies:
+      acorn: 8.8.0
+      acorn-jsx: 5.3.2_acorn@8.8.0
+      eslint-visitor-keys: 3.3.0
+    dev: true
+
   /esprima/4.0.1:
     resolution:
       { integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A== }
@@ -7536,6 +12636,18 @@ packages:
     engines: { node: '>=4.0' }
     dev: true
 
+  /estree-to-babel/3.2.1:
+    resolution:
+      { integrity: sha512-YNF+mZ/Wu2FU/gvmzuWtYc8rloubL7wfXCTgouFrnjGVXPA/EeYYA7pupXWrb3Iv1cTBeSSxxJIbK23l4MRNqg== }
+    engines: { node: '>=8.3.0' }
+    dependencies:
+      '@babel/traverse': 7.18.13
+      '@babel/types': 7.18.13
+      c8: 7.12.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /estree-walker/0.6.1:
     resolution:
       { integrity: sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w== }
@@ -7591,6 +12703,33 @@ packages:
       { integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q== }
     engines: { node: '>=0.8.x' }
 
+  /evp_bytestokey/1.0.3:
+    resolution:
+      { integrity: sha512-/f2Go4TognH/KvCISP7OUsHn85hT9nUkxxA9BEWxFn+Oj9o8ZNLm/40hdlgSLyuOimsrTKLUMEorQexp/aPQeA== }
+    dependencies:
+      md5.js: 1.3.5
+      safe-buffer: 5.2.1
+    dev: true
+
+  /exec-sh/0.3.6:
+    resolution:
+      { integrity: sha512-nQn+hI3yp+oD0huYhKwvYI32+JFeq+XkNcD1GAo3Y/MjxsfVGmrrzrnzjWiNY6f+pUCP440fThsFh5gZrRAU/w== }
+    dev: true
+
+  /execa/1.0.0:
+    resolution:
+      { integrity: sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA== }
+    engines: { node: '>=6' }
+    dependencies:
+      cross-spawn: 6.0.5
+      get-stream: 4.1.0
+      is-stream: 1.1.0
+      npm-run-path: 2.0.2
+      p-finally: 1.0.0
+      signal-exit: 3.0.7
+      strip-eof: 1.0.0
+    dev: true
+
   /execa/5.1.1:
     resolution:
       { integrity: sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg== }
@@ -7633,6 +12772,22 @@ packages:
     engines: { node: '>= 0.8.0' }
     dev: true
 
+  /expand-brackets/2.1.4:
+    resolution:
+      { integrity: sha512-w/ozOKR9Obk3qoWeY/WDi6MFta9AoMR+zud60mdnbniMcBxRuFJyDt2LdX/14A1UABeqk+Uk+LDfUpvoGKppZA== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      debug: 2.6.9
+      define-property: 0.2.5
+      extend-shallow: 2.0.1
+      posix-character-classes: 0.1.1
+      regex-not: 1.0.2
+      snapdragon: 0.8.2
+      to-regex: 3.0.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /expand-template/2.0.3:
     resolution:
       { integrity: sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg== }
@@ -7708,10 +12863,18 @@ packages:
       is-extendable: 0.1.1
     dev: true
 
+  /extend-shallow/3.0.2:
+    resolution:
+      { integrity: sha512-BwY5b5Ql4+qZoefgMj2NUmx+tehVTH/Kf4k1ZEtOHNFcm2wSxMRo992l6X3TIgni2eZVTZ85xMOjF31fwZAj6Q== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      assign-symbols: 1.0.0
+      is-extendable: 1.0.1
+    dev: true
+
   /extend/3.0.2:
     resolution:
       { integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g== }
-    dev: false
 
   /external-editor/3.1.0:
     resolution:
@@ -7723,6 +12886,23 @@ packages:
       tmp: 0.0.33
     dev: false
 
+  /extglob/2.0.4:
+    resolution:
+      { integrity: sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      array-unique: 0.3.2
+      define-property: 1.0.0
+      expand-brackets: 2.1.4
+      extend-shallow: 2.0.1
+      fragment-cache: 0.2.1
+      regex-not: 1.0.2
+      snapdragon: 0.8.2
+      to-regex: 3.0.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /extsprintf/1.4.1:
     resolution:
       { integrity: sha512-Wrk35e8ydCKDj/ArClo1VrPVmN8zph5V4AtHwIuHhvMXsKf73UT3BOD+azBIW+3wOJ4FhEH7zyaJCFvChjYvMA== }
@@ -7739,6 +12919,21 @@ packages:
       { integrity: sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w== }
     dev: true
 
+  /fast-glob/2.2.7:
+    resolution:
+      { integrity: sha512-g1KuQwHOZAmOZMuBtHdxDtju+T2RT8jgCC9aANsbpdiDDTSnjgfuVsIBNKbUeJI3oKMRExcfNDtJl4OhbffMsw== }
+    engines: { node: '>=4.0.0' }
+    dependencies:
+      '@mrmlnc/readdir-enhanced': 2.2.1
+      '@nodelib/fs.stat': 1.1.3
+      glob-parent: 3.1.0
+      is-glob: 4.0.3
+      merge2: 1.4.1
+      micromatch: 3.1.10
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /fast-glob/3.2.11:
     resolution:
       { integrity: sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew== }
@@ -7824,6 +13019,16 @@ packages:
     dev: false
     optional: true
 
+  /fetch-retry/5.0.3:
+    resolution:
+      { integrity: sha512-uJQyMrX5IJZkhoEUBQ3EjxkeiZkppBd5jS/fMTJmfZxLSiaQjv2zD0kTvuvkSH89uFvgSlB6ueGpjD3HWN7Bxw== }
+    dev: true
+
+  /figgy-pudding/3.5.2:
+    resolution:
+      { integrity: sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw== }
+    dev: true
+
   /figures/1.7.0:
     resolution:
       { integrity: sha512-UxKlfCRuCBxSXU4C6t9scbDyWZ4VlaFFdojKtzJuSkuOBQ5CNFum+zZXFwHjo+CxBC1t6zlYPgHIgFjL8ggoEQ== }
@@ -7857,11 +13062,49 @@ packages:
       flat-cache: 3.0.4
     dev: true
 
+  /file-loader/6.2.0_webpack@4.46.0:
+    resolution:
+      { integrity: sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw== }
+    engines: { node: '>= 10.13.0' }
+    peerDependencies:
+      webpack: ^4.0.0 || ^5.0.0
+    dependencies:
+      loader-utils: 2.0.2
+      schema-utils: 3.1.1
+      webpack: 4.46.0
+    dev: true
+
   /file-saver/2.0.5:
     resolution:
       { integrity: sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA== }
     dev: true
 
+  /file-system-cache/1.1.0:
+    resolution:
+      { integrity: sha512-IzF5MBq+5CR0jXx5RxPe4BICl/oEhBSXKaL9fLhAXrIfIUS77Hr4vzrYyqYMHN6uTt+BOqi3fDCTjjEBCjERKw== }
+    dependencies:
+      fs-extra: 10.1.0
+      ramda: 0.28.0
+    dev: true
+
+  /file-uri-to-path/1.0.0:
+    resolution:
+      { integrity: sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw== }
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /fill-range/4.0.0:
+    resolution:
+      { integrity: sha512-VcpLTWqWDiTerugjj8e3+esbg+skS3M9e54UuR3iCeIDMXCLTsAH8hTSzDQU/X6/6t3eYkOKoZSef2PlU6U1XQ== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      extend-shallow: 2.0.1
+      is-number: 3.0.0
+      repeat-string: 1.6.1
+      to-regex-range: 2.1.1
+    dev: true
+
   /fill-range/7.0.1:
     resolution:
       { integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ== }
@@ -7890,6 +13133,16 @@ packages:
     transitivePeerDependencies:
       - supports-color
 
+  /find-cache-dir/2.1.0:
+    resolution:
+      { integrity: sha512-Tq6PixE0w/VMFfCgbONnkiQIVol/JJL7nRMi20fqzA4NRs9AfeqMGeRdPi3wIhYkxjeBaWh2rxwapn5Tu3IqOQ== }
+    engines: { node: '>=6' }
+    dependencies:
+      commondir: 1.0.1
+      make-dir: 2.1.0
+      pkg-dir: 3.0.0
+    dev: true
+
   /find-cache-dir/3.3.2:
     resolution:
       { integrity: sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig== }
@@ -7898,7 +13151,16 @@ packages:
       commondir: 1.0.1
       make-dir: 3.1.0
       pkg-dir: 4.2.0
-    dev: false
+
+  /find-up/1.1.2:
+    resolution:
+      { integrity: sha512-jvElSjyuo4EMQGoTwo1uJU5pQMwTW5lS1x05zzfJuTIyLR3zwO27LYrxNg+dlvKpGOuGy/MzBdXh80g0ve5+HA== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      path-exists: 2.1.0
+      pinkie-promise: 2.0.1
+    dev: true
+    optional: true
 
   /find-up/3.0.0:
     resolution:
@@ -7935,7 +13197,7 @@ packages:
       { integrity: sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg== }
     engines: { node: ^10.12.0 || >=12.0.0 }
     dependencies:
-      flatted: 3.2.6
+      flatted: 3.2.7
       rimraf: 3.0.2
     dev: true
 
@@ -7955,9 +13217,23 @@ packages:
       { integrity: sha512-4zPxDyhCyiN2wIAtSLI6gc82/EjqZc1onI4Mz/l0pWrAlsSfYH/2ZIcU+e3oA2wDwbzIWNKwa23F8rh6+DRWkw== }
     dev: false
 
-  /flatted/3.2.6:
+  /flatted/3.2.7:
     resolution:
-      { integrity: sha512-0sQoMh9s0BYsm+12Huy/rkKxVu4R1+r96YX5cG44rHV0pQ6iC3Q+mkoMFaGWObMFYQxCVT+ssG1ksneA2MI9KQ== }
+      { integrity: sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ== }
+    dev: true
+
+  /flow-parser/0.185.2:
+    resolution:
+      { integrity: sha512-2hJ5ACYeJCzNtiVULov6pljKOLygy0zddoqSI1fFetM+XRPpRshFdGEijtqlamA1XwyZ+7rhryI6FQFzvtLWUQ== }
+    engines: { node: '>=0.4.0' }
+    dev: true
+
+  /flush-write-stream/1.1.1:
+    resolution:
+      { integrity: sha512-3Z4XhFZ3992uIq0XOqb9AreonueSYphE6oYbpt5+3u06JWklbsPkNv3ZKkP9Bz/r+1MWCaMoSQ28P85+1Yc77w== }
+    dependencies:
+      inherits: 2.0.4
+      readable-stream: 2.3.7
     dev: true
 
   /focus-trap/5.1.0:
@@ -7985,6 +13261,12 @@ packages:
       is-callable: 1.2.4
     dev: false
 
+  /for-in/1.0.2:
+    resolution:
+      { integrity: sha512-7EwmXrOjyL+ChxMhmG5lnW9MPt1aIeZEwKhQzoBUdTV0N3zuwWDZYVJatDvZ2OyzPUvdIAZDsCetk3coyMfcnQ== }
+    engines: { node: '>=0.10.0' }
+    dev: true
+
   /foreground-child/2.0.0:
     resolution:
       { integrity: sha512-dCIq9FpEcyQyXKCkyzmlPTFNgrCzPudOe+mhvJU5zAtlBnGVy2yKxtfsxK2tQBThwq225jcvBjpw1Gr40uzZCA== }
@@ -7994,6 +13276,66 @@ packages:
       signal-exit: 3.0.7
     dev: true
 
+  /fork-ts-checker-webpack-plugin/4.1.6_nsd4r6eogdup74sdidtzttwbxi:
+    resolution:
+      { integrity: sha512-DUxuQaKoqfNne8iikd14SAkh5uw4+8vNifp6gmA73yYNS6ywLIWSLD/n/mBzHQRpW3J7rbATEakmiA8JvkTyZw== }
+    engines: { node: '>=6.11.5', yarn: '>=1.0.0' }
+    peerDependencies:
+      eslint: '>= 6'
+      typescript: '>= 2.7'
+      vue-template-compiler: '*'
+      webpack: '>= 4'
+    peerDependenciesMeta:
+      eslint:
+        optional: true
+      vue-template-compiler:
+        optional: true
+    dependencies:
+      '@babel/code-frame': 7.18.6
+      chalk: 2.4.2
+      micromatch: 3.1.10
+      minimatch: 3.1.2
+      semver: 5.7.1
+      tapable: 1.1.3
+      typescript: 4.5.2
+      webpack: 4.46.0
+      worker-rpc: 0.1.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /fork-ts-checker-webpack-plugin/6.5.2_nsd4r6eogdup74sdidtzttwbxi:
+    resolution:
+      { integrity: sha512-m5cUmF30xkZ7h4tWUgTAcEaKmUW7tfyUyTqNNOz7OxWJ0v1VWKTcOvH8FWHUwSjlW/356Ijc9vi3XfcPstpQKA== }
+    engines: { node: '>=10', yarn: '>=1.0.0' }
+    peerDependencies:
+      eslint: '>= 6'
+      typescript: '>= 2.7'
+      vue-template-compiler: '*'
+      webpack: '>= 4'
+    peerDependenciesMeta:
+      eslint:
+        optional: true
+      vue-template-compiler:
+        optional: true
+    dependencies:
+      '@babel/code-frame': 7.18.6
+      '@types/json-schema': 7.0.11
+      chalk: 4.1.2
+      chokidar: 3.5.3
+      cosmiconfig: 6.0.0
+      deepmerge: 4.2.2
+      fs-extra: 9.1.0
+      glob: 7.2.3
+      memfs: 3.4.7
+      minimatch: 3.1.2
+      schema-utils: 2.7.0
+      semver: 7.3.7
+      tapable: 1.1.3
+      typescript: 4.5.2
+      webpack: 4.46.0
+    dev: true
+
   /form-data/2.5.1:
     resolution:
       { integrity: sha512-m21N3WOmEEURgk6B9GLOE4RuWOFf28Lhh9qGYeNlGq4VDXUlJy2th2slBNU8Gp8EzloYZOibZJ7t5ecIrFSjVA== }
@@ -8036,11 +13378,27 @@ packages:
       { integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow== }
     engines: { node: '>= 0.6' }
 
+  /fragment-cache/0.2.1:
+    resolution:
+      { integrity: sha512-GMBAbW9antB8iZRHLoGw0b3HANt57diZYFO/HL1JGIC1MjKrdmhxvrJbupnVvpys0zsz7yBApXdQyfepKly2kA== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      map-cache: 0.2.2
+    dev: true
+
   /fresh/0.5.2:
     resolution:
       { integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q== }
     engines: { node: '>= 0.6' }
 
+  /from2/2.3.0:
+    resolution:
+      { integrity: sha512-OMcX/4IC/uqEPVgGeyfN22LJk6AZrMkRZHxcHBMBvHScDGgwTm2GT2Wkgtocyd3JfZffjj2kYUDXXII0Fk9W0g== }
+    dependencies:
+      inherits: 2.0.4
+      readable-stream: 2.3.7
+    dev: true
+
   /front-matter/4.0.2:
     resolution:
       { integrity: sha512-I8ZuJ/qG92NWX8i5x1Y8qyj3vizhXS31OxjKDu3LKP+7/qBgfIKValiZIEwoVoJKUHlhWtYrktkxV1XsX+pPlg== }
@@ -8069,7 +13427,6 @@ packages:
       graceful-fs: 4.2.10
       jsonfile: 6.1.0
       universalify: 2.0.0
-    dev: false
 
   /fs-extra/8.1.0:
     resolution:
@@ -8081,6 +13438,17 @@ packages:
       universalify: 0.1.2
     dev: true
 
+  /fs-extra/9.1.0:
+    resolution:
+      { integrity: sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ== }
+    engines: { node: '>=10' }
+    dependencies:
+      at-least-node: 1.0.0
+      graceful-fs: 4.2.10
+      jsonfile: 6.1.0
+      universalify: 2.0.0
+    dev: true
+
   /fs-minipass/2.1.0:
     resolution:
       { integrity: sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg== }
@@ -8088,10 +13456,38 @@ packages:
     dependencies:
       minipass: 3.3.4
 
+  /fs-monkey/1.0.3:
+    resolution:
+      { integrity: sha512-cybjIfiiE+pTWicSCLFHSrXZ6EilF30oh91FDP9S2B051prEa7QWfrVTQm10/dDpswBDXZugPa1Ogu8Yh+HV0Q== }
+    dev: true
+
+  /fs-write-stream-atomic/1.0.10:
+    resolution:
+      { integrity: sha512-gehEzmPn2nAwr39eay+x3X34Ra+M2QlVUTLhkXPjWdeO8RF9kszk116avgBJM3ZyNHgHXBNx+VmPaFC36k0PzA== }
+    dependencies:
+      graceful-fs: 4.2.10
+      iferr: 0.1.5
+      imurmurhash: 0.1.4
+      readable-stream: 2.3.7
+    dev: true
+
   /fs.realpath/1.0.0:
     resolution:
       { integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw== }
 
+  /fsevents/1.2.13:
+    resolution:
+      { integrity: sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw== }
+    engines: { node: '>= 4.0' }
+    os: [darwin]
+    deprecated: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
+    requiresBuild: true
+    dependencies:
+      bindings: 1.5.0
+      nan: 2.16.0
+    dev: true
+    optional: true
+
   /fsevents/2.3.2:
     resolution:
       { integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA== }
@@ -8246,12 +13642,27 @@ packages:
     engines: { node: '>=4' }
     dev: true
 
+  /get-stdin/4.0.1:
+    resolution:
+      { integrity: sha512-F5aQMywwJ2n85s4hJPTT9RPxGmubonuB10MNYo17/xph174n2MIR33HRguhzVag10O/npM7SPk73LMZNP+FaWw== }
+    engines: { node: '>=0.10.0' }
+    dev: true
+    optional: true
+
   /get-stdin/7.0.0:
     resolution:
       { integrity: sha512-zRKcywvrXlXsA0v0i9Io4KDRaAw7+a1ZpjRwl9Wox8PFlVCCHra7E9c4kqXCoCM9nR5tBkaTTZRBoCm60bFqTQ== }
     engines: { node: '>=8' }
     dev: true
 
+  /get-stream/4.1.0:
+    resolution:
+      { integrity: sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w== }
+    engines: { node: '>=6' }
+    dependencies:
+      pump: 3.0.0
+    dev: true
+
   /get-stream/5.2.0:
     resolution:
       { integrity: sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA== }
@@ -8273,6 +13684,12 @@ packages:
       call-bind: 1.0.2
       get-intrinsic: 1.1.2
 
+  /get-value/2.0.6:
+    resolution:
+      { integrity: sha512-Ln0UQDlxH1BapMu3GPtf7CuYNwRZf2gwCuPqbyG6pB8WfmFpzqcy4xtAaAMUhnNqjMKTiCPZG2oMT3YSx8U2NA== }
+    engines: { node: '>=0.10.0' }
+    dev: true
+
   /getopts/2.3.0:
     resolution:
       { integrity: sha512-5eDf9fuSXwxBL6q5HX+dhDj+dslFGWzU5thZ9kNKUkcPtaPdatmUFKwHFrLb/uf/WpA4BHET+AX3Scl56cAjpA== }
@@ -8281,11 +13698,24 @@ packages:
     resolution:
       { integrity: sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw== }
 
+  /github-slugger/1.4.0:
+    resolution:
+      { integrity: sha512-w0dzqw/nt51xMVmlaV1+JRzN+oCa1KfcgGEWhxUG16wbdA+Xnt/yoFO8Z8x/V82ZcZ0wy6ln9QDup5avbhiDhQ== }
+    dev: true
+
   /gl-matrix/3.4.3:
     resolution:
       { integrity: sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA== }
     dev: true
 
+  /glob-parent/3.1.0:
+    resolution:
+      { integrity: sha512-E8Ak/2+dZY6fnzlR7+ueWvhsH1SjHr4jjss4YS/h4py44jY9MhK/VFdaZJAWDz6BbL21KeteKxFSFpq8OS5gVA== }
+    dependencies:
+      is-glob: 3.1.0
+      path-dirname: 1.0.2
+    dev: true
+
   /glob-parent/5.1.2:
     resolution:
       { integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow== }
@@ -8301,6 +13731,38 @@ packages:
       is-glob: 4.0.3
     dev: true
 
+  /glob-promise/3.4.0_glob@7.2.3:
+    resolution:
+      { integrity: sha512-q08RJ6O+eJn+dVanerAndJwIcumgbDdYiUT7zFQl3Wm1xD6fBKtah7H8ZJChj4wP+8C+QfeVy8xautR7rdmKEw== }
+    engines: { node: '>=4' }
+    peerDependencies:
+      glob: '*'
+    dependencies:
+      '@types/glob': 8.0.0
+      glob: 7.2.3
+    dev: true
+
+  /glob-promise/4.2.2_glob@7.2.3:
+    resolution:
+      { integrity: sha512-xcUzJ8NWN5bktoTIX7eOclO1Npxd/dyVqUJxlLIDasT4C7KZyqlPIwkdJ0Ypiy3p2ZKahTjK4M9uC3sNSfNMzw== }
+    engines: { node: '>=12' }
+    peerDependencies:
+      glob: ^7.1.6
+    dependencies:
+      '@types/glob': 7.2.0
+      glob: 7.2.3
+    dev: true
+
+  /glob-to-regexp/0.3.0:
+    resolution:
+      { integrity: sha512-Iozmtbqv0noj0uDDqoL0zNq0VBEfK2YFoMAZoxJe4cwphvLR+JskfF30QhXHOR4m3KrE6NLRYw+U9MRXvifyig== }
+    dev: true
+
+  /glob-to-regexp/0.4.1:
+    resolution:
+      { integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw== }
+    dev: true
+
   /glob/7.2.3:
     resolution:
       { integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q== }
@@ -8312,6 +13774,14 @@ packages:
       once: 1.4.0
       path-is-absolute: 1.0.1
 
+  /global/4.4.0:
+    resolution:
+      { integrity: sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w== }
+    dependencies:
+      min-document: 2.19.0
+      process: 0.11.10
+    dev: true
+
   /globals/11.12.0:
     resolution:
       { integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA== }
@@ -8326,6 +13796,22 @@ packages:
       type-fest: 0.20.2
     dev: true
 
+  /globals/13.17.0:
+    resolution:
+      { integrity: sha512-1C+6nQRb1GwGMKm2dH/E7enFAMxGTmGI7/dEdhy/DNelv85w9B72t3uc5frtMNXIbzrarJJ/lTCjcaZwbLJmyw== }
+    engines: { node: '>=8' }
+    dependencies:
+      type-fest: 0.20.2
+    dev: true
+
+  /globalthis/1.0.3:
+    resolution:
+      { integrity: sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA== }
+    engines: { node: '>= 0.4' }
+    dependencies:
+      define-properties: 1.1.4
+    dev: true
+
   /globby/11.1.0:
     resolution:
       { integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g== }
@@ -8338,6 +13824,23 @@ packages:
       merge2: 1.4.1
       slash: 3.0.0
 
+  /globby/9.2.0:
+    resolution:
+      { integrity: sha512-ollPHROa5mcxDEkwg6bPt3QbEf4pDQSNtd6JPL1YvOvAo/7/0VAm9TccUeoTmarjPw4pfUthSCqcyfNB1I3ZSg== }
+    engines: { node: '>=6' }
+    dependencies:
+      '@types/glob': 7.2.0
+      array-union: 1.0.2
+      dir-glob: 2.2.2
+      fast-glob: 2.2.7
+      glob: 7.2.3
+      ignore: 4.0.6
+      pify: 4.0.1
+      slash: 2.0.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /google-auth-library/7.14.1:
     resolution:
       { integrity: sha512-5Rk7iLNDFhFeBYc3s8l1CqzbEBcdhwR193RlD4vSNFajIcINKI8W8P0JLmBpwymHqqWbX34pJDQu39cSy/6RsA== }
@@ -8394,6 +13897,11 @@ packages:
     resolution:
       { integrity: sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA== }
 
+  /grapheme-splitter/1.0.4:
+    resolution:
+      { integrity: sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ== }
+    dev: true
+
   /graphlib/2.1.8:
     resolution:
       { integrity: sha512-jcLLfkpoVGmH7/InMC/1hIvOPSUh38oJtGhvrOFGzioE1DZ+0YW16RgmOJhHiuWTvGiJQ9Z1Ik43JvkRPRvE+A== }
@@ -8455,6 +13963,20 @@ packages:
       - supports-color
     dev: false
 
+  /handlebars/4.7.7:
+    resolution:
+      { integrity: sha512-aAcXm5OAfE/8IXkcZvCepKU3VzW1/39Fb5ZuqMtgI/hT8X2YgoMvBY5dLhq/cpOvw7Lk1nK/UF71aLG/ZnVYRA== }
+    engines: { node: '>=0.4.7' }
+    hasBin: true
+    dependencies:
+      minimist: 1.2.6
+      neo-async: 2.6.2
+      source-map: 0.6.1
+      wordwrap: 1.0.0
+    optionalDependencies:
+      uglify-js: 3.17.0
+    dev: true
+
   /happy-dom/6.0.4:
     resolution:
       { integrity: sha512-b+ID23Ms0BY08UNLymsOMG7EI2jSlwEt4cbJs938GZfeNAg+fqgkSO3TokQMgSOFoHznpjWmpVjBUL5boJ9PWw== }
@@ -8498,6 +14020,14 @@ packages:
       { integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ== }
     engines: { node: '>=8' }
 
+  /has-glob/1.0.0:
+    resolution:
+      { integrity: sha512-D+8A457fBShSEI3tFCj65PAbT++5sKiFtdCdOam0gnfBgw9D277OERk+HM9qYJXmdVLZ/znez10SqHN0BBQ50g== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      is-glob: 3.1.0
+    dev: true
+
   /has-property-descriptors/1.0.0:
     resolution:
       { integrity: sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ== }
@@ -8520,6 +14050,41 @@ packages:
     resolution:
       { integrity: sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ== }
 
+  /has-value/0.3.1:
+    resolution:
+      { integrity: sha512-gpG936j8/MzaeID5Yif+577c17TxaDmhuyVgSwtnL/q8UUTySg8Mecb+8Cf1otgLoD7DDH75axp86ER7LFsf3Q== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      get-value: 2.0.6
+      has-values: 0.1.4
+      isobject: 2.1.0
+    dev: true
+
+  /has-value/1.0.0:
+    resolution:
+      { integrity: sha512-IBXk4GTsLYdQ7Rvt+GRBrFSVEkmuOUy4re0Xjd9kJSUQpnTrWR4/y9RpfexN9vkAPMFuQoeWKwqzPozRTlasGw== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      get-value: 2.0.6
+      has-values: 1.0.0
+      isobject: 3.0.1
+    dev: true
+
+  /has-values/0.1.4:
+    resolution:
+      { integrity: sha512-J8S0cEdWuQbqD9//tlZxiMuMNmxB8PlEwvYwuxsTmR1G5RXUePEX/SJn7aD0GMLieuZYSwNH0cQuJGwnYunXRQ== }
+    engines: { node: '>=0.10.0' }
+    dev: true
+
+  /has-values/1.0.0:
+    resolution:
+      { integrity: sha512-ODYZC64uqzmtfGMEAX/FvZiRyWLpAC3vYnNunURUnkGVTS+mI0smVsWaPydRBsE3g+ok7h960jChO8mFcWlHaQ== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      is-number: 3.0.0
+      kind-of: 4.0.0
+    dev: true
+
   /has/1.0.3:
     resolution:
       { integrity: sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw== }
@@ -8527,15 +14092,37 @@ packages:
     dependencies:
       function-bind: 1.1.1
 
+  /hash-base/3.1.0:
+    resolution:
+      { integrity: sha512-1nmYp/rhMDiE7AYkDw+lLwlAzz0AntGIe51F3RfFfEqyQ3feY2eI/NcwC6umIQVOASPMsWJLJScWKSSvzL9IVA== }
+    engines: { node: '>=4' }
+    dependencies:
+      inherits: 2.0.4
+      readable-stream: 3.6.0
+      safe-buffer: 5.2.1
+    dev: true
+
   /hash-stream-validation/0.2.4:
     resolution:
       { integrity: sha512-Gjzu0Xn7IagXVkSu9cSFuK1fqzwtLwFhNhVL8IFJijRNMgUttFbBSIAzKuSIrsFMO1+g1RlsoN49zPIbwPDMGQ== }
     dev: false
 
+  /hash-sum/1.0.2:
+    resolution:
+      { integrity: sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA== }
+    dev: true
+
   /hash-sum/2.0.0:
     resolution:
       { integrity: sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg== }
-    dev: false
+
+  /hash.js/1.1.7:
+    resolution:
+      { integrity: sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA== }
+    dependencies:
+      inherits: 2.0.4
+      minimalistic-assert: 1.0.1
+    dev: true
 
   /hashring/3.2.0:
     resolution:
@@ -8546,6 +14133,74 @@ packages:
     dev: false
     optional: true
 
+  /hast-to-hyperscript/9.0.1:
+    resolution:
+      { integrity: sha512-zQgLKqF+O2F72S1aa4y2ivxzSlko3MAvxkwG8ehGmNiqd98BIN3JM1rAJPmplEyLmGLO2QZYJtIneOSZ2YbJuA== }
+    dependencies:
+      '@types/unist': 2.0.6
+      comma-separated-tokens: 1.0.8
+      property-information: 5.6.0
+      space-separated-tokens: 1.1.5
+      style-to-object: 0.3.0
+      unist-util-is: 4.1.0
+      web-namespaces: 1.1.4
+    dev: true
+
+  /hast-util-from-parse5/6.0.1:
+    resolution:
+      { integrity: sha512-jeJUWiN5pSxW12Rh01smtVkZgZr33wBokLzKLwinYOUfSzm1Nl/c3GUGebDyOKjdsRgMvoVbV0VpAcpjF4NrJA== }
+    dependencies:
+      '@types/parse5': 5.0.3
+      hastscript: 6.0.0
+      property-information: 5.6.0
+      vfile: 4.2.1
+      vfile-location: 3.2.0
+      web-namespaces: 1.1.4
+    dev: true
+
+  /hast-util-parse-selector/2.2.5:
+    resolution:
+      { integrity: sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ== }
+    dev: true
+
+  /hast-util-raw/6.0.1:
+    resolution:
+      { integrity: sha512-ZMuiYA+UF7BXBtsTBNcLBF5HzXzkyE6MLzJnL605LKE8GJylNjGc4jjxazAHUtcwT5/CEt6afRKViYB4X66dig== }
+    dependencies:
+      '@types/hast': 2.3.4
+      hast-util-from-parse5: 6.0.1
+      hast-util-to-parse5: 6.0.0
+      html-void-elements: 1.0.5
+      parse5: 6.0.1
+      unist-util-position: 3.1.0
+      vfile: 4.2.1
+      web-namespaces: 1.1.4
+      xtend: 4.0.2
+      zwitch: 1.0.5
+    dev: true
+
+  /hast-util-to-parse5/6.0.0:
+    resolution:
+      { integrity: sha512-Lu5m6Lgm/fWuz8eWnrKezHtVY83JeRGaNQ2kn9aJgqaxvVkFCZQBEhgodZUDUvoodgyROHDb3r5IxAEdl6suJQ== }
+    dependencies:
+      hast-to-hyperscript: 9.0.1
+      property-information: 5.6.0
+      web-namespaces: 1.1.4
+      xtend: 4.0.2
+      zwitch: 1.0.5
+    dev: true
+
+  /hastscript/6.0.0:
+    resolution:
+      { integrity: sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w== }
+    dependencies:
+      '@types/hast': 2.3.4
+      comma-separated-tokens: 1.0.8
+      hast-util-parse-selector: 2.2.5
+      property-information: 5.6.0
+      space-separated-tokens: 1.1.5
+    dev: true
+
   /hat/0.0.3:
     resolution:
       { integrity: sha512-zpImx2GoKXy42fVDSEad2BPKuSQdLcqsCYa48K3zHSzM/ugWuYjLDr8IXxpVuL7uCLHw56eaiLxCRthhOzf5ug== }
@@ -8574,6 +14229,15 @@ packages:
     engines: { node: '>=12.0.0' }
     dev: true
 
+  /hmac-drbg/1.0.1:
+    resolution:
+      { integrity: sha512-Tti3gMqLdZfhOQY1Mzf/AanLiqh1WTiJgEj26ZuYQ9fbkLomzGchCws4FyrSd4VkpBfiNhaE1On+lOz894jvXg== }
+    dependencies:
+      hash.js: 1.1.7
+      minimalistic-assert: 1.0.1
+      minimalistic-crypto-utils: 1.0.1
+    dev: true
+
   /hosted-git-info/2.8.9:
     resolution:
       { integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw== }
@@ -8597,6 +14261,55 @@ packages:
       { integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg== }
     dev: true
 
+  /html-minifier-terser/5.1.1:
+    resolution:
+      { integrity: sha512-ZPr5MNObqnV/T9akshPKbVgyOqLmy+Bxo7juKCfTfnjNniTAMdy4hz21YQqoofMBJD2kdREaqPPdThoR78Tgxg== }
+    engines: { node: '>=6' }
+    hasBin: true
+    dependencies:
+      camel-case: 4.1.2
+      clean-css: 4.2.4
+      commander: 4.1.1
+      he: 1.2.0
+      param-case: 3.0.4
+      relateurl: 0.2.7
+      terser: 4.8.1
+    dev: true
+
+  /html-void-elements/1.0.5:
+    resolution:
+      { integrity: sha512-uE/TxKuyNIcx44cIWnjr/rfIATDH7ZaOMmstu0CwhFG1Dunhlp4OC6/NMbhiwoq5BpW0ubi303qnEk/PZj614w== }
+    dev: true
+
+  /html-webpack-plugin/4.5.2_webpack@4.46.0:
+    resolution:
+      { integrity: sha512-q5oYdzjKUIPQVjOosjgvCHQOv9Ett9CYYHlgvJeXG0qQvdSojnBq4vAdQBwn1+yGveAwHCoe/rMR86ozX3+c2A== }
+    engines: { node: '>=6.9' }
+    peerDependencies:
+      webpack: ^4.0.0 || ^5.0.0
+    dependencies:
+      '@types/html-minifier-terser': 5.1.2
+      '@types/tapable': 1.0.8
+      '@types/webpack': 4.41.32
+      html-minifier-terser: 5.1.1
+      loader-utils: 1.4.0
+      lodash: 4.17.21
+      pretty-error: 2.1.2
+      tapable: 1.1.3
+      util.promisify: 1.0.0
+      webpack: 4.46.0
+    dev: true
+
+  /htmlparser2-svelte/4.1.0:
+    resolution:
+      { integrity: sha512-+4f4RBFz7Rj2Hp0ZbFbXC+Kzbd6S9PgjiuFtdT76VMNgKogrEZy0pG2UrPycPbrZzVEIM5lAT3lAdkSTCHLPjg== }
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 3.3.0
+      domutils: 2.8.0
+      entities: 2.2.0
+    dev: true
+
   /htmlparser2/6.1.0:
     resolution:
       { integrity: sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A== }
@@ -8662,6 +14375,11 @@ packages:
       '@types/node': 10.17.60
     dev: true
 
+  /https-browserify/1.0.0:
+    resolution:
+      { integrity: sha512-J+FkSdyD+0mA0N+81tMotaRMfSL9SGi+xpD3T6YApKsc3bGSXJlfXri3VyFOeYkfLRQisDk1W+jIFFKBeUBbBg== }
+    dev: true
+
   /https-proxy-agent/5.0.1:
     resolution:
       { integrity: sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA== }
@@ -8704,6 +14422,14 @@ packages:
     dependencies:
       safer-buffer: 2.1.2
 
+  /icss-utils/4.1.1:
+    resolution:
+      { integrity: sha512-4aFq7wvWyMHKgxsH8QQtGpvbASCf+eM3wPRLI6R+MgAnTCZ6STYsRvttLvRWK0Nfif5piF394St3HeJDaljGPA== }
+    engines: { node: '>= 6' }
+    dependencies:
+      postcss: 7.0.39
+    dev: true
+
   /icss-utils/5.1.0_postcss@8.4.14:
     resolution:
       { integrity: sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA== }
@@ -8712,7 +14438,6 @@ packages:
       postcss: ^8.1.0
     dependencies:
       postcss: 8.4.14
-    dev: false
 
   /ieee754/1.1.13:
     resolution:
@@ -8723,11 +14448,22 @@ packages:
     resolution:
       { integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA== }
 
+  /iferr/0.1.5:
+    resolution:
+      { integrity: sha512-DUNFN5j7Tln0D+TxzloUjKB+CtVu6myn0JEFak6dG18mNt9YkQ6lzGCdafwofISZ1lLF3xRHJ98VKy9ynkcFaA== }
+    dev: true
+
   /ignore-by-default/1.0.1:
     resolution:
       { integrity: sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA== }
     dev: true
 
+  /ignore/4.0.6:
+    resolution:
+      { integrity: sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg== }
+    engines: { node: '>= 4' }
+    dev: true
+
   /ignore/5.2.0:
     resolution:
       { integrity: sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ== }
@@ -8756,6 +14492,15 @@ packages:
       { integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA== }
     engines: { node: '>=0.8.19' }
 
+  /indent-string/2.1.0:
+    resolution:
+      { integrity: sha512-aqwDFWSgSgfRaEwao5lg5KEcVd/2a+D1rvoG7NdilmYz0NwRk6StWpWdz/Hpk34MKPpx7s8XxUqimfcQK6gGlg== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      repeating: 2.0.1
+    dev: true
+    optional: true
+
   /indent-string/3.2.0:
     resolution:
       { integrity: sha512-BYqTHXTGUIvg7t1r4sJNKcbDZkL92nkXA8YtRpbjFHRHGDL/NtUeiBJMeE60kIFN/Mg8ESaWQvftaYMGJzQZCQ== }
@@ -8770,7 +14515,6 @@ packages:
   /infer-owner/1.0.4:
     resolution:
       { integrity: sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A== }
-    optional: true
 
   /inflight/1.0.6:
     resolution:
@@ -8779,6 +14523,11 @@ packages:
       once: 1.4.0
       wrappy: 1.0.2
 
+  /inherits/2.0.1:
+    resolution:
+      { integrity: sha512-8nWq2nLTAwd02jTqJExUYFSD/fKq6VH9Y/oG2accc/kdI0V98Bag8d5a4gi3XHz73rDWa2PvTtvcWYquKqSENA== }
+    dev: true
+
   /inherits/2.0.3:
     resolution:
       { integrity: sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw== }
@@ -8792,6 +14541,11 @@ packages:
     resolution:
       { integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew== }
 
+  /inline-style-parser/0.1.1:
+    resolution:
+      { integrity: sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q== }
+    dev: true
+
   /inquirer/8.2.4:
     resolution:
       { integrity: sha512-nn4F01dxU8VeKfq192IjLsxu0/OmMZ4Lg3xKAns148rCaXP6ntAoEkVYZThWjwON8AlzdZZi6oqnhNbxUG9hVg== }
@@ -8872,11 +14626,51 @@ packages:
       { integrity: sha512-PuExPYUiu6qMBQb4l06ecm6T6ujzhmh+MeJcW9wa89PoAz5pvd4zPgN5WJV104mb6S2T1AwNIAaB70JNrLQWhg== }
     optional: true
 
+  /ip/2.0.0:
+    resolution:
+      { integrity: sha512-WKa+XuLG1A1R0UWhl2+1XQSi+fZWMsYKffMZTTYsiZaUD8k2yDAj5atimTUD2TZkyCkNEeYE5NhFZmupOGtjYQ== }
+    dev: true
+
   /ipaddr.js/1.9.1:
     resolution:
       { integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g== }
     engines: { node: '>= 0.10' }
 
+  /is-absolute-url/3.0.3:
+    resolution:
+      { integrity: sha512-opmNIX7uFnS96NtPmhWQgQx6/NYFgsUXYMllcfzwWKUMwfo8kku1TvE6hkNcH+Q1ts5cMVrsY7j0bxXQDciu9Q== }
+    engines: { node: '>=8' }
+    dev: true
+
+  /is-accessor-descriptor/0.1.6:
+    resolution:
+      { integrity: sha512-e1BM1qnDbMRG3ll2U9dSK0UMHuWOs3pY3AtcFsmvwPtKL3MML/Q86i+GilLfvqEs4GW+ExB91tQ3Ig9noDIZ+A== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      kind-of: 3.2.2
+    dev: true
+
+  /is-accessor-descriptor/1.0.0:
+    resolution:
+      { integrity: sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      kind-of: 6.0.3
+    dev: true
+
+  /is-alphabetical/1.0.4:
+    resolution:
+      { integrity: sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg== }
+    dev: true
+
+  /is-alphanumerical/1.0.4:
+    resolution:
+      { integrity: sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A== }
+    dependencies:
+      is-alphabetical: 1.0.4
+      is-decimal: 1.0.4
+    dev: true
+
   /is-arguments/1.1.1:
     resolution:
       { integrity: sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA== }
@@ -8884,7 +14678,6 @@ packages:
     dependencies:
       call-bind: 1.0.2
       has-tostringtag: 1.0.0
-    dev: false
 
   /is-arrayish/0.2.1:
     resolution:
@@ -8900,6 +14693,15 @@ packages:
     dependencies:
       has-bigints: 1.0.2
 
+  /is-binary-path/1.0.1:
+    resolution:
+      { integrity: sha512-9fRVlXc0uCxEDj1nQzaWONSpbTfx0FmJfzHF7pwlI8DkWGoHBBea4Pg5Ky0ojwwxQmnSifgbKkI06Qv0Ljgj+Q== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      binary-extensions: 1.13.1
+    dev: true
+    optional: true
+
   /is-binary-path/2.1.0:
     resolution:
       { integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw== }
@@ -8915,6 +14717,17 @@ packages:
       call-bind: 1.0.2
       has-tostringtag: 1.0.0
 
+  /is-buffer/1.1.6:
+    resolution:
+      { integrity: sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w== }
+    dev: true
+
+  /is-buffer/2.0.5:
+    resolution:
+      { integrity: sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ== }
+    engines: { node: '>=4' }
+    dev: true
+
   /is-builtin-module/3.1.0:
     resolution:
       { integrity: sha512-OV7JjAgOTfAFJmHZLvpSTb4qi0nIILDV1gWPYDnDJUTNFM5aGlRAhk4QcT8i7TuAleeEV5Fdkqn3t4mS+Q11fg== }
@@ -8928,12 +14741,36 @@ packages:
       { integrity: sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w== }
     engines: { node: '>= 0.4' }
 
-  /is-core-module/2.9.0:
+  /is-ci/2.0.0:
     resolution:
-      { integrity: sha512-+5FPy5PnwmO3lvfMb0AsoPaBG+5KHUI0wYFXOtYPnVVVspTFUuMZNfNaNVRt3FZadstu2c8x23vykRW/NBoU6A== }
+      { integrity: sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w== }
+    hasBin: true
+    dependencies:
+      ci-info: 2.0.0
+    dev: true
+
+  /is-core-module/2.10.0:
+    resolution:
+      { integrity: sha512-Erxj2n/LDAZ7H8WNJXd9tw38GYM3dv8rk8Zcs+jJuxYTW7sozH+SS8NtrSjVL1/vpLvWi1hxy96IzjJ3EHTJJg== }
     dependencies:
       has: 1.0.3
 
+  /is-data-descriptor/0.1.4:
+    resolution:
+      { integrity: sha512-+w9D5ulSoBNlmw9OHn3U2v51SyoCd0he+bB3xMl62oijhrspxowjU+AIcDY0N3iEJbUEkB15IlMASQsxYigvXg== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      kind-of: 3.2.2
+    dev: true
+
+  /is-data-descriptor/1.0.0:
+    resolution:
+      { integrity: sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      kind-of: 6.0.3
+    dev: true
+
   /is-date-object/1.0.5:
     resolution:
       { integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ== }
@@ -8941,23 +14778,79 @@ packages:
     dependencies:
       has-tostringtag: 1.0.0
 
+  /is-decimal/1.0.4:
+    resolution:
+      { integrity: sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw== }
+    dev: true
+
+  /is-descriptor/0.1.6:
+    resolution:
+      { integrity: sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      is-accessor-descriptor: 0.1.6
+      is-data-descriptor: 0.1.4
+      kind-of: 5.1.0
+    dev: true
+
+  /is-descriptor/1.0.2:
+    resolution:
+      { integrity: sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      is-accessor-descriptor: 1.0.0
+      is-data-descriptor: 1.0.0
+      kind-of: 6.0.3
+    dev: true
+
   /is-docker/2.2.1:
     resolution:
       { integrity: sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ== }
     engines: { node: '>=8' }
     hasBin: true
 
+  /is-dom/1.1.0:
+    resolution:
+      { integrity: sha512-u82f6mvhYxRPKpw8V1N0W8ce1xXwOrQtgGcxl6UCL5zBmZu3is/18K0rR7uFCnMDuAsS/3W54mGL4vsaFUQlEQ== }
+    dependencies:
+      is-object: 1.0.2
+      is-window: 1.0.2
+    dev: true
+
+  /is-expression/4.0.0:
+    resolution:
+      { integrity: sha512-zMIXX63sxzG3XrkHkrAPvm/OVZVSCPNkwMHU8oTX7/U3AL78I0QXCEICXUM13BIa8TYGZ68PiTKfQz3yaTNr4A== }
+    dependencies:
+      acorn: 7.4.1
+      object-assign: 4.1.1
+    dev: true
+
   /is-extendable/0.1.1:
     resolution:
       { integrity: sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw== }
     engines: { node: '>=0.10.0' }
     dev: true
 
+  /is-extendable/1.0.1:
+    resolution:
+      { integrity: sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      is-plain-object: 2.0.4
+    dev: true
+
   /is-extglob/2.1.1:
     resolution:
       { integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ== }
     engines: { node: '>=0.10.0' }
 
+  /is-finite/1.1.0:
+    resolution:
+      { integrity: sha512-cdyMtqX/BOqqNBBiKlIVkytNHm49MtMlYyn1zxzvJKWmFMlGzm+ry5BBfYyeY9YmNKbRSo/o7OX9w9ale0wg3w== }
+    engines: { node: '>=0.10.0' }
+    dev: true
+    optional: true
+
   /is-fullwidth-code-point/1.0.0:
     resolution:
       { integrity: sha512-1pqUqRjkhPJ9miNq9SwMfdvi6lBJcd6eFxvfaivQhaH3SgisfiuudvFntdKOmxuee/77l+FPjKrQjWvmPjWrRw== }
@@ -8983,6 +14876,11 @@ packages:
     engines: { node: '>=12' }
     dev: true
 
+  /is-function/1.0.2:
+    resolution:
+      { integrity: sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ== }
+    dev: true
+
   /is-generator-fn/2.1.0:
     resolution:
       { integrity: sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ== }
@@ -8997,6 +14895,14 @@ packages:
       has-tostringtag: 1.0.0
     dev: false
 
+  /is-glob/3.1.0:
+    resolution:
+      { integrity: sha512-UFpDDrPgM6qpnFNI+rh/p3bUaq9hKLZN8bMUWzxmcnZVS3omf4IPK+BrewlnWjO1WmUsMYuSjKh4UJuV4+Lqmw== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      is-extglob: 2.1.1
+    dev: true
+
   /is-glob/4.0.3:
     resolution:
       { integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg== }
@@ -9004,6 +14910,11 @@ packages:
     dependencies:
       is-extglob: 2.1.1
 
+  /is-hexadecimal/1.0.4:
+    resolution:
+      { integrity: sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw== }
+    dev: true
+
   /is-interactive/1.0.0:
     resolution:
       { integrity: sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w== }
@@ -9015,6 +14926,11 @@ packages:
       { integrity: sha512-z7CMFGNrENq5iFB9Bqo64Xk6Y9sg+epq1myIcdHaGnbMTYOxvzsEtdYqQUylB7LxfkvgrrjP32T6Ywciio9UIQ== }
     optional: true
 
+  /is-map/2.0.2:
+    resolution:
+      { integrity: sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg== }
+    dev: true
+
   /is-module/1.0.0:
     resolution:
       { integrity: sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g== }
@@ -9032,6 +14948,14 @@ packages:
     dependencies:
       has-tostringtag: 1.0.0
 
+  /is-number/3.0.0:
+    resolution:
+      { integrity: sha512-4cboCqIpliH+mAvFNegjZQ4kgKc3ZUhQVr3HvWbSh5q3WH2v82ct+T2Y1hdU5Gdtorx/cLifQjqCbL7bpznLTg== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      kind-of: 3.2.2
+    dev: true
+
   /is-number/7.0.0:
     resolution:
       { integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng== }
@@ -9043,6 +14967,11 @@ packages:
     engines: { node: '>=8' }
     dev: false
 
+  /is-object/1.0.2:
+    resolution:
+      { integrity: sha512-2rRIahhZr2UWb45fIOuvZGpFtz0TyOZLf32KxBbSoUCeZR495zCKlWUKKUByk3geS2eAs7ZAABt0Y/Rx0GiQGA== }
+    dev: true
+
   /is-observable/1.1.0:
     resolution:
       { integrity: sha512-NqCa4Sa2d+u7BWc6CukaObG3Fh+CU9bvixbpcXYhy2VvYS7vVGIdAgnIS5Ks3A/cqk4rebLJ9s8zBstT2aKnIA== }
@@ -9057,14 +14986,18 @@ packages:
     engines: { node: '>=0.10.0' }
     dev: true
 
+  /is-plain-obj/2.1.0:
+    resolution:
+      { integrity: sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA== }
+    engines: { node: '>=8' }
+    dev: true
+
   /is-plain-object/2.0.4:
     resolution:
       { integrity: sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og== }
     engines: { node: '>=0.10.0' }
     dependencies:
       isobject: 3.0.1
-    dev: false
-    optional: true
 
   /is-plain-object/5.0.0:
     resolution:
@@ -9097,6 +15030,11 @@ packages:
       call-bind: 1.0.2
       has-tostringtag: 1.0.0
 
+  /is-set/2.0.2:
+    resolution:
+      { integrity: sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g== }
+    dev: true
+
   /is-shared-array-buffer/1.0.2:
     resolution:
       { integrity: sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA== }
@@ -9159,7 +15097,6 @@ packages:
   /is-utf8/0.2.1:
     resolution:
       { integrity: sha512-rMYPYvCzsXywIsldgLaSoPlw5PfoB/ssr7hY4pLfcodrA5M/eArza1a9VmTiNIBNMjOGr1Ow9mTyU2o69U6U9Q== }
-    dev: false
 
   /is-weakref/1.0.2:
     resolution:
@@ -9167,6 +15104,33 @@ packages:
     dependencies:
       call-bind: 1.0.2
 
+  /is-whitespace-character/1.0.4:
+    resolution:
+      { integrity: sha512-SDweEzfIZM0SJV0EUga669UTKlmL0Pq8Lno0QDQsPnvECB3IM2aP0gdx5TrU0A01MAPfViaZiI2V1QMZLaKK5w== }
+    dev: true
+
+  /is-window/1.0.2:
+    resolution:
+      { integrity: sha512-uj00kdXyZb9t9RcAUAwMZAnkBUwdYGhYlt7djMXhfyhUCzwNba50tIiBKR7q0l7tdoBtFVw/3JmLY6fI3rmZmg== }
+    dev: true
+
+  /is-windows/1.0.2:
+    resolution:
+      { integrity: sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA== }
+    engines: { node: '>=0.10.0' }
+    dev: true
+
+  /is-word-character/1.0.4:
+    resolution:
+      { integrity: sha512-5SMO8RVennx3nZrqtKwCGyyetPE9VDba5ugvKLaD4KopPG5kR4mQ7tNt/r7feL5yt5h3lpuBbIUmCOG2eSzXHA== }
+    dev: true
+
+  /is-wsl/1.1.0:
+    resolution:
+      { integrity: sha512-gfygJYZ2gLTDlmbWMI0CE2MwnFzSN/2SZfkMlItC4K/JBlsWVDB0bO6XhqcY13YXE7iMcAJnzTCJjPiTeJJ0Mw== }
+    engines: { node: '>=4' }
+    dev: true
+
   /is-wsl/2.2.0:
     resolution:
       { integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww== }
@@ -9192,12 +15156,34 @@ packages:
     resolution:
       { integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw== }
 
+  /isobject/2.1.0:
+    resolution:
+      { integrity: sha512-+OUdGJlgjOBZDfxnDjYYG6zp487z0JGNQq3cYQYg5f5hKR+syHMsaztzGeml/4kGG55CSpKSpWTY+jYGgsHLgA== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      isarray: 1.0.0
+    dev: true
+
   /isobject/3.0.1:
     resolution:
       { integrity: sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg== }
     engines: { node: '>=0.10.0' }
-    dev: false
-    optional: true
+
+  /isobject/4.0.0:
+    resolution:
+      { integrity: sha512-S/2fF5wH8SJA/kmwr6HYhK/RI/OkhD84k8ntalo0iJjZikgq1XFvR5M8NPT1x5F7fBwCG3qHfnzeP/Vh/ZxCUA== }
+    engines: { node: '>=0.10.0' }
+    dev: true
+
+  /isomorphic-unfetch/3.1.0:
+    resolution:
+      { integrity: sha512-geDJjpoZ8N0kWexiwkX8F9NkTsXhetLPVbZFQ+JTW239QNOwvB0gniuR1Wc6f0AMTn7/mFGyXvHTifrCp/GH8Q== }
+    dependencies:
+      node-fetch: 2.6.7
+      unfetch: 4.2.0
+    transitivePeerDependencies:
+      - encoding
+    dev: true
 
   /istanbul-lib-coverage/3.2.0:
     resolution:
@@ -9210,8 +15196,8 @@ packages:
       { integrity: sha512-6Lthe1hqXHBNsqvgDzGO6l03XNeu3CrG4RqQ1KM9+l5+jNGpEJfIELx1NS3SEHmJQA8np/u+E4EPRKRiu6m19A== }
     engines: { node: '>=8' }
     dependencies:
-      '@babel/core': 7.18.6
-      '@babel/parser': 7.18.8
+      '@babel/core': 7.18.13
+      '@babel/parser': 7.18.13
       '@istanbuljs/schema': 0.1.3
       istanbul-lib-coverage: 3.2.0
       semver: 6.3.0
@@ -9250,6 +15236,19 @@ packages:
       istanbul-lib-report: 3.0.0
     dev: true
 
+  /iterate-iterator/1.0.2:
+    resolution:
+      { integrity: sha512-t91HubM4ZDQ70M9wqp+pcNpu8OyJ9UAtXntT/Bcsvp5tZMnz9vRa+IunKXeI8AnfZMTv0jNuVEmGeLSMjVvfPw== }
+    dev: true
+
+  /iterate-value/1.0.2:
+    resolution:
+      { integrity: sha512-A6fMAio4D2ot2r/TYzr4yUWrmwNdsN5xL7+HUiyACE4DXm+q8HtPcnFTp+NnW3k4N05tZ7FVYFFb2CR13NxyHQ== }
+    dependencies:
+      es-get-iterator: 1.1.2
+      iterate-iterator: 1.0.2
+    dev: true
+
   /jackpot/0.0.6:
     resolution:
       { integrity: sha512-rbWXX+A9ooq03/dfavLg9OXQ8YB57Wa7PY5c4LfU3CgFpwEhhl3WyXTQVurkaT7zBM5I9SSOaiLyJ4I0DQmC0g== }
@@ -9314,7 +15313,7 @@ packages:
       '@jest/expect': 28.1.3
       '@jest/test-result': 28.1.3
       '@jest/types': 28.1.3
-      '@types/node': 18.0.4
+      '@types/node': 18.7.14
       chalk: 4.1.2
       co: 4.6.0
       dedent: 0.7.0
@@ -9476,10 +15475,10 @@ packages:
       ts-node:
         optional: true
     dependencies:
-      '@babel/core': 7.18.6
+      '@babel/core': 7.18.13
       '@jest/test-sequencer': 28.1.3
       '@jest/types': 28.1.3
-      babel-jest: 28.1.3_@babel+core@7.18.6
+      babel-jest: 28.1.3_@babel+core@7.18.13
       chalk: 4.1.2
       ci-info: 3.3.2
       deepmerge: 4.2.2
@@ -9502,7 +15501,7 @@ packages:
       - supports-color
     dev: true
 
-  /jest-config/28.1.3_@types+node@18.0.4:
+  /jest-config/28.1.3_@types+node@18.7.14:
     resolution:
       { integrity: sha512-MG3INjByJ0J4AsNBm7T3hsuxKQqFIiRo/AUqb1q9LRKI5UU6Aar9JHbr9Ivn1TVwfUD9KirRoM/T6u8XlcQPHQ== }
     engines: { node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0 }
@@ -9515,11 +15514,11 @@ packages:
       ts-node:
         optional: true
     dependencies:
-      '@babel/core': 7.18.6
+      '@babel/core': 7.18.13
       '@jest/test-sequencer': 28.1.3
       '@jest/types': 28.1.3
-      '@types/node': 18.0.4
-      babel-jest: 28.1.3_@babel+core@7.18.6
+      '@types/node': 18.7.14
+      babel-jest: 28.1.3_@babel+core@7.18.13
       chalk: 4.1.2
       ci-info: 3.3.2
       deepmerge: 4.2.2
@@ -9555,11 +15554,11 @@ packages:
       ts-node:
         optional: true
     dependencies:
-      '@babel/core': 7.18.6
+      '@babel/core': 7.18.13
       '@jest/test-sequencer': 28.1.3
       '@jest/types': 28.1.3
       '@types/node': 16.11.9
-      babel-jest: 28.1.3_@babel+core@7.18.6
+      babel-jest: 28.1.3_@babel+core@7.18.13
       chalk: 4.1.2
       ci-info: 3.3.2
       deepmerge: 4.2.2
@@ -9583,7 +15582,7 @@ packages:
       - supports-color
     dev: true
 
-  /jest-config/28.1.3_eio7cbjqhmwmavckftygdsgouq:
+  /jest-config/28.1.3_gsb7asu77en4txj3es3i65pxci:
     resolution:
       { integrity: sha512-MG3INjByJ0J4AsNBm7T3hsuxKQqFIiRo/AUqb1q9LRKI5UU6Aar9JHbr9Ivn1TVwfUD9KirRoM/T6u8XlcQPHQ== }
     engines: { node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0 }
@@ -9596,11 +15595,11 @@ packages:
       ts-node:
         optional: true
     dependencies:
-      '@babel/core': 7.18.6
+      '@babel/core': 7.18.13
       '@jest/test-sequencer': 28.1.3
       '@jest/types': 28.1.3
-      '@types/node': 18.0.4
-      babel-jest: 28.1.3_@babel+core@7.18.6
+      '@types/node': 18.7.14
+      babel-jest: 28.1.3_@babel+core@7.18.13
       chalk: 4.1.2
       ci-info: 3.3.2
       deepmerge: 4.2.2
@@ -9726,7 +15725,7 @@ packages:
       '@jest/environment': 28.1.3
       '@jest/fake-timers': 28.1.3
       '@jest/types': 28.1.3
-      '@types/node': 18.0.4
+      '@types/node': 18.7.14
       jest-mock: 28.1.3
       jest-util: 28.1.3
     dev: true
@@ -9743,6 +15742,30 @@ packages:
     engines: { node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0 }
     dev: true
 
+  /jest-haste-map/26.6.2:
+    resolution:
+      { integrity: sha512-easWIJXIw71B2RdR8kgqpjQrbMRWQBgiBwXYEhtGUTaX+doCjBheluShdDMeR8IMfJiTqH4+zfhtg29apJf/8w== }
+    engines: { node: '>= 10.14.2' }
+    dependencies:
+      '@jest/types': 26.6.2
+      '@types/graceful-fs': 4.1.5
+      '@types/node': 18.0.4
+      anymatch: 3.1.2
+      fb-watchman: 2.0.1
+      graceful-fs: 4.2.10
+      jest-regex-util: 26.0.0
+      jest-serializer: 26.6.2
+      jest-util: 26.6.2
+      jest-worker: 26.6.2
+      micromatch: 4.0.5
+      sane: 4.1.0
+      walker: 1.0.8
+    optionalDependencies:
+      fsevents: 2.3.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /jest-haste-map/27.5.1:
     resolution:
       { integrity: sha512-7GgkZ4Fw4NFbMSDSpZwXeBiIbx+t/46nJ2QitkOjvwPYyZmqttu2TDSimMHP1EkPOi4xUZAN1doE5Vd25H4Jng== }
@@ -9771,7 +15794,7 @@ packages:
     dependencies:
       '@jest/types': 28.1.3
       '@types/graceful-fs': 4.1.5
-      '@types/node': 18.0.4
+      '@types/node': 18.7.14
       anymatch: 3.1.2
       fb-watchman: 2.0.1
       graceful-fs: 4.2.10
@@ -9897,7 +15920,7 @@ packages:
     engines: { node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0 }
     dependencies:
       '@jest/types': 28.1.3
-      '@types/node': 18.0.4
+      '@types/node': 18.7.14
     dev: true
 
   /jest-pnp-resolver/1.2.2_jest-resolve@27.5.1:
@@ -9926,6 +15949,12 @@ packages:
       jest-resolve: 28.1.3
     dev: true
 
+  /jest-regex-util/26.0.0:
+    resolution:
+      { integrity: sha512-Gv3ZIs/nA48/Zvjrl34bf+oD76JHiGDUxNOVgUjh3j890sblXryjY4rss71fPtD/njchl6PSE2hIhvyWa1eT0A== }
+    engines: { node: '>= 10.14.2' }
+    dev: true
+
   /jest-regex-util/27.5.1:
     resolution:
       { integrity: sha512-4bfKq2zie+x16okqDXjXn9ql2B0dScQu+vcwe4TvFVhkVyuWLqpZrZtXxLLWoXYgn0E87I6r6GRYHF7wFZBUvg== }
@@ -10037,7 +16066,7 @@ packages:
       '@jest/test-result': 28.1.3
       '@jest/transform': 28.1.3
       '@jest/types': 28.1.3
-      '@types/node': 18.0.4
+      '@types/node': 18.7.14
       chalk: 4.1.2
       emittery: 0.10.2
       graceful-fs: 4.2.10
@@ -10119,6 +16148,15 @@ packages:
       - supports-color
     dev: true
 
+  /jest-serializer/26.6.2:
+    resolution:
+      { integrity: sha512-S5wqyz0DXnNJPd/xfIzZ5Xnp1HrJWBczg8mMfMpN78OJ5eDxXyf+Ygld9wX1DnUWbIbhM1YDY95NjR4CBXkb2g== }
+    engines: { node: '>= 10.14.2' }
+    dependencies:
+      '@types/node': 18.0.4
+      graceful-fs: 4.2.10
+    dev: true
+
   /jest-serializer/27.5.1:
     resolution:
       { integrity: sha512-jZCyo6iIxO1aqUxpuBlwTDMkzOAJS4a3eYz3YzgxxVQFwLeSA7Jfq5cbqCY+JLvTDrWirgusI/0KwxKMgrdf7w== }
@@ -10164,17 +16202,17 @@ packages:
       { integrity: sha512-4lzMgtiNlc3DU/8lZfmqxN3AYD6GGLbl+72rdBpXvcV+whX7mDrREzkPdp2RnmfIiWBg1YbuFSkXduF2JcafJg== }
     engines: { node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0 }
     dependencies:
-      '@babel/core': 7.18.6
-      '@babel/generator': 7.18.7
-      '@babel/plugin-syntax-typescript': 7.18.6_@babel+core@7.18.6
-      '@babel/traverse': 7.18.8
-      '@babel/types': 7.18.8
+      '@babel/core': 7.18.13
+      '@babel/generator': 7.18.13
+      '@babel/plugin-syntax-typescript': 7.18.6_@babel+core@7.18.13
+      '@babel/traverse': 7.18.13
+      '@babel/types': 7.18.13
       '@jest/expect-utils': 28.1.3
       '@jest/transform': 28.1.3
       '@jest/types': 28.1.3
-      '@types/babel__traverse': 7.17.1
-      '@types/prettier': 2.6.3
-      babel-preset-current-node-syntax: 1.0.1_@babel+core@7.18.6
+      '@types/babel__traverse': 7.18.1
+      '@types/prettier': 2.7.0
+      babel-preset-current-node-syntax: 1.0.1_@babel+core@7.18.13
       chalk: 4.1.2
       expect: 28.1.3
       graceful-fs: 4.2.10
@@ -10191,6 +16229,19 @@ packages:
       - supports-color
     dev: true
 
+  /jest-util/26.6.2:
+    resolution:
+      { integrity: sha512-MDW0fKfsn0OI7MS7Euz6h8HNDXVQ0gaM9uW6RjfDmd1DAFcaxX9OqIakHIqhbnmF08Cf2DLDG+ulq8YQQ0Lp0Q== }
+    engines: { node: '>= 10.14.2' }
+    dependencies:
+      '@jest/types': 26.6.2
+      '@types/node': 18.0.4
+      chalk: 4.1.2
+      graceful-fs: 4.2.10
+      is-ci: 2.0.0
+      micromatch: 4.0.5
+    dev: true
+
   /jest-util/27.5.1:
     resolution:
       { integrity: sha512-Kv2o/8jNvX1MQ0KGtw480E/w4fBCDOnH6+6DmeKi6LZUIlKA5kwY0YNdlzaWTiVgxqAqik11QyxDOKk543aKXw== }
@@ -10210,7 +16261,7 @@ packages:
     engines: { node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0 }
     dependencies:
       '@jest/types': 28.1.3
-      '@types/node': 18.0.4
+      '@types/node': 18.7.14
       chalk: 4.1.2
       ci-info: 3.3.2
       graceful-fs: 4.2.10
@@ -10264,7 +16315,7 @@ packages:
     dependencies:
       '@jest/test-result': 28.1.3
       '@jest/types': 28.1.3
-      '@types/node': 18.0.4
+      '@types/node': 18.7.14
       ansi-escapes: 4.3.2
       chalk: 4.1.2
       emittery: 0.10.2
@@ -10280,7 +16331,6 @@ packages:
       '@types/node': 18.0.4
       merge-stream: 2.0.0
       supports-color: 7.2.0
-    dev: false
 
   /jest-worker/27.5.1:
     resolution:
@@ -10297,7 +16347,7 @@ packages:
       { integrity: sha512-CqRA220YV/6jCo8VWvAt1KKx6eek1VIHMPeLEbpcfSfkEeWyBNppynM/o6q+Wmw+sOhos2ml34wZbSX3G13//g== }
     engines: { node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0 }
     dependencies:
-      '@types/node': 18.0.4
+      '@types/node': 18.7.14
       merge-stream: 2.0.0
       supports-color: 8.1.1
     dev: true
@@ -10398,6 +16448,17 @@ packages:
       { integrity: sha512-7rySkpW78d8LBp4YU70Wb7+OTgE3OwAALNVZxhoIhp4Kscp+p/fBkdpxGAMKxvCAMV4QfXBU9m6l9nX/vGwd2g== }
     dev: false
 
+  /js-string-escape/1.0.1:
+    resolution:
+      { integrity: sha512-Smw4xcfIQ5LVjAOuJCvN/zIodzA/BBSsluuoSykP+lUvScIi4U6RJLfwHet5cxFnCswUjISV8oAXaqaJDY3chg== }
+    engines: { node: '>= 0.8' }
+    dev: true
+
+  /js-stringify/1.0.2:
+    resolution:
+      { integrity: sha512-rtS5ATOo2Q5k1G+DADISilDA6lv79zIiwFd6CcjuIxGKLFm5C+RLImRscVap9k55i+MOZwgliw+NejvkLuGD5g== }
+    dev: true
+
   /js-tokens/4.0.0:
     resolution:
       { integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ== }
@@ -10429,6 +16490,37 @@ packages:
     resolution:
       { integrity: sha512-aBE4n43IPvjaddScbvWRA2YlTzKEynHzu7MqOyTipdHucf/VxS63ViCjxYRg86M8Rxwbt/GfzHl1kKERkt45fQ== }
 
+  /jscodeshift/0.13.1_@babel+preset-env@7.16.11:
+    resolution:
+      { integrity: sha512-lGyiEbGOvmMRKgWk4vf+lUrCWO/8YR8sUR3FKF1Cq5fovjZDlIcw3Hu5ppLHAnEXshVffvaM0eyuY/AbOeYpnQ== }
+    hasBin: true
+    peerDependencies:
+      '@babel/preset-env': ^7.1.6
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/parser': 7.18.8
+      '@babel/plugin-proposal-class-properties': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-proposal-nullish-coalescing-operator': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-proposal-optional-chaining': 7.18.9_@babel+core@7.18.6
+      '@babel/plugin-transform-modules-commonjs': 7.18.6_@babel+core@7.18.6
+      '@babel/preset-env': 7.16.11_@babel+core@7.18.6
+      '@babel/preset-flow': 7.18.6_@babel+core@7.18.6
+      '@babel/preset-typescript': 7.18.6_@babel+core@7.18.6
+      '@babel/register': 7.18.9_@babel+core@7.18.6
+      babel-core: 7.0.0-bridge.0_@babel+core@7.18.6
+      chalk: 4.1.2
+      flow-parser: 0.185.2
+      graceful-fs: 4.2.10
+      micromatch: 3.1.10
+      neo-async: 2.6.2
+      node-dir: 0.1.17
+      recast: 0.20.5
+      temp: 0.8.4
+      write-file-atomic: 2.4.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /jsdom/16.7.0:
     resolution:
       { integrity: sha512-u9Smc2G1USStM+s/x1ru5Sxrl6mPYCbByG1U/hUmqaVsm4tbNyS7CicOSRyuGQYZhTu0h84qkZZQ/I+dzizSVw== }
@@ -10472,6 +16564,12 @@ packages:
       - utf-8-validate
     dev: true
 
+  /jsesc/0.5.0:
+    resolution:
+      { integrity: sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA== }
+    hasBin: true
+    dev: true
+
   /jsesc/2.5.2:
     resolution:
       { integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA== }
@@ -10547,6 +16645,14 @@ packages:
       jsonparse: 1.3.1
       lodash.get: 4.4.2
 
+  /json5/1.0.1:
+    resolution:
+      { integrity: sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow== }
+    hasBin: true
+    dependencies:
+      minimist: 1.2.6
+    dev: true
+
   /json5/2.2.1:
     resolution:
       { integrity: sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA== }
@@ -10584,8 +16690,8 @@ packages:
     engines: { node: '>= 0.6' }
     hasBin: true
     dependencies:
-      chalk: 2.4.2
       JSV: 4.0.2
+      chalk: 2.4.2
       underscore: 1.13.4
     dev: true
 
@@ -10610,6 +16716,20 @@ packages:
       ms: 2.1.3
       semver: 5.7.1
 
+  /jstransformer/1.0.0:
+    resolution:
+      { integrity: sha512-C9YK3Rf8q6VAPDCCU9fnqo3mAfOH6vUGnMcP4AQAYIEpWtfGLpwOTmZ+igtdK5y+VvI2n3CyYSzy4Qh34eq24A== }
+    dependencies:
+      is-promise: 2.2.2
+      promise: 7.3.1
+    dev: true
+
+  /junk/3.1.0:
+    resolution:
+      { integrity: sha512-pBxcB3LFc8QVgdggvZWyeys+hnrNWg4OcZIU/1X59k5jQdLBlCsYGRQaz234SqoRLTCgMH00fY0xRJH+F9METQ== }
+    engines: { node: '>=8' }
+    dev: true
+
   /jwa/1.4.1:
     resolution:
       { integrity: sha512-qiLX/xhEEFKUAJ6FiBMbes3w9ATzyk5W7Hvzpa/SLYdxNtng+gcurvrI7TbACjIXlsJyr05/S1oUhZrc63evQA== }
@@ -10672,6 +16792,28 @@ packages:
       compress-brotli: 1.3.8
       json-buffer: 3.0.1
 
+  /kind-of/3.2.2:
+    resolution:
+      { integrity: sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      is-buffer: 1.1.6
+    dev: true
+
+  /kind-of/4.0.0:
+    resolution:
+      { integrity: sha512-24XsCxmEbRwEDbz/qz3stgin8TTzZ1ESR56OMCN0ujYg+vRutNSiOj9bHH9u85DKgXguraugV5sFuvbD4FW/hw== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      is-buffer: 1.1.6
+    dev: true
+
+  /kind-of/5.1.0:
+    resolution:
+      { integrity: sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw== }
+    engines: { node: '>=0.10.0' }
+    dev: true
+
   /kind-of/6.0.3:
     resolution:
       { integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw== }
@@ -10683,6 +16825,12 @@ packages:
     engines: { node: '>=6' }
     dev: true
 
+  /klona/2.0.5:
+    resolution:
+      { integrity: sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ== }
+    engines: { node: '>= 8' }
+    dev: true
+
   /knex-mock-client/1.8.4_knex@2.2.0:
     resolution:
       { integrity: sha512-GdbJt8Zq+m3nr4vuFvx59hX5fBr15nNHi4yNNAWpbX5FjmskBXe6EaWUu1YVD5cFLhKvvrA0BgpyNXiHdeJbyg== }
@@ -10825,6 +16973,18 @@ packages:
     dev: false
     optional: true
 
+  /lazy-universal-dotenv/3.0.1:
+    resolution:
+      { integrity: sha512-prXSYk799h3GY3iOWnC6ZigYzMPjxN2svgjJ9shk7oMadSNX3wXy0B6F32PMJv7qtMnrIbUxoEHzbutvxR2LBQ== }
+    engines: { node: '>=6.0.0', npm: '>=6.0.0', yarn: '>=1.0.0' }
+    dependencies:
+      '@babel/runtime': 7.18.9
+      app-root-dir: 1.0.2
+      core-js: 3.25.0
+      dotenv: 8.6.0
+      dotenv-expand: 5.1.0
+    dev: true
+
   /ldap-filter/0.3.3:
     resolution:
       { integrity: sha512-/tFkx5WIn4HuO+6w9lsfxq4FN3O+fDZeO9Mek8dCD8rTUpqzRa766BOBO7BcGkn3X86m5+cBm1/2S/Shzz7gMg== }
@@ -11000,6 +17160,19 @@ packages:
       wrap-ansi: 7.0.0
     dev: true
 
+  /load-json-file/1.1.0:
+    resolution:
+      { integrity: sha512-cy7ZdNRXdablkXYNI049pthVeXFurRyb9+hA/dZzerZ0pGTx42z+y+ssxBaVV2l70t1muq5IdKhn4UtcoGUY9A== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      graceful-fs: 4.2.10
+      parse-json: 2.2.0
+      pify: 2.3.0
+      pinkie-promise: 2.0.1
+      strip-bom: 2.0.0
+    dev: true
+    optional: true
+
   /load-json-file/4.0.0:
     resolution:
       { integrity: sha512-Kx8hMakjX03tiGTLAIdJ+lL0htKnXjEZN6hk/tozf/WOuYGdZBJrZ+rCJRbVCugsjB3jMLn9746NsQIf5VjBMw== }
@@ -11011,6 +17184,38 @@ packages:
       strip-bom: 3.0.0
     dev: true
 
+  /loader-runner/2.4.0:
+    resolution:
+      { integrity: sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw== }
+    engines: { node: '>=4.3.0 <5.0.0 || >=5.10' }
+    dev: true
+
+  /loader-runner/4.3.0:
+    resolution:
+      { integrity: sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg== }
+    engines: { node: '>=6.11.5' }
+    dev: true
+
+  /loader-utils/1.4.0:
+    resolution:
+      { integrity: sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA== }
+    engines: { node: '>=4.0.0' }
+    dependencies:
+      big.js: 5.2.2
+      emojis-list: 3.0.0
+      json5: 1.0.1
+    dev: true
+
+  /loader-utils/2.0.2:
+    resolution:
+      { integrity: sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A== }
+    engines: { node: '>=8.9.0' }
+    dependencies:
+      big.js: 5.2.2
+      emojis-list: 3.0.0
+      json5: 2.2.1
+    dev: true
+
   /local-pkg/0.4.2:
     resolution:
       { integrity: sha512-mlERgSPrbxU3BP4qBqAvvwlgW4MTg78iwJdGGnv7kibKjWcJksrG3t6LB5lXI93wXRDvG4NpUgJFmTG4T6rdrg== }
@@ -11124,7 +17329,6 @@ packages:
   /lodash.uniq/4.5.0:
     resolution:
       { integrity: sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ== }
-    dev: false
 
   /lodash/4.17.21:
     resolution:
@@ -11168,6 +17372,24 @@ packages:
       wrap-ansi: 6.2.0
     dev: true
 
+  /loose-envify/1.4.0:
+    resolution:
+      { integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q== }
+    hasBin: true
+    dependencies:
+      js-tokens: 4.0.0
+    dev: true
+
+  /loud-rejection/1.6.0:
+    resolution:
+      { integrity: sha512-RPNliZOFkqFumDhvYqOaNY4Uz9oJM2K9tC6JWsJJsNdhuONW4LQHRBpb0qf4pJApVffI5N39SwzWZJuEhfd7eQ== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      currently-unhandled: 0.4.1
+      signal-exit: 3.0.7
+    dev: true
+    optional: true
+
   /loupe/2.3.4:
     resolution:
       { integrity: sha512-OvKfgCC2Ndby6aSTREl5aCCPTNIzlDfQZvZxNUrBrihDhL3xcrYegTblhmEiCrg2kKQz4XsFIaemE5BF4ybSaQ== }
@@ -11175,12 +17397,34 @@ packages:
       get-func-name: 2.0.0
     dev: true
 
+  /lower-case/2.0.2:
+    resolution:
+      { integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg== }
+    dependencies:
+      tslib: 2.4.0
+    dev: true
+
   /lowercase-keys/2.0.0:
     resolution:
       { integrity: sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA== }
     engines: { node: '>=8' }
     dev: true
 
+  /lru-cache/4.1.5:
+    resolution:
+      { integrity: sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g== }
+    dependencies:
+      pseudomap: 1.0.2
+      yallist: 2.1.2
+    dev: true
+
+  /lru-cache/5.1.1:
+    resolution:
+      { integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w== }
+    dependencies:
+      yallist: 3.1.1
+    dev: true
+
   /lru-cache/6.0.0:
     resolution:
       { integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA== }
@@ -11194,6 +17438,14 @@ packages:
     dependencies:
       sourcemap-codec: 1.4.8
 
+  /magic-string/0.26.3:
+    resolution:
+      { integrity: sha512-u1Po0NDyFcwdg2nzHT88wSK0+Rih0N1M+Ph1Sp08k8yvFFU3KR72wryS7e1qMPJypt99WB7fIFVCA92mQrMjrg== }
+    engines: { node: '>=12' }
+    dependencies:
+      sourcemap-codec: 1.4.8
+    dev: true
+
   /mailgun.js/3.7.3:
     resolution:
       { integrity: sha512-DHP9v6dNPRM2puOx4HVJVjQKWzgzpQ5Fh1ICW632qaDVgd/QqGRhOjCoHe12JJqrFkhgDvXBhENYeZDHYdkJHQ== }
@@ -11211,6 +17463,15 @@ packages:
     dev: false
     optional: true
 
+  /make-dir/2.1.0:
+    resolution:
+      { integrity: sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA== }
+    engines: { node: '>=6' }
+    dependencies:
+      pify: 4.0.1
+      semver: 5.7.1
+    dev: true
+
   /make-dir/3.1.0:
     resolution:
       { integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw== }
@@ -11256,6 +17517,12 @@ packages:
       tmpl: 1.0.5
     dev: true
 
+  /map-cache/0.2.2:
+    resolution:
+      { integrity: sha512-8y/eV9QQZCiyn1SprXSrCmqJN0yNRATe+PO8ztwqrvrbdRLA3eYJF0yaR0YayLWkMbsQSKWS9N2gPcGEc4UsZg== }
+    engines: { node: '>=0.10.0' }
+    dev: true
+
   /map-obj/1.0.1:
     resolution:
       { integrity: sha512-7N/q3lyZ+LVCp7PzuxrJr4KMbBE2hW7BT7YNia330OFxIf4d3r5zVpicP2650l7CPN6RM9zOJRl3NGpqSiw3Eg== }
@@ -11268,6 +17535,19 @@ packages:
     engines: { node: '>=8' }
     dev: true
 
+  /map-or-similar/1.5.0:
+    resolution:
+      { integrity: sha512-0aF7ZmVon1igznGI4VS30yugpduQW3y3GkcgGJOp7d8x8QrizhigUxjI/m2UojsXXto+jLAH3KSz+xOJTiORjg== }
+    dev: true
+
+  /map-visit/1.0.0:
+    resolution:
+      { integrity: sha512-4y7uGv8bd2WdM9vpQsiQNo41Ln1NvhvDRuVt0k2JZQ+ezN2uaQes7lZeZ+QQUHOLQAtDaBJ+7wCbi+ab/KFs+w== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      object-visit: 1.0.1
+    dev: true
+
   /mapbox-gl/2.9.2:
     resolution:
       { integrity: sha512-RQOUB+l8p5sUyR+vRdd4aRY1/nwOhyYxSWThr2bjXW8u8QtN4cjrb/R7W+CkLyoscISjkSvCS22nDAO69s5T4Q== }
@@ -11328,6 +17608,11 @@ packages:
       - mapbox-gl
     dev: true
 
+  /markdown-escapes/1.0.4:
+    resolution:
+      { integrity: sha512-8z4efJYk43E0upd0NbVXwgSTQs6cT3T06etieCMEg7dRbzCbxUCK/GHlX8mhHRDcp+OLlHkPKsvqQTCvsRl2cg== }
+    dev: true
+
   /markdown-it-anchor/8.6.4_ea7kj7wzjkld5jo2noyjqxi764:
     resolution:
       { integrity: sha512-Ul4YVYZNxMJYALpKtu+ZRdrryYt/GlQ5CK+4l1bp/gWXOG2QWElt6AqF3Mih/wfUKdZbNAZVXGR73/n6U/8img== }
@@ -11376,6 +17661,48 @@ packages:
     hasBin: true
     dev: false
 
+  /md5.js/1.3.5:
+    resolution:
+      { integrity: sha512-xitP+WxNPcTTOgnTJcrhM0xvdPepipPSf3I8EIpGKeFLjt3PlJLIDG3u8EX53ZIubkb+5U2+3rELYpEhHhzdkg== }
+    dependencies:
+      hash-base: 3.1.0
+      inherits: 2.0.4
+      safe-buffer: 5.2.1
+    dev: true
+
+  /mdast-squeeze-paragraphs/4.0.0:
+    resolution:
+      { integrity: sha512-zxdPn69hkQ1rm4J+2Cs2j6wDEv7O17TfXTJ33tl/+JPIoEmtV9t2ZzBM5LPHE8QlHsmVD8t3vPKCyY3oH+H8MQ== }
+    dependencies:
+      unist-util-remove: 2.1.0
+    dev: true
+
+  /mdast-util-definitions/4.0.0:
+    resolution:
+      { integrity: sha512-k8AJ6aNnUkB7IE+5azR9h81O5EQ/cTDXtWdMq9Kk5KcEW/8ritU5CeLg/9HhOC++nALHBlaogJ5jz0Ybk3kPMQ== }
+    dependencies:
+      unist-util-visit: 2.0.3
+    dev: true
+
+  /mdast-util-to-hast/10.0.1:
+    resolution:
+      { integrity: sha512-BW3LM9SEMnjf4HXXVApZMt8gLQWVNXc3jryK0nJu/rOXPOnlkUjmdkDlmxMirpbU9ILncGFIwLH/ubnWBbcdgA== }
+    dependencies:
+      '@types/mdast': 3.0.10
+      '@types/unist': 2.0.6
+      mdast-util-definitions: 4.0.0
+      mdurl: 1.0.1
+      unist-builder: 2.0.3
+      unist-util-generated: 1.1.6
+      unist-util-position: 3.1.0
+      unist-util-visit: 2.0.3
+    dev: true
+
+  /mdast-util-to-string/1.1.0:
+    resolution:
+      { integrity: sha512-jVU0Nr2B9X3MU4tSK7JP1CMkSvOj7X5l/GboG1tKRw52lLF1x2Ju92Ms9tNetCcbfX3hzlM73zYo2NKkWSfF/A== }
+    dev: true
+
   /mdn-data/2.0.14:
     resolution:
       { integrity: sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow== }
@@ -11401,6 +17728,14 @@ packages:
     dev: false
     optional: true
 
+  /memfs/3.4.7:
+    resolution:
+      { integrity: sha512-ygaiUSNalBX85388uskeCyhSAoOSgzBbtVCr9jA2RROssFL9Q19/ZXFqS+2Th2sr1ewNIWgFdLzLC3Yl1Zv+lw== }
+    engines: { node: '>= 4.0.0' }
+    dependencies:
+      fs-monkey: 1.0.3
+    dev: true
+
   /memjs/1.3.0:
     resolution:
       { integrity: sha512-y/V9a0auepA9Lgyr4QieK6K2FczjHucEdTpSS+hHVNmVEkYxruXhkHu8n6DSRQ4HXHEE3cc6Sf9f88WCJXGXsQ== }
@@ -11408,12 +17743,54 @@ packages:
     dev: false
     optional: true
 
+  /memoizerific/1.11.3:
+    resolution:
+      { integrity: sha512-/EuHYwAPdLtXwAwSZkh/Gutery6pD2KYd44oQLhAvQp/50mpyduZh8Q7PYHXTCJ+wuXxt7oij2LXyIJOOYFPog== }
+    dependencies:
+      map-or-similar: 1.5.0
+    dev: true
+
+  /memory-fs/0.4.1:
+    resolution:
+      { integrity: sha512-cda4JKCxReDXFXRqOHPQscuIYg1PvxbE2S2GP45rnwfEK+vZaXC8C1OFvdHIbgw0DLzowXGVoxLaAmlgRy14GQ== }
+    dependencies:
+      errno: 0.1.8
+      readable-stream: 2.3.7
+    dev: true
+
+  /memory-fs/0.5.0:
+    resolution:
+      { integrity: sha512-jA0rdU5KoQMC0e6ppoNRtpp6vjFq6+NY7r8hywnC7V+1Xj/MtHwGIbB1QaK/dunyjWteJzmkpd7ooeWg10T7GA== }
+    engines: { node: '>=4.3.0 <5.0.0 || >=5.10' }
+    dependencies:
+      errno: 0.1.8
+      readable-stream: 2.3.7
+    dev: true
+
   /memorystream/0.3.1:
     resolution:
       { integrity: sha512-S3UwM3yj5mtUSEfP41UZmt/0SCoVYUcU1rkXv+BQ5Ig8ndL4sPoJNBUJERafdPb5jjHJGuMgytgKvKIf58XNBw== }
     engines: { node: '>= 0.10.0' }
     dev: true
 
+  /meow/3.7.0:
+    resolution:
+      { integrity: sha512-TNdwZs0skRlpPpCUK25StC4VH+tP5GgeY1HQOOGP+lQ2xtdkN2VtT/5tiX9k3IWpkBPV9b3LsAWXn4GGi/PrSA== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      camelcase-keys: 2.1.0
+      decamelize: 1.2.0
+      loud-rejection: 1.6.0
+      map-obj: 1.0.1
+      minimist: 1.2.6
+      normalize-package-data: 2.5.0
+      object-assign: 4.1.1
+      read-pkg-up: 1.0.1
+      redent: 1.0.0
+      trim-newlines: 1.0.0
+    dev: true
+    optional: true
+
   /meow/6.1.1:
     resolution:
       { integrity: sha512-3YffViIt2QWgTy6Pale5QpopX/IvU3LPL03jOTqp6pGj3VjesdO/U8CuHMKpnQr4shCNCM5fd5XFFvIIl6JBHg== }
@@ -11450,6 +17827,33 @@ packages:
       { integrity: sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w== }
     engines: { node: '>= 0.6' }
 
+  /microevent.ts/0.1.1:
+    resolution:
+      { integrity: sha512-jo1OfR4TaEwd5HOrt5+tAZ9mqT4jmpNAusXtyfNzqVm9uiSYFZlKM1wYL4oU7azZW/PxQW53wM0S6OR1JHNa2g== }
+    dev: true
+
+  /micromatch/3.1.10:
+    resolution:
+      { integrity: sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      arr-diff: 4.0.0
+      array-unique: 0.3.2
+      braces: 2.3.2
+      define-property: 2.0.2
+      extend-shallow: 3.0.2
+      extglob: 2.0.4
+      fragment-cache: 0.2.1
+      kind-of: 6.0.3
+      nanomatch: 1.2.13
+      object.pick: 1.3.0
+      regex-not: 1.0.2
+      snapdragon: 0.8.2
+      to-regex: 3.0.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /micromatch/4.0.5:
     resolution:
       { integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA== }
@@ -11463,6 +17867,15 @@ packages:
       { integrity: sha512-SXjrEPuYNtWq0reR9LR2nHdzdQx/3re9HPcDGjm00L7hi2RsH5KMRBhYEBvPdyQC51RW/2TznjwX/sQLPPyHNw== }
     engines: { node: '>=8' }
 
+  /miller-rabin/4.0.1:
+    resolution:
+      { integrity: sha512-115fLhvZVqWwHPbClyntxEVfVDfl9DLLTuJvq3g2O/Oxi8AiNouAHvDSzHS0viUJc+V5vm3eq91Xwqn9dp4jRA== }
+    hasBin: true
+    dependencies:
+      bn.js: 4.12.0
+      brorand: 1.1.0
+    dev: true
+
   /mime-db/1.52.0:
     resolution:
       { integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg== }
@@ -11527,12 +17940,29 @@ packages:
       { integrity: sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ== }
     engines: { node: '>=10' }
 
+  /min-document/2.19.0:
+    resolution:
+      { integrity: sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ== }
+    dependencies:
+      dom-walk: 0.1.2
+    dev: true
+
   /min-indent/1.0.1:
     resolution:
       { integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg== }
     engines: { node: '>=4' }
     dev: true
 
+  /minimalistic-assert/1.0.1:
+    resolution:
+      { integrity: sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A== }
+    dev: true
+
+  /minimalistic-crypto-utils/1.0.1:
+    resolution:
+      { integrity: sha512-JIYlbt6g8i5jKfJ3xz7rF0LXmv2TkDxBLUkiBeZ7bAx4GnnNMr8xFpGnOxn6GhTEHx3SjRrZEoU+j04prX1ktg== }
+    dev: true
+
   /minimatch/3.1.2:
     resolution:
       { integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw== }
@@ -11559,7 +17989,6 @@ packages:
     engines: { node: '>= 8' }
     dependencies:
       minipass: 3.3.4
-    optional: true
 
   /minipass-fetch/1.4.1:
     resolution:
@@ -11579,7 +18008,6 @@ packages:
     engines: { node: '>= 8' }
     dependencies:
       minipass: 3.3.4
-    optional: true
 
   /minipass-pipeline/1.2.4:
     resolution:
@@ -11587,7 +18015,6 @@ packages:
     engines: { node: '>=8' }
     dependencies:
       minipass: 3.3.4
-    optional: true
 
   /minipass-sized/1.0.3:
     resolution:
@@ -11612,25 +18039,82 @@ packages:
       minipass: 3.3.4
       yallist: 4.0.0
 
+  /mississippi/3.0.0:
+    resolution:
+      { integrity: sha512-x471SsVjUtBRtcvd4BzKE9kFC+/2TeWgKCgw0bZcw1b9l2X3QX5vCWgF+KaZaYm87Ss//rHnWryupDrgLvmSkA== }
+    engines: { node: '>=4.0.0' }
+    dependencies:
+      concat-stream: 1.6.2
+      duplexify: 3.7.1
+      end-of-stream: 1.4.4
+      flush-write-stream: 1.1.1
+      from2: 2.3.0
+      parallel-transform: 1.2.0
+      pump: 3.0.0
+      pumpify: 1.5.1
+      stream-each: 1.2.3
+      through2: 2.0.5
+    dev: true
+
   /mitt/3.0.0:
     resolution:
       { integrity: sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ== }
     dev: true
 
+  /mixin-deep/1.3.2:
+    resolution:
+      { integrity: sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      for-in: 1.0.2
+      is-extendable: 1.0.1
+    dev: true
+
   /mkdirp-classic/0.5.3:
     resolution:
       { integrity: sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A== }
 
+  /mkdirp/0.5.6:
+    resolution:
+      { integrity: sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw== }
+    hasBin: true
+    dependencies:
+      minimist: 1.2.6
+    dev: true
+
   /mkdirp/1.0.4:
     resolution:
       { integrity: sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw== }
     engines: { node: '>=10' }
     hasBin: true
 
+  /move-concurrently/1.0.1:
+    resolution:
+      { integrity: sha512-hdrFxZOycD/g6A6SoI2bB5NA/5NEqD0569+S47WZhPvm46sD50ZHdYaFmnua5lndde9rCHGjmfK7Z8BuCt/PcQ== }
+    dependencies:
+      aproba: 1.2.0
+      copy-concurrently: 1.0.5
+      fs-write-stream-atomic: 1.0.10
+      mkdirp: 0.5.6
+      rimraf: 2.7.1
+      run-queue: 1.0.3
+    dev: true
+
+  /mrmime/1.0.1:
+    resolution:
+      { integrity: sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw== }
+    engines: { node: '>=10' }
+    dev: true
+
   /ms/2.0.0:
     resolution:
       { integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A== }
 
+  /ms/2.1.1:
+    resolution:
+      { integrity: sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg== }
+    dev: true
+
   /ms/2.1.2:
     resolution:
       { integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w== }
@@ -11667,6 +18151,13 @@ packages:
       safe-buffer: 5.1.2
       sqlstring: 2.3.1
 
+  /nan/2.16.0:
+    resolution:
+      { integrity: sha512-UdAqHyFngu7TfQKsCBgAA6pWDkT8MAO7d0jyOecVhN5354xbLqdn8mV9Tat9gepAupm0bt2DbeaSC8vS52MuFA== }
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /nanoid/2.1.11:
     resolution:
       { integrity: sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA== }
@@ -11685,6 +18176,33 @@ packages:
     engines: { node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1 }
     hasBin: true
 
+  /nanoid/4.0.0:
+    resolution:
+      { integrity: sha512-IgBP8piMxe/gf73RTQx7hmnhwz0aaEXYakvqZyE302IXW3HyVNhdNGC+O2MwMAVhLEnvXlvKtGbtJf6wvHihCg== }
+    engines: { node: ^14 || ^16 || >=18 }
+    hasBin: true
+    dev: false
+
+  /nanomatch/1.2.13:
+    resolution:
+      { integrity: sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      arr-diff: 4.0.0
+      array-unique: 0.3.2
+      define-property: 2.0.2
+      extend-shallow: 3.0.2
+      fragment-cache: 0.2.1
+      is-windows: 1.0.2
+      kind-of: 6.0.3
+      object.pick: 1.3.0
+      regex-not: 1.0.2
+      snapdragon: 0.8.2
+      to-regex: 3.0.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /napi-build-utils/1.0.2:
     resolution:
       { integrity: sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg== }
@@ -11708,11 +18226,29 @@ packages:
       { integrity: sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg== }
     engines: { node: '>= 0.6' }
 
+  /neo-async/2.6.2:
+    resolution:
+      { integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw== }
+    dev: true
+
+  /nested-error-stacks/2.1.1:
+    resolution:
+      { integrity: sha512-9iN1ka/9zmX1ZvLV9ewJYEk9h7RyRRtqdK0woXcqohu8EWIerfPUjYJPg0ULy0UqP7cslmdGc8xKDJcojlKiaw== }
+    dev: true
+
   /nice-try/1.0.5:
     resolution:
       { integrity: sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ== }
     dev: true
 
+  /no-case/3.0.4:
+    resolution:
+      { integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg== }
+    dependencies:
+      lower-case: 2.0.2
+      tslib: 2.4.0
+    dev: true
+
   /node-abi/3.22.0:
     resolution:
       { integrity: sha512-u4uAs/4Zzmp/jjsD9cyFYDXeISfUWaAVWshPmDZOFOv4Xl4SbzTXm53I04C2uRueYJ+0t5PEtLH/owbn2Npf/w== }
@@ -11741,6 +18277,14 @@ packages:
       uuid: 8.3.2
     dev: false
 
+  /node-dir/0.1.17:
+    resolution:
+      { integrity: sha512-tmPX422rYgofd4epzrNoOXiE8XFZYOcCq1vD7MAXCDO+O+zndlA2ztdKKMa+EeuBG5tHETpr4ml4RGgpqDCCAg== }
+    engines: { node: '>= 0.10.5' }
+    dependencies:
+      minimatch: 3.1.2
+    dev: true
+
   /node-exceptions/4.0.1:
     resolution:
       { integrity: sha512-KJI+FawYOv74x60H6+zrBPfO2vvp9m0pHZi6SH8BBBuc67Irv11DsqY4Le4EBFq1/T5aXFU3hkLrMgtW7RNXxA== }
@@ -11803,6 +18347,35 @@ packages:
       { integrity: sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw== }
     dev: true
 
+  /node-libs-browser/2.2.1:
+    resolution:
+      { integrity: sha512-h/zcD8H9kaDZ9ALUWwlBUDo6TKF8a7qBSCSEGfjTVIYeqsioSKaAX+BN7NgiMGp6iSIXZ3PxgCu8KS3b71YK5Q== }
+    dependencies:
+      assert: 1.5.0
+      browserify-zlib: 0.2.0
+      buffer: 4.9.2
+      console-browserify: 1.2.0
+      constants-browserify: 1.0.0
+      crypto-browserify: 3.12.0
+      domain-browser: 1.2.0
+      events: 3.3.0
+      https-browserify: 1.0.0
+      os-browserify: 0.3.0
+      path-browserify: 0.0.1
+      process: 0.11.10
+      punycode: 1.4.1
+      querystring-es3: 0.2.1
+      readable-stream: 2.3.7
+      stream-browserify: 2.0.2
+      stream-http: 2.8.3
+      string_decoder: 1.3.0
+      timers-browserify: 2.0.12
+      tty-browserify: 0.0.0
+      url: 0.11.0
+      util: 0.11.1
+      vm-browserify: 1.1.2
+    dev: true
+
   /node-machine-id/1.1.12:
     resolution:
       { integrity: sha512-QNABxbrPa3qEIfrE6GOJ7BYIuignnJw7iQ2YPbc3Nla1HzRJjXzZOiikfF8m7eAMfichLt3M4VgLOetqgDmgGQ== }
@@ -11937,11 +18510,25 @@ packages:
       validate-npm-package-license: 3.0.4
     dev: true
 
+  /normalize-path/2.1.1:
+    resolution:
+      { integrity: sha512-3pKJwH184Xo/lnH6oyP1q2pMd7HcypqqmRs91/6/i2CGtWwIKGCkOOMTm/zXbgTEWHw1uNpNi/igc3ePOYHb6w== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      remove-trailing-separator: 1.1.0
+    dev: true
+
   /normalize-path/3.0.0:
     resolution:
       { integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA== }
     engines: { node: '>=0.10.0' }
 
+  /normalize-range/0.1.2:
+    resolution:
+      { integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA== }
+    engines: { node: '>=0.10.0' }
+    dev: true
+
   /normalize-url/6.1.0:
     resolution:
       { integrity: sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A== }
@@ -11964,6 +18551,14 @@ packages:
       string.prototype.padend: 3.1.3
     dev: true
 
+  /npm-run-path/2.0.2:
+    resolution:
+      { integrity: sha512-lJxZYlT4DW/bRUtFh1MQIWqmLwQfAxnqWG4HhEdjMlkrJYnJn0Jrr2u3mgxqaWsdiBc76TYkTG/mhrnYTuzfHw== }
+    engines: { node: '>=4' }
+    dependencies:
+      path-key: 2.0.1
+    dev: true
+
   /npm-run-path/4.0.1:
     resolution:
       { integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw== }
@@ -12014,6 +18609,11 @@ packages:
     dependencies:
       boolbase: 1.0.0
 
+  /num2fraction/1.2.2:
+    resolution:
+      { integrity: sha512-Y1wZESM7VUThYY+4W+X4ySH2maqcA+p7UR+w8VWNWVAd6lwuXXWz/w/Cz43J/dI2I+PS6wD5N+bJUF+gjWvIqg== }
+    dev: true
+
   /number-is-nan/1.0.1:
     resolution:
       { integrity: sha512-4jbtZXNAsfZbAHiiqjLPBiCl16dES1zI4Hpzzxw61Tk+loF+sBDBKx1ICKKKwIqQ7M0mFn1TmkN7euSncWgHiQ== }
@@ -12030,6 +18630,16 @@ packages:
       { integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg== }
     engines: { node: '>=0.10.0' }
 
+  /object-copy/0.1.0:
+    resolution:
+      { integrity: sha512-79LYn6VAb63zgtmAteVOWo9Vdj71ZVBy3Pbse+VqxDpEP83XuujMrGqHIwAXJ5I/aM0zU7dIyIAhifVTPrNItQ== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      copy-descriptor: 0.1.1
+      define-property: 0.2.5
+      kind-of: 3.2.2
+    dev: true
+
   /object-hash/2.2.0:
     resolution:
       { integrity: sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw== }
@@ -12045,6 +18655,14 @@ packages:
       { integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA== }
     engines: { node: '>= 0.4' }
 
+  /object-visit/1.0.1:
+    resolution:
+      { integrity: sha512-GBaMwwAVK9qbQN3Scdo0OyvgPW7l3lnaVMj84uTOZlswkX0KpF6fyDBJhtTthf7pymztoN36/KEr1DyhF96zEA== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      isobject: 3.0.1
+    dev: true
+
   /object.assign/4.1.2:
     resolution:
       { integrity: sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ== }
@@ -12055,6 +18673,55 @@ packages:
       has-symbols: 1.0.3
       object-keys: 1.1.1
 
+  /object.entries/1.1.5:
+    resolution:
+      { integrity: sha512-TyxmjUoZggd4OrrU1W66FMDG6CuqJxsFvymeyXI51+vQLN67zYfZseptRge703kKQdo4uccgAKebXFcRCzk4+g== }
+    engines: { node: '>= 0.4' }
+    dependencies:
+      call-bind: 1.0.2
+      define-properties: 1.1.4
+      es-abstract: 1.20.1
+    dev: true
+
+  /object.fromentries/2.0.5:
+    resolution:
+      { integrity: sha512-CAyG5mWQRRiBU57Re4FKoTBjXfDoNwdFVH2Y1tS9PqCsfUTymAohOkEMSG3aRNKmv4lV3O7p1et7c187q6bynw== }
+    engines: { node: '>= 0.4' }
+    dependencies:
+      call-bind: 1.0.2
+      define-properties: 1.1.4
+      es-abstract: 1.20.1
+    dev: true
+
+  /object.getownpropertydescriptors/2.1.4:
+    resolution:
+      { integrity: sha512-sccv3L/pMModT6dJAYF3fzGMVcb38ysQ0tEE6ixv2yXJDtEIPph268OlAdJj5/qZMZDq2g/jqvwppt36uS/uQQ== }
+    engines: { node: '>= 0.8' }
+    dependencies:
+      array.prototype.reduce: 1.0.4
+      call-bind: 1.0.2
+      define-properties: 1.1.4
+      es-abstract: 1.20.1
+    dev: true
+
+  /object.pick/1.3.0:
+    resolution:
+      { integrity: sha512-tqa/UMy/CCoYmj+H5qc07qvSL9dqcs/WZENZ1JbtWBlATP+iVOe778gE6MSijnyCnORzDuX6hU+LA4SZ09YjFQ== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      isobject: 3.0.1
+    dev: true
+
+  /object.values/1.1.5:
+    resolution:
+      { integrity: sha512-QUZRW0ilQ3PnPpbNtgdNV1PDbEqLIiSFB3l+EnGtBQ/8SUTLj1PZwtQHABZtLgwpJZTSZhuGLOGk57Drx2IvYg== }
+    engines: { node: '>= 0.4' }
+    dependencies:
+      call-bind: 1.0.2
+      define-properties: 1.1.4
+      es-abstract: 1.20.1
+    dev: true
+
   /oidc-token-hash/5.0.1:
     resolution:
       { integrity: sha512-EvoOtz6FIEBzE+9q253HsLCVRiK/0doEJ2HCvvqMQb3dHZrP3WlJKYtJ55CRTw4jmYomzH4wkPuCj/I3ZvpKxQ== }
@@ -12068,6 +18735,12 @@ packages:
     dependencies:
       ee-first: 1.1.1
 
+  /on-headers/1.0.2:
+    resolution:
+      { integrity: sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA== }
+    engines: { node: '>= 0.8' }
+    dev: true
+
   /once/1.4.0:
     resolution:
       { integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w== }
@@ -12105,6 +18778,16 @@ packages:
       is-docker: 2.2.1
       is-wsl: 2.2.0
 
+  /open/8.4.0:
+    resolution:
+      { integrity: sha512-XgFPPM+B28FtCCgSb9I+s9szOC1vZRSwgWsRUA5ylIxRTgKozqjOCrVOqGsYABPYK5qnfqClxZTFBa8PKt2v6Q== }
+    engines: { node: '>=12' }
+    dependencies:
+      define-lazy-prop: 2.0.0
+      is-docker: 2.2.1
+      is-wsl: 2.2.0
+    dev: true
+
   /openapi-types/12.0.0:
     resolution:
       { integrity: sha512-6Wd9k8nmGQHgCbehZCP6wwWcfXcvinhybUTBatuhjRsCxUIujuYFZc9QnGeae75CyHASewBtxs0HX/qwREReUw== }
@@ -12170,6 +18853,18 @@ packages:
       wcwidth: 1.0.1
     dev: false
 
+  /os-browserify/0.3.0:
+    resolution:
+      { integrity: sha512-gjcpUc3clBf9+210TRaDWbf+rZZZEshZ+DlXMRCeAjp0xhTrnQsKHypIy1J3d5hKdUzj69t708EHtU8P6bUn0A== }
+    dev: true
+
+  /os-homedir/1.0.2:
+    resolution:
+      { integrity: sha512-B5JU3cabzk8c67mRRd3ECmROafjYMXbuzlwtqdM8IbS8ktlTix8aFGb2bAGKrSRIlnfKwovGUUr72JUPyOb6kQ== }
+    engines: { node: '>=0.10.0' }
+    dev: true
+    optional: true
+
   /os-tmpdir/1.0.2:
     resolution:
       { integrity: sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g== }
@@ -12185,6 +18880,14 @@ packages:
       '@otplib/preset-v11': 12.0.1
     dev: false
 
+  /p-all/2.1.0:
+    resolution:
+      { integrity: sha512-HbZxz5FONzz/z2gJfk6bFca0BCiSRF8jU3yCsWOen/vR6lZjfPOu/e7L3uFzTW1i0H8TlC3vqQstEJPQL4/uLA== }
+    engines: { node: '>=6' }
+    dependencies:
+      p-map: 2.1.0
+    dev: true
+
   /p-cancelable/2.1.1:
     resolution:
       { integrity: sha512-BZOr3nRQHOntUjTrH8+Lh54smKHoHyur8We1V8DSMVrl5A2malOOwuJRnKRDjSnkoeBh4at6BwEnb5I7Jl31wg== }
@@ -12199,6 +18902,14 @@ packages:
       p-timeout: 3.2.0
     dev: true
 
+  /p-filter/2.1.0:
+    resolution:
+      { integrity: sha512-ZBxxZ5sL2HghephhpGAQdoskxplTwr7ICaehZwLIlfL6acuVgZPm8yBNuRAFBGEqtD/hmUeq9eqLg2ys9Xr/yw== }
+    engines: { node: '>=8' }
+    dependencies:
+      p-map: 2.1.0
+    dev: true
+
   /p-finally/1.0.0:
     resolution:
       { integrity: sha512-LICb2p9CB7FS+0eR1oqWnHhp0FljGLZCWBE9aix0Uye9W8LTQPwMTYVGWQWIw9RdQiDg4+epXQODwIYJtSJaow== }
@@ -12245,6 +18956,14 @@ packages:
       { integrity: sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw== }
     engines: { node: '>=6' }
 
+  /p-map/3.0.0:
+    resolution:
+      { integrity: sha512-d3qXVTF/s+W+CdJ5A29wywV2n8CQQYahlgz2bFiA+4eVNJbHJodPZ+/gXwPGh0bOqA+j8S+6+ckmvLGPk1QpxQ== }
+    engines: { node: '>=8' }
+    dependencies:
+      aggregate-error: 3.1.0
+    dev: true
+
   /p-map/4.0.0:
     resolution:
       { integrity: sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ== }
@@ -12292,6 +19011,28 @@ packages:
     resolution:
       { integrity: sha512-HAKu/fG3HpHFO0AA8WE8q2g+gBJaZ9MG7fcKk+IJPLTGAD6Psw4443l+9DGRbOIh3/aXr7Phy0TjilYivJo5XQ== }
 
+  /pako/1.0.11:
+    resolution:
+      { integrity: sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw== }
+    dev: true
+
+  /parallel-transform/1.2.0:
+    resolution:
+      { integrity: sha512-P2vSmIu38uIlvdcU7fDkyrxj33gTUy/ABO5ZUbGowxNCopBq/OoD42bP4UmMrJoPyk4Uqf0mu3mtWBhHCZD8yg== }
+    dependencies:
+      cyclist: 1.0.1
+      inherits: 2.0.4
+      readable-stream: 2.3.7
+    dev: true
+
+  /param-case/3.0.4:
+    resolution:
+      { integrity: sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A== }
+    dependencies:
+      dot-case: 3.0.4
+      tslib: 2.4.0
+    dev: true
+
   /parent-module/1.0.1:
     resolution:
       { integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g== }
@@ -12299,11 +19040,43 @@ packages:
     dependencies:
       callsites: 3.1.0
 
+  /parse-asn1/5.1.6:
+    resolution:
+      { integrity: sha512-RnZRo1EPU6JBnra2vGHj0yhp6ebyjBZpmUCLHWiFhxlzvBCCpAuZ7elsBp1PVAbQN0/04VD/19rfzlBSwLstMw== }
+    dependencies:
+      asn1.js: 5.4.1
+      browserify-aes: 1.2.0
+      evp_bytestokey: 1.0.3
+      pbkdf2: 3.1.2
+      safe-buffer: 5.2.1
+    dev: true
+
   /parse-cache-control/1.0.1:
     resolution:
       { integrity: sha512-60zvsJReQPX5/QP0Kzfd/VrpjScIQ7SHBW6bFCYfEP+fp0Eppr1SHhIO5nd1PjZtvclzSzES9D/p5nFJurwfWg== }
     dev: true
 
+  /parse-entities/2.0.0:
+    resolution:
+      { integrity: sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ== }
+    dependencies:
+      character-entities: 1.2.4
+      character-entities-legacy: 1.1.4
+      character-reference-invalid: 1.1.4
+      is-alphanumerical: 1.0.4
+      is-decimal: 1.0.4
+      is-hexadecimal: 1.0.4
+    dev: true
+
+  /parse-json/2.2.0:
+    resolution:
+      { integrity: sha512-QR/GGaKCkhwk1ePQNYDRKYZ3mwU9ypsKhB0XyFnLQdomyEqk3e8wpW3V5Jp88zbxK4n5ST1nqo+g9juTpownhQ== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      error-ex: 1.3.2
+    dev: true
+    optional: true
+
   /parse-json/4.0.0:
     resolution:
       { integrity: sha512-aOIos8bujGN93/8Ox/jPLh7RwVnPEysynVFE+fQZyg6jKELEHwzgKdLRFHUgXJL6kylijVSBC4BvN9OmsB48Rw== }
@@ -12343,6 +19116,39 @@ packages:
       { integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ== }
     engines: { node: '>= 0.8' }
 
+  /pascal-case/3.1.2:
+    resolution:
+      { integrity: sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g== }
+    dependencies:
+      no-case: 3.0.4
+      tslib: 2.4.0
+    dev: true
+
+  /pascalcase/0.1.1:
+    resolution:
+      { integrity: sha512-XHXfu/yOQRy9vYOtUDVMN60OEJjW013GoObG1o+xwQTpB9eYJX/BjXMsdW13ZDPruFhYYn0AG22w0xgQMwl3Nw== }
+    engines: { node: '>=0.10.0' }
+    dev: true
+
+  /path-browserify/0.0.1:
+    resolution:
+      { integrity: sha512-BapA40NHICOS+USX9SN4tyhq+A2RrN/Ws5F0Z5aMHDp98Fl86lX8Oti8B7uN93L4Ifv4fHOEA+pQw87gmMO/lQ== }
+    dev: true
+
+  /path-dirname/1.0.2:
+    resolution:
+      { integrity: sha512-ALzNPpyNq9AqXMBjeymIjFDAkAFH06mHJH/cSBHAgU0s4vfpBn6b2nf8tiRLvagKD8RbTpq2FKTBg7cl9l3c7Q== }
+    dev: true
+
+  /path-exists/2.1.0:
+    resolution:
+      { integrity: sha512-yTltuKuhtNeFJKa1PiRzfLAU5182q1y4Eb4XCJ3PBqyzEDkAZRzBrKKBct682ls9reBVHf9udYLN5Nd+K1B9BQ== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      pinkie-promise: 2.0.1
+    dev: true
+    optional: true
+
   /path-exists/3.0.0:
     resolution:
       { integrity: sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ== }
@@ -12408,6 +19214,17 @@ packages:
     resolution:
       { integrity: sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ== }
 
+  /path-type/1.1.0:
+    resolution:
+      { integrity: sha512-S4eENJz1pkiQn9Znv33Q+deTOKmbl+jj1Fl+qiP/vYezj+S8x+J3Uo0ISrx/QoEvIlOaDWJhPaRd1flJ9HXZqg== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      graceful-fs: 4.2.10
+      pify: 2.3.0
+      pinkie-promise: 2.0.1
+    dev: true
+    optional: true
+
   /path-type/3.0.0:
     resolution:
       { integrity: sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg== }
@@ -12443,6 +19260,18 @@ packages:
       resolve-protobuf-schema: 2.1.0
     dev: true
 
+  /pbkdf2/3.1.2:
+    resolution:
+      { integrity: sha512-iuh7L6jA7JEGu2WxDwtQP1ddOpaJNC4KlDEFfdQajSGgGPNi4OyDc2R7QnbY2bR9QjBVGwgvTdNJZoE7RaxUMA== }
+    engines: { node: '>=0.12' }
+    dependencies:
+      create-hash: 1.2.0
+      create-hmac: 1.1.7
+      ripemd160: 2.0.2
+      safe-buffer: 5.2.1
+      sha.js: 2.4.11
+    dev: true
+
   /pg-connection-string/2.5.0:
     resolution:
       { integrity: sha512-r5o/V/ORTA6TmUnyWZR9nCj1klXCO2CEKNRlVuJptZe85QuhFayC7WeMic7ndayT5IRIR0S0xFxFi2ousartlQ== }
@@ -12500,6 +19329,11 @@ packages:
     dependencies:
       split2: 4.1.0
 
+  /picocolors/0.2.1:
+    resolution:
+      { integrity: sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA== }
+    dev: true
+
   /picocolors/1.0.0:
     resolution:
       { integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ== }
@@ -12523,12 +19357,25 @@ packages:
     hasBin: true
     dev: true
 
+  /pify/2.3.0:
+    resolution:
+      { integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog== }
+    engines: { node: '>=0.10.0' }
+    dev: true
+    optional: true
+
   /pify/3.0.0:
     resolution:
       { integrity: sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg== }
     engines: { node: '>=4' }
     dev: true
 
+  /pify/4.0.1:
+    resolution:
+      { integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g== }
+    engines: { node: '>=6' }
+    dev: true
+
   /pinia/2.0.14_hxrfy3rdja4lhsamokddlc63fi:
     resolution:
       { integrity: sha512-0nPuZR4TetT/WcLN+feMSjWJku3SQU7dBbXC6uw+R6FLQJCsg+/0pzXyD82T1FmAYe0lsx+jnEDQ1BLgkRKlxA== }
@@ -12548,6 +19395,22 @@ packages:
       vue-demi: 0.13.4_vue@3.2.36
     dev: true
 
+  /pinkie-promise/2.0.1:
+    resolution:
+      { integrity: sha512-0Gni6D4UcLTbv9c57DfxDGdr41XfgUjqWZu492f0cIGr16zDU06BWP/RAEvOuo7CQ0CNjHaLlM59YJJFm3NWlw== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      pinkie: 2.0.4
+    dev: true
+    optional: true
+
+  /pinkie/2.0.4:
+    resolution:
+      { integrity: sha512-MnUuEycAemtSaeFSjXKW/aroV7akBbY+Sv+RkyqFjgAe73F+MR0TBWKBRDkmfWq/HiFmdavfZ1G7h4SPZXaCSg== }
+    engines: { node: '>=0.10.0' }
+    dev: true
+    optional: true
+
   /pino-colada/2.2.2:
     resolution:
       { integrity: sha512-tzZl6j4D2v9WSQ4vEa7s8j15v16U6+z6M0fAWJOu5gBKxpy+XnOAgFBzeZGkxm6W3AQ04WvdSpqVLnDBdJlvOQ== }
@@ -12599,6 +19462,14 @@ packages:
     engines: { node: '>= 6' }
     dev: true
 
+  /pkg-dir/3.0.0:
+    resolution:
+      { integrity: sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw== }
+    engines: { node: '>=6' }
+    dependencies:
+      find-up: 3.0.0
+    dev: true
+
   /pkg-dir/4.2.0:
     resolution:
       { integrity: sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ== }
@@ -12612,7 +19483,6 @@ packages:
     engines: { node: '>=10' }
     dependencies:
       find-up: 5.0.0
-    dev: false
 
   /pngjs/3.4.0:
     resolution:
@@ -12620,6 +19490,30 @@ packages:
     engines: { node: '>=4.0.0' }
     dev: true
 
+  /pnp-webpack-plugin/1.6.4_typescript@4.5.2:
+    resolution:
+      { integrity: sha512-7Wjy+9E3WwLOEL30D+m8TSTF7qJJUJLONBnwQp0518siuMxUQUbgZwssaFX+QKlZkjHZcw/IpZCt/H0srrntSg== }
+    engines: { node: '>=6' }
+    dependencies:
+      ts-pnp: 1.2.0_typescript@4.5.2
+    transitivePeerDependencies:
+      - typescript
+    dev: true
+
+  /polished/4.2.2:
+    resolution:
+      { integrity: sha512-Sz2Lkdxz6F2Pgnpi9U5Ng/WdWAUZxmHrNPoVlm3aAemxoy2Qy7LGjQg4uf8qKelDAUW94F4np3iH2YPf2qefcQ== }
+    engines: { node: '>=10' }
+    dependencies:
+      '@babel/runtime': 7.18.9
+    dev: true
+
+  /posix-character-classes/0.1.1:
+    resolution:
+      { integrity: sha512-xTgYBc3fuo7Yt7JbiuFxSYGToMoz8fLoE6TC9Wx1P/u+LfeThMOAqmuyECnlBaaJb+u1m9hHiXUEtwW4OzfUJg== }
+    engines: { node: '>=0.10.0' }
+    dev: true
+
   /postcss-calc/8.2.4_postcss@8.4.14:
     resolution:
       { integrity: sha512-SmWMSJmB8MRnnULldx0lQIyhSNvuDl9HfrZkaqqE/WHAhToYsAvDq+yAsA/kIyINDszOp3Rh0GFoNuH5Ypsm3Q== }
@@ -12697,6 +19591,30 @@ packages:
       postcss: 8.4.14
     dev: false
 
+  /postcss-flexbugs-fixes/4.2.1:
+    resolution:
+      { integrity: sha512-9SiofaZ9CWpQWxOwRh1b/r85KD5y7GgvsNt1056k6OYLvWUun0czCvogfJgylC22uJTwW1KzY3Gz65NZRlvoiQ== }
+    dependencies:
+      postcss: 7.0.39
+    dev: true
+
+  /postcss-loader/4.3.0_gzaxsinx64nntyd3vmdqwl7coe:
+    resolution:
+      { integrity: sha512-M/dSoIiNDOo8Rk0mUqoj4kpGq91gcxCfb9PoyZVdZ76/AuhxylHDYZblNE8o+EQ9AMSASeMFEKxZf5aU6wlx1Q== }
+    engines: { node: '>= 10.13.0' }
+    peerDependencies:
+      postcss: ^7.0.0 || ^8.0.1
+      webpack: ^4.0.0 || ^5.0.0
+    dependencies:
+      cosmiconfig: 7.0.1
+      klona: 2.0.5
+      loader-utils: 2.0.2
+      postcss: 7.0.39
+      schema-utils: 3.1.1
+      semver: 7.3.7
+      webpack: 4.46.0
+    dev: true
+
   /postcss-merge-longhand/5.1.6_postcss@8.4.14:
     resolution:
       { integrity: sha512-6C/UGF/3T5OE2CEbOuX7iNO63dnvqhGZeUnKkDeifebY0XqkkvrctYSZurpNE902LDf2yKwwPFgotnfSoPhQiw== }
@@ -12771,6 +19689,14 @@ packages:
       postcss-selector-parser: 6.0.10
     dev: false
 
+  /postcss-modules-extract-imports/2.0.0:
+    resolution:
+      { integrity: sha512-LaYLDNS4SG8Q5WAWqIJgdHPJrDDr/Lv775rMBFUbgjTz6j34lUznACHcdRWroPvXANP2Vj7yNK57vp9eFqzLWQ== }
+    engines: { node: '>= 6' }
+    dependencies:
+      postcss: 7.0.39
+    dev: true
+
   /postcss-modules-extract-imports/3.0.0_postcss@8.4.14:
     resolution:
       { integrity: sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw== }
@@ -12779,7 +19705,17 @@ packages:
       postcss: ^8.1.0
     dependencies:
       postcss: 8.4.14
-    dev: false
+
+  /postcss-modules-local-by-default/3.0.3:
+    resolution:
+      { integrity: sha512-e3xDq+LotiGesympRlKNgaJ0PCzoUIdpH0dj47iWAui/kyTgh3CiAr1qP54uodmJhl6p9rN6BoNcdEDVJx9RDw== }
+    engines: { node: '>= 6' }
+    dependencies:
+      icss-utils: 4.1.1
+      postcss: 7.0.39
+      postcss-selector-parser: 6.0.10
+      postcss-value-parser: 4.2.0
+    dev: true
 
   /postcss-modules-local-by-default/4.0.0_postcss@8.4.14:
     resolution:
@@ -12792,7 +19728,15 @@ packages:
       postcss: 8.4.14
       postcss-selector-parser: 6.0.10
       postcss-value-parser: 4.2.0
-    dev: false
+
+  /postcss-modules-scope/2.2.0:
+    resolution:
+      { integrity: sha512-YyEgsTMRpNd+HmyC7H/mh3y+MeFWevy7V1evVhJWewmMbjDHIbZbOXICC2y+m1xI1UVfIT1HMW/O04Hxyu9oXQ== }
+    engines: { node: '>= 6' }
+    dependencies:
+      postcss: 7.0.39
+      postcss-selector-parser: 6.0.10
+    dev: true
 
   /postcss-modules-scope/3.0.0_postcss@8.4.14:
     resolution:
@@ -12803,7 +19747,14 @@ packages:
     dependencies:
       postcss: 8.4.14
       postcss-selector-parser: 6.0.10
-    dev: false
+
+  /postcss-modules-values/3.0.0:
+    resolution:
+      { integrity: sha512-1//E5jCBrZ9DmRX+zCtmQtRSV6PV42Ix7Bzj9GbwJceduuf7IqP8MgeTXuRDHOWj2m0VzZD5+roFWDuU8RQjcg== }
+    dependencies:
+      icss-utils: 4.1.1
+      postcss: 7.0.39
+    dev: true
 
   /postcss-modules-values/4.0.0_postcss@8.4.14:
     resolution:
@@ -12814,7 +19765,6 @@ packages:
     dependencies:
       icss-utils: 5.1.0_postcss@8.4.14
       postcss: 8.4.14
-    dev: false
 
   /postcss-normalize-charset/5.1.0_postcss@8.4.14:
     resolution:
@@ -12985,7 +19935,15 @@ packages:
   /postcss-value-parser/4.2.0:
     resolution:
       { integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ== }
-    dev: false
+
+  /postcss/7.0.39:
+    resolution:
+      { integrity: sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA== }
+    engines: { node: '>=6.0.0' }
+    dependencies:
+      picocolors: 0.2.1
+      source-map: 0.6.1
+    dev: true
 
   /postcss/8.4.14:
     resolution:
@@ -13078,6 +20036,13 @@ packages:
       fast-diff: 1.2.0
     dev: true
 
+  /prettier/2.3.0:
+    resolution:
+      { integrity: sha512-kXtO4s0Lz/DW/IJ9QdWhAf7/NmPWQXkFr/r/WkR3vyI+0v8amTDxiaQSLzs8NBlytfLWX/7uQUMIW677yLKl4w== }
+    engines: { node: '>=10.13.0' }
+    hasBin: true
+    dev: true
+
   /prettier/2.4.1:
     resolution:
       { integrity: sha512-9fbDAXSBcc6Bs1mZrDYb3XKzDLm4EXXL9sC1LqKP5rZkT6KRr/rf9amVUcODVXgguK/isJz0d0hP72WeaKWsvA== }
@@ -13085,6 +20050,14 @@ packages:
     hasBin: true
     dev: true
 
+  /pretty-error/2.1.2:
+    resolution:
+      { integrity: sha512-EY5oDzmsX5wvuynAByrmY0P0hcp+QpnAKbJng2A2MPjVKXCxrDSUkzghVJ4ZGPIv+JC4gX8fPUWscC0RtjsWGw== }
+    dependencies:
+      lodash: 4.17.21
+      renderkid: 2.0.7
+    dev: true
+
   /pretty-format/27.5.1:
     resolution:
       { integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ== }
@@ -13106,6 +20079,12 @@ packages:
       react-is: 18.2.0
     dev: true
 
+  /pretty-hrtime/1.0.3:
+    resolution:
+      { integrity: sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A== }
+    engines: { node: '>= 0.8' }
+    dev: true
+
   /pretty-ms/5.1.0:
     resolution:
       { integrity: sha512-4gaK1skD2gwscCfkswYQRmddUb2GJZtzDGRjHWadVHtK/DIKFufa12MvES6/xu1tVbUYeia5bmLcwJtZJQUqnw== }
@@ -13135,6 +20114,12 @@ packages:
       { integrity: sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A== }
     engines: { node: '>= 0.6.0' }
 
+  /progress/2.0.3:
+    resolution:
+      { integrity: sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA== }
+    engines: { node: '>=0.4.0' }
+    dev: true
+
   /promise-inflight/1.0.1:
     resolution:
       { integrity: sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g== }
@@ -13143,7 +20128,18 @@ packages:
     peerDependenciesMeta:
       bluebird:
         optional: true
-    optional: true
+
+  /promise-inflight/1.0.1_bluebird@3.7.2:
+    resolution:
+      { integrity: sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g== }
+    peerDependencies:
+      bluebird: '*'
+    peerDependenciesMeta:
+      bluebird:
+        optional: true
+    dependencies:
+      bluebird: 3.7.2
+    dev: true
 
   /promise-retry/2.0.1:
     resolution:
@@ -13154,6 +20150,36 @@ packages:
       retry: 0.12.0
     optional: true
 
+  /promise.allsettled/1.0.5:
+    resolution:
+      { integrity: sha512-tVDqeZPoBC0SlzJHzWGZ2NKAguVq2oiYj7gbggbiTvH2itHohijTp7njOUA0aQ/nl+0lr/r6egmhoYu63UZ/pQ== }
+    engines: { node: '>= 0.4' }
+    dependencies:
+      array.prototype.map: 1.0.4
+      call-bind: 1.0.2
+      define-properties: 1.1.4
+      es-abstract: 1.20.1
+      get-intrinsic: 1.1.2
+      iterate-value: 1.0.2
+    dev: true
+
+  /promise.prototype.finally/3.1.3:
+    resolution:
+      { integrity: sha512-EXRF3fC9/0gz4qkt/f5EP5iW4kj9oFpBICNpCNOb/52+8nlHIX07FPLbi/q4qYBQ1xZqivMzTpNQSnArVASolQ== }
+    engines: { node: '>= 0.4' }
+    dependencies:
+      call-bind: 1.0.2
+      define-properties: 1.1.4
+      es-abstract: 1.20.1
+    dev: true
+
+  /promise/7.3.1:
+    resolution:
+      { integrity: sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg== }
+    dependencies:
+      asap: 2.0.6
+    dev: true
+
   /promise/8.1.0:
     resolution:
       { integrity: sha512-W04AqnILOL/sPRXziNicCjSNRruLAuIHEOVBazepu0545DDNGYHz7ar9ZgZ1fMU8/MA4mVxp5rkBWRi6OXIy3Q== }
@@ -13170,6 +20196,22 @@ packages:
       sisteransi: 1.0.5
     dev: true
 
+  /prop-types/15.8.1:
+    resolution:
+      { integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== }
+    dependencies:
+      loose-envify: 1.4.0
+      object-assign: 4.1.1
+      react-is: 16.13.1
+    dev: true
+
+  /property-information/5.6.0:
+    resolution:
+      { integrity: sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA== }
+    dependencies:
+      xtend: 4.0.2
+    dev: true
+
   /protocol-buffers-schema/3.6.0:
     resolution:
       { integrity: sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw== }
@@ -13183,6 +20225,16 @@ packages:
       forwarded: 0.2.0
       ipaddr.js: 1.9.1
 
+  /prr/1.0.1:
+    resolution:
+      { integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw== }
+    dev: true
+
+  /pseudomap/1.0.2:
+    resolution:
+      { integrity: sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ== }
+    dev: true
+
   /psl/1.9.0:
     resolution:
       { integrity: sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag== }
@@ -13192,6 +20244,129 @@ packages:
       { integrity: sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w== }
     dev: true
 
+  /public-encrypt/4.0.3:
+    resolution:
+      { integrity: sha512-zVpa8oKZSz5bTMTFClc1fQOnyyEzpl5ozpi1B5YcvBrdohMjH2rfsBtyXcuNuwjsDIXmBYlF2N5FlJYhR29t8Q== }
+    dependencies:
+      bn.js: 4.12.0
+      browserify-rsa: 4.1.0
+      create-hash: 1.2.0
+      parse-asn1: 5.1.6
+      randombytes: 2.1.0
+      safe-buffer: 5.2.1
+    dev: true
+
+  /pug-attrs/3.0.0:
+    resolution:
+      { integrity: sha512-azINV9dUtzPMFQktvTXciNAfAuVh/L/JCl0vtPCwvOA21uZrC08K/UnmrL+SXGEVc1FwzjW62+xw5S/uaLj6cA== }
+    dependencies:
+      constantinople: 4.0.1
+      js-stringify: 1.0.2
+      pug-runtime: 3.0.1
+    dev: true
+
+  /pug-code-gen/3.0.2:
+    resolution:
+      { integrity: sha512-nJMhW16MbiGRiyR4miDTQMRWDgKplnHyeLvioEJYbk1RsPI3FuA3saEP8uwnTb2nTJEKBU90NFVWJBk4OU5qyg== }
+    dependencies:
+      constantinople: 4.0.1
+      doctypes: 1.1.0
+      js-stringify: 1.0.2
+      pug-attrs: 3.0.0
+      pug-error: 2.0.0
+      pug-runtime: 3.0.1
+      void-elements: 3.1.0
+      with: 7.0.2
+    dev: true
+
+  /pug-error/2.0.0:
+    resolution:
+      { integrity: sha512-sjiUsi9M4RAGHktC1drQfCr5C5eriu24Lfbt4s+7SykztEOwVZtbFk1RRq0tzLxcMxMYTBR+zMQaG07J/btayQ== }
+    dev: true
+
+  /pug-filters/4.0.0:
+    resolution:
+      { integrity: sha512-yeNFtq5Yxmfz0f9z2rMXGw/8/4i1cCFecw/Q7+D0V2DdtII5UvqE12VaZ2AY7ri6o5RNXiweGH79OCq+2RQU4A== }
+    dependencies:
+      constantinople: 4.0.1
+      jstransformer: 1.0.0
+      pug-error: 2.0.0
+      pug-walk: 2.0.0
+      resolve: 1.22.1
+    dev: true
+
+  /pug-lexer/5.0.1:
+    resolution:
+      { integrity: sha512-0I6C62+keXlZPZkOJeVam9aBLVP2EnbeDw3An+k0/QlqdwH6rv8284nko14Na7c0TtqtogfWXcRoFE4O4Ff20w== }
+    dependencies:
+      character-parser: 2.2.0
+      is-expression: 4.0.0
+      pug-error: 2.0.0
+    dev: true
+
+  /pug-linker/4.0.0:
+    resolution:
+      { integrity: sha512-gjD1yzp0yxbQqnzBAdlhbgoJL5qIFJw78juN1NpTLt/mfPJ5VgC4BvkoD3G23qKzJtIIXBbcCt6FioLSFLOHdw== }
+    dependencies:
+      pug-error: 2.0.0
+      pug-walk: 2.0.0
+    dev: true
+
+  /pug-load/3.0.0:
+    resolution:
+      { integrity: sha512-OCjTEnhLWZBvS4zni/WUMjH2YSUosnsmjGBB1An7CsKQarYSWQ0GCVyd4eQPMFJqZ8w9xgs01QdiZXKVjk92EQ== }
+    dependencies:
+      object-assign: 4.1.1
+      pug-walk: 2.0.0
+    dev: true
+
+  /pug-parser/6.0.0:
+    resolution:
+      { integrity: sha512-ukiYM/9cH6Cml+AOl5kETtM9NR3WulyVP2y4HOU45DyMim1IeP/OOiyEWRr6qk5I5klpsBnbuHpwKmTx6WURnw== }
+    dependencies:
+      pug-error: 2.0.0
+      token-stream: 1.0.0
+    dev: true
+
+  /pug-runtime/3.0.1:
+    resolution:
+      { integrity: sha512-L50zbvrQ35TkpHwv0G6aLSuueDRwc/97XdY8kL3tOT0FmhgG7UypU3VztfV/LATAvmUfYi4wNxSajhSAeNN+Kg== }
+    dev: true
+
+  /pug-strip-comments/2.0.0:
+    resolution:
+      { integrity: sha512-zo8DsDpH7eTkPHCXFeAk1xZXJbyoTfdPlNR0bK7rpOMuhBYb0f5qUVCO1xlsitYd3w5FQTK7zpNVKb3rZoUrrQ== }
+    dependencies:
+      pug-error: 2.0.0
+    dev: true
+
+  /pug-walk/2.0.0:
+    resolution:
+      { integrity: sha512-yYELe9Q5q9IQhuvqsZNwA5hfPkMJ8u92bQLIMcsMxf/VADjNtEYptU+inlufAFYcWdHlwNfZOEnOOQrZrcyJCQ== }
+    dev: true
+
+  /pug/3.0.2:
+    resolution:
+      { integrity: sha512-bp0I/hiK1D1vChHh6EfDxtndHji55XP/ZJKwsRqrz6lRia6ZC2OZbdAymlxdVFwd1L70ebrVJw4/eZ79skrIaw== }
+    dependencies:
+      pug-code-gen: 3.0.2
+      pug-filters: 4.0.0
+      pug-lexer: 5.0.1
+      pug-linker: 4.0.0
+      pug-load: 3.0.0
+      pug-parser: 6.0.0
+      pug-runtime: 3.0.1
+      pug-strip-comments: 2.0.0
+    dev: true
+
+  /pump/2.0.1:
+    resolution:
+      { integrity: sha512-ruPMNRkN3MHP1cWJc9OWr+T/xDP0jhXYCLfJcBuX54hhfIBnaQmAUMfDcG4DM5UMWByBbJY69QSphm3jtDKIkA== }
+    dependencies:
+      end-of-stream: 1.4.4
+      once: 1.4.0
+    dev: true
+
   /pump/3.0.0:
     resolution:
       { integrity: sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww== }
@@ -13199,6 +20374,15 @@ packages:
       end-of-stream: 1.4.4
       once: 1.4.0
 
+  /pumpify/1.5.1:
+    resolution:
+      { integrity: sha512-oClZI37HvuUJJxSKKrC17bZ9Cu0ZYhEAGPsPUy9KlMUmv9dKX2o77RUmq7f3XjIxbwyGwYzbzQ1L2Ks8sIradQ== }
+    dependencies:
+      duplexify: 3.7.1
+      inherits: 2.0.4
+      pump: 2.0.1
+    dev: true
+
   /pumpify/2.0.1:
     resolution:
       { integrity: sha512-m7KOje7jZxrmutanlkS1daj1dS6z6BgslzOXmcSEpIlCxM3VJH7lG5QLeck/6hgF6F4crFf01UtQmNsJfweTAw== }
@@ -13211,12 +20395,10 @@ packages:
   /punycode/1.3.2:
     resolution:
       { integrity: sha512-RofWgt/7fL5wP1Y7fxE7/EmTLzQVnB0ycyibJ0OOHIlJqTNzglYFxVwETOcIoJqJmpDXJ9xImDv+Fq34F/d4Dw== }
-    dev: false
 
   /punycode/1.4.1:
     resolution:
       { integrity: sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ== }
-    dev: false
 
   /punycode/2.1.1:
     resolution:
@@ -13268,12 +20450,17 @@ packages:
       strict-uri-encode: 2.0.0
     dev: false
 
+  /querystring-es3/0.2.1:
+    resolution:
+      { integrity: sha512-773xhDQnZBMFobEiztv8LIl70ch5MSF/jUQVlhwFyBILqq96anmoctVIYz+ZRp0qbCKATTn6ev02M3r7Ga5vqA== }
+    engines: { node: '>=0.4.x' }
+    dev: true
+
   /querystring/0.2.0:
     resolution:
       { integrity: sha512-X/xY82scca2tau62i9mDyU9K+I+djTMUsvwf7xnUX5GLvVzgJybOJf4Y6o9Zx3oJK/LSXg5tTZBjwzqVPaPO2g== }
     engines: { node: '>=0.4.x' }
     deprecated: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
-    dev: false
 
   /queue-microtask/1.2.3:
     resolution:
@@ -13295,12 +20482,24 @@ packages:
       { integrity: sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw== }
     dev: true
 
+  /ramda/0.28.0:
+    resolution:
+      { integrity: sha512-9QnLuG/kPVgWvMQ4aODhsBUFKOUmnbUnsSXACv+NCQZcHbeb+v8Lodp8OVxtRULN1/xOyYLLaL6npE6dMq5QTA== }
+    dev: true
+
   /randombytes/2.1.0:
     resolution:
       { integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ== }
     dependencies:
       safe-buffer: 5.2.1
-    dev: false
+
+  /randomfill/1.0.4:
+    resolution:
+      { integrity: sha512-87lcbR8+MhcWcUiQ+9e+Rwx8MyR2P7qnt15ynUlbm3TU/fjbgz4GsvfSUDTemtCCtVCqb4ZcEFlyPNTh9bBTLw== }
+    dependencies:
+      randombytes: 2.1.0
+      safe-buffer: 5.2.1
+    dev: true
 
   /range-parser/1.2.1:
     resolution:
@@ -13322,6 +20521,18 @@ packages:
       iconv-lite: 0.4.24
       unpipe: 1.0.0
 
+  /raw-loader/4.0.2_webpack@4.46.0:
+    resolution:
+      { integrity: sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA== }
+    engines: { node: '>= 10.13.0' }
+    peerDependencies:
+      webpack: ^4.0.0 || ^5.0.0
+    dependencies:
+      loader-utils: 2.0.2
+      schema-utils: 3.1.1
+      webpack: 4.46.0
+    dev: true
+
   /rc/1.2.8:
     resolution:
       { integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw== }
@@ -13332,6 +20543,65 @@ packages:
       minimist: 1.2.6
       strip-json-comments: 2.0.1
 
+  /react-docgen-typescript/2.2.2_typescript@4.5.2:
+    resolution:
+      { integrity: sha512-tvg2ZtOpOi6QDwsb3GZhOjDkkX0h8Z2gipvTg6OVMUyoYoURhEiRNePT8NZItTVCDh39JJHnLdfCOkzoLbFnTg== }
+    peerDependencies:
+      typescript: '>= 4.3.x'
+    dependencies:
+      typescript: 4.5.2
+    dev: true
+
+  /react-docgen/6.0.0-alpha.3:
+    resolution:
+      { integrity: sha512-DDLvB5EV9As1/zoUsct6Iz2Cupw9FObEGD3DMcIs3EDFIoSKyz8FZtoWj3Wj+oodrU4/NfidN0BL5yrapIcTSA== }
+    engines: { node: '>=12.0.0' }
+    hasBin: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/generator': 7.18.7
+      ast-types: 0.14.2
+      commander: 2.20.3
+      doctrine: 3.0.0
+      estree-to-babel: 3.2.1
+      neo-async: 2.6.2
+      node-dir: 0.1.17
+      resolve: 1.22.1
+      strip-indent: 3.0.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /react-dom/16.14.0_react@16.14.0:
+    resolution:
+      { integrity: sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw== }
+    peerDependencies:
+      react: ^16.14.0
+    dependencies:
+      loose-envify: 1.4.0
+      object-assign: 4.1.1
+      prop-types: 15.8.1
+      react: 16.14.0
+      scheduler: 0.19.1
+    dev: true
+
+  /react-inspector/5.1.1_react@16.14.0:
+    resolution:
+      { integrity: sha512-GURDaYzoLbW8pMGXwYPDBIv6nqei4kK7LPRZ9q9HCZF54wqXz/dnylBp/kfE9XmekBhHvLDdcYeyIwSrvtOiWg== }
+    peerDependencies:
+      react: ^16.8.4 || ^17.0.0
+    dependencies:
+      '@babel/runtime': 7.18.9
+      is-dom: 1.1.0
+      prop-types: 15.8.1
+      react: 16.14.0
+    dev: true
+
+  /react-is/16.13.1:
+    resolution:
+      { integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== }
+    dev: true
+
   /react-is/17.0.2:
     resolution:
       { integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w== }
@@ -13342,6 +20612,32 @@ packages:
       { integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w== }
     dev: true
 
+  /react-refresh/0.13.0:
+    resolution:
+      { integrity: sha512-XP8A9BT0CpRBD+NYLLeIhld/RqG9+gktUjW1FkE+Vm7OCinbG1SshcK5tb9ls4kzvjZr9mOQc7HYgBngEyPAXg== }
+    engines: { node: '>=0.10.0' }
+    dev: true
+
+  /react/16.14.0:
+    resolution:
+      { integrity: sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      loose-envify: 1.4.0
+      object-assign: 4.1.1
+      prop-types: 15.8.1
+    dev: true
+
+  /read-pkg-up/1.0.1:
+    resolution:
+      { integrity: sha512-WD9MTlNtI55IwYUS27iHh9tK3YoIVhxis8yKhLpTqWtml739uXc9NWTpxoHkfZf3+DkCCsXox94/VWZniuZm6A== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      find-up: 1.1.2
+      read-pkg: 1.1.0
+    dev: true
+    optional: true
+
   /read-pkg-up/7.0.1:
     resolution:
       { integrity: sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg== }
@@ -13352,6 +20648,17 @@ packages:
       type-fest: 0.8.1
     dev: true
 
+  /read-pkg/1.1.0:
+    resolution:
+      { integrity: sha512-7BGwRHqt4s/uVbuyoeejRn4YmFnYZiFl4AuaeXHlgZf3sONF0SOGlxs2Pw8g6hCKupo08RafIO5YXFNOKTfwsQ== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      load-json-file: 1.1.0
+      normalize-package-data: 2.5.0
+      path-type: 1.1.0
+    dev: true
+    optional: true
+
   /read-pkg/3.0.0:
     resolution:
       { integrity: sha512-BLq/cCO9two+lBgiTYNqD6GdtK8s4NpaWrl6/rCO9w0TUS8oJl7cmToOZfRYllKTISY6nt1U7jQ53brmKqY6BA== }
@@ -13415,6 +20722,19 @@ packages:
       string_decoder: 1.3.0
       util-deprecate: 1.0.2
 
+  /readdirp/2.2.1:
+    resolution:
+      { integrity: sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ== }
+    engines: { node: '>=0.10' }
+    dependencies:
+      graceful-fs: 4.2.10
+      micromatch: 3.1.10
+      readable-stream: 2.3.7
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+    optional: true
+
   /readdirp/3.6.0:
     resolution:
       { integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA== }
@@ -13422,6 +20742,28 @@ packages:
     dependencies:
       picomatch: 2.3.1
 
+  /recast/0.20.5:
+    resolution:
+      { integrity: sha512-E5qICoPoNL4yU0H0NoBDntNB0Q5oMSNh9usFctYniLBluTthi3RsQVBXIJNbApOlvSwW/RGxIuokPcAc59J5fQ== }
+    engines: { node: '>= 4' }
+    dependencies:
+      ast-types: 0.14.2
+      esprima: 4.0.1
+      source-map: 0.6.1
+      tslib: 2.4.0
+    dev: true
+
+  /recast/0.21.1:
+    resolution:
+      { integrity: sha512-PF61BHLaOGF5oIKTpSrDM6Qfy2d7DIx5qblgqG+wjqHuFH97OgAqBYFIJwEuHTrM6pQGT17IJ8D0C/jVu/0tig== }
+    engines: { node: '>= 4' }
+    dependencies:
+      ast-types: 0.15.2
+      esprima: 4.0.1
+      source-map: 0.6.1
+      tslib: 2.4.0
+    dev: true
+
   /rechoir/0.8.0:
     resolution:
       { integrity: sha512-/vxpCXddiX8NGfGO/mTafwjq4aFa/71pvamip0++IQk3zG8cbCj0fifNPrjjF1XMXUne91jL9OoxmdykoEtifQ== }
@@ -13429,6 +20771,16 @@ packages:
     dependencies:
       resolve: 1.22.1
 
+  /redent/1.0.0:
+    resolution:
+      { integrity: sha512-qtW5hKzGQZqKoh6JNSD+4lfitfPKGz42e6QwiRmPM5mmKtR0N41AbJRYu0xJi7nhOJ4WDgRkKvAk6tw4WIwR4g== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      indent-string: 2.1.0
+      strip-indent: 1.0.1
+    dev: true
+    optional: true
+
   /redent/3.0.0:
     resolution:
       { integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg== }
@@ -13457,6 +20809,40 @@ packages:
       redis-errors: 1.2.0
     dev: false
 
+  /regenerate-unicode-properties/10.0.1:
+    resolution:
+      { integrity: sha512-vn5DU6yg6h8hP/2OkQo3K7uVILvY4iu0oI4t3HFa81UPkhGJwkRwM10JEc3upjdhHjs/k8GJY1sRBhk5sr69Bw== }
+    engines: { node: '>=4' }
+    dependencies:
+      regenerate: 1.4.2
+    dev: true
+
+  /regenerate/1.4.2:
+    resolution:
+      { integrity: sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A== }
+    dev: true
+
+  /regenerator-runtime/0.13.9:
+    resolution:
+      { integrity: sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA== }
+    dev: true
+
+  /regenerator-transform/0.15.0:
+    resolution:
+      { integrity: sha512-LsrGtPmbYg19bcPHwdtmXwbW+TqNvtY4riE3P83foeHRroMbH6/2ddFBfab3t7kbzc7v7p4wbkIecHImqt0QNg== }
+    dependencies:
+      '@babel/runtime': 7.18.9
+    dev: true
+
+  /regex-not/1.0.2:
+    resolution:
+      { integrity: sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      extend-shallow: 3.0.2
+      safe-regex: 1.1.0
+    dev: true
+
   /regexp.prototype.flags/1.4.3:
     resolution:
       { integrity: sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA== }
@@ -13472,6 +20858,19 @@ packages:
     engines: { node: '>=8' }
     dev: true
 
+  /regexpu-core/5.1.0:
+    resolution:
+      { integrity: sha512-bb6hk+xWd2PEOkj5It46A16zFMs2mv86Iwpdu94la4S3sJ7C973h2dHpYKwIBGaWSO7cIRJ+UX0IeMaWcO4qwA== }
+    engines: { node: '>=4' }
+    dependencies:
+      regenerate: 1.4.2
+      regenerate-unicode-properties: 10.0.1
+      regjsgen: 0.6.0
+      regjsparser: 0.8.4
+      unicode-match-property-ecmascript: 2.0.0
+      unicode-match-property-value-ecmascript: 2.0.0
+    dev: true
+
   /registry-auth-token/3.3.2:
     resolution:
       { integrity: sha512-JL39c60XlzCVgNrO+qq68FoNb56w/m7JYvGR2jT5iR1xBrUA3Mfx5Twk5rqTThPmQKMWydGmq8oFtDlxfrmxnQ== }
@@ -13488,6 +20887,132 @@ packages:
       rc: 1.2.8
     dev: false
 
+  /regjsgen/0.6.0:
+    resolution:
+      { integrity: sha512-ozE883Uigtqj3bx7OhL1KNbCzGyW2NQZPl6Hs09WTvCuZD5sTI4JY58bkbQWa/Y9hxIsvJ3M8Nbf7j54IqeZbA== }
+    dev: true
+
+  /regjsparser/0.8.4:
+    resolution:
+      { integrity: sha512-J3LABycON/VNEu3abOviqGHuB/LOtOQj8SKmfP9anY5GfAVw/SPjwzSjxGjbZXIxbGfqTHtJw58C2Li/WkStmA== }
+    hasBin: true
+    dependencies:
+      jsesc: 0.5.0
+    dev: true
+
+  /relateurl/0.2.7:
+    resolution:
+      { integrity: sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog== }
+    engines: { node: '>= 0.10' }
+    dev: true
+
+  /remark-external-links/8.0.0:
+    resolution:
+      { integrity: sha512-5vPSX0kHoSsqtdftSHhIYofVINC8qmp0nctkeU9YoJwV3YfiBRiI6cbFRJ0oI/1F9xS+bopXG0m2KS8VFscuKA== }
+    dependencies:
+      extend: 3.0.2
+      is-absolute-url: 3.0.3
+      mdast-util-definitions: 4.0.0
+      space-separated-tokens: 1.1.5
+      unist-util-visit: 2.0.3
+    dev: true
+
+  /remark-footnotes/2.0.0:
+    resolution:
+      { integrity: sha512-3Clt8ZMH75Ayjp9q4CorNeyjwIxHFcTkaektplKGl2A1jNGEUey8cKL0ZC5vJwfcD5GFGsNLImLG/NGzWIzoMQ== }
+    dev: true
+
+  /remark-mdx/1.6.22:
+    resolution:
+      { integrity: sha512-phMHBJgeV76uyFkH4rvzCftLfKCr2RZuF+/gmVcaKrpsihyzmhXjA0BEMDaPTXG5y8qZOKPVo83NAOX01LPnOQ== }
+    dependencies:
+      '@babel/core': 7.12.9
+      '@babel/helper-plugin-utils': 7.10.4
+      '@babel/plugin-proposal-object-rest-spread': 7.12.1_@babel+core@7.12.9
+      '@babel/plugin-syntax-jsx': 7.12.1_@babel+core@7.12.9
+      '@mdx-js/util': 1.6.22
+      is-alphabetical: 1.0.4
+      remark-parse: 8.0.3
+      unified: 9.2.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /remark-parse/8.0.3:
+    resolution:
+      { integrity: sha512-E1K9+QLGgggHxCQtLt++uXltxEprmWzNfg+MxpfHsZlrddKzZ/hZyWHDbK3/Ap8HJQqYJRXP+jHczdL6q6i85Q== }
+    dependencies:
+      ccount: 1.1.0
+      collapse-white-space: 1.0.6
+      is-alphabetical: 1.0.4
+      is-decimal: 1.0.4
+      is-whitespace-character: 1.0.4
+      is-word-character: 1.0.4
+      markdown-escapes: 1.0.4
+      parse-entities: 2.0.0
+      repeat-string: 1.6.1
+      state-toggle: 1.0.3
+      trim: 0.0.1
+      trim-trailing-lines: 1.1.4
+      unherit: 1.1.3
+      unist-util-remove-position: 2.0.1
+      vfile-location: 3.2.0
+      xtend: 4.0.2
+    dev: true
+
+  /remark-slug/6.1.0:
+    resolution:
+      { integrity: sha512-oGCxDF9deA8phWvxFuyr3oSJsdyUAxMFbA0mZ7Y1Sas+emILtO+e5WutF9564gDsEN4IXaQXm5pFo6MLH+YmwQ== }
+    dependencies:
+      github-slugger: 1.4.0
+      mdast-util-to-string: 1.1.0
+      unist-util-visit: 2.0.3
+    dev: true
+
+  /remark-squeeze-paragraphs/4.0.0:
+    resolution:
+      { integrity: sha512-8qRqmL9F4nuLPIgl92XUuxI3pFxize+F1H0e/W3llTk0UsjJaj01+RrirkMw7P21RKe4X6goQhYRSvNWX+70Rw== }
+    dependencies:
+      mdast-squeeze-paragraphs: 4.0.0
+    dev: true
+
+  /remove-trailing-separator/1.1.0:
+    resolution:
+      { integrity: sha512-/hS+Y0u3aOfIETiaiirUFwDBDzmXPvO+jAfKTitUngIPzdKc6Z0LoFjM/CK5PL4C+eKwHohlHAb6H0VFfmmUsw== }
+    dev: true
+
+  /renderkid/2.0.7:
+    resolution:
+      { integrity: sha512-oCcFyxaMrKsKcTY59qnCAtmDVSLfPbrv6A3tVbPdFMMrv5jaK10V6m40cKsoPNhAqN6rmHW9sswW4o3ruSrwUQ== }
+    dependencies:
+      css-select: 4.3.0
+      dom-converter: 0.2.0
+      htmlparser2: 6.1.0
+      lodash: 4.17.21
+      strip-ansi: 3.0.1
+    dev: true
+
+  /repeat-element/1.1.4:
+    resolution:
+      { integrity: sha512-LFiNfRcSu7KK3evMyYOuCzv3L10TW7yC1G2/+StMjK8Y6Vqd2MG7r/Qjw4ghtuCOjFvlnms/iMmLqpvW/ES/WQ== }
+    engines: { node: '>=0.10.0' }
+    dev: true
+
+  /repeat-string/1.6.1:
+    resolution:
+      { integrity: sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w== }
+    engines: { node: '>=0.10' }
+    dev: true
+
+  /repeating/2.0.1:
+    resolution:
+      { integrity: sha512-ZqtSMuVybkISo2OWvqvm7iHSWngvdaW3IpsT9/uP8v4gMi591LY6h35wdOfvQdWCKFWZWm2Y1Opp4kV7vQKT6A== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      is-finite: 1.1.0
+    dev: true
+    optional: true
+
   /require-directory/2.1.1:
     resolution:
       { integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q== }
@@ -13529,6 +21054,12 @@ packages:
       protocol-buffers-schema: 3.6.0
     dev: true
 
+  /resolve-url/0.2.1:
+    resolution:
+      { integrity: sha512-ZuF55hVUQaaczgOIwqWzkEcEidmlD/xl44x1UZnhOXcYuFN2S6+rcxpG+C1N3So0wvNI3DmJICUFfu2SxhBmvg== }
+    deprecated: https://github.com/lydell/resolve-url#deprecated
+    dev: true
+
   /resolve.exports/1.1.0:
     resolution:
       { integrity: sha512-J1l+Zxxp4XK3LUDZ9m60LRJF/mAe4z6a4xyabPHk7pvK5t35dACV32iIjJDFeWZFfZlO29w6SZ67knR0tHzJtQ== }
@@ -13540,7 +21071,7 @@ packages:
       { integrity: sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw== }
     hasBin: true
     dependencies:
-      is-core-module: 2.9.0
+      is-core-module: 2.10.0
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
 
@@ -13568,6 +21099,12 @@ packages:
       onetime: 5.1.2
       signal-exit: 3.0.7
 
+  /ret/0.1.15:
+    resolution:
+      { integrity: sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg== }
+    engines: { node: '>=0.12' }
+    dev: true
+
   /retry-request/4.2.2:
     resolution:
       { integrity: sha512-xA93uxUD/rogV7BV59agW/JHPGXeREMWiZc9jhcwY4YdZ7QOtC7qbomYg0n4wyk2lJhggjvKvhNX8wln/Aldhg== }
@@ -13607,6 +21144,14 @@ packages:
       { integrity: sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA== }
     dev: true
 
+  /rimraf/2.6.3:
+    resolution:
+      { integrity: sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA== }
+    hasBin: true
+    dependencies:
+      glob: 7.2.3
+    dev: true
+
   /rimraf/2.7.1:
     resolution:
       { integrity: sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w== }
@@ -13622,6 +21167,14 @@ packages:
     dependencies:
       glob: 7.2.3
 
+  /ripemd160/2.0.2:
+    resolution:
+      { integrity: sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA== }
+    dependencies:
+      hash-base: 3.1.0
+      inherits: 2.0.4
+    dev: true
+
   /rollup-plugin-styles/4.0.0_rollup@2.77.0:
     resolution:
       { integrity: sha512-A2K2sao84OsTmDxXG83JTCdXWrmgvQkkI38XDat46rdtpGMRm9tSYqeCdlwwGDJF4kKIafhV1mUidqu8MxUGig== }
@@ -13709,6 +21262,12 @@ packages:
     optionalDependencies:
       fsevents: 2.3.2
 
+  /rsvp/4.8.5:
+    resolution:
+      { integrity: sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA== }
+    engines: { node: 6.* || >= 7.* }
+    dev: true
+
   /run-async/2.4.1:
     resolution:
       { integrity: sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ== }
@@ -13721,6 +21280,13 @@ packages:
     dependencies:
       queue-microtask: 1.2.3
 
+  /run-queue/1.0.3:
+    resolution:
+      { integrity: sha512-ntymy489o0/QQplUDnpYAYUsO50K9SBrIVaKCWDOJzYJts0f9WH9RFJkyagebkw5+y1oi00R7ynNW/d12GBumg== }
+    dependencies:
+      aproba: 1.2.0
+    dev: true
+
   /rw/0.1.4:
     resolution:
       { integrity: sha512-vSj3D96kMcjNyqPcp65wBRIDImGSrUuMxngNNxvw8MQaO+aQ6llzRPH7XcJy5zrpb3wU++045+Uz/IDIM684iw== }
@@ -13745,6 +21311,11 @@ packages:
     dependencies:
       tslib: 2.4.0
 
+  /safe-buffer/5.1.1:
+    resolution:
+      { integrity: sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg== }
+    dev: true
+
   /safe-buffer/5.1.2:
     resolution:
       { integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g== }
@@ -13753,10 +21324,38 @@ packages:
     resolution:
       { integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ== }
 
+  /safe-regex/1.1.0:
+    resolution:
+      { integrity: sha512-aJXcif4xnaNUzvUuC5gcb46oTS7zvg4jpMTnuqtrEPlR3vFr4pxtdTwaF1Qs3Enjn9HK+ZlwQui+a7z0SywIzg== }
+    dependencies:
+      ret: 0.1.15
+    dev: true
+
   /safer-buffer/2.1.2:
     resolution:
       { integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg== }
 
+  /sane/4.1.0:
+    resolution:
+      { integrity: sha512-hhbzAgTIX8O7SHfp2c8/kREfEn4qO/9q8C9beyY6+tvZ87EpoZ3i1RIEvp27YBswnNbY9mWd6paKVmKbAgLfZA== }
+    engines: { node: 6.* || 8.* || >= 10.* }
+    deprecated:
+      some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added
+    hasBin: true
+    dependencies:
+      '@cnakazawa/watch': 1.0.4
+      anymatch: 2.0.0
+      capture-exit: 2.0.0
+      exec-sh: 0.3.6
+      execa: 1.0.0
+      fb-watchman: 2.0.1
+      micromatch: 3.1.10
+      minimist: 1.2.6
+      walker: 1.0.8
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /sanitize-html/2.7.0:
     resolution:
       { integrity: sha512-jfQelabOn5voO7FAfnQF7v+jsA6z9zC/O4ec0z3E35XPEtHYJT/OdUziVWlKW4irCr2kXaQAyXTXDHWAibg1tA== }
@@ -13769,6 +21368,31 @@ packages:
       postcss: 8.4.14
     dev: false
 
+  /sass-loader/13.0.2_webpack@5.72.0:
+    resolution:
+      { integrity: sha512-BbiqbVmbfJaWVeOOAu2o7DhYWtcNmTfvroVgFXa6k2hHheMxNAeDHLNoDy/Q5aoaVlz0LH+MbMktKwm9vN/j8Q== }
+    engines: { node: '>= 14.15.0' }
+    peerDependencies:
+      fibers: '>= 3.1.0'
+      node-sass: ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
+      sass: ^1.3.0
+      sass-embedded: '*'
+      webpack: ^5.0.0
+    peerDependenciesMeta:
+      fibers:
+        optional: true
+      node-sass:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+    dependencies:
+      klona: 2.0.5
+      neo-async: 2.6.2
+      webpack: 5.72.0
+    dev: true
+
   /sass/1.43.4:
     resolution:
       { integrity: sha512-/ptG7KE9lxpGSYiXn7Ar+lKOv37xfWsZRtFYal2QHNigyVQDx685VFT/h7ejVr+R8w7H4tmUgtulsKl5YpveOg== }
@@ -13795,6 +21419,54 @@ packages:
       xmlchars: 2.2.0
     dev: true
 
+  /scheduler/0.19.1:
+    resolution:
+      { integrity: sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA== }
+    dependencies:
+      loose-envify: 1.4.0
+      object-assign: 4.1.1
+    dev: true
+
+  /schema-utils/1.0.0:
+    resolution:
+      { integrity: sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g== }
+    engines: { node: '>= 4' }
+    dependencies:
+      ajv: 6.12.6
+      ajv-errors: 1.0.1_ajv@6.12.6
+      ajv-keywords: 3.5.2_ajv@6.12.6
+    dev: true
+
+  /schema-utils/2.7.0:
+    resolution:
+      { integrity: sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A== }
+    engines: { node: '>= 8.9.0' }
+    dependencies:
+      '@types/json-schema': 7.0.11
+      ajv: 6.12.6
+      ajv-keywords: 3.5.2_ajv@6.12.6
+    dev: true
+
+  /schema-utils/2.7.1:
+    resolution:
+      { integrity: sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg== }
+    engines: { node: '>= 8.9.0' }
+    dependencies:
+      '@types/json-schema': 7.0.11
+      ajv: 6.12.6
+      ajv-keywords: 3.5.2_ajv@6.12.6
+    dev: true
+
+  /schema-utils/3.1.1:
+    resolution:
+      { integrity: sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw== }
+    engines: { node: '>= 10.13.0' }
+    dependencies:
+      '@types/json-schema': 7.0.11
+      ajv: 6.12.6
+      ajv-keywords: 3.5.2_ajv@6.12.6
+    dev: true
+
   /section-matter/1.0.0:
     resolution:
       { integrity: sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA== }
@@ -13859,7 +21531,32 @@ packages:
       { integrity: sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw== }
     dependencies:
       randombytes: 2.1.0
-    dev: false
+
+  /serialize-javascript/5.0.1:
+    resolution:
+      { integrity: sha512-SaaNal9imEO737H2c05Og0/8LUXG7EnsZyMa8MzkmuHoELfT6txuj0cMqRj6zfPKnmQ1yasR4PCJc8x+M4JSPA== }
+    dependencies:
+      randombytes: 2.1.0
+    dev: true
+
+  /serialize-javascript/6.0.0:
+    resolution:
+      { integrity: sha512-Qr3TosvguFt8ePWqsvRfrKyQXIiW+nGbYpy8XK24NQHE83caxWt+mIymTT19DGFbNWNLfEwsrkSmN64lVWB9ag== }
+    dependencies:
+      randombytes: 2.1.0
+    dev: true
+
+  /serve-favicon/2.5.0:
+    resolution:
+      { integrity: sha512-FMW2RvqNr03x+C0WxTyu6sOv21oOjkq5j8tjquWccwa6ScNyGFOGJVpuS1NmTVGBAHS07xnSKotgf2ehQmf9iA== }
+    engines: { node: '>= 0.8.0' }
+    dependencies:
+      etag: 1.8.1
+      fresh: 0.5.2
+      ms: 2.1.1
+      parseurl: 1.3.3
+      safe-buffer: 5.1.1
+    dev: true
 
   /serve-static/1.15.0:
     resolution:
@@ -13877,18 +21574,41 @@ packages:
     resolution:
       { integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw== }
 
+  /set-value/2.0.1:
+    resolution:
+      { integrity: sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      extend-shallow: 2.0.1
+      is-extendable: 0.1.1
+      is-plain-object: 2.0.4
+      split-string: 3.1.0
+    dev: true
+
+  /setimmediate/1.0.5:
+    resolution:
+      { integrity: sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA== }
+    dev: true
+
   /setprototypeof/1.2.0:
     resolution:
       { integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw== }
 
+  /sha.js/2.4.11:
+    resolution:
+      { integrity: sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ== }
+    hasBin: true
+    dependencies:
+      inherits: 2.0.4
+      safe-buffer: 5.2.1
+    dev: true
+
   /shallow-clone/3.0.1:
     resolution:
       { integrity: sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA== }
     engines: { node: '>=8' }
     dependencies:
       kind-of: 6.0.3
-    dev: false
-    optional: true
 
   /sharp/0.30.7:
     resolution:
@@ -13988,11 +21708,27 @@ packages:
       semver: 7.0.0
     dev: true
 
+  /sirv/2.0.2:
+    resolution:
+      { integrity: sha512-4Qog6aE29nIjAOKe/wowFTxOdmbEZKb+3tsLljaBRzJwtqto0BChD2zzH0LhgCSXiI+V7X+Y45v14wBZQ1TK3w== }
+    engines: { node: '>= 10' }
+    dependencies:
+      '@polka/url': 1.0.0-next.21
+      mrmime: 1.0.1
+      totalist: 3.0.0
+    dev: true
+
   /sisteransi/1.0.5:
     resolution:
       { integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg== }
     dev: true
 
+  /slash/2.0.0:
+    resolution:
+      { integrity: sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A== }
+    engines: { node: '>=6' }
+    dev: true
+
   /slash/3.0.0:
     resolution:
       { integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q== }
@@ -14039,6 +21775,41 @@ packages:
     engines: { node: '>= 6.0.0', npm: '>= 3.0.0' }
     optional: true
 
+  /snapdragon-node/2.1.1:
+    resolution:
+      { integrity: sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      define-property: 1.0.0
+      isobject: 3.0.1
+      snapdragon-util: 3.0.1
+    dev: true
+
+  /snapdragon-util/3.0.1:
+    resolution:
+      { integrity: sha512-mbKkMdQKsjX4BAL4bRYTj21edOf8cN7XHdYUJEe+Zn99hVEYcMvKPct1IqNe7+AZPirn8BCDOQBHQZknqmKlZQ== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      kind-of: 3.2.2
+    dev: true
+
+  /snapdragon/0.8.2:
+    resolution:
+      { integrity: sha512-FtyOnWN/wCHTVXOMwvSv26d+ko5vWlIDD6zoUJ7LW8vh+ZBC8QdljveRP+crNrtBwioEUWy/4dMtbBjA4ioNlg== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      base: 0.11.2
+      debug: 2.6.9
+      define-property: 0.2.5
+      extend-shallow: 2.0.1
+      map-cache: 0.2.2
+      source-map: 0.5.7
+      source-map-resolve: 0.5.3
+      use: 3.1.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /snappy/7.1.1:
     resolution:
       { integrity: sha512-mL7GGPJ+WdsaFT5aR/uEqCq8cPg2VbhyifDEP7AeqIVDsAC8LBGYbZP1Qzoa2Ym84OW7JEQXqIpwqFp1EQw5BA== }
@@ -14137,11 +21908,28 @@ packages:
       { integrity: sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w== }
     dev: true
 
+  /source-list-map/2.0.1:
+    resolution:
+      { integrity: sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw== }
+    dev: true
+
   /source-map-js/1.0.2:
     resolution:
       { integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw== }
     engines: { node: '>=0.10.0' }
 
+  /source-map-resolve/0.5.3:
+    resolution:
+      { integrity: sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw== }
+    deprecated: See https://github.com/lydell/source-map-resolve#deprecated
+    dependencies:
+      atob: 2.1.2
+      decode-uri-component: 0.2.0
+      resolve-url: 0.2.1
+      source-map-url: 0.4.1
+      urix: 0.1.0
+    dev: true
+
   /source-map-support/0.5.13:
     resolution:
       { integrity: sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w== }
@@ -14157,6 +21945,18 @@ packages:
       buffer-from: 1.1.2
       source-map: 0.6.1
 
+  /source-map-url/0.4.1:
+    resolution:
+      { integrity: sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw== }
+    deprecated: See https://github.com/lydell/source-map-url#deprecated
+    dev: true
+
+  /source-map/0.5.7:
+    resolution:
+      { integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ== }
+    engines: { node: '>=0.10.0' }
+    dev: true
+
   /source-map/0.6.1:
     resolution:
       { integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g== }
@@ -14172,6 +21972,11 @@ packages:
     resolution:
       { integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA== }
 
+  /space-separated-tokens/1.1.5:
+    resolution:
+      { integrity: sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA== }
+    dev: true
+
   /spdx-correct/3.1.1:
     resolution:
       { integrity: sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w== }
@@ -14204,6 +22009,14 @@ packages:
     engines: { node: '>=6' }
     dev: false
 
+  /split-string/3.1.0:
+    resolution:
+      { integrity: sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      extend-shallow: 3.0.2
+    dev: true
+
   /split2/3.2.2:
     resolution:
       { integrity: sha512-9NThjpgZnifTkJpzTZ7Eue85S49QwpNhZTq6GRJwObb6jnLFNGB7Qm73V5HewTROPyxD0C29xqmaI68bQtV+hg== }
@@ -14248,13 +22061,19 @@ packages:
       { integrity: sha512-ooAzh/7dxIG5+uDik1z/Rd1vli0+38izZhGzSa34FwR7IbelPWCCKSNIl8jlL/F7ERvy8CB2jNeM1E9i9mXMAQ== }
     engines: { node: '>= 0.6' }
 
+  /ssri/6.0.2:
+    resolution:
+      { integrity: sha512-cepbSq/neFK7xB6A50KHN0xHDotYzq58wWCa5LeWqnPrHG8GzfEjO/4O8kpmcGW+oaxkvhEJCWgbgNk4/ZV93Q== }
+    dependencies:
+      figgy-pudding: 3.5.2
+    dev: true
+
   /ssri/8.0.1:
     resolution:
       { integrity: sha512-97qShzy1AiyxvPNIkLWoGua7xoQzzPjQ0HAH4B0rWKo7SZ6USuPcrUiAFrws0UH8RrbWmgq3LMTObhPIHbbBeQ== }
     engines: { node: '>= 8' }
     dependencies:
       minipass: 3.3.4
-    optional: true
 
   /stable/0.1.8:
     resolution:
@@ -14263,7 +22082,6 @@ packages:
       'Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility
       table on MDN:
       https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility'
-    dev: false
 
   /stack-utils/2.0.5:
     resolution:
@@ -14278,6 +22096,20 @@ packages:
       { integrity: sha512-qoRRSyROncaz1z0mvYqIE4lCd9p2R90i6GxW3uZv5ucSu8tU7B5HXUP1gG8pVZsYNVaXjk8ClXHPttLyxAL48A== }
     dev: false
 
+  /state-toggle/1.0.3:
+    resolution:
+      { integrity: sha512-d/5Z4/2iiCnHw6Xzghyhb+GcmF89bxwgXG60wjIiZaxnymbyOmI8Hk4VqHXiVVp6u2ysaskFfXg3ekCj4WNftQ== }
+    dev: true
+
+  /static-extend/0.1.2:
+    resolution:
+      { integrity: sha512-72E9+uLc27Mt718pMHt9VMNiAL4LMsmDbBva8mxWUCkT07fSzEGMYUCk0XWY6lp0j6RBAG4cJ3mWuZv2OE3s0g== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      define-property: 0.2.5
+      object-copy: 0.1.0
+    dev: true
+
   /statuses/2.0.1:
     resolution:
       { integrity: sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ== }
@@ -14288,11 +22120,32 @@ packages:
       { integrity: sha512-KXDYZ9dszj6bzvnEMRYvxgeTHU74QBFL54XKtP3nyMuJ81CFYtABZ3bAzL2EdFUaEwJOBOgENyFj3R7oTzDyyw== }
     engines: { node: '>=4', npm: '>=6' }
 
+  /store2/2.14.2:
+    resolution:
+      { integrity: sha512-siT1RiqlfQnGqgT/YzXVUNsom9S0H1OX+dpdGN1xkyYATo4I6sep5NmsRD/40s3IIOvlCq6akxkqG82urIZW1w== }
+    dev: true
+
+  /stream-browserify/2.0.2:
+    resolution:
+      { integrity: sha512-nX6hmklHs/gr2FuxYDltq8fJA1GDlxKQCz8O/IM4atRqBH8OORmBNgfvW5gG10GT/qQ9u0CzIvr2X5Pkt6ntqg== }
+    dependencies:
+      inherits: 2.0.4
+      readable-stream: 2.3.7
+    dev: true
+
   /stream-chain/2.2.5:
     resolution:
       { integrity: sha512-1TJmBx6aSWqZ4tx7aTpBDXK0/e2hhcNSTV8+CbFJtDjbb+I1mZ8lHit0Grw9GRT+6JbIrrDd8esncgBi8aBXGA== }
     dev: false
 
+  /stream-each/1.2.3:
+    resolution:
+      { integrity: sha512-vlMC2f8I2u/bZGqkdfLQW/13Zihpej/7PmSiMQsbYddxuTsJp8vRe2x2FvVExZg7FaOds43ROAuFJwPR4MTZLw== }
+    dependencies:
+      end-of-stream: 1.4.4
+      stream-shift: 1.0.1
+    dev: true
+
   /stream-events/1.0.5:
     resolution:
       { integrity: sha512-E1GUzBSgvct8Jsb3v2X15pjzN1tYebtbLaMg+eBOUOAxgbLoSbT2NS91ckc5lJD1KfLjId+jXJRgo0qnV5Nerg== }
@@ -14300,6 +22153,17 @@ packages:
       stubs: 3.0.0
     dev: false
 
+  /stream-http/2.8.3:
+    resolution:
+      { integrity: sha512-+TSkfINHDo4J+ZobQLWiMouQYB+UVYFttRA94FpEzzJ7ZdqcL4uUUQ7WkdkI4DSozGmgBUE/a47L+38PenXhUw== }
+    dependencies:
+      builtin-status-codes: 3.0.0
+      inherits: 2.0.4
+      readable-stream: 2.3.7
+      to-arraybuffer: 1.0.1
+      xtend: 4.0.2
+    dev: true
+
   /stream-json/1.7.4:
     resolution:
       { integrity: sha512-ja2dde1v7dOlx5/vmavn8kLrxvNfs7r2oNc5DYmNJzayDDdudyCSuTB1gFjH4XBVTIwxiMxL4i059HX+ZiouXg== }
@@ -14310,7 +22174,6 @@ packages:
   /stream-shift/1.0.1:
     resolution:
       { integrity: sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ== }
-    dev: false
 
   /streamsearch/1.1.0:
     resolution:
@@ -14387,6 +22250,20 @@ packages:
       strip-ansi: 7.0.1
     dev: true
 
+  /string.prototype.matchall/4.0.7:
+    resolution:
+      { integrity: sha512-f48okCX7JiwVi1NXCVWcFnZgADDC/n2vePlQ/KUCNqCikLLilQvwjMO8+BHVKvgzH0JB0J9LEPgxOGT02RoETg== }
+    dependencies:
+      call-bind: 1.0.2
+      define-properties: 1.1.4
+      es-abstract: 1.20.1
+      get-intrinsic: 1.1.2
+      has-symbols: 1.0.3
+      internal-slot: 1.0.3
+      regexp.prototype.flags: 1.4.3
+      side-channel: 1.0.4
+    dev: true
+
   /string.prototype.padend/3.1.3:
     resolution:
       { integrity: sha512-jNIIeokznm8SD/TZISQsZKYu7RJyheFNt84DUPrh482GC8RVp2MKqm2O5oBRdGxbDQoXrhhWtPIWQOiy20svUg== }
@@ -14397,6 +22274,16 @@ packages:
       es-abstract: 1.20.1
     dev: true
 
+  /string.prototype.padstart/3.1.3:
+    resolution:
+      { integrity: sha512-NZydyOMtYxpTjGqp0VN5PYUF/tsU15yDMZnUdj16qRUIUiMJkHHSDElYyQFrMu+/WloTpA7MQSiADhBicDfaoA== }
+    engines: { node: '>= 0.4' }
+    dependencies:
+      call-bind: 1.0.2
+      define-properties: 1.1.4
+      es-abstract: 1.20.1
+    dev: true
+
   /string.prototype.trimend/1.0.5:
     resolution:
       { integrity: sha512-I7RGvmjV4pJ7O3kdf+LXFpVfdNOxtCW/2C8f6jNiW4+PQchwxkCDzlk1/7p+Wl4bqFIZeF47qAHXLuHHWKAxog== }
@@ -14491,6 +22378,15 @@ packages:
     engines: { node: '>=0.10.0' }
     dev: true
 
+  /strip-bom/2.0.0:
+    resolution:
+      { integrity: sha512-kwrX1y7czp1E69n2ajbG65mIo9dqvJ+8aBQXOGVxqwvNbsXdFM6Lq37dLAY3mknUwru8CfcCbfOLL/gMo+fi3g== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      is-utf8: 0.2.1
+    dev: true
+    optional: true
+
   /strip-bom/3.0.0:
     resolution:
       { integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA== }
@@ -14503,6 +22399,12 @@ packages:
     engines: { node: '>=8' }
     dev: true
 
+  /strip-eof/1.0.0:
+    resolution:
+      { integrity: sha512-7FCwGGmx8mD5xQd3RPUvnSpUXHM3BWuzjtpD4TXsfcZ9EL4azvVVUscFYwD9nx8Kh+uCBC00XBtAykoMHwTh8Q== }
+    engines: { node: '>=0.10.0' }
+    dev: true
+
   /strip-final-newline/2.0.0:
     resolution:
       { integrity: sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA== }
@@ -14514,6 +22416,16 @@ packages:
     engines: { node: '>=12' }
     dev: true
 
+  /strip-indent/1.0.1:
+    resolution:
+      { integrity: sha512-I5iQq6aFMM62fBEAIB/hXzwJD6EEZ0xEGCX2t7oXqaKPIRgt4WruAQ285BISgdkP+HLGWyeGmNJcpIwFeRYRUA== }
+    engines: { node: '>=0.10.0' }
+    hasBin: true
+    dependencies:
+      get-stdin: 4.0.1
+    dev: true
+    optional: true
+
   /strip-indent/3.0.0:
     resolution:
       { integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ== }
@@ -14538,6 +22450,35 @@ packages:
       { integrity: sha512-PdHt7hHUJKxvTCgbKX9C1V/ftOcjJQgz8BZwNfV5c4B6dcGqlpelTbJ999jBGZ2jYiPAwcX5dP6oBwVlBlUbxw== }
     dev: false
 
+  /style-loader/1.3.0_webpack@4.46.0:
+    resolution:
+      { integrity: sha512-V7TCORko8rs9rIqkSrlMfkqA63DfoGBBJmK1kKGCcSi+BWb4cqz0SRsnp4l6rU5iwOEd0/2ePv68SV22VXon4Q== }
+    engines: { node: '>= 8.9.0' }
+    peerDependencies:
+      webpack: ^4.0.0 || ^5.0.0
+    dependencies:
+      loader-utils: 2.0.2
+      schema-utils: 2.7.1
+      webpack: 4.46.0
+    dev: true
+
+  /style-loader/3.3.1_webpack@5.72.0:
+    resolution:
+      { integrity: sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ== }
+    engines: { node: '>= 12.13.0' }
+    peerDependencies:
+      webpack: ^5.0.0
+    dependencies:
+      webpack: 5.72.0
+    dev: true
+
+  /style-to-object/0.3.0:
+    resolution:
+      { integrity: sha512-CzFnRRXhzWIdItT3OmF8SQfWyahHhjq3HwcMNCNLn+N7klOOqPjMeG/4JSu77D7ypZdGvSzvkrbyeTMizz2VrA== }
+    dependencies:
+      inline-style-parser: 0.1.1
+    dev: true
+
   /stylehacks/5.1.0_postcss@8.4.14:
     resolution:
       { integrity: sha512-SzLmvHQTrIWfSgljkQCw2++C9+Ne91d/6Sp92I8c5uHTcy/PgeHamwITIbBW9wnFTY/3ZfSXR9HIL6Ikqmcu6Q== }
@@ -14664,6 +22605,18 @@ packages:
       { integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w== }
     engines: { node: '>= 0.4' }
 
+  /sveltedoc-parser/4.2.1:
+    resolution:
+      { integrity: sha512-sWJRa4qOfRdSORSVw9GhfDEwsbsYsegnDzBevUCF6k/Eis/QqCu9lJ6I0+d/E2wOWCjOhlcJ3+jl/Iur+5mmCw== }
+    engines: { node: '>=10.0.0' }
+    dependencies:
+      eslint: 8.4.1
+      espree: 9.2.0
+      htmlparser2-svelte: 4.1.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /svg.draggable.js/2.2.2:
     resolution:
       { integrity: sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw== }
@@ -14788,6 +22741,17 @@ packages:
       { integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw== }
     dev: true
 
+  /symbol.prototype.description/1.0.5:
+    resolution:
+      { integrity: sha512-x738iXRYsrAt9WBhRCVG5BtIC3B7CUkFwbHW2zOvGtwM33s7JjrCDyq8V0zgMYVb5ymsL8+qkzzpANH63CPQaQ== }
+    engines: { node: '>= 0.11.15' }
+    dependencies:
+      call-bind: 1.0.2
+      get-symbol-description: 1.0.0
+      has-symbols: 1.0.3
+      object.getownpropertydescriptors: 2.1.4
+    dev: true
+
   /sync-request/6.1.0:
     resolution:
       { integrity: sha512-8fjNkrNlNCrVc/av+Jn+xxqfCjYaBoHqCsDz6mt030UMxJGr+GSfCV1dQt2gRtlL63+VPidwDVLr7V2OcTSdRw== }
@@ -14805,11 +22769,28 @@ packages:
       get-port: 3.2.0
     dev: true
 
+  /synchronous-promise/2.0.16:
+    resolution:
+      { integrity: sha512-qImOD23aDfnIDNqlG1NOehdB9IYsn1V9oByPjKY1nakv2MQYCEMyX033/q+aEtYCpmYK1cv2+NTmlH+ra6GA5A== }
+    dev: true
+
   /tabbable/4.0.0:
     resolution:
       { integrity: sha512-H1XoH1URcBOa/rZZWxLxHCtOdVUEev+9vo5YdYhC9tCY4wnybX+VQrCYuy9ubkg69fCBxCONJOSLGfw0DWMffQ== }
     dev: true
 
+  /tapable/1.1.3:
+    resolution:
+      { integrity: sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA== }
+    engines: { node: '>=6' }
+    dev: true
+
+  /tapable/2.2.1:
+    resolution:
+      { integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ== }
+    engines: { node: '>=6' }
+    dev: true
+
   /tar-fs/2.1.1:
     resolution:
       { integrity: sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng== }
@@ -14883,6 +22864,28 @@ packages:
       - supports-color
     dev: false
 
+  /telejson/6.0.8:
+    resolution:
+      { integrity: sha512-nerNXi+j8NK1QEfBHtZUN/aLdDcyupA//9kAboYLrtzZlPLpUfqbVGWb9zz91f/mIjRbAYhbgtnJHY8I1b5MBg== }
+    dependencies:
+      '@types/is-function': 1.0.1
+      global: 4.4.0
+      is-function: 1.0.2
+      is-regex: 1.1.4
+      is-symbol: 1.0.4
+      isobject: 4.0.0
+      lodash: 4.17.21
+      memoizerific: 1.11.3
+    dev: true
+
+  /temp/0.8.4:
+    resolution:
+      { integrity: sha512-s0ZZzd0BzYv5tLSptZooSjK8oj6C+c19p7Vqta9+6NPOf7r+fxq0cJe6/oN4LTC79sy5NY8ucOJNgwsKCSbfqg== }
+    engines: { node: '>=6.0.0' }
+    dependencies:
+      rimraf: 2.6.3
+    dev: true
+
   /terminal-link/2.1.1:
     resolution:
       { integrity: sha512-un0FmiRUQNr5PJqy9kP7c40F5BOfpGlYTrxonDChEZB7pzZxRNp/bt+ymiy9/npwXya9KH99nJ/GXFIiUkYGFQ== }
@@ -14892,6 +22895,83 @@ packages:
       supports-hyperlinks: 2.2.0
     dev: true
 
+  /terser-webpack-plugin/1.4.5_webpack@4.46.0:
+    resolution:
+      { integrity: sha512-04Rfe496lN8EYruwi6oPQkG0vo8C+HT49X687FZnpPF0qMAIHONI6HEXYPKDOE8e5HjXTyKfqRd/agHtH0kOtw== }
+    engines: { node: '>= 6.9.0' }
+    peerDependencies:
+      webpack: ^4.0.0
+    dependencies:
+      cacache: 12.0.4
+      find-cache-dir: 2.1.0
+      is-wsl: 1.1.0
+      schema-utils: 1.0.0
+      serialize-javascript: 4.0.0
+      source-map: 0.6.1
+      terser: 4.8.1
+      webpack: 4.46.0
+      webpack-sources: 1.4.3
+      worker-farm: 1.7.0
+    dev: true
+
+  /terser-webpack-plugin/4.2.3_webpack@4.46.0:
+    resolution:
+      { integrity: sha512-jTgXh40RnvOrLQNgIkwEKnQ8rmHjHK4u+6UBEi+W+FPmvb+uo+chJXntKe7/3lW5mNysgSWD60KyesnhW8D6MQ== }
+    engines: { node: '>= 10.13.0' }
+    peerDependencies:
+      webpack: ^4.0.0 || ^5.0.0
+    dependencies:
+      cacache: 15.3.0
+      find-cache-dir: 3.3.2
+      jest-worker: 26.6.2
+      p-limit: 3.1.0
+      schema-utils: 3.1.1
+      serialize-javascript: 5.0.1
+      source-map: 0.6.1
+      terser: 5.14.2
+      webpack: 4.46.0
+      webpack-sources: 1.4.3
+    transitivePeerDependencies:
+      - bluebird
+    dev: true
+
+  /terser-webpack-plugin/5.3.6_webpack@5.72.0:
+    resolution:
+      { integrity: sha512-kfLFk+PoLUQIbLmB1+PZDMRSZS99Mp+/MHqDNmMA6tOItzRt+Npe3E+fsMs5mfcM0wCtrrdU387UnV+vnSffXQ== }
+    engines: { node: '>= 10.13.0' }
+    peerDependencies:
+      '@swc/core': '*'
+      esbuild: '*'
+      uglify-js: '*'
+      webpack: ^5.1.0
+    peerDependenciesMeta:
+      '@swc/core':
+        optional: true
+      esbuild:
+        optional: true
+      uglify-js:
+        optional: true
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.14
+      jest-worker: 27.5.1
+      schema-utils: 3.1.1
+      serialize-javascript: 6.0.0
+      terser: 5.14.2
+      webpack: 5.72.0
+    dev: true
+
+  /terser/4.8.1:
+    resolution:
+      { integrity: sha512-4GnLC0x667eJG0ewJTa6z/yXrbLGv80D9Ru6HIpCQmO+Q4PfEtBFi0ObSckqwL6VyQv/7ENJieXHo2ANmdQwgw== }
+    engines: { node: '>=6.0.0' }
+    hasBin: true
+    dependencies:
+      acorn: 8.7.1
+      commander: 2.20.3
+      source-map: 0.6.1
+      source-map-support: 0.5.21
+    dev: true
+
   /terser/5.14.2:
     resolution:
       { integrity: sha512-oL0rGeM/WFQCUd0y2QrWxYnq7tfSuKBiqTjRPWrRgB46WD/kiwHwF8T23z78H6Q6kGCuuHcPB+KULHRdxvVGQA== }
@@ -14902,7 +22982,6 @@ packages:
       acorn: 8.7.1
       commander: 2.20.3
       source-map-support: 0.5.21
-    dev: false
 
   /test-exclude/6.0.0:
     resolution:
@@ -14971,6 +23050,14 @@ packages:
       { integrity: sha512-Cc+OraorugtXNfs50hU9KS369rFXCfgGLpfCfvlc+Ud5u6VWmUQsOAa9HbTvheQdYnrdJqqv1e5oIqXppMYnSw== }
     engines: { node: '>=8' }
 
+  /timers-browserify/2.0.12:
+    resolution:
+      { integrity: sha512-9phl76Cqm6FhSX9Xe1ZUAMLtm1BLkKj2Qd5ApyWkXzsMRaA7dgr81kf4wJmQf/hAvg8EEyJxDo3du/0KlhPiKQ== }
+    engines: { node: '>=0.6.0' }
+    dependencies:
+      setimmediate: 1.0.5
+    dev: true
+
   /tiny-emitter/2.1.0:
     resolution:
       { integrity: sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q== }
@@ -15025,17 +23112,39 @@ packages:
       { integrity: sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw== }
     dev: true
 
+  /to-arraybuffer/1.0.1:
+    resolution:
+      { integrity: sha512-okFlQcoGTi4LQBG/PgSYblw9VOyptsz2KJZqc6qtgGdes8VktzUQkj4BI2blit072iS8VODNcMA+tvnS9dnuMA== }
+    dev: true
+
   /to-fast-properties/2.0.0:
     resolution:
       { integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog== }
     engines: { node: '>=4' }
 
+  /to-object-path/0.3.0:
+    resolution:
+      { integrity: sha512-9mWHdnGRuh3onocaHzukyvCZhzvr6tiflAy/JRFXcJX0TjgfWA9pk9t8CMbzmBE4Jfw58pXbkngtBtqYxzNEyg== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      kind-of: 3.2.2
+    dev: true
+
   /to-readable-stream/2.1.0:
     resolution:
       { integrity: sha512-o3Qa6DGg1CEXshSdvWNX2sN4QHqg03SPq7U6jPXRahlQdl5dK8oXjkU/2/sGrnOZKeGV1zLSO8qPwyKklPPE7w== }
     engines: { node: '>=8' }
     dev: true
 
+  /to-regex-range/2.1.1:
+    resolution:
+      { integrity: sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      is-number: 3.0.0
+      repeat-string: 1.6.1
+    dev: true
+
   /to-regex-range/5.0.1:
     resolution:
       { integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ== }
@@ -15043,17 +23152,39 @@ packages:
     dependencies:
       is-number: 7.0.0
 
+  /to-regex/3.0.2:
+    resolution:
+      { integrity: sha512-FWtleNAtZ/Ki2qtqej2CXTOayOH9bHDQF+Q48VpWyDXjbYxA4Yz8iDB31zXOBUlOHHKidDbqGVrTUvQMPmBGBw== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      define-property: 2.0.2
+      extend-shallow: 3.0.2
+      regex-not: 1.0.2
+      safe-regex: 1.1.0
+    dev: true
+
   /toidentifier/1.0.1:
     resolution:
       { integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA== }
     engines: { node: '>=0.6' }
 
+  /token-stream/1.0.0:
+    resolution:
+      { integrity: sha512-VSsyNPPW74RpHwR8Fc21uubwHY7wMDeJLys2IX5zJNih+OnAnaifKHo+1LHT7DAdloQ7apeaaWg8l7qnf/TnEg== }
+    dev: true
+
   /tosource/1.0.0:
     resolution:
       { integrity: sha512-N6g8eQ1eerw6Y1pBhdgkubWIiPFwXa2POSUrlL8jth5CyyEWNWzoGKRkO3CaO7Jx27hlJP54muB3btIAbx4MPg== }
     engines: { node: '>=0.4.0' }
     dev: true
 
+  /totalist/3.0.0:
+    resolution:
+      { integrity: sha512-eM+pCBxXO/njtF7vdFsHuqb+ElbxqtI4r5EAvk6grfAFyJ6IvWlSkfZ5T9ozC6xWw3Fj1fGoSmrl0gUs46JVIw== }
+    engines: { node: '>=6' }
+    dev: true
+
   /touch/3.1.0:
     resolution:
       { integrity: sha512-WBx8Uy5TLtOSRtIq+M03/sKDrXCLHxwDcquSP2c43Le03/9serjQBIztjRz6FkJez9D/hleyAXTBGLwwZUw9lA== }
@@ -15094,12 +23225,40 @@ packages:
     hasBin: true
     dev: true
 
+  /trim-newlines/1.0.0:
+    resolution:
+      { integrity: sha512-Nm4cF79FhSTzrLKGDMi3I4utBtFv8qKy4sq1enftf2gMdpqI8oVQTAfySkTz5r49giVzDj88SVZXP4CeYQwjaw== }
+    engines: { node: '>=0.10.0' }
+    dev: true
+    optional: true
+
   /trim-newlines/3.0.1:
     resolution:
       { integrity: sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw== }
     engines: { node: '>=8' }
     dev: true
 
+  /trim-trailing-lines/1.1.4:
+    resolution:
+      { integrity: sha512-rjUWSqnfTNrjbB9NQWfPMH/xRK1deHeGsHoVfpxJ++XeYXE0d6B1En37AHfw3jtfTU7dzMzZL2jjpe8Qb5gLIQ== }
+    dev: true
+
+  /trim/0.0.1:
+    resolution:
+      { integrity: sha512-YzQV+TZg4AxpKxaTHK3c3D+kRDCGVEE7LemdlQZoQXn0iennk10RsIoY6ikzAqJTc9Xjl9C1/waHom/J86ziAQ== }
+    dev: true
+
+  /trough/1.0.5:
+    resolution:
+      { integrity: sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA== }
+    dev: true
+
+  /ts-dedent/2.2.0:
+    resolution:
+      { integrity: sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ== }
+    engines: { node: '>=6.10' }
+    dev: true
+
   /ts-jest/27.0.7_pyvehg5xwu6dr7ymdi6f4bgcyu:
     resolution:
       { integrity: sha512-O41shibMqzdafpuP+CkrOL7ykbmLh+FqQrXEmV9CydQ5JBk0Sj0uAEF5TNNe94fZWKm3yYvWa/IbyV4Yg1zK2Q== }
@@ -15160,10 +23319,10 @@ packages:
       make-error: 1.3.6
       semver: 7.3.7
       typescript: 4.7.3
-      yargs-parser: 21.0.1
+      yargs-parser: 21.1.1
     dev: true
 
-  /ts-jest/28.0.5_lt5llx2ti6zt4eclhanfli5ynu:
+  /ts-jest/28.0.5_cvmb76wjcdignh37taegqrrccm:
     resolution:
       { integrity: sha512-Sx9FyP9pCY7pUzQpy4FgRZf2bhHY3za576HMKJFs+OnQ9jS96Du5vNsDKkyedQkik+sEabbKAnCliv9BEsHZgQ== }
     engines: { node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0 }
@@ -15190,8 +23349,30 @@ packages:
       lodash.memoize: 4.1.2
       make-error: 1.3.6
       semver: 7.3.7
-      typescript: 4.7.4
-      yargs-parser: 21.0.1
+      typescript: 4.8.2
+      yargs-parser: 21.1.1
+    dev: true
+
+  /ts-loader/8.4.0_x3ag2alrxtrovqdhtvz743erxe:
+    resolution:
+      { integrity: sha512-6nFY3IZ2//mrPc+ImY3hNWx1vCHyEhl6V+wLmL4CZcm6g1CqX7UKrkc6y0i4FwcfOhxyMPCfaEvh20f4r9GNpw== }
+    engines: { node: '>=10.0.0' }
+    peerDependencies:
+      typescript: '*'
+      webpack: '*'
+    dependencies:
+      chalk: 4.1.2
+      enhanced-resolve: 4.5.0
+      loader-utils: 2.0.2
+      micromatch: 4.0.5
+      semver: 7.3.7
+      typescript: 4.5.2
+      webpack: 5.72.0
+    dev: true
+
+  /ts-map/1.0.3:
+    resolution:
+      { integrity: sha512-vDWbsl26LIcPGmDpoVzjEP6+hvHZkBkLW7JpvwbCv/5IYPJlsbzCVXY3wsCeAxAUeTclNOUZxnLdGh3VBD/J6w== }
     dev: true
 
   /ts-node-dev/1.1.8_typescript@4.7.3:
@@ -15268,6 +23449,19 @@ packages:
       yn: 3.1.1
     dev: true
 
+  /ts-pnp/1.2.0_typescript@4.5.2:
+    resolution:
+      { integrity: sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw== }
+    engines: { node: '>=6' }
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      typescript: 4.5.2
+    dev: true
+
   /tsconfig/7.0.0:
     resolution:
       { integrity: sha512-vZXmzPrL+EmC4T/4rVlT2jNVMWCi/O4DIiSj3UHg1OE5kCKbk4mfrXc6dZksLgRM/TZlKnousKH9bbTazUWRRw== }
@@ -15286,7 +23480,7 @@ packages:
     resolution:
       { integrity: sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ== }
 
-  /tsutils/3.21.0_typescript@4.7.4:
+  /tsutils/3.21.0_typescript@4.8.2:
     resolution:
       { integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA== }
     engines: { node: '>= 6' }
@@ -15296,7 +23490,12 @@ packages:
         3.7.0-dev || >= 3.7.0-beta'
     dependencies:
       tslib: 1.14.1
-      typescript: 4.7.4
+      typescript: 4.8.2
+    dev: true
+
+  /tty-browserify/0.0.0:
+    resolution:
+      { integrity: sha512-JVa5ijo+j/sOoHGjw0sxw734b1LhBkQ3bvUGNdxnVXDCX81Yx7TFgnZygxrIIWn23hbfTaMYLwRmAxFyDuFmIw== }
     dev: true
 
   /tunnel-agent/0.6.0:
@@ -15413,9 +23612,9 @@ packages:
     hasBin: true
     dev: true
 
-  /typescript/4.7.4:
+  /typescript/4.8.2:
     resolution:
-      { integrity: sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ== }
+      { integrity: sha512-C0I1UsrrDHo2fYI5oaCGbSejwX4ch+9Y5jTQELvovfmFkK3HHSZJB8MSJcWLmCUBzQBchCrZ9rMRV6GuNrvGtw== }
     engines: { node: '>=4.2.0' }
     hasBin: true
     dev: true
@@ -15425,6 +23624,15 @@ packages:
       { integrity: sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA== }
     dev: true
 
+  /uglify-js/3.17.0:
+    resolution:
+      { integrity: sha512-aTeNPVmgIMPpm1cxXr2Q/nEbvkmV8yq66F3om7X3P/cvOXQ0TMQ64Wk63iyT1gPlmdmGzjGpyLh1f3y8MZWXGg== }
+    engines: { node: '>=0.8.0' }
+    hasBin: true
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /unbox-primitive/1.0.2:
     resolution:
       { integrity: sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw== }
@@ -15444,19 +23652,81 @@ packages:
       { integrity: sha512-BQFnUDuAQ4Yf/cYY5LNrK9NCJFKriaRbD9uR1fTeXnBeoa97W0i41qkZfGO9pSo8I5KzjAcSY2XYtdf0oKd7KQ== }
     dev: true
 
+  /unfetch/4.2.0:
+    resolution:
+      { integrity: sha512-F9p7yYCn6cIW9El1zi0HI6vqpeIvBsr3dSuRO6Xuppb1u5rXpCPmMvLSyECLhybr9isec8Ohl0hPekMVrEinDA== }
+    dev: true
+
+  /unherit/1.1.3:
+    resolution:
+      { integrity: sha512-Ft16BJcnapDKp0+J/rqFC3Rrk6Y/Ng4nzsC028k2jdDII/rdZ7Wd3pPT/6+vIIxRagwRc9K0IUX0Ra4fKvw+WQ== }
+    dependencies:
+      inherits: 2.0.4
+      xtend: 4.0.2
+    dev: true
+
+  /unicode-canonical-property-names-ecmascript/2.0.0:
+    resolution:
+      { integrity: sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ== }
+    engines: { node: '>=4' }
+    dev: true
+
+  /unicode-match-property-ecmascript/2.0.0:
+    resolution:
+      { integrity: sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q== }
+    engines: { node: '>=4' }
+    dependencies:
+      unicode-canonical-property-names-ecmascript: 2.0.0
+      unicode-property-aliases-ecmascript: 2.0.0
+    dev: true
+
+  /unicode-match-property-value-ecmascript/2.0.0:
+    resolution:
+      { integrity: sha512-7Yhkc0Ye+t4PNYzOGKedDhXbYIBe1XEQYQxOPyhcXNMJ0WCABqqj6ckydd6pWRZTHV4GuCPKdBAUiMc60tsKVw== }
+    engines: { node: '>=4' }
+    dev: true
+
+  /unicode-property-aliases-ecmascript/2.0.0:
+    resolution:
+      { integrity: sha512-5Zfuy9q/DFr4tfO7ZPeVXb1aPoeQSdeFMLpYuFebehDAhbuevLs5yxSZmIFN1tP5F9Wl4IpJrYojg85/zgyZHQ== }
+    engines: { node: '>=4' }
+    dev: true
+
+  /unified/9.2.0:
+    resolution:
+      { integrity: sha512-vx2Z0vY+a3YoTj8+pttM3tiJHCwY5UFbYdiWrwBEbHmK8pvsPj2rtAX2BFfgXen8T39CJWblWRDT4L5WGXtDdg== }
+    dependencies:
+      '@types/unist': 2.0.6
+      bail: 1.0.5
+      extend: 3.0.2
+      is-buffer: 2.0.5
+      is-plain-obj: 2.1.0
+      trough: 1.0.5
+      vfile: 4.2.1
+    dev: true
+
+  /union-value/1.0.1:
+    resolution:
+      { integrity: sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      arr-union: 3.1.0
+      get-value: 2.0.6
+      is-extendable: 0.1.1
+      set-value: 2.0.1
+    dev: true
+
   /unique-filename/1.1.1:
     resolution:
       { integrity: sha512-Vmp0jIp2ln35UTXuryvjzkjGdRyf9b2lTXuSYUiPmzRcl3FDtYqAwOnTJkAngD9SWhnoJzDbTKwaOrZ+STtxNQ== }
     dependencies:
       unique-slug: 2.0.2
-    optional: true
 
   /unique-slug/2.0.2:
     resolution:
       { integrity: sha512-zoWr9ObaxALD3DOPfjPSqxt4fnZiWblxHIgeWqW8x7UqDzEtHEQLzji2cuJYQFCU6KmoJikOYAZlrTHHebjx2w== }
     dependencies:
       imurmurhash: 0.1.4
-    optional: true
 
   /unique-string/2.0.0:
     resolution:
@@ -15466,6 +23736,64 @@ packages:
       crypto-random-string: 2.0.0
     dev: false
 
+  /unist-builder/2.0.3:
+    resolution:
+      { integrity: sha512-f98yt5pnlMWlzP539tPc4grGMsFaQQlP/vM396b00jngsiINumNmsY8rkXjfoi1c6QaM8nQ3vaGDuoKWbe/1Uw== }
+    dev: true
+
+  /unist-util-generated/1.1.6:
+    resolution:
+      { integrity: sha512-cln2Mm1/CZzN5ttGK7vkoGw+RZ8VcUH6BtGbq98DDtRGquAAOXig1mrBQYelOwMXYS8rK+vZDyyojSjp7JX+Lg== }
+    dev: true
+
+  /unist-util-is/4.1.0:
+    resolution:
+      { integrity: sha512-ZOQSsnce92GrxSqlnEEseX0gi7GH9zTJZ0p9dtu87WRb/37mMPO2Ilx1s/t9vBHrFhbgweUwb+t7cIn5dxPhZg== }
+    dev: true
+
+  /unist-util-position/3.1.0:
+    resolution:
+      { integrity: sha512-w+PkwCbYSFw8vpgWD0v7zRCl1FpY3fjDSQ3/N/wNd9Ffa4gPi8+4keqt99N3XW6F99t/mUzp2xAhNmfKWp95QA== }
+    dev: true
+
+  /unist-util-remove-position/2.0.1:
+    resolution:
+      { integrity: sha512-fDZsLYIe2uT+oGFnuZmy73K6ZxOPG/Qcm+w7jbEjaFcJgbQ6cqjs/eSPzXhsmGpAsWPkqZM9pYjww5QTn3LHMA== }
+    dependencies:
+      unist-util-visit: 2.0.3
+    dev: true
+
+  /unist-util-remove/2.1.0:
+    resolution:
+      { integrity: sha512-J8NYPyBm4baYLdCbjmf1bhPu45Cr1MWTm77qd9istEkzWpnN6O9tMsEbB2JhNnBCqGENRqEWomQ+He6au0B27Q== }
+    dependencies:
+      unist-util-is: 4.1.0
+    dev: true
+
+  /unist-util-stringify-position/2.0.3:
+    resolution:
+      { integrity: sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g== }
+    dependencies:
+      '@types/unist': 2.0.6
+    dev: true
+
+  /unist-util-visit-parents/3.1.1:
+    resolution:
+      { integrity: sha512-1KROIZWo6bcMrZEwiH2UrXDyalAa0uqzWCxCJj6lPOvTve2WkfgCytoDTPaMnodXh1WrXOq0haVYHj99ynJlsg== }
+    dependencies:
+      '@types/unist': 2.0.6
+      unist-util-is: 4.1.0
+    dev: true
+
+  /unist-util-visit/2.0.3:
+    resolution:
+      { integrity: sha512-iJ4/RczbJMkD0712mGktuGpm/U4By4FfDonL7N/9tATGIF4imikjOuagyMY53tnZq3NP6BcmlrHhEKAfGWjh7Q== }
+    dependencies:
+      '@types/unist': 2.0.6
+      unist-util-is: 4.1.0
+      unist-util-visit-parents: 3.1.1
+    dev: true
+
   /universalify/0.1.2:
     resolution:
       { integrity: sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg== }
@@ -15481,12 +23809,37 @@ packages:
       { integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ== }
     engines: { node: '>= 0.8' }
 
+  /unset-value/1.0.0:
+    resolution:
+      { integrity: sha512-PcA2tsuGSF9cnySLHTLSh2qrQiJ70mn+r+Glzxv2TWZblxsxCC52BDlZoPCsz7STd9pN7EZetkWZBAvk4cgZdQ== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      has-value: 0.3.1
+      isobject: 3.0.1
+    dev: true
+
+  /untildify/2.1.0:
+    resolution:
+      { integrity: sha512-sJjbDp2GodvkB0FZZcn7k6afVisqX5BZD7Yq3xp4nN2O15BBK0cLm3Vwn2vQaF7UDS0UUsrQMkkplmDI5fskig== }
+    engines: { node: '>=0.10.0' }
+    dependencies:
+      os-homedir: 1.0.2
+    dev: true
+    optional: true
+
   /untildify/4.0.0:
     resolution:
       { integrity: sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw== }
     engines: { node: '>=8' }
     dev: true
 
+  /upath/1.2.0:
+    resolution:
+      { integrity: sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg== }
+    engines: { node: '>=4' }
+    dev: true
+    optional: true
+
   /upath2/3.1.13:
     resolution:
       { integrity: sha512-M88uBoqgzrkXvXrF/+oSIPsTmL21uRwGhPVJKODrl+3lXkQ5NPKrTYuSBZVa+lgPGFoI6qYyHlSKACFHO0AoNw== }
@@ -15508,6 +23861,18 @@ packages:
       escalade: 3.1.1
       picocolors: 1.0.0
 
+  /update-browserslist-db/1.0.5_browserslist@4.21.3:
+    resolution:
+      { integrity: sha512-dteFFpCyvuDdr9S/ff1ISkKt/9YZxKjI9WlRR99c180GaztJtRa/fn18FdxGVKVsnPY7/a/FDN68mcvUmP4U7Q== }
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+    dependencies:
+      browserslist: 4.21.3
+      escalade: 3.1.1
+      picocolors: 1.0.0
+    dev: true
+
   /update-check/1.5.4:
     resolution:
       { integrity: sha512-5YHsflzHP4t1G+8WGPlvKbJEbAJGCgw+Em+dGR1KmBUbr1J36SJBqlHLjR7oob7sco5hWHGQVcr9B2poIVDDTQ== }
@@ -15523,12 +23888,36 @@ packages:
       punycode: 2.1.1
     dev: true
 
+  /urix/0.1.0:
+    resolution:
+      { integrity: sha512-Am1ousAhSLBeB9cG/7k7r2R0zj50uDRlZHPGbazid5s9rlF1F/QKYObEKSIunSjIOkJZqwRRLpvewjEkM7pSqg== }
+    deprecated: Please see https://github.com/lydell/urix#deprecated
+    dev: true
+
   /url-join/0.0.1:
     resolution:
       { integrity: sha512-H6dnQ/yPAAVzMQRvEvyz01hhfQL5qRWSEt7BX8t9DqnPw9BjMb64fjIRq76Uvf1hkHp+mTZvEVJ5guXOT0Xqaw== }
     dev: false
     optional: true
 
+  /url-loader/4.1.1_lit45vopotvaqup7lrvlnvtxwy:
+    resolution:
+      { integrity: sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA== }
+    engines: { node: '>= 10.13.0' }
+    peerDependencies:
+      file-loader: '*'
+      webpack: ^4.0.0 || ^5.0.0
+    peerDependenciesMeta:
+      file-loader:
+        optional: true
+    dependencies:
+      file-loader: 6.2.0_webpack@4.46.0
+      loader-utils: 2.0.2
+      mime-types: 2.1.35
+      schema-utils: 3.1.1
+      webpack: 4.46.0
+    dev: true
+
   /url/0.10.3:
     resolution:
       { integrity: sha512-hzSUW2q06EqL1gKM/a+obYHLIO6ct2hwPuviqTTOcfFVc61UbfJ2Q32+uGL/HCPxKqrdGB5QUwIe7UqlDgwsOQ== }
@@ -15543,13 +23932,32 @@ packages:
     dependencies:
       punycode: 1.3.2
       querystring: 0.2.0
-    dev: false
-    optional: true
+
+  /use/3.1.1:
+    resolution:
+      { integrity: sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ== }
+    engines: { node: '>=0.10.0' }
+    dev: true
 
   /util-deprecate/1.0.2:
     resolution:
       { integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw== }
 
+  /util.promisify/1.0.0:
+    resolution:
+      { integrity: sha512-i+6qA2MPhvoKLuxnJNpXAGhg7HphQOSUq2LKMZD0m15EiskXUkMvKdF4Uui0WYeCUGea+o2cw/ZuwehtfsrNkA== }
+    dependencies:
+      define-properties: 1.1.4
+      object.getownpropertydescriptors: 2.1.4
+    dev: true
+
+  /util/0.10.3:
+    resolution:
+      { integrity: sha512-5KiHfsmkqacuKjkRkdV7SsfDJ2EGiPsK92s2MhNSY0craxjTdKTtqKsJaCWp4LW33ZZ0OPUv1WO/TFvNQRiQxQ== }
+    dependencies:
+      inherits: 2.0.1
+    dev: true
+
   /util/0.10.4:
     resolution:
       { integrity: sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A== }
@@ -15557,6 +23965,13 @@ packages:
       inherits: 2.0.3
     dev: true
 
+  /util/0.11.1:
+    resolution:
+      { integrity: sha512-HShAsny+zS2TZfaXxD9tYj4HQGlBezXZMZuM/S5PKLLoZkShZiGk9o5CzukI1LVHZvjdvZ2Sj1aW/Ndn2NB/HQ== }
+    dependencies:
+      inherits: 2.0.3
+    dev: true
+
   /util/0.12.4:
     resolution:
       { integrity: sha512-bxZ9qtSlGUWSOy9Qa9Xgk11kSslpuZwaxCg4sNIDj6FLucDab2JxnHwyNTCpHMtK1MjoQiWQ6DiUMZYbSrO+Sw== }
@@ -15569,16 +23984,35 @@ packages:
       which-typed-array: 1.1.8
     dev: false
 
+  /utila/0.4.0:
+    resolution:
+      { integrity: sha512-Z0DbgELS9/L/75wZbro8xAnT50pBVFQZ+hUEueGDU5FN51YSCYM+jdxsfCiHjwNP/4LCDD0i/graKpeBnOXKRA== }
+    dev: true
+
   /utils-merge/1.0.1:
     resolution:
       { integrity: sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA== }
     engines: { node: '>= 0.4.0' }
 
+  /uuid-browser/3.1.0:
+    resolution:
+      { integrity: sha512-dsNgbLaTrd6l3MMxTtouOCFw4CBFc/3a+GgYA2YyrJvyQ1u6q4pcu3ktLoUZ/VN/Aw9WsauazbgsgdfVWgAKQg== }
+    dev: true
+
   /uuid-validate/0.0.3:
     resolution:
       { integrity: sha512-Fykw5U4eZESbq739BeLvEBFRuJODfrlmjx5eJux7W817LjRaq4b7/i4t2zxQmhcX+fAj4nMfRdTzO4tmwLKn0w== }
     dev: false
 
+  /uuid/3.4.0:
+    resolution:
+      { integrity: sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A== }
+    deprecated:
+      Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is
+      known to be problematic.  See https://v8.dev/blog/math-random for details.
+    hasBin: true
+    dev: true
+
   /uuid/8.0.0:
     resolution:
       { integrity: sha512-jOXGuXZAWdsTH7eZLtyXMqUb9EcWMGZNbL9YcGBJl4MH4nrxHmZJhEHvyLFrkxo+28uLb/NYRcStH48fnD0Vzw== }
@@ -15615,7 +24049,7 @@ packages:
       { integrity: sha512-74Y4LqY74kLE6IFyIjPtkSTWzUZmj8tdHT9Ii/26dvQ6K9Dl2NbEfj0XgU2sHCtKgt5VupqhlO/5aWuqS+IY1w== }
     engines: { node: '>=10.12.0' }
     dependencies:
-      '@jridgewell/trace-mapping': 0.3.14
+      '@jridgewell/trace-mapping': 0.3.15
       '@types/istanbul-lib-coverage': 2.0.4
       convert-source-map: 1.8.0
     dev: true
@@ -15661,6 +24095,29 @@ packages:
       extsprintf: 1.4.1
     dev: false
 
+  /vfile-location/3.2.0:
+    resolution:
+      { integrity: sha512-aLEIZKv/oxuCDZ8lkJGhuhztf/BW4M+iHdCwglA/eWc+vtuRFJj8EtgceYFX4LRjOhCAAiNHsKGssC6onJ+jbA== }
+    dev: true
+
+  /vfile-message/2.0.4:
+    resolution:
+      { integrity: sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ== }
+    dependencies:
+      '@types/unist': 2.0.6
+      unist-util-stringify-position: 2.0.3
+    dev: true
+
+  /vfile/4.2.1:
+    resolution:
+      { integrity: sha512-O6AE4OskCG5S1emQ/4gl8zK586RqA3srz3nfK/Viy0UPToBc5Trp9BVFb1u0CjsKrAWwnpr4ifM/KBXPWwJbCA== }
+    dependencies:
+      '@types/unist': 2.0.6
+      is-buffer: 2.0.5
+      unist-util-stringify-position: 2.0.3
+      vfile-message: 2.0.4
+    dev: true
+
   /vite-plugin-vue-markdown/0.1.1_vite@2.9.9:
     resolution:
       { integrity: sha512-A68hNB46N6+do20LJz5HjEOegdAeSNRSivE2VhGwoNxV/v9ShqS/pXv2ENoifFWClqqD+j4pf3pjCaYFGR+74w== }
@@ -15675,6 +24132,30 @@ packages:
       vite: 2.9.9_sass@1.43.4
     dev: true
 
+  /vite/2.9.9:
+    resolution:
+      { integrity: sha512-ffaam+NgHfbEmfw/Vuh6BHKKlI/XIAhxE5QSS7gFLIngxg171mg1P3a4LSRME0z2ZU1ScxoKzphkipcYwSD5Ew== }
+    engines: { node: '>=12.2.0' }
+    hasBin: true
+    peerDependencies:
+      less: '*'
+      sass: '*'
+      stylus: '*'
+    peerDependenciesMeta:
+      less:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+    dependencies:
+      esbuild: 0.14.49
+      postcss: 8.4.14
+      resolve: 1.22.1
+      rollup: 2.77.0
+    optionalDependencies:
+      fsevents: 2.3.2
+
   /vite/2.9.9_sass@1.43.4:
     resolution:
       { integrity: sha512-ffaam+NgHfbEmfw/Vuh6BHKKlI/XIAhxE5QSS7gFLIngxg171mg1P3a4LSRME0z2ZU1ScxoKzphkipcYwSD5Ew== }
@@ -15758,6 +24239,48 @@ packages:
       fsevents: 2.3.2
     dev: true
 
+  /vitest/0.18.1_4dctpwuq6wm6e2nilfwb6wz7rm:
+    resolution:
+      { integrity: sha512-4F/1K/Vn4AvJwe7i2YblR02PT5vMKcw9KN4unDq2KD0YcSxX0B/6D6Qu9PJaXwVuxXMFTQ5ovd4+CQaW3bwofA== }
+    engines: { node: '>=v14.16.0' }
+    hasBin: true
+    peerDependencies:
+      '@edge-runtime/vm': '*'
+      '@vitest/ui': '*'
+      c8: '*'
+      happy-dom: '*'
+      jsdom: '*'
+    peerDependenciesMeta:
+      '@edge-runtime/vm':
+        optional: true
+      '@vitest/ui':
+        optional: true
+      c8:
+        optional: true
+      happy-dom:
+        optional: true
+      jsdom:
+        optional: true
+    dependencies:
+      '@types/chai': 4.3.1
+      '@types/chai-subset': 1.3.3
+      '@types/node': 18.0.4
+      '@vitest/ui': 0.22.1
+      c8: 7.12.0
+      chai: 4.3.6
+      debug: 4.3.4
+      local-pkg: 0.4.2
+      tinypool: 0.2.4
+      tinyspy: 1.0.0
+      vite: 3.0.2
+    transitivePeerDependencies:
+      - less
+      - sass
+      - stylus
+      - supports-color
+      - terser
+    dev: true
+
   /vitest/0.18.1_c8@7.12.0:
     resolution:
       { integrity: sha512-4F/1K/Vn4AvJwe7i2YblR02PT5vMKcw9KN4unDq2KD0YcSxX0B/6D6Qu9PJaXwVuxXMFTQ5ovd4+CQaW3bwofA== }
@@ -15841,6 +24364,11 @@ packages:
       - terser
     dev: true
 
+  /vm-browserify/1.1.2:
+    resolution:
+      { integrity: sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ== }
+    dev: true
+
   /vm2/3.9.10:
     resolution:
       { integrity: sha512-AuECTSvwu2OHLAZYhG716YzwodKCIJxB6u1zG7PgSQwIgAlEaoXH52bxdcvT8GkGjnYK7r7yWDW0m0sOsPuBjQ== }
@@ -15851,6 +24379,12 @@ packages:
       acorn-walk: 8.2.0
     dev: false
 
+  /void-elements/3.1.0:
+    resolution:
+      { integrity: sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w== }
+    engines: { node: '>=0.10.0' }
+    dev: true
+
   /vt-pbf/3.1.3:
     resolution:
       { integrity: sha512-2LzDFzt0mZKZ9IpVF2r69G9bXaP2Q2sArJCmcCgvfTdCCZzSyz4aCLoQyUilu37Ll56tCblIZrXFIjNUpGIlmA== }
@@ -15876,7 +24410,45 @@ packages:
       vue: 3.2.36
     dev: true
 
-  /vue-eslint-parser/9.0.3_eslint@8.19.0:
+  /vue-docgen-api/4.52.0_vue@3.2.37:
+    resolution:
+      { integrity: sha512-2HSt9KLQ/ehJiwV4+6LgOjRqzh37vtUv6sKhSIp3CAPlwSd4/Bq2uvbs0+GJxdfrMnVquwY5DOavgNSEHsPA2w== }
+    dependencies:
+      '@babel/parser': 7.18.8
+      '@babel/types': 7.18.13
+      '@vue/compiler-dom': 3.2.37
+      '@vue/compiler-sfc': 3.2.37
+      ast-types: 0.14.2
+      hash-sum: 1.0.2
+      lru-cache: 4.1.5
+      pug: 3.0.2
+      recast: 0.21.1
+      ts-map: 1.0.3
+      vue-inbrowser-compiler-independent-utils: 4.52.0_vue@3.2.37
+    transitivePeerDependencies:
+      - vue
+    dev: true
+
+  /vue-docgen-loader/1.5.1_sx2vwv4fhewfcfcbfmmreozr6y:
+    resolution:
+      { integrity: sha512-coMmQYsg+fy18SVtBNU7/tztdqEyrneFfwQFLmx8O7jaJ11VZ//9tRWXlwGzJM07cPRwMHDKMlAdWrpuw3U46A== }
+    engines: { node: '>= 8.16' }
+    peerDependencies:
+      vue-docgen-api: '>=3'
+      webpack: '>=4'
+    dependencies:
+      clone: 2.1.2
+      jscodeshift: 0.13.1_@babel+preset-env@7.16.11
+      loader-utils: 1.4.0
+      querystring: 0.2.0
+      vue-docgen-api: 4.52.0_vue@3.2.37
+      webpack: 5.72.0
+    transitivePeerDependencies:
+      - '@babel/preset-env'
+      - supports-color
+    dev: true
+
+  /vue-eslint-parser/9.0.3_eslint@8.23.0:
     resolution:
       { integrity: sha512-yL+ZDb+9T0ELG4VIFo/2anAOz8SvBdlqEnQnvJ3M7Scq56DvtjY0VY88bByRZB0D4J0u8olBcfrXTVONXsh4og== }
     engines: { node: ^14.17.0 || >=16.0.0 }
@@ -15884,10 +24456,10 @@ packages:
       eslint: '>=6.0.0'
     dependencies:
       debug: 4.3.4
-      eslint: 8.19.0
+      eslint: 8.23.0
       eslint-scope: 7.1.1
       eslint-visitor-keys: 3.3.0
-      espree: 9.3.2
+      espree: 9.4.0
       esquery: 1.4.0
       lodash: 4.17.21
       semver: 7.3.7
@@ -15908,6 +24480,50 @@ packages:
       '@vue/devtools-api': 6.2.1
       vue: 3.2.36
 
+  /vue-i18n/9.1.10_vue@3.2.37:
+    resolution:
+      { integrity: sha512-jpr7gV5KPk4n+sSPdpZT8Qx3XzTcNDWffRlHV/cT2NUyEf+sEgTTmLvnBAibjOFJ0zsUyZlVTAWH5DDnYep+1g== }
+    engines: { node: '>= 10' }
+    peerDependencies:
+      vue: ^3.0.0
+    dependencies:
+      '@intlify/core-base': 9.1.10
+      '@intlify/shared': 9.1.10
+      '@intlify/vue-devtools': 9.1.10
+      '@vue/devtools-api': 6.2.1
+      vue: 3.2.37
+    dev: false
+
+  /vue-inbrowser-compiler-independent-utils/4.52.0_vue@3.2.37:
+    resolution:
+      { integrity: sha512-r09DtBbHbCO/5Ns0UofB/orwX7pYaAJW12+c/cy4brTF06oeng6QbxX0XziiepMyf9E9q/lLa4gk8hlhmG4Zww== }
+    peerDependencies:
+      vue: '>=2'
+    dependencies:
+      vue: 3.2.37
+    dev: true
+
+  /vue-loader/16.8.3_6oodguqmvfajneapkegdgbg6h4:
+    resolution:
+      { integrity: sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA== }
+    peerDependencies:
+      '@vue/compiler-sfc': ^3.0.8
+      vue: ^3.2.13
+      webpack: ^4.1.0 || ^5.0.0-0
+    peerDependenciesMeta:
+      '@vue/compiler-sfc':
+        optional: true
+      vue:
+        optional: true
+    dependencies:
+      '@vue/compiler-sfc': 3.2.31
+      chalk: 4.1.2
+      hash-sum: 2.0.0
+      loader-utils: 2.0.2
+      vue: 3.2.37
+      webpack: 5.72.0
+    dev: true
+
   /vue-router/4.0.15_vue@3.2.36:
     resolution:
       { integrity: sha512-xa+pIN9ZqORdIW1MkN2+d9Ui2pCM1b/UMgwYUCZOiFYHAvz/slKKBDha8DLrh5aCG/RibtrpyhKjKOZ85tYyWg== }
@@ -15917,6 +24533,27 @@ packages:
       '@vue/devtools-api': 6.2.1
       vue: 3.2.36
 
+  /vue-router/4.0.15_vue@3.2.37:
+    resolution:
+      { integrity: sha512-xa+pIN9ZqORdIW1MkN2+d9Ui2pCM1b/UMgwYUCZOiFYHAvz/slKKBDha8DLrh5aCG/RibtrpyhKjKOZ85tYyWg== }
+    peerDependencies:
+      vue: ^3.2.0
+    dependencies:
+      '@vue/devtools-api': 6.2.1
+      vue: 3.2.37
+    dev: false
+
+  /vue-tsc/0.34.17_typescript@4.5.2:
+    resolution:
+      { integrity: sha512-jzUXky44ZLHC4daaJag7FQr3idlPYN719/K1eObGljz5KaS2UnVGTU/XSYCd7d6ampYYg4OsyalbHyJIxV0aEQ== }
+    hasBin: true
+    peerDependencies:
+      typescript: '*'
+    dependencies:
+      '@volar/vue-typescript': 0.34.17
+      typescript: 4.5.2
+    dev: true
+
   /vue/3.2.36:
     resolution:
       { integrity: sha512-5yTXmrE6gW8IQgttzHW5bfBiFA6mx35ZXHjGLDmKYzW6MMmYvCwuKybANRepwkMYeXw2v1buGg3/lPICY5YlZw== }
@@ -15927,6 +24564,16 @@ packages:
       '@vue/server-renderer': 3.2.36_vue@3.2.36
       '@vue/shared': 3.2.36
 
+  /vue/3.2.37:
+    resolution:
+      { integrity: sha512-bOKEZxrm8Eh+fveCqS1/NkG/n6aMidsI6hahas7pa0w/l7jkbssJVsRhVDs07IdDq7h9KHswZOgItnwJAgtVtQ== }
+    dependencies:
+      '@vue/compiler-dom': 3.2.37
+      '@vue/compiler-sfc': 3.2.37
+      '@vue/runtime-dom': 3.2.37
+      '@vue/server-renderer': 3.2.37_vue@3.2.37
+      '@vue/shared': 3.2.37
+
   /vuedraggable/4.1.0_vue@3.2.36:
     resolution:
       { integrity: sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww== }
@@ -15959,6 +24606,39 @@ packages:
       makeerror: 1.0.12
     dev: true
 
+  /watchpack-chokidar2/2.0.1:
+    resolution:
+      { integrity: sha512-nCFfBIPKr5Sh61s4LPpy1Wtfi0HE8isJ3d2Yb5/Ppw2P2B/3eVSEBjKfN0fmHJSK14+31KwMKmcrzs2GM4P0Ww== }
+    requiresBuild: true
+    dependencies:
+      chokidar: 2.1.8
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+    optional: true
+
+  /watchpack/1.7.5:
+    resolution:
+      { integrity: sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ== }
+    dependencies:
+      graceful-fs: 4.2.10
+      neo-async: 2.6.2
+    optionalDependencies:
+      chokidar: 3.5.3
+      watchpack-chokidar2: 2.0.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /watchpack/2.4.0:
+    resolution:
+      { integrity: sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg== }
+    engines: { node: '>=10.13.0' }
+    dependencies:
+      glob-to-regexp: 0.4.1
+      graceful-fs: 4.2.10
+    dev: true
+
   /wcwidth/1.0.1:
     resolution:
       { integrity: sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg== }
@@ -15966,6 +24646,11 @@ packages:
       defaults: 1.0.3
     dev: false
 
+  /web-namespaces/1.1.4:
+    resolution:
+      { integrity: sha512-wYxSGajtmoP4WxfejAPIr4l0fVh+jeMXZb08wNc0tMg6xsfZXj3cECqIK0G7ZAqUq0PP8WlMDtaOGVBTAWztNw== }
+    dev: true
+
   /web-streams-polyfill/3.2.1:
     resolution:
       { integrity: sha512-e0MO3wdXWKrLbL0DgGnUV7WHVuw9OUvL4hjgnPkIeEvESk74gAITi5G606JtZPp39cd8HA9VQzCIvA49LpPN5Q== }
@@ -15995,6 +24680,49 @@ packages:
     engines: { node: '>=12' }
     dev: true
 
+  /webpack-dev-middleware/3.7.3_webpack@4.46.0:
+    resolution:
+      { integrity: sha512-djelc/zGiz9nZj/U7PTBi2ViorGJXEWo/3ltkPbDyxCXhhEXkW0ce99falaok4TPj+AsxLiXJR0EBOb0zh9fKQ== }
+    engines: { node: '>= 6' }
+    peerDependencies:
+      webpack: ^4.0.0 || ^5.0.0
+    dependencies:
+      memory-fs: 0.4.1
+      mime: 2.6.0
+      mkdirp: 0.5.6
+      range-parser: 1.2.1
+      webpack: 4.46.0
+      webpack-log: 2.0.0
+    dev: true
+
+  /webpack-filter-warnings-plugin/1.2.1_webpack@4.46.0:
+    resolution:
+      { integrity: sha512-Ez6ytc9IseDMLPo0qCuNNYzgtUl8NovOqjIq4uAU8LTD4uoa1w1KpZyyzFtLTEMZpkkOkLfL9eN+KGYdk1Qtwg== }
+    engines: { node: '>= 4.3 < 5.0.0 || >= 5.10' }
+    peerDependencies:
+      webpack: ^2.0.0 || ^3.0.0 || ^4.0.0
+    dependencies:
+      webpack: 4.46.0
+    dev: true
+
+  /webpack-hot-middleware/2.25.2:
+    resolution:
+      { integrity: sha512-CVgm3NAQyfdIonRvXisRwPTUYuSbyZ6BY7782tMeUzWOO7RmVI2NaBYuCp41qyD4gYCkJyTneAJdK69A13B0+A== }
+    dependencies:
+      ansi-html-community: 0.0.8
+      html-entities: 2.3.2
+      strip-ansi: 6.0.1
+    dev: true
+
+  /webpack-log/2.0.0:
+    resolution:
+      { integrity: sha512-cX8G2vR/85UYG59FgkoMamwHUIkSSlV3bBMRsbxVXVUk2j6NleCKjQ/WE9eYg9WY4w25O9w8wKP4rzNZFmUcUg== }
+    engines: { node: '>= 6' }
+    dependencies:
+      ansi-colors: 3.2.4
+      uuid: 3.4.0
+    dev: true
+
   /webpack-merge/5.8.0:
     resolution:
       { integrity: sha512-/SaI7xY0831XwP6kzuwhKWVKDP9t1QY1h65lAFLbZqMPIuYcD9QAW4u9STIbU9kaJbPBB/geU/gLr1wDjOhQ+Q== }
@@ -16005,6 +24733,111 @@ packages:
     dev: false
     optional: true
 
+  /webpack-sources/1.4.3:
+    resolution:
+      { integrity: sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ== }
+    dependencies:
+      source-list-map: 2.0.1
+      source-map: 0.6.1
+    dev: true
+
+  /webpack-sources/3.2.3:
+    resolution:
+      { integrity: sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w== }
+    engines: { node: '>=10.13.0' }
+    dev: true
+
+  /webpack-virtual-modules/0.2.2:
+    resolution:
+      { integrity: sha512-kDUmfm3BZrei0y+1NTHJInejzxfhtU8eDj2M7OKb2IWrPFAeO1SOH2KuQ68MSZu9IGEHcxbkKKR1v18FrUSOmA== }
+    dependencies:
+      debug: 3.2.7
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /webpack/4.46.0:
+    resolution:
+      { integrity: sha512-6jJuJjg8znb/xRItk7bkT0+Q7AHCYjjFnvKIWQPkNIOyRqoCGvkOs0ipeQzrqz4l5FtN5ZI/ukEHroeX/o1/5Q== }
+    engines: { node: '>=6.11.5' }
+    hasBin: true
+    peerDependencies:
+      webpack-cli: '*'
+      webpack-command: '*'
+    peerDependenciesMeta:
+      webpack-cli:
+        optional: true
+      webpack-command:
+        optional: true
+    dependencies:
+      '@webassemblyjs/ast': 1.9.0
+      '@webassemblyjs/helper-module-context': 1.9.0
+      '@webassemblyjs/wasm-edit': 1.9.0
+      '@webassemblyjs/wasm-parser': 1.9.0
+      acorn: 6.4.2
+      ajv: 6.12.6
+      ajv-keywords: 3.5.2_ajv@6.12.6
+      chrome-trace-event: 1.0.3
+      enhanced-resolve: 4.5.0
+      eslint-scope: 4.0.3
+      json-parse-better-errors: 1.0.2
+      loader-runner: 2.4.0
+      loader-utils: 1.4.0
+      memory-fs: 0.4.1
+      micromatch: 3.1.10
+      mkdirp: 0.5.6
+      neo-async: 2.6.2
+      node-libs-browser: 2.2.1
+      schema-utils: 1.0.0
+      tapable: 1.1.3
+      terser-webpack-plugin: 1.4.5_webpack@4.46.0
+      watchpack: 1.7.5
+      webpack-sources: 1.4.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /webpack/5.72.0:
+    resolution:
+      { integrity: sha512-qmSmbspI0Qo5ld49htys8GY9XhS9CGqFoHTsOVAnjBdg0Zn79y135R+k4IR4rKK6+eKaabMhJwiVB7xw0SJu5w== }
+    engines: { node: '>=10.13.0' }
+    hasBin: true
+    peerDependencies:
+      webpack-cli: '*'
+    peerDependenciesMeta:
+      webpack-cli:
+        optional: true
+    dependencies:
+      '@types/eslint-scope': 3.7.4
+      '@types/estree': 0.0.51
+      '@webassemblyjs/ast': 1.11.1
+      '@webassemblyjs/wasm-edit': 1.11.1
+      '@webassemblyjs/wasm-parser': 1.11.1
+      acorn: 8.7.1
+      acorn-import-assertions: 1.8.0_acorn@8.7.1
+      browserslist: 4.21.2
+      chrome-trace-event: 1.0.3
+      enhanced-resolve: 5.10.0
+      es-module-lexer: 0.9.3
+      eslint-scope: 5.1.1
+      events: 3.3.0
+      glob-to-regexp: 0.4.1
+      graceful-fs: 4.2.10
+      json-parse-better-errors: 1.0.2
+      loader-runner: 4.3.0
+      mime-types: 2.1.35
+      neo-async: 2.6.2
+      schema-utils: 3.1.1
+      tapable: 2.2.1
+      terser-webpack-plugin: 5.3.6_webpack@5.72.0
+      watchpack: 2.4.0
+      webpack-sources: 3.2.3
+    transitivePeerDependencies:
+      - '@swc/core'
+      - esbuild
+      - uglify-js
+    dev: true
+
   /wellknown/0.5.0:
     resolution:
       { integrity: sha512-za5vTLuPF9nmrVOovYQwNEWE/PwJCM+yHMAj4xN1WWUvtq9OElsvKiPL0CR9rO8xhrYqL7NpI7IknqR8r6eYOg== }
@@ -16111,18 +24944,56 @@ packages:
     dependencies:
       string-width: 4.2.3
 
+  /widest-line/3.1.0:
+    resolution:
+      { integrity: sha512-NsmoXalsWVDMGupxZ5R08ka9flZjjiLvHVAWYOKtiKM8ujtZWr9cRffak+uSE48+Ob8ObalXpwyeUiyDD6QFgg== }
+    engines: { node: '>=8' }
+    dependencies:
+      string-width: 4.2.3
+    dev: true
+
   /wildcard/2.0.0:
     resolution:
       { integrity: sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw== }
     dev: false
     optional: true
 
+  /with/7.0.2:
+    resolution:
+      { integrity: sha512-RNGKj82nUPg3g5ygxkQl0R937xLyho1J24ItRCBTr/m1YnZkzJy1hUiHUJrc/VlsDQzsCnInEGSg3bci0Lmd4w== }
+    engines: { node: '>= 10.0.0' }
+    dependencies:
+      '@babel/parser': 7.18.13
+      '@babel/types': 7.18.13
+      assert-never: 1.2.1
+      babel-walk: 3.0.0-canary-5
+    dev: true
+
   /word-wrap/1.2.3:
     resolution:
       { integrity: sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ== }
     engines: { node: '>=0.10.0' }
     dev: true
 
+  /wordwrap/1.0.0:
+    resolution:
+      { integrity: sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q== }
+    dev: true
+
+  /worker-farm/1.7.0:
+    resolution:
+      { integrity: sha512-rvw3QTZc8lAxyVrqcSGVm5yP/IJ2UcB3U0graE3LCFoZ0Yn2x4EoVSqJKdB/T5M+FLcRPjz4TDacRf3OCfNUzw== }
+    dependencies:
+      errno: 0.1.8
+    dev: true
+
+  /worker-rpc/0.1.1:
+    resolution:
+      { integrity: sha512-P1WjMrUB3qgJNI9jfmpZ/htmBEjFh//6l/5y8SD9hg1Ef5zTTVVoRjTrTEzPrNBQvmhMxkoTsjOXN10GWU7aCg== }
+    dependencies:
+      microevent.ts: 0.1.1
+    dev: true
+
   /wrap-ansi/3.0.1:
     resolution:
       { integrity: sha512-iXR3tDXpbnTpzjKSylUJRkLuOrEC7hwEB221cgn6wtF8wpmz28puFXAEfPT5zrjM3wahygB//VuWEr1vTkDcNQ== }
@@ -16165,6 +25036,15 @@ packages:
     resolution:
       { integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ== }
 
+  /write-file-atomic/2.4.3:
+    resolution:
+      { integrity: sha512-GaETH5wwsX+GcnzhPgKcKjJ6M2Cq3/iZp1WyY/X1CSqrW+jVNM9Y7D8EC2sM4ZG/V8wZlSniJnCKWPmBYAucRQ== }
+    dependencies:
+      graceful-fs: 4.2.10
+      imurmurhash: 0.1.4
+      signal-exit: 3.0.7
+    dev: true
+
   /write-file-atomic/3.0.3:
     resolution:
       { integrity: sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q== }
@@ -16174,10 +25054,10 @@ packages:
       signal-exit: 3.0.7
       typedarray-to-buffer: 3.1.5
 
-  /write-file-atomic/4.0.1:
+  /write-file-atomic/4.0.2:
     resolution:
-      { integrity: sha512-nSKUxgAbyioruk6hU87QzVbY279oYT6uiwgDoujth2ju4mJ+TZau7SQBhtbTmUyuNYTuXnSyRn66FV0+eCgcrQ== }
-    engines: { node: ^12.13.0 || ^14.15.0 || >=16 }
+      { integrity: sha512-7KxauUdBmSdWnmpaGFg+ppNjKF8uNLry8LyzjauQDOVONfFLNKrKvQOxZ/VuTIcS/gge/YNahf5RIIQWTSarlg== }
+    engines: { node: ^12.13.0 || ^14.15.0 || >=16.0.0 }
     dependencies:
       imurmurhash: 0.1.4
       signal-exit: 3.0.7
@@ -16211,6 +25091,28 @@ packages:
         optional: true
     dev: true
 
+  /ws/8.8.1:
+    resolution:
+      { integrity: sha512-bGy2JzvzkPowEJV++hF07hAD6niYSr0JzBNo/J29WsB57A2r7Wlc1UFcTR9IzrPvuNVO4B8LGqF8qcpsVOhJCA== }
+    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
+    dev: true
+
+  /x-default-browser/0.4.0:
+    resolution:
+      { integrity: sha512-7LKo7RtWfoFN/rHx1UELv/2zHGMx8MkZKDq1xENmOCTkfIqZJ0zZ26NEJX8czhnPXVcqS0ARjjfJB+eJ0/5Cvw== }
+    hasBin: true
+    optionalDependencies:
+      default-browser-id: 1.0.4
+    dev: true
+
   /xdg-basedir/4.0.0:
     resolution:
       { integrity: sha512-PSNhEJDejZYV7h50BohL09Er9VaIefr2LMAf3OEmpCkjOi34eYyQYAXUTjEQtZJTKcF0E2UKTh+osDLsgNim9Q== }
@@ -16281,6 +25183,16 @@ packages:
     engines: { node: '>=10' }
     dev: true
 
+  /yallist/2.1.2:
+    resolution:
+      { integrity: sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A== }
+    dev: true
+
+  /yallist/3.1.1:
+    resolution:
+      { integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g== }
+    dev: true
+
   /yallist/4.0.0:
     resolution:
       { integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A== }
@@ -16289,7 +25201,6 @@ packages:
     resolution:
       { integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg== }
     engines: { node: '>= 6' }
-    dev: false
 
   /yaml/2.1.1:
     resolution:
@@ -16320,9 +25231,9 @@ packages:
     engines: { node: '>=10' }
     dev: true
 
-  /yargs-parser/21.0.1:
+  /yargs-parser/21.1.1:
     resolution:
-      { integrity: sha512-9BK1jFpLzJROCI5TzwZL/TU4gqjK5xiHV/RfWLOahrjAko/e4DJkRDZQXfvqAsiZzzYhgAzbgz6lg48jcm4GLg== }
+      { integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw== }
     engines: { node: '>=12' }
     dev: true
 
@@ -16385,7 +25296,7 @@ packages:
       require-directory: 2.1.1
       string-width: 4.2.3
       y18n: 5.0.8
-      yargs-parser: 21.0.1
+      yargs-parser: 21.1.1
     dev: true
 
   /yn/3.1.1:
@@ -16398,3 +25309,8 @@ packages:
     resolution:
       { integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q== }
     engines: { node: '>=10' }
+
+  /zwitch/1.0.5:
+    resolution:
+      { integrity: sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw== }
+    dev: true