diff --git a/.gitignore b/.gitignore
index 3f35833b..e9b024d1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -23,3 +23,4 @@ typings/
 .npmrc
 dist/*
 .DS_Store
+storybook-static/*
diff --git a/package.json b/package.json
index 325857b2..ac349317 100644
--- a/package.json
+++ b/package.json
@@ -73,6 +73,7 @@
     "@storybook/addon-essentials": "^7.0.6",
     "@storybook/addon-interactions": "^7.0.6",
     "@storybook/addon-links": "^7.0.6",
+    "@storybook/addon-viewport": "^7.0.24",
     "@storybook/blocks": "^7.0.6",
     "@storybook/builder-vite": "^7.0.7",
     "@storybook/testing-library": "^0.0.14-next.2",
diff --git a/src/__tests__/OeWizard.cy.ts b/src/__tests__/OeWizard.cy.ts
new file mode 100644
index 00000000..e7770493
--- /dev/null
+++ b/src/__tests__/OeWizard.cy.ts
@@ -0,0 +1,240 @@
+/* eslint-disable vue/one-component-per-file */
+import { OeWizard } from '@components/dumb';
+import type { IStep } from '@models/wizard';
+import { defineComponent } from 'vue';
+
+describe('OeWizard', () => {
+  describe('default', () => {
+    const TestComponent = defineComponent({
+      components: { OeWizard },
+      setup() {
+        const steps: IStep[] = [
+          { name: 'Algemene gegevens', valid: true },
+          { name: 'Mijn gegevens', valid: true },
+          { name: 'Bijlagen', valid: true },
+          { name: 'Overzicht', valid: true },
+        ];
+
+        return { steps };
+      },
+      template: `
+      <oe-wizard :steps="steps">
+        <template #default="{ step, currentStep, totalSteps }">
+          <h2>Stap {{ currentStep + 1 }} van {{ totalSteps }} - {{ step.name }}</h2>
+        </template>
+      </oe-wizard>
+      `,
+    });
+
+    beforeEach(() => {
+      cy.viewport('macbook-16');
+    });
+
+    it('renders a step for each given step', () => {
+      cy.mount(TestComponent).then(({ component }) => {
+        cy.dataCy('wizard-bar')
+          .children()
+          .should('have.length', 4)
+          .each((step, index) => {
+            expect(step.text()).to.equal(`${index + 1}${component.steps[index].name}`);
+          });
+      });
+    });
+
+    it('does nothing when clicking on a step', () => {
+      cy.mount(TestComponent);
+
+      cy.dataCy('step-2').click();
+      cy.get('.wizard__bar-item--current').invoke('text').should('equal', '1Algemene gegevens');
+    });
+
+    describe('navigation', () => {
+      beforeEach(() => {
+        cy.mount(TestComponent);
+      });
+
+      it('does not have a previous button in step 1', () => {
+        cy.dataCy('previous-step-button').should('not.exist');
+      });
+
+      it('has a next button in step 1', () => {
+        cy.dataCy('next-step-button').should('exist');
+      });
+
+      it('can handle navigation back and forth', () => {
+        // Go to step 2
+        cy.dataCy('next-step-button').click();
+        cy.get('.wizard__bar-item--current').invoke('text').should('equal', '2Mijn gegevens');
+
+        cy.dataCy('previous-step-button').should('exist');
+        cy.dataCy('next-step-button').should('exist');
+
+        // Go to step 3
+        cy.dataCy('next-step-button').click();
+        cy.get('.wizard__bar-item--current').invoke('text').should('equal', '3Bijlagen');
+
+        cy.dataCy('previous-step-button').should('exist');
+        cy.dataCy('next-step-button').should('exist');
+
+        // Go to step 4
+        cy.dataCy('next-step-button').click();
+        cy.get('.wizard__bar-item--current').invoke('text').should('equal', '4Overzicht');
+
+        cy.dataCy('previous-step-button').should('exist');
+        cy.dataCy('next-step-button').should('not.exist');
+
+        // Go to step 3
+        cy.dataCy('previous-step-button').click();
+        cy.get('.wizard__bar-item--current').invoke('text').should('equal', '3Bijlagen');
+
+        cy.dataCy('previous-step-button').should('exist');
+        cy.dataCy('next-step-button').should('exist');
+
+        // Go to step 2
+        cy.dataCy('previous-step-button').click();
+        cy.get('.wizard__bar-item--current').invoke('text').should('equal', '2Mijn gegevens');
+
+        cy.dataCy('previous-step-button').should('exist');
+        cy.dataCy('next-step-button').should('exist');
+
+        // Go to step 1
+        cy.dataCy('previous-step-button').click();
+        cy.get('.wizard__bar-item--current').invoke('text').should('equal', '1Algemene gegevens');
+
+        cy.dataCy('previous-step-button').should('not.exist');
+        cy.dataCy('next-step-button').should('exist');
+      });
+
+      it('does not have a next button in the latest step', () => {
+        cy.dataCy('next-step-button').click();
+        cy.dataCy('next-step-button').click();
+        cy.dataCy('next-step-button').click();
+
+        cy.get('.wizard__bar-item--current').invoke('text').should('equal', '4Overzicht');
+
+        cy.dataCy('previous-step-button').should('exist');
+        cy.dataCy('next-step-button').should('not.exist');
+      });
+
+      it('submits the wizard when clicking on submit in the latest step', () => {
+        const onSubmitSpy = cy.spy().as('onSubmitSpy');
+
+        cy.mount(TestComponent, { props: { onSubmit: onSubmitSpy } }).then(() => {
+          cy.dataCy('next-step-button').click();
+          cy.dataCy('next-step-button').click();
+          cy.dataCy('next-step-button').click();
+
+          cy.get('.wizard__bar-item--current').invoke('text').should('equal', '4Overzicht');
+
+          cy.dataCy('submit-button').should('exist').click();
+
+          cy.get('@onSubmitSpy').should('have.been.called');
+        });
+      });
+
+      it('renders the activated step in the default slot', () => {
+        cy.dataCy('step-1-content').invoke('text').should('equal', 'Stap 1 van 4 - Algemene gegevens');
+        cy.dataCy('next-step-button').click();
+
+        cy.dataCy('step-2-content').invoke('text').should('equal', 'Stap 2 van 4 - Mijn gegevens');
+        cy.dataCy('next-step-button').click();
+
+        cy.dataCy('step-3-content').invoke('text').should('equal', 'Stap 3 van 4 - Bijlagen');
+        cy.dataCy('next-step-button').click();
+
+        cy.dataCy('step-4-content').invoke('text').should('equal', 'Stap 4 van 4 - Overzicht');
+      });
+    });
+  });
+
+  describe('bar navigation allowed', () => {
+    const TestComponent = defineComponent({
+      components: { OeWizard },
+      setup() {
+        const steps: IStep[] = [
+          { name: 'Algemene gegevens', valid: true },
+          { name: 'Mijn gegevens', valid: true },
+          { name: 'Bijlagen', valid: true },
+          { name: 'Overzicht', valid: true },
+        ];
+
+        return { steps };
+      },
+      template: `<oe-wizard :steps="steps" allow-bar-navigation></oe-wizard>`,
+    });
+
+    beforeEach(() => {
+      cy.mount(TestComponent);
+    });
+
+    it('navigates when clicking on a step in the wizardbar', () => {
+      cy.dataCy('step-2').click();
+      cy.get('.wizard__bar-item--current').invoke('text').should('equal', '2Mijn gegevens');
+    });
+  });
+
+  describe('blocked invalid step', () => {
+    const TestComponent = defineComponent({
+      components: { OeWizard },
+      setup() {
+        const steps: IStep[] = [
+          { name: 'Algemene gegevens', valid: true },
+          { name: 'Mijn gegevens', valid: false },
+          { name: 'Bijlagen', valid: true },
+          { name: 'Overzicht', valid: true },
+        ];
+
+        return { steps };
+      },
+      template: `<oe-wizard :steps="steps" allow-bar-navigation></oe-wizard>`,
+    });
+
+    beforeEach(() => {
+      cy.mount(TestComponent);
+    });
+
+    it('disables the next step button when the current step is invalid', () => {
+      cy.dataCy('next-step-button').click();
+      cy.get('.wizard__bar-item--current').invoke('text').should('equal', '2Mijn gegevens');
+
+      cy.dataCy('next-step-button').should('be.disabled');
+    });
+
+    it('does not navigate to a step when previous step is invalid using bar navigation', () => {
+      cy.dataCy('step-3').click();
+      cy.get('.wizard__bar-item--current').invoke('text').should('equal', '1Algemene gegevens');
+
+      cy.dataCy('step-4').click();
+      cy.get('.wizard__bar-item--current').invoke('text').should('equal', '1Algemene gegevens');
+
+      cy.dataCy('step-2').click();
+      cy.get('.wizard__bar-item--current').invoke('text').should('equal', '2Mijn gegevens');
+    });
+  });
+
+  describe('mobile view', () => {
+    const TestComponent = defineComponent({
+      components: { OeWizard },
+      setup() {
+        const steps: IStep[] = [
+          { name: 'Algemene gegevens', valid: true },
+          { name: 'Mijn gegevens', valid: false },
+          { name: 'Bijlagen', valid: true },
+          { name: 'Overzicht', valid: true },
+        ];
+
+        return { steps };
+      },
+      template: `<oe-wizard :steps="steps" allow-bar-navigation></oe-wizard>`,
+    });
+
+    beforeEach(() => {
+      cy.viewport('iphone-6');
+      cy.mount(TestComponent);
+    });
+
+    it('does not render the step name in the wizardbar', () => {
+      cy.dataCy('wizard-bar').find('.wizard__bar-item-name').first().should('not.be.visible');
+    });
+  });
+});
diff --git a/src/components/dumb/OeWizard.vue b/src/components/dumb/OeWizard.vue
new file mode 100644
index 00000000..eafd590c
--- /dev/null
+++ b/src/components/dumb/OeWizard.vue
@@ -0,0 +1,221 @@
+<template>
+  <div class="wizard">
+    <div class="wizard__bar vl-u-spacer-top--medium vl-u-spacer--medium" data-cy="wizard-bar">
+      <a
+        v-for="(step, index) in props.steps"
+        :key="index"
+        :data-cy="`step-${index + 1}`"
+        class="wizard__bar-item vl-u-display-flex vl-u-flex-align-center vl-u-flex-v-center"
+        :class="{
+          'wizard__bar-item--current': index === currentStep,
+          'wizard__bar-item--bar-navigation-allowed': props.allowBarNavigation,
+        }"
+        @click="goToStep(index)"
+      >
+        <vl-badge v-vl-tooltip="step.name" :initials="(index + 1).toString()" mod-border mod-small />
+        <span class="wizard__bar-item-name">{{ step.name }}</span>
+      </a>
+    </div>
+
+    <div
+      v-for="(step, index) in steps"
+      v-show="currentStep === index"
+      :key="index"
+      class="wizard__content vl-u-spacer--medium"
+      :data-cy="`step-${index + 1}-content`"
+    >
+      <slot :step="step" :current-step="currentStep" :total-steps="totalSteps"></slot>
+    </div>
+
+    <div class="wizard__actions vl-u-flex vl-u-flex-align-center">
+      <vl-button
+        v-if="currentStep > 0"
+        data-cy="previous-step-button"
+        class="wizard__navigation-button vl-u-spacer-right--xsmall"
+        mod-secondary
+        @click="previousStep"
+      >
+        <font-awesome-icon :icon="['fas', 'angles-left']" />
+        Vorige
+      </vl-button>
+      <vl-button
+        v-if="currentStep < totalSteps - 1"
+        class="wizard__navigation-button"
+        data-cy="next-step-button"
+        :mod-disabled="!steps[currentStep].valid"
+        @click="nextStep"
+      >
+        Volgende
+        <font-awesome-icon :icon="['fas', 'angles-right']" />
+      </vl-button>
+      <vl-button
+        v-else
+        class="wizard__navigation-button"
+        data-cy="submit-button"
+        :mod-disabled="!steps.every((s) => s.valid)"
+        @click="emit('submit')"
+        >Verzend</vl-button
+      >
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { VlBadge, VlButton } from '@govflanders/vl-ui-design-system-vue3';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import type { IWizardProps } from '@models/wizard';
+
+// Next line should be activated once VlUTooltip is properly exported
+// For now, an import of { VlUiUtil } in the implementing app also makes the tooltip available
+// import { VlUTooltip } from '@govflanders/vl-ui-design-system-vue3';
+
+const props = withDefaults(defineProps<IWizardProps>(), {
+  steps: () => [],
+  allowBarNavigation: false,
+});
+const emit = defineEmits(['submit']);
+
+const currentStep = ref(0);
+const totalSteps = ref(props.steps.length);
+
+const previousStep = () => {
+  if (currentStep.value > 0) {
+    currentStep.value--;
+  }
+};
+
+const nextStep = () => {
+  if (currentStep.value < totalSteps.value - 1) {
+    currentStep.value++;
+  }
+};
+
+const goToStep = (step: number) => {
+  if (props.allowBarNavigation && previousStepsAreValid(step)) {
+    currentStep.value = step;
+  }
+};
+
+const previousStepsAreValid = (step: number) => {
+  return props.steps.slice(0, step).every((s) => s.valid);
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'pyoes/scss/pyoes-settings';
+
+.wizard {
+  width: 100%;
+
+  .wizard__bar {
+    width: 100%;
+    height: 4rem;
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    justify-content: stretch;
+    font-size: 18px;
+    line-height: 1;
+
+    .wizard__bar-item {
+      flex: 1;
+      display: inline-block;
+      text-decoration: none;
+      transition: all 0.15s;
+      background-color: $primary-color;
+      color: $white;
+      text-align: center;
+      position: relative;
+      margin-right: 5px;
+
+      &:before {
+        border-color: transparent transparent transparent white;
+        left: 0;
+      }
+
+      &:after {
+        border-color: transparent transparent transparent $primary-color;
+        left: 100%;
+        z-index: 1;
+      }
+
+      &:before,
+      &:after {
+        content: '';
+        height: 0;
+        width: 0;
+        border-width: 2rem 0 2rem 2rem;
+        border-style: solid;
+        transition: all 0.15s;
+        position: absolute;
+        top: 0;
+      }
+
+      &:first-of-type {
+        border-radius: 0.25rem 0 0 0.25rem;
+      }
+
+      &:last-of-type {
+        border-radius: 0 0.25rem 0.25rem 0;
+        margin-right: 0;
+      }
+
+      &:first-of-type:before,
+      &:last-of-type:after {
+        border-color: transparent !important;
+      }
+      .vl-badge {
+        background-color: $primary-color;
+        margin-left: 2rem;
+        margin-right: 5px;
+      }
+
+      :deep(.vl-badge--border) {
+        border: 2px solid $white;
+      }
+
+      :deep(.vl-badge--initials span) {
+        color: $white;
+      }
+
+      @media screen and (max-width: 1024px) {
+        .wizard__bar-item-name {
+          display: none;
+        }
+      }
+
+      &--current {
+        background-color: $very-dark-purple;
+        color: $white;
+        cursor: default;
+
+        &:after {
+          border-color: transparent transparent transparent $very-dark-purple;
+        }
+
+        .vl-badge {
+          background-color: $very-dark-purple;
+        }
+      }
+
+      &--bar-navigation-allowed {
+        cursor: pointer;
+
+        &:not(.wizard__bar-item--current):hover {
+          background-color: $dark-purple;
+          &:after {
+            border-color: transparent transparent transparent $dark-purple;
+          }
+        }
+      }
+    }
+  }
+
+  :deep(.wizard__navigation-button) {
+    display: flex;
+    justify-content: center;
+    width: 130px;
+  }
+}
+</style>
diff --git a/src/components/dumb/index.ts b/src/components/dumb/index.ts
index 75c2bb8d..29795f66 100644
--- a/src/components/dumb/index.ts
+++ b/src/components/dumb/index.ts
@@ -9,6 +9,7 @@ import OeContainer from './OeContainer.vue';
 import OeGrid from './OeGrid.vue';
 import OeHeader from './OeHeader.vue';
 import OeLoader from './OeLoader.vue';
+import OeWizard from './OeWizard.vue';
 import SystemFields from './SystemFields.vue';
 
 export {
@@ -23,5 +24,6 @@ export {
   OeGrid,
   OeHeader,
   OeLoader,
+  OeWizard,
   SystemFields,
 };
diff --git a/src/models/index.ts b/src/models/index.ts
index 7ed8d1a1..a46669c2 100644
--- a/src/models/index.ts
+++ b/src/models/index.ts
@@ -9,3 +9,4 @@ export * from './niscode.enum';
 export * from './status';
 export * from './system-fields';
 export * from './grid';
+export * from './wizard';
diff --git a/src/models/wizard.ts b/src/models/wizard.ts
new file mode 100644
index 00000000..e61136e9
--- /dev/null
+++ b/src/models/wizard.ts
@@ -0,0 +1,9 @@
+export interface IWizardProps {
+  steps: IStep[];
+  allowBarNavigation?: boolean;
+}
+
+export interface IStep {
+  name: string;
+  valid: boolean;
+}
diff --git a/src/stories/dumb-components/wizard.stories.ts b/src/stories/dumb-components/wizard.stories.ts
new file mode 100644
index 00000000..225ee420
--- /dev/null
+++ b/src/stories/dumb-components/wizard.stories.ts
@@ -0,0 +1,176 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import type { IStep } from '../../models/wizard';
+import OeWizard from '../../components/dumb/OeWizard.vue';
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+
+import '@/scss/main.scss';
+const meta: Meta<typeof OeWizard> = {
+  title: 'Dumb components/Wizard',
+  component: OeWizard,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    steps: {
+      description: 'Steps to show in the wizard.',
+      table: {
+        type: { summary: 'IStep[]' },
+        defaultValue: { summary: '[]' },
+      },
+    },
+    allowBarNavigation: {
+      description: 'Allow wizard navigation by clicking on the steps in the wizard bar.',
+      table: {
+        type: { summary: 'boolean' },
+      },
+    },
+    default: {
+      description: 'Slot rendering the step content.',
+      table: {
+        type: {
+          summary: 'Exposed props',
+          detail: `
+step: current step object
+currentStep: current step index
+totalSteps: number of steps
+`,
+        },
+      },
+    },
+    submit: {
+      description: 'Emits submit event when reaching final step and submitting.',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof OeWizard>;
+
+export const Default: Story = {
+  render: () => ({
+    components: {
+      OeWizard,
+    },
+    setup() {
+      const steps: IStep[] = [
+        { name: 'Gegevens EPC', valid: true },
+        { name: 'Mijn gegevens', valid: true },
+        { name: 'Bijlagen', valid: true },
+        { name: 'Overzicht', valid: true },
+      ];
+
+      return { steps };
+    },
+    template: `
+    <oe-wizard :steps="steps">
+      <template #default="{ step, currentStep, totalSteps }">
+        <h2>Stap {{ currentStep + 1 }} van {{ totalSteps }} - {{ step.name }}</h2>
+      </template>
+    </oe-wizard>
+    `,
+  }),
+};
+
+export const BarNavigationAllowed: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Navigation by clicking on the wizard bar steps is also allowed.',
+      },
+    },
+  },
+  render: () => ({
+    components: {
+      OeWizard,
+    },
+    setup() {
+      const steps: IStep[] = [
+        { name: 'Gegevens EPC', valid: true },
+        { name: 'Mijn gegevens', valid: true },
+        { name: 'Bijlagen', valid: true },
+        { name: 'Overzicht', valid: true },
+      ];
+
+      return { steps };
+    },
+    template: `
+      <oe-wizard :steps="steps" allow-bar-navigation>
+        <template #default="{ step, currentStep, totalSteps }">
+          <h2>Stap {{ currentStep + 1 }} van {{ totalSteps }} - {{ step.name }}</h2>
+        </template>
+      </oe-wizard>
+      `,
+  }),
+};
+
+export const BlockedWhenStepInvalid: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Step 3 is indicated as invalid, so step 4 cannot be reached both with bar navigation and navigation buttons.',
+      },
+    },
+  },
+  render: () => ({
+    components: {
+      OeWizard,
+    },
+    setup() {
+      const steps: IStep[] = [
+        { name: 'Gegevens EPC', valid: true },
+        { name: 'Mijn gegevens', valid: true },
+        { name: 'Bijlagen', valid: false },
+        { name: 'Overzicht', valid: false },
+      ];
+
+      return { steps };
+    },
+    template: `
+      <oe-wizard :steps="steps" allow-bar-navigation>
+        <template #default="{ step, currentStep, totalSteps }">
+          <h2>Stap {{ currentStep + 1 }} van {{ totalSteps }} - {{ step.name }}</h2>
+        </template>
+      </oe-wizard>
+      `,
+  }),
+};
+
+export const Mobile: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Consult the specific Mobile story to see the specified mobile viewport.',
+      },
+    },
+    viewport: {
+      //👇 The viewports you want to use
+      viewports: INITIAL_VIEWPORTS,
+      //👇 Your own default viewport
+      defaultViewport: 'iphonex',
+    },
+  },
+  render: () => ({
+    components: {
+      OeWizard,
+    },
+    setup() {
+      const steps: IStep[] = [
+        { name: 'Gegevens EPC', valid: true },
+        { name: 'Mijn gegevens', valid: true },
+        { name: 'Bijlagen', valid: true },
+        { name: 'Overzicht', valid: true },
+      ];
+
+      return { steps };
+    },
+    template: `
+    <oe-wizard :steps="steps">
+      <template #default="{ step, currentStep, totalSteps }">
+        <h2>Stap {{ currentStep + 1 }} van {{ totalSteps }} - {{ step.name }}</h2>
+      </template>
+    </oe-wizard>
+    `,
+  }),
+};
diff --git a/yarn.lock b/yarn.lock
index 15527a1c..cf125560 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2231,6 +2231,21 @@
     memoizerific "^1.11.3"
     prop-types "^15.7.2"
 
+"@storybook/addon-viewport@^7.0.24":
+  version "7.0.24"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-viewport/-/addon-viewport-7.0.24.tgz#4f6777589e2484a7dad56f57982ca586bde9000b"
+  integrity sha512-bc3TR+feemGxVP1QQT6OsFSldHjLToJNuQAGd5EEBsDFhcMTsmitiGVoxIylqIhfioL9zauLIsk5eLZ/TYxuXQ==
+  dependencies:
+    "@storybook/client-logger" "7.0.24"
+    "@storybook/components" "7.0.24"
+    "@storybook/core-events" "7.0.24"
+    "@storybook/global" "^5.0.0"
+    "@storybook/manager-api" "7.0.24"
+    "@storybook/preview-api" "7.0.24"
+    "@storybook/theming" "7.0.24"
+    memoizerific "^1.11.3"
+    prop-types "^15.7.2"
+
 "@storybook/blocks@7.0.20", "@storybook/blocks@^7.0.6":
   version "7.0.20"
   resolved "https://registry.yarnpkg.com/@storybook/blocks/-/blocks-7.0.20.tgz#ce4abe5f16a935a8819416a006d7f3fd664f8bf8"
@@ -2319,6 +2334,18 @@
     qs "^6.10.0"
     telejson "^7.0.3"
 
