diff --git a/packages/docs/.gitignore b/packages/docs/.gitignore
index 9ffd1aef9d..22d86c753b 100644
--- a/packages/docs/.gitignore
+++ b/packages/docs/.gitignore
@@ -7,3 +7,4 @@ node_modules
 .env
 dist
 page-config/getting-started/tree-shaking/tree-shaking.md
+public/vuestic-out
\ No newline at end of file
diff --git a/packages/docs/components/Play.client.vue b/packages/docs/components/Play.client.vue
new file mode 100644
index 0000000000..7b36cb244f
--- /dev/null
+++ b/packages/docs/components/Play.client.vue
@@ -0,0 +1,220 @@
+<script setup lang="ts">
+import { Repl, ReplStore, ReplProps } from '@vue/repl'
+import Editor from '@vue/repl/codemirror-editor'
+import '@vue/repl/style.css'
+import { PropType } from 'vue';
+
+const props = defineProps({
+  code: {
+    type: String,
+    default: ''
+  },
+  state: {
+    type: String,
+    default: ''
+  },
+  dependencies: {
+    type: Object as PropType<Record<`${string}.${'js'|'css'|'mjs'}`, string>>,
+    default: () => ({})
+  }
+})
+
+
+const store = new ReplStore({
+  showOutput: false,
+  serializedState: props.state.replace('#', ''),
+})
+
+const normalizeCode = (code: string) => {
+  return code.replace('<style lang="scss"', '<style')
+}
+
+const code = computed(() => {
+  return normalizeCode(props.code) || '<template>\n  <div>Hello world</div>\n</template>'
+})
+
+const setFiles = () => {
+  store.setImportMap({
+    imports: {
+      // Default path to vue to jsdlvr cdn
+      ...store.getImportMap().imports,
+      'vuestic-ui': window.location.origin + '/vuestic-out/main.js',
+    },
+  })
+
+  if (code.value && !props.state) {
+    store.setFiles({
+      ...store.getFiles(),
+      'App.vue': code.value,
+    })
+  }
+}
+
+watch(code, setFiles)
+
+setFiles()
+
+const emit = defineEmits(['update:state'])
+watchEffect(() => {
+  emit('update:state', store.serialize())
+})
+
+const { currentPresetName } = useColors()
+const normalizePresetName = (presetName: string) => {
+  if (['dark', 'light'].includes(presetName)) {
+    return presetName
+  }
+
+  return 'light'
+}
+
+const dependenciesCSSCode = computed(() => {
+  return Object.entries(props.dependencies)
+    .map(([key, url]) => {
+      const extension = url.split('.').pop()
+      if (extension === 'css') {
+        return `<link rel="stylesheet" href="${url}">`
+      }
+      return ''
+    })
+    .filter(Boolean)
+    .join('\n')
+})
+
+// eslint-disable-next-line no-useless-escape
+const TAILWIND_CDN = '<script src="https://cdn.tailwindcss.com"><\/script>'
+const previewOptions = computed<ReplProps['previewOptions']>(() => ({
+  headHTML: `
+    <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&family=Source+Sans+Pro:wght@400;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link rel="stylesheet" href="${window.location.origin + '/vuestic-out/style.css'}">
+    <style>
+      body {
+        padding: 1rem;
+      }
+    </style>
+    ${TAILWIND_CDN}
+    ${dependenciesCSSCode.value}
+  `,
+  customCode: {
+    importCode: `
+      import { createVuestic } from "vuestic-ui";
+    `,
+    useCode: `
+      app.use(createVuestic({
+        config: {
+          colors: {
+            currentPresetName: ${JSON.stringify(normalizePresetName(currentPresetName.value))},
+          }
+        }
+      }))
+    `
+  }
+}))
+
+const { getTextColor, colors } = useColors();
+
+const codeRed = computed(() =>
+  getTextColor(colors.backgroundSecondary, "#c02d2e", "#FF006E")
+);
+const codeGreen = computed(() =>
+  getTextColor(colors.backgroundSecondary, "#54790d", "#7EBD00")
+);
+const codeCyan = computed(() =>
+  getTextColor(colors.backgroundSecondary, "#015692", "#00AFFA")
+);
+const codeOrange = computed(() =>
+  getTextColor(colors.backgroundSecondary, "#b75501", "#FC834A")
+);
+const codeGray = computed(() =>
+  getTextColor(colors.backgroundSecondary, "#656e77", "#A0A6B6")
+);
+</script>
+
+<template>
+  <Repl
+    :key="currentPresetName"
+    class="vuestic-repl"
+    :editor="Editor"
+    :store="store"
+    :preview-options="previewOptions"
+    :clear-console="false"
+    @keydown.ctrl.s.prevent
+    @keydown.meta.s.prevent
+  />
+</template>
+
+<style lang="scss">
+  .vue-repl {
+    height: 100%;
+
+    .tab-buttons, .file-selector {
+      display: none;
+    }
+
+    .editor-container .wrapper {
+      display: none;
+    }
+
+    &.vuestic-repl {
+      --bg: var(--va-background-primary);
+      --bg-soft: var(--va-background-secondary);
+      --border: var(--va-background-border);
+      --color-branding: var(--va-primary);
+
+      .output-container {
+        height: 100%;
+      }
+
+      .editor-container {
+        background: rgba(0, 0, 0, 0.02);
+        height: 100%;
+      }
+
+      .CodeMirror {
+        word-spacing: 4px;
+        color: currentColor;
+        background: none;
+        font-family:
+          Source Code Pro,
+          Consolas,
+          Monaco,
+          "Andale Mono",
+          "Ubuntu Mono",
+          monospace;
+        font-size: 0.9rem;
+        text-align: left;
+        white-space: pre;
+        word-break: normal;
+        word-wrap: normal;
+        line-height: 1.5;
+        tab-size: 4;
+        hyphens: none;
+        border-radius: 0.25rem;
+        --base: var(--va-text-primary);
+        --symbols: v-bind(codeGray),
+        --comment: v-bind(codeGray);
+        --keyword: v-bind(codeRed);
+        --variable: v-bind(codeGray);
+        --function: v-bind(codeOrange);
+        --string: v-bind(codeGreen);
+        --number: v-bind(codeOrange);
+        --tags: v-bind(codeRed);
+        --brackets: v-bind(codeCyan);
+        --qualifier: v-bind(codeOrange);
+        --important: v-bind(codeGreen);
+        --attribute: v-bind(codeCyan);
+        --property: v-bind(codeCyan);
+        --cursor: v-bind(colors.textPrimary);
+
+        .CodeMirror-selected {
+          opacity: 0.2;
+        }
+
+        .CodeMirror-line {
+          padding: 0 1rem;
+        }
+      }
+    }
+  }
+</style>
diff --git a/packages/docs/layouts/play.vue b/packages/docs/layouts/play.vue
new file mode 100644
index 0000000000..5c13263783
--- /dev/null
+++ b/packages/docs/layouts/play.vue
@@ -0,0 +1,130 @@
+<template>
+  <div
+    :key="isMounted + ''"
+  >
+    <div
+      v-if="!isMounted"
+      class="docs-layout__loader"
+    />
+    <VaLayout
+      :top="{ fixed: true, order: 2 }"
+      :left="{ fixed: true, absolute: breakpoints.smDown, overlay: breakpoints.smDown && isSidebarVisible, order: 1 }"
+      class="docs-layout docs-layout--play"
+      @left-overlay-click="isSidebarVisible = false"
+    >
+      <template #top>
+        <LayoutHeader
+          v-model:isSidebarVisible="isSidebarVisible"
+          v-model:isOptionsVisible="isOptionsVisible"
+        />
+      </template>
+
+      <template #left>
+        <LayoutSidebar
+          v-model:visible="isSidebarVisible"
+          :mobile="breakpoints.xs"
+        />
+      </template>
+
+      <template #content>
+        <main class="docs-layout__main-content h-full">
+          <article class="docs-layout__page-content !p-0 !max-w-full h-full">
+            <slot />
+          </article>
+        </main>
+      </template>
+    </VaLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useDocsScroll } from '../composables/useDocsScroll';
+import { useIsMounted } from 'vuestic-ui/src/composables/useIsMounted'
+
+const breakpoints = useBreakpoint()
+
+const isSidebarVisible = ref(false)
+const isOptionsVisible = ref(false)
+
+watch(() => breakpoints.smDown, (newValue: boolean) => {
+  isSidebarVisible.value = !newValue
+  isOptionsVisible.value = false
+})
+
+const { afterEach } = useRouter()
+const { scrollToElement } = useDocsScroll()
+afterEach(() => {
+  scrollToElement()
+  isSidebarVisible.value = !breakpoints.smDown
+  isOptionsVisible.value = false
+})
+
+onMounted(() => {
+  scrollToElement()
+  isSidebarVisible.value = !breakpoints.smDown
+})
+
+useHead({
+  link: [
+    { href: 'https://cdn.jsdelivr.net/npm/@mdi/font@5.9.55/css/materialdesignicons.min.css', rel: 'stylesheet' },
+    { href: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css', rel: 'stylesheet' },
+    { href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css", rel: "stylesheet" },
+  ],
+  script: [
+    { src: 'https://kit.fontawesome.com/5460c87b2a.js', crossorigin: 'anonymous' },
+    { src: 'https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js', type: 'module' },
+  ],
+})
+
+const isMounted = useIsMounted()
+</script>
+
+<style lang="scss">
+@import 'vuestic-ui/styles/resources';
+@import '@/assets/fonts-imports.scss';
+@import '@/assets/smart-grid.scss';
+// Need to import tailwind in layout, because otherwise Vuestic component's css will has a higher priority
+// @import '~/assets/css/tailwind.css';
+
+html {
+  font-family: var(--va-font-family);
+  color: var(--va-text-primary);
+  background: var(--va-background-primary);
+}
+
+.docs-layout--play.docs-layout {
+  font-family: var(--va-font-family);
+  min-height: 100vh;
+
+  &__loader {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 9999999;
+    background: var(--va-background-primary);
+  }
+
+  &__main-section {
+    display: flex;
+    flex-grow: 2;
+    overflow: auto;
+    position: relative;
+  }
+
+  &__main-content {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    background: var(--va-background-primary);
+  }
+
+  &__page-content {
+    width: 100%;
+    max-width: 100% !important;
+    box-sizing: border-box;
+    padding: 0 !important;
+  }
+}
+</style>
diff --git a/packages/docs/modules/page-config/blocks/example/example-footer.vue b/packages/docs/modules/page-config/blocks/example/example-footer.vue
index 40fefdb348..db2bf1f0d2 100644
--- a/packages/docs/modules/page-config/blocks/example/example-footer.vue
+++ b/packages/docs/modules/page-config/blocks/example/example-footer.vue
@@ -46,7 +46,51 @@
       <span class="docs-navigation__button__text">Open in GitHub</span>
     </VaButton>
 
+    <VaModal
+      v-if="doShowPlaygroundButton"
+      stateful
+      fullscreen
+      class="playground-modal"
+      hide-default-actions
+    >
+      <template #anchor="{ show }">
+        <VaButton
+          preset="secondary"
+          size="small"
+          class="docs-navigation__button"
+          color="secondary"
+          @click="show"
+        >
+          <VaIcon
+            class="docs-navigation__button__icon"
+            name="auto_fix_high"
+            size="13px"
+          />
+          <span class="docs-navigation__button__text">Playground</span>
+        </VaButton>
+      </template>
+
+      <ClientOnly>
+        <Play
+          v-model:state="sandboxState"
+          class="h-full border-b-2 border-[var(--va-background-border)]"
+          :code="code"
+        />
+      </ClientOnly>
+
+      <template #footer="{ ok }">
+        <div class="flex gap-2 w-full px-5">
+          <VaInput v-if="$vaBreakpoint.smUp" :model-value="shareLink" label="Sandbox link" inner-label class="flex-1 w-full" />
+          <VaSpacer v-else />
+          <VaButton icon="content_copy" preset="secondary" @click="copySandboxLink">
+            Copy link
+          </VaButton>
+          <VaButton preset="secondary" icon="close" @click="ok" />
+        </div>
+      </template>
+    </VaModal>
     <form
+      v-else
       :action="sandboxDefineUrl"
       method="POST"
       target="_blank"
@@ -106,11 +150,9 @@
 
 <script lang="ts" setup>
 import { computed, PropType, ref, Ref } from 'vue'
-import { type CodeSandboxConfig, createCodeSandbox } from '@/composables/code-sandbox'
+import { createCodeSandbox, type CodeSandboxConfig, } from '@/composables/code-sandbox'
 import { getWindow } from 'vuestic-ui/src/utils/ssr'
 
-const query = '?query=file=/src/App.vue'
-
 type ButtonStates = 'active' | 'error' | 'default'
 
 const props = defineProps({
@@ -142,15 +184,34 @@ const copy = async () => {
   setTimeout(() => { copyButtonState.value = 'default' }, 1500)
 }
 
+const { init } = useToast()
+const shareLink = computed(() => getWindow()?.location.origin + '/play' + sandboxState.value)
+const copySandboxLink = async () => {
+  try {
+    await getWindow()?.navigator.clipboard.writeText(window.location.origin + '/play' + sandboxState.value)
+    init('Link copied to clipboard')
+  } catch (e: any) {
+    init('Permission failure!')
+  }
+
+  setTimeout(() => { copyButtonState.value = 'default' }, 1500)
+}
+
 const buttonStates = {
   active: { text: 'Copied', icon: 'fa4-check' },
   error: { text: 'Permission failure!', icon: 'fa4-times' },
   default: { text: 'Copy code', icon: 'fa4-files-o' },
 }
 const copyButton = computed(() => buttonStates[copyButtonState.value])
-
+const query = '?query=file=/src/App.vue'
 const sandboxDefineUrl = computed(() => `https://codesandbox.io/api/v1/sandboxes/define${query}`)
 const sandboxParams = computed(() => createCodeSandbox(props.code, props.config))
+
+const sandboxState = ref('')
+
+const doShowPlaygroundButton = computed(() => {
+  return !props.code.includes('<style lang="scss"') && !props.code.includes('@import')
+})
 </script>
 
 <style lang="scss">
@@ -199,4 +260,24 @@ const sandboxParams = computed(() => createCodeSandbox(props.code, props.config)
     @include sm(display, none);
   }
 }
+
+.playground-modal {
+  --va-modal-padding: 0px;
+
+  .va-modal__inner {
+    max-width: 100%;
+    height: 100vh;
+  }
+  .va-modal__message {
+    margin-bottom: 0;
+    overflow: auto;
+    flex: 1;
+  }
+  .va-modal__footer {
+    padding: 1rem;
+  }
+  .va-modal__close  {
+    display: none;
+  }
+}
 </style>
diff --git a/packages/docs/modules/page-config/blocks/example/index.vue b/packages/docs/modules/page-config/blocks/example/index.vue
index 386cda64b1..a9d1788e98 100644
--- a/packages/docs/modules/page-config/blocks/example/index.vue
+++ b/packages/docs/modules/page-config/blocks/example/index.vue
@@ -93,6 +93,7 @@ const sourceComputed = computed(() => props.customCode?.source || props.source);
       :code="sourceComputed"
       :git-link="gitLink"
       :hide-show-code-button="forceShowCode || hideCode"
+      :config="codesandboxConfig"
     />
 
     <template v-if="(showCode && !hideCode) || forceShowCode">
diff --git a/packages/docs/modules/repl/index.ts b/packages/docs/modules/repl/index.ts
new file mode 100644
index 0000000000..89813311ff
--- /dev/null
+++ b/packages/docs/modules/repl/index.ts
@@ -0,0 +1,74 @@
+import vue from '@vitejs/plugin-vue'
+import { resolve } from 'pathe';
+import { defineNuxtModule } from '@nuxt/kit';
+import { build } from 'vite'
+import { readFile, writeFile, rm } from 'fs/promises'
+
+const appendFileToTheEndOfFile = async (source: string, target: string) => {
+  const sourceFile = await readFile(source, 'utf-8')
+  const targetFile = await readFile(target, 'utf-8')
+  const result = targetFile + '\n' + sourceFile
+  await writeFile(target, result)
+}
+
+export default defineNuxtModule({
+  meta: {
+    name: '@vuestic/repl-builder',
+    compatibility: {
+      nuxt: '^3.3.0'
+    }
+  },
+
+  async setup (options, nuxt) {
+    // Builds specific ESM build for REPL, which includes all the deps, expect vue and all styles
+
+    await build({
+      logLevel: 'error',
+      root: resolve(__dirname, '../../../ui/src'),
+      build: {
+        lib: {
+          entry: resolve(__dirname, '../../../ui/src/main.ts'),
+          fileName: () => 'main.js',
+          formats: ['es'],
+        },
+        sourcemap: false,
+        minify: 'esbuild',
+        cssCodeSplit: false,
+        outDir: resolve(__dirname, './../../public/vuestic-out'),
+
+        rollupOptions: {
+          external: ['vue'],
+        }
+      },
+      plugins: [vue()],
+    })
+
+    await build({
+      logLevel: 'error',
+      root: resolve(__dirname, '../../../ui/src'),
+
+      build: {
+        assetsDir: './',
+        sourcemap: false,
+        minify: 'esbuild',
+        cssCodeSplit: false,
+        outDir: resolve(__dirname, './../../public/vuestic-out/styles'),
+        emptyOutDir: false,
+
+        rollupOptions: {
+          input: resolve(__dirname, '../../../ui/src/styles/index.scss'),
+
+          output: {
+            assetFileNames: '[name].[ext]',
+          },
+        },
+      },
+    })
+
+    await appendFileToTheEndOfFile(resolve(__dirname, './../../public/vuestic-out/styles/style.css'), resolve(__dirname, './../../public/vuestic-out/style.css'))
+    await rm(resolve(__dirname, './../../public/vuestic-out/styles'), { recursive: true })
+
+    nuxt.options.alias['#vuestic-repl-build/js'] = resolve(__dirname, './../../public/vuestic-out/main.js')
+    nuxt.options.alias['#vuestic-repl-build/style'] = resolve(__dirname, './output/styles.css')
+  }
+})
diff --git a/packages/docs/nuxt.config.ts b/packages/docs/nuxt.config.ts
index b9036e0405..162db37f41 100644
--- a/packages/docs/nuxt.config.ts
+++ b/packages/docs/nuxt.config.ts
@@ -76,6 +76,7 @@ export default defineNuxtConfig({
   },
 
   modules: [
+    './modules/repl',
     './modules/google-analytics',
     './modules/banner',
     './modules/vuestic',
diff --git a/packages/docs/package.json b/packages/docs/package.json
index fe7fc23f07..dac2618b4f 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -34,6 +34,7 @@
     "stylelint": "^13.13.1",
     "stylelint-config-standard": "^22.0.0",
     "vitest": "^0.18.1",
+    "vue": "3.3.8",
     "vue-component-meta": "^1.8.8",
     "vue-router": "^4.1.6",
     "vue-tsc": "^1.2.0"
@@ -43,6 +44,7 @@
     "@funken-studio/sitemap-nuxt-3": "^4.0.4",
     "@nuxtjs/google-fonts": "^3.0.1",
     "@types/acorn": "^6.0.0",
+    "@vue/repl": "^2.8.0",
     "acorn": "^8.8.1",
     "codesandbox": "^2.2.3",
     "highlight.js": "^11.7.0",
diff --git a/packages/docs/page-config/services/colors-config/examples/components/colors-editor.vue b/packages/docs/page-config/services/colors-config/examples/components/colors-editor.vue
index 8fdc66ef93..ca5fb8ad09 100644
--- a/packages/docs/page-config/services/colors-config/examples/components/colors-editor.vue
+++ b/packages/docs/page-config/services/colors-config/examples/components/colors-editor.vue
@@ -46,7 +46,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style>
 .r {
   display: flex;
   align-items: center;
diff --git a/packages/docs/page-config/services/components-config/examples/va-config.vue b/packages/docs/page-config/services/components-config/examples/va-config.vue
index d697fe835f..96db1dc0bb 100644
--- a/packages/docs/page-config/services/components-config/examples/va-config.vue
+++ b/packages/docs/page-config/services/components-config/examples/va-config.vue
@@ -26,10 +26,8 @@
   </VaAlert>
 </template>
 
-<style lang="scss" scoped>
-.alert-content {
-  .va-button {
-    margin-right: 0.5rem;
-  }
+<style>
+.alert-content .va-button {
+  margin-right: 0.5rem;
 }
 </style>
diff --git a/packages/docs/page-config/ui-elements/data-table/examples/ColgroupSlots.vue b/packages/docs/page-config/ui-elements/data-table/examples/ColgroupSlots.vue
index b2d2ac033e..0ddbce3848 100644
--- a/packages/docs/page-config/ui-elements/data-table/examples/ColgroupSlots.vue
+++ b/packages/docs/page-config/ui-elements/data-table/examples/ColgroupSlots.vue
@@ -59,7 +59,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style>
 .table-slots {
   background-color: var(--va-background-element);
   color: var(--va-on-background-element);
diff --git a/packages/docs/page-config/ui-elements/file-upload/examples/Slots.vue b/packages/docs/page-config/ui-elements/file-upload/examples/Slots.vue
index 6164e363c6..90fdca9780 100644
--- a/packages/docs/page-config/ui-elements/file-upload/examples/Slots.vue
+++ b/packages/docs/page-config/ui-elements/file-upload/examples/Slots.vue
@@ -24,7 +24,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style>
 .custom-upload-file-area {
   width: max-content;
   padding: 1rem;
diff --git a/packages/docs/page-config/ui-elements/scroll-container/examples/Default.vue b/packages/docs/page-config/ui-elements/scroll-container/examples/Default.vue
index d32d5d572a..92eb6f01ec 100644
--- a/packages/docs/page-config/ui-elements/scroll-container/examples/Default.vue
+++ b/packages/docs/page-config/ui-elements/scroll-container/examples/Default.vue
@@ -76,7 +76,7 @@ const contacts = [
 ];
 </script>
 
-<style lang="scss" scoped>
+<style>
 .list__item + .list__item {
   margin-top: 20px;
 }
diff --git a/packages/docs/page-config/ui-elements/sidebar-item/examples/Components.vue b/packages/docs/page-config/ui-elements/sidebar-item/examples/Components.vue
index 2bfe2da978..cc5a6b8671 100644
--- a/packages/docs/page-config/ui-elements/sidebar-item/examples/Components.vue
+++ b/packages/docs/page-config/ui-elements/sidebar-item/examples/Components.vue
@@ -97,7 +97,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style>
 .expanded {
   background-color: var(--va-background-primary);
 }
diff --git a/packages/docs/page-config/ui-elements/sidebar/examples/Position.vue b/packages/docs/page-config/ui-elements/sidebar/examples/Position.vue
index ce68714509..9938e90a9c 100644
--- a/packages/docs/page-config/ui-elements/sidebar/examples/Position.vue
+++ b/packages/docs/page-config/ui-elements/sidebar/examples/Position.vue
@@ -53,7 +53,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style>
 .content {
   width: 100%;
   height: 100%;
diff --git a/packages/docs/page-config/ui-elements/table/examples/Clickable.vue b/packages/docs/page-config/ui-elements/table/examples/Clickable.vue
index 3b8583b3b2..71fc645efc 100644
--- a/packages/docs/page-config/ui-elements/table/examples/Clickable.vue
+++ b/packages/docs/page-config/ui-elements/table/examples/Clickable.vue
@@ -70,7 +70,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style>
 .va-table-responsive {
   overflow: auto;
 }
diff --git a/packages/docs/page-config/ui-elements/table/examples/Default.vue b/packages/docs/page-config/ui-elements/table/examples/Default.vue
index ae72ee6091..3a028f1bdb 100644
--- a/packages/docs/page-config/ui-elements/table/examples/Default.vue
+++ b/packages/docs/page-config/ui-elements/table/examples/Default.vue
@@ -70,7 +70,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style>
 .va-table-responsive {
   overflow: auto;
 }
diff --git a/packages/docs/page-config/ui-elements/table/examples/Hoverable.vue b/packages/docs/page-config/ui-elements/table/examples/Hoverable.vue
index 25c27b1d51..40c4e20947 100644
--- a/packages/docs/page-config/ui-elements/table/examples/Hoverable.vue
+++ b/packages/docs/page-config/ui-elements/table/examples/Hoverable.vue
@@ -70,7 +70,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style>
 .va-table-responsive {
   overflow: auto;
 }
diff --git a/packages/docs/page-config/ui-elements/table/examples/Striped.vue b/packages/docs/page-config/ui-elements/table/examples/Striped.vue
index 3294af30df..646782122a 100644
--- a/packages/docs/page-config/ui-elements/table/examples/Striped.vue
+++ b/packages/docs/page-config/ui-elements/table/examples/Striped.vue
@@ -70,7 +70,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style>
 .va-table-responsive {
   overflow: auto;
 }
diff --git a/packages/docs/page-config/ui-elements/value/examples/String.vue b/packages/docs/page-config/ui-elements/value/examples/String.vue
index c36852f45b..dc9348f07b 100644
--- a/packages/docs/page-config/ui-elements/value/examples/String.vue
+++ b/packages/docs/page-config/ui-elements/value/examples/String.vue
@@ -1,8 +1,8 @@
 <template>
   <VaValue v-slot="inputText" default-value="Vuestic">
     <div class="preview">
-      <VaValue 
-        v-for="i in 20" 
+      <VaValue
+        v-for="i in 20"
         v-slot="textPosition"
         :default-value="{
           left: Math.random() * 80 + 10,
@@ -11,7 +11,7 @@
           fontSize: Math.random() * 20 + 10,
         }"
       >
-        <span 
+        <span
           :style="{
             left: `${textPosition.value.left}%`,
             top: `${textPosition.value.top}%`,
@@ -28,15 +28,16 @@
   </VaValue>
 </template>
 
-<style lang="scss" scoped>
+<style>
   .preview {
     position: relative;
     height: 200px;
     background: var(--va-primary);
-    span {
-      position: absolute;
-      color: var(--va-on-primary);
-      font-weight: 800;
-    }
   }
-</style>
\ No newline at end of file
+
+  .preview span {
+    position: absolute;
+    color: var(--va-on-primary);
+    font-weight: 800;
+  }
+</style>
diff --git a/packages/docs/page-config/ui-elements/value/examples/WithInputs.vue b/packages/docs/page-config/ui-elements/value/examples/WithInputs.vue
index 0177df5c65..7484dea4f6 100644
--- a/packages/docs/page-config/ui-elements/value/examples/WithInputs.vue
+++ b/packages/docs/page-config/ui-elements/value/examples/WithInputs.vue
@@ -22,7 +22,7 @@
   })
 </script>
 
-<style lang="scss" scoped>
+<style>
   .item {
     height: 2rem;
   }
@@ -33,4 +33,4 @@
     padding: 0 4px;
     margin: 0 -4px;
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/packages/docs/pages/play.vue b/packages/docs/pages/play.vue
new file mode 100644
index 0000000000..8d248dd16a
--- /dev/null
+++ b/packages/docs/pages/play.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { getWindow } from 'vuestic-ui/src/utils/ssr'
+import { useIsMounted } from 'vuestic-ui/src/composables/useIsMounted'
+
+definePageMeta({
+  layout: 'play',
+})
+
+const makeCode = (script: string, template: string, style: string) => {
+  let code = ''
+
+  if (script.trim()) {
+    // Fix parsing error, we need \/ to escape / in script tag
+    // eslint-disable-next-line no-useless-escape
+    code += `<script setup>\n${script}\n<\/script>\n\n`
+  }
+
+  if (template.trim()) {
+    code += `<template>\n${template}\n</template>\n\n`
+  }
+
+  if (style.trim()) {
+    code += `<style lang="scss">\n${style}\n</style>\n\n`
+  }
+
+  return code
+}
+
+const scriptText = `  import { ref } from 'vue'
+
+  const msg = ref('')`
+
+const templateText = `  <h1 class="va-h1">{{ msg }}</h1>
+  <VaInput v-model="msg" />`
+
+const route = useRoute()
+
+const { init } = useToast()
+const sandboxState = ref(route.hash.slice(1) || '')
+const copySandboxLink = async () => {
+  try {
+    await getWindow()?.navigator.clipboard.writeText(window.location.origin + '/play' + sandboxState.value)
+    init('Link copied to clipboard')
+  } catch (e: any) {
+    init({
+      message: 'Failed to copy link to clipboard',
+      color: 'error',
+    })
+  }
+}
+
+// Change URL without reloading page and updating vue-router
+watch(sandboxState, () => {
+  window.history.replaceState({}, '', '/play' + sandboxState.value)
+})
+</script>
+
+<template>
+  <main class="h-[100%] flex flex-col">
+    <ClientOnly>
+      <Play
+        v-model:state="sandboxState"
+        class="h-[100%] flex-1"
+        :code="makeCode(scriptText, templateText, '')"
+      />
+    </ClientOnly>
+
+    <div class="flex justify-between items-center py-2 px-4 border-t-2 border-[var(--va-background-border)] bg-[var(--va-background-secondary)]">
+      <div>
+        Playground <span class="text-[var(--va-secondary)]">vuestic-ui@latest - vue@latest - tailwindcss@latest</span>
+      </div>
+
+      <VaButton
+        icon="share"
+        preset="secondary"
+        @click="copySandboxLink"
+      >
+        Share
+      </VaButton>
+    </div>
+  </main>
+</template>
diff --git a/packages/sandbox/package.json b/packages/sandbox/package.json
index a7e3cef586..90cf84c4a8 100644
--- a/packages/sandbox/package.json
+++ b/packages/sandbox/package.json
@@ -9,7 +9,7 @@
     "build:vue-cli": "vue-cli-service build",
     "build:nuxt": "nuxt build",
     "build:web-components": "vue-tsc --noEmit && vite build --config ./web-components/vite.config.ts",
-    "dev:vite": "vite",
+    "dev:vite": "vite --config ./configs/vite/vite.base.ts",
     "dev:web-components": "vite --config ./web-components/vite.config.ts",
     "dev:vue-cli": "vue-cli-service serve",
     "dev:nuxt": "nuxt dev",
diff --git a/packages/ui/build/common-config.ts b/packages/ui/build/common-config.ts
index 5712cd2812..d6cd0d6e50 100644
--- a/packages/ui/build/common-config.ts
+++ b/packages/ui/build/common-config.ts
@@ -97,7 +97,7 @@ export default function createViteConfig (format: BuildFormat) {
   isEsm && config.plugins.push(chunkSplitPlugin({ strategy: 'unbundle' }))
   isEsm && !isNode && config.plugins.push(appendComponentCss())
   isEsm && config.plugins.push(removeSideEffectedChunks())
-  isEsm && config.plugins.push(componentVBindFix())
+  config.plugins.push(componentVBindFix())
 
   if (isNode) {
     config.build.rollupOptions = { ...external, ...rollupMjsBuildOptions }
diff --git a/packages/ui/build/plugins/component-v-bind-fix.spec.ts b/packages/ui/build/plugins/component-v-bind-fix.spec.ts
index b4a82684d9..e36c76f47c 100644
--- a/packages/ui/build/plugins/component-v-bind-fix.spec.ts
+++ b/packages/ui/build/plugins/component-v-bind-fix.spec.ts
@@ -9,9 +9,9 @@ const transformVueComponent = (code: string) => {
 describe('component-v-bind-fix', () => {
   describe('transformVueComponent', () => {
     // eslint-disable-next-line no-template-curly-in-string
-    const expectedStyleString = '--va-0-color: ${String(color)};--va-1-background: ${String(background)}'
+    const expectedStyleString = '--va-color: ${String(color)};--va-background: ${String(background)}'
 
-    const expectedObjectStyleString = (styleContent: string) => `typeof ${styleContent} === 'object' ? (Array.isArray(${styleContent}) ? [...${styleContent}, \`${expectedStyleString}\`] : { ...${styleContent}, '--va-0-color': String(color),'--va-1-background': String(background) }) : ${styleContent} + \`;${expectedStyleString}\``
+    const expectedObjectStyleString = (styleContent: string) => `[${styleContent}, \`${expectedStyleString}\`]`
 
     const componentCode = (attrs = '', nestedAttrs = '') => `
 <template>
@@ -53,21 +53,21 @@ const background = 'yellow'
 
 <style>
   button {
-    color: var(--va-0-color);
-    background: var(--va-1-background);
+    color: var(--va-color);
+    background: var(--va-background);
   }
 </style>
 `
 
     test('expectedObjectStyleString', () => {
-      expect(expectedObjectStyleString('style')).toBe(`typeof style === 'object' ? (Array.isArray(style) ? [...style, \`${expectedStyleString}\`] : { ...style, '--va-0-color': String(color),'--va-1-background': String(background) }) : style + \`;${expectedStyleString}\``)
+      expect(expectedObjectStyleString('style')).toBe(`[style, \`${expectedStyleString}\`]`)
     })
 
     test('replace v-bind() with var(--va-index-name)', () => {
       const code = transformVueComponent(componentCode())
 
-      expect(code).toContain('var(--va-0-color)')
-      expect(code).toContain('var(--va-1-background)')
+      expect(code).toContain('var(--va-color)')
+      expect(code).toContain('var(--va-background)')
 
       expect(code).not.toContain('v-bind(color)')
       expect(code).not.toContain('v-bind(background)')
@@ -96,9 +96,9 @@ const background = 'yellow'
         ':style="{ background: yellow }"',
       ))
 
-      const obj = "{ ...{ background: yellow }, '--va-0-color': color,'--va-1-background': background }"
+      const obj = "{ ...{ background: yellow }, '--va-color': color,'--va-background': background }"
       // eslint-disable-next-line no-template-curly-in-string
-      const str = '{ background: yellow } + `;--va-0-color: ${color};--va-1-background: ${background}`'
+      const str = '{ background: yellow } + `;--va-color: ${color};--va-background: ${background}`'
 
       expect(code).toBe(expectedComponentCode(
         `:style="${expectedObjectStyleString('{ background: yellow }')}"`,
@@ -209,7 +209,7 @@ const background = 'yellow'
 
     const expectedComponentCode = () => `
     <template>
-      <button :style="\`--va-0-theme-color: \${String(theme.color)};--va-1-theme-background: \${String(theme.background)}\`">
+      <button :style="\`--va-theme-color: \${String(theme.color)};--va-theme-background: \${String(theme.background)}\`">
         <span>
           Hello
         </span>
@@ -226,8 +226,8 @@ const background = 'yellow'
 
     <style>
       button {
-        color: var(--va-0-theme-color);
-        background: var(--va-1-theme-background);
+        color: var(--va-theme-color);
+        background: var(--va-theme-background);
       }
     </style>
     `
@@ -266,13 +266,13 @@ const background = 'yellow'
 
     const expectedComponentCode = () => `
     <template>
-      <button :style="\`--va-0-theme-color: \${String(theme.color)};--va-1-theme-background: \${String(theme.background)}\`">
+      <button :style="\`--va-theme-color: \${String(theme.color)};--va-theme-background: \${String(theme.background)}\`">
         <span>
           Hello
         </span>
         world!
       </button>
-      <div :style="\`--va-0-theme-color: \${String(theme.color)};--va-1-theme-background: \${String(theme.background)}\`">
+      <div :style="\`--va-theme-color: \${String(theme.color)};--va-theme-background: \${String(theme.background)}\`">
         Label
       </div>
     </template>
@@ -286,8 +286,8 @@ const background = 'yellow'
 
     <style>
       button {
-        color: var(--va-0-theme-color);
-        background: var(--va-1-theme-background);
+        color: var(--va-theme-color);
+        background: var(--va-theme-background);
       }
     </style>
     `
@@ -322,7 +322,7 @@ const background = 'yellow'
 
     const expectedComponentCode = () => `
     <template>
-      <button :style="\`--va-0-theme-color: \${String(theme.color)}\`">
+      <button :style="\`--va-theme-color: \${String(theme.color)}\`">
         <span>
           Hello
         </span>
@@ -338,8 +338,8 @@ const background = 'yellow'
 
     <style>
       button {
-        color: var(--va-0-theme-color);
-        fill: var(--va-0-theme-color);
+        color: var(--va-theme-color);
+        fill: var(--va-theme-color);
       }
     </style>
     `
@@ -388,7 +388,7 @@ const background = 'yellow'
 
     const expectedComponentCode = () => `
     <template>
-      <button :style="\`--va-0-props-color: \${String($props.color)}\`">
+      <button :style="\`--va-props-color: \${String($props.color)}\`">
         <span>
           Hello
         </span>
@@ -419,7 +419,7 @@ const background = 'yellow'
 
     <style>
       button {
-        color: var(--va-0-props-color);
+        color: var(--va-props-color);
       }
     </style>
     `
diff --git a/packages/ui/build/plugins/component-v-bind-fix.ts b/packages/ui/build/plugins/component-v-bind-fix.ts
index 2584683e73..93056db83c 100644
--- a/packages/ui/build/plugins/component-v-bind-fix.ts
+++ b/packages/ui/build/plugins/component-v-bind-fix.ts
@@ -67,29 +67,21 @@ const getRootNodesOpenTags = (sfc: SFCParseResult) => {
   })
 }
 
-const renderCssVariablesAsStringCode = (vBinds: string[]) => {
-  return vBinds.map((vBind, index) => {
-    return `--va-${index}-${kebabCase(vBind)}: \${String(${vBind})}`
-  }, '').join(';')
+const renderCSSVariableName = (vBind: string) => {
+  return `--va-${kebabCase(vBind)}`
 }
 
-const renderCssVariablesAsObjectPropertiesCode = (vBinds: string[]) => {
+const renderCssVariablesAsStringCode = (vBinds: string[]) => {
   return vBinds.map((vBind, index) => {
-    return `'--va-${index}-${kebabCase(vBind)}': String(${vBind})`
-  }, '').join(',')
+    return `${renderCSSVariableName(vBind)}: \${String(${vBind})}`
+  }, '').join(';')
 }
 
 const renderObjectGuardCode = (existingContent: string, binds: string[]) => {
   const renderedAsString = renderCssVariablesAsStringCode(binds)
-  const renderedAsObjectProperties = renderCssVariablesAsObjectPropertiesCode(binds)
-
-  // Merge existing style with rendered css variables
-  const arrayStyle = `[...${existingContent}, \`${renderedAsString}\`]`
-  const objectStyle = `{ ...${existingContent}, ${renderedAsObjectProperties} }`
-  const stringStyle = `${existingContent} + \`;${renderedAsString}\``
 
   // Handle if style is an object, array or string
-  return `typeof ${existingContent} === 'object' ? (Array.isArray(${existingContent}) ? ${arrayStyle} : ${objectStyle}) : ${stringStyle}`
+  return `[${existingContent}, \`${renderedAsString}\`]`
 }
 
 const addStyleAttrToTag = (rootNode: string, vBinds: string[]) => {
@@ -136,7 +128,7 @@ export const transformVueComponent = (code: string) => {
     const locs = getStyleVBindLocs(s.original, vBind)
 
     locs.forEach((loc) => {
-      s.overwrite(loc.start, loc.end, `var(--va-${index}-${kebabCase(vBind)})`)
+      s.overwrite(loc.start, loc.end, `var(${renderCSSVariableName(vBind)})`)
     })
   })
 
diff --git a/yarn.lock b/yarn.lock
index 3c91b1b53a..c4ab5e0ff8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -784,6 +784,11 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.22.5.tgz#721fd042f3ce1896238cf1b341c77eb7dee7dbea"
   integrity sha512-DFZMC9LJUG9PLOclRC32G63UXwzqS2koQC8dkx+PLdmt1xSePYpbT/NbsrJy8Q/muXz7o/h/d4A7Fuyixm559Q==
 
+"@babel/parser@^7.23.0":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.3.tgz#0ce0be31a4ca4f1884b5786057cadcb6c3be58f9"
+  integrity sha512-uVsWNvlVsIninV2prNz/3lHCb+5CJ+e+IUBfbjToAHODtfGYLfCFuY4AU7TskI+dAKk+njsPiBjq1gKTvZOBaw==
+
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.18.6.tgz#da5b8f9a580acdfbe53494dba45ea389fb09a4d2"
@@ -2852,7 +2857,7 @@
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz#add4c98d341472a289190b424efbdb096991bb24"
   integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
 
-"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.13":
+"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.13", "@jridgewell/sourcemap-codec@^1.4.15":
   version "1.4.15"
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
   integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
@@ -6358,6 +6363,16 @@
     estree-walker "^2.0.2"
     source-map-js "^1.0.2"
 
+"@vue/compiler-core@3.3.8":
+  version "3.3.8"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.3.8.tgz#301bb60d0245265a88ed5b30e200fbf223acb313"
+  integrity sha512-hN/NNBUECw8SusQvDSqqcVv6gWq8L6iAktUR0UF3vGu2OhzRqcOiAno0FmBJWwxhYEXRlQJT5XnoKsVq1WZx4g==
+  dependencies:
+    "@babel/parser" "^7.23.0"
+    "@vue/shared" "3.3.8"
+    estree-walker "^2.0.2"
+    source-map-js "^1.0.2"
+
 "@vue/compiler-dom@3.2.47", "@vue/compiler-dom@^3.0.1", "@vue/compiler-dom@^3.2.0":
   version "3.2.47"
   resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.47.tgz#a0b06caf7ef7056939e563dcaa9cbde30794f305"
@@ -6366,6 +6381,14 @@
     "@vue/compiler-core" "3.2.47"
     "@vue/shared" "3.2.47"
 
+"@vue/compiler-dom@3.3.8":
+  version "3.3.8"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.3.8.tgz#09d832514b9b8d9415a3816b065d69dbefcc7e9b"
+  integrity sha512-+PPtv+p/nWDd0AvJu3w8HS0RIm/C6VGBIRe24b9hSyNWOAPEUosFZ5diwawwP8ip5sJ8n0Pe87TNNNHnvjs0FQ==
+  dependencies:
+    "@vue/compiler-core" "3.3.8"
+    "@vue/shared" "3.3.8"
+
 "@vue/compiler-dom@^3.3.0":
   version "3.3.4"
   resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.3.4.tgz#f56e09b5f4d7dc350f981784de9713d823341151"
@@ -6390,6 +6413,22 @@
     postcss "^8.1.10"
     source-map "^0.6.1"
 
+"@vue/compiler-sfc@3.3.8":
+  version "3.3.8"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.3.8.tgz#40b18e48aa00260950964d1d72157668521be0e1"
+  integrity sha512-WMzbUrlTjfYF8joyT84HfwwXo+8WPALuPxhy+BZ6R4Aafls+jDBnSz8PDz60uFhuqFbl3HxRfxvDzrUf3THwpA==
+  dependencies:
+    "@babel/parser" "^7.23.0"
+    "@vue/compiler-core" "3.3.8"
+    "@vue/compiler-dom" "3.3.8"
+    "@vue/compiler-ssr" "3.3.8"
+    "@vue/reactivity-transform" "3.3.8"
+    "@vue/shared" "3.3.8"
+    estree-walker "^2.0.2"
+    magic-string "^0.30.5"
+    postcss "^8.4.31"
+    source-map-js "^1.0.2"
+
 "@vue/compiler-ssr@3.2.47":
   version "3.2.47"
   resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.2.47.tgz#35872c01a273aac4d6070ab9d8da918ab13057ee"
@@ -6398,6 +6437,14 @@
     "@vue/compiler-dom" "3.2.47"
     "@vue/shared" "3.2.47"
 
+"@vue/compiler-ssr@3.3.8":
+  version "3.3.8"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.3.8.tgz#136eed54411e4694815d961048a237191063fbce"
+  integrity sha512-hXCqQL/15kMVDBuoBYpUnSYT8doDNwsjvm3jTefnXr+ytn294ySnT8NlsFHmTgKNjwpuFy7XVV8yTeLtNl/P6w==
+  dependencies:
+    "@vue/compiler-dom" "3.3.8"
+    "@vue/shared" "3.3.8"
+
 "@vue/component-compiler-utils@^3.1.0", "@vue/component-compiler-utils@^3.3.0":
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/@vue/component-compiler-utils/-/component-compiler-utils-3.3.0.tgz#f9f5fb53464b0c37b2c8d2f3fbfe44df60f61dc9"
@@ -6460,6 +6507,17 @@
     estree-walker "^2.0.2"
     magic-string "^0.25.7"
 
+"@vue/reactivity-transform@3.3.8":
+  version "3.3.8"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.3.8.tgz#6d07649013b0be5c670f0ab6cc7ddd3150ad03f2"
+  integrity sha512-49CvBzmZNtcHua0XJ7GdGifM8GOXoUMOX4dD40Y5DxI3R8OUhMlvf2nvgUAcPxaXiV5MQQ1Nwy09ADpnLQUqRw==
+  dependencies:
+    "@babel/parser" "^7.23.0"
+    "@vue/compiler-core" "3.3.8"
+    "@vue/shared" "3.3.8"
+    estree-walker "^2.0.2"
+    magic-string "^0.30.5"
+
 "@vue/reactivity@3.2.47", "@vue/reactivity@^3.2.0":
   version "3.2.47"
   resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.2.47.tgz#1d6399074eadfc3ed35c727e2fd707d6881140b6"
@@ -6467,6 +6525,13 @@
   dependencies:
     "@vue/shared" "3.2.47"
 
+"@vue/reactivity@3.3.8":
+  version "3.3.8"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.3.8.tgz#cce8a03a3fd3539c3eeda53e277ba365d160dd4d"
+  integrity sha512-ctLWitmFBu6mtddPyOKpHg8+5ahouoTCRtmAHZAXmolDtuZXfjL2T3OJ6DL6ezBPQB1SmMnpzjiWjCiMYmpIuw==
+  dependencies:
+    "@vue/shared" "3.3.8"
+
 "@vue/reactivity@^3.3.0":
   version "3.3.4"
   resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.3.4.tgz#a27a29c6cd17faba5a0e99fbb86ee951653e2253"
@@ -6474,6 +6539,11 @@
   dependencies:
     "@vue/shared" "3.3.4"
 
+"@vue/repl@^2.8.0":
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/@vue/repl/-/repl-2.8.0.tgz#e14d9a30c70436170d875cc84858b9a395564a93"
+  integrity sha512-coXgyoga7+G7BO2ENlfe/0b0vqrT8FasFguaksjrQzpEVC28r6S7+YDhhS6GZnuNhnS8gDqZx7yrXsTOqXsDFg==
+
 "@vue/runtime-core@3.2.47":
   version "3.2.47"
   resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.2.47.tgz#406ebade3d5551c00fc6409bbc1eeb10f32e121d"
@@ -6482,6 +6552,14 @@
     "@vue/reactivity" "3.2.47"
     "@vue/shared" "3.2.47"
 
+"@vue/runtime-core@3.3.8":
+  version "3.3.8"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.3.8.tgz#fba5a632cbf2b5d29e171489570149cb6975dcdb"
+  integrity sha512-qurzOlb6q26KWQ/8IShHkMDOuJkQnQcTIp1sdP4I9MbCf9FJeGVRXJFr2mF+6bXh/3Zjr9TDgURXrsCr9bfjUw==
+  dependencies:
+    "@vue/reactivity" "3.3.8"
+    "@vue/shared" "3.3.8"
+
 "@vue/runtime-dom@3.2.47":
   version "3.2.47"
   resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.2.47.tgz#93e760eeaeab84dedfb7c3eaf3ed58d776299382"
@@ -6491,6 +6569,15 @@
     "@vue/shared" "3.2.47"
     csstype "^2.6.8"
 
+"@vue/runtime-dom@3.3.8":
+  version "3.3.8"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.3.8.tgz#e2d7aa795cf50914dda9a951887765a594b38af4"
+  integrity sha512-Noy5yM5UIf9UeFoowBVgghyGGPIDPy1Qlqt0yVsUdAVbqI8eeMSsTqBtauaEoT2UFXUk5S64aWVNJN4MJ2vRdA==
+  dependencies:
+    "@vue/runtime-core" "3.3.8"
+    "@vue/shared" "3.3.8"
+    csstype "^3.1.2"
+
 "@vue/server-renderer@3.2.47", "@vue/server-renderer@^3.0.1":
   version "3.2.47"
   resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.2.47.tgz#8aa1d1871fc4eb5a7851aa7f741f8f700e6de3c0"
@@ -6499,6 +6586,14 @@
     "@vue/compiler-ssr" "3.2.47"
     "@vue/shared" "3.2.47"
 
+"@vue/server-renderer@3.3.8":
+  version "3.3.8"
+  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.3.8.tgz#9b1779010e75783edeed8fcfb97d9c95fc3ac5d2"
+  integrity sha512-zVCUw7RFskvPuNlPn/8xISbrf0zTWsTSdYTsUTN1ERGGZGVnRxM2QZ3x1OR32+vwkkCm0IW6HmJ49IsPm7ilLg==
+  dependencies:
+    "@vue/compiler-ssr" "3.3.8"
+    "@vue/shared" "3.3.8"
+
 "@vue/shared@3.2.47", "@vue/shared@^3.2.0", "@vue/shared@^3.2.47":
   version "3.2.47"
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.47.tgz#e597ef75086c6e896ff5478a6bfc0a7aa4bbd14c"
@@ -6509,6 +6604,11 @@
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.3.4.tgz#06e83c5027f464eef861c329be81454bc8b70780"
   integrity sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==
 
+"@vue/shared@3.3.8":
+  version "3.3.8"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.3.8.tgz#f044942142e1d3a395f24132e6203a784838542d"
+  integrity sha512-8PGwybFwM4x8pcfgqEQFy70NaQxASvOC5DJwLQfpArw1UDfUXrJkdxD3BhVTMS+0Lef/TU7YO0Jvr0jJY8T+mw==
+
 "@vue/test-utils@^2.0.2":
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-2.3.2.tgz#b47ce6d7be7bf9700e0bb4322410e4cd8724d277"
@@ -9462,7 +9562,7 @@ csstype@^2.6.8:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.21.tgz#2efb85b7cc55c80017c66a5ad7cbd931fda3a90e"
   integrity sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==
 
-csstype@^3.0.2:
+csstype@^3.0.2, csstype@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
   integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
@@ -14978,6 +15078,13 @@ magic-string@^0.30.0:
   dependencies:
     "@jridgewell/sourcemap-codec" "^1.4.13"
 
+magic-string@^0.30.5:
+  version "0.30.5"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.5.tgz#1994d980bd1c8835dc6e78db7cbd4ae4f24746f9"
+  integrity sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==
+  dependencies:
+    "@jridgewell/sourcemap-codec" "^1.4.15"
+
 make-dir@^1.0.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.3.0.tgz#79c1033b80515bd6d24ec9933e860ca75ee27f0c"
@@ -18041,7 +18148,7 @@ postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.2, postcss@^7.0.21
     picocolors "^0.2.1"
     source-map "^0.6.1"
 
-postcss@^8.1.10, postcss@^8.2.1, postcss@^8.2.15, postcss@^8.2.6, postcss@^8.3.5, postcss@^8.4.18, postcss@^8.4.19, postcss@^8.4.23:
+postcss@^8.1.10, postcss@^8.2.1, postcss@^8.2.15, postcss@^8.2.6, postcss@^8.3.5, postcss@^8.4.18, postcss@^8.4.19, postcss@^8.4.23, postcss@^8.4.31:
   version "8.4.31"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d"
   integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==
@@ -22317,6 +22424,17 @@ vue@*, vue@^3.0.0, vue@^3.0.4, vue@^3.2.47:
     "@vue/server-renderer" "3.2.47"
     "@vue/shared" "3.2.47"
 
+vue@3.3.8:
+  version "3.3.8"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-3.3.8.tgz#532ff071af24f6a69e5ecc53a66858a9ee874ffc"
+  integrity sha512-5VSX/3DabBikOXMsxzlW8JyfeLKlG9mzqnWgLQLty88vdZL7ZJgrdgBOmrArwxiLtmS+lNNpPcBYqrhE6TQW5w==
+  dependencies:
+    "@vue/compiler-dom" "3.3.8"
+    "@vue/compiler-sfc" "3.3.8"
+    "@vue/runtime-dom" "3.3.8"
+    "@vue/server-renderer" "3.3.8"
+    "@vue/shared" "3.3.8"
+
 w3c-hr-time@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd"