From 4947c0d118f8b0872736a9430916cdd5a9c2a606 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Fri, 12 Jul 2024 10:39:04 +0000
Subject: [PATCH] Bump styled-components from 5.3.11 to 6.1.11 (#43057)

* Bump styled-components from 5.3.11 to 6.1.11

Bumps [styled-components](https://github.com/styled-components/styled-components) from 5.3.11 to 6.1.11.
- [Release notes](https://github.com/styled-components/styled-components/releases)
- [Commits](https://github.com/styled-components/styled-components/compare/v5.3.11...v6.1.11)

---
updated-dependencies:
- dependency-name: styled-components
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

* Remove @types/styled-components

* Add babel-plugin-styled-components

* Fix issues after upgrading packages

* Update snapshots

* Post-merge fixes

* Declare @emotion/is-prop-valid as an explicit dependency

* Correct formatting

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Bartosz Leper <bartosz.leper@goteleport.com>
---
 e                                             |   2 +-
 package.json                                  |   2 +-
 web/packages/build/package.json               |   2 +-
 web/packages/design/package.json              |   1 +
 .../AnimatedProgressBar.tsx                   |   2 +-
 .../__snapshots__/buttons.story.test.tsx.snap | 180 ++++----
 .../CardError.story.test.jsx.snap             |   2 +-
 .../__snapshots__/CardIcon.test.jsx.snap      |   2 +-
 .../__snapshots__/CardSuccess.test.jsx.snap   |   2 +-
 web/packages/design/src/Checkbox/Checkbox.tsx |   2 +-
 .../design/src/DataTable/StyledTable.tsx      |   4 +-
 web/packages/design/src/Input/Input.story.js  |   2 +
 web/packages/design/src/Input/Input.tsx       |   8 +-
 .../design/src/Onboard/WelcomeWrapper.tsx     |   2 +-
 .../WelcomeWrapper.story.test.tsx.snap        |   2 +-
 .../design/src/StepSlider/StepSlider.tsx      |   4 +-
 web/packages/design/src/Text/Text.tsx         |   5 +-
 .../design/src/TextArea/TextArea.story.tsx    |   2 +
 web/packages/design/src/TextArea/TextArea.tsx |   6 +-
 .../design/src/ThemeProvider/index.tsx        |  24 +-
 .../__snapshots__/Topnav.story.test.jsx.snap  |   4 +-
 web/packages/design/src/system/typography.ts  |  22 +
 .../AssumeStartTime/AssumeStartTime.tsx       |   2 +-
 .../RequestCheckout/RequestCheckout.tsx       |   8 +-
 .../RequestCheckout.story.test.tsx.snap       | 246 +++++-----
 .../ResourceList.story.test.tsx.snap          | 424 +++++++++---------
 .../RequestDelete.story.test.tsx.snap         |  60 +--
 .../RequestReview.story.test.tsx.snap         |  28 +-
 .../RequestView.story.test.tsx.snap           | 146 +++---
 .../AwsLaunchButton/AwsLaunchButton.tsx       |   4 +-
 .../ClusterDropdown/ClusterDropdown.tsx       |   2 +-
 .../__snapshots__/FieldInput.test.tsx.snap    |  11 +-
 .../UploadForm/UploadForm.tsx                 |   2 +-
 .../__snapshots__/FormPassword.test.tsx.snap  |  72 +--
 .../shared/components/MenuLogin/MenuLogin.tsx |   4 +-
 .../TextSelectCopy.story.test.tsx.snap        |   8 +-
 .../TextSelectCopyMulti.story.test.tsx.snap   |  40 +-
 .../shared/components/ToolTip/ToolTip.tsx     |   2 +-
 .../CardsView/ResourceCard.tsx                |   4 +-
 .../UnifiedResources/FilterPanel.tsx          |   4 +-
 .../ListView/ResourceListItem.tsx             |   6 +-
 .../AccessRequests.story.test.tsx.snap        |   8 +-
 .../__snapshots__/Audit.story.test.tsx.snap   | 144 +++---
 .../Clusters.story.test.tsx.snap              |  60 +--
 .../DocumentBlank.story.test.tsx.snap         |   4 +-
 .../DocumentKubeExec.test.tsx                 |   2 +-
 .../Console/DocumentNodes/DocumentNodes.tsx   |   2 +-
 .../DocumentNodes.story.test.tsx.snap         |  96 ++--
 .../__snapshots__/Tabs.story.test.tsx.snap    |   4 +-
 .../__snapshots__/ConnectDialog.test.tsx.snap |  28 +-
 .../DesktopSession.story.test.tsx.snap        | 118 ++---
 .../SelectResource/SelectResource.tsx         |   4 +-
 .../SelectResource.story.test.tsx.snap        |   8 +-
 .../teleport/src/Discover/Shared/HintBox.tsx  |   2 +-
 .../ConnectDialog.story.test.tsx.snap         |  42 +-
 web/packages/teleport/src/LocksV2/common.tsx  |   2 +-
 .../__snapshots__/LoginFailed.test.tsx.snap   |   4 +-
 .../__snapshots__/LoginSuccess.test.tsx.snap  |   2 +-
 .../src/Navigation/NavigationItem.tsx         |   2 +-
 .../__snapshots__/Nodes.story.test.tsx.snap   | 192 ++++----
 .../Recordings.story.test.tsx.snap            |  74 +--
 .../Sessions.story.test.tsx.snap              | 202 ++++-----
 .../__snapshots__/Support.story.test.tsx.snap |  18 +-
 .../UserDelete.story.test.tsx.snap            |  42 +-
 .../UserReset.story.test.tsx.snap             |  42 +-
 .../UserTokenLink.story.test.tsx.snap         |  28 +-
 .../__snapshots__/Users.story.test.tsx.snap   |  68 +--
 .../NewCredentials.story.test.tsx.snap        | 140 +++---
 .../AgentButtonAdd.story.test.tsx.snap        |  20 +-
 .../src/components/BannerList/Banner.tsx      |   4 +-
 .../FormLogin.story.test.tsx.snap             | 240 +++++-----
 .../teleport/src/components/Layout/Layout.jsx |   2 +-
 .../ReAuthenticate.story.test.tsx.snap        |  76 ++--
 .../RecoveryCodes.story.test.tsx.snap         |  36 +-
 .../teleport/src/components/Tabs/Tabs.tsx     |   8 +-
 .../components/Wizard/Navigation/Bullet.tsx   |   4 +-
 .../NewRequest/NewRequest.tsx                 |   2 +-
 .../RequestList/RequestList.tsx               |   2 +-
 .../teleterm/src/ui/Search/SearchBar.tsx      |   2 +-
 .../src/ui/Search/pickers/ActionPicker.tsx    |   2 +-
 .../src/ui/Search/pickers/ResultList.tsx      |   2 +-
 .../src/ui/ThemeProvider/ThemeProvider.tsx    |   4 +-
 .../ConnectionStatusIndicator.tsx             |   4 +-
 .../VirtualScroll/VirtualScroll.tsx           |   4 +-
 yarn.lock                                     |  96 ++--
 85 files changed, 1639 insertions(+), 1562 deletions(-)

diff --git a/e b/e
index f475736c2f1eb..18549064b7b9e 160000
--- a/e
+++ b/e
@@ -1 +1 @@
-Subproject commit f475736c2f1ebeff02af475fb8cb45eb9957351f
+Subproject commit 18549064b7b9e734c91c1a2c667cb50ca7cb672e
diff --git a/package.json b/package.json
index 7e0f2cee2e475..9d849b0b1999d 100644
--- a/package.json
+++ b/package.json
@@ -89,7 +89,7 @@
     "react-router-dom": "5.1.1",
     "react-select": "^3.0.8",
     "react-transition-group": "^4.4.5",
-    "styled-components": "5.3.11",
+    "styled-components": "6.1.11",
     "tslib": "^2.6.3",
     "whatwg-fetch": "^3.6.20"
   },
diff --git a/web/packages/build/package.json b/web/packages/build/package.json
index 8a1d36f8a924e..425cbe59b9dc4 100644
--- a/web/packages/build/package.json
+++ b/web/packages/build/package.json
@@ -25,6 +25,7 @@
     "@types/jsdom": "^21.1.7",
     "@vitejs/plugin-react-swc": "^3.7.0",
     "babel-loader": "^8.2.5",
+    "babel-plugin-styled-components": "^2.1.4",
     "eslint": "^8.56.0",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-babel": "^5.3.1",
@@ -47,4 +48,3 @@
     "ts-loader": "^9.5.1"
   }
 }
-
diff --git a/web/packages/design/package.json b/web/packages/design/package.json
index 90aa7efb22008..fbb8f80146887 100644
--- a/web/packages/design/package.json
+++ b/web/packages/design/package.json
@@ -10,6 +10,7 @@
     "directory": "packages/design"
   },
   "dependencies": {
+    "@emotion/is-prop-valid": "1.2.2",
     "styled-system": "^3.1.11",
     "csstype": "^3.0.2"
   },
diff --git a/web/packages/design/src/AnimatedProgressBar/AnimatedProgressBar.tsx b/web/packages/design/src/AnimatedProgressBar/AnimatedProgressBar.tsx
index 5bf5d8bfc9c35..d5ad45a1f3bd0 100644
--- a/web/packages/design/src/AnimatedProgressBar/AnimatedProgressBar.tsx
+++ b/web/packages/design/src/AnimatedProgressBar/AnimatedProgressBar.tsx
@@ -66,7 +66,7 @@ const Bar = styled.span`
   overflow: hidden;
   width: 118px;
 
-  ::after {
+  &::after {
     content: '';
     position: absolute;
     top: 0;
diff --git a/web/packages/design/src/Button/__snapshots__/buttons.story.test.tsx.snap b/web/packages/design/src/Button/__snapshots__/buttons.story.test.tsx.snap
index 20695cb3da103..b3e27d29c76c0 100644
--- a/web/packages/design/src/Button/__snapshots__/buttons.story.test.tsx.snap
+++ b/web/packages/design/src/Button/__snapshots__/buttons.story.test.tsx.snap
@@ -25,7 +25,7 @@ exports[`buttons 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
   border-color: transparent;
   border-width: 1.5px;
   padding: 0 30.5px;
@@ -38,8 +38,8 @@ exports[`buttons 1`] = `
 .c3:focus-visible,
 .teleport-button__force-focus-visible .c3 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -61,7 +61,7 @@ exports[`buttons 1`] = `
 
 .c3:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -111,7 +111,7 @@ exports[`buttons 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c4:active,
@@ -123,7 +123,7 @@ exports[`buttons 1`] = `
 
 .c4:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -173,7 +173,7 @@ exports[`buttons 1`] = `
   background-color: #FF8179;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c5:active,
@@ -185,7 +185,7 @@ exports[`buttons 1`] = `
 
 .c5:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -235,7 +235,7 @@ exports[`buttons 1`] = `
   background-color: #33CCB8;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c6:active,
@@ -247,7 +247,7 @@ exports[`buttons 1`] = `
 
 .c6:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -273,7 +273,7 @@ exports[`buttons 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: transparent;
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
   border-color: transparent;
   border-width: 1.5px;
   padding: 0 30.5px;
@@ -286,8 +286,8 @@ exports[`buttons 1`] = `
 .c7:focus-visible,
 .teleport-button__force-focus-visible .c7 {
   background-color: transparent;
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -296,7 +296,7 @@ exports[`buttons 1`] = `
 .teleport-button__force-hover .c7 {
   background-color: rgba(255,255,255,0.07);
   border-color: transparent;
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
   box-shadow: none;
 }
 
@@ -309,7 +309,7 @@ exports[`buttons 1`] = `
 
 .c7:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -356,7 +356,7 @@ exports[`buttons 1`] = `
 
 .c8:hover,
 .teleport-button__force-hover .c8 {
-  background-color: rgba(159,133,255,0.1);
+  background-color: rgba(159,133,255, 0.1);
   border-color: transparent;
   color: #B29DFF;
   box-shadow: none;
@@ -364,14 +364,14 @@ exports[`buttons 1`] = `
 
 .c8:active,
 .teleport-button__force-active .c8 {
-  background-color: rgba(159,133,255,0.18);
+  background-color: rgba(159,133,255, 0.18);
   border-color: transparent;
   color: #C5B6FF;
 }
 
 .c8:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -418,7 +418,7 @@ exports[`buttons 1`] = `
 
 .c9:hover,
 .teleport-button__force-hover .c9 {
-  background-color: rgba(255,98,87,0.1);
+  background-color: rgba(255, 98, 87, 0.1);
   border-color: transparent;
   color: #FF8179;
   box-shadow: none;
@@ -426,14 +426,14 @@ exports[`buttons 1`] = `
 
 .c9:active,
 .teleport-button__force-active .c9 {
-  background-color: rgba(255,98,87,0.18);
+  background-color: rgba(255, 98, 87, 0.18);
   border-color: transparent;
   color: #FF8179;
 }
 
 .c9:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -480,7 +480,7 @@ exports[`buttons 1`] = `
 
 .c10:hover,
 .teleport-button__force-hover .c10 {
-  background-color: rgba(0,191,166,0.1);
+  background-color: rgba(0, 191, 166, 0.1);
   border-color: transparent;
   color: #33CCB8;
   box-shadow: none;
@@ -488,14 +488,14 @@ exports[`buttons 1`] = `
 
 .c10:active,
 .teleport-button__force-active .c10 {
-  background-color: rgba(0,191,166,0.18);
+  background-color: rgba(0, 191, 166, 0.18);
   border-color: transparent;
   color: #33CCB8;
 }
 
 .c10:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -521,8 +521,8 @@ exports[`buttons 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: transparent;
-  color: rgba(255,255,255,0.54);
-  border-color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
+  border-color: rgba(255, 255, 255, 0.54);
   border-width: 1.5px;
   padding: 0 30.5px;
   min-height: 32px;
@@ -534,8 +534,8 @@ exports[`buttons 1`] = `
 .c11:focus-visible,
 .teleport-button__force-focus-visible .c11 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -557,7 +557,7 @@ exports[`buttons 1`] = `
 
 .c11:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -607,7 +607,7 @@ exports[`buttons 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c12:active,
@@ -619,7 +619,7 @@ exports[`buttons 1`] = `
 
 .c12:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -669,7 +669,7 @@ exports[`buttons 1`] = `
   background-color: #FF8179;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c13:active,
@@ -681,7 +681,7 @@ exports[`buttons 1`] = `
 
 .c13:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -731,7 +731,7 @@ exports[`buttons 1`] = `
   background-color: #33CCB8;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c14:active,
@@ -743,7 +743,7 @@ exports[`buttons 1`] = `
 
 .c14:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -793,7 +793,7 @@ exports[`buttons 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c17:active,
@@ -805,7 +805,7 @@ exports[`buttons 1`] = `
 
 .c17:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -855,7 +855,7 @@ exports[`buttons 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c18:active,
@@ -867,7 +867,7 @@ exports[`buttons 1`] = `
 
 .c18:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -917,7 +917,7 @@ exports[`buttons 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c19:active,
@@ -929,7 +929,7 @@ exports[`buttons 1`] = `
 
 .c19:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -979,7 +979,7 @@ exports[`buttons 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c22:active,
@@ -991,7 +991,7 @@ exports[`buttons 1`] = `
 
 .c22:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -1041,7 +1041,7 @@ exports[`buttons 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c23:active,
@@ -1053,7 +1053,7 @@ exports[`buttons 1`] = `
 
 .c23:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -1103,7 +1103,7 @@ exports[`buttons 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c24:active,
@@ -1115,7 +1115,7 @@ exports[`buttons 1`] = `
 
 .c24:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -1165,7 +1165,7 @@ exports[`buttons 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c25:active,
@@ -1177,7 +1177,7 @@ exports[`buttons 1`] = `
 
 .c25:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -1228,7 +1228,7 @@ exports[`buttons 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c26:active,
@@ -1240,7 +1240,7 @@ exports[`buttons 1`] = `
 
 .c26:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -1291,7 +1291,7 @@ exports[`buttons 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c27:active,
@@ -1303,7 +1303,7 @@ exports[`buttons 1`] = `
 
 .c27:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -1329,8 +1329,8 @@ exports[`buttons 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: transparent;
-  color: rgba(255,255,255,0.54);
-  border-color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
+  border-color: rgba(255, 255, 255, 0.54);
   border-width: 1.5px;
   padding: 0 30.5px;
   min-height: 32px;
@@ -1344,8 +1344,8 @@ exports[`buttons 1`] = `
 .c31:focus-visible,
 .teleport-button__force-focus-visible .c31 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -1367,7 +1367,7 @@ exports[`buttons 1`] = `
 
 .c31:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -1393,8 +1393,8 @@ exports[`buttons 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: transparent;
-  color: rgba(255,255,255,0.54);
-  border-color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
+  border-color: rgba(255, 255, 255, 0.54);
   border-width: 1.5px;
   padding: 0 30.5px;
   min-height: 40px;
@@ -1406,8 +1406,8 @@ exports[`buttons 1`] = `
 .c34:focus-visible,
 .teleport-button__force-focus-visible .c34 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -1429,7 +1429,7 @@ exports[`buttons 1`] = `
 
 .c34:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -1455,8 +1455,8 @@ exports[`buttons 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: transparent;
-  color: rgba(255,255,255,0.54);
-  border-color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
+  border-color: rgba(255, 255, 255, 0.54);
   border-width: 1.5px;
   padding: 0 30.5px;
   min-height: 40px;
@@ -1470,8 +1470,8 @@ exports[`buttons 1`] = `
 .c35:focus-visible,
 .teleport-button__force-focus-visible .c35 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -1493,7 +1493,7 @@ exports[`buttons 1`] = `
 
 .c35:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -1519,8 +1519,8 @@ exports[`buttons 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: transparent;
-  color: rgba(255,255,255,0.54);
-  border-color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
+  border-color: rgba(255, 255, 255, 0.54);
   border-width: 1.5px;
   padding: 0 6.5px;
   min-height: 24px;
@@ -1532,8 +1532,8 @@ exports[`buttons 1`] = `
 .c36:focus-visible,
 .teleport-button__force-focus-visible .c36 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -1555,7 +1555,7 @@ exports[`buttons 1`] = `
 
 .c36:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -1581,8 +1581,8 @@ exports[`buttons 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: transparent;
-  color: rgba(255,255,255,0.54);
-  border-color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
+  border-color: rgba(255, 255, 255, 0.54);
   border-width: 1.5px;
   padding: 0 6.5px;
   min-height: 24px;
@@ -1596,8 +1596,8 @@ exports[`buttons 1`] = `
 .c37:focus-visible,
 .teleport-button__force-focus-visible .c37 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -1619,7 +1619,7 @@ exports[`buttons 1`] = `
 
 .c37:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -1669,7 +1669,7 @@ exports[`buttons 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c38:active,
@@ -1681,7 +1681,7 @@ exports[`buttons 1`] = `
 
 .c38:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -1690,7 +1690,7 @@ exports[`buttons 1`] = `
 
 .c38[disabled] {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -1718,7 +1718,7 @@ exports[`buttons 1`] = `
 }
 
 .c39:disabled {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
   cursor: default;
 }
 
@@ -1752,7 +1752,7 @@ exports[`buttons 1`] = `
 }
 
 .c41:disabled {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
   cursor: default;
 }
 
@@ -1786,7 +1786,7 @@ exports[`buttons 1`] = `
 }
 
 .c42:disabled {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
   cursor: default;
 }
 
@@ -1834,7 +1834,7 @@ exports[`buttons 1`] = `
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
 }
 
 .c30 {
@@ -1850,7 +1850,7 @@ exports[`buttons 1`] = `
 
 .c21 {
   appearance: none;
-  border: 1px solid rgba(255,255,255,0.54);
+  border: 1px solid rgba(255, 255, 255, 0.54);
   border-radius: 4px;
   box-sizing: border-box;
   display: block;
@@ -1867,7 +1867,7 @@ exports[`buttons 1`] = `
 .c21:hover,
 .c21:focus,
 .c21:active {
-  border: 1px solid rgba(255,255,255,0.72);
+  border: 1px solid rgba(255, 255, 255, 0.72);
 }
 
 .c21::-ms-clear {
@@ -1875,7 +1875,7 @@ exports[`buttons 1`] = `
 }
 
 .c21::placeholder {
-  color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
   opacity: 1;
 }
 
@@ -1884,8 +1884,8 @@ exports[`buttons 1`] = `
 }
 
 .c21:disabled {
-  color: rgba(255,255,255,0.36);
-  border-color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
+  border-color: rgba(255, 255, 255, 0.36);
 }
 
 .c1 {
diff --git a/web/packages/design/src/CardError/__snapshots__/CardError.story.test.jsx.snap b/web/packages/design/src/CardError/__snapshots__/CardError.story.test.jsx.snap
index 06d044cfc2ab0..02cbfed1c68e4 100644
--- a/web/packages/design/src/CardError/__snapshots__/CardError.story.test.jsx.snap
+++ b/web/packages/design/src/CardError/__snapshots__/CardError.story.test.jsx.snap
@@ -37,7 +37,7 @@ exports[`rendering of Error Cards 1`] = `
 }
 
 .c1 {
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px rgba(0,0,0,0.14),0px 1px 18px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px rgba(0, 0, 0, 0.14),0px 1px 18px rgba(0, 0, 0, 0.12);
   border-radius: 8px;
   background-color: #222C59;
 }
diff --git a/web/packages/design/src/CardIcon/__snapshots__/CardIcon.test.jsx.snap b/web/packages/design/src/CardIcon/__snapshots__/CardIcon.test.jsx.snap
index f114018219b1e..42371d7473af2 100644
--- a/web/packages/design/src/CardIcon/__snapshots__/CardIcon.test.jsx.snap
+++ b/web/packages/design/src/CardIcon/__snapshots__/CardIcon.test.jsx.snap
@@ -13,7 +13,7 @@ exports[`rendering of CardIcon components 1`] = `
 }
 
 .c1 {
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px rgba(0,0,0,0.14),0px 1px 18px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px rgba(0, 0, 0, 0.14),0px 1px 18px rgba(0, 0, 0, 0.12);
   border-radius: 8px;
   background-color: #222C59;
 }
diff --git a/web/packages/design/src/CardSuccess/__snapshots__/CardSuccess.test.jsx.snap b/web/packages/design/src/CardSuccess/__snapshots__/CardSuccess.test.jsx.snap
index 23c5497cb8331..41bc1987adb82 100644
--- a/web/packages/design/src/CardSuccess/__snapshots__/CardSuccess.test.jsx.snap
+++ b/web/packages/design/src/CardSuccess/__snapshots__/CardSuccess.test.jsx.snap
@@ -13,7 +13,7 @@ exports[`rendering of CardSuccess components 1`] = `
 }
 
 .c1 {
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px rgba(0,0,0,0.14),0px 1px 18px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px rgba(0, 0, 0, 0.14),0px 1px 18px rgba(0, 0, 0, 0.12);
   border-radius: 8px;
   background-color: #222C59;
 }
diff --git a/web/packages/design/src/Checkbox/Checkbox.tsx b/web/packages/design/src/Checkbox/Checkbox.tsx
index d5be0f3009e1e..3843036c91c01 100644
--- a/web/packages/design/src/Checkbox/Checkbox.tsx
+++ b/web/packages/design/src/Checkbox/Checkbox.tsx
@@ -106,7 +106,7 @@ const Checkmark = styled(Icon.CheckThick)`
 const CheckboxInternal = styled.input.attrs(props => ({
   // TODO(bl-nero): Make radio buttons a separate control.
   type: props.type || 'checkbox',
-}))`
+}))<{ cbSize?: CheckboxSize }>`
   // reset the appearance so we can style the background
   -webkit-appearance: none;
   -moz-appearance: none;
diff --git a/web/packages/design/src/DataTable/StyledTable.tsx b/web/packages/design/src/DataTable/StyledTable.tsx
index d938dc2722732..4995206f2e4b5 100644
--- a/web/packages/design/src/DataTable/StyledTable.tsx
+++ b/web/packages/design/src/DataTable/StyledTable.tsx
@@ -75,13 +75,13 @@ export const StyledTable = styled.table<BorderRadiusProps>`
     border-top: ${props => props.theme.borders[2]}
       ${props => props.theme.colors.spotBackground[0]};
 
-    :hover {
+    &:hover {
       border-top: ${props => props.theme.borders[2]} rgba(0, 0, 0, 0);
       background-color: ${props => props.theme.colors.levels.surface};
 
       // We use a pseudo element for the shadow with position: absolute in order to prevent
       // the shadow from increasing the size of the layout and causing scrollbar flicker.
-      :after {
+      &:after {
         box-shadow: ${props => props.theme.boxShadow[3]};
         content: '';
         position: absolute;
diff --git a/web/packages/design/src/Input/Input.story.js b/web/packages/design/src/Input/Input.story.js
index e741ab64d5558..42bdc2ef164cc 100644
--- a/web/packages/design/src/Input/Input.story.js
+++ b/web/packages/design/src/Input/Input.story.js
@@ -28,5 +28,7 @@ export const Inputs = () => (
   <>
     <Input mb={4} placeholder="Enter SomeText" />
     <Input mb={4} hasError={true} defaultValue="This field has an error" />
+    <Input mb={4} readOnly defaultValue="Read-only field" />
+    <Input mb={4} disabled defaultValue="Disabled field" />
   </>
 );
diff --git a/web/packages/design/src/Input/Input.tsx b/web/packages/design/src/Input/Input.tsx
index 59726300324d5..f4e66cf180471 100644
--- a/web/packages/design/src/Input/Input.tsx
+++ b/web/packages/design/src/Input/Input.tsx
@@ -67,20 +67,20 @@ const Input = styled.input<InputProps>`
     border: 1px solid ${props => props.theme.colors.text.slightlyMuted};
   }
 
-  ::-ms-clear {
+  &::-ms-clear {
     display: none;
   }
 
-  ::placeholder {
+  &::placeholder {
     color: ${props => props.theme.colors.text.muted};
     opacity: 1;
   }
 
-  :read-only {
+  &:read-only {
     cursor: not-allowed;
   }
 
-  :disabled {
+  &:disabled {
     color: ${props => props.theme.colors.text.disabled};
     border-color: ${props => props.theme.colors.text.disabled};
   }
diff --git a/web/packages/design/src/Onboard/WelcomeWrapper.tsx b/web/packages/design/src/Onboard/WelcomeWrapper.tsx
index 8b2324322ef3e..47532dd7af467 100644
--- a/web/packages/design/src/Onboard/WelcomeWrapper.tsx
+++ b/web/packages/design/src/Onboard/WelcomeWrapper.tsx
@@ -61,7 +61,7 @@ const OnboardWrapper = styled.div`
   background-size: cover;
 
   // leveraging pseudo element for opacity/blur
-  ::after {
+  &::after {
     content: '';
     top: 0;
     left: 0;
diff --git a/web/packages/design/src/Onboard/__snapshots__/WelcomeWrapper.story.test.tsx.snap b/web/packages/design/src/Onboard/__snapshots__/WelcomeWrapper.story.test.tsx.snap
index 027b10bea88bd..cda95bd560676 100644
--- a/web/packages/design/src/Onboard/__snapshots__/WelcomeWrapper.story.test.tsx.snap
+++ b/web/packages/design/src/Onboard/__snapshots__/WelcomeWrapper.story.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`wrapper 1`] = `
 }
 
 .c6 {
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px rgba(0,0,0,0.14),0px 1px 18px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px rgba(0, 0, 0, 0.14),0px 1px 18px rgba(0, 0, 0, 0.12);
   border-radius: 8px;
   background-color: #222C59;
 }
diff --git a/web/packages/design/src/StepSlider/StepSlider.tsx b/web/packages/design/src/StepSlider/StepSlider.tsx
index 3bb73e14fba43..4cab9f3a42b73 100644
--- a/web/packages/design/src/StepSlider/StepSlider.tsx
+++ b/web/packages/design/src/StepSlider/StepSlider.tsx
@@ -246,8 +246,8 @@ const HiddenBox = styled.div`
   position: absolute;
 `;
 
-const Wrap = styled.div(
-  ({ tDuration }: { tDuration: number }) => `
+const Wrap = styled.div<{ tDuration: number }>(
+  ({ tDuration }) => `
  
  .prev-slide-enter {
    transform: translateX(-100%);
diff --git a/web/packages/design/src/Text/Text.tsx b/web/packages/design/src/Text/Text.tsx
index 527bf56c1f041..dc2ba10535f31 100644
--- a/web/packages/design/src/Text/Text.tsx
+++ b/web/packages/design/src/Text/Text.tsx
@@ -36,6 +36,7 @@ import {
   fontWeight,
 } from 'design/system';
 import { fontWeights } from 'design/theme/typography';
+import { shouldForwardTypographyProp } from 'design/system/typography';
 
 interface FontWeightProps {
   fontWeight?: ResponsiveValue<Property.FontWeight | keyof typeof fontWeights>;
@@ -49,7 +50,9 @@ export interface TextProps
     TextAlignProps,
     FontWeightProps {}
 
-const Text = styled.div<TextProps>`
+const Text = styled.div.withConfig({
+  shouldForwardProp: shouldForwardTypographyProp,
+})<TextProps>`
   overflow: hidden;
   text-overflow: ellipsis;
   ${typography}
diff --git a/web/packages/design/src/TextArea/TextArea.story.tsx b/web/packages/design/src/TextArea/TextArea.story.tsx
index 045dbee380bfe..3bf2692bc14a4 100644
--- a/web/packages/design/src/TextArea/TextArea.story.tsx
+++ b/web/packages/design/src/TextArea/TextArea.story.tsx
@@ -28,6 +28,8 @@ export const TextAreas = () => (
   <>
     <TextArea mb={4} placeholder="Enter Some long text" />
     <TextArea mb={4} hasError={true} defaultValue="This field has an error" />
+    <TextArea mb={4} readOnly defaultValue="This field is read-only" />
+    <TextArea mb={4} disabled defaultValue="This field is disabled" />
     <TextArea
       mb={4}
       resizable={true}
diff --git a/web/packages/design/src/TextArea/TextArea.tsx b/web/packages/design/src/TextArea/TextArea.tsx
index b32f74d88b375..b9cebad4b465e 100644
--- a/web/packages/design/src/TextArea/TextArea.tsx
+++ b/web/packages/design/src/TextArea/TextArea.tsx
@@ -54,7 +54,7 @@ export const TextArea = styled.textarea<TextAreaProps>`
   color: ${props => props.theme.colors.text.main};
   background: inherit;
 
-  ::placeholder {
+  &::placeholder {
     color: ${props => props.theme.colors.text.muted};
     opacity: 1;
   }
@@ -65,11 +65,11 @@ export const TextArea = styled.textarea<TextAreaProps>`
     border: 1px solid ${props => props.theme.colors.text.slightlyMuted};
   }
 
-  :read-only {
+  &:read-only {
     cursor: not-allowed;
   }
 
-  :disabled {
+  &:disabled {
     color: ${props => props.theme.colors.text.disabled};
     border-color: ${props => props.theme.colors.text.disabled};
   }
diff --git a/web/packages/design/src/ThemeProvider/index.tsx b/web/packages/design/src/ThemeProvider/index.tsx
index af212d8ab3862..4e064080dab66 100644
--- a/web/packages/design/src/ThemeProvider/index.tsx
+++ b/web/packages/design/src/ThemeProvider/index.tsx
@@ -20,6 +20,7 @@ import React, { useEffect, useState } from 'react';
 import {
   StyleSheetManager,
   ThemeProvider as StyledThemeProvider,
+  WebTarget,
 } from 'styled-components';
 
 import { KeysEnum, storageService } from 'teleport/services/storageService';
@@ -28,6 +29,8 @@ import cfg from 'teleport/config';
 
 import { Theme } from 'gen-proto-ts/teleport/userpreferences/v1/theme_pb';
 
+import isPropValid from '@emotion/is-prop-valid';
+
 import { darkTheme, lightTheme, bblpTheme } from '../theme';
 
 import { GlobalStyle } from './globals';
@@ -110,7 +113,7 @@ const ThemeProvider = props => {
 
   return (
     <StyledThemeProvider theme={theme}>
-      <StyleSheetManager disableVendorPrefixes>
+      <StyleSheetManager shouldForwardProp={shouldForwardProp}>
         <React.Fragment>
           <GlobalStyle />
           {props.children}
@@ -120,4 +123,23 @@ const ThemeProvider = props => {
   );
 };
 
+/**
+ * This function has been taken from the [styled-components library
+ * FAQ](https://styled-components.com/docs/faqs#shouldforwardprop-is-no-longer-provided-by-default).
+ * It implements the default behavior from styled-components v5. It's required,
+ * because it would be otherwise incompatible with styled-system (or at least
+ * the way we are using it). Not using this function would cause a lot of props
+ * being passed unnecessarily to the underlying elements. Not only it's
+ * unnecessary and potentially a buggy behavior, it also causes a lot of
+ * warnings printed on the console, which in turn causes test failures.
+ */
+export function shouldForwardProp(propName: string, target: WebTarget) {
+  if (typeof target === 'string') {
+    // For HTML elements, forward the prop if it is a valid HTML attribute
+    return isPropValid(propName);
+  }
+  // For other elements, forward all props
+  return true;
+}
+
 export default ThemeProvider;
diff --git a/web/packages/design/src/TopNav/__snapshots__/Topnav.story.test.jsx.snap b/web/packages/design/src/TopNav/__snapshots__/Topnav.story.test.jsx.snap
index 51488a97014c1..869c2a1143c02 100644
--- a/web/packages/design/src/TopNav/__snapshots__/Topnav.story.test.jsx.snap
+++ b/web/packages/design/src/TopNav/__snapshots__/Topnav.story.test.jsx.snap
@@ -17,7 +17,7 @@ exports[`rendering of TopNav and TopNavItem 1`] = `
   align-items: center;
   background: none;
   border: none;
-  color: rgba(255,255,255,.56);
+  color: rgba(255, 255, 255, .56);
   cursor: pointer;
   display: inline-flex;
   font-size: 11px;
@@ -31,7 +31,7 @@ exports[`rendering of TopNav and TopNavItem 1`] = `
 }
 
 .c2:hover {
-  background: rgba(255,255,255,.06);
+  background: rgba(255, 255, 255, .06);
 }
 
 .c2.active {
diff --git a/web/packages/design/src/system/typography.ts b/web/packages/design/src/system/typography.ts
index c2adcd8382bd1..af0cd749342dc 100644
--- a/web/packages/design/src/system/typography.ts
+++ b/web/packages/design/src/system/typography.ts
@@ -19,8 +19,10 @@
 import PropTypes from 'prop-types';
 
 import { ResponsiveValue } from 'styled-system';
+import { WebTarget } from 'styled-components';
 
 import { SharedStyles, Theme } from 'design/theme/themes/types';
+import { shouldForwardProp } from 'design/ThemeProvider';
 
 export interface TypographyProps {
   caps?: boolean;
@@ -46,6 +48,26 @@ function getTypography(props: TypographyPropsWithTheme) {
   };
 }
 
+const typographyProps: Required<{ [k in keyof TypographyProps]: boolean }> = {
+  caps: true,
+  bold: true,
+  italic: true,
+  mono: true,
+  breakAll: true,
+  typography: true,
+};
+
+/**
+ * Determines whether a property with a given name should be forwarded down as
+ * an attribute to an underlying HTML tag. To be used along with styled-components
+ */
+export function shouldForwardTypographyProp(
+  propName: string,
+  target: WebTarget
+) {
+  return !typographyProps[propName] && shouldForwardProp(propName, target);
+}
+
 function caps(props: TypographyProps) {
   return props.caps ? { textTransform: 'uppercase' } : null;
 }
diff --git a/web/packages/shared/components/AccessRequests/AssumeStartTime/AssumeStartTime.tsx b/web/packages/shared/components/AccessRequests/AssumeStartTime/AssumeStartTime.tsx
index 6191524008cc0..ad612c6333d98 100644
--- a/web/packages/shared/components/AccessRequests/AssumeStartTime/AssumeStartTime.tsx
+++ b/web/packages/shared/components/AccessRequests/AssumeStartTime/AssumeStartTime.tsx
@@ -230,7 +230,7 @@ const CalendarPicker = styled(Flex)`
   align-items: center;
   justify-content: space-between;
   cursor: pointer;
-  :hover {
+  &:hover {
     background-color: ${p => p.theme.colors.spotBackground[0]};
     border: 1px solid ${p => p.theme.colors.text.slightlyMuted};
   }
diff --git a/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/RequestCheckout.tsx b/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/RequestCheckout.tsx
index 0d6e576505858..49e6adb6beddf 100644
--- a/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/RequestCheckout.tsx
+++ b/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/RequestCheckout.tsx
@@ -281,7 +281,7 @@ export function RequestCheckout<T extends PendingListItem>({
                               theme.colors.buttons.trashButton.default};
                             border-radius: 2px;
 
-                            :hover {
+                            &:hover {
                               background-color: ${({ theme }) =>
                                 theme.colors.buttons.trashButton.hover};
                             }
@@ -570,12 +570,12 @@ const RoleRowContainer = styled.div<{ checked?: boolean }>`
 
   // TODO(bl-nero): That's the third place where we're copying these
   // definitions. We need to make them reusable.
-  :hover {
+  &:hover {
     background-color: ${props => props.theme.colors.levels.surface};
 
     // We use a pseudo element for the shadow with position: absolute in order to prevent
     // the shadow from increasing the size of the layout and causing scrollbar flicker.
-    :after {
+    &:after {
       box-shadow: ${props => props.theme.boxShadow[3]};
       content: '';
       position: absolute;
@@ -638,7 +638,7 @@ function TextBox({
           outline: none;
           background: transparent;
 
-          ::placeholder {
+          &::placeholder {
             color: ${({ theme }) => theme.colors.text.muted};
           }
 
diff --git a/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/__snapshots__/RequestCheckout.story.test.tsx.snap b/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/__snapshots__/RequestCheckout.story.test.tsx.snap
index 0758084a78d2f..d5d977e345392 100644
--- a/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/__snapshots__/RequestCheckout.story.test.tsx.snap
+++ b/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/__snapshots__/RequestCheckout.story.test.tsx.snap
@@ -74,7 +74,7 @@ exports[`failed state 1`] = `
   color: #FFFFFF;
   border: 1px solid;
   border-radius: 4px;
-  border-color: rgba(255,255,255,0.54);
+  border-color: rgba(255, 255, 255, 0.54);
 }
 
 .c39 {
@@ -111,8 +111,8 @@ exports[`failed state 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: transparent;
-  color: rgba(255,255,255,0.54);
-  border-color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
+  border-color: rgba(255, 255, 255, 0.54);
   border-width: 1.5px;
   padding: 0 6.5px;
   min-height: 24px;
@@ -125,8 +125,8 @@ exports[`failed state 1`] = `
 .c21:focus-visible,
 .teleport-button__force-focus-visible .c21 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -148,7 +148,7 @@ exports[`failed state 1`] = `
 
 .c21:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -200,7 +200,7 @@ exports[`failed state 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c45:active,
@@ -212,7 +212,7 @@ exports[`failed state 1`] = `
 
 .c45:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -238,7 +238,7 @@ exports[`failed state 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
   border-color: transparent;
   border-width: 1.5px;
   padding: 0 30.5px;
@@ -253,8 +253,8 @@ exports[`failed state 1`] = `
 .c46:focus-visible,
 .teleport-button__force-focus-visible .c46 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -276,7 +276,7 @@ exports[`failed state 1`] = `
 
 .c46:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -303,7 +303,7 @@ exports[`failed state 1`] = `
 }
 
 .c41:disabled {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
   cursor: default;
 }
 
@@ -417,39 +417,39 @@ exports[`failed state 1`] = `
   width: 100%;
 }
 
-.c9 > thead > tr > th,
-.c9 > tbody > tr > th,
-.c9 > tfoot > tr > th,
-.c9 > thead > tr > td,
-.c9 > tbody > tr > td,
-.c9 > tfoot > tr > td {
+.c9>thead>tr>th,
+.c9>tbody>tr>th,
+.c9>tfoot>tr>th,
+.c9>thead>tr>td,
+.c9>tbody>tr>td,
+.c9>tfoot>tr>td {
   padding: 8px 8px;
   vertical-align: middle;
 }
 
-.c9 > thead > tr > th:first-child,
-.c9 > tbody > tr > th:first-child,
-.c9 > tfoot > tr > th:first-child,
-.c9 > thead > tr > td:first-child,
-.c9 > tbody > tr > td:first-child,
-.c9 > tfoot > tr > td:first-child {
+.c9>thead>tr>th:first-child,
+.c9>tbody>tr>th:first-child,
+.c9>tfoot>tr>th:first-child,
+.c9>thead>tr>td:first-child,
+.c9>tbody>tr>td:first-child,
+.c9>tfoot>tr>td:first-child {
   padding-left: 24px;
 }
 
-.c9 > thead > tr > th:last-child,
-.c9 > tbody > tr > th:last-child,
-.c9 > tfoot > tr > th:last-child,
-.c9 > thead > tr > td:last-child,
-.c9 > tbody > tr > td:last-child,
-.c9 > tfoot > tr > td:last-child {
+.c9>thead>tr>th:last-child,
+.c9>tbody>tr>th:last-child,
+.c9>tfoot>tr>th:last-child,
+.c9>thead>tr>td:last-child,
+.c9>tbody>tr>td:last-child,
+.c9>tfoot>tr>td:last-child {
   padding-right: 24px;
 }
 
-.c9 > tbody > tr > td {
+.c9>tbody>tr>td {
   vertical-align: middle;
 }
 
-.c9 > thead > tr > th {
+.c9>thead>tr>th {
   color: #FFFFFF;
   font-weight: 600;
   font-size: 14px;
@@ -461,11 +461,11 @@ exports[`failed state 1`] = `
   white-space: nowrap;
 }
 
-.c9 > thead > tr > th svg {
+.c9>thead>tr>th svg {
   height: 12px;
 }
 
-.c9 > tbody > tr > td {
+.c9>tbody>tr>td {
   color: #FFFFFF;
   font-weight: 300;
   font-size: 14px;
@@ -485,7 +485,7 @@ exports[`failed state 1`] = `
 }
 
 .c9 tbody tr:hover:after {
-  box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.12),0px 4px 5px 0px rgba(0,0,0,0.14),0px 2px 4px -1px rgba(0,0,0,0.20);
+  box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.12),0px 4px 5px 0px rgba(0, 0, 0, 0.14),0px 2px 4px -1px rgba(0, 0, 0, 0.20);
   content: '';
   position: absolute;
   top: 0;
@@ -495,7 +495,7 @@ exports[`failed state 1`] = `
   height: 100%;
 }
 
-.c9 tbody tr:hover + tr {
+.c9 tbody tr:hover +tr {
   border-top: 2px solid rgba(0,0,0,0);
 }
 
@@ -515,20 +515,20 @@ exports[`failed state 1`] = `
   outline: none;
   min-height: 40px;
   height: fit-content;
-  border: 1px solid rgba(255,255,255,0.54);
+  border: 1px solid rgba(255, 255, 255, 0.54);
   border-radius: 4px;
   background-color: transparent;
   box-shadow: none;
 }
 
 .c36 .react-select__control .react-select__dropdown-indicator {
-  color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
 }
 
 .c36 .react-select__control:hover,
 .c36 .react-select__control:focus,
 .c36 .react-select__control:active {
-  border: 1px solid rgba(255,255,255,0.72);
+  border: 1px solid rgba(255, 255, 255, 0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
@@ -549,7 +549,7 @@ exports[`failed state 1`] = `
 }
 
 .c36 .react-select__control--is-focused {
-  border-color: rgba(255,255,255,0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
@@ -563,7 +563,7 @@ exports[`failed state 1`] = `
 }
 
 .c36 .react-select__placeholder {
-  color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
 }
 
 .c36 .react-select__multi-value {
@@ -609,7 +609,7 @@ exports[`failed state 1`] = `
 }
 
 .c36 .react-select__clear-indicator {
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
 }
 
 .c36 .react-select__clear-indicator:hover,
@@ -625,7 +625,7 @@ exports[`failed state 1`] = `
 .c36 .react-select__menu {
   margin-top: 0px;
   background-color: #344179;
-  box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
+  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),0px 8px 10px 1px rgba(0, 0, 0, 0.14),0px 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 
 .c36 .react-select__menu .react-select__menu-list::-webkit-scrollbar-thumb {
@@ -642,17 +642,17 @@ exports[`failed state 1`] = `
 }
 
 .c36 .react-select__control--is-disabled {
-  color: rgba(255,255,255,0.36);
-  border: 1px solid rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
+  border: 1px solid rgba(255, 255, 255, 0.36);
 }
 
 .c36 .react-select__control--is-disabled .react-select__single-value,
 .c36 .react-select__control--is-disabled .react-select__placeholder {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
 }
 
 .c36 .react-select__control--is-disabled .react-select__indicator {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
 }
 
 .c36 .react-select__input {
@@ -677,7 +677,7 @@ exports[`failed state 1`] = `
 
 .c30 {
   height: 40px;
-  border: 1px solid rgba(255,255,255,0.54);
+  border: 1px solid rgba(255, 255, 255, 0.54);
   border-radius: 4px;
   padding: 0 8px;
   align-items: center;
@@ -687,7 +687,7 @@ exports[`failed state 1`] = `
 
 .c30:hover {
   background-color: rgba(255,255,255,0.07);
-  border: 1px solid rgba(255,255,255,0.72);
+  border: 1px solid rgba(255, 255, 255, 0.72);
 }
 
 .c27 {
@@ -862,15 +862,15 @@ exports[`failed state 1`] = `
 
 .c10 {
   border-radius: 8px;
-  box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px rgba(0,0,0,0.14),0px 1px 3px rgba(0,0,0,0.12);
+  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),0px 1px 1px rgba(0, 0, 0, 0.14),0px 1px 3px rgba(0, 0, 0, 0.12);
   overflow: hidden;
 }
 
-.c10 > tbody > tr > td {
+.c10>tbody>tr>td {
   vertical-align: middle;
 }
 
-.c10 > thead > tr > th {
+.c10>thead>tr>th {
   background: rgba(255,255,255,0.13);
 }
 
@@ -885,12 +885,12 @@ exports[`failed state 1`] = `
 
 .c12 {
   cursor: pointer;
-  background-color: rgba(255,255,255,0.07);
+  background-color: rgba(255, 255, 255, 0.07);
   border-radius: 2px;
 }
 
 .c12:hover {
-  background-color: rgba(255,255,255,0.13);
+  background-color: rgba(255, 255, 255, 0.13);
 }
 
 .c44 {
@@ -906,13 +906,13 @@ exports[`failed state 1`] = `
 }
 
 .c38::placeholder {
-  color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
 }
 
 .c38:hover,
 .c38:focus,
 .c38:active {
-  border: 1px solid rgba(255,255,255,0.72);
+  border: 1px solid rgba(255, 255, 255, 0.72);
 }
 
 <div>
@@ -1544,7 +1544,7 @@ exports[`loaded state 1`] = `
   color: #FFFFFF;
   border: 1px solid;
   border-radius: 4px;
-  border-color: rgba(255,255,255,0.54);
+  border-color: rgba(255, 255, 255, 0.54);
 }
 
 .c46 {
@@ -1581,8 +1581,8 @@ exports[`loaded state 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: transparent;
-  color: rgba(255,255,255,0.54);
-  border-color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
+  border-color: rgba(255, 255, 255, 0.54);
   border-width: 1.5px;
   padding: 0 6.5px;
   min-height: 24px;
@@ -1595,8 +1595,8 @@ exports[`loaded state 1`] = `
 .c24:focus-visible,
 .teleport-button__force-focus-visible .c24 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -1618,7 +1618,7 @@ exports[`loaded state 1`] = `
 
 .c24:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -1670,7 +1670,7 @@ exports[`loaded state 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c51:active,
@@ -1682,7 +1682,7 @@ exports[`loaded state 1`] = `
 
 .c51:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -1708,7 +1708,7 @@ exports[`loaded state 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
   border-color: transparent;
   border-width: 1.5px;
   padding: 0 30.5px;
@@ -1723,8 +1723,8 @@ exports[`loaded state 1`] = `
 .c52:focus-visible,
 .teleport-button__force-focus-visible .c52 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -1746,7 +1746,7 @@ exports[`loaded state 1`] = `
 
 .c52:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -1773,7 +1773,7 @@ exports[`loaded state 1`] = `
 }
 
 .c25:disabled {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
   cursor: default;
 }
 
@@ -1807,7 +1807,7 @@ exports[`loaded state 1`] = `
 }
 
 .c29:disabled {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
   cursor: default;
 }
 
@@ -1944,39 +1944,39 @@ exports[`loaded state 1`] = `
   width: 100%;
 }
 
-.c8 > thead > tr > th,
-.c8 > tbody > tr > th,
-.c8 > tfoot > tr > th,
-.c8 > thead > tr > td,
-.c8 > tbody > tr > td,
-.c8 > tfoot > tr > td {
+.c8>thead>tr>th,
+.c8>tbody>tr>th,
+.c8>tfoot>tr>th,
+.c8>thead>tr>td,
+.c8>tbody>tr>td,
+.c8>tfoot>tr>td {
   padding: 8px 8px;
   vertical-align: middle;
 }
 
-.c8 > thead > tr > th:first-child,
-.c8 > tbody > tr > th:first-child,
-.c8 > tfoot > tr > th:first-child,
-.c8 > thead > tr > td:first-child,
-.c8 > tbody > tr > td:first-child,
-.c8 > tfoot > tr > td:first-child {
+.c8>thead>tr>th:first-child,
+.c8>tbody>tr>th:first-child,
+.c8>tfoot>tr>th:first-child,
+.c8>thead>tr>td:first-child,
+.c8>tbody>tr>td:first-child,
+.c8>tfoot>tr>td:first-child {
   padding-left: 24px;
 }
 
-.c8 > thead > tr > th:last-child,
-.c8 > tbody > tr > th:last-child,
-.c8 > tfoot > tr > th:last-child,
-.c8 > thead > tr > td:last-child,
-.c8 > tbody > tr > td:last-child,
-.c8 > tfoot > tr > td:last-child {
+.c8>thead>tr>th:last-child,
+.c8>tbody>tr>th:last-child,
+.c8>tfoot>tr>th:last-child,
+.c8>thead>tr>td:last-child,
+.c8>tbody>tr>td:last-child,
+.c8>tfoot>tr>td:last-child {
   padding-right: 24px;
 }
 
-.c8 > tbody > tr > td {
+.c8>tbody>tr>td {
   vertical-align: middle;
 }
 
-.c8 > thead > tr > th {
+.c8>thead>tr>th {
   color: #FFFFFF;
   font-weight: 600;
   font-size: 14px;
@@ -1988,11 +1988,11 @@ exports[`loaded state 1`] = `
   white-space: nowrap;
 }
 
-.c8 > thead > tr > th svg {
+.c8>thead>tr>th svg {
   height: 12px;
 }
 
-.c8 > tbody > tr > td {
+.c8>tbody>tr>td {
   color: #FFFFFF;
   font-weight: 300;
   font-size: 14px;
@@ -2012,7 +2012,7 @@ exports[`loaded state 1`] = `
 }
 
 .c8 tbody tr:hover:after {
-  box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.12),0px 4px 5px 0px rgba(0,0,0,0.14),0px 2px 4px -1px rgba(0,0,0,0.20);
+  box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.12),0px 4px 5px 0px rgba(0, 0, 0, 0.14),0px 2px 4px -1px rgba(0, 0, 0, 0.20);
   content: '';
   position: absolute;
   top: 0;
@@ -2022,7 +2022,7 @@ exports[`loaded state 1`] = `
   height: 100%;
 }
 
-.c8 tbody tr:hover + tr {
+.c8 tbody tr:hover +tr {
   border-top: 2px solid rgba(0,0,0,0);
 }
 
@@ -2042,20 +2042,20 @@ exports[`loaded state 1`] = `
   outline: none;
   min-height: 40px;
   height: fit-content;
-  border: 1px solid rgba(255,255,255,0.54);
+  border: 1px solid rgba(255, 255, 255, 0.54);
   border-radius: 4px;
   background-color: transparent;
   box-shadow: none;
 }
 
 .c43 .react-select__control .react-select__dropdown-indicator {
-  color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
 }
 
 .c43 .react-select__control:hover,
 .c43 .react-select__control:focus,
 .c43 .react-select__control:active {
-  border: 1px solid rgba(255,255,255,0.72);
+  border: 1px solid rgba(255, 255, 255, 0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
@@ -2076,7 +2076,7 @@ exports[`loaded state 1`] = `
 }
 
 .c43 .react-select__control--is-focused {
-  border-color: rgba(255,255,255,0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
@@ -2090,7 +2090,7 @@ exports[`loaded state 1`] = `
 }
 
 .c43 .react-select__placeholder {
-  color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
 }
 
 .c43 .react-select__multi-value {
@@ -2136,7 +2136,7 @@ exports[`loaded state 1`] = `
 }
 
 .c43 .react-select__clear-indicator {
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
 }
 
 .c43 .react-select__clear-indicator:hover,
@@ -2152,7 +2152,7 @@ exports[`loaded state 1`] = `
 .c43 .react-select__menu {
   margin-top: 0px;
   background-color: #344179;
-  box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
+  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),0px 8px 10px 1px rgba(0, 0, 0, 0.14),0px 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 
 .c43 .react-select__menu .react-select__menu-list::-webkit-scrollbar-thumb {
@@ -2169,17 +2169,17 @@ exports[`loaded state 1`] = `
 }
 
 .c43 .react-select__control--is-disabled {
-  color: rgba(255,255,255,0.36);
-  border: 1px solid rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
+  border: 1px solid rgba(255, 255, 255, 0.36);
 }
 
 .c43 .react-select__control--is-disabled .react-select__single-value,
 .c43 .react-select__control--is-disabled .react-select__placeholder {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
 }
 
 .c43 .react-select__control--is-disabled .react-select__indicator {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
 }
 
 .c43 .react-select__input {
@@ -2204,7 +2204,7 @@ exports[`loaded state 1`] = `
 
 .c38 {
   height: 40px;
-  border: 1px solid rgba(255,255,255,0.54);
+  border: 1px solid rgba(255, 255, 255, 0.54);
   border-radius: 4px;
   padding: 0 8px;
   align-items: center;
@@ -2214,7 +2214,7 @@ exports[`loaded state 1`] = `
 
 .c38:hover {
   background-color: rgba(255,255,255,0.07);
-  border: 1px solid rgba(255,255,255,0.72);
+  border: 1px solid rgba(255, 255, 255, 0.72);
 }
 
 .c35 {
@@ -2393,15 +2393,15 @@ exports[`loaded state 1`] = `
 
 .c9 {
   border-radius: 8px;
-  box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px rgba(0,0,0,0.14),0px 1px 3px rgba(0,0,0,0.12);
+  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),0px 1px 1px rgba(0, 0, 0, 0.14),0px 1px 3px rgba(0, 0, 0, 0.12);
   overflow: hidden;
 }
 
-.c9 > tbody > tr > td {
+.c9>tbody>tr>td {
   vertical-align: middle;
 }
 
-.c9 > thead > tr > th {
+.c9>thead>tr>th {
   background: rgba(255,255,255,0.13);
 }
 
@@ -2416,12 +2416,12 @@ exports[`loaded state 1`] = `
 
 .c11 {
   cursor: pointer;
-  background-color: rgba(255,255,255,0.07);
+  background-color: rgba(255, 255, 255, 0.07);
   border-radius: 2px;
 }
 
 .c11:hover {
-  background-color: rgba(255,255,255,0.13);
+  background-color: rgba(255, 255, 255, 0.13);
 }
 
 .c50 {
@@ -2437,13 +2437,13 @@ exports[`loaded state 1`] = `
 }
 
 .c45::placeholder {
-  color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
 }
 
 .c45:hover,
 .c45:focus,
 .c45:active {
-  border: 1px solid rgba(255,255,255,0.72);
+  border: 1px solid rgba(255, 255, 255, 0.72);
 }
 
 <div>
@@ -3356,7 +3356,7 @@ exports[`success state 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c11:active,
@@ -3368,7 +3368,7 @@ exports[`success state 1`] = `
 
 .c11:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -3394,7 +3394,7 @@ exports[`success state 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: transparent;
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
   border-color: transparent;
   border-width: 1.5px;
   padding: 0 30.5px;
@@ -3407,8 +3407,8 @@ exports[`success state 1`] = `
 .c12:focus-visible,
 .teleport-button__force-focus-visible .c12 {
   background-color: transparent;
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -3417,7 +3417,7 @@ exports[`success state 1`] = `
 .teleport-button__force-hover .c12 {
   background-color: rgba(255,255,255,0.07);
   border-color: transparent;
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
   box-shadow: none;
 }
 
@@ -3430,7 +3430,7 @@ exports[`success state 1`] = `
 
 .c12:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -3453,7 +3453,7 @@ exports[`success state 1`] = `
   font-size: 14px;
   line-height: 24px;
   margin: 0px;
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
 }
 
 .c9 {
diff --git a/web/packages/shared/components/AccessRequests/NewRequest/ResourceList/__snapshots__/ResourceList.story.test.tsx.snap b/web/packages/shared/components/AccessRequests/NewRequest/ResourceList/__snapshots__/ResourceList.story.test.tsx.snap
index 1e894efef1c82..c588262fbffe9 100644
--- a/web/packages/shared/components/AccessRequests/NewRequest/ResourceList/__snapshots__/ResourceList.story.test.tsx.snap
+++ b/web/packages/shared/components/AccessRequests/NewRequest/ResourceList/__snapshots__/ResourceList.story.test.tsx.snap
@@ -25,8 +25,8 @@ exports[`render Apps 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: transparent;
-  color: rgba(255,255,255,0.54);
-  border-color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
+  border-color: rgba(255, 255, 255, 0.54);
   border-width: 1.5px;
   padding: 0 6.5px;
   min-height: 24px;
@@ -40,8 +40,8 @@ exports[`render Apps 1`] = `
 .c8:focus-visible,
 .teleport-button__force-focus-visible .c8 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -63,7 +63,7 @@ exports[`render Apps 1`] = `
 
 .c8:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -103,39 +103,39 @@ exports[`render Apps 1`] = `
   width: 100%;
 }
 
-.c2 > thead > tr > th,
-.c2 > tbody > tr > th,
-.c2 > tfoot > tr > th,
-.c2 > thead > tr > td,
-.c2 > tbody > tr > td,
-.c2 > tfoot > tr > td {
+.c2>thead>tr>th,
+.c2>tbody>tr>th,
+.c2>tfoot>tr>th,
+.c2>thead>tr>td,
+.c2>tbody>tr>td,
+.c2>tfoot>tr>td {
   padding: 8px 8px;
   vertical-align: middle;
 }
 
-.c2 > thead > tr > th:first-child,
-.c2 > tbody > tr > th:first-child,
-.c2 > tfoot > tr > th:first-child,
-.c2 > thead > tr > td:first-child,
-.c2 > tbody > tr > td:first-child,
-.c2 > tfoot > tr > td:first-child {
+.c2>thead>tr>th:first-child,
+.c2>tbody>tr>th:first-child,
+.c2>tfoot>tr>th:first-child,
+.c2>thead>tr>td:first-child,
+.c2>tbody>tr>td:first-child,
+.c2>tfoot>tr>td:first-child {
   padding-left: 24px;
 }
 
-.c2 > thead > tr > th:last-child,
-.c2 > tbody > tr > th:last-child,
-.c2 > tfoot > tr > th:last-child,
-.c2 > thead > tr > td:last-child,
-.c2 > tbody > tr > td:last-child,
-.c2 > tfoot > tr > td:last-child {
+.c2>thead>tr>th:last-child,
+.c2>tbody>tr>th:last-child,
+.c2>tfoot>tr>th:last-child,
+.c2>thead>tr>td:last-child,
+.c2>tbody>tr>td:last-child,
+.c2>tfoot>tr>td:last-child {
   padding-right: 24px;
 }
 
-.c2 > tbody > tr > td {
+.c2>tbody>tr>td {
   vertical-align: middle;
 }
 
-.c2 > thead > tr > th {
+.c2>thead>tr>th {
   color: #FFFFFF;
   font-weight: 600;
   font-size: 14px;
@@ -147,11 +147,11 @@ exports[`render Apps 1`] = `
   white-space: nowrap;
 }
 
-.c2 > thead > tr > th svg {
+.c2>thead>tr>th svg {
   height: 12px;
 }
 
-.c2 > tbody > tr > td {
+.c2>tbody>tr>td {
   color: #FFFFFF;
   font-weight: 300;
   font-size: 14px;
@@ -171,7 +171,7 @@ exports[`render Apps 1`] = `
 }
 
 .c2 tbody tr:hover:after {
-  box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.12),0px 4px 5px 0px rgba(0,0,0,0.14),0px 2px 4px -1px rgba(0,0,0,0.20);
+  box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.12),0px 4px 5px 0px rgba(0, 0, 0, 0.14),0px 2px 4px -1px rgba(0, 0, 0, 0.20);
   content: '';
   position: absolute;
   top: 0;
@@ -181,7 +181,7 @@ exports[`render Apps 1`] = `
   height: 100%;
 }
 
-.c2 tbody tr:hover + tr {
+.c2 tbody tr:hover +tr {
   border-top: 2px solid rgba(0,0,0,0);
 }
 
@@ -193,7 +193,7 @@ exports[`render Apps 1`] = `
   background-color: rgba(255,255,255,0.13);
 }
 
-.c3 > tbody > tr > td {
+.c3>tbody>tr>td {
   vertical-align: middle;
 }
 
@@ -342,8 +342,8 @@ exports[`render Databases 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: transparent;
-  color: rgba(255,255,255,0.54);
-  border-color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
+  border-color: rgba(255, 255, 255, 0.54);
   border-width: 1.5px;
   padding: 0 6.5px;
   min-height: 24px;
@@ -357,8 +357,8 @@ exports[`render Databases 1`] = `
 .c8:focus-visible,
 .teleport-button__force-focus-visible .c8 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -380,7 +380,7 @@ exports[`render Databases 1`] = `
 
 .c8:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -420,39 +420,39 @@ exports[`render Databases 1`] = `
   width: 100%;
 }
 
-.c2 > thead > tr > th,
-.c2 > tbody > tr > th,
-.c2 > tfoot > tr > th,
-.c2 > thead > tr > td,
-.c2 > tbody > tr > td,
-.c2 > tfoot > tr > td {
+.c2>thead>tr>th,
+.c2>tbody>tr>th,
+.c2>tfoot>tr>th,
+.c2>thead>tr>td,
+.c2>tbody>tr>td,
+.c2>tfoot>tr>td {
   padding: 8px 8px;
   vertical-align: middle;
 }
 
-.c2 > thead > tr > th:first-child,
-.c2 > tbody > tr > th:first-child,
-.c2 > tfoot > tr > th:first-child,
-.c2 > thead > tr > td:first-child,
-.c2 > tbody > tr > td:first-child,
-.c2 > tfoot > tr > td:first-child {
+.c2>thead>tr>th:first-child,
+.c2>tbody>tr>th:first-child,
+.c2>tfoot>tr>th:first-child,
+.c2>thead>tr>td:first-child,
+.c2>tbody>tr>td:first-child,
+.c2>tfoot>tr>td:first-child {
   padding-left: 24px;
 }
 
-.c2 > thead > tr > th:last-child,
-.c2 > tbody > tr > th:last-child,
-.c2 > tfoot > tr > th:last-child,
-.c2 > thead > tr > td:last-child,
-.c2 > tbody > tr > td:last-child,
-.c2 > tfoot > tr > td:last-child {
+.c2>thead>tr>th:last-child,
+.c2>tbody>tr>th:last-child,
+.c2>tfoot>tr>th:last-child,
+.c2>thead>tr>td:last-child,
+.c2>tbody>tr>td:last-child,
+.c2>tfoot>tr>td:last-child {
   padding-right: 24px;
 }
 
-.c2 > tbody > tr > td {
+.c2>tbody>tr>td {
   vertical-align: middle;
 }
 
-.c2 > thead > tr > th {
+.c2>thead>tr>th {
   color: #FFFFFF;
   font-weight: 600;
   font-size: 14px;
@@ -464,11 +464,11 @@ exports[`render Databases 1`] = `
   white-space: nowrap;
 }
 
-.c2 > thead > tr > th svg {
+.c2>thead>tr>th svg {
   height: 12px;
 }
 
-.c2 > tbody > tr > td {
+.c2>tbody>tr>td {
   color: #FFFFFF;
   font-weight: 300;
   font-size: 14px;
@@ -488,7 +488,7 @@ exports[`render Databases 1`] = `
 }
 
 .c2 tbody tr:hover:after {
-  box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.12),0px 4px 5px 0px rgba(0,0,0,0.14),0px 2px 4px -1px rgba(0,0,0,0.20);
+  box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.12),0px 4px 5px 0px rgba(0, 0, 0, 0.14),0px 2px 4px -1px rgba(0, 0, 0, 0.20);
   content: '';
   position: absolute;
   top: 0;
@@ -498,7 +498,7 @@ exports[`render Databases 1`] = `
   height: 100%;
 }
 
-.c2 tbody tr:hover + tr {
+.c2 tbody tr:hover +tr {
   border-top: 2px solid rgba(0,0,0,0);
 }
 
@@ -510,7 +510,7 @@ exports[`render Databases 1`] = `
   background-color: rgba(255,255,255,0.13);
 }
 
-.c3 > tbody > tr > td {
+.c3>tbody>tr>td {
   vertical-align: middle;
 }
 
@@ -679,8 +679,8 @@ exports[`render Desktops 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: transparent;
-  color: rgba(255,255,255,0.54);
-  border-color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
+  border-color: rgba(255, 255, 255, 0.54);
   border-width: 1.5px;
   padding: 0 6.5px;
   min-height: 24px;
@@ -694,8 +694,8 @@ exports[`render Desktops 1`] = `
 .c8:focus-visible,
 .teleport-button__force-focus-visible .c8 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -717,7 +717,7 @@ exports[`render Desktops 1`] = `
 
 .c8:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -757,39 +757,39 @@ exports[`render Desktops 1`] = `
   width: 100%;
 }
 
-.c2 > thead > tr > th,
-.c2 > tbody > tr > th,
-.c2 > tfoot > tr > th,
-.c2 > thead > tr > td,
-.c2 > tbody > tr > td,
-.c2 > tfoot > tr > td {
+.c2>thead>tr>th,
+.c2>tbody>tr>th,
+.c2>tfoot>tr>th,
+.c2>thead>tr>td,
+.c2>tbody>tr>td,
+.c2>tfoot>tr>td {
   padding: 8px 8px;
   vertical-align: middle;
 }
 
-.c2 > thead > tr > th:first-child,
-.c2 > tbody > tr > th:first-child,
-.c2 > tfoot > tr > th:first-child,
-.c2 > thead > tr > td:first-child,
-.c2 > tbody > tr > td:first-child,
-.c2 > tfoot > tr > td:first-child {
+.c2>thead>tr>th:first-child,
+.c2>tbody>tr>th:first-child,
+.c2>tfoot>tr>th:first-child,
+.c2>thead>tr>td:first-child,
+.c2>tbody>tr>td:first-child,
+.c2>tfoot>tr>td:first-child {
   padding-left: 24px;
 }
 
-.c2 > thead > tr > th:last-child,
-.c2 > tbody > tr > th:last-child,
-.c2 > tfoot > tr > th:last-child,
-.c2 > thead > tr > td:last-child,
-.c2 > tbody > tr > td:last-child,
-.c2 > tfoot > tr > td:last-child {
+.c2>thead>tr>th:last-child,
+.c2>tbody>tr>th:last-child,
+.c2>tfoot>tr>th:last-child,
+.c2>thead>tr>td:last-child,
+.c2>tbody>tr>td:last-child,
+.c2>tfoot>tr>td:last-child {
   padding-right: 24px;
 }
 
-.c2 > tbody > tr > td {
+.c2>tbody>tr>td {
   vertical-align: middle;
 }
 
-.c2 > thead > tr > th {
+.c2>thead>tr>th {
   color: #FFFFFF;
   font-weight: 600;
   font-size: 14px;
@@ -801,11 +801,11 @@ exports[`render Desktops 1`] = `
   white-space: nowrap;
 }
 
-.c2 > thead > tr > th svg {
+.c2>thead>tr>th svg {
   height: 12px;
 }
 
-.c2 > tbody > tr > td {
+.c2>tbody>tr>td {
   color: #FFFFFF;
   font-weight: 300;
   font-size: 14px;
@@ -825,7 +825,7 @@ exports[`render Desktops 1`] = `
 }
 
 .c2 tbody tr:hover:after {
-  box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.12),0px 4px 5px 0px rgba(0,0,0,0.14),0px 2px 4px -1px rgba(0,0,0,0.20);
+  box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.12),0px 4px 5px 0px rgba(0, 0, 0, 0.14),0px 2px 4px -1px rgba(0, 0, 0, 0.20);
   content: '';
   position: absolute;
   top: 0;
@@ -835,7 +835,7 @@ exports[`render Desktops 1`] = `
   height: 100%;
 }
 
-.c2 tbody tr:hover + tr {
+.c2 tbody tr:hover +tr {
   border-top: 2px solid rgba(0,0,0,0);
 }
 
@@ -847,7 +847,7 @@ exports[`render Desktops 1`] = `
   background-color: rgba(255,255,255,0.13);
 }
 
-.c3 > tbody > tr > td {
+.c3>tbody>tr>td {
   vertical-align: middle;
 }
 
@@ -968,8 +968,8 @@ exports[`render Kubes 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: transparent;
-  color: rgba(255,255,255,0.54);
-  border-color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
+  border-color: rgba(255, 255, 255, 0.54);
   border-width: 1.5px;
   padding: 0 6.5px;
   min-height: 24px;
@@ -983,8 +983,8 @@ exports[`render Kubes 1`] = `
 .c8:focus-visible,
 .teleport-button__force-focus-visible .c8 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -1006,7 +1006,7 @@ exports[`render Kubes 1`] = `
 
 .c8:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -1046,39 +1046,39 @@ exports[`render Kubes 1`] = `
   width: 100%;
 }
 
-.c2 > thead > tr > th,
-.c2 > tbody > tr > th,
-.c2 > tfoot > tr > th,
-.c2 > thead > tr > td,
-.c2 > tbody > tr > td,
-.c2 > tfoot > tr > td {
+.c2>thead>tr>th,
+.c2>tbody>tr>th,
+.c2>tfoot>tr>th,
+.c2>thead>tr>td,
+.c2>tbody>tr>td,
+.c2>tfoot>tr>td {
   padding: 8px 8px;
   vertical-align: middle;
 }
 
-.c2 > thead > tr > th:first-child,
-.c2 > tbody > tr > th:first-child,
-.c2 > tfoot > tr > th:first-child,
-.c2 > thead > tr > td:first-child,
-.c2 > tbody > tr > td:first-child,
-.c2 > tfoot > tr > td:first-child {
+.c2>thead>tr>th:first-child,
+.c2>tbody>tr>th:first-child,
+.c2>tfoot>tr>th:first-child,
+.c2>thead>tr>td:first-child,
+.c2>tbody>tr>td:first-child,
+.c2>tfoot>tr>td:first-child {
   padding-left: 24px;
 }
 
-.c2 > thead > tr > th:last-child,
-.c2 > tbody > tr > th:last-child,
-.c2 > tfoot > tr > th:last-child,
-.c2 > thead > tr > td:last-child,
-.c2 > tbody > tr > td:last-child,
-.c2 > tfoot > tr > td:last-child {
+.c2>thead>tr>th:last-child,
+.c2>tbody>tr>th:last-child,
+.c2>tfoot>tr>th:last-child,
+.c2>thead>tr>td:last-child,
+.c2>tbody>tr>td:last-child,
+.c2>tfoot>tr>td:last-child {
   padding-right: 24px;
 }
 
-.c2 > tbody > tr > td {
+.c2>tbody>tr>td {
   vertical-align: middle;
 }
 
-.c2 > thead > tr > th {
+.c2>thead>tr>th {
   color: #FFFFFF;
   font-weight: 600;
   font-size: 14px;
@@ -1090,11 +1090,11 @@ exports[`render Kubes 1`] = `
   white-space: nowrap;
 }
 
-.c2 > thead > tr > th svg {
+.c2>thead>tr>th svg {
   height: 12px;
 }
 
-.c2 > tbody > tr > td {
+.c2>tbody>tr>td {
   color: #FFFFFF;
   font-weight: 300;
   font-size: 14px;
@@ -1114,7 +1114,7 @@ exports[`render Kubes 1`] = `
 }
 
 .c2 tbody tr:hover:after {
-  box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.12),0px 4px 5px 0px rgba(0,0,0,0.14),0px 2px 4px -1px rgba(0,0,0,0.20);
+  box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.12),0px 4px 5px 0px rgba(0, 0, 0, 0.14),0px 2px 4px -1px rgba(0, 0, 0, 0.20);
   content: '';
   position: absolute;
   top: 0;
@@ -1124,7 +1124,7 @@ exports[`render Kubes 1`] = `
   height: 100%;
 }
 
-.c2 tbody tr:hover + tr {
+.c2 tbody tr:hover +tr {
   border-top: 2px solid rgba(0,0,0,0);
 }
 
@@ -1136,7 +1136,7 @@ exports[`render Kubes 1`] = `
   background-color: rgba(255,255,255,0.13);
 }
 
-.c3 > tbody > tr > td {
+.c3>tbody>tr>td {
   vertical-align: middle;
 }
 
@@ -1249,8 +1249,8 @@ exports[`render Nodes 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: transparent;
-  color: rgba(255,255,255,0.54);
-  border-color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
+  border-color: rgba(255, 255, 255, 0.54);
   border-width: 1.5px;
   padding: 0 6.5px;
   min-height: 24px;
@@ -1264,8 +1264,8 @@ exports[`render Nodes 1`] = `
 .c8:focus-visible,
 .teleport-button__force-focus-visible .c8 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -1287,7 +1287,7 @@ exports[`render Nodes 1`] = `
 
 .c8:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -1327,39 +1327,39 @@ exports[`render Nodes 1`] = `
   width: 100%;
 }
 
-.c2 > thead > tr > th,
-.c2 > tbody > tr > th,
-.c2 > tfoot > tr > th,
-.c2 > thead > tr > td,
-.c2 > tbody > tr > td,
-.c2 > tfoot > tr > td {
+.c2>thead>tr>th,
+.c2>tbody>tr>th,
+.c2>tfoot>tr>th,
+.c2>thead>tr>td,
+.c2>tbody>tr>td,
+.c2>tfoot>tr>td {
   padding: 8px 8px;
   vertical-align: middle;
 }
 
-.c2 > thead > tr > th:first-child,
-.c2 > tbody > tr > th:first-child,
-.c2 > tfoot > tr > th:first-child,
-.c2 > thead > tr > td:first-child,
-.c2 > tbody > tr > td:first-child,
-.c2 > tfoot > tr > td:first-child {
+.c2>thead>tr>th:first-child,
+.c2>tbody>tr>th:first-child,
+.c2>tfoot>tr>th:first-child,
+.c2>thead>tr>td:first-child,
+.c2>tbody>tr>td:first-child,
+.c2>tfoot>tr>td:first-child {
   padding-left: 24px;
 }
 
-.c2 > thead > tr > th:last-child,
-.c2 > tbody > tr > th:last-child,
-.c2 > tfoot > tr > th:last-child,
-.c2 > thead > tr > td:last-child,
-.c2 > tbody > tr > td:last-child,
-.c2 > tfoot > tr > td:last-child {
+.c2>thead>tr>th:last-child,
+.c2>tbody>tr>th:last-child,
+.c2>tfoot>tr>th:last-child,
+.c2>thead>tr>td:last-child,
+.c2>tbody>tr>td:last-child,
+.c2>tfoot>tr>td:last-child {
   padding-right: 24px;
 }
 
-.c2 > tbody > tr > td {
+.c2>tbody>tr>td {
   vertical-align: middle;
 }
 
-.c2 > thead > tr > th {
+.c2>thead>tr>th {
   color: #FFFFFF;
   font-weight: 600;
   font-size: 14px;
@@ -1371,11 +1371,11 @@ exports[`render Nodes 1`] = `
   white-space: nowrap;
 }
 
-.c2 > thead > tr > th svg {
+.c2>thead>tr>th svg {
   height: 12px;
 }
 
-.c2 > tbody > tr > td {
+.c2>tbody>tr>td {
   color: #FFFFFF;
   font-weight: 300;
   font-size: 14px;
@@ -1395,7 +1395,7 @@ exports[`render Nodes 1`] = `
 }
 
 .c2 tbody tr:hover:after {
-  box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.12),0px 4px 5px 0px rgba(0,0,0,0.14),0px 2px 4px -1px rgba(0,0,0,0.20);
+  box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.12),0px 4px 5px 0px rgba(0, 0, 0, 0.14),0px 2px 4px -1px rgba(0, 0, 0, 0.20);
   content: '';
   position: absolute;
   top: 0;
@@ -1405,7 +1405,7 @@ exports[`render Nodes 1`] = `
   height: 100%;
 }
 
-.c2 tbody tr:hover + tr {
+.c2 tbody tr:hover +tr {
   border-top: 2px solid rgba(0,0,0,0);
 }
 
@@ -1417,7 +1417,7 @@ exports[`render Nodes 1`] = `
   background-color: rgba(255,255,255,0.13);
 }
 
-.c3 > tbody > tr > td {
+.c3>tbody>tr>td {
   vertical-align: middle;
 }
 
@@ -1549,8 +1549,8 @@ exports[`render Roles 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: transparent;
-  color: rgba(255,255,255,0.54);
-  border-color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
+  border-color: rgba(255, 255, 255, 0.54);
   border-width: 1.5px;
   padding: 0 6.5px;
   min-height: 24px;
@@ -1564,8 +1564,8 @@ exports[`render Roles 1`] = `
 .c19:focus-visible,
 .teleport-button__force-focus-visible .c19 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -1587,7 +1587,7 @@ exports[`render Roles 1`] = `
 
 .c19:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -1616,7 +1616,7 @@ exports[`render Roles 1`] = `
 }
 
 .c13:disabled {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
   cursor: default;
 }
 
@@ -1651,7 +1651,7 @@ exports[`render Roles 1`] = `
 }
 
 .c16:disabled {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
   cursor: default;
 }
 
@@ -1699,39 +1699,39 @@ exports[`render Roles 1`] = `
   width: 100%;
 }
 
-.c17 > thead > tr > th,
-.c17 > tbody > tr > th,
-.c17 > tfoot > tr > th,
-.c17 > thead > tr > td,
-.c17 > tbody > tr > td,
-.c17 > tfoot > tr > td {
+.c17>thead>tr>th,
+.c17>tbody>tr>th,
+.c17>tfoot>tr>th,
+.c17>thead>tr>td,
+.c17>tbody>tr>td,
+.c17>tfoot>tr>td {
   padding: 8px 8px;
   vertical-align: middle;
 }
 
-.c17 > thead > tr > th:first-child,
-.c17 > tbody > tr > th:first-child,
-.c17 > tfoot > tr > th:first-child,
-.c17 > thead > tr > td:first-child,
-.c17 > tbody > tr > td:first-child,
-.c17 > tfoot > tr > td:first-child {
+.c17>thead>tr>th:first-child,
+.c17>tbody>tr>th:first-child,
+.c17>tfoot>tr>th:first-child,
+.c17>thead>tr>td:first-child,
+.c17>tbody>tr>td:first-child,
+.c17>tfoot>tr>td:first-child {
   padding-left: 24px;
 }
 
-.c17 > thead > tr > th:last-child,
-.c17 > tbody > tr > th:last-child,
-.c17 > tfoot > tr > th:last-child,
-.c17 > thead > tr > td:last-child,
-.c17 > tbody > tr > td:last-child,
-.c17 > tfoot > tr > td:last-child {
+.c17>thead>tr>th:last-child,
+.c17>tbody>tr>th:last-child,
+.c17>tfoot>tr>th:last-child,
+.c17>thead>tr>td:last-child,
+.c17>tbody>tr>td:last-child,
+.c17>tfoot>tr>td:last-child {
   padding-right: 24px;
 }
 
-.c17 > tbody > tr > td {
+.c17>tbody>tr>td {
   vertical-align: middle;
 }
 
-.c17 > thead > tr > th {
+.c17>thead>tr>th {
   color: #FFFFFF;
   font-weight: 600;
   font-size: 14px;
@@ -1743,11 +1743,11 @@ exports[`render Roles 1`] = `
   white-space: nowrap;
 }
 
-.c17 > thead > tr > th svg {
+.c17>thead>tr>th svg {
   height: 12px;
 }
 
-.c17 > tbody > tr > td {
+.c17>tbody>tr>td {
   color: #FFFFFF;
   font-weight: 300;
   font-size: 14px;
@@ -1767,7 +1767,7 @@ exports[`render Roles 1`] = `
 }
 
 .c17 tbody tr:hover:after {
-  box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.12),0px 4px 5px 0px rgba(0,0,0,0.14),0px 2px 4px -1px rgba(0,0,0,0.20);
+  box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.12),0px 4px 5px 0px rgba(0, 0, 0, 0.14),0px 2px 4px -1px rgba(0, 0, 0, 0.20);
   content: '';
   position: absolute;
   top: 0;
@@ -1777,7 +1777,7 @@ exports[`render Roles 1`] = `
   height: 100%;
 }
 
-.c17 tbody tr:hover + tr {
+.c17 tbody tr:hover +tr {
   border-top: 2px solid rgba(0,0,0,0);
 }
 
@@ -1851,7 +1851,7 @@ exports[`render Roles 1`] = `
   padding-left: 24px;
 }
 
-.c18 > tbody > tr > td {
+.c18>tbody>tr>td {
   vertical-align: middle;
 }
 
@@ -2065,8 +2065,8 @@ exports[`render UserGroups 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: transparent;
-  color: rgba(255,255,255,0.54);
-  border-color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
+  border-color: rgba(255, 255, 255, 0.54);
   border-width: 1.5px;
   padding: 0 6.5px;
   min-height: 24px;
@@ -2080,8 +2080,8 @@ exports[`render UserGroups 1`] = `
 .c8:focus-visible,
 .teleport-button__force-focus-visible .c8 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -2103,7 +2103,7 @@ exports[`render UserGroups 1`] = `
 
 .c8:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -2143,39 +2143,39 @@ exports[`render UserGroups 1`] = `
   width: 100%;
 }
 
-.c2 > thead > tr > th,
-.c2 > tbody > tr > th,
-.c2 > tfoot > tr > th,
-.c2 > thead > tr > td,
-.c2 > tbody > tr > td,
-.c2 > tfoot > tr > td {
+.c2>thead>tr>th,
+.c2>tbody>tr>th,
+.c2>tfoot>tr>th,
+.c2>thead>tr>td,
+.c2>tbody>tr>td,
+.c2>tfoot>tr>td {
   padding: 8px 8px;
   vertical-align: middle;
 }
 
-.c2 > thead > tr > th:first-child,
-.c2 > tbody > tr > th:first-child,
-.c2 > tfoot > tr > th:first-child,
-.c2 > thead > tr > td:first-child,
-.c2 > tbody > tr > td:first-child,
-.c2 > tfoot > tr > td:first-child {
+.c2>thead>tr>th:first-child,
+.c2>tbody>tr>th:first-child,
+.c2>tfoot>tr>th:first-child,
+.c2>thead>tr>td:first-child,
+.c2>tbody>tr>td:first-child,
+.c2>tfoot>tr>td:first-child {
   padding-left: 24px;
 }
 
-.c2 > thead > tr > th:last-child,
-.c2 > tbody > tr > th:last-child,
-.c2 > tfoot > tr > th:last-child,
-.c2 > thead > tr > td:last-child,
-.c2 > tbody > tr > td:last-child,
-.c2 > tfoot > tr > td:last-child {
+.c2>thead>tr>th:last-child,
+.c2>tbody>tr>th:last-child,
+.c2>tfoot>tr>th:last-child,
+.c2>thead>tr>td:last-child,
+.c2>tbody>tr>td:last-child,
+.c2>tfoot>tr>td:last-child {
   padding-right: 24px;
 }
 
-.c2 > tbody > tr > td {
+.c2>tbody>tr>td {
   vertical-align: middle;
 }
 
-.c2 > thead > tr > th {
+.c2>thead>tr>th {
   color: #FFFFFF;
   font-weight: 600;
   font-size: 14px;
@@ -2187,11 +2187,11 @@ exports[`render UserGroups 1`] = `
   white-space: nowrap;
 }
 
-.c2 > thead > tr > th svg {
+.c2>thead>tr>th svg {
   height: 12px;
 }
 
-.c2 > tbody > tr > td {
+.c2>tbody>tr>td {
   color: #FFFFFF;
   font-weight: 300;
   font-size: 14px;
@@ -2211,7 +2211,7 @@ exports[`render UserGroups 1`] = `
 }
 
 .c2 tbody tr:hover:after {
-  box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.12),0px 4px 5px 0px rgba(0,0,0,0.14),0px 2px 4px -1px rgba(0,0,0,0.20);
+  box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.12),0px 4px 5px 0px rgba(0, 0, 0, 0.14),0px 2px 4px -1px rgba(0, 0, 0, 0.20);
   content: '';
   position: absolute;
   top: 0;
@@ -2221,7 +2221,7 @@ exports[`render UserGroups 1`] = `
   height: 100%;
 }
 
-.c2 tbody tr:hover + tr {
+.c2 tbody tr:hover +tr {
   border-top: 2px solid rgba(0,0,0,0);
 }
 
@@ -2233,7 +2233,7 @@ exports[`render UserGroups 1`] = `
   background-color: rgba(255,255,255,0.13);
 }
 
-.c3 > tbody > tr > td {
+.c3>tbody>tr>td {
   vertical-align: middle;
 }
 
diff --git a/web/packages/shared/components/AccessRequests/ReviewRequests/RequestView/RequestDelete/__snapshots__/RequestDelete.story.test.tsx.snap b/web/packages/shared/components/AccessRequests/ReviewRequests/RequestView/RequestDelete/__snapshots__/RequestDelete.story.test.tsx.snap
index f65afc71342a6..668a1def97812 100644
--- a/web/packages/shared/components/AccessRequests/ReviewRequests/RequestView/RequestDelete/__snapshots__/RequestDelete.story.test.tsx.snap
+++ b/web/packages/shared/components/AccessRequests/ReviewRequests/RequestView/RequestDelete/__snapshots__/RequestDelete.story.test.tsx.snap
@@ -80,7 +80,7 @@ exports[`approved role escalation 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c19:active,
@@ -92,7 +92,7 @@ exports[`approved role escalation 1`] = `
 
 .c19:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -143,7 +143,7 @@ exports[`approved role escalation 1`] = `
   background-color: #FF8179;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c20:active,
@@ -155,7 +155,7 @@ exports[`approved role escalation 1`] = `
 
 .c20:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -181,7 +181,7 @@ exports[`approved role escalation 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
   border-color: transparent;
   border-width: 1.5px;
   padding: 0 30.5px;
@@ -194,8 +194,8 @@ exports[`approved role escalation 1`] = `
 .c21:focus-visible,
 .teleport-button__force-focus-visible .c21 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -217,7 +217,7 @@ exports[`approved role escalation 1`] = `
 
 .c21:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -303,7 +303,7 @@ exports[`approved role escalation 1`] = `
   bottom: 0;
   top: 0;
   left: 0;
-  background-color: rgba(0,0,0,0.5);
+  background-color: rgba(0, 0, 0, 0.5);
   opacity: 1;
   touch-action: none;
 }
@@ -533,7 +533,7 @@ exports[`failed state 1`] = `
   background-color: #FF8179;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c14:active,
@@ -545,7 +545,7 @@ exports[`failed state 1`] = `
 
 .c14:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -571,7 +571,7 @@ exports[`failed state 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
   border-color: transparent;
   border-width: 1.5px;
   padding: 0 30.5px;
@@ -584,8 +584,8 @@ exports[`failed state 1`] = `
 .c15:focus-visible,
 .teleport-button__force-focus-visible .c15 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -607,7 +607,7 @@ exports[`failed state 1`] = `
 
 .c15:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -672,7 +672,7 @@ exports[`failed state 1`] = `
   bottom: 0;
   top: 0;
   left: 0;
-  background-color: rgba(0,0,0,0.5);
+  background-color: rgba(0, 0, 0, 0.5);
   opacity: 1;
   touch-action: none;
 }
@@ -856,7 +856,7 @@ exports[`loaded state 1`] = `
   background-color: #FF8179;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c13:active,
@@ -868,7 +868,7 @@ exports[`loaded state 1`] = `
 
 .c13:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -894,7 +894,7 @@ exports[`loaded state 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
   border-color: transparent;
   border-width: 1.5px;
   padding: 0 30.5px;
@@ -907,8 +907,8 @@ exports[`loaded state 1`] = `
 .c14:focus-visible,
 .teleport-button__force-focus-visible .c14 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -930,7 +930,7 @@ exports[`loaded state 1`] = `
 
 .c14:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -995,7 +995,7 @@ exports[`loaded state 1`] = `
   bottom: 0;
   top: 0;
   left: 0;
-  background-color: rgba(0,0,0,0.5);
+  background-color: rgba(0, 0, 0, 0.5);
   opacity: 1;
   touch-action: none;
 }
@@ -1173,7 +1173,7 @@ exports[`processing state 1`] = `
   background-color: #FF8179;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c13:active,
@@ -1185,7 +1185,7 @@ exports[`processing state 1`] = `
 
 .c13:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -1211,7 +1211,7 @@ exports[`processing state 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
   border-color: transparent;
   border-width: 1.5px;
   padding: 0 30.5px;
@@ -1224,8 +1224,8 @@ exports[`processing state 1`] = `
 .c14:focus-visible,
 .teleport-button__force-focus-visible .c14 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -1247,7 +1247,7 @@ exports[`processing state 1`] = `
 
 .c14:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -1312,7 +1312,7 @@ exports[`processing state 1`] = `
   bottom: 0;
   top: 0;
   left: 0;
-  background-color: rgba(0,0,0,0.5);
+  background-color: rgba(0, 0, 0, 0.5);
   opacity: 1;
   touch-action: none;
 }
diff --git a/web/packages/shared/components/AccessRequests/ReviewRequests/RequestView/RequestReview/__snapshots__/RequestReview.story.test.tsx.snap b/web/packages/shared/components/AccessRequests/ReviewRequests/RequestView/RequestReview/__snapshots__/RequestReview.story.test.tsx.snap
index bddae3ac3dae1..35b158ecb6ca8 100644
--- a/web/packages/shared/components/AccessRequests/ReviewRequests/RequestView/RequestReview/__snapshots__/RequestReview.story.test.tsx.snap
+++ b/web/packages/shared/components/AccessRequests/ReviewRequests/RequestView/RequestReview/__snapshots__/RequestReview.story.test.tsx.snap
@@ -103,7 +103,7 @@ exports[`failed state 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c20:active,
@@ -115,7 +115,7 @@ exports[`failed state 1`] = `
 
 .c20:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -162,7 +162,7 @@ exports[`failed state 1`] = `
 
 .c18 {
   appearance: none;
-  border: 1px solid rgba(255,255,255,0.54);
+  border: 1px solid rgba(255, 255, 255, 0.54);
   border-radius: 4px;
   box-sizing: border-box;
   min-height: 50px;
@@ -178,14 +178,14 @@ exports[`failed state 1`] = `
 }
 
 .c18::placeholder {
-  color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
   opacity: 1;
 }
 
 .c18:hover,
 .c18:focus,
 .c18:active {
-  border: 1px solid rgba(255,255,255,0.72);
+  border: 1px solid rgba(255, 255, 255, 0.72);
 }
 
 .c18:read-only {
@@ -193,8 +193,8 @@ exports[`failed state 1`] = `
 }
 
 .c18:disabled {
-  color: rgba(255,255,255,0.36);
-  border-color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
+  border-color: rgba(255, 255, 255, 0.36);
 }
 
 .c7 {
@@ -423,7 +423,7 @@ exports[`loaded state 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c19:active,
@@ -435,7 +435,7 @@ exports[`loaded state 1`] = `
 
 .c19:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -482,7 +482,7 @@ exports[`loaded state 1`] = `
 
 .c17 {
   appearance: none;
-  border: 1px solid rgba(255,255,255,0.54);
+  border: 1px solid rgba(255, 255, 255, 0.54);
   border-radius: 4px;
   box-sizing: border-box;
   min-height: 50px;
@@ -498,14 +498,14 @@ exports[`loaded state 1`] = `
 }
 
 .c17::placeholder {
-  color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
   opacity: 1;
 }
 
 .c17:hover,
 .c17:focus,
 .c17:active {
-  border: 1px solid rgba(255,255,255,0.72);
+  border: 1px solid rgba(255, 255, 255, 0.72);
 }
 
 .c17:read-only {
@@ -513,8 +513,8 @@ exports[`loaded state 1`] = `
 }
 
 .c17:disabled {
-  color: rgba(255,255,255,0.36);
-  border-color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
+  border-color: rgba(255, 255, 255, 0.36);
 }
 
 .c6 {
diff --git a/web/packages/shared/components/AccessRequests/ReviewRequests/RequestView/__snapshots__/RequestView.story.test.tsx.snap b/web/packages/shared/components/AccessRequests/ReviewRequests/RequestView/__snapshots__/RequestView.story.test.tsx.snap
index e87e8394d50cb..90292579e46c0 100644
--- a/web/packages/shared/components/AccessRequests/ReviewRequests/RequestView/__snapshots__/RequestView.story.test.tsx.snap
+++ b/web/packages/shared/components/AccessRequests/ReviewRequests/RequestView/__snapshots__/RequestView.story.test.tsx.snap
@@ -122,8 +122,8 @@ exports[`loaded approved role based request state 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: transparent;
-  color: rgba(255,255,255,0.54);
-  border-color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
+  border-color: rgba(255, 255, 255, 0.54);
   border-width: 1.5px;
   padding: 0 6.5px;
   min-height: 24px;
@@ -136,8 +136,8 @@ exports[`loaded approved role based request state 1`] = `
 .c15:focus-visible,
 .teleport-button__force-focus-visible .c15 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -159,7 +159,7 @@ exports[`loaded approved role based request state 1`] = `
 
 .c15:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -210,7 +210,7 @@ exports[`loaded approved role based request state 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c29:active,
@@ -222,7 +222,7 @@ exports[`loaded approved role based request state 1`] = `
 
 .c29:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -232,7 +232,7 @@ exports[`loaded approved role based request state 1`] = `
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
 }
 
 .c22 {
@@ -317,7 +317,7 @@ exports[`loaded approved role based request state 1`] = `
   font-size: 12px;
   line-height: 16px;
   margin: 0px;
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
 }
 
 .c11 {
@@ -448,7 +448,7 @@ exports[`loaded approved role based request state 1`] = `
 }
 
 .c3 {
-  box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px rgba(0,0,0,0.14),0px 1px 3px rgba(0,0,0,0.12);
+  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),0px 1px 1px rgba(0, 0, 0, 0.14),0px 1px 3px rgba(0, 0, 0, 0.12);
 }
 
 .c5 {
@@ -925,8 +925,8 @@ exports[`loaded denied role based request state 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: transparent;
-  color: rgba(255,255,255,0.54);
-  border-color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
+  border-color: rgba(255, 255, 255, 0.54);
   border-width: 1.5px;
   padding: 0 6.5px;
   min-height: 24px;
@@ -939,8 +939,8 @@ exports[`loaded denied role based request state 1`] = `
 .c15:focus-visible,
 .teleport-button__force-focus-visible .c15 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -962,7 +962,7 @@ exports[`loaded denied role based request state 1`] = `
 
 .c15:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -972,7 +972,7 @@ exports[`loaded denied role based request state 1`] = `
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
 }
 
 .c28 {
@@ -1057,7 +1057,7 @@ exports[`loaded denied role based request state 1`] = `
   font-size: 12px;
   line-height: 16px;
   margin: 0px;
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
 }
 
 .c11 {
@@ -1188,7 +1188,7 @@ exports[`loaded denied role based request state 1`] = `
 }
 
 .c3 {
-  box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px rgba(0,0,0,0.14),0px 1px 3px rgba(0,0,0,0.12);
+  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),0px 1px 1px rgba(0, 0, 0, 0.14),0px 1px 3px rgba(0, 0, 0, 0.12);
 }
 
 .c5 {
@@ -1625,8 +1625,8 @@ exports[`loaded pending role based request state 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: transparent;
-  color: rgba(255,255,255,0.54);
-  border-color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
+  border-color: rgba(255, 255, 255, 0.54);
   border-width: 1.5px;
   padding: 0 6.5px;
   min-height: 24px;
@@ -1639,8 +1639,8 @@ exports[`loaded pending role based request state 1`] = `
 .c18:focus-visible,
 .teleport-button__force-focus-visible .c18 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -1662,7 +1662,7 @@ exports[`loaded pending role based request state 1`] = `
 
 .c18:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -1712,7 +1712,7 @@ exports[`loaded pending role based request state 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c44:active,
@@ -1724,7 +1724,7 @@ exports[`loaded pending role based request state 1`] = `
 
 .c44:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -1734,7 +1734,7 @@ exports[`loaded pending role based request state 1`] = `
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
 }
 
 .c9 {
@@ -1836,7 +1836,7 @@ exports[`loaded pending role based request state 1`] = `
   font-size: 12px;
   line-height: 16px;
   margin: 0px;
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
 }
 
 .c11 {
@@ -1945,7 +1945,7 @@ exports[`loaded pending role based request state 1`] = `
 
 .c42 {
   appearance: none;
-  border: 1px solid rgba(255,255,255,0.54);
+  border: 1px solid rgba(255, 255, 255, 0.54);
   border-radius: 4px;
   box-sizing: border-box;
   min-height: 50px;
@@ -1961,14 +1961,14 @@ exports[`loaded pending role based request state 1`] = `
 }
 
 .c42::placeholder {
-  color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
   opacity: 1;
 }
 
 .c42:hover,
 .c42:focus,
 .c42:active {
-  border: 1px solid rgba(255,255,255,0.72);
+  border: 1px solid rgba(255, 255, 255, 0.72);
 }
 
 .c42:read-only {
@@ -1976,8 +1976,8 @@ exports[`loaded pending role based request state 1`] = `
 }
 
 .c42:disabled {
-  color: rgba(255,255,255,0.36);
-  border-color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
+  border-color: rgba(255, 255, 255, 0.36);
 }
 
 .c34 {
@@ -2038,7 +2038,7 @@ exports[`loaded pending role based request state 1`] = `
 }
 
 .c3 {
-  box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px rgba(0,0,0,0.14),0px 1px 3px rgba(0,0,0,0.12);
+  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),0px 1px 1px rgba(0, 0, 0, 0.14),0px 1px 3px rgba(0, 0, 0, 0.12);
 }
 
 .c5 {
@@ -2517,8 +2517,8 @@ exports[`loaded pending search based request state 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: transparent;
-  color: rgba(255,255,255,0.54);
-  border-color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
+  border-color: rgba(255, 255, 255, 0.54);
   border-width: 1.5px;
   padding: 0 6.5px;
   min-height: 24px;
@@ -2531,8 +2531,8 @@ exports[`loaded pending search based request state 1`] = `
 .c18:focus-visible,
 .teleport-button__force-focus-visible .c18 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -2554,7 +2554,7 @@ exports[`loaded pending search based request state 1`] = `
 
 .c18:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -2604,7 +2604,7 @@ exports[`loaded pending search based request state 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c48:active,
@@ -2616,7 +2616,7 @@ exports[`loaded pending search based request state 1`] = `
 
 .c48:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -2626,7 +2626,7 @@ exports[`loaded pending search based request state 1`] = `
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
 }
 
 .c9 {
@@ -2728,7 +2728,7 @@ exports[`loaded pending search based request state 1`] = `
   font-size: 12px;
   line-height: 16px;
   margin: 0px;
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
 }
 
 .c11 {
@@ -2837,7 +2837,7 @@ exports[`loaded pending search based request state 1`] = `
 
 .c46 {
   appearance: none;
-  border: 1px solid rgba(255,255,255,0.54);
+  border: 1px solid rgba(255, 255, 255, 0.54);
   border-radius: 4px;
   box-sizing: border-box;
   min-height: 50px;
@@ -2853,14 +2853,14 @@ exports[`loaded pending search based request state 1`] = `
 }
 
 .c46::placeholder {
-  color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
   opacity: 1;
 }
 
 .c46:hover,
 .c46:focus,
 .c46:active {
-  border: 1px solid rgba(255,255,255,0.72);
+  border: 1px solid rgba(255, 255, 255, 0.72);
 }
 
 .c46:read-only {
@@ -2868,8 +2868,8 @@ exports[`loaded pending search based request state 1`] = `
 }
 
 .c46:disabled {
-  color: rgba(255,255,255,0.36);
-  border-color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
+  border-color: rgba(255, 255, 255, 0.36);
 }
 
 .c32 {
@@ -2880,39 +2880,39 @@ exports[`loaded pending search based request state 1`] = `
   width: 100%;
 }
 
-.c32 > thead > tr > th,
-.c32 > tbody > tr > th,
-.c32 > tfoot > tr > th,
-.c32 > thead > tr > td,
-.c32 > tbody > tr > td,
-.c32 > tfoot > tr > td {
+.c32>thead>tr>th,
+.c32>tbody>tr>th,
+.c32>tfoot>tr>th,
+.c32>thead>tr>td,
+.c32>tbody>tr>td,
+.c32>tfoot>tr>td {
   padding: 8px 8px;
   vertical-align: middle;
 }
 
-.c32 > thead > tr > th:first-child,
-.c32 > tbody > tr > th:first-child,
-.c32 > tfoot > tr > th:first-child,
-.c32 > thead > tr > td:first-child,
-.c32 > tbody > tr > td:first-child,
-.c32 > tfoot > tr > td:first-child {
+.c32>thead>tr>th:first-child,
+.c32>tbody>tr>th:first-child,
+.c32>tfoot>tr>th:first-child,
+.c32>thead>tr>td:first-child,
+.c32>tbody>tr>td:first-child,
+.c32>tfoot>tr>td:first-child {
   padding-left: 24px;
 }
 
-.c32 > thead > tr > th:last-child,
-.c32 > tbody > tr > th:last-child,
-.c32 > tfoot > tr > th:last-child,
-.c32 > thead > tr > td:last-child,
-.c32 > tbody > tr > td:last-child,
-.c32 > tfoot > tr > td:last-child {
+.c32>thead>tr>th:last-child,
+.c32>tbody>tr>th:last-child,
+.c32>tfoot>tr>th:last-child,
+.c32>thead>tr>td:last-child,
+.c32>tbody>tr>td:last-child,
+.c32>tfoot>tr>td:last-child {
   padding-right: 24px;
 }
 
-.c32 > tbody > tr > td {
+.c32>tbody>tr>td {
   vertical-align: middle;
 }
 
-.c32 > thead > tr > th {
+.c32>thead>tr>th {
   color: #FFFFFF;
   font-weight: 600;
   font-size: 14px;
@@ -2924,11 +2924,11 @@ exports[`loaded pending search based request state 1`] = `
   white-space: nowrap;
 }
 
-.c32 > thead > tr > th svg {
+.c32>thead>tr>th svg {
   height: 12px;
 }
 
-.c32 > tbody > tr > td {
+.c32>tbody>tr>td {
   color: #FFFFFF;
   font-weight: 300;
   font-size: 14px;
@@ -2948,7 +2948,7 @@ exports[`loaded pending search based request state 1`] = `
 }
 
 .c32 tbody tr:hover:after {
-  box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.12),0px 4px 5px 0px rgba(0,0,0,0.14),0px 2px 4px -1px rgba(0,0,0,0.20);
+  box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.12),0px 4px 5px 0px rgba(0, 0, 0, 0.14),0px 2px 4px -1px rgba(0, 0, 0, 0.20);
   content: '';
   position: absolute;
   top: 0;
@@ -2958,7 +2958,7 @@ exports[`loaded pending search based request state 1`] = `
   height: 100%;
 }
 
-.c32 tbody tr:hover + tr {
+.c32 tbody tr:hover +tr {
   border-top: 2px solid rgba(0,0,0,0);
 }
 
@@ -3006,7 +3006,7 @@ exports[`loaded pending search based request state 1`] = `
   width: 90%;
 }
 
-.c33 > tbody > tr > td {
+.c33>tbody>tr>td {
   vertical-align: middle;
 }
 
@@ -3028,7 +3028,7 @@ exports[`loaded pending search based request state 1`] = `
 }
 
 .c3 {
-  box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px rgba(0,0,0,0.14),0px 1px 3px rgba(0,0,0,0.12);
+  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),0px 1px 1px rgba(0, 0, 0, 0.14),0px 1px 3px rgba(0, 0, 0, 0.12);
 }
 
 .c5 {
diff --git a/web/packages/shared/components/AwsLaunchButton/AwsLaunchButton.tsx b/web/packages/shared/components/AwsLaunchButton/AwsLaunchButton.tsx
index 91da743efe4f3..864af1f5bd906 100644
--- a/web/packages/shared/components/AwsLaunchButton/AwsLaunchButton.tsx
+++ b/web/packages/shared/components/AwsLaunchButton/AwsLaunchButton.tsx
@@ -193,7 +193,7 @@ const StyledMenuItem = styled(MenuItem)(
     color: ${theme.colors.text.main};
   }
 
-  :last-child {
+  &:last-child {
     border-bottom: none;
     margin-bottom: 8px;
   }
@@ -215,7 +215,7 @@ const StyledInput = styled.input<SpaceProps>(
     outline: none;
   }
 
-  ::placeholder {
+  &::placeholder {
     color: ${theme.colors.text.muted};
     opacity: 1;
   }
diff --git a/web/packages/shared/components/ClusterDropdown/ClusterDropdown.tsx b/web/packages/shared/components/ClusterDropdown/ClusterDropdown.tsx
index eadf9ce739085..eb9babb16f43c 100644
--- a/web/packages/shared/components/ClusterDropdown/ClusterDropdown.tsx
+++ b/web/packages/shared/components/ClusterDropdown/ClusterDropdown.tsx
@@ -238,7 +238,7 @@ const ClusterFilter = styled.input(
     border: none;
   }
 
-  ::placeholder {
+  &::placeholder {
     color: ${theme.colors.text.muted};
     opacity: 1;
   }
diff --git a/web/packages/shared/components/FieldInput/__snapshots__/FieldInput.test.tsx.snap b/web/packages/shared/components/FieldInput/__snapshots__/FieldInput.test.tsx.snap
index 5de1143648f71..220ae48867f62 100644
--- a/web/packages/shared/components/FieldInput/__snapshots__/FieldInput.test.tsx.snap
+++ b/web/packages/shared/components/FieldInput/__snapshots__/FieldInput.test.tsx.snap
@@ -20,7 +20,7 @@ exports[`snapshot tests 1`] = `
 
 .c3 {
   appearance: none;
-  border: 1px solid rgba(255,255,255,0.54);
+  border: 1px solid rgba(255, 255, 255, 0.54);
   border-radius: 4px;
   box-sizing: border-box;
   display: block;
@@ -39,7 +39,7 @@ exports[`snapshot tests 1`] = `
 .c3:hover,
 .c3:focus,
 .c3:active {
-  border: 1px solid rgba(255,255,255,0.72);
+  border: 1px solid rgba(255, 255, 255, 0.72);
 }
 
 .c3::-ms-clear {
@@ -47,7 +47,7 @@ exports[`snapshot tests 1`] = `
 }
 
 .c3::placeholder {
-  color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
   opacity: 1;
 }
 
@@ -56,8 +56,8 @@ exports[`snapshot tests 1`] = `
 }
 
 .c3:disabled {
-  color: rgba(255,255,255,0.36);
-  border-color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
+  border-color: rgba(255, 255, 255, 0.36);
 }
 
 .c3:hover,
@@ -249,7 +249,6 @@ exports[`snapshot tests 1`] = `
       inputmode="text"
       placeholder="without label"
       type="text"
-      value=""
     />
   </div>
 </div>
diff --git a/web/packages/shared/components/FileTransfer/FileTransferStateless/UploadForm/UploadForm.tsx b/web/packages/shared/components/FileTransfer/FileTransferStateless/UploadForm/UploadForm.tsx
index d05d6f0130ece..75059d80b2343 100644
--- a/web/packages/shared/components/FileTransfer/FileTransferStateless/UploadForm/UploadForm.tsx
+++ b/web/packages/shared/components/FileTransfer/FileTransferStateless/UploadForm/UploadForm.tsx
@@ -138,7 +138,7 @@ const Dropzone = styled.button`
   border-radius: ${props => props.theme.radii[2]}px;
   font-family: inherit;
 
-  :focus {
+  &:focus {
     border-color: ${props => props.theme.colors.spotBackground[1]};
   }
 `;
diff --git a/web/packages/shared/components/FormPassword/__snapshots__/FormPassword.test.tsx.snap b/web/packages/shared/components/FormPassword/__snapshots__/FormPassword.test.tsx.snap
index a59edc423f9c3..fccf158bc9ec7 100644
--- a/web/packages/shared/components/FormPassword/__snapshots__/FormPassword.test.tsx.snap
+++ b/web/packages/shared/components/FormPassword/__snapshots__/FormPassword.test.tsx.snap
@@ -72,7 +72,7 @@ exports[`auth2faType "on" should render form with hardware key as first option i
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c11:active,
@@ -84,7 +84,7 @@ exports[`auth2faType "on" should render form with hardware key as first option i
 
 .c11:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -92,7 +92,7 @@ exports[`auth2faType "on" should render form with hardware key as first option i
 
 .c2 {
   appearance: none;
-  border: 1px solid rgba(255,255,255,0.54);
+  border: 1px solid rgba(255, 255, 255, 0.54);
   border-radius: 4px;
   box-sizing: border-box;
   display: block;
@@ -109,7 +109,7 @@ exports[`auth2faType "on" should render form with hardware key as first option i
 .c2:hover,
 .c2:focus,
 .c2:active {
-  border: 1px solid rgba(255,255,255,0.72);
+  border: 1px solid rgba(255, 255, 255, 0.72);
 }
 
 .c2::-ms-clear {
@@ -117,7 +117,7 @@ exports[`auth2faType "on" should render form with hardware key as first option i
 }
 
 .c2::placeholder {
-  color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
   opacity: 1;
 }
 
@@ -126,8 +126,8 @@ exports[`auth2faType "on" should render form with hardware key as first option i
 }
 
 .c2:disabled {
-  color: rgba(255,255,255,0.36);
-  border-color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
+  border-color: rgba(255, 255, 255, 0.36);
 }
 
 .c1 {
@@ -172,20 +172,20 @@ exports[`auth2faType "on" should render form with hardware key as first option i
   outline: none;
   min-height: 40px;
   height: fit-content;
-  border: 1px solid rgba(255,255,255,0.54);
+  border: 1px solid rgba(255, 255, 255, 0.54);
   border-radius: 4px;
   background-color: transparent;
   box-shadow: none;
 }
 
 .c7 .react-select__control .react-select__dropdown-indicator {
-  color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
 }
 
 .c7 .react-select__control:hover,
 .c7 .react-select__control:focus,
 .c7 .react-select__control:active {
-  border: 1px solid rgba(255,255,255,0.72);
+  border: 1px solid rgba(255, 255, 255, 0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
@@ -206,7 +206,7 @@ exports[`auth2faType "on" should render form with hardware key as first option i
 }
 
 .c7 .react-select__control--is-focused {
-  border-color: rgba(255,255,255,0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
@@ -220,7 +220,7 @@ exports[`auth2faType "on" should render form with hardware key as first option i
 }
 
 .c7 .react-select__placeholder {
-  color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
 }
 
 .c7 .react-select__multi-value {
@@ -266,7 +266,7 @@ exports[`auth2faType "on" should render form with hardware key as first option i
 }
 
 .c7 .react-select__clear-indicator {
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
 }
 
 .c7 .react-select__clear-indicator:hover,
@@ -282,7 +282,7 @@ exports[`auth2faType "on" should render form with hardware key as first option i
 .c7 .react-select__menu {
   margin-top: 0px;
   background-color: #344179;
-  box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
+  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),0px 8px 10px 1px rgba(0, 0, 0, 0.14),0px 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 
 .c7 .react-select__menu .react-select__menu-list::-webkit-scrollbar-thumb {
@@ -299,17 +299,17 @@ exports[`auth2faType "on" should render form with hardware key as first option i
 }
 
 .c7 .react-select__control--is-disabled {
-  color: rgba(255,255,255,0.36);
-  border: 1px solid rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
+  border: 1px solid rgba(255, 255, 255, 0.36);
 }
 
 .c7 .react-select__control--is-disabled .react-select__single-value,
 .c7 .react-select__control--is-disabled .react-select__placeholder {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
 }
 
 .c7 .react-select__control--is-disabled .react-select__indicator {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
 }
 
 .c7 .react-select__input {
@@ -532,7 +532,7 @@ exports[`auth2faType "optional" should render form with hardware key as first op
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c11:active,
@@ -544,7 +544,7 @@ exports[`auth2faType "optional" should render form with hardware key as first op
 
 .c11:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -552,7 +552,7 @@ exports[`auth2faType "optional" should render form with hardware key as first op
 
 .c2 {
   appearance: none;
-  border: 1px solid rgba(255,255,255,0.54);
+  border: 1px solid rgba(255, 255, 255, 0.54);
   border-radius: 4px;
   box-sizing: border-box;
   display: block;
@@ -569,7 +569,7 @@ exports[`auth2faType "optional" should render form with hardware key as first op
 .c2:hover,
 .c2:focus,
 .c2:active {
-  border: 1px solid rgba(255,255,255,0.72);
+  border: 1px solid rgba(255, 255, 255, 0.72);
 }
 
 .c2::-ms-clear {
@@ -577,7 +577,7 @@ exports[`auth2faType "optional" should render form with hardware key as first op
 }
 
 .c2::placeholder {
-  color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
   opacity: 1;
 }
 
@@ -586,8 +586,8 @@ exports[`auth2faType "optional" should render form with hardware key as first op
 }
 
 .c2:disabled {
-  color: rgba(255,255,255,0.36);
-  border-color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
+  border-color: rgba(255, 255, 255, 0.36);
 }
 
 .c1 {
@@ -632,20 +632,20 @@ exports[`auth2faType "optional" should render form with hardware key as first op
   outline: none;
   min-height: 40px;
   height: fit-content;
-  border: 1px solid rgba(255,255,255,0.54);
+  border: 1px solid rgba(255, 255, 255, 0.54);
   border-radius: 4px;
   background-color: transparent;
   box-shadow: none;
 }
 
 .c7 .react-select__control .react-select__dropdown-indicator {
-  color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
 }
 
 .c7 .react-select__control:hover,
 .c7 .react-select__control:focus,
 .c7 .react-select__control:active {
-  border: 1px solid rgba(255,255,255,0.72);
+  border: 1px solid rgba(255, 255, 255, 0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
@@ -666,7 +666,7 @@ exports[`auth2faType "optional" should render form with hardware key as first op
 }
 
 .c7 .react-select__control--is-focused {
-  border-color: rgba(255,255,255,0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
@@ -680,7 +680,7 @@ exports[`auth2faType "optional" should render form with hardware key as first op
 }
 
 .c7 .react-select__placeholder {
-  color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
 }
 
 .c7 .react-select__multi-value {
@@ -726,7 +726,7 @@ exports[`auth2faType "optional" should render form with hardware key as first op
 }
 
 .c7 .react-select__clear-indicator {
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
 }
 
 .c7 .react-select__clear-indicator:hover,
@@ -742,7 +742,7 @@ exports[`auth2faType "optional" should render form with hardware key as first op
 .c7 .react-select__menu {
   margin-top: 0px;
   background-color: #344179;
-  box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
+  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),0px 8px 10px 1px rgba(0, 0, 0, 0.14),0px 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 
 .c7 .react-select__menu .react-select__menu-list::-webkit-scrollbar-thumb {
@@ -759,17 +759,17 @@ exports[`auth2faType "optional" should render form with hardware key as first op
 }
 
 .c7 .react-select__control--is-disabled {
-  color: rgba(255,255,255,0.36);
-  border: 1px solid rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
+  border: 1px solid rgba(255, 255, 255, 0.36);
 }
 
 .c7 .react-select__control--is-disabled .react-select__single-value,
 .c7 .react-select__control--is-disabled .react-select__placeholder {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
 }
 
 .c7 .react-select__control--is-disabled .react-select__indicator {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
 }
 
 .c7 .react-select__input {
diff --git a/web/packages/shared/components/MenuLogin/MenuLogin.tsx b/web/packages/shared/components/MenuLogin/MenuLogin.tsx
index 815d713bcb2a6..f58af0a77075d 100644
--- a/web/packages/shared/components/MenuLogin/MenuLogin.tsx
+++ b/web/packages/shared/components/MenuLogin/MenuLogin.tsx
@@ -201,7 +201,7 @@ const StyledMenuItem = styled(MenuItem)(
   border-bottom: 1px solid ${theme.colors.spotBackground[0]};
   min-height: 32px;
 
-  :last-child {
+  &:last-child {
     border-bottom: none;
     margin-bottom: 8px;
   }
@@ -223,7 +223,7 @@ const Input = styled.input<SpaceProps>(
     outline: none;
   }
 
-  ::placeholder {
+  &::placeholder {
     color: ${theme.colors.text.muted};
     opacity: 1;
   }
diff --git a/web/packages/shared/components/TextSelectCopy/__snapshots__/TextSelectCopy.story.test.tsx.snap b/web/packages/shared/components/TextSelectCopy/__snapshots__/TextSelectCopy.story.test.tsx.snap
index e652b1605c6e6..6e1acea62685a 100644
--- a/web/packages/shared/components/TextSelectCopy/__snapshots__/TextSelectCopy.story.test.tsx.snap
+++ b/web/packages/shared/components/TextSelectCopy/__snapshots__/TextSelectCopy.story.test.tsx.snap
@@ -58,7 +58,7 @@ exports[`bash set to false does not render $ sign 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c4:active,
@@ -70,7 +70,7 @@ exports[`bash set to false does not render $ sign 1`] = `
 
 .c4:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -173,7 +173,7 @@ exports[`default, renders $ sign 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c5:active,
@@ -185,7 +185,7 @@ exports[`default, renders $ sign 1`] = `
 
 .c5:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
diff --git a/web/packages/shared/components/TextSelectCopy/__snapshots__/TextSelectCopyMulti.story.test.tsx.snap b/web/packages/shared/components/TextSelectCopy/__snapshots__/TextSelectCopyMulti.story.test.tsx.snap
index 261c8ff554c55..bacd62b8d5e8a 100644
--- a/web/packages/shared/components/TextSelectCopy/__snapshots__/TextSelectCopyMulti.story.test.tsx.snap
+++ b/web/packages/shared/components/TextSelectCopy/__snapshots__/TextSelectCopyMulti.story.test.tsx.snap
@@ -59,7 +59,7 @@ exports[`render multi bash texts 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
   border-color: transparent;
   border-width: 1.5px;
   padding: 0 30.5px;
@@ -72,8 +72,8 @@ exports[`render multi bash texts 1`] = `
 .c10:focus-visible,
 .teleport-button__force-focus-visible .c10 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -95,7 +95,7 @@ exports[`render multi bash texts 1`] = `
 
 .c10:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -476,7 +476,7 @@ exports[`render multi bash texts with comment 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
   border-color: transparent;
   border-width: 1.5px;
   padding: 0 30.5px;
@@ -489,8 +489,8 @@ exports[`render multi bash texts with comment 1`] = `
 .c11:focus-visible,
 .teleport-button__force-focus-visible .c11 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -512,7 +512,7 @@ exports[`render multi bash texts with comment 1`] = `
 
 .c11:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -908,7 +908,7 @@ exports[`render non bash single text 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
   border-color: transparent;
   border-width: 1.5px;
   padding: 0 30.5px;
@@ -921,8 +921,8 @@ exports[`render non bash single text 1`] = `
 .c10:focus-visible,
 .teleport-button__force-focus-visible .c10 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -944,7 +944,7 @@ exports[`render non bash single text 1`] = `
 
 .c10:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -1158,7 +1158,7 @@ exports[`render single bash text 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
   border-color: transparent;
   border-width: 1.5px;
   padding: 0 30.5px;
@@ -1171,8 +1171,8 @@ exports[`render single bash text 1`] = `
 .c10:focus-visible,
 .teleport-button__force-focus-visible .c10 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -1194,7 +1194,7 @@ exports[`render single bash text 1`] = `
 
 .c10:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -1413,7 +1413,7 @@ exports[`render single bash text with comment 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
   border-color: transparent;
   border-width: 1.5px;
   padding: 0 30.5px;
@@ -1426,8 +1426,8 @@ exports[`render single bash text with comment 1`] = `
 .c11:focus-visible,
 .teleport-button__force-focus-visible .c11 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -1449,7 +1449,7 @@ exports[`render single bash text with comment 1`] = `
 
 .c11:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
diff --git a/web/packages/shared/components/ToolTip/ToolTip.tsx b/web/packages/shared/components/ToolTip/ToolTip.tsx
index 094bf4fcb71f6..4b27754a06b9c 100644
--- a/web/packages/shared/components/ToolTip/ToolTip.tsx
+++ b/web/packages/shared/components/ToolTip/ToolTip.tsx
@@ -63,7 +63,7 @@ export const ToolTipInfo: React.FC<
         {...(trigger === 'hover' && triggerOnHoverProps)}
         {...(trigger === 'click' && triggerOnClickProps)}
         css={`
-          :hover {
+          &:hover {
             cursor: pointer;
           }
           vertical-align: middle;
diff --git a/web/packages/shared/components/UnifiedResources/CardsView/ResourceCard.tsx b/web/packages/shared/components/UnifiedResources/CardsView/ResourceCard.tsx
index 5f2e69a207668..4d640a059b91e 100644
--- a/web/packages/shared/components/UnifiedResources/CardsView/ResourceCard.tsx
+++ b/web/packages/shared/components/UnifiedResources/CardsView/ResourceCard.tsx
@@ -313,7 +313,7 @@ const CardOuterContainer = styled(Box)<{ showAllLabels?: boolean }>`
 
     // We use a pseudo element for the shadow with position: absolute in order to prevent
     // the shadow from increasing the size of the layout and causing scrollbar flicker.
-    :after {
+    &:after {
       box-shadow: ${props => props.theme.boxShadow[3]};
       border-radius: ${props => props.theme.radii[3]}px;
       content: '';
@@ -342,7 +342,7 @@ const CardInnerContainer = styled(Flex)<BackgroundColorProps>`
   border-radius: ${props => props.theme.radii[3]}px;
   background-color: ${props => getBackgroundColor(props)};
 
-  :hover {
+  &:hover {
     // Make the border invisible instead of removing it, this is to prevent things from shifting due to the size change.
     border: ${props => props.theme.borders[2]} rgba(0, 0, 0, 0);
   }
diff --git a/web/packages/shared/components/UnifiedResources/FilterPanel.tsx b/web/packages/shared/components/UnifiedResources/FilterPanel.tsx
index 6765f04a399a4..7cc6191d9ab4a 100644
--- a/web/packages/shared/components/UnifiedResources/FilterPanel.tsx
+++ b/web/packages/shared/components/UnifiedResources/FilterPanel.tsx
@@ -635,7 +635,7 @@ const ViewModeSwitchContainer = styled.div`
   .selected {
     background-color: ${props => props.theme.colors.spotBackground[1]};
 
-    :hover {
+    &:hover {
       background-color: ${props => props.theme.colors.spotBackground[1]};
     }
   }
@@ -653,7 +653,7 @@ const ViewModeSwitchButton = styled.button`
 
   background-color: transparent;
 
-  :hover {
+  &:hover {
     background-color: ${props => props.theme.colors.spotBackground[0]};
   }
 `;
diff --git a/web/packages/shared/components/UnifiedResources/ListView/ResourceListItem.tsx b/web/packages/shared/components/UnifiedResources/ListView/ResourceListItem.tsx
index c806f2f413eeb..0f2a34024536a 100644
--- a/web/packages/shared/components/UnifiedResources/ListView/ResourceListItem.tsx
+++ b/web/packages/shared/components/UnifiedResources/ListView/ResourceListItem.tsx
@@ -278,12 +278,12 @@ const RowContainer = styled(Box)`
   transition: all 150ms;
   position: relative;
 
-  :hover {
+  &:hover {
     background-color: ${props => props.theme.colors.levels.surface};
 
     // We use a pseudo element for the shadow with position: absolute in order to prevent
     // the shadow from increasing the size of the layout and causing scrollbar flicker.
-    :after {
+    &:after {
       box-shadow: ${props => props.theme.boxShadow[3]};
       content: '';
       position: absolute;
@@ -315,7 +315,7 @@ const RowInnerContainer = styled(Flex)<BackgroundColorProps>`
   border-bottom: ${props => props.theme.borders[2]}
     ${props => props.theme.colors.spotBackground[0]};
 
-  :hover {
+  &:hover {
     // Make the border invisible instead of removing it, this is to prevent things from shifting due to the size change.
     border-bottom: ${props => props.theme.borders[2]} rgba(0, 0, 0, 0);
   }
diff --git a/web/packages/teleport/src/AccessRequests/__snapshots__/AccessRequests.story.test.tsx.snap b/web/packages/teleport/src/AccessRequests/__snapshots__/AccessRequests.story.test.tsx.snap
index c4eb2a5168fbc..181f2f7bb7b94 100644
--- a/web/packages/teleport/src/AccessRequests/__snapshots__/AccessRequests.story.test.tsx.snap
+++ b/web/packages/teleport/src/AccessRequests/__snapshots__/AccessRequests.story.test.tsx.snap
@@ -95,7 +95,7 @@ exports[`locked 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c9:active,
@@ -107,7 +107,7 @@ exports[`locked 1`] = `
 
 .c9:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -120,7 +120,7 @@ exports[`locked 1`] = `
 }
 
 .c15 {
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px rgba(0,0,0,0.14),0px 1px 18px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px rgba(0, 0, 0, 0.14),0px 1px 18px rgba(0, 0, 0, 0.12);
   border-radius: 8px;
   background-color: #222C59;
 }
@@ -327,7 +327,7 @@ exports[`locked 1`] = `
     </div>
   </div>
   <div
-    class="c13 c14 sc-gEvEer c13 c15"
+    class="c13 c14 sc-gEvDqW c13 c15"
     width="auto"
   >
     <div
diff --git a/web/packages/teleport/src/Audit/__snapshots__/Audit.story.test.tsx.snap b/web/packages/teleport/src/Audit/__snapshots__/Audit.story.test.tsx.snap
index 3bff6e9693ef7..bb6b2e364b2d7 100644
--- a/web/packages/teleport/src/Audit/__snapshots__/Audit.story.test.tsx.snap
+++ b/web/packages/teleport/src/Audit/__snapshots__/Audit.story.test.tsx.snap
@@ -36,8 +36,8 @@ exports[`list of all events 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: transparent;
-  color: rgba(255,255,255,0.54);
-  border-color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
+  border-color: rgba(255, 255, 255, 0.54);
   border-width: 1.5px;
   padding: 0 6.5px;
   min-height: 24px;
@@ -50,8 +50,8 @@ exports[`list of all events 1`] = `
 .c20:focus-visible,
 .teleport-button__force-focus-visible .c20 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -73,7 +73,7 @@ exports[`list of all events 1`] = `
 
 .c20:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -102,7 +102,7 @@ exports[`list of all events 1`] = `
 }
 
 .c13:disabled {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
   cursor: default;
 }
 
@@ -137,7 +137,7 @@ exports[`list of all events 1`] = `
 }
 
 .c16:disabled {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
   cursor: default;
 }
 
@@ -193,39 +193,39 @@ exports[`list of all events 1`] = `
   width: 100%;
 }
 
-.c17 > thead > tr > th,
-.c17 > tbody > tr > th,
-.c17 > tfoot > tr > th,
-.c17 > thead > tr > td,
-.c17 > tbody > tr > td,
-.c17 > tfoot > tr > td {
+.c17>thead>tr>th,
+.c17>tbody>tr>th,
+.c17>tfoot>tr>th,
+.c17>thead>tr>td,
+.c17>tbody>tr>td,
+.c17>tfoot>tr>td {
   padding: 8px 8px;
   vertical-align: middle;
 }
 
-.c17 > thead > tr > th:first-child,
-.c17 > tbody > tr > th:first-child,
-.c17 > tfoot > tr > th:first-child,
-.c17 > thead > tr > td:first-child,
-.c17 > tbody > tr > td:first-child,
-.c17 > tfoot > tr > td:first-child {
+.c17>thead>tr>th:first-child,
+.c17>tbody>tr>th:first-child,
+.c17>tfoot>tr>th:first-child,
+.c17>thead>tr>td:first-child,
+.c17>tbody>tr>td:first-child,
+.c17>tfoot>tr>td:first-child {
   padding-left: 24px;
 }
 
-.c17 > thead > tr > th:last-child,
-.c17 > tbody > tr > th:last-child,
-.c17 > tfoot > tr > th:last-child,
-.c17 > thead > tr > td:last-child,
-.c17 > tbody > tr > td:last-child,
-.c17 > tfoot > tr > td:last-child {
+.c17>thead>tr>th:last-child,
+.c17>tbody>tr>th:last-child,
+.c17>tfoot>tr>th:last-child,
+.c17>thead>tr>td:last-child,
+.c17>tbody>tr>td:last-child,
+.c17>tfoot>tr>td:last-child {
   padding-right: 24px;
 }
 
-.c17 > tbody > tr > td {
+.c17>tbody>tr>td {
   vertical-align: middle;
 }
 
-.c17 > thead > tr > th {
+.c17>thead>tr>th {
   color: #FFFFFF;
   font-weight: 600;
   font-size: 14px;
@@ -237,11 +237,11 @@ exports[`list of all events 1`] = `
   white-space: nowrap;
 }
 
-.c17 > thead > tr > th svg {
+.c17>thead>tr>th svg {
   height: 12px;
 }
 
-.c17 > tbody > tr > td {
+.c17>tbody>tr>td {
   color: #FFFFFF;
   font-weight: 300;
   font-size: 14px;
@@ -261,7 +261,7 @@ exports[`list of all events 1`] = `
 }
 
 .c17 tbody tr:hover:after {
-  box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.12),0px 4px 5px 0px rgba(0,0,0,0.14),0px 2px 4px -1px rgba(0,0,0,0.20);
+  box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.12),0px 4px 5px 0px rgba(0, 0, 0, 0.14),0px 2px 4px -1px rgba(0, 0, 0, 0.20);
   content: '';
   position: absolute;
   top: 0;
@@ -271,7 +271,7 @@ exports[`list of all events 1`] = `
   height: 100%;
 }
 
-.c17 tbody tr:hover + tr {
+.c17 tbody tr:hover +tr {
   border-top: 2px solid rgba(0,0,0,0);
 }
 
@@ -311,7 +311,7 @@ exports[`list of all events 1`] = `
 }
 
 .c11:disabled {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
   cursor: wait;
 }
 
@@ -13331,8 +13331,8 @@ exports[`loaded audit log screen 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: transparent;
-  color: rgba(255,255,255,0.54);
-  border-color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
+  border-color: rgba(255, 255, 255, 0.54);
   border-width: 1.5px;
   padding: 0 6.5px;
   min-height: 24px;
@@ -13345,8 +13345,8 @@ exports[`loaded audit log screen 1`] = `
 .c20:focus-visible,
 .teleport-button__force-focus-visible .c20 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -13368,7 +13368,7 @@ exports[`loaded audit log screen 1`] = `
 
 .c20:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -13423,20 +13423,20 @@ exports[`loaded audit log screen 1`] = `
   outline: none;
   min-height: 40px;
   height: fit-content;
-  border: 1px solid rgba(255,255,255,0.54);
+  border: 1px solid rgba(255, 255, 255, 0.54);
   border-radius: 4px;
   background-color: transparent;
   box-shadow: none;
 }
 
 .c9 .react-select__control .react-select__dropdown-indicator {
-  color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
 }
 
 .c9 .react-select__control:hover,
 .c9 .react-select__control:focus,
 .c9 .react-select__control:active {
-  border: 1px solid rgba(255,255,255,0.72);
+  border: 1px solid rgba(255, 255, 255, 0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
@@ -13457,7 +13457,7 @@ exports[`loaded audit log screen 1`] = `
 }
 
 .c9 .react-select__control--is-focused {
-  border-color: rgba(255,255,255,0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
@@ -13471,7 +13471,7 @@ exports[`loaded audit log screen 1`] = `
 }
 
 .c9 .react-select__placeholder {
-  color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
 }
 
 .c9 .react-select__multi-value {
@@ -13517,7 +13517,7 @@ exports[`loaded audit log screen 1`] = `
 }
 
 .c9 .react-select__clear-indicator {
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
 }
 
 .c9 .react-select__clear-indicator:hover,
@@ -13533,7 +13533,7 @@ exports[`loaded audit log screen 1`] = `
 .c9 .react-select__menu {
   margin-top: 0px;
   background-color: #344179;
-  box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
+  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),0px 8px 10px 1px rgba(0, 0, 0, 0.14),0px 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 
 .c9 .react-select__menu .react-select__menu-list::-webkit-scrollbar-thumb {
@@ -13550,17 +13550,17 @@ exports[`loaded audit log screen 1`] = `
 }
 
 .c9 .react-select__control--is-disabled {
-  color: rgba(255,255,255,0.36);
-  border: 1px solid rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
+  border: 1px solid rgba(255, 255, 255, 0.36);
 }
 
 .c9 .react-select__control--is-disabled .react-select__single-value,
 .c9 .react-select__control--is-disabled .react-select__placeholder {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
 }
 
 .c9 .react-select__control--is-disabled .react-select__indicator {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
 }
 
 .c9 .react-select__input {
@@ -13600,39 +13600,39 @@ exports[`loaded audit log screen 1`] = `
   width: 100%;
 }
 
-.c16 > thead > tr > th,
-.c16 > tbody > tr > th,
-.c16 > tfoot > tr > th,
-.c16 > thead > tr > td,
-.c16 > tbody > tr > td,
-.c16 > tfoot > tr > td {
+.c16>thead>tr>th,
+.c16>tbody>tr>th,
+.c16>tfoot>tr>th,
+.c16>thead>tr>td,
+.c16>tbody>tr>td,
+.c16>tfoot>tr>td {
   padding: 8px 8px;
   vertical-align: middle;
 }
 
-.c16 > thead > tr > th:first-child,
-.c16 > tbody > tr > th:first-child,
-.c16 > tfoot > tr > th:first-child,
-.c16 > thead > tr > td:first-child,
-.c16 > tbody > tr > td:first-child,
-.c16 > tfoot > tr > td:first-child {
+.c16>thead>tr>th:first-child,
+.c16>tbody>tr>th:first-child,
+.c16>tfoot>tr>th:first-child,
+.c16>thead>tr>td:first-child,
+.c16>tbody>tr>td:first-child,
+.c16>tfoot>tr>td:first-child {
   padding-left: 24px;
 }
 
-.c16 > thead > tr > th:last-child,
-.c16 > tbody > tr > th:last-child,
-.c16 > tfoot > tr > th:last-child,
-.c16 > thead > tr > td:last-child,
-.c16 > tbody > tr > td:last-child,
-.c16 > tfoot > tr > td:last-child {
+.c16>thead>tr>th:last-child,
+.c16>tbody>tr>th:last-child,
+.c16>tfoot>tr>th:last-child,
+.c16>thead>tr>td:last-child,
+.c16>tbody>tr>td:last-child,
+.c16>tfoot>tr>td:last-child {
   padding-right: 24px;
 }
 
-.c16 > tbody > tr > td {
+.c16>tbody>tr>td {
   vertical-align: middle;
 }
 
-.c16 > thead > tr > th {
+.c16>thead>tr>th {
   color: #FFFFFF;
   font-weight: 600;
   font-size: 14px;
@@ -13644,11 +13644,11 @@ exports[`loaded audit log screen 1`] = `
   white-space: nowrap;
 }
 
-.c16 > thead > tr > th svg {
+.c16>thead>tr>th svg {
   height: 12px;
 }
 
-.c16 > tbody > tr > td {
+.c16>tbody>tr>td {
   color: #FFFFFF;
   font-weight: 300;
   font-size: 14px;
@@ -13668,7 +13668,7 @@ exports[`loaded audit log screen 1`] = `
 }
 
 .c16 tbody tr:hover:after {
-  box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.12),0px 4px 5px 0px rgba(0,0,0,0.14),0px 2px 4px -1px rgba(0,0,0,0.20);
+  box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.12),0px 4px 5px 0px rgba(0, 0, 0, 0.14),0px 2px 4px -1px rgba(0, 0, 0, 0.20);
   content: '';
   position: absolute;
   top: 0;
@@ -13678,7 +13678,7 @@ exports[`loaded audit log screen 1`] = `
   height: 100%;
 }
 
-.c16 tbody tr:hover + tr {
+.c16 tbody tr:hover +tr {
   border-top: 2px solid rgba(0,0,0,0);
 }
 
diff --git a/web/packages/teleport/src/Clusters/__snapshots__/Clusters.story.test.tsx.snap b/web/packages/teleport/src/Clusters/__snapshots__/Clusters.story.test.tsx.snap
index b3e5d6b8c1d8d..47f6b1038b798 100644
--- a/web/packages/teleport/src/Clusters/__snapshots__/Clusters.story.test.tsx.snap
+++ b/web/packages/teleport/src/Clusters/__snapshots__/Clusters.story.test.tsx.snap
@@ -32,8 +32,8 @@ exports[`render clusters 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: transparent;
-  color: rgba(255,255,255,0.54);
-  border-color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
+  border-color: rgba(255, 255, 255, 0.54);
   border-width: 1.5px;
   padding: 0 6.5px;
   min-height: 24px;
@@ -45,8 +45,8 @@ exports[`render clusters 1`] = `
 .c18:focus-visible,
 .teleport-button__force-focus-visible .c18 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -68,7 +68,7 @@ exports[`render clusters 1`] = `
 
 .c18:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -84,7 +84,7 @@ exports[`render clusters 1`] = `
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
   margin-left: 8px;
 }
 
@@ -152,39 +152,39 @@ exports[`render clusters 1`] = `
   width: 100%;
 }
 
-.c14 > thead > tr > th,
-.c14 > tbody > tr > th,
-.c14 > tfoot > tr > th,
-.c14 > thead > tr > td,
-.c14 > tbody > tr > td,
-.c14 > tfoot > tr > td {
+.c14>thead>tr>th,
+.c14>tbody>tr>th,
+.c14>tfoot>tr>th,
+.c14>thead>tr>td,
+.c14>tbody>tr>td,
+.c14>tfoot>tr>td {
   padding: 8px 8px;
   vertical-align: middle;
 }
 
-.c14 > thead > tr > th:first-child,
-.c14 > tbody > tr > th:first-child,
-.c14 > tfoot > tr > th:first-child,
-.c14 > thead > tr > td:first-child,
-.c14 > tbody > tr > td:first-child,
-.c14 > tfoot > tr > td:first-child {
+.c14>thead>tr>th:first-child,
+.c14>tbody>tr>th:first-child,
+.c14>tfoot>tr>th:first-child,
+.c14>thead>tr>td:first-child,
+.c14>tbody>tr>td:first-child,
+.c14>tfoot>tr>td:first-child {
   padding-left: 24px;
 }
 
-.c14 > thead > tr > th:last-child,
-.c14 > tbody > tr > th:last-child,
-.c14 > tfoot > tr > th:last-child,
-.c14 > thead > tr > td:last-child,
-.c14 > tbody > tr > td:last-child,
-.c14 > tfoot > tr > td:last-child {
+.c14>thead>tr>th:last-child,
+.c14>tbody>tr>th:last-child,
+.c14>tfoot>tr>th:last-child,
+.c14>thead>tr>td:last-child,
+.c14>tbody>tr>td:last-child,
+.c14>tfoot>tr>td:last-child {
   padding-right: 24px;
 }
 
-.c14 > tbody > tr > td {
+.c14>tbody>tr>td {
   vertical-align: middle;
 }
 
-.c14 > thead > tr > th {
+.c14>thead>tr>th {
   color: #FFFFFF;
   font-weight: 600;
   font-size: 14px;
@@ -196,11 +196,11 @@ exports[`render clusters 1`] = `
   white-space: nowrap;
 }
 
-.c14 > thead > tr > th svg {
+.c14>thead>tr>th svg {
   height: 12px;
 }
 
-.c14 > tbody > tr > td {
+.c14>tbody>tr>td {
   color: #FFFFFF;
   font-weight: 300;
   font-size: 14px;
@@ -220,7 +220,7 @@ exports[`render clusters 1`] = `
 }
 
 .c14 tbody tr:hover:after {
-  box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.12),0px 4px 5px 0px rgba(0,0,0,0.14),0px 2px 4px -1px rgba(0,0,0,0.20);
+  box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.12),0px 4px 5px 0px rgba(0, 0, 0, 0.14),0px 2px 4px -1px rgba(0, 0, 0, 0.20);
   content: '';
   position: absolute;
   top: 0;
@@ -230,7 +230,7 @@ exports[`render clusters 1`] = `
   height: 100%;
 }
 
-.c14 tbody tr:hover + tr {
+.c14 tbody tr:hover +tr {
   border-top: 2px solid rgba(0,0,0,0);
 }
 
diff --git a/web/packages/teleport/src/Console/DocumentBlank/__snapshots__/DocumentBlank.story.test.tsx.snap b/web/packages/teleport/src/Console/DocumentBlank/__snapshots__/DocumentBlank.story.test.tsx.snap
index f6e8b373429bc..8c5c48ccad5f7 100644
--- a/web/packages/teleport/src/Console/DocumentBlank/__snapshots__/DocumentBlank.story.test.tsx.snap
+++ b/web/packages/teleport/src/Console/DocumentBlank/__snapshots__/DocumentBlank.story.test.tsx.snap
@@ -57,7 +57,7 @@ exports[`render DocumentBlank 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c6:active,
@@ -69,7 +69,7 @@ exports[`render DocumentBlank 1`] = `
 
 .c6:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
diff --git a/web/packages/teleport/src/Console/DocumentKubeExec/DocumentKubeExec.test.tsx b/web/packages/teleport/src/Console/DocumentKubeExec/DocumentKubeExec.test.tsx
index 7405a7c23f082..6182b9f61aa89 100644
--- a/web/packages/teleport/src/Console/DocumentKubeExec/DocumentKubeExec.test.tsx
+++ b/web/packages/teleport/src/Console/DocumentKubeExec/DocumentKubeExec.test.tsx
@@ -20,7 +20,7 @@ import { render, screen } from '@testing-library/react';
 
 import '@testing-library/jest-dom';
 
-import { ThemeProvider } from 'styled-components';
+import ThemeProvider from 'design/ThemeProvider';
 import 'jest-canvas-mock';
 import { darkTheme } from 'design/theme';
 
diff --git a/web/packages/teleport/src/Console/DocumentNodes/DocumentNodes.tsx b/web/packages/teleport/src/Console/DocumentNodes/DocumentNodes.tsx
index c5974855edf98..05551ebcc8f5c 100644
--- a/web/packages/teleport/src/Console/DocumentNodes/DocumentNodes.tsx
+++ b/web/packages/teleport/src/Console/DocumentNodes/DocumentNodes.tsx
@@ -128,7 +128,7 @@ const Container = styled(Box)`
   flex: 1;
   max-width: 1024px;
   height: fit-content;
-  ::after {
+  &::after {
     content: ' ';
     padding-bottom: 24px;
   }
diff --git a/web/packages/teleport/src/Console/DocumentNodes/__snapshots__/DocumentNodes.story.test.tsx.snap b/web/packages/teleport/src/Console/DocumentNodes/__snapshots__/DocumentNodes.story.test.tsx.snap
index 75670f1c8bc27..0da9b38819b32 100644
--- a/web/packages/teleport/src/Console/DocumentNodes/__snapshots__/DocumentNodes.story.test.tsx.snap
+++ b/web/packages/teleport/src/Console/DocumentNodes/__snapshots__/DocumentNodes.story.test.tsx.snap
@@ -70,7 +70,7 @@ exports[`render DocumentNodes 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
   border-color: transparent;
   border-width: 1.5px;
   padding: 0 6.5px;
@@ -83,8 +83,8 @@ exports[`render DocumentNodes 1`] = `
 .c8:focus-visible,
 .teleport-button__force-focus-visible .c8 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -106,7 +106,7 @@ exports[`render DocumentNodes 1`] = `
 
 .c8:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -132,8 +132,8 @@ exports[`render DocumentNodes 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: transparent;
-  color: rgba(255,255,255,0.54);
-  border-color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
+  border-color: rgba(255, 255, 255, 0.54);
   border-width: 1.5px;
   padding: 0 6.5px;
   min-height: 24px;
@@ -145,8 +145,8 @@ exports[`render DocumentNodes 1`] = `
 .c39:focus-visible,
 .teleport-button__force-focus-visible .c39 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -168,7 +168,7 @@ exports[`render DocumentNodes 1`] = `
 
 .c39:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -197,7 +197,7 @@ exports[`render DocumentNodes 1`] = `
 }
 
 .c32:disabled {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
   cursor: default;
 }
 
@@ -232,7 +232,7 @@ exports[`render DocumentNodes 1`] = `
 }
 
 .c34:disabled {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
   cursor: default;
 }
 
@@ -249,7 +249,7 @@ exports[`render DocumentNodes 1`] = `
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
   margin-left: 8px;
 }
 
@@ -263,7 +263,7 @@ exports[`render DocumentNodes 1`] = `
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
   margin-left: 4px;
 }
 
@@ -368,10 +368,10 @@ exports[`render DocumentNodes 1`] = `
   top: 50%;
   width: 12px;
   height: 12px;
-  transform: translate(2px,-50%);
+  transform: translate(2px, -50%);
   border-radius: 14px;
   background: #FFFFFF;
-  box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px rgba(0,0,0,0.14),0px 1px 3px rgba(0,0,0,0.12);
+  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),0px 1px 1px rgba(0, 0, 0, 0.14),0px 1px 3px rgba(0, 0, 0, 0.12);
   transition: transform 0.05s ease-in;
 }
 
@@ -382,33 +382,33 @@ exports[`render DocumentNodes 1`] = `
   z-index: -1;
 }
 
-.c21:checked + .c22:before {
-  transform: translate(18px,-50%);
+.c21:checked+.c22:before {
+  transform: translate(18px, -50%);
 }
 
-.c21:enabled:checked + .c22 {
+.c21:enabled:checked+.c22 {
   background: #00BFA6;
 }
 
-.c21:enabled:checked + .c22:hover {
+.c21:enabled:checked+.c22:hover {
   background: #33CCB8;
 }
 
-.c21:enabled:checked + .c22:active {
+.c21:enabled:checked+.c22:active {
   background: #66D9CA;
 }
 
-.c21:disabled + .c22 {
+.c21:disabled+.c22 {
   background: rgba(255,255,255,0.07);
 }
 
-.c21:disabled + .c22:before {
+.c21:disabled+.c22:before {
   opacity: 0.36;
   box-shadow: none;
 }
 
-.c21:disabled:checked + .c22 {
-  background: rgba(0,191,166,0.25);
+.c21:disabled:checked+.c22 {
+  background: rgba(0, 191, 166, 0.25);
 }
 
 .c27 {
@@ -435,39 +435,39 @@ exports[`render DocumentNodes 1`] = `
   width: 100%;
 }
 
-.c35 > thead > tr > th,
-.c35 > tbody > tr > th,
-.c35 > tfoot > tr > th,
-.c35 > thead > tr > td,
-.c35 > tbody > tr > td,
-.c35 > tfoot > tr > td {
+.c35>thead>tr>th,
+.c35>tbody>tr>th,
+.c35>tfoot>tr>th,
+.c35>thead>tr>td,
+.c35>tbody>tr>td,
+.c35>tfoot>tr>td {
   padding: 8px 8px;
   vertical-align: middle;
 }
 
-.c35 > thead > tr > th:first-child,
-.c35 > tbody > tr > th:first-child,
-.c35 > tfoot > tr > th:first-child,
-.c35 > thead > tr > td:first-child,
-.c35 > tbody > tr > td:first-child,
-.c35 > tfoot > tr > td:first-child {
+.c35>thead>tr>th:first-child,
+.c35>tbody>tr>th:first-child,
+.c35>tfoot>tr>th:first-child,
+.c35>thead>tr>td:first-child,
+.c35>tbody>tr>td:first-child,
+.c35>tfoot>tr>td:first-child {
   padding-left: 24px;
 }
 
-.c35 > thead > tr > th:last-child,
-.c35 > tbody > tr > th:last-child,
-.c35 > tfoot > tr > th:last-child,
-.c35 > thead > tr > td:last-child,
-.c35 > tbody > tr > td:last-child,
-.c35 > tfoot > tr > td:last-child {
+.c35>thead>tr>th:last-child,
+.c35>tbody>tr>th:last-child,
+.c35>tfoot>tr>th:last-child,
+.c35>thead>tr>td:last-child,
+.c35>tbody>tr>td:last-child,
+.c35>tfoot>tr>td:last-child {
   padding-right: 24px;
 }
 
-.c35 > tbody > tr > td {
+.c35>tbody>tr>td {
   vertical-align: middle;
 }
 
-.c35 > thead > tr > th {
+.c35>thead>tr>th {
   color: #FFFFFF;
   font-weight: 600;
   font-size: 14px;
@@ -479,11 +479,11 @@ exports[`render DocumentNodes 1`] = `
   white-space: nowrap;
 }
 
-.c35 > thead > tr > th svg {
+.c35>thead>tr>th svg {
   height: 12px;
 }
 
-.c35 > tbody > tr > td {
+.c35>tbody>tr>td {
   color: #FFFFFF;
   font-weight: 300;
   font-size: 14px;
@@ -503,7 +503,7 @@ exports[`render DocumentNodes 1`] = `
 }
 
 .c35 tbody tr:hover:after {
-  box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.12),0px 4px 5px 0px rgba(0,0,0,0.14),0px 2px 4px -1px rgba(0,0,0,0.20);
+  box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.12),0px 4px 5px 0px rgba(0, 0, 0, 0.14),0px 2px 4px -1px rgba(0, 0, 0, 0.20);
   content: '';
   position: absolute;
   top: 0;
@@ -513,7 +513,7 @@ exports[`render DocumentNodes 1`] = `
   height: 100%;
 }
 
-.c35 tbody tr:hover + tr {
+.c35 tbody tr:hover +tr {
   border-top: 2px solid rgba(0,0,0,0);
 }
 
diff --git a/web/packages/teleport/src/Console/Tabs/__snapshots__/Tabs.story.test.tsx.snap b/web/packages/teleport/src/Console/Tabs/__snapshots__/Tabs.story.test.tsx.snap
index 657d17cf6537a..b570f2795feaa 100644
--- a/web/packages/teleport/src/Console/Tabs/__snapshots__/Tabs.story.test.tsx.snap
+++ b/web/packages/teleport/src/Console/Tabs/__snapshots__/Tabs.story.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`render ConsoleTabs 1`] = `
   box-sizing: border-box;
   height: 32px;
   width: 100%;
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
 }
 
 .c4 {
@@ -47,7 +47,7 @@ exports[`render ConsoleTabs 1`] = `
 }
 
 .c13:disabled {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
   cursor: default;
 }
 
diff --git a/web/packages/teleport/src/Databases/ConnectDialog/__snapshots__/ConnectDialog.test.tsx.snap b/web/packages/teleport/src/Databases/ConnectDialog/__snapshots__/ConnectDialog.test.tsx.snap
index 315bc51f672f8..840ba28b0755f 100644
--- a/web/packages/teleport/src/Databases/ConnectDialog/__snapshots__/ConnectDialog.test.tsx.snap
+++ b/web/packages/teleport/src/Databases/ConnectDialog/__snapshots__/ConnectDialog.test.tsx.snap
@@ -86,7 +86,7 @@ exports[`render dialog with instructions to connect to database 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c16:active,
@@ -98,7 +98,7 @@ exports[`render dialog with instructions to connect to database 1`] = `
 
 .c16:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -124,7 +124,7 @@ exports[`render dialog with instructions to connect to database 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
   border-color: transparent;
   border-width: 1.5px;
   padding: 0 30.5px;
@@ -137,8 +137,8 @@ exports[`render dialog with instructions to connect to database 1`] = `
 .c19:focus-visible,
 .teleport-button__force-focus-visible .c19 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -160,7 +160,7 @@ exports[`render dialog with instructions to connect to database 1`] = `
 
 .c19:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -219,7 +219,7 @@ exports[`render dialog with instructions to connect to database 1`] = `
   bottom: 0;
   top: 0;
   left: 0;
-  background-color: rgba(0,0,0,0.5);
+  background-color: rgba(0, 0, 0, 0.5);
   opacity: 1;
   touch-action: none;
 }
@@ -478,7 +478,7 @@ exports[`render dialog with instructions to connect to database with requestId 1
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c16:active,
@@ -490,7 +490,7 @@ exports[`render dialog with instructions to connect to database with requestId 1
 
 .c16:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -516,7 +516,7 @@ exports[`render dialog with instructions to connect to database with requestId 1
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
   border-color: transparent;
   border-width: 1.5px;
   padding: 0 30.5px;
@@ -529,8 +529,8 @@ exports[`render dialog with instructions to connect to database with requestId 1
 .c19:focus-visible,
 .teleport-button__force-focus-visible .c19 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -552,7 +552,7 @@ exports[`render dialog with instructions to connect to database with requestId 1
 
 .c19:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -611,7 +611,7 @@ exports[`render dialog with instructions to connect to database with requestId 1
   bottom: 0;
   top: 0;
   left: 0;
-  background-color: rgba(0,0,0,0.5);
+  background-color: rgba(0, 0, 0, 0.5);
   opacity: 1;
   touch-action: none;
 }
diff --git a/web/packages/teleport/src/DesktopSession/__snapshots__/DesktopSession.story.test.tsx.snap b/web/packages/teleport/src/DesktopSession/__snapshots__/DesktopSession.story.test.tsx.snap
index d1b1ba01c2ff9..bd792d6584c96 100644
--- a/web/packages/teleport/src/DesktopSession/__snapshots__/DesktopSession.story.test.tsx.snap
+++ b/web/packages/teleport/src/DesktopSession/__snapshots__/DesktopSession.story.test.tsx.snap
@@ -46,7 +46,7 @@ exports[`another session active 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c10:active,
@@ -58,7 +58,7 @@ exports[`another session active 1`] = `
 
 .c10:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -84,7 +84,7 @@ exports[`another session active 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
   border-color: transparent;
   border-width: 1.5px;
   padding: 0 30.5px;
@@ -97,8 +97,8 @@ exports[`another session active 1`] = `
 .c11:focus-visible,
 .teleport-button__force-focus-visible .c11 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -120,7 +120,7 @@ exports[`another session active 1`] = `
 
 .c11:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -170,7 +170,7 @@ exports[`another session active 1`] = `
   bottom: 0;
   top: 0;
   left: 0;
-  background-color: rgba(0,0,0,0.5);
+  background-color: rgba(0, 0, 0, 0.5);
   opacity: 1;
   touch-action: none;
 }
@@ -311,7 +311,7 @@ exports[`connected settings false 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c9:active,
@@ -323,7 +323,7 @@ exports[`connected settings false 1`] = `
 
 .c9:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -348,7 +348,7 @@ exports[`connected settings false 1`] = `
 
 .c11 {
   box-sizing: border-box;
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
 }
 
 .c14 {
@@ -370,11 +370,11 @@ exports[`connected settings false 1`] = `
   height: 24px;
   width: 24px;
   margin-left: 24px;
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
 }
 
 .c14:disabled {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
   cursor: default;
 }
 
@@ -649,7 +649,7 @@ exports[`connected settings true 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c9:active,
@@ -661,7 +661,7 @@ exports[`connected settings true 1`] = `
 
 .c9:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -686,7 +686,7 @@ exports[`connected settings true 1`] = `
 
 .c11 {
   box-sizing: border-box;
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
 }
 
 .c14 {
@@ -708,11 +708,11 @@ exports[`connected settings true 1`] = `
   height: 24px;
   width: 24px;
   margin-left: 24px;
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
 }
 
 .c14:disabled {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
   cursor: default;
 }
 
@@ -961,7 +961,7 @@ exports[`connection error 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
   border-color: transparent;
   border-width: 1.5px;
   padding: 0 30.5px;
@@ -975,8 +975,8 @@ exports[`connection error 1`] = `
 .c11:focus-visible,
 .teleport-button__force-focus-visible .c11 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -998,7 +998,7 @@ exports[`connection error 1`] = `
 
 .c11:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -1069,7 +1069,7 @@ exports[`connection error 1`] = `
   bottom: 0;
   top: 0;
   left: 0;
-  background-color: rgba(0,0,0,0.5);
+  background-color: rgba(0, 0, 0, 0.5);
   opacity: 1;
   touch-action: none;
 }
@@ -1211,7 +1211,7 @@ exports[`disconnected 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c9:active,
@@ -1223,7 +1223,7 @@ exports[`disconnected 1`] = `
 
 .c9:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -1248,7 +1248,7 @@ exports[`disconnected 1`] = `
 
 .c11 {
   box-sizing: border-box;
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
 }
 
 .c14 {
@@ -1270,11 +1270,11 @@ exports[`disconnected 1`] = `
   height: 24px;
   width: 24px;
   margin-left: 24px;
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
 }
 
 .c14:disabled {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
   cursor: default;
 }
 
@@ -1523,7 +1523,7 @@ exports[`fetch error 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
   border-color: transparent;
   border-width: 1.5px;
   padding: 0 30.5px;
@@ -1537,8 +1537,8 @@ exports[`fetch error 1`] = `
 .c11:focus-visible,
 .teleport-button__force-focus-visible .c11 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -1560,7 +1560,7 @@ exports[`fetch error 1`] = `
 
 .c11:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -1631,7 +1631,7 @@ exports[`fetch error 1`] = `
   bottom: 0;
   top: 0;
   left: 0;
-  background-color: rgba(0,0,0,0.5);
+  background-color: rgba(0, 0, 0, 0.5);
   opacity: 1;
   touch-action: none;
 }
@@ -1773,7 +1773,7 @@ exports[`fetch processing 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c9:active,
@@ -1785,7 +1785,7 @@ exports[`fetch processing 1`] = `
 
 .c9:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -1810,7 +1810,7 @@ exports[`fetch processing 1`] = `
 
 .c11 {
   box-sizing: border-box;
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
 }
 
 .c16 {
@@ -1838,11 +1838,11 @@ exports[`fetch processing 1`] = `
   height: 24px;
   width: 24px;
   margin-left: 24px;
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
 }
 
 .c14:disabled {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
   cursor: default;
 }
 
@@ -2120,7 +2120,7 @@ exports[`processing 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c9:active,
@@ -2132,7 +2132,7 @@ exports[`processing 1`] = `
 
 .c9:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -2157,7 +2157,7 @@ exports[`processing 1`] = `
 
 .c11 {
   box-sizing: border-box;
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
 }
 
 .c16 {
@@ -2185,11 +2185,11 @@ exports[`processing 1`] = `
   height: 24px;
   width: 24px;
   margin-left: 24px;
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
 }
 
 .c14:disabled {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
   cursor: default;
 }
 
@@ -2467,7 +2467,7 @@ exports[`tdp processing 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c9:active,
@@ -2479,7 +2479,7 @@ exports[`tdp processing 1`] = `
 
 .c9:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -2504,7 +2504,7 @@ exports[`tdp processing 1`] = `
 
 .c11 {
   box-sizing: border-box;
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
 }
 
 .c16 {
@@ -2532,11 +2532,11 @@ exports[`tdp processing 1`] = `
   height: 24px;
   width: 24px;
   margin-left: 24px;
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
 }
 
 .c14:disabled {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
   cursor: default;
 }
 
@@ -2788,7 +2788,7 @@ exports[`unintended disconnect 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
   border-color: transparent;
   border-width: 1.5px;
   padding: 0 30.5px;
@@ -2802,8 +2802,8 @@ exports[`unintended disconnect 1`] = `
 .c11:focus-visible,
 .teleport-button__force-focus-visible .c11 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -2825,7 +2825,7 @@ exports[`unintended disconnect 1`] = `
 
 .c11:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -2896,7 +2896,7 @@ exports[`unintended disconnect 1`] = `
   bottom: 0;
   top: 0;
   left: 0;
-  background-color: rgba(0,0,0,0.5);
+  background-color: rgba(0, 0, 0, 0.5);
   opacity: 1;
   touch-action: none;
 }
@@ -3038,7 +3038,7 @@ exports[`webauthn prompt 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c11:active,
@@ -3050,7 +3050,7 @@ exports[`webauthn prompt 1`] = `
 
 .c11:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -3076,7 +3076,7 @@ exports[`webauthn prompt 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
   border-color: transparent;
   border-width: 1.5px;
   padding: 0 30.5px;
@@ -3089,8 +3089,8 @@ exports[`webauthn prompt 1`] = `
 .c12:focus-visible,
 .teleport-button__force-focus-visible .c12 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -3112,7 +3112,7 @@ exports[`webauthn prompt 1`] = `
 
 .c12:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -3171,7 +3171,7 @@ exports[`webauthn prompt 1`] = `
   bottom: 0;
   top: 0;
   left: 0;
-  background-color: rgba(0,0,0,0.5);
+  background-color: rgba(0, 0, 0, 0.5);
   opacity: 1;
   touch-action: none;
 }
diff --git a/web/packages/teleport/src/Discover/SelectResource/SelectResource.tsx b/web/packages/teleport/src/Discover/SelectResource/SelectResource.tsx
index 8aa42f9303d70..d9eaad476aab8 100644
--- a/web/packages/teleport/src/Discover/SelectResource/SelectResource.tsx
+++ b/web/packages/teleport/src/Discover/SelectResource/SelectResource.tsx
@@ -271,7 +271,7 @@ const ClearSearch = ({ onClick }: { onClick(): void }) => {
         font-size: 12px;
         opacity: 0.7;
 
-        :hover {
+        &:hover {
           cursor: pointer;
           opacity: 1;
         }
@@ -612,7 +612,7 @@ const ResourceCard = styled.div<{ hasAccess?: boolean }>`
 
   opacity: ${props => (props.hasAccess ? '1' : '0.45')};
 
-  :hover {
+  &:hover {
     background: ${props => props.theme.colors.spotBackground[1]};
   }
 `;
diff --git a/web/packages/teleport/src/Discover/SelectResource/__snapshots__/SelectResource.story.test.tsx.snap b/web/packages/teleport/src/Discover/SelectResource/__snapshots__/SelectResource.story.test.tsx.snap
index 0469ca350eb2d..6db80bf6e41eb 100644
--- a/web/packages/teleport/src/Discover/SelectResource/__snapshots__/SelectResource.story.test.tsx.snap
+++ b/web/packages/teleport/src/Discover/SelectResource/__snapshots__/SelectResource.story.test.tsx.snap
@@ -78,7 +78,7 @@ exports[`render with URL loc state set to "server" 1`] = `
   text-overflow: ellipsis;
   font-size: 12px;
   margin: 0px;
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
 }
 
 .c22 {
@@ -791,7 +791,7 @@ exports[`render with all access 1`] = `
   text-overflow: ellipsis;
   font-size: 12px;
   margin: 0px;
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
 }
 
 .c16 {
@@ -2792,7 +2792,7 @@ exports[`render with no access 1`] = `
   text-overflow: ellipsis;
   font-size: 12px;
   margin: 0px;
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
 }
 
 .c18 {
@@ -4941,7 +4941,7 @@ exports[`render with partial access 1`] = `
   text-overflow: ellipsis;
   font-size: 12px;
   margin: 0px;
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
 }
 
 .c16 {
diff --git a/web/packages/teleport/src/Discover/Shared/HintBox.tsx b/web/packages/teleport/src/Discover/Shared/HintBox.tsx
index cd860611b9ce7..3299c6d5ebc74 100644
--- a/web/packages/teleport/src/Discover/Shared/HintBox.tsx
+++ b/web/packages/teleport/src/Discover/Shared/HintBox.tsx
@@ -25,7 +25,7 @@ import * as Icons from 'design/Icon';
 
 import { TextIcon } from 'teleport/Discover/Shared/Text';
 
-const HintBoxContainer = styled(Box).attrs((props: { maxWidth?: string }) => ({
+const HintBoxContainer = styled(Box).attrs<{ maxWidth?: string }>(props => ({
   maxWidth: props.maxWidth,
 }))`
   background-color: ${props => props.theme.colors.spotBackground[0]};
diff --git a/web/packages/teleport/src/Kubes/ConnectDialog/__snapshots__/ConnectDialog.story.test.tsx.snap b/web/packages/teleport/src/Kubes/ConnectDialog/__snapshots__/ConnectDialog.story.test.tsx.snap
index 5dbbb53c37a2a..af61547019ffd 100644
--- a/web/packages/teleport/src/Kubes/ConnectDialog/__snapshots__/ConnectDialog.story.test.tsx.snap
+++ b/web/packages/teleport/src/Kubes/ConnectDialog/__snapshots__/ConnectDialog.story.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`kube connect dialogue local 1`] = `
   bottom: 0;
   top: 0;
   left: 0;
-  background-color: rgba(0,0,0,0.5);
+  background-color: rgba(0, 0, 0, 0.5);
   opacity: 1;
   touch-action: none;
 }
@@ -212,7 +212,7 @@ exports[`kube connect dialogue local 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c17:active,
@@ -224,7 +224,7 @@ exports[`kube connect dialogue local 1`] = `
 
 .c17:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -250,7 +250,7 @@ exports[`kube connect dialogue local 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
   border-color: transparent;
   border-width: 1.5px;
   padding: 0 30.5px;
@@ -263,8 +263,8 @@ exports[`kube connect dialogue local 1`] = `
 .c24:focus-visible,
 .teleport-button__force-focus-visible .c24 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -286,7 +286,7 @@ exports[`kube connect dialogue local 1`] = `
 
 .c24:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -517,7 +517,7 @@ exports[`kube connect dialogue local with requestId 1`] = `
   bottom: 0;
   top: 0;
   left: 0;
-  background-color: rgba(0,0,0,0.5);
+  background-color: rgba(0, 0, 0, 0.5);
   opacity: 1;
   touch-action: none;
 }
@@ -727,7 +727,7 @@ exports[`kube connect dialogue local with requestId 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c17:active,
@@ -739,7 +739,7 @@ exports[`kube connect dialogue local with requestId 1`] = `
 
 .c17:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -765,7 +765,7 @@ exports[`kube connect dialogue local with requestId 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
   border-color: transparent;
   border-width: 1.5px;
   padding: 0 30.5px;
@@ -778,8 +778,8 @@ exports[`kube connect dialogue local with requestId 1`] = `
 .c25:focus-visible,
 .teleport-button__force-focus-visible .c25 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -801,7 +801,7 @@ exports[`kube connect dialogue local with requestId 1`] = `
 
 .c25:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -1068,7 +1068,7 @@ exports[`kube connect dialogue sso 1`] = `
   bottom: 0;
   top: 0;
   left: 0;
-  background-color: rgba(0,0,0,0.5);
+  background-color: rgba(0, 0, 0, 0.5);
   opacity: 1;
   touch-action: none;
 }
@@ -1272,7 +1272,7 @@ exports[`kube connect dialogue sso 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c17:active,
@@ -1284,7 +1284,7 @@ exports[`kube connect dialogue sso 1`] = `
 
 .c17:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -1310,7 +1310,7 @@ exports[`kube connect dialogue sso 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
   border-color: transparent;
   border-width: 1.5px;
   padding: 0 30.5px;
@@ -1323,8 +1323,8 @@ exports[`kube connect dialogue sso 1`] = `
 .c24:focus-visible,
 .teleport-button__force-focus-visible .c24 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -1346,7 +1346,7 @@ exports[`kube connect dialogue sso 1`] = `
 
 .c24:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
diff --git a/web/packages/teleport/src/LocksV2/common.tsx b/web/packages/teleport/src/LocksV2/common.tsx
index b95a1ccd040f3..0eb436fbef9de 100644
--- a/web/packages/teleport/src/LocksV2/common.tsx
+++ b/web/packages/teleport/src/LocksV2/common.tsx
@@ -25,7 +25,7 @@ export const TrashButton = styled(Trash)`
   border-radius: 2px;
   cursor: pointer;
   background-color: ${({ theme }) => theme.colors.buttons.trashButton.default};
-  :hover {
+  &:hover {
     background-color: ${({ theme }) => theme.colors.buttons.trashButton.hover};
   }
 `;
diff --git a/web/packages/teleport/src/Login/__snapshots__/LoginFailed.test.tsx.snap b/web/packages/teleport/src/Login/__snapshots__/LoginFailed.test.tsx.snap
index c7866b53030ef..8a2e7e3aa4346 100644
--- a/web/packages/teleport/src/Login/__snapshots__/LoginFailed.test.tsx.snap
+++ b/web/packages/teleport/src/Login/__snapshots__/LoginFailed.test.tsx.snap
@@ -37,7 +37,7 @@ exports[`callback error message 1`] = `
 }
 
 .c2 {
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px rgba(0,0,0,0.14),0px 1px 18px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px rgba(0, 0, 0, 0.14),0px 1px 18px rgba(0, 0, 0, 0.12);
   border-radius: 8px;
   background-color: #222C59;
 }
@@ -151,7 +151,7 @@ exports[`default error message 1`] = `
 }
 
 .c2 {
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px rgba(0,0,0,0.14),0px 1px 18px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px rgba(0, 0, 0, 0.14),0px 1px 18px rgba(0, 0, 0, 0.12);
   border-radius: 8px;
   background-color: #222C59;
 }
diff --git a/web/packages/teleport/src/Login/__snapshots__/LoginSuccess.test.tsx.snap b/web/packages/teleport/src/Login/__snapshots__/LoginSuccess.test.tsx.snap
index 4f5cffb435f51..b3167a67c2614 100644
--- a/web/packages/teleport/src/Login/__snapshots__/LoginSuccess.test.tsx.snap
+++ b/web/packages/teleport/src/Login/__snapshots__/LoginSuccess.test.tsx.snap
@@ -21,7 +21,7 @@ exports[`renders 1`] = `
 }
 
 .c2 {
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px rgba(0,0,0,0.14),0px 1px 18px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px rgba(0, 0, 0, 0.14),0px 1px 18px rgba(0, 0, 0, 0.12);
   border-radius: 8px;
   background-color: #222C59;
 }
diff --git a/web/packages/teleport/src/Navigation/NavigationItem.tsx b/web/packages/teleport/src/Navigation/NavigationItem.tsx
index d145dd78e1d60..7f5c236118b01 100644
--- a/web/packages/teleport/src/Navigation/NavigationItem.tsx
+++ b/web/packages/teleport/src/Navigation/NavigationItem.tsx
@@ -301,7 +301,7 @@ export function NavigationItem(props: NavigationItemProps) {
   );
 }
 
-const AttentionDot = styled.div.attrs(() => ({
+const AttentionDot = styled.div.attrs<{ 'data-testid'?: string }>(() => ({
   'data-testid': 'nav-item-attention-dot',
 }))`
   margin-left: 15px;
diff --git a/web/packages/teleport/src/Nodes/__snapshots__/Nodes.story.test.tsx.snap b/web/packages/teleport/src/Nodes/__snapshots__/Nodes.story.test.tsx.snap
index 70d1beebde086..6e3a9711225d8 100644
--- a/web/packages/teleport/src/Nodes/__snapshots__/Nodes.story.test.tsx.snap
+++ b/web/packages/teleport/src/Nodes/__snapshots__/Nodes.story.test.tsx.snap
@@ -83,7 +83,7 @@ exports[`empty state 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c16:active,
@@ -95,7 +95,7 @@ exports[`empty state 1`] = `
 
 .c16:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -121,8 +121,8 @@ exports[`empty state 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: transparent;
-  color: rgba(255,255,255,0.54);
-  border-color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
+  border-color: rgba(255, 255, 255, 0.54);
   border-width: 1.5px;
   padding: 0 30.5px;
   min-height: 32px;
@@ -137,8 +137,8 @@ exports[`empty state 1`] = `
 .c17:focus-visible,
 .teleport-button__force-focus-visible .c17 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -160,7 +160,7 @@ exports[`empty state 1`] = `
 
 .c17:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -259,7 +259,7 @@ exports[`empty state 1`] = `
       </div>
     </div>
     <div
-      class="c8 c9 sc-gEvEer c8"
+      class="c8 c9 sc-gEvDqW c8"
       width="100%"
     >
       <div
@@ -401,8 +401,8 @@ exports[`failed 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: transparent;
-  color: rgba(255,255,255,0.54);
-  border-color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
+  border-color: rgba(255, 255, 255, 0.54);
   border-width: 1.5px;
   padding: 0 6.5px;
   min-height: 24px;
@@ -414,8 +414,8 @@ exports[`failed 1`] = `
 .c38:focus-visible,
 .teleport-button__force-focus-visible .c38 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -437,7 +437,7 @@ exports[`failed 1`] = `
 
 .c38:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -466,7 +466,7 @@ exports[`failed 1`] = `
 }
 
 .c31:disabled {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
   cursor: default;
 }
 
@@ -501,7 +501,7 @@ exports[`failed 1`] = `
 }
 
 .c33:disabled {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
   cursor: default;
 }
 
@@ -524,7 +524,7 @@ exports[`failed 1`] = `
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
   margin-left: 4px;
 }
 
@@ -633,10 +633,10 @@ exports[`failed 1`] = `
   top: 50%;
   width: 12px;
   height: 12px;
-  transform: translate(2px,-50%);
+  transform: translate(2px, -50%);
   border-radius: 14px;
   background: #FFFFFF;
-  box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px rgba(0,0,0,0.14),0px 1px 3px rgba(0,0,0,0.12);
+  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),0px 1px 1px rgba(0, 0, 0, 0.14),0px 1px 3px rgba(0, 0, 0, 0.12);
   transition: transform 0.05s ease-in;
 }
 
@@ -647,33 +647,33 @@ exports[`failed 1`] = `
   z-index: -1;
 }
 
-.c19:checked + .c20:before {
-  transform: translate(18px,-50%);
+.c19:checked+.c20:before {
+  transform: translate(18px, -50%);
 }
 
-.c19:enabled:checked + .c20 {
+.c19:enabled:checked+.c20 {
   background: #00BFA6;
 }
 
-.c19:enabled:checked + .c20:hover {
+.c19:enabled:checked+.c20:hover {
   background: #33CCB8;
 }
 
-.c19:enabled:checked + .c20:active {
+.c19:enabled:checked+.c20:active {
   background: #66D9CA;
 }
 
-.c19:disabled + .c20 {
+.c19:disabled+.c20 {
   background: rgba(255,255,255,0.07);
 }
 
-.c19:disabled + .c20:before {
+.c19:disabled+.c20:before {
   opacity: 0.36;
   box-shadow: none;
 }
 
-.c19:disabled:checked + .c20 {
-  background: rgba(0,191,166,0.25);
+.c19:disabled:checked+.c20 {
+  background: rgba(0, 191, 166, 0.25);
 }
 
 .c5 {
@@ -709,39 +709,39 @@ exports[`failed 1`] = `
   width: 100%;
 }
 
-.c34 > thead > tr > th,
-.c34 > tbody > tr > th,
-.c34 > tfoot > tr > th,
-.c34 > thead > tr > td,
-.c34 > tbody > tr > td,
-.c34 > tfoot > tr > td {
+.c34>thead>tr>th,
+.c34>tbody>tr>th,
+.c34>tfoot>tr>th,
+.c34>thead>tr>td,
+.c34>tbody>tr>td,
+.c34>tfoot>tr>td {
   padding: 8px 8px;
   vertical-align: middle;
 }
 
-.c34 > thead > tr > th:first-child,
-.c34 > tbody > tr > th:first-child,
-.c34 > tfoot > tr > th:first-child,
-.c34 > thead > tr > td:first-child,
-.c34 > tbody > tr > td:first-child,
-.c34 > tfoot > tr > td:first-child {
+.c34>thead>tr>th:first-child,
+.c34>tbody>tr>th:first-child,
+.c34>tfoot>tr>th:first-child,
+.c34>thead>tr>td:first-child,
+.c34>tbody>tr>td:first-child,
+.c34>tfoot>tr>td:first-child {
   padding-left: 24px;
 }
 
-.c34 > thead > tr > th:last-child,
-.c34 > tbody > tr > th:last-child,
-.c34 > tfoot > tr > th:last-child,
-.c34 > thead > tr > td:last-child,
-.c34 > tbody > tr > td:last-child,
-.c34 > tfoot > tr > td:last-child {
+.c34>thead>tr>th:last-child,
+.c34>tbody>tr>th:last-child,
+.c34>tfoot>tr>th:last-child,
+.c34>thead>tr>td:last-child,
+.c34>tbody>tr>td:last-child,
+.c34>tfoot>tr>td:last-child {
   padding-right: 24px;
 }
 
-.c34 > tbody > tr > td {
+.c34>tbody>tr>td {
   vertical-align: middle;
 }
 
-.c34 > thead > tr > th {
+.c34>thead>tr>th {
   color: #FFFFFF;
   font-weight: 600;
   font-size: 14px;
@@ -753,11 +753,11 @@ exports[`failed 1`] = `
   white-space: nowrap;
 }
 
-.c34 > thead > tr > th svg {
+.c34>thead>tr>th svg {
   height: 12px;
 }
 
-.c34 > tbody > tr > td {
+.c34>tbody>tr>td {
   color: #FFFFFF;
   font-weight: 300;
   font-size: 14px;
@@ -777,7 +777,7 @@ exports[`failed 1`] = `
 }
 
 .c34 tbody tr:hover:after {
-  box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.12),0px 4px 5px 0px rgba(0,0,0,0.14),0px 2px 4px -1px rgba(0,0,0,0.20);
+  box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.12),0px 4px 5px 0px rgba(0, 0, 0, 0.14),0px 2px 4px -1px rgba(0, 0, 0, 0.20);
   content: '';
   position: absolute;
   top: 0;
@@ -787,7 +787,7 @@ exports[`failed 1`] = `
   height: 100%;
 }
 
-.c34 tbody tr:hover + tr {
+.c34 tbody tr:hover +tr {
   border-top: 2px solid rgba(0,0,0,0);
 }
 
@@ -1639,7 +1639,7 @@ exports[`loaded 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c8:active,
@@ -1651,7 +1651,7 @@ exports[`loaded 1`] = `
 
 .c8:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -1677,8 +1677,8 @@ exports[`loaded 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: transparent;
-  color: rgba(255,255,255,0.54);
-  border-color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
+  border-color: rgba(255, 255, 255, 0.54);
   border-width: 1.5px;
   padding: 0 6.5px;
   min-height: 24px;
@@ -1690,8 +1690,8 @@ exports[`loaded 1`] = `
 .c38:focus-visible,
 .teleport-button__force-focus-visible .c38 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -1713,7 +1713,7 @@ exports[`loaded 1`] = `
 
 .c38:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -1742,7 +1742,7 @@ exports[`loaded 1`] = `
 }
 
 .c31:disabled {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
   cursor: default;
 }
 
@@ -1777,7 +1777,7 @@ exports[`loaded 1`] = `
 }
 
 .c33:disabled {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
   cursor: default;
 }
 
@@ -1800,7 +1800,7 @@ exports[`loaded 1`] = `
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
   margin-left: 4px;
 }
 
@@ -1909,10 +1909,10 @@ exports[`loaded 1`] = `
   top: 50%;
   width: 12px;
   height: 12px;
-  transform: translate(2px,-50%);
+  transform: translate(2px, -50%);
   border-radius: 14px;
   background: #FFFFFF;
-  box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px rgba(0,0,0,0.14),0px 1px 3px rgba(0,0,0,0.12);
+  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),0px 1px 1px rgba(0, 0, 0, 0.14),0px 1px 3px rgba(0, 0, 0, 0.12);
   transition: transform 0.05s ease-in;
 }
 
@@ -1923,33 +1923,33 @@ exports[`loaded 1`] = `
   z-index: -1;
 }
 
-.c19:checked + .c20:before {
-  transform: translate(18px,-50%);
+.c19:checked+.c20:before {
+  transform: translate(18px, -50%);
 }
 
-.c19:enabled:checked + .c20 {
+.c19:enabled:checked+.c20 {
   background: #00BFA6;
 }
 
-.c19:enabled:checked + .c20:hover {
+.c19:enabled:checked+.c20:hover {
   background: #33CCB8;
 }
 
-.c19:enabled:checked + .c20:active {
+.c19:enabled:checked+.c20:active {
   background: #66D9CA;
 }
 
-.c19:disabled + .c20 {
+.c19:disabled+.c20 {
   background: rgba(255,255,255,0.07);
 }
 
-.c19:disabled + .c20:before {
+.c19:disabled+.c20:before {
   opacity: 0.36;
   box-shadow: none;
 }
 
-.c19:disabled:checked + .c20 {
-  background: rgba(0,191,166,0.25);
+.c19:disabled:checked+.c20 {
+  background: rgba(0, 191, 166, 0.25);
 }
 
 .c5 {
@@ -1985,39 +1985,39 @@ exports[`loaded 1`] = `
   width: 100%;
 }
 
-.c34 > thead > tr > th,
-.c34 > tbody > tr > th,
-.c34 > tfoot > tr > th,
-.c34 > thead > tr > td,
-.c34 > tbody > tr > td,
-.c34 > tfoot > tr > td {
+.c34>thead>tr>th,
+.c34>tbody>tr>th,
+.c34>tfoot>tr>th,
+.c34>thead>tr>td,
+.c34>tbody>tr>td,
+.c34>tfoot>tr>td {
   padding: 8px 8px;
   vertical-align: middle;
 }
 
-.c34 > thead > tr > th:first-child,
-.c34 > tbody > tr > th:first-child,
-.c34 > tfoot > tr > th:first-child,
-.c34 > thead > tr > td:first-child,
-.c34 > tbody > tr > td:first-child,
-.c34 > tfoot > tr > td:first-child {
+.c34>thead>tr>th:first-child,
+.c34>tbody>tr>th:first-child,
+.c34>tfoot>tr>th:first-child,
+.c34>thead>tr>td:first-child,
+.c34>tbody>tr>td:first-child,
+.c34>tfoot>tr>td:first-child {
   padding-left: 24px;
 }
 
-.c34 > thead > tr > th:last-child,
-.c34 > tbody > tr > th:last-child,
-.c34 > tfoot > tr > th:last-child,
-.c34 > thead > tr > td:last-child,
-.c34 > tbody > tr > td:last-child,
-.c34 > tfoot > tr > td:last-child {
+.c34>thead>tr>th:last-child,
+.c34>tbody>tr>th:last-child,
+.c34>tfoot>tr>th:last-child,
+.c34>thead>tr>td:last-child,
+.c34>tbody>tr>td:last-child,
+.c34>tfoot>tr>td:last-child {
   padding-right: 24px;
 }
 
-.c34 > tbody > tr > td {
+.c34>tbody>tr>td {
   vertical-align: middle;
 }
 
-.c34 > thead > tr > th {
+.c34>thead>tr>th {
   color: #FFFFFF;
   font-weight: 600;
   font-size: 14px;
@@ -2029,11 +2029,11 @@ exports[`loaded 1`] = `
   white-space: nowrap;
 }
 
-.c34 > thead > tr > th svg {
+.c34>thead>tr>th svg {
   height: 12px;
 }
 
-.c34 > tbody > tr > td {
+.c34>tbody>tr>td {
   color: #FFFFFF;
   font-weight: 300;
   font-size: 14px;
@@ -2053,7 +2053,7 @@ exports[`loaded 1`] = `
 }
 
 .c34 tbody tr:hover:after {
-  box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.12),0px 4px 5px 0px rgba(0,0,0,0.14),0px 2px 4px -1px rgba(0,0,0,0.20);
+  box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.12),0px 4px 5px 0px rgba(0, 0, 0, 0.14),0px 2px 4px -1px rgba(0, 0, 0, 0.20);
   content: '';
   position: absolute;
   top: 0;
@@ -2063,7 +2063,7 @@ exports[`loaded 1`] = `
   height: 100%;
 }
 
-.c34 tbody tr:hover + tr {
+.c34 tbody tr:hover +tr {
   border-top: 2px solid rgba(0,0,0,0);
 }
 
diff --git a/web/packages/teleport/src/Recordings/__snapshots__/Recordings.story.test.tsx.snap b/web/packages/teleport/src/Recordings/__snapshots__/Recordings.story.test.tsx.snap
index a177179127f20..90ae71bdf7fb2 100644
--- a/web/packages/teleport/src/Recordings/__snapshots__/Recordings.story.test.tsx.snap
+++ b/web/packages/teleport/src/Recordings/__snapshots__/Recordings.story.test.tsx.snap
@@ -63,7 +63,7 @@ exports[`rendering of Session Recordings 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c19:active,
@@ -75,7 +75,7 @@ exports[`rendering of Session Recordings 1`] = `
 
 .c19:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -130,20 +130,20 @@ exports[`rendering of Session Recordings 1`] = `
   outline: none;
   min-height: 40px;
   height: fit-content;
-  border: 1px solid rgba(255,255,255,0.54);
+  border: 1px solid rgba(255, 255, 255, 0.54);
   border-radius: 4px;
   background-color: transparent;
   box-shadow: none;
 }
 
 .c9 .react-select__control .react-select__dropdown-indicator {
-  color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
 }
 
 .c9 .react-select__control:hover,
 .c9 .react-select__control:focus,
 .c9 .react-select__control:active {
-  border: 1px solid rgba(255,255,255,0.72);
+  border: 1px solid rgba(255, 255, 255, 0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
@@ -164,7 +164,7 @@ exports[`rendering of Session Recordings 1`] = `
 }
 
 .c9 .react-select__control--is-focused {
-  border-color: rgba(255,255,255,0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
@@ -178,7 +178,7 @@ exports[`rendering of Session Recordings 1`] = `
 }
 
 .c9 .react-select__placeholder {
-  color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
 }
 
 .c9 .react-select__multi-value {
@@ -224,7 +224,7 @@ exports[`rendering of Session Recordings 1`] = `
 }
 
 .c9 .react-select__clear-indicator {
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
 }
 
 .c9 .react-select__clear-indicator:hover,
@@ -240,7 +240,7 @@ exports[`rendering of Session Recordings 1`] = `
 .c9 .react-select__menu {
   margin-top: 0px;
   background-color: #344179;
-  box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
+  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),0px 8px 10px 1px rgba(0, 0, 0, 0.14),0px 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 
 .c9 .react-select__menu .react-select__menu-list::-webkit-scrollbar-thumb {
@@ -257,17 +257,17 @@ exports[`rendering of Session Recordings 1`] = `
 }
 
 .c9 .react-select__control--is-disabled {
-  color: rgba(255,255,255,0.36);
-  border: 1px solid rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
+  border: 1px solid rgba(255, 255, 255, 0.36);
 }
 
 .c9 .react-select__control--is-disabled .react-select__single-value,
 .c9 .react-select__control--is-disabled .react-select__placeholder {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
 }
 
 .c9 .react-select__control--is-disabled .react-select__indicator {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
 }
 
 .c9 .react-select__input {
@@ -307,39 +307,39 @@ exports[`rendering of Session Recordings 1`] = `
   width: 100%;
 }
 
-.c16 > thead > tr > th,
-.c16 > tbody > tr > th,
-.c16 > tfoot > tr > th,
-.c16 > thead > tr > td,
-.c16 > tbody > tr > td,
-.c16 > tfoot > tr > td {
+.c16>thead>tr>th,
+.c16>tbody>tr>th,
+.c16>tfoot>tr>th,
+.c16>thead>tr>td,
+.c16>tbody>tr>td,
+.c16>tfoot>tr>td {
   padding: 8px 8px;
   vertical-align: middle;
 }
 
-.c16 > thead > tr > th:first-child,
-.c16 > tbody > tr > th:first-child,
-.c16 > tfoot > tr > th:first-child,
-.c16 > thead > tr > td:first-child,
-.c16 > tbody > tr > td:first-child,
-.c16 > tfoot > tr > td:first-child {
+.c16>thead>tr>th:first-child,
+.c16>tbody>tr>th:first-child,
+.c16>tfoot>tr>th:first-child,
+.c16>thead>tr>td:first-child,
+.c16>tbody>tr>td:first-child,
+.c16>tfoot>tr>td:first-child {
   padding-left: 24px;
 }
 
-.c16 > thead > tr > th:last-child,
-.c16 > tbody > tr > th:last-child,
-.c16 > tfoot > tr > th:last-child,
-.c16 > thead > tr > td:last-child,
-.c16 > tbody > tr > td:last-child,
-.c16 > tfoot > tr > td:last-child {
+.c16>thead>tr>th:last-child,
+.c16>tbody>tr>th:last-child,
+.c16>tfoot>tr>th:last-child,
+.c16>thead>tr>td:last-child,
+.c16>tbody>tr>td:last-child,
+.c16>tfoot>tr>td:last-child {
   padding-right: 24px;
 }
 
-.c16 > tbody > tr > td {
+.c16>tbody>tr>td {
   vertical-align: middle;
 }
 
-.c16 > thead > tr > th {
+.c16>thead>tr>th {
   color: #FFFFFF;
   font-weight: 600;
   font-size: 14px;
@@ -351,11 +351,11 @@ exports[`rendering of Session Recordings 1`] = `
   white-space: nowrap;
 }
 
-.c16 > thead > tr > th svg {
+.c16>thead>tr>th svg {
   height: 12px;
 }
 
-.c16 > tbody > tr > td {
+.c16>tbody>tr>td {
   color: #FFFFFF;
   font-weight: 300;
   font-size: 14px;
@@ -375,7 +375,7 @@ exports[`rendering of Session Recordings 1`] = `
 }
 
 .c16 tbody tr:hover:after {
-  box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.12),0px 4px 5px 0px rgba(0,0,0,0.14),0px 2px 4px -1px rgba(0,0,0,0.20);
+  box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.12),0px 4px 5px 0px rgba(0, 0, 0, 0.14),0px 2px 4px -1px rgba(0, 0, 0, 0.20);
   content: '';
   position: absolute;
   top: 0;
@@ -385,7 +385,7 @@ exports[`rendering of Session Recordings 1`] = `
   height: 100%;
 }
 
-.c16 tbody tr:hover + tr {
+.c16 tbody tr:hover +tr {
   border-top: 2px solid rgba(0,0,0,0);
 }
 
diff --git a/web/packages/teleport/src/Sessions/__snapshots__/Sessions.story.test.tsx.snap b/web/packages/teleport/src/Sessions/__snapshots__/Sessions.story.test.tsx.snap
index 74a710b7aa22e..7db0fda116799 100644
--- a/web/packages/teleport/src/Sessions/__snapshots__/Sessions.story.test.tsx.snap
+++ b/web/packages/teleport/src/Sessions/__snapshots__/Sessions.story.test.tsx.snap
@@ -86,7 +86,7 @@ exports[`active sessions CTA 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c10:active,
@@ -98,7 +98,7 @@ exports[`active sessions CTA 1`] = `
 
 .c10:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -124,8 +124,8 @@ exports[`active sessions CTA 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: transparent;
-  color: rgba(255,255,255,0.54);
-  border-color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
+  border-color: rgba(255, 255, 255, 0.54);
   border-width: 1.5px;
   padding: 0 6.5px;
   min-height: 24px;
@@ -137,8 +137,8 @@ exports[`active sessions CTA 1`] = `
 .c32:focus-visible,
 .teleport-button__force-focus-visible .c32 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -160,7 +160,7 @@ exports[`active sessions CTA 1`] = `
 
 .c32:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -189,7 +189,7 @@ exports[`active sessions CTA 1`] = `
 }
 
 .c25:disabled {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
   cursor: default;
 }
 
@@ -224,7 +224,7 @@ exports[`active sessions CTA 1`] = `
 }
 
 .c27:disabled {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
   cursor: default;
 }
 
@@ -255,7 +255,7 @@ exports[`active sessions CTA 1`] = `
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
   margin-left: 4px;
 }
 
@@ -340,39 +340,39 @@ exports[`active sessions CTA 1`] = `
   width: 100%;
 }
 
-.c28 > thead > tr > th,
-.c28 > tbody > tr > th,
-.c28 > tfoot > tr > th,
-.c28 > thead > tr > td,
-.c28 > tbody > tr > td,
-.c28 > tfoot > tr > td {
+.c28>thead>tr>th,
+.c28>tbody>tr>th,
+.c28>tfoot>tr>th,
+.c28>thead>tr>td,
+.c28>tbody>tr>td,
+.c28>tfoot>tr>td {
   padding: 8px 8px;
   vertical-align: middle;
 }
 
-.c28 > thead > tr > th:first-child,
-.c28 > tbody > tr > th:first-child,
-.c28 > tfoot > tr > th:first-child,
-.c28 > thead > tr > td:first-child,
-.c28 > tbody > tr > td:first-child,
-.c28 > tfoot > tr > td:first-child {
+.c28>thead>tr>th:first-child,
+.c28>tbody>tr>th:first-child,
+.c28>tfoot>tr>th:first-child,
+.c28>thead>tr>td:first-child,
+.c28>tbody>tr>td:first-child,
+.c28>tfoot>tr>td:first-child {
   padding-left: 24px;
 }
 
-.c28 > thead > tr > th:last-child,
-.c28 > tbody > tr > th:last-child,
-.c28 > tfoot > tr > th:last-child,
-.c28 > thead > tr > td:last-child,
-.c28 > tbody > tr > td:last-child,
-.c28 > tfoot > tr > td:last-child {
+.c28>thead>tr>th:last-child,
+.c28>tbody>tr>th:last-child,
+.c28>tfoot>tr>th:last-child,
+.c28>thead>tr>td:last-child,
+.c28>tbody>tr>td:last-child,
+.c28>tfoot>tr>td:last-child {
   padding-right: 24px;
 }
 
-.c28 > tbody > tr > td {
+.c28>tbody>tr>td {
   vertical-align: middle;
 }
 
-.c28 > thead > tr > th {
+.c28>thead>tr>th {
   color: #FFFFFF;
   font-weight: 600;
   font-size: 14px;
@@ -384,11 +384,11 @@ exports[`active sessions CTA 1`] = `
   white-space: nowrap;
 }
 
-.c28 > thead > tr > th svg {
+.c28>thead>tr>th svg {
   height: 12px;
 }
 
-.c28 > tbody > tr > td {
+.c28>tbody>tr>td {
   color: #FFFFFF;
   font-weight: 300;
   font-size: 14px;
@@ -408,7 +408,7 @@ exports[`active sessions CTA 1`] = `
 }
 
 .c28 tbody tr:hover:after {
-  box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.12),0px 4px 5px 0px rgba(0,0,0,0.14),0px 2px 4px -1px rgba(0,0,0,0.20);
+  box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.12),0px 4px 5px 0px rgba(0, 0, 0, 0.14),0px 2px 4px -1px rgba(0, 0, 0, 0.20);
   content: '';
   position: absolute;
   top: 0;
@@ -418,7 +418,7 @@ exports[`active sessions CTA 1`] = `
   height: 100%;
 }
 
-.c28 tbody tr:hover + tr {
+.c28 tbody tr:hover +tr {
   border-top: 2px solid rgba(0,0,0,0);
 }
 
@@ -492,7 +492,7 @@ exports[`active sessions CTA 1`] = `
   padding-left: 24px;
 }
 
-.c29 tbody > tr > td {
+.c29 tbody>tr>td {
   vertical-align: middle;
 }
 
@@ -1267,8 +1267,8 @@ exports[`loaded 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: transparent;
-  color: rgba(255,255,255,0.54);
-  border-color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
+  border-color: rgba(255, 255, 255, 0.54);
   border-width: 1.5px;
   padding: 0 6.5px;
   min-height: 24px;
@@ -1280,8 +1280,8 @@ exports[`loaded 1`] = `
 .c28:focus-visible,
 .teleport-button__force-focus-visible .c28 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -1303,7 +1303,7 @@ exports[`loaded 1`] = `
 
 .c28:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -1332,7 +1332,7 @@ exports[`loaded 1`] = `
 }
 
 .c20:disabled {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
   cursor: default;
 }
 
@@ -1367,7 +1367,7 @@ exports[`loaded 1`] = `
 }
 
 .c23:disabled {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
   cursor: default;
 }
 
@@ -1398,7 +1398,7 @@ exports[`loaded 1`] = `
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
   margin-left: 4px;
 }
 
@@ -1471,39 +1471,39 @@ exports[`loaded 1`] = `
   width: 100%;
 }
 
-.c24 > thead > tr > th,
-.c24 > tbody > tr > th,
-.c24 > tfoot > tr > th,
-.c24 > thead > tr > td,
-.c24 > tbody > tr > td,
-.c24 > tfoot > tr > td {
+.c24>thead>tr>th,
+.c24>tbody>tr>th,
+.c24>tfoot>tr>th,
+.c24>thead>tr>td,
+.c24>tbody>tr>td,
+.c24>tfoot>tr>td {
   padding: 8px 8px;
   vertical-align: middle;
 }
 
-.c24 > thead > tr > th:first-child,
-.c24 > tbody > tr > th:first-child,
-.c24 > tfoot > tr > th:first-child,
-.c24 > thead > tr > td:first-child,
-.c24 > tbody > tr > td:first-child,
-.c24 > tfoot > tr > td:first-child {
+.c24>thead>tr>th:first-child,
+.c24>tbody>tr>th:first-child,
+.c24>tfoot>tr>th:first-child,
+.c24>thead>tr>td:first-child,
+.c24>tbody>tr>td:first-child,
+.c24>tfoot>tr>td:first-child {
   padding-left: 24px;
 }
 
-.c24 > thead > tr > th:last-child,
-.c24 > tbody > tr > th:last-child,
-.c24 > tfoot > tr > th:last-child,
-.c24 > thead > tr > td:last-child,
-.c24 > tbody > tr > td:last-child,
-.c24 > tfoot > tr > td:last-child {
+.c24>thead>tr>th:last-child,
+.c24>tbody>tr>th:last-child,
+.c24>tfoot>tr>th:last-child,
+.c24>thead>tr>td:last-child,
+.c24>tbody>tr>td:last-child,
+.c24>tfoot>tr>td:last-child {
   padding-right: 24px;
 }
 
-.c24 > tbody > tr > td {
+.c24>tbody>tr>td {
   vertical-align: middle;
 }
 
-.c24 > thead > tr > th {
+.c24>thead>tr>th {
   color: #FFFFFF;
   font-weight: 600;
   font-size: 14px;
@@ -1515,11 +1515,11 @@ exports[`loaded 1`] = `
   white-space: nowrap;
 }
 
-.c24 > thead > tr > th svg {
+.c24>thead>tr>th svg {
   height: 12px;
 }
 
-.c24 > tbody > tr > td {
+.c24>tbody>tr>td {
   color: #FFFFFF;
   font-weight: 300;
   font-size: 14px;
@@ -1539,7 +1539,7 @@ exports[`loaded 1`] = `
 }
 
 .c24 tbody tr:hover:after {
-  box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.12),0px 4px 5px 0px rgba(0,0,0,0.14),0px 2px 4px -1px rgba(0,0,0,0.20);
+  box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.12),0px 4px 5px 0px rgba(0, 0, 0, 0.14),0px 2px 4px -1px rgba(0, 0, 0, 0.20);
   content: '';
   position: absolute;
   top: 0;
@@ -1549,7 +1549,7 @@ exports[`loaded 1`] = `
   height: 100%;
 }
 
-.c24 tbody tr:hover + tr {
+.c24 tbody tr:hover +tr {
   border-top: 2px solid rgba(0,0,0,0);
 }
 
@@ -1623,7 +1623,7 @@ exports[`loaded 1`] = `
   padding-left: 24px;
 }
 
-.c25 tbody > tr > td {
+.c25 tbody>tr>td {
   vertical-align: middle;
 }
 
@@ -2360,8 +2360,8 @@ exports[`moderated sessions CTA for non-enterprise 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: transparent;
-  color: rgba(255,255,255,0.54);
-  border-color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
+  border-color: rgba(255, 255, 255, 0.54);
   border-width: 1.5px;
   padding: 0 6.5px;
   min-height: 24px;
@@ -2373,8 +2373,8 @@ exports[`moderated sessions CTA for non-enterprise 1`] = `
 .c28:focus-visible,
 .teleport-button__force-focus-visible .c28 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -2396,7 +2396,7 @@ exports[`moderated sessions CTA for non-enterprise 1`] = `
 
 .c28:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -2425,7 +2425,7 @@ exports[`moderated sessions CTA for non-enterprise 1`] = `
 }
 
 .c20:disabled {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
   cursor: default;
 }
 
@@ -2460,7 +2460,7 @@ exports[`moderated sessions CTA for non-enterprise 1`] = `
 }
 
 .c23:disabled {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
   cursor: default;
 }
 
@@ -2491,7 +2491,7 @@ exports[`moderated sessions CTA for non-enterprise 1`] = `
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
   margin-left: 4px;
 }
 
@@ -2564,39 +2564,39 @@ exports[`moderated sessions CTA for non-enterprise 1`] = `
   width: 100%;
 }
 
-.c24 > thead > tr > th,
-.c24 > tbody > tr > th,
-.c24 > tfoot > tr > th,
-.c24 > thead > tr > td,
-.c24 > tbody > tr > td,
-.c24 > tfoot > tr > td {
+.c24>thead>tr>th,
+.c24>tbody>tr>th,
+.c24>tfoot>tr>th,
+.c24>thead>tr>td,
+.c24>tbody>tr>td,
+.c24>tfoot>tr>td {
   padding: 8px 8px;
   vertical-align: middle;
 }
 
-.c24 > thead > tr > th:first-child,
-.c24 > tbody > tr > th:first-child,
-.c24 > tfoot > tr > th:first-child,
-.c24 > thead > tr > td:first-child,
-.c24 > tbody > tr > td:first-child,
-.c24 > tfoot > tr > td:first-child {
+.c24>thead>tr>th:first-child,
+.c24>tbody>tr>th:first-child,
+.c24>tfoot>tr>th:first-child,
+.c24>thead>tr>td:first-child,
+.c24>tbody>tr>td:first-child,
+.c24>tfoot>tr>td:first-child {
   padding-left: 24px;
 }
 
-.c24 > thead > tr > th:last-child,
-.c24 > tbody > tr > th:last-child,
-.c24 > tfoot > tr > th:last-child,
-.c24 > thead > tr > td:last-child,
-.c24 > tbody > tr > td:last-child,
-.c24 > tfoot > tr > td:last-child {
+.c24>thead>tr>th:last-child,
+.c24>tbody>tr>th:last-child,
+.c24>tfoot>tr>th:last-child,
+.c24>thead>tr>td:last-child,
+.c24>tbody>tr>td:last-child,
+.c24>tfoot>tr>td:last-child {
   padding-right: 24px;
 }
 
-.c24 > tbody > tr > td {
+.c24>tbody>tr>td {
   vertical-align: middle;
 }
 
-.c24 > thead > tr > th {
+.c24>thead>tr>th {
   color: #FFFFFF;
   font-weight: 600;
   font-size: 14px;
@@ -2608,11 +2608,11 @@ exports[`moderated sessions CTA for non-enterprise 1`] = `
   white-space: nowrap;
 }
 
-.c24 > thead > tr > th svg {
+.c24>thead>tr>th svg {
   height: 12px;
 }
 
-.c24 > tbody > tr > td {
+.c24>tbody>tr>td {
   color: #FFFFFF;
   font-weight: 300;
   font-size: 14px;
@@ -2632,7 +2632,7 @@ exports[`moderated sessions CTA for non-enterprise 1`] = `
 }
 
 .c24 tbody tr:hover:after {
-  box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.12),0px 4px 5px 0px rgba(0,0,0,0.14),0px 2px 4px -1px rgba(0,0,0,0.20);
+  box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.12),0px 4px 5px 0px rgba(0, 0, 0, 0.14),0px 2px 4px -1px rgba(0, 0, 0, 0.20);
   content: '';
   position: absolute;
   top: 0;
@@ -2642,7 +2642,7 @@ exports[`moderated sessions CTA for non-enterprise 1`] = `
   height: 100%;
 }
 
-.c24 tbody tr:hover + tr {
+.c24 tbody tr:hover +tr {
   border-top: 2px solid rgba(0,0,0,0);
 }
 
@@ -2716,7 +2716,7 @@ exports[`moderated sessions CTA for non-enterprise 1`] = `
   padding-left: 24px;
 }
 
-.c25 tbody > tr > td {
+.c25 tbody>tr>td {
   vertical-align: middle;
 }
 
diff --git a/web/packages/teleport/src/Support/__snapshots__/Support.story.test.tsx.snap b/web/packages/teleport/src/Support/__snapshots__/Support.story.test.tsx.snap
index e1021616799af..fdfceca4e0bc1 100644
--- a/web/packages/teleport/src/Support/__snapshots__/Support.story.test.tsx.snap
+++ b/web/packages/teleport/src/Support/__snapshots__/Support.story.test.tsx.snap
@@ -50,7 +50,7 @@ exports[`support Cloud 1`] = `
 }
 
 .c4 {
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px rgba(0,0,0,0.14),0px 1px 18px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px rgba(0, 0, 0, 0.14),0px 1px 18px rgba(0, 0, 0, 0.12);
   border-radius: 8px;
   background-color: #222C59;
 }
@@ -484,7 +484,7 @@ exports[`support Enterprise 1`] = `
 }
 
 .c4 {
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px rgba(0,0,0,0.14),0px 1px 18px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px rgba(0, 0, 0, 0.14),0px 1px 18px rgba(0, 0, 0, 0.12);
   border-radius: 8px;
   background-color: #222C59;
 }
@@ -967,7 +967,7 @@ exports[`support Enterprise with CTA 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c13:active,
@@ -979,7 +979,7 @@ exports[`support Enterprise with CTA 1`] = `
 
 .c13:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -992,7 +992,7 @@ exports[`support Enterprise with CTA 1`] = `
 }
 
 .c4 {
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px rgba(0,0,0,0.14),0px 1px 18px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px rgba(0, 0, 0, 0.14),0px 1px 18px rgba(0, 0, 0, 0.12);
   border-radius: 8px;
   background-color: #222C59;
 }
@@ -1466,7 +1466,7 @@ exports[`support OSS 1`] = `
 }
 
 .c4 {
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px rgba(0,0,0,0.14),0px 1px 18px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px rgba(0, 0, 0, 0.14),0px 1px 18px rgba(0, 0, 0, 0.12);
   border-radius: 8px;
   background-color: #222C59;
 }
@@ -1941,7 +1941,7 @@ exports[`support OSSWithCTA 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c13:active,
@@ -1953,7 +1953,7 @@ exports[`support OSSWithCTA 1`] = `
 
 .c13:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -1966,7 +1966,7 @@ exports[`support OSSWithCTA 1`] = `
 }
 
 .c4 {
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px rgba(0,0,0,0.14),0px 1px 18px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px rgba(0, 0, 0, 0.14),0px 1px 18px rgba(0, 0, 0, 0.12);
   border-radius: 8px;
   background-color: #222C59;
 }
diff --git a/web/packages/teleport/src/Users/UserDelete/__snapshots__/UserDelete.story.test.tsx.snap b/web/packages/teleport/src/Users/UserDelete/__snapshots__/UserDelete.story.test.tsx.snap
index c5176313ed672..1ca32c074b13b 100644
--- a/web/packages/teleport/src/Users/UserDelete/__snapshots__/UserDelete.story.test.tsx.snap
+++ b/web/packages/teleport/src/Users/UserDelete/__snapshots__/UserDelete.story.test.tsx.snap
@@ -62,7 +62,7 @@ exports[`confirm state 1`] = `
   background-color: #FF8179;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c12:active,
@@ -74,7 +74,7 @@ exports[`confirm state 1`] = `
 
 .c12:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -100,7 +100,7 @@ exports[`confirm state 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
   border-color: transparent;
   border-width: 1.5px;
   padding: 0 30.5px;
@@ -113,8 +113,8 @@ exports[`confirm state 1`] = `
 .c13:focus-visible,
 .teleport-button__force-focus-visible .c13 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -136,7 +136,7 @@ exports[`confirm state 1`] = `
 
 .c13:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -184,7 +184,7 @@ exports[`confirm state 1`] = `
   bottom: 0;
   top: 0;
   left: 0;
-  background-color: rgba(0,0,0,0.5);
+  background-color: rgba(0, 0, 0, 0.5);
   opacity: 1;
   touch-action: none;
 }
@@ -371,7 +371,7 @@ exports[`failed state 1`] = `
   background-color: #FF8179;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c13:active,
@@ -383,7 +383,7 @@ exports[`failed state 1`] = `
 
 .c13:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -409,7 +409,7 @@ exports[`failed state 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
   border-color: transparent;
   border-width: 1.5px;
   padding: 0 30.5px;
@@ -422,8 +422,8 @@ exports[`failed state 1`] = `
 .c14:focus-visible,
 .teleport-button__force-focus-visible .c14 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -445,7 +445,7 @@ exports[`failed state 1`] = `
 
 .c14:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -493,7 +493,7 @@ exports[`failed state 1`] = `
   bottom: 0;
   top: 0;
   left: 0;
-  background-color: rgba(0,0,0,0.5);
+  background-color: rgba(0, 0, 0, 0.5);
   opacity: 1;
   touch-action: none;
 }
@@ -665,7 +665,7 @@ exports[`processing state 1`] = `
   background-color: #FF8179;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c12:active,
@@ -677,7 +677,7 @@ exports[`processing state 1`] = `
 
 .c12:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -703,7 +703,7 @@ exports[`processing state 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
   border-color: transparent;
   border-width: 1.5px;
   padding: 0 30.5px;
@@ -716,8 +716,8 @@ exports[`processing state 1`] = `
 .c13:focus-visible,
 .teleport-button__force-focus-visible .c13 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -739,7 +739,7 @@ exports[`processing state 1`] = `
 
 .c13:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -787,7 +787,7 @@ exports[`processing state 1`] = `
   bottom: 0;
   top: 0;
   left: 0;
-  background-color: rgba(0,0,0,0.5);
+  background-color: rgba(0, 0, 0, 0.5);
   opacity: 1;
   touch-action: none;
 }
diff --git a/web/packages/teleport/src/Users/UserReset/__snapshots__/UserReset.story.test.tsx.snap b/web/packages/teleport/src/Users/UserReset/__snapshots__/UserReset.story.test.tsx.snap
index a2a7c9a573da6..866f13b1546ea 100644
--- a/web/packages/teleport/src/Users/UserReset/__snapshots__/UserReset.story.test.tsx.snap
+++ b/web/packages/teleport/src/Users/UserReset/__snapshots__/UserReset.story.test.tsx.snap
@@ -83,7 +83,7 @@ exports[`failed state 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c13:active,
@@ -95,7 +95,7 @@ exports[`failed state 1`] = `
 
 .c13:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -121,7 +121,7 @@ exports[`failed state 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
   border-color: transparent;
   border-width: 1.5px;
   padding: 0 30.5px;
@@ -134,8 +134,8 @@ exports[`failed state 1`] = `
 .c14:focus-visible,
 .teleport-button__force-focus-visible .c14 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -157,7 +157,7 @@ exports[`failed state 1`] = `
 
 .c14:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -206,7 +206,7 @@ exports[`failed state 1`] = `
   bottom: 0;
   top: 0;
   left: 0;
-  background-color: rgba(0,0,0,0.5);
+  background-color: rgba(0, 0, 0, 0.5);
   opacity: 1;
   touch-action: none;
 }
@@ -378,7 +378,7 @@ exports[`processing state 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c12:active,
@@ -390,7 +390,7 @@ exports[`processing state 1`] = `
 
 .c12:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -416,7 +416,7 @@ exports[`processing state 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
   border-color: transparent;
   border-width: 1.5px;
   padding: 0 30.5px;
@@ -429,8 +429,8 @@ exports[`processing state 1`] = `
 .c13:focus-visible,
 .teleport-button__force-focus-visible .c13 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -452,7 +452,7 @@ exports[`processing state 1`] = `
 
 .c13:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -501,7 +501,7 @@ exports[`processing state 1`] = `
   bottom: 0;
   top: 0;
   left: 0;
-  background-color: rgba(0,0,0,0.5);
+  background-color: rgba(0, 0, 0, 0.5);
   opacity: 1;
   touch-action: none;
 }
@@ -680,7 +680,7 @@ exports[`success state 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c15:active,
@@ -692,7 +692,7 @@ exports[`success state 1`] = `
 
 .c15:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -718,7 +718,7 @@ exports[`success state 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
   border-color: transparent;
   border-width: 1.5px;
   padding: 0 30.5px;
@@ -731,8 +731,8 @@ exports[`success state 1`] = `
 .c17:focus-visible,
 .teleport-button__force-focus-visible .c17 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -754,7 +754,7 @@ exports[`success state 1`] = `
 
 .c17:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -813,7 +813,7 @@ exports[`success state 1`] = `
   bottom: 0;
   top: 0;
   left: 0;
-  background-color: rgba(0,0,0,0.5);
+  background-color: rgba(0, 0, 0, 0.5);
   opacity: 1;
   touch-action: none;
 }
diff --git a/web/packages/teleport/src/Users/UserTokenLink/__snapshots__/UserTokenLink.story.test.tsx.snap b/web/packages/teleport/src/Users/UserTokenLink/__snapshots__/UserTokenLink.story.test.tsx.snap
index 7042bb1117e06..dc6d59947f8eb 100644
--- a/web/packages/teleport/src/Users/UserTokenLink/__snapshots__/UserTokenLink.story.test.tsx.snap
+++ b/web/packages/teleport/src/Users/UserTokenLink/__snapshots__/UserTokenLink.story.test.tsx.snap
@@ -74,7 +74,7 @@ exports[`reset link dialog 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c15:active,
@@ -86,7 +86,7 @@ exports[`reset link dialog 1`] = `
 
 .c15:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -112,7 +112,7 @@ exports[`reset link dialog 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
   border-color: transparent;
   border-width: 1.5px;
   padding: 0 30.5px;
@@ -125,8 +125,8 @@ exports[`reset link dialog 1`] = `
 .c17:focus-visible,
 .teleport-button__force-focus-visible .c17 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -148,7 +148,7 @@ exports[`reset link dialog 1`] = `
 
 .c17:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -207,7 +207,7 @@ exports[`reset link dialog 1`] = `
   bottom: 0;
   top: 0;
   left: 0;
-  background-color: rgba(0,0,0,0.5);
+  background-color: rgba(0, 0, 0, 0.5);
   opacity: 1;
   touch-action: none;
 }
@@ -401,7 +401,7 @@ exports[`reset link dialog as invite 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c15:active,
@@ -413,7 +413,7 @@ exports[`reset link dialog as invite 1`] = `
 
 .c15:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -439,7 +439,7 @@ exports[`reset link dialog as invite 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
   border-color: transparent;
   border-width: 1.5px;
   padding: 0 30.5px;
@@ -452,8 +452,8 @@ exports[`reset link dialog as invite 1`] = `
 .c17:focus-visible,
 .teleport-button__force-focus-visible .c17 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -475,7 +475,7 @@ exports[`reset link dialog as invite 1`] = `
 
 .c17:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -534,7 +534,7 @@ exports[`reset link dialog as invite 1`] = `
   bottom: 0;
   top: 0;
   left: 0;
-  background-color: rgba(0,0,0,0.5);
+  background-color: rgba(0, 0, 0, 0.5);
   opacity: 1;
   touch-action: none;
 }
diff --git a/web/packages/teleport/src/Users/__snapshots__/Users.story.test.tsx.snap b/web/packages/teleport/src/Users/__snapshots__/Users.story.test.tsx.snap
index f619fbd662cef..39f9ebcf3c2ae 100644
--- a/web/packages/teleport/src/Users/__snapshots__/Users.story.test.tsx.snap
+++ b/web/packages/teleport/src/Users/__snapshots__/Users.story.test.tsx.snap
@@ -73,7 +73,7 @@ exports[`success state 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c8:active,
@@ -85,7 +85,7 @@ exports[`success state 1`] = `
 
 .c8:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -111,8 +111,8 @@ exports[`success state 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: transparent;
-  color: rgba(255,255,255,0.54);
-  border-color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
+  border-color: rgba(255, 255, 255, 0.54);
   border-width: 1.5px;
   padding: 0 6.5px;
   min-height: 24px;
@@ -124,8 +124,8 @@ exports[`success state 1`] = `
 .c27:focus-visible,
 .teleport-button__force-focus-visible .c27 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -147,7 +147,7 @@ exports[`success state 1`] = `
 
 .c27:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -176,7 +176,7 @@ exports[`success state 1`] = `
 }
 
 .c20:disabled {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
   cursor: default;
 }
 
@@ -211,7 +211,7 @@ exports[`success state 1`] = `
 }
 
 .c23:disabled {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
   cursor: default;
 }
 
@@ -234,7 +234,7 @@ exports[`success state 1`] = `
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
   margin-left: 8px;
 }
 
@@ -326,39 +326,39 @@ exports[`success state 1`] = `
   width: 100%;
 }
 
-.c24 > thead > tr > th,
-.c24 > tbody > tr > th,
-.c24 > tfoot > tr > th,
-.c24 > thead > tr > td,
-.c24 > tbody > tr > td,
-.c24 > tfoot > tr > td {
+.c24>thead>tr>th,
+.c24>tbody>tr>th,
+.c24>tfoot>tr>th,
+.c24>thead>tr>td,
+.c24>tbody>tr>td,
+.c24>tfoot>tr>td {
   padding: 8px 8px;
   vertical-align: middle;
 }
 
-.c24 > thead > tr > th:first-child,
-.c24 > tbody > tr > th:first-child,
-.c24 > tfoot > tr > th:first-child,
-.c24 > thead > tr > td:first-child,
-.c24 > tbody > tr > td:first-child,
-.c24 > tfoot > tr > td:first-child {
+.c24>thead>tr>th:first-child,
+.c24>tbody>tr>th:first-child,
+.c24>tfoot>tr>th:first-child,
+.c24>thead>tr>td:first-child,
+.c24>tbody>tr>td:first-child,
+.c24>tfoot>tr>td:first-child {
   padding-left: 24px;
 }
 
-.c24 > thead > tr > th:last-child,
-.c24 > tbody > tr > th:last-child,
-.c24 > tfoot > tr > th:last-child,
-.c24 > thead > tr > td:last-child,
-.c24 > tbody > tr > td:last-child,
-.c24 > tfoot > tr > td:last-child {
+.c24>thead>tr>th:last-child,
+.c24>tbody>tr>th:last-child,
+.c24>tfoot>tr>th:last-child,
+.c24>thead>tr>td:last-child,
+.c24>tbody>tr>td:last-child,
+.c24>tfoot>tr>td:last-child {
   padding-right: 24px;
 }
 
-.c24 > tbody > tr > td {
+.c24>tbody>tr>td {
   vertical-align: middle;
 }
 
-.c24 > thead > tr > th {
+.c24>thead>tr>th {
   color: #FFFFFF;
   font-weight: 600;
   font-size: 14px;
@@ -370,11 +370,11 @@ exports[`success state 1`] = `
   white-space: nowrap;
 }
 
-.c24 > thead > tr > th svg {
+.c24>thead>tr>th svg {
   height: 12px;
 }
 
-.c24 > tbody > tr > td {
+.c24>tbody>tr>td {
   color: #FFFFFF;
   font-weight: 300;
   font-size: 14px;
@@ -394,7 +394,7 @@ exports[`success state 1`] = `
 }
 
 .c24 tbody tr:hover:after {
-  box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.12),0px 4px 5px 0px rgba(0,0,0,0.14),0px 2px 4px -1px rgba(0,0,0,0.20);
+  box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.12),0px 4px 5px 0px rgba(0, 0, 0, 0.14),0px 2px 4px -1px rgba(0, 0, 0, 0.20);
   content: '';
   position: absolute;
   top: 0;
@@ -404,7 +404,7 @@ exports[`success state 1`] = `
   height: 100%;
 }
 
-.c24 tbody tr:hover + tr {
+.c24 tbody tr:hover +tr {
   border-top: 2px solid rgba(0,0,0,0);
 }
 
diff --git a/web/packages/teleport/src/Welcome/NewCredentials/__snapshots__/NewCredentials.story.test.tsx.snap b/web/packages/teleport/src/Welcome/NewCredentials/__snapshots__/NewCredentials.story.test.tsx.snap
index 0f4da0e18b94a..a2f8b70d283e4 100644
--- a/web/packages/teleport/src/Welcome/NewCredentials/__snapshots__/NewCredentials.story.test.tsx.snap
+++ b/web/packages/teleport/src/Welcome/NewCredentials/__snapshots__/NewCredentials.story.test.tsx.snap
@@ -110,7 +110,7 @@ exports[`story.MfaDeviceError 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c31:active,
@@ -122,7 +122,7 @@ exports[`story.MfaDeviceError 1`] = `
 
 .c31:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -136,7 +136,7 @@ exports[`story.MfaDeviceError 1`] = `
 }
 
 .c6 {
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px rgba(0,0,0,0.14),0px 1px 18px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px rgba(0, 0, 0, 0.14),0px 1px 18px rgba(0, 0, 0, 0.12);
   border-radius: 8px;
   background-color: #222C59;
 }
@@ -148,7 +148,7 @@ exports[`story.MfaDeviceError 1`] = `
   font-size: 14px;
   line-height: 24px;
   margin: 0px;
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
 }
 
 .c12 {
@@ -179,7 +179,7 @@ exports[`story.MfaDeviceError 1`] = `
 
 .c24 {
   appearance: none;
-  border: 1px solid rgba(255,255,255,0.54);
+  border: 1px solid rgba(255, 255, 255, 0.54);
   border-radius: 4px;
   box-sizing: border-box;
   display: block;
@@ -196,7 +196,7 @@ exports[`story.MfaDeviceError 1`] = `
 .c24:hover,
 .c24:focus,
 .c24:active {
-  border: 1px solid rgba(255,255,255,0.72);
+  border: 1px solid rgba(255, 255, 255, 0.72);
 }
 
 .c24::-ms-clear {
@@ -204,7 +204,7 @@ exports[`story.MfaDeviceError 1`] = `
 }
 
 .c24::placeholder {
-  color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
   opacity: 1;
 }
 
@@ -213,8 +213,8 @@ exports[`story.MfaDeviceError 1`] = `
 }
 
 .c24:disabled {
-  color: rgba(255,255,255,0.36);
-  border-color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
+  border-color: rgba(255, 255, 255, 0.36);
 }
 
 .c23 {
@@ -681,7 +681,7 @@ exports[`story.MfaDeviceOn 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c25:active,
@@ -693,7 +693,7 @@ exports[`story.MfaDeviceOn 1`] = `
 
 .c25:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -714,7 +714,7 @@ exports[`story.MfaDeviceOn 1`] = `
 }
 
 .c6 {
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px rgba(0,0,0,0.14),0px 1px 18px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px rgba(0, 0, 0, 0.14),0px 1px 18px rgba(0, 0, 0, 0.12);
   border-radius: 8px;
   background-color: #222C59;
 }
@@ -726,7 +726,7 @@ exports[`story.MfaDeviceOn 1`] = `
   font-size: 14px;
   line-height: 24px;
   margin: 0px;
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
 }
 
 .c12 {
@@ -1301,7 +1301,7 @@ exports[`story.MfaDeviceOtp 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c30:active,
@@ -1313,7 +1313,7 @@ exports[`story.MfaDeviceOtp 1`] = `
 
 .c30:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -1327,7 +1327,7 @@ exports[`story.MfaDeviceOtp 1`] = `
 }
 
 .c6 {
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px rgba(0,0,0,0.14),0px 1px 18px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px rgba(0, 0, 0, 0.14),0px 1px 18px rgba(0, 0, 0, 0.12);
   border-radius: 8px;
   background-color: #222C59;
 }
@@ -1339,7 +1339,7 @@ exports[`story.MfaDeviceOtp 1`] = `
   font-size: 14px;
   line-height: 24px;
   margin: 0px;
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
 }
 
 .c12 {
@@ -1370,7 +1370,7 @@ exports[`story.MfaDeviceOtp 1`] = `
 
 .c23 {
   appearance: none;
-  border: 1px solid rgba(255,255,255,0.54);
+  border: 1px solid rgba(255, 255, 255, 0.54);
   border-radius: 4px;
   box-sizing: border-box;
   display: block;
@@ -1387,7 +1387,7 @@ exports[`story.MfaDeviceOtp 1`] = `
 .c23:hover,
 .c23:focus,
 .c23:active {
-  border: 1px solid rgba(255,255,255,0.72);
+  border: 1px solid rgba(255, 255, 255, 0.72);
 }
 
 .c23::-ms-clear {
@@ -1395,7 +1395,7 @@ exports[`story.MfaDeviceOtp 1`] = `
 }
 
 .c23::placeholder {
-  color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
   opacity: 1;
 }
 
@@ -1404,8 +1404,8 @@ exports[`story.MfaDeviceOtp 1`] = `
 }
 
 .c23:disabled {
-  color: rgba(255,255,255,0.36);
-  border-color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
+  border-color: rgba(255, 255, 255, 0.36);
 }
 
 .c22 {
@@ -1866,7 +1866,7 @@ exports[`story.MfaDeviceWebauthn 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c25:active,
@@ -1878,7 +1878,7 @@ exports[`story.MfaDeviceWebauthn 1`] = `
 
 .c25:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -1899,7 +1899,7 @@ exports[`story.MfaDeviceWebauthn 1`] = `
 }
 
 .c6 {
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px rgba(0,0,0,0.14),0px 1px 18px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px rgba(0, 0, 0, 0.14),0px 1px 18px rgba(0, 0, 0, 0.12);
   border-radius: 8px;
   background-color: #222C59;
 }
@@ -1911,7 +1911,7 @@ exports[`story.MfaDeviceWebauthn 1`] = `
   font-size: 14px;
   line-height: 24px;
   margin: 0px;
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
 }
 
 .c12 {
@@ -2464,7 +2464,7 @@ exports[`story.PasswordOnlyError 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c14:active,
@@ -2476,14 +2476,14 @@ exports[`story.PasswordOnlyError 1`] = `
 
 .c14:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
 }
 
 .c7 {
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px rgba(0,0,0,0.14),0px 1px 18px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px rgba(0, 0, 0, 0.14),0px 1px 18px rgba(0, 0, 0, 0.12);
   border-radius: 8px;
   background-color: #222C59;
 }
@@ -2507,7 +2507,7 @@ exports[`story.PasswordOnlyError 1`] = `
 
 .c13 {
   appearance: none;
-  border: 1px solid rgba(255,255,255,0.54);
+  border: 1px solid rgba(255, 255, 255, 0.54);
   border-radius: 4px;
   box-sizing: border-box;
   display: block;
@@ -2524,7 +2524,7 @@ exports[`story.PasswordOnlyError 1`] = `
 .c13:hover,
 .c13:focus,
 .c13:active {
-  border: 1px solid rgba(255,255,255,0.72);
+  border: 1px solid rgba(255, 255, 255, 0.72);
 }
 
 .c13::-ms-clear {
@@ -2532,7 +2532,7 @@ exports[`story.PasswordOnlyError 1`] = `
 }
 
 .c13::placeholder {
-  color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
   opacity: 1;
 }
 
@@ -2541,8 +2541,8 @@ exports[`story.PasswordOnlyError 1`] = `
 }
 
 .c13:disabled {
-  color: rgba(255,255,255,0.36);
-  border-color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
+  border-color: rgba(255, 255, 255, 0.36);
 }
 
 .c12 {
@@ -2956,7 +2956,7 @@ exports[`story.PrimaryPasswordlessError 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c15:active,
@@ -2968,7 +2968,7 @@ exports[`story.PrimaryPasswordlessError 1`] = `
 
 .c15:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -2994,7 +2994,7 @@ exports[`story.PrimaryPasswordlessError 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: transparent;
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
   border-color: transparent;
   border-width: 1.5px;
   padding: 0 30.5px;
@@ -3007,8 +3007,8 @@ exports[`story.PrimaryPasswordlessError 1`] = `
 .c17:focus-visible,
 .teleport-button__force-focus-visible .c17 {
   background-color: transparent;
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -3017,7 +3017,7 @@ exports[`story.PrimaryPasswordlessError 1`] = `
 .teleport-button__force-hover .c17 {
   background-color: rgba(255,255,255,0.07);
   border-color: transparent;
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
   box-shadow: none;
 }
 
@@ -3030,7 +3030,7 @@ exports[`story.PrimaryPasswordlessError 1`] = `
 
 .c17:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -3044,7 +3044,7 @@ exports[`story.PrimaryPasswordlessError 1`] = `
 }
 
 .c7 {
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px rgba(0,0,0,0.14),0px 1px 18px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px rgba(0, 0, 0, 0.14),0px 1px 18px rgba(0, 0, 0, 0.12);
   border-radius: 8px;
   background-color: #222C59;
 }
@@ -3542,7 +3542,7 @@ exports[`story.SuccessRegister 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c13:active,
@@ -3554,14 +3554,14 @@ exports[`story.SuccessRegister 1`] = `
 
 .c13:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
 }
 
 .c6 {
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px rgba(0,0,0,0.14),0px 1px 18px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px rgba(0, 0, 0, 0.14),0px 1px 18px rgba(0, 0, 0, 0.12);
   border-radius: 8px;
   background-color: #222C59;
 }
@@ -3578,9 +3578,9 @@ exports[`story.SuccessRegister 1`] = `
 
 .c8 color {
   main: #FFFFFF;
-  slightly-muted: rgba(255,255,255,0.72);
-  muted: rgba(255,255,255,0.54);
-  disabled: rgba(255,255,255,0.36);
+  slightly-muted: rgba(255, 255, 255, 0.72);
+  muted: rgba(255, 255, 255, 0.54);
+  disabled: rgba(255, 255, 255, 0.36);
   primary-inverse: #000000;
 }
 
@@ -3590,7 +3590,7 @@ exports[`story.SuccessRegister 1`] = `
   font-size: 14px;
   margin: 0px;
   margin-bottom: 24px;
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
 }
 
 .c17 {
@@ -3884,7 +3884,7 @@ exports[`story.SuccessRegisterDashboard 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c13:active,
@@ -3896,14 +3896,14 @@ exports[`story.SuccessRegisterDashboard 1`] = `
 
 .c13:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
 }
 
 .c6 {
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px rgba(0,0,0,0.14),0px 1px 18px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px rgba(0, 0, 0, 0.14),0px 1px 18px rgba(0, 0, 0, 0.12);
   border-radius: 8px;
   background-color: #222C59;
 }
@@ -3920,9 +3920,9 @@ exports[`story.SuccessRegisterDashboard 1`] = `
 
 .c8 color {
   main: #FFFFFF;
-  slightly-muted: rgba(255,255,255,0.72);
-  muted: rgba(255,255,255,0.54);
-  disabled: rgba(255,255,255,0.36);
+  slightly-muted: rgba(255, 255, 255, 0.72);
+  muted: rgba(255, 255, 255, 0.54);
+  disabled: rgba(255, 255, 255, 0.36);
   primary-inverse: #000000;
 }
 
@@ -3932,7 +3932,7 @@ exports[`story.SuccessRegisterDashboard 1`] = `
   font-size: 14px;
   margin: 0px;
   margin-bottom: 24px;
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
 }
 
 .c17 {
@@ -4226,7 +4226,7 @@ exports[`story.SuccessReset 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c13:active,
@@ -4238,14 +4238,14 @@ exports[`story.SuccessReset 1`] = `
 
 .c13:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
 }
 
 .c6 {
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px rgba(0,0,0,0.14),0px 1px 18px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px rgba(0, 0, 0, 0.14),0px 1px 18px rgba(0, 0, 0, 0.12);
   border-radius: 8px;
   background-color: #222C59;
 }
@@ -4262,9 +4262,9 @@ exports[`story.SuccessReset 1`] = `
 
 .c8 color {
   main: #FFFFFF;
-  slightly-muted: rgba(255,255,255,0.72);
-  muted: rgba(255,255,255,0.54);
-  disabled: rgba(255,255,255,0.36);
+  slightly-muted: rgba(255, 255, 255, 0.72);
+  muted: rgba(255, 255, 255, 0.54);
+  disabled: rgba(255, 255, 255, 0.36);
   primary-inverse: #000000;
 }
 
@@ -4274,7 +4274,7 @@ exports[`story.SuccessReset 1`] = `
   font-size: 14px;
   margin: 0px;
   margin-bottom: 24px;
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
 }
 
 .c17 {
@@ -4568,7 +4568,7 @@ exports[`story.SuccessResetDashboard 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c13:active,
@@ -4580,14 +4580,14 @@ exports[`story.SuccessResetDashboard 1`] = `
 
 .c13:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
 }
 
 .c6 {
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px rgba(0,0,0,0.14),0px 1px 18px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px rgba(0, 0, 0, 0.14),0px 1px 18px rgba(0, 0, 0, 0.12);
   border-radius: 8px;
   background-color: #222C59;
 }
@@ -4604,9 +4604,9 @@ exports[`story.SuccessResetDashboard 1`] = `
 
 .c8 color {
   main: #FFFFFF;
-  slightly-muted: rgba(255,255,255,0.72);
-  muted: rgba(255,255,255,0.54);
-  disabled: rgba(255,255,255,0.36);
+  slightly-muted: rgba(255, 255, 255, 0.72);
+  muted: rgba(255, 255, 255, 0.54);
+  disabled: rgba(255, 255, 255, 0.36);
   primary-inverse: #000000;
 }
 
@@ -4616,7 +4616,7 @@ exports[`story.SuccessResetDashboard 1`] = `
   font-size: 14px;
   margin: 0px;
   margin-bottom: 24px;
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
 }
 
 .c17 {
diff --git a/web/packages/teleport/src/components/AgentButtonAdd/__snapshots__/AgentButtonAdd.story.test.tsx.snap b/web/packages/teleport/src/components/AgentButtonAdd/__snapshots__/AgentButtonAdd.story.test.tsx.snap
index de8f8269b555c..f80b1449059fc 100644
--- a/web/packages/teleport/src/components/AgentButtonAdd/__snapshots__/AgentButtonAdd.story.test.tsx.snap
+++ b/web/packages/teleport/src/components/AgentButtonAdd/__snapshots__/AgentButtonAdd.story.test.tsx.snap
@@ -46,7 +46,7 @@ exports[`can create 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c0:active,
@@ -58,7 +58,7 @@ exports[`can create 1`] = `
 
 .c0:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -127,7 +127,7 @@ exports[`cannot create 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c0:active,
@@ -139,7 +139,7 @@ exports[`cannot create 1`] = `
 
 .c0:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -209,7 +209,7 @@ exports[`cannot create when resource starts with vowel 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c0:active,
@@ -221,7 +221,7 @@ exports[`cannot create when resource starts with vowel 1`] = `
 
 .c0:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -291,7 +291,7 @@ exports[`on leaf cluster 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c0:active,
@@ -303,7 +303,7 @@ exports[`on leaf cluster 1`] = `
 
 .c0:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -373,7 +373,7 @@ exports[`on leaf cluster when resource starts with vowel 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c0:active,
@@ -385,7 +385,7 @@ exports[`on leaf cluster when resource starts with vowel 1`] = `
 
 .c0:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
diff --git a/web/packages/teleport/src/components/BannerList/Banner.tsx b/web/packages/teleport/src/components/BannerList/Banner.tsx
index 0e6b23396dd4d..7576d9fe0c483 100644
--- a/web/packages/teleport/src/components/BannerList/Banner.tsx
+++ b/web/packages/teleport/src/components/BannerList/Banner.tsx
@@ -109,10 +109,10 @@ const CloseButton = styled.button`
   margin-left: auto;
   padding: 0.5rem;
 
-  :hover {
+  &:hover {
     background-color: rgb(255, 255, 255, 0.1);
   }
-  :focus {
+  &:focus {
     border: 1px solid rgb(255, 255, 255, 0.1);
   }
 `;
diff --git a/web/packages/teleport/src/components/FormLogin/__snapshots__/FormLogin.story.test.tsx.snap b/web/packages/teleport/src/components/FormLogin/__snapshots__/FormLogin.story.test.tsx.snap
index 1348cbfa2652b..86f36e00fd35d 100644
--- a/web/packages/teleport/src/components/FormLogin/__snapshots__/FormLogin.story.test.tsx.snap
+++ b/web/packages/teleport/src/components/FormLogin/__snapshots__/FormLogin.story.test.tsx.snap
@@ -84,7 +84,7 @@ exports[`auth2faType: off 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c13:active,
@@ -96,14 +96,14 @@ exports[`auth2faType: off 1`] = `
 
 .c13:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
 }
 
 .c1 {
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px rgba(0,0,0,0.14),0px 1px 18px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px rgba(0, 0, 0, 0.14),0px 1px 18px rgba(0, 0, 0, 0.12);
   border-radius: 8px;
   background-color: #222C59;
 }
@@ -121,7 +121,7 @@ exports[`auth2faType: off 1`] = `
 
 .c11 {
   appearance: none;
-  border: 1px solid rgba(255,255,255,0.54);
+  border: 1px solid rgba(255, 255, 255, 0.54);
   border-radius: 4px;
   box-sizing: border-box;
   display: block;
@@ -138,7 +138,7 @@ exports[`auth2faType: off 1`] = `
 .c11:hover,
 .c11:focus,
 .c11:active {
-  border: 1px solid rgba(255,255,255,0.72);
+  border: 1px solid rgba(255, 255, 255, 0.72);
 }
 
 .c11::-ms-clear {
@@ -146,7 +146,7 @@ exports[`auth2faType: off 1`] = `
 }
 
 .c11::placeholder {
-  color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
   opacity: 1;
 }
 
@@ -155,8 +155,8 @@ exports[`auth2faType: off 1`] = `
 }
 
 .c11:disabled {
-  color: rgba(255,255,255,0.36);
-  border-color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
+  border-color: rgba(255, 255, 255, 0.36);
 }
 
 .c10 {
@@ -396,7 +396,7 @@ exports[`auth2faType: optional rendering 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c17:active,
@@ -408,14 +408,14 @@ exports[`auth2faType: optional rendering 1`] = `
 
 .c17:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
 }
 
 .c1 {
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px rgba(0,0,0,0.14),0px 1px 18px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px rgba(0, 0, 0, 0.14),0px 1px 18px rgba(0, 0, 0, 0.12);
   border-radius: 8px;
   background-color: #222C59;
 }
@@ -433,7 +433,7 @@ exports[`auth2faType: optional rendering 1`] = `
 
 .c11 {
   appearance: none;
-  border: 1px solid rgba(255,255,255,0.54);
+  border: 1px solid rgba(255, 255, 255, 0.54);
   border-radius: 4px;
   box-sizing: border-box;
   display: block;
@@ -450,7 +450,7 @@ exports[`auth2faType: optional rendering 1`] = `
 .c11:hover,
 .c11:focus,
 .c11:active {
-  border: 1px solid rgba(255,255,255,0.72);
+  border: 1px solid rgba(255, 255, 255, 0.72);
 }
 
 .c11::-ms-clear {
@@ -458,7 +458,7 @@ exports[`auth2faType: optional rendering 1`] = `
 }
 
 .c11::placeholder {
-  color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
   opacity: 1;
 }
 
@@ -467,8 +467,8 @@ exports[`auth2faType: optional rendering 1`] = `
 }
 
 .c11:disabled {
-  color: rgba(255,255,255,0.36);
-  border-color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
+  border-color: rgba(255, 255, 255, 0.36);
 }
 
 .c10 {
@@ -564,20 +564,20 @@ exports[`auth2faType: optional rendering 1`] = `
   outline: none;
   min-height: 40px;
   height: fit-content;
-  border: 1px solid rgba(255,255,255,0.54);
+  border: 1px solid rgba(255, 255, 255, 0.54);
   border-radius: 4px;
   background-color: transparent;
   box-shadow: none;
 }
 
 .c16 .react-select__control .react-select__dropdown-indicator {
-  color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
 }
 
 .c16 .react-select__control:hover,
 .c16 .react-select__control:focus,
 .c16 .react-select__control:active {
-  border: 1px solid rgba(255,255,255,0.72);
+  border: 1px solid rgba(255, 255, 255, 0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
@@ -598,7 +598,7 @@ exports[`auth2faType: optional rendering 1`] = `
 }
 
 .c16 .react-select__control--is-focused {
-  border-color: rgba(255,255,255,0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
@@ -612,7 +612,7 @@ exports[`auth2faType: optional rendering 1`] = `
 }
 
 .c16 .react-select__placeholder {
-  color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
 }
 
 .c16 .react-select__multi-value {
@@ -658,7 +658,7 @@ exports[`auth2faType: optional rendering 1`] = `
 }
 
 .c16 .react-select__clear-indicator {
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
 }
 
 .c16 .react-select__clear-indicator:hover,
@@ -674,7 +674,7 @@ exports[`auth2faType: optional rendering 1`] = `
 .c16 .react-select__menu {
   margin-top: 0px;
   background-color: #344179;
-  box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
+  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),0px 8px 10px 1px rgba(0, 0, 0, 0.14),0px 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 
 .c16 .react-select__menu .react-select__menu-list::-webkit-scrollbar-thumb {
@@ -691,17 +691,17 @@ exports[`auth2faType: optional rendering 1`] = `
 }
 
 .c16 .react-select__control--is-disabled {
-  color: rgba(255,255,255,0.36);
-  border: 1px solid rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
+  border: 1px solid rgba(255, 255, 255, 0.36);
 }
 
 .c16 .react-select__control--is-disabled .react-select__single-value,
 .c16 .react-select__control--is-disabled .react-select__placeholder {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
 }
 
 .c16 .react-select__control--is-disabled .react-select__indicator {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
 }
 
 .c16 .react-select__input {
@@ -960,7 +960,7 @@ exports[`auth2faType: otp rendering 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c18:active,
@@ -972,14 +972,14 @@ exports[`auth2faType: otp rendering 1`] = `
 
 .c18:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
 }
 
 .c1 {
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px rgba(0,0,0,0.14),0px 1px 18px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px rgba(0, 0, 0, 0.14),0px 1px 18px rgba(0, 0, 0, 0.12);
   border-radius: 8px;
   background-color: #222C59;
 }
@@ -997,7 +997,7 @@ exports[`auth2faType: otp rendering 1`] = `
 
 .c11 {
   appearance: none;
-  border: 1px solid rgba(255,255,255,0.54);
+  border: 1px solid rgba(255, 255, 255, 0.54);
   border-radius: 4px;
   box-sizing: border-box;
   display: block;
@@ -1014,7 +1014,7 @@ exports[`auth2faType: otp rendering 1`] = `
 .c11:hover,
 .c11:focus,
 .c11:active {
-  border: 1px solid rgba(255,255,255,0.72);
+  border: 1px solid rgba(255, 255, 255, 0.72);
 }
 
 .c11::-ms-clear {
@@ -1022,7 +1022,7 @@ exports[`auth2faType: otp rendering 1`] = `
 }
 
 .c11::placeholder {
-  color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
   opacity: 1;
 }
 
@@ -1031,8 +1031,8 @@ exports[`auth2faType: otp rendering 1`] = `
 }
 
 .c11:disabled {
-  color: rgba(255,255,255,0.36);
-  border-color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
+  border-color: rgba(255, 255, 255, 0.36);
 }
 
 .c10 {
@@ -1128,20 +1128,20 @@ exports[`auth2faType: otp rendering 1`] = `
   outline: none;
   min-height: 40px;
   height: fit-content;
-  border: 1px solid rgba(255,255,255,0.54);
+  border: 1px solid rgba(255, 255, 255, 0.54);
   border-radius: 4px;
   background-color: transparent;
   box-shadow: none;
 }
 
 .c16 .react-select__control .react-select__dropdown-indicator {
-  color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
 }
 
 .c16 .react-select__control:hover,
 .c16 .react-select__control:focus,
 .c16 .react-select__control:active {
-  border: 1px solid rgba(255,255,255,0.72);
+  border: 1px solid rgba(255, 255, 255, 0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
@@ -1162,7 +1162,7 @@ exports[`auth2faType: otp rendering 1`] = `
 }
 
 .c16 .react-select__control--is-focused {
-  border-color: rgba(255,255,255,0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
@@ -1176,7 +1176,7 @@ exports[`auth2faType: otp rendering 1`] = `
 }
 
 .c16 .react-select__placeholder {
-  color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
 }
 
 .c16 .react-select__multi-value {
@@ -1222,7 +1222,7 @@ exports[`auth2faType: otp rendering 1`] = `
 }
 
 .c16 .react-select__clear-indicator {
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
 }
 
 .c16 .react-select__clear-indicator:hover,
@@ -1238,7 +1238,7 @@ exports[`auth2faType: otp rendering 1`] = `
 .c16 .react-select__menu {
   margin-top: 0px;
   background-color: #344179;
-  box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
+  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),0px 8px 10px 1px rgba(0, 0, 0, 0.14),0px 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 
 .c16 .react-select__menu .react-select__menu-list::-webkit-scrollbar-thumb {
@@ -1255,17 +1255,17 @@ exports[`auth2faType: otp rendering 1`] = `
 }
 
 .c16 .react-select__control--is-disabled {
-  color: rgba(255,255,255,0.36);
-  border: 1px solid rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
+  border: 1px solid rgba(255, 255, 255, 0.36);
 }
 
 .c16 .react-select__control--is-disabled .react-select__single-value,
 .c16 .react-select__control--is-disabled .react-select__placeholder {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
 }
 
 .c16 .react-select__control--is-disabled .react-select__indicator {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
 }
 
 .c16 .react-select__input {
@@ -1536,7 +1536,7 @@ exports[`auth2faType: webauthn rendering 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c17:active,
@@ -1548,14 +1548,14 @@ exports[`auth2faType: webauthn rendering 1`] = `
 
 .c17:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
 }
 
 .c1 {
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px rgba(0,0,0,0.14),0px 1px 18px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px rgba(0, 0, 0, 0.14),0px 1px 18px rgba(0, 0, 0, 0.12);
   border-radius: 8px;
   background-color: #222C59;
 }
@@ -1573,7 +1573,7 @@ exports[`auth2faType: webauthn rendering 1`] = `
 
 .c11 {
   appearance: none;
-  border: 1px solid rgba(255,255,255,0.54);
+  border: 1px solid rgba(255, 255, 255, 0.54);
   border-radius: 4px;
   box-sizing: border-box;
   display: block;
@@ -1590,7 +1590,7 @@ exports[`auth2faType: webauthn rendering 1`] = `
 .c11:hover,
 .c11:focus,
 .c11:active {
-  border: 1px solid rgba(255,255,255,0.72);
+  border: 1px solid rgba(255, 255, 255, 0.72);
 }
 
 .c11::-ms-clear {
@@ -1598,7 +1598,7 @@ exports[`auth2faType: webauthn rendering 1`] = `
 }
 
 .c11::placeholder {
-  color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
   opacity: 1;
 }
 
@@ -1607,8 +1607,8 @@ exports[`auth2faType: webauthn rendering 1`] = `
 }
 
 .c11:disabled {
-  color: rgba(255,255,255,0.36);
-  border-color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
+  border-color: rgba(255, 255, 255, 0.36);
 }
 
 .c10 {
@@ -1704,20 +1704,20 @@ exports[`auth2faType: webauthn rendering 1`] = `
   outline: none;
   min-height: 40px;
   height: fit-content;
-  border: 1px solid rgba(255,255,255,0.54);
+  border: 1px solid rgba(255, 255, 255, 0.54);
   border-radius: 4px;
   background-color: transparent;
   box-shadow: none;
 }
 
 .c16 .react-select__control .react-select__dropdown-indicator {
-  color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
 }
 
 .c16 .react-select__control:hover,
 .c16 .react-select__control:focus,
 .c16 .react-select__control:active {
-  border: 1px solid rgba(255,255,255,0.72);
+  border: 1px solid rgba(255, 255, 255, 0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
@@ -1738,7 +1738,7 @@ exports[`auth2faType: webauthn rendering 1`] = `
 }
 
 .c16 .react-select__control--is-focused {
-  border-color: rgba(255,255,255,0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
@@ -1752,7 +1752,7 @@ exports[`auth2faType: webauthn rendering 1`] = `
 }
 
 .c16 .react-select__placeholder {
-  color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
 }
 
 .c16 .react-select__multi-value {
@@ -1798,7 +1798,7 @@ exports[`auth2faType: webauthn rendering 1`] = `
 }
 
 .c16 .react-select__clear-indicator {
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
 }
 
 .c16 .react-select__clear-indicator:hover,
@@ -1814,7 +1814,7 @@ exports[`auth2faType: webauthn rendering 1`] = `
 .c16 .react-select__menu {
   margin-top: 0px;
   background-color: #344179;
-  box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
+  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),0px 8px 10px 1px rgba(0, 0, 0, 0.14),0px 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 
 .c16 .react-select__menu .react-select__menu-list::-webkit-scrollbar-thumb {
@@ -1831,17 +1831,17 @@ exports[`auth2faType: webauthn rendering 1`] = `
 }
 
 .c16 .react-select__control--is-disabled {
-  color: rgba(255,255,255,0.36);
-  border: 1px solid rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
+  border: 1px solid rgba(255, 255, 255, 0.36);
 }
 
 .c16 .react-select__control--is-disabled .react-select__single-value,
 .c16 .react-select__control--is-disabled .react-select__placeholder {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
 }
 
 .c16 .react-select__control--is-disabled .react-select__indicator {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
 }
 
 .c16 .react-select__input {
@@ -2108,7 +2108,7 @@ exports[`cloud auth2faType: on rendering 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c16:active,
@@ -2120,7 +2120,7 @@ exports[`cloud auth2faType: on rendering 1`] = `
 
 .c16:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -2171,7 +2171,7 @@ exports[`cloud auth2faType: on rendering 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c22:active,
@@ -2183,7 +2183,7 @@ exports[`cloud auth2faType: on rendering 1`] = `
 
 .c22:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -2215,7 +2215,7 @@ exports[`cloud auth2faType: on rendering 1`] = `
 }
 
 .c1 {
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px rgba(0,0,0,0.14),0px 1px 18px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px rgba(0, 0, 0, 0.14),0px 1px 18px rgba(0, 0, 0, 0.12);
   border-radius: 8px;
   background-color: #222C59;
 }
@@ -2233,7 +2233,7 @@ exports[`cloud auth2faType: on rendering 1`] = `
 
 .c11 {
   appearance: none;
-  border: 1px solid rgba(255,255,255,0.54);
+  border: 1px solid rgba(255, 255, 255, 0.54);
   border-radius: 4px;
   box-sizing: border-box;
   display: block;
@@ -2250,7 +2250,7 @@ exports[`cloud auth2faType: on rendering 1`] = `
 .c11:hover,
 .c11:focus,
 .c11:active {
-  border: 1px solid rgba(255,255,255,0.72);
+  border: 1px solid rgba(255, 255, 255, 0.72);
 }
 
 .c11::-ms-clear {
@@ -2258,7 +2258,7 @@ exports[`cloud auth2faType: on rendering 1`] = `
 }
 
 .c11::placeholder {
-  color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
   opacity: 1;
 }
 
@@ -2267,8 +2267,8 @@ exports[`cloud auth2faType: on rendering 1`] = `
 }
 
 .c11:disabled {
-  color: rgba(255,255,255,0.36);
-  border-color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
+  border-color: rgba(255, 255, 255, 0.36);
 }
 
 .c10 {
@@ -2364,20 +2364,20 @@ exports[`cloud auth2faType: on rendering 1`] = `
   outline: none;
   min-height: 40px;
   height: fit-content;
-  border: 1px solid rgba(255,255,255,0.54);
+  border: 1px solid rgba(255, 255, 255, 0.54);
   border-radius: 4px;
   background-color: transparent;
   box-shadow: none;
 }
 
 .c21 .react-select__control .react-select__dropdown-indicator {
-  color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
 }
 
 .c21 .react-select__control:hover,
 .c21 .react-select__control:focus,
 .c21 .react-select__control:active {
-  border: 1px solid rgba(255,255,255,0.72);
+  border: 1px solid rgba(255, 255, 255, 0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
@@ -2398,7 +2398,7 @@ exports[`cloud auth2faType: on rendering 1`] = `
 }
 
 .c21 .react-select__control--is-focused {
-  border-color: rgba(255,255,255,0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
@@ -2412,7 +2412,7 @@ exports[`cloud auth2faType: on rendering 1`] = `
 }
 
 .c21 .react-select__placeholder {
-  color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
 }
 
 .c21 .react-select__multi-value {
@@ -2458,7 +2458,7 @@ exports[`cloud auth2faType: on rendering 1`] = `
 }
 
 .c21 .react-select__clear-indicator {
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
 }
 
 .c21 .react-select__clear-indicator:hover,
@@ -2474,7 +2474,7 @@ exports[`cloud auth2faType: on rendering 1`] = `
 .c21 .react-select__menu {
   margin-top: 0px;
   background-color: #344179;
-  box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
+  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),0px 8px 10px 1px rgba(0, 0, 0, 0.14),0px 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 
 .c21 .react-select__menu .react-select__menu-list::-webkit-scrollbar-thumb {
@@ -2491,17 +2491,17 @@ exports[`cloud auth2faType: on rendering 1`] = `
 }
 
 .c21 .react-select__control--is-disabled {
-  color: rgba(255,255,255,0.36);
-  border: 1px solid rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
+  border: 1px solid rgba(255, 255, 255, 0.36);
 }
 
 .c21 .react-select__control--is-disabled .react-select__single-value,
 .c21 .react-select__control--is-disabled .react-select__placeholder {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
 }
 
 .c21 .react-select__control--is-disabled .react-select__indicator {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
 }
 
 .c21 .react-select__input {
@@ -2715,7 +2715,7 @@ exports[`no login enabled 1`] = `
 }
 
 .c1 {
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px rgba(0,0,0,0.14),0px 1px 18px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px rgba(0, 0, 0, 0.14),0px 1px 18px rgba(0, 0, 0, 0.12);
   border-radius: 8px;
   background-color: #222C59;
 }
@@ -2871,7 +2871,7 @@ exports[`server error rendering 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c14:active,
@@ -2883,14 +2883,14 @@ exports[`server error rendering 1`] = `
 
 .c14:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
 }
 
 .c1 {
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px rgba(0,0,0,0.14),0px 1px 18px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px rgba(0, 0, 0, 0.14),0px 1px 18px rgba(0, 0, 0, 0.12);
   border-radius: 8px;
   background-color: #222C59;
 }
@@ -2908,7 +2908,7 @@ exports[`server error rendering 1`] = `
 
 .c12 {
   appearance: none;
-  border: 1px solid rgba(255,255,255,0.54);
+  border: 1px solid rgba(255, 255, 255, 0.54);
   border-radius: 4px;
   box-sizing: border-box;
   display: block;
@@ -2925,7 +2925,7 @@ exports[`server error rendering 1`] = `
 .c12:hover,
 .c12:focus,
 .c12:active {
-  border: 1px solid rgba(255,255,255,0.72);
+  border: 1px solid rgba(255, 255, 255, 0.72);
 }
 
 .c12::-ms-clear {
@@ -2933,7 +2933,7 @@ exports[`server error rendering 1`] = `
 }
 
 .c12::placeholder {
-  color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
   opacity: 1;
 }
 
@@ -2942,8 +2942,8 @@ exports[`server error rendering 1`] = `
 }
 
 .c12:disabled {
-  color: rgba(255,255,255,0.36);
-  border-color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
+  border-color: rgba(255, 255, 255, 0.36);
 }
 
 .c11 {
@@ -3164,7 +3164,7 @@ exports[`sso list still renders when local auth is disabled 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c7:active,
@@ -3176,7 +3176,7 @@ exports[`sso list still renders when local auth is disabled 1`] = `
 
 .c7:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -3190,7 +3190,7 @@ exports[`sso list still renders when local auth is disabled 1`] = `
 }
 
 .c1 {
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px rgba(0,0,0,0.14),0px 1px 18px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px rgba(0, 0, 0, 0.14),0px 1px 18px rgba(0, 0, 0, 0.12);
   border-radius: 8px;
   background-color: #222C59;
 }
@@ -3269,8 +3269,8 @@ exports[`sso list still renders when local auth is disabled 1`] = `
 
 .c8:hover,
 .c8:focus {
-  background: rgb(61,61,61);
-  border: 1px solid rgb(142,142,142);
+  background: rgb(61, 61, 61);
+  border: 1px solid rgb(142, 142, 142);
 }
 
 .c8 svg {
@@ -3290,8 +3290,8 @@ exports[`sso list still renders when local auth is disabled 1`] = `
 
 .c11:hover,
 .c11:focus {
-  background: rgb(198,67,51);
-  border: 1px solid rgb(234,147,136);
+  background: rgb(198, 67, 51);
+  border: 1px solid rgb(234, 147, 136);
 }
 
 .c11 svg {
@@ -3431,7 +3431,7 @@ exports[`sso providers rendering 1`] = `
   margin-top: 16px;
   margin-bottom: 16px;
   border-bottom: 1px solid;
-  border-color: rgba(255,255,255,0.54);
+  border-color: rgba(255, 255, 255, 0.54);
 }
 
 .c18 {
@@ -3485,7 +3485,7 @@ exports[`sso providers rendering 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c7:active,
@@ -3497,7 +3497,7 @@ exports[`sso providers rendering 1`] = `
 
 .c7:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -3523,7 +3523,7 @@ exports[`sso providers rendering 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
   border-color: transparent;
   border-width: 1.5px;
   padding: 0 30.5px;
@@ -3537,8 +3537,8 @@ exports[`sso providers rendering 1`] = `
 .c19:focus-visible,
 .teleport-button__force-focus-visible .c19 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -3560,7 +3560,7 @@ exports[`sso providers rendering 1`] = `
 
 .c19:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -3574,7 +3574,7 @@ exports[`sso providers rendering 1`] = `
 }
 
 .c1 {
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px rgba(0,0,0,0.14),0px 1px 18px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px rgba(0, 0, 0, 0.14),0px 1px 18px rgba(0, 0, 0, 0.12);
   border-radius: 8px;
   background-color: #222C59;
 }
@@ -3660,8 +3660,8 @@ exports[`sso providers rendering 1`] = `
 
 .c8:hover,
 .c8:focus {
-  background: rgb(61,61,61);
-  border: 1px solid rgb(142,142,142);
+  background: rgb(61, 61, 61);
+  border: 1px solid rgb(142, 142, 142);
 }
 
 .c8 svg {
@@ -3681,8 +3681,8 @@ exports[`sso providers rendering 1`] = `
 
 .c11:hover,
 .c11:focus {
-  background: rgb(198,67,51);
-  border: 1px solid rgb(234,147,136);
+  background: rgb(198, 67, 51);
+  border: 1px solid rgb(234, 147, 136);
 }
 
 .c11 svg {
@@ -3702,8 +3702,8 @@ exports[`sso providers rendering 1`] = `
 
 .c12:hover,
 .c12:focus {
-  background: rgb(28,72,116);
-  border: 1px solid rgb(121,150,179);
+  background: rgb(28, 72, 116);
+  border: 1px solid rgb(121, 150, 179);
 }
 
 .c12 svg {
@@ -3723,8 +3723,8 @@ exports[`sso providers rendering 1`] = `
 
 .c13:hover,
 .c13:focus {
-  background: rgb(222,132,27);
-  border: 1px solid rgb(250,190,120);
+  background: rgb(222, 132, 27);
+  border: 1px solid rgb(250, 190, 120);
 }
 
 .c13 svg {
@@ -3744,8 +3744,8 @@ exports[`sso providers rendering 1`] = `
 
 .c14:hover,
 .c14:focus {
-  background: rgb(34,102,212);
-  border: 1px solid rgb(124,170,243);
+  background: rgb(34, 102, 212);
+  border: 1px solid rgb(124, 170, 243);
 }
 
 .c14 svg {
diff --git a/web/packages/teleport/src/components/Layout/Layout.jsx b/web/packages/teleport/src/components/Layout/Layout.jsx
index 8ee24d8d7fa1a..355a608f36e9d 100644
--- a/web/packages/teleport/src/components/Layout/Layout.jsx
+++ b/web/packages/teleport/src/components/Layout/Layout.jsx
@@ -62,7 +62,7 @@ const FeatureBox = styled(Flex)`
     Directly assigning margin-bottom impacts the scrollbar area by pushing it up as well.
     It works in all major browsers.
   */
-  ::after {
+  &::after {
     content: ' ';
     padding-bottom: 24px;
   }
diff --git a/web/packages/teleport/src/components/ReAuthenticate/__snapshots__/ReAuthenticate.story.test.tsx.snap b/web/packages/teleport/src/components/ReAuthenticate/__snapshots__/ReAuthenticate.story.test.tsx.snap
index 5304d822c0761..c8e85ae80dc51 100644
--- a/web/packages/teleport/src/components/ReAuthenticate/__snapshots__/ReAuthenticate.story.test.tsx.snap
+++ b/web/packages/teleport/src/components/ReAuthenticate/__snapshots__/ReAuthenticate.story.test.tsx.snap
@@ -103,7 +103,7 @@ exports[`render failed state for re-authentication dialog 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c18:active,
@@ -115,7 +115,7 @@ exports[`render failed state for re-authentication dialog 1`] = `
 
 .c18:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -141,7 +141,7 @@ exports[`render failed state for re-authentication dialog 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
   border-color: transparent;
   border-width: 1.5px;
   padding: 0 30.5px;
@@ -154,8 +154,8 @@ exports[`render failed state for re-authentication dialog 1`] = `
 .c19:focus-visible,
 .teleport-button__force-focus-visible .c19 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -177,7 +177,7 @@ exports[`render failed state for re-authentication dialog 1`] = `
 
 .c19:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -198,7 +198,7 @@ exports[`render failed state for re-authentication dialog 1`] = `
   overflow: hidden;
   text-overflow: ellipsis;
   margin: 0px;
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
   text-align: center;
 }
 
@@ -232,7 +232,7 @@ exports[`render failed state for re-authentication dialog 1`] = `
   bottom: 0;
   top: 0;
   left: 0;
-  background-color: rgba(0,0,0,0.5);
+  background-color: rgba(0, 0, 0, 0.5);
   opacity: 1;
   touch-action: none;
 }
@@ -289,20 +289,20 @@ exports[`render failed state for re-authentication dialog 1`] = `
   outline: none;
   min-height: 40px;
   height: fit-content;
-  border: 1px solid rgba(255,255,255,0.54);
+  border: 1px solid rgba(255, 255, 255, 0.54);
   border-radius: 4px;
   background-color: transparent;
   box-shadow: none;
 }
 
 .c15 .react-select__control .react-select__dropdown-indicator {
-  color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
 }
 
 .c15 .react-select__control:hover,
 .c15 .react-select__control:focus,
 .c15 .react-select__control:active {
-  border: 1px solid rgba(255,255,255,0.72);
+  border: 1px solid rgba(255, 255, 255, 0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
@@ -323,7 +323,7 @@ exports[`render failed state for re-authentication dialog 1`] = `
 }
 
 .c15 .react-select__control--is-focused {
-  border-color: rgba(255,255,255,0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
@@ -337,7 +337,7 @@ exports[`render failed state for re-authentication dialog 1`] = `
 }
 
 .c15 .react-select__placeholder {
-  color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
 }
 
 .c15 .react-select__multi-value {
@@ -383,7 +383,7 @@ exports[`render failed state for re-authentication dialog 1`] = `
 }
 
 .c15 .react-select__clear-indicator {
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
 }
 
 .c15 .react-select__clear-indicator:hover,
@@ -399,7 +399,7 @@ exports[`render failed state for re-authentication dialog 1`] = `
 .c15 .react-select__menu {
   margin-top: 0px;
   background-color: #4A5688;
-  box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
+  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),0px 8px 10px 1px rgba(0, 0, 0, 0.14),0px 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 
 .c15 .react-select__menu .react-select__menu-list::-webkit-scrollbar-thumb {
@@ -416,17 +416,17 @@ exports[`render failed state for re-authentication dialog 1`] = `
 }
 
 .c15 .react-select__control--is-disabled {
-  color: rgba(255,255,255,0.36);
-  border: 1px solid rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
+  border: 1px solid rgba(255, 255, 255, 0.36);
 }
 
 .c15 .react-select__control--is-disabled .react-select__single-value,
 .c15 .react-select__control--is-disabled .react-select__placeholder {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
 }
 
 .c15 .react-select__control--is-disabled .react-select__indicator {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
 }
 
 .c15 .react-select__input {
@@ -656,7 +656,7 @@ exports[`render re-authentication dialog 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c17:active,
@@ -668,7 +668,7 @@ exports[`render re-authentication dialog 1`] = `
 
 .c17:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -694,7 +694,7 @@ exports[`render re-authentication dialog 1`] = `
   transition: background-color 0.1s,border-color 0.1s,outline-color 0.1s,box-shadow 0.1s;
   -webkit-font-smoothing: antialiased;
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
   border-color: transparent;
   border-width: 1.5px;
   padding: 0 30.5px;
@@ -707,8 +707,8 @@ exports[`render re-authentication dialog 1`] = `
 .c18:focus-visible,
 .teleport-button__force-focus-visible .c18 {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.72);
-  border-color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   border-radius: 4px;
   outline: none;
 }
@@ -730,7 +730,7 @@ exports[`render re-authentication dialog 1`] = `
 
 .c18:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -751,7 +751,7 @@ exports[`render re-authentication dialog 1`] = `
   overflow: hidden;
   text-overflow: ellipsis;
   margin: 0px;
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
   text-align: center;
 }
 
@@ -785,7 +785,7 @@ exports[`render re-authentication dialog 1`] = `
   bottom: 0;
   top: 0;
   left: 0;
-  background-color: rgba(0,0,0,0.5);
+  background-color: rgba(0, 0, 0, 0.5);
   opacity: 1;
   touch-action: none;
 }
@@ -842,20 +842,20 @@ exports[`render re-authentication dialog 1`] = `
   outline: none;
   min-height: 40px;
   height: fit-content;
-  border: 1px solid rgba(255,255,255,0.54);
+  border: 1px solid rgba(255, 255, 255, 0.54);
   border-radius: 4px;
   background-color: transparent;
   box-shadow: none;
 }
 
 .c14 .react-select__control .react-select__dropdown-indicator {
-  color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
 }
 
 .c14 .react-select__control:hover,
 .c14 .react-select__control:focus,
 .c14 .react-select__control:active {
-  border: 1px solid rgba(255,255,255,0.72);
+  border: 1px solid rgba(255, 255, 255, 0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
@@ -876,7 +876,7 @@ exports[`render re-authentication dialog 1`] = `
 }
 
 .c14 .react-select__control--is-focused {
-  border-color: rgba(255,255,255,0.72);
+  border-color: rgba(255, 255, 255, 0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
@@ -890,7 +890,7 @@ exports[`render re-authentication dialog 1`] = `
 }
 
 .c14 .react-select__placeholder {
-  color: rgba(255,255,255,0.54);
+  color: rgba(255, 255, 255, 0.54);
 }
 
 .c14 .react-select__multi-value {
@@ -936,7 +936,7 @@ exports[`render re-authentication dialog 1`] = `
 }
 
 .c14 .react-select__clear-indicator {
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
 }
 
 .c14 .react-select__clear-indicator:hover,
@@ -952,7 +952,7 @@ exports[`render re-authentication dialog 1`] = `
 .c14 .react-select__menu {
   margin-top: 0px;
   background-color: #4A5688;
-  box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
+  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),0px 8px 10px 1px rgba(0, 0, 0, 0.14),0px 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 
 .c14 .react-select__menu .react-select__menu-list::-webkit-scrollbar-thumb {
@@ -969,17 +969,17 @@ exports[`render re-authentication dialog 1`] = `
 }
 
 .c14 .react-select__control--is-disabled {
-  color: rgba(255,255,255,0.36);
-  border: 1px solid rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
+  border: 1px solid rgba(255, 255, 255, 0.36);
 }
 
 .c14 .react-select__control--is-disabled .react-select__single-value,
 .c14 .react-select__control--is-disabled .react-select__placeholder {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
 }
 
 .c14 .react-select__control--is-disabled .react-select__indicator {
-  color: rgba(255,255,255,0.36);
+  color: rgba(255, 255, 255, 0.36);
 }
 
 .c14 .react-select__input {
diff --git a/web/packages/teleport/src/components/RecoveryCodes/__snapshots__/RecoveryCodes.story.test.tsx.snap b/web/packages/teleport/src/components/RecoveryCodes/__snapshots__/RecoveryCodes.story.test.tsx.snap
index e5cfbb2064821..3b2ec4f0189b0 100644
--- a/web/packages/teleport/src/components/RecoveryCodes/__snapshots__/RecoveryCodes.story.test.tsx.snap
+++ b/web/packages/teleport/src/components/RecoveryCodes/__snapshots__/RecoveryCodes.story.test.tsx.snap
@@ -98,7 +98,7 @@ exports[`render correct dialog after creating a new account 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c16:active,
@@ -110,7 +110,7 @@ exports[`render correct dialog after creating a new account 1`] = `
 
 .c16:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -161,7 +161,7 @@ exports[`render correct dialog after creating a new account 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c18:active,
@@ -173,7 +173,7 @@ exports[`render correct dialog after creating a new account 1`] = `
 
 .c18:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -225,7 +225,7 @@ exports[`render correct dialog after creating a new account 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c19:active,
@@ -237,14 +237,14 @@ exports[`render correct dialog after creating a new account 1`] = `
 
 .c19:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
 }
 
 .c4 {
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px rgba(0,0,0,0.14),0px 1px 18px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px rgba(0, 0, 0, 0.14),0px 1px 18px rgba(0, 0, 0, 0.12);
   border-radius: 8px;
   background-color: #222C59;
 }
@@ -303,7 +303,7 @@ exports[`render correct dialog after creating a new account 1`] = `
   overflow: hidden;
   text-overflow: ellipsis;
   margin: 0px;
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
 }
 
 .c3 {
@@ -360,7 +360,7 @@ exports[`render correct dialog after creating a new account 1`] = `
   class="c0 c1"
 >
   <div
-    class="c2 c3 sc-gEvEer c2 c4 no-print"
+    class="c2 c3 sc-gEvDqW c2 c4 no-print"
     overflow="hidden"
   >
     <div
@@ -576,7 +576,7 @@ exports[`render correct dialog after resetting account 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c16:active,
@@ -588,7 +588,7 @@ exports[`render correct dialog after resetting account 1`] = `
 
 .c16:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -639,7 +639,7 @@ exports[`render correct dialog after resetting account 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c18:active,
@@ -651,7 +651,7 @@ exports[`render correct dialog after resetting account 1`] = `
 
 .c18:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
@@ -703,7 +703,7 @@ exports[`render correct dialog after resetting account 1`] = `
   background-color: #B29DFF;
   border-color: transparent;
   color: #000000;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.20), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.20),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 }
 
 .c19:active,
@@ -715,14 +715,14 @@ exports[`render correct dialog after resetting account 1`] = `
 
 .c19:disabled {
   background-color: rgba(255,255,255,0.07);
-  color: rgba(255,255,255,0.3);
+  color: rgba(255, 255, 255, 0.3);
   border-color: transparent;
   box-shadow: none;
   cursor: auto;
 }
 
 .c4 {
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px rgba(0,0,0,0.14),0px 1px 18px rgba(0,0,0,0.12);
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px rgba(0, 0, 0, 0.14),0px 1px 18px rgba(0, 0, 0, 0.12);
   border-radius: 8px;
   background-color: #222C59;
 }
@@ -781,7 +781,7 @@ exports[`render correct dialog after resetting account 1`] = `
   overflow: hidden;
   text-overflow: ellipsis;
   margin: 0px;
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
 }
 
 .c3 {
@@ -838,7 +838,7 @@ exports[`render correct dialog after resetting account 1`] = `
   class="c0 c1"
 >
   <div
-    class="c2 c3 sc-gEvEer c2 c4 no-print"
+    class="c2 c3 sc-gEvDqW c2 c4 no-print"
     overflow="hidden"
   >
     <div
diff --git a/web/packages/teleport/src/components/Tabs/Tabs.tsx b/web/packages/teleport/src/components/Tabs/Tabs.tsx
index e491b55399dbd..80e1dfb70dd11 100644
--- a/web/packages/teleport/src/components/Tabs/Tabs.tsx
+++ b/web/packages/teleport/src/components/Tabs/Tabs.tsx
@@ -51,8 +51,8 @@ export function Tabs({ tabs }: Props) {
                     border: none;
                     background: ${props =>
                       props.theme.colors.spotBackground[0]};
-                    :hover,
-                    :focus {
+                    &:hover,
+                    &:focus {
                       cursor: pointer;
                       opacity: 1;
                     }
@@ -72,8 +72,8 @@ export function Tabs({ tabs }: Props) {
                     color: inherit;
                     border: none;
                     background: transparent;
-                    :hover,
-                    :focus {
+                    &:hover,
+                    &:focus {
                       cursor: pointer;
                       opacity: 1;
                     }
diff --git a/web/packages/teleport/src/components/Wizard/Navigation/Bullet.tsx b/web/packages/teleport/src/components/Wizard/Navigation/Bullet.tsx
index 31f2166456b67..d9650d7bb7328 100644
--- a/web/packages/teleport/src/components/Wizard/Navigation/Bullet.tsx
+++ b/web/packages/teleport/src/components/Wizard/Navigation/Bullet.tsx
@@ -61,7 +61,7 @@ export const ActiveBullet = styled(BulletContainer)`
   border-color: ${props => props.theme.colors.brand};
   background: ${props => props.theme.colors.brand};
 
-  :before {
+  &:before {
     content: '';
     height: 8px;
     width: 8px;
@@ -75,7 +75,7 @@ export const CheckedBullet = styled(BulletContainer)`
   border-color: ${props => props.theme.colors.brand};
   background: ${props => props.theme.colors.brand};
 
-  :before {
+  &:before {
     content: '✓';
     color: ${props => props.theme.colors.levels.popout};
   }
diff --git a/web/packages/teleterm/src/ui/DocumentAccessRequests/NewRequest/NewRequest.tsx b/web/packages/teleterm/src/ui/DocumentAccessRequests/NewRequest/NewRequest.tsx
index 54c5947541872..282f3c28d4532 100644
--- a/web/packages/teleterm/src/ui/DocumentAccessRequests/NewRequest/NewRequest.tsx
+++ b/web/packages/teleterm/src/ui/DocumentAccessRequests/NewRequest/NewRequest.tsx
@@ -193,7 +193,7 @@ const Layout = styled(Box)`
   flex: 1;
   max-width: 1248px;
 
-  ::after {
+  &::after {
     content: ' ';
     padding-bottom: 24px;
   }
diff --git a/web/packages/teleterm/src/ui/DocumentAccessRequests/RequestList/RequestList.tsx b/web/packages/teleterm/src/ui/DocumentAccessRequests/RequestList/RequestList.tsx
index a349c5019dcf4..ef4a0ace0f60a 100644
--- a/web/packages/teleterm/src/ui/DocumentAccessRequests/RequestList/RequestList.tsx
+++ b/web/packages/teleterm/src/ui/DocumentAccessRequests/RequestList/RequestList.tsx
@@ -235,7 +235,7 @@ const Layout = styled(Box)`
   flex: 1;
   max-width: 1248px;
 
-  ::after {
+  &::after {
     content: ' ';
     padding-bottom: 24px;
   }
diff --git a/web/packages/teleterm/src/ui/Search/SearchBar.tsx b/web/packages/teleterm/src/ui/Search/SearchBar.tsx
index 750662ea0ec62..87f5c36264651 100644
--- a/web/packages/teleterm/src/ui/Search/SearchBar.tsx
+++ b/web/packages/teleterm/src/ui/Search/SearchBar.tsx
@@ -205,7 +205,7 @@ const Input = styled.input`
   border-radius: ${props => props.theme.radii[2]}px;
   padding-inline: ${props => props.theme.space[2]}px;
 
-  ::placeholder {
+  &::placeholder {
     color: ${props => props.theme.colors.text.slightlyMuted};
   }
 `;
diff --git a/web/packages/teleterm/src/ui/Search/pickers/ActionPicker.tsx b/web/packages/teleterm/src/ui/Search/pickers/ActionPicker.tsx
index 3e244b0eff330..8859fa0a8e2c3 100644
--- a/web/packages/teleterm/src/ui/Search/pickers/ActionPicker.tsx
+++ b/web/packages/teleterm/src/ui/Search/pickers/ActionPicker.tsx
@@ -1126,7 +1126,7 @@ function FilterButton(props: { text: string; onClick(): void }) {
           cursor: pointer;
           border-radius: ${props => props.theme.radii[1]}px;
 
-          :hover {
+          &:hover {
             background: ${props => props.theme.colors.spotBackground[1]};
           }
 
diff --git a/web/packages/teleterm/src/ui/Search/pickers/ResultList.tsx b/web/packages/teleterm/src/ui/Search/pickers/ResultList.tsx
index cd93e694e3d28..8618b67d5e33e 100644
--- a/web/packages/teleterm/src/ui/Search/pickers/ResultList.tsx
+++ b/web/packages/teleterm/src/ui/Search/pickers/ResultList.tsx
@@ -165,7 +165,7 @@ export const NonInteractiveItem = styled.div`
     background-color: rgba(0, 158, 255, 0.4); // Accent/Link at 40%
   }
 
-  :not(:last-of-type) {
+  &:not(:last-of-type) {
     border-bottom: 1px solid ${props => props.theme.colors.spotBackground[0]};
   }
 
diff --git a/web/packages/teleterm/src/ui/ThemeProvider/ThemeProvider.tsx b/web/packages/teleterm/src/ui/ThemeProvider/ThemeProvider.tsx
index 4f88a1d45673c..2771dcba14404 100644
--- a/web/packages/teleterm/src/ui/ThemeProvider/ThemeProvider.tsx
+++ b/web/packages/teleterm/src/ui/ThemeProvider/ThemeProvider.tsx
@@ -24,6 +24,8 @@ import {
 
 import { Theme } from 'design/theme/themes/types';
 
+import { shouldForwardProp } from 'design/ThemeProvider';
+
 import { useAppContext } from 'teleterm/ui/appContextProvider';
 
 import { GlobalStyle } from './globals';
@@ -68,7 +70,7 @@ export const StaticThemeProvider = (
 ) => {
   return (
     <StyledThemeProvider theme={props.theme}>
-      <StyleSheetManager disableVendorPrefixes>
+      <StyleSheetManager shouldForwardProp={shouldForwardProp}>
         <React.Fragment>
           <GlobalStyle />
           {props.children}
diff --git a/web/packages/teleterm/src/ui/TopBar/Connections/ConnectionsFilterableList/ConnectionStatusIndicator.tsx b/web/packages/teleterm/src/ui/TopBar/Connections/ConnectionsFilterableList/ConnectionStatusIndicator.tsx
index d5fd400a1ebdb..ed22c089ed274 100644
--- a/web/packages/teleterm/src/ui/TopBar/Connections/ConnectionsFilterableList/ConnectionStatusIndicator.tsx
+++ b/web/packages/teleterm/src/ui/TopBar/Connections/ConnectionsFilterableList/ConnectionStatusIndicator.tsx
@@ -31,14 +31,14 @@ export const ConnectionStatusIndicator = (props: {
   return <StyledStatus {...styles} $status={status} $inline={inline} />;
 };
 
-const StyledStatus = styled(Box)`
+const StyledStatus = styled(Box)<{ $inline?: boolean; $status: Status }>`
   position: relative;
   ${props => props.$inline && `display: inline-block;`}
   width: 8px;
   height: 8px;
   border-radius: 50%;
 
-  ${(props: { $status: Status; [key: string]: any }) => {
+  ${props => {
     const { $status, theme } = props;
 
     switch ($status) {
diff --git a/web/packages/teleterm/src/ui/components/VirtualScroll/VirtualScroll.tsx b/web/packages/teleterm/src/ui/components/VirtualScroll/VirtualScroll.tsx
index eeb275e457cc4..bfaedde863eca 100644
--- a/web/packages/teleterm/src/ui/components/VirtualScroll/VirtualScroll.tsx
+++ b/web/packages/teleterm/src/ui/components/VirtualScroll/VirtualScroll.tsx
@@ -64,11 +64,11 @@ const TotalHeight = styled.div<{ height: number }>`
   height: ${props => props.height + 'px'};
 `;
 
-const Offset = styled.div.attrs((props: { moveBy: number }) => ({
+const Offset = styled.div.attrs<{ moveBy: number }>(props => ({
   style: {
     transform: `translateY(${props.moveBy + 'px'})`,
   },
-}))<{ moveBy: number }>``;
+}))``;
 
 const Scrollable = styled.div`
   height: 100%;
diff --git a/yarn.lock b/yarn.lock
index f9451ac2a9e1c..a9f9298ce5c15 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1212,7 +1212,7 @@
     "@babel/parser" "^7.24.7"
     "@babel/types" "^7.24.7"
 
-"@babel/traverse@^7.1.6", "@babel/traverse@^7.12.11", "@babel/traverse@^7.12.9", "@babel/traverse@^7.13.0", "@babel/traverse@^7.24.7", "@babel/traverse@^7.4.5":
+"@babel/traverse@^7.1.6", "@babel/traverse@^7.12.11", "@babel/traverse@^7.12.9", "@babel/traverse@^7.13.0", "@babel/traverse@^7.24.7":
   version "7.24.7"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.24.7.tgz#de2b900163fa741721ba382163fe46a936c40cf5"
   integrity sha512-yb65Ed5S/QAcewNPh0nZczy9JdYXkkAbIsEo+P7BE7yO3txAY30Y/oPa3QkQ5It3xVG2kpKMg9MsdxZaO31uKA==
@@ -1479,10 +1479,10 @@
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
   integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
 
-"@emotion/is-prop-valid@^1.1.0":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz#23116cf1ed18bfeac910ec6436561ecb1a3885cc"
-  integrity sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==
+"@emotion/is-prop-valid@1.2.2":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz#d4175076679c6a26faa92b03bb786f9e52612337"
+  integrity sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==
   dependencies:
     "@emotion/memoize" "^0.8.1"
 
@@ -1512,16 +1512,21 @@
   resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.4.tgz#894374bea39ec30f489bbfc3438192b9774d32e5"
   integrity sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==
 
-"@emotion/stylis@0.8.5", "@emotion/stylis@^0.8.4":
+"@emotion/stylis@0.8.5":
   version "0.8.5"
   resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
   integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
 
-"@emotion/unitless@0.7.5", "@emotion/unitless@^0.7.4":
+"@emotion/unitless@0.7.5":
   version "0.7.5"
   resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
   integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
 
+"@emotion/unitless@0.8.1":
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.1.tgz#182b5a4704ef8ad91bde93f7a860a88fd92c79a3"
+  integrity sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==
+
 "@emotion/utils@0.11.3":
   version "0.11.3"
   resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.11.3.tgz#a759863867befa7e583400d322652a3f44820924"
@@ -3995,6 +4000,11 @@
   dependencies:
     csstype "^2.2.0"
 
+"@types/stylis@4.2.5":
+  version "4.2.5"
+  resolved "https://registry.yarnpkg.com/@types/stylis/-/stylis-4.2.5.tgz#1daa6456f40959d06157698a653a9ab0a70281df"
+  integrity sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==
+
 "@types/tapable@^1", "@types/tapable@^1.0.5":
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.8.tgz#b94a4391c85666c7b73299fd3ad79d4faa435310"
@@ -5115,7 +5125,7 @@ babel-plugin-react-docgen@^4.2.1:
     lodash "^4.17.15"
     react-docgen "^5.0.0"
 
-"babel-plugin-styled-components@>= 1.12.0":
+babel-plugin-styled-components@^2.1.4:
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.4.tgz#9a1f37c7f32ef927b4b008b529feb4a2c82b1092"
   integrity sha512-Xgp9g+A/cG47sUyRwwYxGM4bR/jDRg5N6it/8+HxCnbT5XNKSKDT9xm4oag/osgqjC2It/vH0yXsomOG6k558g==
@@ -6224,7 +6234,7 @@ css-select@^4.1.3:
     domutils "^2.6.0"
     nth-check "^2.0.0"
 
-css-to-react-native@^3.0.0:
+css-to-react-native@3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.2.0.tgz#cdd8099f71024e149e4f6fe17a7d46ecd55f1e32"
   integrity sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==
@@ -6270,6 +6280,11 @@ cssstyle@^2.3.0:
   dependencies:
     cssom "~0.3.6"
 
+csstype@3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
+  integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
+
 csstype@^2.2.0, csstype@^2.5.7:
   version "2.6.21"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.21.tgz#2efb85b7cc55c80017c66a5ad7cbd931fda3a90e"
@@ -8427,7 +8442,7 @@ history@^4.9.0:
     tiny-warning "^1.0.0"
     value-equal "^1.0.1"
 
-hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -11458,15 +11473,7 @@ postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
   integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
 
-postcss@^7.0.14, postcss@^7.0.26, postcss@^7.0.32, postcss@^7.0.36, postcss@^7.0.5, postcss@^7.0.6:
-  version "7.0.39"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.39.tgz#9624375d965630e2e1f2c02a935c82a59cb48309"
-  integrity sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==
-  dependencies:
-    picocolors "^0.2.1"
-    source-map "^0.6.1"
-
-postcss@^8.2.15, postcss@^8.4.38:
+postcss@8.4.38, postcss@^8.2.15, 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==
@@ -11475,6 +11482,14 @@ postcss@^8.2.15, postcss@^8.4.38:
     picocolors "^1.0.0"
     source-map-js "^1.2.0"
 
+postcss@^7.0.14, postcss@^7.0.26, postcss@^7.0.32, postcss@^7.0.36, postcss@^7.0.5, postcss@^7.0.6:
+  version "7.0.39"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.39.tgz#9624375d965630e2e1f2c02a935c82a59cb48309"
+  integrity sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==
+  dependencies:
+    picocolors "^0.2.1"
+    source-map "^0.6.1"
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@@ -12608,7 +12623,7 @@ shallow-clone@^3.0.0:
   dependencies:
     kind-of "^6.0.2"
 
-shallowequal@^1.1.0:
+shallowequal@1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
   integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
@@ -13150,21 +13165,20 @@ style-to-object@0.3.0, style-to-object@^0.3.0:
   dependencies:
     inline-style-parser "0.1.1"
 
-styled-components@5.3.11:
-  version "5.3.11"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.11.tgz#9fda7bf1108e39bf3f3e612fcc18170dedcd57a8"
-  integrity sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==
-  dependencies:
-    "@babel/helper-module-imports" "^7.0.0"
-    "@babel/traverse" "^7.4.5"
-    "@emotion/is-prop-valid" "^1.1.0"
-    "@emotion/stylis" "^0.8.4"
-    "@emotion/unitless" "^0.7.4"
-    babel-plugin-styled-components ">= 1.12.0"
-    css-to-react-native "^3.0.0"
-    hoist-non-react-statics "^3.0.0"
-    shallowequal "^1.1.0"
-    supports-color "^5.5.0"
+styled-components@6.1.11:
+  version "6.1.11"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-6.1.11.tgz#01948e5195bf1d39e57e0a85b41958c80e40cfb8"
+  integrity sha512-Ui0jXPzbp1phYij90h12ksljKGqF8ncGx+pjrNPsSPhbUUjWT2tD1FwGo2LF6USCnbrsIhNngDfodhxbegfEOA==
+  dependencies:
+    "@emotion/is-prop-valid" "1.2.2"
+    "@emotion/unitless" "0.8.1"
+    "@types/stylis" "4.2.5"
+    css-to-react-native "3.2.0"
+    csstype "3.1.3"
+    postcss "8.4.38"
+    shallowequal "1.1.0"
+    stylis "4.3.2"
+    tslib "2.6.2"
 
 styled-system@^3.1.11:
   version "3.2.1"
@@ -13174,6 +13188,11 @@ styled-system@^3.1.11:
     "@babel/runtime" "^7.1.2"
     prop-types "^15.6.2"
 
+stylis@4.3.2:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.3.2.tgz#8f76b70777dd53eb669c6f58c997bf0a9972e444"
+  integrity sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==
+
 sumchecker@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/sumchecker/-/sumchecker-3.0.1.tgz#6377e996795abb0b6d348e9b3e1dfb24345a8e42"
@@ -13181,7 +13200,7 @@ sumchecker@^3.0.1:
   dependencies:
     debug "^4.1.0"
 
-supports-color@^5.3.0, supports-color@^5.5.0:
+supports-color@^5.3.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
   integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
@@ -13542,6 +13561,11 @@ tsconfig-paths@^3.15.0:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
+tslib@2.6.2:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
+  integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
+
 tslib@^1.8.1:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"