+"@storybook/channel-postmessage@7.0.24":
+  version "7.0.24"
+  resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-7.0.24.tgz#789bd121cf64e306737ec0f3b096ea0ac6f47bf5"
+  integrity sha512-QLtLXjEeTEwBN/7pB888mBaykmRU9Jy2BitvZuLJWyHHygTYm3vYZOaGR37DT+q/6Ob5GaZ0tURZmCSNDe8IIA==
+  dependencies:
+    "@storybook/channels" "7.0.24"
+    "@storybook/client-logger" "7.0.24"
+    "@storybook/core-events" "7.0.24"
+    "@storybook/global" "^5.0.0"
+    qs "^6.10.0"
+    telejson "^7.0.3"
+
 "@storybook/channel-websocket@7.0.20":
   version "7.0.20"
   resolved "https://registry.yarnpkg.com/@storybook/channel-websocket/-/channel-websocket-7.0.20.tgz#7b0922fbffa33cf7b3be3faef11bac1f6a77f5e5"
@@ -2334,6 +2361,11 @@
   resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-7.0.20.tgz#a681c3d463b4099b001dae9edeb3a607a8f4854a"
   integrity sha512-AL5GGSQ8WTDUoh3gitKEzo3fu7Vq5okXq2pAknAZlQA2Oio+HHO5nMeXvOfGdvo/tzbpNE3n5utmCJz006xrCA==
 
