From 558906f2f844ace15205471632da4f8d2c21d775 Mon Sep 17 00:00:00 2001
From: Matt Schile <mschile@cypress.io>
Date: Tue, 7 Jan 2025 08:46:22 -0700
Subject: [PATCH] misc: update browser icons (#30790)

---
 cli/CHANGELOG.md                              |   8 +
 .../app/cypress/component/support/index.ts    |  16 --
 .../app/cypress/e2e/support/e2eSupport.ts     |   4 +-
 packages/app/cypress/e2e/top-nav.cy.ts        |  12 +-
 packages/app/package.json                     |   8 +-
 .../app/src/debug/LayeredBrowserIcons.cy.tsx  |   3 +-
 .../app/src/debug/LayeredBrowserIcons.vue     |  39 +--
 .../runner/SpecRunnerHeaderOpenMode.cy.tsx    |   5 +-
 .../src/runner/SpecRunnerHeaderOpenMode.vue   |   6 +-
 .../src/runner/SpecRunnerHeaderRunMode.cy.tsx |   6 +-
 .../src/runner/SpecRunnerHeaderRunMode.vue    |   6 +-
 .../automation/AutomationMissing.cy.tsx       |   4 +-
 .../runner/automation/AutomationMissing.vue   |   6 +-
 packages/app/src/runs/RunCard.vue             |   4 +-
 .../specs/switcher/TestingTypeSwitcher.cy.tsx |   4 +-
 .../cypress/support/browserIconCommands.ts    |  41 +++
 .../cypress/support/component.ts              |   1 +
 .../frontend-shared/cypress/support/e2e.ts    |   1 +
 packages/frontend-shared/package.json         |   3 +-
 .../src/assets/browserLogos.ts                |  65 +++--
 .../logos/browser-chrome-for-testing_x16.svg  |  33 ---
 .../src/assets/logos/generic-browser.svg      |  15 -
 .../src/gql-components/topnav/TopNav.vue      |   6 +-
 .../src/gql-components/topnav/TopNavList.vue  |   4 +-
 .../topnav/VerticalBrowserListItems.vue       |   8 +-
 packages/launchpad/package.json               |   2 +-
 .../src/setup/OpenBrowserList.cy.tsx          |   3 +-
 .../launchpad/src/setup/OpenBrowserList.vue   |   6 +-
 yarn.lock                                     | 271 ++++++++----------
 29 files changed, 263 insertions(+), 327 deletions(-)
 create mode 100644 packages/frontend-shared/cypress/support/browserIconCommands.ts
 delete mode 100644 packages/frontend-shared/src/assets/logos/browser-chrome-for-testing_x16.svg
 delete mode 100644 packages/frontend-shared/src/assets/logos/generic-browser.svg

diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
index ee9a11991dcb..17722b2a32bb 100644
--- a/cli/CHANGELOG.md
+++ b/cli/CHANGELOG.md
@@ -1,4 +1,12 @@
 <!-- See the ../guides/writing-the-cypress-changelog.md for details on writing the changelog. -->
+## 13.17.1
+
+_Released 12/31/2024 (PENDING)_
+
+**Misc:**
+
+- Updated to use Cypress design system browser icons. Addressed in [#30790](https://github.com/cypress-io/cypress/pull/30790).
+
 ## 13.17.0
 
 _Released 12/17/2024_
diff --git a/packages/app/cypress/component/support/index.ts b/packages/app/cypress/component/support/index.ts
index 18d1ee68dad2..8b8fcfdda03a 100644
--- a/packages/app/cypress/component/support/index.ts
+++ b/packages/app/cypress/component/support/index.ts
@@ -1,22 +1,6 @@
 /// <reference path="../../../../frontend-shared/cypress/support/component.ts" />
 import '../../../../frontend-shared/cypress/support/component.ts'
 import { registerMountFn } from '@packages/frontend-shared/cypress/support/common'
-// ***********************************************************
-// This example support/index.ts is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-
-// Import commands.js using ES2015 syntax:
 
 import { createRouter } from '../../../src/router/router'
 import { createPinia } from '../../../src/store'
diff --git a/packages/app/cypress/e2e/support/e2eSupport.ts b/packages/app/cypress/e2e/support/e2eSupport.ts
index 97620266165a..77f63d49f18c 100644
--- a/packages/app/cypress/e2e/support/e2eSupport.ts
+++ b/packages/app/cypress/e2e/support/e2eSupport.ts
@@ -20,7 +20,7 @@ beforeEach(() => {
 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')
+    cy.findByTestId('testing-type-switch').contains('button', 'Component').should('have.attr', 'aria-selected', 'false')
   })
 }
 
@@ -28,7 +28,7 @@ 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', 'E2E').should('have.attr', 'aria-selected', 'false')
     cy.findByTestId('testing-type-switch').contains('button', 'Component').should('have.attr', 'aria-selected', 'true')
   })
 }
diff --git a/packages/app/cypress/e2e/top-nav.cy.ts b/packages/app/cypress/e2e/top-nav.cy.ts
index 52ec9e8d7b03..24d0d60b4a6b 100644
--- a/packages/app/cypress/e2e/top-nav.cy.ts
+++ b/packages/app/cypress/e2e/top-nav.cy.ts
@@ -3,6 +3,7 @@ import defaultMessages from '@packages/frontend-shared/src/locales/en-US.json'
 import { CYPRESS_REMOTE_MANIFEST_URL, NPM_CYPRESS_REGISTRY_URL } from '@packages/types'
 import type Sinon from 'sinon'
 import { dayjs } from '../../src/runs/utils/day'
+import { cyBrowserMozillaFirefoxX16, cyBrowserChromeX16 } from '@cypress-design/icon-registry'
 
 const pkg = require('@packages/root')
 
@@ -40,9 +41,9 @@ describe('App Top Nav Workflows', () => {
         cy.visitApp()
         cy.specsPageIsVisible()
 
-        cy.findByTestId('top-nav-active-browser-icon')
-        .should('have.attr', 'src')
-        .and('contain', 'firefox')
+        cy.findByTestId('top-nav-active-browser-icon').children()
+        .verifyBrowserIconSvg(cyBrowserMozillaFirefoxX16.data)
+        .get('title').should('contain', 'Firefox')
 
         cy.findByTestId('top-nav-active-browser').should('contain', 'Firefox 6')
       })
@@ -63,8 +64,9 @@ describe('App Top Nav Workflows', () => {
       })
 
       it('shows the current browser in the top nav browser list button', () => {
-        cy.findByTestId('top-nav-active-browser-icon')
-        .should('have.attr', 'src')
+        cy.findByTestId('top-nav-active-browser-icon').children()
+        .verifyBrowserIconSvg(cyBrowserChromeX16.data)
+        .get('title').should('contain', 'Chrome')
 
         cy.findByTestId('top-nav-active-browser').should('contain', 'Chrome 1')
       })
diff --git a/packages/app/package.json b/packages/app/package.json
index caf28bb0cc2c..bc84d3851d03 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -21,10 +21,10 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@cypress-design/vue-button": "^0.11.6",
-    "@cypress-design/vue-icon": "^0.26.0",
-    "@cypress-design/vue-statusicon": "^0.5.7",
-    "@cypress-design/vue-tabs": "^0.5.1",
+    "@cypress-design/vue-button": "^1.1.0",
+    "@cypress-design/vue-icon": "^1.6.0",
+    "@cypress-design/vue-statusicon": "^1.0.0",
+    "@cypress-design/vue-tabs": "^1.2.2",
     "@faker-js/faker": "8.4.1",
     "@graphql-typed-document-node/core": "^3.1.0",
     "@headlessui/vue": "1.4.0",
diff --git a/packages/app/src/debug/LayeredBrowserIcons.cy.tsx b/packages/app/src/debug/LayeredBrowserIcons.cy.tsx
index 410812b46532..c1d9e2e5af04 100644
--- a/packages/app/src/debug/LayeredBrowserIcons.cy.tsx
+++ b/packages/app/src/debug/LayeredBrowserIcons.cy.tsx
@@ -1,8 +1,7 @@
 import LayeredBrowserIcons from './LayeredBrowserIcons.vue'
