diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
index a8af84a5dcec..c589b4648841 100644
--- a/cli/CHANGELOG.md
+++ b/cli/CHANGELOG.md
@@ -1,8 +1,12 @@
 <!-- See the ../guides/writing-the-cypress-changelog.md for details on writing the changelog. -->
-## 12.13.1
+## 12.14.0
 
 _Released 06/06/2023 (PENDING)_
 
+**Features:**
+
+- A new testing type switcher has been added to the Spec Explorer to make it easier to move between E2E and Component Testing. An informational overview of each type is displayed if it isn't configured in your project to help newcomers to each testing type. Addresses [#26448](https://github.com/cypress-io/cypress/issues/26448), [#26836](https://github.com/cypress-io/cypress/issues/26836) and [#26837](https://github.com/cypress-io/cypress/issues/26837).
+
 **Bugfixes:**
 
 - Fixes issue not detecting Angular 16 dependencies in launchpad. Addresses [#26852](https://github.com/cypress-io/cypress/issues/26852)
diff --git a/packages/app/cypress/e2e/runs.cy.ts b/packages/app/cypress/e2e/runs.cy.ts
index e2d7e74fd136..30c1d5e69f87 100644
--- a/packages/app/cypress/e2e/runs.cy.ts
+++ b/packages/app/cypress/e2e/runs.cy.ts
@@ -331,7 +331,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
       moveToRunsPage()
       cy.findByText(defaultMessages.runs.connect.buttonProject).click()
       cy.contains('button', defaultMessages.runs.connect.modal.selectProject.createProject).click()
-      cy.findByText(defaultMessages.runs.connectSuccessAlert.title, { timeout: 10000 }).should('be.visible')
+      cy.findByText(defaultMessages.runs.connectSuccessAlert.title, { timeout: 10000 }).scrollIntoView().should('be.visible')
 
       cy.withCtx(async (ctx) => {
         const config = await ctx.project.getConfig()
diff --git a/packages/app/cypress/e2e/specs_list_e2e.cy.ts b/packages/app/cypress/e2e/specs_list_e2e.cy.ts
index a8a98ed481a3..b3309e40c975 100644
--- a/packages/app/cypress/e2e/specs_list_e2e.cy.ts
+++ b/packages/app/cypress/e2e/specs_list_e2e.cy.ts
@@ -41,7 +41,7 @@ describe('App: Spec List (E2E)', () => {
     })
 
     cy.visitApp()
-    cy.contains('E2E specs')
+    cy.verifyE2ESelected()
   }
 
   const clearSearchAndType = (search: string) => {
@@ -67,10 +67,6 @@ describe('App: Spec List (E2E)', () => {
       cy.findByTestId('app-header-bar').findByText('Specs').should('be.visible')
     })
 
-    it('shows the "E2E specs" label as the header for the Spec Name column', () => {
-      cy.findByTestId('specs-testing-type-header').should('contain', 'E2E specs')
-    })
-
     it('shows a git status for each spec', () => {
       cy.findAllByTestId('git-info-row').each((row) => {
         cy.wrap(row).find('svg').should('have.length', 1)
diff --git a/packages/app/cypress/e2e/specs_list_flaky.cy.ts b/packages/app/cypress/e2e/specs_list_flaky.cy.ts
index c6419bb1b0cd..b3c1b34285cb 100644
--- a/packages/app/cypress/e2e/specs_list_flaky.cy.ts
+++ b/packages/app/cypress/e2e/specs_list_flaky.cy.ts
@@ -93,7 +93,7 @@ describe('App: Spec List - Flaky Indicator', () => {
     })
 
     cy.visitApp()
-    cy.contains('E2E specs')
+    cy.verifyE2ESelected()
   })
 
   it('shows the "Flaky" badge on specs considered flaky', () => {
diff --git a/packages/app/cypress/e2e/specs_list_switcher.cy.ts b/packages/app/cypress/e2e/specs_list_switcher.cy.ts
new file mode 100644
index 000000000000..6bade8ff5036
--- /dev/null
+++ b/packages/app/cypress/e2e/specs_list_switcher.cy.ts
@@ -0,0 +1,95 @@
+describe('App: Spec List Testing Type Switcher', () => {
+  context('ct unconfigured', () => {
+    beforeEach(() => {
+      cy.scaffoldProject('cypress-in-cypress')
+      cy.openProject('cypress-in-cypress')
+
+      cy.withCtx(async (ctx, o) => {
+        const config = await ctx.file.readFileInProject('cypress.config.js')
+        const newCypressConfig = config.replace(`component:`, `_component:`)
+
+        await ctx.actions.file.writeFileInProject('cypress.config.js', newCypressConfig)
+      })
+
+      cy.startAppServer('e2e')
+
+      cy.visitApp()
+      cy.verifyE2ESelected()
+    })
+
+    it('switches testing types', () => {
+      cy.findByTestId('testing-type-switch').within(() => {
+        cy.findByText('Component').click()
+      })
+
+      cy.verifyCtSelected()
+
+      cy.contains('Component testing is not set up for this project')
+
+      cy.findByTestId('testing-type-setup-button').should('be.visible')
+    })
+  })
+
+  context('e2e unconfigured', () => {
+    beforeEach(() => {
+      cy.scaffoldProject('cypress-in-cypress')
+      cy.openProject('cypress-in-cypress')
+
+      cy.withCtx(async (ctx, o) => {
+        const config = await ctx.file.readFileInProject('cypress.config.js')
+        const newCypressConfig = config.replace(`e2e:`, `_e2e:`)
+
+        await ctx.actions.file.writeFileInProject('cypress.config.js', newCypressConfig)
+      })
+
+      cy.startAppServer('component')
+
+      cy.visitApp()
+      cy.verifyCtSelected()
+    })
+
+    it('switches testing types', () => {
+      cy.findByTestId('testing-type-switch').within(() => {
+        cy.findByText('E2E').click()
+      })
+
+      cy.contains('End-to-end testing is not set up for this project')
+
+      cy.findByTestId('testing-type-setup-button').should('be.visible')
+    })
+  })
+
+  context('both testing types configured', () => {
+    beforeEach(() => {
+      cy.scaffoldProject('cypress-in-cypress')
+      cy.findBrowsers()
+      cy.openProject('cypress-in-cypress')
+
+      cy.startAppServer('component')
+
+      cy.visitApp()
+      cy.verifyCtSelected()
+    })
+
+    it('displays expected switch content', () => {
+      cy.findByTestId('unconfigured-icon').should('not.exist')
+
+      cy.withCtx((ctx, o) => {
+        o.sinon.stub(ctx.actions.project, 'setAndLoadCurrentTestingType')
+        o.sinon.stub(ctx.actions.project, 'reconfigureProject').resolves()
+      })
+
+      cy.findByTestId('testing-type-switch').within(() => {
+        cy.findByText('E2E').click()
+      })
+
+      cy.verifyE2ESelected()
+
+      cy.withCtx((ctx) => {
+        expect(ctx.coreData.app.relaunchBrowser).eq(true)
+        expect(ctx.actions.project.setAndLoadCurrentTestingType).to.have.been.calledWith('e2e')
+        expect(ctx.actions.project.reconfigureProject).to.have.been.called
+      })
+    })
+  })
+})
diff --git a/packages/app/cypress/e2e/support/e2eSupport.ts b/packages/app/cypress/e2e/support/e2eSupport.ts
index 1c9f27434e1a..97620266165a 100644
--- a/packages/app/cypress/e2e/support/e2eSupport.ts
+++ b/packages/app/cypress/e2e/support/e2eSupport.ts
@@ -16,3 +16,21 @@ beforeEach(() => {
   // @ts-ignore - dynamically defined during tests using
   expect(window.top?.getEventManager().autDestroyedCount).to.be.undefined
 })
+
+function e2eTestingTypeIsSelected () {
+  cy.findByTestId('specs-testing-type-header').within(() => {
+    cy.findByTestId('testing-type-switch').contains('button', 'E2E').should('have.attr', 'aria-selected', 'true')
+    cy.findByTestId('testing-type-switch').contains('button', 'Component').should('not.have.attr', 'aria-selected')
+  })
+}
+
+Cypress.Commands.add('verifyE2ESelected', e2eTestingTypeIsSelected)
+
+function ctTestingTypeIsSelected () {
+  cy.findByTestId('specs-testing-type-header').within(() => {
+    cy.findByTestId('testing-type-switch').contains('button', 'E2E').should('not.have.attr', 'aria-selected')
+    cy.findByTestId('testing-type-switch').contains('button', 'Component').should('have.attr', 'aria-selected', 'true')
+  })
+}
+
+Cypress.Commands.add('verifyCtSelected', ctTestingTypeIsSelected)
diff --git a/packages/app/cypress/e2e/support/execute-spec.ts b/packages/app/cypress/e2e/support/execute-spec.ts
index fe0575619fdc..b54013700722 100644
--- a/packages/app/cypress/e2e/support/execute-spec.ts
+++ b/packages/app/cypress/e2e/support/execute-spec.ts
@@ -18,6 +18,8 @@ declare global {
        *
        */
       waitForSpecToFinish(expectedResults?: ExpectedResults, timeout?: number): void
+      verifyE2ESelected(): void
+      verifyCtSelected(): void
     }
   }
 }
diff --git a/packages/app/cypress/e2e/top-nav.cy.ts b/packages/app/cypress/e2e/top-nav.cy.ts
index 9cf84d4eede2..46e776dab7fb 100644
--- a/packages/app/cypress/e2e/top-nav.cy.ts
+++ b/packages/app/cypress/e2e/top-nav.cy.ts
@@ -699,7 +699,7 @@ describe('Growth Prompts Can Open Automatically', () => {
     )
 
     cy.visitApp()
-    cy.contains('E2E specs')
+    cy.verifyE2ESelected()
     cy.wait(1000)
     cy.contains('Configure CI').should('be.visible')
   })
@@ -717,7 +717,7 @@ describe('Growth Prompts Can Open Automatically', () => {
     )
 
     cy.visitApp()
-    cy.contains('E2E specs')
+    cy.verifyE2ESelected()
     cy.wait(1000)
     cy.contains('Configure CI').should('not.exist')
   })
diff --git a/packages/app/package.json b/packages/app/package.json
index 109d59767634..8d76dda2c293 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -20,9 +20,10 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@cypress-design/vue-button": "0.9.2",
-    "@cypress-design/vue-icon": "0.22.2",
-    "@cypress-design/vue-statusicon": "0.4.3",
+    "@cypress-design/vue-button": "^0.10.1",
+    "@cypress-design/vue-icon": "^0.23.1",
+    "@cypress-design/vue-statusicon": "^0.4.7",
+    "@cypress-design/vue-tabs": "^0.5.1",
     "@graphql-typed-document-node/core": "^3.1.0",
     "@headlessui/vue": "1.4.0",
     "@iconify/iconify": "2.1.2",
diff --git a/packages/app/src/components/promo/Promo.vue b/packages/app/src/components/promo/Promo.vue
index 815e078222c8..5d9358403fab 100644
--- a/packages/app/src/components/promo/Promo.vue
+++ b/packages/app/src/components/promo/Promo.vue
@@ -47,11 +47,12 @@ const props = defineProps<{
   campaign: string
   medium: string
   cohort?: string
+  instanceId?: string
 }>()
 
 const promoSeenMutation = useMutation(Promo_PromoSeenDocument)
 
-const promoInstanceId = nanoid()
+const promoInstanceId = props.instanceId || nanoid()
 
 useQuery({ query: PromoDocument })
 .then((queryResult) => {
diff --git a/packages/app/src/components/promo/PromoCard.vue b/packages/app/src/components/promo/PromoCard.vue
index c7e2894bae37..ce1c13bdf408 100644
--- a/packages/app/src/components/promo/PromoCard.vue
+++ b/packages/app/src/components/promo/PromoCard.vue
@@ -1,27 +1,54 @@
 <template>
-  <div class="grid grid-cols-[480px] xl:grid-cols-[300px_470px] p-[40px] gap-y-[16px] gap-x-[100px]">
+  <div
+    class="p-[40px]"
+    :class="gridClasses"
+  >
     <div>
       <h2 class="text-xl font-semibold text-gray-900">
         {{ title }}
       </h2>
-      <p class="text-grey-700">
+      <p class="text-gray-700">
         {{ body }}
       </p>
       <slot name="content" />
     </div>
-    <div class="row-end-[span_2] xl:col-start-2">
+    <div
+      v-if="slots.image"
+      class="row-end-[span_2] xl:col-start-2"
+    >
       <slot name="image" />
     </div>
-    <div class="self-end">
+    <div
+      v-if="slots.action"
+      class="self-end"
+    >
       <slot name="action" />
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { computed, useSlots } from 'vue'
+
 defineProps<{
   title: string
   body: string
 }>()
 
+const slots = useSlots()
+
+const gridClasses = computed(() => {
+  const classes = ['grid', 'grid-cols-[480px]', 'gap-y-[16px]']
+
+  // If `image` is defined then lay out side-by-side on xl viewport,
+  // otherwise it should flow vertically
+  if (slots.image) {
+    classes.push('xl:grid-cols-[300px_470px]', 'gap-x-[100px]')
+  } else {
+    classes.push('xl:grid-cols-[744px]')
+  }
+
+  return classes
+})
+
 </script>
diff --git a/packages/app/src/composables/useTestingType.cy.tsx b/packages/app/src/composables/useTestingType.cy.tsx
new file mode 100644
index 000000000000..289e4cc2b169
--- /dev/null
+++ b/packages/app/src/composables/useTestingType.cy.tsx
@@ -0,0 +1,119 @@
+import { UseTestingType_ActivateTestingTypeDocument } from '../generated/graphql'
+import { useTestingType } from './useTestingType'
+import type { FunctionalComponent } from 'vue'
+
+describe('useTestingType', () => {
+  type ComposableWrapperProps<R> = { useComposable: () => R, callback: (result: R) => void }
+
+  const ComposableWrapper: FunctionalComponent<ComposableWrapperProps<unknown>> = <R, >({ useComposable, callback }: ComposableWrapperProps<R>) => {
+    const result = useComposable()
+
+    callback(result)
+
+    return <div>Composable</div>
+  }
+
+  const mountComposable = (composable: () => any) => {
+    const callback = cy.stub().as('callback')
+
+    cy.mount({
+      name: 'composable',
+      render () {
+        return (
+          <ComposableWrapper useComposable={composable} callback={callback} />
+        )
+      },
+    })
+
+    return cy.get('@callback').should('have.been.called').then((cb) => {
+      return cy.wrap(callback.getCall(callback.callCount - 1).args[0]).as('result')
+    })
+  }
+
+  beforeEach(() => {
+    const activateTestingTypeStub = cy.stub().as('activateTestingType')
+
+    cy.stubMutationResolver(UseTestingType_ActivateTestingTypeDocument, (defineResult, args) => {
+      activateTestingTypeStub()
+
+      return defineResult({ switchTestingTypeAndRelaunch: true })
+    })
+
+    cy.gqlStub.Query.currentProject = {
+      id: 'abc123',
+      currentTestingType: 'e2e',
+      isCTConfigured: false,
+      isE2EConfigured: false,
+    } as any
+  })
+
+  it('supplies expected query data', () => {
+    mountComposable(useTestingType).then((value) => {
+      const result = value as unknown as ReturnType<typeof useTestingType>
+
+      expect(result.activeTestingType.value).to.eql('e2e')
+      expect(result.isCTConfigured.value).to.eql(false)
+      expect(result.isE2EConfigured.value).to.eql(false)
+      expect(result.viewedTestingType.value).to.eql('e2e')
+    })
+  })
+
+  describe('viewTestingType', () => {
+    context('target mode is not configured', () => {
+      beforeEach(() => {
+        cy.gqlStub.Query.currentProject = {
+          id: 'abc123',
+          currentTestingType: 'e2e',
+          isCTConfigured: false,
+        } as any
+      })
+
+      it('should toggle viewed mode', () => {
+        mountComposable(useTestingType).then((value) => {
+          const result = value as unknown as ReturnType<typeof useTestingType>
+
+          expect(result.viewedTestingType.value).to.eql('e2e')
+
+          result.viewTestingType('component')
+
+          expect(result.viewedTestingType.value).to.eql('component')
+        })
+      })
+    })
+
+    context('target mode is configured', () => {
+      beforeEach(() => {
+        cy.gqlStub.Query.currentProject = {
+          id: 'abc123',
+          currentTestingType: 'e2e',
+          isE2EConfigured: true,
+          isCTConfigured: true,
+        } as any
+      })
+
+      it('should toggle active mode if not active mode', () => {
+        mountComposable(useTestingType).then((value) => {
+          const result = value as unknown as ReturnType<typeof useTestingType>
+
+          expect(result.viewedTestingType.value).to.eql('e2e')
+
+          result.viewTestingType('component')
+        })
+
+        cy.get('@activateTestingType').should('have.been.calledOnce')
+      })
+
+      it('should toggle viewed mode if active mode', () => {
+        mountComposable(useTestingType).then((value) => {
+          const result = value as unknown as ReturnType<typeof useTestingType>
+
+          expect(result.viewedTestingType.value).to.eql('e2e')
+
+          result.viewTestingType('e2e')
+        })
+
+        cy.get('@activateTestingType').should('not.have.been.called')
+      })
+    })
+  })
+})
diff --git a/packages/app/src/composables/useTestingType.ts b/packages/app/src/composables/useTestingType.ts
new file mode 100644
index 000000000000..8785af843695
--- /dev/null
+++ b/packages/app/src/composables/useTestingType.ts
@@ -0,0 +1,72 @@
+import { useMutation, useQuery, gql } from '@urql/vue'
+import { computed, ref, watchEffect } from 'vue'
+import { UseTestingType_TestingTypeDocument, UseTestingType_ActivateTestingTypeDocument } from '../generated/graphql'
+
+gql`
+query UseTestingType_TestingType {
+  currentProject {
+    id
+    currentTestingType
+    isCTConfigured
+    isE2EConfigured
+  }
+}
+`
+
+gql`
+mutation UseTestingType_ActivateTestingType($testingType: TestingTypeEnum!) {
+  switchTestingTypeAndRelaunch(testingType: $testingType)
+}
+`
+
+export function useTestingType () {
+  const query = useQuery({ query: UseTestingType_TestingTypeDocument })
+  const activateTestingTypeMutation = useMutation(UseTestingType_ActivateTestingTypeDocument)
+  const viewedTestingType = ref<'e2e' | 'component' | null>(null)
+
+  const activeTestingType = computed(() => query.data.value?.currentProject?.currentTestingType)
+  const isCTConfigured = computed(() => query.data.value?.currentProject?.isCTConfigured)
+  const isE2EConfigured = computed(() => query.data.value?.currentProject?.isE2EConfigured)
+
+  const showTestingTypePromo = computed(() => {
+    // confirm required data has resolved from other computed values
+    if (isE2EConfigured.value === undefined && isCTConfigured.value === undefined) {
+      return false
+    }
+
+    return (viewedTestingType.value === 'e2e' && isE2EConfigured.value === false) ||
+    (viewedTestingType.value === 'component' && isCTConfigured.value === false)
+  })
+
+  // Initialize 'viewed' testing type when query first resolves
+  watchEffect(() => {
+    if (!!activeTestingType.value && !viewedTestingType.value) {
+      viewedTestingType.value = activeTestingType.value
+    }
+  })
+
+  async function activateTestingType (testingType: 'e2e' | 'component') {
+    return await activateTestingTypeMutation.executeMutation({ testingType })
+  }
+
+  async function viewTestingType (testingType: 'e2e' | 'component') {
+    const switchingBackToActiveMode = testingType === activeTestingType.value
+    const targetModeIsConfigured = testingType === 'e2e' && isE2EConfigured.value || testingType === 'component' && isCTConfigured.value
+
+    if (!switchingBackToActiveMode && targetModeIsConfigured) {
+      await activateTestingType(testingType)
+    } else {
+      viewedTestingType.value = testingType
+    }
+  }
+
+  return {
+    activeTestingType,
+    viewedTestingType,
+    isCTConfigured,
+    isE2EConfigured,
+    showTestingTypePromo,
+    viewTestingType,
+    activateTestingType,
+  }
+}
diff --git a/packages/app/src/navigation/SidebarNavigation.vue b/packages/app/src/navigation/SidebarNavigation.vue
index 3ca27db5b202..31e6be1c8790 100644
--- a/packages/app/src/navigation/SidebarNavigation.vue
+++ b/packages/app/src/navigation/SidebarNavigation.vue
@@ -160,7 +160,7 @@ const props = defineProps<{
   online: boolean
 }>()
 
-const NAV_EXPAND_MIN_SCREEN_WIDTH = 1024
+const NAV_EXPAND_MIN_SCREEN_WIDTH = 1100
 
 const userProjectStatusStore = useUserProjectStatusStore()
 
diff --git a/packages/app/src/specs/SpecsList.cy.tsx b/packages/app/src/specs/SpecsList.cy.tsx
index a57f2ee94b7a..3dfaa72ef004 100644
--- a/packages/app/src/specs/SpecsList.cy.tsx
+++ b/packages/app/src/specs/SpecsList.cy.tsx
@@ -271,7 +271,9 @@ describe('<SpecsList />', { keystrokeDelay: 0 }, () => {
     })
 
     it('should display the e2e testing header', () => {
-      cy.findByTestId('specs-testing-type-header').should('have.text', 'E2E specs')
+      cy.findByTestId('specs-testing-type-header').within(() => {
+        cy.get('button[aria-selected="true"]').should('contain.text', 'E2E')
+      })
     })
   })
 
@@ -281,7 +283,9 @@ describe('<SpecsList />', { keystrokeDelay: 0 }, () => {
     })
 
     it('should display the component testing header', () => {
-      cy.findByTestId('specs-testing-type-header').should('have.text', 'Component specs')
+      cy.findByTestId('specs-testing-type-header').within(() => {
+        cy.get('button[aria-selected="true"]').should('contain.text', 'Component')
+      })
     })
   })
 
diff --git a/packages/app/src/specs/SpecsList.vue b/packages/app/src/specs/SpecsList.vue
index 4b97fb9715d1..fc588db429cd 100644
--- a/packages/app/src/specs/SpecsList.vue
+++ b/packages/app/src/specs/SpecsList.vue
@@ -32,23 +32,28 @@
       :class="tableGridColumns"
     >
       <div
-        class="flex items-center"
+        class="flex items-center mr-[12px]"
         data-cy="specs-testing-type-header"
       >
         <span>
-          {{ props.gql.currentProject?.currentTestingType === 'component'
-            ? t('specPage.componentSpecsHeader')
-            : t('specPage.e2eSpecsHeader') }}
+          <TestingTypeSwitcher
+            :viewed-testing-type="testingType.viewedTestingType.value"
+            :is-ct-configured="testingType.isCTConfigured.value"
+            :is-e2e-configured="testingType.isE2EConfigured.value"
+            @select-testing-type="testingType.viewTestingType"
+          />
         </span>
         <SpecsRunAllSpecs
-          v-if="runAllSpecsStore.isRunAllSpecsAllowed"
+          v-if="runAllSpecsStore.isRunAllSpecsAllowed && !testingType.showTestingTypePromo.value"
           :spec-number="runAllSpecsStore.allSpecsRef.length"
           directory="all"
           @runAllSpecs="runAllSpecsStore.runAllSpecs"
         />
       </div>
       <div class="flex items-center justify-between truncate">
-        <LastUpdatedHeader :is-git-available="isGitAvailable" />
+        <LastUpdatedHeader
+          :is-git-available="isGitAvailable"
+        />
       </div>
       <div class="flex items-center justify-end whitespace-nowrap">
         <SpecHeaderCloudDataTooltip
@@ -67,6 +72,12 @@
         />
       </div>
     </div>
+    <TestingTypePromo
+      v-if="testingType.showTestingTypePromo.value"
+      class="spec-list-container p-[32px] overflow-y-auto"
+      :testing-type="testingType.viewedTestingType.value"
+      @activate-testing-type="testingType.activateTestingType"
+    />
     <!--
       The markup around the virtualized list is pretty delicate. We might be tempted to
       combine the `v-if="specs.length"` above and the `:class="specs.length ? 'grid': 'hidden'"` below
@@ -76,6 +87,7 @@
       "Clear Search" button didn't work as expected.
     -->
     <div
+      v-else
       class="pb-[32px] spec-list-container"
       :class="specs.length ? 'grid': 'hidden'"
       v-bind="containerProps"
@@ -206,11 +218,15 @@ import SpecsRunAllSpecs from './SpecsRunAllSpecs.vue'
 import { useRunAllSpecsStore } from '../store/run-all-specs-store'
 import { posixify } from '../paths'
 import { useSubscription } from '../graphql'
+import TestingTypeSwitcher from './switcher/TestingTypeSwitcher.vue'
+import { useTestingType } from '../composables/useTestingType'
+import TestingTypePromo from './TestingTypePromo.vue'
 
 const { openLoginConnectModal } = useUserProjectStatusStore()
 
 const route = useRoute()
 const { t } = useI18n()
+const testingType = useTestingType()
 
 const isOnline = useOnline()
 const isOffline = ref(false)
@@ -297,7 +313,6 @@ fragment Specs_SpecsList on Query {
   currentProject {
     id
     projectRoot
-    currentTestingType
     cloudProject {
       __typename
       ... on CloudProject {
diff --git a/packages/app/src/specs/SpecsListHeader.vue b/packages/app/src/specs/SpecsListHeader.vue
index 25b0b8cd2f08..606766b06a1c 100644
--- a/packages/app/src/specs/SpecsListHeader.vue
+++ b/packages/app/src/specs/SpecsListHeader.vue
@@ -46,12 +46,11 @@
     <div class="flex h-[40px] min-w-[127px] gap-[16px]">
       <Button
         data-cy="new-spec-button"
-        :prefix-icon="IconAdd"
-        prefix-icon-class="justify-center text-lg text-center icon-light-transparent icon-dark-white"
-        class="min-w-[134px]"
-        size="lg"
+        class="min-w-[125px]"
+        variant="outline-indigo"
         @click="emit('showCreateSpecModal')"
       >
+        <IconActionAddMedium class="mr-[8px]" />
         {{ t('specPage.newSpecButton') }}
       </Button>
     </div>
@@ -64,10 +63,10 @@
 <script lang="ts" setup>
 import type { Ref } from 'vue'
 import { useI18n } from '@cy/i18n'
-import Button from '@cy/components/Button.vue'
+import Button from '@cypress-design/vue-button'
 import Input from '@cy/components/Input.vue'
 import IconMagnifyingGlass from '~icons/cy/magnifying-glass_x16'
-import IconAdd from '~icons/cy/add-large_x16'
+import { IconActionAddMedium } from '@cypress-design/vue-icon'
 
 const { t } = useI18n()
 
diff --git a/packages/app/src/specs/TestingTypePromo.cy.tsx b/packages/app/src/specs/TestingTypePromo.cy.tsx
new file mode 100644
index 000000000000..a1f0dc9a423d
--- /dev/null
+++ b/packages/app/src/specs/TestingTypePromo.cy.tsx
@@ -0,0 +1,69 @@
+import TestingTypePromo from './TestingTypePromo.vue'
+
+describe('<TestingTypePromo />', () => {
+  describe('component testing', () => {
+    it('triggers event on button click', () => {
+      const stub = cy.stub().as('activateTestingType')
+
+      cy.mount(<TestingTypePromo testingType="component" onActivateTestingType={stub} />)
+
+      cy.get('button').click()
+
+      cy.get('@activateTestingType').should('have.been.calledOnceWith', 'component')
+    })
+
+    it('has expected utm params on links', () => {
+      cy.mount(<TestingTypePromo testingType="component" />)
+
+      cy.findByTestId('testing-type-promo-guide-link').should('have.attr', 'href').and((href) => {
+        const params = new URL(href as any as string).searchParams
+
+        expect(params.get('utm_medium')).to.eql('CT Preview')
+        expect(params.get('utm_campaign')).to.eql('Read our guide')
+      })
+
+      cy.findAllByTestId('testing-type-promo-framework-link').should('have.attr', 'href').and((href) => {
+        const params = new URL(href as any as string).searchParams
+
+        expect(params.get('utm_medium')).to.eql('CT Preview')
+        expect(params.get('utm_campaign')).to.be.oneOf(['Angular', 'React', 'Vue', 'More'])
+      })
+
+      cy.findByTestId('testing-type-promo-feedback-link').should('have.attr', 'href').and((href) => {
+        const params = new URL(href as any as string).searchParams
+
+        expect(params.get('utm_medium')).to.eql('CT Preview')
+        expect(params.get('utm_campaign')).to.eql('Give feedback')
+      })
+    })
+  })
+
+  describe('e2e testing', () => {
+    it('renders', () => {
+      cy.mount(<TestingTypePromo testingType="e2e" />)
+
+      cy.percySnapshot()
+    })
+
+    it('triggers event on button click', () => {
+      const stub = cy.stub().as('activateTestingType')
+
+      cy.mount(<TestingTypePromo testingType="e2e" onActivateTestingType={stub} />)
+
+      cy.get('button').click()
+
+      cy.get('@activateTestingType').should('have.been.calledOnceWith', 'e2e')
+    })
+
+    it('has expected utm params on links', () => {
+      cy.mount(<TestingTypePromo testingType="e2e" />)
+
+      cy.findByTestId('testing-type-promo-guide-link').should('have.attr', 'href').and((href) => {
+        const params = new URL(href as any as string).searchParams
+
+        expect(params.get('utm_medium')).to.eql('E2E Preview')
+        expect(params.get('utm_campaign')).to.eql('Read our guide')
+      })
+    })
+  })
+})
diff --git a/packages/app/src/specs/TestingTypePromo.vue b/packages/app/src/specs/TestingTypePromo.vue
new file mode 100644
index 000000000000..d1dcc50c8dd3
--- /dev/null
+++ b/packages/app/src/specs/TestingTypePromo.vue
@@ -0,0 +1,297 @@
+<template>
+  <div class="flex">
+    <Promo
+      :campaign="campaign"
+      medium="Not set up"
+      :instance-id="promoInstanceId"
+      class="m-auto mt-[32px]"
+    >
+      <template #header>
+        <PromoHeader :title="t(testingType === 'e2e' ? 'specPage.testingTypePromo.e2e.header.title' : 'specPage.testingTypePromo.ct.header.title')">
+          <template #description>
+            <i18n-t
+              tag="p"
+              :keypath="testingType === 'e2e' ? 'specPage.testingTypePromo.e2e.header.description' : 'specPage.testingTypePromo.ct.header.description'"
+            >
+              <ExternalLink
+                data-cy="testing-type-promo-guide-link"
+                :href="guideLink"
+                @click="recordEvent(testingType, 'guide')"
+              >
+                {{ t(testingType === 'e2e' ? 'specPage.testingTypePromo.e2e.header.link' : 'specPage.testingTypePromo.ct.header.link') }}
+              </ExternalLink>
+            </i18n-t>
+          </template>
+          <template #control>
+            <Button
+              class="gap-[8px]"
+              data-cy="testing-type-setup-button"
+              @click="activateTestingType(testingType)"
+            >
+              <component :is="testingType === 'component' ? IconTestingTypeComponent : IconTestingTypeE2E" />
+              <div class="border-indigo-600 border-l-[1px] -my-[8px] py-[8px] pl-[16px] ml-[8px]">
+                {{ t(testingType === 'e2e' ? 'specPage.testingTypePromo.e2e.header.control' : 'specPage.testingTypePromo.ct.header.control') }}
+              </div>
+              <IconChevronRightSmall />
+            </Button>
+          </template>
+        </PromoHeader>
+      </template>
+
+      <template #cards>
+        <PromoCard
+          :title="t(testingType === 'e2e' ? 'specPage.testingTypePromo.e2e.body.title' : 'specPage.testingTypePromo.ct.body.title')"
+          :body="t(testingType === 'e2e' ? 'specPage.testingTypePromo.e2e.body.description' : 'specPage.testingTypePromo.ct.body.description')"
+          class=""
+        >
+          <template #content>
+            <div class="gap-[24px]">
+              <ol class="py-[16px] px-[20px] gap-[16px] flex flex-col font-normal text-gray-700">
+                <i18n-t
+                  v-if="testingType === 'e2e'"
+                  tag="li"
+                  class="list-disc"
+                  keypath="specPage.testingTypePromo.e2e.body.listItem1"
+                >
+                  <code class="text-jade-400">{{ t('specPage.testingTypePromo.e2e.body.listItem1Command') }}</code>
+                </i18n-t>
+                <i18n-t
+                  v-else
+                  tag="li"
+                  class="list-disc"
+                  keypath="specPage.testingTypePromo.ct.body.listItem1"
+                >
+                  <code class="text-jade-400">{{ t('specPage.testingTypePromo.ct.body.listItem1Command') }}</code>
+                </i18n-t>
+
+                <i18n-t
+                  v-if="testingType === 'e2e'"
+                  tag="li"
+                  class="list-disc"
+                  keypath="specPage.testingTypePromo.e2e.body.listItem2"
+                >
+                  <code class="text-jade-400">{{ t('specPage.testingTypePromo.e2e.body.listItem2Command') }}</code>
+                </i18n-t>
+                <i18n-t
+                  v-else
+                  tag="li"
+                  class="list-disc"
+                  keypath="specPage.testingTypePromo.ct.body.listItem2"
+                />
+
+                <i18n-t
+                  v-if="testingType === 'e2e'"
+                  tag="li"
+                  class="list-disc"
+                  keypath="specPage.testingTypePromo.e2e.body.listItem3"
+                >
+                  <code class="text-jade-400">{{ t('specPage.testingTypePromo.e2e.body.listItem3Command') }}</code>
+                </i18n-t>
+                <i18n-t
+                  v-else
+                  tag="li"
+                  class="list-disc"
+                  keypath="specPage.testingTypePromo.ct.body.listItem3"
+                >
+                  <span>
+                    <component
+                      :is="FrameworkBundlerLogos.angular"
+                      class="h-[16px] w-[16px] inline"
+                    />
+                    <ExternalLink
+                      data-cy="testing-type-promo-framework-link"
+                      :href="getFrameworkLink('Angular')"
+                      @click="recordEvent('component', 'framework', 'Angular')"
+                    >
+                      Angular
+                    </ExternalLink>
+                  </span>
+                  <span>
+                    <component
+                      :is="FrameworkBundlerLogos.react"
+                      class="h-[16px] w-[16px] inline"
+                    />
+                    <ExternalLink
+                      data-cy="testing-type-promo-framework-link"
+                      :href="getFrameworkLink('React')"
+                      @click="recordEvent('component', 'framework', 'React')"
+                    >
+                      React
+                    </ExternalLink>
+                  </span>
+                  <span>
+                    <component
+                      :is="FrameworkBundlerLogos.vue3"
+                      class="h-[16px] w-[16px] inline"
+                    />
+                    <ExternalLink
+                      data-cy="testing-type-promo-framework-link"
+                      :href="getFrameworkLink('Vue')"
+                      @click="recordEvent('component', 'framework', 'Vue')"
+                    >
+                      Vue
+                    </ExternalLink>
+                  </span>
+                  <ExternalLink
+                    data-cy="testing-type-promo-framework-link"
+                    :href="getFrameworkLink('more')"
+                    @click="recordEvent('component', 'framework', 'more')"
+                  >
+                    {{ t('specPage.testingTypePromo.ct.body.listItem3Link') }}
+                  </ExternalLink>
+                </i18n-t>
+              </ol>
+              <div
+                v-if="testingType === 'component'"
+                class="border-gray-50 border-t-[1px] pt-[16px]"
+              >
+                <ExternalLink
+                  data-cy="testing-type-promo-feedback-link"
+                  :href="giveFeedbackLink"
+                  @click="recordEvent(testingType, 'feedback')"
+                >
+                  {{ t('specPage.testingTypePromo.ct.body.link') }}
+                </ExternalLink>
+              </div>
+            </div>
+          </template>
+        </PromoCard>
+      </template>
+    </Promo>
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+import Promo from '../components/promo/Promo.vue'
+import PromoCard from '../components/promo/PromoCard.vue'
+import PromoHeader from '../components/promo/PromoHeader.vue'
+import Button from '@cypress-design/vue-button'
+import { useI18n } from '@cy/i18n'
+import { computed } from 'vue'
+import ExternalLink from '@cy/gql-components/ExternalLink.vue'
+import { getUrlWithParams } from '@packages/frontend-shared/src/utils/getUrlWithParams'
+import { IconTestingTypeE2E, IconTestingTypeComponent, IconChevronRightSmall } from '@cypress-design/vue-icon'
+import { gql, useMutation } from '@urql/vue'
+import { TestingTypePromo_RecordEventDocument } from '../generated/graphql'
+import { nanoid } from 'nanoid'
+import { FrameworkBundlerLogos } from '@packages/frontend-shared/src/utils/icons'
+
+gql`
+mutation TestingTypePromo_RecordEvent($campaign: String!, $medium: String!, $messageId: String!) {
+  recordEvent(includeMachineId: true, campaign: $campaign, medium: $medium, messageId: $messageId)
+}
+`
+
+const props = defineProps<{
+  testingType: 'e2e' | 'component' | null
+}>()
+
+const emits = defineEmits<{
+  (event: 'activateTestingType', value: 'e2e' | 'component'): void
+}>()
+
+const CT_MEDIUM = 'CT Preview'
+const E2E_MEDIUM = 'E2E Preview'
+
+const { t } = useI18n()
+const recordEventMutation = useMutation(TestingTypePromo_RecordEventDocument)
+
+const promoInstanceId = nanoid()
+
+const campaign = computed(() => {
+  return props.testingType === 'e2e' ? 'Specs Switcher E2E' : 'Specs Switcher Component'
+})
+
+const giveFeedbackLink = computed(() => {
+  return getUrlWithParams({
+    url: 'https://on.cypress.io/component-survey-q2-23',
+    params: {
+      utm_campaign: 'Give feedback',
+      utm_medium: CT_MEDIUM,
+    },
+  })
+})
+
+const guideLink = computed(() => {
+  if (props.testingType === 'e2e') {
+    return getUrlWithParams({
+      url: 'https://on.cypress.io/writing-first-test',
+      params: {
+        utm_campaign: 'Read our guide',
+        utm_medium: E2E_MEDIUM,
+      },
+    })
+  }
+
+  return getUrlWithParams({
+    url: 'https://on.cypress.io/component',
+    params: {
+      utm_campaign: 'Read our guide',
+      utm_medium: CT_MEDIUM,
+    },
+  })
+})
+
+function getFrameworkLink (framework: string): string {
+  let url: string
+
+  switch (framework) {
+    case 'Angular':
+      url = 'https://on.cypress.io/angular'
+      break
+    case 'React':
+      url = 'https://on.cypress.io/react'
+      break
+    case 'Vue':
+      url = 'https://on.cypress.io/vue'
+      break
+    default:
+      url = 'https://on.cypress.io/frameworks'
+      break
+  }
+
+  return getUrlWithParams({
+    url,
+    params: {
+      utm_campaign: framework,
+      utm_medium: CT_MEDIUM,
+    },
+  })
+}
+
+function recordEvent (testingType: 'e2e' | 'component' | null, link: 'guide' | 'feedback' | 'activate' | 'framework', framework?: string) {
+  let campaign: string
+
+  if (link === 'guide') {
+    campaign = 'Read our guide'
+  } else if (link === 'feedback') {
+    campaign = 'Give feedback'
+  } else if (link === 'activate') {
+    campaign = 'Quick setup'
+  } else if (link === 'framework') {
+    campaign = framework || 'N/A'
+  } else {
+    campaign = 'N/A'
+  }
+
+  const medium = testingType === 'e2e' ? E2E_MEDIUM : CT_MEDIUM
+
+  recordEventMutation.executeMutation({
+    messageId: promoInstanceId,
+    campaign,
+    medium,
+  })
+}
+
+function activateTestingType (testingType: 'e2e' | 'component' | null): void {
+  if (!testingType) {
+    throw new Error('No testing type provided')
+  }
+
+  recordEvent(testingType, 'activate')
+
+  emits('activateTestingType', testingType)
+}
+
+</script>
diff --git a/packages/app/src/specs/switcher/TestingTypeSwitcher.cy.tsx b/packages/app/src/specs/switcher/TestingTypeSwitcher.cy.tsx
new file mode 100644
index 000000000000..87e871d9a203
--- /dev/null
+++ b/packages/app/src/specs/switcher/TestingTypeSwitcher.cy.tsx
@@ -0,0 +1,56 @@
+import TestingTypeSwitcher from './TestingTypeSwitcher.vue'
+
+describe('<TestingTypeSwitcher />', () => {
+  beforeEach(() => {
+    const stub = cy.stub().as('selectTestingType')
+
+    cy.mount(<TestingTypeSwitcher
+      viewedTestingType="e2e"
+      isCtConfigured
+      isE2eConfigured={false}
+      onSelectTestingType={stub}
+    />)
+  })
+
+  it('renders', () => {
+    cy.percySnapshot()
+  })
+
+  it('displays question mark for unconfigured testing type', () => {
+    cy.findByTestId('unconfigured-icon').should('be.visible')
+  })
+
+  it('emits event on switch', () => {
+    cy.viewport(1200, 700)
+    cy.findByText('Component specs').click()
+    cy.get('@selectTestingType').should('have.been.calledOnceWith', 'component')
+  })
+
+  it('selects current testing type when it is e2e', () => {
+    const stub = cy.stub().as('selectTestingType')
+
+    cy.mount(<TestingTypeSwitcher
+      viewedTestingType="e2e"
+      isCtConfigured
+      isE2eConfigured={true}
+      onSelectTestingType={stub}
+    />)
+
+    cy.findByTestId('testing-type-switch').contains('button', 'E2E').should('have.attr', 'aria-selected', 'true')
+    cy.findByTestId('testing-type-switch').contains('button', 'Component').should('not.have.attr', 'aria-selected')
+  })
+
+  it('selects current testing type when it is component', () => {
+    const stub = cy.stub().as('selectTestingType')
+
+    cy.mount(<TestingTypeSwitcher
+      viewedTestingType="component"
+      isCtConfigured
+      isE2eConfigured={false}
+      onSelectTestingType={stub}
+    />)
+
+    cy.findByTestId('testing-type-switch').contains('button', 'E2E').should('not.have.attr', 'aria-selected')
+    cy.findByTestId('testing-type-switch').contains('button', 'Component').should('have.attr', 'aria-selected', 'true')
+  })
+})
diff --git a/packages/app/src/specs/switcher/TestingTypeSwitcher.vue b/packages/app/src/specs/switcher/TestingTypeSwitcher.vue
new file mode 100644
index 000000000000..48bf4be1e029
--- /dev/null
+++ b/packages/app/src/specs/switcher/TestingTypeSwitcher.vue
@@ -0,0 +1,83 @@
+<template>
+  <Tabs
+    :key="key"
+    :tabs="tabs"
+    data-cy="testing-type-switch"
+    class="testing-type-switcher"
+    @switch="handleSwitch"
+  />
+</template>
+
+<script setup lang="ts">
+
+import { computed, h, FunctionalComponent } from 'vue'
+import Tabs from '@cypress-design/vue-tabs'
+import type { Tab } from '@cypress-design/constants-tabs'
+import { IconTestingTypeComponent, IconTestingTypeE2E, IconActionQuestionMarkOutline } from '@cypress-design/vue-icon'
+import { useI18n } from '@cy/i18n'
+import { useWindowSize } from '@vueuse/core'
+
+const { width } = useWindowSize()
+
+const props = defineProps<{
+  viewedTestingType: 'e2e' | 'component' | null
+  isE2eConfigured?: boolean | null
+  isCtConfigured?: boolean | null
+}>()
+
+const emits = defineEmits<{
+  (event: 'selectTestingType', value: 'e2e' | 'component'): void
+}>()
+
+const { t } = useI18n()
+
+const shouldUseLongText = computed(() => width.value > 1140)
+
+const StyledQuestionMarkIcon: FunctionalComponent = (props, ...args) => {
+  return h(IconActionQuestionMarkOutline as any, { ...props, 'data-cy': 'unconfigured-icon' }, ...args)
+}
+
+// Force Vue to destroy and rebuild the `Tabs` instance when configuration states change
+// Not doing this results in layout issues as icons get added/removed
+const key = computed(() => `${props.isE2eConfigured}-${props.isCtConfigured}-${shouldUseLongText.value}`)
+
+const tabs = computed(() => {
+  return [
+    {
+      id: 'e2e',
+      iconBefore: IconTestingTypeE2E,
+      label: shouldUseLongText.value ? t('specPage.e2eSpecsHeader') : t('specPage.e2eSpecsHeaderShort'),
+      iconAfter: props.isE2eConfigured === false ? StyledQuestionMarkIcon : undefined,
+      active: props.viewedTestingType === 'e2e',
+    },
+    {
+      id: 'component',
+      iconBefore: IconTestingTypeComponent,
+      label: shouldUseLongText.value ? t('specPage.componentSpecsHeader') : t('specPage.componentSpecsHeaderShort'),
+      iconAfter: props.isCtConfigured === false ? StyledQuestionMarkIcon : undefined,
+      active: props.viewedTestingType === 'component',
+    },
+  ]
+})
+
+function handleSwitch (tab: Tab) {
+  emits('selectTestingType', tab.id as 'e2e' | 'component')
+}
+
+</script>
+
+<style lang="scss">
+.testing-type-switcher {
+  button[role="tab"] {
+    z-index: 2;
+  }
+  div {
+    &:first-of-type {
+      z-index: 1;
+    }
+    &:last-of-type {
+      z-index: 3;
+    }
+  }
+}
+</style>
diff --git a/packages/frontend-shared/package.json b/packages/frontend-shared/package.json
index 722c468dc515..6f8d59dc089b 100644
--- a/packages/frontend-shared/package.json
+++ b/packages/frontend-shared/package.json
@@ -19,7 +19,7 @@
   "dependencies": {},
   "devDependencies": {
     "@antfu/utils": "^0.3.0",
-    "@cypress-design/css": "^0.13.1",
+    "@cypress-design/css": "^0.13.3",
     "@graphql-typed-document-node/core": "^3.1.0",
     "@headlessui/vue": "1.4.0",
     "@iconify/json": "1.1.368",
diff --git a/packages/frontend-shared/src/locales/en-US.json b/packages/frontend-shared/src/locales/en-US.json
index 3616f57af15b..8e78ad0c5fd0 100644
--- a/packages/frontend-shared/src/locales/en-US.json
+++ b/packages/frontend-shared/src/locales/en-US.json
@@ -124,6 +124,8 @@
     "clearSearch": "Clear search field",
     "componentSpecsHeader": "Component specs",
     "e2eSpecsHeader": "E2E specs",
+    "componentSpecsHeaderShort": "Component",
+    "e2eSpecsHeaderShort": "E2E",
     "lastUpdated": {
       "header": "Last updated",
       "tooltip": {
@@ -224,7 +226,45 @@
         "dismissAction": "Give feedback"
       }
     },
-    "runSelectedSpecs": "Run {n} spec | Run {n} specs"
+    "runSelectedSpecs": "Run {n} spec | Run {n} specs",
+    "testingTypePromo": {
+      "e2e": {
+        "header": {
+          "title": "End-to-end testing is not set up for this project",
+          "description": "Try it out now, or {0} to learn more",
+          "link": "read our guides",
+          "control": "Quick setup"
+        },
+        "body": {
+          "title": "What is end-to-end testing?",
+          "description": "End-to-end tests are perfect for testing your entire application from a user's perspective. Visit any URL and test full user journeys across pages and domains.",
+          "listItem1": "Test full user journeys across multiple pages using {0} to load up a web page for your test.",
+          "listItem1Command": "cy.visit()",
+          "listItem2": "Work with live API calls or mock them with {0} to test all possible states of your app.",
+          "listItem2Command": "cy.intercept()",
+          "listItem3": "Use {0} to maintain consistent browser sessions in your tests, and work with features like cookies and local storage, all while keeping your tests properly isolated.",
+          "listItem3Command": "cy.session()"
+        }
+      },
+      "ct": {
+        "header": {
+          "title": "Component testing is not set up for this project",
+          "description": "Try it out now, or {0} to learn more",
+          "link": "read our guides",
+          "control": "Quick setup"
+        },
+        "body": {
+          "title": "What is Component Testing?",
+          "description": "Cypress Component Testing is a technique for developers to write, test, and debug components in isolation without ever leaving the browser - and without having to run your entire application.",
+          "listItem1": "Instead of visiting a page, use {0} to render your components directly in the browser.",
+          "listItem1Command": "cy.mount()",
+          "listItem2": "Test from a user's perspective with all the same Cypress commands that are available in end-to-end testing.",
+          "listItem3": "To get started, you can generate the config for {0}, {1}, and {2} (and {3}!).",
+          "listItem3Link": "more",
+          "link": "Give feedback"
+        }
+      }
+    }
   },
   "noResults": {
     "defaultMessage": "No results matched your search:",
diff --git a/yarn.lock b/yarn.lock
index 60ed2a8feb9b..b2446f52dc47 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7,6 +7,11 @@
   resolved "https://registry.yarnpkg.com/7zip-bin/-/7zip-bin-5.1.1.tgz#9274ec7460652f9c632c59addf24efb1684ef876"
   integrity sha512-sAP4LldeWNz0lNzmTird3uWfFDWWTeg6V/MsmyyLR9X1idwKBWIgt/ZvinqQldJm3LecKEs1emkbquO6PCiLVQ==
 
+"@alloc/quick-lru@^5.2.0":
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/@alloc/quick-lru/-/quick-lru-5.2.0.tgz#7bf68b20c0a350f936915fcae06f58e32007ce30"
+  integrity sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==
+
 "@ampproject/remapping@^2.2.0":
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.2.0.tgz#56c133824780de3174aed5ab6834f3026790154d"
@@ -2232,49 +2237,60 @@
   resolved "https://registry.yarnpkg.com/@cypress-design/constants-statusicon/-/constants-statusicon-0.1.0.tgz#2b4f56bb0838af8635fb655d4136a0a5980c6f9a"
   integrity sha512-xp1iGxJAV5Qj+FWcZ4mpQ00UqD5n1syFbnqOvm8WLuRie2lw0hyz5/lncJMMU7mheMyRtM+KU9+VL0+JB8mkLw==
 
-"@cypress-design/css@*", "@cypress-design/css@^0.13.1":
-  version "0.13.1"
-  resolved "https://registry.yarnpkg.com/@cypress-design/css/-/css-0.13.1.tgz#6144c38167ed4d514135257b5d942c52c359e8ab"
-  integrity sha512-wWlDIzk6NL3/a2xBHi5XaJ5P/Y+YVC9r02ZpSueSwZviAklV02bKcKjHTDFd6OdsEKTRwj8bEzmItwFi3sNvpg==
+"@cypress-design/constants-tabs@*":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@cypress-design/constants-tabs/-/constants-tabs-0.2.0.tgz#e5a05204ecd27ca8b365b4f9537edc07e5d3b9fa"
+  integrity sha512-2ndtAO0ycA0kgpAaCho9T4Y18a9XUbAL/S06hvwSKR7PuEmmpVx9ndGY2STaWcx5qKLRoBfMQWuPwDrN82dk5A==
+  dependencies:
+    "@cypress-design/icon-registry" "*"
+
+"@cypress-design/css@*", "@cypress-design/css@^0.13.3":
+  version "0.13.3"
+  resolved "https://registry.yarnpkg.com/@cypress-design/css/-/css-0.13.3.tgz#3501e2cdbf671d75f75c8f081030fb0b27bf1714"
+  integrity sha512-+Jj/7K5gkFUOVScssUc39UOEeZiPEtiSjo+/UfxtrpN2or1c8z+56GQqDwgrdf5z5CBSicnWky+LjBS3kREglQ==
   dependencies:
     "@windicss/plugin-interaction-variants" "^1.0.0"
     lodash "^4.17.21"
     resolve-pkg "^2.0.0"
-    tailwindcss "^3.3.1"
-    vite-plugin-windicss "^1.8.10"
-    windicss "^3.5.6"
-    windicss-webpack-plugin "^1.7.8"
+    tailwindcss "^3.3.2"
 
-"@cypress-design/icon-registry@^0.22.0", "@cypress-design/icon-registry@^0.22.1":
-  version "0.22.1"
-  resolved "https://registry.yarnpkg.com/@cypress-design/icon-registry/-/icon-registry-0.22.1.tgz#be8012cc2d79b6ff5abea476d12411ba6910d87f"
-  integrity sha512-LgEGpof1iaYbUi//7OsBgL0DLqesJukV1H6tqxowyjIXSvABmZC1ZMQOhV5ZHjN7dofEIWPlcakFrOstI1J3Nw==
+"@cypress-design/icon-registry@*", "@cypress-design/icon-registry@^0.24.0":
+  version "0.24.0"
+  resolved "https://registry.yarnpkg.com/@cypress-design/icon-registry/-/icon-registry-0.24.0.tgz#d96827250011707708ff8a3c8c5d8a94fd30fbe4"
+  integrity sha512-KNNyGzqaXDB8B2mkVeeAMtLlBwTSaWed0GKw6YndkxrEprGk3fz3IH1QnmOw45OANAtvPH+8YMHDth0vyFJ7AQ==
   dependencies:
     "@cypress-design/css" "*"
 
-"@cypress-design/vue-button@0.9.2":
-  version "0.9.2"
-  resolved "https://registry.yarnpkg.com/@cypress-design/vue-button/-/vue-button-0.9.2.tgz#8445282e9740124f9ff366ae3ebc4dc731757a12"
-  integrity sha512-Zcs50D/VwwthXF6aqVDz1f/Z1csbu8q5SzGAqRNxlLhgGR1kQS+0WgA2Q+nj4OHfL/Jh6uGTqFZrdNXVMRLtbA==
+"@cypress-design/vue-button@^0.10.1":
+  version "0.10.1"
+  resolved "https://registry.yarnpkg.com/@cypress-design/vue-button/-/vue-button-0.10.1.tgz#5dd3ca6469aad493c77a45a0d1401da0b8ac4540"
+  integrity sha512-inzTmkO5Vvw288vdVFKlKUEWJO2g1EvzUMCQMPZ1xZ7wLBl4FtkdEvRBYINiTs+O211FunHuxIjNwRjWkQhOHA==
   dependencies:
     "@cypress-design/constants-button" "*"
 
-"@cypress-design/vue-icon@*", "@cypress-design/vue-icon@0.22.2":
-  version "0.22.2"
-  resolved "https://registry.yarnpkg.com/@cypress-design/vue-icon/-/vue-icon-0.22.2.tgz#9f23804461fb46d8e5c22054e484e8a038d13888"
-  integrity sha512-ypsbch38d6i61FuoAw4qqwsJKy8JuaWCjOYsMnBjr+a9xnUBep2P+q4AHe6ffNfUzX7pfSh0JZeFImKZDCUmFw==
+"@cypress-design/vue-icon@*", "@cypress-design/vue-icon@^0.23.1":
+  version "0.23.1"
+  resolved "https://registry.yarnpkg.com/@cypress-design/vue-icon/-/vue-icon-0.23.1.tgz#53ac53dbab991fd6f141ff94c07c3da1b5a6b30d"
+  integrity sha512-yZOjaLxIbnygpf7Qm0H2qsCO/TlvhrgO2boMIoDeygX3pF/m2ASy/cjuybcK55ouqMs1BcjYCmx0HrNik/G6lA==
   dependencies:
-    "@cypress-design/icon-registry" "^0.22.1"
+    "@cypress-design/icon-registry" "^0.24.0"
 
-"@cypress-design/vue-statusicon@0.4.3":
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/@cypress-design/vue-statusicon/-/vue-statusicon-0.4.3.tgz#39ade5e5e0f3b11337d4e07a91f5302fe257e3fa"
-  integrity sha512-cTr7BSmhgZt2Ka0+Qa+QsKYcu4TikQ1B+iBGNVGEZFBE+o417mFHLyDLcqE3r9IC3zx8efI4VuKTxJMaYYyXRA==
+"@cypress-design/vue-statusicon@^0.4.7":
+  version "0.4.7"
+  resolved "https://registry.yarnpkg.com/@cypress-design/vue-statusicon/-/vue-statusicon-0.4.7.tgz#943ca9e5b438f010f09cf490f1b0ea53c8a942de"
+  integrity sha512-CYe1csJER4/GLwTXJy3R640GgrsWPApl9az6ZlFrizQ3Y5ITOuuwG2l5+NUyxsDGhwj2SbtDH5tn/D1fMyZceQ==
   dependencies:
     "@cypress-design/constants-statusicon" "*"
-    "@cypress-design/icon-registry" "^0.22.0"
+    "@cypress-design/icon-registry" "^0.24.0"
     "@cypress-design/vue-icon" "*"
 
+"@cypress-design/vue-tabs@^0.5.1":
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/@cypress-design/vue-tabs/-/vue-tabs-0.5.1.tgz#840cdf85cb7d6f1cdd480efad83251395e309400"
+  integrity sha512-Xbe98UIgtFobYd39mwkU3QofCWwBUpksfLzAXsq0vhCKk4ePfOYkVtTJRO1GSu4y/HPmhkkRFmZ3ZXFSvX/fCg==
+  dependencies:
+    "@cypress-design/constants-tabs" "*"
+
 "@cypress/commit-info@2.2.0":
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/@cypress/commit-info/-/commit-info-2.2.0.tgz#6086d478975edb7ac7c9ffdd5cfd5be2b9fe44f2"
@@ -8055,33 +8071,11 @@
     "@webassemblyjs/wast-parser" "1.9.0"
     "@xtuc/long" "4.2.2"
 
-"@windicss/config@1.8.10":
-  version "1.8.10"
-  resolved "https://registry.yarnpkg.com/@windicss/config/-/config-1.8.10.tgz#717f070889db153fdfead4bc4401f4120f3de4ae"
-  integrity sha512-O9SsC110b1Ik3YYa4Ck/0TWuCo7YFfA9KDrwD5sAeqscT5COIGK1HszdCT3oh0MJFej2wNrvpfyW9h6yQaW6PA==
-  dependencies:
-    debug "^4.3.4"
-    jiti "^1.16.0"
-    windicss "^3.5.6"
-
 "@windicss/plugin-interaction-variants@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@windicss/plugin-interaction-variants/-/plugin-interaction-variants-1.0.0.tgz#11e412c6fd653899f6cced4e4f7b402eb5456981"
   integrity sha512-jk0kvJEwphPlzjgCASxi0yCrLIrMPBHKTjPB1vF2LZsmWVaIPhKQRfpJW6+G093ipDos1E2BkevDrh/R2Ln8gg==
 
-"@windicss/plugin-utils@1.8.10", "@windicss/plugin-utils@^1.8.10":
-  version "1.8.10"
-  resolved "https://registry.yarnpkg.com/@windicss/plugin-utils/-/plugin-utils-1.8.10.tgz#241d5a93650be826c9cbd2614341885b044251c7"
-  integrity sha512-Phqk5OW1w+Mv+ry6t7BzAeDq3aMhbI94gR49j9vQCufFfDGCHndhhjtMK0sBv+NPJUsIAIh6qayb1iwBCXUGrw==
-  dependencies:
-    "@antfu/utils" "^0.7.2"
-    "@windicss/config" "1.8.10"
-    debug "^4.3.4"
-    fast-glob "^3.2.12"
-    magic-string "^0.27.0"
-    micromatch "^4.0.5"
-    windicss "^3.5.6"
-
 "@xtuc/ieee754@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790"
@@ -11172,7 +11166,7 @@ color-name@1.1.3:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
 
-color-name@^1.0.0, color-name@^1.1.4, color-name@~1.1.4:
+color-name@^1.0.0, color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
@@ -15851,11 +15845,6 @@ get-port@^3.2.0:
   resolved "https://registry.yarnpkg.com/get-port/-/get-port-3.2.0.tgz#dd7ce7de187c06c8bf353796ac71e099f0980ebc"
   integrity sha1-3Xzn3hh8Bsi/NTeWrHHgmfCYDrw=
 
-get-port@^6.1.2:
-  version "6.1.2"
-  resolved "https://registry.yarnpkg.com/get-port/-/get-port-6.1.2.tgz#c1228abb67ba0e17fb346da33b15187833b9c08a"
-  integrity sha512-BrGGraKm2uPqurfGVj/z97/zv8dPleC6x9JBNRTrDNtCkkRF4rPwrQXFgL7+I+q8QSdU4ntLQX2D7KIxSy8nGw==
-
 get-stream@3.0.0, get-stream@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
@@ -18701,7 +18690,7 @@ jimp@^0.2.21:
     tinycolor2 "^1.1.2"
     url-regex "^3.0.0"
 
-jiti@^1.16.0, jiti@^1.17.2:
+jiti@^1.18.2:
   version "1.18.2"
   resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.18.2.tgz#80c3ef3d486ebf2450d9335122b32d121f2a83cd"
   integrity sha512-QAdOptna2NYiSSpv0O/BwoHBSmz4YhpzJHyi+fnMRTXFjp7B8i/YG5Z8IfusxB1ufjcD2Sre1F3R+nX3fvy7gg==
@@ -19191,7 +19180,7 @@ klona@^2.0.4:
   resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.5.tgz#d166574d90076395d9963aa7a928fabb8d76afbc"
   integrity sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==
 
-kolorist@^1.5.1, kolorist@^1.6.0:
+kolorist@^1.5.1:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/kolorist/-/kolorist-1.8.0.tgz#edddbbbc7894bc13302cdf740af6374d4a04743c"
   integrity sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==
@@ -19550,7 +19539,7 @@ liftoff@^3.1.0:
     rechoir "^0.6.2"
     resolve "^1.1.7"
 
-lilconfig@^2.0.5, lilconfig@^2.0.6:
+lilconfig@^2.0.5, lilconfig@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.1.0.tgz#78e23ac89ebb7e1bfbf25b18043de756548e7f52"
   integrity sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==
@@ -20258,13 +20247,6 @@ magic-string@^0.26.7:
   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"
-
 magic-string@^0.30.0:
   version "0.30.0"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.0.tgz#fd58a4748c5c4547338a424e90fa5dd17f4de529"
@@ -23564,7 +23546,7 @@ path-type@^4.0.0:
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
-pathe@^1.0.0, pathe@^1.1.0:
+pathe@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/pathe/-/pathe-1.1.0.tgz#e2e13f6c62b31a3289af4ba19886c230f295ec03"
   integrity sha512-ODbEPR0KKHqECXW1GoxdDb+AZvULmXjVPy4rt+pGo2+TnjJTIPJQSVS6N63n8T2Ip+syHhbn52OewKicV0373w==
@@ -23853,10 +23835,10 @@ postcss-functions@^3.0.0:
     postcss "^6.0.9"
     postcss-value-parser "^3.3.0"
 
-postcss-import@^14.1.0:
-  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==
+postcss-import@^15.1.0:
+  version "15.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-15.1.0.tgz#41c64ed8cc0e23735a9698b3249ffdbf704adc70"
+  integrity sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==
   dependencies:
     postcss-value-parser "^4.0.0"
     read-cache "^1.0.0"
@@ -23870,7 +23852,7 @@ postcss-js@^2.0.0:
     camelcase-css "^2.0.1"
     postcss "^7.0.18"
 
-postcss-js@^4.0.0:
+postcss-js@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-4.0.1.tgz#61598186f3703bab052f1c4f7d805f3991bee9d2"
   integrity sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==
@@ -23885,13 +23867,13 @@ postcss-load-config@^2.0.0:
     cosmiconfig "^5.0.0"
     import-cwd "^2.0.0"
 
-postcss-load-config@^3.1.4:
-  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==
+postcss-load-config@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-4.0.1.tgz#152383f481c2758274404e4962743191d73875bd"
+  integrity sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==
   dependencies:
     lilconfig "^2.0.5"
-    yaml "^1.10.2"
+    yaml "^2.1.1"
 
 postcss-loader@3.0.0:
   version "3.0.0"
@@ -23935,13 +23917,6 @@ postcss-modules-values@^2.0.0:
     icss-replace-symbols "^1.1.0"
     postcss "^7.0.6"
 
-postcss-nested@6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-6.0.0.tgz#1572f1984736578f360cffc7eb7dca69e30d1735"
-  integrity sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==
-  dependencies:
-    postcss-selector-parser "^6.0.10"
-
 postcss-nested@^4.1.1:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-4.2.3.tgz#c6f255b0a720549776d220d00c4b70cd244136f6"
@@ -23950,6 +23925,13 @@ postcss-nested@^4.1.1:
     postcss "^7.0.32"
     postcss-selector-parser "^6.0.2"
 
+postcss-nested@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-6.0.1.tgz#f83dc9846ca16d2f4fa864f16e9d9f7d0961662c"
+  integrity sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==
+  dependencies:
+    postcss-selector-parser "^6.0.11"
+
 postcss-scss@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/postcss-scss/-/postcss-scss-2.1.1.tgz#ec3a75fa29a55e016b90bf3269026c53c1d2b383"
@@ -23957,7 +23939,7 @@ postcss-scss@^2.0.0:
   dependencies:
     postcss "^7.0.6"
 
-postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.11, postcss-selector-parser@^6.0.2:
+postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.11, postcss-selector-parser@^6.0.2:
   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==
@@ -24001,10 +23983,10 @@ postcss@^7.0.0, postcss@^7.0.11, postcss@^7.0.14, postcss@^7.0.18, postcss@^7.0.
     picocolors "^0.2.1"
     source-map "^0.6.1"
 
-postcss@^8.0.9, postcss@^8.1.10, postcss@^8.4.21, postcss@^8.4.22:
-  version "8.4.22"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.22.tgz#c29e6776b60ab3af602d4b513d5bd2ff9aa85dc1"
-  integrity sha512-XseknLAfRHzVWjCEtdviapiBtfLdgyzExD50Rg2ePaucEesyh8Wv4VPdW0nbyDa1ydbrAxV19jvMT4+LFmcNUA==
+postcss@^8.1.10, postcss@^8.4.21, postcss@^8.4.22, postcss@^8.4.23:
+  version "8.4.24"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.24.tgz#f714dba9b2284be3cc07dbd2fc57ee4dc972d2df"
+  integrity sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==
   dependencies:
     nanoid "^3.3.6"
     picocolors "^1.0.0"
@@ -25653,7 +25635,7 @@ resolve@^0.6.3:
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-0.6.3.tgz#dd957982e7e736debdf53b58a4dd91754575dd46"
   integrity sha1-3ZV5gufnNt699TtYpN2RdUV13UY=
 
-resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.10.1, resolve@^1.11.1, resolve@^1.12.0, resolve@^1.14.2, resolve@^1.15.1, resolve@^1.17.0, resolve@^1.18.1, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.0, resolve@^1.22.1, resolve@^1.3.2, resolve@^1.4.0:
+resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.10.1, resolve@^1.11.1, resolve@^1.12.0, resolve@^1.14.2, resolve@^1.15.1, resolve@^1.17.0, resolve@^1.18.1, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.0, resolve@^1.22.1, resolve@^1.22.2, resolve@^1.3.2, resolve@^1.4.0:
   version "1.22.2"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.2.tgz#0ed0943d4e301867955766c9f3e1ae6d01c6845f"
   integrity sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==
@@ -27806,7 +27788,7 @@ success-symbol@^0.1.0:
   resolved "https://registry.yarnpkg.com/success-symbol/-/success-symbol-0.1.0.tgz#24022e486f3bf1cdca094283b769c472d3b72897"
   integrity sha1-JAIuSG878c3KCUKDt2nEctO3KJc=
 
-sucrase@^3.29.0:
+sucrase@^3.32.0:
   version "3.32.0"
   resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.32.0.tgz#c4a95e0f1e18b6847127258a75cf360bc568d4a7"
   integrity sha512-ydQOU34rpSyj2TGyz4D2p8rbktIOZ8QY9s+DGLvFU1i5pWJE8vkpruCjGCMHsdXwnD7JDcS+noSwM/a7zyNFDQ==
@@ -28081,35 +28063,34 @@ tailwindcss@1.1.4:
     pretty-hrtime "^1.0.3"
     reduce-css-calc "^2.1.6"
 
-tailwindcss@^3.3.1:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.1.tgz#b6662fab6a9b704779e48d083a9fef5a81d2b81e"
-  integrity sha512-Vkiouc41d4CEq0ujXl6oiGFQ7bA3WEhUZdTgXAhtKxSy49OmKs8rEfQmupsfF0IGW8fv2iQkp1EVUuapCFrZ9g==
+tailwindcss@^3.3.1, tailwindcss@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.2.tgz#2f9e35d715fdf0bbf674d90147a0684d7054a2d3"
+  integrity sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w==
   dependencies:
+    "@alloc/quick-lru" "^5.2.0"
     arg "^5.0.2"
     chokidar "^3.5.3"
-    color-name "^1.1.4"
     didyoumean "^1.2.2"
     dlv "^1.1.3"
     fast-glob "^3.2.12"
     glob-parent "^6.0.2"
     is-glob "^4.0.3"
-    jiti "^1.17.2"
-    lilconfig "^2.0.6"
+    jiti "^1.18.2"
+    lilconfig "^2.1.0"
     micromatch "^4.0.5"
     normalize-path "^3.0.0"
     object-hash "^3.0.0"
     picocolors "^1.0.0"
-    postcss "^8.0.9"
-    postcss-import "^14.1.0"
-    postcss-js "^4.0.0"
-    postcss-load-config "^3.1.4"
-    postcss-nested "6.0.0"
+    postcss "^8.4.23"
+    postcss-import "^15.1.0"
+    postcss-js "^4.0.1"
+    postcss-load-config "^4.0.1"
+    postcss-nested "^6.0.1"
     postcss-selector-parser "^6.0.11"
     postcss-value-parser "^4.2.0"
-    quick-lru "^5.1.1"
-    resolve "^1.22.1"
-    sucrase "^3.29.0"
+    resolve "^1.22.2"
+    sucrase "^3.32.0"
 
 tapable@^1.0.0, tapable@^1.1.3:
   version "1.1.3"
@@ -29835,16 +29816,6 @@ vite-plugin-vue-layouts@0.8.0:
     debug "^4.3.3"
     fast-glob "^3.2.11"
 
-vite-plugin-windicss@^1.8.10:
-  version "1.8.10"
-  resolved "https://registry.yarnpkg.com/vite-plugin-windicss/-/vite-plugin-windicss-1.8.10.tgz#a0e022c5d3def185fb2458a0ba41fc140421ddcb"
-  integrity sha512-scywsuzo46lcTBohspmF0WiwhWEte6p+OUVrX4yr7VMRvLHMHVfLtJReyD5pppjijG7YOwVsZn7XBWWZtF658Q==
-  dependencies:
-    "@windicss/plugin-utils" "1.8.10"
-    debug "^4.3.4"
-    kolorist "^1.6.0"
-    windicss "^3.5.6"
-
 vite-svg-loader@4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/vite-svg-loader/-/vite-svg-loader-4.0.0.tgz#1cec4337dba3c23ab13bcabb111896e251b047ac"
@@ -30659,25 +30630,6 @@ win-version-info@5.0.1:
     napi-macros "^2.0.0"
     node-gyp-build "^4.3.0"
 
-windicss-webpack-plugin@^1.7.8:
-  version "1.7.8"
-  resolved "https://registry.yarnpkg.com/windicss-webpack-plugin/-/windicss-webpack-plugin-1.7.8.tgz#baf001b6cbf1aae60a3cc4ed2a5d52e0cdddd9a7"
-  integrity sha512-wjKczM/20gOaIaDQfdWV1M6dWAKKp/JQDuUmIEvDopmuo3ereUFVFnGxIjyKAu9U4U7RdcZGUwzL/+bJtIn+pA==
-  dependencies:
-    "@windicss/plugin-utils" "^1.8.10"
-    debug "^4.3.4"
-    get-port "^6.1.2"
-    loader-utils "^2.0.0"
-    lodash "^4.17.21"
-    pathe "^1.1.0"
-    webpack-virtual-modules "^0.5.0"
-    windicss "^3.5.6"
-
-windicss@^3.5.6:
-  version "3.5.6"
-  resolved "https://registry.yarnpkg.com/windicss/-/windicss-3.5.6.tgz#30a34da76894d952a96c9a1921f2e91e13932183"
-  integrity sha512-P1mzPEjgFMZLX0ZqfFht4fhV/FX8DTG7ERG1fBLiWvd34pTLVReS5CVsewKn9PApSgXnVfPWwvq+qUsRwpnwFA==
-
 window-size@0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.0.tgz#5438cd2ea93b202efa3a19fe8887aee7c94f9c9d"
@@ -31096,15 +31048,15 @@ yaml-eslint-parser@^0.3.2:
     lodash "^4.17.20"
     yaml "^1.10.0"
 
-yaml@^1.10.0, yaml@^1.10.2:
+yaml@^1.10.0:
   version "1.10.2"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
 
-yaml@^2.0.0, yaml@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.2.1.tgz#3014bf0482dcd15147aa8e56109ce8632cd60ce4"
-  integrity sha512-e0WHiYql7+9wr4cWMx3TVQrNwejKaEe7/rHNmQmqRjazfOP5W8PB6Jpebb5o6fIapbz9o9+2ipcaTM2ZwDI6lw==
+yaml@^2.0.0, yaml@^2.1.1, yaml@^2.2.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.3.1.tgz#02fe0975d23cd441242aa7204e09fc28ac2ac33b"
+  integrity sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==
 
 yargs-parser@13.1.1:
   version "13.1.1"