+"@storybook/channels@7.0.24":
+  version "7.0.24"
+  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-7.0.24.tgz#fcfe7a1a5599265506f07fe81d03b0585303fc15"
+  integrity sha512-NZVLwMhtzy6cZrNRjshFvMAD9mQTmJDNwhohodSkM/YFCDVFhmxQk9tgizVGh9MwY3CYGJ1SI96RUejGosb49Q==
+
 "@storybook/cli@7.0.20":
   version "7.0.20"
   resolved "https://registry.yarnpkg.com/@storybook/cli/-/cli-7.0.20.tgz#a099893bc664318e98a1deb6ef0aa328751967d3"
@@ -2386,6 +2418,13 @@
   dependencies:
     "@storybook/global" "^5.0.0"
 
+"@storybook/client-logger@7.0.24":
+  version "7.0.24"
+  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-7.0.24.tgz#7be57ce1f90e65c6e9da7a88ed9ca7c5ce3c6536"
+  integrity sha512-4zRTb+QQ1hWaRqad/UufZNRfi2d/cf5a40My72Ct97VwjhJFE6aQ3K+hl1Xt6hh8dncDL2JK3cgziw6ElqjT0w==
+  dependencies:
+    "@storybook/global" "^5.0.0"
+
 "@storybook/codemod@7.0.20":
   version "7.0.20"
   resolved "https://registry.yarnpkg.com/@storybook/codemod/-/codemod-7.0.20.tgz#04cff68207d49dca427a16f73912d494eb56103b"
