From 3210882086fc3bbc7099331a6ec672794a9b3bfa Mon Sep 17 00:00:00 2001
From: aluarius <ruseomaster@gmail.com>
Date: Fri, 13 Jan 2023 15:37:10 +0700
Subject: [PATCH 01/14] wip

---
 packages/ui/src/components/index.ts           |   1 +
 .../va-aspect-ratio/VaAspectRatio.vue         |  40 +++
 .../va-aspect-ratio/_variables.scss           |   4 +
 .../src/components/va-aspect-ratio/index.ts   |   4 +
 .../src/components/va-carousel/VaCarousel.vue |   2 +-
 .../src/components/va-image/VaImage.demo.vue  | 303 ++++++++----------
 .../ui/src/components/va-image/VaImage.vue    | 216 +++++++++----
 .../src/components/va-image/_variables.scss   |   5 +-
 .../va-image/hooks/useNativeImgAttributes.ts  |  49 +++
 .../ui/src/services/vue-plugin/components.ts  |   1 +
 10 files changed, 381 insertions(+), 244 deletions(-)
 create mode 100644 packages/ui/src/components/va-aspect-ratio/VaAspectRatio.vue
 create mode 100644 packages/ui/src/components/va-aspect-ratio/_variables.scss
 create mode 100644 packages/ui/src/components/va-aspect-ratio/index.ts
 create mode 100644 packages/ui/src/components/va-image/hooks/useNativeImgAttributes.ts

diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 34e9c9198a..fff5670cc1 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -13,6 +13,7 @@ export * from './va-accordion'
 export * from './va-affix'
 export * from './va-alert'
 export * from './va-app-bar'
+export * from './va-aspect-ratio'
 export * from './va-avatar'
 export * from './va-avatar-group'
 export * from './va-backtop'
diff --git a/packages/ui/src/components/va-aspect-ratio/VaAspectRatio.vue b/packages/ui/src/components/va-aspect-ratio/VaAspectRatio.vue
new file mode 100644
index 0000000000..70bbbbec71
--- /dev/null
+++ b/packages/ui/src/components/va-aspect-ratio/VaAspectRatio.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="va-aspect-ratio">
+    <div :style="stylesComputed" />
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from 'vue'
+
+import { useComponentPresetProp } from '../../composables'
+
+export default defineComponent({
+  name: 'VaAspectRatio',
+
+  props: {
+    ...useComponentPresetProp,
+    ratio: { type: Number, validator: (v: number) => v > 0 },
+    contentHeight: { type: Number, default: 1 },
+    contentWidth: { type: Number, default: 1 },
+  },
+
+  setup (props) {
+    const aspectRatio = computed(() => props.ratio || props.contentWidth / props.contentHeight)
+
+    const stylesComputed = computed(() => ({ paddingBottom: `${1 / aspectRatio.value * 100}%` }))
+
+    return { stylesComputed }
+  },
+})
+</script>
+
+<style lang="scss">
+@import 'variables';
+
+.va-aspect-ratio {
+  position: var(--va-aspect-ratio-position);
+  overflow: var(--va-aspect-ratio-overflow);
+}
+</style>
diff --git a/packages/ui/src/components/va-aspect-ratio/_variables.scss b/packages/ui/src/components/va-aspect-ratio/_variables.scss
new file mode 100644
index 0000000000..068cb4e486
--- /dev/null
+++ b/packages/ui/src/components/va-aspect-ratio/_variables.scss
@@ -0,0 +1,4 @@
+:root {
+  --va-aspect-ratio-position: relative;
+  --va-aspect-ratio-overflow: hidden;
+}
diff --git a/packages/ui/src/components/va-aspect-ratio/index.ts b/packages/ui/src/components/va-aspect-ratio/index.ts
new file mode 100644
index 0000000000..686e93fc1d
--- /dev/null
+++ b/packages/ui/src/components/va-aspect-ratio/index.ts
@@ -0,0 +1,4 @@
+import withConfigTransport from '../../services/config-transport/withConfigTransport'
+import _VaAspectRatio from './VaAspectRatio.vue'
+
+export const VaAspectRatio = withConfigTransport(_VaAspectRatio)
diff --git a/packages/ui/src/components/va-carousel/VaCarousel.vue b/packages/ui/src/components/va-carousel/VaCarousel.vue
index 1dc8a476ca..dd75f887f9 100644
--- a/packages/ui/src/components/va-carousel/VaCarousel.vue
+++ b/packages/ui/src/components/va-carousel/VaCarousel.vue
@@ -336,7 +336,7 @@ export default defineComponent({
     }
   }
 
-  .va-image {
+  .va-aspect-ratio {
     height: 100%;
     width: 100%;
   }
diff --git a/packages/ui/src/components/va-image/VaImage.demo.vue b/packages/ui/src/components/va-image/VaImage.demo.vue
index af182eaf33..83549b0470 100644
--- a/packages/ui/src/components/va-image/VaImage.demo.vue
+++ b/packages/ui/src/components/va-image/VaImage.demo.vue
@@ -1,217 +1,174 @@
 <template>
-  <VbDemo>
-    <div class="row">
-      <VbCard title="default">
-        <va-image
-          style="width: 200px; height: 200px;"
-          :src="getImagePath(200)"
-        />
-      </VbCard>
-      <VbCard title="Slots (loading, error)">
-        <button @click="newImage()">
+  <VbDemo class="flex flex-wrap space-x-4 space-y-4">
+    <VbCard title="Default">
+      <va-image
+        class="image"
+        :src="getImagePath(200)"
+      />
+    </VbCard>
+
+    <VbCard title="Slots (loading, error, placeholder)">
+      <div class="mb-2 flex">
+        <button class="mr-2" @click="newImage">
           New image
         </button>
-        <button @click="wrongPath()">
+        <button @click="wrongPath">
           Wrong path
         </button>
-        <va-image
-          :src="slotImagePath"
-          class="image"
-          @loaded="$vb.log('loaded', $event)"
-          @error="$vb.log('error', $event)"
-        >
-          <template #loader>
-            Loading...
-          </template>
-          <template #error>
-            Error
-          </template>
-        </va-image>
-      </VbCard>
-      <VbCard title="Default slot usage examples">
-        <va-image
-          :src="getImagePath(200)"
-          class="image"
-        >
-          <div class="overlay overlay--top">
-            Overlay Top
-          </div>
-        </va-image>
-        <va-image
-          :src="getImagePath(200)"
-          class="image"
-        >
-          <div class="overlay overlay--bottom">
-            Overlay Bottom
-          </div>
-        </va-image>
-      </VbCard>
-    </div>
-    <div class="row">
-      <VbCard title="4/3">
-        <div class="image">
-          <va-image
-            :ratio="4/3"
-            :src="getImagePath(200)"
-          />
+      </div>
+
+      <va-image
+        class="image mb-2"
+        :src="slotImagePath"
+        @loaded="$vb.log('loaded', $event)"
+        @error="$vb.log('error', $event)"
+      >
+        <template #loader>
+          Loading
+        </template>
+        <template #error>
+          Error
+        </template>
+      </va-image>
+
+      <va-image
+        class="image"
+        :src="slotImagePath"
+      >
+        <template #placeholder>
+          Placeholder (both error and loading states)
+        </template>
+      </va-image>
+    </VbCard>
+
+    <VbCard title="Default slot">
+      <va-image
+        class="mb-2 image"
+        :src="getImagePath(200)"
+      >
+        <div class="overlay overlay--top">
+          Overlay Top
         </div>
-      </VbCard>
-      <VbCard title="1/1">
-        <div class="image">
-          <va-image
-            :ratio="1"
-            :src="getImagePath(200)"
-          />
+      </va-image>
+
+      <va-image
+        class="mb-2 image"
+        :src="getImagePath(200)"
+      >
+        <div class="overlay overlay--bottom">
+          Overlay Bottom
         </div>
-      </VbCard>
-      <VbCard title="16/9">
-        <div class="image">
-          <va-image
-            :ratio="16/9"
-            :src="getImagePath(200)"
-          />
+      </va-image>
+
+      <va-image
+        class="image"
+        :src="getImagePath(200)"
+      >
+        <div class="overlay overlay--whole">
+          Overlay Whole
         </div>
-      </VbCard>
-    </div>
-    <div class="row">
-      <VbCard title="Portrait">
-        <va-image
-          style="width: 100px; height: 200px;"
-          class="image--portrait"
-          :src="getImagePath(100, 200)"
-        />
-      </VbCard>
-      <VbCard title="Portrait cover">
-        <va-image
-          class="image"
-          :src="getImagePath(100, 200)"
-        />
-      </VbCard>
-      <VbCard title="Portrait contain">
-        <va-image
-          class="image"
-          contain
-          :src="getImagePath(100, 200)"
-        />
-      </VbCard>
-    </div>
-    <div class="row">
-      <VbCard title="Landscape">
-        <va-image
-          style="width: 200px; height: 100px;"
-          :src="getImagePath(200, 100)"
-        />
-      </VbCard>
-      <VbCard title="Landscape cover">
-        <va-image
-          class="image"
-          :src="getImagePath(200, 100)"
-        />
-      </VbCard>
-      <VbCard title="Landscape contain">
-        <va-image
-          class="image"
-          contain
-          :src="getImagePath(200, 100)"
-        />
-      </VbCard>
-    </div>
+      </va-image>
+    </VbCard>
+
+    <VbCard title="4/3">
+      <va-image
+        class="image"
+        :src="getImagePath(200)"
+        :ratio="4/3"
+      />
+    </VbCard>
+
+    <VbCard title="16/9">
+      <va-image
+        class="image"
+        :src="getImagePath(200)"
+        :ratio="16/9"
+      />
+    </VbCard>
+
+    <VbCard title="Portrait">
+      <va-image
+        class="image"
+        :src="getImagePath(200, 100)"
+      />
+    </VbCard>
+
+    <VbCard title="Landscape">
+      <va-image
+        class="image"
+        :src="getImagePath(100, 200)"
+      />
+    </VbCard>
+
+    <VbCard title="Contain">
+      <va-image
+        class="image bg-orange-500"
+        fit="contain"
+        :src="getImagePath(200, 100)"
+      />
+    </VbCard>
+
+    <VbCard title="Fill">
+      <va-image
+        class="image"
+        fit="fill"
+        :src="getImagePath(200, 100)"
+      />
+    </VbCard>
   </VbDemo>
 </template>
 
-<script>
+<script setup>
+import { ref, computed } from 'vue'
+
 import { VaImage } from './index'
 
-export default {
-  components: {
-    VaImage,
-  },
-  data () {
-    return {
-      slotImageSize: 1500,
-      slotOverlayPosition: 'top',
-    }
-  },
-  computed: {
-    slotImagePath () {
-      return this.getImagePath(this.slotImageSize)
-    },
-  },
-  methods: {
-    getImagePath (width, height = width) {
-      return `https://picsum.photos/${width}/${height}`
-    },
-    newImage () {
-      this.slotImageSize = this.slotImageSize !== 1500 ? 1500 : 1501
-    },
-    wrongPath () {
-      this.slotImageSize = -1
-    },
-  },
-}
+const slotImageSize = ref(1500)
+
+const getImagePath = (width, height = 0) => `https://picsum.photos/${width}/${height || width}`
+const newImage = () => (slotImageSize.value = slotImageSize.value !== 1500 ? 1500 : 1501)
+const wrongPath = () => (slotImageSize.value = -1)
+
+const slotImagePath = computed(() => getImagePath(slotImageSize.value))
 </script>
 
 <style lang="scss" scoped>
-.row {
+@mixin flex-center {
   display: flex;
-  flex: 1 0 100%;
-  flex-wrap: wrap;
-  flex-direction: row;
   align-items: center;
   justify-content: center;
 }
 
-.row + .row {
-  margin-top: 20px;
-}
-
 .image {
   width: 200px;
-  height: 200px;
-}
-
-.image--medium {
-  width: 400px;
-  height: 400px;
-}
-
-.image--large {
-  width: 600px;
-  height: 600px;
-}
-
-.image--landscape {
-  width: 400px;
-  height: 250px;
-}
-
-.image--portrait {
-  width: 250px;
-  height: 400px;
 }
 
 .loading,
 .error {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  @include flex-center;
 }
 
 .overlay {
   position: absolute;
   left: 0;
   right: 0;
-  text-align: center;
-  padding: 20px;
+  background: rgba(0, 0, 0, 0.5);
   color: white;
-  background: rgba(0, 0, 0, 0.2);
 
+  &--whole,
   &--top {
     top: 0;
   }
 
+  &--whole,
   &--bottom {
     bottom: 0;
   }
+
+  &--whole,
+  &--top,
+  &--bottom {
+    @include flex-center;
+  }
 }
 </style>
diff --git a/packages/ui/src/components/va-image/VaImage.vue b/packages/ui/src/components/va-image/VaImage.vue
index 340d7eb91e..92cff2c54d 100644
--- a/packages/ui/src/components/va-image/VaImage.vue
+++ b/packages/ui/src/components/va-image/VaImage.vue
@@ -1,122 +1,206 @@
 <template>
-  <div class="va-image" aria-live="polite">
-    <div
-      v-if="loadingError"
-      class="va-image__error"
+  <va-aspect-ratio v-bind="aspectRationAttributesComputed">
+    <picture
+      v-show="isSuccessfullyLoaded"
+      class="va-image"
+      :aria-busy="isLoading"
     >
-      <slot name="error" />
-    </div>
+      <slot v-if="$slots.sources" name="sources" />
 
-    <div :style="paddingStyles" />
-    <div
-      v-show="!loadingError && !loading"
-      class="va-image__img"
-    >
       <img
-        :style="imageStyles"
-        :src="$props.src"
-        :alt="$props.alt"
-        :draggable="$props.draggable"
+        ref="image"
+        v-bind="imgAttributesComputed"
         @error="handleError"
         @load="handleLoad"
       />
-    </div>
-    <div class="va-image__overlay">
+    </picture>
+
+    <div
+      v-if="$slots.default && isSuccessfullyLoaded"
+      class="va-image__overlay"
+    >
       <slot />
     </div>
+
+    <div
+      v-if="isError && $slots.error"
+      class="va-image__error"
+    >
+      <slot name="error" />
+    </div>
+
     <div
-      v-if="loading"
+      v-if="isLoading && $slots.loader"
       class="va-image__loader"
     >
       <slot name="loader" />
     </div>
-  </div>
+
+    <div
+      v-if="isPlaceholderShown"
+      class="va-image__placeholder"
+    >
+      <slot name="placeholder" />
+    </div>
+  </va-aspect-ratio>
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, watch, ref } from 'vue'
-import { useComponentPresetProp } from '../../composables/useComponentPreset'
+import { defineComponent, ref, computed, watch, nextTick, onBeforeUnmount, type PropType } from 'vue'
+
+import { VaAspectRatio } from '../va-aspect-ratio'
+
+import {
+  useNativeImgAttributes, useNativeImgAttributesProps,
+  validateProp,
+} from './hooks/useNativeImgAttributes'
+import { useComponentPresetProp } from '../../composables'
+
+const fitOptions = ['contain', 'fill', 'cover', 'scale-down', 'none'] as const
 
 export default defineComponent({
   name: 'VaImage',
+
+  components: { VaAspectRatio },
+
   emits: ['loaded', 'error'],
+
   props: {
     ...useComponentPresetProp,
-    ratio: { type: Number, default: 1 },
-    contain: { type: Boolean, default: false },
-    src: { type: String, required: true },
-    alt: { type: String, default: '' },
-    draggable: { type: Boolean, default: true },
+    ...useNativeImgAttributesProps,
+    ratio: { type: Number, validator: (v: number) => v >= 0 },
+    fit: {
+      type: String as PropType<typeof fitOptions[number]>,
+      default: 'cover',
+      validator: (v: string) => validateProp(v, fitOptions),
+    },
   },
-  setup (props, { emit }) {
-    const loading = ref(false)
-    const loadingError = ref(false)
 
-    const imageStyles = computed(() => ({
-      objectFit: props.contain ? 'contain' as const : 'cover' as const,
-    }))
+  setup (props, { emit, slots }) {
+    const image = ref<HTMLImageElement>()
+    const renderedImage = ref()
+    const currentImage = computed(() => renderedImage.value || props.src)
 
-    const paddingStyles = computed(() => ({
-      paddingBottom: `${1 / props.ratio * 100}%`,
-    }))
+    const imgWidth = ref(1)
+    const imgHeight = ref(1)
+
+    const isLoading = ref(false)
+    const isError = ref(false)
 
     const handleLoad = () => {
-      loading.value = false
-      emit('loaded', props.src)
+      isLoading.value = false
+
+      getImgSizes()
+
+      emit('loaded', currentImage.value)
+    }
+
+    const handleError = (err?: Event) => {
+      isError.value = true
+      isLoading.value = false
+
+      emit('error', err || currentImage.value)
     }
 
-    const handleError = (err: Event) => {
-      loadingError.value = true
-      loading.value = false
-      emit('error', err)
+    const init = () => {
+      if (!props.src || isLoading.value) {
+        return
+      }
+
+      isLoading.value = true
+      isError.value = false
+
+      nextTick(() => {
+        if (!image.value?.complete) {
+          return
+        }
+        renderedImage.value = image.value?.currentSrc
+
+        if (!image.value.naturalWidth) {
+          handleError()
+          return
+        }
+
+        handleLoad()
+      })
+    }
+
+    let timer: ReturnType<Window['setTimeout']>
+    const getImgSizes = () => {
+      clearTimeout(timer)
+
+      if (isLoading.value) {
+        timer = window.setTimeout(getImgSizes, 100)
+      }
+
+      const { naturalHeight, naturalWidth } = image.value || {}
+      if (naturalHeight && naturalWidth) {
+        imgWidth.value = naturalHeight
+        imgHeight.value = naturalWidth
+      }
     }
+    onBeforeUnmount(() => clearTimeout(timer))
+
+    watch(() => props.src, init)
+
+    const isPlaceholderShown = computed(() =>
+      ((isLoading.value && !slots?.loader?.()) || (isError.value && !slots?.error?.())) && slots?.placeholder?.())
+
+    const isSuccessfullyLoaded = computed(() => !(isLoading.value || isError.value))
 
-    watch(() => props.src, () => {
-      loading.value = true
-      loadingError.value = false
-    })
+    const imgAttributesComputed = useNativeImgAttributes(props)
+
+    const aspectRationAttributesComputed = computed(() => ({
+      contentWidth: imgWidth.value,
+      contentHeight: imgHeight.value,
+      ratio: props.ratio,
+    }))
 
     return {
-      loading,
-      loadingError,
-      imageStyles,
-      paddingStyles,
+      image,
+      isLoading,
       handleLoad,
+      isError,
       handleError,
+      isPlaceholderShown,
+      isSuccessfullyLoaded,
+      imgAttributesComputed,
+      aspectRationAttributesComputed,
     }
   },
 })
 </script>
 
 <style lang="scss">
-@import "../../styles/resources";
-@import "variables";
+@import 'variables';
+
+@mixin absolute {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
 
 .va-image {
-  overflow: var(--va-image-overflow);
-  position: var(--va-image-position);
-  font-family: var(--va-font-family);
+  @include absolute;
 
   img {
-    height: 100%;
     width: 100%;
+    height: 100%;
+    object-fit: v-bind(fit);
+    object-position: var(--va-image-object-position);
   }
 
-  &__img,
+  &__placeholder,
   &__loader,
   &__error,
   &__overlay {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
+    @include absolute;
 
-  &__loader,
-  &__error,
-  &__overlay {
-    @include flex-center();
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
 }
 </style>
diff --git a/packages/ui/src/components/va-image/_variables.scss b/packages/ui/src/components/va-image/_variables.scss
index 2e1a9fcc47..f6e3009fb6 100644
--- a/packages/ui/src/components/va-image/_variables.scss
+++ b/packages/ui/src/components/va-image/_variables.scss
@@ -1,6 +1,3 @@
 :root {
-  --va-image-overflow: hidden;
-  --va-image-position: relative;
-  --va-image-img-background-position: 50% 50%;
-  --va-image-img-background-repeat: no-repeat;
+  --va-image-object-position: 50% 50%;
 }
diff --git a/packages/ui/src/components/va-image/hooks/useNativeImgAttributes.ts b/packages/ui/src/components/va-image/hooks/useNativeImgAttributes.ts
new file mode 100644
index 0000000000..7b2a382a48
--- /dev/null
+++ b/packages/ui/src/components/va-image/hooks/useNativeImgAttributes.ts
@@ -0,0 +1,49 @@
+import { computed, type ExtractPropTypes, type PropType } from 'vue'
+import pick from 'lodash/pick'
+
+const referrerPolicyOptions = ['no-referrer', 'no-referrer-when-downgrade', 'origin', 'origin-when-cross-origin', 'same-origin', 'strict-origin', 'strict-origin-when-cross-origin', 'unsafe-url'] as const
+const loadingOptions = ['lazy', 'eager'] as const
+const crossoriginOptions = ['anonymous', 'use-credentials'] as const
+const decodingOptions = ['auto', 'sync', 'async'] as const
+const fetchpriorityOptions = ['auto', 'high', 'low'] as const
+
+export const validateProp = (v: string, arr: Readonly<string[]>) => arr.includes(v)
+
+export const useNativeImgAttributesProps = {
+  src: { type: String, required: true },
+  alt: { type: String, default: '' },
+  title: { type: String, default: '' },
+  sizes: { type: String, default: '' },
+  scrset: { type: String, default: '' },
+  lazy: { type: Boolean, default: false },
+  notDraggable: { type: Boolean, default: false },
+  loading: {
+    type: String as PropType<typeof loadingOptions[number]>,
+    default: 'lazy',
+    validator: (v: string) => validateProp(v, loadingOptions),
+  },
+  crossorigin: {
+    type: String as PropType<typeof crossoriginOptions[number]>,
+    validator: (v: string) => validateProp(v, crossoriginOptions),
+  },
+  decoding: {
+    type: String as PropType<typeof decodingOptions[number]>,
+    validator: (v: string) => validateProp(v, decodingOptions),
+  },
+  fetchpriority: {
+    type: String as PropType<typeof fetchpriorityOptions[number]>,
+    default: 'auto',
+    validator: (v: string) => validateProp(v, fetchpriorityOptions),
+  },
+  referrerpolicy: {
+    type: String as PropType<typeof referrerPolicyOptions[number]>,
+    validator: (v: string) => validateProp(v, referrerPolicyOptions),
+  },
+}
+
+export const useNativeImgAttributes = (props: ExtractPropTypes<typeof useNativeImgAttributesProps>) => {
+  return computed(() => ({
+    ...pick(props, ['src', 'alt', 'title', 'sizes', 'scrset', 'lazy', 'loading', 'referrerpolicy', 'fetchpriority', 'decoding', 'crossorigin']),
+    draggable: !props.notDraggable,
+  }))
+}
diff --git a/packages/ui/src/services/vue-plugin/components.ts b/packages/ui/src/services/vue-plugin/components.ts
index 85375b347d..e82a278f65 100644
--- a/packages/ui/src/services/vue-plugin/components.ts
+++ b/packages/ui/src/services/vue-plugin/components.ts
@@ -3,6 +3,7 @@ export {
   VaAffix,
   VaAlert,
   VaAppBar,
+  VaAspectRatio,
   VaAvatar,
   VaAvatarGroup,
   VaBacktop,

From 00dbafd049d246b0bdeb61d77146a9db00789285 Mon Sep 17 00:00:00 2001
From: aluarius <ruseomaster@gmail.com>
Date: Fri, 13 Jan 2023 15:40:00 +0700
Subject: [PATCH 02/14] merge

---
 packages/docs/.gitignore                      |    2 +
 packages/docs/package.json                    |    8 +-
 packages/docs/postcss.config.js               |    6 +
 packages/docs/src/assets/main.scss            |    1 +
 packages/docs/src/assets/tailwind.scss        |    3 +
 packages/docs/src/components/DocsContent.vue  |    2 +-
 .../header/components/LanguageDropdown.vue    |    7 +-
 .../src/components/landing/LandingFooter.vue  |    2 +-
 .../docs/src/helpers/CodeSandboxExample.ts    |    6 +-
 packages/docs/src/layouts/default.vue         |    2 +-
 packages/docs/src/locales/en/en.json          |   14 +-
 packages/docs/src/locales/ru/ru.json          |    6 +-
 .../tree-shaking/page-config.ts               |    2 +-
 .../roadmap/components/roadmap.vue            |    2 +-
 .../colors-config/examples/change-colors.vue  |    2 +-
 .../colors-config/examples/css-variable.vue   |    4 +-
 .../services/colors-config/page-config.ts     |   16 +-
 .../components-config/examples/button.vue     |    2 +-
 .../components-config/examples/presets.vue    |    2 +-
 .../components-config/examples/priority.vue   |    2 +-
 .../icons-config/components/playground.vue    |    5 +-
 .../components/component-examples.vue         |    4 +-
 .../styles/css-variables/examples/profile.vue |    4 +-
 .../styles/grid/examples/AlignContent.vue     |   30 +-
 .../styles/grid/examples/AlignDefault.vue     |    8 +-
 .../styles/grid/examples/AlignJustify.vue     |   36 +-
 .../styles/grid/examples/AlignSelf.vue        |    8 +-
 .../styles/grid/examples/Breakpoints.vue      |   12 +-
 .../styles/grid/examples/Default.vue          |    2 +-
 .../styles/grid/examples/Gutters.vue          |    8 +-
 .../styles/grid/examples/Offsets.vue          |   12 +-
 .../styles/smart-helpers/examples/Gutters.vue |   10 +-
 .../styles/smart-helpers/examples/Spacing.vue |   12 +-
 .../ui-elements/alert/examples/Border.vue     |   10 +-
 .../ui-elements/alert/examples/Center.vue     |    4 +-
 .../ui-elements/alert/examples/Closeable.vue  |   10 +-
 .../ui-elements/alert/examples/Color.vue      |   14 +-
 .../ui-elements/alert/examples/Default.vue    |    2 +-
 .../ui-elements/alert/examples/Dense.vue      |    6 +-
 .../ui-elements/alert/examples/Icon.vue       |    4 +-
 .../ui-elements/alert/examples/Styles.vue     |    6 +-
 .../ui-elements/alert/examples/Title.vue      |    4 +-
 .../ui-elements/avatar/examples/Color.vue     |   12 +-
 .../ui-elements/avatar/examples/Default.vue   |    2 +-
 .../ui-elements/avatar/examples/Fallback.vue  |    2 +-
 .../ui-elements/avatar/examples/Size.vue      |    6 +-
 .../ui-elements/avatar/examples/Square.vue    |    2 +-
 .../ui-elements/avatar/examples/WithIcon.vue  |    2 +-
 .../ui-elements/avatar/examples/WithImage.vue |    2 +-
 .../ui-elements/backtop/examples/Default.vue  |    2 +-
 .../ui-elements/badge/examples/Color.vue      |    8 +-
 .../ui-elements/badge/examples/Default.vue    |    2 +-
 .../ui-elements/badge/examples/Dot.vue        |    2 +-
 .../ui-elements/badge/examples/Overlap.vue    |    2 +-
 .../ui-elements/badge/examples/Position.vue   |    4 +-
 .../badge/examples/Transparent.vue            |    2 +-
 .../badge/examples/WithOtherComponents.vue    |    6 +-
 .../breadcrumbs/examples/Separator.vue        |    6 +-
 .../button-dropdown/examples/ClickInside.vue  |    2 +-
 .../button-group/examples/Colors.vue          |    6 +-
 .../button-group/examples/Gradient.vue        |    6 +-
 .../button-group/examples/Icons.vue           |    4 +-
 .../button-group/examples/Sizes.vue           |    4 +-
 .../button-group/examples/Styles.vue          |   14 +-
 .../button-toggle/examples/Colors.vue         |    4 +-
 .../button-toggle/examples/Disabled.vue       |    2 +-
 .../button-toggle/examples/Gradient.vue       |    6 +-
 .../button-toggle/examples/Icons.vue          |    2 +-
 .../button-toggle/examples/Sizes.vue          |    2 +-
 .../button-toggle/examples/Styles.vue         |    8 +-
 .../ui-elements/button/examples/Behavior.vue  |    4 +-
 .../ui-elements/button/examples/Disabled.vue  |   10 +-
 .../ui-elements/button/examples/Presets.vue   |    8 +-
 .../ui-elements/button/examples/Tag.vue       |    4 +-
 .../ui-elements/button/examples/WithColor.vue |    6 +-
 .../button/examples/WithGradient.vue          |    6 +-
 .../button/examples/WithLoading.vue           |    6 +-
 .../button/examples/WithOutline.vue           |    4 +-
 .../ui-elements/button/examples/WithRound.vue |    6 +-
 .../ui-elements/button/examples/WithSize.vue  |    6 +-
 .../ui-elements/card/examples/Actions.vue     |    4 +-
 .../card/examples/BorderAndShape.vue          |    4 +-
 .../card/examples/ColorAndGradient.vue        |    2 +-
 .../ui-elements/card/examples/Default.vue     |    2 +-
 .../ui-elements/card/examples/Disabled.vue    |    2 +-
 .../ui-elements/card/examples/Horizontal.vue  |    6 +-
 .../ui-elements/card/examples/Image.vue       |    2 +-
 .../ui-elements/card/examples/Link.vue        |    2 +-
 .../ui-elements/card/examples/Stripe.vue      |    2 +-
 .../ui-elements/card/examples/Tag.vue         |    2 +-
 .../ui-elements/checkbox/examples/Array.vue   |   10 +-
 .../checkbox/examples/Coloring.vue            |    4 +-
 .../ui-elements/checkbox/examples/Label.vue   |    6 +-
 .../ui-elements/chip/examples/Color.vue       |    2 +-
 .../ui-elements/chip/examples/Icon.vue        |    4 +-
 .../ui-elements/chip/examples/Size.vue        |    2 +-
 .../ui-elements/collapse/examples/Color.vue   |    8 +-
 .../ui-elements/counter/examples/Buttons.vue  |    6 +-
 .../counter/examples/ButtonsStyle.vue         |    8 +-
 .../ui-elements/counter/examples/Default.vue  |    6 +-
 .../ui-elements/counter/examples/Hint.vue     |    4 +-
 .../counter/examples/IconsColors.vue          |    6 +-
 .../counter/examples/MaxMinStep.vue           |    4 +-
 .../ui-elements/counter/examples/Slots.vue    |    6 +-
 .../ui-elements/counter/examples/State.vue    |    8 +-
 .../ui-elements/counter/examples/Style.vue    |    6 +-
 .../ui-elements/counter/examples/Width.vue    |    4 +-
 .../data-table/examples/Binding.vue           |    6 +-
 .../ui-elements/data-table/examples/CRUD.vue  |    4 +-
 .../data-table/examples/Filtering.vue         |    4 +-
 .../ui-elements/data-table/examples/Other.vue |    6 +-
 .../data-table/examples/Pagination.vue        |    6 +-
 .../data-table/examples/Selection.vue         |    6 +-
 .../data-table/examples/Sorting.vue           |    4 +-
 .../data-table/examples/Styling.vue           |   22 +-
 .../ui-elements/date-input/examples/View.vue  |    8 +-
 .../date-input/examples/inputProps.vue        |   14 +-
 .../ui-elements/date-input/examples/mode.vue  |    6 +-
 .../date-input/examples/resetOnClose.vue      |    4 +-
 .../date-input/examples/validation.vue        |    4 +-
 .../date-picker/examples/Color.vue            |    6 +-
 .../date-picker/examples/Disabled.vue         |    6 +-
 .../date-picker/examples/DisabledDates.vue    |    6 +-
 .../date-picker/examples/FirstWeekday.vue     |    4 +-
 .../ui-elements/date-picker/examples/Mode.vue |    6 +-
 .../date-picker/examples/Readonly.vue         |    6 +-
 .../date-picker/examples/Stateful.vue         |    6 +-
 .../ui-elements/date-picker/examples/Type.vue |    6 +-
 .../ui-elements/date-picker/examples/View.vue |    6 +-
 .../date-picker/examples/Weekends.vue         |    4 +-
 .../divider/examples/CustomContent.vue        |   10 +-
 .../ui-elements/divider/examples/Dashed.vue   |    8 +-
 .../ui-elements/divider/examples/Default.vue  |    2 +-
 .../ui-elements/divider/examples/Inset.vue    |    2 +-
 .../ui-elements/divider/examples/Vertical.vue |    8 +-
 .../ui-elements/divider/examples/WithList.vue |   12 +-
 .../dropdown/examples/PlacementAndOffset.vue  |    2 +-
 .../ui-elements/file-upload/examples/Undo.vue |    8 +-
 .../ui-elements/form/examples/WithInputs.vue  |    2 +-
 .../ui-elements/icon/examples/Rotation.vue    |    4 +-
 .../ui-elements/image/examples/Contain.vue    |    4 +-
 .../ui-elements/image/examples/Default.vue    |    2 +-
 .../image/examples/DefaultSlot.vue            |    2 +-
 .../ui-elements/image/examples/ErrorSlot.vue  |    2 +-
 .../ui-elements/image/examples/LoaderSlot.vue |    2 +-
 .../ui-elements/image/examples/Ratio.vue      |    4 +-
 .../infinite-scroll/examples/CustomTarget.vue |    4 +-
 .../infinite-scroll/examples/Default.vue      |    2 +-
 .../infinite-scroll/examples/Disabled.vue     |    2 +-
 .../infinite-scroll/examples/Reverse.vue      |    2 +-
 .../ui-elements/input/examples/Default.vue    |    6 +-
 .../input/examples/ExtendedDefault.vue        |   14 +-
 .../ui-elements/input/examples/Hint.vue       |    4 +-
 .../ui-elements/input/examples/Mask.vue       |   12 +-
 .../ui-elements/input/examples/Slots.vue      |    8 +-
 .../ui-elements/input/examples/Styles.vue     |   20 +-
 .../ui-elements/input/examples/Textarea.vue   |    8 +-
 .../ui-elements/input/examples/Types.vue      |   12 +-
 .../ui-elements/input/examples/Validate.vue   |   10 +-
 .../ui-elements/modal/examples/Anchor.vue     |    4 +-
 .../ui-elements/modal/examples/Create.vue     |    4 +-
 .../modal/examples/HidingOverlay.vue          |    4 +-
 .../modal/examples/ModalSizing.vue            |    4 +-
 .../modal/examples/NestedModals.vue           |    2 +-
 .../modal/examples/ScrollingLongContent.vue   |    4 +-
 .../modal/examples/ToggleVisibility.vue       |    4 +-
 .../ui-elements/navbar/examples/Height.vue    |    2 +-
 .../pagination/examples/ActiveColor.vue       |    4 +-
 .../pagination/examples/Bordered.vue          |    4 +-
 .../pagination/examples/Colors.vue            |    2 +-
 .../pagination/examples/Gapped.vue            |    4 +-
 .../pagination/examples/Presets.vue           |    4 +-
 .../pagination/examples/Rounded.vue           |    4 +-
 .../ui-elements/pagination/examples/Sizes.vue |    4 +-
 .../ui-elements/parallax/examples/Slot.vue    |    8 +-
 .../progress-bar/examples/Buffer.vue          |    4 +-
 .../progress-bar/examples/Coloring.vue        |    2 +-
 .../progress-bar/examples/Default.vue         |    2 +-
 .../progress-bar/examples/Indeterminate.vue   |    2 +-
 .../ui-elements/progress-bar/examples/Max.vue |    2 +-
 .../progress-bar/examples/Sizing.vue          |    2 +-
 .../progress-bar/examples/Slots.vue           |    6 +-
 .../progress-circle/examples/Coloring.vue     |    2 +-
 .../progress-circle/examples/Default.vue      |    2 +-
 .../examples/Indeterminate.vue                |    2 +-
 .../progress-circle/examples/Sizing.vue       |    2 +-
 .../progress-circle/examples/Slots.vue        |    2 +-
 .../progress-circle/examples/Thickness.vue    |    2 +-
 .../ui-elements/rating/examples/Numbers.vue   |    2 +-
 .../select/examples/AllowCreate.vue           |    6 +-
 .../select/examples/Decorators.vue            |   24 +-
 .../select/examples/ObjectOptions.vue         |   10 +-
 .../ui-elements/select/examples/Slots.vue     |   12 +-
 .../ui-elements/select/examples/State.vue     |   12 +-
 .../ui-elements/select/examples/Styles.vue    |   10 +-
 .../ui-elements/select/examples/Tagging.vue   |    2 +-
 .../ui-elements/select/examples/TrackBy.vue   |    4 +-
 .../select/examples/Variations.vue            |    4 +-
 .../ui-elements/sidebar/examples/Color.vue    |    8 +-
 .../ui-elements/sidebar/examples/Gradient.vue |    2 +-
 .../slider/examples/TrackLabel.vue            |    6 +-
 .../ui-elements/slider/examples/Vertical.vue  |    6 +-
 .../split/examples/CustomGrabber.vue          |    4 +-
 .../split/examples/CustomLimits.vue           |    4 +-
 .../ui-elements/split/examples/Disabled.vue   |    4 +-
 .../split/examples/Maximization.vue           |    4 +-
 .../ui-elements/split/examples/Nested.vue     |   15 +-
 .../ui-elements/split/examples/Snapping.vue   |    4 +-
 .../ui-elements/split/examples/Vertical.vue   |    4 +-
 .../ui-elements/switch/examples/Color.vue     |    8 +-
 .../ui-elements/switch/examples/Error.vue     |    6 +-
 .../switch/examples/InnerLabel.vue            |    4 +-
 .../ui-elements/switch/examples/Label.vue     |   18 +-
 .../ui-elements/switch/examples/Size.vue      |    6 +-
 .../ui-elements/switch/examples/State.vue     |    4 +-
 .../time-input/examples/validation.vue        |    2 +-
 .../tree-view/examples/Selectable.vue         |   23 +-
 .../tree-view/examples/SelectableColored.vue  |   81 +
 .../ui-elements/tree-view/page-config.ts      |    2 +
 .../examples/DifferentContent.vue             |    2 +-
 packages/docs/tailwind.config.js              |    8 +
 packages/docs/tsconfig.json                   |    2 +
 packages/sandbox/.gitignore                   |    5 +-
 packages/sandbox/README.md                    |    8 +-
 packages/sandbox/analysis/.keep               |    0
 .../sandbox/configs/vite/common-config.ts     |    8 +-
 packages/sandbox/package.json                 |    7 +-
 packages/sandbox/scripts/bundle-analysis.ts   |   52 +-
 packages/sandbox/src/app.vue                  |    2 +-
 packages/sandbox/test/tree-shaking.test.ts    |    1 -
 .../va-avatar-group/VaAvatarGroup.demo.vue    |    6 +-
 .../components/va-avatar/VaAvatar.demo.vue    |   12 +-
 .../va-breadcrumbs/VaBreadcrumbs.vue          |    6 +-
 .../va-button/hooks/useButtonTextColor.ts     |   57 +-
 .../ui/src/components/va-card/VaCard.demo.vue |   14 +-
 .../src/components/va-checkbox/VaCheckbox.vue |    8 +-
 .../src/components/va-counter/VaCounter.vue   |    6 +-
 .../va-date-input/VaDateInput.demo.vue        |   44 +-
 .../va-date-picker/VaDatePicker.demo.vue      |   28 +-
 .../va-file-upload/VaFileUpload.demo.vue      |    2 +-
 .../src/components/va-input/VaInput.demo.vue  |   14 +-
 .../ui/src/components/va-input/VaInput.vue    |   10 +-
 .../src/components/va-input/_variables.scss   |    1 -
 .../VaInputWrapper/VaInputWrapper.vue         |    7 +-
 .../src/components/va-modal/VaModal.demo.vue  |    4 +-
 .../components/va-navbar/VaNavbar.demo.vue    |    2 +-
 .../ui/src/components/va-navbar/VaNavbar.vue  |   26 +-
 .../src/components/va-navbar/_variables.scss  |    4 +-
 .../components/va-popover/VaPopover.demo.vue  |   22 +-
 .../va-progress-bar/VaProgressBar.vue         |    4 +-
 .../va-progress-circle/VaProgressCircle.vue   |    4 +-
 .../components/va-select/VaSelect.demo.vue    |  128 +-
 .../ui/src/components/va-slider/VaSlider.vue  |    4 +-
 .../ui/src/components/va-switch/VaSwitch.vue  |    6 +-
 .../components/va-time-input/VaTimeInput.vue  |   10 +-
 .../va-time-picker/VaTimePicker.demo.vue      |    4 +-
 .../VaTreeViewKeyboardNavigation.demo.vue     |  188 ++
 .../components/VaTreeNode/VaTreeNode.vue      |   48 +-
 .../va-tree-view/hooks/useTreeHelpers.ts      |    6 +-
 .../hooks/useTreeKeyboardNavigation.ts        |  170 ++
 .../va-tree-view/hooks/useTreeView.ts         |   24 +-
 .../ui/src/components/va-tree-view/types.ts   |   10 +-
 .../VaVirtualScroller.demo.vue                |    2 +-
 .../color/ColorCSSVariablesUpdater.demo.vue   |    2 +-
 .../src/styles/global/color-themes.demo.vue   |   10 +-
 .../src/styles/grid/_grid-global-styles.scss  |   65 +-
 packages/ui/src/styles/grid/_grid-mixins.scss |    8 -
 .../ui/src/styles/grid/_grid-spacing.scss     |  103 +-
 packages/ui/src/vue-book/book-main.scss       |    1 +
 yarn.lock                                     | 2188 ++++++++++++++---
 270 files changed, 3343 insertions(+), 1339 deletions(-)
 create mode 100644 packages/docs/postcss.config.js
 create mode 100644 packages/docs/src/assets/tailwind.scss
 create mode 100644 packages/docs/src/page-configs/ui-elements/tree-view/examples/SelectableColored.vue
 create mode 100644 packages/docs/tailwind.config.js
 create mode 100644 packages/sandbox/analysis/.keep
 create mode 100644 packages/ui/src/components/va-tree-view/VaTreeViewKeyboardNavigation.demo.vue
 create mode 100644 packages/ui/src/components/va-tree-view/hooks/useTreeKeyboardNavigation.ts

diff --git a/packages/docs/.gitignore b/packages/docs/.gitignore
index 403adbc1e5..0d4d40fc09 100644
--- a/packages/docs/.gitignore
+++ b/packages/docs/.gitignore
@@ -21,3 +21,5 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+
+tree-shaking.md
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 73e2cb69a6..6af176bb87 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -3,10 +3,10 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "serve": "yarn build:analysis && vue-cli-service serve",
+    "serve": "yarn build:analysis --use-cache && vue-cli-service serve",
     "build": "yarn build:analysis && vue-cli-service build",
     "build:ci": "yarn build:analysis && vue-cli-service build",
-    "build:analysis": "npx lerna run build:bundle-analysis --scope=sandbox",
+    "build:analysis": "yarn workspace sandbox build:analysis ../docs/src/page-configs/getting-started/tree-shaking",
     "lint": "vue-cli-service lint",
     "lint:style": "stylelint '**/*.{vue,html,css,scss}' --fix",
     "test:unit": "vue-cli-service test:unit",
@@ -40,6 +40,7 @@
     "vue-router": "^4.0.3"
   },
   "devDependencies": {
+    "@tailwindcss/postcss7-compat": "^2.2.17",
     "@types/dedent": "^0.7.0",
     "@types/jest": "^26.0.20",
     "@types/lodash": "^4.14.168",
@@ -57,6 +58,7 @@
     "@vue/compiler-sfc": "^3.0.5",
     "@vue/eslint-config-standard": "^6.0.0",
     "@vue/eslint-config-typescript": "^7.0.0",
+    "autoprefixer": "^9",
     "eslint": "^7.19.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-node": "^11.1.0",
@@ -66,9 +68,11 @@
     "i18n-unused": "^0.4.2",
     "lint-staged": "^11.1.2",
     "plop": "^2.7.0",
+    "postcss": "^7",
     "sass-loader": "^10.1.1",
     "stylelint": "^13.13.1",
     "stylelint-config-standard": "^22.0.0",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
     "ts-jest": "^26.5.4",
     "ts-node": "^10.9.1",
     "typescript": "^4.2.4",
diff --git a/packages/docs/postcss.config.js b/packages/docs/postcss.config.js
new file mode 100644
index 0000000000..33ad091d26
--- /dev/null
+++ b/packages/docs/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/packages/docs/src/assets/main.scss b/packages/docs/src/assets/main.scss
index 719e146e61..27b0cc0007 100644
--- a/packages/docs/src/assets/main.scss
+++ b/packages/docs/src/assets/main.scss
@@ -3,3 +3,4 @@
 @import "./smart-grid.scss";
 @import "./colors.scss";
 @import "./fonts.scss";
+@import "./tailwind.scss";
diff --git a/packages/docs/src/assets/tailwind.scss b/packages/docs/src/assets/tailwind.scss
new file mode 100644
index 0000000000..52ac7366df
--- /dev/null
+++ b/packages/docs/src/assets/tailwind.scss
@@ -0,0 +1,3 @@
+//@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/packages/docs/src/components/DocsContent.vue b/packages/docs/src/components/DocsContent.vue
index 94ba58e688..0e4a534a68 100644
--- a/packages/docs/src/components/DocsContent.vue
+++ b/packages/docs/src/components/DocsContent.vue
@@ -89,7 +89,7 @@
         :header="block.header"
         solid
       >
-        <div class="pa-4">
+        <div class="p-6">
           <DocsContent :config="block.blocks" />
         </div>
       </VaCollapse>
diff --git a/packages/docs/src/components/header/components/LanguageDropdown.vue b/packages/docs/src/components/header/components/LanguageDropdown.vue
index ddaf613749..ad9c97b989 100644
--- a/packages/docs/src/components/header/components/LanguageDropdown.vue
+++ b/packages/docs/src/components/header/components/LanguageDropdown.vue
@@ -10,7 +10,7 @@
       <va-list-item
         v-for="(language, id) in languages"
         :key="id"
-        class="language-dropdown__item row align-center py-2 va-link"
+        class="language-dropdown__item row align-center va-link"
         :class="{ active: language.code === locale }"
         @click="setLanguage(language.code)"
       >
@@ -19,7 +19,7 @@
         </va-list-item-section>
       </va-list-item>
       <va-list-item
-        class="language-dropdown__item va-link row align-center py-2"
+        class="language-dropdown__item va-link row align-center"
         :to="`/${locale}/contribution/translation`"
       >
         <va-list-item-section :style="{color: colors.primary}">
@@ -70,7 +70,8 @@ export default defineComponent({
   }
 
   &__item {
-    padding-bottom: 0.625rem;
+    @apply py-1.5;
+
     cursor: pointer;
     flex-wrap: nowrap;
     font-weight: 600;
diff --git a/packages/docs/src/components/landing/LandingFooter.vue b/packages/docs/src/components/landing/LandingFooter.vue
index 9b9c043954..1fd9e57bf0 100644
--- a/packages/docs/src/components/landing/LandingFooter.vue
+++ b/packages/docs/src/components/landing/LandingFooter.vue
@@ -2,7 +2,7 @@
   <footer class="footer" :style="{ color: textColor }">
     <div class="footer__wrapper">
       <div class="footer__inner">
-        <LandingEpicmaxBanner class="mb-4 " />
+        <LandingEpicmaxBanner class="mb-6 " />
         <div class="footer__buttons">
           <va-button
             class="footer__buttons__button"
diff --git a/packages/docs/src/helpers/CodeSandboxExample.ts b/packages/docs/src/helpers/CodeSandboxExample.ts
index 9294d42c10..412f7bf603 100644
--- a/packages/docs/src/helpers/CodeSandboxExample.ts
+++ b/packages/docs/src/helpers/CodeSandboxExample.ts
@@ -32,7 +32,7 @@ const viteEnv = `declare module '*.vue' {
 `
 
 const defaultExample = `<template>
-  <div class="pa-4">
+  <div class="p-6">
     Hello, Vuestic-UI v${packageUi.version}
   </div>
 </template>
@@ -48,6 +48,10 @@ const getCodeSandboxHtml = ({ requireIcons = false }: CodesandboxConfig): string
       href="https://fonts.googleapis.com/icon?family=Material+Icons"
       rel="stylesheet"
     >
+    <link
+      href="https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css"
+      rel="stylesheet"
+    >
     ${requireIcons ? iconsStyles : ''}
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
diff --git a/packages/docs/src/layouts/default.vue b/packages/docs/src/layouts/default.vue
index 606c649775..59ad5a2ef3 100644
--- a/packages/docs/src/layouts/default.vue
+++ b/packages/docs/src/layouts/default.vue
@@ -28,7 +28,7 @@
 <!--          </template>-->
 <!--        </va-breadcrumbs>-->
 
-        <div class="layout va-gutter-5 pb-6">
+        <div class="layout va-gutter-5">
           <router-view />
         </div>
       </div>
diff --git a/packages/docs/src/locales/en/en.json b/packages/docs/src/locales/en/en.json
index 941cb432a3..9b2fd99bee 100644
--- a/packages/docs/src/locales/en/en.json
+++ b/packages/docs/src/locales/en/en.json
@@ -1452,7 +1452,8 @@
         "checked": "Array of pre-selected tree nodes.",
         "checkedBy": "The key to set the checked field in the tree view model.",
         "color": "The checkboxes color.",
-        "expanded": "Array of pre-expanded tree nodes."
+        "expanded": "Array of pre-expanded tree nodes.",
+        "expandNodeBy": "Click target to expand node, can be `node` or `leaf` icon."
       },
       "slots": {
         "notFound": "No matching nodes to the filter message.",
@@ -4080,7 +4081,7 @@
     },
     "reactivity": {
       "subtitle": "Reactivity",
-      "about": "As you can see, methods like `getColor`, `getColors` don’t return `Proxy`. If you want to use color as reactive Proxy, use computed properties like in the example above."
+      "about": "Methods like `getColors` return a computed reactives that can also be accessed by variable `colors`. The advantage is allow to change properties, instead of rewriting whole colors variable. For example, you can change `primary` color by writing `colors.primary = '#ff0'`. Multiple properties changes are also supported, you can write `setColors({ primary: '#00f', secondary: '#0ff' })`."
     },
     "otherServices": {
       "subtitle": "Colors config with other services",
@@ -4094,7 +4095,7 @@
       "ColorConfig": "An object where the keys are the color names and the values are valid CSS colors.",
       "ColorInput": "A valid CSS color",
       "methods": "Methods",
-      "useColor": "Return colors methods",
+      "useColors": "Return colors methods and variables",
       "setColors": "Used to merge new colors into config or update existing colors.",
       "getColors": "Returns current color config",
       "getColor": "Return color by name",
@@ -4102,7 +4103,9 @@
       "getHoverColor": "Return a color that you can use as a `hover` color.",
       "getFocusColor": "Return a color that you can use as a `focus` color.",
       "getGradientBackground": "Return a gradient-color that you can use as a `background-image` CSS property's value.",
-      "hookMethods": "useColors hook methods"
+      "hookMethods": "useColors hook methods.",
+      "hookVariables": "useColors hook variables.",
+      "colors": "A computed reactive where the keys are color names and values are valid CSS colors."
     }
   },
   "breakpoints": {
@@ -4654,7 +4657,8 @@
         "title": "Filters"
       },
       "selectable": {
-        "title": "Selectable"
+        "title": "Selectable",
+        "coloredTitle": "Colored checkboxes"
       }
     }
   },
diff --git a/packages/docs/src/locales/ru/ru.json b/packages/docs/src/locales/ru/ru.json
index b067858ca3..23667a94e9 100644
--- a/packages/docs/src/locales/ru/ru.json
+++ b/packages/docs/src/locales/ru/ru.json
@@ -1320,7 +1320,8 @@
         "checked": "Массив пред-выбранных элементов дерева.",
         "checkedBy": "Ключ для установки поля значения чекбокса в модели компонента.",
         "color": "Цвет чекбоксов.",
-        "expanded": "Массив пред-раскрытых элементов дерева"
+        "expanded": "Массив пред-раскрытых элементов дерева",
+        "expandNodeBy": "Место клика, по которому будет раскрываться элемент дерева, может быть `node` или `leaf`."
       },
       "slots": {
         "notFound": "Сообщение о не найденных соответствующих фильтру элементов дерева.",
@@ -4387,7 +4388,8 @@
         "title": "Фильтры"
       },
       "selectable": {
-        "title": "Чекбоксы"
+        "title": "Чекбоксы",
+        "coloredTitle": "Цветные чекбоксы"
       }
     }
   },
diff --git a/packages/docs/src/page-configs/getting-started/tree-shaking/page-config.ts b/packages/docs/src/page-configs/getting-started/tree-shaking/page-config.ts
index 64ac7578b5..ff18b9e8a4 100644
--- a/packages/docs/src/page-configs/getting-started/tree-shaking/page-config.ts
+++ b/packages/docs/src/page-configs/getting-started/tree-shaking/page-config.ts
@@ -1,7 +1,7 @@
 import { ApiDocsBlock } from '@/types/configTypes'
 import { PageGenerationHelper } from '@/helpers/DocsHelper'
 import { treeShakingExample, cssCodeSplit } from './code-examples'
-import bundleSizeData from 'sandbox/tree-shaking.md'
+import bundleSizeData from './tree-shaking.md'
 
 const block = new PageGenerationHelper(__dirname)
 
diff --git a/packages/docs/src/page-configs/introduction/roadmap/components/roadmap.vue b/packages/docs/src/page-configs/introduction/roadmap/components/roadmap.vue
index 7975d0b564..537c0de185 100644
--- a/packages/docs/src/page-configs/introduction/roadmap/components/roadmap.vue
+++ b/packages/docs/src/page-configs/introduction/roadmap/components/roadmap.vue
@@ -7,7 +7,7 @@
 
           <va-card v-for="item in col.items" :key="item.title">
             <a :href="item.link" target="_blank">
-              <va-card-content class="px-4 py-2">
+              <va-card-content class="px-6 py-2">
                 <h6 class="link">{{ item.title }}</h6>
 
                 <div class="docs-roadmap__image" v-if="item.image">
diff --git a/packages/docs/src/page-configs/services/colors-config/examples/change-colors.vue b/packages/docs/src/page-configs/services/colors-config/examples/change-colors.vue
index 2abcaebdaa..868197579e 100644
--- a/packages/docs/src/page-configs/services/colors-config/examples/change-colors.vue
+++ b/packages/docs/src/page-configs/services/colors-config/examples/change-colors.vue
@@ -2,7 +2,7 @@
   <div class="d-flex align-center">
     <va-button>{{ buttonText }}</va-button>
 
-    <va-color-palette v-model="primaryColor" :palette="colorsToChange" class="mx-4" />
+    <va-color-palette v-model="primaryColor" :palette="colorsToChange" class="mx-6" />
 
     <span>{{ currentColorText }} {{ primaryColor }}</span>
   </div>
diff --git a/packages/docs/src/page-configs/services/colors-config/examples/css-variable.vue b/packages/docs/src/page-configs/services/colors-config/examples/css-variable.vue
index 87b2baa7ba..ebe2c72dd6 100644
--- a/packages/docs/src/page-configs/services/colors-config/examples/css-variable.vue
+++ b/packages/docs/src/page-configs/services/colors-config/examples/css-variable.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="">
     <div
-      class="primary-danger-gradient d-flex justify-space-around align-center"
+      class="primary-danger-gradient d-flex justify-around align-center"
     >
       <span class="px-2">Primary</span>
       <span class="px-2">Success</span>
@@ -12,7 +12,7 @@
       <va-color-palette
         v-model="primaryColor"
         :palette="colorsToChange"
-        class="mx-4"
+        class="mx-6"
       />
 
       <span>
diff --git a/packages/docs/src/page-configs/services/colors-config/page-config.ts b/packages/docs/src/page-configs/services/colors-config/page-config.ts
index b4f248e1cb..e727aec4e5 100644
--- a/packages/docs/src/page-configs/services/colors-config/page-config.ts
+++ b/packages/docs/src/page-configs/services/colors-config/page-config.ts
@@ -15,6 +15,12 @@ const columnsApiMethods: TableColumn[] = [
   { title: 'description', type: 'markdown' },
 ]
 
+const columnsApiHookVariables: TableColumn[] = [
+  'variable',
+  { title: 'type', type: 'code' },
+  { title: 'description', type: 'markdown' },
+]
+
 const tableDataApiTypes: TableData = [
   ['ColorConfig', '{ [colorName: string]: string; }', 'colorsConfig.api.ColorConfig'],
   ['ColorInput', 'string', 'colorsConfig.api.ColorInput'],
@@ -24,6 +30,7 @@ const tableDataApiMethods: TableData = [
   [
     'useColors',
     `() => {
+      colors,
       setColors,
       getColors,
       getColor,
@@ -32,7 +39,7 @@ const tableDataApiMethods: TableData = [
       getFocusColor,
       getGradientBackground
     }`,
-    'colorsConfig.api.useColor',
+    'colorsConfig.api.useColors',
   ],
 ]
 
@@ -46,6 +53,10 @@ const tableDataApiHookMethods: TableData = [
   ['getGradientBackground', '(color: string) => string', 'colorsConfig.api.getGradientBackground'],
 ]
 
+const tableDataApiHookVariables: TableData = [
+  ['colors', 'ColorConfig', 'colorsConfig.api.colors'],
+]
+
 const block = new PageGenerationHelper(__dirname)
 
 const config: ApiDocsBlock[] = [
@@ -83,6 +94,9 @@ const config: ApiDocsBlock[] = [
 
   block.headline('colorsConfig.api.hookMethods'),
   block.table(columnsApiMethods, tableDataApiHookMethods),
+
+  block.headline('colorsConfig.api.hookVariables'),
+  block.table(columnsApiHookVariables, tableDataApiHookVariables),
 ]
 
 export default config
diff --git a/packages/docs/src/page-configs/services/components-config/examples/button.vue b/packages/docs/src/page-configs/services/components-config/examples/button.vue
index 8e3d05dde1..5d211b5f7f 100644
--- a/packages/docs/src/page-configs/services/components-config/examples/button.vue
+++ b/packages/docs/src/page-configs/services/components-config/examples/button.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="d-flex flex-direction-column">
+  <div class="d-flex flex-col">
     <va-checkbox
       v-for="(_, name) in buttonProps" :key="name"
       v-model="buttonProps[name]"
diff --git a/packages/docs/src/page-configs/services/components-config/examples/presets.vue b/packages/docs/src/page-configs/services/components-config/examples/presets.vue
index 0e660a86e2..9a1bb32a23 100644
--- a/packages/docs/src/page-configs/services/components-config/examples/presets.vue
+++ b/packages/docs/src/page-configs/services/components-config/examples/presets.vue
@@ -1,4 +1,4 @@
 <template>
-  <va-button preset="addToCart" class="mr-4">'addToCart' preset</va-button>
+  <va-button preset="addToCart" class="mr-6">'addToCart' preset</va-button>
   <va-button preset="deleteFromCart">'deleteFromCart' preset</va-button>
 </template>
diff --git a/packages/docs/src/page-configs/services/components-config/examples/priority.vue b/packages/docs/src/page-configs/services/components-config/examples/priority.vue
index faed08424b..e34e6e5e49 100644
--- a/packages/docs/src/page-configs/services/components-config/examples/priority.vue
+++ b/packages/docs/src/page-configs/services/components-config/examples/priority.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="d-flex justify-center">
-  <div class="flex lg6">
+  <div class="flex flex-col lg6">
     <img :src="require('@/assets/docs/images/props-values-priority.png')" alt="" class="fill-width" />
   </div>
 </div>
diff --git a/packages/docs/src/page-configs/services/icons-config/components/playground.vue b/packages/docs/src/page-configs/services/icons-config/components/playground.vue
index b4c3e3660f..ee35877c10 100644
--- a/packages/docs/src/page-configs/services/icons-config/components/playground.vue
+++ b/packages/docs/src/page-configs/services/icons-config/components/playground.vue
@@ -20,10 +20,10 @@
 
     <div class="va-code-snippet">
       const fonts = [{
-      <div class="ml-4">
+      <div class="ml-6">
         <div>name: '<CodeInput class="code-input" v-model="configName" />',</div>
         {{ resolveFnName }}: (<span class="params">{{ args }}</span>) => ({
-          <div class="ml-4 mb-1" v-for="key in Object.keys(resolve)" :key="key">
+          <div class="ml-6 mb-1" v-for="key in Object.keys(resolve)" :key="key">
             {{ key }}: <CodeInput v-model="(resolve as any)[key]" />,
           </div>
         })
@@ -146,7 +146,6 @@ const copy = () => {
   display: flex;
   align-items: center;
   flex-wrap: nowrap;
-  margin: -0.5rem;
 
   & > * {
     padding: 0.5rem;
diff --git a/packages/docs/src/page-configs/styles/colors/examples/components/component-examples.vue b/packages/docs/src/page-configs/styles/colors/examples/components/component-examples.vue
index 98d324442d..95db6cfceb 100644
--- a/packages/docs/src/page-configs/styles/colors/examples/components/component-examples.vue
+++ b/packages/docs/src/page-configs/styles/colors/examples/components/component-examples.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="cards">
     <va-card class="card card-1">
-      <va-card-title><h3 class="display-2 ma-0">Get started</h3></va-card-title>
+      <va-card-title><h3 class="display-2 m-0">Get started</h3></va-card-title>
 
       <va-card-content>
         <va-input stateful label="Email" class="mb-2" />
@@ -81,7 +81,7 @@
     <div class="card card-8">
       <va-card color="primary" gradient>
         <va-card-content>
-          <h2 class="ma-0">12:00 pm</h2>
+          <h2 class="m-0">12:00 pm</h2>
         </va-card-content>
       </va-card>
     </div>
diff --git a/packages/docs/src/page-configs/styles/css-variables/examples/profile.vue b/packages/docs/src/page-configs/styles/css-variables/examples/profile.vue
index b100f388a8..4e9b21d5fe 100644
--- a/packages/docs/src/page-configs/styles/css-variables/examples/profile.vue
+++ b/packages/docs/src/page-configs/styles/css-variables/examples/profile.vue
@@ -5,9 +5,9 @@
         <va-avatar src="https://randomuser.me/api/portraits/men/3.jpg" size="128px" />
       </div>
 
-      <div class="pl-2 d-flex flex-direction-column justify-end">
+      <div class="pl-2 d-flex flex-col justify-end">
         <span class="title">Profile</span>
-        <h5 class="display-5 ma-0" style="color: inherit;">User</h5>
+        <div class="text-2xl font-bold">User</div>
 
         <div class="d-flex flex-wrap">
           <span class="mr-2 text--no-wrap">29 public playlists</span>
diff --git a/packages/docs/src/page-configs/styles/grid/examples/AlignContent.vue b/packages/docs/src/page-configs/styles/grid/examples/AlignContent.vue
index 981929846e..22cbbd1f4a 100644
--- a/packages/docs/src/page-configs/styles/grid/examples/AlignContent.vue
+++ b/packages/docs/src/page-configs/styles/grid/examples/AlignContent.vue
@@ -2,65 +2,65 @@
   <va-card color="background-element" style="padding: 0.75rem;">
     <!-- align-content-start -->
     <div class="row align-content-start">
-      <div class="flex xs6">
+      <div class="flex flex-col xs6">
         <div class="item">align-content-start</div>
       </div>
-      <div class="flex xs6">
+      <div class="flex flex-col xs6">
         <div class="item">align-content-start</div>
       </div>
-      <div class="flex xs12">
+      <div class="flex flex-col xs12">
         <div class="item">align-content-start</div>
       </div>
     </div>
 
     <!-- align-content-end -->
     <div class="row align-content-end">
-      <div class="flex xs6">
+      <div class="flex flex-col xs6">
         <div class="item">align-content-end</div>
       </div>
-      <div class="flex xs6">
+      <div class="flex flex-col xs6">
         <div class="item">align-content-end</div>
       </div>
-      <div class="flex xs12">
+      <div class="flex flex-col xs12">
         <div class="item">align-content-end</div>
       </div>
     </div>
 
     <!-- align-content-center -->
     <div class="row align-content-center">
-      <div class="flex xs6">
+      <div class="flex flex-col xs6">
         <div class="item">align-content-center</div>
       </div>
-      <div class="flex xs6">
+      <div class="flex flex-col xs6">
         <div class="item">align-content-center</div>
       </div>
-      <div class="flex xs12">
+      <div class="flex flex-col xs12">
         <div class="item">align-content-center</div>
       </div>
     </div>
 
     <!-- align-content-space-between -->
     <div class="row align-content-space-between">
-      <div class="flex xs6">
+      <div class="flex flex-col xs6">
         <div class="item">align-content-space-between</div>
       </div>
-      <div class="flex xs6">
+      <div class="flex flex-col xs6">
         <div class="item">align-content-space-between</div>
       </div>
-      <div class="flex xs12">
+      <div class="flex flex-col xs12">
         <div class="item">align-content-space-between</div>
       </div>
     </div>
 
     <!-- align-content-space-around -->
     <div class="row align-content-space-around">
-      <div class="flex xs6">
+      <div class="flex flex-col xs6">
         <div class="item">align-content-space-around</div>
       </div>
-      <div class="flex xs6">
+      <div class="flex flex-col xs6">
         <div class="item">align-content-space-around</div>
       </div>
-      <div class="flex xs12">
+      <div class="flex flex-col xs12">
         <div class="item">align-content-space-around</div>
       </div>
     </div>
diff --git a/packages/docs/src/page-configs/styles/grid/examples/AlignDefault.vue b/packages/docs/src/page-configs/styles/grid/examples/AlignDefault.vue
index 04cbf8e9ac..4c5f22267a 100644
--- a/packages/docs/src/page-configs/styles/grid/examples/AlignDefault.vue
+++ b/packages/docs/src/page-configs/styles/grid/examples/AlignDefault.vue
@@ -2,28 +2,28 @@
   <va-card color="background-element" style="padding: 0.75rem;">
     <!-- align--start -->
     <div class="row align-start">
-      <div class="flex xs12">
+      <div class="flex flex-col xs12">
         <div class="item">align-start</div>
       </div>
     </div>
 
     <!-- align-end -->
     <div class="row align-end">
-      <div class="flex xs12">
+      <div class="flex flex-col xs12">
         <div class="item">align-end</div>
       </div>
     </div>
 
     <!-- align-center -->
     <div class="row align-center">
-      <div class="flex xs12">
+      <div class="flex flex-col xs12">
         <div class="item">align-center</div>
       </div>
     </div>
 
     <!-- align-baseline -->
     <div class="row align-baseline">
-      <div class="flex xs12">
+      <div class="flex flex-col xs12">
         <div class="item">align-baseline</div>
       </div>
     </div>
diff --git a/packages/docs/src/page-configs/styles/grid/examples/AlignJustify.vue b/packages/docs/src/page-configs/styles/grid/examples/AlignJustify.vue
index 4cdee01726..f51de2a3ef 100644
--- a/packages/docs/src/page-configs/styles/grid/examples/AlignJustify.vue
+++ b/packages/docs/src/page-configs/styles/grid/examples/AlignJustify.vue
@@ -2,78 +2,78 @@
   <va-card color="background-element" style="padding: 0.75rem;">
     <!-- justify--start -->
     <div class="row justify-start">
-      <div class="flex xs2">
+      <div class="flex flex-col xs2">
         <div class="item">justify-start</div>
       </div>
-      <div class="flex xs2">
+      <div class="flex flex-col xs2">
         <div class="item">justify-start</div>
       </div>
-      <div class="flex xs2">
+      <div class="flex flex-col xs2">
         <div class="item">justify-start</div>
       </div>
     </div>
 
     <!-- justify-end -->
     <div class="row justify-end">
-      <div class="flex xs2">
+      <div class="flex flex-col xs2">
         <div class="item">justify-end</div>
       </div>
-      <div class="flex xs2">
+      <div class="flex flex-col xs2">
         <div class="item">justify-end</div>
       </div>
-      <div class="flex xs2">
+      <div class="flex flex-col xs2">
         <div class="item">justify-end</div>
       </div>
     </div>
 
     <!-- justify-center -->
     <div class="row justify-center">
-      <div class="flex xs2">
+      <div class="flex flex-col xs2">
         <div class="item">justify-center</div>
       </div>
-      <div class="flex xs2">
+      <div class="flex flex-col xs2">
         <div class="item">justify-center</div>
       </div>
-      <div class="flex xs2">
+      <div class="flex flex-col xs2">
         <div class="item">justify-center</div>
       </div>
     </div>
 
     <!-- justify-space-between -->
     <div class="row justify-space-between">
-      <div class="flex xs2">
+      <div class="flex flex-col xs2">
         <div class="item">justify-space</div>
       </div>
-      <div class="flex xs2">
+      <div class="flex flex-col xs2">
         <div class="item">justify-space</div>
       </div>
-      <div class="flex xs2">
+      <div class="flex flex-col xs2">
         <div class="item">justify-space</div>
       </div>
     </div>
 
     <!-- justify-space-around -->
     <div class="row justify-space-around">
-      <div class="flex xs2">
+      <div class="flex flex-col xs2">
         <div class="item">justify-around</div>
       </div>
-      <div class="flex xs2">
+      <div class="flex flex-col xs2">
         <div class="item">justify-around</div>
       </div>
-      <div class="flex xs2">
+      <div class="flex flex-col xs2">
         <div class="item">justify-around</div>
       </div>
     </div>
 
     <!-- justify-space-evenly -->
     <div class="row justify-space-evenly">
-      <div class="flex xs2">
+      <div class="flex flex-col xs2">
         <div class="item">justify-space-evenly</div>
       </div>
-      <div class="flex xs2">
+      <div class="flex flex-col xs2">
         <div class="item">justify-space-evenly</div>
       </div>
-      <div class="flex xs2">
+      <div class="flex flex-col xs2">
         <div class="item">justify-space-evenly</div>
       </div>
     </div>
diff --git a/packages/docs/src/page-configs/styles/grid/examples/AlignSelf.vue b/packages/docs/src/page-configs/styles/grid/examples/AlignSelf.vue
index f90cc9a2e9..24f0932734 100644
--- a/packages/docs/src/page-configs/styles/grid/examples/AlignSelf.vue
+++ b/packages/docs/src/page-configs/styles/grid/examples/AlignSelf.vue
@@ -2,22 +2,22 @@
   <va-card color="background-element" style="padding: 0.75rem;">
     <div class="row">
       <!-- align-self-start -->
-      <div class="flex xs3 align-self-start">
+      <div class="flex flex-col xs3 align-self-start">
         <div class="item">align-self-start</div>
       </div>
 
       <!-- align-self-end -->
-      <div class="flex xs3 align-self-end">
+      <div class="flex flex-col xs3 align-self-end">
         <div class="item">align-self-end</div>
       </div>
 
       <!-- align-self-center -->
-      <div class="flex xs3 align-self-center">
+      <div class="flex flex-col xs3 align-self-center">
         <div class="item">align-self-center</div>
       </div>
 
       <!-- align-self-baseline -->
-      <div class="flex xs3 align-self-baseline">
+      <div class="flex flex-col xs3 align-self-baseline">
         <div class="item">align-self-baseline</div>
       </div>
     </div>
diff --git a/packages/docs/src/page-configs/styles/grid/examples/Breakpoints.vue b/packages/docs/src/page-configs/styles/grid/examples/Breakpoints.vue
index db4603c5f7..4c60a6c853 100644
--- a/packages/docs/src/page-configs/styles/grid/examples/Breakpoints.vue
+++ b/packages/docs/src/page-configs/styles/grid/examples/Breakpoints.vue
@@ -1,25 +1,25 @@
 <template>
   <va-card color="background-element" style="padding: 0.75rem;">
     <div class="row">
-      <div class="flex md12">
+      <div class="flex flex-col md12">
         <div class="item">md12</div>
       </div>
-      <div class="flex md6">
+      <div class="flex flex-col md6">
         <div class="item">md6</div>
       </div>
-      <div class="flex md6">
+      <div class="flex flex-col md6">
         <div class="item">md6</div>
       </div>
     </div>
     <br />
     <div class="row">
-      <div class="flex md12">
+      <div class="flex flex-col md12">
         <div class="item">md12</div>
       </div>
-      <div class="flex md9">
+      <div class="flex flex-col md9">
         <div class="item">md9</div>
       </div>
-      <div class="flex md3">
+      <div class="flex flex-col md3">
         <div class="item">md3</div>
       </div>
     </div>
diff --git a/packages/docs/src/page-configs/styles/grid/examples/Default.vue b/packages/docs/src/page-configs/styles/grid/examples/Default.vue
index e077f5fcb8..cdc5a2ad2f 100644
--- a/packages/docs/src/page-configs/styles/grid/examples/Default.vue
+++ b/packages/docs/src/page-configs/styles/grid/examples/Default.vue
@@ -1,7 +1,7 @@
 <template>
   <va-card color="background-element" style="padding: 0.75rem;">
     <div class="row">
-      <div class="flex" style="width: 100%;">
+      <div class="flex flex-col" style="width: 100%;">
         <div class="item">{{ $t('grid.examples.default.example') }}</div>
       </div>
     </div>
diff --git a/packages/docs/src/page-configs/styles/grid/examples/Gutters.vue b/packages/docs/src/page-configs/styles/grid/examples/Gutters.vue
index 4adc71c9c4..f113338ea9 100644
--- a/packages/docs/src/page-configs/styles/grid/examples/Gutters.vue
+++ b/packages/docs/src/page-configs/styles/grid/examples/Gutters.vue
@@ -2,10 +2,10 @@
   <va-card color="background-element" style="padding: 0.75rem;">
     <div class="layout gutter--md">
       <div class="row">
-        <div class="flex xs6">
+        <div class="flex flex-col xs6">
           <div class="item">gutter--md</div>
         </div>
-        <div class="flex xs6">
+        <div class="flex flex-col xs6">
           <div class="item">gutter--md</div>
         </div>
       </div>
@@ -13,10 +13,10 @@
     <br />
     <div class="layout gutter--xl">
       <div class="row">
-        <div class="flex xs6">
+        <div class="flex flex-col xs6">
           <div class="item">gutter--xl</div>
         </div>
-        <div class="flex xs6">
+        <div class="flex flex-col xs6">
           <div class="item">gutter--xl</div>
         </div>
       </div>
diff --git a/packages/docs/src/page-configs/styles/grid/examples/Offsets.vue b/packages/docs/src/page-configs/styles/grid/examples/Offsets.vue
index 8b35a614e6..041fb6bff2 100644
--- a/packages/docs/src/page-configs/styles/grid/examples/Offsets.vue
+++ b/packages/docs/src/page-configs/styles/grid/examples/Offsets.vue
@@ -1,25 +1,25 @@
 <template>
   <va-card color="background-element" style="padding: 0.75rem;">
     <div class="row">
-      <div class="flex xs1 offset-md3 offset-lg2">
+      <div class="flex flex-col xs1 offset-md3 offset-lg2">
         <div class="item">{{ $t('grid.examples.offsets.first') }}</div>
       </div>
-      <div class="flex xs1 offset-md1 offset-lg3">
+      <div class="flex flex-col xs1 offset-md1 offset-lg3">
         <div class="item">{{ $t('grid.examples.offsets.second') }}</div>
       </div>
-      <div class="flex xs1 offset-md2 offset-lg1">
+      <div class="flex flex-col xs1 offset-md2 offset-lg1">
         <div class="item">{{ $t('grid.examples.offsets.last') }}</div>
       </div>
     </div>
     <br />
     <div class="row">
-      <div class="flex xs1 offset-md4 offset-lg1">
+      <div class="flex flex-col xs1 offset-md4 offset-lg1">
         <div class="item">{{ $t('grid.examples.offsets.first') }}</div>
       </div>
-      <div class="flex xs1 offset-md2 offset-lg2">
+      <div class="flex flex-col xs1 offset-md2 offset-lg2">
         <div class="item">{{ $t('grid.examples.offsets.second') }}</div>
       </div>
-      <div class="flex xs1 offset-md1 offset-lg6">
+      <div class="flex flex-col xs1 offset-md1 offset-lg6">
         <div class="item">{{ $t('grid.examples.offsets.last') }}</div>
       </div>
     </div>
diff --git a/packages/docs/src/page-configs/styles/smart-helpers/examples/Gutters.vue b/packages/docs/src/page-configs/styles/smart-helpers/examples/Gutters.vue
index cfc75fab45..2687c4d925 100644
--- a/packages/docs/src/page-configs/styles/smart-helpers/examples/Gutters.vue
+++ b/packages/docs/src/page-configs/styles/smart-helpers/examples/Gutters.vue
@@ -2,7 +2,7 @@
   <va-card class="gutters-demo" color="background-primary">
     <div class="layout va-gutter-1">
       <div class="row">
-        <div v-for="i in 2" :key="i" class="flex xs6">
+        <div v-for="i in 2" :key="i" class="flex flex-col xs6">
           <div class="item">va-gutter-1</div>
         </div>
       </div>
@@ -10,7 +10,7 @@
     <br />
     <div class="layout va-gutter-2">
       <div class="row">
-        <div v-for="i in 2" :key="i" class="flex xs6">
+        <div v-for="i in 2" :key="i" class="flex flex-col xs6">
           <div class="item">va-gutter-2</div>
         </div>
       </div>
@@ -18,7 +18,7 @@
     <br />
     <div class="layout va-gutter-3">
       <div class="row">
-        <div v-for="i in 2" :key="i" class="flex xs6">
+        <div v-for="i in 2" :key="i" class="flex flex-col xs6">
           <div class="item">va-gutter-3</div>
         </div>
       </div>
@@ -26,7 +26,7 @@
     <br />
     <div class="layout va-gutter-4">
       <div class="row">
-        <div v-for="i in 2" :key="i" class="flex xs6">
+        <div v-for="i in 2" :key="i" class="flex flex-col xs6">
           <div class="item">va-gutter-4</div>
         </div>
       </div>
@@ -34,7 +34,7 @@
     <br />
     <div class="layout va-gutter-5">
       <div class="row">
-        <div v-for="i in 2" :key="i" class="flex xs6">
+        <div v-for="i in 2" :key="i" class="flex flex-col xs6">
           <div class="item">va-gutter-5</div>
         </div>
       </div>
diff --git a/packages/docs/src/page-configs/styles/smart-helpers/examples/Spacing.vue b/packages/docs/src/page-configs/styles/smart-helpers/examples/Spacing.vue
index c03e40ffd0..1dcc85d85a 100644
--- a/packages/docs/src/page-configs/styles/smart-helpers/examples/Spacing.vue
+++ b/packages/docs/src/page-configs/styles/smart-helpers/examples/Spacing.vue
@@ -1,21 +1,21 @@
 <template>
   <div class="spacing-demo layout va-gutter-3">
-    <div class="row mb-3">
+    <div class="row pb-3">
       <span v-for="i in 5" :key="i" class="rectangle">no spacing</span>
     </div>
-    <div class="row va-spacing-x-1 mb-3">
+    <div class="row va-spacing-x-1 pb-3">
       <span v-for="i in 5" :key="i" class="rectangle">va-spacing-x-1</span>
     </div>
-    <div class="row va-spacing-x-2 mb-3">
+    <div class="row va-spacing-x-2 pb-3">
       <span v-for="i in 5" :key="i" class="rectangle">va-spacing-x-2</span>
     </div>
-    <div class="row va-spacing-x-3 mb-3">
+    <div class="row va-spacing-x-3 pb-3">
       <span v-for="i in 5" :key="i" class="rectangle">va-spacing-x-3</span>
     </div>
-    <div class="row va-spacing-x-4 mb-3">
+    <div class="row va-spacing-x-4 pb-3">
       <span v-for="i in 5" :key="i" class="rectangle">va-spacing-x-4</span>
     </div>
-    <div class="row va-spacing-x-5 mb-3">
+    <div class="row va-spacing-x-5">
       <span v-for="i in 5" :key="i" class="rectangle">va-spacing-x-5</span>
     </div>
   </div>
diff --git a/packages/docs/src/page-configs/ui-elements/alert/examples/Border.vue b/packages/docs/src/page-configs/ui-elements/alert/examples/Border.vue
index 801224214e..5fbe143ff9 100644
--- a/packages/docs/src/page-configs/ui-elements/alert/examples/Border.vue
+++ b/packages/docs/src/page-configs/ui-elements/alert/examples/Border.vue
@@ -1,17 +1,17 @@
 <template>
-  <va-alert border="top" class="mb-4">
+  <va-alert border="top" class="mb-6">
     {{ $t('alert.misc.primary') }}
   </va-alert>
-  <va-alert color="success" border="right" class="mb-4">
+  <va-alert color="success" border="right" class="mb-6">
     {{ $t('alert.misc.success') }}
   </va-alert>
-  <va-alert color="info" border="bottom" class="mb-4">
+  <va-alert color="info" border="bottom" class="mb-6">
     {{ $t('alert.misc.info') }}
   </va-alert>
-  <va-alert color="warning" border="left" class="mb-4">
+  <va-alert color="warning" border="left" class="mb-6">
     {{ $t('alert.misc.warning') }}
   </va-alert>
-  <va-alert color="danger" border="top" class="mb-4">
+  <va-alert color="danger" border="top" class="mb-6">
     {{ $t('alert.misc.danger') }}
   </va-alert>
 </template>
diff --git a/packages/docs/src/page-configs/ui-elements/alert/examples/Center.vue b/packages/docs/src/page-configs/ui-elements/alert/examples/Center.vue
index b07c6a8f20..a056d6f0e6 100644
--- a/packages/docs/src/page-configs/ui-elements/alert/examples/Center.vue
+++ b/packages/docs/src/page-configs/ui-elements/alert/examples/Center.vue
@@ -1,8 +1,8 @@
 <template>
-  <va-alert center class="mb-4">
+  <va-alert center class="mb-6">
     {{ $t('alert.misc.centered') }}
   </va-alert>
-  <va-alert color="warning" closeable :title="$t('alert.misc.title')" icon="info" center class="mb-4">
+  <va-alert color="warning" closeable :title="$t('alert.misc.title')" icon="info" center class="mb-6">
     {{ $t('alert.misc.centered') }}
   </va-alert>
 </template>
diff --git a/packages/docs/src/page-configs/ui-elements/alert/examples/Closeable.vue b/packages/docs/src/page-configs/ui-elements/alert/examples/Closeable.vue
index 4150456cdb..20f6c222c1 100644
--- a/packages/docs/src/page-configs/ui-elements/alert/examples/Closeable.vue
+++ b/packages/docs/src/page-configs/ui-elements/alert/examples/Closeable.vue
@@ -2,12 +2,12 @@
   <va-checkbox
     :label="$t('alert.misc.toggleVisibility')"
     v-model="isCloseableAlertVisible"
-    class="mb-4"
+    class="mb-6"
   />
   <va-alert
     v-model="isCloseableAlertVisible"
     closeable
-    class="mb-4"
+    class="mb-6"
   >
     {{ $t('alert.misc.defaultCloseIcon') }}
   </va-alert>
@@ -17,7 +17,7 @@
     v-model="isCloseableAlertVisible"
     closeable
     close-icon="info"
-    class="mb-4"
+    class="mb-6"
   >
     {{ $t('alert.misc.customCloseIcon') }}
   </va-alert>
@@ -27,7 +27,7 @@
     v-model="isCloseableAlertVisible"
     closeable
     :close-text="$t('alert.misc.close')"
-    class="mb-4"
+    class="mb-6"
   >
     {{ $t('alert.misc.messageInsteadIcon') }}
   </va-alert>
@@ -36,7 +36,7 @@
     color="success"
     v-model="isCloseableAlertVisible"
     closeable
-    class="mb-4"
+    class="mb-6"
   >
     <template #close>
       {{ $t('alert.misc.close') }}
diff --git a/packages/docs/src/page-configs/ui-elements/alert/examples/Color.vue b/packages/docs/src/page-configs/ui-elements/alert/examples/Color.vue
index 3652d36888..9fc2db8977 100644
--- a/packages/docs/src/page-configs/ui-elements/alert/examples/Color.vue
+++ b/packages/docs/src/page-configs/ui-elements/alert/examples/Color.vue
@@ -1,23 +1,23 @@
 <template>
-  <va-alert class="mb-4">
+  <va-alert class="mb-6">
     {{ $t('alert.misc.primary') }}
   </va-alert>
-  <va-alert color="success" class="mb-4">
+  <va-alert color="success" class="mb-6">
     {{ $t('alert.misc.success') }}
   </va-alert>
-  <va-alert color="info" class="mb-4">
+  <va-alert color="info" class="mb-6">
     {{ $t('alert.misc.info') }}
   </va-alert>
-  <va-alert color="warning" class="mb-4">
+  <va-alert color="warning" class="mb-6">
     {{ $t('alert.misc.warning') }}
   </va-alert>
-  <va-alert color="danger" class="mb-4">
+  <va-alert color="danger" class="mb-6">
     {{ $t('alert.misc.danger') }}
   </va-alert>
-  <va-alert color="#692BEB" class="mb-4">
+  <va-alert color="#692BEB" class="mb-6">
     {{ $t('alert.misc.warning') }}
   </va-alert>
-  <va-alert color="#540C0C" class="mb-4">
+  <va-alert color="#540C0C" class="mb-6">
     {{ $t('alert.misc.danger') }}
   </va-alert>
   <va-alert color="warning" text-color="primary">
diff --git a/packages/docs/src/page-configs/ui-elements/alert/examples/Default.vue b/packages/docs/src/page-configs/ui-elements/alert/examples/Default.vue
index d7ba11dd5a..99de3097f5 100644
--- a/packages/docs/src/page-configs/ui-elements/alert/examples/Default.vue
+++ b/packages/docs/src/page-configs/ui-elements/alert/examples/Default.vue
@@ -1,6 +1,6 @@
 <template>
   <va-alert
-    class="mb-4"
+    class="mb-6"
     :description="$t('alert.misc.primary')"
   />
   <va-alert>
diff --git a/packages/docs/src/page-configs/ui-elements/alert/examples/Dense.vue b/packages/docs/src/page-configs/ui-elements/alert/examples/Dense.vue
index 05a9583d71..ffd4bee3f2 100644
--- a/packages/docs/src/page-configs/ui-elements/alert/examples/Dense.vue
+++ b/packages/docs/src/page-configs/ui-elements/alert/examples/Dense.vue
@@ -1,11 +1,11 @@
 <template>
-  <va-alert dense color="info" class="mb-4">
+  <va-alert dense color="info" class="mb-6">
     {{ $t('alert.misc.color') }}
   </va-alert>
-  <va-alert dense color="warning" outline class="mb-4">
+  <va-alert dense color="warning" outline class="mb-6">
     {{ $t('alert.misc.outlined') }}
   </va-alert>
-  <va-alert dense color="danger" border="top" border-color="danger" class="mb-4">
+  <va-alert dense color="danger" border="top" border-color="danger" class="mb-6">
     {{ $t('alert.misc.border') }}
   </va-alert>
 </template>
diff --git a/packages/docs/src/page-configs/ui-elements/alert/examples/Icon.vue b/packages/docs/src/page-configs/ui-elements/alert/examples/Icon.vue
index 7da7cbb798..3733f197dd 100644
--- a/packages/docs/src/page-configs/ui-elements/alert/examples/Icon.vue
+++ b/packages/docs/src/page-configs/ui-elements/alert/examples/Icon.vue
@@ -1,8 +1,8 @@
 <template>
-  <va-alert color="warning" icon="info" class="mb-4">
+  <va-alert color="warning" icon="info" class="mb-6">
     {{ $t('alert.misc.icon') }}
   </va-alert>
-  <va-alert color="info" class="mb-4">
+  <va-alert color="info" class="mb-6">
     <template #icon>
       <va-icon name="info" />
     </template>
diff --git a/packages/docs/src/page-configs/ui-elements/alert/examples/Styles.vue b/packages/docs/src/page-configs/ui-elements/alert/examples/Styles.vue
index c6f21fb9ed..0dc7d08951 100644
--- a/packages/docs/src/page-configs/ui-elements/alert/examples/Styles.vue
+++ b/packages/docs/src/page-configs/ui-elements/alert/examples/Styles.vue
@@ -1,11 +1,11 @@
 <template>
-  <va-alert color="info" class="mb-4">
+  <va-alert color="info" class="mb-6">
     {{ $t('alert.misc.color') }}
   </va-alert>
-  <va-alert color="warning" outline class="mb-4">
+  <va-alert color="warning" outline class="mb-6">
     {{ $t('alert.misc.outlined') }}
   </va-alert>
-  <va-alert color="danger" border="top" border-color="danger" class="mb-4">
+  <va-alert color="danger" border="top" border-color="danger" class="mb-6">
     {{ $t('alert.misc.border') }}
   </va-alert>
 </template>
diff --git a/packages/docs/src/page-configs/ui-elements/alert/examples/Title.vue b/packages/docs/src/page-configs/ui-elements/alert/examples/Title.vue
index 09f8bb8f0f..c5b342ef81 100644
--- a/packages/docs/src/page-configs/ui-elements/alert/examples/Title.vue
+++ b/packages/docs/src/page-configs/ui-elements/alert/examples/Title.vue
@@ -1,8 +1,8 @@
 <template>
-  <va-alert color="success" :title="$t('alert.misc.title')" class="mb-4">
+  <va-alert color="success" :title="$t('alert.misc.title')" class="mb-6">
     {{ $t('alert.misc.primary') }}
   </va-alert>
-  <va-alert color="info" class="mb-4">
+  <va-alert color="info" class="mb-6">
     <template #title>
       {{ $t('alert.misc.slottedTitle') }}
     </template>
diff --git a/packages/docs/src/page-configs/ui-elements/avatar/examples/Color.vue b/packages/docs/src/page-configs/ui-elements/avatar/examples/Color.vue
index 623836cb1d..c526aba232 100644
--- a/packages/docs/src/page-configs/ui-elements/avatar/examples/Color.vue
+++ b/packages/docs/src/page-configs/ui-elements/avatar/examples/Color.vue
@@ -1,15 +1,15 @@
 <template>
-  <va-avatar color="success" class="mr-4">J.D.</va-avatar>
+  <va-avatar color="success" class="mr-6">J.D.</va-avatar>
 
-  <va-avatar color="info" class="mr-4">J.D.</va-avatar>
+  <va-avatar color="info" class="mr-6">J.D.</va-avatar>
 
-  <va-avatar color="warning" class="mr-4">J.D.</va-avatar>
+  <va-avatar color="warning" class="mr-6">J.D.</va-avatar>
 
-  <va-avatar color="#fafaa0" class="mr-4">J.D.</va-avatar>
+  <va-avatar color="#fafaa0" class="mr-6">J.D.</va-avatar>
 
-  <va-avatar color="danger" class="mr-4">J.D.</va-avatar>
+  <va-avatar color="danger" class="mr-6">J.D.</va-avatar>
 
-  <va-avatar color="#692BEB" class="mr-4">J.D.</va-avatar>
+  <va-avatar color="#692BEB" class="mr-6">J.D.</va-avatar>
 
   <va-avatar color="#540C0C" text-color="#fafaa0">J.D.</va-avatar>
 </template>
diff --git a/packages/docs/src/page-configs/ui-elements/avatar/examples/Default.vue b/packages/docs/src/page-configs/ui-elements/avatar/examples/Default.vue
index 4806c981d4..ef7742d96a 100644
--- a/packages/docs/src/page-configs/ui-elements/avatar/examples/Default.vue
+++ b/packages/docs/src/page-configs/ui-elements/avatar/examples/Default.vue
@@ -1,5 +1,5 @@
 <template>
-  <va-avatar class="mr-4">
+  <va-avatar class="mr-6">
     A
   </va-avatar>
 
diff --git a/packages/docs/src/page-configs/ui-elements/avatar/examples/Fallback.vue b/packages/docs/src/page-configs/ui-elements/avatar/examples/Fallback.vue
index 5a12a1290f..ac909486f8 100644
--- a/packages/docs/src/page-configs/ui-elements/avatar/examples/Fallback.vue
+++ b/packages/docs/src/page-configs/ui-elements/avatar/examples/Fallback.vue
@@ -1,7 +1,7 @@
 <template>
   <va-avatar
     src="https://not-exist"
-    class="mr-4"
+    class="mr-6"
   />
   <va-avatar
     src="https://not-exist"
diff --git a/packages/docs/src/page-configs/ui-elements/avatar/examples/Size.vue b/packages/docs/src/page-configs/ui-elements/avatar/examples/Size.vue
index ca1d76f37f..1d479eeadf 100644
--- a/packages/docs/src/page-configs/ui-elements/avatar/examples/Size.vue
+++ b/packages/docs/src/page-configs/ui-elements/avatar/examples/Size.vue
@@ -1,5 +1,5 @@
 <template>
-  <va-avatar size="small" class="mr-4">S</va-avatar>
-  <va-avatar class="mr-4">M</va-avatar>
-  <va-avatar size="large" font-size="30px" class="mr-4">L</va-avatar>
+  <va-avatar size="small" class="mr-6">S</va-avatar>
+  <va-avatar class="mr-6">M</va-avatar>
+  <va-avatar size="large" font-size="30px" class="mr-6">L</va-avatar>
 </template>
diff --git a/packages/docs/src/page-configs/ui-elements/avatar/examples/Square.vue b/packages/docs/src/page-configs/ui-elements/avatar/examples/Square.vue
index a82261c845..4ad49bd06e 100644
--- a/packages/docs/src/page-configs/ui-elements/avatar/examples/Square.vue
+++ b/packages/docs/src/page-configs/ui-elements/avatar/examples/Square.vue
@@ -1,5 +1,5 @@
 <template>
-  <va-avatar class="mr-4" square>A</va-avatar>
+  <va-avatar class="mr-6" square>A</va-avatar>
 
   <va-avatar src="https://i.pinimg.com/280x280_RS/08/e9/ba/08e9ba9cbd24db8de0c250570af460a4.jpg" square />
 </template>
diff --git a/packages/docs/src/page-configs/ui-elements/avatar/examples/WithIcon.vue b/packages/docs/src/page-configs/ui-elements/avatar/examples/WithIcon.vue
index 79918be60a..cbf0124895 100644
--- a/packages/docs/src/page-configs/ui-elements/avatar/examples/WithIcon.vue
+++ b/packages/docs/src/page-configs/ui-elements/avatar/examples/WithIcon.vue
@@ -1,5 +1,5 @@
 <template>
-  <va-avatar icon="info_outline" class="mr-4" />
+  <va-avatar icon="info_outline" class="mr-6" />
 
   <va-avatar icon="close" />
 </template>
diff --git a/packages/docs/src/page-configs/ui-elements/avatar/examples/WithImage.vue b/packages/docs/src/page-configs/ui-elements/avatar/examples/WithImage.vue
index ecda3bb8ea..0efe9da585 100644
--- a/packages/docs/src/page-configs/ui-elements/avatar/examples/WithImage.vue
+++ b/packages/docs/src/page-configs/ui-elements/avatar/examples/WithImage.vue
@@ -1,5 +1,5 @@
 <template>
-  <va-avatar src="https://randomuser.me/api/portraits/women/5.jpg" class="mr-4" />
+  <va-avatar src="https://randomuser.me/api/portraits/women/5.jpg" class="mr-6" />
 
   <va-avatar src="https://i.pinimg.com/280x280_RS/08/e9/ba/08e9ba9cbd24db8de0c250570af460a4.jpg" />
 </template>
diff --git a/packages/docs/src/page-configs/ui-elements/backtop/examples/Default.vue b/packages/docs/src/page-configs/ui-elements/backtop/examples/Default.vue
index a5e995ac44..a3d6077577 100644
--- a/packages/docs/src/page-configs/ui-elements/backtop/examples/Default.vue
+++ b/packages/docs/src/page-configs/ui-elements/backtop/examples/Default.vue
@@ -16,7 +16,7 @@
              false-inner-label="right"
              label="Horizontal Position:"
              left-label
-             class="pt-2 pb-4"
+             class="pt-2 pb-6"
   />
   <br />
   <va-slider
diff --git a/packages/docs/src/page-configs/ui-elements/badge/examples/Color.vue b/packages/docs/src/page-configs/ui-elements/badge/examples/Color.vue
index 0e86b6a896..daef9d1c27 100644
--- a/packages/docs/src/page-configs/ui-elements/badge/examples/Color.vue
+++ b/packages/docs/src/page-configs/ui-elements/badge/examples/Color.vue
@@ -1,7 +1,7 @@
 <template>
-  <va-badge text="warning" color="warning" class="mr-4" />
-  <va-badge text="#ad0" color="#ad0" class="mr-4" />
-  <va-badge text="success" color="success" class="mr-4" />
-  <va-badge text="#fafaa0" text-color="#fafaa0" class="mr-4" />
+  <va-badge text="warning" color="warning" class="mr-6" />
+  <va-badge text="#ad0" color="#ad0" class="mr-6" />
+  <va-badge text="success" color="success" class="mr-6" />
+  <va-badge text="#fafaa0" text-color="#fafaa0" class="mr-6" />
   <va-badge color="#692BEB" text-color="#692BEB" />
 </template>
diff --git a/packages/docs/src/page-configs/ui-elements/badge/examples/Default.vue b/packages/docs/src/page-configs/ui-elements/badge/examples/Default.vue
index 688ec3aa5c..04c29a3d0e 100644
--- a/packages/docs/src/page-configs/ui-elements/badge/examples/Default.vue
+++ b/packages/docs/src/page-configs/ui-elements/badge/examples/Default.vue
@@ -1,6 +1,6 @@
 <template>
   <va-badge
-    class="mr-4"
+    class="mr-6"
     text="Paid"
     color="success"
   />
diff --git a/packages/docs/src/page-configs/ui-elements/badge/examples/Dot.vue b/packages/docs/src/page-configs/ui-elements/badge/examples/Dot.vue
index e094e4fea6..c637f33684 100644
--- a/packages/docs/src/page-configs/ui-elements/badge/examples/Dot.vue
+++ b/packages/docs/src/page-configs/ui-elements/badge/examples/Dot.vue
@@ -1,5 +1,5 @@
 <template>
-  <va-badge class="mr-4" overlap dot>
+  <va-badge class="mr-6" overlap dot>
     <template #text>
       <va-icon name="warning" size="12px" />
     </template>
diff --git a/packages/docs/src/page-configs/ui-elements/badge/examples/Overlap.vue b/packages/docs/src/page-configs/ui-elements/badge/examples/Overlap.vue
index 6e9ca2bf4b..6a6a5f822c 100644
--- a/packages/docs/src/page-configs/ui-elements/badge/examples/Overlap.vue
+++ b/packages/docs/src/page-configs/ui-elements/badge/examples/Overlap.vue
@@ -1,5 +1,5 @@
 <template>
-  <va-badge class="mr-4" dot overlap>
+  <va-badge class="mr-6" dot overlap>
     <va-button>Text</va-button>
   </va-badge>
 
diff --git a/packages/docs/src/page-configs/ui-elements/badge/examples/Position.vue b/packages/docs/src/page-configs/ui-elements/badge/examples/Position.vue
index 3995612d8c..7b9b7682f8 100644
--- a/packages/docs/src/page-configs/ui-elements/badge/examples/Position.vue
+++ b/packages/docs/src/page-configs/ui-elements/badge/examples/Position.vue
@@ -1,8 +1,8 @@
 <template>
-  <va-badge placement="left-start" text="99+" class="mr-4">
+  <va-badge placement="left-start" text="99+" class="mr-6">
     <va-button size="small">Left-Start</va-button>
   </va-badge>
-  <va-badge placement="bottom-end" text="99+" class="mr-4">
+  <va-badge placement="bottom-end" text="99+" class="mr-6">
     <va-button size="small">Bottom-End</va-button>
   </va-badge>
   <va-badge placement="bottom-end" text="99+" offset="5px">
diff --git a/packages/docs/src/page-configs/ui-elements/badge/examples/Transparent.vue b/packages/docs/src/page-configs/ui-elements/badge/examples/Transparent.vue
index 3cd99400d8..c255aa69a0 100644
--- a/packages/docs/src/page-configs/ui-elements/badge/examples/Transparent.vue
+++ b/packages/docs/src/page-configs/ui-elements/badge/examples/Transparent.vue
@@ -1,5 +1,5 @@
 <template>
-  <va-badge class="mr-4" transparent overlap text="+1">
+  <va-badge class="mr-6" transparent overlap text="+1">
     <va-icon name="face" size="30px" />
   </va-badge>
 
diff --git a/packages/docs/src/page-configs/ui-elements/badge/examples/WithOtherComponents.vue b/packages/docs/src/page-configs/ui-elements/badge/examples/WithOtherComponents.vue
index 606fd70590..6f754edd44 100644
--- a/packages/docs/src/page-configs/ui-elements/badge/examples/WithOtherComponents.vue
+++ b/packages/docs/src/page-configs/ui-elements/badge/examples/WithOtherComponents.vue
@@ -1,6 +1,6 @@
 <template>
   <div style="display: flex; align-items: center;">
-    <va-badge class="mr-4" text="New" overlap>
+    <va-badge class="mr-6" text="New" overlap>
       <va-card>
         <va-card-content>
           Next update is right behind the corner
@@ -12,13 +12,13 @@
       color="primary"
       text="3"
       overlap
-      class="mr-4"
+      class="mr-6"
     >
       <va-avatar src="https://randomuser.me/api/portraits/women/5.jpg" />
     </va-badge>
 
     <va-badge
-      class="mr-4"
+      class="mr-6"
       color="success"
       dot
       overlap
diff --git a/packages/docs/src/page-configs/ui-elements/breadcrumbs/examples/Separator.vue b/packages/docs/src/page-configs/ui-elements/breadcrumbs/examples/Separator.vue
index 74255e61e6..cbd4f3550c 100644
--- a/packages/docs/src/page-configs/ui-elements/breadcrumbs/examples/Separator.vue
+++ b/packages/docs/src/page-configs/ui-elements/breadcrumbs/examples/Separator.vue
@@ -1,17 +1,17 @@
 <template>
-  <va-breadcrumbs separator=">" class="mb-4">
+  <va-breadcrumbs separator=">" class="mb-6">
     <va-breadcrumbs-item label="One" />
     <va-breadcrumbs-item label="Two" />
     <va-breadcrumbs-item label="Three" />
   </va-breadcrumbs>
 
-  <va-breadcrumbs separator-color="danger" class="mb-4">
+  <va-breadcrumbs separator-color="danger" class="mb-6">
     <va-breadcrumbs-item label="One" />
     <va-breadcrumbs-item label="Two" />
     <va-breadcrumbs-item label="Three" />
   </va-breadcrumbs>
 
-  <va-breadcrumbs class="mb-4">
+  <va-breadcrumbs class="mb-6">
     <template #separator>
       <va-icon class="fa fa-star fa-lg"></va-icon>
     </template>
diff --git a/packages/docs/src/page-configs/ui-elements/button-dropdown/examples/ClickInside.vue b/packages/docs/src/page-configs/ui-elements/button-dropdown/examples/ClickInside.vue
index 39c338bd6b..5c8fb844f3 100644
--- a/packages/docs/src/page-configs/ui-elements/button-dropdown/examples/ClickInside.vue
+++ b/packages/docs/src/page-configs/ui-elements/button-dropdown/examples/ClickInside.vue
@@ -1,6 +1,6 @@
 <template>
   <va-button-dropdown
-    class="mr-4"
+    class="mr-6"
     label="Will not close dropdown on click"
     :close-on-content-click="false"
   >
diff --git a/packages/docs/src/page-configs/ui-elements/button-group/examples/Colors.vue b/packages/docs/src/page-configs/ui-elements/button-group/examples/Colors.vue
index 0e2ebb6e04..cdce750fa5 100644
--- a/packages/docs/src/page-configs/ui-elements/button-group/examples/Colors.vue
+++ b/packages/docs/src/page-configs/ui-elements/button-group/examples/Colors.vue
@@ -1,17 +1,17 @@
 <template>
-  <va-button-group color="danger" class="mb-4">
+  <va-button-group color="danger" class="mb-6">
     <va-button>One</va-button>
     <va-button>Two</va-button>
     <va-button>Three</va-button>
   </va-button-group>
 
-  <va-button-group color="warning" class="mb-4">
+  <va-button-group color="warning" class="mb-6">
     <va-button>One</va-button>
     <va-button>Two</va-button>
     <va-button>Three</va-button>
   </va-button-group>
 
-  <va-button-group color="success" class="mb-4">
+  <va-button-group color="success" class="mb-6">
     <va-button>One</va-button>
     <va-button>Two</va-button>
     <va-button>Three</va-button>
diff --git a/packages/docs/src/page-configs/ui-elements/button-group/examples/Gradient.vue b/packages/docs/src/page-configs/ui-elements/button-group/examples/Gradient.vue
index 9c232585a1..cc6ce7c564 100644
--- a/packages/docs/src/page-configs/ui-elements/button-group/examples/Gradient.vue
+++ b/packages/docs/src/page-configs/ui-elements/button-group/examples/Gradient.vue
@@ -1,17 +1,17 @@
 <template>
-  <va-button-group gradient color="danger" class="mb-4">
+  <va-button-group gradient color="danger" class="mb-6">
     <va-button>One</va-button>
     <va-button>Two</va-button>
     <va-button>Three</va-button>
   </va-button-group>
 
-  <va-button-group gradient color="warning" class="mb-4">
+  <va-button-group gradient color="warning" class="mb-6">
     <va-button>One</va-button>
     <va-button>Two</va-button>
     <va-button>Three</va-button>
   </va-button-group>
 
-  <va-button-group gradient color="success" class="mb-4">
+  <va-button-group gradient color="success" class="mb-6">
     <va-button>One</va-button>
     <va-button>Two</va-button>
     <va-button>Three</va-button>
diff --git a/packages/docs/src/page-configs/ui-elements/button-group/examples/Icons.vue b/packages/docs/src/page-configs/ui-elements/button-group/examples/Icons.vue
index 5c62e073d0..6e9bfe36bd 100644
--- a/packages/docs/src/page-configs/ui-elements/button-group/examples/Icons.vue
+++ b/packages/docs/src/page-configs/ui-elements/button-group/examples/Icons.vue
@@ -1,11 +1,11 @@
 <template>
-  <va-button-group class="mb-4">
+  <va-button-group class="mb-6">
     <va-button icon="create" />
     <va-button icon="add" />
     <va-button icon="add_circle_outline" />
   </va-button-group>
 
-  <va-button-group icon-color="danger" class="mb-4">
+  <va-button-group icon-color="danger" class="mb-6">
     <va-button icon="create" />
     <va-button icon="add" />
     <va-button icon="add_circle_outline" />
diff --git a/packages/docs/src/page-configs/ui-elements/button-group/examples/Sizes.vue b/packages/docs/src/page-configs/ui-elements/button-group/examples/Sizes.vue
index 1ee50abc36..94ee52a4ac 100644
--- a/packages/docs/src/page-configs/ui-elements/button-group/examples/Sizes.vue
+++ b/packages/docs/src/page-configs/ui-elements/button-group/examples/Sizes.vue
@@ -1,11 +1,11 @@
 <template>
-  <va-button-group class="mb-4" size="large">
+  <va-button-group class="mb-6" size="large">
     <va-button>L1</va-button>
     <va-button>L2</va-button>
     <va-button>L3</va-button>
   </va-button-group>
 
-  <va-button-group class="mb-4" size="small">
+  <va-button-group class="mb-6" size="small">
     <va-button>One</va-button>
     <va-button>Two</va-button>
     <va-button>Three</va-button>
diff --git a/packages/docs/src/page-configs/ui-elements/button-group/examples/Styles.vue b/packages/docs/src/page-configs/ui-elements/button-group/examples/Styles.vue
index ff09730a08..5ddb225a52 100644
--- a/packages/docs/src/page-configs/ui-elements/button-group/examples/Styles.vue
+++ b/packages/docs/src/page-configs/ui-elements/button-group/examples/Styles.vue
@@ -1,41 +1,41 @@
 <template>
-  <va-button-group class="mb-4">
+  <va-button-group class="mb-6">
     <va-button>One</va-button>
     <va-button>Two</va-button>
     <va-button>Three</va-button>
   </va-button-group>
 
-  <va-button-group preset="primary" class="mb-4">
+  <va-button-group preset="primary" class="mb-6">
     <va-button>One</va-button>
     <va-button>Two</va-button>
     <va-button>Three</va-button>
   </va-button-group>
 
-  <va-button-group preset="secondary" class="mb-4">
+  <va-button-group preset="secondary" class="mb-6">
     <va-button>One</va-button>
     <va-button>Two</va-button>
     <va-button>Three</va-button>
   </va-button-group>
 
-  <va-button-group preset="plain" class="mb-4">
+  <va-button-group preset="plain" class="mb-6">
     <va-button>One</va-button>
     <va-button>Two</va-button>
     <va-button>Three</va-button>
   </va-button-group>
 
-  <va-button-group preset="plainOpacity" class="mb-4">
+  <va-button-group preset="plainOpacity" class="mb-6">
     <va-button>One</va-button>
     <va-button>Two</va-button>
     <va-button>Three</va-button>
   </va-button-group>
 
-  <va-button-group preset="secondary" border-color="primary" class="mb-4">
+  <va-button-group preset="secondary" border-color="primary" class="mb-6">
     <va-button>One</va-button>
     <va-button>Two</va-button>
     <va-button>Three</va-button>
   </va-button-group>
 
-  <va-button-group round class="mb-4">
+  <va-button-group round class="mb-6">
     <va-button>One</va-button>
     <va-button>Two</va-button>
     <va-button>Three</va-button>
diff --git a/packages/docs/src/page-configs/ui-elements/button-toggle/examples/Colors.vue b/packages/docs/src/page-configs/ui-elements/button-toggle/examples/Colors.vue
index c76bc8e9fa..2775d88a17 100644
--- a/packages/docs/src/page-configs/ui-elements/button-toggle/examples/Colors.vue
+++ b/packages/docs/src/page-configs/ui-elements/button-toggle/examples/Colors.vue
@@ -3,14 +3,14 @@
     color="primary"
     v-model="model"
     :options="options"
-    class="mb-4"
+    class="mb-6"
   />
 
   <va-button-toggle
     color="success"
     v-model="model"
     :options="options"
-    class="mb-4"
+    class="mb-6"
   />
 
   <va-button-toggle
diff --git a/packages/docs/src/page-configs/ui-elements/button-toggle/examples/Disabled.vue b/packages/docs/src/page-configs/ui-elements/button-toggle/examples/Disabled.vue
index 0dbbfb1f46..084cf931dc 100644
--- a/packages/docs/src/page-configs/ui-elements/button-toggle/examples/Disabled.vue
+++ b/packages/docs/src/page-configs/ui-elements/button-toggle/examples/Disabled.vue
@@ -3,7 +3,7 @@
     disabled
     v-model="model"
     :options="options"
-    class="mb-4"
+    class="mb-6"
   />
 </template>
 
diff --git a/packages/docs/src/page-configs/ui-elements/button-toggle/examples/Gradient.vue b/packages/docs/src/page-configs/ui-elements/button-toggle/examples/Gradient.vue
index 15f3bbcbc4..f30f73fe17 100644
--- a/packages/docs/src/page-configs/ui-elements/button-toggle/examples/Gradient.vue
+++ b/packages/docs/src/page-configs/ui-elements/button-toggle/examples/Gradient.vue
@@ -4,7 +4,7 @@
     color="primary"
     v-model="model"
     :options="options"
-    class="mb-4"
+    class="mb-6"
   />
 
   <va-button-toggle
@@ -12,7 +12,7 @@
     color="success"
     v-model="model"
     :options="options"
-    class="mb-4"
+    class="mb-6"
   />
 
   <va-button-toggle
@@ -20,7 +20,7 @@
     color="danger"
     v-model="model"
     :options="options"
-    class="mb-4"
+    class="mb-6"
   />
 
   <va-button-toggle
diff --git a/packages/docs/src/page-configs/ui-elements/button-toggle/examples/Icons.vue b/packages/docs/src/page-configs/ui-elements/button-toggle/examples/Icons.vue
index 7581d8d3fd..049f31127e 100644
--- a/packages/docs/src/page-configs/ui-elements/button-toggle/examples/Icons.vue
+++ b/packages/docs/src/page-configs/ui-elements/button-toggle/examples/Icons.vue
@@ -2,7 +2,7 @@
   <va-button-toggle
     v-model="model"
     :options="optionsWithIcons"
-    class="mb-4"
+    class="mb-6"
     icon-color="warning"
   />
   <va-button-toggle
diff --git a/packages/docs/src/page-configs/ui-elements/button-toggle/examples/Sizes.vue b/packages/docs/src/page-configs/ui-elements/button-toggle/examples/Sizes.vue
index 769ec6d623..81dfb0b834 100644
--- a/packages/docs/src/page-configs/ui-elements/button-toggle/examples/Sizes.vue
+++ b/packages/docs/src/page-configs/ui-elements/button-toggle/examples/Sizes.vue
@@ -3,7 +3,7 @@
     size="large"
     v-model="model"
     :options="options"
-    class="mb-4"
+    class="mb-6"
   />
 
   <va-button-toggle
diff --git a/packages/docs/src/page-configs/ui-elements/button-toggle/examples/Styles.vue b/packages/docs/src/page-configs/ui-elements/button-toggle/examples/Styles.vue
index f84cb2da1e..5ed582423a 100644
--- a/packages/docs/src/page-configs/ui-elements/button-toggle/examples/Styles.vue
+++ b/packages/docs/src/page-configs/ui-elements/button-toggle/examples/Styles.vue
@@ -2,28 +2,28 @@
   <va-button-toggle
     v-model="model"
     :options="options"
-    class="mb-4"
+    class="mb-6"
   />
 
   <va-button-toggle
     preset="primary"
     v-model="model"
     :options="options"
-    class="mb-4"
+    class="mb-6"
   />
 
   <va-button-toggle
     preset="plain"
     v-model="model"
     :options="options"
-    class="mb-4"
+    class="mb-6"
   />
 
   <va-button-toggle
     round
     v-model="model"
     :options="options"
-    class="mb-4"
+    class="mb-6"
   />
 
   <va-button-toggle
diff --git a/packages/docs/src/page-configs/ui-elements/button/examples/Behavior.vue b/packages/docs/src/page-configs/ui-elements/button/examples/Behavior.vue
index 958dc10681..23071c924f 100644
--- a/packages/docs/src/page-configs/ui-elements/button/examples/Behavior.vue
+++ b/packages/docs/src/page-configs/ui-elements/button/examples/Behavior.vue
@@ -1,6 +1,6 @@
 <template>
   <div style="display: flex; align-items: center;">
-    <va-button class="mr-4 mb-2" preset="secondary" hover-behavior="opacity" :hoverOpacity="0.4">Hover me</va-button>
-    <va-button class="mr-4 mb-2" pressed-behavior="mask" :pressed-opacity="1" pressed-mask-color="warning">Press me</va-button>
+    <va-button class="mr-6 mb-2" preset="secondary" hover-behavior="opacity" :hoverOpacity="0.4">Hover me</va-button>
+    <va-button class="mr-6 mb-2" pressed-behavior="mask" :pressed-opacity="1" pressed-mask-color="warning">Press me</va-button>
   </div>
 </template>
diff --git a/packages/docs/src/page-configs/ui-elements/button/examples/Disabled.vue b/packages/docs/src/page-configs/ui-elements/button/examples/Disabled.vue
index d19a730073..0d15015028 100644
--- a/packages/docs/src/page-configs/ui-elements/button/examples/Disabled.vue
+++ b/packages/docs/src/page-configs/ui-elements/button/examples/Disabled.vue
@@ -1,7 +1,7 @@
 <template>
-  <va-button class="mr-4 mb-2" disabled>Accent (default)</va-button>
-  <va-button class="mr-4 mb-2" preset="primary" disabled>Primary</va-button>
-  <va-button class="mr-4 mb-2" preset="secondary" disabled>Secondary</va-button>
-  <va-button class="mr-4 mb-2" preset="plain" disabled>Plain</va-button>
-  <va-button class="mr-4 mb-2" preset="plainOpacity" disabled>Plain with opacity</va-button>
+  <va-button class="mr-6 mb-2" disabled>Accent (default)</va-button>
+  <va-button class="mr-6 mb-2" preset="primary" disabled>Primary</va-button>
+  <va-button class="mr-6 mb-2" preset="secondary" disabled>Secondary</va-button>
+  <va-button class="mr-6 mb-2" preset="plain" disabled>Plain</va-button>
+  <va-button class="mr-6 mb-2" preset="plainOpacity" disabled>Plain with opacity</va-button>
 </template>
diff --git a/packages/docs/src/page-configs/ui-elements/button/examples/Presets.vue b/packages/docs/src/page-configs/ui-elements/button/examples/Presets.vue
index 210d9e18d2..344284d16a 100644
--- a/packages/docs/src/page-configs/ui-elements/button/examples/Presets.vue
+++ b/packages/docs/src/page-configs/ui-elements/button/examples/Presets.vue
@@ -1,6 +1,6 @@
 <template>
-  <va-button preset="primary" class="mr-4 mb-2">Primary</va-button>
-  <va-button preset="secondary" class="mr-4 mb-2">Secondary</va-button>
-  <va-button preset="plain" class="mr-4 mb-2">Plain</va-button>
-  <va-button preset="plainOpacity" class="mr-4 mb-2">Plain-opacity</va-button>
+  <va-button preset="primary" class="mr-6 mb-2">Primary</va-button>
+  <va-button preset="secondary" class="mr-6 mb-2">Secondary</va-button>
+  <va-button preset="plain" class="mr-6 mb-2">Plain</va-button>
+  <va-button preset="plainOpacity" class="mr-6 mb-2">Plain-opacity</va-button>
 </template>
diff --git a/packages/docs/src/page-configs/ui-elements/button/examples/Tag.vue b/packages/docs/src/page-configs/ui-elements/button/examples/Tag.vue
index b7e8b6beb5..625673a90c 100644
--- a/packages/docs/src/page-configs/ui-elements/button/examples/Tag.vue
+++ b/packages/docs/src/page-configs/ui-elements/button/examples/Tag.vue
@@ -1,5 +1,5 @@
 <template>
-  <va-button class="mr-4" href="https://vuestic.dev/">External</va-button>
-  <va-button class="mr-4" to="/getting-started/installation">Inner</va-button>
+  <va-button class="mr-6" href="https://vuestic.dev/">External</va-button>
+  <va-button class="mr-6" to="/getting-started/installation">Inner</va-button>
   <va-button tag="div">I'm button (no)</va-button>
 </template>
diff --git a/packages/docs/src/page-configs/ui-elements/button/examples/WithColor.vue b/packages/docs/src/page-configs/ui-elements/button/examples/WithColor.vue
index 153f6b86c1..0cb6ee7c1d 100644
--- a/packages/docs/src/page-configs/ui-elements/button/examples/WithColor.vue
+++ b/packages/docs/src/page-configs/ui-elements/button/examples/WithColor.vue
@@ -1,5 +1,5 @@
 <template>
-  <va-button color="info" class="mr-4 mb-2">Info</va-button>
-  <va-button color="danger" class="mr-4 mb-2">Danger</va-button>
-  <va-button color="warning" class="mr-4 mb-2">Warning</va-button>
+  <va-button color="info" class="mr-6 mb-2">Info</va-button>
+  <va-button color="danger" class="mr-6 mb-2">Danger</va-button>
+  <va-button color="warning" class="mr-6 mb-2">Warning</va-button>
 </template>
diff --git a/packages/docs/src/page-configs/ui-elements/button/examples/WithGradient.vue b/packages/docs/src/page-configs/ui-elements/button/examples/WithGradient.vue
index 99214a6b91..7467cfaf5c 100644
--- a/packages/docs/src/page-configs/ui-elements/button/examples/WithGradient.vue
+++ b/packages/docs/src/page-configs/ui-elements/button/examples/WithGradient.vue
@@ -1,5 +1,5 @@
 <template>
-  <va-button color="info" gradient class="mr-4 mb-2">Info</va-button>
-  <va-button color="danger" gradient class="mr-4 mb-2">Danger</va-button>
-  <va-button color="warning" gradient class="mr-4 mb-2">Warning</va-button>
+  <va-button color="info" gradient class="mr-6 mb-2">Info</va-button>
+  <va-button color="danger" gradient class="mr-6 mb-2">Danger</va-button>
+  <va-button color="warning" gradient class="mr-6 mb-2">Warning</va-button>
 </template>
diff --git a/packages/docs/src/page-configs/ui-elements/button/examples/WithLoading.vue b/packages/docs/src/page-configs/ui-elements/button/examples/WithLoading.vue
index 43453550c8..9dd59064b4 100644
--- a/packages/docs/src/page-configs/ui-elements/button/examples/WithLoading.vue
+++ b/packages/docs/src/page-configs/ui-elements/button/examples/WithLoading.vue
@@ -1,5 +1,5 @@
 <template>
-  <va-button class="mr-4 mb-2" loading size="small">Button</va-button>
-  <va-button class="mr-4 mb-2" loading size="medium">Button</va-button>
-  <va-button class="mr-4 mb-2" loading size="large">Button</va-button>
+  <va-button class="mr-6 mb-2" loading size="small">Button</va-button>
+  <va-button class="mr-6 mb-2" loading size="medium">Button</va-button>
+  <va-button class="mr-6 mb-2" loading size="large">Button</va-button>
 </template>
diff --git a/packages/docs/src/page-configs/ui-elements/button/examples/WithOutline.vue b/packages/docs/src/page-configs/ui-elements/button/examples/WithOutline.vue
index 03c8ff439a..471017ffb8 100644
--- a/packages/docs/src/page-configs/ui-elements/button/examples/WithOutline.vue
+++ b/packages/docs/src/page-configs/ui-elements/button/examples/WithOutline.vue
@@ -1,6 +1,6 @@
 <template>
   <div style="display: flex; align-items: center;">
-    <va-button preset="secondary" border-color="primary" class="mr-4 mb-2">Label</va-button>
-    <va-button preset="primary" class="mr-4 mb-2" round icon="close" border-color="primary">Label</va-button>
+    <va-button preset="secondary" border-color="primary" class="mr-6 mb-2">Label</va-button>
+    <va-button preset="primary" class="mr-6 mb-2" round icon="close" border-color="primary">Label</va-button>
   </div>
 </template>
diff --git a/packages/docs/src/page-configs/ui-elements/button/examples/WithRound.vue b/packages/docs/src/page-configs/ui-elements/button/examples/WithRound.vue
index b46f29d178..4df6f313be 100644
--- a/packages/docs/src/page-configs/ui-elements/button/examples/WithRound.vue
+++ b/packages/docs/src/page-configs/ui-elements/button/examples/WithRound.vue
@@ -1,7 +1,7 @@
 <template>
   <div style="display: flex; align-items: center;">
-    <va-button size="large" class="mr-4 mb-2" round>Label</va-button>
-    <va-button size="small" class="mr-4 mb-2" round icon="close" />
-    <va-button class="mr-4 mb-2" round icon="close">Label</va-button>
+    <va-button size="large" class="mr-6 mb-2" round>Label</va-button>
+    <va-button size="small" class="mr-6 mb-2" round icon="close" />
+    <va-button class="mr-6 mb-2" round icon="close">Label</va-button>
   </div>
 </template>
diff --git a/packages/docs/src/page-configs/ui-elements/button/examples/WithSize.vue b/packages/docs/src/page-configs/ui-elements/button/examples/WithSize.vue
index e6a47f2086..f2b2ba7666 100644
--- a/packages/docs/src/page-configs/ui-elements/button/examples/WithSize.vue
+++ b/packages/docs/src/page-configs/ui-elements/button/examples/WithSize.vue
@@ -1,5 +1,5 @@
 <template>
-  <va-button size="small" class="mr-4 mb-2">Small</va-button>
-  <va-button size="medium" class="mr-4 mb-2">Medium</va-button>
-  <va-button size="large" class="mr-4 mb-2">Large</va-button>
+  <va-button size="small" class="mr-6 mb-2">Small</va-button>
+  <va-button size="medium" class="mr-6 mb-2">Medium</va-button>
+  <va-button size="large" class="mr-6 mb-2">Large</va-button>
 </template>
diff --git a/packages/docs/src/page-configs/ui-elements/card/examples/Actions.vue b/packages/docs/src/page-configs/ui-elements/card/examples/Actions.vue
index 851cf2e940..dd296533f7 100644
--- a/packages/docs/src/page-configs/ui-elements/card/examples/Actions.vue
+++ b/packages/docs/src/page-configs/ui-elements/card/examples/Actions.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="row">
-    <div class="flex md6 lg4">
+    <div class="flex items-center md6 lg4">
       <va-card>
         <va-card-title>Between horizontal alignment</va-card-title>
         <va-card-actions align="between">
@@ -9,7 +9,7 @@
         </va-card-actions>
       </va-card>
     </div>
-    <div class="flex md6 lg4">
+    <div class="flex items-center md6 lg4">
       <va-card>
         <va-card-title>Stretch vertical alignment</va-card-title>
         <va-card-actions align="stretch" vertical>
diff --git a/packages/docs/src/page-configs/ui-elements/card/examples/BorderAndShape.vue b/packages/docs/src/page-configs/ui-elements/card/examples/BorderAndShape.vue
index 1928f3c4de..6640287455 100644
--- a/packages/docs/src/page-configs/ui-elements/card/examples/BorderAndShape.vue
+++ b/packages/docs/src/page-configs/ui-elements/card/examples/BorderAndShape.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="row">
-    <div class="flex md6 lg4">
+    <div class="flex items-center md6 lg4">
       <va-card square outlined>
         <va-card-title>square and outlined</va-card-title>
         <va-card-content>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</va-card-content>
       </va-card>
     </div>
-    <div class="flex md6 lg4">
+    <div class="flex items-center md6 lg4">
       <va-card :bordered="false">
         <va-card-title>Bordered false</va-card-title>
         <va-card-content>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</va-card-content>
diff --git a/packages/docs/src/page-configs/ui-elements/card/examples/ColorAndGradient.vue b/packages/docs/src/page-configs/ui-elements/card/examples/ColorAndGradient.vue
index c5e39b6095..628631682d 100644
--- a/packages/docs/src/page-configs/ui-elements/card/examples/ColorAndGradient.vue
+++ b/packages/docs/src/page-configs/ui-elements/card/examples/ColorAndGradient.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="row">
-    <div class="flex md6 lg4">
+    <div class="flex items-center md6 lg4">
       <va-card color="primary" gradient>
         <va-card-title>Title</va-card-title>
         <va-card-content>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</va-card-content>
diff --git a/packages/docs/src/page-configs/ui-elements/card/examples/Default.vue b/packages/docs/src/page-configs/ui-elements/card/examples/Default.vue
index 450e38dcb4..24a02f89f2 100644
--- a/packages/docs/src/page-configs/ui-elements/card/examples/Default.vue
+++ b/packages/docs/src/page-configs/ui-elements/card/examples/Default.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="row">
-    <div class="flex md6 lg4">
+    <div class="flex items-center md6 lg4">
       <va-card>
         <va-card-title>Title</va-card-title>
         <va-card-content>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</va-card-content>
diff --git a/packages/docs/src/page-configs/ui-elements/card/examples/Disabled.vue b/packages/docs/src/page-configs/ui-elements/card/examples/Disabled.vue
index 0973ebf202..eeb7c50bd0 100644
--- a/packages/docs/src/page-configs/ui-elements/card/examples/Disabled.vue
+++ b/packages/docs/src/page-configs/ui-elements/card/examples/Disabled.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="row">
-    <div class="flex md6 lg4">
+    <div class="flex items-center md6 lg4">
       <va-card disabled>
         <va-card-title>Title</va-card-title>
         <va-card-content>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</va-card-content>
diff --git a/packages/docs/src/page-configs/ui-elements/card/examples/Horizontal.vue b/packages/docs/src/page-configs/ui-elements/card/examples/Horizontal.vue
index 21d76df34e..343ef4b903 100644
--- a/packages/docs/src/page-configs/ui-elements/card/examples/Horizontal.vue
+++ b/packages/docs/src/page-configs/ui-elements/card/examples/Horizontal.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="row flex-nowrap">
-    <div class="flex md4 lg4">
+    <div class="flex items-center md4 lg4">
       <va-card>
         <va-card-block class="flex-nowrap" horizontal>
           <div style="flex: auto;">
@@ -13,7 +13,7 @@
         </va-card-block>
       </va-card>
     </div>
-    <div class="flex md4 lg4">
+    <div class="flex items-center md4 lg4">
       <va-card>
         <va-card-block class="flex-nowrap" horizontal>
           <va-card-block style="flex: auto;">
@@ -26,7 +26,7 @@
         </va-card-block>
       </va-card>
     </div>
-    <div class="flex md4 lg4">
+    <div class="flex items-center md4 lg4">
       <va-card>
         <va-card-block class="flex-nowrap" horizontal>
           <va-image style="flex: 1;" src="https://picsum.photos/260" />
diff --git a/packages/docs/src/page-configs/ui-elements/card/examples/Image.vue b/packages/docs/src/page-configs/ui-elements/card/examples/Image.vue
index a60cc13bcc..e74de27040 100644
--- a/packages/docs/src/page-configs/ui-elements/card/examples/Image.vue
+++ b/packages/docs/src/page-configs/ui-elements/card/examples/Image.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="row">
-    <div class="flex md6 lg4">
+    <div class="flex items-center md6 lg4">
       <va-card>
         <va-image
           src="https://picsum.photos/400/200"
diff --git a/packages/docs/src/page-configs/ui-elements/card/examples/Link.vue b/packages/docs/src/page-configs/ui-elements/card/examples/Link.vue
index d04238971e..44621f1003 100644
--- a/packages/docs/src/page-configs/ui-elements/card/examples/Link.vue
+++ b/packages/docs/src/page-configs/ui-elements/card/examples/Link.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="row">
-    <div class="flex md6 lg4">
+    <div class="flex items-center md6 lg4">
       <va-card href="https://vuestic.epicmax.co/" target="_blank">
         <va-card-title>Title</va-card-title>
         <va-card-content>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</va-card-content>
diff --git a/packages/docs/src/page-configs/ui-elements/card/examples/Stripe.vue b/packages/docs/src/page-configs/ui-elements/card/examples/Stripe.vue
index 74cf011c17..ad0a17cb19 100644
--- a/packages/docs/src/page-configs/ui-elements/card/examples/Stripe.vue
+++ b/packages/docs/src/page-configs/ui-elements/card/examples/Stripe.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="row">
-    <div class="flex md6 lg4">
+    <div class="flex items-center md6 lg4">
       <va-card stripe stripe-color="success">
         <va-card-title>Title</va-card-title>
         <va-card-content>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</va-card-content>
diff --git a/packages/docs/src/page-configs/ui-elements/card/examples/Tag.vue b/packages/docs/src/page-configs/ui-elements/card/examples/Tag.vue
index 2bbbb52dcd..9b5ec71511 100644
--- a/packages/docs/src/page-configs/ui-elements/card/examples/Tag.vue
+++ b/packages/docs/src/page-configs/ui-elements/card/examples/Tag.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="row">
-    <div class="flex md6 lg4">
+    <div class="flex items-center md6 lg4">
       <va-card tag='b'>
         <va-card-title>Title</va-card-title>
         <va-card-content>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</va-card-content>
diff --git a/packages/docs/src/page-configs/ui-elements/checkbox/examples/Array.vue b/packages/docs/src/page-configs/ui-elements/checkbox/examples/Array.vue
index 779ac68ce3..120f258c40 100644
--- a/packages/docs/src/page-configs/ui-elements/checkbox/examples/Array.vue
+++ b/packages/docs/src/page-configs/ui-elements/checkbox/examples/Array.vue
@@ -1,23 +1,23 @@
 <template>
-  <div class="d-flex flex-direction-column">
-    <div class="mb-4">{{ selection }}</div>
+  <div class="d-flex flex-col">
+    <div class="mb-6">{{ selection }}</div>
     <va-checkbox
       v-model="selection"
       array-value="one"
       label="one"
-      class="mb-4"
+      class="mb-6"
     />
     <va-checkbox
       v-model="selection"
       array-value="two"
       label="two"
-      class="mb-4"
+      class="mb-6"
     />
     <va-checkbox
       v-model="selection"
       array-value="three"
       label="three"
-      class="mb-4"
+      class="mb-6"
     />
     <va-checkbox
       v-model="selection"
diff --git a/packages/docs/src/page-configs/ui-elements/checkbox/examples/Coloring.vue b/packages/docs/src/page-configs/ui-elements/checkbox/examples/Coloring.vue
index 52d904aa16..01c5cf01cd 100644
--- a/packages/docs/src/page-configs/ui-elements/checkbox/examples/Coloring.vue
+++ b/packages/docs/src/page-configs/ui-elements/checkbox/examples/Coloring.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="d-flex flex-direction-column">
-    <va-checkbox class="mb-4" color="primary" v-model="value" label="Primary" />
+  <div class="d-flex flex-col">
+    <va-checkbox class="mb-6" color="primary" v-model="value" label="Primary" />
     <va-checkbox color="#9c27b0" v-model="value" label="Custom color with icon" checked-icon="loop" />
   </div>
 </template>
diff --git a/packages/docs/src/page-configs/ui-elements/checkbox/examples/Label.vue b/packages/docs/src/page-configs/ui-elements/checkbox/examples/Label.vue
index 6877603930..7033d1fa39 100644
--- a/packages/docs/src/page-configs/ui-elements/checkbox/examples/Label.vue
+++ b/packages/docs/src/page-configs/ui-elements/checkbox/examples/Label.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="d-flex flex-direction-column">
-    <va-checkbox class="mb-4" v-model="value" :label="label" />
-    <va-checkbox class="mb-4" v-model="value" :label="longLabel" />
+  <div class="d-flex flex-col">
+    <va-checkbox class="mb-6" v-model="value" :label="label" />
+    <va-checkbox class="mb-6" v-model="value" :label="longLabel" />
     <va-checkbox v-model="value" :label="leftLabel" left-label />
   </div>
 </template>
diff --git a/packages/docs/src/page-configs/ui-elements/chip/examples/Color.vue b/packages/docs/src/page-configs/ui-elements/chip/examples/Color.vue
index 4ec8430c5b..4ea2455a6f 100644
--- a/packages/docs/src/page-configs/ui-elements/chip/examples/Color.vue
+++ b/packages/docs/src/page-configs/ui-elements/chip/examples/Color.vue
@@ -3,7 +3,7 @@
     v-for="(color, index) in colors"
     :key="index"
     :color="color"
-    class="mr-4 mb-2"
+    class="mr-6 mb-2"
   >
     {{color}}
   </va-chip>
diff --git a/packages/docs/src/page-configs/ui-elements/chip/examples/Icon.vue b/packages/docs/src/page-configs/ui-elements/chip/examples/Icon.vue
index b534b7cbcb..aa1692ad44 100644
--- a/packages/docs/src/page-configs/ui-elements/chip/examples/Icon.vue
+++ b/packages/docs/src/page-configs/ui-elements/chip/examples/Icon.vue
@@ -3,12 +3,12 @@
     v-for="(icon, index) in icons"
     :key="index"
     :icon="icon"
-    class="mr-4 mb-2"
+    class="mr-6 mb-2"
   >
     {{ icon }}
   </va-chip>
 
-  <va-chip class="mr-4 mb-2">without icon</va-chip>
+  <va-chip class="mr-6 mb-2">without icon</va-chip>
 </template>
 
 <script>
diff --git a/packages/docs/src/page-configs/ui-elements/chip/examples/Size.vue b/packages/docs/src/page-configs/ui-elements/chip/examples/Size.vue
index 86b37f42db..77a594ba89 100644
--- a/packages/docs/src/page-configs/ui-elements/chip/examples/Size.vue
+++ b/packages/docs/src/page-configs/ui-elements/chip/examples/Size.vue
@@ -3,7 +3,7 @@
     v-for="(size, index) in sizes"
     :key="index"
     :size="size"
-    class="mr-4 mb-2"
+    class="mr-6 mb-2"
   >
     {{size}} size
   </va-chip>
diff --git a/packages/docs/src/page-configs/ui-elements/collapse/examples/Color.vue b/packages/docs/src/page-configs/ui-elements/collapse/examples/Color.vue
index eb339f8b80..33a2aeac96 100644
--- a/packages/docs/src/page-configs/ui-elements/collapse/examples/Color.vue
+++ b/packages/docs/src/page-configs/ui-elements/collapse/examples/Color.vue
@@ -5,7 +5,7 @@
       header="Collapse header"
       solid
       color="success"
-      class="mb-4"
+      class="mb-6"
     >
       <div style="padding: 8px;">
         Collapse content
@@ -16,7 +16,7 @@
       header="Collapse header"
       solid
       color="secondary"
-      class="mb-4"
+      class="mb-6"
     >
       <div style="padding: 8px;">
         Collapse content
@@ -28,7 +28,7 @@
       solid
       color="info"
       color-all
-      class="mb-4"
+      class="mb-6"
     >
       <div style="padding: 8px;">
         Collapse content
@@ -42,7 +42,7 @@
       color-all
       text-color="backgroundPrimary"
       icon="info"
-      class="mb-4"
+      class="mb-6"
     >
       <div style="padding: 8px;">
         Collapse content
diff --git a/packages/docs/src/page-configs/ui-elements/counter/examples/Buttons.vue b/packages/docs/src/page-configs/ui-elements/counter/examples/Buttons.vue
index a6674e714e..9d2bf3770f 100644
--- a/packages/docs/src/page-configs/ui-elements/counter/examples/Buttons.vue
+++ b/packages/docs/src/page-configs/ui-elements/counter/examples/Buttons.vue
@@ -1,17 +1,17 @@
 <template>
   <div class="row">
-    <va-counter class="mx-4 my-2"
+    <va-counter class="mx-6 my-2"
       v-model="value"
       buttons
     />
 
-    <va-counter class="mx-4 my-2"
+    <va-counter class="mx-6 my-2"
       v-model="value"
       outline
       buttons
     />
 
-    <va-counter class="mx-4 my-2"
+    <va-counter class="mx-6 my-2"
       v-model="value"
       bordered
       buttons
diff --git a/packages/docs/src/page-configs/ui-elements/counter/examples/ButtonsStyle.vue b/packages/docs/src/page-configs/ui-elements/counter/examples/ButtonsStyle.vue
index c0742ed2be..a44c3ae504 100644
--- a/packages/docs/src/page-configs/ui-elements/counter/examples/ButtonsStyle.vue
+++ b/packages/docs/src/page-configs/ui-elements/counter/examples/ButtonsStyle.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="row">
-    <va-counter class="mx-4 my-2"
+    <va-counter class="mx-6 my-2"
       v-model="value"
       buttons
       :flat="false"
       rounded
     />
 
-    <va-counter class="mx-4 my-2"
+    <va-counter class="mx-6 my-2"
       v-model="value"
       outline
       buttons
@@ -16,13 +16,13 @@
       rounded
     />
 
-    <va-counter class="mx-4 my-2"
+    <va-counter class="mx-6 my-2"
       v-model="value"
       buttons
       :flat="false"
     />
 
-    <va-counter class="mx-4 my-2"
+    <va-counter class="mx-6 my-2"
       v-model="value"
       outline
       buttons
diff --git a/packages/docs/src/page-configs/ui-elements/counter/examples/Default.vue b/packages/docs/src/page-configs/ui-elements/counter/examples/Default.vue
index db7569cec2..23971e119f 100644
--- a/packages/docs/src/page-configs/ui-elements/counter/examples/Default.vue
+++ b/packages/docs/src/page-configs/ui-elements/counter/examples/Default.vue
@@ -1,16 +1,16 @@
 <template>
   <div class="row">
-    <va-counter class="mx-4 my-2"
+    <va-counter class="mx-6 my-2"
       v-model="value"
       messages="Default"
     />
 
-    <va-counter class="mx-4 my-2"
+    <va-counter class="mx-6 my-2"
       stateful
       messages="Stateful"
     />
 
-    <va-counter class="mx-4 my-2"
+    <va-counter class="mx-6 my-2"
       v-model="value"
       manual-input
       messages="Manual-input"
diff --git a/packages/docs/src/page-configs/ui-elements/counter/examples/Hint.vue b/packages/docs/src/page-configs/ui-elements/counter/examples/Hint.vue
index 0c071b63dd..d0d1b73307 100644
--- a/packages/docs/src/page-configs/ui-elements/counter/examples/Hint.vue
+++ b/packages/docs/src/page-configs/ui-elements/counter/examples/Hint.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="row">
-    <va-counter class="mx-4 my-2"
+    <va-counter class="mx-6 my-2"
       v-model="value"
       messages="Select number"
     />
-    <va-counter class="mx-4 my-2"
+    <va-counter class="mx-6 my-2"
       v-model="value"
       :messages="['Select number', 'Select again :)']"
     />
diff --git a/packages/docs/src/page-configs/ui-elements/counter/examples/IconsColors.vue b/packages/docs/src/page-configs/ui-elements/counter/examples/IconsColors.vue
index 2219cd8ec6..39549363e6 100644
--- a/packages/docs/src/page-configs/ui-elements/counter/examples/IconsColors.vue
+++ b/packages/docs/src/page-configs/ui-elements/counter/examples/IconsColors.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="row">
-    <va-counter class="mx-4 my-2"
+    <va-counter class="mx-6 my-2"
       v-model="value"
       increaseIcon="add_circle_outline"
       decreaseIcon="remove_circle_outline"
       color="#6938D1"
     />
 
-    <va-counter class="mx-4 my-2"
+    <va-counter class="mx-6 my-2"
       v-model="value"
       outline
       increaseIcon="arrow_upward"
@@ -15,7 +15,7 @@
       color="#0FB58D"
     />
 
-    <va-counter class="mx-4 my-2"
+    <va-counter class="mx-6 my-2"
       v-model="value"
       outline
       preset="secondary"
diff --git a/packages/docs/src/page-configs/ui-elements/counter/examples/MaxMinStep.vue b/packages/docs/src/page-configs/ui-elements/counter/examples/MaxMinStep.vue
index ea6480277f..e772192818 100644
--- a/packages/docs/src/page-configs/ui-elements/counter/examples/MaxMinStep.vue
+++ b/packages/docs/src/page-configs/ui-elements/counter/examples/MaxMinStep.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="row">
-    <va-counter class="mx-4 my-2"
+    <va-counter class="mx-6 my-2"
       v-model="value"
       :min="-100" :max="100" :step="10"
       messages="-100 to 100 with step=10"
     />
 
-    <va-counter class="mx-4 my-2"
+    <va-counter class="mx-6 my-2"
       v-model="value"
       manual-input
       :min="-100" :max="100" :step="10"
diff --git a/packages/docs/src/page-configs/ui-elements/counter/examples/Slots.vue b/packages/docs/src/page-configs/ui-elements/counter/examples/Slots.vue
index 99a993e093..6041447d9a 100644
--- a/packages/docs/src/page-configs/ui-elements/counter/examples/Slots.vue
+++ b/packages/docs/src/page-configs/ui-elements/counter/examples/Slots.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="row">
-    <va-counter class="mx-4 my-2"
+    <va-counter class="mx-6 my-2"
       v-model="value"
       width="220px"
     >
@@ -9,7 +9,7 @@
       </template>
     </va-counter>
 
-    <va-counter class="mx-4 my-2"
+    <va-counter class="mx-6 my-2"
       v-model="value"
       width="220px"
     >
@@ -21,7 +21,7 @@
       </template>
     </va-counter>
 
-    <va-counter class="mx-4 my-2"
+    <va-counter class="mx-6 my-2"
       v-model="value"
       width="220px"
       buttons
diff --git a/packages/docs/src/page-configs/ui-elements/counter/examples/State.vue b/packages/docs/src/page-configs/ui-elements/counter/examples/State.vue
index be9e683a08..642f91b1cd 100644
--- a/packages/docs/src/page-configs/ui-elements/counter/examples/State.vue
+++ b/packages/docs/src/page-configs/ui-elements/counter/examples/State.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="row">
-    <va-counter class="mx-4 my-2"
+    <va-counter class="mx-6 my-2"
       v-model="value"
       readonly
     />
 
-    <va-counter class="mx-4 my-2"
+    <va-counter class="mx-6 my-2"
       v-model="value"
       buttons
       readonly
@@ -13,12 +13,12 @@
   </div>
 
   <div class="row">
-    <va-counter class="mx-4 my-2"
+    <va-counter class="mx-6 my-2"
       v-model="value"
       disabled
     />
 
-    <va-counter class="mx-4 my-2"
+    <va-counter class="mx-6 my-2"
       v-model="value"
       buttons
       disabled
diff --git a/packages/docs/src/page-configs/ui-elements/counter/examples/Style.vue b/packages/docs/src/page-configs/ui-elements/counter/examples/Style.vue
index eab5c31513..974309bd79 100644
--- a/packages/docs/src/page-configs/ui-elements/counter/examples/Style.vue
+++ b/packages/docs/src/page-configs/ui-elements/counter/examples/Style.vue
@@ -1,15 +1,15 @@
 <template>
   <div class="row">
-    <va-counter class="mx-4 my-2"
+    <va-counter class="mx-6 my-2"
       v-model="value"
     />
 
-    <va-counter class="mx-4 my-2"
+    <va-counter class="mx-6 my-2"
       v-model="value"
       outline
     />
 
-    <va-counter class="mx-4 my-2"
+    <va-counter class="mx-6 my-2"
       v-model="value"
       bordered
     />
diff --git a/packages/docs/src/page-configs/ui-elements/counter/examples/Width.vue b/packages/docs/src/page-configs/ui-elements/counter/examples/Width.vue
index 472915bf7d..54784ca9e1 100644
--- a/packages/docs/src/page-configs/ui-elements/counter/examples/Width.vue
+++ b/packages/docs/src/page-configs/ui-elements/counter/examples/Width.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="row">
-    <va-counter class="mx-4 my-2"
+    <va-counter class="mx-6 my-2"
       v-model="value"
       width="250px"
     />
 
-    <va-counter class="mx-4 my-2"
+    <va-counter class="mx-6 my-2"
       v-model="value"
       outline
       buttons
diff --git a/packages/docs/src/page-configs/ui-elements/data-table/examples/Binding.vue b/packages/docs/src/page-configs/ui-elements/data-table/examples/Binding.vue
index f074ede182..465ae20ff5 100644
--- a/packages/docs/src/page-configs/ui-elements/data-table/examples/Binding.vue
+++ b/packages/docs/src/page-configs/ui-elements/data-table/examples/Binding.vue
@@ -1,13 +1,13 @@
 <template>
-  <div class="row mb-4">
+  <div class="row mb-6">
     <va-checkbox
-      class="flex md3 sm4 xs6"
+      class="flex flex-col md3 sm4 xs6"
       label="Row bind"
       v-model="isRowBind"
     />
 
     <va-checkbox
-      class="flex md3 sm4 xs6"
+      class="flex flex-col md3 sm4 xs6"
       label="Cell bind"
       v-model="isCellBind"
     />
diff --git a/packages/docs/src/page-configs/ui-elements/data-table/examples/CRUD.vue b/packages/docs/src/page-configs/ui-elements/data-table/examples/CRUD.vue
index 31e63923cd..df93a2b637 100644
--- a/packages/docs/src/page-configs/ui-elements/data-table/examples/CRUD.vue
+++ b/packages/docs/src/page-configs/ui-elements/data-table/examples/CRUD.vue
@@ -10,14 +10,14 @@
         <th
           v-for="key in Object.keys(createdItem)"
           :key="key"
-          class="pa-1"
+          class="p-1"
         >
           <va-input
             :placeholder="key"
             v-model="createdItem[key]"
           />
         </th>
-        <th class="pa-1">
+        <th class="p-1">
           <va-button
             @click="addNewItem"
             :disabled="!isNewData"
diff --git a/packages/docs/src/page-configs/ui-elements/data-table/examples/Filtering.vue b/packages/docs/src/page-configs/ui-elements/data-table/examples/Filtering.vue
index 5451f0a7ac..8e3c64bf7a 100644
--- a/packages/docs/src/page-configs/ui-elements/data-table/examples/Filtering.vue
+++ b/packages/docs/src/page-configs/ui-elements/data-table/examples/Filtering.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="row">
     <va-input
-      class="flex mb-2 md6 xs12"
+      class="flex flex-col mb-2 md6 xs12"
       placeholder="Filter..."
       v-model="input"
     />
 
-    <div class="flex mb-2 md6 xs12">
+    <div class="flex flex-col mb-2 md6 xs12">
       <va-checkbox
         class="mb-3 d-block"
         label="Use custom filtering function (looks for an exact match)"
diff --git a/packages/docs/src/page-configs/ui-elements/data-table/examples/Other.vue b/packages/docs/src/page-configs/ui-elements/data-table/examples/Other.vue
index 9817b24d01..629c6219bf 100644
--- a/packages/docs/src/page-configs/ui-elements/data-table/examples/Other.vue
+++ b/packages/docs/src/page-configs/ui-elements/data-table/examples/Other.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="row">
-    <div class="flex lg4 mb-2">
+    <div class="flex flex-col lg4 mb-2">
       <va-switch
         class="mt-2"
         label="Striped style"
@@ -23,7 +23,7 @@
       />
     </div>
 
-    <div class="flex lg4 mb-2">
+    <div class="flex flex-col lg4 mb-2">
       <va-switch
         class="mt-2"
         label="Loading state"
@@ -46,7 +46,7 @@
       />
     </div>
 
-    <div class="flex lg4 mb-2">
+    <div class="flex flex-col lg4 mb-2">
       <va-switch
         class="mt-2"
         label="Hide default header"
diff --git a/packages/docs/src/page-configs/ui-elements/data-table/examples/Pagination.vue b/packages/docs/src/page-configs/ui-elements/data-table/examples/Pagination.vue
index ccd5d0734a..7b0e2d7e8a 100644
--- a/packages/docs/src/page-configs/ui-elements/data-table/examples/Pagination.vue
+++ b/packages/docs/src/page-configs/ui-elements/data-table/examples/Pagination.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="row">
     <va-input
-      class="flex mb-2 md3"
+      class="flex flex-col mb-2 md3"
       type="number"
       placeholder="Items..."
       label="Items per page"
@@ -9,7 +9,7 @@
     />
 
     <va-input
-      class="flex mb-2 md3"
+      class="flex flex-col mb-2 md3"
       type="number"
       placeholder="Page..."
       label="Current page"
@@ -17,7 +17,7 @@
     />
 
     <va-input
-      class="flex mb-2 md6"
+      class="flex flex-col mb-2 md6"
       placeholder="Filter..."
       v-model="filter"
     />
diff --git a/packages/docs/src/page-configs/ui-elements/data-table/examples/Selection.vue b/packages/docs/src/page-configs/ui-elements/data-table/examples/Selection.vue
index 13c128bfa8..46749db3bd 100644
--- a/packages/docs/src/page-configs/ui-elements/data-table/examples/Selection.vue
+++ b/packages/docs/src/page-configs/ui-elements/data-table/examples/Selection.vue
@@ -1,20 +1,20 @@
 <template>
   <div class="row">
     <va-checkbox
-      class="flex mb-2 md4"
+      class="flex flex-col mb-2 md4"
       label="Selectable"
       v-model="selectable"
     />
 
     <va-select
-      class="flex mb-2 md4"
+      class="flex flex-col mb-2 md4"
       v-model="selectMode"
       label="Select mode"
       :options="selectModeOptions"
     />
 
     <va-select
-      class="flex mb-2 md4"
+      class="flex flex-col mb-2 md4"
       v-model="selectedColor"
       label="Selected color"
       :options="selectColorOptions"
diff --git a/packages/docs/src/page-configs/ui-elements/data-table/examples/Sorting.vue b/packages/docs/src/page-configs/ui-elements/data-table/examples/Sorting.vue
index b26d06c6fc..2f385090d3 100644
--- a/packages/docs/src/page-configs/ui-elements/data-table/examples/Sorting.vue
+++ b/packages/docs/src/page-configs/ui-elements/data-table/examples/Sorting.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="row">
     <va-select
-      class="flex mb-2 md6"
+      class="flex flex-col mb-2 md6"
       v-model="sortBy"
       label="Sort by"
       :options="sortByOptions()"
     />
 
     <va-select
-      class="flex mb-2 md6"
+      class="flex flex-col mb-2 md6"
       v-model="sortingOrder"
       label="Sorting order"
       :options="sortingOrderOptions"
diff --git a/packages/docs/src/page-configs/ui-elements/data-table/examples/Styling.vue b/packages/docs/src/page-configs/ui-elements/data-table/examples/Styling.vue
index f72d8bea4f..23374253d5 100644
--- a/packages/docs/src/page-configs/ui-elements/data-table/examples/Styling.vue
+++ b/packages/docs/src/page-configs/ui-elements/data-table/examples/Styling.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class='row mb-4'>
-    <div class='flex md4'>
+  <div class='row mb-6'>
+    <div class='flex flex-col md4'>
       <va-select
         v-model="columns[0].thAlign"
         label="First heading align"
@@ -20,7 +20,7 @@
         clearable
       />
     </div>
-    <div class='flex md4'>
+    <div class='flex flex-col md4'>
       <va-select
         v-model="columns[1].thAlign"
         label="Second heading align"
@@ -40,7 +40,7 @@
         clearable
       />
     </div>
-    <div class='flex md4'>
+    <div class='flex flex-col md4'>
       <va-select
         v-model="columns[2].thAlign"
         label="Third heading align"
@@ -62,8 +62,8 @@
     </div>
   </div>
 
-  <div class='row mb-4'>
-    <div class='flex md4'>
+  <div class='row mb-6'>
+    <div class='flex flex-col md4'>
       <va-select
         v-model="columns[0].tdAlign"
         label="First column align"
@@ -78,7 +78,7 @@
         color="#990099"
       />
     </div>
-    <div class='flex md4'>
+    <div class='flex flex-col md4'>
       <va-select
         v-model="columns[1].tdAlign"
         label="Second column align"
@@ -93,7 +93,7 @@
         color="#990099"
       />
     </div>
-    <div class='flex md4'>
+    <div class='flex flex-col md4'>
       <va-select
         v-model="columns[2].tdAlign"
         label="Third column align"
@@ -110,14 +110,14 @@
     </div>
   </div>
 
-  <div class='row mb-4'>
+  <div class='row mb-6'>
     <va-checkbox
-      class="flex mb-1 md6"
+      class="flex flex-col mb-1 md6"
       label="Use additional class to cells of first column"
       v-model="useAdditionalClass"
     />
     <va-checkbox
-      class="flex mb-1 md6"
+      class="flex flex-col mb-1 md6"
       label="Use additional styles to cells of second column"
       v-model="useAdditionalStyle"
     />
diff --git a/packages/docs/src/page-configs/ui-elements/date-input/examples/View.vue b/packages/docs/src/page-configs/ui-elements/date-input/examples/View.vue
index 6c0bc90069..5a37f53d28 100644
--- a/packages/docs/src/page-configs/ui-elements/date-input/examples/View.vue
+++ b/packages/docs/src/page-configs/ui-elements/date-input/examples/View.vue
@@ -1,21 +1,21 @@
 <template>
-  <div class="row">
+  <div class="flex">
     <va-date-input
-      class="mb-4 mr-4"
+      class="mr-6"
       v-model="value"
       v-model:view="dayView"
       label="Day"
     />
 
     <va-date-input
-      class="mb-4 mr-4"
+      class="mr-6"
       v-model="value"
       v-model:view="monthView"
       label="Month"
     />
 
     <va-date-input
-      class="mb-4 mr-4"
+      class="mr-6"
       v-model="value"
       v-model:view="yearView"
       label="Year"
diff --git a/packages/docs/src/page-configs/ui-elements/date-input/examples/inputProps.vue b/packages/docs/src/page-configs/ui-elements/date-input/examples/inputProps.vue
index 6773215ece..6d39997085 100644
--- a/packages/docs/src/page-configs/ui-elements/date-input/examples/inputProps.vue
+++ b/packages/docs/src/page-configs/ui-elements/date-input/examples/inputProps.vue
@@ -1,43 +1,43 @@
 <template>
   <va-date-input
-    class="mb-4 mr-4"
+    class="mb-6 mr-6"
     label="readonly"
     readonly
   />
 
   <va-date-input
-    class="mb-4 mr-4"
+    class="mb-6 mr-6"
     label="disabled"
     disabled
   />
 
   <va-date-input
-    class="mb-4 mr-4"
+    class="mb-6 mr-6"
     label="color"
     color="#ff00ff"
   />
 
   <va-date-input
-    class="mb-4 mr-4"
+    class="mb-6 mr-6"
     label="placeholder"
     placeholder="Custom placeholder"
   />
 
   <va-date-input
-    class="mb-4 mr-4"
+    class="mb-6 mr-6"
     label="clearable"
     stateful
     clearable
   />
 
   <va-date-input
-    class="mb-4 mr-4"
+    class="mb-6 mr-6"
     label="outline"
     outline
   />
 
   <va-date-input
-    class="mb-4 mr-4"
+    class="mb-6 mr-6"
     label="bordered"
     bordered
   />
diff --git a/packages/docs/src/page-configs/ui-elements/date-input/examples/mode.vue b/packages/docs/src/page-configs/ui-elements/date-input/examples/mode.vue
index d2e9ace486..9ccecb695e 100644
--- a/packages/docs/src/page-configs/ui-elements/date-input/examples/mode.vue
+++ b/packages/docs/src/page-configs/ui-elements/date-input/examples/mode.vue
@@ -1,16 +1,16 @@
 <template>
   <div class="flex row">
-    <div class="flex">
+    <div class="flex flex-col">
       <h6>Single mode</h6>
       <va-date-input mode="single" v-model="single" />
     </div>
 
-    <div class="flex">
+    <div class="flex flex-col">
       <h6>Multiple mode</h6>
       <va-date-input mode="multiple" v-model="multiple" />
     </div>
 
-    <div class="flex">
+    <div class="flex flex-col">
       <h6>Range mode</h6>
       <va-date-input mode="range" v-model="range" />
     </div>
diff --git a/packages/docs/src/page-configs/ui-elements/date-input/examples/resetOnClose.vue b/packages/docs/src/page-configs/ui-elements/date-input/examples/resetOnClose.vue
index 09e49a58ec..ee91e06b3d 100644
--- a/packages/docs/src/page-configs/ui-elements/date-input/examples/resetOnClose.vue
+++ b/packages/docs/src/page-configs/ui-elements/date-input/examples/resetOnClose.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="flex row">
-    <div class="flex">
+    <div class="flex flex-col">
       <h6>Reset on close (resetOnClose = true)</h6>
       <va-date-input v-model="range" />
     </div>
 
-    <div class="flex">
+    <div class="flex flex-col">
       <h6>Don't reset on close (resetOnClose = false)</h6>
       <va-date-input :reset-on-close="false" v-model="range" />
     </div>
diff --git a/packages/docs/src/page-configs/ui-elements/date-input/examples/validation.vue b/packages/docs/src/page-configs/ui-elements/date-input/examples/validation.vue
index 354f841abf..7bd56883ac 100644
--- a/packages/docs/src/page-configs/ui-elements/date-input/examples/validation.vue
+++ b/packages/docs/src/page-configs/ui-elements/date-input/examples/validation.vue
@@ -1,14 +1,14 @@
 <template>
   <div style="display: flex; align-items: flex-start;">
     <va-date-input
-      class="mr-4"
+      class="mr-6"
       label="Success"
       v-model="value"
       success
     />
 
     <va-date-input
-      class="mr-4"
+      class="mr-6"
       label="Error"
       v-model="value"
       error
diff --git a/packages/docs/src/page-configs/ui-elements/date-picker/examples/Color.vue b/packages/docs/src/page-configs/ui-elements/date-picker/examples/Color.vue
index ef455f33c3..826a938e0a 100644
--- a/packages/docs/src/page-configs/ui-elements/date-picker/examples/Color.vue
+++ b/packages/docs/src/page-configs/ui-elements/date-picker/examples/Color.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex row">
-    <div class="flex">
+    <div class="flex flex-col">
       <va-date-picker
         v-model="range"
         color="warning"
@@ -10,7 +10,7 @@
       />
     </div>
 
-    <div class="flex">
+    <div class="flex flex-col">
       <va-date-picker
         v-model="range"
         color="warning"
@@ -21,7 +21,7 @@
       />
     </div>
 
-    <div class="flex">
+    <div class="flex flex-col">
       <va-date-picker
         v-model="range"
         color="warning"
diff --git a/packages/docs/src/page-configs/ui-elements/date-picker/examples/Disabled.vue b/packages/docs/src/page-configs/ui-elements/date-picker/examples/Disabled.vue
index b17082d71b..90bbf85894 100644
--- a/packages/docs/src/page-configs/ui-elements/date-picker/examples/Disabled.vue
+++ b/packages/docs/src/page-configs/ui-elements/date-picker/examples/Disabled.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="flex row">
-    <div class="flex">
+    <div class="flex flex-col">
       <va-date-picker v-model="value" type="day" disabled />
     </div>
 
-    <div class="flex">
+    <div class="flex flex-col">
       <va-date-picker v-model="value" type="month" disabled />
     </div>
 
-    <div class="flex">
+    <div class="flex flex-col">
       <va-date-picker v-model="value" type="year" disabled />
     </div>
   </div>
diff --git a/packages/docs/src/page-configs/ui-elements/date-picker/examples/DisabledDates.vue b/packages/docs/src/page-configs/ui-elements/date-picker/examples/DisabledDates.vue
index 18b4be05d0..da5921b187 100644
--- a/packages/docs/src/page-configs/ui-elements/date-picker/examples/DisabledDates.vue
+++ b/packages/docs/src/page-configs/ui-elements/date-picker/examples/DisabledDates.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="flex row">
-    <div class="flex">
+    <div class="flex flex-col">
       <va-date-picker
         stateful
         :allowedDays="(date) => date.getDay() !== 2 && date.getDay() !== 4"
       />
     </div>
 
-    <div class="flex">
+    <div class="flex flex-col">
       <va-date-picker
         stateful
         :allowedMonths="(date) => date.getMonth() !== 0 && date.getMonth() !== 11"
@@ -15,7 +15,7 @@
       />
     </div>
 
-    <div class="flex">
+    <div class="flex flex-col">
       <va-date-picker
         stateful
         :allowedYears="(date) => date.getFullYear() % 2 === 0"
diff --git a/packages/docs/src/page-configs/ui-elements/date-picker/examples/FirstWeekday.vue b/packages/docs/src/page-configs/ui-elements/date-picker/examples/FirstWeekday.vue
index 6c3a2c8ae9..a6295ce481 100644
--- a/packages/docs/src/page-configs/ui-elements/date-picker/examples/FirstWeekday.vue
+++ b/packages/docs/src/page-configs/ui-elements/date-picker/examples/FirstWeekday.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="flex row">
-    <div class="flex">
+    <div class="flex flex-col">
       <h5>Sun (default)</h5>
       <va-date-picker stateful />
     </div>
-    <div class="flex">
+    <div class="flex flex-col">
       <h5>Monday</h5>
       <va-date-picker stateful first-weekday="Monday" />
     </div>
diff --git a/packages/docs/src/page-configs/ui-elements/date-picker/examples/Mode.vue b/packages/docs/src/page-configs/ui-elements/date-picker/examples/Mode.vue
index 1675a863b9..e676e9cf23 100644
--- a/packages/docs/src/page-configs/ui-elements/date-picker/examples/Mode.vue
+++ b/packages/docs/src/page-configs/ui-elements/date-picker/examples/Mode.vue
@@ -1,16 +1,16 @@
 <template>
   <div class="flex row">
-    <div class="flex">
+    <div class="flex flex-col">
       <h6>Single mode</h6>
       <va-date-picker mode="single" v-model="single" />
     </div>
 
-    <div class="flex">
+    <div class="flex flex-col">
       <h6>Multiple mode</h6>
       <va-date-picker mode="multiple" v-model="multiple" />
     </div>
 
-    <div  class="flex">
+    <div  class="flex flex-col">
       <h6>Range mode</h6>
       <va-date-picker mode="range" v-model="range" />
     </div>
diff --git a/packages/docs/src/page-configs/ui-elements/date-picker/examples/Readonly.vue b/packages/docs/src/page-configs/ui-elements/date-picker/examples/Readonly.vue
index 1372f2c987..2837e605e1 100644
--- a/packages/docs/src/page-configs/ui-elements/date-picker/examples/Readonly.vue
+++ b/packages/docs/src/page-configs/ui-elements/date-picker/examples/Readonly.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="flex row">
-    <div class="flex">
+    <div class="flex flex-col">
       <va-date-picker v-model="value" type="day" readonly />
     </div>
 
-    <div class="flex">
+    <div class="flex flex-col">
       <va-date-picker v-model="value" type="month" readonly />
     </div>
 
-    <div class="flex">
+    <div class="flex flex-col">
       <va-date-picker v-model="value" type="year" readonly />
     </div>
   </div>
diff --git a/packages/docs/src/page-configs/ui-elements/date-picker/examples/Stateful.vue b/packages/docs/src/page-configs/ui-elements/date-picker/examples/Stateful.vue
index 6ef51e7d93..cc11d8242a 100644
--- a/packages/docs/src/page-configs/ui-elements/date-picker/examples/Stateful.vue
+++ b/packages/docs/src/page-configs/ui-elements/date-picker/examples/Stateful.vue
@@ -1,16 +1,16 @@
 <template>
   <div class="flex row">
-    <div class="flex">
+    <div class="flex flex-col">
       <h6>Single mode</h6>
       <va-date-picker mode="single" stateful />
     </div>
 
-    <div class="flex">
+    <div class="flex flex-col">
       <h6>Multiple mode</h6>
       <va-date-picker mode="multiple" stateful />
     </div>
 
-    <div  class="flex">
+    <div  class="flex flex-col">
       <h6>Range mode</h6>
       <va-date-picker mode="range" stateful />
     </div>
diff --git a/packages/docs/src/page-configs/ui-elements/date-picker/examples/Type.vue b/packages/docs/src/page-configs/ui-elements/date-picker/examples/Type.vue
index 2451142d87..fb46d226fa 100644
--- a/packages/docs/src/page-configs/ui-elements/date-picker/examples/Type.vue
+++ b/packages/docs/src/page-configs/ui-elements/date-picker/examples/Type.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="flex row">
-    <div class="flex">
+    <div class="flex flex-col">
       <va-date-picker stateful type="day" />
     </div>
 
-    <div class="flex">
+    <div class="flex flex-col">
       <va-date-picker stateful type="month" />
     </div>
 
-    <div class="flex">
+    <div class="flex flex-col">
       <va-date-picker stateful type="year" />
     </div>
   </div>
diff --git a/packages/docs/src/page-configs/ui-elements/date-picker/examples/View.vue b/packages/docs/src/page-configs/ui-elements/date-picker/examples/View.vue
index 6c15961696..3a53438a9c 100644
--- a/packages/docs/src/page-configs/ui-elements/date-picker/examples/View.vue
+++ b/packages/docs/src/page-configs/ui-elements/date-picker/examples/View.vue
@@ -1,16 +1,16 @@
 <template>
   <div class="flex row">
-    <div class="flex">
+    <div class="flex flex-col">
       <h6>Day, 1st month, 2000 year</h6>
       <va-date-picker stateful v-model:view="dayView" />
     </div>
 
-    <div class="flex">
+    <div class="flex flex-col">
       <h6>Month, 2000 year</h6>
       <va-date-picker stateful v-model:view="monthView" />
     </div>
 
-    <div class="flex">
+    <div class="flex flex-col">
       <h6>Year, 2000 year</h6>
       <va-date-picker stateful v-model:view="yearView" />
     </div>
diff --git a/packages/docs/src/page-configs/ui-elements/date-picker/examples/Weekends.vue b/packages/docs/src/page-configs/ui-elements/date-picker/examples/Weekends.vue
index b8258edbd8..c1bce2bdd7 100644
--- a/packages/docs/src/page-configs/ui-elements/date-picker/examples/Weekends.vue
+++ b/packages/docs/src/page-configs/ui-elements/date-picker/examples/Weekends.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="flex row">
-    <div class="flex">
+    <div class="flex flex-col">
       <va-date-picker
         stateful
         highlight-weekend
       />
     </div>
-    <div class="flex">
+    <div class="flex flex-col">
       <va-date-picker
         stateful
         highlight-weekend
diff --git a/packages/docs/src/page-configs/ui-elements/divider/examples/CustomContent.vue b/packages/docs/src/page-configs/ui-elements/divider/examples/CustomContent.vue
index eea66aa71c..1f4ce54d45 100644
--- a/packages/docs/src/page-configs/ui-elements/divider/examples/CustomContent.vue
+++ b/packages/docs/src/page-configs/ui-elements/divider/examples/CustomContent.vue
@@ -1,29 +1,29 @@
 <template>
-  <div class="my-5 flex lg4 xs12">
+  <div class="my-8 flex flex-col lg4 xs12">
     <p class="example-item">
       <va-icon class="ml-3" name="home" />
-      <span class="ml-4">I'm a list item</span>
+      <span class="ml-6">I'm a list item</span>
     </p>
     <va-divider>
       <span class="px-2">default (center)</span>
     </va-divider>
     <p class="example-item">
       <va-icon class="ml-3" name="home" />
-      <span class="ml-4">I'm a list item</span>
+      <span class="ml-6">I'm a list item</span>
     </p>
     <va-divider orientation="left">
       <span class="px-2">left</span>
     </va-divider>
     <p class="example-item">
       <va-icon class="ml-3" name="home" />
-      <span class="ml-4">I'm a list item</span>
+      <span class="ml-6">I'm a list item</span>
     </p>
     <va-divider orientation="center">
       <span class="px-2">center</span>
     </va-divider>
     <p class="example-item">
       <va-icon class="ml-3" name="home" />
-      <span class="ml-4">I'm a list item</span>
+      <span class="ml-6">I'm a list item</span>
     </p>
     <va-divider orientation="right">
       <span class="px-2">right</span>
diff --git a/packages/docs/src/page-configs/ui-elements/divider/examples/Dashed.vue b/packages/docs/src/page-configs/ui-elements/divider/examples/Dashed.vue
index 5e8f57403b..ca2a6766ad 100644
--- a/packages/docs/src/page-configs/ui-elements/divider/examples/Dashed.vue
+++ b/packages/docs/src/page-configs/ui-elements/divider/examples/Dashed.vue
@@ -1,18 +1,18 @@
 <template>
-  <div class="my-5 flex lg4 xs12">
+  <div class="my-8 flex flex-col lg4 xs12">
     <p class="example-item">
       <va-icon class="ml-3" name="home" />
-      <span class="ml-4">I'm a list item</span>
+      <span class="ml-6">I'm a list item</span>
     </p>
     <va-divider dashed />
     <p class="example-item">
       <va-icon class="ml-3" name="home" />
-      <span class="ml-4">I'm a list item</span>
+      <span class="ml-6">I'm a list item</span>
     </p>
     <va-divider dashed />
     <p class="example-item">
       <va-icon class="ml-3" name="home" />
-      <span class="ml-4">I'm a list item</span>
+      <span class="ml-6">I'm a list item</span>
     </p>
   </div>
 </template>
diff --git a/packages/docs/src/page-configs/ui-elements/divider/examples/Default.vue b/packages/docs/src/page-configs/ui-elements/divider/examples/Default.vue
index 3e662842ba..4de84f2fde 100644
--- a/packages/docs/src/page-configs/ui-elements/divider/examples/Default.vue
+++ b/packages/docs/src/page-configs/ui-elements/divider/examples/Default.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="my-5">
+  <div class="my-8">
     <va-divider />
   </div>
 </template>
diff --git a/packages/docs/src/page-configs/ui-elements/divider/examples/Inset.vue b/packages/docs/src/page-configs/ui-elements/divider/examples/Inset.vue
index c934f2efcc..bb4e687eba 100644
--- a/packages/docs/src/page-configs/ui-elements/divider/examples/Inset.vue
+++ b/packages/docs/src/page-configs/ui-elements/divider/examples/Inset.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="my-5 flex lg4">
+  <div class="my-8 flex flex-col lg4">
     <p class="example-item">
       <va-icon name="home" />
       <span class="float-right">I'm a list item</span>
diff --git a/packages/docs/src/page-configs/ui-elements/divider/examples/Vertical.vue b/packages/docs/src/page-configs/ui-elements/divider/examples/Vertical.vue
index 1acc776e62..e395529a98 100644
--- a/packages/docs/src/page-configs/ui-elements/divider/examples/Vertical.vue
+++ b/packages/docs/src/page-configs/ui-elements/divider/examples/Vertical.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="row my-5">
-    <span class="flex lg1">Title</span>
+  <div class="row my-8">
+    <span class="flex flex-col lg1">Title</span>
     <va-divider vertical />
-    <span class="flex lg1">News</span>
+    <span class="flex flex-col lg1">News</span>
     <va-divider vertical />
-    <span class="flex lg1">Blog</span>
+    <span class="flex flex-col lg1">Blog</span>
   </div>
 </template>
diff --git a/packages/docs/src/page-configs/ui-elements/divider/examples/WithList.vue b/packages/docs/src/page-configs/ui-elements/divider/examples/WithList.vue
index fb80ef6c87..fc1db07a23 100644
--- a/packages/docs/src/page-configs/ui-elements/divider/examples/WithList.vue
+++ b/packages/docs/src/page-configs/ui-elements/divider/examples/WithList.vue
@@ -1,26 +1,26 @@
 <template>
-  <div class="my-5 flex lg4 xs12">
+  <div class="my-8 flex flex-col lg4 xs12">
     <va-list>
       <va-list-item>
-        <span class="ml-4">I'm a list item</span>
+        <span class="ml-6">I'm a list item</span>
       </va-list-item>
       <va-divider>Default</va-divider>
       <va-list-item>
-        <span class="ml-4">I'm a list item</span>
+        <span class="ml-6">I'm a list item</span>
       </va-list-item>
       <va-divider />
       <va-list-item>
-        <span class="ml-4">I'm a list item</span>
+        <span class="ml-6">I'm a list item</span>
       </va-list-item>
       <va-divider inset>
         Inset
       </va-divider>
       <va-list-item>
-        <span class="ml-4">I'm a list item</span>
+        <span class="ml-6">I'm a list item</span>
       </va-list-item>
       <va-divider inset />
       <va-list-item>
-        <span class="ml-4">I'm a list item</span>
+        <span class="ml-6">I'm a list item</span>
       </va-list-item>
     </va-list>
   </div>
diff --git a/packages/docs/src/page-configs/ui-elements/dropdown/examples/PlacementAndOffset.vue b/packages/docs/src/page-configs/ui-elements/dropdown/examples/PlacementAndOffset.vue
index d9cd363a72..7560d70a90 100644
--- a/packages/docs/src/page-configs/ui-elements/dropdown/examples/PlacementAndOffset.vue
+++ b/packages/docs/src/page-configs/ui-elements/dropdown/examples/PlacementAndOffset.vue
@@ -7,7 +7,7 @@
       </tr>
       <tr>
         <td colspan="2" style="padding: 4rem;">
-          <div class="d-flex flex-direction-column align-center">
+          <div class="d-flex flex-col align-center">
             <va-dropdown
               :model-value="true"
               :placement="placementWIthAlias"
diff --git a/packages/docs/src/page-configs/ui-elements/file-upload/examples/Undo.vue b/packages/docs/src/page-configs/ui-elements/file-upload/examples/Undo.vue
index 1eb2044e2d..38e7def7e8 100644
--- a/packages/docs/src/page-configs/ui-elements/file-upload/examples/Undo.vue
+++ b/packages/docs/src/page-configs/ui-elements/file-upload/examples/Undo.vue
@@ -3,22 +3,22 @@
     <va-switch
       v-model="isGalleryViewEnabled"
       :label="$t('fileUpload.examples.undo.galleryViewLabel')"
-      class="mb-4"
+      class="mb-6"
     />
     <va-input
       v-model.number="undoDuration"
       :label="$t('fileUpload.examples.undo.durationFieldLabel')"
-      class="mb-4"
+      class="mb-6"
     />
     <va-input
       v-model="deletedFileMessage"
       :label="$t('fileUpload.examples.undo.cancelFieldLabel')"
-      class="mb-4"
+      class="mb-6"
     />
     <va-input
       v-model="undoButtonText"
       :label="$t('fileUpload.examples.undo.deletedFileFieldLabel')"
-      class="mb-4"
+      class="mb-6"
     />
   </div>
   <va-file-upload
diff --git a/packages/docs/src/page-configs/ui-elements/form/examples/WithInputs.vue b/packages/docs/src/page-configs/ui-elements/form/examples/WithInputs.vue
index 5b4aae3f79..6c1a6c095d 100644
--- a/packages/docs/src/page-configs/ui-elements/form/examples/WithInputs.vue
+++ b/packages/docs/src/page-configs/ui-elements/form/examples/WithInputs.vue
@@ -31,7 +31,7 @@
       />
     </va-form>
 
-    <va-alert v-if="validation !== null" class="mt-4" border="left">
+    <va-alert v-if="validation !== null" class="mt-6" border="left">
       <span>
         Validate form:
         <va-chip>{{ validation }}</va-chip>
diff --git a/packages/docs/src/page-configs/ui-elements/icon/examples/Rotation.vue b/packages/docs/src/page-configs/ui-elements/icon/examples/Rotation.vue
index 1a71e33c2a..eee1f22132 100644
--- a/packages/docs/src/page-configs/ui-elements/icon/examples/Rotation.vue
+++ b/packages/docs/src/page-configs/ui-elements/icon/examples/Rotation.vue
@@ -1,6 +1,6 @@
 <template>
   <va-button-toggle
-    class="mb-4"
+    class="mb-6"
     v-model="flip"
     :options="flipOptions"
     preset="secondary"
@@ -15,7 +15,7 @@
   />
 
   <va-slider
-    class="mb-4"
+    class="mb-6"
     :step="5"
     :min="-180"
     :max="180"
diff --git a/packages/docs/src/page-configs/ui-elements/image/examples/Contain.vue b/packages/docs/src/page-configs/ui-elements/image/examples/Contain.vue
index 97c75bea8e..8d2de29c8b 100644
--- a/packages/docs/src/page-configs/ui-elements/image/examples/Contain.vue
+++ b/packages/docs/src/page-configs/ui-elements/image/examples/Contain.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="row">
-    <div class="flex xs12 sm12 md6 lg4">
+    <div class="flex flex-col xs12 sm12 md6 lg4">
       <va-image src="https://picsum.photos/1500/500" />
     </div>
-    <div class="flex xs12 sm12 md6 lg4">
+    <div class="flex flex-col xs12 sm12 md6 lg4">
       <va-image contain src="https://picsum.photos/1500/500" />
     </div>
   </div>
diff --git a/packages/docs/src/page-configs/ui-elements/image/examples/Default.vue b/packages/docs/src/page-configs/ui-elements/image/examples/Default.vue
index f54f8d8492..7424d6fa18 100644
--- a/packages/docs/src/page-configs/ui-elements/image/examples/Default.vue
+++ b/packages/docs/src/page-configs/ui-elements/image/examples/Default.vue
@@ -1,3 +1,3 @@
 <template>
-  <va-image class="flex md6 lg4" src="https://picsum.photos/1500" />
+  <va-image class="flex flex-col md6 lg4" src="https://picsum.photos/1500" />
 </template>
diff --git a/packages/docs/src/page-configs/ui-elements/image/examples/DefaultSlot.vue b/packages/docs/src/page-configs/ui-elements/image/examples/DefaultSlot.vue
index 0aa1498799..2ae23cb660 100644
--- a/packages/docs/src/page-configs/ui-elements/image/examples/DefaultSlot.vue
+++ b/packages/docs/src/page-configs/ui-elements/image/examples/DefaultSlot.vue
@@ -1,6 +1,6 @@
 <template>
   <va-image
-    class="flex md6 lg4"
+    class="flex flex-col md6 lg4"
     src="https://picsum.photos/1500"
   >
     <va-badge text="default slot" />
diff --git a/packages/docs/src/page-configs/ui-elements/image/examples/ErrorSlot.vue b/packages/docs/src/page-configs/ui-elements/image/examples/ErrorSlot.vue
index 29c345d8f7..bf13450020 100644
--- a/packages/docs/src/page-configs/ui-elements/image/examples/ErrorSlot.vue
+++ b/packages/docs/src/page-configs/ui-elements/image/examples/ErrorSlot.vue
@@ -1,6 +1,6 @@
 <template>
   <va-image
-    class="flex md6 lg4"
+    class="flex flex-col md6 lg4"
     src="wrong-image-path"
   >
     <template #error>
diff --git a/packages/docs/src/page-configs/ui-elements/image/examples/LoaderSlot.vue b/packages/docs/src/page-configs/ui-elements/image/examples/LoaderSlot.vue
index f062c47f00..2225ec0e5e 100644
--- a/packages/docs/src/page-configs/ui-elements/image/examples/LoaderSlot.vue
+++ b/packages/docs/src/page-configs/ui-elements/image/examples/LoaderSlot.vue
@@ -1,6 +1,6 @@
 <template>
   <va-image
-    class="flex md6 lg4"
+    class="flex flex-col md6 lg4"
     :src="slotImagePath"
   >
     <template #loader>
diff --git a/packages/docs/src/page-configs/ui-elements/image/examples/Ratio.vue b/packages/docs/src/page-configs/ui-elements/image/examples/Ratio.vue
index a470e86993..42f082fbd7 100644
--- a/packages/docs/src/page-configs/ui-elements/image/examples/Ratio.vue
+++ b/packages/docs/src/page-configs/ui-elements/image/examples/Ratio.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="row">
-    <div class="flex xs12 sm12 md6 lg4">
+    <div class="flex flex-col xs12 sm12 md6 lg4">
       <va-image :ratio="0.75" src="https://picsum.photos/1500" />
     </div>
-    <div class="flex xs12 sm12 md6 lg4">
+    <div class="flex flex-col xs12 sm12 md6 lg4">
       <va-image :ratio="4/3" src="https://picsum.photos/1500" />
     </div>
   </div>
diff --git a/packages/docs/src/page-configs/ui-elements/infinite-scroll/examples/CustomTarget.vue b/packages/docs/src/page-configs/ui-elements/infinite-scroll/examples/CustomTarget.vue
index dab662cfcf..47b05d32bd 100644
--- a/packages/docs/src/page-configs/ui-elements/infinite-scroll/examples/CustomTarget.vue
+++ b/packages/docs/src/page-configs/ui-elements/infinite-scroll/examples/CustomTarget.vue
@@ -3,7 +3,7 @@
     <div
       style="height: 200px;"
       ref="infiniteScrollTarget"
-      class="flex md6 lg4"
+      class="flex flex-col md6 lg4"
     >
       <va-infinite-scroll
         :load="appendRecordsAsyncRef"
@@ -23,7 +23,7 @@
     <div
       style="height: 200px;"
       id="infinite-scroll-custom-target"
-      class="flex md6 lg4"
+      class="flex flex-col md6 lg4"
     >
       <va-infinite-scroll
         :load="appendRecordsAsyncId"
diff --git a/packages/docs/src/page-configs/ui-elements/infinite-scroll/examples/Default.vue b/packages/docs/src/page-configs/ui-elements/infinite-scroll/examples/Default.vue
index 63ef3690b8..86dfa75acd 100644
--- a/packages/docs/src/page-configs/ui-elements/infinite-scroll/examples/Default.vue
+++ b/packages/docs/src/page-configs/ui-elements/infinite-scroll/examples/Default.vue
@@ -2,7 +2,7 @@
   <div class="row">
     <div
       style="height: 200px;"
-      class="flex md6 lg4"
+      class="flex flex-col md6 lg4"
     >
       <va-infinite-scroll
         :load="appendRecordsAsync"
diff --git a/packages/docs/src/page-configs/ui-elements/infinite-scroll/examples/Disabled.vue b/packages/docs/src/page-configs/ui-elements/infinite-scroll/examples/Disabled.vue
index 41c7f7a42e..fa22075636 100644
--- a/packages/docs/src/page-configs/ui-elements/infinite-scroll/examples/Disabled.vue
+++ b/packages/docs/src/page-configs/ui-elements/infinite-scroll/examples/Disabled.vue
@@ -9,7 +9,7 @@
   <div class="row">
     <div
       style="height: 200px;"
-      class="flex md6 lg4"
+      class="flex flex-col md6 lg4"
     >
       <va-infinite-scroll
         :load="appendRecordsAsync"
diff --git a/packages/docs/src/page-configs/ui-elements/infinite-scroll/examples/Reverse.vue b/packages/docs/src/page-configs/ui-elements/infinite-scroll/examples/Reverse.vue
index c80621bd53..7fa294983b 100644
--- a/packages/docs/src/page-configs/ui-elements/infinite-scroll/examples/Reverse.vue
+++ b/packages/docs/src/page-configs/ui-elements/infinite-scroll/examples/Reverse.vue
@@ -2,7 +2,7 @@
   <div class="row">
     <div
       style="height: 200px;"
-      class="flex md6 lg4"
+      class="flex flex-col md6 lg4"
     >
       <va-infinite-scroll
         :load="appendRecordsAsync"
diff --git a/packages/docs/src/page-configs/ui-elements/input/examples/Default.vue b/packages/docs/src/page-configs/ui-elements/input/examples/Default.vue
index 03207415c4..5e89dfbd02 100644
--- a/packages/docs/src/page-configs/ui-elements/input/examples/Default.vue
+++ b/packages/docs/src/page-configs/ui-elements/input/examples/Default.vue
@@ -1,16 +1,16 @@
 <template>
   <div style="width: 300px;">
     <va-input
-      class="mb-4"
+      class="mb-6"
       v-model="value"
     />
     <va-input
-      class="mb-4"
+      class="mb-6"
       v-model="value"
       placeholder="Placeholder"
     />
     <va-input
-      class="mb-4"
+      class="mb-6"
       v-model="value"
       label="Name"
       placeholder="Label"
diff --git a/packages/docs/src/page-configs/ui-elements/input/examples/ExtendedDefault.vue b/packages/docs/src/page-configs/ui-elements/input/examples/ExtendedDefault.vue
index 77d8f72993..6b4439fe03 100644
--- a/packages/docs/src/page-configs/ui-elements/input/examples/ExtendedDefault.vue
+++ b/packages/docs/src/page-configs/ui-elements/input/examples/ExtendedDefault.vue
@@ -1,13 +1,13 @@
 <template>
   <div style="width: 300px;">
     <va-input
-      class="mb-4"
+      class="mb-6"
       v-model="value"
       label="Name long long long long long long long long long long long long"
       placeholder="Long label"
     />
     <va-input
-      class="mb-4"
+      class="mb-6"
       v-model="value"
       id="input-ID"
       name="input-Name"
@@ -15,14 +15,14 @@
       placeholder="Check <input> in devtools"
     />
     <va-input
-      class="mb-4"
+      class="mb-6"
       v-model="value"
       label="Disabled"
       placeholder="Disabled"
       disabled
     />
     <va-input
-      class="mb-4"
+      class="mb-6"
       v-model="value"
       label="Readonly"
       placeholder="Readonly"
@@ -31,19 +31,19 @@
     <va-input
       v-model="value"
       counter
-      class="mb-4"
+      class="mb-6"
     />
     <va-input
       v-model="value"
       :max-length="30"
       counter
-      class="mb-4"
+      class="mb-6"
     />
     <va-input
       v-model="value"
       :max-length="30"
       counter
-      class="mb-4"
+      class="mb-6"
     >
       <template #counter="{ valueLength, maxLength }">
         <b
diff --git a/packages/docs/src/page-configs/ui-elements/input/examples/Hint.vue b/packages/docs/src/page-configs/ui-elements/input/examples/Hint.vue
index a5ce879765..a743964c2d 100644
--- a/packages/docs/src/page-configs/ui-elements/input/examples/Hint.vue
+++ b/packages/docs/src/page-configs/ui-elements/input/examples/Hint.vue
@@ -1,14 +1,14 @@
 <template>
   <div style="width: 300px;">
     <va-input
-      class="mb-4"
+      class="mb-6"
       v-model="value"
       :messages="message"
       label="Name"
       placeholder="Single-line message"
     />
     <va-input
-      class="mb-4"
+      class="mb-6"
       v-model="value"
       :messages="messages"
       label="Name"
diff --git a/packages/docs/src/page-configs/ui-elements/input/examples/Mask.vue b/packages/docs/src/page-configs/ui-elements/input/examples/Mask.vue
index 25d7643d5d..07490e1ebc 100644
--- a/packages/docs/src/page-configs/ui-elements/input/examples/Mask.vue
+++ b/packages/docs/src/page-configs/ui-elements/input/examples/Mask.vue
@@ -1,7 +1,7 @@
 <template>
   <div style="width: 300px;">
     <va-input
-      class="mb-4"
+      class="mb-6"
       :style="{paddingTop: '4px'}"
       label="Credit card mask"
       v-model="maskCreditCardValue"
@@ -9,32 +9,32 @@
       mask="creditCard"
     />
     <va-input
-      class="mb-4"
+      class="mb-6"
       v-model="maskDateValue"
       label="Date mask"
       mask="date"
     />
     <va-input
-      class="mb-4"
+      class="mb-6"
       v-model="maskTimeValue"
       label="Time mask"
       mask="time"
     />
     <va-input
-      class="mb-4"
+      class="mb-6"
       v-model="maskNumeralsValue"
       label="Only numerals mask"
       mask="numeral"
     />
     <va-input
-      class="mb-4"
+      class="mb-6"
       v-model="maskCustomBlocksValue"
       label="Custom blocks mask"
       placeholder="# ##### #####"
       :mask="{blocks: [1, 5, 5]}"
     />
     <va-input
-      class="mb-4"
+      class="mb-6"
       v-model="maskReturnFormattedValue"
       label="Date mask, return formatted"
       :returnRaw="false"
diff --git a/packages/docs/src/page-configs/ui-elements/input/examples/Slots.vue b/packages/docs/src/page-configs/ui-elements/input/examples/Slots.vue
index bc941c79e5..de27423d03 100644
--- a/packages/docs/src/page-configs/ui-elements/input/examples/Slots.vue
+++ b/packages/docs/src/page-configs/ui-elements/input/examples/Slots.vue
@@ -1,7 +1,7 @@
 <template>
   <div style="width: 300px;">
     <va-input
-      class="mb-4"
+      class="mb-6"
       v-model="value"
       label="Icon prepend"
     >
@@ -12,7 +12,7 @@
       </template>
     </va-input>
     <va-input
-      class="mb-4"
+      class="mb-6"
       v-model="value"
       label="Icon prepend inner"
     >
@@ -23,7 +23,7 @@
       </template>
     </va-input>
     <va-input
-      class="mb-4"
+      class="mb-6"
       v-model="value"
       label="Icon append"
     >
@@ -34,7 +34,7 @@
       </template>
     </va-input>
     <va-input
-      class="mb-4"
+      class="mb-6"
       v-model="value"
       label="Icon append inner"
     >
diff --git a/packages/docs/src/page-configs/ui-elements/input/examples/Styles.vue b/packages/docs/src/page-configs/ui-elements/input/examples/Styles.vue
index eead3add4d..b45ffc0d12 100644
--- a/packages/docs/src/page-configs/ui-elements/input/examples/Styles.vue
+++ b/packages/docs/src/page-configs/ui-elements/input/examples/Styles.vue
@@ -1,42 +1,50 @@
 <template>
   <div style="width: 300px;">
     <va-input
-      class="mb-4"
+      class="mb-6"
       v-model="value"
       placeholder="Default (solid)"
     />
     <va-input
-      class="mb-4"
+      class="mb-6"
       v-model="value"
       placeholder="Outline"
       outline
     />
     <va-input
-      class="mb-4"
+      class="mb-6"
       v-model="value"
       placeholder="Bordered"
       bordered
     />
     <va-input
-      class="mb-4"
+      class="mb-6"
       v-model="value"
       placeholder="Default"
       label="Default"
     />
     <va-input
-      class="mb-4"
+      class="mb-6"
       v-model="value"
       placeholder="Outline"
       label="Outline"
       outline
     />
     <va-input
-      class="mb-4"
+      class="mb-6"
       v-model="value"
       placeholder="Bordered"
       label="Bordered"
       bordered
     />
+    <va-input
+      class="mb-4"
+      v-model="value"
+      placeholder="Background"
+      label="Background"
+      color="#000"
+      background="warning"
+    />
   </div>
 </template>
 
diff --git a/packages/docs/src/page-configs/ui-elements/input/examples/Textarea.vue b/packages/docs/src/page-configs/ui-elements/input/examples/Textarea.vue
index c4764d5b00..ffb6636541 100644
--- a/packages/docs/src/page-configs/ui-elements/input/examples/Textarea.vue
+++ b/packages/docs/src/page-configs/ui-elements/input/examples/Textarea.vue
@@ -1,26 +1,26 @@
 <template>
   <div style="width: 300px;">
     <va-input
-      class="mb-4"
+      class="mb-6"
       v-model="value"
       type="textarea"
       placeholder="Basic textarea"
     />
     <va-input
-      class="mb-4"
+      class="mb-6"
       v-model="value"
       type="textarea"
       label="With label"
     />
     <va-input
-      class="mb-4"
+      class="mb-6"
       v-model="value"
       type="textarea"
       label="With autosize"
       autosize
     />
     <va-input
-      class="mb-4"
+      class="mb-6"
       v-model="value"
       type="textarea"
       label="With limits from 3 to 5 rows"
diff --git a/packages/docs/src/page-configs/ui-elements/input/examples/Types.vue b/packages/docs/src/page-configs/ui-elements/input/examples/Types.vue
index 911460bc86..d341f64af8 100644
--- a/packages/docs/src/page-configs/ui-elements/input/examples/Types.vue
+++ b/packages/docs/src/page-configs/ui-elements/input/examples/Types.vue
@@ -3,19 +3,19 @@
     v-model="email"
     type="email"
     label="Email"
-    class="mr-4 mb-4"
+    class="mr-6 mb-6"
   />
   <va-input
     v-model="password"
     type="password"
     label="Password"
-    class="mr-4 mb-4"
+    class="mr-6 mb-6"
   />
   <va-input
     v-model="password"
     :type="isPasswordVisible ? 'text' : 'password'"
     label="Password with toggle"
-    class="mr-4 mb-4"
+    class="mr-6 mb-6"
   >
     <template #appendInner>
       <va-icon
@@ -30,20 +30,20 @@
     v-model="phone"
     type="tel"
     label="Phone number"
-    class="mr-4 mb-4"
+    class="mr-6 mb-6"
   />
   <va-input
     v-model="search"
     type="search"
     label="Search"
     clearable
-    class="mr-4 mb-4"
+    class="mr-6 mb-6"
   />
   <va-input
     v-model="url"
     type="url"
     label="url"
-    class="mr-4 mb-4"
+    class="mr-6 mb-6"
   />
 </template>
 
diff --git a/packages/docs/src/page-configs/ui-elements/input/examples/Validate.vue b/packages/docs/src/page-configs/ui-elements/input/examples/Validate.vue
index 84e50a85ff..f5c48865e4 100644
--- a/packages/docs/src/page-configs/ui-elements/input/examples/Validate.vue
+++ b/packages/docs/src/page-configs/ui-elements/input/examples/Validate.vue
@@ -1,28 +1,28 @@
 <template>
   <div style="width: 300px;">
     <va-input
-      class="mb-4"
+      class="mb-6"
       v-model="value"
       :rules="[(v) => v.length > 3 || `Fulfill the condition`]"
       label="Email"
       placeholder="Type more than 3 symbols"
     />
     <va-input
-      class="mb-4"
+      class="mb-6"
       v-model="value"
       label="Email"
       placeholder="Error state"
       error
     />
     <va-input
-      class="mb-4"
+      class="mb-6"
       v-model="value"
       label="Email"
       placeholder="Success state"
       success
     />
     <va-input
-      class="mb-4"
+      class="mb-6"
       v-model="value"
       label="Email"
       placeholder="Error with message"
@@ -30,7 +30,7 @@
       :error-messages="errorMessage"
     />
     <va-input
-      class="mb-4"
+      class="mb-6"
       v-model="value"
       label="Email"
       placeholder="Success with message"
diff --git a/packages/docs/src/page-configs/ui-elements/modal/examples/Anchor.vue b/packages/docs/src/page-configs/ui-elements/modal/examples/Anchor.vue
index 2f5408f934..1b74656a76 100644
--- a/packages/docs/src/page-configs/ui-elements/modal/examples/Anchor.vue
+++ b/packages/docs/src/page-configs/ui-elements/modal/examples/Anchor.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="row">
-    <va-modal anchorClass="mr-4 my-1" stateful>
+    <va-modal anchorClass="mr-6 my-1" stateful>
       <template #anchor="{ show }">
         <va-button @click="show">Anchor-button (stateful modal)</va-button>
       </template>
       <div>{{ message }}</div>
     </va-modal>
 
-    <va-modal anchorClass="mr-4 my-1" v-model="showModal">
+    <va-modal anchorClass="mr-6 my-1" v-model="showModal">
       <template #anchor="{ show }">
         <va-button @click="show">Anchor-button (stateless modal)</va-button>
       </template>
diff --git a/packages/docs/src/page-configs/ui-elements/modal/examples/Create.vue b/packages/docs/src/page-configs/ui-elements/modal/examples/Create.vue
index 840b0661fb..724431f167 100644
--- a/packages/docs/src/page-configs/ui-elements/modal/examples/Create.vue
+++ b/packages/docs/src/page-configs/ui-elements/modal/examples/Create.vue
@@ -1,5 +1,5 @@
 <template>
-  <va-button class="mr-4 my-1"
+  <va-button class="mr-6 my-1"
     @click="$vaModal.init({
       title: 'Click Event',
       message: 'Modal from plugin',
@@ -11,7 +11,7 @@
     Create modal (Options API)
   </va-button>
 
-  <va-button class="mr-4 my-1"
+  <va-button class="mr-6 my-1"
     @click="init('Modal from hook')"
   >
     Create modal (Composition API)
diff --git a/packages/docs/src/page-configs/ui-elements/modal/examples/HidingOverlay.vue b/packages/docs/src/page-configs/ui-elements/modal/examples/HidingOverlay.vue
index 57090d3690..51b24c2d82 100644
--- a/packages/docs/src/page-configs/ui-elements/modal/examples/HidingOverlay.vue
+++ b/packages/docs/src/page-configs/ui-elements/modal/examples/HidingOverlay.vue
@@ -1,8 +1,8 @@
 <template>
-  <va-button class="mr-4 my-1" @click="showModal = !showModal">
+  <va-button class="mr-6 my-1" @click="showModal = !showModal">
     Show modal (without the overlay)
   </va-button>
-  <va-button class="mr-4 my-1" @click="showModalNoOutsideDismiss = !showModalNoOutsideDismiss">
+  <va-button class="mr-6 my-1" @click="showModalNoOutsideDismiss = !showModalNoOutsideDismiss">
     Show modal (without the overlay and with no outside click dismiss)
   </va-button>
   <va-modal v-model="showModal" :message="message" :overlay="false" />
diff --git a/packages/docs/src/page-configs/ui-elements/modal/examples/ModalSizing.vue b/packages/docs/src/page-configs/ui-elements/modal/examples/ModalSizing.vue
index e8876ea0b0..e887fc4e60 100644
--- a/packages/docs/src/page-configs/ui-elements/modal/examples/ModalSizing.vue
+++ b/packages/docs/src/page-configs/ui-elements/modal/examples/ModalSizing.vue
@@ -1,8 +1,8 @@
 <template>
-  <va-button class="mr-4  my-1" @click="showModalSizeSmall = !showModalSizeSmall">
+  <va-button class="mr-6  my-1" @click="showModalSizeSmall = !showModalSizeSmall">
     Show modal size small
   </va-button>
-  <va-button class="mr-4  my-1" @click="showModalSizeMedium = !showModalSizeMedium">
+  <va-button class="mr-6  my-1" @click="showModalSizeMedium = !showModalSizeMedium">
     Show modal size medium (default)
   </va-button>
   <va-button class="my-1" @click="showModalSizeLarge = !showModalSizeLarge">
diff --git a/packages/docs/src/page-configs/ui-elements/modal/examples/NestedModals.vue b/packages/docs/src/page-configs/ui-elements/modal/examples/NestedModals.vue
index a7c4acef4f..9626bfd940 100644
--- a/packages/docs/src/page-configs/ui-elements/modal/examples/NestedModals.vue
+++ b/packages/docs/src/page-configs/ui-elements/modal/examples/NestedModals.vue
@@ -8,7 +8,7 @@
     <va-popover message="Popover text"><va-button>Hover me</va-button></va-popover>
     <va-date-input class="mt-2" />
 
-    <va-button class="mt-5" @click="showSecondModal = !showSecondModal" color="secondary">
+    <va-button class="mt-8" @click="showSecondModal = !showSecondModal" color="secondary">
       Show second modal
     </va-button>
 
diff --git a/packages/docs/src/page-configs/ui-elements/modal/examples/ScrollingLongContent.vue b/packages/docs/src/page-configs/ui-elements/modal/examples/ScrollingLongContent.vue
index db62f781b3..25d2a28e1b 100644
--- a/packages/docs/src/page-configs/ui-elements/modal/examples/ScrollingLongContent.vue
+++ b/packages/docs/src/page-configs/ui-elements/modal/examples/ScrollingLongContent.vue
@@ -1,8 +1,8 @@
 <template>
-  <va-button class="mr-4 my-1" @click="showModal = !showModal">
+  <va-button class="mr-6 my-1" @click="showModal = !showModal">
     Show modal with long content
   </va-button>
-  <va-button class="mr-4 my-1" @click="showModalWithFixedLayout = !showModalWithFixedLayout">
+  <va-button class="mr-6 my-1" @click="showModalWithFixedLayout = !showModalWithFixedLayout">
     Show modal with long content and fixed layout
   </va-button>
   <va-modal v-model="showModal" :title="title" :message="message" />
diff --git a/packages/docs/src/page-configs/ui-elements/modal/examples/ToggleVisibility.vue b/packages/docs/src/page-configs/ui-elements/modal/examples/ToggleVisibility.vue
index 2a4a2c10dc..b4b05e0cfd 100644
--- a/packages/docs/src/page-configs/ui-elements/modal/examples/ToggleVisibility.vue
+++ b/packages/docs/src/page-configs/ui-elements/modal/examples/ToggleVisibility.vue
@@ -1,8 +1,8 @@
 <template>
-  <va-button class="mr-4 my-1" @click="$refs.statefulModal.show()">
+  <va-button class="mr-6 my-1" @click="$refs.statefulModal.show()">
     Show modal (stateful)
   </va-button>
-  <va-button class="mr-4 my-1" @click="$refs.statelessModal.show()">
+  <va-button class="mr-6 my-1" @click="$refs.statelessModal.show()">
     Show modal (stateless)
   </va-button>
   <va-modal ref="statefulModal" :message="message" stateful />
diff --git a/packages/docs/src/page-configs/ui-elements/navbar/examples/Height.vue b/packages/docs/src/page-configs/ui-elements/navbar/examples/Height.vue
index 03169bfcde..00dec282c4 100644
--- a/packages/docs/src/page-configs/ui-elements/navbar/examples/Height.vue
+++ b/packages/docs/src/page-configs/ui-elements/navbar/examples/Height.vue
@@ -1,5 +1,5 @@
 <template>
-  <va-navbar color="#282F69" style="height: 38px;">
+  <va-navbar color="#282F69" style="height: 100px;">
     <template #left>
       <va-navbar-item class="logo">LOGO</va-navbar-item>
     </template>
diff --git a/packages/docs/src/page-configs/ui-elements/pagination/examples/ActiveColor.vue b/packages/docs/src/page-configs/ui-elements/pagination/examples/ActiveColor.vue
index 29b76a01ae..a7c8eac7f4 100644
--- a/packages/docs/src/page-configs/ui-elements/pagination/examples/ActiveColor.vue
+++ b/packages/docs/src/page-configs/ui-elements/pagination/examples/ActiveColor.vue
@@ -5,7 +5,7 @@
     :visible-pages="3"
     buttons-preset="primary"
     active-page-color="textPrimary"
-    class="mb-4"
+    class="mb-6"
   />
   <va-pagination
     v-model="value"
@@ -13,7 +13,7 @@
     :visible-pages="3"
     buttons-preset="#154EC1"
     active-page-color="#002D87"
-    class="mb-4"
+    class="mb-6"
   />
   <va-pagination
     v-model="value"
diff --git a/packages/docs/src/page-configs/ui-elements/pagination/examples/Bordered.vue b/packages/docs/src/page-configs/ui-elements/pagination/examples/Bordered.vue
index 81532688d8..014643452a 100644
--- a/packages/docs/src/page-configs/ui-elements/pagination/examples/Bordered.vue
+++ b/packages/docs/src/page-configs/ui-elements/pagination/examples/Bordered.vue
@@ -1,6 +1,6 @@
 <template>
-  <va-pagination v-model="value" :pages="10" :visible-pages="3" buttons-preset="default" gapped border-color="primary" class="mb-4" />
-  <va-pagination v-model="value" :pages="10" :visible-pages="3" buttons-preset="primary" gapped border-color="primary" class="mb-4" />
+  <va-pagination v-model="value" :pages="10" :visible-pages="3" buttons-preset="default" gapped border-color="primary" class="mb-6" />
+  <va-pagination v-model="value" :pages="10" :visible-pages="3" buttons-preset="primary" gapped border-color="primary" class="mb-6" />
   <va-pagination v-model="value" :pages="10" :visible-pages="3" buttons-preset="secondary" gapped border-color="primary" />
 </template>
 
diff --git a/packages/docs/src/page-configs/ui-elements/pagination/examples/Colors.vue b/packages/docs/src/page-configs/ui-elements/pagination/examples/Colors.vue
index aba8184c2b..eac28b8646 100644
--- a/packages/docs/src/page-configs/ui-elements/pagination/examples/Colors.vue
+++ b/packages/docs/src/page-configs/ui-elements/pagination/examples/Colors.vue
@@ -3,7 +3,7 @@
     v-model="value"
     preset="darkPagination"
     :pages="5"
-    class="mb-4"
+    class="mb-6"
   />
   <va-pagination
     v-model="value"
diff --git a/packages/docs/src/page-configs/ui-elements/pagination/examples/Gapped.vue b/packages/docs/src/page-configs/ui-elements/pagination/examples/Gapped.vue
index dc53aa6cef..d4fed69a28 100644
--- a/packages/docs/src/page-configs/ui-elements/pagination/examples/Gapped.vue
+++ b/packages/docs/src/page-configs/ui-elements/pagination/examples/Gapped.vue
@@ -1,6 +1,6 @@
 <template>
-  <va-pagination v-model="value" :pages="10" :visible-pages="3" buttons-preset="default" gapped class="mb-4" />
-  <va-pagination v-model="value" :pages="10" :visible-pages="3" buttons-preset="primary" gapped class="mb-4" />
+  <va-pagination v-model="value" :pages="10" :visible-pages="3" buttons-preset="default" gapped class="mb-6" />
+  <va-pagination v-model="value" :pages="10" :visible-pages="3" buttons-preset="primary" gapped class="mb-6" />
   <va-pagination v-model="value" :pages="10" :visible-pages="3" buttons-preset="secondary" gapped />
 </template>
 
diff --git a/packages/docs/src/page-configs/ui-elements/pagination/examples/Presets.vue b/packages/docs/src/page-configs/ui-elements/pagination/examples/Presets.vue
index 441c8bdadb..95689434c9 100644
--- a/packages/docs/src/page-configs/ui-elements/pagination/examples/Presets.vue
+++ b/packages/docs/src/page-configs/ui-elements/pagination/examples/Presets.vue
@@ -4,14 +4,14 @@
     :pages="10"
     :visible-pages="3"
     buttons-preset="primary"
-    class="mb-4"
+    class="mb-6"
   />
   <va-pagination
     v-model="value"
     :pages="10"
     :visible-pages="3"
     buttons-preset="default"
-    class="mb-4"
+    class="mb-6"
   />
   <va-pagination
     v-model="value"
diff --git a/packages/docs/src/page-configs/ui-elements/pagination/examples/Rounded.vue b/packages/docs/src/page-configs/ui-elements/pagination/examples/Rounded.vue
index 1cc03e6593..b224565a74 100644
--- a/packages/docs/src/page-configs/ui-elements/pagination/examples/Rounded.vue
+++ b/packages/docs/src/page-configs/ui-elements/pagination/examples/Rounded.vue
@@ -1,6 +1,6 @@
 <template>
-  <va-pagination v-model="value" :pages="10" :visible-pages="3" buttons-preset="default" rounded gapped border-color="primary" class="mb-4" />
-  <va-pagination v-model="value" :pages="10" :visible-pages="3" buttons-preset="primary" rounded gapped border-color="primary" class="mb-4" />
+  <va-pagination v-model="value" :pages="10" :visible-pages="3" buttons-preset="default" rounded gapped border-color="primary" class="mb-6" />
+  <va-pagination v-model="value" :pages="10" :visible-pages="3" buttons-preset="primary" rounded gapped border-color="primary" class="mb-6" />
   <va-pagination v-model="value" :pages="10" :visible-pages="3" buttons-preset="secondary" rounded gapped border-color="primary" />
 </template>
 
diff --git a/packages/docs/src/page-configs/ui-elements/pagination/examples/Sizes.vue b/packages/docs/src/page-configs/ui-elements/pagination/examples/Sizes.vue
index 3022bd105d..3c125afa7c 100644
--- a/packages/docs/src/page-configs/ui-elements/pagination/examples/Sizes.vue
+++ b/packages/docs/src/page-configs/ui-elements/pagination/examples/Sizes.vue
@@ -1,6 +1,6 @@
 <template>
-  <va-pagination v-model="value" size="small" :pages="5" class="mb-4" />
-  <va-pagination v-model="value" size="large" :pages="5" class="mb-4" />
+  <va-pagination v-model="value" size="small" :pages="5" class="mb-6" />
+  <va-pagination v-model="value" size="large" :pages="5" class="mb-6" />
 </template>
 
 <script>
diff --git a/packages/docs/src/page-configs/ui-elements/parallax/examples/Slot.vue b/packages/docs/src/page-configs/ui-elements/parallax/examples/Slot.vue
index 29d34cc0a9..bc5c8b4eaf 100644
--- a/packages/docs/src/page-configs/ui-elements/parallax/examples/Slot.vue
+++ b/packages/docs/src/page-configs/ui-elements/parallax/examples/Slot.vue
@@ -2,25 +2,25 @@
   <va-parallax :src="imageSrc">
     <div class="d-flex align-center justify-center" style="height: 100%;">
       <va-icon
-        class="mr-5"
+        class="mr-8"
         name="mdi-calendar-blank-outline"
         size="36px"
         color="#fff"
       />
       <va-icon
-        class="mr-5"
+        class="mr-8"
         name="mdi-close"
         size="36px"
         color="#fff"
       />
       <va-icon
-        class="mr-5"
+        class="mr-8"
         name="mdi-heart-outline"
         size="36px"
         color="#fff"
       />
       <va-icon
-        class="mr-5"
+        class="mr-8"
         name="mdi-folder-outline"
         size="36px"
         color="#fff"
diff --git a/packages/docs/src/page-configs/ui-elements/progress-bar/examples/Buffer.vue b/packages/docs/src/page-configs/ui-elements/progress-bar/examples/Buffer.vue
index d323834e49..6a976e9348 100644
--- a/packages/docs/src/page-configs/ui-elements/progress-bar/examples/Buffer.vue
+++ b/packages/docs/src/page-configs/ui-elements/progress-bar/examples/Buffer.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="flex lg6 xs12">
+  <div class="flex flex-col lg6 xs12">
     <va-progress-bar :model-value="value" :buffer="bufferValue" />
 
-    <va-slider class="mt-4"
+    <va-slider class="mt-6"
       v-model="value"
       track-label-visible
       :track-label="(v) => `${v}%`"
diff --git a/packages/docs/src/page-configs/ui-elements/progress-bar/examples/Coloring.vue b/packages/docs/src/page-configs/ui-elements/progress-bar/examples/Coloring.vue
index 78dfbf9535..f7635c4b7c 100644
--- a/packages/docs/src/page-configs/ui-elements/progress-bar/examples/Coloring.vue
+++ b/packages/docs/src/page-configs/ui-elements/progress-bar/examples/Coloring.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex lg6 xs12">
+  <div class="flex flex-col lg6 xs12">
     <va-progress-bar
       :model-value="50"
       color="danger"
diff --git a/packages/docs/src/page-configs/ui-elements/progress-bar/examples/Default.vue b/packages/docs/src/page-configs/ui-elements/progress-bar/examples/Default.vue
index 06ee8a7dbb..85faf22433 100644
--- a/packages/docs/src/page-configs/ui-elements/progress-bar/examples/Default.vue
+++ b/packages/docs/src/page-configs/ui-elements/progress-bar/examples/Default.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex lg6 xs12">
+  <div class="flex flex-col lg6 xs12">
     <va-progress-bar :model-value="value" />
     <va-slider class="mt-3" v-model="value" track-label-visible />
   </div>
diff --git a/packages/docs/src/page-configs/ui-elements/progress-bar/examples/Indeterminate.vue b/packages/docs/src/page-configs/ui-elements/progress-bar/examples/Indeterminate.vue
index 117b822656..b8d37325e0 100644
--- a/packages/docs/src/page-configs/ui-elements/progress-bar/examples/Indeterminate.vue
+++ b/packages/docs/src/page-configs/ui-elements/progress-bar/examples/Indeterminate.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex lg6 xs12">
+  <div class="flex flex-col lg6 xs12">
     <va-progress-bar indeterminate />
   </div>
 </template>
diff --git a/packages/docs/src/page-configs/ui-elements/progress-bar/examples/Max.vue b/packages/docs/src/page-configs/ui-elements/progress-bar/examples/Max.vue
index f273247af6..1c5d69bf47 100644
--- a/packages/docs/src/page-configs/ui-elements/progress-bar/examples/Max.vue
+++ b/packages/docs/src/page-configs/ui-elements/progress-bar/examples/Max.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex lg6 xs12">
+  <div class="flex flex-col lg6 xs12">
     <va-progress-bar :model-value="value" :max="max" />
     <va-slider class="mt-3" v-model="value" :max="max" track-label-visible />
     <va-input v-model="max" label="Max value" class="mt-3" />
diff --git a/packages/docs/src/page-configs/ui-elements/progress-bar/examples/Sizing.vue b/packages/docs/src/page-configs/ui-elements/progress-bar/examples/Sizing.vue
index 87ffd2bd0d..d0297378d7 100644
--- a/packages/docs/src/page-configs/ui-elements/progress-bar/examples/Sizing.vue
+++ b/packages/docs/src/page-configs/ui-elements/progress-bar/examples/Sizing.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex lg6 xs12">
+  <div class="flex flex-col lg6 xs12">
     <div class="my-2 text--bold muted">small</div>
     <va-progress-bar
       size="small"
diff --git a/packages/docs/src/page-configs/ui-elements/progress-bar/examples/Slots.vue b/packages/docs/src/page-configs/ui-elements/progress-bar/examples/Slots.vue
index cc02f13967..7b1b1c6e9e 100644
--- a/packages/docs/src/page-configs/ui-elements/progress-bar/examples/Slots.vue
+++ b/packages/docs/src/page-configs/ui-elements/progress-bar/examples/Slots.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="flex lg6 xs12">
+  <div class="flex flex-col lg6 xs12">
     <div class="mt-2 text--bold muted">When you use a default slot:</div>
     <va-progress-bar :model-value="value">
       {{ value }}
     </va-progress-bar>
 
-    <div class="mt-4 mb-2 text--bold muted">When you use a 'content-inside' prop:</div>
+    <div class="mt-6 mb-2 text--bold muted">When you use a 'content-inside' prop:</div>
     <va-progress-bar
       :model-value="value"
       size="large"
@@ -14,7 +14,7 @@
       {{ value }}
     </va-progress-bar>
 
-    <div class="mt-4 mb-2 text--bold muted">When you use a 'show-percent' prop:</div>
+    <div class="mt-6 mb-2 text--bold muted">When you use a 'show-percent' prop:</div>
     <va-progress-bar
       :model-value="value"
       show-percent
diff --git a/packages/docs/src/page-configs/ui-elements/progress-circle/examples/Coloring.vue b/packages/docs/src/page-configs/ui-elements/progress-circle/examples/Coloring.vue
index 856aea2efb..6797a0f471 100644
--- a/packages/docs/src/page-configs/ui-elements/progress-circle/examples/Coloring.vue
+++ b/packages/docs/src/page-configs/ui-elements/progress-circle/examples/Coloring.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex lg6 xs12">
+  <div class="flex flex-col lg6 xs12">
     <va-progress-circle
       :modelValue="65"
       color="danger"
diff --git a/packages/docs/src/page-configs/ui-elements/progress-circle/examples/Default.vue b/packages/docs/src/page-configs/ui-elements/progress-circle/examples/Default.vue
index 93ca6caf46..36877f63e8 100644
--- a/packages/docs/src/page-configs/ui-elements/progress-circle/examples/Default.vue
+++ b/packages/docs/src/page-configs/ui-elements/progress-circle/examples/Default.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex lg6 xs12">
+  <div class="flex flex-col lg6 xs12">
     <va-progress-circle v-model="value" />
 
     <va-slider class="mt-3"
diff --git a/packages/docs/src/page-configs/ui-elements/progress-circle/examples/Indeterminate.vue b/packages/docs/src/page-configs/ui-elements/progress-circle/examples/Indeterminate.vue
index 56dc3c8209..946c1a2388 100644
--- a/packages/docs/src/page-configs/ui-elements/progress-circle/examples/Indeterminate.vue
+++ b/packages/docs/src/page-configs/ui-elements/progress-circle/examples/Indeterminate.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex lg6 xs12">
+  <div class="flex flex-col lg6 xs12">
     <va-progress-circle indeterminate />
   </div>
 </template>
diff --git a/packages/docs/src/page-configs/ui-elements/progress-circle/examples/Sizing.vue b/packages/docs/src/page-configs/ui-elements/progress-circle/examples/Sizing.vue
index 7c4d979b78..4b3ee5ce5b 100644
--- a/packages/docs/src/page-configs/ui-elements/progress-circle/examples/Sizing.vue
+++ b/packages/docs/src/page-configs/ui-elements/progress-circle/examples/Sizing.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex lg6 xs12">
+  <div class="flex flex-col lg6 xs12">
     <div class="my-2 text--bold muted">small</div>
     <va-progress-circle
       size="small"
diff --git a/packages/docs/src/page-configs/ui-elements/progress-circle/examples/Slots.vue b/packages/docs/src/page-configs/ui-elements/progress-circle/examples/Slots.vue
index 0f5d065812..339b5c3f68 100644
--- a/packages/docs/src/page-configs/ui-elements/progress-circle/examples/Slots.vue
+++ b/packages/docs/src/page-configs/ui-elements/progress-circle/examples/Slots.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex lg6 xs12">
+  <div class="flex flex-col lg6 xs12">
     <va-progress-circle class="mb-2" :modelValue="value">
       {{ value + '%' }}
     </va-progress-circle>
diff --git a/packages/docs/src/page-configs/ui-elements/progress-circle/examples/Thickness.vue b/packages/docs/src/page-configs/ui-elements/progress-circle/examples/Thickness.vue
index bf28fec502..de6e8036e7 100644
--- a/packages/docs/src/page-configs/ui-elements/progress-circle/examples/Thickness.vue
+++ b/packages/docs/src/page-configs/ui-elements/progress-circle/examples/Thickness.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex lg6 xs12">
+  <div class="flex flex-col lg6 xs12">
     <div class="my-2 text--bold muted">0.1</div>
     <va-progress-circle :thickness="0.1" :modelValue="value" />
 
diff --git a/packages/docs/src/page-configs/ui-elements/rating/examples/Numbers.vue b/packages/docs/src/page-configs/ui-elements/rating/examples/Numbers.vue
index e0b21c20e7..1689e6b47d 100644
--- a/packages/docs/src/page-configs/ui-elements/rating/examples/Numbers.vue
+++ b/packages/docs/src/page-configs/ui-elements/rating/examples/Numbers.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex lg6 xs12">
+  <div class="flex flex-col lg6 xs12">
     <va-slider v-model="length" :max="15" />
     <va-rating v-model="value" :max="length" numbers />
   </div>
diff --git a/packages/docs/src/page-configs/ui-elements/select/examples/AllowCreate.vue b/packages/docs/src/page-configs/ui-elements/select/examples/AllowCreate.vue
index b8e2b8f7ac..6971ee7996 100644
--- a/packages/docs/src/page-configs/ui-elements/select/examples/AllowCreate.vue
+++ b/packages/docs/src/page-configs/ui-elements/select/examples/AllowCreate.vue
@@ -1,7 +1,7 @@
 <template>
   <div style="max-width: 300px;">
     <va-select
-      class="mb-4"
+      class="mb-6"
       label="'true' mode and single select"
       :options="options"
       :track-by="(option) => option.id"
@@ -10,7 +10,7 @@
       @create-new="addNewOption"
     />
     <va-select
-      class="mb-4"
+      class="mb-6"
       label="'unique' mode and single select"
       :options="options"
       :track-by="(option) => option.id"
@@ -19,7 +19,7 @@
       @create-new="addNewOption"
     />
     <va-select
-      class="mb-4"
+      class="mb-6"
       label="'true' mode and multi select"
       :options="options"
       v-model="valueMultiple"
diff --git a/packages/docs/src/page-configs/ui-elements/select/examples/Decorators.vue b/packages/docs/src/page-configs/ui-elements/select/examples/Decorators.vue
index 2a1de33f1c..3057b44722 100644
--- a/packages/docs/src/page-configs/ui-elements/select/examples/Decorators.vue
+++ b/packages/docs/src/page-configs/ui-elements/select/examples/Decorators.vue
@@ -1,53 +1,53 @@
 <template>
   <div style="max-width: 300px;">
     <va-select
-      class="mb-4"
+      class="mb-6"
       label="With label"
       :options="options"
       v-model="value"
     />
     <va-select
-      class="mb-4"
+      class="mb-6"
       label="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."
       placeholder="Long label"
       v-model="value"
       :options="options"
     />
     <va-select
-      class="mb-4"
+      class="mb-6"
       placeholder="With placeholder"
       :options="options"
       v-model="value"
     />
     <va-select
-      class="mb-4"
+      class="mb-6"
       label="Long placeholder"
       placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,"
       v-model="value"
       :options="options"
     />
     <va-select
-      class="mb-4"
+      class="mb-6"
       label="No options"
       v-model="value"
       :options="[]"
     />
     <va-select
-      class="mb-4"
+      class="mb-6"
       label="No options with custom text"
       v-model="value"
       :options="[]"
       noOptionsText="Sorry, nothing to show :("
     />
     <va-select
-      class="mb-4"
+      class="mb-6"
       label="Clearable"
       :options="options"
       v-model="value"
       clearable
     />
     <va-select
-      class="mb-4"
+      class="mb-6"
       label="Clearable and custom clear icon"
       :options="options"
       v-model="value"
@@ -55,28 +55,28 @@
       clearableIcon="cancel"
     />
     <va-select
-      class="mb-4"
+      class="mb-6"
       label="Hint messages"
       :options="options"
       v-model="value"
       :messages="['Hint message 1', 'Hint message 2']"
     />
     <va-select
-      class="mb-4"
+      class="mb-6"
       label="Hide selected"
       :options="options"
       v-model="value"
       hideSelected
     />
     <va-select
-      class="mb-4"
+      class="mb-6"
       label="Custom list placement (top)"
       :options="options"
       v-model="value"
       placement="top"
     />
     <va-select
-      class="mb-4"
+      class="mb-6"
       label="Custom list placement (bottom)"
       :options="options"
       v-model="value"
diff --git a/packages/docs/src/page-configs/ui-elements/select/examples/ObjectOptions.vue b/packages/docs/src/page-configs/ui-elements/select/examples/ObjectOptions.vue
index 865a28706a..64bb25bf15 100644
--- a/packages/docs/src/page-configs/ui-elements/select/examples/ObjectOptions.vue
+++ b/packages/docs/src/page-configs/ui-elements/select/examples/ObjectOptions.vue
@@ -1,14 +1,14 @@
 <template>
   <div style="max-width: 300px;">
-    <va-select class="mb-4" label="Default" v-model="value" :options="options" />
+    <va-select class="mb-6" label="Default" v-model="value" :options="options" />
 
-    <va-select class="mb-4" label="Text by" v-model="value" :options="options" text-by="textBy" />
+    <va-select class="mb-6" label="Text by" v-model="value" :options="options" text-by="textBy" />
 
-    <va-select class="mb-4" label="Text by (function)" v-model="value" :options="options" :text-by="(option) => option.textBy" />
+    <va-select class="mb-6" label="Text by (function)" v-model="value" :options="options" :text-by="(option) => option.textBy" />
 
-    <va-select class="mb-4" label="value by" v-model="value" :options="options" value-by="valueBy" />
+    <va-select class="mb-6" label="value by" v-model="value" :options="options" value-by="valueBy" />
 
-    <va-select class="mb-4" label="value by (function)" v-model="value" :options="options" :value-by="(option) => option.valueBy" />
+    <va-select class="mb-6" label="value by (function)" v-model="value" :options="options" :value-by="(option) => option.valueBy" />
 
     <va-alert color="info">
       <template #title>
diff --git a/packages/docs/src/page-configs/ui-elements/select/examples/Slots.vue b/packages/docs/src/page-configs/ui-elements/select/examples/Slots.vue
index 82c0770a2e..fc6100c109 100644
--- a/packages/docs/src/page-configs/ui-elements/select/examples/Slots.vue
+++ b/packages/docs/src/page-configs/ui-elements/select/examples/Slots.vue
@@ -1,7 +1,7 @@
 <template>
   <div style="max-width: 300px;">
     <va-select
-      class="mb-4"
+      class="mb-6"
       label="Content slot"
       :options="options"
       v-model="value"
@@ -12,7 +12,7 @@
       </template>
     </va-select>
     <va-select
-      class="mb-4"
+      class="mb-6"
       label="Prepend slot"
       :options="options"
       v-model="value"
@@ -24,7 +24,7 @@
       </template>
     </va-select>
     <va-select
-      class="mb-4"
+      class="mb-6"
       label="Prepend inner slot"
       :options="options"
       v-model="value"
@@ -36,7 +36,7 @@
       </template>
     </va-select>
     <va-select
-      class="mb-4"
+      class="mb-6"
       label="Append inner slot"
       :options="options"
       v-model="value"
@@ -48,7 +48,7 @@
       </template>
     </va-select>
     <va-select
-      class="mb-4"
+      class="mb-6"
       label="Append slot"
       :options="options"
       v-model="value"
@@ -65,7 +65,7 @@
       v-model="value"
     >
       <template v-slot:option="{ option, index, selectOption }">
-        <div class="d-flex justify-space-between align-center pa-2">
+        <div class="d-flex justify-between align-center p-2">
           Have a nice day!
           <va-button
             class="mb-2"
diff --git a/packages/docs/src/page-configs/ui-elements/select/examples/State.vue b/packages/docs/src/page-configs/ui-elements/select/examples/State.vue
index af31f18290..a9a669ae3c 100644
--- a/packages/docs/src/page-configs/ui-elements/select/examples/State.vue
+++ b/packages/docs/src/page-configs/ui-elements/select/examples/State.vue
@@ -1,35 +1,35 @@
 <template>
   <div style="max-width: 300px;">
     <va-select
-      class="mb-4"
+      class="mb-6"
       label="Readonly"
       :options="options"
       v-model="value"
       readonly
     />
     <va-select
-      class="mb-4"
+      class="mb-6"
       label="Disabled"
       :options="options"
       v-model="value"
       disabled
     />
     <va-select
-      class="mb-4"
+      class="mb-6"
       label="Loading"
       :options="options"
       v-model="value"
       loading
     />
     <va-select
-      class="mb-4"
+      class="mb-6"
       label="Error state"
       :options="options"
       v-model="value"
       error
     />
     <va-select
-      class="mb-4"
+      class="mb-6"
       label="Error state with messages"
       :options="options"
       v-model="value"
@@ -37,7 +37,7 @@
       :error-messages="['Error message']"
     />
     <va-select
-      class="mb-4"
+      class="mb-6"
       label="Success state"
       :options="options"
       v-model="value"
diff --git a/packages/docs/src/page-configs/ui-elements/select/examples/Styles.vue b/packages/docs/src/page-configs/ui-elements/select/examples/Styles.vue
index 41a8eba8f8..8c8bc57700 100644
--- a/packages/docs/src/page-configs/ui-elements/select/examples/Styles.vue
+++ b/packages/docs/src/page-configs/ui-elements/select/examples/Styles.vue
@@ -2,34 +2,34 @@
   <div style="max-width: 300px;">
     <va-select
       v-model="value"
-      class="mb-4"
+      class="mb-6"
       placeholder="Default (solid)"
       :options="options"
     />
     <va-select
       v-model="value"
-      class="mb-4"
+      class="mb-6"
       placeholder="Outline"
       :options="options"
       outline
     />
     <va-select
       v-model="value"
-      class="mb-4"
+      class="mb-6"
       placeholder="Bordered"
       :options="options"
       bordered
     />
     <va-select
       v-model="value"
-      class="mb-4"
+      class="mb-6"
       label="Default (solid) (Purple color)"
       color="#990099"
       :options="options"
     />
     <va-select
       v-model="value"
-      class="mb-4"
+      class="mb-6"
       label="Outline (Purple color)"
       :options="options"
       color="#990099"
diff --git a/packages/docs/src/page-configs/ui-elements/select/examples/Tagging.vue b/packages/docs/src/page-configs/ui-elements/select/examples/Tagging.vue
index 1195787b2b..7e98fe9be9 100644
--- a/packages/docs/src/page-configs/ui-elements/select/examples/Tagging.vue
+++ b/packages/docs/src/page-configs/ui-elements/select/examples/Tagging.vue
@@ -1,7 +1,7 @@
 <template>
   <div style="max-width: 300px;">
     <va-select
-      class="mb-4"
+      class="mb-6"
       label="Custom chips (first 3)"
       :options="options"
       v-model="value"
diff --git a/packages/docs/src/page-configs/ui-elements/select/examples/TrackBy.vue b/packages/docs/src/page-configs/ui-elements/select/examples/TrackBy.vue
index b938e31665..a256e9a6c5 100644
--- a/packages/docs/src/page-configs/ui-elements/select/examples/TrackBy.vue
+++ b/packages/docs/src/page-configs/ui-elements/select/examples/TrackBy.vue
@@ -1,8 +1,8 @@
 <template>
   <div style="max-width: 300px;">
-    <va-select class="mb-4" label="track by" v-model="value" :options="options" track-by="id" />
+    <va-select class="mb-6" label="track by" v-model="value" :options="options" track-by="id" />
 
-    <va-select class="mb-4" label="track by (function)" v-model="value" :options="options" :track-by="(option) => option.id" />
+    <va-select class="mb-6" label="track by (function)" v-model="value" :options="options" :track-by="(option) => option.id" />
 
     <va-alert color="info">
       <template #title>
diff --git a/packages/docs/src/page-configs/ui-elements/select/examples/Variations.vue b/packages/docs/src/page-configs/ui-elements/select/examples/Variations.vue
index d8ebe4e161..16f79581d3 100644
--- a/packages/docs/src/page-configs/ui-elements/select/examples/Variations.vue
+++ b/packages/docs/src/page-configs/ui-elements/select/examples/Variations.vue
@@ -1,13 +1,13 @@
 <template>
   <div style="max-width: 300px;">
     <va-select
-      class="mb-4"
+      class="mb-6"
       label="Single select"
       :options="options"
       v-model="valueSingle"
     />
     <va-select
-      class="mb-4"
+      class="mb-6"
       label="Multiple select"
       :options="options"
       v-model="valueMultiple"
diff --git a/packages/docs/src/page-configs/ui-elements/sidebar/examples/Color.vue b/packages/docs/src/page-configs/ui-elements/sidebar/examples/Color.vue
index 5a4fbb3592..3d9d5c9378 100644
--- a/packages/docs/src/page-configs/ui-elements/sidebar/examples/Color.vue
+++ b/packages/docs/src/page-configs/ui-elements/sidebar/examples/Color.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="mb-4" style="height: 16rem; overflow: hidden;">
+  <div class="mb-6" style="height: 16rem; overflow: hidden;">
     <va-sidebar
       color="primary"
       minimized-width="64px"
@@ -29,7 +29,7 @@
     </va-sidebar>
   </div>
 
-  <div class="mb-4" style="height: 16rem; overflow: hidden;">
+  <div class="mb-6" style="height: 16rem; overflow: hidden;">
     <va-sidebar
       color="background-element"
       minimized-width="64px"
@@ -58,7 +58,7 @@
     </va-sidebar>
   </div>
 
-  <div class="mb-4" style="height: 16rem; overflow: hidden;">
+  <div class="mb-6" style="height: 16rem; overflow: hidden;">
     <va-sidebar
       color="#F0F7ED"
       text-color="#009600"
@@ -91,7 +91,7 @@
     </va-sidebar>
   </div>
 
-  <div class="mb-4" style="height: 16rem;">
+  <div class="mb-6" style="height: 16rem;">
     <va-sidebar
       color="#FFD300"
       active-color="#FFD300"
diff --git a/packages/docs/src/page-configs/ui-elements/sidebar/examples/Gradient.vue b/packages/docs/src/page-configs/ui-elements/sidebar/examples/Gradient.vue
index a6822ee1b7..7caeeffbe5 100644
--- a/packages/docs/src/page-configs/ui-elements/sidebar/examples/Gradient.vue
+++ b/packages/docs/src/page-configs/ui-elements/sidebar/examples/Gradient.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="mb-4" style="height: 16rem;">
+  <div class="mb-6" style="height: 16rem;">
     <va-sidebar color="primary" gradient minimizedWidth="64px" width="18rem">
       <va-sidebar-item
         v-for="item in items"
diff --git a/packages/docs/src/page-configs/ui-elements/slider/examples/TrackLabel.vue b/packages/docs/src/page-configs/ui-elements/slider/examples/TrackLabel.vue
index 77240d26fb..3e784e5343 100644
--- a/packages/docs/src/page-configs/ui-elements/slider/examples/TrackLabel.vue
+++ b/packages/docs/src/page-configs/ui-elements/slider/examples/TrackLabel.vue
@@ -1,10 +1,10 @@
 <template>
-  <va-slider class="mb-4"
+  <va-slider class="mb-6"
     v-model="value[0]"
     track-label-visible
   />
 
-  <va-slider class="mb-4"
+  <va-slider class="mb-6"
     v-model="value[1]"
     track-label-visible
   >
@@ -13,7 +13,7 @@
     </template>
   </va-slider>
 
-  <va-slider class="mb-4"
+  <va-slider class="mb-6"
     v-model="value"
     range
     track-label-visible
diff --git a/packages/docs/src/page-configs/ui-elements/slider/examples/Vertical.vue b/packages/docs/src/page-configs/ui-elements/slider/examples/Vertical.vue
index 5c29b39a4c..2293e93053 100644
--- a/packages/docs/src/page-configs/ui-elements/slider/examples/Vertical.vue
+++ b/packages/docs/src/page-configs/ui-elements/slider/examples/Vertical.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="row justify-center" style="height: 200px;">
-    <va-slider class="mr-5" v-model="value" vertical track-label-visible />
-    <va-slider class="mr-5" v-model="value" vertical track-label-visible pins :step="5" />
-    <va-slider class="mr-5"
+    <va-slider class="mr-8" v-model="value" vertical track-label-visible />
+    <va-slider class="mr-8" v-model="value" vertical track-label-visible pins :step="5" />
+    <va-slider class="mr-8"
       v-model="rangeValue"
       vertical
       range
diff --git a/packages/docs/src/page-configs/ui-elements/split/examples/CustomGrabber.vue b/packages/docs/src/page-configs/ui-elements/split/examples/CustomGrabber.vue
index 407f79935d..1be341057e 100644
--- a/packages/docs/src/page-configs/ui-elements/split/examples/CustomGrabber.vue
+++ b/packages/docs/src/page-configs/ui-elements/split/examples/CustomGrabber.vue
@@ -1,7 +1,7 @@
 <template>
   <va-split class="split-demo" style="height: 22rem;">
     <template #start>
-      <div class="pa-4">
+      <div class="p-6">
         {{ lorem }}
       </div>
     </template>
@@ -11,7 +11,7 @@
       </div>
     </template>
     <template #end>
-      <div class="pa-4">
+      <div class="p-6">
         {{ lorem }}
       </div>
     </template>
diff --git a/packages/docs/src/page-configs/ui-elements/split/examples/CustomLimits.vue b/packages/docs/src/page-configs/ui-elements/split/examples/CustomLimits.vue
index a3acc46c67..4e1d29a069 100644
--- a/packages/docs/src/page-configs/ui-elements/split/examples/CustomLimits.vue
+++ b/packages/docs/src/page-configs/ui-elements/split/examples/CustomLimits.vue
@@ -1,12 +1,12 @@
 <template>
   <va-split class="split-demo" :limits="[[10, 'any'], ['50px', '30rem']]" style="height: 22rem;">
     <template #start>
-      <div class="pa-4">
+      <div class="p-6">
         {{ lorem }}
       </div>
     </template>
     <template #end>
-      <div class="pa-4">
+      <div class="p-6">
         {{ lorem }}
       </div>
     </template>
diff --git a/packages/docs/src/page-configs/ui-elements/split/examples/Disabled.vue b/packages/docs/src/page-configs/ui-elements/split/examples/Disabled.vue
index 129980b9bb..1e5d08afc0 100644
--- a/packages/docs/src/page-configs/ui-elements/split/examples/Disabled.vue
+++ b/packages/docs/src/page-configs/ui-elements/split/examples/Disabled.vue
@@ -1,12 +1,12 @@
 <template>
   <va-split class="split-demo" disabled style="height: 22rem;">
     <template #start>
-      <div class="pa-4">
+      <div class="p-6">
         {{ lorem }}
       </div>
     </template>
     <template #end>
-      <div class="pa-4">
+      <div class="p-6">
         {{ lorem }}
       </div>
     </template>
diff --git a/packages/docs/src/page-configs/ui-elements/split/examples/Maximization.vue b/packages/docs/src/page-configs/ui-elements/split/examples/Maximization.vue
index 8ada1ae108..9a155016d6 100644
--- a/packages/docs/src/page-configs/ui-elements/split/examples/Maximization.vue
+++ b/packages/docs/src/page-configs/ui-elements/split/examples/Maximization.vue
@@ -1,12 +1,12 @@
 <template>
   <va-split class="split-demo" maximization style="height: 22rem;">
     <template #start>
-      <div class="pa-4">
+      <div class="p-6">
         {{ lorem }}
       </div>
     </template>
     <template #end>
-      <div class="pa-4">
+      <div class="p-6">
         {{ lorem }}
       </div>
     </template>
diff --git a/packages/docs/src/page-configs/ui-elements/split/examples/Nested.vue b/packages/docs/src/page-configs/ui-elements/split/examples/Nested.vue
index 5b48c1fa11..67073edd25 100644
--- a/packages/docs/src/page-configs/ui-elements/split/examples/Nested.vue
+++ b/packages/docs/src/page-configs/ui-elements/split/examples/Nested.vue
@@ -1,28 +1,28 @@
 <template>
-  <va-split class="split-demo">
+  <va-split class="split-demo" v-model="value">
     <template #start>
       <va-split>
         <template #start>
-          <div class="pa-4">
+          <div class="p-6">
             {{ lorem }}
           </div>
         </template>
         <template #end>
-          <div class="pa-4">
+          <div class="p-6">
             {{ lorem }}
           </div>
         </template>
       </va-split>
     </template>
     <template #end>
-      <va-split vertical style="height: 8rem;">
+      <va-split vertical style="height: 25rem;">
         <template #start>
-          <div class="pa-4">
+          <div class="p-6">
             {{ lorem }}
           </div>
         </template>
         <template #end>
-          <div class="pa-4">
+          <div class="p-6">
             {{ lorem }}
           </div>
         </template>
@@ -32,11 +32,12 @@
 </template>
 
 <script>
-const lorem = 'Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.'
+const lorem = 'Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?'
 
 export default {
   data: () => ({
     lorem,
+    value: 70,
   }),
 }
 </script>
diff --git a/packages/docs/src/page-configs/ui-elements/split/examples/Snapping.vue b/packages/docs/src/page-configs/ui-elements/split/examples/Snapping.vue
index 3468311519..39e53b3611 100644
--- a/packages/docs/src/page-configs/ui-elements/split/examples/Snapping.vue
+++ b/packages/docs/src/page-configs/ui-elements/split/examples/Snapping.vue
@@ -1,12 +1,12 @@
 <template>
   <va-split class="split-demo" :snapping="[20, 80]" :snapping-range="5" style="height: 22rem;">
     <template #start>
-      <div class="pa-4">
+      <div class="p-6">
         {{ lorem }}
       </div>
     </template>
     <template #end>
-      <div class="pa-4">
+      <div class="p-6">
         {{ lorem }}
       </div>
     </template>
diff --git a/packages/docs/src/page-configs/ui-elements/split/examples/Vertical.vue b/packages/docs/src/page-configs/ui-elements/split/examples/Vertical.vue
index 495c0d62bd..3d6bc4e8a5 100644
--- a/packages/docs/src/page-configs/ui-elements/split/examples/Vertical.vue
+++ b/packages/docs/src/page-configs/ui-elements/split/examples/Vertical.vue
@@ -1,12 +1,12 @@
 <template>
   <va-split class="split-demo" vertical  style="height: 22rem;">
     <template #start>
-      <div class="pa-4">
+      <div class="p-6">
         {{ lorem }}
       </div>
     </template>
     <template #end>
-      <div class="pa-4">
+      <div class="p-6">
         {{ lorem }}
       </div>
     </template>
diff --git a/packages/docs/src/page-configs/ui-elements/switch/examples/Color.vue b/packages/docs/src/page-configs/ui-elements/switch/examples/Color.vue
index 61a071ac7d..908d364211 100644
--- a/packages/docs/src/page-configs/ui-elements/switch/examples/Color.vue
+++ b/packages/docs/src/page-configs/ui-elements/switch/examples/Color.vue
@@ -1,8 +1,8 @@
 <template>
-  <va-switch v-model="value" color="success" class="mr-4" />
-  <va-switch v-model="value" color="info" class="mr-4" />
-  <va-switch v-model="value" color="danger" class="mr-4" />
-  <va-switch v-model="value" color="warning" class="mr-4" />
+  <va-switch v-model="value" color="success" class="mr-6" />
+  <va-switch v-model="value" color="info" class="mr-6" />
+  <va-switch v-model="value" color="danger" class="mr-6" />
+  <va-switch v-model="value" color="warning" class="mr-6" />
 </template>
 
 <script>
diff --git a/packages/docs/src/page-configs/ui-elements/switch/examples/Error.vue b/packages/docs/src/page-configs/ui-elements/switch/examples/Error.vue
index fac7616ad0..51954834b1 100644
--- a/packages/docs/src/page-configs/ui-elements/switch/examples/Error.vue
+++ b/packages/docs/src/page-configs/ui-elements/switch/examples/Error.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="d-flex">
-    <va-switch v-model="value" error class="mr-4" />
-    <va-switch v-model="value" error error-messages="error message" class="mr-4" />
+  <div class="d-flex items-start">
+    <va-switch v-model="value" error class="mr-6" />
+    <va-switch v-model="value" error error-messages="error message" />
   </div>
 </template>
 
diff --git a/packages/docs/src/page-configs/ui-elements/switch/examples/InnerLabel.vue b/packages/docs/src/page-configs/ui-elements/switch/examples/InnerLabel.vue
index 5d6bf99255..1693248ddb 100644
--- a/packages/docs/src/page-configs/ui-elements/switch/examples/InnerLabel.vue
+++ b/packages/docs/src/page-configs/ui-elements/switch/examples/InnerLabel.vue
@@ -1,7 +1,7 @@
 <template>
   <div style="display: flex; align-items: center;">
-    <va-switch v-model="value" true-inner-label="Agree" false-inner-label="Disagree" class="mr-4" />
-    <va-switch v-model="value" class="mr-4">
+    <va-switch v-model="value" true-inner-label="Agree" false-inner-label="Disagree" class="mr-6" />
+    <va-switch v-model="value" class="mr-6">
       <template #innerLabel>
         Inner Label slot
       </template>
diff --git a/packages/docs/src/page-configs/ui-elements/switch/examples/Label.vue b/packages/docs/src/page-configs/ui-elements/switch/examples/Label.vue
index c5adba57e8..cb16a34320 100644
--- a/packages/docs/src/page-configs/ui-elements/switch/examples/Label.vue
+++ b/packages/docs/src/page-configs/ui-elements/switch/examples/Label.vue
@@ -1,12 +1,14 @@
 <template>
-  <va-switch v-model="value" label="left" left-label class="mr-4" />
-  <va-switch v-model="value" label="right" class="mr-4" />
-  <va-switch v-model="value" class="mr-4">
-    right labeled by slot
-  </va-switch>
-  <va-switch v-model="value" left-label class="mr-4">
-    left labeled by slot
-  </va-switch>
+  <div class="row">
+    <va-switch v-model="value" label="left" left-label class="mr-6" />
+    <va-switch v-model="value" label="right" class="mr-6" />
+    <va-switch v-model="value" class="mr-6">
+      right labeled by slot
+    </va-switch>
+    <va-switch v-model="value" left-label>
+      left labeled by slot
+    </va-switch>
+  </div>
 </template>
 
 <script>
diff --git a/packages/docs/src/page-configs/ui-elements/switch/examples/Size.vue b/packages/docs/src/page-configs/ui-elements/switch/examples/Size.vue
index 6f610c9ce8..c86fdc5091 100644
--- a/packages/docs/src/page-configs/ui-elements/switch/examples/Size.vue
+++ b/packages/docs/src/page-configs/ui-elements/switch/examples/Size.vue
@@ -1,7 +1,7 @@
 <template>
-  <va-switch v-model="value" label="small" size="small" class="mr-4" />
-  <va-switch v-model="value" label="default" class="mr-4" />
-  <va-switch v-model="value" label="large" size="large" class="mr-4" />
+  <va-switch v-model="value" label="small" size="small" class="mr-6" />
+  <va-switch v-model="value" label="default" class="mr-6" />
+  <va-switch v-model="value" label="large" size="large" class="mr-6" />
 </template>
 
 <script>
diff --git a/packages/docs/src/page-configs/ui-elements/switch/examples/State.vue b/packages/docs/src/page-configs/ui-elements/switch/examples/State.vue
index 20d6ade08f..ba6d08b64f 100644
--- a/packages/docs/src/page-configs/ui-elements/switch/examples/State.vue
+++ b/packages/docs/src/page-configs/ui-elements/switch/examples/State.vue
@@ -1,6 +1,6 @@
 <template>
-  <va-switch v-model="value" :disabled="isState" class="mr-4" />
-  <va-switch v-model="value" :readonly="isState" class="mr-4" />
+  <va-switch v-model="value" :disabled="isState" class="mr-6" />
+  <va-switch v-model="value" :readonly="isState" class="mr-6" />
   <va-checkbox class="mt-2" v-model="isState" label="States enabled" />
 </template>
 
diff --git a/packages/docs/src/page-configs/ui-elements/time-input/examples/validation.vue b/packages/docs/src/page-configs/ui-elements/time-input/examples/validation.vue
index 60113fa1f4..ab08d9135d 100644
--- a/packages/docs/src/page-configs/ui-elements/time-input/examples/validation.vue
+++ b/packages/docs/src/page-configs/ui-elements/time-input/examples/validation.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="d-flex mb-4">
+  <div class="d-flex mb-6">
     <va-time-input
       v-model="value"
       manual-input
diff --git a/packages/docs/src/page-configs/ui-elements/tree-view/examples/Selectable.vue b/packages/docs/src/page-configs/ui-elements/tree-view/examples/Selectable.vue
index 534cb24321..7505a8e6cc 100644
--- a/packages/docs/src/page-configs/ui-elements/tree-view/examples/Selectable.vue
+++ b/packages/docs/src/page-configs/ui-elements/tree-view/examples/Selectable.vue
@@ -2,43 +2,22 @@
   <va-tree-view
     v-model:checked="selectedNodes"
     :nodes="nodes"
-    :color="selectedColor"
     selectable
     expand-all
   />
 
-  <p class="mt-4">
+  <p class="mt-6">
     Selected nodes: {{ selectedNodes.join(',') || 'none' }}
   </p>
-
-  <p class="d-flex align-center">
-    Color:
-    <va-color-palette
-      v-model="selectedColor"
-      class="ml-2"
-      :palette="colorsPalette"
-    />
-  </p>
 </template>
 
 <script>
-const COLORS_PALETTE = [
-  '#4ae387',
-  '#e34a4a',
-  '#4ab2e3',
-  '#db76df',
-  '#f7cc36',
-  '#f3f3f3',
-  '#000',
-]
 
 export default {
   name: 'Default',
 
   data: () => ({
     selectedNodes: [],
-    colorsPalette: COLORS_PALETTE,
-    selectedColor: COLORS_PALETTE[0],
     nodes: [
       {
         id: 1,
diff --git a/packages/docs/src/page-configs/ui-elements/tree-view/examples/SelectableColored.vue b/packages/docs/src/page-configs/ui-elements/tree-view/examples/SelectableColored.vue
new file mode 100644
index 0000000000..4a72cddb50
--- /dev/null
+++ b/packages/docs/src/page-configs/ui-elements/tree-view/examples/SelectableColored.vue
@@ -0,0 +1,81 @@
+<template>
+  <p class="d-flex align-center">
+    Color:
+    <va-color-palette
+      v-model="selectedColor"
+      class="ml-2"
+      :palette="colorsPalette"
+    />
+  </p>
+
+  <va-tree-view
+    :nodes="nodes"
+    v-model:checked="selectedNodes"
+    :color="selectedColor"
+    selectable
+    expand-all
+  />
+</template>
+
+<script>
+const COLORS_PALETTE = [
+  '#4ae387',
+  '#e34a4a',
+  '#4ab2e3',
+  '#db76df',
+  '#f7cc36',
+  '#f3f3f3',
+  '#000',
+]
+
+export default {
+  name: 'SelectableColored',
+  data: () => ({
+    selectedNodes: [1, 2, 3, 4, 5, 6],
+    colorsPalette: COLORS_PALETTE,
+    selectedColor: COLORS_PALETTE[0],
+    nodes: [
+      {
+        id: 1,
+        label: 'Category',
+        checked: true,
+        children: [
+          {
+            id: 2,
+            label: 'Subcategory',
+            children: [
+              { id: 3, label: 'Item' },
+              { id: 4, label: 'Item' },
+            ],
+          },
+          {
+            id: 5,
+            label: 'Subcategory',
+            children: [
+              { id: 6, label: 'Item' },
+            ],
+          },
+        ],
+      },
+      {
+        id: 7,
+        label: 'Category',
+        children: [
+          { id: 8, label: 'Item' },
+        ],
+      },
+      {
+        id: 9,
+        label: 'Category',
+        children: [
+          { id: 10, label: 'Item' },
+        ],
+      },
+      {
+        id: 11,
+        label: 'Item',
+      },
+    ],
+  }),
+}
+</script>
diff --git a/packages/docs/src/page-configs/ui-elements/tree-view/page-config.ts b/packages/docs/src/page-configs/ui-elements/tree-view/page-config.ts
index 61153660ad..6ecc83935e 100644
--- a/packages/docs/src/page-configs/ui-elements/tree-view/page-config.ts
+++ b/packages/docs/src/page-configs/ui-elements/tree-view/page-config.ts
@@ -40,6 +40,8 @@ const config: ApiDocsBlock[] = [
   // Selectable
   block.subtitle('treeView.examples.selectable.title'),
   block.example('Selectable'),
+  block.subtitle('treeView.examples.selectable.coloredTitle'),
+  block.example('SelectableColored'),
 
   // API
   block.subtitle('api'),
diff --git a/packages/docs/src/page-configs/ui-elements/virtual-scroller/examples/DifferentContent.vue b/packages/docs/src/page-configs/ui-elements/virtual-scroller/examples/DifferentContent.vue
index 26194d5f3a..e962dfee7f 100644
--- a/packages/docs/src/page-configs/ui-elements/virtual-scroller/examples/DifferentContent.vue
+++ b/packages/docs/src/page-configs/ui-elements/virtual-scroller/examples/DifferentContent.vue
@@ -6,7 +6,7 @@
     v-slot="{item}"
   >
     <div class="row">
-      <div class="flex md6 lg4">
+      <div class="flex flex-col md6 lg4">
         <va-card>
           <va-image
             src="https://picsum.photos/400/200"
diff --git a/packages/docs/tailwind.config.js b/packages/docs/tailwind.config.js
new file mode 100644
index 0000000000..c9573520b7
--- /dev/null
+++ b/packages/docs/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./src/**/*.{vue,js}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
diff --git a/packages/docs/tsconfig.json b/packages/docs/tsconfig.json
index 32d70d41a6..979def1648 100644
--- a/packages/docs/tsconfig.json
+++ b/packages/docs/tsconfig.json
@@ -42,6 +42,8 @@
     "tests/**/*.tsx"
   ],
   "exclude": [
+    "dist",
+    "public",
     "node_modules",
     "src/**/*.spec.ts",
     "./src/examples"
diff --git a/packages/sandbox/.gitignore b/packages/sandbox/.gitignore
index c5a525fe8a..328a704a35 100644
--- a/packages/sandbox/.gitignore
+++ b/packages/sandbox/.gitignore
@@ -4,6 +4,5 @@ dist
 dist-ssr
 *.local
 package-lock.json
-bundle-sizes.js
-dev-tree-shaking.md
-tree-shaking.md
+analysis/*
+!analysis/.keep
\ No newline at end of file
diff --git a/packages/sandbox/README.md b/packages/sandbox/README.md
index 9a344e0062..815cfd9961 100644
--- a/packages/sandbox/README.md
+++ b/packages/sandbox/README.md
@@ -34,4 +34,10 @@ Tests only can guarantee that tree-shaking is working.
 
 > Before build, please, check how project runs using `dev:vite`, `dev:vue-cli`, `serve:vite`, `server:vue-cli` before release.
 
-Later we can write some e2e tests
\ No newline at end of file
+Later we can write some e2e tests
+
+
+### Analysis
+
+`yarn build:analysis` makes build with tree-shaking.md file, where store information about bundle sizes
+use `yarn build:analysis --use-cache` if you want to generated tree-shaking.md only if it doesn't exists already.
\ No newline at end of file
diff --git a/packages/sandbox/analysis/.keep b/packages/sandbox/analysis/.keep
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/sandbox/configs/vite/common-config.ts b/packages/sandbox/configs/vite/common-config.ts
index 0e88b05aef..a4aad48325 100644
--- a/packages/sandbox/configs/vite/common-config.ts
+++ b/packages/sandbox/configs/vite/common-config.ts
@@ -21,7 +21,7 @@ const visualizerPlugin = visualizer({
 
 export default function createViteConfig (type: BuildType) {
   const onAnalysis = async (analysisObject: AnalysisObject) => {
-    appendFileSync('./bundle-sizes.js', `export const ${camelCase(type)} = ${analysisObject.bundleSize}\n`)
+    appendFileSync('./analysis/bundle-sizes.js', `export const ${camelCase(type)} = ${analysisObject.bundleSize}\n`)
   }
   const analyzerPlugin = analyzer({ onAnalysis, stdout: true }) as PluginOption
 
@@ -47,6 +47,12 @@ export default function createViteConfig (type: BuildType) {
       },
     },
 
+    resolve: {
+      // alias: {
+      //   'vuestic-ui': '../../node_modules/vuestic-ui'
+      // },
+    },
+
     plugins: [vue(), isBase ? visualizerPlugin : analyzerPlugin],
   })
 }
diff --git a/packages/sandbox/package.json b/packages/sandbox/package.json
index feb9839e1f..250dd6fd2e 100644
--- a/packages/sandbox/package.json
+++ b/packages/sandbox/package.json
@@ -5,7 +5,7 @@
   "scripts": {
     "build": "rm -rf ./dist && yarn build:vite && yarn build:vue-cli && yarn build:nuxt",
     "build:vite": "vue-tsc --noEmit && vite build --config ./configs/vite/vite.base.ts",
-    "build:bundle-analysis": "tsx ./scripts/bundle-analysis.ts",
+    "build:analysis": "tsx ./scripts/bundle-analysis.ts",
     "build:vue-cli": "vue-cli-service build",
     "build:nuxt": "nuxt build",
     "dev:vite": "vite",
@@ -31,7 +31,7 @@
     "@vitejs/plugin-vue": "^1.3.0",
     "@vue/test-utils": "^2.0.2",
     "lodash": "^4.17.21",
-    "nuxt": "3.0.0-rc.8",
+    "nuxt": "3.0.0",
     "rollup-plugin-analyzer": "^4.0.0",
     "sass": "^1.54.4",
     "serve": "^12.0.0",
@@ -45,5 +45,8 @@
     "webpack": "5",
     "webpack-cli": "^4.9.2",
     "when-dependencies-installed": "^1.0.0"
+  },
+  "workspaces": {
+    "nohoist": ["vite"]
   }
 }
diff --git a/packages/sandbox/scripts/bundle-analysis.ts b/packages/sandbox/scripts/bundle-analysis.ts
index 7491e7dbc3..fb2b53d7f0 100644
--- a/packages/sandbox/scripts/bundle-analysis.ts
+++ b/packages/sandbox/scripts/bundle-analysis.ts
@@ -1,25 +1,38 @@
 import { $ } from 'deploy/execute'
-import { existsSync, rmSync, writeFileSync } from 'fs'
+import { existsSync, rmSync, writeFileSync, mkdirSync, openSync } from 'fs'
+import * as process from 'process'
 
 (async () => {
+  const isFullAnalysis = process.argv.includes('full')
+  const forceRebuild = !process.argv.includes('--use-cache')
+  const outputDir = process.argv.find((arg) => arg.startsWith('./') || arg.startsWith('../'))
+
   const distPath = './dist'
   if (existsSync(distPath)) {
     rmSync(distPath, { recursive: true })
   }
 
-  const bundleSizesPath = './bundle-sizes.js'
-  if (existsSync(bundleSizesPath)) {
-    rmSync(bundleSizesPath)
+  const analyticsStorePath = './analysis'
+  if (!existsSync(analyticsStorePath)) {
+    mkdirSync(analyticsStorePath, { recursive: true })
+    openSync(`${analyticsStorePath}/.keep`, 'a')
   }
 
-  await Promise.all([
-    $('vite build --config ./configs/vite/vite.empty.ts', { successMessage: 'Empty config was built.' }),
-    $('vite build --config ./configs/vite/vite.button.ts', { successMessage: 'Config with button was built.' }),
-    $('vite build --config ./configs/vite/vite.full.ts', { successMessage: 'Full config was built.' }),
-    $('vite build --config ./configs/vite/vite.button-select.ts', { successMessage: 'Config with button and select was built.' }),
-  ])
+  const bundleSizesCachePath = `./${analyticsStorePath}/bundle-sizes.js`
+  if ((forceRebuild) && existsSync(bundleSizesCachePath)) {
+    rmSync(bundleSizesCachePath)
+  }
 
-  if (existsSync(bundleSizesPath)) {
+  if (forceRebuild || !existsSync(bundleSizesCachePath)) {
+    await Promise.all([
+      $('vite build --config ./configs/vite/vite.empty.ts', { successMessage: 'Empty config was built.' }),
+      $('vite build --config ./configs/vite/vite.button.ts', { successMessage: 'Config with button was built.' }),
+      $('vite build --config ./configs/vite/vite.full.ts', { successMessage: 'Full config was built.' }),
+      $('vite build --config ./configs/vite/vite.button-select.ts', { successMessage: 'Config with button and select was built.' }),
+    ])
+  }
+
+  if (existsSync(bundleSizesCachePath)) {
     const VUETIFY_VERSION = '3.0.3'
     const VUETIFY_FULL_SIZE = 781
     const VUETIFY_BUTTON_SIZE = 112
@@ -29,12 +42,13 @@ import { existsSync, rmSync, writeFileSync } from 'fs'
     const NAIVE_BUTTON_SIZE = 181
     const NAIVE_BUTTON_SELECT_SIZE = 607
 
-    const bundleSizes = await (async () => await require('../bundle-sizes.js'))()
+    const bundleSizes = await (async () => await require('../analysis/bundle-sizes.js'))()
     const { empty, button, buttonSelect, full } = bundleSizes
 
+    const baseOutputPath = outputDir || analyticsStorePath
     const getOutputBundleSize = (v: number) => Math.trunc((v - empty) / 1000)
 
-    const mdFilePath = './tree-shaking.md'
+    const mdFilePath = `${baseOutputPath}/tree-shaking.md`
     writeFileSync(mdFilePath, `
 | Bundle                     | Vuestic UI                                |
 | -------------------------- | :---------------------------------------: |
@@ -42,9 +56,11 @@ import { existsSync, rmSync, writeFileSync } from 'fs'
 | Core + VaButton            | ~ ${getOutputBundleSize(button)} Kb       |
 | Core + VaButton + VaSelect | ~ ${getOutputBundleSize(buttonSelect)} Kb |
     `)
+    console.warn(`Result was successfully written to ${mdFilePath}.`)
 
-    const devMdFilePath = './dev-tree-shaking.md'
-    writeFileSync(devMdFilePath, `
+    if (isFullAnalysis) {
+      const devMdFilePath = `${baseOutputPath}/dev-tree-shaking.md`
+      writeFileSync(devMdFilePath, `
 | Bundle                 | Vuestic UI                                | Vuetify UI (${VUETIFY_VERSION}) | Naive UI (${NAIVE_VERSION}) |
 | ---------------------- | :---------------------------------------: | :-----------------------------: | :-------------------------: |
 | Full                   | ~ ${getOutputBundleSize(full)} Kb         | ~ ${VUETIFY_FULL_SIZE} Kb       | ~ ${NAIVE_FULL_SIZE} Kb     |
@@ -52,9 +68,11 @@ import { existsSync, rmSync, writeFileSync } from 'fs'
 | Core + Button + Select | ~ ${getOutputBundleSize(buttonSelect)} Kb | ~ ${VUETIFY_BUTTON_SELECT_SIZE} Kb | ~ ${NAIVE_BUTTON_SELECT_SIZE} Kb |
     `)
 
-    console.warn(`Result was successfully written to ${mdFilePath} and ${devMdFilePath}.`)
+      console.warn(`Result was successfully written to ${devMdFilePath}.`)
+    }
+
     return
   }
 
-  console.warn(`${bundleSizesPath} file wasn't found. Bundle size analysis was terminated.`)
+  console.warn(`${bundleSizesCachePath} file wasn't found. Bundle size analysis was terminated.`)
 })()
diff --git a/packages/sandbox/src/app.vue b/packages/sandbox/src/app.vue
index bb0280e660..6ab38a62ca 100644
--- a/packages/sandbox/src/app.vue
+++ b/packages/sandbox/src/app.vue
@@ -8,7 +8,7 @@
     <div> inside the row class </div>
     But grid is not imported so we are not.
   </div>
-  <div class="flex-center ma-3">
+  <div class="flex-center m-3">
     <va-button @click="toggleAmPm()">
       Test Am\Pm toggle and minutes filter.
     </va-button>
diff --git a/packages/sandbox/test/tree-shaking.test.ts b/packages/sandbox/test/tree-shaking.test.ts
index 6bc3edc1e1..fab5be74af 100644
--- a/packages/sandbox/test/tree-shaking.test.ts
+++ b/packages/sandbox/test/tree-shaking.test.ts
@@ -12,7 +12,6 @@ const tests = {
     // So we need to insert .*
     expect(/\:root\s?\{(.*)--va-primary\:(.*)\}/.test(output)).toBe(true)
 
-    expect(/.ml-0/.test(output)).toBe(false)
     expect(/.text--capitalize\s?{/.test(output)).toBe(true)
   }
 }
diff --git a/packages/ui/src/components/va-avatar-group/VaAvatarGroup.demo.vue b/packages/ui/src/components/va-avatar-group/VaAvatarGroup.demo.vue
index 99f646908e..7910a8ab0f 100644
--- a/packages/ui/src/components/va-avatar-group/VaAvatarGroup.demo.vue
+++ b/packages/ui/src/components/va-avatar-group/VaAvatarGroup.demo.vue
@@ -1,13 +1,13 @@
 <template>
   <VbDemo>
     <VbCard title="Default">
-      <va-avatar-group :options="avatars" :max="3" class="mb-4" />
+      <va-avatar-group :options="avatars" :max="3" class="mb-6" />
       <va-avatar-group :options="avatars" :max="3" square />
     </VbCard>
     <VbCard title="Vertical">
       <div class="d-flex">
-        <va-avatar-group :options="avatars" :max="3" vertical class="mr-4" />
-        <va-avatar-group :options="avatars" :max="3" vertical square class="mr-4" />
+        <va-avatar-group :options="avatars" :max="3" vertical class="mr-6" />
+        <va-avatar-group :options="avatars" :max="3" vertical square class="mr-6" />
       </div>
     </VbCard>
   </VbDemo>
diff --git a/packages/ui/src/components/va-avatar/VaAvatar.demo.vue b/packages/ui/src/components/va-avatar/VaAvatar.demo.vue
index 9f8972f389..b8770bf4b1 100644
--- a/packages/ui/src/components/va-avatar/VaAvatar.demo.vue
+++ b/packages/ui/src/components/va-avatar/VaAvatar.demo.vue
@@ -110,23 +110,23 @@
     <VbCard title="Loading">
       <va-button @click="isLoading = !isLoading" class="mb-2">Toggle loading</va-button>
       <br />
-      <va-avatar class="mr-4" :loading="isLoading" />
+      <va-avatar class="mr-6" :loading="isLoading" />
 
-      <va-avatar class="mr-4" :loading="isLoading">
+      <va-avatar class="mr-6" :loading="isLoading">
         J.D.
       </va-avatar>
 
-      <va-avatar class="mr-4" :loading="isLoading" icon="warning" />
+      <va-avatar class="mr-6" :loading="isLoading" icon="warning" />
 
       <va-avatar :loading="isLoading" src="https://randomuser.me/api/portraits/women/5.jpg" />
       <p class="mt-2 mb-2">Squared</p>
-      <va-avatar class="mr-4" :loading="isLoading" square />
+      <va-avatar class="mr-6" :loading="isLoading" square />
 
-      <va-avatar class="mr-4" :loading="isLoading" square>
+      <va-avatar class="mr-6" :loading="isLoading" square>
         J.D.
       </va-avatar>
 
-      <va-avatar class="mr-4" :loading="isLoading" square icon="warning" />
+      <va-avatar class="mr-6" :loading="isLoading" square icon="warning" />
 
       <va-avatar :loading="isLoading" square src="https://randomuser.me/api/portraits/women/5.jpg" />
     </VbCard>
diff --git a/packages/ui/src/components/va-breadcrumbs/VaBreadcrumbs.vue b/packages/ui/src/components/va-breadcrumbs/VaBreadcrumbs.vue
index 65ea7f76ae..b45d323d2c 100644
--- a/packages/ui/src/components/va-breadcrumbs/VaBreadcrumbs.vue
+++ b/packages/ui/src/components/va-breadcrumbs/VaBreadcrumbs.vue
@@ -41,7 +41,7 @@ export default defineComponent({
       const separatorNode = slots.separator ? slots.separator() : [props.separator]
 
       return h('span', {
-        ariaHidden: true,
+        'aria-hidden': true,
         class: ['va-breadcrumbs__separator'],
         style: [{ color: computedThemesSeparatorColor.value }],
       }, separatorNode)
@@ -77,7 +77,7 @@ export default defineComponent({
       const createChildComponent = (child: VNode, index: number) => h(
         'span', {
           class: 'va-breadcrumbs__item',
-          ariaCurrent: (isLastIndexChildNodes(index) && isChildLink(child)) ? 'location' : false,
+          'aria-current': (isLastIndexChildNodes(index) && isChildLink(child)) ? 'location' : false,
           style: {
             color: (!isLastIndexChildNodes(index) && !isDisabledChild(child)) ? computedThemesActiveColor.value : null,
           },
@@ -110,7 +110,7 @@ export default defineComponent({
       class: 'va-breadcrumbs',
       style: alignComputed.value,
       role: isAllChildLinks.value ? 'navigation' : undefined,
-      ariaLabel: isAllChildLinks.value ? t('breadcrumbs') : undefined,
+      'aria-label': isAllChildLinks.value ? t('breadcrumbs') : undefined,
     }, getChildren())
   },
 })
diff --git a/packages/ui/src/components/va-button/hooks/useButtonTextColor.ts b/packages/ui/src/components/va-button/hooks/useButtonTextColor.ts
index 2c56f89d87..d3cd2f2608 100644
--- a/packages/ui/src/components/va-button/hooks/useButtonTextColor.ts
+++ b/packages/ui/src/components/va-button/hooks/useButtonTextColor.ts
@@ -1,21 +1,47 @@
 import { computed, Ref, ComputedRef, getCurrentInstance } from 'vue'
 
 import { useColors } from '../../../composables'
+import { isServer } from '../../../utils/ssr'
 
 import { ButtonPropsTypes } from '../types'
 
-type UseButtonTextColor = (
-  textColorComputed: Ref<string>,
-  colorComputed: Ref<string>,
-  isPressed: Ref<boolean>,
-  isHovered: Ref<boolean>,
-) => ComputedRef<{
+type ButtonTextColorStyles = {
   color: string
   background?: string
   opacity?: number
   'background-clip'?: 'text',
   '-webkit-background-clip'?: 'text',
-}>
+}
+
+type UseButtonTextColor = (
+  textColorComputed: Ref<string>,
+  colorComputed: Ref<string>,
+  isPressed: Ref<boolean>,
+  isHovered: Ref<boolean>,
+) => ComputedRef<ButtonTextColorStyles>
+
+/*
+* Inverts opacity depending on browser (webkit/chromium)
+* TODO: Check if Safari <16 version will be less then 1% and remove function
+*
+* @param {number} opacity - Opacity value
+* @returns {number} Inverted opacity value
+* */
+const getOpacity = (opacity: number): number => {
+  if (isServer()) { return opacity }
+
+  if (opacity > 0) {
+    const userAgent = window?.navigator?.userAgent
+    const isSafari = userAgent && /^((?!chrome|android).)*safari/i.test(window?.navigator?.userAgent)
+    const isLatestSafari = userAgent && /(version.)15|16/i.test(window?.navigator?.userAgent)
+
+    if (isSafari && !isLatestSafari) {
+      return opacity < 1 ? 1 - opacity : opacity
+    }
+  }
+
+  return opacity
+}
 
 export const useButtonTextColor: UseButtonTextColor = (
   textColorComputed,
@@ -32,7 +58,7 @@ export const useButtonTextColor: UseButtonTextColor = (
 
   const plainColorStyles = computed(() => ({
     background: 'transparent',
-    color: 'transparent',
+    color: textColorComputed.value,
     '-webkit-background-clip': 'text',
     'background-clip': 'text',
     opacity: getPlainTextOpacity.value,
@@ -40,11 +66,18 @@ export const useButtonTextColor: UseButtonTextColor = (
 
   const getStateColor = (maskColor: string, stateOpacity: number, stateBehavior: string) => {
     const maskStateColor = getColor(maskColor)
+    let stateStyles: Partial<ButtonTextColorStyles>
+
+    if (stateBehavior === 'opacity') {
+      stateStyles = { color: colorToRgba(textColorComputed.value, stateOpacity) }
+    } else {
+      stateStyles = {
+        background: getStateMaskGradientBackground(colorComputed.value, maskStateColor, stateOpacity),
+        color: stateOpacity < 1 ? colorToRgba(textColorComputed.value, getOpacity(stateOpacity)) : maskStateColor,
+      }
+    }
 
-    const res = stateBehavior === 'opacity'
-      ? { color: colorToRgba(textColorComputed.value, stateOpacity) }
-      : { background: getStateMaskGradientBackground(colorComputed.value, maskStateColor, stateOpacity) }
-    return { ...plainColorStyles.value, ...res }
+    return { ...plainColorStyles.value, ...stateStyles }
   }
 
   const hoverTextColorComputed = computed(() => {
diff --git a/packages/ui/src/components/va-card/VaCard.demo.vue b/packages/ui/src/components/va-card/VaCard.demo.vue
index fe26e5b1ba..120fcb90b6 100644
--- a/packages/ui/src/components/va-card/VaCard.demo.vue
+++ b/packages/ui/src/components/va-card/VaCard.demo.vue
@@ -202,11 +202,11 @@
     </VbCard>
     <VbCard title="Horizontal">
       <div class="d-flex">
-        <div class="flex">
-          <va-card class="mr-4" style="width: 400px;">
+        <div class="flex flex-col">
+          <va-card class="mr-6" style="width: 400px;">
             <va-card-block horizontal>
-              <va-image class="flex md6" src="https://picsum.photos/200/280" />
-              <div class="flex md6">
+              <va-image class="flex flex-col md6" src="https://picsum.photos/200/280" />
+              <div class="flex flex-col md6">
                 <va-card-title>Title</va-card-title>
                 <va-card-content>
                   {{ lorem }}
@@ -215,11 +215,11 @@
             </va-card-block>
           </va-card>
         </div>
-        <div class="flex">
+        <div class="flex flex-col">
           <va-card style="width: 300px;">
             <va-card-block horizontal>
-              <va-image class="flex" style="flex: 1 0;" src="https://picsum.photos/250/250" />
-              <va-card-actions class="flex" vertical align="center">
+              <va-image class="flex flex-col" style="flex: 1 0;" src="https://picsum.photos/250/250" />
+              <va-card-actions class="flex flex-col" vertical align="center">
                 <va-button icon="heart" size="small" color="success" plain />
                 <va-button icon="bookmark" size="small" plain />
                 <va-button icon="close" size="small" color="danger" plain />
diff --git a/packages/ui/src/components/va-checkbox/VaCheckbox.vue b/packages/ui/src/components/va-checkbox/VaCheckbox.vue
index 883a47b2d1..acd8ba1822 100644
--- a/packages/ui/src/components/va-checkbox/VaCheckbox.vue
+++ b/packages/ui/src/components/va-checkbox/VaCheckbox.vue
@@ -160,10 +160,10 @@ export default defineComponent({
       disabled: props.disabled,
       readonly: props.readonly,
       tabindex: props.disabled ? -1 : 0,
-      ariaLabel: props.ariaLabel,
-      ariaDisabled: props.disabled,
-      ariaReadOnly: props.readonly,
-      ariaChecked: isActive.value,
+      'aria-label': props.ariaLabel,
+      'aria-disabled': props.disabled,
+      'aria-readOnly': props.readonly,
+      'aria-checked': isActive.value,
       ...validationAriaAttributes.value,
     }))
 
diff --git a/packages/ui/src/components/va-counter/VaCounter.vue b/packages/ui/src/components/va-counter/VaCounter.vue
index 0bc6eeca33..e5a9a68d2a 100644
--- a/packages/ui/src/components/va-counter/VaCounter.vue
+++ b/packages/ui/src/components/va-counter/VaCounter.vue
@@ -292,9 +292,9 @@ export default defineComponent({
 
     const inputAttributesComputed = computed(() => ({
       tabindex: tabIndexComputed.value,
-      ariaLabel: props.label || t('counterValue'),
-      ariaValuemin: min.value,
-      ariaValuemax: max.value,
+      'aria-label': props.label || t('counterValue'),
+      'aria-valuemin': min.value,
+      'aria-valuemax': max.value,
       ...omit(attrs, ['class', 'style']),
       ...pick(props, ['disabled', 'min', 'max', 'step']),
       readonly: props.readonly || !props.manualInput,
diff --git a/packages/ui/src/components/va-date-input/VaDateInput.demo.vue b/packages/ui/src/components/va-date-input/VaDateInput.demo.vue
index a9c712b822..7ff2b7244d 100644
--- a/packages/ui/src/components/va-date-input/VaDateInput.demo.vue
+++ b/packages/ui/src/components/va-date-input/VaDateInput.demo.vue
@@ -48,17 +48,17 @@
     </VbCard>
 
     <VbCard title="slots">
-      <va-date-input v-model="value" class="mb-4">
+      <va-date-input v-model="value" class="mb-6">
         <template #prepend>
           prepend
         </template>
       </va-date-input>
-      <va-date-input v-model="value" class="mb-4">
+      <va-date-input v-model="value" class="mb-6">
         <template #append>
           append
         </template>
       </va-date-input>
-      <va-date-input v-model="value" class="mb-4" leftIcon clearable>
+      <va-date-input v-model="value" class="mb-6" leftIcon clearable>
         <template #prependInner>
           prependInner
         </template>
@@ -77,41 +77,41 @@
     </VbCard>
 
     <VbCard title="props to input">
-      <va-date-input v-model="value" class="mb-4" />
-      <va-date-input v-model="range" outline  class="mb-4" />
-      <va-date-input v-model="dates" bordered  class="mb-4" />
-      <va-date-input v-model="dates" color="danger" class="mb-4" />
-      <va-date-input v-model="dates" label="label" class="mb-4" />
+      <va-date-input v-model="value" class="mb-6" />
+      <va-date-input v-model="range" outline  class="mb-6" />
+      <va-date-input v-model="dates" bordered  class="mb-6" />
+      <va-date-input v-model="dates" color="danger" class="mb-6" />
+      <va-date-input v-model="dates" label="label" class="mb-6" />
     </VbCard>
 
     <VbCard title="calendar appearance">
-      <va-date-input v-model="value" label="Weekday names" :weekdayNames="['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT']" class="mb-4" />
+      <va-date-input v-model="value" label="Weekday names" :weekdayNames="['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT']" class="mb-6" />
 
-      <va-date-input v-model="value" label="Month names" :monthNames="['January','February','March','April','May','June','July','August','September','October','November','December']" class="mb-4" />
+      <va-date-input v-model="value" label="Month names" :monthNames="['January','February','March','April','May','June','July','August','September','October','November','December']" class="mb-6" />
 
-      <va-date-input v-model="value" label="Hide weekdays" hideWeekDays class="mb-4" />
+      <va-date-input v-model="value" label="Hide weekdays" hideWeekDays class="mb-6" />
 
       <va-date-input v-model="value" label="Do not highlight today date" :highlightToday="false" />
     </VbCard>
 
     <VbCard title="weekends">
-      <va-date-input v-model="value" label="Highlight weekend" highlight-weekends class="mb-4" />
-      <va-date-input v-model="value" label="Every second day is weekend" highlight-weekends :weekends="(date) => date.getDay() % 2 === 0" class="mb-4" />
+      <va-date-input v-model="value" label="Highlight weekend" highlight-weekends class="mb-6" />
+      <va-date-input v-model="value" label="Every second day is weekend" highlight-weekends :weekends="(date) => date.getDay() % 2 === 0" class="mb-6" />
     </VbCard>
 
     <VbCard title="dropdown">
-      <va-date-input v-model="value" v-model:is-open="isOpen" :label="`Should be open ${isOpen}`" class="mb-4" />
+      <va-date-input v-model="value" v-model:is-open="isOpen" :label="`Should be open ${isOpen}`" class="mb-6" />
     </VbCard>
 
     <VbCard title="reset on close (range)">
-      <va-date-input v-model="range" label="enabled" class="mb-4" />
-      <va-date-input v-model="range" label="disabled" :reset-on-close="false" class="mb-4" />
+      <va-date-input v-model="range" label="enabled" class="mb-6" />
+      <va-date-input v-model="range" label="disabled" :reset-on-close="false" class="mb-6" />
     </VbCard>
 
     <VbCard title="values as strings and numbers">
-      <va-date-input v-model="string" class="mb-4" />
-      <va-date-input v-model="strings" class="mb-4" />
-      <va-date-input v-model="stringRange" class="mb-4" />
+      <va-date-input v-model="string" class="mb-6" />
+      <va-date-input v-model="strings" class="mb-6" />
+      <va-date-input v-model="stringRange" class="mb-6" />
     </VbCard>
 
     <VbCard title="slots to calendar">
@@ -119,7 +119,7 @@
         v-model="value"
         :monthNames="['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']"
         :weekdayNames="['日', '一', '二', '三', '四', '五', '六']"
-        class="mb-4"
+        class="mb-6"
       >
         <template #day="{ date }">
           {{ date.getDate() }}日
@@ -142,9 +142,9 @@
     </VbCard>
 
     <VbCard title="first weekday">
-      <va-date-input v-model="value" label="Sun (default)" class="mb-4" />
+      <va-date-input v-model="value" label="Sun (default)" class="mb-6" />
 
-      <va-date-input v-model="value" label="Monday" firstWeekday="Monday" class="mb-4" />
+      <va-date-input v-model="value" label="Monday" firstWeekday="Monday" class="mb-6" />
     </VbCard>
 
     <VbCard title="disable dates">
diff --git a/packages/ui/src/components/va-date-picker/VaDatePicker.demo.vue b/packages/ui/src/components/va-date-picker/VaDatePicker.demo.vue
index 859462bd1b..e4e00695b9 100644
--- a/packages/ui/src/components/va-date-picker/VaDatePicker.demo.vue
+++ b/packages/ui/src/components/va-date-picker/VaDatePicker.demo.vue
@@ -33,7 +33,7 @@
     </VbCard>
 
     <VbCard title="hide weekdays">
-      <va-date-picker v-model="value" hideWeekDays class="mb-4" />
+      <va-date-picker v-model="value" hideWeekDays class="mb-6" />
     </VbCard>
 
     <VbCard title="do not highlight today date">
@@ -41,10 +41,10 @@
     </VbCard>
 
     <VbCard title="weekends">
-      <va-date-picker v-model="value" highlight-weekend class="mb-4" />
+      <va-date-picker v-model="value" highlight-weekend class="mb-6" />
 
       <h5 class="mb-2">Every second day is weeked</h5>
-      <va-date-picker v-model="value" highlight-weekend :weekends="(date) => date.getDay() % 2 === 0" class="mb-4" />
+      <va-date-picker v-model="value" highlight-weekend :weekends="(date) => date.getDay() % 2 === 0" class="mb-6" />
     </VbCard>
 
     <VbCard title="slots to calendar">
@@ -53,7 +53,7 @@
         v-model="value"
         :monthNames="['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']"
         :weekdayNames="['日', '一', '二', '三', '四', '五', '六']"
-        class="mb-4"
+        class="mb-6"
       >
         <template #day="{ date }">
           {{ date.getDate() }}日
@@ -89,7 +89,7 @@
 
     <VbCard title="first weekday">
       <h5 class="mb-2">Sun (default)</h5>
-      <va-date-picker v-model="value" class="mb-4" />
+      <va-date-picker v-model="value" class="mb-6" />
       <h5 class="mb-2">Monday</h5>
       <va-date-picker v-model="value" first-weekday="Monday" />
     </VbCard>
@@ -100,32 +100,32 @@
 
     <VbCard title="View">
       <h5 class="mb-2">day</h5>
-      <va-date-picker v-model="monthValue" v-model:view="dayView" type="day" class="mb-4" />
+      <va-date-picker v-model="monthValue" v-model:view="dayView" type="day" class="mb-6" />
 
       <h5 class="mb-2">month</h5>
-      <va-date-picker v-model="monthValue" v-model:view="monthView" type="day" class="mb-4" />
+      <va-date-picker v-model="monthValue" v-model:view="monthView" type="day" class="mb-6" />
 
       <h5 class="mb-2">year</h5>
-      <va-date-picker v-model="months" v-model:view="yearView" type="day" class="mb-4" />
+      <va-date-picker v-model="months" v-model:view="yearView" type="day" class="mb-6" />
     </VbCard>
 
     <VbCard title="Month picker">
       <h5 class="mb-2">Single</h5>
-      <va-date-picker v-model="monthValue" type="month" class="mb-4" />
+      <va-date-picker v-model="monthValue" type="month" class="mb-6" />
 
       <h5 class="mb-2">Range</h5>
-      <va-date-picker v-model="monthRange" type="month" class="mb-4" />
+      <va-date-picker v-model="monthRange" type="month" class="mb-6" />
 
       <h5 class="mb-2">Multiple</h5>
-      <va-date-picker v-model="months" type="month" class="mb-4" />
+      <va-date-picker v-model="months" type="month" class="mb-6" />
     </VbCard>
 
     <VbCard title="Year picker">
       <h5 class="mb-2">Single</h5>
-      <va-date-picker v-model="monthValue" type="year" class="mb-4" />
+      <va-date-picker v-model="monthValue" type="year" class="mb-6" />
 
       <h5 class="mb-2">Range</h5>
-      <va-date-picker v-model="monthRange" type="year" class="mb-4" />
+      <va-date-picker v-model="monthRange" type="year" class="mb-6" />
 
       <h5 class="mb-2">Multiple</h5>
       <va-date-picker v-model="months" type="year" />
@@ -136,7 +136,7 @@
       <va-date-picker class="mb-2" v-model="value" :allowedDays="(date) => date.getDay() !== 2 && date.getDay() !== 4" />
 
       <h5 class="mb-2">Disable all January and December</h5>
-      <va-date-picker v-model="monthRange" :allowedMonths="(date) => date.getMonth() !== 0 && date.getMonth() !== 11" type="month" class="mb-4" />
+      <va-date-picker v-model="monthRange" :allowedMonths="(date) => date.getMonth() !== 0 && date.getMonth() !== 11" type="month" class="mb-6" />
     </VbCard>
 
     <VbCard title="calendar CSS variables & colors">
diff --git a/packages/ui/src/components/va-file-upload/VaFileUpload.demo.vue b/packages/ui/src/components/va-file-upload/VaFileUpload.demo.vue
index e305fd9b67..ec4c7beea0 100644
--- a/packages/ui/src/components/va-file-upload/VaFileUpload.demo.vue
+++ b/packages/ui/src/components/va-file-upload/VaFileUpload.demo.vue
@@ -97,7 +97,7 @@
       <va-file-upload
         v-model="basic"
       >
-        <div class="p-4">
+        <div class="p-6">
           <p class="mb-2">This is slot, click or drag'n'drop file to upload</p>
           <img
             src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
diff --git a/packages/ui/src/components/va-input/VaInput.demo.vue b/packages/ui/src/components/va-input/VaInput.demo.vue
index 3cbfbabd55..733ee45c92 100644
--- a/packages/ui/src/components/va-input/VaInput.demo.vue
+++ b/packages/ui/src/components/va-input/VaInput.demo.vue
@@ -569,19 +569,19 @@
       <va-input
         v-model="counterOrMaxLengthValue"
         counter
-        class="mb-4"
+        class="mb-6"
       />
       <va-input
         v-model="counterOrMaxLengthValue"
         counter
         label="Name"
         type="textarea"
-        class="mb-4"
+        class="mb-6"
       />
       <va-input
         v-model="counterOrMaxLengthValue"
         counter
-        class="mb-4"
+        class="mb-6"
       >
         <template #counter="{ valueLength }">
           Additional message, {{ valueLength }}
@@ -610,13 +610,13 @@
         counter
         label="Name"
         type="textarea"
-        class="mb-4"
+        class="mb-6"
       />
       <va-input
         v-model="counterOrMaxLengthValue"
         :max-length="maxLength"
         counter
-        class="mb-4"
+        class="mb-6"
       >
         <template #counter="{ valueLength, maxLength }">
           Additional message, {{ `${valueLength}/${maxLength}` }}
@@ -640,7 +640,7 @@
       style="width: 66%;"
     >
       <va-input
-        class="mb-4"
+        class="mb-6"
         input-class="red text--right"
         model-value="This input must have margin bottom and right-aligned red text."
       />
@@ -704,7 +704,7 @@ export default {
     margin-bottom: 1rem;
   }
 
-  .mb-4 {
+  .mb-6 {
     margin-bottom: 4rem;
   }
 
diff --git a/packages/ui/src/components/va-input/VaInput.vue b/packages/ui/src/components/va-input/VaInput.vue
index 05e5d6adff..a53999da21 100644
--- a/packages/ui/src/components/va-input/VaInput.vue
+++ b/packages/ui/src/components/va-input/VaInput.vue
@@ -5,6 +5,7 @@
     :class="$attrs.class"
     :style="$attrs.style"
     :color="$props.color"
+    :background="$props.background"
     :readonly="$props.readonly"
     :disabled="$props.disabled"
     :success="$props.success"
@@ -135,6 +136,7 @@ export default defineComponent({
 
     // style
     color: { type: String, default: 'primary' },
+    background: { type: String, default: 'background-element' },
     outline: { type: Boolean, default: false },
     bordered: { type: Boolean, default: false },
     requiredMark: { type: Boolean, default: false },
@@ -219,12 +221,12 @@ export default defineComponent({
     const tabIndexComputed = computed(() => props.disabled ? -1 : props.tabindex)
 
     const computedChildAttributes = computed(() => ({
-      ariaLabel: props.ariaLabel || props.label,
-      ariaRequired: props.requiredMark,
+      'aria-label': props.ariaLabel || props.label,
+      'aria-required': props.requiredMark,
       tabindex: tabIndexComputed.value,
       class: props.inputClass,
-      ariaDisabled: props.disabled,
-      ariaReadonly: props.readonly,
+      'aria-disabled': props.disabled,
+      'aria-readonly': props.readonly,
       ...validationAriaAttributes.value,
       ...omit(attrs, ['class', 'style']),
     }) as InputHTMLAttributes)
diff --git a/packages/ui/src/components/va-input/_variables.scss b/packages/ui/src/components/va-input/_variables.scss
index f6f9194e51..74d19fcebd 100644
--- a/packages/ui/src/components/va-input/_variables.scss
+++ b/packages/ui/src/components/va-input/_variables.scss
@@ -34,7 +34,6 @@
   --va-input-font-style: normal;
   --va-input-font-stretch: normal;
   --va-input-letter-spacing: normal;
-  --va-input-placeholder-text-color: var(--va-secondary);
   --va-input-disabled-opacity: 0.4;
 
   /* Label */
diff --git a/packages/ui/src/components/va-input/components/VaInputWrapper/VaInputWrapper.vue b/packages/ui/src/components/va-input/components/VaInputWrapper/VaInputWrapper.vue
index e03da5d310..52c0d8cd24 100644
--- a/packages/ui/src/components/va-input/components/VaInputWrapper/VaInputWrapper.vue
+++ b/packages/ui/src/components/va-input/components/VaInputWrapper/VaInputWrapper.vue
@@ -148,6 +148,7 @@ export default defineComponent({
     }))
 
     const colorComputed = computed(() => getColor(props.color))
+    const backgroundComputed = computed(() => getColor(props.background))
     const borderColorComputed = computed(() => props.focused ? colorComputed.value : undefined)
 
     const messagesComputed = computed(() => props.error ? props.errorMessages : props.messages)
@@ -186,6 +187,7 @@ export default defineComponent({
       isCounterVisible,
       counterComputed,
       colorComputed,
+      backgroundComputed,
       borderColorComputed,
       messagesColor,
       messagesComputed,
@@ -217,6 +219,8 @@ export default defineComponent({
   flex: 1;
 
   &__field {
+    --va-input-wrapper-background: v-bind(backgroundComputed);
+
     position: relative;
     display: flex;
     align-items: center;
@@ -310,7 +314,8 @@ export default defineComponent({
       }
 
       &::placeholder {
-        color: var(--va-input-placeholder-text-color);
+        color: inherit;
+        opacity: 0.5;
       }
     }
   }
diff --git a/packages/ui/src/components/va-modal/VaModal.demo.vue b/packages/ui/src/components/va-modal/VaModal.demo.vue
index 4690fbd051..a66eee1bbf 100644
--- a/packages/ui/src/components/va-modal/VaModal.demo.vue
+++ b/packages/ui/src/components/va-modal/VaModal.demo.vue
@@ -315,7 +315,7 @@
       </button>
 
       <va-modal v-model="showModalNested1" :message="message" hide-default-actions>
-        <button class="mt-5" @click="showModalNested2 = !showModalNested2" color="secondary">
+        <button class="mt-8" @click="showModalNested2 = !showModalNested2" color="secondary">
           Show second modal
         </button>
 
@@ -346,7 +346,7 @@
         <a tabindex="0" target="_blank" href="https://google.com">
           Google
         </a>
-        <va-button class="mt-5" @click="showModalFocusTrap2 = !showModalFocusTrap2" color="secondary">
+        <va-button class="mt-8" @click="showModalFocusTrap2 = !showModalFocusTrap2" color="secondary">
           Show second modal
         </va-button>
         <input type="text" />
diff --git a/packages/ui/src/components/va-navbar/VaNavbar.demo.vue b/packages/ui/src/components/va-navbar/VaNavbar.demo.vue
index ab6d5c9ebc..fa4012b8be 100644
--- a/packages/ui/src/components/va-navbar/VaNavbar.demo.vue
+++ b/packages/ui/src/components/va-navbar/VaNavbar.demo.vue
@@ -101,7 +101,7 @@
       <va-button-toggle
         v-model="currentSlot"
         :options="slotsList"
-        class="mt-4 mb-4"
+        class="mt-6 mb-6"
       />
       <va-navbar color="#990099">
         <template #[currentSlot]>
diff --git a/packages/ui/src/components/va-navbar/VaNavbar.vue b/packages/ui/src/components/va-navbar/VaNavbar.vue
index 74a5d1160e..117da9b161 100644
--- a/packages/ui/src/components/va-navbar/VaNavbar.vue
+++ b/packages/ui/src/components/va-navbar/VaNavbar.vue
@@ -48,7 +48,7 @@ export default defineComponent({
     shape: { type: Boolean, default: false },
   },
 
-  setup (props, { slots }) {
+  setup (props) {
     // TODO(1.6.0): Remove deprecated slots
     useDeprecated(['center'], ['slots'])
 
@@ -70,22 +70,10 @@ export default defineComponent({
       fill: textColorComputed.value,
     }))
 
-    const gridTemplateComputed = computed(() => {
-      const gridTemplateAreas = [
-        slots.left && 'left',
-        (slots.default || slots.center) && 'center',
-        slots.right && 'right',
-      ].filter(v => v)
-      const sizes = '1fr '.repeat(gridTemplateAreas.length).trimEnd()
-
-      return `"${gridTemplateAreas.join(' ')}" / ${sizes}`
-    })
-
     return {
       scrollRoot,
       computedStyle,
       shapeStyleComputed,
-      gridTemplateComputed,
     }
   },
 })
@@ -97,13 +85,11 @@ export default defineComponent({
 
 .va-navbar {
   display: grid;
-  grid-template: v-bind(gridTemplateComputed);
+  grid-template: "left center right" / 1fr auto 1fr;
   align-items: center;
   transition: var(--va-navbar-transition);
   position: var(--va-navbar-position);
-  height: var(--va-navbar-height);
-  padding-left: var(--va-navbar-padding-left);
-  padding-right: var(--va-navbar-padding-right);
+  padding: var(--va-navbar-padding-y) var(--va-navbar-padding-x);
   background-color: var(--va-primary);
   font-family: var(--va-font-family);
   top: 0;
@@ -114,9 +100,7 @@ export default defineComponent({
 
   &__left {
     display: flex;
-    flex-direction: row;
     grid-area: left;
-    justify-self: start;
 
     & > .va-navbar__item {
       margin-right: var(--va-navbar-item-margin-side);
@@ -134,8 +118,8 @@ export default defineComponent({
 
   &__center {
     display: flex;
+    justify-content: center;
     grid-area: center;
-    justify-self: center;
 
     & > .va-navbar__item {
       margin: 0 var(--va-navbar-item-margin);
@@ -155,7 +139,6 @@ export default defineComponent({
     flex-direction: row;
     justify-content: flex-end;
     grid-area: right;
-    justify-self: end;
 
     & > .va-navbar__item {
       margin-right: var(--va-navbar-item-margin-side);
@@ -189,7 +172,6 @@ export default defineComponent({
   @include media-breakpoint-down(sm) {
     display: flex;
     flex-direction: column;
-    justify-content: center;
     align-items: center;
     height: var(--va-navbar-mobile-height);
     padding: var(--va-navbar-sm-padding);
diff --git a/packages/ui/src/components/va-navbar/_variables.scss b/packages/ui/src/components/va-navbar/_variables.scss
index cecab508a9..d630dcbdd5 100644
--- a/packages/ui/src/components/va-navbar/_variables.scss
+++ b/packages/ui/src/components/va-navbar/_variables.scss
@@ -1,8 +1,8 @@
 .va-navbar {
   --va-navbar-mobile-height: 6.5rem;
   --va-navbar-height: 4.0625rem;
-  --va-navbar-padding-left: 1rem;
-  --va-navbar-padding-right: 1rem;
+  --va-navbar-padding-x: 1rem;
+  --va-navbar-padding-y: 1.2rem;
   --va-navbar-transition: transform 0.5s ease;
   --va-navbar-position: relative;
   --va-nav-z-index: calc(var(--va-z-index-teleport-overlay) - 100);
diff --git a/packages/ui/src/components/va-popover/VaPopover.demo.vue b/packages/ui/src/components/va-popover/VaPopover.demo.vue
index 1e990a54b1..5a6c65384f 100644
--- a/packages/ui/src/components/va-popover/VaPopover.demo.vue
+++ b/packages/ui/src/components/va-popover/VaPopover.demo.vue
@@ -11,21 +11,21 @@
           <td>
             <va-popover
               message="Placement Bottom"
-              class="mr-4"
+              class="mr-6"
             >
               <va-button>Bottom</va-button>
             </va-popover>
             <va-popover
               placement="top"
               message="Placement Top"
-              class="mr-4"
+              class="mr-6"
             >
               <va-button>Top</va-button>
             </va-popover>
             <va-popover
               placement="left"
               message="Placement Left"
-              class="mr-4"
+              class="mr-6"
             >
               <va-button>Left</va-button>
             </va-popover>
@@ -45,7 +45,7 @@
               placement="right"
               icon="error"
               message="Popover with icon"
-              class="mr-4"
+              class="mr-6"
             >
               <va-button>Hover me</va-button>
             </va-popover>
@@ -58,7 +58,7 @@
               placement="right"
               title="Popover title"
               message="Popover text"
-              class="mr-4"
+              class="mr-6"
             >
               <va-button>Hover me</va-button>
             </va-popover>
@@ -72,7 +72,7 @@
               title="Popover title"
               icon="error"
               message="Popover dummy text"
-              class="mr-4"
+              class="mr-6"
             >
               <va-button>Hover me</va-button>
             </va-popover>
@@ -85,7 +85,7 @@
               placement="right"
               message="Popover dummy text"
               color="warning"
-              class="mr-4"
+              class="mr-6"
             >
               <va-button color="warning">
                 Hover me
@@ -96,7 +96,7 @@
               placement="right"
               message="Popover dummy text"
               color="info"
-              class="mr-4"
+              class="mr-6"
             >
               <va-button color="info">
                 Hover me
@@ -107,7 +107,7 @@
               placement="right"
               message="Popover dummy text"
               color="danger"
-              class="mr-4"
+              class="mr-6"
             >
               <va-button color="danger">
                 Hover me
@@ -118,7 +118,7 @@
               placement="right"
               message="Popover dummy text"
               color="textPrimary"
-              class="mr-4"
+              class="mr-6"
             >
               <va-button color="textPrimary">
                 Hover me
@@ -129,7 +129,7 @@
               placement="right"
               message="Popover dummy text"
               color="secondary"
-              class="mr-4"
+              class="mr-6"
             >
               <va-button color="secondary">
                 Hover me
diff --git a/packages/ui/src/components/va-progress-bar/VaProgressBar.vue b/packages/ui/src/components/va-progress-bar/VaProgressBar.vue
index d740293e24..2011c69ff3 100644
--- a/packages/ui/src/components/va-progress-bar/VaProgressBar.vue
+++ b/packages/ui/src/components/va-progress-bar/VaProgressBar.vue
@@ -117,8 +117,8 @@ export default defineComponent({
 
       ariaAttributesComputed: computed(() => ({
         role: 'progressbar',
-        ariaLabel: t('progressState'),
-        ariaValuenow: !props.indeterminate ? props.modelValue : undefined,
+        'aria-label': t('progressState'),
+        'aria-valuenow': !props.indeterminate ? props.modelValue : undefined,
       })),
     }
   },
diff --git a/packages/ui/src/components/va-progress-circle/VaProgressCircle.vue b/packages/ui/src/components/va-progress-circle/VaProgressCircle.vue
index 41a0f88380..10b3d3bfa2 100644
--- a/packages/ui/src/components/va-progress-circle/VaProgressCircle.vue
+++ b/packages/ui/src/components/va-progress-circle/VaProgressCircle.vue
@@ -73,8 +73,8 @@ export default defineComponent({
       })),
       ariaAttributesComputed: computed(() => ({
         role: 'progressbar',
-        ariaLabel: t('progressState'),
-        ariaValuenow: !props.indeterminate ? props.modelValue : undefined,
+        'aria-label': t('progressState'),
+        'aria-valuenow': !props.indeterminate ? props.modelValue : undefined,
       })),
 
       colorComputed,
diff --git a/packages/ui/src/components/va-select/VaSelect.demo.vue b/packages/ui/src/components/va-select/VaSelect.demo.vue
index c3efed5715..3f563ae9fb 100644
--- a/packages/ui/src/components/va-select/VaSelect.demo.vue
+++ b/packages/ui/src/components/va-select/VaSelect.demo.vue
@@ -6,7 +6,7 @@
     >
       <va-select
         v-model="defaultSingleSelect.value"
-        class="mb-4"
+        class="mb-6"
         :options="defaultSingleSelect.options"
       />
       <p>Value: {{ defaultSingleSelect.value }}</p>
@@ -67,7 +67,7 @@
     >
       <va-select
         v-model="disabledOptions.value"
-        class="mb-4"
+        class="mb-6"
         :options="disabledOptions.options"
       />
       <p>Value: {{ disabledOptions.value }}</p>
@@ -78,7 +78,7 @@
     >
       <va-select
         v-model="defaultSingleSelect.value"
-        class="mb-4"
+        class="mb-6"
         :options="defaultSingleSelect.options"
       >
         <template v-slot:option="{ option, index, selectOption }">
@@ -98,7 +98,7 @@
     >
       <va-select
         v-model="withVirtualScroller.value"
-        class="mb-4"
+        class="mb-6"
         :options="withVirtualScroller.options"
         virtual-scroller
       />
@@ -110,34 +110,34 @@
     >
       <va-select
         v-model="defaultSingleSelect.value"
-        class="mb-4"
+        class="mb-6"
         label="Default (solid)"
         :options="defaultSingleSelect.options"
       />
       <va-select
         v-model="defaultSingleSelect.value"
-        class="mb-4"
+        class="mb-6"
         label="Outline"
         :options="defaultSingleSelect.options"
         outline
       />
       <va-select
         v-model="defaultSingleSelect.value"
-        class="mb-4"
+        class="mb-6"
         label="Bordered"
         :options="defaultSingleSelect.options"
         bordered
       />
       <va-select
         v-model="defaultSingleSelect.value"
-        class="mb-4"
+        class="mb-6"
         label="Default (solid) (Purple color)"
         color="#990099"
         :options="defaultSingleSelect.options"
       />
       <va-select
         v-model="defaultSingleSelect.value"
-        class="mb-4"
+        class="mb-6"
         label="Outline (Purple color)"
         :options="defaultSingleSelect.options"
         color="#990099"
@@ -145,7 +145,7 @@
       />
       <va-select
         v-model="defaultSingleSelect.value"
-        class="mb-4"
+        class="mb-6"
         label="Bordered (Purple color)"
         :options="defaultSingleSelect.options"
         color="#990099"
@@ -158,20 +158,20 @@
     >
       <va-select
         v-model="defaultSingleSelect.value"
-        class="mb-4"
+        class="mb-6"
         label="Default"
         :options="defaultSingleSelect.options"
       />
       <va-select
         v-model="defaultSingleSelect.value"
-        class="mb-4"
+        class="mb-6"
         label="Default, hide selected"
         :options="defaultSingleSelect.options"
         hide-selected
       />
       <va-select
         v-model="defaultSingleSelect.value"
-        class="mb-4"
+        class="mb-6"
         label="No options"
         :options="[]"
       />
@@ -189,14 +189,14 @@
     >
       <va-select
         v-model="defaultMultiSelect.value"
-        class="mb-4"
+        class="mb-6"
         label="Default"
         :options="defaultMultiSelect.options"
         multiple
       />
       <va-select
         v-model="defaultMultiSelect.value"
-        class="mb-4"
+        class="mb-6"
         label="Default, hide selected"
         :options="defaultMultiSelect.options"
         multiple
@@ -204,7 +204,7 @@
       />
       <va-select
         v-model="defaultMultiSelect.value"
-        class="mb-4"
+        class="mb-6"
         label="Max selections (3)"
         :options="defaultMultiSelect.options"
         multiple
@@ -212,7 +212,7 @@
       />
       <va-select
         v-model="defaultMultiSelect.value"
-        class="mb-4"
+        class="mb-6"
         label="Tags"
         :options="defaultMultiSelect.options"
         multiple
@@ -225,7 +225,7 @@
     >
       <va-select
         v-model="objectSingleSelectWithIcons.value"
-        class="mb-4"
+        class="mb-6"
         label="Options with icon"
         :options="objectSingleSelectWithIcons.options"
         text-by="text"
@@ -234,28 +234,28 @@
       <p>Value: {{ objectSingleSelectWithIcons.value }}</p>
       <va-select
         v-model="objectSingleSelect.value"
-        class="mb-4"
+        class="mb-6"
         label="Single select text by text (default)"
         :options="objectSingleSelect.options"
         text-by="text"
       />
       <va-select
         v-model="objectSingleSelect.value"
-        class="mb-4"
+        class="mb-6"
         label="Text by value"
         :options="objectSingleSelect.options"
         text-by="value"
       />
       <va-select
         v-model="objectSingleSelect.value"
-        class="mb-4"
+        class="mb-6"
         label="Track by text property"
         :options="objectSingleSelect.options"
         track-by="text"
       />
       <va-select
         v-model="objectSingleSelect.value"
-        class="mb-4"
+        class="mb-6"
         label="Track by text property (function)"
         :options="objectSingleSelect.options"
         track-by="text"
@@ -263,7 +263,7 @@
       <p>Value: {{ objectSingleSelect.value }}</p>
       <va-select
         v-model="objectMultiSelect.value"
-        class="mb-4"
+        class="mb-6"
         label="Multi select Text by value"
         :options="objectMultiSelect.options"
         text-by="value"
@@ -271,7 +271,7 @@
       />
       <va-select
         v-model="objectMultiSelect.value"
-        class="mb-4"
+        class="mb-6"
         label="Searchable multiselect text-by value"
         :options="objectMultiSelect.options"
         text-by="value"
@@ -281,7 +281,7 @@
       <p>Value: {{ objectMultiSelect.value }}</p>
       <va-select
         v-model="objectMultiSelectByValue.value"
-        class="mb-4"
+        class="mb-6"
         label="Multi select value by value"
         :options="objectMultiSelectByValue.options"
         text-by="value"
@@ -296,7 +296,7 @@
     >
       <va-select
         v-model="objectGrouped.value"
-        class="mb-4"
+        class="mb-6"
         :options="objectGrouped.options"
       />
 
@@ -307,53 +307,53 @@
     >
       <va-select
         v-model="defaultSingleSelect.value"
-        class="mb-4"
+        class="mb-6"
         label="With label"
         :options="defaultSingleSelect.options"
       />
       <va-select
         v-model="defaultSingleSelect.value"
-        class="mb-4"
+        class="mb-6"
         label="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,"
         placeholder="Long label"
         :options="defaultSingleSelect.options"
       />
       <va-select
         v-model="defaultSingleSelect.value"
-        class="mb-4"
+        class="mb-6"
         placeholder="With placeholder"
         :options="defaultSingleSelect.options"
       />
       <va-select
         v-model="defaultSingleSelect.value"
-        class="mb-4"
+        class="mb-6"
         label="Long placeholder"
         placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,"
         :options="defaultSingleSelect.options"
       />
       <va-select
         v-model="defaultSingleSelect.value"
-        class="mb-4"
+        class="mb-6"
         label="No options"
         :options="[]"
       />
       <va-select
         v-model="defaultSingleSelect.value"
-        class="mb-4"
+        class="mb-6"
         label="No options with custom text"
         :options="[]"
         no-options-text="Sorry, nothing to show :("
       />
       <va-select
         v-model="defaultSingleSelect.value"
-        class="mb-4"
+        class="mb-6"
         label="Clearable"
         :options="defaultSingleSelect.options"
         clearable
       />
       <va-select
         v-model="defaultSingleSelect.value"
-        class="mb-4"
+        class="mb-6"
         label="Clearable and custom clear icon"
         :options="defaultSingleSelect.options"
         clearable
@@ -361,14 +361,14 @@
       />
       <va-select
         v-model="defaultSingleSelect.value"
-        class="mb-4"
+        class="mb-6"
         label="Hint messages"
         :options="defaultSingleSelect.options"
         :messages="['Hint message 1', 'Hint message 2']"
       />
       <va-select
         v-model="defaultSingleSelect.value"
-        class="mb-4"
+        class="mb-6"
         label="Prepend slot"
         :options="defaultSingleSelect.options"
       >
@@ -378,7 +378,7 @@
       </va-select>
       <va-select
         v-model="defaultSingleSelect.value"
-        class="mb-4"
+        class="mb-6"
         label="Prepend inner slot"
         :options="defaultSingleSelect.options"
       >
@@ -388,7 +388,7 @@
       </va-select>
       <va-select
         v-model="defaultSingleSelect.value"
-        class="mb-4"
+        class="mb-6"
         label="Append inner slot"
         :options="defaultSingleSelect.options"
       >
@@ -398,7 +398,7 @@
       </va-select>
       <va-select
         v-model="defaultSingleSelect.value"
-        class="mb-4"
+        class="mb-6"
         label="Append slot"
         :options="defaultSingleSelect.options"
       >
@@ -408,7 +408,7 @@
       </va-select>
       <va-select
         v-model="defaultSingleSelect.value"
-        class="mb-4"
+        class="mb-6"
         label="All slots"
         :options="defaultSingleSelect.options"
         clearable
@@ -429,13 +429,13 @@
       </va-select>
       <va-select
         v-model="defaultSingleSelect.value"
-        class="mb-4"
+        class="mb-6"
         label="Content slot"
         :options="defaultSingleSelect.options"
       >
         <template #content="{ value }">
           <va-chip>{{ value || 'no value :(' }}</va-chip>
-          <span class="ml-4">
+          <span class="ml-6">
             Click on share ;)
             <va-icon
               name="share"
@@ -446,35 +446,35 @@
       </va-select>
       <va-select
         v-model="defaultSingleSelect.value"
-        class="mb-4"
+        class="mb-6"
         label="Custom list placement (top)"
         :options="defaultSingleSelect.options"
         placement="top"
       />
       <va-select
         v-model="defaultSingleSelect.value"
-        class="mb-4"
+        class="mb-6"
         label="Custom list placement (bottom)"
         :options="defaultSingleSelect.options"
         placement="bottom"
       />
       <va-select
         v-model="defaultSingleSelect.value"
-        class="mb-4"
+        class="mb-6"
         label="Custom list height (320px)"
         :options="defaultSingleSelect.options"
         max-height="320px"
       />
       <va-select
         v-model="defaultSingleSelect.value"
-        class="mb-4"
+        class="mb-6"
         label="Custom select width (50%)"
         :options="defaultSingleSelect.options"
         width="50%"
       />
       <va-select
         v-model="defaultSingleSelect.value"
-        class="mb-4"
+        class="mb-6"
         label="Required Mark"
         :options="defaultSingleSelect.options"
         required-mark
@@ -491,7 +491,7 @@
       />
       <va-select
         v-model="defaultSingleSelect.value"
-        class="mb-4"
+        class="mb-6"
         label="Readonly"
         placeholder="Try to type in ..."
         :options="defaultSingleSelect.options"
@@ -500,7 +500,7 @@
       />
       <va-select
         v-model="defaultSingleSelect.value"
-        class="mb-4"
+        class="mb-6"
         label="Disabled"
         placeholder="Try to focus ..."
         :options="defaultSingleSelect.options"
@@ -509,7 +509,7 @@
       />
       <va-select
         v-model="defaultSingleSelect.value"
-        class="mb-4"
+        class="mb-6"
         label="Loading"
         :options="defaultSingleSelect.options"
         loading
@@ -517,7 +517,7 @@
       />
       <va-select
         v-model="defaultSingleSelect.value"
-        class="mb-4"
+        class="mb-6"
         label="Error state"
         :options="defaultSingleSelect.options"
         error
@@ -525,7 +525,7 @@
       />
       <va-select
         v-model="defaultSingleSelect.value"
-        class="mb-4"
+        class="mb-6"
         label="Error state with messages"
         :options="defaultSingleSelect.options"
         error
@@ -534,7 +534,7 @@
       />
       <va-select
         v-model="defaultSingleSelect.value"
-        class="mb-4"
+        class="mb-6"
         label="Success state"
         :options="defaultSingleSelect.options"
         success
@@ -542,7 +542,7 @@
       />
       <va-select
         v-model="defaultSingleSelect.value"
-        class="mb-4"
+        class="mb-6"
         label="Success state with messages"
         :options="defaultSingleSelect.options"
         success
@@ -556,14 +556,14 @@
     >
       <va-select
         v-model="defaultSingleSelect.value"
-        class="mb-4"
+        class="mb-6"
         label="Searchable single select"
         :options="defaultSingleSelect.options"
         searchable
       />
       <va-select
         v-model="defaultMultiSelect.value"
-        class="mb-4"
+        class="mb-6"
         label="Searchable multi select"
         :options="defaultMultiSelect.options"
         multiple
@@ -571,7 +571,7 @@
       />
        <va-select
         v-model="defaultSingleSelect.value"
-        class="mb-4"
+        class="mb-6"
         label="Searchable changed text"
         :options="defaultSingleSelect.options"
         searchable
@@ -584,7 +584,7 @@
     >
       <va-select
         v-model="allowCreateSelect.value"
-        class="mb-4"
+        class="mb-6"
         label="'true' mode and single select"
         :options="allowCreateSelect.options"
         @create-new="addNewOption"
@@ -593,7 +593,7 @@
       />
       <va-select
         v-model="allowCreateSelect.allowUniqueValue"
-        class="mb-4"
+        class="mb-6"
         label="'unique' mode and single select"
         :options="allowCreateSelect.options"
         @create-new="addNewOption"
@@ -602,7 +602,7 @@
       />
       <va-select
         v-model="allowCreateSelect.valueMultiple"
-        class="mb-4"
+        class="mb-6"
         label="'true' mode and multi select"
         :options="allowCreateSelect.options"
         @create-new="addNewOption"
@@ -613,7 +613,7 @@
       <va-select
         v-model="allowCreateSelect.allowUniqueValueMultiple"
         label="'unique' mode and multi select"
-        class="mb-4"
+        class="mb-6"
         :options="allowCreateSelect.options"
         @create-new="addNewOption"
         track-by="id"
@@ -622,7 +622,7 @@
       />
       <va-select
         v-model="allowCreateSelect.valueMultipleMax"
-        class="mb-4"
+        class="mb-6"
         label="'true' mode and multi select, Max 3 selections"
         :options="allowCreateSelect.options"
         @create-new="addNewOption"
@@ -660,7 +660,7 @@
     >
       <va-select
         v-model="validationSelect.value"
-        class="mb-4"
+        class="mb-6"
         label="At least 1 option should be selected"
         :options="validationSelect.options"
         :rules="validationSelect.rules.required"
@@ -668,7 +668,7 @@
       />
       <va-select
         v-model="validationSelect.multipleValue"
-        class="mb-4"
+        class="mb-6"
         label="Exactly 2 options should be selected"
         :options="validationSelect.options"
         :rules="validationSelect.rules.twoOptions"
diff --git a/packages/ui/src/components/va-slider/VaSlider.vue b/packages/ui/src/components/va-slider/VaSlider.vue
index 52f2882d44..d1901efb30 100644
--- a/packages/ui/src/components/va-slider/VaSlider.vue
+++ b/packages/ui/src/components/va-slider/VaSlider.vue
@@ -695,8 +695,8 @@ export default defineComponent({
       'aria-valuemax': props.max,
       'aria-label': !slots.label && !props.label ? `current slider value is ${String(props.modelValue)}` : undefined,
       'aria-labelledby': slots.label || props.label ? ariaLabelIdComputed.value : undefined,
-      ariaOrientation: props.vertical ? 'vertical' : 'horizontal',
-      ariaDisabled: props.disabled,
+      'aria-orientation': props.vertical ? 'vertical' : 'horizontal',
+      'aria-disabled': props.disabled,
       'aria-readonly': props.readonly,
       'aria-valuenow': !Array.isArray(props.modelValue) ? props.modelValue : undefined,
       'aria-valuetext': Array.isArray(props.modelValue) ? String(props.modelValue) : undefined,
diff --git a/packages/ui/src/components/va-switch/VaSwitch.vue b/packages/ui/src/components/va-switch/VaSwitch.vue
index 787548896d..28372db0a5 100644
--- a/packages/ui/src/components/va-switch/VaSwitch.vue
+++ b/packages/ui/src/components/va-switch/VaSwitch.vue
@@ -206,9 +206,9 @@ export default defineComponent({
       name: props.name || undefined,
       disabled: props.disabled,
       readonly: props.readonly,
-      ariaDisabled: props.disabled,
-      ariaReadOnly: props.readonly,
-      ariaChecked: !!props.modelValue,
+      'aria-disabled': props.disabled,
+      'aria-readonly': props.readonly,
+      'aria-checked': !!props.modelValue,
       'aria-labelledby': computedLabel.value || slots.default ? ariaLabelIdComputed.value : undefined,
       ...validationAriaAttributes.value,
     }))
diff --git a/packages/ui/src/components/va-time-input/VaTimeInput.vue b/packages/ui/src/components/va-time-input/VaTimeInput.vue
index 8d90ed63ff..aa6e89139a 100644
--- a/packages/ui/src/components/va-time-input/VaTimeInput.vue
+++ b/packages/ui/src/components/va-time-input/VaTimeInput.vue
@@ -304,7 +304,7 @@ export default defineComponent({
 
     const iconProps = computed(() => ({
       role: 'button',
-      ariaHidden: false,
+      'aria-hidden': false,
       size: 'small',
       name: props.icon,
       color: props.color,
@@ -318,10 +318,10 @@ export default defineComponent({
       disabled: props.disabled,
       tabindex: props.disabled ? -1 : 0,
       value: valueText.value,
-      ariaLabel: props.label || t('selectedTime'),
-      ariaRequired: props.requiredMark,
-      ariaDisabled: props.disabled,
-      ariaReadOnly: props.readonly,
+      'aria-label': props.label || t('selectedTime'),
+      'aria-required': props.requiredMark,
+      'aria-disabled': props.disabled,
+      'aria-readonly': props.readonly,
       ...validationAriaAttributes.value,
       ...omit(attrs, ['class', 'style']),
     }))
diff --git a/packages/ui/src/components/va-time-picker/VaTimePicker.demo.vue b/packages/ui/src/components/va-time-picker/VaTimePicker.demo.vue
index f2099e48e2..cc798b8f67 100644
--- a/packages/ui/src/components/va-time-picker/VaTimePicker.demo.vue
+++ b/packages/ui/src/components/va-time-picker/VaTimePicker.demo.vue
@@ -37,7 +37,7 @@
     </VbCard>
 
     <VbCard title="value">
-      <div class="d-flex justify-space-around">
+      <div class="d-flex justify-around">
         <span>23:05:53</span>
         <span>{{ selectedTime }}</span>
       </div>
@@ -73,7 +73,7 @@
     </VbCard>
 
     <VbCard title="Visible cells count">
-      <div class="d-flex justify-space-around">
+      <div class="d-flex justify-around">
         <span>Show 2</span>
         <span>Show 5</span>
         <span>Show 12</span>
diff --git a/packages/ui/src/components/va-tree-view/VaTreeViewKeyboardNavigation.demo.vue b/packages/ui/src/components/va-tree-view/VaTreeViewKeyboardNavigation.demo.vue
new file mode 100644
index 0000000000..b0de14b05b
--- /dev/null
+++ b/packages/ui/src/components/va-tree-view/VaTreeViewKeyboardNavigation.demo.vue
@@ -0,0 +1,188 @@
+<template>
+  <VbDemo>
+    <VbCard title="Flat-like navigation">
+      <va-tree-view :nodes="flat" />
+    </VbCard>
+    <VbCard title="Stair-like navigation">
+      <va-tree-view :nodes="stairs" />
+    </VbCard>
+    <VbCard title="Triangle-like navigation">
+      <va-tree-view :nodes="triangle" />
+    </VbCard>
+    <VbCard title="Waves-like navigation">
+      <va-tree-view :nodes="waves" />
+    </VbCard>
+    <VbCard title="Selection">
+      Selected node: {{selectedNode}}
+      <br />
+      <va-tree-view
+        :nodes="triangle"
+        @update:selected="onSelectNode"
+        expand-all
+      />
+    </VbCard>
+    <VbCard title="Checkboxes selection">
+      Checked nodes: {{checkedNodes}}
+      <br />
+      <va-tree-view
+        v-model:checked="checkedNodes"
+        :nodes="triangle"
+        selectable
+        expand-all
+      />
+    </VbCard>
+  </VbDemo>
+</template>
+
+<script>
+import VaTreeView from './VaTreeView.vue'
+
+export default {
+  name: 'VaTreeViewKeyboardNavigation.demo',
+
+  components: {
+    VaTreeView,
+  },
+
+  data: () => ({
+    selectedNode: null,
+    checkedNodes: [],
+    flat: [
+      {
+        id: 1,
+        label: 'Item',
+      },
+      {
+        id: 2,
+        label: 'Item',
+      },
+      {
+        id: 3,
+        label: 'Item',
+      },
+    ],
+    stairs: [
+      {
+        id: 1,
+        label: 'Item',
+        children: [
+          {
+            id: 2,
+            label: 'Item',
+            children: [
+              {
+                id: 3,
+                label: 'Item',
+                children: [
+                  {
+                    id: 4,
+                    label: 'Item',
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+      {
+        id: 5,
+        label: 'Item',
+        children: [
+          {
+            id: 6,
+            label: 'Item',
+            children: [
+              {
+                id: 7,
+                label: 'Item',
+                children: [
+                  {
+                    id: 8,
+                    label: 'Item',
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ],
+    triangle: [
+      {
+        id: 1,
+        label: 'Item',
+        children: [
+          {
+            id: 2,
+            label: 'Item',
+            children: [
+              {
+                id: 3,
+                label: 'Item',
+              },
+              {
+                id: 4,
+                label: 'Item',
+              },
+            ],
+          },
+          {
+            id: 5,
+            label: 'Item',
+          },
+        ],
+      },
+      {
+        id: 6,
+        label: 'Item',
+      },
+    ],
+    waves: [
+      {
+        id: 1,
+        label: 'Item',
+      },
+      {
+        id: 2,
+        label: 'Item',
+        children: [
+          {
+            id: 3,
+            label: 'Item',
+          },
+        ],
+      },
+      {
+        id: 4,
+        label: 'Item',
+        children: [
+          {
+            id: 5,
+            label: 'Item',
+          },
+        ],
+      },
+      {
+        id: 6,
+        label: 'Item',
+        children: [
+          {
+            id: 6,
+            label: 'Item',
+          },
+        ],
+      },
+      {
+        id: 7,
+        label: 'Item',
+      },
+    ],
+  }),
+
+  methods: {
+    onSelectNode (node) {
+      this.selectedNode = node ? `${node.id} ${node.label}` : null
+    },
+  },
+}
+</script>
diff --git a/packages/ui/src/components/va-tree-view/components/VaTreeNode/VaTreeNode.vue b/packages/ui/src/components/va-tree-view/components/VaTreeNode/VaTreeNode.vue
index 593cf293ab..8892fd873f 100644
--- a/packages/ui/src/components/va-tree-view/components/VaTreeNode/VaTreeNode.vue
+++ b/packages/ui/src/components/va-tree-view/components/VaTreeNode/VaTreeNode.vue
@@ -2,22 +2,24 @@
   <div
     class="va-tree-node"
     :class="treeNodeClassComputed"
-    role="treeitem"
-    :aria-expanded="$props.node.expanded"
+    :role="roleComputed"
+    :aria-expanded="isExpandedComputed"
     :aria-disabled="$props.node.disabled"
     :aria-checked="!!$props.node.checked"
     :tabindex="tabIndexComputed"
-    @keydown.right.stop.prevent="handleToggleNode($event, $props.node)"
-    @keydown.left.stop.prevent="handleToggleNode($event, $props.node)"
+    @keydown.up.stop.prevent="handleKeyboardNavigation($event, $props.node)"
+    @keydown.right.stop.prevent="handleKeyboardNavigation($event, $props.node)"
+    @keydown.down.stop.prevent="handleKeyboardNavigation($event, $props.node)"
+    @keydown.left.stop.prevent="handleKeyboardNavigation($event, $props.node)"
+    @keydown.space.stop.prevent="handleKeyboardNavigation($event, $props.node)"
+    @keydown.esc.stop.prevent="handleKeyboardNavigation($event, $props.node)"
   >
-    <div
-      class="va-tree-node-root"
-      @click.stop="toggleNode($props.node)"
-    >
-      <div class="va-tree-node-content" :class="indentClassComputed">
+    <div class="va-tree-node-root">
+      <div class="va-tree-node-content" :class="indentClassComputed" @click="onNodeClick('node')">
         <div
           v-if="$props.node.hasChildren"
           class="va-tree-node-content__item va-tree-node-content__item--leaf"
+          @click.stop="onNodeClick('leaf')"
         >
           <slot name="icon-toggle" v-bind="$props.node">
             <va-icon
@@ -53,7 +55,6 @@
     </div>
     <div
       v-show="$props.node.hasChildren"
-      role="group"
       :aria-hidden="!$props.node.expanded"
       class="va-tree-node-children"
       :class="expandedClassComputed"
@@ -97,24 +98,28 @@ export default defineComponent({
     const {
       iconBy,
       selectable,
+      expandNodeBy,
       colorComputed,
+      selectedNodeComputed,
       getText,
       getTrackBy,
       toggleNode,
-      getNodeProperty,
       toggleCheckbox,
+      getNodeProperty,
+      handleKeyboardNavigation,
     } = useStrictInject(TreeViewKey, INJECTION_ERROR_MESSAGE)
 
     const labelComputed = computed(() => getText(props.node) || '')
-    const isExpandedComputed = computed(() => !!props.node.expanded)
+    const isExpandedComputed = computed(() => props.node.hasChildren ? !!props.node.expanded : undefined)
     const iconComputed = computed(() => getNodeProperty(props.node, iconBy))
+    const roleComputed = computed(() => props.node.hasChildren ? 'group' : 'treeitem')
 
     const treeNodeClassComputed = useBem('va-tree-node', () => ({
       disabled: !!props.node.disabled,
     }))
 
     const expandedClassComputed = useBem('va-tree-node-children', () => ({
-      expanded: isExpandedComputed.value,
+      expanded: !!isExpandedComputed.value,
     }))
 
     const indentClassComputed = useBem('va-tree-node-content', () => ({
@@ -123,23 +128,28 @@ export default defineComponent({
 
     const tabIndexComputed = computed(() => props.node.disabled ? -1 : 0)
 
-    const handleToggleNode = (event: Event, node: TreeNode) => {
-      if (node.expanded) {
-        (event.target as HTMLElement)?.blur()
-      } else {
-        toggleNode(node)
+    const onNodeClick = (type: typeof expandNodeBy) => {
+      const nodeType = expandNodeBy === 'node' && type === 'leaf' ? 'node' : type
+
+      if (expandNodeBy === nodeType) {
+        toggleNode(props.node)
       }
+
+      selectedNodeComputed.value = props.node
     }
 
     return {
       selectable,
+      expandNodeBy,
 
       getText,
       getTrackBy,
       toggleNode,
-      handleToggleNode,
+      onNodeClick,
+      handleKeyboardNavigation,
       toggleCheckbox,
 
+      roleComputed,
       iconComputed,
       labelComputed,
       colorComputed,
diff --git a/packages/ui/src/components/va-tree-view/hooks/useTreeHelpers.ts b/packages/ui/src/components/va-tree-view/hooks/useTreeHelpers.ts
index 5350e30c87..e8eb102844 100644
--- a/packages/ui/src/components/va-tree-view/hooks/useTreeHelpers.ts
+++ b/packages/ui/src/components/va-tree-view/hooks/useTreeHelpers.ts
@@ -58,6 +58,10 @@ export const useTreeViewProps = {
     type: Array as PropType<(string | number | TreeNode)[]>,
     default: [],
   },
+  expandNodeBy: {
+    type: String as PropType<'leaf' | 'node'>,
+    default: 'leaf',
+  },
   filter: {
     type: String,
     default: '',
@@ -76,7 +80,7 @@ export const useTreeViewProps = {
   },
 }
 
-export const useTreeViewEmits = ['update:modelValue', 'update:checked', 'update:expanded']
+export const useTreeViewEmits = ['update:modelValue', 'update:checked', 'update:expanded', 'update:selected']
 
 export const useTreeHelpers = (props: ExtractPropTypes<typeof useTreeViewProps>) => {
   const isStringOrNumber = (node: TreeNode): node is any => {
diff --git a/packages/ui/src/components/va-tree-view/hooks/useTreeKeyboardNavigation.ts b/packages/ui/src/components/va-tree-view/hooks/useTreeKeyboardNavigation.ts
new file mode 100644
index 0000000000..69910ddada
--- /dev/null
+++ b/packages/ui/src/components/va-tree-view/hooks/useTreeKeyboardNavigation.ts
@@ -0,0 +1,170 @@
+import { ExtractPropTypes } from 'vue'
+
+import type { TreeNode, TreeView, TreeViewEmitsFunc } from '../types'
+import { useTreeViewProps } from './useTreeHelpers'
+
+type TreeNodeElement = HTMLElement | null
+type UseTreeKeyboardNavigationMethods = Pick<TreeView, 'toggleNode' | 'toggleCheckbox'> & {
+  emit: TreeViewEmitsFunc,
+}
+
+const useTreeKeyboardNavigation = (
+  props: ExtractPropTypes<typeof useTreeViewProps>,
+  methods: UseTreeKeyboardNavigationMethods,
+) => {
+  const { emit, toggleNode, toggleCheckbox } = methods
+  const isElementExpanded = (currentElement: TreeNodeElement): boolean =>
+    currentElement?.getAttribute('aria-expanded') === 'true'
+
+  const getParentElement = (currentElement: TreeNodeElement): TreeNodeElement =>
+    currentElement?.parentElement?.closest('.va-tree-node') || null
+
+  const getPreviousElement = (currentElement: TreeNodeElement): TreeNodeElement =>
+    currentElement?.previousElementSibling as TreeNodeElement
+
+  const findPreviousElement = (currentElement: TreeNodeElement): TreeNodeElement => {
+    if (!currentElement) {
+      return null
+    }
+
+    let previousElement = getPreviousElement(currentElement)
+    let lastChildElement = isElementExpanded(previousElement) && getLastChildElement(previousElement)
+
+    if (lastChildElement) {
+      do {
+        if (isElementExpanded(lastChildElement)) {
+          lastChildElement = getLastChildElement(lastChildElement)
+
+          if (lastChildElement) {
+            continue
+          } else {
+            break
+          }
+        } else {
+          previousElement = lastChildElement
+          break
+        }
+      } while (true)
+    }
+
+    if (!previousElement) {
+      return getParentElement(currentElement)
+    }
+
+    return previousElement
+  }
+
+  const getNextElement = (currentElement: TreeNodeElement): TreeNodeElement =>
+    currentElement?.nextElementSibling as TreeNodeElement
+
+  const findNextElement = (currentElement: TreeNodeElement): TreeNodeElement => {
+    if (!currentElement) {
+      return null
+    }
+
+    let nextElement = getNextElement(currentElement)
+    const isCurrentExpanded = isElementExpanded(currentElement)
+
+    if (!nextElement) {
+      let parentElement = getParentElement(currentElement)
+
+      do {
+        if (!getNextElement(parentElement)) {
+          parentElement = getParentElement(parentElement)
+
+          if (!parentElement) {
+            break
+          } else {
+            continue
+          }
+        } else {
+          nextElement = getNextElement(parentElement)
+          break
+        }
+      } while (true)
+    }
+
+    if (isCurrentExpanded) {
+      return getFirstChildElement(currentElement)
+    }
+
+    return nextElement
+  }
+
+  const getFirstChildElement = (currentElement: TreeNodeElement): TreeNodeElement => {
+    return (currentElement?.querySelector('.va-tree-node-children')?.firstElementChild || null) as TreeNodeElement
+  }
+
+  const getLastChildElement = (currentElement: TreeNodeElement): TreeNodeElement => {
+    return (currentElement?.querySelector('.va-tree-node-children')?.lastElementChild || null) as TreeNodeElement
+  }
+
+  const onHorizontalMove = (currentElement: TreeNodeElement, dir: 'left' | 'right', node: TreeNode) => {
+    const isCurrentElementExpanded = isElementExpanded(currentElement)
+
+    if (dir === 'left') {
+      if (isCurrentElementExpanded) {
+        toggleNode(node)
+      } else {
+        getParentElement(currentElement)?.focus()
+      }
+    } else {
+      if (!isCurrentElementExpanded) {
+        toggleNode(node)
+      } else {
+        getFirstChildElement(currentElement)?.focus()
+      }
+    }
+  }
+
+  const onVerticalMove = (currentElement: HTMLElement, dir: 'up' | 'down') => {
+    if (dir === 'up') {
+      findPreviousElement(currentElement)?.focus()
+    } else {
+      findNextElement(currentElement)?.focus()
+    }
+  }
+
+  const handleKeyboardNavigation = (event: KeyboardEvent, node: TreeNode) => {
+    const currentElement = event.target as HTMLElement
+
+    switch (event.code) {
+      case 'ArrowUp':
+        onVerticalMove(currentElement, 'up')
+        break
+      case 'ArrowRight':
+        onHorizontalMove(currentElement, 'right', node)
+        break
+      case 'ArrowDown':
+        onVerticalMove(currentElement, 'down')
+        break
+      case 'ArrowLeft':
+        onHorizontalMove(currentElement, 'left', node)
+        break
+      case 'Space':
+        if (props.selectable) {
+          const state = typeof node.checked !== 'undefined' ? !node.checked : null
+
+          toggleCheckbox(node, state)
+        } else {
+          emit('update:selected', node)
+        }
+
+        break
+      case 'Escape':
+        if (!props.selectable) {
+          emit('update:selected', null)
+        }
+
+        currentElement.blur()
+
+        break
+      default:
+        currentElement.blur()
+    }
+  }
+
+  return { handleKeyboardNavigation }
+}
+
+export default useTreeKeyboardNavigation
diff --git a/packages/ui/src/components/va-tree-view/hooks/useTreeView.ts b/packages/ui/src/components/va-tree-view/hooks/useTreeView.ts
index 4c33c77417..b86142caaf 100644
--- a/packages/ui/src/components/va-tree-view/hooks/useTreeView.ts
+++ b/packages/ui/src/components/va-tree-view/hooks/useTreeView.ts
@@ -1,4 +1,5 @@
 import {
+  ref,
   toRefs,
   provide,
   computed,
@@ -9,9 +10,10 @@ import {
 
 import { useColors, useStateful } from '../../../composables'
 
-import type { TreeNode, TreeViewFilterMethod } from '../types'
+import type { TreeNode, TreeViewFilterMethod, TreeViewEmitsFunc } from '../types'
 import { useTreeHelpers, useTreeViewProps } from './useTreeHelpers'
 import { TreeViewKey } from '../types'
+import useTreeKeyboardNavigation from './useTreeKeyboardNavigation'
 
 type CreateNodeProps = {
   node: TreeNode
@@ -21,7 +23,6 @@ type CreateNodeProps = {
 }
 
 type CreateNodeFunc = (props: CreateNodeProps) => TreeNode
-type TreeViewEmitsFunc = (event: string, newValues: unknown) => void
 type TreeBuilderFunc = (nodes: TreeNode[], level?: number) => TreeNode[]
 type TypeModelValue = (string | number | TreeNode)[]
 
@@ -50,6 +51,19 @@ const useTreeView: UseTreeViewFunc = (props, emit) => {
   const { valueComputed: expandedList } = useStateful(props, emit, 'expanded')
   const { valueComputed: checkedList } = useStateful(props, emit, 'checked')
 
+  const selectedNode = ref()
+  const selectedNodeComputed: WritableComputedRef<string | number | Record<string, unknown>> = computed({
+    get: () => selectedNode.value,
+    set: (node: TreeNode) => {
+      const value = getValue(node)
+
+      if (selectedNode.value !== value) {
+        selectedNode.value = value
+        emit('update:selected', node)
+      }
+    },
+  })
+
   const updateModel = (model: WritableComputedRef<TypeModelValue>, values: TypeModelValue, state: boolean) => {
     if (state) {
       model.value = model.value.concat(values)
@@ -147,15 +161,21 @@ const useTreeView: UseTreeViewFunc = (props, emit) => {
     return node.matchesFilter ? node : false
   })
 
+  const { handleKeyboardNavigation } = useTreeKeyboardNavigation(props, { emit, toggleCheckbox, toggleNode })
+
   provide(TreeViewKey, {
+    selectedNodeComputed,
     colorComputed,
     iconBy: props.iconBy,
     selectable: props.selectable,
+    expandNodeBy: props.expandNodeBy,
     getText,
+    getValue,
     getTrackBy,
     toggleNode,
     toggleCheckbox,
     getNodeProperty,
+    handleKeyboardNavigation,
   })
 
   const treeItems = computed(() => buildTree(nodes.value))
diff --git a/packages/ui/src/components/va-tree-view/types.ts b/packages/ui/src/components/va-tree-view/types.ts
index 4c60b70b3e..ab548501df 100644
--- a/packages/ui/src/components/va-tree-view/types.ts
+++ b/packages/ui/src/components/va-tree-view/types.ts
@@ -1,4 +1,5 @@
-import { ComputedRef, InjectionKey } from 'vue'
+import { ComputedRef, InjectionKey, WritableComputedRef } from 'vue'
+export type TreeViewEmitsFunc = (event: string, newValues: unknown) => void
 
 export interface TreeNode {
   id: number | string
@@ -20,15 +21,16 @@ export type TreeViewFilterMethod = (node: TreeNode, filter: string, textBy: Tree
 export interface TreeView {
   selectable: boolean
   iconBy: TreeViewPropKey
+  expandNodeBy: 'leaf' | 'node'
   colorComputed: ComputedRef<string>
+  selectedNodeComputed: WritableComputedRef<string | number | Record<string, unknown>>
   getText: (node: TreeNode) => string
+  getValue: (node: TreeNode) => string
   toggleNode: (node: TreeNode) => void
   getTrackBy: (node: TreeNode) => string
   getNodeProperty: (node: TreeNode, key: TreeViewPropKey) => any
   toggleCheckbox: (node: TreeNode, state: boolean | null) => void
+  handleKeyboardNavigation: (event: KeyboardEvent, node: TreeNode) => void
 }
 
-// TODO: Implement in future versions the update:selected emit
-export type TreeViewEmitsList = 'update:selected' | 'update:checked' | 'update:expanded'
-
 export const TreeViewKey = Symbol('TreeView') as InjectionKey<TreeView>
diff --git a/packages/ui/src/components/va-virtual-scroller/VaVirtualScroller.demo.vue b/packages/ui/src/components/va-virtual-scroller/VaVirtualScroller.demo.vue
index a5d7a6f479..84d34b5aa4 100644
--- a/packages/ui/src/components/va-virtual-scroller/VaVirtualScroller.demo.vue
+++ b/packages/ui/src/components/va-virtual-scroller/VaVirtualScroller.demo.vue
@@ -71,7 +71,7 @@
         :wrapper-size="200"
         v-slot="{item, index}"
       >
-        <div :class="index % 2 ? 'pb-1' : 'pb-4'">
+        <div :class="index % 2 ? 'pb-1' : 'pb-6'">
           <va-button :size="index % 2 ? 'small' : 'medium'">{{ item.value }}</va-button>
         </div>
       </va-virtual-scroller>
diff --git a/packages/ui/src/services/color/ColorCSSVariablesUpdater.demo.vue b/packages/ui/src/services/color/ColorCSSVariablesUpdater.demo.vue
index 3cfc0335a2..83c83cce31 100644
--- a/packages/ui/src/services/color/ColorCSSVariablesUpdater.demo.vue
+++ b/packages/ui/src/services/color/ColorCSSVariablesUpdater.demo.vue
@@ -1,7 +1,7 @@
 <template>
   <VbDemo>
     <VbCard title="Update CSS Variable">
-      <div class="mb-4">
+      <div class="mb-6">
         <a class="title title--va-danger">
           This is title danger color
         </a>
diff --git a/packages/ui/src/styles/global/color-themes.demo.vue b/packages/ui/src/styles/global/color-themes.demo.vue
index c8ba4637da..f9ec7446a2 100644
--- a/packages/ui/src/styles/global/color-themes.demo.vue
+++ b/packages/ui/src/styles/global/color-themes.demo.vue
@@ -2,13 +2,13 @@
   <VbDemo>
     <VbCard title="All of these share `info` theme">
       <va-button
-        class="mb-5"
+        class="mb-8"
         color="info"
       >
         Default Button
       </va-button>
       <va-alert
-        class="mb-5"
+        class="mb-8"
         color="info"
       >
         <va-badge
@@ -18,12 +18,12 @@
         You successfully read this important alert message.
       </va-alert>
       <va-progress-bar
-        class="mb-5"
+        class="mb-8"
         indeterminate
         color="info"
       />
       <va-slider
-        class="mb-5"
+        class="mb-8"
         :modelValue="60"
         value-visible
         label="Label"
@@ -33,7 +33,7 @@
     </VbCard>
     <VbCard style="position: relative;">
       <va-rating
-        class="mb-5"
+        class="mb-8"
         color="info"
         :modelValue="3"
       >
diff --git a/packages/ui/src/styles/grid/_grid-global-styles.scss b/packages/ui/src/styles/grid/_grid-global-styles.scss
index ec92e8851e..3d2b5fa8bc 100644
--- a/packages/ui/src/styles/grid/_grid-global-styles.scss
+++ b/packages/ui/src/styles/grid/_grid-global-styles.scss
@@ -116,13 +116,13 @@
     }
   }
 
-  &-nowrap {
-    flex-wrap: nowrap;
-  }
-
-  &-wrap {
-    flex-wrap: wrap;
-  }
+  //&-nowrap {
+  //  flex-wrap: nowrap;
+  //}
+  //
+  //&-wrap {
+  //  flex-wrap: wrap;
+  //}
 }
 
 .align {
@@ -143,6 +143,7 @@
   }
 }
 
+// TODO: remove in 1.6.0, already changed to Tailwind CSS, delete /styles/grid/examples/AlignSelf.vue
 .align-self {
   &-start {
     align-self: flex-start;
@@ -161,6 +162,7 @@
   }
 }
 
+// TODO: remove in 1.6.0, already changed to Tailwind CSS, delete /styles/grid/examples/AlignContent.vue
 .align-content {
   &-start {
     align-content: flex-start;
@@ -183,6 +185,7 @@
   }
 }
 
+// TODO: remove in 1.6.0, already changed to Tailwind CSS
 .justify {
   &-start {
     justify-content: flex-start;
@@ -209,6 +212,7 @@
   }
 }
 
+// TODO: remove in 1.6.0, already changed to Tailwind CSS
 .justify-self {
   &-start {
     justify-self: flex-start;
@@ -227,27 +231,24 @@
   }
 }
 
-.flex-direction {
-  &-row {
-    flex-direction: row;
-  }
-
-  &-row-reverse {
-    flex-direction: row-reverse;
-  }
-
-  &-column {
-    flex-direction: column;
-  }
-
-  &-column-reverse {
-    flex-direction: column-reverse;
-  }
-}
-
-.spacer {
-  @include va-spacer();
-}
+// TODO: remove in 1.6.0
+//.flex-direction {
+//&-row {
+//  flex-direction: row;
+//}
+//
+//&-row-reverse {
+//  flex-direction: row-reverse;
+//}
+//
+//&-column {
+//  flex-direction: column;
+//}
+//
+//&-column-reverse {
+//  flex-direction: column-reverse;
+//}
+//}
 
 .grow {
   @include va-grow();
@@ -284,14 +285,6 @@
   display: flex !important;
 }
 
-.d-inline-flex {
-  display: inline-flex !important;
-}
-
-.no-wrap {
-  @include va-no-wrap();
-}
-
 .ellipsis {
   @include va-ellipsis();
 }
diff --git a/packages/ui/src/styles/grid/_grid-mixins.scss b/packages/ui/src/styles/grid/_grid-mixins.scss
index f65a1c277d..9a79f1eba6 100644
--- a/packages/ui/src/styles/grid/_grid-mixins.scss
+++ b/packages/ui/src/styles/grid/_grid-mixins.scss
@@ -89,10 +89,6 @@
 
 // ----------------- Helpers ----------------------
 
-@mixin va-spacer {
-  flex-grow: 1 !important;
-}
-
 @mixin va-grow {
   flex-grow: 1 !important;
   flex-shrink: 0 !important;
@@ -103,10 +99,6 @@
   flex-shrink: 1 !important;
 }
 
-@mixin va-no-wrap {
-  white-space: nowrap;
-}
-
 @mixin va-ellipsis {
   overflow: hidden;
   text-overflow: ellipsis;
diff --git a/packages/ui/src/styles/grid/_grid-spacing.scss b/packages/ui/src/styles/grid/_grid-spacing.scss
index 0be561f31e..018e1727d5 100644
--- a/packages/ui/src/styles/grid/_grid-spacing.scss
+++ b/packages/ui/src/styles/grid/_grid-spacing.scss
@@ -1,57 +1,58 @@
 @import "grid-variables";
 
+// TODO: remove in 1.6.0
 // spacings around target block
-@each $prop, $abbrev in (margin: m, padding: p) {
-  @each $level, $spacer in $spacers {
-    .#{$abbrev}a-#{$level},
-    .#{$abbrev}y-#{$level},
-    .#{$abbrev}t-#{$level} {
-      #{$prop}-top: $spacer !important;
-    }
-
-    .#{$abbrev}a-#{$level},
-    .#{$abbrev}y-#{$level},
-    .#{$abbrev}b-#{$level} {
-      #{$prop}-bottom: $spacer !important;
-    }
-
-    .#{$abbrev}a-#{$level},
-    .#{$abbrev}x-#{$level},
-    .#{$abbrev}r-#{$level} {
-      #{$prop}-right: $spacer !important;
-    }
-
-    .#{$abbrev}a-#{$level},
-    .#{$abbrev}x-#{$level},
-    .#{$abbrev}l-#{$level} {
-      #{$prop}-left: $spacer !important;
-    }
-  }
-
-  .#{$abbrev}t-auto,
-  .#{$abbrev}y-auto,
-  .#{$abbrev}a-auto {
-    #{$prop}-top: auto !important;
-  }
-
-  .#{$abbrev}r-auto,
-  .#{$abbrev}x-auto,
-  .#{$abbrev}a-auto {
-    #{$prop}-right: auto !important;
-  }
-
-  .#{$abbrev}b-auto,
-  .#{$abbrev}y-auto,
-  .#{$abbrev}a-auto {
-    #{$prop}-bottom: auto !important;
-  }
-
-  .#{$abbrev}l-auto,
-  .#{$abbrev}x-auto,
-  .#{$abbrev}a-auto {
-    #{$prop}-left: auto !important;
-  }
-}
+//@each $prop, $abbrev in (margin: m, padding: p) {
+//  @each $level, $spacer in $spacers {
+//    .#{$abbrev}a-#{$level},
+//    .#{$abbrev}y-#{$level},
+//    .#{$abbrev}t-#{$level} {
+//      #{$prop}-top: $spacer !important;
+//    }
+//
+//    .#{$abbrev}a-#{$level},
+//    .#{$abbrev}y-#{$level},
+//    .#{$abbrev}b-#{$level} {
+//      #{$prop}-bottom: $spacer !important;
+//    }
+//
+//    .#{$abbrev}a-#{$level},
+//    .#{$abbrev}x-#{$level},
+//    .#{$abbrev}r-#{$level} {
+//      #{$prop}-right: $spacer !important;
+//    }
+//
+//    .#{$abbrev}a-#{$level},
+//    .#{$abbrev}x-#{$level},
+//    .#{$abbrev}l-#{$level} {
+//      #{$prop}-left: $spacer !important;
+//    }
+//  }
+//
+//  .#{$abbrev}t-auto,
+//  .#{$abbrev}y-auto,
+//  .#{$abbrev}a-auto {
+//    #{$prop}-top: auto !important;
+//  }
+//
+//  .#{$abbrev}r-auto,
+//  .#{$abbrev}x-auto,
+//  .#{$abbrev}a-auto {
+//    #{$prop}-right: auto !important;
+//  }
+//
+//  .#{$abbrev}b-auto,
+//  .#{$abbrev}y-auto,
+//  .#{$abbrev}a-auto {
+//    #{$prop}-bottom: auto !important;
+//  }
+//
+//  .#{$abbrev}l-auto,
+//  .#{$abbrev}x-auto,
+//  .#{$abbrev}a-auto {
+//    #{$prop}-left: auto !important;
+//  }
+//}
 
 // spacings between items in the block
 @each $prop, $direction in (x: right, y: bottom) {
diff --git a/packages/ui/src/vue-book/book-main.scss b/packages/ui/src/vue-book/book-main.scss
index 737ac7f544..cc31b7f7c7 100644
--- a/packages/ui/src/vue-book/book-main.scss
+++ b/packages/ui/src/vue-book/book-main.scss
@@ -7,3 +7,4 @@
 @import './assets/icons/icons.scss';
 @import './assets/fonts.scss';
 @import './vue-book-overrides.scss';
+@import url('https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css');
diff --git a/yarn.lock b/yarn.lock
index c5df9f808e..ca7c5211a2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -224,6 +224,11 @@
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.19.0.tgz#2a592fd89bacb1fcde68de31bee4f2f2dacb0e86"
   integrity sha512-y5rqgTTPTmaF5e2nVhOxw+Ur9HDJLsWb6U/KpgUzRZEdPfE6VOubXBKLdbcUTijzRptednSBDQbYZBOSqJxpJw==
 
+"@babel/compat-data@^7.20.5":
+  version "7.20.10"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.20.10.tgz#9d92fa81b87542fff50e848ed585b4212c1d34ec"
+  integrity sha512-sEnuDPpOJR/fcafHMjpcpGN5M2jbUGUHwmuWKM/YdPzeEDJg8bgmbcWQFUfE32MQjti1koACvoPVsDe8Uq+idg==
+
 "@babel/core@^7.1.0", "@babel/core@^7.11.1", "@babel/core@^7.12.3", "@babel/core@^7.17.7", "@babel/core@^7.17.9", "@babel/core@^7.7.2", "@babel/core@^7.8.0":
   version "7.17.10"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.17.10.tgz#74ef0fbf56b7dfc3f198fc2d927f4f03e12f4b05"
@@ -245,7 +250,7 @@
     json5 "^2.2.1"
     semver "^6.3.0"
 
-"@babel/core@^7.12.16", "@babel/core@^7.18.10", "@babel/core@^7.18.6":
+"@babel/core@^7.12.16":
   version "7.18.10"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.18.10.tgz#39ad504991d77f1f3da91be0b8b949a5bc466fb8"
   integrity sha512-JQM6k6ENcBFKVtWvLavlvi/mPcpYZ3+R+2EySDEMSMbp7Mn4FexlbbJVrx2R7Ijhr01T8gyqrOaABWIOgxeUyw==
@@ -287,6 +292,27 @@
     json5 "^2.2.1"
     semver "^6.3.0"
 
+"@babel/core@^7.19.6", "@babel/core@^7.20.7":
+  version "7.20.12"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.20.12.tgz#7930db57443c6714ad216953d1356dac0eb8496d"
+  integrity sha512-XsMfHovsUYHFMdrIHkZphTN/2Hzzi78R08NuHfDBehym2VsPDL6Zn/JAD/JQdnRvbSsbQc4mVaU1m6JgtTEElg==
+  dependencies:
+    "@ampproject/remapping" "^2.1.0"
+    "@babel/code-frame" "^7.18.6"
+    "@babel/generator" "^7.20.7"
+    "@babel/helper-compilation-targets" "^7.20.7"
+    "@babel/helper-module-transforms" "^7.20.11"
+    "@babel/helpers" "^7.20.7"
+    "@babel/parser" "^7.20.7"
+    "@babel/template" "^7.20.7"
+    "@babel/traverse" "^7.20.12"
+    "@babel/types" "^7.20.7"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.2.2"
+    semver "^6.3.0"
+
 "@babel/generator@^7.17.10", "@babel/generator@^7.18.10":
   version "7.18.12"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.18.12.tgz#fa58daa303757bd6f5e4bbca91b342040463d9f4"
@@ -305,6 +331,15 @@
     "@jridgewell/gen-mapping" "^0.3.2"
     jsesc "^2.5.1"
 
+"@babel/generator@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.20.7.tgz#f8ef57c8242665c5929fe2e8d82ba75460187b4a"
+  integrity sha512-7wqMOJq8doJMZmP4ApXTzLxSr7+oO2jroJURrVEp6XShrQUObV8Tq/D0NCcoYg2uHqUrjzO0zwBjoYzelxK+sw==
+  dependencies:
+    "@babel/types" "^7.20.7"
+    "@jridgewell/gen-mapping" "^0.3.2"
+    jsesc "^2.5.1"
+
 "@babel/generator@^7.7.2":
   version "7.17.10"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.17.10.tgz#c281fa35b0c349bbe9d02916f4ae08fc85ed7189"
@@ -366,6 +401,17 @@
     browserslist "^4.20.2"
     semver "^6.3.0"
 
+"@babel/helper-compilation-targets@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.20.7.tgz#a6cd33e93629f5eb473b021aac05df62c4cd09bb"
+  integrity sha512-4tGORmfQcrc+bvrjb5y3dG9Mx1IOZjsHqQVUz7XCNHO+iTmqxWnVg3KRygjGmpRLJGdQSKuvFinbIb0CnZwHAQ==
+  dependencies:
+    "@babel/compat-data" "^7.20.5"
+    "@babel/helper-validator-option" "^7.18.6"
+    browserslist "^4.21.3"
+    lru-cache "^5.1.1"
+    semver "^6.3.0"
+
 "@babel/helper-create-class-features-plugin@^7.16.10", "@babel/helper-create-class-features-plugin@^7.16.7", "@babel/helper-create-class-features-plugin@^7.17.6", "@babel/helper-create-class-features-plugin@^7.17.9":
   version "7.17.9"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.17.9.tgz#71835d7fb9f38bd9f1378e40a4c0902fdc2ea49d"
@@ -379,30 +425,31 @@
     "@babel/helper-replace-supers" "^7.16.7"
     "@babel/helper-split-export-declaration" "^7.16.7"
 
-"@babel/helper-create-class-features-plugin@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.18.9.tgz#d802ee16a64a9e824fcbf0a2ffc92f19d58550ce"
-  integrity sha512-WvypNAYaVh23QcjpMR24CwZY2Nz6hqdOcFdPbNpV56hL5H6KiFheO7Xm1aPdlLQ7d5emYZX7VZwPp9x3z+2opw==
+"@babel/helper-create-class-features-plugin@^7.19.0":
+  version "7.19.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.19.0.tgz#bfd6904620df4e46470bae4850d66be1054c404b"
+  integrity sha512-NRz8DwF4jT3UfrmUoZjd0Uph9HQnP30t7Ash+weACcyNkiYTywpIjDBgReJMKgr+n86sn2nPVVmJ28Dm053Kqw==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.18.6"
     "@babel/helper-environment-visitor" "^7.18.9"
-    "@babel/helper-function-name" "^7.18.9"
+    "@babel/helper-function-name" "^7.19.0"
     "@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"
 
-"@babel/helper-create-class-features-plugin@^7.19.0":
-  version "7.19.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.19.0.tgz#bfd6904620df4e46470bae4850d66be1054c404b"
-  integrity sha512-NRz8DwF4jT3UfrmUoZjd0Uph9HQnP30t7Ash+weACcyNkiYTywpIjDBgReJMKgr+n86sn2nPVVmJ28Dm053Kqw==
+"@babel/helper-create-class-features-plugin@^7.20.7":
+  version "7.20.12"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.20.12.tgz#4349b928e79be05ed2d1643b20b99bb87c503819"
+  integrity sha512-9OunRkbT0JQcednL0UFvbfXpAsUXiGjUk0a7sN8fUXX7Mue79cUSMjHGDRRi/Vz9vYlpIhLV5fMD5dKoMhhsNQ==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.18.6"
     "@babel/helper-environment-visitor" "^7.18.9"
     "@babel/helper-function-name" "^7.19.0"
-    "@babel/helper-member-expression-to-functions" "^7.18.9"
+    "@babel/helper-member-expression-to-functions" "^7.20.7"
     "@babel/helper-optimise-call-expression" "^7.18.6"
-    "@babel/helper-replace-supers" "^7.18.9"
+    "@babel/helper-replace-supers" "^7.20.7"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0"
     "@babel/helper-split-export-declaration" "^7.18.6"
 
 "@babel/helper-create-regexp-features-plugin@^7.16.7", "@babel/helper-create-regexp-features-plugin@^7.17.0":
@@ -484,6 +531,13 @@
   dependencies:
     "@babel/types" "^7.18.9"
 
+"@babel/helper-member-expression-to-functions@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.20.7.tgz#a6f26e919582275a93c3aa6594756d71b0bb7f05"
+  integrity sha512-9J0CxJLq315fEdi4s7xK5TQaNYjZw+nDVpVqr1axNGKzdrdwYBD5b4uKv3n75aABG0rCCTK8Im8Ww7eYfMrZgw==
+  dependencies:
+    "@babel/types" "^7.20.7"
+
 "@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.12.13":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz#25612a8091a999704461c8a222d0efec5d091437"
@@ -540,6 +594,20 @@
     "@babel/traverse" "^7.19.0"
     "@babel/types" "^7.19.0"
 
+"@babel/helper-module-transforms@^7.20.11":
+  version "7.20.11"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.20.11.tgz#df4c7af713c557938c50ea3ad0117a7944b2f1b0"
+  integrity sha512-uRy78kN4psmji1s2QtbtcCSaj/LILFDp0f/ymhpQH5QY3nljUZCaNWz9X1dEj/8MBdBEFECs7yRhKn8i7NjZgg==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-module-imports" "^7.18.6"
+    "@babel/helper-simple-access" "^7.20.2"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    "@babel/helper-validator-identifier" "^7.19.1"
+    "@babel/template" "^7.20.7"
+    "@babel/traverse" "^7.20.10"
+    "@babel/types" "^7.20.7"
+
 "@babel/helper-optimise-call-expression@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.16.7.tgz#a34e3560605abbd31a18546bd2aad3e6d9a174f2"
@@ -559,7 +627,7 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz#aa3a8ab4c3cceff8e65eb9e73d87dc4ff320b2f5"
   integrity sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==
 
-"@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.18.9":
+"@babel/helper-plugin-utils@^7.18.6":
   version "7.18.9"
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.18.9.tgz#4b8aea3b069d8cb8a72cdfe28ddf5ceca695ef2f"
   integrity sha512-aBXPT3bmtLryXaoJLyYPXPlSD4p1ld9aYeR+sJNOZjJJGiOpb+fKfh3NkcCu7J54nUJwCERPBExCCpyCOHnu/w==
@@ -569,6 +637,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.19.0.tgz#4796bb14961521f0f8715990bee2fb6e51ce21bf"
   integrity sha512-40Ryx7I8mT+0gaNxm8JGTZFUITNqdLAgdg0hXzeVZxVD6nFsdhQvip6v8dqkRHzsz1VFpFAaOCHNn0vKBL7Czw==
 
+"@babel/helper-plugin-utils@^7.20.2":
+  version "7.20.2"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.20.2.tgz#d1b9000752b18d0877cff85a5c376ce5c3121629"
+  integrity sha512-8RvlJG2mj4huQ4pZ+rU9lqKi9ZKiRmuvGuM2HlWmkmgOhbs6zEAw6IEiJ5cQqGbDzGZOhwuOQNtZMi/ENLjZoQ==
+
 "@babel/helper-remap-async-to-generator@^7.16.8":
   version "7.16.8"
   resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.16.8.tgz#29ffaade68a367e2ed09c90901986918d25e57e3"
@@ -600,6 +673,18 @@
     "@babel/traverse" "^7.18.9"
     "@babel/types" "^7.18.9"
 
+"@babel/helper-replace-supers@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.20.7.tgz#243ecd2724d2071532b2c8ad2f0f9f083bcae331"
+  integrity sha512-vujDMtB6LVfNW13jhlCrp48QNslK6JXi7lQG736HVbHz/mbf4Dc7tIRh1Xf5C0rF7BP8iiSxGMCmY6Ci1ven3A==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-member-expression-to-functions" "^7.20.7"
+    "@babel/helper-optimise-call-expression" "^7.18.6"
+    "@babel/template" "^7.20.7"
+    "@babel/traverse" "^7.20.7"
+    "@babel/types" "^7.20.7"
+
 "@babel/helper-simple-access@^7.17.7", "@babel/helper-simple-access@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.18.6.tgz#d6d8f51f4ac2978068df934b569f08f29788c7ea"
@@ -607,6 +692,13 @@
   dependencies:
     "@babel/types" "^7.18.6"
 
+"@babel/helper-simple-access@^7.20.2":
+  version "7.20.2"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.20.2.tgz#0ab452687fe0c2cfb1e2b9e0015de07fc2d62dd9"
+  integrity sha512-+0woI/WPq59IrqDYbVGfshjT5Dmk/nnbdpcF8SnMhhXObpTq2KNBdLFRFrkVdbDOyUmHBCxzm5FHV1rACIkIbA==
+  dependencies:
+    "@babel/types" "^7.20.2"
+
 "@babel/helper-skip-transparent-expression-wrappers@^7.16.0":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.16.0.tgz#0ee3388070147c3ae051e487eca3ebb0e2e8bb09"
@@ -614,6 +706,13 @@
   dependencies:
     "@babel/types" "^7.16.0"
 
+"@babel/helper-skip-transparent-expression-wrappers@^7.20.0":
+  version "7.20.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.20.0.tgz#fbe4c52f60518cab8140d77101f0e63a8a230684"
+  integrity sha512-5y1JYeNKfvnT8sZcK9DVRtpTbGiomYIHviSP3OQWmDPU3DeH4a1ZlT/N2lyQ5P8egjcRaT/Y9aNqUxK0WsnIIg==
+  dependencies:
+    "@babel/types" "^7.20.0"
+
 "@babel/helper-split-export-declaration@^7.16.7", "@babel/helper-split-export-declaration@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz#7367949bc75b20c6d5a5d4a97bba2824ae8ef075"
@@ -626,6 +725,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.18.10.tgz#181f22d28ebe1b3857fa575f5c290b1aaf659b56"
   integrity sha512-XtIfWmeNY3i4t7t4D2t02q50HvqHybPqW2ki1kosnvWCwuCMeo81Jf0gwr85jy/neUdg5XDdeFE/80DXiO+njw==
 
+"@babel/helper-string-parser@^7.19.4":
+  version "7.19.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz#38d3acb654b4701a9b77fb0615a96f775c3a9e63"
+  integrity sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==
+
 "@babel/helper-validator-identifier@^7.15.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz#e8c602438c4a8195751243da9031d1607d247cad"
@@ -636,6 +740,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.18.6.tgz#9c97e30d31b2b8c72a1d08984f2ca9b574d7a076"
   integrity sha512-MmetCkz9ej86nJQV+sFCxoGGrUbU3q02kgLciwkrt9QqEB7cP39oKEY0PakknEO0Gu20SskMRi+AYZ3b1TpN9g==
 
+"@babel/helper-validator-identifier@^7.19.1":
+  version "7.19.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz#7eea834cf32901ffdc1a7ee555e2f9c27e249ca2"
+  integrity sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==
+
 "@babel/helper-validator-option@^7.16.7", "@babel/helper-validator-option@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz#bf0d2b5a509b1f336099e4ff36e1a63aa5db4db8"
@@ -669,6 +778,15 @@
     "@babel/traverse" "^7.19.0"
     "@babel/types" "^7.19.0"
 
+"@babel/helpers@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.20.7.tgz#04502ff0feecc9f20ecfaad120a18f011a8e6dce"
+  integrity sha512-PBPjs5BppzsGaxHQCDKnZ6Gd9s6xl8bBCluz3vEInLGRJmnZan4F6BYCeqtyXqkk4W5IlPmjK4JlOuZkpJ3xZA==
+  dependencies:
+    "@babel/template" "^7.20.7"
+    "@babel/traverse" "^7.20.7"
+    "@babel/types" "^7.20.7"
+
 "@babel/highlight@^7.10.4":
   version "7.17.9"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.17.9.tgz#61b2ee7f32ea0454612def4fccdae0de232b73e3"
@@ -702,6 +820,11 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.19.0.tgz#497fcafb1d5b61376959c1c338745ef0577aa02c"
   integrity sha512-74bEXKX2h+8rrfQUfsBfuZZHzsEs6Eql4pqy/T4Nn6Y9wNPggQOqD6z6pn5Bl8ZfysKouFZT/UXEH94ummEeQw==
 
+"@babel/parser@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.20.7.tgz#66fe23b3c8569220817d5feb8b9dcdc95bb4f71b"
+  integrity sha512-T3Z9oHybU+0vZlY9CiDSJQTD5ZapcW18ZctFMi0MOAl/4BjFF4ul7NVSARLdbGO5vDqy9eQiGTV0LtKfvCYvcg==
+
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.16.7":
   version "7.16.7"
   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.16.7.tgz#4eda6d6c2a0aa79c70fa7b6da67763dfe2141050"
@@ -991,6 +1114,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.6"
 
+"@babel/plugin-syntax-typescript@^7.20.0":
+  version "7.20.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.20.0.tgz#4e9a0cfc769c85689b77a2e642d24e9f697fc8c7"
+  integrity sha512-rd9TkG+u1CExzS4SM1BlMEhMXwFLKVjOAFFCDx9PbX5ycJWDoWMcwdJH9RhkPu1dOgn5TrxLot/Gx6lWFuAUNQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.19.0"
+
 "@babel/plugin-syntax-typescript@^7.7.2":
   version "7.17.10"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.17.10.tgz#80031e6042cad6a95ed753f672ebd23c30933195"
@@ -1254,14 +1384,14 @@
     "@babel/helper-plugin-utils" "^7.19.0"
     "@babel/plugin-syntax-typescript" "^7.18.6"
 
-"@babel/plugin-transform-typescript@^7.18.8":
-  version "7.18.12"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.18.12.tgz#712e9a71b9e00fde9f8c0238e0cceee86ab2f8fd"
-  integrity sha512-2vjjam0cum0miPkenUbQswKowuxs/NjMwIKEq0zwegRxXk12C9YOF9STXnaUptITOtOJHKHpzvvWYOjbm6tc0w==
+"@babel/plugin-transform-typescript@^7.20.0":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.20.7.tgz#673f49499cd810ae32a1ea5f3f8fab370987e055"
+  integrity sha512-m3wVKEvf6SoszD8pu4NZz3PvfKRCMgk6D6d0Qi9hNnlM5M6CFS92EgF4EiHVLKbU0r/r7ty1hg7NPZwE7WRbYw==
   dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.18.9"
-    "@babel/helper-plugin-utils" "^7.18.9"
-    "@babel/plugin-syntax-typescript" "^7.18.6"
+    "@babel/helper-create-class-features-plugin" "^7.20.7"
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/plugin-syntax-typescript" "^7.20.0"
 
 "@babel/plugin-transform-unicode-escapes@^7.16.7":
   version "7.16.7"
@@ -1389,16 +1519,16 @@
   resolved "https://registry.yarnpkg.com/@babel/standalone/-/standalone-7.17.11.tgz#9cc17674da762332b2e40d469ce37725a6136487"
   integrity sha512-47wVYBeTktYHwtzlFuK7qqV/H5X6mU4MUNqpQ9iiJOqnP8rWL0eX0GWLKRsv8D8suYzhuS1K/dtwgGr+26U7Gg==
 
-"@babel/standalone@^7.18.11":
-  version "7.18.12"
-  resolved "https://registry.yarnpkg.com/@babel/standalone/-/standalone-7.18.12.tgz#4c0abdf1b5213394e73a0ba5500dcc287194a20d"
-  integrity sha512-wDh3K5IUJiSMAY0MLYBFoCaj2RCZwvDz5BHn2uHat9KOsGWEVDFgFQFIOO+81Js2phFKNppLC45iOCsZVfJniw==
-
 "@babel/standalone@^7.18.13":
   version "7.19.0"
   resolved "https://registry.yarnpkg.com/@babel/standalone/-/standalone-7.19.0.tgz#23cbe261557a72dcc58ba56c3a2125944a251c4f"
   integrity sha512-P8lYynBl10MYpgkhGEV1fOsGDE/6lQSYp+e2YvqUPMWHT4JaQrOkM49FizjswrRzJ6KZTgG6ZY90/1GYvAR3/Q==
 
+"@babel/standalone@^7.20.11":
+  version "7.20.12"
+  resolved "https://registry.yarnpkg.com/@babel/standalone/-/standalone-7.20.12.tgz#ae882b8642b4efb1ddd80c8a64a929e028095562"
+  integrity sha512-hK/X+m1il3w1tYS4H8LDaGCEdiT47SVqEXY8RiEAgou26BystipSU8ZL6EvBR6t5l7lTv0ilBiChXWblKJ5iUA==
+
 "@babel/template@^7.0.0", "@babel/template@^7.3.3":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155"
@@ -1417,6 +1547,15 @@
     "@babel/parser" "^7.18.10"
     "@babel/types" "^7.18.10"
 
+"@babel/template@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.20.7.tgz#a15090c2839a83b02aa996c0b4994005841fd5a8"
+  integrity sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==
+  dependencies:
+    "@babel/code-frame" "^7.18.6"
+    "@babel/parser" "^7.20.7"
+    "@babel/types" "^7.20.7"
+
 "@babel/traverse@^7.0.0", "@babel/traverse@^7.13.0", "@babel/traverse@^7.16.7", "@babel/traverse@^7.16.8", "@babel/traverse@^7.7.2":
   version "7.17.10"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.17.10.tgz#1ee1a5ac39f4eac844e6cf855b35520e5eb6f8b5"
@@ -1465,6 +1604,22 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
+"@babel/traverse@^7.20.10", "@babel/traverse@^7.20.12", "@babel/traverse@^7.20.7":
+  version "7.20.12"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.20.12.tgz#7f0f787b3a67ca4475adef1f56cb94f6abd4a4b5"
+  integrity sha512-MsIbFN0u+raeja38qboyF8TIT7K0BFzz/Yd/77ta4MsUsmP2RAnidIlwq7d5HFQrH/OZJecGV6B71C4zAgpoSQ==
+  dependencies:
+    "@babel/code-frame" "^7.18.6"
+    "@babel/generator" "^7.20.7"
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-function-name" "^7.19.0"
+    "@babel/helper-hoist-variables" "^7.18.6"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    "@babel/parser" "^7.20.7"
+    "@babel/types" "^7.20.7"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
 "@babel/types@^7.0.0", "@babel/types@^7.16.0", "@babel/types@^7.16.8", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4":
   version "7.17.10"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.17.10.tgz#d35d7b4467e439fcf06d195f8100e0fea7fc82c4"
@@ -1491,6 +1646,15 @@
     "@babel/helper-validator-identifier" "^7.18.6"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.20.0", "@babel/types@^7.20.2", "@babel/types@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.20.7.tgz#54ec75e252318423fc07fb644dc6a58a64c09b7f"
+  integrity sha512-69OnhBxSSgK0OzTJai4kyPDiKTIe3j+ctaHdIGVbRahTLAT7L3R9oeXHC2aVSuGYt3cVnoAMDmOCgJ2yaiLMvg==
+  dependencies:
+    "@babel/helper-string-parser" "^7.19.4"
+    "@babel/helper-validator-identifier" "^7.19.1"
+    to-fast-properties "^2.0.0"
+
 "@bcoe/v8-coverage@^0.2.3":
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
@@ -1562,11 +1726,131 @@
     "@esbuild-kit/core-utils" "^2.0.0"
     get-tsconfig "^4.0.0"
 
+"@esbuild/android-arm64@0.16.16":
+  version "0.16.16"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.16.16.tgz#833184b8a0a96f9c85105c53d0a67e6d3c5c3f07"
+  integrity sha512-hFHVAzUKp9Tf8psGq+bDVv+6hTy1bAOoV/jJMUWwhUnIHsh6WbFMhw0ZTkqDuh7TdpffFoHOiIOIxmHc7oYRBQ==
+
+"@esbuild/android-arm@0.15.18":
+  version "0.15.18"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.15.18.tgz#266d40b8fdcf87962df8af05b76219bc786b4f80"
+  integrity sha512-5GT+kcs2WVGjVs7+boataCkO5Fg0y4kCjzkB5bAip7H4jfnOS3dA6KPiww9W1OEKTKeAcUVhdZGvgI65OXmUnw==
+
+"@esbuild/android-arm@0.16.16":
+  version "0.16.16"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.16.16.tgz#23761b2fd1dfa4806161dbfc9e0824f04061cb95"
+  integrity sha512-BUuWMlt4WSXod1HSl7aGK8fJOsi+Tab/M0IDK1V1/GstzoOpqc/v3DqmN8MkuapPKQ9Br1WtLAN4uEgWR8x64A==
+
+"@esbuild/android-x64@0.16.16":
+  version "0.16.16"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.16.16.tgz#ffa09f04c0ffea5b594ab7655fc9ca1220365e9b"
+  integrity sha512-9WhxJpeb6XumlfivldxqmkJepEcELekmSw3NkGrs+Edq6sS5KRxtUBQuKYDD7KqP59dDkxVbaoPIQFKWQG0KLg==
+
+"@esbuild/darwin-arm64@0.16.16":
+  version "0.16.16"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.16.16.tgz#62ed2b4bfab594b9e5e708580361f1d059b53b26"
+  integrity sha512-8Z+wld+vr/prHPi2O0X7o1zQOfMbXWGAw9hT0jEyU/l/Yrg+0Z3FO9pjPho72dVkZs4ewZk0bDOFLdZHm8jEfw==
+
+"@esbuild/darwin-x64@0.16.16":
+  version "0.16.16"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.16.16.tgz#e9756d34cd9b3737a5354e89ca0fdca32d8df64c"
+  integrity sha512-CYkxVvkZzGCqFrt7EgjFxQKhlUPyDkuR9P0Y5wEcmJqVI8ncerOIY5Kej52MhZyzOBXkYrJgZeVZC9xXXoEg9A==
+
+"@esbuild/freebsd-arm64@0.16.16":
+  version "0.16.16"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.16.16.tgz#db7bce444d372e5a213a3f359c42aee3acc0dd45"
+  integrity sha512-fxrw4BYqQ39z/3Ja9xj/a1gMsVq0xEjhSyI4a9MjfvDDD8fUV8IYliac96i7tzZc3+VytyXX+XNsnpEk5sw5Wg==
+
+"@esbuild/freebsd-x64@0.16.16":
+  version "0.16.16"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.16.16.tgz#02e8a81b7e56040b5eb883896de445a6cd3501f0"
+  integrity sha512-8p3v1D+du2jiDvSoNVimHhj7leSfST9YlKsAEO7etBfuqjaBMndo0fmjNLp0JCMld+XIx9L80tooOkyUv1a1PQ==
+
+"@esbuild/linux-arm64@0.16.16":
+  version "0.16.16"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.16.16.tgz#ea8c3df172644fa6437f0083c2a38b50f89e5b98"
+  integrity sha512-N3u6BBbCVY3xeP2D8Db7QY8I+nZ+2AgOopUIqk+5yCoLnsWkcVxD2ay5E9iIdvApFi1Vg1lZiiwaVp8bOpAc4A==
+
+"@esbuild/linux-arm@0.16.16":
+  version "0.16.16"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.16.16.tgz#c1c2e97e67bb7247e6f60e2644de057bfedb8cbb"
+  integrity sha512-bYaocE1/PTMRmkgSckZ0D0Xn2nox8v2qlk+MVVqm+VECNKDdZvghVZtH41dNtBbwADSvA6qkCHGYeWm9LrNCBw==
+
+"@esbuild/linux-ia32@0.16.16":
+  version "0.16.16"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.16.16.tgz#9a0b0e926926f891a3e7f7c50bb38e3db49c2c9a"
+  integrity sha512-dxjqLKUW8GqGemoRT9v8IgHk+T4tRm1rn1gUcArsp26W9EkK/27VSjBVUXhEG5NInHZ92JaQ3SSMdTwv/r9a2A==
+
+"@esbuild/linux-loong64@0.15.18":
+  version "0.15.18"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.15.18.tgz#128b76ecb9be48b60cf5cfc1c63a4f00691a3239"
+  integrity sha512-L4jVKS82XVhw2nvzLg/19ClLWg0y27ulRwuP7lcyL6AbUWB5aPglXY3M21mauDQMDfRLs8cQmeT03r/+X3cZYQ==
+
 "@esbuild/linux-loong64@0.15.7":
   version "0.15.7"
   resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.15.7.tgz#1ec4af4a16c554cbd402cc557ccdd874e3f7be53"
   integrity sha512-IKznSJOsVUuyt7cDzzSZyqBEcZe+7WlBqTVXiF1OXP/4Nm387ToaXZ0fyLwI1iBlI/bzpxVq411QE2/Bt2XWWw==
 
+"@esbuild/linux-loong64@0.16.16":
+  version "0.16.16"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.16.16.tgz#c5a50ff5981d457ed45f42c3f06a60086759c79b"
+  integrity sha512-MdUFggHjRiCCwNE9+1AibewoNq6wf94GLB9Q9aXwl+a75UlRmbRK3h6WJyrSGA6ZstDJgaD2wiTSP7tQNUYxwA==
+
+"@esbuild/linux-mips64el@0.16.16":
+  version "0.16.16"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.16.16.tgz#e85b7e3c25000be2ae373e5208e55e282a9763e0"
+  integrity sha512-CO3YmO7jYMlGqGoeFeKzdwx/bx8Vtq/SZaMAi+ZLDUnDUdfC7GmGwXzIwDJ70Sg+P9pAemjJyJ1icKJ9R3q/Fg==
+
+"@esbuild/linux-ppc64@0.16.16":
+  version "0.16.16"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.16.16.tgz#24a0013bf727830df44fece571172ebe31b5c5e6"
+  integrity sha512-DSl5Czh5hCy/7azX0Wl9IdzPHX2H8clC6G87tBnZnzUpNgRxPFhfmArbaHoAysu4JfqCqbB/33u/GL9dUgCBAw==
+
+"@esbuild/linux-riscv64@0.16.16":
+  version "0.16.16"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.16.16.tgz#b080998d8d0480e8235f1384c585ae505e98a19d"
+  integrity sha512-sSVVMEXsqf1fQu0j7kkhXMViroixU5XoaJXl1u/u+jbXvvhhCt9YvA/B6VM3aM/77HuRQ94neS5bcisijGnKFQ==
+
+"@esbuild/linux-s390x@0.16.16":
+  version "0.16.16"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.16.16.tgz#5042de05b9b653dfd134f05e1b37b61704c14c42"
+  integrity sha512-jRqBCre9gZGoCdCN/UWCCMwCMsOg65IpY9Pyj56mKCF5zXy9d60kkNRdDN6YXGjr3rzcC4DXnS/kQVCGcC4yPQ==
+
+"@esbuild/linux-x64@0.16.16":
+  version "0.16.16"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.16.16.tgz#b7c0750f2276c9dcf41f0f2229adca46ef22f698"
+  integrity sha512-G1+09TopOzo59/55lk5Q0UokghYLyHTKKzD5lXsAOOlGDbieGEFJpJBr3BLDbf7cz89KX04sBeExAR/pL/26sA==
+
+"@esbuild/netbsd-x64@0.16.16":
+  version "0.16.16"
+  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.16.16.tgz#e2a0ee181fbbe834174d26e24ce1b258232bb3eb"
+  integrity sha512-xwjGJB5wwDEujLaJIrSMRqWkbigALpBNcsF9SqszoNKc+wY4kPTdKrSxiY5ik3IatojePP+WV108MvF6q6np4w==
+
+"@esbuild/openbsd-x64@0.16.16":
+  version "0.16.16"
+  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.16.16.tgz#87a84c1932e00f52ab3380c31facf0e48086ffb9"
+  integrity sha512-yeERkoxG2nR2oxO5n+Ms7MsCeNk23zrby2GXCqnfCpPp7KNc0vxaaacIxb21wPMfXXRhGBrNP4YLIupUBrWdlg==
+
+"@esbuild/sunos-x64@0.16.16":
+  version "0.16.16"
+  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.16.16.tgz#996bcd2603cd345733c3aa5f52bfd5b8fa7d1d36"
+  integrity sha512-nHfbEym0IObXPhtX6Va3H5GaKBty2kdhlAhKmyCj9u255ktAj0b1YACUs9j5H88NRn9cJCthD1Ik/k9wn8YKVg==
+
+"@esbuild/win32-arm64@0.16.16":
+  version "0.16.16"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.16.16.tgz#404a9411d12533d0f2ce0a85df6ddb32e851ef04"
+  integrity sha512-pdD+M1ZOFy4hE15ZyPX09fd5g4DqbbL1wXGY90YmleVS6Y5YlraW4BvHjim/X/4yuCpTsAFvsT4Nca2lbyDH/A==
+
+"@esbuild/win32-ia32@0.16.16":
+  version "0.16.16"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.16.16.tgz#bb5655a48f5f87fee870061883411f5149bc5e44"
+  integrity sha512-IPEMfU9p0c3Vb8PqxaPX6BM9rYwlTZGYOf9u+kMdhoILZkVKEjq6PKZO0lB+isojWwAnAqh4ZxshD96njTXajg==
+
+"@esbuild/win32-x64@0.16.16":
+  version "0.16.16"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.16.16.tgz#ee22fed0b2e0c00ce895cdfae9d32ef069a12e04"
+  integrity sha512-1YYpoJ39WV/2bnShPwgdzJklc+XS0bysN6Tpnt1cWPdeoKOG4RMEY1g7i534QxXX/rPvNx/NLJQTTCeORYzipg==
+
 "@eslint/eslintrc@^0.4.3":
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz#9e42981ef035beb3dd49add17acb96e8ff6f394c"
@@ -2073,7 +2357,7 @@
     "@jridgewell/gen-mapping" "^0.3.0"
     "@jridgewell/trace-mapping" "^0.3.9"
 
-"@jridgewell/sourcemap-codec@^1.4.10":
+"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.13":
   version "1.4.14"
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz#add4c98d341472a289190b424efbdb096991bb24"
   integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
@@ -2815,13 +3099,6 @@
     call-me-maybe "^1.0.1"
     glob-to-regexp "^0.3.0"
 
-"@netlify/functions@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@netlify/functions/-/functions-1.0.0.tgz#5b6c02fafc567033c93b15a080cc021e5f10f254"
-  integrity sha512-7fnJv3vr8uyyyOYPChwoec6MjzsCw1CoRUO2DhQ1BD6bOyJRlD4DUaOOGlMILB2LCT8P24p5LexEGx8AJb7xdA==
-  dependencies:
-    is-promise "^4.0.0"
-
 "@netlify/functions@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@netlify/functions/-/functions-1.2.0.tgz#0acce06db94113d2a42253930c45cb69ab97c530"
@@ -2829,6 +3106,13 @@
   dependencies:
     is-promise "^4.0.0"
 
+"@netlify/functions@^1.3.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@netlify/functions/-/functions-1.4.0.tgz#027a2e5d54df5519ccbd14cf450231e97bbbf93a"
+  integrity sha512-gy7ULTIRroc2/jyFVGx1djCmmBMVisIwrvkqggq5B6iDcInRSy2Tpkm+V5C63hKJVkNRskKWtLQKm9ecCaQTjA==
+  dependencies:
+    is-promise "^4.0.0"
+
 "@node-ipc/js-queue@2.0.3":
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/@node-ipc/js-queue/-/js-queue-2.0.3.tgz#ac7fe33d766fa53e233ef8fedaf3443a01c5a4cd"
@@ -2867,6 +3151,30 @@
   resolved "https://registry.yarnpkg.com/@nuxt/devalue/-/devalue-2.0.0.tgz#c7bd7e9a516514e612d5d2e511ffc399e0eac322"
   integrity sha512-YBI/6o2EBz02tdEJRBK8xkt3zvOFOWlLBf7WKYGBsSYSRtjjgrqPe2skp6VLLmKx5WbHHDNcW+6oACaurxGzeA==
 
+"@nuxt/kit@3.0.0", "@nuxt/kit@^3.0.0-rc.14":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@nuxt/kit/-/kit-3.0.0.tgz#ae49b4e27b15285556cb88f35a56309c5ca0dd79"
+  integrity sha512-7ZsOLt5s9a0ZleAIzmoD70JwkZf5ti6bDdxl6f8ew7Huxz+ni/oRfTPTX9TrORXsgW5CvDt6Q9M7IJNPkAN/Iw==
+  dependencies:
+    "@nuxt/schema" "3.0.0"
+    c12 "^1.0.1"
+    consola "^2.15.3"
+    defu "^6.1.1"
+    globby "^13.1.2"
+    hash-sum "^2.0.0"
+    ignore "^5.2.0"
+    jiti "^1.16.0"
+    knitwork "^1.0.0"
+    lodash.template "^4.5.0"
+    mlly "^1.0.0"
+    pathe "^1.0.0"
+    pkg-types "^1.0.1"
+    scule "^1.0.0"
+    semver "^7.3.8"
+    unctx "^2.1.0"
+    unimport "^1.0.1"
+    untyped "^1.0.0"
+
 "@nuxt/kit@3.0.0-rc.6":
   version "3.0.0-rc.6"
   resolved "https://registry.yarnpkg.com/@nuxt/kit/-/kit-3.0.0-rc.6.tgz#b59c10639cb591bdc5a63164fb352b344230a065"
@@ -2891,30 +3199,6 @@
     unimport "^0.4.5"
     untyped "^0.4.4"
 
-"@nuxt/kit@3.0.0-rc.8":
-  version "3.0.0-rc.8"
-  resolved "https://registry.yarnpkg.com/@nuxt/kit/-/kit-3.0.0-rc.8.tgz#e65e739e986abf5bfe99fa44a3bf44bacc66a35a"
-  integrity sha512-FkbO7DPkJxuLqeiWEMUI8OWXaQ4qzmreIjslIPrc9buYdB9nbJqVVzQRicxcKzF09R7VwpJTiG6onIZq6iGuDQ==
-  dependencies:
-    "@nuxt/schema" "3.0.0-rc.8"
-    c12 "^0.2.9"
-    consola "^2.15.3"
-    defu "^6.0.0"
-    globby "^13.1.2"
-    hash-sum "^2.0.0"
-    ignore "^5.2.0"
-    jiti "^1.14.0"
-    knitwork "^0.1.2"
-    lodash.template "^4.5.0"
-    mlly "^0.5.12"
-    pathe "^0.3.4"
-    pkg-types "^0.3.3"
-    scule "^0.3.2"
-    semver "^7.3.7"
-    unctx "^2.0.1"
-    unimport "^0.6.7"
-    untyped "^0.4.5"
-
 "@nuxt/kit@3.0.0-rc.9", "@nuxt/kit@^3.0.0-rc.9":
   version "3.0.0-rc.9"
   resolved "https://registry.yarnpkg.com/@nuxt/kit/-/kit-3.0.0-rc.9.tgz#05d9721a7b7bf8538cd6f501ed0692cf0171bc2f"
@@ -2950,21 +3234,23 @@
     pathe "^0.2.0"
     unbuild "^0.6.7"
 
-"@nuxt/schema@3.0.0-rc.8", "@nuxt/schema@^3.0.0-rc.6":
-  version "3.0.0-rc.8"
-  resolved "https://registry.yarnpkg.com/@nuxt/schema/-/schema-3.0.0-rc.8.tgz#d8fab177f4b58fcdb83bd530a887d3b4acea90b7"
-  integrity sha512-ODl9cmjH8fupvXjzITIvYT4OzapNvLrvWq9QUUgLhgv3Uxl2iX2J03oLj2aCQgfhte4mJhgHsBrtXvDLF/1GwA==
+"@nuxt/schema@3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@nuxt/schema/-/schema-3.0.0.tgz#d499fd7d8309f9bd3403411b32c19e726969cd71"
+  integrity sha512-5fwsidhs5NjFzR8sIzHMXO0WFGkI3tCH3ViANn2W4N5qCwoYZ0n1sZBkQ9Esn1VoEed6RsIlTpWrPZPVtqNkGQ==
   dependencies:
-    c12 "^0.2.9"
+    c12 "^1.0.1"
     create-require "^1.1.1"
-    defu "^6.0.0"
-    jiti "^1.14.0"
-    pathe "^0.3.4"
+    defu "^6.1.1"
+    jiti "^1.16.0"
+    pathe "^1.0.0"
+    pkg-types "^1.0.1"
     postcss-import-resolver "^2.0.0"
-    scule "^0.3.2"
-    std-env "^3.1.1"
-    ufo "^0.8.5"
-    unimport "^0.6.7"
+    scule "^1.0.0"
+    std-env "^3.3.1"
+    ufo "^1.0.0"
+    unimport "^1.0.1"
+    untyped "^1.0.0"
 
 "@nuxt/schema@3.0.0-rc.9", "@nuxt/schema@latest":
   version "3.0.0-rc.9"
@@ -2982,6 +3268,22 @@
     ufo "^0.8.5"
     unimport "^0.6.7"
 
+"@nuxt/schema@^3.0.0-rc.6":
+  version "3.0.0-rc.8"
+  resolved "https://registry.yarnpkg.com/@nuxt/schema/-/schema-3.0.0-rc.8.tgz#d8fab177f4b58fcdb83bd530a887d3b4acea90b7"
+  integrity sha512-ODl9cmjH8fupvXjzITIvYT4OzapNvLrvWq9QUUgLhgv3Uxl2iX2J03oLj2aCQgfhte4mJhgHsBrtXvDLF/1GwA==
+  dependencies:
+    c12 "^0.2.9"
+    create-require "^1.1.1"
+    defu "^6.0.0"
+    jiti "^1.14.0"
+    pathe "^0.3.4"
+    postcss-import-resolver "^2.0.0"
+    scule "^0.3.2"
+    std-env "^3.1.1"
+    ufo "^0.8.5"
+    unimport "^0.6.7"
+
 "@nuxt/telemetry@^2.1.4":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@nuxt/telemetry/-/telemetry-2.1.4.tgz#3a72fd9ff9ec6381a471dcf58252858d38166464"
@@ -3008,54 +3310,80 @@
     rc9 "^1.2.2"
     std-env "^3.1.1"
 
-"@nuxt/ui-templates@^0.3.1":
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/@nuxt/ui-templates/-/ui-templates-0.3.2.tgz#68bbc300a31cd14833f36fa69f6a6218cd8e1a16"
-  integrity sha512-o0KRB0Mna/M5QxqMe+XvlfKczFz3CQMlkEr6Ztyphp+00jq1Ti0AXdq1XAt9hXI3LoZRh4+2vVX331UaIZQQzQ==
+"@nuxt/telemetry@^2.1.8":
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/@nuxt/telemetry/-/telemetry-2.1.8.tgz#fb900ea2a61159ec8d81744bdfa8ed97debd9615"
+  integrity sha512-WCHRrcPKRosuHQi8CD5WfjiXGAyjOWVJpK77xS6wlg8zwziBPCqmVIQdr4QpFTGFO1Nrh4z26l1VnivKy22KFQ==
+  dependencies:
+    "@nuxt/kit" "^3.0.0-rc.14"
+    chalk "^5.1.2"
+    ci-info "^3.6.1"
+    consola "^2.15.3"
+    create-require "^1.1.1"
+    defu "^6.1.1"
+    destr "^1.2.1"
+    dotenv "^16.0.3"
+    fs-extra "^10.1.0"
+    git-url-parse "^13.1.0"
+    inquirer "^9.1.4"
+    is-docker "^3.0.0"
+    jiti "^1.16.0"
+    mri "^1.2.0"
+    nanoid "^4.0.0"
+    node-fetch "^3.3.0"
+    ohmyfetch "^0.4.21"
+    parse-git-config "^3.0.0"
+    rc9 "^2.0.0"
+    std-env "^3.3.1"
 
 "@nuxt/ui-templates@^0.3.2":
   version "0.3.3"
   resolved "https://registry.yarnpkg.com/@nuxt/ui-templates/-/ui-templates-0.3.3.tgz#036af24dc536f1bce3cd3a89d64d4ea087bc2a9e"
   integrity sha512-EgxICRWv+VCkt3wjCuJUJqNOFACF3h6FX3Mj+hDXshf6ECvl/y8BWEVGC5T2N8tE/bFcNC6rEJxPsp4s+4+XOQ==
 
-"@nuxt/vite-builder@3.0.0-rc.8":
-  version "3.0.0-rc.8"
-  resolved "https://registry.yarnpkg.com/@nuxt/vite-builder/-/vite-builder-3.0.0-rc.8.tgz#20d32786d19ecff787903807ae2d145207d449ec"
-  integrity sha512-SaGm7hfA46SP7x49bfFDLHLORXcUvLyEiXGwNlVwMZXCZnXUscYiEF7Fsk9JdJZbbztpUbRLtG5UAr311gvQBQ==
-  dependencies:
-    "@nuxt/kit" "3.0.0-rc.8"
-    "@rollup/plugin-replace" "^4.0.0"
-    "@vitejs/plugin-vue" "^3.0.2"
-    "@vitejs/plugin-vue-jsx" "^2.0.0"
-    autoprefixer "^10.4.8"
+"@nuxt/ui-templates@^1.0.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@nuxt/ui-templates/-/ui-templates-1.1.0.tgz#ac2ae0cca5d78cc9cc61d369676b88a0fd60ce97"
+  integrity sha512-KffiTNdVaZlkx0tgwopmy627WQclWO0kqFD1R646wawDbNlWkpmwj5qI5qoh2Rx13/O+KkYdc28H3JsQdQmXJw==
+
+"@nuxt/vite-builder@3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@nuxt/vite-builder/-/vite-builder-3.0.0.tgz#a12882587c815fbab1f51e70d654ab2bb3a1fa20"
+  integrity sha512-eMnpPpjHU8rGZcsJUksCuSX+6dpId03q8LOSStsm6rXzrNJtZIcwt0nBRTUaigckXIozX8ZNl5u2OPGUfUbMrw==
+  dependencies:
+    "@nuxt/kit" "3.0.0"
+    "@rollup/plugin-replace" "^5.0.1"
+    "@vitejs/plugin-vue" "^3.2.0"
+    "@vitejs/plugin-vue-jsx" "^2.1.1"
+    autoprefixer "^10.4.13"
     chokidar "^3.5.3"
-    cssnano "^5.1.12"
-    defu "^6.0.0"
-    esbuild "^0.15.1"
+    cssnano "^5.1.14"
+    defu "^6.1.1"
+    esbuild "^0.15.14"
     escape-string-regexp "^5.0.0"
     estree-walker "^3.0.1"
-    externality "^0.2.2"
+    externality "^1.0.0"
     fs-extra "^10.1.0"
     get-port-please "^2.6.1"
-    h3 "^0.7.15"
-    knitwork "^0.1.2"
-    magic-string "^0.26.2"
-    mlly "^0.5.12"
-    ohash "^0.1.5"
-    pathe "^0.3.4"
+    h3 "^1.0.1"
+    knitwork "^1.0.0"
+    magic-string "^0.26.7"
+    mlly "^1.0.0"
+    ohash "^1.0.0"
+    pathe "^1.0.0"
     perfect-debounce "^0.1.3"
-    pkg-types "^0.3.3"
-    postcss "^8.4.16"
-    postcss-import "^14.1.0"
+    pkg-types "^1.0.1"
+    postcss "^8.4.19"
+    postcss-import "^15.0.0"
     postcss-url "^10.1.3"
-    rollup "^2.77.3"
-    rollup-plugin-visualizer "^5.7.1"
-    ufo "^0.8.5"
-    unplugin "^0.9.0"
-    vite "~3.0.6"
-    vite-node "^0.21.1"
-    vite-plugin-checker "^0.4.9"
-    vue-bundle-renderer "^0.4.1"
+    rollup "^2.79.1"
+    rollup-plugin-visualizer "^5.8.3"
+    ufo "^1.0.0"
+    unplugin "^1.0.0"
+    vite "~3.2.4"
+    vite-node "^0.25.2"
+    vite-plugin-checker "^0.5.1"
+    vue-bundle-renderer "^1.0.0"
 
 "@nuxt/vite-builder@3.0.0-rc.9", "@nuxt/vite-builder@latest":
   version "3.0.0-rc.9"
@@ -3244,6 +3572,13 @@
   dependencies:
     slash "^3.0.0"
 
+"@rollup/plugin-alias@^4.0.2":
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-alias/-/plugin-alias-4.0.2.tgz#fec6c6aff8dd6fce580ae6bc5345084cd702bb62"
+  integrity sha512-1hv7dBOZZwo3SEupxn4UA2N0EDThqSSS+wI1St1TNTBtOZvUchyIClyHcnDcjjrReTPZ47Faedrhblv4n+T5UQ==
+  dependencies:
+    slash "^4.0.0"
+
 "@rollup/plugin-babel@^5.2.0":
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz#04bc0608f4aa4b2e4b1aebf284344d0f68fda283"
@@ -3291,6 +3626,18 @@
     magic-string "^0.25.7"
     resolve "^1.17.0"
 
+"@rollup/plugin-commonjs@^23.0.2":
+  version "23.0.7"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-commonjs/-/plugin-commonjs-23.0.7.tgz#7d26d879caa54283086de1974b66f512ef60abdc"
+  integrity sha512-hsSD5Qzyuat/swzrExGG5l7EuIlPhwTsT7KwKbSCQzIcJWjRxiimi/0tyMYY2bByitNb3i1p+6JWEDGa0NvT0Q==
+  dependencies:
+    "@rollup/pluginutils" "^5.0.1"
+    commondir "^1.0.1"
+    estree-walker "^2.0.2"
+    glob "^8.0.3"
+    is-reference "1.2.1"
+    magic-string "^0.27.0"
+
 "@rollup/plugin-inject@^4.0.4":
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-inject/-/plugin-inject-4.0.4.tgz#fbeee66e9a700782c4f65c8b0edbafe58678fbc2"
@@ -3300,6 +3647,15 @@
     estree-walker "^2.0.1"
     magic-string "^0.25.7"
 
+"@rollup/plugin-inject@^5.0.2":
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-inject/-/plugin-inject-5.0.3.tgz#0783711efd93a9547d52971db73b2fb6140a67b1"
+  integrity sha512-411QlbL+z2yXpRWFXSmw/teQRMkXcAAC8aYTemc15gwJRpvEVDQwoe+N/HTFD8RFG8+88Bme9DK2V9CVm7hJdA==
+  dependencies:
+    "@rollup/pluginutils" "^5.0.1"
+    estree-walker "^2.0.2"
+    magic-string "^0.27.0"
+
 "@rollup/plugin-json@^4.1.0":
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-json/-/plugin-json-4.1.0.tgz#54e09867ae6963c593844d8bd7a9c718294496f3"
@@ -3307,6 +3663,13 @@
   dependencies:
     "@rollup/pluginutils" "^3.0.8"
 
+"@rollup/plugin-json@^5.0.1":
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-json/-/plugin-json-5.0.2.tgz#d7dbbac62ff74064876b3e5d0d863cb3ad1e7cdb"
+  integrity sha512-D1CoOT2wPvadWLhVcmpkDnesTzjhNIQRWLsc3fA49IFOP2Y84cFOOJ+nKGYedvXHKUsPeq07HR4hXpBBr+CHlA==
+  dependencies:
+    "@rollup/pluginutils" "^5.0.1"
+
 "@rollup/plugin-node-resolve@^11.2.1":
   version "11.2.1"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-11.2.1.tgz#82aa59397a29cd4e13248b106e6a4a1880362a60"
@@ -3331,6 +3694,18 @@
     is-module "^1.0.0"
     resolve "^1.19.0"
 
+"@rollup/plugin-node-resolve@^15.0.1":
+  version "15.0.1"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.0.1.tgz#72be449b8e06f6367168d5b3cd5e2802e0248971"
+  integrity sha512-ReY88T7JhJjeRVbfCyNj+NXAG3IIsVMsX9b5/9jC98dRP8/yxlZdz7mHZbHk5zHr24wZZICS5AcXsFZAXYUQEg==
+  dependencies:
+    "@rollup/pluginutils" "^5.0.1"
+    "@types/resolve" "1.20.2"
+    deepmerge "^4.2.2"
+    is-builtin-module "^3.2.0"
+    is-module "^1.0.0"
+    resolve "^1.22.1"
+
 "@rollup/plugin-replace@^2.4.1":
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-replace/-/plugin-replace-2.4.2.tgz#a2d539314fbc77c244858faa523012825068510a"
@@ -3355,11 +3730,24 @@
     "@rollup/pluginutils" "^3.1.0"
     magic-string "^0.25.7"
 
+"@rollup/plugin-replace@^5.0.1":
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-replace/-/plugin-replace-5.0.2.tgz#45f53501b16311feded2485e98419acb8448c61d"
+  integrity sha512-M9YXNekv/C/iHHK+cvORzfRYfPbq0RDD8r0G+bMiTXjNGKulPnCT9O3Ss46WfhI6ZOCgApOP7xAdmCQJ+U2LAA==
+  dependencies:
+    "@rollup/pluginutils" "^5.0.1"
+    magic-string "^0.27.0"
+
 "@rollup/plugin-wasm@^5.2.0":
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-wasm/-/plugin-wasm-5.2.0.tgz#2bcd2de23c67b6067b1477566b680d677814a145"
   integrity sha512-PR3ff67ls2Kr9H04pZ24wJYPZq0YV+UHySpk7OuAJxyc7o5Q8NHFdwi4pfMtJkJkqfN1/QY/nq46SoRDoDvK2w==
 
+"@rollup/plugin-wasm@^6.0.1":
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-wasm/-/plugin-wasm-6.1.1.tgz#4433583997703c46ac22ebd7d079cf8f165a909b"
+  integrity sha512-dccyb8OvtpY21KiYjaNmibWlQJd/kBg+IVP24x9l1dsIRXBmGqLt+wsPjU296FNO8ap0SSEsTpi/7AfrlvQvBQ==
+
 "@rollup/pluginutils@^3.0.8", "@rollup/pluginutils@^3.1.0":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-3.1.0.tgz#706b4524ee6dc8b103b3c995533e5ad680c02b9b"
@@ -3377,6 +3765,15 @@
     estree-walker "^2.0.1"
     picomatch "^2.2.2"
 
+"@rollup/pluginutils@^5.0.1", "@rollup/pluginutils@^5.0.2":
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.0.2.tgz#012b8f53c71e4f6f9cb317e311df1404f56e7a33"
+  integrity sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==
+  dependencies:
+    "@types/estree" "^1.0.0"
+    estree-walker "^2.0.2"
+    picomatch "^2.3.1"
+
 "@sideway/address@^4.1.3":
   version "4.1.4"
   resolved "https://registry.yarnpkg.com/@sideway/address/-/address-4.1.4.tgz#03dccebc6ea47fdc226f7d3d1ad512955d4783f0"
@@ -3453,6 +3850,47 @@
     magic-string "^0.25.0"
     string.prototype.matchall "^4.0.6"
 
+"@tailwindcss/postcss7-compat@^2.2.17", "tailwindcss@npm:@tailwindcss/postcss7-compat":
+  version "2.2.17"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/postcss7-compat/-/postcss7-compat-2.2.17.tgz#dc78f3880a2af84163150ff426a39e42b9ae8922"
+  integrity sha512-3h2svqQAqYHxRZ1KjsJjZOVTQ04m29LjfrLjXyZZEJuvUuJN+BCIF9GI8vhE1s0plS0mogd6E6YLg6mu4Wv/Vw==
+  dependencies:
+    arg "^5.0.1"
+    autoprefixer "^9"
+    bytes "^3.0.0"
+    chalk "^4.1.2"
+    chokidar "^3.5.2"
+    color "^4.0.1"
+    cosmiconfig "^7.0.1"
+    detective "^5.2.0"
+    didyoumean "^1.2.2"
+    dlv "^1.1.3"
+    fast-glob "^3.2.7"
+    fs-extra "^10.0.0"
+    glob-parent "^6.0.1"
+    html-tags "^3.1.0"
+    is-color-stop "^1.1.0"
+    is-glob "^4.0.1"
+    lodash "^4.17.21"
+    lodash.topath "^4.5.2"
+    modern-normalize "^1.1.0"
+    node-emoji "^1.11.0"
+    normalize-path "^3.0.0"
+    object-hash "^2.2.0"
+    postcss "^7"
+    postcss-functions "^3"
+    postcss-js "^2"
+    postcss-load-config "^3.1.0"
+    postcss-nested "^4"
+    postcss-selector-parser "^6.0.6"
+    postcss-value-parser "^4.1.0"
+    pretty-hrtime "^1.0.3"
+    purgecss "^4.0.3"
+    quick-lru "^5.1.1"
+    reduce-css-calc "^2.1.8"
+    resolve "^1.20.0"
+    tmp "^0.2.1"
+
 "@tootallnate/once@1":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
@@ -3599,7 +4037,7 @@
     "@types/estree" "*"
     "@types/json-schema" "*"
 
-"@types/estree@*":
+"@types/estree@*", "@types/estree@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.0.tgz#5fb2e536c1ae9bf35366eed879e827fa59ca41c2"
   integrity sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==
@@ -3722,15 +4160,6 @@
     jest-matcher-utils "^27.0.0"
     pretty-format "^27.0.0"
 
-"@types/jsdom@^20.0.0":
-  version "20.0.0"
-  resolved "https://registry.yarnpkg.com/@types/jsdom/-/jsdom-20.0.0.tgz#4414fb629465167f8b7b3804b9e067bdd99f1791"
-  integrity sha512-YfAchFs0yM1QPDrLm2VHe+WHGtqms3NXnXAMolrgrVP6fgBHHXy1ozAbo/dFtPNtZC/m66bPiCTWYmqp1F14gA==
-  dependencies:
-    "@types/node" "*"
-    "@types/tough-cookie" "*"
-    parse5 "^7.0.0"
-
 "@types/json-schema@*", "@types/json-schema@^7.0.4", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.7", "@types/json-schema@^7.0.8", "@types/json-schema@^7.0.9":
   version "7.0.11"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3"
@@ -3847,6 +4276,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/resolve@1.20.2":
+  version "1.20.2"
+  resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-1.20.2.tgz#97d26e00cd4a0423b4af620abecf3e6f442b7975"
+  integrity sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==
+
 "@types/retry@0.12.0":
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/@types/retry/-/retry-0.12.0.tgz#2b35eccfcee7d38cd72ad99232fbd58bffb3c84d"
@@ -3906,11 +4340,6 @@
   dependencies:
     "@types/node" "*"
 
-"@types/tough-cookie@*":
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/@types/tough-cookie/-/tough-cookie-4.0.2.tgz#6286b4c7228d58ab7866d19716f3696e03a09397"
-  integrity sha512-Q5vtl1W5ue16D+nIaW8JWebSSraJVlK+EthKn7e7UcD4KWsaSJ8BqGPXNaPghgtcn/fhvrN17Tv8ksUsQpiplw==
-
 "@types/trusted-types@^2.0.2":
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.2.tgz#fc25ad9943bcac11cceb8168db4f275e0e72e756"
@@ -4118,22 +4547,35 @@
     "@typescript-eslint/types" "5.23.0"
     eslint-visitor-keys "^3.0.0"
 
-"@vercel/nft@^0.21.0":
-  version "0.21.0"
-  resolved "https://registry.yarnpkg.com/@vercel/nft/-/nft-0.21.0.tgz#e0715b1997cd7021a7c7c48b584ef2295fd4b810"
-  integrity sha512-hFCAETfI5cG8l5iAiLhMC2bReC5K7SIybzrxGorv+eGspIbIFsVw7Vg85GovXm/LxA08pIDrAlrhR6GN36XB/Q==
+"@unhead/dom@1.0.15", "@unhead/dom@^1.0.9":
+  version "1.0.15"
+  resolved "https://registry.yarnpkg.com/@unhead/dom/-/dom-1.0.15.tgz#03d65840fa4dea279ad70241e36939aa33ee61c1"
+  integrity sha512-W3P9eGazfQPMZTG4ryb5oOA02Z4o16Jxo8DAihF/7Xmg/FVYY5Up9p9et7Nbb6AKNgt1PEz3Sp0xBaw+F6Uyjw==
   dependencies:
-    "@mapbox/node-pre-gyp" "^1.0.5"
-    acorn "^8.6.0"
-    async-sema "^3.1.1"
-    bindings "^1.4.0"
-    estree-walker "2.0.2"
-    glob "^7.1.3"
-    graceful-fs "^4.2.9"
-    micromatch "^4.0.2"
-    node-gyp-build "^4.2.2"
-    resolve-from "^5.0.0"
-    rollup-pluginutils "^2.8.2"
+    "@unhead/schema" "1.0.15"
+
+"@unhead/schema@1.0.15", "@unhead/schema@^1.0.9":
+  version "1.0.15"
+  resolved "https://registry.yarnpkg.com/@unhead/schema/-/schema-1.0.15.tgz#1e0ac9ff3261ce15adfcd69eb323768ce973811a"
+  integrity sha512-aWgHDHcemcx20zZun2hCFvZC6Ob4h14D4puhknuQoMkMOZcxh2ffYoJHb6mS3TeQRwAXCOsSFIHAgwIbayjk0w==
+  dependencies:
+    "@zhead/schema" "^1.0.9"
+    hookable "^5.4.2"
+
+"@unhead/ssr@^1.0.0", "@unhead/ssr@^1.0.9":
+  version "1.0.15"
+  resolved "https://registry.yarnpkg.com/@unhead/ssr/-/ssr-1.0.15.tgz#96a9d3cd1c2e583d86553214d4e04622e8063304"
+  integrity sha512-WNFljr+HaWdrBVYyKcgLXIk5EldPSKEVJlFbo2ixmSVGnFlqMHMCui/ZrfMLG1QvvFw0ZkXonapkEc/S6loSCQ==
+  dependencies:
+    "@unhead/schema" "1.0.15"
+
+"@unhead/vue@^1.0.9":
+  version "1.0.15"
+  resolved "https://registry.yarnpkg.com/@unhead/vue/-/vue-1.0.15.tgz#b5cc91045e101e82276f9966976a608abe61f957"
+  integrity sha512-D2NQH8fBKdYgTdIDrarx24qDEblgLIwzPDeAY36PyP6ib8oG6oaI+5lrpMG+NtQ7k9LBqL5d6mQgYn/02kdjZg==
+  dependencies:
+    "@unhead/schema" "1.0.15"
+    hookable "^5.4.2"
 
 "@vercel/nft@^0.22.1":
   version "0.22.1"
@@ -4152,16 +4594,6 @@
     resolve-from "^5.0.0"
     rollup-pluginutils "^2.8.2"
 
-"@vitejs/plugin-vue-jsx@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue-jsx/-/plugin-vue-jsx-2.0.0.tgz#9947c72f9ead40cb7950ba5a9e9f7ac4c5b74df1"
-  integrity sha512-WF9ApZ/ivyyW3volQfu0Td0KNPhcccYEaRNzNY1NxRLVJQLSX0nFqquv3e2g7MF74p1XZK4bGtDL2y5i5O5+1A==
-  dependencies:
-    "@babel/core" "^7.18.6"
-    "@babel/plugin-syntax-import-meta" "^7.10.4"
-    "@babel/plugin-transform-typescript" "^7.18.8"
-    "@vue/babel-plugin-jsx" "^1.1.1"
-
 "@vitejs/plugin-vue-jsx@^2.0.1":
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue-jsx/-/plugin-vue-jsx-2.0.1.tgz#563a844964f5b025c828b452d6a9882df7194f9a"
@@ -4172,6 +4604,15 @@
     "@babel/plugin-transform-typescript" "^7.18.12"
     "@vue/babel-plugin-jsx" "^1.1.1"
 
+"@vitejs/plugin-vue-jsx@^2.1.1":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue-jsx/-/plugin-vue-jsx-2.1.1.tgz#7c13aa4e54f5ee8c9f37937b3d8c706c14369478"
+  integrity sha512-JgDhxstQlwnHBvZ1BSnU5mbmyQ14/t5JhREc6YH5kWyu2QdAAOsLF6xgHoIWarj8tddaiwFrNzLbWJPudpXKYA==
+  dependencies:
+    "@babel/core" "^7.19.6"
+    "@babel/plugin-transform-typescript" "^7.20.0"
+    "@vue/babel-plugin-jsx" "^1.1.1"
+
 "@vitejs/plugin-vue@^1.3.0":
   version "1.10.2"
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-1.10.2.tgz#d718479e2789d8a94b63e00f23f1898ba239253a"
@@ -4182,16 +4623,16 @@
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-2.3.3.tgz#fbf80cc039b82ac21a1acb0f0478de8f61fbf600"
   integrity sha512-SmQLDyhz+6lGJhPELsBdzXGc+AcaT8stgkbiTFGpXPe8Tl1tJaBw1A6pxDqDuRsVkD8uscrkx3hA7QDOoKYtyw==
 
-"@vitejs/plugin-vue@^3.0.2":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-3.0.3.tgz#7e3e401ccb30b4380d2279d9849281413f1791ef"
-  integrity sha512-U4zNBlz9mg+TA+i+5QPc3N5lQvdUXENZLO2h0Wdzp56gI1MWhqJOv+6R+d4kOzoaSSq6TnGPBdZAXKOe4lXy6g==
-
 "@vitejs/plugin-vue@^3.0.3":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-3.1.0.tgz#3a423ea6943a450e806da412a911150e928598ed"
   integrity sha512-fmxtHPjSOEIRg6vHYDaem+97iwCUg/uSIaTzp98lhELt2ISOQuDo2hbkBdXod0g15IhfPMQmAxh4heUks2zvDA==
 
+"@vitejs/plugin-vue@^3.2.0":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-3.2.0.tgz#a1484089dd85d6528f435743f84cdd0d215bbb54"
+  integrity sha512-E0tnaL4fr+qkdCNxJ+Xd0yM31UwMkQje76fsDVBBUCoGOUPexu2VDUYHL8P4CwV+zMvWw6nlRw19OnRKmYAJpw==
+
 "@volar/code-gen@0.38.2":
   version "0.38.2"
   resolved "https://registry.yarnpkg.com/@volar/code-gen/-/code-gen-0.38.2.tgz#1eedaba3a12b9d1954dd99d6745f3f2ede0aca58"
@@ -4767,6 +5208,11 @@
   resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.2.1.tgz#6f2948ff002ec46df01420dfeff91de16c5b4092"
   integrity sha512-OEgAMeQXvCoJ+1x8WyQuVZzFo0wcyCmUR3baRVLmKBo1LmYZWMlRiXlux5jd0fqVJu6PfDbOrZItVqUEzLobeQ==
 
+"@vue/devtools-api@^6.4.5":
+  version "6.4.5"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.4.5.tgz#d54e844c1adbb1e677c81c665ecef1a2b4bb8380"
+  integrity sha512-JD5fcdIuFxU4fQyXUu3w2KpAJHzTVdN+p4iOX2lMWSHMOoQdMAcpFLZzm9Z/2nmsoZ1a96QEhZ26e50xLBsgOQ==
+
 "@vue/eslint-config-standard@^6.0.0":
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/@vue/eslint-config-standard/-/eslint-config-standard-6.1.0.tgz#b362ba67c86caa4e7b44481c2303c9dccc2dc037"
@@ -4819,6 +5265,13 @@
   dependencies:
     "@vue/shared" "3.2.38"
 
+"@vue/reactivity@^3.2.45":
+  version "3.2.45"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.2.45.tgz#412a45b574de601be5a4a5d9a8cbd4dee4662ff0"
+  integrity sha512-PRvhCcQcyEVohW0P8iQ7HDcIOXRjZfAsOds3N99X/Dzewy8TVhTCT4uXpAHfoKjVTJRA0O0K+6QNkDIZAxNi3A==
+  dependencies:
+    "@vue/shared" "3.2.45"
+
 "@vue/runtime-core@3.2.37":
   version "3.2.37"
   resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.2.37.tgz#7ba7c54bb56e5d70edfc2f05766e1ca8519966e3"
@@ -4859,6 +5312,11 @@
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.38.tgz#e823f0cb2e85b6bf43430c0d6811b1441c300f3c"
   integrity sha512-dTyhTIRmGXBjxJE+skC8tTWCGLCVc4wQgRRLt8+O9p5ewBAjoBwtCAkLPrtToSr1xltoe3st21Pv953aOZ7alg==
 
+"@vue/shared@3.2.45", "@vue/shared@^3.2.45":
+  version "3.2.45"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.45.tgz#a3fffa7489eafff38d984e23d0236e230c818bc2"
+  integrity sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg==
+
 "@vue/test-utils@2.0.0-beta.14":
   version "2.0.0-beta.14"
   resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-2.0.0-beta.14.tgz#9300d48789b334b52c5514efdc4648f704a7e94b"
@@ -4900,6 +5358,16 @@
   resolved "https://registry.yarnpkg.com/@vueuse/head/-/head-0.7.9.tgz#888ab87667ab6dbe6edba10d176fa91c1b0ec021"
   integrity sha512-5wnRiH2XIUSLLXJDLDDTcpvAg5QXgTIVZl46AU7to/T91KHsdBLHSE4WhRO7kP0jbkAhlxnx64E29cQtwBrMjg==
 
+"@vueuse/head@^1.0.15":
+  version "1.0.22"
+  resolved "https://registry.yarnpkg.com/@vueuse/head/-/head-1.0.22.tgz#66b591d6e4dc636c6578d1c04a96bd6c2e00f3b6"
+  integrity sha512-YmUdbzNdCnhmrAFxGnJS+Rixj+swE+TQC9OEaYDHIro6gE7W11jugcdwVP00HrA4WRQhg+TOQ4YcY2oL/PP1hw==
+  dependencies:
+    "@unhead/dom" "^1.0.9"
+    "@unhead/schema" "^1.0.9"
+    "@unhead/ssr" "^1.0.9"
+    "@unhead/vue" "^1.0.9"
+
 "@webassemblyjs/ast@1.11.1":
   version "1.11.1"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.1.tgz#2bfd767eae1a6996f432ff7e8d7fc75679c0b6a7"
@@ -5053,6 +5521,11 @@
   resolved "https://registry.yarnpkg.com/@zeit/schemas/-/schemas-2.6.0.tgz#004e8e553b4cd53d538bd38eac7bcbf58a867fe3"
   integrity sha512-uUrgZ8AxS+Lio0fZKAipJjAh415JyrOZowliZAzmnJSsf7piVL5w+G0+gFJ0KSu3QRhvui/7zuvpLz03YjXAhg==
 
+"@zhead/schema@^1.0.9":
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/@zhead/schema/-/schema-1.0.9.tgz#edb74b66beda5dd4dcbe50dc351e7da4e0016d5b"
+  integrity sha512-MBubVXXEJX86ZBL6CDK0rYi1mC82zuben1MwwAEe98EFN1w4Oy0l2roJaM51MwQEvZ+WTi6o4lCxUShtLQJk8A==
+
 "@zkochan/cmd-shim@^3.1.0":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@zkochan/cmd-shim/-/cmd-shim-3.1.0.tgz#2ab8ed81f5bb5452a85f25758eb9b8681982fd2e"
@@ -5106,7 +5579,16 @@ acorn-jsx@^5.2.0, acorn-jsx@^5.3.1, acorn-jsx@^5.3.2:
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
-acorn-walk@^7.1.1:
+acorn-node@^1.8.2:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/acorn-node/-/acorn-node-1.8.2.tgz#114c95d64539e53dede23de8b9d96df7c7ae2af8"
+  integrity sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==
+  dependencies:
+    acorn "^7.0.0"
+    acorn-walk "^7.0.0"
+    xtend "^4.0.2"
+
+acorn-walk@^7.0.0, acorn-walk@^7.1.1:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc"
   integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
@@ -5116,7 +5598,7 @@ acorn-walk@^8.0.0, acorn-walk@^8.0.2, acorn-walk@^8.1.1:
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.2.0.tgz#741210f2e2426454508853a2f44d0ab83b7f69c1"
   integrity sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==
 
-acorn@^7.1.1, acorn@^7.4.0:
+acorn@^7.0.0, acorn@^7.1.1, acorn@^7.4.0:
   version "7.4.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
@@ -5131,6 +5613,11 @@ acorn@^8.4.1, acorn@^8.5.0, acorn@^8.8.0:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.0.tgz#88c0187620435c7f6015803f5539dae05a9dbea8"
   integrity sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==
 
+acorn@^8.8.1:
+  version "8.8.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.1.tgz#0a3f9cbecc4ec3bea6f0a80b66ae8dd2da250b73"
+  integrity sha512-7zFpHzhnqYKrkYdUjF1HI1bzd0VygEGX8lFk4k5zVMqHEoES+P+7TKI+EvLO9WVMJ8eekdO0aDEK044xTXwPPA==
+
 address@^1.1.2:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/address/-/address-1.2.0.tgz#d352a62c92fee90f89a693eccd2a8b2139ab02d9"
@@ -5267,6 +5754,13 @@ ansi-escapes@^5.0.0:
   dependencies:
     type-fest "^1.0.2"
 
+ansi-escapes@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-6.0.0.tgz#68c580e87a489f6df3d761028bb93093fde6bd8a"
+  integrity sha512-IG23inYII3dWlU2EyiAiGj6Bwal5GzsgPMwjYGvc1HPE2dgbj4ZB5ToWBKSquKw74nB3TIuOwaI6/jSULzfgrw==
+  dependencies:
+    type-fest "^3.0.0"
+
 ansi-html-community@^0.0.8:
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/ansi-html-community/-/ansi-html-community-0.0.8.tgz#69fbc4d6ccbe383f9736934ae34c3f8290f1bf41"
@@ -5409,6 +5903,11 @@ arg@^4.1.0:
   resolved "https://registry.yarnpkg.com/arg/-/arg-4.1.3.tgz#269fc7ad5b8e42cb63c896d5666017261c144089"
   integrity sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==
 
+arg@^5.0.1:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.2.tgz#c81433cc427c92c4dcf4865142dbca6f15acd59c"
+  integrity sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==
+
 argparse@^1.0.7:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
@@ -5610,6 +6109,18 @@ autoprefixer@^10.2.4:
     picocolors "^1.0.0"
     postcss-value-parser "^4.2.0"
 
+autoprefixer@^10.4.13:
+  version "10.4.13"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.13.tgz#b5136b59930209a321e9fa3dca2e7c4d223e83a8"
+  integrity sha512-49vKpMqcZYsJjwotvt4+h/BCjJVnhGwcLpDt5xkcaOG3eLrG/HUYLagrihYsQ+qrIBgIzX1Rw7a6L8I/ZA1Atg==
+  dependencies:
+    browserslist "^4.21.4"
+    caniuse-lite "^1.0.30001426"
+    fraction.js "^4.2.0"
+    normalize-range "^0.1.2"
+    picocolors "^1.0.0"
+    postcss-value-parser "^4.2.0"
+
 autoprefixer@^10.4.8:
   version "10.4.8"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.8.tgz#92c7a0199e1cfb2ad5d9427bd585a3d75895b9e5"
@@ -5622,7 +6133,7 @@ autoprefixer@^10.4.8:
     picocolors "^1.0.0"
     postcss-value-parser "^4.2.0"
 
-autoprefixer@^9.8.6:
+autoprefixer@^9, autoprefixer@^9.8.6:
   version "9.8.8"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.8.8.tgz#fd4bd4595385fa6f06599de749a4d5f7a474957a"
   integrity sha512-eM9d/swFopRt5gdJ7jrpCwgvEMIayITpojhkkSMRsFHYuH5bkSQ4p/9qTEHtmNudUZh22Tehu7I6CxAW0IXTKA==
@@ -5968,6 +6479,16 @@ browserslist@^4.14.5, browserslist@^4.20.2, browserslist@^4.21.3:
     node-releases "^2.0.6"
     update-browserslist-db "^1.0.5"
 
+browserslist@^4.21.4:
+  version "4.21.4"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.4.tgz#e7496bbc67b9e39dd0f98565feccdcb0d4ff6987"
+  integrity sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw==
+  dependencies:
+    caniuse-lite "^1.0.30001400"
+    electron-to-chromium "^1.4.251"
+    node-releases "^2.0.6"
+    update-browserslist-db "^1.0.9"
+
 bs-logger@0.x:
   version "0.2.6"
   resolved "https://registry.yarnpkg.com/bs-logger/-/bs-logger-0.2.6.tgz#eb7d365307a72cf974cc6cda76b68354ad336bd8"
@@ -6031,7 +6552,7 @@ buffer@^6.0.3:
     base64-js "^1.3.1"
     ieee754 "^1.2.1"
 
-builtin-modules@^3.0.0, builtin-modules@^3.1.0:
+builtin-modules@^3.0.0, builtin-modules@^3.1.0, builtin-modules@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-3.3.0.tgz#cae62812b89801e9656336e46223e030386be7b6"
   integrity sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==
@@ -6048,6 +6569,13 @@ builtins@^4.0.0:
   dependencies:
     semver "^7.0.0"
 
+busboy@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/busboy/-/busboy-1.6.0.tgz#966ea36a9502e43cdb9146962523b92f531f6893"
+  integrity sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==
+  dependencies:
+    streamsearch "^1.1.0"
+
 byline@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/byline/-/byline-5.0.0.tgz#741c5216468eadc457b03410118ad77de8c1ddb1"
@@ -6063,7 +6591,7 @@ bytes@3.0.0:
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
   integrity sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=
 
-bytes@3.1.2:
+bytes@3.1.2, bytes@^3.0.0:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.2.tgz#8b0beeb98605adf1b128fa4386403c009e0221a5"
   integrity sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==
@@ -6094,6 +6622,20 @@ c12@^0.2.8, c12@^0.2.9:
     pathe "^0.3.3"
     rc9 "^1.2.2"
 
+c12@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/c12/-/c12-1.1.0.tgz#2d73596c885f0b990dcd91244b15e3c0405ebbeb"
+  integrity sha512-9KRFWEng+TH8sGST4NNdiKzZGw1Z1CHnPGAmNqAyVP7suluROmBjD8hsiR34f94DdlrvtGvvmiGDsoFXlCBWIw==
+  dependencies:
+    defu "^6.1.1"
+    dotenv "^16.0.3"
+    giget "^1.0.0"
+    jiti "^1.16.0"
+    mlly "^1.0.0"
+    pathe "^1.0.0"
+    pkg-types "^1.0.1"
+    rc9 "^2.0.0"
+
 c8@^7.12.0:
   version "7.12.0"
   resolved "https://registry.yarnpkg.com/c8/-/c8-7.12.0.tgz#402db1c1af4af5249153535d1c84ad70c5c96b14"
@@ -6239,6 +6781,11 @@ camel-case@^4.1.2:
     pascal-case "^3.1.2"
     tslib "^2.0.3"
 
+camelcase-css@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
+  integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
+
 camelcase-keys@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-2.1.0.tgz#308beeaffdf28119051efa1d932213c91b8f92e7"
@@ -6310,6 +6857,11 @@ caniuse-lite@^1.0.30001370, caniuse-lite@^1.0.30001373:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001378.tgz#3d2159bf5a8f9ca093275b0d3ecc717b00f27b67"
   integrity sha512-JVQnfoO7FK7WvU4ZkBRbPjaot4+YqxogSDosHv0Hv5mWpUESmN+UubMU6L/hGz8QlQ2aY5U0vR6MOs6j/CXpNA==
 
+caniuse-lite@^1.0.30001400, caniuse-lite@^1.0.30001426:
+  version "1.0.30001442"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001442.tgz#40337f1cf3be7c637b061e2f78582dc1daec0614"
+  integrity sha512-239m03Pqy0hwxYPYR5JwOIxRJfLTWtle9FV8zosfV5pHg+/51uD4nxcUlM8+mWWGfwKtt8lJNHnD3cWw9VZ6ow==
+
 capture-stack-trace@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/capture-stack-trace/-/capture-stack-trace-1.0.1.tgz#a6c0bbe1f38f3aa0b92238ecb6ff42c344d4135d"
@@ -6388,6 +6940,11 @@ chalk@^5.0.0, chalk@^5.0.1:
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-5.0.1.tgz#ca57d71e82bb534a296df63bbacc4a1c22b2a4b6"
   integrity sha512-Fo07WOYGqMfCWHOzSXOt2CxDbC6skS/jO9ynEcmpANMoPrD+W1r1K6Vx7iNm+AQmETU1Xr2t+n8nzkV9t6xh3w==
 
+chalk@^5.1.2:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-5.2.0.tgz#249623b7d66869c673699fb66d65723e54dfcfb3"
+  integrity sha512-ree3Gqw/nazQAPuJJEy+avdl7QfZMcUvmHIKgEZkGL+xOBzRvup5Hxo6LHuMceSxOabuJLJm5Yp/92R9eMmMvA==
+
 change-case@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/change-case/-/change-case-3.1.0.tgz#0e611b7edc9952df2e8513b27b42de72647dd17e"
@@ -6452,7 +7009,7 @@ check-error@^1.0.2:
   resolved "https://registry.yarnpkg.com/check-error/-/check-error-1.0.2.tgz#574d312edd88bb5dd8912e9286dd6c0aed4aac82"
   integrity sha512-BrgHpW9NURQgzoNyjfq0Wu6VFO6D7IZEmJNdtgNqpzGG8RuNFHt2jQxWlAs4HMe119chBnv+34syEZtc6IhLtA==
 
-"chokidar@>=3.0.0 <4.0.0", chokidar@^3.4.2, chokidar@^3.5.1, chokidar@^3.5.3:
+"chokidar@>=3.0.0 <4.0.0", chokidar@^3.4.2, chokidar@^3.5.1, chokidar@^3.5.2, chokidar@^3.5.3:
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
   integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
@@ -6502,6 +7059,11 @@ ci-info@^3.3.2:
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.3.2.tgz#6d2967ffa407466481c6c90b6e16b3098f080128"
   integrity sha512-xmDt/QIAdeZ9+nfdPsaBCpMvHNLFiLdjj59qjqn+6iPe6YmHGQ35sBnQ8uslRBXFmXkiZQOJRjvQeoGppoTjjg==
 
+ci-info@^3.6.1:
+  version "3.7.1"
+  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.7.1.tgz#708a6cdae38915d597afdf3b145f2f8e1ff55f3f"
+  integrity sha512-4jYS4MOAaCIStSRwiuxc4B8MYhIe676yO1sYGzARnjXkWpmzZMMYxY6zu8WYWDhSuth5zhrQ1rhNSibyyvv4/w==
+
 cjs-module-lexer@^1.0.0:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz#9f84ba3244a512f3a54e5277e8eef4c489864e40"
@@ -6776,7 +7338,7 @@ color-name@^1.0.0, color-name@~1.1.4:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
-color-string@^1.6.0:
+color-string@^1.6.0, color-string@^1.9.0:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.9.1.tgz#4467f9146f036f855b764dfb5bf8582bf342c7a4"
   integrity sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==
@@ -6797,6 +7359,14 @@ color@^3.0.0:
     color-convert "^1.9.3"
     color-string "^1.6.0"
 
+color@^4.0.1:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/color/-/color-4.2.3.tgz#d781ecb5e57224ee43ea9627560107c0e0c6463a"
+  integrity sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==
+  dependencies:
+    color-convert "^2.0.1"
+    color-string "^1.9.0"
+
 colord@^2.9.1:
   version "2.9.2"
   resolved "https://registry.yarnpkg.com/colord/-/colord-2.9.2.tgz#25e2bacbbaa65991422c07ea209e2089428effb1"
@@ -7323,6 +7893,11 @@ css-declaration-sorter@^6.3.0:
   resolved "https://registry.yarnpkg.com/css-declaration-sorter/-/css-declaration-sorter-6.3.0.tgz#72ebd995c8f4532ff0036631f7365cce9759df14"
   integrity sha512-OGT677UGHJTAVMRhPO+HJ4oKln3wkBTwtDFH0ojbqm+MJm6xuDMHp2nkhh/ThaBqq20IbraBQSWKfSLNHQO9Og==
 
+css-declaration-sorter@^6.3.1:
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/css-declaration-sorter/-/css-declaration-sorter-6.3.1.tgz#be5e1d71b7a992433fb1c542c7a1b835e45682ec"
+  integrity sha512-fBffmak0bPAnyqc/HO8C3n2sHrp9wcqQz6ES9koRF2/mLOVAx9zIQ3Y7R29sYCteTPqMCwns4WYQoCX91Xl3+w==
+
 css-loader@^6.5.0:
   version "6.7.1"
   resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-6.7.1.tgz#e98106f154f6e1baf3fc3bc455cb9981c1d5fd2e"
@@ -7391,6 +7966,11 @@ css-tree@^1.1.2, css-tree@^1.1.3:
     mdn-data "2.0.14"
     source-map "^0.6.1"
 
+css-unit-converter@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.2.tgz#4c77f5a1954e6dbff60695ecb214e3270436ab21"
+  integrity sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==
+
 css-what@^3.2.1:
   version "3.4.2"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.4.2.tgz#ea7026fcb01777edbde52124e21f327e7ae950e4"
@@ -7452,25 +8032,60 @@ cssnano-preset-default@^4.0.8:
     postcss-svgo "^4.0.3"
     postcss-unique-selectors "^4.0.1"
 
-cssnano-preset-default@^5.2.12:
-  version "5.2.12"
-  resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-5.2.12.tgz#ebe6596ec7030e62c3eb2b3c09f533c0644a9a97"
-  integrity sha512-OyCBTZi+PXgylz9HAA5kHyoYhfGcYdwFmyaJzWnzxuGRtnMw/kR6ilW9XzlzlRAtB6PLT/r+prYgkef7hngFew==
+cssnano-preset-default@^5.2.12:
+  version "5.2.12"
+  resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-5.2.12.tgz#ebe6596ec7030e62c3eb2b3c09f533c0644a9a97"
+  integrity sha512-OyCBTZi+PXgylz9HAA5kHyoYhfGcYdwFmyaJzWnzxuGRtnMw/kR6ilW9XzlzlRAtB6PLT/r+prYgkef7hngFew==
+  dependencies:
+    css-declaration-sorter "^6.3.0"
+    cssnano-utils "^3.1.0"
+    postcss-calc "^8.2.3"
+    postcss-colormin "^5.3.0"
+    postcss-convert-values "^5.1.2"
+    postcss-discard-comments "^5.1.2"
+    postcss-discard-duplicates "^5.1.0"
+    postcss-discard-empty "^5.1.1"
+    postcss-discard-overridden "^5.1.0"
+    postcss-merge-longhand "^5.1.6"
+    postcss-merge-rules "^5.1.2"
+    postcss-minify-font-values "^5.1.0"
+    postcss-minify-gradients "^5.1.1"
+    postcss-minify-params "^5.1.3"
+    postcss-minify-selectors "^5.2.1"
+    postcss-normalize-charset "^5.1.0"
+    postcss-normalize-display-values "^5.1.0"
+    postcss-normalize-positions "^5.1.1"
+    postcss-normalize-repeat-style "^5.1.1"
+    postcss-normalize-string "^5.1.0"
+    postcss-normalize-timing-functions "^5.1.0"
+    postcss-normalize-unicode "^5.1.0"
+    postcss-normalize-url "^5.1.0"
+    postcss-normalize-whitespace "^5.1.1"
+    postcss-ordered-values "^5.1.3"
+    postcss-reduce-initial "^5.1.0"
+    postcss-reduce-transforms "^5.1.0"
+    postcss-svgo "^5.1.0"
+    postcss-unique-selectors "^5.1.1"
+
+cssnano-preset-default@^5.2.13:
+  version "5.2.13"
+  resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-5.2.13.tgz#e7353b0c57975d1bdd97ac96e68e5c1b8c68e990"
+  integrity sha512-PX7sQ4Pb+UtOWuz8A1d+Rbi+WimBIxJTRyBdgGp1J75VU0r/HFQeLnMYgHiCAp6AR4rqrc7Y4R+1Rjk3KJz6DQ==
   dependencies:
-    css-declaration-sorter "^6.3.0"
+    css-declaration-sorter "^6.3.1"
     cssnano-utils "^3.1.0"
     postcss-calc "^8.2.3"
     postcss-colormin "^5.3.0"
-    postcss-convert-values "^5.1.2"
+    postcss-convert-values "^5.1.3"
     postcss-discard-comments "^5.1.2"
     postcss-discard-duplicates "^5.1.0"
     postcss-discard-empty "^5.1.1"
     postcss-discard-overridden "^5.1.0"
-    postcss-merge-longhand "^5.1.6"
-    postcss-merge-rules "^5.1.2"
+    postcss-merge-longhand "^5.1.7"
+    postcss-merge-rules "^5.1.3"
     postcss-minify-font-values "^5.1.0"
     postcss-minify-gradients "^5.1.1"
-    postcss-minify-params "^5.1.3"
+    postcss-minify-params "^5.1.4"
     postcss-minify-selectors "^5.2.1"
     postcss-normalize-charset "^5.1.0"
     postcss-normalize-display-values "^5.1.0"
@@ -7478,11 +8093,11 @@ cssnano-preset-default@^5.2.12:
     postcss-normalize-repeat-style "^5.1.1"
     postcss-normalize-string "^5.1.0"
     postcss-normalize-timing-functions "^5.1.0"
-    postcss-normalize-unicode "^5.1.0"
+    postcss-normalize-unicode "^5.1.1"
     postcss-normalize-url "^5.1.0"
     postcss-normalize-whitespace "^5.1.1"
     postcss-ordered-values "^5.1.3"
-    postcss-reduce-initial "^5.1.0"
+    postcss-reduce-initial "^5.1.1"
     postcss-reduce-transforms "^5.1.0"
     postcss-svgo "^5.1.0"
     postcss-unique-selectors "^5.1.1"
@@ -7568,7 +8183,7 @@ cssnano@^5.0.0, cssnano@^5.0.1, cssnano@^5.0.6:
     lilconfig "^2.0.3"
     yaml "^1.10.2"
 
-cssnano@^5.1.12, cssnano@^5.1.13:
+cssnano@^5.1.13:
   version "5.1.13"
   resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-5.1.13.tgz#83d0926e72955332dc4802a7070296e6258efc0a"
   integrity sha512-S2SL2ekdEz6w6a2epXn4CmMKU4K3KpcyXLKfAYc9UQQqJRkD/2eLUG0vJ3Db/9OvO5GuAdgXw3pFbR6abqghDQ==
@@ -7577,6 +8192,15 @@ cssnano@^5.1.12, cssnano@^5.1.13:
     lilconfig "^2.0.3"
     yaml "^1.10.2"
 
+cssnano@^5.1.14:
+  version "5.1.14"
+  resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-5.1.14.tgz#07b0af6da73641276fe5a6d45757702ebae2eb05"
+  integrity sha512-Oou7ihiTocbKqi0J1bB+TRJIQX5RMR3JghA8hcWSw9mjBLQ5Y3RWqEDoYG3sRNlAbCIXpqMoZGbq5KDR3vdzgw==
+  dependencies:
+    cssnano-preset-default "^5.2.13"
+    lilconfig "^2.0.3"
+    yaml "^1.10.2"
+
 csso@^4.0.2, csso@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/csso/-/csso-4.2.0.tgz#ea3a561346e8dc9f546d6febedd50187cf389529"
@@ -7813,6 +8437,11 @@ define-property@^2.0.2:
     is-descriptor "^1.0.2"
     isobject "^3.0.1"
 
+defined@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.1.tgz#c0b9db27bfaffd95d6f61399419b893df0f91ebf"
+  integrity sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==
+
 defu@^5.0.0, defu@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/defu/-/defu-5.0.1.tgz#a034278f9b032bf0845d261aa75e9ad98da878ac"
@@ -7828,6 +8457,11 @@ defu@^6.1.0:
   resolved "https://registry.yarnpkg.com/defu/-/defu-6.1.0.tgz#7a5411655da73335c7d933256911f17c74443e2d"
   integrity sha512-pOFYRTIhoKujrmbTRhcW5lYQLBXw/dlTwfI8IguF1QCDJOcJzNH1w+YFjxqy6BAuJrClTy6MUE8q+oKJ2FLsIw==
 
+defu@^6.1.1:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/defu/-/defu-6.1.1.tgz#a12c712349197c545dc61d3cd3b607b4cc7ef0c1"
+  integrity sha512-aA964RUCsBt0FGoNIlA3uFgo2hO+WWC0fiC6DBps/0SFzkKcYoM/3CzVLIa5xSsrFjdioMdYgAIbwo80qp2MoA==
+
 del@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/del/-/del-5.1.0.tgz#d9487c94e367410e6eff2925ee58c0c84a75b3a7"
@@ -7877,6 +8511,11 @@ destr@^1.1.1:
   resolved "https://registry.yarnpkg.com/destr/-/destr-1.1.1.tgz#910457d10a2f2f247add4ca4fdb4a03adcc49079"
   integrity sha512-QqkneF8LrYmwATMdnuD2MLI3GHQIcBnG6qFC2q9bSH430VTCDAVjcspPmUaKhPGtAtPAftIUFqY1obQYQuwmbg==
 
+destr@^1.2.0, destr@^1.2.1, destr@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/destr/-/destr-1.2.2.tgz#7ba9befcafb645a50e76b260449c63927b51e22f"
+  integrity sha512-lrbCJwD9saUQrqUfXvl6qoM+QN3W7tLV5pAOs+OqOmopCCz/JkE05MHedJR1xfk4IAnZuJXPVuN5+7jNA2ZCiA==
+
 destroy@1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.2.0.tgz#4803735509ad8be552934c67df614f94e66fa015"
@@ -7907,6 +8546,15 @@ detect-node@^2.0.4:
   resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.1.0.tgz#c9c70775a49c3d03bc2c06d9a73be550f978f8b1"
   integrity sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==
 
+detective@^5.2.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/detective/-/detective-5.2.1.tgz#6af01eeda11015acb0e73f933242b70f24f91034"
+  integrity sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==
+  dependencies:
+    acorn-node "^1.8.2"
+    defined "^1.0.0"
+    minimist "^1.2.6"
+
 dezalgo@^1.0.0:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/dezalgo/-/dezalgo-1.0.4.tgz#751235260469084c132157dfa857f386d4c33d81"
@@ -7915,6 +8563,11 @@ dezalgo@^1.0.0:
     asap "^2.0.0"
     wrappy "1"
 
+didyoumean@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
+  integrity sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==
+
 diff-sequences@^26.6.2:
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-26.6.2.tgz#48ba99157de1923412eed41db6b6d4aa9ca7c0b1"
@@ -7944,6 +8597,11 @@ dir-glob@^3.0.1:
   dependencies:
     path-type "^4.0.0"
 
+dlv@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/dlv/-/dlv-1.1.3.tgz#5c198a8a11453596e751494d49874bc7732f2e79"
+  integrity sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==
+
 dns-equal@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/dns-equal/-/dns-equal-1.0.0.tgz#b39e7f1da6eb0a75ba9c17324b34753c47e0654d"
@@ -8093,6 +8751,11 @@ dotenv@^16.0.1:
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.0.1.tgz#8f8f9d94876c35dac989876a5d3a82a267fdce1d"
   integrity sha512-1K6hR6wtk2FviQ4kEiSjFiH5rpzEVi8WW0x96aztHVMhEspNpc4DVOUTEHtEva5VThQ8IaBX1Pe4gSzpVVUsKQ==
 
+dotenv@^16.0.3:
+  version "16.0.3"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.0.3.tgz#115aec42bac5053db3c456db30cc243a5a836a07"
+  integrity sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==
+
 duplexer3@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2"
@@ -8176,6 +8839,11 @@ electron-to-chromium@^1.4.118, electron-to-chromium@^1.4.202:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.225.tgz#3e27bdd157cbaf19768141f2e0f0f45071e52338"
   integrity sha512-ICHvGaCIQR3P88uK8aRtx8gmejbVJyC6bB4LEC3anzBrIzdzC7aiZHY4iFfXhN4st6I7lMO0x4sgBHf/7kBvRw==
 
+electron-to-chromium@^1.4.251:
+  version "1.4.284"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.284.tgz#61046d1e4cab3a25238f6bf7413795270f125592"
+  integrity sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==
+
 emittery@^0.10.2:
   version "0.10.2"
   resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.10.2.tgz#902eec8aedb8c41938c46e9385e9db7e03182933"
@@ -8268,11 +8936,6 @@ entities@^2.0.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
   integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
 
-entities@^4.3.0:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/entities/-/entities-4.3.1.tgz#c34062a94c865c322f9d67b4384e4169bcede6a4"
-  integrity sha512-o4q/dYJlmyjP2zfnaWDUC6A3BQFmVTX+tZPezK7k0GLSU9QYCauscf5Y+qcEPzKL+EixVouYDgLQK5H9GrLpkg==
-
 entities@~2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.1.0.tgz#992d3129cf7df6870b96c57858c249a120f8b8b5"
@@ -8386,6 +9049,11 @@ esbuild-android-64@0.14.49:
   resolved "https://registry.yarnpkg.com/esbuild-android-64/-/esbuild-android-64-0.14.49.tgz#9e4682c36dcf6e7b71b73d2a3723a96e0fdc5054"
   integrity sha512-vYsdOTD+yi+kquhBiFWl3tyxnj2qZJsl4tAqwhT90ktUdnyTizgle7TjNx6Ar1bN7wcwWqZ9QInfdk2WVagSww==
 
+esbuild-android-64@0.15.18:
+  version "0.15.18"
+  resolved "https://registry.yarnpkg.com/esbuild-android-64/-/esbuild-android-64-0.15.18.tgz#20a7ae1416c8eaade917fb2453c1259302c637a5"
+  integrity sha512-wnpt3OXRhcjfIDSZu9bnzT4/TNTDsOUvip0foZOUBG7QbSt//w3QV4FInVJxNhKc/ErhUxc5z4QjHtMi7/TbgA==
+
 esbuild-android-64@0.15.7:
   version "0.15.7"
   resolved "https://registry.yarnpkg.com/esbuild-android-64/-/esbuild-android-64-0.15.7.tgz#a521604d8c4c6befc7affedc897df8ccde189bea"
@@ -8401,6 +9069,11 @@ esbuild-android-arm64@0.14.49:
   resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.14.49.tgz#9861b1f7e57d1dd1f23eeef6198561c5f34b51f6"
   integrity sha512-g2HGr/hjOXCgSsvQZ1nK4nW/ei8JUx04Li74qub9qWrStlysaVmadRyTVuW32FGIpLQyc5sUjjZopj49eGGM2g==
 
+esbuild-android-arm64@0.15.18:
+  version "0.15.18"
+  resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.15.18.tgz#9cc0ec60581d6ad267568f29cf4895ffdd9f2f04"
+  integrity sha512-G4xu89B8FCzav9XU8EjsXacCKSG2FT7wW9J6hOc18soEHJdtWu03L3TQDGf0geNxfLTtxENKBzMSq9LlbjS8OQ==
+
 esbuild-android-arm64@0.15.7:
   version "0.15.7"
   resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.15.7.tgz#307b81f1088bf1e81dfe5f3d1d63a2d2a2e3e68e"
@@ -8416,6 +9089,11 @@ esbuild-darwin-64@0.14.49:
   resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.14.49.tgz#fd30a5ebe28704a3a117126c60f98096c067c8d1"
   integrity sha512-3rvqnBCtX9ywso5fCHixt2GBCUsogNp9DjGmvbBohh31Ces34BVzFltMSxJpacNki96+WIcX5s/vum+ckXiLYg==
 
+esbuild-darwin-64@0.15.18:
+  version "0.15.18"
+  resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.15.18.tgz#428e1730ea819d500808f220fbc5207aea6d4410"
+  integrity sha512-2WAvs95uPnVJPuYKP0Eqx+Dl/jaYseZEUUT1sjg97TJa4oBtbAKnPnl3b5M9l51/nbx7+QAEtuummJZW0sBEmg==
+
 esbuild-darwin-64@0.15.7:
   version "0.15.7"
   resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.15.7.tgz#270117b0c4ec6bcbc5cf3a297a7d11954f007e11"
@@ -8431,6 +9109,11 @@ esbuild-darwin-arm64@0.14.49:
   resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.49.tgz#c04a3a57dad94a972c66a697a68a25aa25947f41"
   integrity sha512-XMaqDxO846srnGlUSJnwbijV29MTKUATmOLyQSfswbK/2X5Uv28M9tTLUJcKKxzoo9lnkYPsx2o8EJcTYwCs/A==
 
+esbuild-darwin-arm64@0.15.18:
+  version "0.15.18"
+  resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.15.18.tgz#b6dfc7799115a2917f35970bfbc93ae50256b337"
+  integrity sha512-tKPSxcTJ5OmNb1btVikATJ8NftlyNlc8BVNtyT/UAr62JFOhwHlnoPrhYWz09akBLHI9nElFVfWSTSRsrZiDUA==
+
 esbuild-darwin-arm64@0.15.7:
   version "0.15.7"
   resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.15.7.tgz#97851eacd11dacb7719713602e3319e16202fc77"
@@ -8446,6 +9129,11 @@ esbuild-freebsd-64@0.14.49:
   resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.49.tgz#c404dbd66c98451395b1eef0fa38b73030a7be82"
   integrity sha512-NJ5Q6AjV879mOHFri+5lZLTp5XsO2hQ+KSJYLbfY9DgCu8s6/Zl2prWXVANYTeCDLlrIlNNYw8y34xqyLDKOmQ==
 
+esbuild-freebsd-64@0.15.18:
+  version "0.15.18"
+  resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.15.18.tgz#4e190d9c2d1e67164619ae30a438be87d5eedaf2"
+  integrity sha512-TT3uBUxkteAjR1QbsmvSsjpKjOX6UkCstr8nMr+q7zi3NuZ1oIpa8U41Y8I8dJH2fJgdC3Dj3CXO5biLQpfdZA==
+
 esbuild-freebsd-64@0.15.7:
   version "0.15.7"
   resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.15.7.tgz#1de15ffaf5ae916aa925800aa6d02579960dd8c4"
@@ -8461,6 +9149,11 @@ esbuild-freebsd-arm64@0.14.49:
   resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.49.tgz#b62cec96138ebc5937240ce3e1b97902963ea74a"
   integrity sha512-lFLtgXnAc3eXYqj5koPlBZvEbBSOSUbWO3gyY/0+4lBdRqELyz4bAuamHvmvHW5swJYL7kngzIZw6kdu25KGOA==
 
+esbuild-freebsd-arm64@0.15.18:
+  version "0.15.18"
+  resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.15.18.tgz#18a4c0344ee23bd5a6d06d18c76e2fd6d3f91635"
+  integrity sha512-R/oVr+X3Tkh+S0+tL41wRMbdWtpWB8hEAMsOXDumSSa6qJR89U0S/PpLXrGF7Wk/JykfpWNokERUpCeHDl47wA==
+
 esbuild-freebsd-arm64@0.15.7:
   version "0.15.7"
   resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.15.7.tgz#0f160dbf5c9a31a1d8dd87acbbcb1a04b7031594"
@@ -8476,6 +9169,11 @@ esbuild-linux-32@0.14.49:
   resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.14.49.tgz#495b1cc011b8c64d8bbaf65509c1e7135eb9ddbf"
   integrity sha512-zTTH4gr2Kb8u4QcOpTDVn7Z8q7QEIvFl/+vHrI3cF6XOJS7iEI1FWslTo3uofB2+mn6sIJEQD9PrNZKoAAMDiA==
 
+esbuild-linux-32@0.15.18:
+  version "0.15.18"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.15.18.tgz#9a329731ee079b12262b793fb84eea762e82e0ce"
+  integrity sha512-lphF3HiCSYtaa9p1DtXndiQEeQDKPl9eN/XNoBf2amEghugNuqXNZA/ZovthNE2aa4EN43WroO0B85xVSjYkbg==
+
 esbuild-linux-32@0.15.7:
   version "0.15.7"
   resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.15.7.tgz#422eb853370a5e40bdce8b39525380de11ccadec"
@@ -8491,6 +9189,11 @@ esbuild-linux-64@0.14.49:
   resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.14.49.tgz#3f28dd8f986e6ff42f38888ee435a9b1fb916a56"
   integrity sha512-hYmzRIDzFfLrB5c1SknkxzM8LdEUOusp6M2TnuQZJLRtxTgyPnZZVtyMeCLki0wKgYPXkFsAVhi8vzo2mBNeTg==
 
+esbuild-linux-64@0.15.18:
+  version "0.15.18"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.15.18.tgz#532738075397b994467b514e524aeb520c191b6c"
+  integrity sha512-hNSeP97IviD7oxLKFuii5sDPJ+QHeiFTFLoLm7NZQligur8poNOWGIgpQ7Qf8Balb69hptMZzyOBIPtY09GZYw==
+
 esbuild-linux-64@0.15.7:
   version "0.15.7"
   resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.15.7.tgz#f89c468453bb3194b14f19dc32e0b99612e81d2b"
@@ -8506,6 +9209,11 @@ esbuild-linux-arm64@0.14.49:
   resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.49.tgz#a52e99ae30246566dc5f33e835aa6ca98ef70e33"
   integrity sha512-KLQ+WpeuY+7bxukxLz5VgkAAVQxUv67Ft4DmHIPIW+2w3ObBPQhqNoeQUHxopoW/aiOn3m99NSmSV+bs4BSsdA==
 
+esbuild-linux-arm64@0.15.18:
+  version "0.15.18"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.15.18.tgz#5372e7993ac2da8f06b2ba313710d722b7a86e5d"
+  integrity sha512-54qr8kg/6ilcxd+0V3h9rjT4qmjc0CccMVWrjOEM/pEcUzt8X62HfBSeZfT2ECpM7104mk4yfQXkosY8Quptug==
+
 esbuild-linux-arm64@0.15.7:
   version "0.15.7"
   resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.15.7.tgz#68a79d6eb5e032efb9168a0f340ccfd33d6350a1"
@@ -8521,6 +9229,11 @@ esbuild-linux-arm@0.14.49:
   resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.14.49.tgz#7c33d05a64ec540cf7474834adaa57b3167bbe97"
   integrity sha512-iE3e+ZVv1Qz1Sy0gifIsarJMQ89Rpm9mtLSRtG3AH0FPgAzQ5Z5oU6vYzhc/3gSPi2UxdCOfRhw2onXuFw/0lg==
 
+esbuild-linux-arm@0.15.18:
+  version "0.15.18"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.15.18.tgz#e734aaf259a2e3d109d4886c9e81ec0f2fd9a9cc"
+  integrity sha512-UH779gstRblS4aoS2qpMl3wjg7U0j+ygu3GjIeTonCcN79ZvpPee12Qun3vcdxX+37O5LFxz39XeW2I9bybMVA==
+
 esbuild-linux-arm@0.15.7:
   version "0.15.7"
   resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.15.7.tgz#2b7c784d0b3339878013dfa82bf5eaf82c7ce7d3"
@@ -8536,6 +9249,11 @@ esbuild-linux-mips64le@0.14.49:
   resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.49.tgz#ed062bd844b587be649443831eb84ba304685f25"
   integrity sha512-n+rGODfm8RSum5pFIqFQVQpYBw+AztL8s6o9kfx7tjfK0yIGF6tm5HlG6aRjodiiKkH2xAiIM+U4xtQVZYU4rA==
 
+esbuild-linux-mips64le@0.15.18:
+  version "0.15.18"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.15.18.tgz#c0487c14a9371a84eb08fab0e1d7b045a77105eb"
+  integrity sha512-Mk6Ppwzzz3YbMl/ZZL2P0q1tnYqh/trYZ1VfNP47C31yT0K8t9s7Z077QrDA/guU60tGNp2GOwCQnp+DYv7bxQ==
+
 esbuild-linux-mips64le@0.15.7:
   version "0.15.7"
   resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.15.7.tgz#bb8330a50b14aa84673816cb63cc6c8b9beb62cc"
@@ -8551,6 +9269,11 @@ esbuild-linux-ppc64le@0.14.49:
   resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.49.tgz#c0786fb5bddffd90c10a2078181513cbaf077958"
   integrity sha512-WP9zR4HX6iCBmMFH+XHHng2LmdoIeUmBpL4aL2TR8ruzXyT4dWrJ5BSbT8iNo6THN8lod6GOmYDLq/dgZLalGw==
 
+esbuild-linux-ppc64le@0.15.18:
+  version "0.15.18"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.15.18.tgz#af048ad94eed0ce32f6d5a873f7abe9115012507"
+  integrity sha512-b0XkN4pL9WUulPTa/VKHx2wLCgvIAbgwABGnKMY19WhKZPT+8BxhZdqz6EgkqCLld7X5qiCY2F/bfpUUlnFZ9w==
+
 esbuild-linux-ppc64le@0.15.7:
   version "0.15.7"
   resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.15.7.tgz#52544e7fa992811eb996674090d0bc41f067a14b"
@@ -8561,6 +9284,11 @@ esbuild-linux-riscv64@0.14.49:
   resolved "https://registry.yarnpkg.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.49.tgz#579b0e7cc6fce4bfc698e991a52503bb616bec49"
   integrity sha512-h66ORBz+Dg+1KgLvzTVQEA1LX4XBd1SK0Fgbhhw4akpG/YkN8pS6OzYI/7SGENiN6ao5hETRDSkVcvU9NRtkMQ==
 
+esbuild-linux-riscv64@0.15.18:
+  version "0.15.18"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.15.18.tgz#423ed4e5927bd77f842bd566972178f424d455e6"
+  integrity sha512-ba2COaoF5wL6VLZWn04k+ACZjZ6NYniMSQStodFKH/Pu6RxzQqzsmjR1t9QC89VYJxBeyVPTaHuBMCejl3O/xg==
+
 esbuild-linux-riscv64@0.15.7:
   version "0.15.7"
   resolved "https://registry.yarnpkg.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.15.7.tgz#a43ae60697992b957e454cbb622f7ee5297e8159"
@@ -8571,6 +9299,11 @@ esbuild-linux-s390x@0.14.49:
   resolved "https://registry.yarnpkg.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.49.tgz#09eb15c753e249a500b4e28d07c5eef7524a9740"
   integrity sha512-DhrUoFVWD+XmKO1y7e4kNCqQHPs6twz6VV6Uezl/XHYGzM60rBewBF5jlZjG0nCk5W/Xy6y1xWeopkrhFFM0sQ==
 
+esbuild-linux-s390x@0.15.18:
+  version "0.15.18"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.15.18.tgz#21d21eaa962a183bfb76312e5a01cc5ae48ce8eb"
+  integrity sha512-VbpGuXEl5FCs1wDVp93O8UIzl3ZrglgnSQ+Hu79g7hZu6te6/YHgVJxCM2SqfIila0J3k0csfnf8VD2W7u2kzQ==
+
 esbuild-linux-s390x@0.15.7:
   version "0.15.7"
   resolved "https://registry.yarnpkg.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.15.7.tgz#8c76a125dd10a84c166294d77416caaf5e1c7b64"
@@ -8586,6 +9319,11 @@ esbuild-netbsd-64@0.14.49:
   resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.49.tgz#f7337cd2bddb7cc9d100d19156f36c9ca117b58d"
   integrity sha512-BXaUwFOfCy2T+hABtiPUIpWjAeWK9P8O41gR4Pg73hpzoygVGnj0nI3YK4SJhe52ELgtdgWP/ckIkbn2XaTxjQ==
 
+esbuild-netbsd-64@0.15.18:
+  version "0.15.18"
+  resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.15.18.tgz#ae75682f60d08560b1fe9482bfe0173e5110b998"
+  integrity sha512-98ukeCdvdX7wr1vUYQzKo4kQ0N2p27H7I11maINv73fVEXt2kyh4K4m9f35U1K43Xc2QGXlzAw0K9yoU7JUjOg==
+
 esbuild-netbsd-64@0.15.7:
   version "0.15.7"
   resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.15.7.tgz#19b2e75449d7d9c32b5d8a222bac2f1e0c3b08fd"
@@ -8601,6 +9339,11 @@ esbuild-openbsd-64@0.14.49:
   resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.49.tgz#1f8bdc49f8a44396e73950a3fb6b39828563631d"
   integrity sha512-lP06UQeLDGmVPw9Rg437Btu6J9/BmyhdoefnQ4gDEJTtJvKtQaUcOQrhjTq455ouZN4EHFH1h28WOJVANK41kA==
 
+esbuild-openbsd-64@0.15.18:
+  version "0.15.18"
+  resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.15.18.tgz#79591a90aa3b03e4863f93beec0d2bab2853d0a8"
+  integrity sha512-yK5NCcH31Uae076AyQAXeJzt/vxIo9+omZRKj1pauhk3ITuADzuOx5N2fdHrAKPxN+zH3w96uFKlY7yIn490xQ==
+
 esbuild-openbsd-64@0.15.7:
   version "0.15.7"
   resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.15.7.tgz#1357b2bf72fd037d9150e751420a1fe4c8618ad7"
@@ -8616,6 +9359,11 @@ esbuild-sunos-64@0.14.49:
   resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.14.49.tgz#47d042739365b61aa8ca642adb69534a8eef9f7a"
   integrity sha512-4c8Zowp+V3zIWje329BeLbGh6XI9c/rqARNaj5yPHdC61pHI9UNdDxT3rePPJeWcEZVKjkiAS6AP6kiITp7FSw==
 
+esbuild-sunos-64@0.15.18:
+  version "0.15.18"
+  resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.15.18.tgz#fd528aa5da5374b7e1e93d36ef9b07c3dfed2971"
+  integrity sha512-On22LLFlBeLNj/YF3FT+cXcyKPEI263nflYlAhz5crxtp3yRG1Ugfr7ITyxmCmjm4vbN/dGrb/B7w7U8yJR9yw==
+
 esbuild-sunos-64@0.15.7:
   version "0.15.7"
   resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.15.7.tgz#87ab2c604592a9c3c763e72969da0d72bcde91d2"
@@ -8631,6 +9379,11 @@ esbuild-windows-32@0.14.49:
   resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.14.49.tgz#79198c88ec9bde163c18a6b430c34eab098ec21a"
   integrity sha512-q7Rb+J9yHTeKr9QTPDYkqfkEj8/kcKz9lOabDuvEXpXuIcosWCJgo5Z7h/L4r7rbtTH4a8U2FGKb6s1eeOHmJA==
 
+esbuild-windows-32@0.15.18:
+  version "0.15.18"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.15.18.tgz#0e92b66ecdf5435a76813c4bc5ccda0696f4efc3"
+  integrity sha512-o+eyLu2MjVny/nt+E0uPnBxYuJHBvho8vWsC2lV61A7wwTWC3jkN2w36jtA+yv1UgYkHRihPuQsL23hsCYGcOQ==
+
 esbuild-windows-32@0.15.7:
   version "0.15.7"
   resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.15.7.tgz#c81e688c0457665a8d463a669e5bf60870323e99"
@@ -8646,6 +9399,11 @@ esbuild-windows-64@0.14.49:
   resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.14.49.tgz#b36b230d18d1ee54008e08814c4799c7806e8c79"
   integrity sha512-+Cme7Ongv0UIUTniPqfTX6mJ8Deo7VXw9xN0yJEN1lQMHDppTNmKwAM3oGbD/Vqff+07K2gN0WfNkMohmG+dVw==
 
+esbuild-windows-64@0.15.18:
+  version "0.15.18"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.15.18.tgz#0fc761d785414284fc408e7914226d33f82420d0"
+  integrity sha512-qinug1iTTaIIrCorAUjR0fcBk24fjzEedFYhhispP8Oc7SFvs+XeW3YpAKiKp8dRpizl4YYAhxMjlftAMJiaUw==
+
 esbuild-windows-64@0.15.7:
   version "0.15.7"
   resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.15.7.tgz#2421d1ae34b0561a9d6767346b381961266c4eff"
@@ -8661,6 +9419,11 @@ esbuild-windows-arm64@0.14.49:
   resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.49.tgz#d83c03ff6436caf3262347cfa7e16b0a8049fae7"
   integrity sha512-v+HYNAXzuANrCbbLFJ5nmO3m5y2PGZWLe3uloAkLt87aXiO2mZr3BTmacZdjwNkNEHuH3bNtN8cak+mzVjVPfA==
 
+esbuild-windows-arm64@0.15.18:
+  version "0.15.18"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.15.18.tgz#5b5bdc56d341d0922ee94965c89ee120a6a86eb7"
+  integrity sha512-q9bsYzegpZcLziq0zgUi5KqGVtfhjxGbnksaBFYmWLxeV/S1fK4OLdq2DFYnXcLMjlZw2L0jLsk1eGoB522WXQ==
+
 esbuild-windows-arm64@0.15.7:
   version "0.15.7"
   resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.15.7.tgz#7d5e9e060a7b454cb2f57f84a3f3c23c8f30b7d2"
@@ -8715,7 +9478,35 @@ esbuild@^0.14.14, esbuild@^0.14.27, esbuild@^0.14.47, esbuild@~0.14.47:
     esbuild-windows-64 "0.14.49"
     esbuild-windows-arm64 "0.14.49"
 
-esbuild@^0.15.1, esbuild@^0.15.6, esbuild@^0.15.7:
+esbuild@^0.15.14, esbuild@^0.15.9:
+  version "0.15.18"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.15.18.tgz#ea894adaf3fbc036d32320a00d4d6e4978a2f36d"
+  integrity sha512-x/R72SmW3sSFRm5zrrIjAhCeQSAWoni3CmHEqfQrZIQTM3lVCdehdwuIqaOtfC2slvpdlLa62GYoN8SxT23m6Q==
+  optionalDependencies:
+    "@esbuild/android-arm" "0.15.18"
+    "@esbuild/linux-loong64" "0.15.18"
+    esbuild-android-64 "0.15.18"
+    esbuild-android-arm64 "0.15.18"
+    esbuild-darwin-64 "0.15.18"
+    esbuild-darwin-arm64 "0.15.18"
+    esbuild-freebsd-64 "0.15.18"
+    esbuild-freebsd-arm64 "0.15.18"
+    esbuild-linux-32 "0.15.18"
+    esbuild-linux-64 "0.15.18"
+    esbuild-linux-arm "0.15.18"
+    esbuild-linux-arm64 "0.15.18"
+    esbuild-linux-mips64le "0.15.18"
+    esbuild-linux-ppc64le "0.15.18"
+    esbuild-linux-riscv64 "0.15.18"
+    esbuild-linux-s390x "0.15.18"
+    esbuild-netbsd-64 "0.15.18"
+    esbuild-openbsd-64 "0.15.18"
+    esbuild-sunos-64 "0.15.18"
+    esbuild-windows-32 "0.15.18"
+    esbuild-windows-64 "0.15.18"
+    esbuild-windows-arm64 "0.15.18"
+
+esbuild@^0.15.6, esbuild@^0.15.7:
   version "0.15.7"
   resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.15.7.tgz#8a1f1aff58671a3199dd24df95314122fc1ddee8"
   integrity sha512-7V8tzllIbAQV1M4QoE52ImKu8hT/NLGlGXkiDsbEU5PS6K8Mn09ZnYoS+dcmHxOS9CRsV4IRAMdT3I67IyUNXw==
@@ -8742,6 +9533,34 @@ esbuild@^0.15.1, esbuild@^0.15.6, esbuild@^0.15.7:
     esbuild-windows-64 "0.15.7"
     esbuild-windows-arm64 "0.15.7"
 
+esbuild@^0.16.3:
+  version "0.16.16"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.16.16.tgz#e8a27820a30cc1449066f9bbe8916b145dbc9046"
+  integrity sha512-24JyKq10KXM5EBIgPotYIJ2fInNWVVqflv3gicIyQqfmUqi4HvDW1VR790cBgLJHCl96Syy7lhoz7tLFcmuRmg==
+  optionalDependencies:
+    "@esbuild/android-arm" "0.16.16"
+    "@esbuild/android-arm64" "0.16.16"
+    "@esbuild/android-x64" "0.16.16"
+    "@esbuild/darwin-arm64" "0.16.16"
+    "@esbuild/darwin-x64" "0.16.16"
+    "@esbuild/freebsd-arm64" "0.16.16"
+    "@esbuild/freebsd-x64" "0.16.16"
+    "@esbuild/linux-arm" "0.16.16"
+    "@esbuild/linux-arm64" "0.16.16"
+    "@esbuild/linux-ia32" "0.16.16"
+    "@esbuild/linux-loong64" "0.16.16"
+    "@esbuild/linux-mips64el" "0.16.16"
+    "@esbuild/linux-ppc64" "0.16.16"
+    "@esbuild/linux-riscv64" "0.16.16"
+    "@esbuild/linux-s390x" "0.16.16"
+    "@esbuild/linux-x64" "0.16.16"
+    "@esbuild/netbsd-x64" "0.16.16"
+    "@esbuild/openbsd-x64" "0.16.16"
+    "@esbuild/sunos-x64" "0.16.16"
+    "@esbuild/win32-arm64" "0.16.16"
+    "@esbuild/win32-ia32" "0.16.16"
+    "@esbuild/win32-x64" "0.16.16"
+
 escalade@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
@@ -9401,6 +10220,16 @@ externality@^0.2.2:
     pathe "^0.3.0"
     ufo "^0.8.3"
 
+externality@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/externality/-/externality-1.0.0.tgz#8e116aab414a4e11ff5e9aaf31617dd5e56cb069"
+  integrity sha512-MAU9ci3XdpqOX1aoIoyL2DMzW97P8LYeJxIUkfXhOfsrkH4KLHFaYDwKN0B2l6tqedVJWiTIJtWmxmZfa05vOQ==
+  dependencies:
+    enhanced-resolve "^5.10.0"
+    mlly "^1.0.0"
+    pathe "^1.0.0"
+    ufo "^1.0.0"
+
 extglob@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/extglob/-/extglob-2.0.4.tgz#ad00fe4dc612a9232e8718711dc5cb5ab0285543"
@@ -9549,6 +10378,14 @@ figures@^4.0.1:
     escape-string-regexp "^5.0.0"
     is-unicode-supported "^1.2.0"
 
+figures@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/figures/-/figures-5.0.0.tgz#126cd055052dea699f8a54e8c9450e6ecfc44d5f"
+  integrity sha512-ej8ksPF4x6e5wvK9yevct0UCXh8TTFlWGVLlgjZuoBH1HwjIfKE/IdL5mq89sFA7zELi1VhKpmtDnrs7zWyeyg==
+  dependencies:
+    escape-string-regexp "^5.0.0"
+    is-unicode-supported "^1.2.0"
+
 file-entry-cache@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"
@@ -9714,7 +10551,7 @@ flat-cache@^3.0.4:
     flatted "^3.1.0"
     rimraf "^3.0.2"
 
-flat@^5.0.0:
+flat@^5.0.0, flat@^5.0.2:
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/flat/-/flat-5.0.2.tgz#8ca6fe332069ffa9d324c327198c598259ceb241"
   integrity sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==
@@ -10132,6 +10969,19 @@ getpass@^0.1.1:
   dependencies:
     assert-plus "^1.0.0"
 
+giget@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/giget/-/giget-1.0.0.tgz#fdd7e61a84996b19e00d2d4a6a65c60cc1f61c3d"
+  integrity sha512-KWELZn3Nxq5+0So485poHrFriK9Bn3V/x9y+wgqrHkbmnGbjfLmZ685/SVA/ovW+ewoqW0gVI47pI4yW/VNobQ==
+  dependencies:
+    colorette "^2.0.19"
+    defu "^6.1.1"
+    https-proxy-agent "^5.0.1"
+    mri "^1.2.0"
+    node-fetch-native "^1.0.1"
+    pathe "^1.0.0"
+    tar "^6.1.12"
+
 git-branch@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/git-branch/-/git-branch-1.0.0.tgz#64cc7dd75da2d81a9d4679087c1f8b56e6bd2d3d"
@@ -10204,6 +11054,14 @@ git-up@^6.0.0:
     is-ssh "^1.4.0"
     parse-url "^7.0.2"
 
+git-up@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/git-up/-/git-up-7.0.0.tgz#bace30786e36f56ea341b6f69adfd83286337467"
+  integrity sha512-ONdIrbBCFusq1Oy0sC71F5azx8bVkvtZtMJAsv+a6lz5YAmbNnLD6HAB4gptHZVLPR8S2/kVN6Gab7lryq5+lQ==
+  dependencies:
+    is-ssh "^1.4.0"
+    parse-url "^8.1.0"
+
 git-url-parse@^11.1.2:
   version "11.6.0"
   resolved "https://registry.yarnpkg.com/git-url-parse/-/git-url-parse-11.6.0.tgz#c634b8de7faa66498a2b88932df31702c67df605"
@@ -10218,6 +11076,13 @@ git-url-parse@^12.0.0:
   dependencies:
     git-up "^6.0.0"
 
+git-url-parse@^13.1.0:
+  version "13.1.0"
+  resolved "https://registry.yarnpkg.com/git-url-parse/-/git-url-parse-13.1.0.tgz#07e136b5baa08d59fabdf0e33170de425adf07b4"
+  integrity sha512-5FvPJP/70WkIprlUZ33bm4UAaFdjcLkJLpWft1BeZKqwR0uhhNGoKwlUaPtVb4LxCSQ++erHapRak9kWGj+FCA==
+  dependencies:
+    git-up "^7.0.0"
+
 git-username@^0.5.0:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/git-username/-/git-username-0.5.1.tgz#432a41b34a19607892354004c9893a8829ffa4f0"
@@ -10284,7 +11149,7 @@ glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.2.0:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@^7.1.6:
+glob@^7.1.6, glob@^7.1.7:
   version "7.2.3"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
   integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
@@ -10296,6 +11161,17 @@ glob@^7.1.6:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
+glob@^8.0.3:
+  version "8.0.3"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-8.0.3.tgz#415c6eb2deed9e502c68fa44a272e6da6eeca42e"
+  integrity sha512-ull455NHSHI/Y1FqGaaYFaLGkNMMJbavMrEGFXG/PGrg6y7sutWHUHrz6gy6WEBH6akM1M414dWKCNs+IhKdiQ==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^5.0.1"
+    once "^1.3.0"
+
 global-dirs@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/global-dirs/-/global-dirs-0.1.1.tgz#b319c0dd4607f353f3be9cca4c72fc148c49f445"
@@ -10482,7 +11358,7 @@ gzip-size@^7.0.0:
   dependencies:
     duplexer "^0.1.2"
 
-h3@^0.7.12, h3@^0.7.15:
+h3@^0.7.12:
   version "0.7.15"
   resolved "https://registry.yarnpkg.com/h3/-/h3-0.7.15.tgz#34b1d5cbded0c7491f629b4e3031ac9521785076"
   integrity sha512-4lile6Q64nQ5Z2+6NaD85WU64fhF/qIVyGm4NaFyl4w7L/XDIiq5gkogWLUzZGGtq60M4tnFSj7qIxc0rmTqrg==
@@ -10502,6 +11378,16 @@ h3@^0.7.19, h3@^0.7.21:
     radix3 "^0.1.2"
     ufo "^0.8.5"
 
+h3@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/h3/-/h3-1.0.2.tgz#3a2992921a62de697bd4a3f449401f7600116df6"
+  integrity sha512-25QqjQMz8pX1NI2rZ/ziNT9B8Aog7jmu2a0o8Qm9kKoH3zOhE+2icVs069h6DEp0g1Dst1+zKfRdRYcK0MogJA==
+  dependencies:
+    cookie-es "^0.5.0"
+    destr "^1.2.2"
+    radix3 "^1.0.0"
+    ufo "^1.0.1"
+
 handle-thing@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.1.tgz#857f79ce359580c340d43081cc648970d0bb234e"
@@ -10681,6 +11567,11 @@ hookable@^5.3.0:
   resolved "https://registry.yarnpkg.com/hookable/-/hookable-5.3.0.tgz#eabdd7bef9e04cb3505c49153b669d5d53974e7d"
   integrity sha512-4gTA2q08HT8G32uIW7Jpro3rSXgT2ZTM8R6+r7H7joq90eZlqFPPTvHD6w8WZUohIrbXbDperL96ilb6dkNxNw==
 
+hookable@^5.4.2:
+  version "5.4.2"
+  resolved "https://registry.yarnpkg.com/hookable/-/hookable-5.4.2.tgz#6a1d3c4b3cb5b4262f99b3070ce0ee92c9c78049"
+  integrity sha512-6rOvaUiNKy9lET1X0ECnyZ5O5kSV0PJbtA5yZUgdEF7fGJEVwSLSislltyt7nFwVVALYHQJtfGeAR2Y0A0uJkg==
+
 hosted-git-info@^2.1.4, hosted-git-info@^2.4.2, hosted-git-info@^2.7.1:
   version "2.8.9"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
@@ -10881,7 +11772,7 @@ https-proxy-agent@^2.1.0, https-proxy-agent@^2.2.3:
     agent-base "^4.3.0"
     debug "^3.1.0"
 
-https-proxy-agent@^5.0.0:
+https-proxy-agent@^5.0.0, https-proxy-agent@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz#c59ef224a04fe8b754f3db0063a25ea30d0005d6"
   integrity sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==
@@ -11195,6 +12086,27 @@ inquirer@^9.1.0:
     through "^2.3.6"
     wrap-ansi "^8.0.1"
 
+inquirer@^9.1.4:
+  version "9.1.4"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-9.1.4.tgz#482da8803670a64bd942bc5166a9547a19d41474"
+  integrity sha512-9hiJxE5gkK/cM2d1mTEnuurGTAoHebbkX0BYl3h7iEg7FYfuNIom+nDfBCSWtvSnoSrWCeBxqqBZu26xdlJlXA==
+  dependencies:
+    ansi-escapes "^6.0.0"
+    chalk "^5.1.2"
+    cli-cursor "^4.0.0"
+    cli-width "^4.0.0"
+    external-editor "^3.0.3"
+    figures "^5.0.0"
+    lodash "^4.17.21"
+    mute-stream "0.0.8"
+    ora "^6.1.2"
+    run-async "^2.4.0"
+    rxjs "^7.5.7"
+    string-width "^5.1.2"
+    strip-ansi "^7.0.1"
+    through "^2.3.6"
+    wrap-ansi "^8.0.1"
+
 internal-slot@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.3.tgz#7347e307deeea2faac2ac6205d4bc7d34967f59c"
@@ -11234,6 +12146,26 @@ ioredis@^5.2.2:
     redis-parser "^3.0.0"
     standard-as-callback "^2.1.0"
 
+ioredis@^5.2.4:
+  version "5.2.4"
+  resolved "https://registry.yarnpkg.com/ioredis/-/ioredis-5.2.4.tgz#9e262a668bc29bae98f2054c1e0d7efd86996b96"
+  integrity sha512-qIpuAEt32lZJQ0XyrloCRdlEdUUNGG9i0UOk6zgzK6igyudNWqEBxfH6OlbnOOoBBvr1WB02mm8fR55CnikRng==
+  dependencies:
+    "@ioredis/commands" "^1.1.1"
+    cluster-key-slot "^1.1.0"
+    debug "^4.3.4"
+    denque "^2.0.1"
+    lodash.defaults "^4.2.0"
+    lodash.isarguments "^3.1.0"
+    redis-errors "^1.2.0"
+    redis-parser "^3.0.0"
+    standard-as-callback "^2.1.0"
+
+ip-regex@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-5.0.0.tgz#cd313b2ae9c80c07bd3851e12bf4fa4dc5480632"
+  integrity sha512-fOCG6lhoKKakwv+C6KdsOnGvgXnmgfmp0myi3bcNwj3qfwPAxRKWEuFhvEFF7ceYIz6+1jRZ+yguLFAmUNPEfw==
+
 ip@1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a"
@@ -11343,6 +12275,13 @@ is-builtin-module@^3.1.0:
   dependencies:
     builtin-modules "^3.0.0"
 
+is-builtin-module@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/is-builtin-module/-/is-builtin-module-3.2.0.tgz#bb0310dfe881f144ca83f30100ceb10cf58835e0"
+  integrity sha512-phDA4oSGt7vl1n5tJvTWooWWAsXLY+2xCnxNqvKhGEzujg+A43wPlPOyDg3C8XQHN+6k/JTQWJ/j0dQh/qr+Hw==
+  dependencies:
+    builtin-modules "^3.3.0"
+
 is-callable@^1.1.4, is-callable@^1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.4.tgz#47301d58dd0259407865547853df6d61fe471945"
@@ -11362,7 +12301,7 @@ is-ci@^2.0.0:
   dependencies:
     ci-info "^2.0.0"
 
-is-color-stop@^1.0.0:
+is-color-stop@^1.0.0, is-color-stop@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-color-stop/-/is-color-stop-1.1.0.tgz#cfff471aee4dd5c9e158598fbe12967b5cdad345"
   integrity sha1-z/9HGu5N1cnhWFmPvhKWe1za00U=
@@ -11655,7 +12594,7 @@ is-redirect@^1.0.0:
   resolved "https://registry.yarnpkg.com/is-redirect/-/is-redirect-1.0.0.tgz#1d03dded53bd8db0f30c26e4f95d36fc7c87dc24"
   integrity sha1-HQPd7VO9jbDzDCbk+V02/HyH3CQ=
 
-is-reference@^1.2.1:
+is-reference@1.2.1, is-reference@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/is-reference/-/is-reference-1.2.1.tgz#8b2dac0b371f4bc994fdeaba9eb542d03002d0b7"
   integrity sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==
@@ -12438,6 +13377,11 @@ jiti@^1.14.0:
   resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.14.0.tgz#5350fff532a4d891ca4bcd700c47c1f40e6ee326"
   integrity sha512-4IwstlaKQc9vCTC+qUXLM1hajy2ImiL9KnLvVYiaHOtS/v3wRjhLlGl121AmgDgx/O43uKmxownJghS5XMya2A==
 
+jiti@^1.16.0:
+  version "1.16.2"
+  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.16.2.tgz#75f7a0a8fde4a0e57e576f7d329491d588db89cf"
+  integrity sha512-OKBOVWmU3FxDt/UH4zSwiKPuc1nihFZiOD722FuJlngvLz2glX1v2/TJIgoA4+mrpnXxHV6dSAoCvPcYQtoG5A==
+
 joi@^17.4.0:
   version "17.6.0"
   resolved "https://registry.yarnpkg.com/joi/-/joi-17.6.0.tgz#0bb54f2f006c09a96e75ce687957bd04290054b2"
@@ -12584,6 +13528,11 @@ json5@^1.0.1:
   dependencies:
     minimist "^1.2.0"
 
+json5@^2.2.2:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
+  integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
+
 jsonc-parser@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/jsonc-parser/-/jsonc-parser-3.0.0.tgz#abdd785701c7e7eaca8a9ec8cf070ca51a745a22"
@@ -12594,6 +13543,11 @@ jsonc-parser@^3.1.0:
   resolved "https://registry.yarnpkg.com/jsonc-parser/-/jsonc-parser-3.1.0.tgz#73b8f0e5c940b83d03476bc2e51a20ef0932615d"
   integrity sha512-DRf0QjnNeCUds3xTjKlQQ3DpJD51GvDjJfnxUVWg6PZTo2otSm+slzNAxU/35hF8/oJIKoG9slq30JYOsF2azg==
 
+jsonc-parser@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/jsonc-parser/-/jsonc-parser-3.2.0.tgz#31ff3f4c2b9793f89c67212627c51c6394f88e76"
+  integrity sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==
+
 jsonfile@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-3.0.1.tgz#a5ecc6f65f53f662c4415c7675a0331d0992ec66"
@@ -12676,6 +13630,11 @@ knitwork@^0.1.2:
   resolved "https://registry.yarnpkg.com/knitwork/-/knitwork-0.1.2.tgz#5447a81d8eaede57d236f864ec29b8dc2bc192bf"
   integrity sha512-2ekmY2S/VB3YGVhrIFadyJQpkjMFSf48tsXCnA+kjs4FEQIT+5FLyOF0No/X58z/2E/VaMyeJfukRoVT4gMsfQ==
 
+knitwork@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/knitwork/-/knitwork-1.0.0.tgz#38d124dead875bee5feea1733632295af58a49d2"
+  integrity sha512-dWl0Dbjm6Xm+kDxhPQJsCBTxrJzuGl0aP9rhr+TG8D3l+GL90N8O8lYUi7dTSAN2uuDqCtNgb6aEuQH5wsiV8Q==
+
 known-css-properties@^0.21.0:
   version "0.21.0"
   resolved "https://registry.yarnpkg.com/known-css-properties/-/known-css-properties-0.21.0.tgz#15fbd0bbb83447f3ce09d8af247ed47c68ede80d"
@@ -12840,6 +13799,20 @@ listhen@^0.2.13, listhen@^0.2.15:
     selfsigned "^2.0.1"
     ufo "^0.8.5"
 
+listhen@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/listhen/-/listhen-1.0.1.tgz#31054d08d850ad21473768085a50a8b34a635070"
+  integrity sha512-RBzBGHMCc5wP8J5Vf8WgF4CAJH8dWHi9LaKB7vfzZt54CiH/0dp01rudy2hFD9wCrTM+UfxFVnn5wTIiY+Qhiw==
+  dependencies:
+    clipboardy "^3.0.0"
+    colorette "^2.0.19"
+    defu "^6.1.1"
+    get-port-please "^2.6.1"
+    http-shutdown "^1.2.2"
+    ip-regex "^5.0.0"
+    node-forge "^1.3.1"
+    ufo "^1.0.0"
+
 listr2@^3.12.2:
   version "3.14.0"
   resolved "https://registry.yarnpkg.com/listr2/-/listr2-3.14.0.tgz#23101cc62e1375fd5836b248276d1d2b51fdbe9e"
@@ -13059,6 +14032,11 @@ lodash.templatesettings@^4.0.0:
   dependencies:
     lodash._reinterpolate "^3.0.0"
 
+lodash.topath@^4.5.2:
+  version "4.5.2"
+  resolved "https://registry.yarnpkg.com/lodash.topath/-/lodash.topath-4.5.2.tgz#3616351f3bba61994a0931989660bd03254fd009"
+  integrity sha512-1/W4dM+35DwvE/iEd1M9ekewOSTlpFekhw9mhAtrwjVqUr83/ilQiyAvmg4tVX7Unkcfl1KC+i9WdaT4B6aQcg==
+
 lodash.truncate@^4.4.2:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193"
@@ -13218,6 +14196,20 @@ magic-string@^0.26.3:
   dependencies:
     sourcemap-codec "^1.4.8"
 
+magic-string@^0.26.7:
+  version "0.26.7"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.26.7.tgz#caf7daf61b34e9982f8228c4527474dac8981d6f"
+  integrity sha512-hX9XH3ziStPoPhJxLq1syWuZMxbDvGNbVchfrdCtanC7D13888bMFow61x8axrx+GfHLtVeAx2kxL7tTGRl+Ow==
+  dependencies:
+    sourcemap-codec "^1.4.8"
+
+magic-string@^0.27.0:
+  version "0.27.0"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.27.0.tgz#e4a3413b4bab6d98d2becffd48b4a257effdbbf3"
+  integrity sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==
+  dependencies:
+    "@jridgewell/sourcemap-codec" "^1.4.13"
+
 make-dir@^1.0.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.3.0.tgz#79c1033b80515bd6d24ec9933e860ca75ee27f0c"
@@ -13694,6 +14686,13 @@ minipass@^3.0.0, minipass@^3.1.1:
   dependencies:
     yallist "^4.0.0"
 
+minipass@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/minipass/-/minipass-4.0.0.tgz#7cebb0f9fa7d56f0c5b17853cbe28838a8dbbd3b"
+  integrity sha512-g2Uuh2jEKoht+zvO6vJqXmYpflPqzRBT+Th2h01DKh5z7wbY/AZ2gCQ78cP70YoHPyFdY30YBV5WxgLOEwOykw==
+  dependencies:
+    yallist "^4.0.0"
+
 minizlib@^1.3.3:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-1.3.3.tgz#2290de96818a34c29551c8a8d301216bd65a861d"
@@ -13765,6 +14764,11 @@ mixin-deep@^1.2.0:
     for-in "^1.0.2"
     is-extendable "^1.0.1"
 
+mkdir@^0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/mkdir/-/mkdir-0.0.2.tgz#3b9da7a4e5b13004ebc636581b160e1e04776851"
+  integrity sha512-98OnjcWaNEIRUJJe9rFoWlbkQ5n9z8F86wIPCrI961YEViiVybTuJln919WuuSHSnlrqXy0ELKCntoPy8C7lqg==
+
 mkdirp-promise@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/mkdirp-promise/-/mkdirp-promise-5.0.1.tgz#e9b8f68e552c68a9c1713b84883f7a1dd039b8a1"
@@ -13835,6 +14839,21 @@ mlly@^0.5.2:
     pathe "^0.2.0"
     pkg-types "^0.3.2"
 
+mlly@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/mlly/-/mlly-1.1.0.tgz#9e23c5e675ef7b10cc47ee6281795cb1a7aa3aa2"
+  integrity sha512-cwzBrBfwGC1gYJyfcy8TcZU1f+dbH/T+TuOhtYP2wLv/Fb51/uV7HJQfBPtEupZ2ORLRU1EKFS/QfS3eo9+kBQ==
+  dependencies:
+    acorn "^8.8.1"
+    pathe "^1.0.0"
+    pkg-types "^1.0.1"
+    ufo "^1.0.1"
+
+modern-normalize@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/modern-normalize/-/modern-normalize-1.1.0.tgz#da8e80140d9221426bd4f725c6e11283d34f90b7"
+  integrity sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA==
+
 modify-values@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/modify-values/-/modify-values-1.0.1.tgz#b3939fa605546474e3e3e3c63d64bd43b4ee6022"
@@ -13971,13 +14990,13 @@ nice-try@^1.0.4:
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
   integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==
 
-nitropack@^0.4.22:
-  version "0.4.24"
-  resolved "https://registry.yarnpkg.com/nitropack/-/nitropack-0.4.24.tgz#f54d4cc7337a6ad997de2f2a1528cbdf062205c7"
-  integrity sha512-yL25hsQKU63IyEPxv3CFCtE2TPbIBP1YEpS79D6K2w1YhuKf3NEOkSWtSySnlW74jBG2unFq8u+1RXVlsrYNRg==
+nitropack@^0.5.0:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/nitropack/-/nitropack-0.5.1.tgz#7d0c8ff79af2d7be0e3dd15422b77355240e5588"
+  integrity sha512-mPDcj1lmbjZLtXJjE4EXkXsq2S+DnbBNHYOs1SNBeFiBIlOYqhyHipJR5zx/m/SuR9ELd9DyBIVm/ulQDipUhg==
   dependencies:
     "@cloudflare/kv-asset-handler" "^0.2.0"
-    "@netlify/functions" "^1.0.0"
+    "@netlify/functions" "^1.2.0"
     "@rollup/plugin-alias" "^3.1.9"
     "@rollup/plugin-commonjs" "^22.0.2"
     "@rollup/plugin-inject" "^4.0.4"
@@ -13986,118 +15005,118 @@ nitropack@^0.4.22:
     "@rollup/plugin-replace" "^4.0.0"
     "@rollup/plugin-wasm" "^5.2.0"
     "@rollup/pluginutils" "^4.2.1"
-    "@types/jsdom" "^20.0.0"
-    "@vercel/nft" "^0.21.0"
+    "@vercel/nft" "^0.22.1"
     archiver "^5.3.1"
-    c12 "^0.2.9"
+    c12 "^0.2.10"
     chalk "^5.0.1"
     chokidar "^3.5.3"
     consola "^2.15.3"
     cookie-es "^0.5.0"
-    defu "^6.0.0"
+    defu "^6.1.0"
     destr "^1.1.1"
     dot-prop "^7.2.0"
-    esbuild "^0.15.1"
+    esbuild "^0.15.7"
     escape-string-regexp "^5.0.0"
     etag "^1.8.1"
     fs-extra "^10.1.0"
     globby "^13.1.2"
     gzip-size "^7.0.0"
-    h3 "^0.7.15"
-    hookable "^5.1.1"
+    h3 "^0.7.21"
+    hookable "^5.3.0"
     http-proxy "^1.18.1"
     is-primitive "^3.0.1"
     jiti "^1.14.0"
     klona "^2.0.5"
+    knitwork "^0.1.2"
     listhen "^0.2.15"
     mime "^3.0.0"
-    mlly "^0.5.12"
+    mlly "^0.5.14"
     mri "^1.2.0"
     node-fetch-native "^0.1.4"
     ohash "^0.1.5"
     ohmyfetch "^0.4.18"
-    pathe "^0.3.4"
+    pathe "^0.3.5"
     perfect-debounce "^0.1.3"
-    pkg-types "^0.3.3"
+    pkg-types "^0.3.4"
     pretty-bytes "^6.0.0"
     radix3 "^0.1.2"
-    rollup "^2.77.3"
+    rollup "^2.79.0"
     rollup-plugin-terser "^7.0.2"
-    rollup-plugin-visualizer "^5.7.1"
+    rollup-plugin-visualizer "^5.8.1"
     scule "^0.3.2"
     semver "^7.3.7"
     serve-placeholder "^2.0.1"
     serve-static "^1.15.0"
     source-map-support "^0.5.21"
-    std-env "^3.1.1"
+    std-env "^3.2.1"
     ufo "^0.8.5"
-    unenv "^0.5.4"
+    unenv "^0.6.2"
     unimport "^0.6.7"
     unstorage "^0.5.6"
 
-nitropack@^0.5.0:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/nitropack/-/nitropack-0.5.1.tgz#7d0c8ff79af2d7be0e3dd15422b77355240e5588"
-  integrity sha512-mPDcj1lmbjZLtXJjE4EXkXsq2S+DnbBNHYOs1SNBeFiBIlOYqhyHipJR5zx/m/SuR9ELd9DyBIVm/ulQDipUhg==
+nitropack@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/nitropack/-/nitropack-1.0.0.tgz#78356cd875a331116863bc6d7091c0a4539e7342"
+  integrity sha512-788lHgNgC+NKqecwFgMkAQTuTXwuh2hEgOk2sLwV3qPVUogxrl6P3m5eKdt6Mtzx+mlXIw0G/P90B5TNWEqDSQ==
   dependencies:
     "@cloudflare/kv-asset-handler" "^0.2.0"
-    "@netlify/functions" "^1.2.0"
-    "@rollup/plugin-alias" "^3.1.9"
-    "@rollup/plugin-commonjs" "^22.0.2"
-    "@rollup/plugin-inject" "^4.0.4"
-    "@rollup/plugin-json" "^4.1.0"
-    "@rollup/plugin-node-resolve" "^13.3.0"
-    "@rollup/plugin-replace" "^4.0.0"
-    "@rollup/plugin-wasm" "^5.2.0"
-    "@rollup/pluginutils" "^4.2.1"
+    "@netlify/functions" "^1.3.0"
+    "@rollup/plugin-alias" "^4.0.2"
+    "@rollup/plugin-commonjs" "^23.0.2"
+    "@rollup/plugin-inject" "^5.0.2"
+    "@rollup/plugin-json" "^5.0.1"
+    "@rollup/plugin-node-resolve" "^15.0.1"
+    "@rollup/plugin-replace" "^5.0.1"
+    "@rollup/plugin-wasm" "^6.0.1"
+    "@rollup/pluginutils" "^5.0.2"
     "@vercel/nft" "^0.22.1"
     archiver "^5.3.1"
-    c12 "^0.2.10"
-    chalk "^5.0.1"
+    c12 "^1.0.1"
+    chalk "^5.1.2"
     chokidar "^3.5.3"
     consola "^2.15.3"
     cookie-es "^0.5.0"
-    defu "^6.1.0"
-    destr "^1.1.1"
+    defu "^6.1.1"
+    destr "^1.2.1"
     dot-prop "^7.2.0"
-    esbuild "^0.15.7"
+    esbuild "^0.15.14"
     escape-string-regexp "^5.0.0"
     etag "^1.8.1"
     fs-extra "^10.1.0"
     globby "^13.1.2"
     gzip-size "^7.0.0"
-    h3 "^0.7.21"
-    hookable "^5.3.0"
+    h3 "^1.0.1"
+    hookable "^5.4.2"
     http-proxy "^1.18.1"
     is-primitive "^3.0.1"
-    jiti "^1.14.0"
+    jiti "^1.16.0"
     klona "^2.0.5"
-    knitwork "^0.1.2"
-    listhen "^0.2.15"
+    knitwork "^1.0.0"
+    listhen "^1.0.0"
     mime "^3.0.0"
-    mlly "^0.5.14"
+    mlly "^1.0.0"
     mri "^1.2.0"
-    node-fetch-native "^0.1.4"
-    ohash "^0.1.5"
-    ohmyfetch "^0.4.18"
-    pathe "^0.3.5"
+    node-fetch-native "^1.0.1"
+    ofetch "^1.0.0"
+    ohash "^1.0.0"
+    pathe "^1.0.0"
     perfect-debounce "^0.1.3"
-    pkg-types "^0.3.4"
+    pkg-types "^1.0.1"
     pretty-bytes "^6.0.0"
-    radix3 "^0.1.2"
-    rollup "^2.79.0"
+    radix3 "^1.0.0"
+    rollup "^2.79.1"
     rollup-plugin-terser "^7.0.2"
-    rollup-plugin-visualizer "^5.8.1"
-    scule "^0.3.2"
-    semver "^7.3.7"
+    rollup-plugin-visualizer "^5.8.3"
+    scule "^1.0.0"
+    semver "^7.3.8"
     serve-placeholder "^2.0.1"
     serve-static "^1.15.0"
     source-map-support "^0.5.21"
-    std-env "^3.2.1"
-    ufo "^0.8.5"
-    unenv "^0.6.2"
-    unimport "^0.6.7"
-    unstorage "^0.5.6"
+    std-env "^3.3.1"
+    ufo "^1.0.0"
+    unenv "^1.0.0"
+    unimport "^1.0.0"
+    unstorage "^1.0.1"
 
 no-case@^2.2.0, no-case@^2.3.2:
   version "2.3.2"
@@ -14119,6 +15138,13 @@ node-domexception@^1.0.0:
   resolved "https://registry.yarnpkg.com/node-domexception/-/node-domexception-1.0.0.tgz#6888db46a1f71c0b76b3f7555016b63fe64766e5"
   integrity sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==
 
+node-emoji@^1.11.0:
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/node-emoji/-/node-emoji-1.11.0.tgz#69a0150e6946e2f115e9d7ea4df7971e2628301c"
+  integrity sha512-wo2DpQkQp7Sjm2A0cq+sN7EHKO6Sl0ctXeBdFZrL9T9+UywORbufTcTZxom8YqpLQt/FqNMUkOpkZrJVYSKD3A==
+  dependencies:
+    lodash "^4.17.21"
+
 node-fetch-native@^0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/node-fetch-native/-/node-fetch-native-0.1.3.tgz#61a4e4250d7aa6e272cacdbaa979ea916bff321a"
@@ -14129,6 +15155,16 @@ node-fetch-native@^0.1.4:
   resolved "https://registry.yarnpkg.com/node-fetch-native/-/node-fetch-native-0.1.4.tgz#09b06754f9e298bac23848050da2352125634f89"
   integrity sha512-10EKpOCQPXwZVFh3U1ptOMWBgKTbsN7Vvo6WVKt5pw4hp8zbv6ZVBZPlXw+5M6Tyi1oc1iD4/sNPd71KYA16tQ==
 
+node-fetch-native@^0.1.8:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/node-fetch-native/-/node-fetch-native-0.1.8.tgz#19e2eaf6d86ac14e711ebd2612f40517c3468f2a"
+  integrity sha512-ZNaury9r0NxaT2oL65GvdGDy+5PlSaHTovT6JV5tOW07k1TQmgC0olZETa4C9KZg0+6zBr99ctTYa3Utqj9P/Q==
+
+node-fetch-native@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/node-fetch-native/-/node-fetch-native-1.0.1.tgz#1dfe78f57545d07e07016b7df4c0cb9d2ff416c7"
+  integrity sha512-VzW+TAk2wE4X9maiKMlT+GsPU4OMmR1U9CrHSmd3DFLn2IcZ9VJ6M6BBugGfYUnPCLSYxXdZy17M0BEJyhUTwg==
+
 node-fetch-npm@^2.0.2:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/node-fetch-npm/-/node-fetch-npm-2.0.4.tgz#6507d0e17a9ec0be3bec516958a497cec54bf5a4"
@@ -14154,7 +15190,16 @@ node-fetch@^3.2.10:
     fetch-blob "^3.1.4"
     formdata-polyfill "^4.0.10"
 
-node-forge@^1:
+node-fetch@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-3.3.0.tgz#37e71db4ecc257057af828d523a7243d651d91e4"
+  integrity sha512-BKwRP/O0UvoMKp7GNdwPlObhYGB5DQqwhEDQlNKuoqwVYSxkSZCSbHjnFFmUEtwSKRPU4kNK8PbDYYitwaE3QA==
+  dependencies:
+    data-uri-to-buffer "^4.0.0"
+    fetch-blob "^3.1.4"
+    formdata-polyfill "^4.0.10"
+
+node-forge@^1, node-forge@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-1.3.1.tgz#be8da2af243b2417d5f646a770663a92b7e9ded3"
   integrity sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==
@@ -14403,10 +15448,10 @@ number-is-nan@^1.0.0:
   resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
   integrity sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=
 
-nuxi@3.0.0-rc.8:
-  version "3.0.0-rc.8"
-  resolved "https://registry.yarnpkg.com/nuxi/-/nuxi-3.0.0-rc.8.tgz#d4995d0e6c546a851877fcf747a38d214df4c8cd"
-  integrity sha512-2zAuRQnTUFPvway0sNinuQ9x4h+cDrOaWRCRCHYOZq1uSqco5G0wSiI/TzDsQfSMZjCU44wVAzSMJceTozoggQ==
+nuxi@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/nuxi/-/nuxi-3.0.0.tgz#09e5951f2ecc561df4fb410d9e21952c2f161f34"
+  integrity sha512-VWh1kKFffxD2yadZWcQSd6eTf9okXRr7d3HsjLiI4B3Q1/8iKdIUiodGo7X71OZ+gPVnX6Oh/XFzcb7mr+8TbQ==
   optionalDependencies:
     fsevents "~2.3.2"
 
@@ -14417,50 +15462,55 @@ nuxi@3.0.0-rc.9:
   optionalDependencies:
     fsevents "~2.3.2"
 
-nuxt@3.0.0-rc.8:
-  version "3.0.0-rc.8"
-  resolved "https://registry.yarnpkg.com/nuxt/-/nuxt-3.0.0-rc.8.tgz#91d5a7d1cfaf36c09cc6bef28724f30a61c88835"
-  integrity sha512-4LLs/I4BJz8j20mHfPEMDhnYV2GJGK8jE7pHqJ3L0r2QZg4JrCHSUWXi07+gERvHcKCnv6zGyTmPspJx/9A9Qw==
+nuxt@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/nuxt/-/nuxt-3.0.0.tgz#0909e6566d79805f3a4ed6229573817cbde12e89"
+  integrity sha512-RNlD78uv04ZiXWmlx9f1tnJfrqsYAWHU+4gbgOTQpIBmQzHWPWiox+fm/1m93iKfEd5sJi9TJUoXX5yBObVZYw==
   dependencies:
     "@nuxt/devalue" "^2.0.0"
-    "@nuxt/kit" "3.0.0-rc.8"
-    "@nuxt/schema" "3.0.0-rc.8"
-    "@nuxt/telemetry" "^2.1.4"
-    "@nuxt/ui-templates" "^0.3.1"
-    "@nuxt/vite-builder" "3.0.0-rc.8"
-    "@vue/reactivity" "^3.2.37"
-    "@vue/shared" "^3.2.37"
-    "@vueuse/head" "^0.7.9"
+    "@nuxt/kit" "3.0.0"
+    "@nuxt/schema" "3.0.0"
+    "@nuxt/telemetry" "^2.1.8"
+    "@nuxt/ui-templates" "^1.0.0"
+    "@nuxt/vite-builder" "3.0.0"
+    "@unhead/ssr" "^1.0.0"
+    "@vue/reactivity" "^3.2.45"
+    "@vue/shared" "^3.2.45"
+    "@vueuse/head" "^1.0.15"
     chokidar "^3.5.3"
     cookie-es "^0.5.0"
-    defu "^6.0.0"
-    destr "^1.1.1"
+    defu "^6.1.1"
+    destr "^1.2.1"
     escape-string-regexp "^5.0.0"
+    estree-walker "^3.0.1"
     fs-extra "^10.1.0"
     globby "^13.1.2"
-    h3 "^0.7.15"
+    h3 "^1.0.1"
     hash-sum "^2.0.0"
-    hookable "^5.1.1"
-    knitwork "^0.1.2"
-    magic-string "^0.26.2"
-    mlly "^0.5.12"
-    nitropack "^0.4.22"
-    nuxi "3.0.0-rc.8"
-    ohash "^0.1.5"
-    ohmyfetch "^0.4.18"
-    pathe "^0.3.4"
+    hookable "^5.4.2"
+    knitwork "^1.0.0"
+    magic-string "^0.26.7"
+    mlly "^1.0.0"
+    nitropack "^1.0.0"
+    nuxi "3.0.0"
+    ofetch "^1.0.0"
+    ohash "^1.0.0"
+    pathe "^1.0.0"
     perfect-debounce "^0.1.3"
-    scule "^0.3.2"
-    strip-literal "^0.4.0"
-    ufo "^0.8.5"
-    unctx "^2.0.1"
-    unenv "^0.5.4"
-    unimport "^0.6.7"
-    unplugin "^0.9.0"
-    untyped "^0.4.5"
-    vue "^3.2.37"
-    vue-bundle-renderer "^0.4.1"
-    vue-router "^4.1.3"
+    scule "^1.0.0"
+    strip-literal "^1.0.0"
+    ufo "^1.0.0"
+    ultrahtml "^1.0.0"
+    unctx "^2.1.0"
+    unenv "^1.0.0"
+    unhead "^1.0.0"
+    unimport "^1.0.1"
+    unplugin "^1.0.0"
+    untyped "^1.0.0"
+    vue "^3.2.45"
+    vue-bundle-renderer "^1.0.0"
+    vue-devtools-stub "^0.1.0"
+    vue-router "^4.1.6"
 
 nuxt@^3.0.0-rc.9:
   version "3.0.0-rc.9"
@@ -14532,6 +15582,11 @@ object-copy@^0.1.0:
     define-property "^0.2.5"
     kind-of "^3.0.3"
 
+object-hash@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-2.2.0.tgz#5ad518581eefc443bd763472b8ff2e9c2c0d54a5"
+  integrity sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==
+
 object-inspect@^1.12.0:
   version "1.12.0"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.0.tgz#6e2c120e868fd1fd18cb4f18c31741d0d6e776f0"
@@ -14617,11 +15672,25 @@ octokit-pagination-methods@^1.1.0:
   resolved "https://registry.yarnpkg.com/octokit-pagination-methods/-/octokit-pagination-methods-1.1.0.tgz#cf472edc9d551055f9ef73f6e42b4dbb4c80bea4"
   integrity sha512-fZ4qZdQ2nxJvtcasX7Ghl+WlWS/d9IgnBIwFZXVNNZUmzpno91SX5bc5vuxiuKoCtK78XxGGNuSCrDC7xYB3OQ==
 
+ofetch@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/ofetch/-/ofetch-1.0.0.tgz#5a2604cdcb33349900e4f73ffe44de449a61101a"
+  integrity sha512-d40aof8czZFSQKJa4+F7Ch3UC5D631cK1TTUoK+iNEut9NoiCL+u0vykl/puYVUS2df4tIQl5upQcolIcEzQjQ==
+  dependencies:
+    destr "^1.2.1"
+    node-fetch-native "^1.0.1"
+    ufo "^1.0.0"
+
 ohash@^0.1.5:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/ohash/-/ohash-0.1.5.tgz#7ba53b68c41fc72612ed75942b8f6da3b5d5bbda"
   integrity sha512-qynly1AFIpGWEAW88p6DhMNqok/Swb52/KsiU+Toi7er058Ptvno3tkfTML6wYcEgFgp2GsUziW4Nqn62ciuyw==
 
+ohash@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/ohash/-/ohash-1.0.0.tgz#e6ab04851ef9a479beb6e8a2457ff0d3ccf77371"
+  integrity sha512-kxSyzq6tt+6EE/xCnD1XaFhCCjUNUaz3X30rJp6mnjGLXAAvuPFqohMdv0aScWzajR45C29HyBaXZ8jXBwnh9A==
+
 ohmyfetch@^0.4.18:
   version "0.4.18"
   resolved "https://registry.yarnpkg.com/ohmyfetch/-/ohmyfetch-0.4.18.tgz#2952e04bd52662d0618d3d2f344db0250c3eeac2"
@@ -14632,6 +15701,16 @@ ohmyfetch@^0.4.18:
     ufo "^0.8.4"
     undici "^5.2.0"
 
+ohmyfetch@^0.4.21:
+  version "0.4.21"
+  resolved "https://registry.yarnpkg.com/ohmyfetch/-/ohmyfetch-0.4.21.tgz#6850db751fc7bbf08153aa8b11ff1ef45fcfd963"
+  integrity sha512-VG7f/JRvqvBOYvL0tHyEIEG7XHWm7OqIfAs6/HqwWwDfjiJ1g0huIpe5sFEmyb+7hpFa1EGNH2aERWR72tlClw==
+  dependencies:
+    destr "^1.2.0"
+    node-fetch-native "^0.1.8"
+    ufo "^0.8.6"
+    undici "^5.12.0"
+
 on-finished@2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.4.1.tgz#58c8c44116e54845ad57f14ab10b03533184ac3f"
@@ -15117,6 +16196,13 @@ parse-path@^5.0.0:
   dependencies:
     protocols "^2.0.0"
 
+parse-path@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/parse-path/-/parse-path-7.0.0.tgz#605a2d58d0a749c8594405d8cc3a2bf76d16099b"
+  integrity sha512-Euf9GG8WT9CdqwuWJGdf3RkUcTBArppHABkO7Lm8IzRQp0e2r/kkFnmhu4TSK30Wcu5rVAZLmfPKSBBi9tWFog==
+  dependencies:
+    protocols "^2.0.0"
+
 parse-url@^6.0.0:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/parse-url/-/parse-url-6.0.2.tgz#4a30b057bfc452af64512dfb1a7755c103db3ea1"
@@ -15137,6 +16223,13 @@ parse-url@^7.0.2:
     parse-path "^5.0.0"
     protocols "^2.0.1"
 
+parse-url@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/parse-url/-/parse-url-8.1.0.tgz#972e0827ed4b57fc85f0ea6b0d839f0d8a57a57d"
+  integrity sha512-xDvOoLU5XRrcOZvnI6b8zA6n9O9ejNk/GExuz1yBuWUGn9KA97GI6HTs6u02wKara1CeVmZhH+0TZFdWScR89w==
+  dependencies:
+    parse-path "^7.0.0"
+
 parse5-htmlparser2-tree-adapter@^6.0.0:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-6.0.1.tgz#2cdf9ad823321140370d4dbf5d3e92c7c8ddc6e6"
@@ -15154,13 +16247,6 @@ parse5@^5.1.1:
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-5.1.1.tgz#f68e4e5ba1852ac2cadc00f4555fff6c2abb6178"
   integrity sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==
 
-parse5@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/parse5/-/parse5-7.0.0.tgz#51f74a5257f5fcc536389e8c2d0b3802e1bfa91a"
-  integrity sha512-y/t8IXSPWTuRZqXc0ajH/UwDj4mnqLEbSttNbThcFhGrZuOyoyvNBO85PBp2jQa55wY9d07PBNjsK8ZP3K5U6g==
-  dependencies:
-    entities "^4.3.0"
-
 parseurl@~1.3.2, parseurl@~1.3.3:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
@@ -15299,6 +16385,11 @@ pathe@^0.3.2, pathe@^0.3.3, pathe@^0.3.4, pathe@^0.3.5:
   resolved "https://registry.yarnpkg.com/pathe/-/pathe-0.3.5.tgz#87e5c1164ded1bebeb9dea5dab63563144062303"
   integrity sha512-grU/QeYP0ChuE5kjU2/k8VtAeODzbernHlue0gTa27+ayGIu3wqYBIPGfP9r5xSqgCgDd4nWrjKXEfxMillByg==
 
+pathe@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/pathe/-/pathe-1.0.0.tgz#135fc11464fc57c84ef93d5c5ed21247e24571df"
+  integrity sha512-nPdMG0Pd09HuSsr7QOKUXO2Jr9eqaDiZvDwdyIhNG5SHYujkQHYKDfGQkulBxvbDHz8oHLsTgKN86LSwYzSHAg==
+
 pathval@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/pathval/-/pathval-1.1.1.tgz#8534e77a77ce7ac5a2512ea21e0fdb8fcf6c3d8d"
@@ -15398,6 +16489,15 @@ pkg-types@^0.3.3, pkg-types@^0.3.4:
     mlly "^0.5.13"
     pathe "^0.3.5"
 
+pkg-types@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/pkg-types/-/pkg-types-1.0.1.tgz#25234407f9dc63409af45ced9407625ff446a761"
+  integrity sha512-jHv9HB+Ho7dj6ItwppRDDl0iZRYBD0jsakHXtFgoLr+cHSF6xC+QL54sJmWxyGxOLYSHm0afhXhXcQDQqH9z8g==
+  dependencies:
+    jsonc-parser "^3.2.0"
+    mlly "^1.0.0"
+    pathe "^1.0.0"
+
 please-upgrade-node@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz#aeddd3f994c933e4ad98b99d9a556efa0e2fe942"
@@ -15507,6 +16607,14 @@ postcss-convert-values@^5.1.2:
     browserslist "^4.20.3"
     postcss-value-parser "^4.2.0"
 
+postcss-convert-values@^5.1.3:
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/postcss-convert-values/-/postcss-convert-values-5.1.3.tgz#04998bb9ba6b65aa31035d669a6af342c5f9d393"
+  integrity sha512-82pC1xkJZtcJEfiLw6UXnXVXScgtBrjlO5CBmuDQc+dlb88ZYheFsjTn40+zBVi3DkfF7iezO0nJUPLcJK3pvA==
+  dependencies:
+    browserslist "^4.21.4"
+    postcss-value-parser "^4.2.0"
+
 postcss-discard-comments@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-4.0.2.tgz#1fbabd2c246bff6aaad7997b2b0918f4d7af4033"
@@ -15560,6 +16668,16 @@ postcss-discard-overridden@^5.1.0:
   resolved "https://registry.yarnpkg.com/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz#7e8c5b53325747e9d90131bb88635282fb4a276e"
   integrity sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==
 
+postcss-functions@^3:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-functions/-/postcss-functions-3.0.0.tgz#0e94d01444700a481de20de4d55fb2640564250e"
+  integrity sha512-N5yWXWKA+uhpLQ9ZhBRl2bIAdM6oVJYpDojuI1nF2SzXBimJcdjFwiAouBVbO5VuOF3qA6BSFWFc3wXbbj72XQ==
+  dependencies:
+    glob "^7.1.2"
+    object-assign "^4.1.1"
+    postcss "^6.0.9"
+    postcss-value-parser "^3.3.0"
+
 postcss-html@^0.36.0:
   version "0.36.0"
   resolved "https://registry.yarnpkg.com/postcss-html/-/postcss-html-0.36.0.tgz#b40913f94eaacc2453fd30a1327ad6ee1f88b204"
@@ -15574,7 +16692,7 @@ postcss-import-resolver@^2.0.0:
   dependencies:
     enhanced-resolve "^4.1.1"
 
-postcss-import@^14.0.2, postcss-import@^14.1.0:
+postcss-import@^14.0.2:
   version "14.1.0"
   resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-14.1.0.tgz#a7333ffe32f0b8795303ee9e40215dac922781f0"
   integrity sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==
@@ -15592,6 +16710,14 @@ postcss-import@^15.0.0:
     read-cache "^1.0.0"
     resolve "^1.1.7"
 
+postcss-js@^2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-2.0.3.tgz#a96f0f23ff3d08cec7dc5b11bf11c5f8077cdab9"
+  integrity sha512-zS59pAk3deu6dVHyrGqmC3oDXBdNdajk4k1RyxeVXCrcEDBUBHoIhE4QTsmhxgzXxsaqFDAkUZfmMa5f/N/79w==
+  dependencies:
+    camelcase-css "^2.0.1"
+    postcss "^7.0.18"
+
 postcss-less@^3.1.4:
   version "3.1.4"
   resolved "https://registry.yarnpkg.com/postcss-less/-/postcss-less-3.1.4.tgz#369f58642b5928ef898ffbc1a6e93c958304c5ad"
@@ -15599,7 +16725,7 @@ postcss-less@^3.1.4:
   dependencies:
     postcss "^7.0.14"
 
-postcss-load-config@^3.0.0:
+postcss-load-config@^3.0.0, postcss-load-config@^3.1.0:
   version "3.1.4"
   resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-3.1.4.tgz#1ab2571faf84bb078877e1d07905eabe9ebda855"
   integrity sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==
@@ -15658,6 +16784,14 @@ postcss-merge-longhand@^5.1.6:
     postcss-value-parser "^4.2.0"
     stylehacks "^5.1.0"
 
+postcss-merge-longhand@^5.1.7:
+  version "5.1.7"
+  resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-5.1.7.tgz#24a1bdf402d9ef0e70f568f39bdc0344d568fb16"
+  integrity sha512-YCI9gZB+PLNskrK0BB3/2OzPnGhPkBEwmwhfYk1ilBHYVAZB7/tkTHFBAnCrvBBOmeYyMYw3DMjT55SyxMBzjQ==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+    stylehacks "^5.1.1"
+
 postcss-merge-rules@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-4.0.3.tgz#362bea4ff5a1f98e4075a713c6cb25aefef9a650"
@@ -15690,6 +16824,16 @@ postcss-merge-rules@^5.1.2:
     cssnano-utils "^3.1.0"
     postcss-selector-parser "^6.0.5"
 
+postcss-merge-rules@^5.1.3:
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-5.1.3.tgz#8f97679e67cc8d08677a6519afca41edf2220894"
+  integrity sha512-LbLd7uFC00vpOuMvyZop8+vvhnfRGpp2S+IMQKeuOZZapPRY4SMq5ErjQeHbHsjCUgJkRNrlU+LmxsKIqPKQlA==
+  dependencies:
+    browserslist "^4.21.4"
+    caniuse-api "^3.0.0"
+    cssnano-utils "^3.1.0"
+    postcss-selector-parser "^6.0.5"
+
 postcss-minify-font-values@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/postcss-minify-font-values/-/postcss-minify-font-values-4.0.2.tgz#cd4c344cce474343fac5d82206ab2cbcb8afd5a6"
@@ -15754,6 +16898,15 @@ postcss-minify-params@^5.1.3:
     cssnano-utils "^3.1.0"
     postcss-value-parser "^4.2.0"
 
+postcss-minify-params@^5.1.4:
+  version "5.1.4"
+  resolved "https://registry.yarnpkg.com/postcss-minify-params/-/postcss-minify-params-5.1.4.tgz#c06a6c787128b3208b38c9364cfc40c8aa5d7352"
+  integrity sha512-+mePA3MgdmVmv6g+30rn57USjOGSAyuxUmkfiWpzalZ8aiBkdPYjXWtHuwJGm1v5Ojy0Z0LaSYhHaLJQB0P8Jw==
+  dependencies:
+    browserslist "^4.21.4"
+    cssnano-utils "^3.1.0"
+    postcss-value-parser "^4.2.0"
+
 postcss-minify-selectors@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/postcss-minify-selectors/-/postcss-minify-selectors-4.0.2.tgz#e2e5eb40bfee500d0cd9243500f5f8ea4262fbd8"
@@ -15820,6 +16973,14 @@ postcss-modules@^4.0.0:
     postcss-modules-values "^4.0.0"
     string-hash "^1.1.1"
 
+postcss-nested@^4:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-4.2.3.tgz#c6f255b0a720549776d220d00c4b70cd244136f6"
+  integrity sha512-rOv0W1HquRCamWy2kFl3QazJMMe1ku6rCFoAAH+9AcxdbpDeBr6k968MLWuLjvjMcGEip01ak09hKOEgpK9hvw==
+  dependencies:
+    postcss "^7.0.32"
+    postcss-selector-parser "^6.0.2"
+
 postcss-normalize-charset@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-4.0.1.tgz#8b35add3aee83a136b0471e0d59be58a50285dd4"
@@ -15945,6 +17106,14 @@ postcss-normalize-unicode@^5.1.0:
     browserslist "^4.16.6"
     postcss-value-parser "^4.2.0"
 
+postcss-normalize-unicode@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-unicode/-/postcss-normalize-unicode-5.1.1.tgz#f67297fca3fea7f17e0d2caa40769afc487aa030"
+  integrity sha512-qnCL5jzkNUmKVhZoENp1mJiGNPcsJCs1aaRmURmeJGES23Z/ajaln+EPTD+rBeNkSryI+2WTdW+lwcVdOikrpA==
+  dependencies:
+    browserslist "^4.21.4"
+    postcss-value-parser "^4.2.0"
+
 postcss-normalize-url@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/postcss-normalize-url/-/postcss-normalize-url-4.0.1.tgz#10e437f86bc7c7e58f7b9652ed878daaa95faae1"
@@ -16021,6 +17190,14 @@ postcss-reduce-initial@^5.1.0:
     browserslist "^4.16.6"
     caniuse-api "^3.0.0"
 
+postcss-reduce-initial@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-initial/-/postcss-reduce-initial-5.1.1.tgz#c18b7dfb88aee24b1f8e4936541c29adbd35224e"
+  integrity sha512-//jeDqWcHPuXGZLoolFrUXBDyuEGbr9S2rMo19bkTIjBQ4PqkaO+oI8wua5BOUxpfi97i3PCoInsiFIEBfkm9w==
+  dependencies:
+    browserslist "^4.21.4"
+    caniuse-api "^3.0.0"
+
 postcss-reduce-transforms@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/postcss-reduce-transforms/-/postcss-reduce-transforms-4.0.2.tgz#17efa405eacc6e07be3414a5ca2d1074681d4e29"
@@ -16082,6 +17259,14 @@ postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4, postcss-selector
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
+postcss-selector-parser@^6.0.6:
+  version "6.0.11"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz#2e41dc39b7ad74046e1615185185cd0b17d0c8dc"
+  integrity sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
 postcss-svgo@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-4.0.3.tgz#343a2cdbac9505d416243d496f724f38894c941e"
@@ -16130,7 +17315,7 @@ postcss-url@^10.1.3:
     minimatch "~3.0.4"
     xxhashjs "~0.2.2"
 
-postcss-value-parser@^3.0.0:
+postcss-value-parser@^3.0.0, postcss-value-parser@^3.3.0:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
   integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
@@ -16140,7 +17325,16 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.0.2, postcss-value-parser@^
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.2, postcss@^7.0.21, postcss@^7.0.26, postcss@^7.0.27, postcss@^7.0.32, postcss@^7.0.35, postcss@^7.0.36, postcss@^7.0.6:
+postcss@^6.0.9:
+  version "6.0.23"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"
+  integrity sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==
+  dependencies:
+    chalk "^2.4.1"
+    source-map "^0.6.1"
+    supports-color "^5.4.0"
+
+postcss@^7, postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.18, postcss@^7.0.2, postcss@^7.0.21, postcss@^7.0.26, postcss@^7.0.27, postcss@^7.0.32, postcss@^7.0.35, postcss@^7.0.36, postcss@^7.0.6:
   version "7.0.39"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.39.tgz#9624375d965630e2e1f2c02a935c82a59cb48309"
   integrity sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==
@@ -16157,6 +17351,15 @@ postcss@^8.1.10, postcss@^8.2.1, postcss@^8.2.6, postcss@^8.3.5, postcss@^8.4.13
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+postcss@^8.4.18, postcss@^8.4.19, postcss@^8.4.20:
+  version "8.4.21"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.21.tgz#c639b719a57efc3187b13a1d765675485f4134f4"
+  integrity sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==
+  dependencies:
+    nanoid "^3.3.4"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
 preact@^10.0.0:
   version "10.10.3"
   resolved "https://registry.yarnpkg.com/preact/-/preact-10.10.3.tgz#ea82c5dce85c8a85d541f0110507b2de195ed711"
@@ -16234,6 +17437,11 @@ pretty-format@^28.1.0:
     ansi-styles "^5.0.0"
     react-is "^18.0.0"
 
+pretty-hrtime@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
+  integrity sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==
+
 pretty@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/pretty/-/pretty-2.0.0.tgz#adbc7960b7bbfe289a557dc5f737619a220d06a5"
@@ -16395,6 +17603,16 @@ punycode@^2.1.0, punycode@^2.1.1:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
   integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
 
+purgecss@^4.0.3:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/purgecss/-/purgecss-4.1.3.tgz#683f6a133c8c4de7aa82fe2746d1393b214918f7"
+  integrity sha512-99cKy4s+VZoXnPxaoM23e5ABcP851nC2y2GROkkjS8eJaJtlciGavd7iYAw2V84WeBqggZ12l8ef44G99HmTaw==
+  dependencies:
+    commander "^8.0.0"
+    glob "^7.1.7"
+    postcss "^8.3.5"
+    postcss-selector-parser "^6.0.6"
+
 q@^1.1.2, q@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
@@ -16456,11 +17674,21 @@ quick-lru@^4.0.1:
   resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-4.0.1.tgz#5b8878f113a58217848c6482026c73e1ba57727f"
   integrity sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==
 
+quick-lru@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932"
+  integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==
+
 radix3@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/radix3/-/radix3-0.1.2.tgz#5f7351af7fc5e4b1d9a1b14a7266b6a4a8cac0ba"
   integrity sha512-Mpfd/OuX0zoJ6ojLD/RTOHvJPg6e6PjINtmYzV87kIXc5iUtDz34i7gg4SV4XjqRJTmSiYO/g9i/mKWGf4z8wg==
 
+radix3@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/radix3/-/radix3-1.0.0.tgz#d1c760b850206a6bd5dfd26820c25903cb20eccc"
+  integrity sha512-6n3AEXth91ASapMVKiEh2wrbFJmI+NBilrWE0AbiGgfm0xet0QXC8+a3K19r1UVYjUjctUgB053c3V/J6V0kCQ==
+
 randombytes@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
@@ -16505,6 +17733,15 @@ rc9@^1.2.2:
     destr "^1.1.1"
     flat "^5.0.0"
 
+rc9@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/rc9/-/rc9-2.0.0.tgz#932d6f398f901529b4cc6c2037af3e4ba220d82b"
+  integrity sha512-yVeYJHOpJLOhs3V6RKwz7RPPwPurrx3JjwK264sPgvo/lFdhuUrLien7iSvAO6STVkN0gSMk/MehQNHQhflqZw==
+  dependencies:
+    defu "^6.1.1"
+    destr "^1.2.1"
+    flat "^5.0.2"
+
 rc@^1.0.1, rc@^1.1.6:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
@@ -16714,6 +17951,14 @@ redis-parser@^3.0.0:
   dependencies:
     redis-errors "^1.0.0"
 
+reduce-css-calc@^2.1.8:
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz#7ef8761a28d614980dc0c982f772c93f7a99de03"
+  integrity sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==
+  dependencies:
+    css-unit-converter "^1.1.1"
+    postcss-value-parser "^3.3.0"
+
 regenerate-unicode-properties@^10.0.1:
   version "10.0.1"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.0.1.tgz#7f442732aa7934a3740c779bb9b3340dccc1fb56"
@@ -17164,16 +18409,6 @@ rollup-plugin-visualizer@^5.5.4:
     source-map "^0.7.3"
     yargs "^17.3.1"
 
-rollup-plugin-visualizer@^5.7.1:
-  version "5.7.1"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-visualizer/-/rollup-plugin-visualizer-5.7.1.tgz#7af30b02e6579155368a90b37b6ee9137b391d06"
-  integrity sha512-E/IgOMnmXKlc6ICyf53ok1b6DxPeNVUs3R0kYYPuDpGfofT4bkiG+KtSMlGjMACFmfwbbqTVDZBIF7sMZVKJbA==
-  dependencies:
-    nanoid "^3.3.4"
-    open "^8.4.0"
-    source-map "^0.7.3"
-    yargs "^17.5.1"
-
 rollup-plugin-visualizer@^5.8.0, rollup-plugin-visualizer@^5.8.1:
   version "5.8.1"
   resolved "https://registry.yarnpkg.com/rollup-plugin-visualizer/-/rollup-plugin-visualizer-5.8.1.tgz#deb207017fcf584f3dce088a67eac0d49e4e2a86"
@@ -17184,6 +18419,16 @@ rollup-plugin-visualizer@^5.8.0, rollup-plugin-visualizer@^5.8.1:
     source-map "^0.7.3"
     yargs "^17.5.1"
 
+rollup-plugin-visualizer@^5.8.3:
+  version "5.9.0"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-visualizer/-/rollup-plugin-visualizer-5.9.0.tgz#013ac54fb6a9d7c9019e7eb77eced673399e5a0b"
+  integrity sha512-bbDOv47+Bw4C/cgs0czZqfm8L82xOZssk4ayZjG40y9zbXclNk7YikrZTDao6p7+HDiGxrN0b65SgZiVm9k1Cg==
+  dependencies:
+    open "^8.4.0"
+    picomatch "^2.3.1"
+    source-map "^0.7.4"
+    yargs "^17.5.1"
+
 rollup-plugin-vue@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/rollup-plugin-vue/-/rollup-plugin-vue-6.0.0.tgz#e379e93e5ae9a8648522f698be2e452e8672aaf2"
@@ -17207,13 +18452,27 @@ rollup-pluginutils@^2.8.2:
   optionalDependencies:
     fsevents "~2.3.2"
 
-rollup@^2.43.1, rollup@^2.53.1, rollup@^2.59.0, rollup@^2.66.1, rollup@^2.77.3, rollup@^2.79.0:
+rollup@^2.43.1, rollup@^2.53.1, rollup@^2.59.0, rollup@^2.66.1, rollup@^2.79.0:
   version "2.79.0"
   resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.79.0.tgz#9177992c9f09eb58c5e56cbfa641607a12b57ce2"
   integrity sha512-x4KsrCgwQ7ZJPcFA/SUu6QVcYlO7uRLfLAy0DSA4NS2eG8japdbpM50ToH7z4iObodRYOJ0soneF0iaQRJ6zhA==
   optionalDependencies:
     fsevents "~2.3.2"
 
+rollup@^2.79.1:
+  version "2.79.1"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.79.1.tgz#bedee8faef7c9f93a2647ac0108748f497f081c7"
+  integrity sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==
+  optionalDependencies:
+    fsevents "~2.3.2"
+
+rollup@^3.7.0:
+  version "3.9.1"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-3.9.1.tgz#27501d3d026418765fe379d5620d25954ff2a011"
+  integrity sha512-GswCYHXftN8ZKGVgQhTFUJB/NBXxrRGgO2NCy6E8s1rwEJ4Q9/VttNqcYfEvx4dTo4j58YqdC3OVztPzlKSX8w==
+  optionalDependencies:
+    fsevents "~2.3.2"
+
 run-async@^2.2.0, run-async@^2.4.0:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.4.1.tgz#8440eccf99ea3e70bd409d49aab88e10c189a455"
@@ -17254,6 +18513,13 @@ rxjs@^7.5.6:
   dependencies:
     tslib "^2.1.0"
 
+rxjs@^7.5.7:
+  version "7.8.0"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.8.0.tgz#90a938862a82888ff4c7359811a595e14e1e09a4"
+  integrity sha512-F2+gxDshqmIub1KdvZkaEfGDwLNpPvk9Fs6LD/MyQxNgMds/WH9OdDDXOmxUZpME+iSK3rQCctkL0DYyytUqMg==
+  dependencies:
+    tslib "^2.1.0"
+
 safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
@@ -17376,6 +18642,11 @@ scule@^0.3.2:
   resolved "https://registry.yarnpkg.com/scule/-/scule-0.3.2.tgz#472445cecd8357165a94a067f78cee40e700b596"
   integrity sha512-zIvPdjOH8fv8CgrPT5eqtxHQXmPNnV/vHJYffZhE43KZkvULvpCTvOt1HPlFaCZx287INL9qaqrZg34e8NgI4g==
 
+scule@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/scule/-/scule-1.0.0.tgz#895e6f4ba887e78d8b9b4111e23ae84fef82376d"
+  integrity sha512-4AsO/FrViE/iDNEPaAQlb77tf0csuq27EsVpy6ett584EcRTp6pTDLoGWVxCD77y5iU5FauOvhsI4o1APwPoSQ==
+
 select-hose@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
@@ -17422,6 +18693,13 @@ semver@^6.0.0, semver@^6.1.0, semver@^6.1.1, semver@^6.1.2, semver@^6.2.0, semve
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
+semver@^7.3.8:
+  version "7.3.8"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.8.tgz#07a78feafb3f7b32347d725e33de7e2a2df67798"
+  integrity sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==
+  dependencies:
+    lru-cache "^6.0.0"
+
 send@0.18.0:
   version "0.18.0"
   resolved "https://registry.yarnpkg.com/send/-/send-0.18.0.tgz#670167cc654b05f5aa4a767f9113bb371bc706be"
@@ -17817,6 +19095,11 @@ source-map@^0.7.3:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
   integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
 
+source-map@^0.7.4:
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.4.tgz#a9bbe705c9d8846f4e08ff6765acf0f1b0898656"
+  integrity sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==
+
 source-map@^0.8.0-beta.0:
   version "0.8.0-beta.0"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.8.0-beta.0.tgz#d4c1bb42c3f7ee925f005927ba10709e0d1d1f11"
@@ -18028,6 +19311,11 @@ std-env@^3.2.1:
   resolved "https://registry.yarnpkg.com/std-env/-/std-env-3.2.1.tgz#00e260ec3901333537125f81282b9296b00d7304"
   integrity sha512-D/uYFWkI/31OrnKmXZqGAGK5GbQRPp/BWA1nuITcc6ICblhhuQUPHS5E2GSCVS7Hwhf4ciq8qsATwBUxv+lI6w==
 
+std-env@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/std-env/-/std-env-3.3.1.tgz#93a81835815e618c8aa75e7c8a4dc04f7c314e29"
+  integrity sha512-3H20QlwQsSm2OvAxWIYhs+j01MzzqwMwGiiO1NQaJYZgJZFPuAbf95/DiKRBSTYIJ2FeGUc+B/6mPGcWP9dO3Q==
+
 stream-each@^1.1.0:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/stream-each/-/stream-each-1.2.3.tgz#ebe27a0c389b04fbcc233642952e10731afa9bae"
@@ -18041,6 +19329,11 @@ stream-shift@^1.0.0:
   resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.1.tgz#d7088281559ab2778424279b0877da3c392d5a3d"
   integrity sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==
 
+streamsearch@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/streamsearch/-/streamsearch-1.1.0.tgz#404dd1e2247ca94af554e841a8ef0eaa238da764"
+  integrity sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==
+
 strict-uri-encode@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
@@ -18281,6 +19574,13 @@ strip-literal@^0.4.1:
   dependencies:
     acorn "^8.8.0"
 
+strip-literal@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/strip-literal/-/strip-literal-1.0.0.tgz#0a484ed5a978cd9d2becf3cf8f4f2cb5ab0e1e74"
+  integrity sha512-5o4LsH1lzBzO9UFH63AJ2ad2/S2AVx6NtjOcaz+VTT2h1RiRvbipW72z8M/lxEhcPHDBQwpDrnTF7sXy/7OwCQ==
+  dependencies:
+    acorn "^8.8.1"
+
 strong-log-transformer@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/strong-log-transformer/-/strong-log-transformer-2.1.0.tgz#0f5ed78d325e0421ac6f90f7f10e691d6ae3ae10"
@@ -18325,6 +19625,14 @@ stylehacks@^5.1.0:
     browserslist "^4.16.6"
     postcss-selector-parser "^6.0.4"
 
+stylehacks@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-5.1.1.tgz#7934a34eb59d7152149fa69d6e9e56f2fc34bcc9"
+  integrity sha512-sBpcd5Hx7G6seo7b1LkpttvTz7ikD0LlH5RmdcBNb6fFR0Fl7LQwHDFr300q4cwUqi+IYrFGmsIHieMBfnN/Bw==
+  dependencies:
+    browserslist "^4.21.4"
+    postcss-selector-parser "^6.0.4"
+
 stylelint-config-recommended@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/stylelint-config-recommended/-/stylelint-config-recommended-5.0.0.tgz#fb5653f495a60b4938f2ad3e77712d9e1039ae78"
@@ -18410,7 +19718,7 @@ supports-color@^2.0.0:
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
   integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=
 
-supports-color@^5.3.0:
+supports-color@^5.3.0, supports-color@^5.4.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
   integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
@@ -18572,6 +19880,18 @@ tar@^6.1.11:
     mkdirp "^1.0.3"
     yallist "^4.0.0"
 
+tar@^6.1.12:
+  version "6.1.13"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-6.1.13.tgz#46e22529000f612180601a6fe0680e7da508847b"
+  integrity sha512-jdIBIN6LTIe2jqzay/2vtYLlBHa3JF42ot3h1dW8Q0PaAG4v8rm0cvpVePtau5C6OKXGGcgO9q2AMNSWxiLqKw==
+  dependencies:
+    chownr "^2.0.0"
+    fs-minipass "^2.0.0"
+    minipass "^4.0.0"
+    minizlib "^2.1.1"
+    mkdirp "^1.0.3"
+    yallist "^4.0.0"
+
 temp-dir@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/temp-dir/-/temp-dir-1.0.0.tgz#0a7c0ea26d3a39afa7e0ebea9c1fc0bc4daa011d"
@@ -18798,6 +20118,13 @@ tmp@^0.0.33:
   dependencies:
     os-tmpdir "~1.0.2"
 
+tmp@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.1.tgz#8457fc3037dcf4719c251367a1af6500ee1ccf14"
+  integrity sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==
+  dependencies:
+    rimraf "^3.0.0"
+
 tmpl@1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.5.tgz#8683e0b902bb9c20c4f726e3c0b69f36518c07cc"
@@ -19132,6 +20459,11 @@ type-fest@^2.11.2:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-2.12.2.tgz#80a53614e6b9b475eb9077472fb7498dc7aa51d0"
   integrity sha512-qt6ylCGpLjZ7AaODxbpyBZSs9fCI9SkL3Z9q2oxMBQhs/uyY+VD8jHA8ULCGmWQJlBgqvO3EJeAngOHD8zQCrQ==
 
+type-fest@^3.0.0:
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-3.5.1.tgz#9555ae435f560c1b4447b70bdd195bb2c86c6c92"
+  integrity sha512-70T99cpILFk2fzwuljwWxmazSphFrdOe3gRHbp6bqs71pxFBbJwFqnmkLO2lQL6aLHxHmYAnP/sL+AJWpT70jA==
+
 type-is@~1.6.18:
   version "1.6.18"
   resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.18.tgz#4e552cd05df09467dcbc4ef739de89f2cf37c131"
@@ -19177,6 +20509,16 @@ ufo@^0.8.5:
   resolved "https://registry.yarnpkg.com/ufo/-/ufo-0.8.5.tgz#e367b4205ece9d9723f2fa54f887d43ed1bce5d0"
   integrity sha512-e4+UtA5IRO+ha6hYklwj6r7BjiGMxS0O+UaSg9HbaTefg4kMkzj4tXzEBajRR+wkxf+golgAWKzLbytCUDMJAA==
 
+ufo@^0.8.6:
+  version "0.8.6"
+  resolved "https://registry.yarnpkg.com/ufo/-/ufo-0.8.6.tgz#c0ec89bc0e0c9fa59a683680feb0f28b55ec323b"
+  integrity sha512-fk6CmUgwKCfX79EzcDQQpSCMxrHstvbLswFChHS0Vump+kFkw7nJBfTZoC1j0bOGoY9I7R3n2DGek5ajbcYnOw==
+
+ufo@^1.0.0, ufo@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/ufo/-/ufo-1.0.1.tgz#64ed43b530706bda2e4892f911f568cf4cf67d29"
+  integrity sha512-boAm74ubXHY7KJQZLlXrtMz52qFvpsbOxDcZOnw/Wf+LS4Mmyu7JxmzD4tDLtUQtmZECypJ0FrCz4QIe6dvKRA==
+
 uglify-js@^3.1.4:
   version "3.15.5"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.15.5.tgz#2b10f9e0bfb3f5c15a8e8404393b6361eaeb33b3"
@@ -19187,6 +20529,11 @@ uid-number@0.0.6:
   resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
   integrity sha1-DqEOgDXo61uOREnwbaHHMGY7qoE=
 
+ultrahtml@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/ultrahtml/-/ultrahtml-1.2.0.tgz#169583f2a069d6de3b9686bd994c19811d95a0d6"
+  integrity sha512-vxZM2yNvajRmCj/SknRYGNXk2tqiy6kRNvZjJLaleG3zJbSh/aNkOqD1/CVzypw8tyHyhpzYuwQgMMhUB4ZVNQ==
+
 umask@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/umask/-/umask-1.1.0.tgz#f29cebf01df517912bb58ff9c4e50fde8e33320d"
@@ -19250,16 +20597,6 @@ unctx@^1.1.4:
     magic-string "^0.26.1"
     unplugin "^0.6.1"
 
-unctx@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/unctx/-/unctx-2.0.1.tgz#f87aae922cce02499ff8d591fe33ff5e9b6123fd"
-  integrity sha512-4VkJKSG+lh1yYkvdI0Xd3Gm7y7PU6F0mG5SoJqCI1j2jtIaHvTLAdBfbhDjbHxT93BsRkzcaxaeBtu8W/mX1Sg==
-  dependencies:
-    acorn "^8.8.0"
-    estree-walker "^3.0.1"
-    magic-string "^0.26.2"
-    unplugin "^0.8.0"
-
 unctx@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/unctx/-/unctx-2.0.2.tgz#7d14d9290e0879aa7be697b7f35066cffec4ffc4"
@@ -19270,21 +20607,28 @@ unctx@^2.0.2:
     magic-string "^0.26.2"
     unplugin "^0.9.5"
 
+unctx@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/unctx/-/unctx-2.1.1.tgz#415b07cf6ce42fad59ae1e4fa42ace2e71f4372d"
+  integrity sha512-RffJlpvLOtolWsn0fxXsuSDfwiWcR6cyuykw2e0+zAggvGW1SesXt9WxIWlWpJhwVCZD/WlxxLqKLS50Q0CkWA==
+  dependencies:
+    acorn "^8.8.1"
+    estree-walker "^3.0.1"
+    magic-string "^0.26.7"
+    unplugin "^1.0.0"
+
+undici@^5.12.0:
+  version "5.15.0"
+  resolved "https://registry.yarnpkg.com/undici/-/undici-5.15.0.tgz#cb8437c43718673a8be59df0fdd4856ff6689283"
+  integrity sha512-wCAZJDyjw9Myv+Ay62LAoB+hZLPW9SmKbQkbHIhMw/acKSlpn7WohdMUc/Vd4j1iSMBO0hWwU8mjB7a5p5bl8g==
+  dependencies:
+    busboy "^1.6.0"
+
 undici@^5.2.0:
   version "5.9.1"
   resolved "https://registry.yarnpkg.com/undici/-/undici-5.9.1.tgz#fc9fd85dd488f965f153314a63d9426a11f3360b"
   integrity sha512-6fB3a+SNnWEm4CJbgo0/CWR8RGcOCQP68SF4X0mxtYTq2VNN8T88NYrWVBAeSX+zb7bny2dx2iYhP3XHi00omg==
 
-unenv@^0.5.4:
-  version "0.5.4"
-  resolved "https://registry.yarnpkg.com/unenv/-/unenv-0.5.4.tgz#2f6fa717e544dac1c14c3ed53773a072be08156b"
-  integrity sha512-TsGsA7/kchJSrzGhnSXwm704qI5/yZ8gF1OnGtoHl778AfTYI/jRL6zQeQJn89VeMHZ+o9AvueSPpfrrSpv6Vg==
-  dependencies:
-    defu "^6.0.0"
-    mime "^3.0.0"
-    node-fetch-native "^0.1.4"
-    pathe "^0.3.3"
-
 unenv@^0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/unenv/-/unenv-0.6.2.tgz#bae287932759a8d3956885c88fc76e4fe10cc18a"
@@ -19295,6 +20639,25 @@ unenv@^0.6.2:
     node-fetch-native "^0.1.4"
     pathe "^0.3.5"
 
+unenv@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/unenv/-/unenv-1.0.1.tgz#7d70cb7468ad1629f2ce47b380378bff32baf570"
+  integrity sha512-08MoQ5+Edg9ckEP5y6vT8R6sOgCsNPxwPA1mKIOyergTtPOOuSyyJnbmF8CdnUplO2TUqSm0s1IysCkylxmndw==
+  dependencies:
+    defu "^6.1.1"
+    mime "^3.0.0"
+    node-fetch-native "^1.0.1"
+    pathe "^1.0.0"
+
+unhead@^1.0.0:
+  version "1.0.15"
+  resolved "https://registry.yarnpkg.com/unhead/-/unhead-1.0.15.tgz#a90a8f1d2623f993eee2eccad915f445f339a464"
+  integrity sha512-XNGYe/9h/gycVf15CMJXl7Mycgrjcp8yOOxe/QtcA/V5/e1KXOOKXvsXDui9tabWEh2s/GejZS0TtUj5OTfusQ==
+  dependencies:
+    "@unhead/dom" "1.0.15"
+    "@unhead/schema" "1.0.15"
+    hookable "^5.4.2"
+
 unicode-canonical-property-names-ecmascript@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz#301acdc525631670d39f6146e0e77ff6bbdebddc"
@@ -19362,6 +20725,23 @@ unimport@^0.6.7:
     strip-literal "^0.4.0"
     unplugin "^0.9.0"
 
+unimport@^1.0.0, unimport@^1.0.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/unimport/-/unimport-1.2.0.tgz#93231d45e871a35c0858d30cc189ecb2b3f4a380"
+  integrity sha512-yMok/ubppurBE7Png1QH70Om96AxIoWCcfdxW3J/pziozShMc1UGpPgWpSckfo9ndAO5M74yNnRDdLAZy/gWQg==
+  dependencies:
+    "@rollup/pluginutils" "^5.0.2"
+    escape-string-regexp "^5.0.0"
+    fast-glob "^3.2.12"
+    local-pkg "^0.4.2"
+    magic-string "^0.27.0"
+    mlly "^1.0.0"
+    pathe "^1.0.0"
+    pkg-types "^1.0.1"
+    scule "^1.0.0"
+    strip-literal "^1.0.0"
+    unplugin "^1.0.1"
+
 union-value@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/union-value/-/union-value-1.0.1.tgz#0b6fe7b835aecda61c6ea4d4f02c14221e109847"
@@ -19482,16 +20862,6 @@ unplugin@^0.7.2:
     webpack-sources "^3.2.3"
     webpack-virtual-modules "^0.4.4"
 
-unplugin@^0.8.0:
-  version "0.8.1"
-  resolved "https://registry.yarnpkg.com/unplugin/-/unplugin-0.8.1.tgz#4517b6a8ec3d944e838f9c346921d9777cd159e1"
-  integrity sha512-o7rUZoPLG1fH4LKinWgb77gDtTE6mw/iry0Pq0Z5UPvZ9+HZ1/4+7fic7t58s8/CGkPrDpGq+RltO+DmswcR4g==
-  dependencies:
-    acorn "^8.8.0"
-    chokidar "^3.5.3"
-    webpack-sources "^3.2.3"
-    webpack-virtual-modules "^0.4.4"
-
 unplugin@^0.9.0:
   version "0.9.3"
   resolved "https://registry.yarnpkg.com/unplugin/-/unplugin-0.9.3.tgz#baeec1e3d70d18f693597ef3fcc441779e164e7f"
@@ -19512,6 +20882,16 @@ unplugin@^0.9.2, unplugin@^0.9.5:
     webpack-sources "^3.2.3"
     webpack-virtual-modules "^0.4.4"
 
+unplugin@^1.0.0, unplugin@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/unplugin/-/unplugin-1.0.1.tgz#83b528b981cdcea1cad422a12cd02e695195ef3f"
+  integrity sha512-aqrHaVBWW1JVKBHmGo33T5TxeL0qWzfvjWokObHA9bYmN7eNDkwOxmLjhioHl9878qDFMAaT51XNroRyuz7WxA==
+  dependencies:
+    acorn "^8.8.1"
+    chokidar "^3.5.3"
+    webpack-sources "^3.2.3"
+    webpack-virtual-modules "^0.5.0"
+
 unquote@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/unquote/-/unquote-1.1.1.tgz#8fded7324ec6e88a0ff8b905e7c098cdc086d544"
@@ -19541,6 +20921,23 @@ unstorage@^0.5.6:
     ufo "^0.8.5"
     ws "^8.8.1"
 
+unstorage@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/unstorage/-/unstorage-1.0.1.tgz#8cac09e435e727f68ac8ffdac10caa1a5b35883d"
+  integrity sha512-J1c4b8K2KeihHrQtdgl/ybIapArUbPaPb+TyJy/nGSauDwDYqciZsEKdkee568P3c8SSH4TIgnGRHDWMPGw+Lg==
+  dependencies:
+    anymatch "^3.1.2"
+    chokidar "^3.5.3"
+    destr "^1.2.1"
+    h3 "^1.0.1"
+    ioredis "^5.2.4"
+    listhen "^1.0.0"
+    mkdir "^0.0.2"
+    mri "^1.2.0"
+    ofetch "^1.0.0"
+    ufo "^1.0.0"
+    ws "^8.11.0"
+
 untyped@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/untyped/-/untyped-0.3.0.tgz#854df4dec055cc6a0a2217aa2d20152277b6ada9"
@@ -19556,16 +20953,6 @@ untyped@^0.4.4:
     "@babel/types" "^7.17.0"
     scule "^0.2.1"
 
-untyped@^0.4.5:
-  version "0.4.5"
-  resolved "https://registry.yarnpkg.com/untyped/-/untyped-0.4.5.tgz#2a93c62a36e1cf7e0d440042a90d54df0a2cdf9f"
-  integrity sha512-buq9URfOj4xAnVfu6BYNKzHZLHAzsCbHsDc/kHy66ESMqRpj00oD9qWf2M2qm0pC0DigsVxRF3uhOa5HJtrwGA==
-  dependencies:
-    "@babel/core" "^7.18.10"
-    "@babel/standalone" "^7.18.11"
-    "@babel/types" "^7.18.10"
-    scule "^0.3.2"
-
 untyped@^0.4.7:
   version "0.4.7"
   resolved "https://registry.yarnpkg.com/untyped/-/untyped-0.4.7.tgz#1c6386eb941935199f2ab57981a0308546243141"
@@ -19576,6 +20963,16 @@ untyped@^0.4.7:
     "@babel/types" "^7.18.13"
     scule "^0.3.2"
 
+untyped@^1.0.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/untyped/-/untyped-1.2.1.tgz#3ad645a4615a5bcb073f50d7873ea82d98b6de87"
+  integrity sha512-hEtBC6MvqXLEEpx5ItPhnpgHIf3hRP310IYHj7N3D5zjdLJnmJNsGRDFbovk6DM2dekF/OBWuxDr0b6479eUkA==
+  dependencies:
+    "@babel/core" "^7.20.7"
+    "@babel/standalone" "^7.20.11"
+    "@babel/types" "^7.20.7"
+    scule "^1.0.0"
+
 unzip-response@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/unzip-response/-/unzip-response-2.0.1.tgz#d2f0f737d16b0615e72a6935ed04214572d56f97"
@@ -19594,6 +20991,14 @@ update-browserslist-db@^1.0.5:
     escalade "^3.1.1"
     picocolors "^1.0.0"
 
+update-browserslist-db@^1.0.9:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz#0f54b876545726f17d00cd9a2561e6dade943ff3"
+  integrity sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==
+  dependencies:
+    escalade "^3.1.1"
+    picocolors "^1.0.0"
+
 update-check@1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/update-check/-/update-check-1.5.2.tgz#2fe09f725c543440b3d7dabe8971f2d5caaedc28"
@@ -19798,16 +21203,6 @@ vfile@^4.0.0:
     unist-util-stringify-position "^2.0.0"
     vfile-message "^2.0.0"
 
-vite-node@^0.21.1:
-  version "0.21.1"
-  resolved "https://registry.yarnpkg.com/vite-node/-/vite-node-0.21.1.tgz#4e21489ab0f2ec0a4f14c3b7d3a96e13658fe3f6"
-  integrity sha512-JYEGMLovQOFoInIbSEXWApBp9ycEJEvlHFLheeR27ZXwpN7Oqy0jNJzh4gsmowTJt1VxtDwjkIU1p359Q/anAw==
-  dependencies:
-    debug "^4.3.4"
-    mlly "^0.5.7"
-    pathe "^0.2.0"
-    vite "^2.9.12 || ^3.0.0-0"
-
 vite-node@^0.22.1:
   version "0.22.1"
   resolved "https://registry.yarnpkg.com/vite-node/-/vite-node-0.22.1.tgz#a187e3d73094e29ab82310bb7f5a63da1038a882"
@@ -19818,10 +21213,22 @@ vite-node@^0.22.1:
     pathe "^0.2.0"
     vite "^2.9.12 || ^3.0.0-0"
 
-vite-plugin-checker@^0.4.9:
-  version "0.4.9"
-  resolved "https://registry.yarnpkg.com/vite-plugin-checker/-/vite-plugin-checker-0.4.9.tgz#ec0c6cd5c1d98a826915a729cf1de3026c8db3bb"
-  integrity sha512-Oii9mTum8bqZovWejcR739kCqST32oG6LdB/XMdwcLVzmcjq0gf1iVDIedVzJJ7t6GLQAYgjNwvB0fuMiT3tlg==
+vite-node@^0.25.2:
+  version "0.25.8"
+  resolved "https://registry.yarnpkg.com/vite-node/-/vite-node-0.25.8.tgz#b1477e9d84b9e86dddc559542179ae3d34a264e9"
+  integrity sha512-o1GsPZcq4ce7ZUUALnOfYP/bjaHQYtLDLuirOMvYCdsuvDMb2tggib2RZRfHIhTEF2QnIgyQEoyaOjAMHGPRiw==
+  dependencies:
+    debug "^4.3.4"
+    mlly "^1.0.0"
+    pathe "^0.2.0"
+    source-map "^0.6.1"
+    source-map-support "^0.5.21"
+    vite "^3.0.0 || ^4.0.0"
+
+vite-plugin-checker@^0.5.0:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/vite-plugin-checker/-/vite-plugin-checker-0.5.1.tgz#b8e085f456d37be7f89020cf081102daff52812e"
+  integrity sha512-NFiO1PyK9yGuaeSnJ7Whw9fnxLc1AlELnZoyFURnauBYhbIkx9n+PmIXxSFUuC9iFyACtbJQUAEuQi6yHs2Adg==
   dependencies:
     "@babel/code-frame" "^7.12.13"
     ansi-escapes "^4.3.0"
@@ -19839,10 +21246,10 @@ vite-plugin-checker@^0.4.9:
     vscode-languageserver-textdocument "^1.0.1"
     vscode-uri "^3.0.2"
 
-vite-plugin-checker@^0.5.0:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/vite-plugin-checker/-/vite-plugin-checker-0.5.1.tgz#b8e085f456d37be7f89020cf081102daff52812e"
-  integrity sha512-NFiO1PyK9yGuaeSnJ7Whw9fnxLc1AlELnZoyFURnauBYhbIkx9n+PmIXxSFUuC9iFyACtbJQUAEuQi6yHs2Adg==
+vite-plugin-checker@^0.5.1:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/vite-plugin-checker/-/vite-plugin-checker-0.5.3.tgz#41e61eb59142973997a4873fbcaeabb944704a8c"
+  integrity sha512-upPESKsQTypC2S7LPjxu9HknOymNSToAAHTYSFHb0at5GKLcN1QGMAR5Hb+7KqZclGMVniXAj7QdhZv+fTx83Q==
   dependencies:
     "@babel/code-frame" "^7.12.13"
     ansi-escapes "^4.3.0"
@@ -19877,7 +21284,7 @@ vite@^2.4.4, vite@^2.9.8:
   optionalDependencies:
     fsevents "~2.3.2"
 
-"vite@^2.9.12 || ^3.0.0-0", vite@~3.0.6, vite@~3.0.9:
+"vite@^2.9.12 || ^3.0.0-0", vite@~3.0.9:
   version "3.0.9"
   resolved "https://registry.yarnpkg.com/vite/-/vite-3.0.9.tgz#45fac22c2a5290a970f23d66c1aef56a04be8a30"
   integrity sha512-waYABTM+G6DBTCpYAxvevpG50UOlZuynR0ckTK5PawNVt7ebX6X7wNXHaGIO6wYYFXSM7/WcuFuO2QzhBB6aMw==
@@ -19889,6 +21296,30 @@ vite@^2.4.4, vite@^2.9.8:
   optionalDependencies:
     fsevents "~2.3.2"
 
+"vite@^3.0.0 || ^4.0.0":
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-4.0.4.tgz#4612ce0b47bbb233a887a54a4ae0c6e240a0da31"
+  integrity sha512-xevPU7M8FU0i/80DMR+YhgrzR5KS2ORy1B4xcX/cXLsvnUWvfHuqMmVU6N0YiJ4JWGRJJsLCgjEzKjG9/GKoSw==
+  dependencies:
+    esbuild "^0.16.3"
+    postcss "^8.4.20"
+    resolve "^1.22.1"
+    rollup "^3.7.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
+vite@~3.2.4:
+  version "3.2.5"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-3.2.5.tgz#dee5678172a8a0ab3e547ad4148c3d547f90e86a"
+  integrity sha512-4mVEpXpSOgrssFZAOmGIr85wPHKvaDAcXqxVxVRZhljkJOMZi1ibLibzjLHzJvcok8BMguLc7g1W6W/GqZbLdQ==
+  dependencies:
+    esbuild "^0.15.9"
+    postcss "^8.4.18"
+    resolve "^1.22.1"
+    rollup "^2.79.1"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
 vitest@*:
   version "0.23.4"
   resolved "https://registry.yarnpkg.com/vitest/-/vitest-0.23.4.tgz#7ebea620f203f4df09a27ca17819dc9da61f88ef"
@@ -19986,13 +21417,20 @@ vue-bundle-renderer@0.4.1:
   dependencies:
     ufo "^0.8.3"
 
-vue-bundle-renderer@^0.4.1, vue-bundle-renderer@^0.4.2:
+vue-bundle-renderer@^0.4.2:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/vue-bundle-renderer/-/vue-bundle-renderer-0.4.2.tgz#0c84dd673fb0affad5f89fdfe6b1480ecdae5d43"
   integrity sha512-HwWd/qw3QBQvZXlK7xQbOViCoDzSaodSueao0Yt3VUxReLDt90FAaufXjv2hfpHQKvYCo5Rez8z1zHOEo3fhAg==
   dependencies:
     ufo "^0.8.3"
 
+vue-bundle-renderer@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/vue-bundle-renderer/-/vue-bundle-renderer-1.0.0.tgz#cb39ec8ab30f2e186ea17491a9dba545c123250f"
+  integrity sha512-43vCqTgaMXfHhtR8/VcxxWD1DgtzyvNc4wNyG5NKCIH19O1z5G9ZCRXTGEA2wifVec5PU82CkRLD2sTK9NkTdA==
+  dependencies:
+    ufo "^1.0.0"
+
 vue-class-component@^8.0.0-rc.1:
   version "8.0.0-rc.1"
   resolved "https://registry.yarnpkg.com/vue-class-component/-/vue-class-component-8.0.0-rc.1.tgz#db692cd97656eb9a08206c03d0b7398cdb1d9420"
@@ -20113,13 +21551,6 @@ vue-router@^4.0.0, vue-router@^4.0.3:
   dependencies:
     "@vue/devtools-api" "^6.0.0"
 
-vue-router@^4.1.3:
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.1.3.tgz#f8dc7931a2253cc5aa9b740f8b98969d08ca283c"
-  integrity sha512-XvK81bcYglKiayT7/vYAg/f36ExPC4t90R/HIpzrZ5x+17BOWptXLCrEPufGgZeuq68ww4ekSIMBZY1qdUdfjA==
-  dependencies:
-    "@vue/devtools-api" "^6.1.4"
-
 vue-router@^4.1.5:
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.1.5.tgz#256f597e3f5a281a23352a6193aa6e342c8d9f9a"
@@ -20127,6 +21558,13 @@ vue-router@^4.1.5:
   dependencies:
     "@vue/devtools-api" "^6.1.4"
 
+vue-router@^4.1.6:
+  version "4.1.6"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.1.6.tgz#b70303737e12b4814578d21d68d21618469375a1"
+  integrity sha512-DYWYwsG6xNPmLq/FmZn8Ip+qrhFEzA14EI12MsMgVxvHFDYvlr4NXpVF5hrRH1wVcDP8fGi5F4rxuJSl8/r+EQ==
+  dependencies:
+    "@vue/devtools-api" "^6.4.5"
+
 vue-style-loader@^4.1.0, vue-style-loader@^4.1.3:
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz#6d55863a51fa757ab24e89d9371465072aa7bc35"
@@ -20147,7 +21585,7 @@ vue-tsc@^0.38.2:
   dependencies:
     "@volar/vue-typescript" "0.38.2"
 
-vue@*, vue@3.2.37, vue@^3.0.0, vue@^3.0.4, vue@^3.2.37, vue@^3.2.38:
+vue@*, vue@3.2.37, vue@^3.0.0, vue@^3.0.4, vue@^3.2.38, vue@^3.2.45:
   version "3.2.37"
   resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.37.tgz#da220ccb618d78579d25b06c7c21498ca4e5452e"
   integrity sha512-bOKEZxrm8Eh+fveCqS1/NkG/n6aMidsI6hahas7pa0w/l7jkbssJVsRhVDs07IdDq7h9KHswZOgItnwJAgtVtQ==
@@ -20348,6 +21786,11 @@ webpack-virtual-modules@^0.4.4:
   resolved "https://registry.yarnpkg.com/webpack-virtual-modules/-/webpack-virtual-modules-0.4.4.tgz#a19fcf371923c59c4712d63d7d194b1e4d8262cc"
   integrity sha512-h9atBP/bsZohWpHnr+2sic8Iecb60GxftXsWNLLLSqewgIsGzByd2gcIID4nXcG+3tNe4GQG3dLcff3kXupdRA==
 
+webpack-virtual-modules@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/webpack-virtual-modules/-/webpack-virtual-modules-0.5.0.tgz#362f14738a56dae107937ab98ea7062e8bdd3b6c"
+  integrity sha512-kyDivFZ7ZM0BVOUteVbDFhlRt7Ah/CSPwJdi8hBpkK7QLumUqdLtVfm/PX/hkcnrvr0i77fO5+TjZ94Pe+C9iw==
+
 webpack@5, webpack@^5, webpack@^5.4.1:
   version "5.72.1"
   resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.72.1.tgz#3500fc834b4e9ba573b9f430b2c0a61e1bb57d13"
@@ -20817,6 +22260,11 @@ ws@^7.3.1, ws@^7.4.6:
   resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.7.tgz#9e0ac77ee50af70d58326ecff7e85eb3fa375e67"
   integrity sha512-KMvVuFzpKBuiIXW3E4u3mySRO2/mCHSyZDJQM5NQ9Q9KHWHWh0NHgfbRMLLrceUK5qAL4ytALJbpRMjixFZh8A==
 
+ws@^8.11.0:
+  version "8.12.0"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.12.0.tgz#485074cc392689da78e1828a9ff23585e06cddd8"
+  integrity sha512-kU62emKIdKVeEIOIKVegvqpXMSTAMLJozpHZaJNDYqBjzlSYXQGviYwN1osDLJ9av68qHd4a2oSjd7yD4pacig==
+
 ws@^8.4.2:
   version "8.6.0"
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.6.0.tgz#e5e9f1d9e7ff88083d0c0dd8281ea662a42c9c23"
@@ -20842,7 +22290,7 @@ xmlchars@^2.2.0:
   resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
   integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
 
-xtend@^4.0.0, xtend@~4.0.1:
+xtend@^4.0.0, xtend@^4.0.2, xtend@~4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
   integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==

From 98489f0c28573137e770cf56bde189ae8ec889c2 Mon Sep 17 00:00:00 2001
From: aluarius <ruseomaster@gmail.com>
Date: Tue, 17 Jan 2023 14:46:16 +0700
Subject: [PATCH 03/14] [#2227] [#2537] va-image rework, va-aspect-ratio new
 component

---
 .../components/sidebar/navigationRoutes.ts    | 10 +++
 packages/docs/src/locales/en/en.json          | 72 ++++++++++++----
 packages/docs/src/locales/ru/ru.json          | 84 ++++++++++++++-----
 .../ui-elements/aspect-ratio/api-options.ts   |  3 +
 .../aspect-ratio/examples/Default.vue         | 33 ++++++++
 .../examples/WithOtherComponents.vue          | 12 +++
 .../ui-elements/aspect-ratio/page-config.ts   | 33 ++++++++
 .../ui-elements/card/examples/Ratio.vue       | 17 ++++
 .../ui-elements/card/page-config.ts           |  4 +
 .../ui-elements/image/api-options.ts          |  2 +
 .../ui-elements/image/examples/Contain.vue    | 10 ---
 .../ui-elements/image/examples/Default.vue    |  2 +-
 .../image/examples/DefaultSlot.vue            | 71 +++++++++++-----
 .../ui-elements/image/examples/ErrorSlot.vue  | 10 ---
 .../ui-elements/image/examples/Fit.vue        |  7 ++
 .../ui-elements/image/examples/LoaderSlot.vue | 37 --------
 .../ui-elements/image/examples/Ratio.vue      | 11 +--
 .../ui-elements/image/examples/Slots.vue      | 41 +++++++++
 .../ui-elements/image/examples/SrcSet.vue     | 25 ++++++
 .../ui-elements/image/page-config.ts          | 26 +++---
 .../src/pages/ui-elements/aspect-ratio.vue    | 21 +++++
 .../va-aspect-ratio/VaAspectRatio.demo.vue    | 24 ++++++
 .../va-aspect-ratio/VaAspectRatio.vue         | 29 +++++--
 .../va-aspect-ratio/_variables.scss           |  2 +-
 .../ui/src/components/va-card/_variables.scss |  2 +-
 .../src/components/va-carousel/VaCarousel.vue |  2 +-
 .../src/components/va-image/VaImage.demo.vue  | 50 +++++++++--
 .../ui/src/components/va-image/VaImage.vue    | 19 ++++-
 .../va-image/hooks/useNativeImgAttributes.ts  |  8 +-
 29 files changed, 506 insertions(+), 161 deletions(-)
 create mode 100644 packages/docs/src/page-configs/ui-elements/aspect-ratio/api-options.ts
 create mode 100644 packages/docs/src/page-configs/ui-elements/aspect-ratio/examples/Default.vue
 create mode 100644 packages/docs/src/page-configs/ui-elements/aspect-ratio/examples/WithOtherComponents.vue
 create mode 100644 packages/docs/src/page-configs/ui-elements/aspect-ratio/page-config.ts
 create mode 100644 packages/docs/src/page-configs/ui-elements/card/examples/Ratio.vue
 delete mode 100644 packages/docs/src/page-configs/ui-elements/image/examples/Contain.vue
 delete mode 100644 packages/docs/src/page-configs/ui-elements/image/examples/ErrorSlot.vue
 create mode 100644 packages/docs/src/page-configs/ui-elements/image/examples/Fit.vue
 delete mode 100644 packages/docs/src/page-configs/ui-elements/image/examples/LoaderSlot.vue
 create mode 100644 packages/docs/src/page-configs/ui-elements/image/examples/Slots.vue
 create mode 100644 packages/docs/src/page-configs/ui-elements/image/examples/SrcSet.vue
 create mode 100644 packages/docs/src/pages/ui-elements/aspect-ratio.vue
 create mode 100644 packages/ui/src/components/va-aspect-ratio/VaAspectRatio.demo.vue

diff --git a/packages/docs/src/components/sidebar/navigationRoutes.ts b/packages/docs/src/components/sidebar/navigationRoutes.ts
index 46070159e7..ebe11ed81f 100644
--- a/packages/docs/src/components/sidebar/navigationRoutes.ts
+++ b/packages/docs/src/components/sidebar/navigationRoutes.ts
@@ -167,6 +167,9 @@ export const navigationRoutes: NavigationRoute[] = [
       {
         name: 'image',
         displayName: 'menu.image',
+        meta: {
+          badge: 'updated',
+        },
       },
       {
         name: 'carousel',
@@ -259,6 +262,13 @@ export const navigationRoutes: NavigationRoute[] = [
       },
       {
         category: 'menu.categories.layout',
+        name: 'aspect-ratio',
+        displayName: 'menu.aspectRatio',
+        meta: {
+          badge: 'new',
+        },
+      },
+      {
         name: 'card',
         displayName: 'menu.card',
       },
diff --git a/packages/docs/src/locales/en/en.json b/packages/docs/src/locales/en/en.json
index 9b2fd99bee..697a0063e2 100644
--- a/packages/docs/src/locales/en/en.json
+++ b/packages/docs/src/locales/en/en.json
@@ -179,7 +179,8 @@
         "plain": "Applies `plain` styling.",
         "round": "Adds rounded corners (or make a button fully rounded if only icon is passed).",
         "iconRight": "The icon to be displayed to the right of a title.",
-        "keyboardNavigation": "Enables keyboard navigation for the component."
+        "keyboardNavigation": "Enables keyboard navigation for the component.",
+        "ratio": "Aspect ratio of the component's wrapper."
       }
     },
     "VaBadge": {
@@ -266,6 +267,12 @@
         "trackLabel": "The content of the `track-label`. Slot scope has access to `value` and `order` (for `range` type) variables."
       }
     },
+    "VaAspectRatio": {
+      "props": {
+        "contentWidth": "Component's wrapper width. Is used with `content-height` to replace the `ratio` property.",
+        "contentHeight": "Component's wrapper height. Is used with `content-width` to replace the `ratio` property."
+      }
+    },
     "VaAffix": {
       "props": {
         "offsetTop": "Distance from the top of target element to the top of affixed element.",
@@ -521,18 +528,30 @@
     },
     "VaImage": {
       "props": {
-        "alt": "Specifies an alternate text for an image.",
-        "ratio": "Width to height ratio.",
-        "contain": "Scales the image while maintaining the proportions so that the whole image fits inside the block."
+        "src": "Initial image URL.",
+        "alt": "Image alternative text.",
+        "ratio": "Image width to height ratio.",
+        "fit": "Proxies the `object-fit` attribute to the image [MDN](https://developer.mozilla.org/docs/Web/CSS/object-fit)[[target=_blank]].",
+        "crossorigin": "Proxies the `crossorigin` attribute to the image [MDN](https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-crossorigin)[[target=_blank]].",
+        "decoding": "Proxies the `decoding` attribute to the image [MDN](https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-decoding)[[target=_blank]].",
+        "fetchpriority": "Proxies the `fetchpriority` attribute to the image [MDN](https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-fetchpriority)[[target=_blank]].",
+        "loading": "Proxies the `loading` attribute to the image [MDN](https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-loading)[[target=_blank]].",
+        "referrerpolicy": "Proxies the `referrerpolicy` attribute to the image [MDN](https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-referrerpolicy)[[target=_blank]].",
+        "sizes": "Proxies the `sizes` attribute to the image [MDN](https://developer.mozilla.org/docs/Web/HTML/Element/img#using_the_srcset_and_sizes_attributes)[[target=_blank]].",
+        "srcset": "Proxies the `srcset` attribute to the image [MDN](https://developer.mozilla.org/docs/Web/HTML/Element/img#using_the_srcset_and_sizes_attributes)[[target=_blank]].",
+        "title": "Proxies the `title` attribute to the image [MDN](https://developer.mozilla.org/docs/Web/HTML/Element/img#the_title_attribute)[[target=_blank]].",
+        "notDraggable": "Changes the `draggable` attribute value в `false` [MDN](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/draggable)[[target=_blank]]."
       },
       "events": {
         "loaded": "Emitted when image loading is finished.",
         "error": "Emitted on loading error."
       },
       "slots": {
+        "sources": "Slot for passing one or more `source` tags [MDN](https://developer.mozilla.org/docs/Web/HTML/Element/picture)[[target=_blank]].",
         "loading": "Shown when image is loading.",
-        "error": "Is shown if loading gives an error.",
-        "default": "Image overlay for you to add content. Doesn't show on loading or error."
+        "error": "Shown if loading returns an error.",
+        "default": "Image overlay content. Won't be shown on loading or error.",
+        "placeholder": "Shown in case of loading/error and if no specific for these states slots were passed."
       }
     },
     "VaOptionList": {
@@ -1516,6 +1535,7 @@
     "form": "Form",
     "hover": "Hover",
     "image": "Image",
+    "aspectRatio": "Aspect Ratio",
     "optionList": "Option List",
     "divider": "Divider",
     "checkbox": "Checkbox",
@@ -2478,6 +2498,10 @@
       "image": {
         "title": "Image"
       },
+      "ratio": {
+        "title": "Aspect ratio",
+        "text": "Combination of the `va-card` and `va-aspect-ratio` allows you to set aspect ratio of the component."
+      },
       "actions": {
         "title": "Actions",
         "purpose": "The `VaCardActions` component is designed to apply margins and alignment to content (`VaButtons` expected).",
@@ -2579,6 +2603,20 @@
       }
     }
   },
+  "aspectRatio": {
+    "title": "Aspect Ratio",
+    "summaryText": "The `va-aspect-ratio` is a wrapper, that may help you to view your block with the required width to height ratio.",
+    "examples": {
+      "default": {
+        "title": "Default"
+      },
+      "withOtherComponents": {
+        "title": "With other components",
+        "text": "You're able to combine the `va-aspect-ratio` components with others. By default it's already used in `va-image`, but also will be useful in, for example, `va-card`."
+      }
+    },
+    "variables": "[GitHub Variables Page](https://github.com/epicmaxco/vuestic-ui/blob/develop/packages/ui/src/components/va-aspect-ratio/_variables.scss)[[target=_blank]]"
+  },
   "image": {
     "title": "Image",
     "summaryText": "The `va-image` component is used to display responsive images. It has some features to make your work with images easier.",
@@ -2586,25 +2624,25 @@
       "default": {
         "title": "Default"
       },
-      "contain": {
-        "title": "Contain",
-        "text": "It is used to show a full image while ignoring its original ratio and size."
+      "fit": {
+        "title": "Object Fit",
+        "text": "Proxies `object-fit` CSS property. Available values are: `contain`, `fill`, `cover`, `scale-down`, `none`."
       },
       "ratio": {
         "title": "Ratio",
-        "text": "Change image original ratio, show part of image to fit new ratio."
+        "text": "The `ratio` prop changes image original ratio, showing part of image to fit new ratio."
       },
       "defaultSlot": {
         "title": "Default slot",
-        "text": "Always shown by default."
+        "text": "Useful for, for example, overlays."
       },
-      "loaderSlot": {
-        "title": "Loader slot",
-        "text": "Is visible when image is loading."
+      "slots": {
+        "title": "Status slots",
+        "text": "We're providing 3 status slots: `error` (visible when `src` path is incorrect), `loading` (visible when image is loading) and `placeholder` (works as both previous)."
       },
-      "errorSlot": {
-        "title": "Error slot",
-        "text": "Is visible when `src` path is incorrect."
+      "srcSet": {
+        "title": "Srcset",
+        "text": "The `srcset` and `sizes` properties allows you to use native srcset attribute with our component."
       }
     },
     "variables": "[GitHub Variables Page](https://github.com/epicmaxco/vuestic-ui/blob/develop/packages/ui/src/components/va-image/_variables.scss)[[target=_blank]]"
diff --git a/packages/docs/src/locales/ru/ru.json b/packages/docs/src/locales/ru/ru.json
index 23667a94e9..c4e3cc24b6 100644
--- a/packages/docs/src/locales/ru/ru.json
+++ b/packages/docs/src/locales/ru/ru.json
@@ -176,7 +176,8 @@
         "pressedMaskColor": "Цвет маски для поведения `mask` при нажатии на кнопку.",
         "pressedOpacity": "Значение прозрачности для состояний нажатия `opacity` и `mask`(прозрачность маски).",
         "textOpacity": "Задает прозрачность текста кнопки.",
-        "keyboardNavigation": "Включает возможности навигации с клавиатуры для компонента."
+        "keyboardNavigation": "Включает возможности навигации с клавиатуры для компонента.",
+        "ratio": "Соотношение сторон обертки компонента."
       }
     },
     "VaBadge": {
@@ -265,6 +266,12 @@
         "trackLabel": "Контент `track-label`. В скоупе слота есть доступ к переменным `value` и `order` (для типа `range`)"
       }
     },
+    "VaAspectRatio": {
+      "props": {
+        "contentWidth": "Ширина обертки компонента. Используется совместно с `content-height` вместо свойства `ratio`.",
+        "contentHeight": "Высота обертки компонента. Используется совместно с `content-width` вместо свойства `ratio`."
+      }
+    },
     "VaAffix": {
       "props": {
         "offsetTop": "Расстояние от верха целевого элемента до верха прикрепленного элемента",
@@ -497,7 +504,7 @@
     },
     "VaCard": {
       "props": {
-        "stripe": "Включает отображени полоски над заголовком карточки",
+        "stripe": "Включает отображение полоски над заголовком карточки",
         "stripeColor": "Задает цвет полоски (предопределенные опции цвета или `HEX`)",
         "gradient": "Добавляет градиент в тело компонента",
         "bordered": "Включает контур компонента",
@@ -518,18 +525,30 @@
     },
     "VaImage": {
       "props": {
-        "alt": "Альтернативный текст изображения",
-        "ratio": "Соотношение ширины к высоте",
-        "contain": "Масштабирует изображение, сохраняя пропорции, чтобы все изображение поместилось внутри блока"
+        "src": "Исходный адрес изображения изображения.",
+        "alt": "Альтернативный текст изображения.",
+        "ratio": "Отношение ширины к высоте изображения.",
+        "fit": "Проксирует свойство `object-fit` в изображение [MDN](https://developer.mozilla.org/docs/Web/CSS/object-fit)[[target=_blank]].",
+        "crossorigin": "Проксирует свойство `crossorigin` в изображение [MDN](https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-crossorigin)[[target=_blank]].",
+        "decoding": "Проксирует свойство `decoding` в изображение [MDN](https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-decoding)[[target=_blank]].",
+        "fetchpriority": "Проксирует свойство `fetchpriority` в изображение [MDN](https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-fetchpriority)[[target=_blank]].",
+        "loading": "Проксирует свойство `loading` в изображение [MDN](https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-loading)[[target=_blank]].",
+        "referrerpolicy": "Проксирует свойство `referrerpolicy` в изображение [MDN](https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-referrerpolicy)[[target=_blank]].",
+        "sizes": "Проксирует свойство `sizes` в изображение [MDN](https://developer.mozilla.org/docs/Web/HTML/Element/img#using_the_srcset_and_sizes_attributes)[[target=_blank]].",
+        "srcset": "Проксирует свойство `srcset` в изображение [MDN](https://developer.mozilla.org/docs/Web/HTML/Element/img#using_the_srcset_and_sizes_attributes)[[target=_blank]].",
+        "title": "Проксирует свойство `title` в изображение [MDN](https://developer.mozilla.org/docs/Web/HTML/Element/img#the_title_attribute)[[target=_blank]].",
+        "notDraggable": "Переводит свойство `draggable` в `false` [MDN](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/draggable)[[target=_blank]]."
       },
       "events": {
-        "loaded": "Событие вызывается когда загрузка изображения окончена",
-        "error": "Событие вызывается при ошибке загрузки"
+        "loaded": "Событие вызывается, когда загрузка изображения окончена.",
+        "error": "Событие вызывается при ошибке загрузки изображения."
       },
       "slots": {
-        "loading": "Отображается при загрузке изображения",
-        "error": "Отображается при ошибке загрузки изображения",
-        "default": "Ваше содержимое изображения, не отображается при загрузке или ошибке"
+        "sources": "Слот для передачи одного или нескольких тегов `source` [MDN](https://developer.mozilla.org/docs/Web/HTML/Element/picture)[[target=_blank]].",
+        "loading": "Отображается при загрузке изображения.",
+        "error": "Отображается при ошибке загрузки изображения.",
+        "default": "Содержимое поверх изображения, не отображается при загрузке или ошибке.",
+        "placeholder": "Содержимое изображения, отображаемое при загрузке-ошибки, если не были заданы специфические слоты этих состояний."
       }
     },
     "VaOptionList": {
@@ -1426,6 +1445,7 @@
     "form": "Form",
     "hover": "Hover",
     "image": "Image",
+    "aspectRatio": "Aspect Ratio",
     "optionList": "Option List",
     "divider": "Divider",
     "checkbox": "Checkbox",
@@ -2352,6 +2372,10 @@
       "image": {
         "title": "Изображение"
       },
+      "ratio": {
+        "title": "Соотношение сторон",
+        "text": "Совместное использование `va-card` и `va-aspect-ratio` позволяет установить соотношение сторон компонента."
+      },
       "actions": {
         "title": "Действия",
         "purpose": "Компонент `VaCardActions` предназначен для применения margins к контенту и выравнивания содержимого (ожидаются` VaButtons`).",
@@ -2453,32 +2477,46 @@
       }
     }
   },
+  "aspectRatio": {
+    "title": "Aspect Ratio",
+    "summaryText": "Компонент `va-aspect-ratio` используется для отображения блока с нужными пропорциями ширины к высоте.",
+    "examples": {
+      "default": {
+        "title": "Базовое использование"
+      },
+      "withOtherComponents": {
+        "title": "С другими компонентами",
+        "text": "`va-aspect-ratio` можно комбинировать с другими нашими компонентами. По умолчанию он уже встроен в `va-image`, но будет полезен и в, например, `va-card`."
+      }
+    },
+    "variables": "[Страница с переменными на GitHub](https://github.com/epicmaxco/vuestic-ui/blob/develop/packages/ui/src/components/va-aspect-ratio/_variables.scss)[[target=_blank]]"
+  },
   "image": {
     "title": "Image",
-    "summaryText": "Компонент `va-image` используется для отображения адаптивных изображений, в нем есть функции, облегчающие работу с изображениями.",
+    "summaryText": "Компонент `va-image` используется для отображения адаптивных изображений. Кроме того, он предоставляет инструменты, облегчающие работу с изображениями.",
     "examples": {
       "default": {
         "title": "Базовое использование"
       },
-      "contain": {
-        "title": "Содержание",
-        "text": "Свойство `contain` используется для отображения полного изображения, игнорируя его исходное соотношение сторон и размер."
+      "fit": {
+        "title": "Object Fit",
+        "text": "Проксирует значение CSS свойства `object-fit` в компонент. Допустимые значения: `contain`, `fill`, `cover`, `scale-down`, `none`."
       },
       "ratio": {
-        "title": "Соотношение",
-        "text": "Свойство `ratio` изменяет исходное соотношение сторон."
+        "title": "Соотношение сторон",
+        "text": "Свойство `ratio` изменяет исходное соотношение сторон изображения."
       },
       "defaultSlot": {
         "title": "Слот по умолчанию",
-        "text": "Всегда отображается по умолчанию."
+        "text": "Полезен, например, для оверлеев."
       },
-      "loaderSlot": {
-        "title": "Слот закгрузки",
-        "text": "Виден при загрузке изображения."
+      "slots": {
+        "title": "Слоты состояний",
+        "text": "Мы предоставляем 3 слота состояния: `error` (содержимое отображается когда `src` некорректен), `loading` (содержимое отображается когда изображение грузится) and `placeholder` (универсальное решение, заменяющее 2 предыдущих)."
       },
-      "errorSlot": {
-        "title": "Слот ошибки",
-        "text": "Виден, когда путь `src` неверен."
+      "srcSet": {
+        "title": "Srcset",
+        "text": "Свойства `srcset` и `sizes` позволяют использовать в компоненте нативный srcset."
       }
     },
     "variables": "[Страница с переменными на GitHub](https://github.com/epicmaxco/vuestic-ui/blob/develop/packages/ui/src/components/va-image/_variables.scss)[[target=_blank]]"
diff --git a/packages/docs/src/page-configs/ui-elements/aspect-ratio/api-options.ts b/packages/docs/src/page-configs/ui-elements/aspect-ratio/api-options.ts
new file mode 100644
index 0000000000..3d82aa6943
--- /dev/null
+++ b/packages/docs/src/page-configs/ui-elements/aspect-ratio/api-options.ts
@@ -0,0 +1,3 @@
+import { defineManualApi } from '../../../components/DocsApi/ManualApiOptions'
+
+export default defineManualApi({})
diff --git a/packages/docs/src/page-configs/ui-elements/aspect-ratio/examples/Default.vue b/packages/docs/src/page-configs/ui-elements/aspect-ratio/examples/Default.vue
new file mode 100644
index 0000000000..8b72597942
--- /dev/null
+++ b/packages/docs/src/page-configs/ui-elements/aspect-ratio/examples/Default.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 items-start">
+    <va-aspect-ratio
+      class="col-span-1 p-2 border border-solid border-gray-300 rounded"
+      :ratio="16/9"
+    >
+      <div class="flex flex-col">
+        <h3>16/9</h3>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      </div>
+    </va-aspect-ratio>
+
+    <va-aspect-ratio
+      class="col-span-1 p-2 border border-solid border-gray-300 rounded"
+      :ratio="4/3"
+    >
+      <div class="flex flex-col">
+        <h3>4/3</h3>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      </div>
+    </va-aspect-ratio>
+
+    <va-aspect-ratio
+      class="col-span-1 p-2 border border-solid border-gray-300 rounded"
+      :ratio="1"
+    >
+      <div class="flex flex-col">
+        <h3>1/1</h3>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      </div>
+    </va-aspect-ratio>
+  </div>
+</template>
diff --git a/packages/docs/src/page-configs/ui-elements/aspect-ratio/examples/WithOtherComponents.vue b/packages/docs/src/page-configs/ui-elements/aspect-ratio/examples/WithOtherComponents.vue
new file mode 100644
index 0000000000..b7a878a90f
--- /dev/null
+++ b/packages/docs/src/page-configs/ui-elements/aspect-ratio/examples/WithOtherComponents.vue
@@ -0,0 +1,12 @@
+<template>
+  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 items-start">
+    <va-image class="col-span-1" :ratio="16/9" src="https://picsum.photos/1500" />
+
+    <va-aspect-ratio class="col-span-1" :ratio="4/3">
+      <va-card class="w-full">
+        <va-card-title>4/3</va-card-title>
+        <va-card-content>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</va-card-content>
+      </va-card>
+    </va-aspect-ratio>
+  </div>
+</template>
diff --git a/packages/docs/src/page-configs/ui-elements/aspect-ratio/page-config.ts b/packages/docs/src/page-configs/ui-elements/aspect-ratio/page-config.ts
new file mode 100644
index 0000000000..b3b54f329e
--- /dev/null
+++ b/packages/docs/src/page-configs/ui-elements/aspect-ratio/page-config.ts
@@ -0,0 +1,33 @@
+import { PageGenerationHelper } from '@/helpers/DocsHelper'
+import VaAspectRatio from 'vuestic-ui/src/components/va-aspect-ratio/VaAspectRatio.vue'
+import apiOptions from './api-options'
+
+import type { ApiDocsBlock } from '@/types/configTypes'
+
+// @ts-ignore
+// eslint-disable-next-line import/no-webpack-loader-syntax
+const cssVariables = import('!raw-loader!vuestic-ui/src/components/va-aspect-ratio/_variables.scss')
+
+const block = new PageGenerationHelper(__dirname)
+
+const config: ApiDocsBlock[] = [
+  block.title('aspectRatio.title'),
+  block.paragraph('aspectRatio.summaryText'),
+
+  block.subtitle('all.examples'),
+
+  block.headline('aspectRatio.examples.default.title'),
+  block.example('Default'),
+
+  block.headline('aspectRatio.examples.withOtherComponents.title'),
+  block.paragraph('aspectRatio.examples.withOtherComponents.text'),
+  block.example('WithOtherComponents'),
+
+  block.subtitle('all.api'),
+  block.api(VaAspectRatio, apiOptions),
+
+  block.subtitle('all.cssVariables'),
+  block.file(cssVariables),
+]
+
+export default config
diff --git a/packages/docs/src/page-configs/ui-elements/card/examples/Ratio.vue b/packages/docs/src/page-configs/ui-elements/card/examples/Ratio.vue
new file mode 100644
index 0000000000..b4a878fcd6
--- /dev/null
+++ b/packages/docs/src/page-configs/ui-elements/card/examples/Ratio.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 items-start">
+    <va-aspect-ratio class="col-span-1" :ratio="16/9">
+      <va-card class="w-full">
+        <va-card-title>16/9</va-card-title>
+        <va-card-content>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</va-card-content>
+      </va-card>
+    </va-aspect-ratio>
+
+    <va-aspect-ratio class="col-span-1" :ratio="4/3">
+      <va-card class="w-full">
+        <va-card-title>4/3</va-card-title>
+        <va-card-content>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</va-card-content>
+      </va-card>
+    </va-aspect-ratio>
+  </div>
+</template>
diff --git a/packages/docs/src/page-configs/ui-elements/card/page-config.ts b/packages/docs/src/page-configs/ui-elements/card/page-config.ts
index 1d4092221d..5462d85aae 100644
--- a/packages/docs/src/page-configs/ui-elements/card/page-config.ts
+++ b/packages/docs/src/page-configs/ui-elements/card/page-config.ts
@@ -48,6 +48,10 @@ const config: ApiDocsBlock[] = [
   block.headline('card.examples.horizontal.title'),
   block.example('Horizontal'),
 
+  block.headline('card.examples.ratio.title'),
+  block.paragraph('card.examples.ratio.text'),
+  block.example('Ratio'),
+
   block.headline('card.examples.actions.title'),
   block.paragraph('card.examples.actions.purpose'),
   block.paragraph('card.examples.actions.props'),
diff --git a/packages/docs/src/page-configs/ui-elements/image/api-options.ts b/packages/docs/src/page-configs/ui-elements/image/api-options.ts
index f9d1242039..f23ccdc402 100644
--- a/packages/docs/src/page-configs/ui-elements/image/api-options.ts
+++ b/packages/docs/src/page-configs/ui-elements/image/api-options.ts
@@ -13,5 +13,7 @@ export default defineManualApi({
     loading: { },
     error: { },
     default: { },
+    placeholder: { },
+    sources: { },
   },
 })
diff --git a/packages/docs/src/page-configs/ui-elements/image/examples/Contain.vue b/packages/docs/src/page-configs/ui-elements/image/examples/Contain.vue
deleted file mode 100644
index 8d2de29c8b..0000000000
--- a/packages/docs/src/page-configs/ui-elements/image/examples/Contain.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<template>
-  <div class="row">
-    <div class="flex flex-col xs12 sm12 md6 lg4">
-      <va-image src="https://picsum.photos/1500/500" />
-    </div>
-    <div class="flex flex-col xs12 sm12 md6 lg4">
-      <va-image contain src="https://picsum.photos/1500/500" />
-    </div>
-  </div>
-</template>
diff --git a/packages/docs/src/page-configs/ui-elements/image/examples/Default.vue b/packages/docs/src/page-configs/ui-elements/image/examples/Default.vue
index 7424d6fa18..1c2016cc9f 100644
--- a/packages/docs/src/page-configs/ui-elements/image/examples/Default.vue
+++ b/packages/docs/src/page-configs/ui-elements/image/examples/Default.vue
@@ -1,3 +1,3 @@
 <template>
-  <va-image class="flex flex-col md6 lg4" src="https://picsum.photos/1500" />
+  <va-image class="w-full md:w-1/2 lg:w-1/3" src="https://picsum.photos/1500" />
 </template>
diff --git a/packages/docs/src/page-configs/ui-elements/image/examples/DefaultSlot.vue b/packages/docs/src/page-configs/ui-elements/image/examples/DefaultSlot.vue
index 2ae23cb660..c625983e76 100644
--- a/packages/docs/src/page-configs/ui-elements/image/examples/DefaultSlot.vue
+++ b/packages/docs/src/page-configs/ui-elements/image/examples/DefaultSlot.vue
@@ -1,28 +1,57 @@
 <template>
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 items-start">
   <va-image
-    class="flex flex-col md6 lg4"
-    src="https://picsum.photos/1500"
+    class="col-span-1"
+    :src="getImagePath(200)"
   >
-    <va-badge text="default slot" />
+    <div class="overlay top-0">
+      Overlay Top
+    </div>
   </va-image>
+
+  <va-image
+    class="col-span-1"
+    :src="getImagePath(200)"
+  >
+    <div class="overlay bottom-0">
+      Overlay Bottom
+    </div>
+  </va-image>
+
+  <va-image
+    class="col-span-1"
+    :src="getImagePath(200)"
+  >
+    <div class="overlay top-0 bottom-0">
+      Overlay
+    </div>
+  </va-image>
+
+  <va-image
+    class="col-span-1"
+    :src="getImagePath(200)"
+  >
+    <div class="overlay top-0 bottom-0 gradient">
+      Overlay with gradient
+    </div>
+  </va-image>
+</div>
 </template>
 
-<script>
-export default {
-  data () {
-    return {
-      slotImageSize: 1500,
-    }
-  },
-  computed: {
-    slotImagePath () {
-      return this.getImagePath(this.slotImageSize)
-    },
-  },
-  methods: {
-    getImagePath (width, height = width) {
-      return `https://picsum.photos/${width}/${height}`
-    },
-  },
-}
+<script setup>
+import { computed } from 'vue'
+
+const getImagePath = (width, height = 0) => `https://picsum.photos/${width}/${height || width}`
+
+const slotImagePath = computed(() => getImagePath(1500))
 </script>
+
+<style lang="scss" scoped>
+.overlay {
+  @apply absolute left-0 right-0 p-4 flex justify-center items-center bg-gray-400 bg-opacity-50 text-white;
+}
+
+.gradient {
+  background: repeating-linear-gradient(-45deg, rgba(0, 255, 23, 0.25), rgba(0, 83, 255, 0.25) 25px);
+}
+</style>
diff --git a/packages/docs/src/page-configs/ui-elements/image/examples/ErrorSlot.vue b/packages/docs/src/page-configs/ui-elements/image/examples/ErrorSlot.vue
deleted file mode 100644
index bf13450020..0000000000
--- a/packages/docs/src/page-configs/ui-elements/image/examples/ErrorSlot.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<template>
-  <va-image
-    class="flex flex-col md6 lg4"
-    src="wrong-image-path"
-  >
-    <template #error>
-      Image not found! :(
-    </template>
-  </va-image>
-</template>
diff --git a/packages/docs/src/page-configs/ui-elements/image/examples/Fit.vue b/packages/docs/src/page-configs/ui-elements/image/examples/Fit.vue
new file mode 100644
index 0000000000..c36ed27132
--- /dev/null
+++ b/packages/docs/src/page-configs/ui-elements/image/examples/Fit.vue
@@ -0,0 +1,7 @@
+<template>
+  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 items-start">
+    <va-image fit="contain" class="max-h-32 col-span-1 bg-gray-300" src="https://picsum.photos/1500" />
+    <va-image fit="cover" class="max-h-32 col-span-1 bg-gray-300" src="https://picsum.photos/1500" />
+    <va-image fit="fill" class="max-h-32 col-span-1 bg-gray-300" src="https://picsum.photos/1500" />
+  </div>
+</template>
diff --git a/packages/docs/src/page-configs/ui-elements/image/examples/LoaderSlot.vue b/packages/docs/src/page-configs/ui-elements/image/examples/LoaderSlot.vue
deleted file mode 100644
index 2225ec0e5e..0000000000
--- a/packages/docs/src/page-configs/ui-elements/image/examples/LoaderSlot.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
-  <va-image
-    class="flex flex-col md6 lg4"
-    :src="slotImagePath"
-  >
-    <template #loader>
-      <va-progress-circle indeterminate />
-    </template>
-  </va-image>
-
-  <va-button class="mt-2" color="success" @click="newImage">
-    New image
-  </va-button>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      slotImageSize: 1500,
-    }
-  },
-  computed: {
-    slotImagePath () {
-      return this.getImagePath(this.slotImageSize)
-    },
-  },
-  methods: {
-    getImagePath (width, height = width) {
-      return `https://picsum.photos/${width}/${height}`
-    },
-    newImage () {
-      this.slotImageSize = this.slotImageSize !== 1500 ? 1500 : 1501
-    },
-  },
-}
-</script>
diff --git a/packages/docs/src/page-configs/ui-elements/image/examples/Ratio.vue b/packages/docs/src/page-configs/ui-elements/image/examples/Ratio.vue
index 42f082fbd7..72ffb38925 100644
--- a/packages/docs/src/page-configs/ui-elements/image/examples/Ratio.vue
+++ b/packages/docs/src/page-configs/ui-elements/image/examples/Ratio.vue
@@ -1,10 +1,7 @@
 <template>
-  <div class="row">
-    <div class="flex flex-col xs12 sm12 md6 lg4">
-      <va-image :ratio="0.75" src="https://picsum.photos/1500" />
-    </div>
-    <div class="flex flex-col xs12 sm12 md6 lg4">
-      <va-image :ratio="4/3" src="https://picsum.photos/1500" />
-    </div>
+  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 items-start">
+    <va-image class="col-span-1" :ratio="16/9" src="https://picsum.photos/1500" />
+    <va-image class="col-span-1" :ratio="4/3" src="https://picsum.photos/1500" />
+    <va-image class="col-span-1" :ratio="1" src="https://picsum.photos/1500" />
   </div>
 </template>
diff --git a/packages/docs/src/page-configs/ui-elements/image/examples/Slots.vue b/packages/docs/src/page-configs/ui-elements/image/examples/Slots.vue
new file mode 100644
index 0000000000..85aae50246
--- /dev/null
+++ b/packages/docs/src/page-configs/ui-elements/image/examples/Slots.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="mb-4 w-1/3 flex">
+    <va-button class="mr-2" color="success" @click="newImage">
+      New image
+    </va-button>
+
+    <va-button color="warning" @click="wrongPath">
+      Wrong path
+    </va-button>
+  </div>
+  <va-image
+    class="flex flex-col md6 lg4"
+    :src="slotImagePath"
+    @loaded="consoleLog"
+    @error="consoleLog"
+  >
+    <template #loader>
+      <va-progress-circle indeterminate />
+    </template>
+
+    <template #error>
+      <div class="p-8 flex items-center justify-center bg-red-300 rounded-3xl">
+        <va-icon name="close" color="danger" :size="32" />
+      </div>
+    </template>
+  </va-image>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const slotImageSize = ref(1500)
+
+const getImagePath = (width, height = 0) => `https://picsum.photos/${width}/${height || width}`
+const newImage = () => (slotImageSize.value = slotImageSize.value !== 1500 ? 1500 : 1501)
+const wrongPath = () => (slotImageSize.value = -1)
+
+const slotImagePath = computed(() => getImagePath(slotImageSize.value))
+
+const consoleLog = (e) => console.log(e)
+</script>
diff --git a/packages/docs/src/page-configs/ui-elements/image/examples/SrcSet.vue b/packages/docs/src/page-configs/ui-elements/image/examples/SrcSet.vue
new file mode 100644
index 0000000000..0bbb891e67
--- /dev/null
+++ b/packages/docs/src/page-configs/ui-elements/image/examples/SrcSet.vue
@@ -0,0 +1,25 @@
+<template>
+  <va-image
+    class="w-full md:w-1/2 lg:w-1/3"
+    :src="getImagePath(200)"
+    :srcset="`${getImagePath(201)} 400w,
+                ${getImagePath(202)} 800w,
+                ${getImagePath(203)} 1200w,
+                ${getImagePath(204)} 1600w`"
+    sizes="(max-width: 400px) 400w,
+              (min-width: 400px) and (max-width: 800px) 800w,
+              (min-width: 800px) and (max-width: 1200px) 1200w,
+              (min-width: 1200px) 1600w"
+    @loaded="consoleLog(`srcset rendered image is ${$event}`)"
+  />
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const getImagePath = (width, height = 0) => `https://picsum.photos/${width}/${height || width}`
+
+const slotImagePath = computed(() => getImagePath(1500))
+
+const consoleLog = (e) => console.log(e)
+</script>
diff --git a/packages/docs/src/page-configs/ui-elements/image/page-config.ts b/packages/docs/src/page-configs/ui-elements/image/page-config.ts
index 9787b93167..86189eb5b7 100644
--- a/packages/docs/src/page-configs/ui-elements/image/page-config.ts
+++ b/packages/docs/src/page-configs/ui-elements/image/page-config.ts
@@ -1,8 +1,9 @@
-import { ApiDocsBlock } from '@/types/configTypes'
 import { PageGenerationHelper } from '@/helpers/DocsHelper'
 import VaImage from 'vuestic-ui/src/components/va-image/VaImage.vue'
 import apiOptions from './api-options'
 
+import type { ApiDocsBlock } from '@/types/configTypes'
+
 // @ts-ignore
 // eslint-disable-next-line import/no-webpack-loader-syntax
 const cssVariables = import('!raw-loader!vuestic-ui/src/components/va-image/_variables.scss')
@@ -24,25 +25,24 @@ const config: ApiDocsBlock[] = [
     'Ratio',
   ),
   ...block.exampleBlock(
-    'image.examples.contain.title',
-    'image.examples.contain.text',
-    'Contain',
+    'image.examples.fit.title',
+    'image.examples.fit.text',
+    'Fit',
   ),
   ...block.exampleBlock(
     'image.examples.defaultSlot.title',
     'image.examples.defaultSlot.text',
     'DefaultSlot',
   ),
-  // TODO Disabled because loading doesn't work properly.
-  // ...block.exampleBlock(
-  //   'image.examples.loaderSlot.title',
-  //   'image.examples.loaderSlot.text',
-  //   'LoaderSlot',
-  // ),
   ...block.exampleBlock(
-    'image.examples.errorSlot.title',
-    'image.examples.errorSlot.text',
-    'ErrorSlot',
+    'image.examples.slots.title',
+    'image.examples.slots.text',
+    'Slots',
+  ),
+  ...block.exampleBlock(
+    'image.examples.srcSet.title',
+    'image.examples.srcSet.text',
+    'SrcSet',
   ),
 
   block.subtitle('all.api'),
diff --git a/packages/docs/src/pages/ui-elements/aspect-ratio.vue b/packages/docs/src/pages/ui-elements/aspect-ratio.vue
new file mode 100644
index 0000000000..3ddb2d568e
--- /dev/null
+++ b/packages/docs/src/pages/ui-elements/aspect-ratio.vue
@@ -0,0 +1,21 @@
+<template>
+  <docs-content :config="configComputed" />
+</template>
+
+<script lang="ts">
+import { Vue, Options } from 'vue-class-component'
+import DocsContent from '../../components/DocsContent.vue'
+import aspectRatioConfig from '../../page-configs/ui-elements/aspect-ratio/page-config'
+
+@Options({
+  name: 'DocsAspectRatio',
+  components: {
+    DocsContent,
+  },
+})
+export default class AspectRatio extends Vue {
+  get configComputed () {
+    return aspectRatioConfig
+  }
+}
+</script>
diff --git a/packages/ui/src/components/va-aspect-ratio/VaAspectRatio.demo.vue b/packages/ui/src/components/va-aspect-ratio/VaAspectRatio.demo.vue
new file mode 100644
index 0000000000..b1cd673243
--- /dev/null
+++ b/packages/ui/src/components/va-aspect-ratio/VaAspectRatio.demo.vue
@@ -0,0 +1,24 @@
+<template>
+  <VbDemo>
+    <VbCard title="16/9 for image">
+      <va-image
+        style="width: 300px;"
+        src="https://picsum.photos/200/200"
+        :ratio="16/9"
+      />
+    </VbCard>
+
+    <VbCard title="4/3 for card">
+      <va-card style="width: 300px; border: 1px solid gray;" :ratio="4/3">
+        <va-card-title>Title</va-card-title>
+        <va-card-content>
+          {{$vb.lorem(100)}}
+        </va-card-content>
+      </va-card>
+    </VbCard>
+  </VbDemo>
+</template>
+
+<script setup>
+import { VaImage, VaCard, VaCardTitle, VaCardContent } from '@/components'
+</script>
diff --git a/packages/ui/src/components/va-aspect-ratio/VaAspectRatio.vue b/packages/ui/src/components/va-aspect-ratio/VaAspectRatio.vue
index 70bbbbec71..b5b559a05f 100644
--- a/packages/ui/src/components/va-aspect-ratio/VaAspectRatio.vue
+++ b/packages/ui/src/components/va-aspect-ratio/VaAspectRatio.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="va-aspect-ratio">
-    <div :style="stylesComputed" />
+    <div v-if="stylesComputed" :style="stylesComputed" />
     <slot />
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from 'vue'
+import { defineComponent, computed, type PropType } from 'vue'
 
 import { useComponentPresetProp } from '../../composables'
 
@@ -15,15 +15,33 @@ export default defineComponent({
 
   props: {
     ...useComponentPresetProp,
-    ratio: { type: Number, validator: (v: number) => v > 0 },
+    ratio: {
+      type: [Number, String] as PropType<number | 'auto'>,
+      default: 'auto',
+      validator: (v: number | 'auto') => {
+        if (typeof v === 'number') {
+          return v > 0
+        }
+
+        return v === 'auto'
+      },
+    },
     contentHeight: { type: Number, default: 1 },
     contentWidth: { type: Number, default: 1 },
   },
 
   setup (props) {
-    const aspectRatio = computed(() => props.ratio || props.contentWidth / props.contentHeight)
+    const aspectRatio = computed(() => {
+      if (props.ratio === 'auto' && props.contentHeight === 1 && props.contentWidth === 1) { return 0 }
+      if (!isNaN(+props.ratio)) { return props.ratio as number }
+      return props.contentWidth / props.contentHeight
+    })
 
-    const stylesComputed = computed(() => ({ paddingBottom: `${1 / aspectRatio.value * 100}%` }))
+    const stylesComputed = computed(() => {
+      if (!aspectRatio.value) { return }
+
+      return { paddingBottom: `${1 / aspectRatio.value * 100}%` }
+    })
 
     return { stylesComputed }
   },
@@ -36,5 +54,6 @@ export default defineComponent({
 .va-aspect-ratio {
   position: var(--va-aspect-ratio-position);
   overflow: var(--va-aspect-ratio-overflow);
+  display: flex;
 }
 </style>
diff --git a/packages/ui/src/components/va-aspect-ratio/_variables.scss b/packages/ui/src/components/va-aspect-ratio/_variables.scss
index 068cb4e486..40ef72ad8e 100644
--- a/packages/ui/src/components/va-aspect-ratio/_variables.scss
+++ b/packages/ui/src/components/va-aspect-ratio/_variables.scss
@@ -1,4 +1,4 @@
 :root {
   --va-aspect-ratio-position: relative;
-  --va-aspect-ratio-overflow: hidden;
+  --va-aspect-ratio-overflow: visible;
 }
diff --git a/packages/ui/src/components/va-card/_variables.scss b/packages/ui/src/components/va-card/_variables.scss
index a524975ad5..4b6b4a247e 100644
--- a/packages/ui/src/components/va-card/_variables.scss
+++ b/packages/ui/src/components/va-card/_variables.scss
@@ -1,7 +1,7 @@
 :root {
   --va-card-display: block;
   --va-card-position: relative;
-  --va-card-overflow: visible;
+  --va-card-overflow: hidden;
   --va-card-box-shadow: var(--va-box-shadow);
   --va-card-border-radius: 0.375rem;
   --va-card-color: #34495e;
diff --git a/packages/ui/src/components/va-carousel/VaCarousel.vue b/packages/ui/src/components/va-carousel/VaCarousel.vue
index dd75f887f9..57c80bd599 100644
--- a/packages/ui/src/components/va-carousel/VaCarousel.vue
+++ b/packages/ui/src/components/va-carousel/VaCarousel.vue
@@ -86,7 +86,7 @@
               v-bind="vaImageProps"
               :src="isObjectSlides ? item.src : item"
               :alt="isObjectSlides ? item.alt : ''"
-              :draggable="false"
+              not-draggable
             />
           </slot>
         </div>
diff --git a/packages/ui/src/components/va-image/VaImage.demo.vue b/packages/ui/src/components/va-image/VaImage.demo.vue
index 83549b0470..34e004f24b 100644
--- a/packages/ui/src/components/va-image/VaImage.demo.vue
+++ b/packages/ui/src/components/va-image/VaImage.demo.vue
@@ -7,12 +7,23 @@
       />
     </VbCard>
 
+    <VbCard title="Progressive loading">
+      <va-image
+        class="image"
+        src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+      >
+        <template #placeholder>
+          <img src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/blur,r_50,s_50/quality,q_1/resize,m_mfit,h_200,w_200" alt="" />
+        </template>
+      </va-image>
+    </VbCard>
+
     <VbCard title="Slots (loading, error, placeholder)">
       <div class="mb-2 flex">
-        <button class="mr-2" @click="newImage">
+        <button class="mr-2 border border-gray-200 rounded" @click="newImage">
           New image
         </button>
-        <button @click="wrongPath">
+        <button class="border border-gray-200 rounded" @click="wrongPath">
           Wrong path
         </button>
       </div>
@@ -61,11 +72,20 @@
       </va-image>
 
       <va-image
-        class="image"
+        class="mb-2 image"
         :src="getImagePath(200)"
       >
         <div class="overlay overlay--whole">
-          Overlay Whole
+          Overlay
+        </div>
+      </va-image>
+
+      <va-image
+        class="image"
+        :src="getImagePath(200)"
+      >
+        <div class="overlay overlay--whole overlay--gradient">
+          Overlay with gradient
         </div>
       </va-image>
     </VbCard>
@@ -102,7 +122,7 @@
 
     <VbCard title="Contain">
       <va-image
-        class="image bg-orange-500"
+        class="image bg-gray-200"
         fit="contain"
         :src="getImagePath(200, 100)"
       />
@@ -115,6 +135,22 @@
         :src="getImagePath(200, 100)"
       />
     </VbCard>
+
+    <VbCard title="Scrset and sizes">
+      <va-image
+        class="image"
+        :src="getImagePath(200)"
+        :srcset="`${getImagePath(201)} 400w,
+                ${getImagePath(202)} 800w,
+                ${getImagePath(203)} 1200w,
+                ${getImagePath(204)} 1600w`"
+        sizes="(max-width: 400px) 400w,
+              (min-width: 400px) and (max-width: 800px) 800w,
+              (min-width: 800px) and (max-width: 1200px) 1200w,
+              (min-width: 1200px) 1600w"
+        @loaded="$vb.log('srcset rendered image is', $event)"
+      />
+    </VbCard>
   </VbDemo>
 </template>
 
@@ -155,6 +191,10 @@ const slotImagePath = computed(() => getImagePath(slotImageSize.value))
   background: rgba(0, 0, 0, 0.5);
   color: white;
 
+  &--gradient {
+    background: repeating-linear-gradient(-45deg, rgba(0, 255, 23, 0.25), rgba(0, 83, 255, 0.25) 25px);
+  }
+
   &--whole,
   &--top {
     top: 0;
diff --git a/packages/ui/src/components/va-image/VaImage.vue b/packages/ui/src/components/va-image/VaImage.vue
index 92cff2c54d..ed2150ea21 100644
--- a/packages/ui/src/components/va-image/VaImage.vue
+++ b/packages/ui/src/components/va-image/VaImage.vue
@@ -46,7 +46,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed, watch, nextTick, onBeforeUnmount, type PropType } from 'vue'
+import { defineComponent, ref, computed, watch, nextTick, onBeforeUnmount, type PropType, onBeforeMount } from 'vue'
 
 import { VaAspectRatio } from '../va-aspect-ratio'
 
@@ -68,7 +68,17 @@ export default defineComponent({
   props: {
     ...useComponentPresetProp,
     ...useNativeImgAttributesProps,
-    ratio: { type: Number, validator: (v: number) => v >= 0 },
+    ratio: {
+      type: [Number, String] as PropType<number | 'auto'>,
+      default: 'auto',
+      validator: (v: number | 'auto') => {
+        if (typeof v === 'number') {
+          return v > 0
+        }
+
+        return v === 'auto'
+      },
+    },
     fit: {
       type: String as PropType<typeof fitOptions[number]>,
       default: 'cover',
@@ -90,6 +100,7 @@ export default defineComponent({
     const handleLoad = () => {
       isLoading.value = false
 
+      renderedImage.value = image.value?.currentSrc
       getImgSizes()
 
       emit('loaded', currentImage.value)
@@ -114,7 +125,6 @@ export default defineComponent({
         if (!image.value?.complete) {
           return
         }
-        renderedImage.value = image.value?.currentSrc
 
         if (!image.value.naturalWidth) {
           handleError()
@@ -139,8 +149,9 @@ export default defineComponent({
         imgHeight.value = naturalWidth
       }
     }
-    onBeforeUnmount(() => clearTimeout(timer))
 
+    onBeforeMount(init)
+    onBeforeUnmount(() => clearTimeout(timer))
     watch(() => props.src, init)
 
     const isPlaceholderShown = computed(() =>
diff --git a/packages/ui/src/components/va-image/hooks/useNativeImgAttributes.ts b/packages/ui/src/components/va-image/hooks/useNativeImgAttributes.ts
index 7b2a382a48..d5a804be5f 100644
--- a/packages/ui/src/components/va-image/hooks/useNativeImgAttributes.ts
+++ b/packages/ui/src/components/va-image/hooks/useNativeImgAttributes.ts
@@ -1,5 +1,5 @@
 import { computed, type ExtractPropTypes, type PropType } from 'vue'
-import pick from 'lodash/pick'
+import pick from 'lodash/pick.js'
 
 const referrerPolicyOptions = ['no-referrer', 'no-referrer-when-downgrade', 'origin', 'origin-when-cross-origin', 'same-origin', 'strict-origin', 'strict-origin-when-cross-origin', 'unsafe-url'] as const
 const loadingOptions = ['lazy', 'eager'] as const
@@ -14,12 +14,10 @@ export const useNativeImgAttributesProps = {
   alt: { type: String, default: '' },
   title: { type: String, default: '' },
   sizes: { type: String, default: '' },
-  scrset: { type: String, default: '' },
-  lazy: { type: Boolean, default: false },
+  srcset: { type: String, default: '' },
   notDraggable: { type: Boolean, default: false },
   loading: {
     type: String as PropType<typeof loadingOptions[number]>,
-    default: 'lazy',
     validator: (v: string) => validateProp(v, loadingOptions),
   },
   crossorigin: {
@@ -43,7 +41,7 @@ export const useNativeImgAttributesProps = {
 
 export const useNativeImgAttributes = (props: ExtractPropTypes<typeof useNativeImgAttributesProps>) => {
   return computed(() => ({
-    ...pick(props, ['src', 'alt', 'title', 'sizes', 'scrset', 'lazy', 'loading', 'referrerpolicy', 'fetchpriority', 'decoding', 'crossorigin']),
+    ...pick(props, ['src', 'alt', 'title', 'sizes', 'srcset', 'loading', 'referrerpolicy', 'fetchpriority', 'decoding', 'crossorigin']),
     draggable: !props.notDraggable,
   }))
 }

From fbb6ac98b6fff081803d37d00df32e79491bd2bb Mon Sep 17 00:00:00 2001
From: aluarius <ruseomaster@gmail.com>
Date: Tue, 17 Jan 2023 15:03:45 +0700
Subject: [PATCH 04/14] refactor: minor refactoring

---
 packages/ui/src/components/va-card/_variables.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/components/va-card/_variables.scss b/packages/ui/src/components/va-card/_variables.scss
index 4b6b4a247e..a524975ad5 100644
--- a/packages/ui/src/components/va-card/_variables.scss
+++ b/packages/ui/src/components/va-card/_variables.scss
@@ -1,7 +1,7 @@
 :root {
   --va-card-display: block;
   --va-card-position: relative;
-  --va-card-overflow: hidden;
+  --va-card-overflow: visible;
   --va-card-box-shadow: var(--va-box-shadow);
   --va-card-border-radius: 0.375rem;
   --va-card-color: #34495e;

From b249fa91eb128a15342c90ed1932b946f2aa9e33 Mon Sep 17 00:00:00 2001
From: aluarius <ruseomaster@gmail.com>
Date: Tue, 17 Jan 2023 15:45:03 +0700
Subject: [PATCH 05/14] refactor: deprecated props proceeding

---
 packages/ui/src/components/va-image/VaImage.vue | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/components/va-image/VaImage.vue b/packages/ui/src/components/va-image/VaImage.vue
index ed2150ea21..9f9d0ee131 100644
--- a/packages/ui/src/components/va-image/VaImage.vue
+++ b/packages/ui/src/components/va-image/VaImage.vue
@@ -54,7 +54,7 @@ import {
   useNativeImgAttributes, useNativeImgAttributesProps,
   validateProp,
 } from './hooks/useNativeImgAttributes'
-import { useComponentPresetProp } from '../../composables'
+import { useComponentPresetProp, useDeprecated } from '../../composables'
 
 const fitOptions = ['contain', 'fill', 'cover', 'scale-down', 'none'] as const
 
@@ -84,9 +84,14 @@ export default defineComponent({
       default: 'cover',
       validator: (v: string) => validateProp(v, fitOptions),
     },
+    // TODO: delete in 1.7.0
+    contain: { type: Boolean, default: false },
   },
 
   setup (props, { emit, slots }) {
+    // TODO: delete in 1.7.0
+    useDeprecated(['contain'])
+
     const image = ref<HTMLImageElement>()
     const renderedImage = ref()
     const currentImage = computed(() => renderedImage.value || props.src)
@@ -167,7 +172,14 @@ export default defineComponent({
       ratio: props.ratio,
     }))
 
+    // TODO: refactor (just v-bind fit prop to CSS) in 1.7.0
+    const fitComputed = computed(() => {
+      if (props.contain) { return 'contain' }
+      return props.fit
+    })
+
     return {
+      fitComputed,
       image,
       isLoading,
       handleLoad,
@@ -199,7 +211,7 @@ export default defineComponent({
   img {
     width: 100%;
     height: 100%;
-    object-fit: v-bind(fit);
+    object-fit: v-bind(fitComputed);
     object-position: var(--va-image-object-position);
   }
 

From 44f07dd0bc105477cd2f5f5e77ea24f90a100856 Mon Sep 17 00:00:00 2001
From: aluarius <ruseomaster@gmail.com>
Date: Wed, 18 Jan 2023 20:48:18 +0700
Subject: [PATCH 06/14] [#2871] va-image error fallback feature

---
 packages/docs/src/locales/en/en.json          |  2 +-
 packages/docs/src/locales/ru/ru.json          |  2 +-
 .../ui-elements/image/examples/Slots.vue      | 40 +++++++++++--------
 .../src/components/va-image/VaImage.demo.vue  |  8 +++-
 .../ui/src/components/va-image/VaImage.vue    | 23 +++++++++--
 5 files changed, 52 insertions(+), 23 deletions(-)

diff --git a/packages/docs/src/locales/en/en.json b/packages/docs/src/locales/en/en.json
index 1dc602147e..9f4cfd9983 100644
--- a/packages/docs/src/locales/en/en.json
+++ b/packages/docs/src/locales/en/en.json
@@ -2642,7 +2642,7 @@
       },
       "slots": {
         "title": "Status slots",
-        "text": "We're providing 3 status slots: `error` (visible when `src` path is incorrect), `loading` (visible when image is loading) and `placeholder` (works as both previous)."
+        "text": "We're providing 3 status slots: `error` (visible when `src` path is incorrect), `loading` (visible when image is loading) and `placeholder` (works as both previous). As an alternative for error handling, we provide the `fallback-icon`, `fallback-text`, `fallback-image` and `fallback-renderer` props, that will be called if error slot wasn't passed."
       },
       "srcSet": {
         "title": "Srcset",
diff --git a/packages/docs/src/locales/ru/ru.json b/packages/docs/src/locales/ru/ru.json
index 2a28add6c0..544bcf77f6 100644
--- a/packages/docs/src/locales/ru/ru.json
+++ b/packages/docs/src/locales/ru/ru.json
@@ -2516,7 +2516,7 @@
       },
       "slots": {
         "title": "Слоты состояний",
-        "text": "Мы предоставляем 3 слота состояния: `error` (содержимое отображается когда `src` некорректен), `loading` (содержимое отображается когда изображение грузится) and `placeholder` (универсальное решение, заменяющее 2 предыдущих)."
+        "text": "Мы предоставляем 3 слота состояния: `error` (содержимое отображается когда `src` некорректен), `loading` (содержимое отображается когда изображение грузится) and `placeholder` (универсальное решение, заменяющее 2 предыдущих). Также, в качестве альтернативного способа обработки ошибок, вы можете передавать свойства `fallback-icon`, `fallback-text`, `fallback-image` и `fallback-renderer`, которые будут отрабатывать, если `error` слот не был передан."
       },
       "srcSet": {
         "title": "Srcset",
diff --git a/packages/docs/src/page-configs/ui-elements/image/examples/Slots.vue b/packages/docs/src/page-configs/ui-elements/image/examples/Slots.vue
index 85aae50246..3b6c34b8d3 100644
--- a/packages/docs/src/page-configs/ui-elements/image/examples/Slots.vue
+++ b/packages/docs/src/page-configs/ui-elements/image/examples/Slots.vue
@@ -8,22 +8,30 @@
       Wrong path
     </va-button>
   </div>
-  <va-image
-    class="flex flex-col md6 lg4"
-    :src="slotImagePath"
-    @loaded="consoleLog"
-    @error="consoleLog"
-  >
-    <template #loader>
-      <va-progress-circle indeterminate />
-    </template>
-
-    <template #error>
-      <div class="p-8 flex items-center justify-center bg-red-300 rounded-3xl">
-        <va-icon name="close" color="danger" :size="32" />
-      </div>
-    </template>
-  </va-image>
+  <div class="row space-x-4">
+    <va-image
+      class="flex flex-col md6 lg4"
+      :src="slotImagePath"
+      @loaded="consoleLog"
+      @error="consoleLog"
+    >
+      <template #loader>
+        <va-progress-circle indeterminate />
+      </template>
+
+      <template #error>
+        <div class="p-8 flex items-center justify-center bg-red-300 rounded-3xl">
+          <va-icon name="close" color="danger" :size="32" />
+        </div>
+      </template>
+    </va-image>
+
+    <va-image
+      class="flex flex-col md6 lg4"
+      :src="slotImagePath"
+      fallback-text="Fallback will work if error slot wasn't passed"
+    />
+  </div>
 </template>
 
 <script setup>
diff --git a/packages/ui/src/components/va-image/VaImage.demo.vue b/packages/ui/src/components/va-image/VaImage.demo.vue
index 34e004f24b..310cb80ca1 100644
--- a/packages/ui/src/components/va-image/VaImage.demo.vue
+++ b/packages/ui/src/components/va-image/VaImage.demo.vue
@@ -43,13 +43,19 @@
       </va-image>
 
       <va-image
-        class="image"
+        class="image mb-2"
         :src="slotImagePath"
       >
         <template #placeholder>
           Placeholder (both error and loading states)
         </template>
       </va-image>
+
+      <va-image
+        class="image"
+        :src="slotImagePath"
+        fallback-text="Fallback text"
+      />
     </VbCard>
 
     <VbCard title="Default slot">
diff --git a/packages/ui/src/components/va-image/VaImage.vue b/packages/ui/src/components/va-image/VaImage.vue
index 9f9d0ee131..3efb499a01 100644
--- a/packages/ui/src/components/va-image/VaImage.vue
+++ b/packages/ui/src/components/va-image/VaImage.vue
@@ -23,10 +23,12 @@
     </div>
 
     <div
-      v-if="isError && $slots.error"
+      v-if="isError && ($slots.error || isAnyFallbackPassed)"
       class="va-image__error"
     >
-      <slot name="error" />
+      <slot name="error">
+        <va-fallback v-bind="fallbackProps" @fallback="$emit('fallback')" />
+      </slot>
     </div>
 
     <div
@@ -49,6 +51,7 @@
 import { defineComponent, ref, computed, watch, nextTick, onBeforeUnmount, type PropType, onBeforeMount } from 'vue'
 
 import { VaAspectRatio } from '../va-aspect-ratio'
+import { VaFallback } from '../va-fallback'
 
 import {
   useNativeImgAttributes, useNativeImgAttributesProps,
@@ -56,18 +59,23 @@ import {
 } from './hooks/useNativeImgAttributes'
 import { useComponentPresetProp, useDeprecated } from '../../composables'
 
+import { extractComponentProps, filterComponentProps } from '../../utils/component-options'
+
+const VaFallbackProps = extractComponentProps(VaFallback)
+
 const fitOptions = ['contain', 'fill', 'cover', 'scale-down', 'none'] as const
 
 export default defineComponent({
   name: 'VaImage',
 
-  components: { VaAspectRatio },
+  components: { VaAspectRatio, VaFallback },
 
   emits: ['loaded', 'error'],
 
   props: {
     ...useComponentPresetProp,
     ...useNativeImgAttributesProps,
+    ...VaFallbackProps,
     ratio: {
       type: [Number, String] as PropType<number | 'auto'>,
       default: 'auto',
@@ -160,7 +168,8 @@ export default defineComponent({
     watch(() => props.src, init)
 
     const isPlaceholderShown = computed(() =>
-      ((isLoading.value && !slots?.loader?.()) || (isError.value && !slots?.error?.())) && slots?.placeholder?.())
+      ((isLoading.value && !slots?.loader?.()) || (isError.value && (!slots?.error?.() && !isAnyFallbackPassed.value))) &&
+      slots?.placeholder?.())
 
     const isSuccessfullyLoaded = computed(() => !(isLoading.value || isError.value))
 
@@ -172,6 +181,9 @@ export default defineComponent({
       ratio: props.ratio,
     }))
 
+    const fallbackProps = filterComponentProps(VaFallbackProps)
+    const isAnyFallbackPassed = computed(() => !!Object.values(fallbackProps.value).filter((prop) => prop).length)
+
     // TODO: refactor (just v-bind fit prop to CSS) in 1.7.0
     const fitComputed = computed(() => {
       if (props.contain) { return 'contain' }
@@ -189,6 +201,9 @@ export default defineComponent({
       isSuccessfullyLoaded,
       imgAttributesComputed,
       aspectRationAttributesComputed,
+
+      isAnyFallbackPassed,
+      fallbackProps,
     }
   },
 })

From ab717442ad52c7a2e02eaa4438f2ff80efda2c1d Mon Sep 17 00:00:00 2001
From: aluarius <ruseomaster@gmail.com>
Date: Fri, 20 Jan 2023 14:15:48 +0700
Subject: [PATCH 07/14] refactor: review suggestions

---
 packages/docs/src/locales/en/en.json          |  6 ++--
 .../ui/src/components/va-image/VaImage.vue    |  8 ++---
 .../va-image/hooks/useNativeImgAttributes.ts  | 32 +++++++++----------
 3 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/packages/docs/src/locales/en/en.json b/packages/docs/src/locales/en/en.json
index 1dc602147e..1e6c53e6d3 100644
--- a/packages/docs/src/locales/en/en.json
+++ b/packages/docs/src/locales/en/en.json
@@ -273,8 +273,8 @@
     },
     "VaAspectRatio": {
       "props": {
-        "contentWidth": "Component's wrapper width. Is used with `content-height` to replace the `ratio` property.",
-        "contentHeight": "Component's wrapper height. Is used with `content-width` to replace the `ratio` property."
+        "contentWidth": "Wrapper width, it's used with `content-height` to replace the `ratio` property.",
+        "contentHeight": "Wrapper height, it's used with `content-width` to replace the `ratio` property."
       }
     },
     "VaAffix": {
@@ -544,7 +544,7 @@
         "sizes": "Proxies the `sizes` attribute to the image [MDN](https://developer.mozilla.org/docs/Web/HTML/Element/img#using_the_srcset_and_sizes_attributes)[[target=_blank]].",
         "srcset": "Proxies the `srcset` attribute to the image [MDN](https://developer.mozilla.org/docs/Web/HTML/Element/img#using_the_srcset_and_sizes_attributes)[[target=_blank]].",
         "title": "Proxies the `title` attribute to the image [MDN](https://developer.mozilla.org/docs/Web/HTML/Element/img#the_title_attribute)[[target=_blank]].",
-        "notDraggable": "Changes the `draggable` attribute value в `false` [MDN](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/draggable)[[target=_blank]]."
+        "notDraggable": "Switches the `draggable` attribute value to `false` [MDN](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/draggable)[[target=_blank]]."
       },
       "events": {
         "loaded": "Emitted when image loading is finished.",
diff --git a/packages/ui/src/components/va-image/VaImage.vue b/packages/ui/src/components/va-image/VaImage.vue
index 9f9d0ee131..a47be1e5e4 100644
--- a/packages/ui/src/components/va-image/VaImage.vue
+++ b/packages/ui/src/components/va-image/VaImage.vue
@@ -52,11 +52,11 @@ import { VaAspectRatio } from '../va-aspect-ratio'
 
 import {
   useNativeImgAttributes, useNativeImgAttributesProps,
-  validateProp,
+  validateImgProp,
 } from './hooks/useNativeImgAttributes'
 import { useComponentPresetProp, useDeprecated } from '../../composables'
 
-const fitOptions = ['contain', 'fill', 'cover', 'scale-down', 'none'] as const
+const FIT_OPTIONS = ['contain', 'fill', 'cover', 'scale-down', 'none'] as const
 
 export default defineComponent({
   name: 'VaImage',
@@ -80,9 +80,9 @@ export default defineComponent({
       },
     },
     fit: {
-      type: String as PropType<typeof fitOptions[number]>,
+      type: String as PropType<typeof FIT_OPTIONS[number]>,
       default: 'cover',
-      validator: (v: string) => validateProp(v, fitOptions),
+      validator: (v: string) => validateImgProp(v, FIT_OPTIONS),
     },
     // TODO: delete in 1.7.0
     contain: { type: Boolean, default: false },
diff --git a/packages/ui/src/components/va-image/hooks/useNativeImgAttributes.ts b/packages/ui/src/components/va-image/hooks/useNativeImgAttributes.ts
index d5a804be5f..becd3e5b1f 100644
--- a/packages/ui/src/components/va-image/hooks/useNativeImgAttributes.ts
+++ b/packages/ui/src/components/va-image/hooks/useNativeImgAttributes.ts
@@ -1,13 +1,13 @@
 import { computed, type ExtractPropTypes, type PropType } from 'vue'
 import pick from 'lodash/pick.js'
 
-const referrerPolicyOptions = ['no-referrer', 'no-referrer-when-downgrade', 'origin', 'origin-when-cross-origin', 'same-origin', 'strict-origin', 'strict-origin-when-cross-origin', 'unsafe-url'] as const
-const loadingOptions = ['lazy', 'eager'] as const
-const crossoriginOptions = ['anonymous', 'use-credentials'] as const
-const decodingOptions = ['auto', 'sync', 'async'] as const
-const fetchpriorityOptions = ['auto', 'high', 'low'] as const
+const REFERRER_POLICY_OPTIONS = ['no-referrer', 'no-referrer-when-downgrade', 'origin', 'origin-when-cross-origin', 'same-origin', 'strict-origin', 'strict-origin-when-cross-origin', 'unsafe-url'] as const
+const LOADING_OPTIONS = ['lazy', 'eager'] as const
+const CROSSORIGIN_OPTIONS = ['anonymous', 'use-credentials'] as const
+const DECODING_OPTIONS = ['auto', 'sync', 'async'] as const
+const FETCH_PRIORITY_OPTIONS = ['auto', 'high', 'low'] as const
 
-export const validateProp = (v: string, arr: Readonly<string[]>) => arr.includes(v)
+export const validateImgProp = (v: string, arr: Readonly<string[]>) => arr.includes(v)
 
 export const useNativeImgAttributesProps = {
   src: { type: String, required: true },
@@ -17,25 +17,25 @@ export const useNativeImgAttributesProps = {
   srcset: { type: String, default: '' },
   notDraggable: { type: Boolean, default: false },
   loading: {
-    type: String as PropType<typeof loadingOptions[number]>,
-    validator: (v: string) => validateProp(v, loadingOptions),
+    type: String as PropType<typeof LOADING_OPTIONS[number]>,
+    validator: (v: string) => validateImgProp(v, LOADING_OPTIONS),
   },
   crossorigin: {
-    type: String as PropType<typeof crossoriginOptions[number]>,
-    validator: (v: string) => validateProp(v, crossoriginOptions),
+    type: String as PropType<typeof CROSSORIGIN_OPTIONS[number]>,
+    validator: (v: string) => validateImgProp(v, CROSSORIGIN_OPTIONS),
   },
   decoding: {
-    type: String as PropType<typeof decodingOptions[number]>,
-    validator: (v: string) => validateProp(v, decodingOptions),
+    type: String as PropType<typeof DECODING_OPTIONS[number]>,
+    validator: (v: string) => validateImgProp(v, DECODING_OPTIONS),
   },
   fetchpriority: {
-    type: String as PropType<typeof fetchpriorityOptions[number]>,
+    type: String as PropType<typeof FETCH_PRIORITY_OPTIONS[number]>,
     default: 'auto',
-    validator: (v: string) => validateProp(v, fetchpriorityOptions),
+    validator: (v: string) => validateImgProp(v, FETCH_PRIORITY_OPTIONS),
   },
   referrerpolicy: {
-    type: String as PropType<typeof referrerPolicyOptions[number]>,
-    validator: (v: string) => validateProp(v, referrerPolicyOptions),
+    type: String as PropType<typeof REFERRER_POLICY_OPTIONS[number]>,
+    validator: (v: string) => validateImgProp(v, REFERRER_POLICY_OPTIONS),
   },
 }
 

From fe32e7427503898b0171a0246bb27c30ac946aca Mon Sep 17 00:00:00 2001
From: aluarius <ruseomaster@gmail.com>
Date: Mon, 23 Jan 2023 20:27:31 +0700
Subject: [PATCH 08/14] fix: states position fix

---
 packages/ui/src/components/va-image/VaImage.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/components/va-image/VaImage.vue b/packages/ui/src/components/va-image/VaImage.vue
index a47be1e5e4..460e102f04 100644
--- a/packages/ui/src/components/va-image/VaImage.vue
+++ b/packages/ui/src/components/va-image/VaImage.vue
@@ -215,12 +215,15 @@ export default defineComponent({
     object-position: var(--va-image-object-position);
   }
 
+  &__overlay {
+    @include absolute;
+  }
+
   &__placeholder,
   &__loader,
   &__error,
   &__overlay {
-    @include absolute;
-
+    width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;

From 71c0e65c8602a5c633820c76a4e92edf73a51b37 Mon Sep 17 00:00:00 2001
From: aluarius <ruseomaster@gmail.com>
Date: Tue, 24 Jan 2023 20:12:49 +0700
Subject: [PATCH 09/14] refactor: review suggestions

---
 .../src/components/va-carousel/VaCarousel.vue |  2 +-
 .../ui/src/components/va-image/VaImage.vue    | 31 +++++++++----------
 .../va-image/hooks/useNativeImgAttributes.ts  | 23 +++-----------
 3 files changed, 21 insertions(+), 35 deletions(-)

diff --git a/packages/ui/src/components/va-carousel/VaCarousel.vue b/packages/ui/src/components/va-carousel/VaCarousel.vue
index 57c80bd599..21152cd8fc 100644
--- a/packages/ui/src/components/va-carousel/VaCarousel.vue
+++ b/packages/ui/src/components/va-carousel/VaCarousel.vue
@@ -336,7 +336,7 @@ export default defineComponent({
     }
   }
 
-  .va-aspect-ratio {
+  .va-image {
     height: 100%;
     width: 100%;
   }
diff --git a/packages/ui/src/components/va-image/VaImage.vue b/packages/ui/src/components/va-image/VaImage.vue
index 460e102f04..097d78d464 100644
--- a/packages/ui/src/components/va-image/VaImage.vue
+++ b/packages/ui/src/components/va-image/VaImage.vue
@@ -1,8 +1,11 @@
 <template>
-  <va-aspect-ratio v-bind="aspectRationAttributesComputed">
+  <va-aspect-ratio
+    class="va-image"
+    v-bind="aspectRationAttributesComputed"
+  >
     <picture
       v-show="isSuccessfullyLoaded"
-      class="va-image"
+      class="va-image__content"
       :aria-busy="isLoading"
     >
       <slot v-if="$slots.sources" name="sources" />
@@ -50,14 +53,9 @@ import { defineComponent, ref, computed, watch, nextTick, onBeforeUnmount, type
 
 import { VaAspectRatio } from '../va-aspect-ratio'
 
-import {
-  useNativeImgAttributes, useNativeImgAttributesProps,
-  validateImgProp,
-} from './hooks/useNativeImgAttributes'
+import { useNativeImgAttributes, useNativeImgAttributesProps } from './hooks/useNativeImgAttributes'
 import { useComponentPresetProp, useDeprecated } from '../../composables'
 
-const FIT_OPTIONS = ['contain', 'fill', 'cover', 'scale-down', 'none'] as const
-
 export default defineComponent({
   name: 'VaImage',
 
@@ -80,9 +78,8 @@ export default defineComponent({
       },
     },
     fit: {
-      type: String as PropType<typeof FIT_OPTIONS[number]>,
+      type: String as PropType<'contain' | 'fill' | 'cover' | 'scale-down' | 'none'>,
       default: 'cover',
-      validator: (v: string) => validateImgProp(v, FIT_OPTIONS),
     },
     // TODO: delete in 1.7.0
     contain: { type: Boolean, default: false },
@@ -206,13 +203,15 @@ export default defineComponent({
 }
 
 .va-image {
-  @include absolute;
+  &__content {
+    @include absolute;
 
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: v-bind(fitComputed);
-    object-position: var(--va-image-object-position);
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: v-bind(fitComputed);
+      object-position: var(--va-image-object-position);
+    }
   }
 
   &__overlay {
diff --git a/packages/ui/src/components/va-image/hooks/useNativeImgAttributes.ts b/packages/ui/src/components/va-image/hooks/useNativeImgAttributes.ts
index becd3e5b1f..f1f4d48ae3 100644
--- a/packages/ui/src/components/va-image/hooks/useNativeImgAttributes.ts
+++ b/packages/ui/src/components/va-image/hooks/useNativeImgAttributes.ts
@@ -1,14 +1,6 @@
 import { computed, type ExtractPropTypes, type PropType } from 'vue'
 import pick from 'lodash/pick.js'
 
-const REFERRER_POLICY_OPTIONS = ['no-referrer', 'no-referrer-when-downgrade', 'origin', 'origin-when-cross-origin', 'same-origin', 'strict-origin', 'strict-origin-when-cross-origin', 'unsafe-url'] as const
-const LOADING_OPTIONS = ['lazy', 'eager'] as const
-const CROSSORIGIN_OPTIONS = ['anonymous', 'use-credentials'] as const
-const DECODING_OPTIONS = ['auto', 'sync', 'async'] as const
-const FETCH_PRIORITY_OPTIONS = ['auto', 'high', 'low'] as const
-
-export const validateImgProp = (v: string, arr: Readonly<string[]>) => arr.includes(v)
-
 export const useNativeImgAttributesProps = {
   src: { type: String, required: true },
   alt: { type: String, default: '' },
@@ -17,25 +9,20 @@ export const useNativeImgAttributesProps = {
   srcset: { type: String, default: '' },
   notDraggable: { type: Boolean, default: false },
   loading: {
-    type: String as PropType<typeof LOADING_OPTIONS[number]>,
-    validator: (v: string) => validateImgProp(v, LOADING_OPTIONS),
+    type: String as PropType<'lazy' | 'eager'>,
   },
   crossorigin: {
-    type: String as PropType<typeof CROSSORIGIN_OPTIONS[number]>,
-    validator: (v: string) => validateImgProp(v, CROSSORIGIN_OPTIONS),
+    type: String as PropType<'anonymous' | 'use-credentials'>,
   },
   decoding: {
-    type: String as PropType<typeof DECODING_OPTIONS[number]>,
-    validator: (v: string) => validateImgProp(v, DECODING_OPTIONS),
+    type: String as PropType<'auto' | 'sync' | 'async'>,
   },
   fetchpriority: {
-    type: String as PropType<typeof FETCH_PRIORITY_OPTIONS[number]>,
+    type: String as PropType<'auto' | 'high' | 'low'>,
     default: 'auto',
-    validator: (v: string) => validateImgProp(v, FETCH_PRIORITY_OPTIONS),
   },
   referrerpolicy: {
-    type: String as PropType<typeof REFERRER_POLICY_OPTIONS[number]>,
-    validator: (v: string) => validateImgProp(v, REFERRER_POLICY_OPTIONS),
+    type: String as PropType<'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url'>,
   },
 }
 

From a34d78a36cd694497afadcbfa1db12f344be5733 Mon Sep 17 00:00:00 2001
From: aluarius <ruseomaster@gmail.com>
Date: Thu, 26 Jan 2023 14:51:57 +0700
Subject: [PATCH 10/14] feat: additional placeholder src prop

---
 packages/ui/src/components/va-image/VaImage.demo.vue |  7 ++-----
 packages/ui/src/components/va-image/VaImage.vue      | 11 +++++++++--
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/ui/src/components/va-image/VaImage.demo.vue b/packages/ui/src/components/va-image/VaImage.demo.vue
index 34e004f24b..18d1c4c1d2 100644
--- a/packages/ui/src/components/va-image/VaImage.demo.vue
+++ b/packages/ui/src/components/va-image/VaImage.demo.vue
@@ -11,11 +11,8 @@
       <va-image
         class="image"
         src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
-      >
-        <template #placeholder>
-          <img src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/blur,r_50,s_50/quality,q_1/resize,m_mfit,h_200,w_200" alt="" />
-        </template>
-      </va-image>
+        placeholder-src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/blur,r_50,s_50/quality,q_1/resize,m_mfit,h_200,w_200"
+      />
     </VbCard>
 
     <VbCard title="Slots (loading, error, placeholder)">
diff --git a/packages/ui/src/components/va-image/VaImage.vue b/packages/ui/src/components/va-image/VaImage.vue
index 097d78d464..a7a9ea1abd 100644
--- a/packages/ui/src/components/va-image/VaImage.vue
+++ b/packages/ui/src/components/va-image/VaImage.vue
@@ -43,7 +43,13 @@
       v-if="isPlaceholderShown"
       class="va-image__placeholder"
     >
-      <slot name="placeholder" />
+      <slot name="placeholder">
+        <img
+          v-if="$props.placeholderSrc"
+          :src="$props.placeholderSrc"
+          alt=""
+        />
+      </slot>
     </div>
   </va-aspect-ratio>
 </template>
@@ -81,6 +87,7 @@ export default defineComponent({
       type: String as PropType<'contain' | 'fill' | 'cover' | 'scale-down' | 'none'>,
       default: 'cover',
     },
+    placeholderSrc: { type: String, default: '' },
     // TODO: delete in 1.7.0
     contain: { type: Boolean, default: false },
   },
@@ -157,7 +164,7 @@ export default defineComponent({
     watch(() => props.src, init)
 
     const isPlaceholderShown = computed(() =>
-      ((isLoading.value && !slots?.loader?.()) || (isError.value && !slots?.error?.())) && slots?.placeholder?.())
+      ((isLoading.value && !slots?.loader?.()) || (isError.value && !slots?.error?.())) && (slots?.placeholder?.() || props.placeholderSrc))
 
     const isSuccessfullyLoaded = computed(() => !(isLoading.value || isError.value))
 

From f427bc5fd49eb8799c0ed1bc669b60a7a3139aa2 Mon Sep 17 00:00:00 2001
From: aluarius <ruseomaster@gmail.com>
Date: Thu, 26 Jan 2023 14:57:06 +0700
Subject: [PATCH 11/14] refactor: placeholder src prop description

---
 packages/docs/src/locales/en/en.json | 3 ++-
 packages/docs/src/locales/ru/ru.json | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/docs/src/locales/en/en.json b/packages/docs/src/locales/en/en.json
index c789749629..e65f07267c 100644
--- a/packages/docs/src/locales/en/en.json
+++ b/packages/docs/src/locales/en/en.json
@@ -546,7 +546,8 @@
         "sizes": "Proxies the `sizes` attribute to the image [MDN](https://developer.mozilla.org/docs/Web/HTML/Element/img#using_the_srcset_and_sizes_attributes)[[target=_blank]].",
         "srcset": "Proxies the `srcset` attribute to the image [MDN](https://developer.mozilla.org/docs/Web/HTML/Element/img#using_the_srcset_and_sizes_attributes)[[target=_blank]].",
         "title": "Proxies the `title` attribute to the image [MDN](https://developer.mozilla.org/docs/Web/HTML/Element/img#the_title_attribute)[[target=_blank]].",
-        "notDraggable": "Switches the `draggable` attribute value to `false` [MDN](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/draggable)[[target=_blank]]."
+        "notDraggable": "Switches the `draggable` attribute value to `false` [MDN](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/draggable)[[target=_blank]].",
+        "placeholderSrc": "`src` value for the placeholder image (can be replaced with `placeholder` slot)."
       },
       "events": {
         "loaded": "Emitted when image loading is finished.",
diff --git a/packages/docs/src/locales/ru/ru.json b/packages/docs/src/locales/ru/ru.json
index 5b5e2878b2..560b449835 100644
--- a/packages/docs/src/locales/ru/ru.json
+++ b/packages/docs/src/locales/ru/ru.json
@@ -543,7 +543,8 @@
         "sizes": "Проксирует свойство `sizes` в изображение [MDN](https://developer.mozilla.org/docs/Web/HTML/Element/img#using_the_srcset_and_sizes_attributes)[[target=_blank]].",
         "srcset": "Проксирует свойство `srcset` в изображение [MDN](https://developer.mozilla.org/docs/Web/HTML/Element/img#using_the_srcset_and_sizes_attributes)[[target=_blank]].",
         "title": "Проксирует свойство `title` в изображение [MDN](https://developer.mozilla.org/docs/Web/HTML/Element/img#the_title_attribute)[[target=_blank]].",
-        "notDraggable": "Переводит свойство `draggable` в `false` [MDN](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/draggable)[[target=_blank]]."
+        "notDraggable": "Переводит свойство `draggable` в `false` [MDN](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/draggable)[[target=_blank]].",
+        "placeholderSrc": "Значение аттрибута `src` для тега `img` в плейсхолдере (который может быть перезаписан с помощью слота `placeholder`)."
       },
       "events": {
         "loaded": "Событие вызывается, когда загрузка изображения окончена.",

From 8af516abf24bc90637fdeab592451cc27f349819 Mon Sep 17 00:00:00 2001
From: aluarius <ruseomaster@gmail.com>
Date: Fri, 27 Jan 2023 14:17:04 +0700
Subject: [PATCH 12/14] refactor: review suggestions

---
 packages/docs/src/locales/en/en.json                     | 2 +-
 packages/docs/src/locales/ru/ru.json                     | 2 +-
 .../ui-elements/image/examples/DefaultSlot.vue           | 2 +-
 packages/ui/src/components/va-carousel/VaCarousel.vue    | 2 +-
 packages/ui/src/components/va-image/VaImage.demo.vue     | 2 +-
 .../components/va-image/hooks/useNativeImgAttributes.ts  | 9 ++++-----
 6 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/packages/docs/src/locales/en/en.json b/packages/docs/src/locales/en/en.json
index e65f07267c..a28e7ac6ec 100644
--- a/packages/docs/src/locales/en/en.json
+++ b/packages/docs/src/locales/en/en.json
@@ -546,7 +546,7 @@
         "sizes": "Proxies the `sizes` attribute to the image [MDN](https://developer.mozilla.org/docs/Web/HTML/Element/img#using_the_srcset_and_sizes_attributes)[[target=_blank]].",
         "srcset": "Proxies the `srcset` attribute to the image [MDN](https://developer.mozilla.org/docs/Web/HTML/Element/img#using_the_srcset_and_sizes_attributes)[[target=_blank]].",
         "title": "Proxies the `title` attribute to the image [MDN](https://developer.mozilla.org/docs/Web/HTML/Element/img#the_title_attribute)[[target=_blank]].",
-        "notDraggable": "Switches the `draggable` attribute value to `false` [MDN](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/draggable)[[target=_blank]].",
+        "draggable": "Proxies the `draggable` attribute to the image [MDN](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/draggable)[[target=_blank]].",
         "placeholderSrc": "`src` value for the placeholder image (can be replaced with `placeholder` slot)."
       },
       "events": {
diff --git a/packages/docs/src/locales/ru/ru.json b/packages/docs/src/locales/ru/ru.json
index 560b449835..5ff0b2bff4 100644
--- a/packages/docs/src/locales/ru/ru.json
+++ b/packages/docs/src/locales/ru/ru.json
@@ -543,7 +543,7 @@
         "sizes": "Проксирует свойство `sizes` в изображение [MDN](https://developer.mozilla.org/docs/Web/HTML/Element/img#using_the_srcset_and_sizes_attributes)[[target=_blank]].",
         "srcset": "Проксирует свойство `srcset` в изображение [MDN](https://developer.mozilla.org/docs/Web/HTML/Element/img#using_the_srcset_and_sizes_attributes)[[target=_blank]].",
         "title": "Проксирует свойство `title` в изображение [MDN](https://developer.mozilla.org/docs/Web/HTML/Element/img#the_title_attribute)[[target=_blank]].",
-        "notDraggable": "Переводит свойство `draggable` в `false` [MDN](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/draggable)[[target=_blank]].",
+        "draggable": "Проксирует свойство `draggable` в изображение [MDN](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/draggable)[[target=_blank]].",
         "placeholderSrc": "Значение аттрибута `src` для тега `img` в плейсхолдере (который может быть перезаписан с помощью слота `placeholder`)."
       },
       "events": {
diff --git a/packages/docs/src/page-configs/ui-elements/image/examples/DefaultSlot.vue b/packages/docs/src/page-configs/ui-elements/image/examples/DefaultSlot.vue
index c625983e76..2ff0b01a0c 100644
--- a/packages/docs/src/page-configs/ui-elements/image/examples/DefaultSlot.vue
+++ b/packages/docs/src/page-configs/ui-elements/image/examples/DefaultSlot.vue
@@ -52,6 +52,6 @@ const slotImagePath = computed(() => getImagePath(1500))
 }
 
 .gradient {
-  background: repeating-linear-gradient(-45deg, rgba(0, 255, 23, 0.25), rgba(0, 83, 255, 0.25) 25px);
+  background: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0.3) 100%);
 }
 </style>
diff --git a/packages/ui/src/components/va-carousel/VaCarousel.vue b/packages/ui/src/components/va-carousel/VaCarousel.vue
index 21152cd8fc..1dc8a476ca 100644
--- a/packages/ui/src/components/va-carousel/VaCarousel.vue
+++ b/packages/ui/src/components/va-carousel/VaCarousel.vue
@@ -86,7 +86,7 @@
               v-bind="vaImageProps"
               :src="isObjectSlides ? item.src : item"
               :alt="isObjectSlides ? item.alt : ''"
-              not-draggable
+              :draggable="false"
             />
           </slot>
         </div>
diff --git a/packages/ui/src/components/va-image/VaImage.demo.vue b/packages/ui/src/components/va-image/VaImage.demo.vue
index 18d1c4c1d2..ce36cd9ace 100644
--- a/packages/ui/src/components/va-image/VaImage.demo.vue
+++ b/packages/ui/src/components/va-image/VaImage.demo.vue
@@ -189,7 +189,7 @@ const slotImagePath = computed(() => getImagePath(slotImageSize.value))
   color: white;
 
   &--gradient {
-    background: repeating-linear-gradient(-45deg, rgba(0, 255, 23, 0.25), rgba(0, 83, 255, 0.25) 25px);
+    background: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0.3) 100%);
   }
 
   &--whole,
diff --git a/packages/ui/src/components/va-image/hooks/useNativeImgAttributes.ts b/packages/ui/src/components/va-image/hooks/useNativeImgAttributes.ts
index f1f4d48ae3..64561cc30d 100644
--- a/packages/ui/src/components/va-image/hooks/useNativeImgAttributes.ts
+++ b/packages/ui/src/components/va-image/hooks/useNativeImgAttributes.ts
@@ -7,7 +7,7 @@ export const useNativeImgAttributesProps = {
   title: { type: String, default: '' },
   sizes: { type: String, default: '' },
   srcset: { type: String, default: '' },
-  notDraggable: { type: Boolean, default: false },
+  draggable: { type: Boolean, default: false },
   loading: {
     type: String as PropType<'lazy' | 'eager'>,
   },
@@ -27,8 +27,7 @@ export const useNativeImgAttributesProps = {
 }
 
 export const useNativeImgAttributes = (props: ExtractPropTypes<typeof useNativeImgAttributesProps>) => {
-  return computed(() => ({
-    ...pick(props, ['src', 'alt', 'title', 'sizes', 'srcset', 'loading', 'referrerpolicy', 'fetchpriority', 'decoding', 'crossorigin']),
-    draggable: !props.notDraggable,
-  }))
+  return computed(() =>
+    pick(props, ['src', 'alt', 'title', 'sizes', 'srcset', 'loading', 'referrerpolicy', 'fetchpriority', 'decoding', 'crossorigin', 'draggable']),
+  )
 }

From 74d8fdb5e9cea9f38f8dd4d915525ca21b582afe Mon Sep 17 00:00:00 2001
From: aluarius <ruseomaster@gmail.com>
Date: Fri, 27 Jan 2023 14:32:56 +0700
Subject: [PATCH 13/14] fix: unmentioned emit

---
 packages/ui/src/components/va-image/VaImage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/components/va-image/VaImage.vue b/packages/ui/src/components/va-image/VaImage.vue
index 7cb29f4ea9..62bb228a58 100644
--- a/packages/ui/src/components/va-image/VaImage.vue
+++ b/packages/ui/src/components/va-image/VaImage.vue
@@ -74,7 +74,7 @@ export default defineComponent({
 
   components: { VaAspectRatio, VaFallback },
 
-  emits: ['loaded', 'error'],
+  emits: ['loaded', 'error', 'fallback'],
 
   props: {
     ...useComponentPresetProp,

From 3d650a0a07ac97bbc3209754ea6f09082a74d180 Mon Sep 17 00:00:00 2001
From: aluarius <ruseomaster@gmail.com>
Date: Mon, 30 Jan 2023 22:00:19 +0400
Subject: [PATCH 14/14] refactor: review suggestions feat: fallback global
 config for va-image

---
 packages/docs/src/locales/en/en.json                 |  2 +-
 packages/docs/src/locales/ru/ru.json                 |  2 +-
 .../ui/src/components/va-fallback/VaFallback.vue     |  4 ----
 packages/ui/src/components/va-image/VaImage.vue      | 12 ++++++++----
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/docs/src/locales/en/en.json b/packages/docs/src/locales/en/en.json
index 8296abb26d..633660584b 100644
--- a/packages/docs/src/locales/en/en.json
+++ b/packages/docs/src/locales/en/en.json
@@ -2653,7 +2653,7 @@
       },
       "slots": {
         "title": "Status slots",
-        "text": "We're providing 3 status slots: `error` (visible when `src` path is incorrect), `loading` (visible when image is loading) and `placeholder` (works as both previous). As an alternative for error handling, we provide the `fallback-icon`, `fallback-text`, `fallback-image` and `fallback-renderer` props, that will be called if error slot wasn't passed."
+        "text": "We're providing 3 status slots: `error` (visible when `src` path is incorrect), `loading` (visible when image is loading) and `placeholder` (works as both previous). As an alternative for error handling, we provide the `fallback-icon`, `fallback-text`, `fallback-image` and `fallback-renderer` props, that will be called if error slot wasn't passed. Also you're able to set global fallback settings via [components config](/getting-started/configuration-guide#components-config)."
       },
       "srcSet": {
         "title": "Srcset",
diff --git a/packages/docs/src/locales/ru/ru.json b/packages/docs/src/locales/ru/ru.json
index 217bd39670..907d495542 100644
--- a/packages/docs/src/locales/ru/ru.json
+++ b/packages/docs/src/locales/ru/ru.json
@@ -2527,7 +2527,7 @@
       },
       "slots": {
         "title": "Слоты состояний",
-        "text": "Мы предоставляем 3 слота состояния: `error` (содержимое отображается когда `src` некорректен), `loading` (содержимое отображается когда изображение грузится) and `placeholder` (универсальное решение, заменяющее 2 предыдущих). Также, в качестве альтернативного способа обработки ошибок, вы можете передавать свойства `fallback-icon`, `fallback-text`, `fallback-image` и `fallback-renderer`, которые будут отрабатывать, если `error` слот не был передан."
+        "text": "Мы предоставляем 3 слота состояния: `error` (содержимое отображается когда `src` некорректен), `loading` (содержимое отображается когда изображение грузится) and `placeholder` (универсальное решение, заменяющее 2 предыдущих). Также, в качестве альтернативного способа обработки ошибок, вы можете передавать свойства `fallback-icon`, `fallback-text`, `fallback-image` и `fallback-renderer`, которые будут отрабатывать, если `error` слот не был передан. Кроме того, вы можете установить глобальный настройки фолбэка с помощью [components config](/getting-started/configuration-guide#components-config)."
       },
       "srcSet": {
         "title": "Srcset",
diff --git a/packages/ui/src/components/va-fallback/VaFallback.vue b/packages/ui/src/components/va-fallback/VaFallback.vue
index cac47218f1..d0e526123c 100644
--- a/packages/ui/src/components/va-fallback/VaFallback.vue
+++ b/packages/ui/src/components/va-fallback/VaFallback.vue
@@ -9,19 +9,15 @@ export default defineComponent({
   props: {
     fallbackSrc: {
       type: String,
-      default: '',
     },
     fallbackText: {
       type: String,
-      default: '',
     },
     fallbackIcon: {
       type: String,
-      default: '',
     },
     fallbackRender: {
       type: Function as PropType<() => any | undefined>,
-      default: undefined,
     },
   },
 
diff --git a/packages/ui/src/components/va-image/VaImage.vue b/packages/ui/src/components/va-image/VaImage.vue
index 48e84dc63b..883c5ad5c0 100644
--- a/packages/ui/src/components/va-image/VaImage.vue
+++ b/packages/ui/src/components/va-image/VaImage.vue
@@ -79,6 +79,7 @@ import {
   useIsMounted,
   useDeprecated,
   useIntersectionObserver,
+  useGlobalConfig,
 } from '../../composables'
 
 import { extractComponentProps, filterComponentProps } from '../../utils/component-options'
@@ -209,9 +210,10 @@ export default defineComponent({
     onBeforeUnmount(() => clearTimeout(timer))
     watch(() => props.src, init)
 
-    const isPlaceholderShown = computed(() =>
-      ((isLoading.value && !slots?.loader?.()) || (isError.value && (!slots?.error?.() && !isAnyFallbackPassed.value))) &&
-      (slots?.placeholder?.() || props.placeholderSrc))
+    const isPlaceholderPassed = computed(() => slots?.placeholder?.() || props.placeholderSrc)
+    const isLoaderShown = computed(() => isLoading.value && !slots?.loader?.())
+    const isErrorShown = computed(() => isError.value && (!slots?.error?.() && !isAnyFallbackPassed.value))
+    const isPlaceholderShown = computed(() => (isLoaderShown.value || isErrorShown.value) && isPlaceholderPassed.value)
 
     const isSuccessfullyLoaded = computed(() => !(isLoading.value || isError.value))
 
@@ -224,7 +226,9 @@ export default defineComponent({
     }))
 
     const fallbackProps = filterComponentProps(VaFallbackProps)
-    const isAnyFallbackPassed = computed(() => !!Object.values(fallbackProps.value).filter((prop) => prop).length)
+    const checkObjectNonEmptyValues = (obj: Record<string, any> | undefined) => !!Object.values(obj || {}).filter((prop) => prop).length
+    const hasFallbackGlobalConfig = computed(() => checkObjectNonEmptyValues(useGlobalConfig()?.globalConfig?.value?.components?.VaFallback))
+    const isAnyFallbackPassed = computed(() => checkObjectNonEmptyValues(fallbackProps.value) || hasFallbackGlobalConfig.value)
 
     // TODO: refactor (just v-bind fit prop to CSS) in 1.7.0
     const fitComputed = computed(() => {