-import type { BrowserType } from './LayeredBrowserIcons.vue'
 
 describe('<LayeredBrowserIcons/>', () => {
-  const browsers: BrowserType[] = ['CHROME', 'CHROME BETA', 'CANARY', 'CHROME CANARY', 'CHROME FOR TESTING', 'CUSTOM CHROME FOR TESTING', 'CHROMIUM', 'CUSTOM CHROMIUM', 'EDGE', 'EDGE BETA', 'EDGE CANARY', 'EDGE DEV', 'ELECTRON', 'FIREFOX', 'FIREFOX DEVELOPER EDITION', 'FIREFOX NIGHTLY', 'WEBKIT']
+  const browsers: string[] = ['CHROME', 'CHROME BETA', 'CANARY', 'CHROME CANARY', 'CHROME FOR TESTING', 'CUSTOM CHROME FOR TESTING', 'CHROMIUM', 'CUSTOM CHROMIUM', 'EDGE', 'EDGE BETA', 'EDGE CANARY', 'EDGE DEV', 'ELECTRON', 'FIREFOX', 'FIREFOX DEVELOPER EDITION', 'FIREFOX NIGHTLY', 'WEBKIT']
 
   it('mounts correctly for single browser', () => {
     browsers.forEach((ele) => {
diff --git a/packages/app/src/debug/LayeredBrowserIcons.vue b/packages/app/src/debug/LayeredBrowserIcons.vue
index 4cb4032cd3b1..2e075ee48225 100644
--- a/packages/app/src/debug/LayeredBrowserIcons.vue
+++ b/packages/app/src/debug/LayeredBrowserIcons.vue
@@ -20,22 +20,10 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue'
-import {
-  IconBrowserChrome,
-  IconBrowserChromeBeta,
-  IconBrowserChromeCanary,
-  IconBrowserMozillaFirefox,
-  IconBrowserEdge,
-  IconBrowserWebkit,
-  IconBrowserElectronLight,
-  IconGeneralGlobe,
-} from '@cypress-design/vue-icon'
-
-// Note: These browser names should map to the list of logoPaths found at https://github.com/cypress-io/cypress-services/blob/develop/packages/common/src/logos/getLogoPath.ts
-export type BrowserType = 'CHROME' | 'CHROME BETA' | 'CANARY' | 'CHROME CANARY' | 'CHROME FOR TESTING' | 'CUSTOM CHROME FOR TESTING' | 'CHROMIUM' | 'CUSTOM CHROMIUM' | 'EDGE' | 'EDGE BETA' | 'EDGE CANARY' | 'EDGE DEV' | 'ELECTRON' | 'FIREFOX' | 'FIREFOX DEVELOPER EDITION' | 'FIREFOX NIGHTLY' | 'WEBKIT'
+import { allBrowsersIcons } from '@packages/frontend-shared/src/assets/browserLogos'
 
 interface LayeredProps {
-  browsers: BrowserType[]
+  browsers: string[]
 }
 
 const props = defineProps<LayeredProps>()
@@ -44,7 +32,7 @@ const results = computed(() => {
   if (props.browsers) {
     return props.browsers.map((browserType) => {
       return {
-        icon: BROWSER_MAP[browserType] || IconGeneralGlobe,
+        icon: allBrowsersIcons[browserType?.toLowerCase()] || allBrowsersIcons.generic,
         name: `browser-icon-${browserType.toLowerCase().replaceAll(' ', '_')}`,
       }
     })
@@ -53,25 +41,4 @@ const results = computed(() => {
   return []
 })
 
-// TODO: Add correct icons for firefox, edge, and chromium
-const BROWSER_MAP: Record<BrowserType, any> = {
-  'CHROME': IconBrowserChrome,
-  'CHROME BETA': IconBrowserChromeBeta,
-  'CANARY': IconBrowserChromeCanary,
-  'CHROME CANARY': IconBrowserChromeCanary,
-  'CHROME FOR TESTING': IconBrowserChrome,
-  'CUSTOM CHROME FOR TESTING': IconBrowserChrome,
-  'CHROMIUM': IconGeneralGlobe,
-  'CUSTOM CHROMIUM': IconGeneralGlobe,
-  'EDGE': IconBrowserEdge,
-  'EDGE BETA': IconBrowserEdge,
-  'EDGE CANARY': IconBrowserEdge,
-  'EDGE DEV': IconBrowserEdge,
-  'ELECTRON': IconBrowserElectronLight,
-  'FIREFOX': IconBrowserMozillaFirefox,
-  'FIREFOX DEVELOPER EDITION': IconBrowserMozillaFirefox,
-  'FIREFOX NIGHTLY': IconBrowserMozillaFirefox,
-  'WEBKIT': IconBrowserWebkit,
-}
-
 </script>
diff --git a/packages/app/src/runner/SpecRunnerHeaderOpenMode.cy.tsx b/packages/app/src/runner/SpecRunnerHeaderOpenMode.cy.tsx
index be1bb84a1d39..727bfc7dc7fc 100644
--- a/packages/app/src/runner/SpecRunnerHeaderOpenMode.cy.tsx
+++ b/packages/app/src/runner/SpecRunnerHeaderOpenMode.cy.tsx
@@ -2,8 +2,8 @@ import SpecRunnerHeaderOpenMode from './SpecRunnerHeaderOpenMode.vue'
 import { useAutStore } from '../store'
 import { SpecRunnerHeaderFragment, SpecRunnerHeaderFragmentDoc } from '../generated/graphql-test'
 import { createEventManager, createTestAutIframe } from '../../cypress/component/support/ctSupport'
-import { allBrowsersIcons } from '@packages/frontend-shared/src/assets/browserLogos'
 import { ExternalLink_OpenExternalDocument } from '@packages/frontend-shared/src/generated/graphql'
+import { cyGeneralGlobeX16 } from '@cypress-design/icon-registry'
 
 function renderWithGql (gqlVal: SpecRunnerHeaderFragment) {
   const eventManager = createEventManager()
@@ -227,8 +227,7 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => {
 
     cy.findByTestId('select-browser').contains('Fake Browser')
 
-    cy.get('[data-cy="select-browser"] > button img').should('have.attr', 'src', allBrowsersIcons.generic)
-
+    cy.get('[data-cy="select-browser"] > button svg').eq(0).children().verifyBrowserIconSvg(cyGeneralGlobeX16.data)
     cy.findByTestId('viewport').contains('500x500')
   })
 
diff --git a/packages/app/src/runner/SpecRunnerHeaderOpenMode.vue b/packages/app/src/runner/SpecRunnerHeaderOpenMode.vue
index 5c74700bf3d2..df1435a01b8f 100644
--- a/packages/app/src/runner/SpecRunnerHeaderOpenMode.vue
+++ b/packages/app/src/runner/SpecRunnerHeaderOpenMode.vue
@@ -63,11 +63,11 @@
         :disabled="autStore.isRunning"
       >
         <template #heading>
-          <img
+          <component
+            :is="allBrowsersIcons[selectedBrowser.displayName?.toLowerCase()] || allBrowsersIcons.generic"
             class="min-w-[16px] w-[16px]"
-            :src="allBrowsersIcons[selectedBrowser.displayName] || allBrowsersIcons.generic"
             :alt="selectedBrowser.displayName"
-          >
+          />
           {{ selectedBrowser.displayName }} {{ selectedBrowser.majorVersion }}
         </template>
 
diff --git a/packages/app/src/runner/SpecRunnerHeaderRunMode.cy.tsx b/packages/app/src/runner/SpecRunnerHeaderRunMode.cy.tsx
index e534f6e83ed2..7359c6a0e30a 100644
--- a/packages/app/src/runner/SpecRunnerHeaderRunMode.cy.tsx
+++ b/packages/app/src/runner/SpecRunnerHeaderRunMode.cy.tsx
@@ -1,6 +1,6 @@
 import SpecRunnerHeaderRunMode from './SpecRunnerHeaderRunMode.vue'
 import { useAutStore } from '../store'
-import { allBrowsersIcons } from '@packages/frontend-shared/src/assets/browserLogos'
+import { cyGeneralGlobeX16, cyBrowserChromeX16 } from '@cypress-design/icon-registry'
 
 const browser = {
   displayName: 'Chrome',
@@ -70,7 +70,7 @@ describe('SpecRunnerHeaderRunMode', { viewportHeight: 500 }, () => {
 
       cy.mount(<SpecRunnerHeaderRunMode />)
 
-      cy.get('[data-cy="select-browser"] > button img').should('have.attr', 'src', allBrowsersIcons.Chrome)
+      cy.get('[data-cy="select-browser"] > button svg').eq(0).children().verifyBrowserIconSvg(cyBrowserChromeX16.data)
       cy.get('[data-cy="select-browser"] > button').should('be.disabled')
     })
   })
@@ -86,7 +86,7 @@ describe('SpecRunnerHeaderRunMode', { viewportHeight: 500 }, () => {
 
       cy.mount(<SpecRunnerHeaderRunMode />)
 
-      cy.get('[data-cy="select-browser"] > button img').should('have.attr', 'src', allBrowsersIcons.generic)
+      cy.get('[data-cy="select-browser"] > button svg').eq(0).children().verifyBrowserIconSvg(cyGeneralGlobeX16.data)
       cy.get('[data-cy="select-browser"] > button').should('be.disabled')
     })
   })
diff --git a/packages/app/src/runner/SpecRunnerHeaderRunMode.vue b/packages/app/src/runner/SpecRunnerHeaderRunMode.vue
index 8f9a53ca796f..ed2ba4781733 100644
--- a/packages/app/src/runner/SpecRunnerHeaderRunMode.vue
+++ b/packages/app/src/runner/SpecRunnerHeaderRunMode.vue
@@ -29,12 +29,12 @@
         :disabled="autStore.isRunning"
       >
         <template #heading>
-          <img
+          <component
+            :is="allBrowsersIcons[selectedBrowser.displayName?.toLowerCase()] || allBrowsersIcons.generic"
             v-if="selectedBrowser.displayName"
             class="min-w-[16px] w-[16px]"
             alt=""
-            :src="allBrowsersIcons[selectedBrowser.displayName] || allBrowsersIcons.generic"
-          > {{ selectedBrowser.displayName }} {{ selectedBrowser.majorVersion }}
+          /> {{ selectedBrowser.displayName }} {{ selectedBrowser.majorVersion }}
         </template>
       </SpecRunnerDropdown>
       <SpecRunnerDropdown
diff --git a/packages/app/src/runner/automation/AutomationMissing.cy.tsx b/packages/app/src/runner/automation/AutomationMissing.cy.tsx
index f2677d527f17..0b25d8299b1c 100644
--- a/packages/app/src/runner/automation/AutomationMissing.cy.tsx
+++ b/packages/app/src/runner/automation/AutomationMissing.cy.tsx
@@ -1,6 +1,6 @@
-import { allBrowsersIcons } from '@packages/frontend-shared/src/assets/browserLogos'
 import { AutomationMissingFragmentDoc, VerticalBrowserListItems_SetBrowserDocument } from '../../generated/graphql-test'
 import AutomationMissing from './AutomationMissing.vue'
+import { cyGeneralGlobeX16 } from '@cypress-design/icon-registry'
 
 describe('AutomationMissing', () => {
   it('should render', () => {
@@ -50,7 +50,7 @@ describe('AutomationMissing', () => {
       },
     })
 
-    cy.get('[data-cy="select-browser"] > button img').should('have.attr', 'src', allBrowsersIcons.generic)
+    cy.get('[data-cy="select-browser"] > button svg').eq(0).children().verifyBrowserIconSvg(cyGeneralGlobeX16.data)
     cy.percySnapshot()
   })
 })
diff --git a/packages/app/src/runner/automation/AutomationMissing.vue b/packages/app/src/runner/automation/AutomationMissing.vue
index ed57e91d5d11..405669b4b6c4 100644
--- a/packages/app/src/runner/automation/AutomationMissing.vue
+++ b/packages/app/src/runner/automation/AutomationMissing.vue
@@ -19,10 +19,10 @@
           data-cy="select-browser"
         >
           <template #heading>
-            <img
+            <component
+              :is="allBrowsersIcons[selectedBrowser.displayName?.toLowerCase()] || allBrowsersIcons.generic"
               class="min-w-[16px] w-[16px]"
-              :src="allBrowsersIcons[selectedBrowser.displayName] || allBrowsersIcons.generic"
-            >
+            />
             {{ selectedBrowser.displayName }} {{ selectedBrowser.majorVersion }}
           </template>
 
diff --git a/packages/app/src/runs/RunCard.vue b/packages/app/src/runs/RunCard.vue
index a40a19a72a88..1dac4f95d8a6 100644
--- a/packages/app/src/runs/RunCard.vue
+++ b/packages/app/src/runs/RunCard.vue
@@ -122,7 +122,7 @@
             :aria-label="t(props.debugEnabled ? 'runs.card.debugDescription' : 'runs.card.noDebugAvailable', { runNumber: run.runNumber })"
             @click="onDebugClick"
           >
-            <IconTechnologyDebugger
+            <IconObjectBug
               aria-hidden="true"
               class="h-[16px] w-[16px] mr-2 shrink-0"
             />
@@ -155,7 +155,7 @@ import Tooltip from '@packages/frontend-shared/src/components/Tooltip.vue'
 import UserAvatar from '@cy/gql-components/topnav/UserAvatar.vue'
 import { RunCardFragment, RunCard_ChangeDocument, RunCard_ShowDebugForCloudRunDocument } from '../generated/graphql'
 import { useRunDateTimeInterval } from '../debug/useRunDateTimeInterval'
-import { IconTechnologyDebugger, IconTimeClock, IconTechnologyBranchH } from '@cypress-design/vue-icon'
+import { IconObjectBug, IconTimeClock, IconTechnologyBranchH } from '@cypress-design/vue-icon'
 import { getUrlWithParams } from '@packages/frontend-shared/src/utils/getUrlWithParams'
 
 const { t } = useI18n()
diff --git a/packages/app/src/specs/switcher/TestingTypeSwitcher.cy.tsx b/packages/app/src/specs/switcher/TestingTypeSwitcher.cy.tsx
index 87e871d9a203..4b8fbe2f5faa 100644
--- a/packages/app/src/specs/switcher/TestingTypeSwitcher.cy.tsx
+++ b/packages/app/src/specs/switcher/TestingTypeSwitcher.cy.tsx
@@ -37,7 +37,7 @@ describe('<TestingTypeSwitcher />', () => {
     />)
 
     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')
+    cy.findByTestId('testing-type-switch').contains('button', 'Component').should('have.attr', 'aria-selected', 'false')
   })
 
   it('selects current testing type when it is component', () => {
@@ -50,7 +50,7 @@ describe('<TestingTypeSwitcher />', () => {
       onSelectTestingType={stub}
     />)
 
-    cy.findByTestId('testing-type-switch').contains('button', 'E2E').should('not.have.attr', 'aria-selected')
+    cy.findByTestId('testing-type-switch').contains('button', 'E2E').should('have.attr', 'aria-selected', 'false')
     cy.findByTestId('testing-type-switch').contains('button', 'Component').should('have.attr', 'aria-selected', 'true')
   })
 })
diff --git a/packages/frontend-shared/cypress/support/browserIconCommands.ts b/packages/frontend-shared/cypress/support/browserIconCommands.ts
new file mode 100644
index 000000000000..3f189e362396
--- /dev/null
+++ b/packages/frontend-shared/cypress/support/browserIconCommands.ts
@@ -0,0 +1,41 @@
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      verifyBrowserIconSvg(
+        expectedSvgData: string
+      ): Chainable<JQuery<HTMLElement>>
+    }
+  }
+}
+
+function verifyBrowserIconSvg (
+  subject: JQuery<HTMLElement>,
+  expectedSvgData: string,
+) {
+  cy.then(() => {
+    let actualSvgData = ''
+
+    subject.each((_, el) => {
+      actualSvgData += el.outerHTML
+    })
+
+    const actualNormalizedSvgData = actualSvgData
+    .replaceAll('></path>', '/>')
+    .replaceAll('></circle>', '/>')
+    .replace(/<title>.*<\/title>/, '')
+
+    const expectedNormalizedSvgData = expectedSvgData.replace(/<defs>.*<\/defs>/, '')
+
+    expect(actualNormalizedSvgData).to.equal(expectedNormalizedSvgData)
+
+    return subject
+  })
+}
+
+Cypress.Commands.add(
+  'verifyBrowserIconSvg',
+  { prevSubject: true },
+  verifyBrowserIconSvg,
+)
+
+export {}
diff --git a/packages/frontend-shared/cypress/support/component.ts b/packages/frontend-shared/cypress/support/component.ts
index 0f802fec8231..1743aaeccbb8 100644
--- a/packages/frontend-shared/cypress/support/component.ts
+++ b/packages/frontend-shared/cypress/support/component.ts
@@ -3,6 +3,7 @@ import { registerMountFn, addVueCommand } from './common'
 import '../../src/styles/shared.scss'
 import 'tailwindcss/tailwind.css'
 import 'cypress-real-events/support'