@@ -2419,6 +2458,20 @@
     use-resize-observer "^9.1.0"
     util-deprecate "^1.0.2"
 
+"@storybook/components@7.0.24":
+  version "7.0.24"
+  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-7.0.24.tgz#0676fa8d2085217786ccf994bc890dab0fa3d9c2"
+  integrity sha512-Pu7zGurCyWyiuFl2Pb5gybHA0f4blmHuVqccbMqnUw4Ew80BRu8AqfhNqN2hNdxFCx0mmy0baRGVftx76rNZ0w==
+  dependencies:
+    "@storybook/client-logger" "7.0.24"
+    "@storybook/csf" "^0.1.0"
+    "@storybook/global" "^5.0.0"
+    "@storybook/theming" "7.0.24"
+    "@storybook/types" "7.0.24"
+    memoizerific "^1.11.3"
+    use-resize-observer "^9.1.0"
+    util-deprecate "^1.0.2"
+
 "@storybook/core-client@7.0.20":
   version "7.0.20"
   resolved "https://registry.yarnpkg.com/@storybook/core-client/-/core-client-7.0.20.tgz#53d5d7ee4c84282a4e0d84ed0c389c6e997c99f2"
@@ -2457,6 +2510,11 @@
   resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-7.0.20.tgz#53878b736463c30141115ccdfba401bcf2645cba"
   integrity sha512-gUBQsbcDmRufmg8LdH7D57c/9BQ+cPi2vBcXdudmxeJFafGwDmLRu1mlv9rxlW4kicn/LZWJjKXtq4XXzF4OGg==
 
