diff --git a/examples/vue3/src/components/Controls.story.vue b/examples/vue3/src/components/Controls.story.vue
index 695dffaf..6ea430f4 100644
--- a/examples/vue3/src/components/Controls.story.vue
+++ b/examples/vue3/src/components/Controls.story.vue
@@ -1,9 +1,10 @@
 <script lang="ts" setup>
-const options = [
-  { label: 'Crash Bandicoot', value: 'crash-bandicoot' },
-  { label: 'The Last of Us', value: 'the-last-of-us' },
-  { label: 'Ghost of Tsushima', value: 'ghost-of-tsushima' },
-]
+const options = {
+  'crash-bandicoot': 'Crash Bandicoot',
+  'the-last-of-us': 'The Last of Us',
+  'ghost-of-tsushima': 'Ghost of Tsushima',
+}
+
 function initState () {
   return {
     text: 'Hello',
diff --git a/packages/histoire-controls/package.json b/packages/histoire-controls/package.json
index 70abc214..e0089536 100644
--- a/packages/histoire-controls/package.json
+++ b/packages/histoire-controls/package.json
@@ -48,7 +48,7 @@
   },
   "devDependencies": {
     "@peeky/test": "^0.13.5",
-    "@types/node": "^17.0.23",
+    "@types/node": "^17.0.32",
     "@vitejs/plugin-vue": "^2.3.1",
     "@vue/test-utils": "^2.0.0-rc.19",
     "@vueuse/core": "^8.2.5",
diff --git a/packages/histoire-controls/src/components/select/CustomSelect.vue b/packages/histoire-controls/src/components/select/CustomSelect.vue
new file mode 100644
index 00000000..8510f05a
--- /dev/null
+++ b/packages/histoire-controls/src/components/select/CustomSelect.vue
@@ -0,0 +1,119 @@
+<script lang="ts">
+export default {
+  name: 'CustomSelect',
+}
+</script>
+
+<script lang="ts" setup>
+import { Dropdown as VDropdown } from 'floating-vue'
+import { computed, ComputedRef } from 'vue'
+import { Icon } from '@iconify/vue'
+
+export interface SelectOption {
+  label: string
+  value: string
+}
+
+const props = defineProps<{
+  modelValue: string
+  options: Record<string, string> | string[] | SelectOption[]
+}>()
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
+const formattedOptions: ComputedRef<Record<string, string>> = computed(() => {
+  if (Array.isArray(props.options)) {
+    return Object.fromEntries(props.options.map((value: string | SelectOption) => {
+      if (typeof value === 'string') {
+        return [value, value]
+      } else {
+        return [value.value, value.label]
+      }
+    }))
+  }
+  return props.options
+})
+
+const selectedLabel = computed(() => formattedOptions.value[props.modelValue])
+
+function selectValue (value: string, hide: () => void) {
+  emits('update:modelValue', value)
+  hide()
+}
+</script>
+
+<template>
+  <VDropdown
+    auto-size
+  >
+    <div
+      class="htw-cursor-pointer htw-w-full htw-outline-none htw-px-2 htw-h-[27px] -htw-my-1 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 hover:htw-border-primary-500 dark:hover:htw-border-primary-500 htw-rounded-sm htw-flex htw-gap-2 htw-items-center htw-leading-normal"
+    >
+      <div class="htw-flex-1 htw-truncate">
+        <slot :label="selectedLabel">
+          {{ selectedLabel }}
+        </slot>
+      </div>
+      <Icon
+        icon="carbon:chevron-sort"
+        class="htw-w-4 htw-h-4 htw-flex-none htw-ml-auto"
+      />
+    </div>
+    <template #popper="{ hide }">
+      <div class="htw-flex htw-flex-col htw-bg-gray-50 dark:htw-bg-gray-700">
+        <div
+          v-for="( label, value ) in formattedOptions"
+          v-bind="{ ...$attrs, class: null, style: null }"
+          :key="label"
+          class="htw-px-2 htw-py-1 htw-cursor-pointer hover:htw-bg-primary-100 dark:hover:htw-bg-primary-700"
+          :class="{
+            'htw-bg-primary-200 dark:htw-bg-primary-800': props.modelValue === value,
+          }"
+          @click="selectValue(value, hide)"
+        >
+          {{ label }}
+        </div>
+      </div>
+    </template>
+  </VDropdown>
+</template>
+
+<style lang="postcss">
+/* @TODO custom themes */
+
+.v-popper {
+  line-height: 0;
+}
+
+.v-popper--theme-dropdown {
+  .htw-dark & {
+    .v-popper__inner {
+      @apply htw-bg-gray-700 htw-border-gray-850 htw-text-gray-100;
+    }
+
+    .v-popper__arrow-inner {
+      @apply htw-border-gray-700;
+    }
+
+    .v-popper__arrow-outer {
+      @apply htw-border-gray-850;
+    }
+  }
+
+  &.v-popper__popper--show-from .v-popper__wrapper {
+    transform: scale(.75);
+  }
+
+  &.v-popper__popper--show-to .v-popper__wrapper {
+    transform: none;
+    transition: transform .15s cubic-bezier(0, 1, .5, 1);
+  }
+}
+
+.v-popper__popper:focus-visible {
+  outline: none;
+}
+
+</style>
diff --git a/packages/histoire-controls/src/components/select/HstSelect.story.vue b/packages/histoire-controls/src/components/select/HstSelect.story.vue
index 59ca3a0f..f7725d6e 100644
--- a/packages/histoire-controls/src/components/select/HstSelect.story.vue
+++ b/packages/histoire-controls/src/components/select/HstSelect.story.vue
@@ -1,13 +1,18 @@
 <script lang="ts" setup>
 import HstSelect from './HstSelect.vue'
 
-const options = [
-  { label: 'Crash Bandicoot', value: 'crash-bandicoot' },
-  { label: 'The Last of Us', value: 'the-last-of-us' },
-  { label: 'Ghost of Tsushima', value: 'ghost-of-tsushima' },
-]
+const options = {
+  'crash-bandicoot': 'Crash Bandicoot',
+  'the-last-of-us': 'The Last of Us',
+  'ghost-of-tsushima': 'Ghost of Tsushima',
+}
+
+const flatOptions = Object.keys(options)
 
-const flatOptions = options.map(option => option.label)
+const objectOptions = Object.keys(options).map(key => ({
+  label: options[key],
+  value: key,
+}))
 
 function initState () {
   return {
@@ -66,7 +71,7 @@ function initState () {
     </Variant>
 
     <Variant
-      title="options-as-array-of-objects"
+      title="options-as-object"
       :init-state="initState"
     >
       <template #default="{ state }">
@@ -86,6 +91,27 @@ function initState () {
       </template>
     </Variant>
 
+    <Variant
+      title="options-as-array-of-objects"
+      :init-state="initState"
+    >
+      <template #default="{ state }">
+        <pre class="htw-text-xs htw-bg-gray-50 dark:htw-bg-gray-600 htw-rounded htw-p-4">{{ objectOptions }}</pre>
+        <HstSelect
+          v-model="state.select"
+          title="Games"
+          :options="objectOptions"
+        />
+      </template>
+      <template #controls="{ state }">
+        <HstSelect
+          v-model="state.select"
+          title="Games"
+          :options="objectOptions"
+        />
+      </template>
+    </Variant>
+
     <Variant
       title="options-as-array-of-strings"
       :init-state="initState"
diff --git a/packages/histoire-controls/src/components/select/HstSelect.vue b/packages/histoire-controls/src/components/select/HstSelect.vue
index bd93301e..c8d00469 100644
--- a/packages/histoire-controls/src/components/select/HstSelect.vue
+++ b/packages/histoire-controls/src/components/select/HstSelect.vue
@@ -2,39 +2,24 @@
 export default {
   name: 'HstSelect',
 }
+
+export type { SelectOption as HstSelectOption } from './CustomSelect.vue'
 </script>
 
 <script lang="ts" setup>
-import { ref, computed, ComputedRef, PropType } from 'vue'
+import { ref } from 'vue'
 import HstWrapper from '../HstWrapper.vue'
+import CustomSelect, { SelectOption } from './CustomSelect.vue'
 
-export interface HstSelectOptions {
-  label: string
-  value: string
-}
-
-const props = defineProps({
-  title: {
-    type: String,
-    default: '',
-  },
-  modelValue: {
-    type: String,
-    default: null,
-  },
-  options: {
-    type: Array as PropType<HstSelectOptions[] | string[]>,
-    required: true,
-    default: () => [],
-  },
-})
-
-const formattedOtions: ComputedRef<HstSelectOptions[]> =
-  computed(() => props.options.map(option => typeof option === 'string' ? { label: option, value: option } as HstSelectOptions : option as HstSelectOptions))
+const props = defineProps<{
+  title?: string
+  modelValue: string
+  options: Record<string, string> | string[] | SelectOption[]
+}>()
 
-const emit = defineEmits({
-  'update:modelValue': (newValue: string) => true,
-})
+const emits = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
 
 const select = ref<HTMLInputElement>()
 </script>
@@ -45,23 +30,11 @@ const select = ref<HTMLInputElement>()
     class="htw-cursor-text htw-items-center"
     :class="$attrs.class"
     :style="$attrs.style"
-    @click="select.focus()"
   >
-    <select
-      ref="select"
-      class="htw-text-inherit htw-bg-transparent htw-w-full htw-outline-none htw-px-2 htw-py-1 -htw-my-1 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 focus:htw-border-primary-500 dark:focus:htw-border-primary-500 htw-rounded-sm"
-      :value="modelValue"
-      @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
-    >
-      <option
-        v-for="{ label, value } in formattedOtions"
-        v-bind="{ ...$attrs, class: null, style: null }"
-        :key="label"
-        class="dark:htw-bg-gray-600"
-        :value="value"
-      >
-        {{ label }}
-      </option>
-    </select>
+    <CustomSelect
+      :options="options"
+      :model-value="modelValue"
+      @update:model-value="emits('update:modelValue', $event)"
+    />
   </HstWrapper>
 </template>
diff --git a/packages/histoire/package.json b/packages/histoire/package.json
index 9dbb8f96..203bb22e 100644
--- a/packages/histoire/package.json
+++ b/packages/histoire/package.json
@@ -81,7 +81,7 @@
     "@types/flexsearch": "^0.7.3",
     "@types/fs-extra": "^9.0.13",
     "@types/markdown-it": "^12.2.3",
-    "@types/node": "^17.0.23",
+    "@types/node": "^17.0.32",
     "@vitejs/plugin-vue": "^2.3.1",
     "autoprefixer": "^10.4.4",
     "concurrently": "^7.1.0",
diff --git a/packages/histoire/src/client/app/components/base/BaseSelect.vue b/packages/histoire/src/client/app/components/base/BaseSelect.vue
new file mode 100644
index 00000000..256f7daf
--- /dev/null
+++ b/packages/histoire/src/client/app/components/base/BaseSelect.vue
@@ -0,0 +1,72 @@
+<script lang="ts" setup>
+import { Dropdown as VDropdown } from 'floating-vue'
+import { computed, ComputedRef } from 'vue'
+import { Icon } from '@iconify/vue'
+
+const props = defineProps<{
+  modelValue: string
+  options: Record<string, string> | Array<string>
+}>()
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+  (e: 'select', value: string): void
+}>()
+
+const formattedOptions: ComputedRef<Record<string, string>> = computed(() => {
+  if (Array.isArray(props.options)) {
+    return Object.fromEntries(props.options.map((value) => [value, value]))
+  }
+  return props.options
+})
+
+const selectedLabel = computed(() => formattedOptions.value[props.modelValue])
+
+function selectValue (value: string, hide: () => void) {
+  emits('update:modelValue', value)
+  emits('select', value)
+  hide()
+}
+</script>
+
+<template>
+  <VDropdown
+    auto-size
+  >
+    <div
+      class="htw-cursor-pointer htw-w-full htw-outline-none htw-px-2 htw-h-[27px] -htw-my-1 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 hover:htw-border-primary-500 dark:hover:htw-border-primary-500 htw-rounded-sm htw-flex htw-gap-2 htw-items-center htw-leading-normal"
+    >
+      <div class="htw-flex-1 htw-truncate">
+        <slot :label="selectedLabel">
+          {{ selectedLabel }}
+        </slot>
+      </div>
+      <Icon
+        icon="carbon:chevron-sort"
+        class="htw-w-4 htw-h-4 htw-flex-none htw-ml-auto"
+      />
+    </div>
+    <template #popper="{ hide }">
+      <div class="htw-flex htw-flex-col htw-bg-gray-50 dark:htw-bg-gray-700">
+        <div
+          v-for="( label, value ) in formattedOptions"
+          v-bind="{ ...$attrs, class: null, style: null }"
+          :key="label"
+          class="htw-px-2 htw-py-1 htw-cursor-pointer hover:htw-bg-primary-100 dark:hover:htw-bg-primary-700"
+          :class="{
+            'htw-bg-primary-200 dark:htw-bg-primary-800': props.modelValue === value,
+          }"
+          @click="selectValue(value, hide)"
+        >
+          <slot
+            name="option"
+            :label="label"
+            :value="value"
+          >
+            {{ label }}
+          </slot>
+        </div>
+      </div>
+    </template>
+  </VDropdown>
+</template>
diff --git a/packages/histoire/src/client/app/components/panel/StatePresets.vue b/packages/histoire/src/client/app/components/panel/StatePresets.vue
new file mode 100644
index 00000000..f35f69b6
--- /dev/null
+++ b/packages/histoire/src/client/app/components/panel/StatePresets.vue
@@ -0,0 +1,193 @@
+<script lang="ts" setup>
+import { ref, computed, nextTick, onMounted } from 'vue'
+import { Icon } from '@iconify/vue'
+import { useStorage, onClickOutside, useTimeoutFn } from '@vueuse/core'
+import BaseSelect from '../base/BaseSelect.vue'
+import { applyStateToVariant, clone, toRawDeep } from '../../util/state'
+import type { Story, Variant } from '../../types'
+
+const DEFAULT_ID = 'default'
+
+const props = defineProps<{
+  story: Story
+  variant: Variant
+}>()
+
+const saveId = computed(() => `${props.story.id}:${props.variant.id}`)
+
+const defaultState = clone(toRawDeep(props.variant.state))
+
+const selectedOption = useStorage<string>(
+  `_histoire-presets/${saveId.value}/selected`,
+  DEFAULT_ID,
+)
+
+const presetStates = useStorage<Map<string, { state: Record<string, unknown>, label: string }>>(
+  `_histoire-presets/${saveId.value}/states`,
+  new Map(),
+)
+
+const presetsOptions = computed(() => {
+  const options = { [DEFAULT_ID]: 'Initial state' }
+  presetStates.value.forEach((value, key) => {
+    options[key] = value.label
+  })
+  return options
+})
+
+function resetState () {
+  selectedOption.value = DEFAULT_ID
+  applyStateToVariant(props.variant, defaultState)
+}
+
+function applyPreset (id) {
+  if (id === DEFAULT_ID) {
+    resetState()
+  } else if (presetStates.value.has(id)) {
+    applyStateToVariant(props.variant, presetStates.value.get(id).state)
+  }
+}
+
+onMounted(() => {
+  if (selectedOption.value !== DEFAULT_ID) {
+    applyPreset(selectedOption.value)
+  }
+})
+
+const input = ref<HTMLInputElement>()
+const select = ref<HTMLInputElement>()
+const canEdit = computed(() => selectedOption.value !== DEFAULT_ID)
+const isEditing = ref(false)
+
+async function createPreset () {
+  const id = (new Date()).getTime().toString()
+
+  presetStates.value.set(id, { state: clone(toRawDeep(props.variant.state)), label: 'New preset' })
+  selectedOption.value = id
+  isEditing.value = true
+  await nextTick()
+  input.value.select()
+}
+
+const savedNotif = ref(false)
+const savedTimeout = useTimeoutFn(() => {
+  savedNotif.value = false
+}, 1000)
+
+async function savePreset () {
+  if (!canEdit.value) return
+
+  const preset = presetStates.value.get(selectedOption.value)
+  preset.state = clone(toRawDeep(props.variant.state))
+  savedNotif.value = true
+  savedTimeout.start()
+}
+
+function deletePreset (id) {
+  if (!confirm('Are you sure you want to delete this preset?')) {
+    return
+  }
+
+  if (selectedOption.value === id) {
+    resetState()
+  }
+  presetStates.value.delete(id)
+}
+
+async function startEditing () {
+  if (!canEdit.value) {
+    return
+  }
+
+  isEditing.value = true
+  await nextTick()
+  input.value.select()
+}
+
+function stopEditing () {
+  isEditing.value = false
+}
+
+onClickOutside(select, stopEditing)
+</script>
+
+<template>
+  <div class="htw-flex htw-gap-2 htw-w-full htw-items-center">
+    <div
+      ref="select"
+      class="htw-flex-1 htw-min-w-0"
+    >
+      <BaseSelect
+        v-model="selectedOption"
+        :options="presetsOptions"
+        @dblclick="startEditing()"
+        @keydown.enter="stopEditing()"
+        @keydown.escape="stopEditing()"
+        @select="id => applyPreset(id)"
+      >
+        <template #default="{ label }">
+          <input
+            v-if="isEditing"
+            ref="input"
+            v-model="presetStates.get(selectedOption).label"
+            type="text"
+            class="htw-text-inherit htw-bg-transparent htw-w-full htw-h-full htw-outline-none"
+            @click.stop.prevent
+          >
+
+          <div
+            v-else
+            class="htw-flex htw-items-center htw-gap-2"
+          >
+            <span class="htw-flex-1 htw-truncate">
+              {{ label }}
+            </span>
+            <Icon
+              v-if="canEdit"
+              v-tooltip="'Rename this preset'"
+              icon="carbon:edit"
+              class="htw-flex-none htw-cursor-pointer htw-w-4 htw-h-4 hover:htw-text-primary-500 htw-opacity-50 hover:htw-opacity-100 dark:hover:htw-text-primary-400 htw-text-gray-900 dark:htw-text-gray-100"
+              @click.stop="startEditing()"
+            />
+          </div>
+        </template>
+
+        <template #option="{ label, value }">
+          <div class="htw-flex htw-gap-2 htw-items-center">
+            <span
+              class="htw-flex-1 htw-truncate"
+            >{{ label }}</span>
+            <Icon
+              v-if="value !== DEFAULT_ID"
+              v-tooltip="'Delete this preset'"
+              icon="carbon:trash-can"
+              class="htw-flex-none htw-cursor-pointer htw-w-4 htw-h-4 hover:htw-text-primary-500 htw-opacity-50 hover:htw-opacity-100 dark:hover:htw-text-primary-400 htw-text-gray-900 dark:htw-text-gray-100"
+              @click.stop="deletePreset(value)"
+            />
+          </div>
+        </template>
+      </BaseSelect>
+    </div>
+    <Icon
+      v-tooltip="savedNotif ? 'Saved!' : canEdit ? 'Save to preset' : null"
+      :icon="savedNotif ? 'carbon:checkmark' : 'carbon:save'"
+      class="htw-cursor-pointer htw-w-4 htw-h-4 hover:htw-text-primary-500 dark:hover:htw-text-primary-400 htw-text-gray-900 dark:htw-text-gray-100"
+      :class="[
+        canEdit ? 'htw-opacity-50 hover:htw-opacity-100' : 'htw-opacity-25 htw-pointer-events-none',
+      ]"
+      @click="savePreset()"
+    />
+    <Icon
+      v-tooltip="'Create new preset'"
+      icon="carbon:add-alt"
+      class="htw-cursor-pointer htw-w-4 htw-h-4 hover:htw-text-primary-500 htw-opacity-50 hover:htw-opacity-100 dark:hover:htw-text-primary-400 htw-text-gray-900 dark:htw-text-gray-100"
+      @click="createPreset()"
+    />
+    <Icon
+      v-tooltip="'Reset to initial state'"
+      icon="carbon:reset"
+      class="htw-cursor-pointer htw-w-4 htw-h-4 hover:htw-text-primary-500 htw-opacity-50 hover:htw-opacity-100 dark:hover:htw-text-primary-400 htw-text-gray-900 dark:htw-text-gray-100"
+      @click="resetState()"
+    />
+  </div>
+</template>
diff --git a/packages/histoire/src/client/app/components/panel/StoryControls.vue b/packages/histoire/src/client/app/components/panel/StoryControls.vue
index c3c22cf6..1e1386f7 100644
--- a/packages/histoire/src/client/app/components/panel/StoryControls.vue
+++ b/packages/histoire/src/client/app/components/panel/StoryControls.vue
@@ -4,6 +4,7 @@ import { Icon } from '@iconify/vue'
 import type { Story, Variant } from '../../types'
 import SandboxVue3 from '../sandbox/SandboxVue3.vue'
 import BaseEmpty from '../base/BaseEmpty.vue'
+import StatePresets from './StatePresets.vue'
 
 defineProps({
   variant: {
@@ -19,7 +20,20 @@ defineProps({
 </script>
 
 <template>
-  <div data-test-id="story-controls">
+  <div
+    data-test-id="story-controls"
+    class="htw-flex htw-flex-col"
+  >
+    <!-- Toolbar -->
+    <div
+      class="htw-h-9 htw-flex-none htw-border-b htw-border-solid htw-border-gray-100 dark:htw-border-gray-750 htw-px-2 htw-flex htw-items-center"
+    >
+      <StatePresets
+        :story="story"
+        :variant="variant"
+      />
+    </div>
+
     <!-- Custom controls -->
     <SandboxVue3
       v-if="variant.slots().controls || story.slots().controls"
diff --git a/packages/histoire/src/client/app/components/story/StoryVariantSinglePreviewRemote.vue b/packages/histoire/src/client/app/components/story/StoryVariantSinglePreviewRemote.vue
index 75da7f38..4d4280f2 100644
--- a/packages/histoire/src/client/app/components/story/StoryVariantSinglePreviewRemote.vue
+++ b/packages/histoire/src/client/app/components/story/StoryVariantSinglePreviewRemote.vue
@@ -6,11 +6,11 @@ import { STATE_SYNC, PREVIEW_SETTINGS_SYNC, SANDBOX_READY, EVENT_SEND } from '..
 import type { Story, Variant } from '../../types'
 import HatchedPattern from '../misc/HatchedPattern.vue'
 import CheckerboardPattern from '../misc/CheckerboardPattern.vue'
-import { toRawDeep } from '../../util/reactivity'
 import { getSandboxUrl } from '../sandbox/lib'
 import { usePreviewSettingsStore } from '../../stores/preview-settings'
 import { HstEvent, useEventsStore } from '../../stores/events'
 import StoryResponsivePreview from './StoryResponsivePreview.vue'
+import { applyStateToVariant, toRawDeep } from '../../util/state'
 
 const props = defineProps<{
   story: Story
@@ -65,19 +65,7 @@ useEventListener(window, 'message', (event) => {
 
 function updateVariantState (state: any) {
   synced = true
-  if (props.variant.state) {
-    for (const key in state) {
-      if (typeof props.variant.state[key] === 'object') {
-        Object.assign(props.variant.state[key], state[key])
-      } else {
-        // eslint-disable-next-line vue/no-mutating-props
-        props.variant.state[key] = state[key]
-      }
-    }
-  } else {
-    // eslint-disable-next-line vue/no-mutating-props
-    props.variant.state = state
-  }
+  applyStateToVariant(props.variant, state)
 }
 
 function logEvent (event: HstEvent) {
diff --git a/packages/histoire/src/client/app/sandbox.ts b/packages/histoire/src/client/app/sandbox.ts
index 3573ba53..265d33ee 100644
--- a/packages/histoire/src/client/app/sandbox.ts
+++ b/packages/histoire/src/client/app/sandbox.ts
@@ -11,7 +11,7 @@ import { PREVIEW_SETTINGS_SYNC, STATE_SYNC, SANDBOX_READY } from './util/const.j
 import { applyPreviewSettings } from './util/preview-settings.js'
 import { isDark } from './util/dark.js'
 import { histoireConfig } from './util/config.js'
-import { toRawDeep } from './util/reactivity'
+import { applyStateToVariant, toRawDeep } from './util/state'
 
 const query = parseQuery(window.location.search)
 const file = ref<StoryFile>(mapFile(files.find(f => f.id === query.storyId)))
@@ -30,15 +30,7 @@ const app = createApp({
       if (event.data?.type === STATE_SYNC) {
         if (!mounted) return
         synced = true
-        if (variant.value.state) {
-          for (const key in event.data.state) {
-            if (typeof variant.value.state[key] === 'object') {
-              Object.assign(variant.value.state[key], event.data.state[key])
-            } else {
-              variant.value.state[key] = event.data.state[key]
-            }
-          }
-        }
+        applyStateToVariant(variant.value, event.data.state)
       } else if (event.data?.type === PREVIEW_SETTINGS_SYNC) {
         applyPreviewSettings(event.data.settings)
       }
diff --git a/packages/histoire/src/client/app/util/reactivity.ts b/packages/histoire/src/client/app/util/reactivity.ts
deleted file mode 100644
index eb27597e..00000000
--- a/packages/histoire/src/client/app/util/reactivity.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { unref, isRef } from 'vue'
-
-const isObject = (val) => val !== null && typeof val === 'object'
-
-export function toRawDeep (val) {
-  const unwrappedValue = isRef(val) ? unref(val) : val
-
-  if (!isObject(unwrappedValue)) {
-    return unwrappedValue
-  }
-
-  if (Array.isArray(unwrappedValue)) {
-    return unwrappedValue.map(toRawDeep)
-  }
-
-  return toRawObject(unwrappedValue)
-}
-
-const toRawObject = (obj: Record<any, any>) => Object.keys(obj).reduce((raw, key) => {
-  raw[key] = toRawDeep(obj[key])
-  return raw
-}, {})
diff --git a/packages/histoire/src/client/app/util/state.ts b/packages/histoire/src/client/app/util/state.ts
new file mode 100644
index 00000000..db51d123
--- /dev/null
+++ b/packages/histoire/src/client/app/util/state.ts
@@ -0,0 +1,51 @@
+import { unref, isRef } from 'vue'
+import type { Variant } from '../types'
+
+const isObject = (val) => val !== null && typeof val === 'object'
+
+export function toRawDeep (val) {
+  const unwrappedValue = isRef(val) ? unref(val) : val
+
+  if (!isObject(unwrappedValue)) {
+    return unwrappedValue
+  }
+
+  if (Array.isArray(unwrappedValue)) {
+    return unwrappedValue.map(toRawDeep)
+  }
+
+  return toRawObject(unwrappedValue)
+}
+
+const toRawObject = (obj: Record<any, any>) => Object.keys(obj).reduce((raw, key) => {
+  raw[key] = toRawDeep(obj[key])
+  return raw
+}, {})
+
+export function clone (data) {
+  try {
+    return structuredClone(data)
+  } catch (e) {
+    console.error(e)
+    try {
+      return JSON.parse(JSON.stringify(data))
+    } catch (e) {
+      console.error(e)
+    }
+    return data
+  }
+}
+
+export function applyStateToVariant (variant: Variant, state: any) {
+  if (variant.state) {
+    for (const key in state) {
+      if (typeof variant.state[key] === 'object') {
+        Object.assign(variant.state[key], state[key])
+      } else {
+        variant.state[key] = state[key]
+      }
+    }
+  } else {
+    variant.state = state
+  }
+}
diff --git a/packages/histoire/src/client/app/util/variant.ts b/packages/histoire/src/client/app/util/variant.ts
index 09a321dc..ba9a4f8e 100644
--- a/packages/histoire/src/client/app/util/variant.ts
+++ b/packages/histoire/src/client/app/util/variant.ts
@@ -1,6 +1,6 @@
 import { computed, Ref } from 'vue'
 import { useRoute } from 'vue-router'
-import { Variant } from '../types'
+import type { Variant } from '../types'
 
 export function useCurrentVariantRoute (variant: Ref<Variant>) {
   const route = useRoute()
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8cc81f4f..73feba94 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -37,7 +37,7 @@ importers:
       conventional-changelog-cli: 2.2.2
       eslint: 8.13.0
       eslint-plugin-cypress: 2.12.1_eslint@8.13.0
-      eslint-plugin-import: 2.26.0_eslint@8.13.0
+      eslint-plugin-import: 2.26.0_mwijbinc6ud6f2lruneo2edtnu
       eslint-plugin-node: 11.1.0_eslint@8.13.0
       eslint-plugin-promise: 6.0.0_eslint@8.13.0
       eslint-plugin-vue: 8.6.0_eslint@8.13.0
@@ -121,7 +121,7 @@ importers:
       '@types/flexsearch': ^0.7.3
       '@types/fs-extra': ^9.0.13
       '@types/markdown-it': ^12.2.3
-      '@types/node': ^17.0.23
+      '@types/node': ^17.0.32
       '@vitejs/plugin-vue': ^2.3.1
       '@vueuse/core': ^8.2.5
       autoprefixer: ^10.4.4
@@ -159,7 +159,7 @@ importers:
       vue: ^3.2.31
       vue-router: ^4.0.14
     dependencies:
-      '@histoire/controls': link:../histoire-controls
+      '@histoire/controls': 0.4.5_vue@3.2.33
       '@iconify/vue': 3.2.1_vue@3.2.33
       '@types/markdown-it': 12.2.3
       '@vueuse/core': 8.3.1_vue@3.2.33
@@ -195,7 +195,7 @@ importers:
       '@tailwindcss/typography': 0.5.2_tailwindcss@3.0.24
       '@types/flexsearch': 0.7.3
       '@types/fs-extra': 9.0.13
-      '@types/node': 17.0.25
+      '@types/node': 17.0.32
       '@vitejs/plugin-vue': 2.3.1_vite@2.9.5+vue@3.2.33
       autoprefixer: 10.4.4_postcss@8.4.12
       concurrently: 7.1.0
@@ -209,7 +209,7 @@ importers:
     specifiers:
       '@iconify/vue': ^3.2.1
       '@peeky/test': ^0.13.5
-      '@types/node': ^17.0.23
+      '@types/node': ^17.0.32
       '@vitejs/plugin-vue': ^2.3.1
       '@vue/test-utils': ^2.0.0-rc.19
       '@vueuse/core': ^8.2.5
@@ -230,7 +230,7 @@ importers:
       floating-vue: 2.0.0-beta.16_vue@3.2.33
     devDependencies:
       '@peeky/test': 0.13.5
-      '@types/node': 17.0.25
+      '@types/node': 17.0.32
       '@vitejs/plugin-vue': 2.3.1_vite@2.9.5+vue@3.2.33
       '@vue/test-utils': 2.0.0-rc.21_vue@3.2.33
       autoprefixer: 10.4.4_postcss@8.4.12
@@ -467,7 +467,6 @@ packages:
   /@babel/helper-validator-identifier/7.16.7:
     resolution: {integrity: sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==}
     engines: {node: '>=6.9.0'}
-    dev: true
 
   /@babel/highlight/7.17.9:
     resolution: {integrity: sha512-J9PfEKCbFIv2X5bjTMiZu6Vf341N05QIY+d6FvVKynkG1S7G0j3I0QoRtWIrXhZ+/Nlb5Q0MzqL7TokEJ5BNHg==}
@@ -482,6 +481,15 @@ packages:
     resolution: {integrity: sha512-vqUSBLP8dQHFPdPi9bc5GK9vRkYHJ49fsZdtoJ8EQ8ibpwk5rPKfvNIwChB0KVXcIjcepEBBd2VHC5r9Gy8ueg==}
     engines: {node: '>=6.0.0'}
     hasBin: true
+    dependencies:
+      '@babel/types': 7.17.10
+
+  /@babel/types/7.17.10:
+    resolution: {integrity: sha512-9O26jG0mBYfGkUYCYZRnBwbVLd1UZOICEr2Em6InB6jVfsAv1GKgwXHmrSg+WFWDmeKTA6vyTZiN8tCSM5Oo3A==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-validator-identifier': 7.16.7
+      to-fast-properties: 2.0.0
 
   /@bcoe/v8-coverage/0.2.3:
     resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
@@ -552,11 +560,13 @@ packages:
       uuid: 8.3.2
     dev: true
 
-  /@cypress/xvfb/1.2.4:
+  /@cypress/xvfb/1.2.4_supports-color@8.1.1:
     resolution: {integrity: sha512-skbBzPggOVYCbnGgV+0dmBdW/s77ZkAOXIC1knS8NagwDjBrNC1LuXtQJeiN6l+m7lzmHtaoUw/ctJKdqkG57Q==}
     dependencies:
-      debug: 3.2.7
+      debug: 3.2.7_supports-color@8.1.1
       lodash.once: 4.1.1
+    transitivePeerDependencies:
+      - supports-color
     dev: true
 
   /@docsearch/css/3.0.0:
@@ -632,6 +642,17 @@ packages:
       '@hapi/hoek': 9.2.1
     dev: true
 
+  /@histoire/controls/0.4.5_vue@3.2.33:
+    resolution: {integrity: sha512-hicOfvIYIN+Ad8vk2/5qHCUthVXv/xqWSBZkS7x0II3PV7KMrAl0UOcxyMFf4AVKSMwmM1DtClkOMGXKQ/jxjw==}
+    dependencies:
+      '@iconify/vue': 3.2.1_vue@3.2.33
+      '@vueuse/core': 8.3.1_vue@3.2.33
+      floating-vue: 2.0.0-beta.16_vue@3.2.33
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: false
+
   /@humanwhocodes/config-array/0.9.5:
     resolution: {integrity: sha512-ObyMyWxZiCu/yTisA7uzx81s40xR2fD5Cg/2Kq7G02ajkNubJf6BopgDTmDyc3U7sXpNKM8cYOw7s7Tyr+DnCw==}
     engines: {node: '>=10.10.0'}
@@ -683,7 +704,7 @@ packages:
     dependencies:
       '@types/istanbul-lib-coverage': 2.0.4
       '@types/istanbul-reports': 3.0.1
-      '@types/node': 17.0.25
+      '@types/node': 17.0.32
       '@types/yargs': 16.0.4
       chalk: 4.1.2
     dev: true
@@ -747,6 +768,7 @@ packages:
       - less
       - sass
       - stylus
+      - supports-color
       - utf-8-validate
     dev: true
 
@@ -848,6 +870,7 @@ packages:
       - less
       - sass
       - stylus
+      - supports-color
       - utf-8-validate
     dev: true
 
@@ -867,6 +890,7 @@ packages:
       - less
       - sass
       - stylus
+      - supports-color
       - utf-8-validate
     dev: true
 
@@ -1020,14 +1044,14 @@ packages:
   /@types/accepts/1.3.5:
     resolution: {integrity: sha512-jOdnI/3qTpHABjM5cx1Hc0sKsPoYCp+DP/GJRGtDlPd7fiV9oXGGIcjW/ZOxLIvjGz8MA+uMZI9metHlgqbgwQ==}
     dependencies:
-      '@types/node': 17.0.25
+      '@types/node': 17.0.32
     dev: true
 
   /@types/body-parser/1.19.0:
     resolution: {integrity: sha512-W98JrE0j2K78swW4ukqMleo8R7h/pFETjM2DQ90MF6XK2i4LO4W3gQ71Lt4w3bfm2EvVSyWHplECvB5sK22yFQ==}
     dependencies:
       '@types/connect': 3.4.35
-      '@types/node': 17.0.25
+      '@types/node': 17.0.32
     dev: true
 
   /@types/chrome/0.0.180:
@@ -1040,12 +1064,12 @@ packages:
   /@types/concat-stream/1.6.1:
     resolution: {integrity: sha512-eHE4cQPoj6ngxBZMvVf6Hw7Mh4jMW4U9lpGmS5GBPB9RYxlFg+CHaVN7ErNY4W9XfLIEn20b4VDYaIrbq0q4uA==}
     dependencies:
-      '@types/node': 17.0.25
+      '@types/node': 17.0.32
 
   /@types/connect/3.4.35:
     resolution: {integrity: sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==}
     dependencies:
-      '@types/node': 17.0.25
+      '@types/node': 17.0.32
     dev: true
 
   /@types/content-disposition/0.5.4:
@@ -1058,7 +1082,7 @@ packages:
       '@types/connect': 3.4.35
       '@types/express': 4.17.13
       '@types/keygrip': 1.0.2
-      '@types/node': 17.0.25
+      '@types/node': 17.0.32
     dev: true
 
   /@types/cors/2.8.10:
@@ -1068,7 +1092,7 @@ packages:
   /@types/express-serve-static-core/4.17.28:
     resolution: {integrity: sha512-P1BJAEAW3E2DJUlkgq4tOL3RyMunoWXqbSCygWo5ZIWTjUgN1YnaXWW4VWl/oc8vs/XoYibEGBKP0uZyF4AHig==}
     dependencies:
-      '@types/node': 17.0.25
+      '@types/node': 17.0.32
       '@types/qs': 6.9.7
       '@types/range-parser': 1.2.4
     dev: true
@@ -1103,18 +1127,18 @@ packages:
   /@types/form-data/0.0.33:
     resolution: {integrity: sha1-yayFsqX9GENbjIXZ7LUObWyJP/g=}
     dependencies:
-      '@types/node': 17.0.25
+      '@types/node': 17.0.32
 
   /@types/fs-capacitor/2.0.0:
     resolution: {integrity: sha512-FKVPOCFbhCvZxpVAMhdBdTfVfXUpsh15wFHgqOKxh9N9vzWZVuWCSijZ5T4U34XYNnuj2oduh6xcs1i+LPI+BQ==}
     dependencies:
-      '@types/node': 17.0.25
+      '@types/node': 17.0.32
     dev: true
 
   /@types/fs-extra/9.0.13:
     resolution: {integrity: sha512-nEnwB++1u5lVDM2UI4c1+5R+FYaKfaAzS4OococimjVm3nQw3TuzH5UNsocrcTBbhnerblyHj4A49qXbIiZdpA==}
     dependencies:
-      '@types/node': 17.0.25
+      '@types/node': 17.0.32
     dev: true
 
   /@types/har-format/1.2.8:
@@ -1173,7 +1197,7 @@ packages:
       '@types/http-errors': 1.8.2
       '@types/keygrip': 1.0.2
       '@types/koa-compose': 3.2.5
-      '@types/node': 17.0.25
+      '@types/node': 17.0.32
     dev: true
 
   /@types/linkify-it/3.0.2:
@@ -1209,8 +1233,8 @@ packages:
   /@types/node/14.18.13:
     resolution: {integrity: sha512-Z6/KzgyWOga3pJNS42A+zayjhPbf2zM3hegRQaOPnLOzEi86VV++6FLDWgR1LGrVCRufP/ph2daa3tEa5br1zA==}
 
-  /@types/node/17.0.25:
-    resolution: {integrity: sha512-wANk6fBrUwdpY4isjWrKTufkrXdu1D2YHCot2fD/DfWxF5sMrVSA+KN7ydckvaTCh0HiqX9IVl0L5/ZoXg5M7w==}
+  /@types/node/17.0.32:
+    resolution: {integrity: sha512-eAIcfAvhf/BkHcf4pkLJ7ECpBAhh9kcxRBpip9cTiO+hf+aJrsxYxBeS6OXvOd9WqNAJmavXVpZvY1rBjNsXmw==}
 
   /@types/node/8.10.66:
     resolution: {integrity: sha512-tktOkFUA4kXx2hhhrB8bIFb5TbwzS4uOhKEmwiD+NoiL0qtP2OQ9mFldbgD4dV1djrlBYP6eBuQZiWjuHUpqFw==}
@@ -1230,7 +1254,7 @@ packages:
     resolution: {integrity: sha512-nCkHGI4w7ZgAdNkrEu0bv+4xNV/XDqW+DydknebMOQwkpDGx8G+HTlj7R7ABI8i8nKxVw0wtKPi1D+lPOkh4YQ==}
     dependencies:
       '@types/mime': 1.3.2
-      '@types/node': 17.0.25
+      '@types/node': 17.0.32
     dev: true
 
   /@types/sinon/9.0.11:
@@ -1258,7 +1282,7 @@ packages:
   /@types/ws/7.4.7:
     resolution: {integrity: sha512-JQbbmxZTZehdc2iszGKs5oC3NFnjeay7mtAWrdt7qNtAVK0g19muApzAy4bm9byz79xa2ZnO/BOBC2R8RC5Lww==}
     dependencies:
-      '@types/node': 17.0.25
+      '@types/node': 17.0.32
     dev: true
 
   /@types/yargs-parser/21.0.0:
@@ -1514,11 +1538,12 @@ packages:
       eslint-config-standard: 16.0.3_jy3wpoygdjb3yoly5rsznpbtka
       eslint-import-resolver-node: 0.3.6
       eslint-import-resolver-webpack: 0.13.2_fkfqfehjtk7sk2efaqbgxsuasa
-      eslint-plugin-import: 2.26.0_eslint@8.13.0
+      eslint-plugin-import: 2.26.0_mwijbinc6ud6f2lruneo2edtnu
       eslint-plugin-node: 11.1.0_eslint@8.13.0
       eslint-plugin-promise: 6.0.0_eslint@8.13.0
       eslint-plugin-vue: 8.6.0_eslint@8.13.0
     transitivePeerDependencies:
+      - supports-color
       - webpack
     dev: true
 
@@ -1528,18 +1553,21 @@ packages:
     peerDependencies:
       eslint: '*'
       eslint-plugin-vue: '*'
+      typescript: '*'
     peerDependenciesMeta:
       eslint:
         optional: true
+      typescript:
+        optional: true
     dependencies:
       '@typescript-eslint/eslint-plugin': 5.20.0_xgwjwvswzzo77lpghh6plzerx4
       '@typescript-eslint/parser': 5.20.0_jzhokl4shvj5szf5bgr66kln2a
       eslint: 8.13.0
       eslint-plugin-vue: 8.6.0_eslint@8.13.0
+      typescript: 4.6.3
       vue-eslint-parser: 8.3.0_eslint@8.13.0
     transitivePeerDependencies:
       - supports-color
-      - typescript
     dev: true
 
   /@vue/reactivity-transform/3.2.33:
@@ -1956,6 +1984,7 @@ packages:
     transitivePeerDependencies:
       - bufferutil
       - encoding
+      - supports-color
       - utf-8-validate
     dev: true
 
@@ -2199,6 +2228,8 @@ packages:
       qs: 6.9.7
       raw-body: 2.4.3
       type-is: 1.6.18
+    transitivePeerDependencies:
+      - supports-color
     dev: true
 
   /body-parser/1.20.0:
@@ -2217,6 +2248,8 @@ packages:
       raw-body: 2.5.1
       type-is: 1.6.18
       unpipe: 1.0.0
+    transitivePeerDependencies:
+      - supports-color
     dev: true
 
   /brace-expansion/1.1.11:
@@ -2526,6 +2559,8 @@ packages:
       finalhandler: 1.1.2
       parseurl: 1.3.3
       utils-merge: 1.0.1
+    transitivePeerDependencies:
+      - supports-color
     dev: false
 
   /consola/2.15.3:
@@ -2777,7 +2812,7 @@ packages:
     requiresBuild: true
     dependencies:
       '@cypress/request': 2.88.10
-      '@cypress/xvfb': 1.2.4
+      '@cypress/xvfb': 1.2.4_supports-color@8.1.1
       '@types/node': 14.18.13
       '@types/sinonjs__fake-timers': 8.1.1
       '@types/sizzle': 2.3.3
@@ -2852,15 +2887,37 @@ packages:
 
   /debug/2.6.9:
     resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
     dependencies:
       ms: 2.0.0
 
   /debug/3.2.7:
     resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
     dependencies:
       ms: 2.1.3
     dev: true
 
+  /debug/3.2.7_supports-color@8.1.1:
+    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+    dependencies:
+      ms: 2.1.3
+      supports-color: 8.1.1
+    dev: true
+
   /debug/4.3.2:
     resolution: {integrity: sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==}
     engines: {node: '>=6.0'}
@@ -3554,7 +3611,7 @@ packages:
         optional: true
     dependencies:
       eslint: 8.13.0
-      eslint-plugin-import: 2.26.0_eslint@8.13.0
+      eslint-plugin-import: 2.26.0_mwijbinc6ud6f2lruneo2edtnu
       eslint-plugin-node: 11.1.0_eslint@8.13.0
       eslint-plugin-promise: 6.0.0_eslint@8.13.0
     dev: true
@@ -3564,6 +3621,8 @@ packages:
     dependencies:
       debug: 3.2.7
       resolve: 1.22.0
+    transitivePeerDependencies:
+      - supports-color
     dev: true
 
   /eslint-import-resolver-webpack/0.13.2_fkfqfehjtk7sk2efaqbgxsuasa:
@@ -3579,7 +3638,7 @@ packages:
       array-find: 1.0.0
       debug: 3.2.7
       enhanced-resolve: 0.9.1
-      eslint-plugin-import: 2.26.0_eslint@8.13.0
+      eslint-plugin-import: 2.26.0_mwijbinc6ud6f2lruneo2edtnu
       find-root: 1.1.0
       has: 1.0.3
       interpret: 1.4.0
@@ -3588,14 +3647,34 @@ packages:
       lodash: 4.17.21
       resolve: 1.22.0
       semver: 5.7.1
+    transitivePeerDependencies:
+      - supports-color
     dev: true
 
-  /eslint-module-utils/2.7.3:
+  /eslint-module-utils/2.7.3_phjpadwl2edl26f2qajl7sizwi:
     resolution: {integrity: sha512-088JEC7O3lDZM9xGe0RerkOMd0EjFl+Yvd1jPWIkMT5u3H9+HC34mWWPnqPrN13gieT9pBOO+Qt07Nb/6TresQ==}
     engines: {node: '>=4'}
+    peerDependencies:
+      '@typescript-eslint/parser': '*'
+      eslint-import-resolver-node: '*'
+      eslint-import-resolver-typescript: '*'
+      eslint-import-resolver-webpack: '*'
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
+      eslint-import-resolver-node:
+        optional: true
+      eslint-import-resolver-typescript:
+        optional: true
+      eslint-import-resolver-webpack:
+        optional: true
     dependencies:
+      '@typescript-eslint/parser': 5.20.0_jzhokl4shvj5szf5bgr66kln2a
       debug: 3.2.7
+      eslint-import-resolver-node: 0.3.6
       find-up: 2.1.0
+    transitivePeerDependencies:
+      - supports-color
     dev: true
 
   /eslint-plugin-cypress/2.12.1_eslint@8.13.0:
@@ -3624,22 +3703,26 @@ packages:
       regexpp: 3.2.0
     dev: true
 
-  /eslint-plugin-import/2.26.0_eslint@8.13.0:
+  /eslint-plugin-import/2.26.0_mwijbinc6ud6f2lruneo2edtnu:
     resolution: {integrity: sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==}
     engines: {node: '>=4'}
     peerDependencies:
+      '@typescript-eslint/parser': '*'
       eslint: '*'
     peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
       eslint:
         optional: true
     dependencies:
+      '@typescript-eslint/parser': 5.20.0_jzhokl4shvj5szf5bgr66kln2a
       array-includes: 3.1.4
       array.prototype.flat: 1.3.0
       debug: 2.6.9
       doctrine: 2.1.0
       eslint: 8.13.0
       eslint-import-resolver-node: 0.3.6
-      eslint-module-utils: 2.7.3
+      eslint-module-utils: 2.7.3_phjpadwl2edl26f2qajl7sizwi
       has: 1.0.3
       is-core-module: 2.9.0
       is-glob: 4.0.3
@@ -3647,6 +3730,10 @@ packages:
       object.values: 1.1.5
       resolve: 1.22.0
       tsconfig-paths: 3.14.1
+    transitivePeerDependencies:
+      - eslint-import-resolver-typescript
+      - eslint-import-resolver-webpack
+      - supports-color
     dev: true
 
   /eslint-plugin-node/11.1.0_eslint@8.13.0:
@@ -3943,6 +4030,8 @@ packages:
       type-is: 1.6.18
       utils-merge: 1.0.1
       vary: 1.1.2
+    transitivePeerDependencies:
+      - supports-color
     dev: true
 
   /extend/3.0.2:
@@ -4058,6 +4147,8 @@ packages:
       parseurl: 1.3.3
       statuses: 1.5.0
       unpipe: 1.0.0
+    transitivePeerDependencies:
+      - supports-color
 
   /find-root/1.1.0:
     resolution: {integrity: sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==}
@@ -5858,6 +5949,8 @@ packages:
       async: 2.6.4
       debug: 3.2.7
       mkdirp: 0.5.6
+    transitivePeerDependencies:
+      - supports-color
     dev: true
 
   /postcss-import/14.1.0_postcss@8.4.12:
@@ -6338,6 +6431,8 @@ packages:
       on-finished: 2.3.0
       range-parser: 1.2.1
       statuses: 1.5.0
+    transitivePeerDependencies:
+      - supports-color
     dev: true
 
   /serve-static/1.14.2:
@@ -6348,6 +6443,8 @@ packages:
       escape-html: 1.0.3
       parseurl: 1.3.3
       send: 0.17.2
+    transitivePeerDependencies:
+      - supports-color
     dev: true
 
   /setprototypeof/1.2.0:
@@ -6836,6 +6933,10 @@ packages:
       rimraf: 3.0.2
     dev: true
 
+  /to-fast-properties/2.0.0:
+    resolution: {integrity: sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=}
+    engines: {node: '>=4'}
+
   /to-regex-range/5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}