+import './browserIconCommands'
 import { installCustomPercyCommand } from './customPercyCommand'
 import { addNetworkCommands } from './onlineNetwork'
 import { GQLStubRegistry } from './mock-graphql/stubgql-Registry'
diff --git a/packages/frontend-shared/cypress/support/e2e.ts b/packages/frontend-shared/cypress/support/e2e.ts
index 260661b4e90d..2b365631743c 100644
--- a/packages/frontend-shared/cypress/support/e2e.ts
+++ b/packages/frontend-shared/cypress/support/e2e.ts
@@ -19,6 +19,7 @@ import i18n from '../../src/locales/en-US.json'
 import { addNetworkCommands } from './onlineNetwork'
 import { logInternal } from './utils'
 import { tabUntil } from './tab-until'
+import './browserIconCommands'
 
 configure({ testIdAttribute: 'data-cy' })
 
diff --git a/packages/frontend-shared/package.json b/packages/frontend-shared/package.json
index cb688dca6793..52d2fd107a02 100644
--- a/packages/frontend-shared/package.json
+++ b/packages/frontend-shared/package.json
@@ -22,7 +22,7 @@
   },
   "devDependencies": {
     "@antfu/utils": "^0.7.8",
-    "@cypress-design/css": "^0.13.3",
+    "@cypress-design/css": "^1.0.0",
     "@faker-js/faker": "8.4.1",
     "@graphql-typed-document-node/core": "^3.1.0",
     "@headlessui/vue": "1.4.0",
@@ -45,7 +45,6 @@
     "@vueuse/core": "7.2.2",
     "autoprefixer": "^10.4.19",
     "axe-core": "4.4.1",
-    "browser-logos": "github:alrra/browser-logos",
     "combine-properties": "0.1.0",
     "cross-env": "6.0.3",
     "cypress-plugin-tab": "1.0.5",
diff --git a/packages/frontend-shared/src/assets/browserLogos.ts b/packages/frontend-shared/src/assets/browserLogos.ts
index fb1317acd30e..c065747088a8 100644
--- a/packages/frontend-shared/src/assets/browserLogos.ts
+++ b/packages/frontend-shared/src/assets/browserLogos.ts
@@ -1,33 +1,38 @@
-import chromeIcon from 'browser-logos/src/chrome/chrome.svg?url'
-import firefoxIcon from 'browser-logos/src/firefox/firefox.svg?url'
-import edgeIcon from 'browser-logos/src/edge/edge.svg?url'
-import electronIcon from 'browser-logos/src/electron/electron.svg?url'
-import canaryIcon from 'browser-logos/src/chrome-canary/chrome-canary.svg?url'
-import chromeBetaIcon from 'browser-logos/src/chrome-beta/chrome-beta.svg?url'
-import chromeTestIcon from '@packages/frontend-shared/src/assets/logos/browser-chrome-for-testing_x16.svg?url'
-import chromiumIcon from 'browser-logos/src/chromium/chromium.svg?url'
-import edgeBetaIcon from 'browser-logos/src/edge-beta/edge-beta.png'
-import edgeCanaryIcon from 'browser-logos/src/edge-canary/edge-canary.png'
-import edgeDevIcon from 'browser-logos/src/edge-dev/edge-dev.png'
-import firefoxNightlyIcon from 'browser-logos/src/firefox-nightly/firefox-nightly.svg?url'
-import firefoxDeveloperEditionIcon from 'browser-logos/src/firefox-developer-edition/firefox-developer-edition.svg?url'
-import webKitIcon from 'browser-logos/src/webkit/webkit.svg?url'
-import genericBrowserLogo from '@packages/frontend-shared/src/assets/logos/generic-browser.svg?url'
+import {
+  IconBrowserElectronLight,
+  IconBrowserChrome,
+  IconBrowserChromeBeta,
+  IconBrowserChromeCanary,
+  IconBrowserChromeForTesting,
+  IconBrowserMozillaFirefox,
+  IconBrowserEdge,
+  IconBrowserChromium,
+  IconBrowserFirefoxNightly,
+  IconBrowserFirefoxDev,
+  IconBrowserEdgeCanary,
+  IconBrowserEdgeBeta,
+  IconBrowserEdgeDev,
+  IconBrowserWebkit,
+  IconGeneralGlobe,
+} from '@cypress-design/vue-icon'
 
 export const allBrowsersIcons = {
-  'Electron': electronIcon,
-  'Chrome': chromeIcon,
-  'Chrome Beta': chromeBetaIcon,
-  'Chrome Canary': canaryIcon,
-  'Chrome for Testing': chromeTestIcon,
-  'Firefox': firefoxIcon,
-  'Edge': edgeIcon,
-  'Chromium': chromiumIcon,
-  'Firefox Nightly': firefoxNightlyIcon,
-  'Firefox Developer Edition': firefoxDeveloperEditionIcon,
-  'Edge Canary': edgeCanaryIcon,
-  'Edge Beta': edgeBetaIcon,
-  'Edge Dev': edgeDevIcon,
-  'WebKit': webKitIcon,
-  'generic': genericBrowserLogo,
+  'electron': IconBrowserElectronLight,
+  'chrome': IconBrowserChrome,
+  'chrome beta': IconBrowserChromeBeta,
+  'canary': IconBrowserChromeCanary,
+  'chrome canary': IconBrowserChromeCanary,
+  'chrome for testing': IconBrowserChromeForTesting,
+  'custom chrome for testing': IconBrowserChromeForTesting,
+  'chromium': IconBrowserChromium,
+  'custom chromium': IconBrowserChromium,
+  'firefox': IconBrowserMozillaFirefox,
+  'firefox nightly': IconBrowserFirefoxNightly,
+  'firefox developer edition': IconBrowserFirefoxDev,
+  'edge': IconBrowserEdge,
+  'edge beta': IconBrowserEdgeBeta,
+  'edge canary': IconBrowserEdgeCanary,
+  'edge dev': IconBrowserEdgeDev,
+  'webkit': IconBrowserWebkit,
+  'generic': IconGeneralGlobe,
 }
diff --git a/packages/frontend-shared/src/assets/logos/browser-chrome-for-testing_x16.svg b/packages/frontend-shared/src/assets/logos/browser-chrome-for-testing_x16.svg
deleted file mode 100644
index 0426ce0ae6e0..000000000000
--- a/packages/frontend-shared/src/assets/logos/browser-chrome-for-testing_x16.svg
+++ /dev/null
@@ -1,33 +0,0 @@
-<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <g clip-path="url(#clip0_18975_81476)">
-    <path
-      d="M0 8C0 12.4183 3.58172 16 8 16L11.4648 10.0001C10.7732 11.1957 9.48052 12 8 12C6.51727 12 5.22296 11.1932 4.53209 9.99474L1.07026 4C1.03455 4.06173 0.999647 4.12397 0.965557 4.18673C0.349778 5.32027 0 6.61929 0 8Z"
-      fill="#0F9D58" />
-    <path
-      d="M8 16C12.4183 16 16 12.4183 16 8C16 6.54285 15.6104 5.17669 14.9297 4H8C10.2091 4 12 5.79086 12 8C12 8.72651 11.8065 9.40753 11.4679 9.99474L11.4648 10.0001L8 16Z"
-      fill="#FFCD40" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
-      d="M1.07026 4C2.4535 1.60879 5.03887 0 8 0C10.9611 0 13.5465 1.60879 14.9297 4H8C5.79086 4 4 5.79086 4 8C4 8.72641 4.19363 9.40758 4.53209 9.99474L1.07026 4Z"
-      fill="#DB4437" />
-    <circle cx="8.00006" cy="8" r="4" fill="white" />
-    <circle cx="7.99999" cy="8.00005" r="3.2" fill="#4285F4" />
-    <path d="M13.9773 13.3182L16 12.4545H14.1591L13.9773 13.3182Z" fill="#202124" />
-    <path d="M6 7.5H16V12.4545H6V7.5Z" fill="#3D4043" />
-    <path d="M7.08691 9.07996V8.60744H9.31321V9.07996H8.48331V11.3182H7.91681V9.07996H7.08691Z"
-      fill="white" />
-    <path
-      d="M10.2637 11.3579C10.0545 11.3579 9.87454 11.3155 9.72365 11.2308C9.57364 11.1452 9.45804 11.0243 9.37686 10.8682C9.29568 10.7111 9.25509 10.5253 9.25509 10.3109C9.25509 10.1018 9.29568 9.91825 9.37686 9.7603C9.45804 9.60235 9.57231 9.47925 9.71968 9.39101C9.86792 9.30277 10.0418 9.25865 10.2412 9.25865C10.3753 9.25865 10.5002 9.28027 10.6158 9.32351C10.7322 9.36586 10.8337 9.42984 10.9202 9.51543C11.0075 9.60102 11.0755 9.70868 11.124 9.83839C11.1726 9.96722 11.1968 10.1181 11.1968 10.2911V10.4459H9.4801V10.0965H10.6661C10.6661 10.0153 10.6484 9.9434 10.6131 9.88074C10.5778 9.81809 10.5288 9.76912 10.4662 9.73382C10.4044 9.69765 10.3325 9.67956 10.2504 9.67956C10.1648 9.67956 10.089 9.69941 10.0228 9.73912C9.95748 9.77795 9.9063 9.83045 9.86924 9.89663C9.83218 9.96193 9.81321 10.0347 9.81233 10.115V10.4472C9.81233 10.5478 9.83086 10.6348 9.86792 10.708C9.90586 10.7812 9.95925 10.8377 10.0281 10.8774C10.0969 10.9171 10.1785 10.937 10.2729 10.937C10.3356 10.937 10.393 10.9282 10.445 10.9105C10.4971 10.8929 10.5416 10.8664 10.5787 10.8311C10.6158 10.7958 10.644 10.7526 10.6634 10.7014L11.1849 10.7358C11.1584 10.8611 11.1042 10.9705 11.0221 11.064C10.9409 11.1567 10.8359 11.2291 10.7071 11.2811C10.5791 11.3323 10.4313 11.3579 10.2637 11.3579Z"
-      fill="white" />
-    <path
-      d="M13.2191 9.86486L12.7029 9.89663C12.694 9.85251 12.6751 9.8128 12.646 9.7775C12.6168 9.74133 12.5785 9.71265 12.5308 9.69147C12.484 9.66941 12.428 9.65838 12.3627 9.65838C12.2753 9.65838 12.2017 9.67691 12.1417 9.71397C12.0817 9.75015 12.0517 9.79868 12.0517 9.85957C12.0517 9.9081 12.0711 9.94913 12.1099 9.98266C12.1487 10.0162 12.2153 10.0431 12.3098 10.0634L12.6777 10.1375C12.8754 10.1781 13.0227 10.2434 13.1198 10.3334C13.2169 10.4234 13.2654 10.5417 13.2654 10.6881C13.2654 10.8214 13.2261 10.9383 13.1476 11.0389C13.07 11.1395 12.9632 11.218 12.8273 11.2745C12.6923 11.3301 12.5365 11.3579 12.3601 11.3579C12.0909 11.3579 11.8765 11.3019 11.7168 11.1898C11.558 11.0768 11.4649 10.9233 11.4375 10.7292L11.9921 10.7001C12.0089 10.7821 12.0495 10.8448 12.1139 10.888C12.1783 10.9304 12.2608 10.9515 12.3614 10.9515C12.4602 10.9515 12.5396 10.9326 12.5996 10.8946C12.6605 10.8558 12.6914 10.8059 12.6923 10.7451C12.6914 10.6939 12.6698 10.652 12.6274 10.6193C12.5851 10.5858 12.5198 10.5602 12.4315 10.5425L12.0795 10.4724C11.8809 10.4327 11.7331 10.3639 11.636 10.2659C11.5399 10.168 11.4918 10.0431 11.4918 9.89133C11.4918 9.76074 11.5271 9.64823 11.5977 9.55381C11.6691 9.4594 11.7693 9.3866 11.8981 9.33542C12.0278 9.28424 12.1796 9.25865 12.3534 9.25865C12.6102 9.25865 12.8123 9.31292 12.9597 9.42145C13.1079 9.52999 13.1944 9.67779 13.2191 9.86486Z"
-      fill="white" />
-    <path
-      d="M14.6646 9.28512V9.70868H13.4402V9.28512H14.6646ZM13.7182 8.79804H14.2821V10.6934C14.2821 10.7455 14.29 10.7861 14.3059 10.8152C14.3218 10.8434 14.3438 10.8633 14.3721 10.8748C14.4012 10.8862 14.4347 10.892 14.4727 10.892C14.4991 10.892 14.5256 10.8898 14.5521 10.8854C14.5785 10.8801 14.5988 10.8761 14.613 10.8734L14.7016 11.293C14.6734 11.3019 14.6337 11.312 14.5825 11.3235C14.5313 11.3358 14.4691 11.3433 14.3959 11.346C14.26 11.3513 14.1409 11.3332 14.0385 11.2917C13.937 11.2502 13.8581 11.1858 13.8016 11.0985C13.7451 11.0111 13.7173 10.9008 13.7182 10.7676V8.79804Z"
-      fill="white" />
-  </g>
-  <defs>
-    <clipPath id="clip0_18975_81476">
-      <rect width="16" height="16" fill="white" />
-    </clipPath>
-  </defs>
-</svg>
diff --git a/packages/frontend-shared/src/assets/logos/generic-browser.svg b/packages/frontend-shared/src/assets/logos/generic-browser.svg
deleted file mode 100644
index b6e93b0d0677..000000000000
--- a/packages/frontend-shared/src/assets/logos/generic-browser.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M31 24H43C43 19.0238 41.087 14.4944 37.9563 11.1071C35.7695 12.2278 32.9887 13.0846 29.8508 13.5652C30.5773 16.5601 31 20.1461 31 24Z" fill="#D0D2E0"/>
-<path d="M29.8508 13.5652C32.9887 13.0846 35.7695 12.2278 37.9563 11.1071C34.4852 7.35159 29.5172 5 24 5C26.4461 5 28.5992 8.40558 29.8508 13.5652Z" fill="#D0D2E0"/>
-<path d="M24 5C21.5539 5 19.4008 8.40558 18.1492 13.5652C19.9923 13.8475 21.9585 14 24 14C26.0415 14 28.0077 13.8475 29.8508 13.5652C28.5992 8.40558 26.4461 5 24 5Z" fill="#D0D2E0"/>
-<path d="M17 24H31C31 20.1461 30.5773 16.5601 29.8508 13.5652C28.0077 13.8475 26.0415 14 24 14C21.9585 14 19.9923 13.8475 18.1492 13.5652C17.4227 16.5601 17 20.1461 17 24Z" fill="#D0D2E0"/>
-<path d="M5 24H17C17 20.1461 17.4227 16.5601 18.1492 13.5652C15.0113 13.0846 12.2305 12.2278 10.0437 11.1071C6.91301 14.4944 5 19.0238 5 24Z" fill="#D0D2E0"/>
-<path d="M18.1492 13.5652C19.4008 8.40558 21.5539 5 24 5C18.4828 5 13.5148 7.35159 10.0437 11.1071C12.2305 12.2278 15.0113 13.0846 18.1492 13.5652Z" fill="#D0D2E0"/>
-<path d="M18.1492 34.4348C15.0113 34.9154 12.2305 35.7722 10.0437 36.8929C13.5148 40.6484 18.4828 43 24 43C21.5539 43 19.4008 39.5944 18.1492 34.4348Z" fill="#D0D2E0"/>
-<path d="M17 24H5C5 28.9762 6.91301 33.5056 10.0437 36.8929C12.2305 35.7722 15.0113 34.9154 18.1492 34.4348C17.4227 31.4398 17 27.8539 17 24Z" fill="#D0D2E0"/>
-<path d="M31 24H17C17 27.8539 17.4227 31.4398 18.1492 34.4348C19.9923 34.1525 21.9585 34 24 34C26.0415 34 28.0077 34.1525 29.8508 34.4348C30.5773 31.4398 31 27.8539 31 24Z" fill="#D0D2E0"/>
-<path d="M18.1492 34.4348C19.4008 39.5944 21.5539 43 24 43C26.4461 43 28.5992 39.5944 29.8508 34.4348C28.0077 34.1525 26.0415 34 24 34C21.9585 34 19.9923 34.1525 18.1492 34.4348Z" fill="#D0D2E0"/>
-<path d="M24 43C29.5172 43 34.4852 40.6484 37.9563 36.8929C35.7695 35.7722 32.9887 34.9154 29.8508 34.4348C28.5992 39.5944 26.4461 43 24 43Z" fill="#D0D2E0"/>
-<path d="M43 24H31C31 27.8539 30.5773 31.4398 29.8508 34.4348C32.9887 34.9154 35.7695 35.7722 37.9563 36.8929C41.087 33.5056 43 28.9762 43 24Z" fill="#D0D2E0"/>
-<path d="M24 14V15V14ZM24 34V33V34ZM43 23H5V25H43V23ZM31 25H43V23H31V25ZM44 24C44 18.7624 41.9854 13.9931 38.6906 10.4284L37.2219 11.7859C40.1886 14.9957 42 19.2852 42 24H44ZM37.5002 10.2172C35.4287 11.2789 32.7553 12.1087 29.6994 12.5767L30.0022 14.5537C33.2221 14.0605 36.1104 13.1768 38.4124 11.9971L37.5002 10.2172ZM28.879 13.8009C29.5845 16.7094 30 20.2153 30 24H32C32 20.0768 31.5701 16.4109 30.8226 13.3295L28.879 13.8009ZM24 6C24.7229 6 25.6102 6.50993 26.542 7.90357C27.4537 9.26706 28.2687 11.2851 28.879 13.8009L30.8226 13.3295C30.1813 10.6857 29.294 8.42112 28.2046 6.79192C27.1355 5.19286 25.7232 4 24 4V6ZM29.6994 12.5767C27.9077 12.8511 25.9921 13 24 13V15C26.0908 15 28.1077 14.8438 30.0022 14.5537L29.6994 12.5767ZM24 6C29.2268 6 33.9322 8.22655 37.2219 11.7859L38.6906 10.4284C35.0382 6.47664 29.8076 4 24 4V6ZM24 4C22.2768 4 20.8645 5.19286 19.7954 6.79192C18.706 8.42112 17.8187 10.6857 17.1774 13.3295L19.121 13.8009C19.7313 11.2851 20.5463 9.26706 21.458 7.90357C22.3898 6.50993 23.2771 6 24 6V4ZM17.9978 14.5537C19.8923 14.8438 21.9092 15 24 15V13C22.0079 13 20.0923 12.8511 18.3006 12.5767L17.9978 14.5537ZM18 24C18 20.2153 18.4155 16.7094 19.121 13.8009L17.1774 13.3295C16.4299 16.4109 16 20.0768 16 24H18ZM17 25H31V23H17V25ZM5 25H17V23H5V25ZM18.3006 12.5767C15.2447 12.1087 12.5713 11.2789 10.4998 10.2172L9.58763 11.9971C11.8896 13.1768 14.7779 14.0605 17.9978 14.5537L18.3006 12.5767ZM9.30935 10.4284C6.0146 13.9931 4 18.7624 4 24H6C6 19.2852 7.81142 14.9957 10.7781 11.7859L9.30935 10.4284ZM10.7781 11.7859C14.0678 8.22655 18.7732 6 24 6V4C18.1924 4 12.9618 6.47664 9.30935 10.4284L10.7781 11.7859ZM4 24C4 29.2376 6.0146 34.0068 9.30935 37.5716L10.7781 36.2141C7.81142 33.0043 6 28.7148 6 24H4ZM10.4998 37.7828C12.5713 36.7211 15.2447 35.8913 18.3006 35.4233L17.9978 33.4463C14.7779 33.9395 11.8896 34.8232 9.58763 36.0029L10.4998 37.7828ZM19.121 34.1991C18.4155 31.2906 18 27.7847 18 24H16C16 27.9232 16.4299 31.5891 17.1774 34.6705L19.121 34.1991ZM24 42C23.2771 42 22.3898 41.4901 21.458 40.0964C20.5463 38.7329 19.7313 36.7149 19.121 34.199L17.1774 34.6705C17.8187 37.3143 18.706 39.5789 19.7954 41.2081C20.8645 42.8071 22.2768 44 24 44V42ZM18.3006 35.4233C20.0923 35.1489 22.0079 35 24 35V33C21.9092 33 19.8923 33.1562 17.9978 33.4463L18.3006 35.4233ZM24 42C18.7732 42 14.0678 39.7735 10.7781 36.2141L9.30935 37.5716C12.9618 41.5234 18.1924 44 24 44V42ZM24 35C25.9921 35 27.9077 35.1489 29.6994 35.4233L30.0022 33.4463C28.1077 33.1562 26.0908 33 24 33V35ZM30.8226 34.6705C31.57 31.5891 32 27.9232 32 24H30C30 27.7847 29.5845 31.2906 28.879 34.1991L30.8226 34.6705ZM28.879 34.1991C28.2687 36.7149 27.4537 38.7329 26.542 40.0964C25.6102 41.4901 24.7229 42 24 42V44C25.7232 44 27.1355 42.8071 28.2046 41.2081C29.294 39.5789 30.1813 37.3143 30.8226 34.6705L28.879 34.1991ZM24 44C29.8076 44 35.0382 41.5234 38.6906 37.5716L37.2219 36.2141C33.9322 39.7735 29.2268 42 24 42V44ZM38.4124 36.0029C36.1104 34.8232 33.2221 33.9395 30.0022 33.4463L29.6994 35.4233C32.7553 35.8913 35.4287 36.7211 37.5002 37.7828L38.4124 36.0029ZM42 24C42 28.7148 40.1886 33.0043 37.2219 36.2141L38.6906 37.5716C41.9854 34.0068 44 29.2376 44 24H42Z" fill="#AFB3C7"/>
-</svg>
diff --git a/packages/frontend-shared/src/gql-components/topnav/TopNav.vue b/packages/frontend-shared/src/gql-components/topnav/TopNav.vue
index 69926fa2db53..f83d9f43ce80 100644
--- a/packages/frontend-shared/src/gql-components/topnav/TopNav.vue
+++ b/packages/frontend-shared/src/gql-components/topnav/TopNav.vue
@@ -105,14 +105,14 @@
     v-if="props.gql?.currentProject?.activeBrowser && showBrowsers"
   >
     <template #heading="{ open }">
-      <img
+      <component
+        :is="allBrowsersIcons[props.gql.currentProject.activeBrowser.displayName?.toLowerCase()] || allBrowsersIcons.generic"
         v-if="props.gql?.currentProject?.activeBrowser?.displayName"
         class="w-[16px] filter group-hocus:grayscale-0"
         data-cy="top-nav-active-browser-icon"
         :alt="props.gql?.currentProject?.activeBrowser?.displayName"
         :class="open ? 'grayscale-0' : 'grayscale'"
-        :src="allBrowsersIcons[props.gql.currentProject.activeBrowser.displayName] || allBrowsersIcons.generic"
-      >
+      />
       <span
         data-cy="top-nav-active-browser"
         class="font-medium whitespace-nowrap"
diff --git a/packages/frontend-shared/src/gql-components/topnav/TopNavList.vue b/packages/frontend-shared/src/gql-components/topnav/TopNavList.vue
index 22922aadf282..dc6c4835415d 100644
--- a/packages/frontend-shared/src/gql-components/topnav/TopNavList.vue
+++ b/packages/frontend-shared/src/gql-components/topnav/TopNavList.vue
@@ -23,10 +23,12 @@
       </div>
     </PopoverButton>
     <TransitionQuickFade>
+      <!-- instead of using 'hidden' class, we use 'invisible' due to -->
+      <!-- https://github.com/cypress-io/cypress-design/issues/517 -->
       <PopoverPanel
         static
         class="bg-white rounded shadow-dropdown top-[36px] right-0 z-10 absolute"
-        :class="(forceOpenState === true) || open ? '' : 'hidden'"
+        :class="(forceOpenState === true) || open ? '' : 'invisible'"
       >
         <ul
           v-if="variant !== 'panel'"
diff --git a/packages/frontend-shared/src/gql-components/topnav/VerticalBrowserListItems.vue b/packages/frontend-shared/src/gql-components/topnav/VerticalBrowserListItems.vue
index 96bb32b445d9..2fcbece2ba24 100644
--- a/packages/frontend-shared/src/gql-components/topnav/VerticalBrowserListItems.vue
+++ b/packages/frontend-shared/src/gql-components/topnav/VerticalBrowserListItems.vue
@@ -15,12 +15,12 @@
       :data-browser-id="browser.id"
       @click="handleBrowserChoice(browser)"
     >
-      <img
-        class="mr-[16px] min-w-[26px] w-[26px]"
+      <component
+        :is="allBrowsersIcons[browser.displayName?.toLowerCase()] || allBrowsersIcons.generic"
+        class="mr-[16px] min-w-[26px] w-[26px] min-h-[45px]"
         :class="{ 'filter grayscale': browser.disabled || !browser.isVersionSupported }"
-        :src="allBrowsersIcons[browser.displayName] || allBrowsersIcons.generic"
         alt=""
-      >
+      />
       <div class="grow">
         <div>
           <button
diff --git a/packages/launchpad/package.json b/packages/launchpad/package.json
index f0fa325261c6..b50a7c4a29e2 100644
--- a/packages/launchpad/package.json
+++ b/packages/launchpad/package.json
@@ -20,7 +20,7 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@cypress-design/vue-button": "^0.11.6",
+    "@cypress-design/vue-button": "^1.1.0",
     "@graphql-typed-document-node/core": "^3.1.0",
     "@headlessui/vue": "1.4.0",
     "@intlify/unplugin-vue-i18n": "4.0.0",
diff --git a/packages/launchpad/src/setup/OpenBrowserList.cy.tsx b/packages/launchpad/src/setup/OpenBrowserList.cy.tsx
index 864b62b5be1a..aa48e3221673 100644
--- a/packages/launchpad/src/setup/OpenBrowserList.cy.tsx
+++ b/packages/launchpad/src/setup/OpenBrowserList.cy.tsx
@@ -2,6 +2,7 @@ import { OpenBrowserListFragmentDoc } from '../generated/graphql-test'
 import OpenBrowserList from './OpenBrowserList.vue'
 import { longBrowsersList } from '@packages/frontend-shared/cypress/support/mock-graphql/longBrowsersList'
 import { defaultMessages } from '@cy/i18n'
+import { cyGeneralGlobeX16 } from '@cypress-design/icon-registry'
 
 // Testing Note: because state for this component is maintained on the server and updated via gql mutations,
 // this component test can't do interactions that change the chosen browser at the moment. Interactions and states
@@ -31,7 +32,7 @@ describe('<OpenBrowserList />', () => {
 
     // Renders a default logo if we don't provide one
     cy.get('[data-cy-browser="fake"]').should('have.attr', 'aria-disabled', 'true')
-    cy.get('[data-cy-browser="fake"] img').should('have.attr', 'src').should('include', 'generic-browser')
+    cy.get('[data-cy-browser="fake"] svg').eq(0).children().verifyBrowserIconSvg(cyGeneralGlobeX16.data)
 
     cy.percySnapshot()
   })
diff --git a/packages/launchpad/src/setup/OpenBrowserList.vue b/packages/launchpad/src/setup/OpenBrowserList.vue
index 50b5fde2f8af..75ffd2fc1028 100644
--- a/packages/launchpad/src/setup/OpenBrowserList.vue
+++ b/packages/launchpad/src/setup/OpenBrowserList.vue
@@ -48,12 +48,12 @@
             </template>
           </Tooltip>
           <div class="text-center">
-            <img
-              :src="allBrowsersIcons[browser.displayName] || allBrowsersIcons.generic"
+            <component
+              :is="allBrowsersIcons[browser.displayName?.toLowerCase()] || allBrowsersIcons.generic"
               alt=""
               class="h-[40px] w-[40px] inline"
               :class="{ 'filter grayscale': browser.disabled || !browser.isVersionSupported }"
-            >
+            />
           </div>
           <div
             class="font-medium pt-2 px-2 text-[18px] leading-[28px] truncate"
diff --git a/yarn.lock b/yarn.lock
index 6f4f2d037e02..0f97dee55866 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2654,103 +2654,74 @@
   dependencies:
     "@jridgewell/trace-mapping" "0.3.9"
 
-"@cypress-design/constants-button@^0.1.3":
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/@cypress-design/constants-button/-/constants-button-0.1.3.tgz#6a3e14bbd0cf6d6c51763f3cc3b286dadc407a77"
-  integrity sha512-0ZBn1DvctrlypkXmclp9L8jwtaXKKBs2goPh43TgYoDNcX/IrNnmn1K/ivRcEN3Zq00qlz7Jgwv7fIxD/w8beg==
-
-"@cypress-design/constants-statusicon@^0.2.0":
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/@cypress-design/constants-statusicon/-/constants-statusicon-0.2.0.tgz#0e47048aafe72b2ac3476c7830776a9704e639f9"
-  integrity sha512-378jTLAxmUhfwCo0eVP3TscZAgwww2xG2AGQ1xaxDyQ77xq4h9tmoVtxEdEaWbe6vh+C6VSkF7o8naxW6go8UA==
-
-"@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@^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==
+"@cypress-design/color-constants@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@cypress-design/color-constants/-/color-constants-1.0.0.tgz#a8373c5eeeefc9b2040710b9159c96e6e2ac09b3"
+  integrity sha512-ZGSfWR5zSQQkc6+k0xiRiuCdxUzoPYOwdIOHIK6M0PqhPg3rmP455M752U082jbIsQvoea4k9CNE053oOna4Zw==
   dependencies:
-    "@windicss/plugin-interaction-variants" "^1.0.0"
+    "@tailwindcss/container-queries" "^0.1.1"
     lodash "^4.17.21"
     resolve-pkg "^2.0.0"
-    tailwindcss "^3.3.2"
+    tailwindcss "^3.4.3"
+    tailwindcss-hocus "^0.0.7"
+
+"@cypress-design/constants-statusicon@^1.0.0":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@cypress-design/constants-statusicon/-/constants-statusicon-1.0.1.tgz#d7398d2cdb4d9a640876f631eb2cc0d851d5f385"
+  integrity sha512-jAg9vttHAVGu3dydZpUkE/mUg0I7fqp2hKNVJeTCI0bKKSnO7XAlEb+JTO8Ffwup6YIR6hTp0DOF0xRs6nAIJg==
 
-"@cypress-design/css@^0.15.1":
-  version "0.15.1"
-  resolved "https://registry.yarnpkg.com/@cypress-design/css/-/css-0.15.1.tgz#602da84aacb11a576b82494234e97396815a7822"
-  integrity sha512-pM6W6+KK3KIQxPSNJtXyykJFEhkKVrFxpbRKpv7FKlcgHSXZ40MRsOym+U0/iSs39w3KJ3nrvz8uHdQmpfoemw==
+"@cypress-design/constants-tabs@^1.2.1":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@cypress-design/constants-tabs/-/constants-tabs-1.2.2.tgz#23414105e4eba00600090f68ecd9235ca3b30597"
+  integrity sha512-mbcTV3Dvpnsx/X3wCnmawLUGE7sb1Z4HTF+TeEPnlSPzyboyW6IJvAtEIYUU8j+0ahffDFXayjCd/6U2dEpwkA==
   dependencies:
-    "@windicss/plugin-interaction-variants" "^1.0.0"
-    lodash "^4.17.21"
-    resolve-pkg "^2.0.0"
-    tailwindcss "^3.3.3"
+    "@cypress-design/icon-registry" "^1.5.1"
 
-"@cypress-design/css@^0.17.1":
-  version "0.17.1"
-  resolved "https://registry.yarnpkg.com/@cypress-design/css/-/css-0.17.1.tgz#ff1863d2bce196394f55e6da6077e595b3e5ebfb"
-  integrity sha512-eQlCwbifrTTU8qApJv+c4rS5u1sI06yaGZAYeA4J47mOe3Goxadq7P3lVVW0n3WZrcHEZvkAh5qj0AN2Hpsakg==
+"@cypress-design/css@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@cypress-design/css/-/css-1.0.0.tgz#65c48ee7c7f62446e239f3590016e8817d09b816"
+  integrity sha512-FtKERQybOTBd+2USvTKQVZYnXE9EF2y8hLCslm2iNyb1TbcKU4fLc3aeSTEFKupDsZxCCYDDQJHSYxjWjgYiTg==
   dependencies:
     "@tailwindcss/container-queries" "^0.1.1"
     lodash "^4.17.21"
     resolve-pkg "^2.0.0"
-    tailwindcss "^3.4.1"
+    tailwindcss "^3.4.3"
+    tailwindcss-hocus "^0.0.7"
 
-"@cypress-design/icon-registry@*", "@cypress-design/icon-registry@^0.34.0":
-  version "0.34.0"
-  resolved "https://registry.yarnpkg.com/@cypress-design/icon-registry/-/icon-registry-0.34.0.tgz#773543dcc89bae562c6c0a59dac46e750dfe4ea0"
-  integrity sha512-X8zW6/WipS3XFn+XbVG+kDEvTxHKngNVE+b5l+wYUxxDnabxvgaTPNmJSwmm3ya/Va5oU0hdL4llUop36BQM4Q==
-  dependencies:
-    "@cypress-design/css" "^0.17.1"
-
-"@cypress-design/icon-registry@^0.28.0":
-  version "0.28.0"
-  resolved "https://registry.yarnpkg.com/@cypress-design/icon-registry/-/icon-registry-0.28.0.tgz#a3c5336f7b544d8be82b6a941b8915ba7084d5c9"
-  integrity sha512-xJvE1u3KBQz6Hc0Ea3ia9xUDKxTj5MdKrgYrlE9t321qKxStxVN34VB595TfWzluHZzUb6Qu7QqgqdCTFTccgw==
-  dependencies:
-    "@cypress-design/css" "^0.15.1"
-
-"@cypress-design/vue-button@^0.11.6":
-  version "0.11.6"
-  resolved "https://registry.yarnpkg.com/@cypress-design/vue-button/-/vue-button-0.11.6.tgz#57f6a9f03034e1c84f311a1fef2ecb5cf3f50c80"
-  integrity sha512-tERjqnX07SV9haaq83eOJ35wJ9bW8c1xv6arVxT+mJIPqDAMeob60uUrXDY3m7xRTKNr7PjP1/gcKuuPELR/NQ==
+"@cypress-design/icon-registry@^1.0.0", "@cypress-design/icon-registry@^1.5.1", "@cypress-design/icon-registry@^1.6.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@cypress-design/icon-registry/-/icon-registry-1.6.0.tgz#6367e40722cbf191a0086419ba06de18e7e79f46"
+  integrity sha512-erJVhL+0gk2oL+fCnBy3hhcs7xFM1abPLZzmIupOtoyb/PB5DtpHtGi3QEF2MBu1UcMjRhuihF6VO3rqZhkn2Q==
   dependencies:
-    "@cypress-design/constants-button" "^0.1.3"
+    "@cypress-design/color-constants" "^1.0.0"
 
-"@cypress-design/vue-icon@^0.26.0":
-  version "0.26.0"
-  resolved "https://registry.yarnpkg.com/@cypress-design/vue-icon/-/vue-icon-0.26.0.tgz#f56bee36514dc4f9b9606a75f69201e312ff9c70"
-  integrity sha512-ZiMpIvjNWX/x6OJDyhb9VrXXlwPQTgSx87PA4VMVC9JVARXja4UZ950KVTZVEdDuCG8MGYu3N4/hWOrNxCKXCQ==
-  dependencies:
-    "@cypress-design/icon-registry" "^0.28.0"
+"@cypress-design/vue-button@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@cypress-design/vue-button/-/vue-button-1.1.0.tgz#447cfee08c15186f6ba04928bbc14d4e95639de7"
+  integrity sha512-SLgYtpjsT8SgzbxpK/Me2aSFCRiB0K/K8WeDHw9kcpDR9St4rEmRUYNcKBCPL0knanOZEOspEmaGzyWcfsLDpQ==
 
-"@cypress-design/vue-icon@^0.32.0":
-  version "0.32.0"
-  resolved "https://registry.yarnpkg.com/@cypress-design/vue-icon/-/vue-icon-0.32.0.tgz#b5b82a7b22682364584f73fe37901951eccc19cd"
-  integrity sha512-QCgagN1FVnUJ3dLxRI0xQLjL5eSkN6xOqAyoNv65IgCGYi0BXLblaQeOKG56H1CRPgBYo2TwpI+RkJeX6yYztw==
+"@cypress-design/vue-icon@^1.0.0", "@cypress-design/vue-icon@^1.6.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@cypress-design/vue-icon/-/vue-icon-1.6.0.tgz#d67e6cf241363f648896717efc456da28590cd0f"
+  integrity sha512-XQjGWTw31ENMh0npWynR71F56zzqgPrryjUFi2b7lremzHzwHV8KaonKNVVSzbJnDOyI50VCns70Rhd8yS6VNw==
   dependencies:
-    "@cypress-design/icon-registry" "^0.34.0"
+    "@cypress-design/icon-registry" "^1.6.0"
 
-"@cypress-design/vue-statusicon@^0.5.7":
-  version "0.5.7"
-  resolved "https://registry.yarnpkg.com/@cypress-design/vue-statusicon/-/vue-statusicon-0.5.7.tgz#778da6d078e3f55934da99c81218bbe1a29e83cb"
-  integrity sha512-VIsDRrARt6q2DOHAAG1eTX7Nf8Dg+CpIz3TOxmIMNNY0AuqPClmAuxz3SG9i6BrMLfmpdraKIPEItVAfbKQmWA==
+"@cypress-design/vue-statusicon@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@cypress-design/vue-statusicon/-/vue-statusicon-1.0.0.tgz#0f065668beba2eb0c2a796d1a287bdb02777cbb3"
+  integrity sha512-JJoS4PEpy/MEDC3A9SclQjJ7snSpUtX2BXBiqGSEQT16Zgn9ouV75dCuqI3HDcX3DmvbKnH2jwWvVGSTv17xbg==
   dependencies:
-    "@cypress-design/constants-statusicon" "^0.2.0"
-    "@cypress-design/icon-registry" "^0.34.0"
-    "@cypress-design/vue-icon" "^0.32.0"
+    "@cypress-design/constants-statusicon" "^1.0.0"
+    "@cypress-design/icon-registry" "^1.0.0"
+    "@cypress-design/vue-icon" "^1.0.0"
 
-"@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==
+"@cypress-design/vue-tabs@^1.2.2":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@cypress-design/vue-tabs/-/vue-tabs-1.2.2.tgz#b762c8c53108ca782878479442cae80f57cbee0a"
+  integrity sha512-CpqboAShZ3cWW0/pk12ziXSOb4tq+avRlIqkY9SrUsugHEvLUwKgo1aeokLA+8BuEaYziwyPStk2hn4f0e8JcA==
   dependencies:
-    "@cypress-design/constants-tabs" "*"
+    "@cypress-design/constants-tabs" "^1.2.1"
 
 "@cypress/commit-info@2.2.0":
   version "2.2.0"
@@ -9313,11 +9284,6 @@
   resolved "https://registry.yarnpkg.com/@webpack-cli/serve/-/serve-2.0.5.tgz#325db42395cd49fe6c14057f9a900e427df8810e"
   integrity sha512-lqaoKnRYBdo1UgDX8uF24AfGMifWK19TxPmM5FHc2vAGxrJ/qtyUyFBWoY1tISZdelsQ5fBcOusifo5o5wSJxQ==
 
-"@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==
-
 "@xmldom/xmldom@^0.8.8":
   version "0.8.10"
   resolved "https://registry.yarnpkg.com/@xmldom/xmldom/-/xmldom-0.8.10.tgz#a1337ca426aa61cef9fe15b5b28e340a72f6fa99"
@@ -10985,10 +10951,6 @@ brorand@^1.0.1, brorand@^1.1.0:
   resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
   integrity sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=
 
-"browser-logos@github:alrra/browser-logos":
-  version "75.0.0"
-  resolved "https://codeload.github.com/alrra/browser-logos/tar.gz/021a9533c9d872dccf92713f59afb383b29a50eb"
-
 browser-resolve@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/browser-resolve/-/browser-resolve-2.0.0.tgz#99b7304cb392f8d73dba741bb2d7da28c6d7842b"
@@ -19927,10 +19889,10 @@ jimp@^0.2.21:
     tinycolor2 "^1.1.2"
     url-regex "^3.0.0"
 
-jiti@^1.18.2, jiti@^1.21.0:
-  version "1.21.6"
-  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.6.tgz#6c7f7398dd4b3142767f9a168af2f317a428d268"
-  integrity sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==
+jiti@^1.18.2, jiti@^1.21.6:
+  version "1.21.7"
+  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.7.tgz#9dd81043424a3d28458b193d965f0d18a2300ba9"
+  integrity sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==
 
 jose@^4.15.5:
   version "4.15.5"
@@ -20759,10 +20721,10 @@ liftoff@^3.1.0:
     rechoir "^0.6.2"
     resolve "^1.1.7"
 
-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==
+lilconfig@^3.0.0, lilconfig@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-3.1.3.tgz#a1bcfd6257f9585bf5ae14ceeebb7b559025e4c4"
+  integrity sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==
 
 line-column@^1.0.2:
   version "1.0.2"
@@ -21815,7 +21777,7 @@ methods@1.1.2, methods@^1.1.1, methods@^1.1.2, methods@~1.1.2:
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
   integrity sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=
 
-micromatch@4.0.6, micromatch@^4.0.0, micromatch@^4.0.2, micromatch@^4.0.4, micromatch@^4.0.5:
+micromatch@4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.6.tgz#ab4e37c42726b9cd788181ba4a2a4fead8e394a3"
   integrity sha512-Y4Ypn3oujJYxJcMacVgcs92wofTHxp9FzfDpQON4msDefoC0lb3ETvQLOdLcbhSwU1bz8HrL/1sygfBIHudrkQ==
@@ -21842,6 +21804,14 @@ micromatch@^3.0.4, micromatch@^3.1.10, micromatch@^3.1.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.2"
 
+micromatch@^4.0.0, micromatch@^4.0.2, micromatch@^4.0.4, micromatch@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.8.tgz#d66fa18f3a47076789320b9b1af32bd86d9fa202"
+  integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==
+  dependencies:
+    braces "^3.0.3"
+    picomatch "^2.3.1"
+
 miller-rabin@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/miller-rabin/-/miller-rabin-4.0.1.tgz#f080351c865b0dc562a8462966daa53543c78a4d"
@@ -25189,10 +25159,10 @@ picocolors@^0.2.1:
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-0.2.1.tgz#570670f793646851d1ba135996962abad587859f"
   integrity sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==
 
-picocolors@^1.0.0, picocolors@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.1.tgz#a8ad579b571952f0e5d25892de5445bcfe25aaa1"
-  integrity sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==
+picocolors@^1.0.0, picocolors@^1.0.1, picocolors@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b"
+  integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
 
 picomatch@2.3.0:
   version "2.3.0"
@@ -25464,13 +25434,13 @@ postcss-js@^4.0.1:
   dependencies:
     camelcase-css "^2.0.1"
 
-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==
+postcss-load-config@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-4.0.2.tgz#7159dcf626118d33e299f485d6afe4aff7c4a3e3"
+  integrity sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==
   dependencies:
-    lilconfig "^2.0.5"
-    yaml "^2.1.1"
+    lilconfig "^3.0.0"
+    yaml "^2.3.4"
 
 postcss-loader@7.3.2:
   version "7.3.2"
@@ -25518,12 +25488,12 @@ 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==
+postcss-nested@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-6.2.0.tgz#4c2d22ab5f20b9cb61e2c5c5915950784d068131"
+  integrity sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==
   dependencies:
-    postcss-selector-parser "^6.0.11"
+    postcss-selector-parser "^6.1.1"
 
 postcss-scss@^3.0.2:
   version "3.0.5"
@@ -25532,7 +25502,7 @@ postcss-scss@^3.0.2:
   dependencies:
     postcss "^8.2.7"
 
-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.4, postcss-selector-parser@^6.1.2:
+postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.1.1, postcss-selector-parser@^6.1.2:
   version "6.1.2"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz#27ecb41fb0e3b6ba7a1ec84fff347f734c7929de"
   integrity sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==
@@ -25567,14 +25537,14 @@ postcss@^7.0.11, postcss@^7.0.18, postcss@^7.0.32:
     picocolors "^0.2.1"
     source-map "^0.6.1"
 
-postcss@^8.1.10, postcss@^8.2.14, postcss@^8.2.7, postcss@^8.4.14, postcss@^8.4.21, postcss@^8.4.22, postcss@^8.4.23, postcss@^8.4.27, postcss@^8.4.38:
-  version "8.4.38"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.38.tgz#b387d533baf2054288e337066d81c6bee9db9e0e"
-  integrity sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==
+postcss@^8.1.10, postcss@^8.2.14, postcss@^8.2.7, postcss@^8.4.14, postcss@^8.4.21, postcss@^8.4.22, postcss@^8.4.27, postcss@^8.4.38, postcss@^8.4.47:
+  version "8.4.49"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.49.tgz#4ea479048ab059ab3ae61d082190fabfd994fe19"
+  integrity sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==
   dependencies:
     nanoid "^3.3.7"
-    picocolors "^1.0.0"
-    source-map-js "^1.2.0"
+    picocolors "^1.1.1"
+    source-map-js "^1.2.1"
 
 postject@^1.0.0-alpha.6:
   version "1.0.0-alpha.6"
@@ -27131,7 +27101,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.11.1, resolve@^1.14.2, resolve@^1.17.0, resolve@^1.18.1, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.1, resolve@^1.22.2, resolve@^1.22.4, resolve@^1.22.8, resolve@^1.3.2, resolve@^1.4.0:
+resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.11.1, resolve@^1.14.2, resolve@^1.17.0, resolve@^1.18.1, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.1, resolve@^1.22.4, resolve@^1.22.8, resolve@^1.3.2, resolve@^1.4.0:
   version "1.22.8"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
   integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
@@ -28681,10 +28651,10 @@ source-list-map@^2.0.0:
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
   integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
 
-"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.1, source-map-js@^1.0.2, source-map-js@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"
-  integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.1, source-map-js@^1.0.2, source-map-js@^1.2.0, source-map-js@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
+  integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
 
 source-map-js@^0.6.2:
   version "0.6.2"
@@ -29455,14 +29425,14 @@ subscriptions-transport-ws@^0.9.18:
     symbol-observable "^1.0.4"
     ws "^5.2.0 || ^6.0.0 || ^7.0.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==
+sucrase@^3.35.0:
+  version "3.35.0"
+  resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.35.0.tgz#57f17a3d7e19b36d8995f06679d121be914ae263"
+  integrity sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==
   dependencies:
     "@jridgewell/gen-mapping" "^0.3.2"
     commander "^4.0.0"
-    glob "7.1.6"
+    glob "^10.3.10"
     lines-and-columns "^1.1.6"
     mz "^2.7.0"
     pirates "^4.0.1"
@@ -29681,6 +29651,11 @@ systemjs@^6.15.1:
   resolved "https://registry.yarnpkg.com/systemjs/-/systemjs-6.15.1.tgz#74175b6810e27a79e1177d21db5f0e3057118cea"
   integrity sha512-Nk8c4lXvMB98MtbmjX7JwJRgJOL8fluecYCfCeYBznwmpOs8Bf15hLM6z4z71EDAhQVrQrI+wt1aLWSXZq+hXA==
 
+tailwindcss-hocus@^0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/tailwindcss-hocus/-/tailwindcss-hocus-0.0.7.tgz#bd5801deec87765237ed66f676d632365b3c490c"
+  integrity sha512-KY3jLlppAoPkCLRhDqbe503c1Ryq//G1bLQqFCZz1pnB0JFzHa3VK0bXvjTa8n/dwCxgkhi5uJm1d6gp8OzPhw==
+
 tailwindcss@1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-1.1.4.tgz#786bd5faaf485c9eddcb821dd55666c56baa814e"
@@ -29701,33 +29676,33 @@ tailwindcss@1.1.4:
     pretty-hrtime "^1.0.3"
     reduce-css-calc "^2.1.6"
 
-tailwindcss@^3.3.1, tailwindcss@^3.3.2, tailwindcss@^3.3.3, tailwindcss@^3.4.1:
-  version "3.4.4"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.4.tgz#351d932273e6abfa75ce7d226b5bf3a6cb257c05"
-  integrity sha512-ZoyXOdJjISB7/BcLTR6SEsLgKtDStYyYZVLsUtWChO4Ps20CBad7lfJKVDiejocV4ME1hLmyY0WJE3hSDcmQ2A==
+tailwindcss@^3.3.1, tailwindcss@^3.4.3:
+  version "3.4.17"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.17.tgz#ae8406c0f96696a631c790768ff319d46d5e5a63"
+  integrity sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==
   dependencies:
     "@alloc/quick-lru" "^5.2.0"
     arg "^5.0.2"
-    chokidar "^3.5.3"
+    chokidar "^3.6.0"
     didyoumean "^1.2.2"
     dlv "^1.1.3"
-    fast-glob "^3.3.0"
+    fast-glob "^3.3.2"
     glob-parent "^6.0.2"
     is-glob "^4.0.3"
-    jiti "^1.21.0"
-    lilconfig "^2.1.0"
-    micromatch "^4.0.5"
+    jiti "^1.21.6"
+    lilconfig "^3.1.3"
+    micromatch "^4.0.8"
     normalize-path "^3.0.0"
     object-hash "^3.0.0"
-    picocolors "^1.0.0"
-    postcss "^8.4.23"
+    picocolors "^1.1.1"
+    postcss "^8.4.47"
     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"
-    resolve "^1.22.2"
-    sucrase "^3.32.0"
+    postcss-load-config "^4.0.2"
+    postcss-nested "^6.2.0"
+    postcss-selector-parser "^6.1.2"
+    resolve "^1.22.8"
+    sucrase "^3.35.0"
 
 tapable@^1.0.0, tapable@^1.1.3:
   version "1.1.3"
@@ -32659,10 +32634,10 @@ yaml@^1.10.0:
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
 
-yaml@^2.0.0, yaml@^2.1.1, yaml@^2.4.1:
-  version "2.5.1"
-  resolved "https://registry.npmjs.org/yaml/-/yaml-2.5.1.tgz#c9772aacf62cb7494a95b0c4f1fb065b563db130"
-  integrity sha512-bLQOjaX/ADgQ20isPJRvF0iRUHIxVhYvr53Of7wGcWlO2jvtUlH5m87DsmulFVxRpNLOnI4tB6p/oh8D7kpn9Q==
+yaml@^2.0.0, yaml@^2.3.4, yaml@^2.4.1:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.6.1.tgz#42f2b1ba89203f374609572d5349fb8686500773"
+  integrity sha512-7r0XPzioN/Q9kXBro/XPnA6kznR73DHq+GXh5ON7ZozRO6aMjbmiBuKste2wslTFkC5d1dw0GooOCepZXJ2SAg==
 
 yargs-parser@13.1.1:
   version "13.1.1"