+"@storybook/core-events@7.0.24":
+  version "7.0.24"
+  resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-7.0.24.tgz#3fa4b2b3af64a86525b4cf07f49a7410125ef810"
+  integrity sha512-xkf/rihCkhqMeh5EA8lVp90/mzbb2gcg6I3oeFWw2hognVcTnPXg6llhWdU4Spqd0cals7GEFmQugIILCmH8GA==
+
 "@storybook/core-server@7.0.20":
   version "7.0.20"
   resolved "https://registry.yarnpkg.com/@storybook/core-server/-/core-server-7.0.20.tgz#b8c5f100ced5fd227c19e30127706eb0d28e3cd4"
@@ -2590,6 +2648,27 @@
     telejson "^7.0.3"
     ts-dedent "^2.0.0"
 
+"@storybook/manager-api@7.0.24":
+  version "7.0.24"
+  resolved "https://registry.yarnpkg.com/@storybook/manager-api/-/manager-api-7.0.24.tgz#29a357a35c661a0e86567ef6f0f8afeca3b3bced"
+  integrity sha512-cBpgDWq8reFgyrv4fBZlZJQyWYb9cDW0LDe476rWn/29uXNvYMNsHRwveLNgSA8Oy1NdyQCgf4ZgcYvY3wpvMA==
+  dependencies:
+    "@storybook/channels" "7.0.24"
+    "@storybook/client-logger" "7.0.24"
+    "@storybook/core-events" "7.0.24"
+    "@storybook/csf" "^0.1.0"
+    "@storybook/global" "^5.0.0"
+    "@storybook/router" "7.0.24"
+    "@storybook/theming" "7.0.24"
+    "@storybook/types" "7.0.24"
+    dequal "^2.0.2"
+    lodash "^4.17.21"
+    memoizerific "^1.11.3"
+    semver "^7.3.7"
+    store2 "^2.14.2"
+    telejson "^7.0.3"
+    ts-dedent "^2.0.0"
+
 "@storybook/manager@7.0.20":
   version "7.0.20"
   resolved "https://registry.yarnpkg.com/@storybook/manager/-/manager-7.0.20.tgz#b3193da0254500db3cccce7a0d97f31831ef7b70"
@@ -2636,6 +2715,27 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
+"@storybook/preview-api@7.0.24":
+  version "7.0.24"
+  resolved "https://registry.yarnpkg.com/@storybook/preview-api/-/preview-api-7.0.24.tgz#93634c060aa43bb10fb233f28ae83b7d74b98aad"
+  integrity sha512-psycU07tuB5nyJvfAJiDN/9e8cjOdJ+5lrCSYC3vPzH86LxADDIN0/8xFb1CaQWcXZsADEFJGpHKWbRhjym5ew==
+  dependencies:
+    "@storybook/channel-postmessage" "7.0.24"
+    "@storybook/channels" "7.0.24"
+    "@storybook/client-logger" "7.0.24"
+    "@storybook/core-events" "7.0.24"
+    "@storybook/csf" "^0.1.0"
+    "@storybook/global" "^5.0.0"
+    "@storybook/types" "7.0.24"
+    "@types/qs" "^6.9.5"
+    dequal "^2.0.2"
+    lodash "^4.17.21"
+    memoizerific "^1.11.3"
+    qs "^6.10.0"
+    synchronous-promise "^2.0.15"
+    ts-dedent "^2.0.0"
+    util-deprecate "^1.0.2"
+
 "@storybook/preview@7.0.20":
   version "7.0.20"
   resolved "https://registry.yarnpkg.com/@storybook/preview/-/preview-7.0.20.tgz#13340503a7997977417bc65d339d30e02fb5dbfa"
@@ -2655,6 +2755,15 @@
     memoizerific "^1.11.3"
     qs "^6.10.0"
 
+"@storybook/router@7.0.24":
+  version "7.0.24"
+  resolved "https://registry.yarnpkg.com/@storybook/router/-/router-7.0.24.tgz#510b91d161d822f276300fded7b254ed3e2594f3"
+  integrity sha512-SRCV+srCZUbko/V0phVN8jY8ilrxQWWAY/gegwNlIYaNqLJSyYqIj739VDmX+deXl6rOEpFLZreClVXWiDU9+w==
+  dependencies:
+    "@storybook/client-logger" "7.0.24"
+    memoizerific "^1.11.3"
+    qs "^6.10.0"
+
 "@storybook/telemetry@7.0.20":
   version "7.0.20"
   resolved "https://registry.yarnpkg.com/@storybook/telemetry/-/telemetry-7.0.20.tgz#3932a2f89bed7926e1fac97828e7805ffaf078d1"
@@ -2691,6 +2800,16 @@
     "@storybook/global" "^5.0.0"
     memoizerific "^1.11.3"
 
+"@storybook/theming@7.0.24":
+  version "7.0.24"
+  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-7.0.24.tgz#5e74f20bda1cdb9ba2a4a0c7a96ca014cdee5532"
+  integrity sha512-CMeCCfqffJ/D5rBl1HpAM/e5Vw0h7ucT+CLzP0ALtLrguz9ZzOiIZYgMj17KpfvWqje7HT+DwEtNkSrnJ01FNQ==
+  dependencies:
+    "@emotion/use-insertion-effect-with-fallbacks" "^1.0.0"
+    "@storybook/client-logger" "7.0.24"
+    "@storybook/global" "^5.0.0"
+    memoizerific "^1.11.3"
+
 "@storybook/types@7.0.20":
   version "7.0.20"
   resolved "https://registry.yarnpkg.com/@storybook/types/-/types-7.0.20.tgz#6aadc565f5894512b7f8da2aea9cac9448160519"
@@ -2701,6 +2820,16 @@
     "@types/express" "^4.7.0"
     file-system-cache "^2.0.0"
 
+"@storybook/types@7.0.24":
+  version "7.0.24"
+  resolved "https://registry.yarnpkg.com/@storybook/types/-/types-7.0.24.tgz#22b2f6658f9a091ff584e1a0643ee1ea9a54ed39"
+  integrity sha512-SZh/XBHP1TT5bmEk0W52nT0v6fUnYwmZVls3da5noutdgOAiwL7TANtl41XrNjG+UDr8x0OE3PVVJi+LhwUaNA==
+  dependencies:
+    "@storybook/channels" "7.0.24"
+    "@types/babel__core" "^7.0.0"
+    "@types/express" "^4.7.0"
+    file-system-cache "2.3.0"
+
 "@storybook/vue3-vite@^7.0.6":
   version "7.0.20"
   resolved "https://registry.yarnpkg.com/@storybook/vue3-vite/-/vue3-vite-7.0.20.tgz#ea6a669afba951c91d67c5fd99bcad788166f25a"
@@ -5610,7 +5739,7 @@ file-entry-cache@^6.0.1:
   dependencies:
     flat-cache "^3.0.4"
 
-file-system-cache@^2.0.0:
+file-system-cache@2.3.0, file-system-cache@^2.0.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/file-system-cache/-/file-system-cache-2.3.0.tgz#201feaf4c8cd97b9d0d608e96861bb6005f46fe6"
   integrity sha512-l4DMNdsIPsVnKrgEXbJwDJsA5mB8rGwHYERMgqQx/xAUtChPJMre1bXBzDEqqVbWv9AIbFezXMxeEkZDSrXUOQ==