diff --git a/.changeset/clean-camels-train.md b/.changeset/clean-camels-train.md
new file mode 100644
index 00000000000..ee88bd04f80
--- /dev/null
+++ b/.changeset/clean-camels-train.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Bug fix: ButtonGroup with Tooltip border-radius is incorrect
diff --git a/.changeset/polite-books-sneeze.md b/.changeset/polite-books-sneeze.md
new file mode 100644
index 00000000000..e56d828b817
--- /dev/null
+++ b/.changeset/polite-books-sneeze.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Fix Typography and Common props for BaseStyles when CSS modules feature flag is enabled
diff --git a/.changeset/shiny-horses-promise.md b/.changeset/shiny-horses-promise.md
new file mode 100644
index 00000000000..5ea9aa012e7
--- /dev/null
+++ b/.changeset/shiny-horses-promise.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Move Header component css module feature flag to ga
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/Group-Heading-with-Classname-dark-colorblind-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/Group-Heading-with-Classname-dark-colorblind-linux.png
index c6f30df62c0..3978cfffa0b 100644
Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/Group-Heading-with-Classname-dark-colorblind-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/Group-Heading-with-Classname-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/Group-Heading-with-Classname-dark-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/Group-Heading-with-Classname-dark-linux.png
index c6f30df62c0..3978cfffa0b 100644
Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/Group-Heading-with-Classname-dark-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/Group-Heading-with-Classname-dark-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/Group-Heading-with-Classname-dark-tritanopia-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/Group-Heading-with-Classname-dark-tritanopia-linux.png
index c6f30df62c0..3978cfffa0b 100644
Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/Group-Heading-with-Classname-dark-tritanopia-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/Group-Heading-with-Classname-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/Group-Heading-with-Classname-light-colorblind-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/Group-Heading-with-Classname-light-colorblind-linux.png
index ea786b54974..d6b20e92cae 100644
Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/Group-Heading-with-Classname-light-colorblind-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/Group-Heading-with-Classname-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/Group-Heading-with-Classname-light-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/Group-Heading-with-Classname-light-linux.png
index ea786b54974..d6b20e92cae 100644
Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/Group-Heading-with-Classname-light-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/Group-Heading-with-Classname-light-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/Group-Heading-with-Classname-light-tritanopia-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/Group-Heading-with-Classname-light-tritanopia-linux.png
index ea786b54974..d6b20e92cae 100644
Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/Group-Heading-with-Classname-light-tritanopia-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/Group-Heading-with-Classname-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-dark-colorblind-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-dark-colorblind-linux.png
index 6c5ba201253..a00b2e44c12 100644
Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-dark-colorblind-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-dark-dimmed-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-dark-dimmed-linux.png
index c01fc484d46..c7c8d797e8c 100644
Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-dark-dimmed-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-dark-high-contrast-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-dark-high-contrast-linux.png
index 9ad15252c45..816dd246bc1 100644
Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-dark-high-contrast-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-dark-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-dark-linux.png
index c1c1bbbdcaf..1ed96a5fab2 100644
Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-dark-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-dark-linux.png differ
diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-dark-tritanopia-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-dark-tritanopia-linux.png
index e1ba26b3432..218d565a443 100644
Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-dark-tritanopia-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-light-colorblind-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-light-colorblind-linux.png
index 6b349f6f99e..5730e0a8630 100644
Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-light-colorblind-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-light-high-contrast-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-light-high-contrast-linux.png
index 8140104a3c9..79adc772474 100644
Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-light-high-contrast-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-light-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-light-linux.png
index 1eb037b7505..245847c230a 100644
Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-light-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-light-linux.png differ
diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-light-tritanopia-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-light-tritanopia-linux.png
index 0d7c0aa0cb6..245847c230a 100644
Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-light-tritanopia-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-dark-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-dark-colorblind-linux.png
index c6eb6c1e8a6..8f2b0efd07c 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-dark-colorblind-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-dark-dimmed-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-dark-dimmed-linux.png
index 9217e834f53..87ea0c76c3c 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-dark-dimmed-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-dark-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-dark-high-contrast-linux.png
index 84072b30d35..b583f1b71a2 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-dark-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-dark-linux.png
index c6eb6c1e8a6..8f2b0efd07c 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-dark-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-dark-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-dark-tritanopia-linux.png
index 0b13ac89084..8f2b0efd07c 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-light-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-light-colorblind-linux.png
index 1f52c25b834..8ffe3c17d6d 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-light-colorblind-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-light-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-light-high-contrast-linux.png
index 40a400d9986..f5870d3d762 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-light-high-contrast-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-light-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-light-linux.png
index c8a379fdf5a..8ffe3c17d6d 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-light-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-light-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-light-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-light-tritanopia-linux.png
index 1f52c25b834..8ffe3c17d6d 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-light-tritanopia-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-dark-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-dark-colorblind-linux.png
index c55ba38f39f..d266292ba69 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-dark-colorblind-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-dark-dimmed-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-dark-dimmed-linux.png
index c6c1ff0a207..af52ceaccff 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-dark-dimmed-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-dark-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-dark-high-contrast-linux.png
index 6232b0ede83..37adaa4a6ec 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-dark-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-dark-linux.png
index c55ba38f39f..d266292ba69 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-dark-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-dark-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-dark-tritanopia-linux.png
index c55ba38f39f..d266292ba69 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-light-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-light-colorblind-linux.png
index a1cbe296d28..ef77c152656 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-light-colorblind-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-light-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-light-high-contrast-linux.png
index e394f4647de..c4caecf0519 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-light-high-contrast-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-light-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-light-linux.png
index a1cbe296d28..ef77c152656 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-light-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-light-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-light-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-light-tritanopia-linux.png
index a1cbe296d28..ef77c152656 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-light-tritanopia-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-dark-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-dark-colorblind-linux.png
index 8fb8ebae496..4ae11a4ca57 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-dark-colorblind-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-dark-dimmed-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-dark-dimmed-linux.png
index 63a44a87bfd..36150dc637a 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-dark-dimmed-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-dark-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-dark-high-contrast-linux.png
index 3b398eb1463..aa0998ad4fe 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-dark-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-dark-linux.png
index 0269e217232..4ae11a4ca57 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-dark-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-dark-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-dark-tritanopia-linux.png
index 0269e217232..4ae11a4ca57 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-light-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-light-colorblind-linux.png
index b295a4ab51f..efa0688b652 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-light-colorblind-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-light-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-light-high-contrast-linux.png
index 3fe2c4241f3..ab9a51b2717 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-light-high-contrast-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-light-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-light-linux.png
index b295a4ab51f..efa0688b652 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-light-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-light-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-light-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-light-tritanopia-linux.png
index a0060332e4c..efa0688b652 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-light-tritanopia-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-dark-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-dark-colorblind-linux.png
index 15b5f013211..5074563c7f0 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-dark-colorblind-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-dark-dimmed-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-dark-dimmed-linux.png
index 515e5e0ec09..93349866723 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-dark-dimmed-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-dark-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-dark-high-contrast-linux.png
index 907abe33839..2087092fffb 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-dark-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-dark-linux.png
index 15b5f013211..5074563c7f0 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-dark-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-dark-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-dark-tritanopia-linux.png
index 149d691603c..5074563c7f0 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-light-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-light-colorblind-linux.png
index fb26dd87e8d..bef766a905c 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-light-colorblind-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-light-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-light-high-contrast-linux.png
index 94b86e64e14..42296f638aa 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-light-high-contrast-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-light-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-light-linux.png
index fb26dd87e8d..bef766a905c 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-light-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-light-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-light-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-light-tritanopia-linux.png
index fb26dd87e8d..bef766a905c 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-light-tritanopia-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-dark-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-dark-colorblind-linux.png
index cc5066eb099..f77e4fb7ead 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-dark-colorblind-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-dark-dimmed-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-dark-dimmed-linux.png
index 503f12ba1a4..94ed7b4473f 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-dark-dimmed-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-dark-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-dark-high-contrast-linux.png
index 4c304e52490..711597fd4da 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-dark-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-dark-linux.png
index cc5066eb099..f77e4fb7ead 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-dark-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-dark-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-dark-tritanopia-linux.png
index cac35d7d5f7..f77e4fb7ead 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-light-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-light-colorblind-linux.png
index 305b164e04e..5f0b35f900e 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-light-colorblind-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-light-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-light-high-contrast-linux.png
index 4ee3c8f7693..64b36c1c76b 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-light-high-contrast-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-light-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-light-linux.png
index 305b164e04e..5f0b35f900e 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-light-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-light-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-light-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-light-tritanopia-linux.png
index 305b164e04e..5f0b35f900e 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-light-tritanopia-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-dark-colorblind-linux.png
index 86069364a85..5a503afb5bc 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-dark-colorblind-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-dark-dimmed-linux.png
index c4511b305a8..63b695b2b5f 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-dark-dimmed-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-dark-high-contrast-linux.png
index 5e318fadb14..c466798d675 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-dark-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-dark-linux.png
index ccaf8bf656f..5a503afb5bc 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-dark-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-dark-tritanopia-linux.png
index 86069364a85..5a503afb5bc 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-light-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-light-colorblind-linux.png
index 17aa44cadad..0c72c279200 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-light-colorblind-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-light-high-contrast-linux.png
index bdb78096593..4f8242e7d21 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-light-high-contrast-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-light-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-light-linux.png
index 497474eccae..0c72c279200 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-light-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-light-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-light-tritanopia-linux.png
index 17aa44cadad..0c72c279200 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-light-tritanopia-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-dark-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-dark-colorblind-linux.png
index c5c11261c15..7240b856ac9 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-dark-colorblind-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-dark-dimmed-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-dark-dimmed-linux.png
index 0fac3c233f7..4b8455c8867 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-dark-dimmed-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-dark-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-dark-high-contrast-linux.png
index 23d8e61aa30..c9e1b6378a0 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-dark-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-dark-linux.png
index c5c11261c15..7240b856ac9 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-dark-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-dark-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-dark-tritanopia-linux.png
index 72e8b73c3a0..7240b856ac9 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-light-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-light-colorblind-linux.png
index 81bf69fcf00..2c47d551135 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-light-colorblind-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-light-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-light-high-contrast-linux.png
index 377fd86faf0..c09b79fdd3d 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-light-high-contrast-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-light-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-light-linux.png
index 81bf69fcf00..2c47d551135 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-light-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-light-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-light-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-light-tritanopia-linux.png
index 9535993afc0..2c47d551135 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-light-tritanopia-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-dark-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-dark-colorblind-linux.png
index 647e563d91a..a2d92809dcb 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-dark-colorblind-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-dark-dimmed-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-dark-dimmed-linux.png
index 6acd2b68a7e..3bd9d1c57c5 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-dark-dimmed-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-dark-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-dark-high-contrast-linux.png
index 8c74b103552..a5d214d4cb6 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-dark-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-dark-linux.png
index d4d50373514..ece5062ee2f 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-dark-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-dark-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-dark-tritanopia-linux.png
index d4d50373514..ece5062ee2f 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-light-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-light-colorblind-linux.png
index 26983940910..3a966daebb3 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-light-colorblind-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-light-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-light-high-contrast-linux.png
index 80d8cc02066..ff8eeeff8c2 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-light-high-contrast-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-light-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-light-linux.png
index 36ef68c1217..3a966daebb3 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-light-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-light-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-light-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-light-tritanopia-linux.png
index 26983940910..3a966daebb3 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-light-tritanopia-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-dark-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-dark-colorblind-linux.png
index c1852bd5c57..2abd788c295 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-dark-colorblind-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-dark-dimmed-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-dark-dimmed-linux.png
index fe74a56f5c2..dbf022ced1c 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-dark-dimmed-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-dark-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-dark-high-contrast-linux.png
index c472d4ab6c2..00d2607c126 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-dark-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-dark-linux.png
index c1852bd5c57..2abd788c295 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-dark-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-dark-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-dark-tritanopia-linux.png
index c1852bd5c57..2abd788c295 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-light-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-light-colorblind-linux.png
index f30fdd01714..011f5c085bc 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-light-colorblind-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-light-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-light-high-contrast-linux.png
index 6814297c78b..42c1c944b38 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-light-high-contrast-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-light-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-light-linux.png
index f30fdd01714..011f5c085bc 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-light-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-light-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-light-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-light-tritanopia-linux.png
index f30fdd01714..011f5c085bc 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-light-tritanopia-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-dark-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-dark-colorblind-linux.png
index 1ce82ee02d3..3edac49fc7e 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-dark-colorblind-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-dark-dimmed-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-dark-dimmed-linux.png
index 204fcf36044..d6b444e0419 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-dark-dimmed-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-dark-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-dark-high-contrast-linux.png
index a1547dc06e1..120e22cd32f 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-dark-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-dark-linux.png
index f79b3112e7a..3edac49fc7e 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-dark-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-dark-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-dark-tritanopia-linux.png
index 1ce82ee02d3..3edac49fc7e 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-light-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-light-colorblind-linux.png
index 5fa0ea0a656..b3c02834ebb 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-light-colorblind-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-light-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-light-high-contrast-linux.png
index 7b772c238c2..9f080c5ce09 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-light-high-contrast-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-light-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-light-linux.png
index eaee18fbe43..b3c02834ebb 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-light-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-light-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-light-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-light-tritanopia-linux.png
index 5fa0ea0a656..b3c02834ebb 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-light-tritanopia-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-colorblind-linux.png
index c079125bcc5..62ddfe43656 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-colorblind-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-dimmed-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-dimmed-linux.png
index 0f4b65a42c2..ff6a0219cb6 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-dimmed-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-high-contrast-linux.png
index 2e24aed696c..d67fbd18ebf 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-linux.png
index 17af59ed002..62ddfe43656 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-tritanopia-linux.png
index c079125bcc5..62ddfe43656 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-colorblind-linux.png
index a4a900f890d..56a90ace378 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-colorblind-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-high-contrast-linux.png
index 15cfd5df188..b45a0356c54 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-high-contrast-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-linux.png
index a4a900f890d..56a90ace378 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-tritanopia-linux.png
index a4a900f890d..56a90ace378 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-tritanopia-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-colorblind-linux.png
index e404883823b..fb14840e742 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-colorblind-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-dimmed-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-dimmed-linux.png
index 828ae3a7005..5be69e7cf10 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-dimmed-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-high-contrast-linux.png
index 10b4c09ba58..e836067a5ea 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-linux.png
index 4e39a076cb7..fb14840e742 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-tritanopia-linux.png
index e404883823b..fb14840e742 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-colorblind-linux.png
index 759e9d0fb1b..3f8227b0613 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-colorblind-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-high-contrast-linux.png
index 47ddc4bf338..993c92adbf9 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-high-contrast-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-linux.png
index 759e9d0fb1b..3f8227b0613 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-linux.png differ
diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-tritanopia-linux.png
index 759e9d0fb1b..3f8227b0613 100644
Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-tritanopia-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Overrides-dark-colorblind-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Overrides-dark-colorblind-linux.png
new file mode 100644
index 00000000000..3731c61b332
Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Overrides-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Overrides-dark-dimmed-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Overrides-dark-dimmed-linux.png
new file mode 100644
index 00000000000..251f7e14587
Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Overrides-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Overrides-dark-high-contrast-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Overrides-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..9d830ba5a2f
Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Overrides-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Overrides-dark-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Overrides-dark-linux.png
new file mode 100644
index 00000000000..3731c61b332
Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Overrides-dark-linux.png differ
diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Overrides-dark-tritanopia-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Overrides-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..3731c61b332
Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Overrides-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Overrides-light-colorblind-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Overrides-light-colorblind-linux.png
new file mode 100644
index 00000000000..3c5e07833c7
Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Overrides-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Overrides-light-high-contrast-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Overrides-light-high-contrast-linux.png
new file mode 100644
index 00000000000..8b6679befe6
Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Overrides-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Overrides-light-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Overrides-light-linux.png
new file mode 100644
index 00000000000..3c5e07833c7
Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Overrides-light-linux.png differ
diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Overrides-light-tritanopia-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Overrides-light-tritanopia-linux.png
new file mode 100644
index 00000000000..3c5e07833c7
Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Overrides-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Dev-With-Sx-And-Css-dark-colorblind-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Dev-With-Sx-And-Css-dark-colorblind-linux.png
index 1f6feb1b5fc..262ce540777 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Dev-With-Sx-And-Css-dark-colorblind-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Dev-With-Sx-And-Css-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Dev-With-Sx-And-Css-dark-dimmed-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Dev-With-Sx-And-Css-dark-dimmed-linux.png
index cd9526852ba..41691965e86 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Dev-With-Sx-And-Css-dark-dimmed-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Dev-With-Sx-And-Css-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Dev-With-Sx-And-Css-dark-high-contrast-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Dev-With-Sx-And-Css-dark-high-contrast-linux.png
index a0e0cd06b19..3cdfd707e7f 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Dev-With-Sx-And-Css-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Dev-With-Sx-And-Css-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Dev-With-Sx-And-Css-dark-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Dev-With-Sx-And-Css-dark-linux.png
index 48f367d4c79..5fea40b4fd5 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Dev-With-Sx-And-Css-dark-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Dev-With-Sx-And-Css-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Dev-With-Sx-And-Css-dark-tritanopia-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Dev-With-Sx-And-Css-dark-tritanopia-linux.png
index 1519e3cbafa..bd9d578c2e0 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Dev-With-Sx-And-Css-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Dev-With-Sx-And-Css-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Dev-With-Sx-And-Css-light-colorblind-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Dev-With-Sx-And-Css-light-colorblind-linux.png
index 6cecb7a1cf7..2272a1571c2 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Dev-With-Sx-And-Css-light-colorblind-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Dev-With-Sx-And-Css-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Dev-With-Sx-And-Css-light-high-contrast-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Dev-With-Sx-And-Css-light-high-contrast-linux.png
index 0c80dc00421..d14e1cf7e34 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Dev-With-Sx-And-Css-light-high-contrast-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Dev-With-Sx-And-Css-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Dev-With-Sx-And-Css-light-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Dev-With-Sx-And-Css-light-linux.png
index def87e27885..cf3f3a78121 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Dev-With-Sx-And-Css-light-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Dev-With-Sx-And-Css-light-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Dev-With-Sx-And-Css-light-tritanopia-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Dev-With-Sx-And-Css-light-tritanopia-linux.png
index ba3058882ff..bc385505939 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Dev-With-Sx-And-Css-light-tritanopia-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Dev-With-Sx-And-Css-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-colorblind-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-colorblind-linux.png
index 15c7c89e0fc..d0b8895bc4e 100644
Binary files a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-colorblind-linux.png and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-dimmed-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-dimmed-linux.png
index 38bb73c0bba..2418e2d7aeb 100644
Binary files a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-dimmed-linux.png and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-high-contrast-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-high-contrast-linux.png
index 7390ebf1e9c..4bdb6143f3e 100644
Binary files a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-linux.png
index bc2921e4ba2..2d52f44b407 100644
Binary files a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-linux.png and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-tritanopia-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-tritanopia-linux.png
index 15c7c89e0fc..d0b8895bc4e 100644
Binary files a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-light-colorblind-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-light-colorblind-linux.png
index 83c6dd9acf8..097370785f2 100644
Binary files a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-light-colorblind-linux.png and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-light-high-contrast-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-light-high-contrast-linux.png
index 2a7d1ad9849..dc876d486e2 100644
Binary files a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-light-high-contrast-linux.png and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-light-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-light-linux.png
index 61e5794f0c7..8acf800b33b 100644
Binary files a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-light-linux.png and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-light-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-light-tritanopia-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-light-tritanopia-linux.png
index afe9e626188..097370785f2 100644
Binary files a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-light-tritanopia-linux.png and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Nested-Overlays-dark-high-contrast-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Nested-Overlays-dark-high-contrast-linux.png
index 6fc363ea5cc..ae8fa337c2b 100644
Binary files a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Nested-Overlays-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Nested-Overlays-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Nested-Overlays-light-high-contrast-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Nested-Overlays-light-high-contrast-linux.png
index 5de6ccd568d..700fcabb70a 100644
Binary files a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Nested-Overlays-light-high-contrast-linux.png and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Nested-Overlays-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-dark-colorblind-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-dark-colorblind-linux.png
index b2443219b19..a772be4b1d8 100644
Binary files a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-dark-colorblind-linux.png and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-dark-dimmed-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-dark-dimmed-linux.png
index d98344a3fb9..6006ed185be 100644
Binary files a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-dark-dimmed-linux.png and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-dark-high-contrast-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-dark-high-contrast-linux.png
index 93529901ed3..5b32ccbfb81 100644
Binary files a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-dark-high-contrast-linux.png and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-dark-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-dark-linux.png
index b2443219b19..a772be4b1d8 100644
Binary files a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-dark-linux.png and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-dark-linux.png differ
diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-dark-tritanopia-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-dark-tritanopia-linux.png
index b2443219b19..a772be4b1d8 100644
Binary files a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-dark-tritanopia-linux.png and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-light-colorblind-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-light-colorblind-linux.png
index 0677c176682..6608f508cae 100644
Binary files a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-light-colorblind-linux.png and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-light-high-contrast-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-light-high-contrast-linux.png
index 3fe2a15d1c7..07301a4f148 100644
Binary files a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-light-high-contrast-linux.png and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-light-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-light-linux.png
index 0677c176682..6608f508cae 100644
Binary files a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-light-linux.png and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-light-linux.png differ
diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-light-tritanopia-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-light-tritanopia-linux.png
index 0677c176682..6608f508cae 100644
Binary files a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-light-tritanopia-linux.png and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Css-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-dark-colorblind-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-dark-colorblind-linux.png
index 1ef651ca958..a772be4b1d8 100644
Binary files a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-dark-colorblind-linux.png and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-dark-dimmed-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-dark-dimmed-linux.png
index 0b26322d851..6006ed185be 100644
Binary files a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-dark-dimmed-linux.png and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-dark-high-contrast-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-dark-high-contrast-linux.png
index 2f1b39e722e..5b32ccbfb81 100644
Binary files a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-dark-high-contrast-linux.png and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-dark-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-dark-linux.png
index 745862b9c3d..a772be4b1d8 100644
Binary files a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-dark-linux.png and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-dark-linux.png differ
diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-dark-tritanopia-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-dark-tritanopia-linux.png
index 1ef651ca958..a772be4b1d8 100644
Binary files a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-dark-tritanopia-linux.png and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-light-colorblind-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-light-colorblind-linux.png
index 553afb8ba71..6608f508cae 100644
Binary files a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-light-colorblind-linux.png and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-light-high-contrast-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-light-high-contrast-linux.png
index 7f5d69467c3..07301a4f148 100644
Binary files a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-light-high-contrast-linux.png and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-light-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-light-linux.png
index 85e66885659..6608f508cae 100644
Binary files a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-light-linux.png and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-light-linux.png differ
diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-light-tritanopia-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-light-tritanopia-linux.png
index 553afb8ba71..6608f508cae 100644
Binary files a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-light-tritanopia-linux.png and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Dev-With-Sx-And-Css-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-dark-colorblind-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-dark-colorblind-linux.png
index 3f1571f6fbb..7429cfb77c8 100644
Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-dark-colorblind-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-dark-colorblind-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-dark-colorblind-modern-action-list--true-linux.png
index 3f1571f6fbb..7429cfb77c8 100644
Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-dark-colorblind-modern-action-list--true-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-dark-colorblind-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-dark-dimmed-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-dark-dimmed-linux.png
index 56469c5cfbe..24fb23f56b6 100644
Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-dark-dimmed-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-dark-dimmed-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-dark-dimmed-modern-action-list--true-linux.png
index 56469c5cfbe..24fb23f56b6 100644
Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-dark-dimmed-modern-action-list--true-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-dark-dimmed-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-dark-high-contrast-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-dark-high-contrast-linux.png
index ba0914a4187..422526ad09e 100644
Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-dark-high-contrast-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-dark-high-contrast-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-dark-high-contrast-modern-action-list--true-linux.png
index 1a4dd5c42d6..422526ad09e 100644
Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-dark-high-contrast-modern-action-list--true-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-dark-high-contrast-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-dark-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-dark-linux.png
index 3f1571f6fbb..7429cfb77c8 100644
Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-dark-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-dark-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-dark-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-dark-modern-action-list--true-linux.png
index 3f1571f6fbb..7429cfb77c8 100644
Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-dark-modern-action-list--true-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-dark-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-dark-tritanopia-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-dark-tritanopia-linux.png
index 3f1571f6fbb..7429cfb77c8 100644
Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-dark-tritanopia-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-dark-tritanopia-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-dark-tritanopia-modern-action-list--true-linux.png
index 3f1571f6fbb..7429cfb77c8 100644
Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-dark-tritanopia-modern-action-list--true-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-dark-tritanopia-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-light-colorblind-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-light-colorblind-linux.png
index b3a26c90827..b31c6db58bb 100644
Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-light-colorblind-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-light-colorblind-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-light-colorblind-modern-action-list--true-linux.png
index b3a26c90827..ebb535460cd 100644
Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-light-colorblind-modern-action-list--true-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-light-colorblind-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-light-high-contrast-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-light-high-contrast-linux.png
index d1e33ba752f..27a70b12571 100644
Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-light-high-contrast-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-light-high-contrast-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-light-high-contrast-modern-action-list--true-linux.png
index d1e33ba752f..27a70b12571 100644
Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-light-high-contrast-modern-action-list--true-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-light-high-contrast-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-light-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-light-linux.png
index 161d5f304a1..b31c6db58bb 100644
Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-light-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-light-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-light-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-light-modern-action-list--true-linux.png
index b3a26c90827..b31c6db58bb 100644
Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-light-modern-action-list--true-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-light-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-light-tritanopia-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-light-tritanopia-linux.png
index b3a26c90827..b31c6db58bb 100644
Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-light-tritanopia-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-light-tritanopia-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-light-tritanopia-modern-action-list--true-linux.png
index b3a26c90827..b31c6db58bb 100644
Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-light-tritanopia-modern-action-list--true-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-light-tritanopia-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-dark-colorblind-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-dark-colorblind-linux.png
index f8d0964c5d7..081099aacdb 100644
Binary files a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-dark-colorblind-linux.png and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-dark-dimmed-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-dark-dimmed-linux.png
index 37805b608f0..5c4c510e792 100644
Binary files a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-dark-dimmed-linux.png and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-dark-high-contrast-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-dark-high-contrast-linux.png
index 097f4bbc611..6f5df61ea46 100644
Binary files a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-dark-high-contrast-linux.png and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-dark-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-dark-linux.png
index f8d0964c5d7..081099aacdb 100644
Binary files a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-dark-linux.png and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-dark-linux.png differ
diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-dark-tritanopia-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-dark-tritanopia-linux.png
index f8d0964c5d7..081099aacdb 100644
Binary files a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-dark-tritanopia-linux.png and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-light-colorblind-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-light-colorblind-linux.png
index f42efd1779a..14413c4b12e 100644
Binary files a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-light-colorblind-linux.png and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-light-high-contrast-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-light-high-contrast-linux.png
index f132bf21c32..2e8b221001e 100644
Binary files a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-light-high-contrast-linux.png and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-light-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-light-linux.png
index f42efd1779a..14413c4b12e 100644
Binary files a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-light-linux.png and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-light-linux.png differ
diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-light-tritanopia-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-light-tritanopia-linux.png
index f42efd1779a..14413c4b12e 100644
Binary files a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-light-tritanopia-linux.png and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-dark-colorblind-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-dark-colorblind-linux.png
index df3df41d174..081099aacdb 100644
Binary files a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-dark-colorblind-linux.png and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-dark-dimmed-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-dark-dimmed-linux.png
index 7c5497e2b96..5c4c510e792 100644
Binary files a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-dark-dimmed-linux.png and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-dark-high-contrast-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-dark-high-contrast-linux.png
index 36a573d7a12..6f5df61ea46 100644
Binary files a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-dark-high-contrast-linux.png and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-dark-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-dark-linux.png
index df3df41d174..081099aacdb 100644
Binary files a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-dark-linux.png and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-dark-linux.png differ
diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-dark-tritanopia-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-dark-tritanopia-linux.png
index df3df41d174..081099aacdb 100644
Binary files a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-dark-tritanopia-linux.png and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-light-colorblind-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-light-colorblind-linux.png
index 785dcf53bb9..14413c4b12e 100644
Binary files a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-light-colorblind-linux.png and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-light-high-contrast-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-light-high-contrast-linux.png
index adef3e640fb..2e8b221001e 100644
Binary files a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-light-high-contrast-linux.png and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-light-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-light-linux.png
index 785dcf53bb9..14413c4b12e 100644
Binary files a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-light-linux.png and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-light-linux.png differ
diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-light-tritanopia-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-light-tritanopia-linux.png
index 785dcf53bb9..14413c4b12e 100644
Binary files a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-light-tritanopia-linux.png and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-light-tritanopia-linux.png differ
diff --git a/e2e/components/Autocomplete.test.ts b/e2e/components/Autocomplete.test.ts
index 7631b2e7606..cec09abca05 100644
--- a/e2e/components/Autocomplete.test.ts
+++ b/e2e/components/Autocomplete.test.ts
@@ -11,13 +11,6 @@ const stories: Array<{title: string; id: string; setup: (page: Page) => void}> =
       await page.keyboard.press('D')
     },
   },
-  {
-    title: 'Playground',
-    id: 'components-autocomplete--playground',
-    setup: async page => {
-      await page.keyboard.press('Backspace')
-    },
-  },
   {
     title: 'Add New Item',
     id: 'components-autocomplete-features--add-new-item',
@@ -64,6 +57,7 @@ const stories: Array<{title: string; id: string; setup: (page: Page) => void}> =
     setup: async page => {
       await page.keyboard.press('Tab')
       await page.keyboard.press('Enter')
+      await expect(page.getByRole('dialog')).toBeVisible()
       await page.keyboard.press('Tab')
       await page.keyboard.press('D')
     },
@@ -124,7 +118,7 @@ test.describe('Autocomplete', () => {
               },
             })
 
-            await story.setup(page)
+            story.setup(page)
 
             await expect(page).toHaveScreenshot(`Autocomplete.${story.title}.${theme}.png`, {animations: 'disabled'})
           })
@@ -137,7 +131,7 @@ test.describe('Autocomplete', () => {
               },
             })
 
-            await story.setup(page)
+            story.setup(page)
 
             await expect(page).toHaveNoViolations({
               rules: {
@@ -149,6 +143,7 @@ test.describe('Autocomplete', () => {
                     theme !== 'light_colorblind' &&
                     theme !== 'light_tritanopia',
                 },
+                'aria-valid-attr-value': {enabled: false},
               },
             })
           })
diff --git a/e2e/components/ButtonGroup.test.ts b/e2e/components/ButtonGroup.test.ts
index 1a9eab686b9..243f070df7f 100644
--- a/e2e/components/ButtonGroup.test.ts
+++ b/e2e/components/ButtonGroup.test.ts
@@ -114,4 +114,32 @@ test.describe('ButtonGroup', () => {
       })
     }
   })
+
+  test.describe('Overrides', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-buttongroup-devonly--link-button-with-icon-buttons',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`ButtonGroup.Overrides.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-buttongroup-devonly--link-button-with-icon-buttons',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
 })
diff --git a/packages/react/.storybook/storybook.css b/packages/react/.storybook/storybook.css
index 8adbfed637b..fd26ca2d071 100644
--- a/packages/react/.storybook/storybook.css
+++ b/packages/react/.storybook/storybook.css
@@ -56,22 +56,24 @@
   background-color: var(--bgColor-muted);
 }
 
+/* !important simulates CSS layers in dotcom that prioritize custom classes over Primer React styles */
+
 .testCustomClassnameColor {
-  color: var(--fgColor-sponsors);
+  color: var(--fgColor-sponsors) !important;
 }
 
 .testCustomClassnameBgColor {
-  background-color: var(--bgColor-sponsors-emphasis);
+  background-color: var(--bgColor-sponsors-emphasis) !important;
 }
 
 .testCustomClassnameBorderColor {
-  border-color: var(--borderColor-sponsors-emphasis);
+  border-color: var(--borderColor-sponsors-emphasis) !important;
 }
 
 .testCustomClassnameBorder {
-  border: var(--borderWidth-thin) solid var(--borderColor-sponsors-emphasis);
+  border: var(--borderWidth-thin) solid var(--borderColor-sponsors-emphasis) !important;
 }
 
 .testCustomClassnameMono {
-  font-family: var(--fontStack-monospace);
+  font-family: var(--fontStack-monospace) !important;
 }
diff --git a/packages/react/src/Autocomplete/Autocomplete.dev.stories.tsx b/packages/react/src/Autocomplete/Autocomplete.dev.stories.tsx
index 2ae592ba954..ea7cbf5c59b 100644
--- a/packages/react/src/Autocomplete/Autocomplete.dev.stories.tsx
+++ b/packages/react/src/Autocomplete/Autocomplete.dev.stories.tsx
@@ -18,12 +18,12 @@ export const SxProp = () => {
             sx={{
               width: '100%',
               marginRight: '10px',
+              borderColor: 'deeppink',
             }}
             size="medium"
-            style={{border: '1px solid var(--borderColor-closed-emphasis)'}}
           />
           <Autocomplete.Overlay
-            className="test-class-name"
+            className="testCustomClassnameBorder"
             visibility="visible"
             sx={{
               maxHeight: 'min(50vh, 280px)',
@@ -32,8 +32,8 @@ export const SxProp = () => {
                 flexDirection: 'column',
                 whiteSpace: 'pre-wrap',
               },
+              outline: '1px solid deeppink',
             }}
-            style={{backgroundColor: 'var(--bgColor-attention-emphasis)'}}
           >
             <Autocomplete.Menu items={[]} selectedItemIds={[]} aria-labelledby="autocompleteLabel" />
           </Autocomplete.Overlay>
diff --git a/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx b/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx
index 5d3401b9e60..37a0393044e 100644
--- a/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx
+++ b/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx
@@ -114,7 +114,7 @@ const autocompleteStoryMeta: Meta = {
         <ThemeProvider>
           <BaseStyles>
             <Box onKeyDownCapture={reportKey}>
-              <Box position="absolute" right={5} top={2}>
+              <Box as="p" position="absolute" right={5} top={2} id="key-press-label">
                 Last key pressed: {lastKey}
               </Box>
               <Box paddingTop={5}>
@@ -567,6 +567,7 @@ export const InOverlayWithCustomScrollContainerRef = () => {
                   },
                 }}
                 block
+                aria-label="Search"
               />
             </Box>
             <Box
@@ -606,7 +607,12 @@ export const InADialog = () => {
   return (
     <>
       <Button onClick={() => setIsDialogOpen(true)}>Show dialog</Button>
-      <Dialog id="dialog-with-autocomplete" isOpen={isDialogOpen} onDismiss={() => setIsDialogOpen(false)}>
+      <Dialog
+        aria-label="Dialog with autocomplete"
+        id="dialog-with-autocomplete"
+        isOpen={isDialogOpen}
+        onDismiss={() => setIsDialogOpen(false)}
+      >
         <div ref={outerContainerRef}>
           <Box as="form" sx={{p: 3}}>
             {mounted ? (
diff --git a/packages/react/src/Autocomplete/Autocomplete.stories.tsx b/packages/react/src/Autocomplete/Autocomplete.stories.tsx
index b47abb90f09..d13a8d7a19e 100644
--- a/packages/react/src/Autocomplete/Autocomplete.stories.tsx
+++ b/packages/react/src/Autocomplete/Autocomplete.stories.tsx
@@ -116,7 +116,7 @@ const autocompleteStoryMeta: Meta = {
         <ThemeProvider>
           <BaseStyles>
             <Box onKeyDownCapture={reportKey}>
-              <Box position="absolute" right={5} top={2}>
+              <Box as="p" position="absolute" right={5} top={2} id="key-press-label">
                 Last key pressed: {lastKey}
               </Box>
               <Box paddingTop={5}>
diff --git a/packages/react/src/BaseStyles.dev.stories.tsx b/packages/react/src/BaseStyles.dev.stories.tsx
index d313f089009..c778d9f0259 100644
--- a/packages/react/src/BaseStyles.dev.stories.tsx
+++ b/packages/react/src/BaseStyles.dev.stories.tsx
@@ -1,6 +1,5 @@
 import {BaseStyles} from '.'
 import type {Meta} from '@storybook/react'
-import React from 'react'
 import type {ComponentProps} from './utils/types'
 
 export default {
@@ -8,4 +7,4 @@ export default {
   component: BaseStyles,
 } as Meta<ComponentProps<typeof BaseStyles>>
 
-export const Default = () => <BaseStyles>Hello</BaseStyles>
+export const Default = () => 'Hello'
diff --git a/packages/react/src/BaseStyles.tsx b/packages/react/src/BaseStyles.tsx
index 2a5ffb24347..f44cc58564c 100644
--- a/packages/react/src/BaseStyles.tsx
+++ b/packages/react/src/BaseStyles.tsx
@@ -1,12 +1,14 @@
-import React from 'react'
+import React, {type CSSProperties, type PropsWithChildren} from 'react'
 import {clsx} from 'clsx'
 import styled, {createGlobalStyle} from 'styled-components'
-import type {ComponentProps} from './utils/types'
 import type {SystemCommonProps, SystemTypographyProps} from './constants'
 import {COMMON, TYPOGRAPHY} from './constants'
 import {useTheme} from './ThemeProvider'
 import {useFeatureFlag} from './FeatureFlags'
-import {toggleStyledComponent} from './internal/utils/toggleStyledComponent'
+import Box from './Box'
+import type {SxProp} from './sx'
+import {includesSystemProps, getTypographyAndCommonProps} from './utils/includeSystemProps'
+
 import classes from './BaseStyles.module.css'
 
 // load polyfill for :focus-visible
@@ -35,45 +37,108 @@ const GlobalStyle = createGlobalStyle<{colorScheme?: 'light' | 'dark'}>`
   }
 `
 
-const Base = toggleStyledComponent(
-  CSS_MODULES_FEATURE_FLAG,
-  'div',
-  styled.div<SystemTypographyProps & SystemCommonProps>`
-    ${TYPOGRAPHY};
-    ${COMMON};
-  `,
-)
+const StyledDiv = styled.div<SystemTypographyProps & SystemCommonProps>`
+  ${TYPOGRAPHY};
+  ${COMMON};
+`
 
-export type BaseStylesProps = ComponentProps<typeof Base>
+export type BaseStylesProps = PropsWithChildren & {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  as?: React.ComponentType<any> | keyof JSX.IntrinsicElements
+  className?: string
+  style?: CSSProperties
+  color?: string // Fixes `color` ts-error
+} & SystemTypographyProps &
+  SystemCommonProps &
+  SxProp
 
 function BaseStyles(props: BaseStylesProps) {
-  const {children, color = 'fg.default', fontFamily = 'normal', lineHeight = 'default', className, ...rest} = props
+  const {
+    children,
+    color = 'var(--fgColor-default)',
+    fontFamily = 'normal',
+    lineHeight = 'default',
+    className,
+    as: Component = 'div',
+    ...rest
+  } = props
 
   const {colorScheme, dayScheme, nightScheme} = useTheme()
   const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
 
-  const stylingProps = enabled ? {className: clsx(classes.BaseStyles, className)} : {className}
+  if (enabled) {
+    const newClassName = clsx(classes.BaseStyles, className)
+
+    // If props includes TYPOGRAPHY or COMMON props, pass them to the Box component
+    if (includesSystemProps(props)) {
+      const systemProps = getTypographyAndCommonProps(props)
+      return (
+        // @ts-ignore shh
+        <Box
+          as={Component}
+          className={newClassName}
+          color={color}
+          fontFamily={fontFamily}
+          lineHeight={lineHeight}
+          data-portal-root
+          /**
+           * We need to map valid primer/react color modes onto valid color modes for primer/primitives
+           * valid color modes for primer/primitives: auto | light | dark
+           * valid color modes for primer/primer: auto | day | night | light | dark
+           */
+          data-color-mode={colorScheme?.includes('dark') ? 'dark' : 'light'}
+          data-light-theme={dayScheme}
+          data-dark-theme={nightScheme}
+          style={systemProps}
+          {...rest}
+        >
+          {children}
+        </Box>
+      )
+    }
+
+    return (
+      <Component
+        className={newClassName}
+        color={color}
+        fontFamily={fontFamily}
+        lineHeight={lineHeight}
+        data-portal-root
+        /**
+         * We need to map valid primer/react color modes onto valid color modes for primer/primitives
+         * valid color modes for primer/primitives: auto | light | dark
+         * valid color modes for primer/primer: auto | day | night | light | dark
+         */
+        data-color-mode={colorScheme?.includes('dark') ? 'dark' : 'light'}
+        data-light-theme={dayScheme}
+        data-dark-theme={nightScheme}
+        {...rest}
+      >
+        {children}
+      </Component>
+    )
+  }
 
-  /**
-   * We need to map valid primer/react color modes onto valid color modes for primer/primitives
-   * valid color modes for primer/primitives: auto | light | dark
-   * valid color modes for primer/primer: auto | day | night | light | dark
-   */
   return (
-    <Base
-      {...rest}
-      {...stylingProps}
+    <StyledDiv
+      className={className}
       color={color}
       fontFamily={fontFamily}
       lineHeight={lineHeight}
       data-portal-root
+      /**
+       * We need to map valid primer/react color modes onto valid color modes for primer/primitives
+       * valid color modes for primer/primitives: auto | light | dark
+       * valid color modes for primer/primer: auto | day | night | light | dark
+       */
       data-color-mode={colorScheme?.includes('dark') ? 'dark' : 'light'}
       data-light-theme={dayScheme}
       data-dark-theme={nightScheme}
+      {...rest}
     >
-      {!enabled && <GlobalStyle colorScheme={colorScheme?.includes('dark') ? 'dark' : 'light'} />}
+      <GlobalStyle colorScheme={colorScheme?.includes('dark') ? 'dark' : 'light'} />
       {children}
-    </Base>
+    </StyledDiv>
   )
 }
 
diff --git a/packages/react/src/ButtonGroup/ButtonGroup.dev.stories.tsx b/packages/react/src/ButtonGroup/ButtonGroup.dev.stories.tsx
new file mode 100644
index 00000000000..c0d2f2645b7
--- /dev/null
+++ b/packages/react/src/ButtonGroup/ButtonGroup.dev.stories.tsx
@@ -0,0 +1,65 @@
+import React from 'react'
+import type {Meta} from '@storybook/react'
+import ButtonGroup from './ButtonGroup'
+import {Button, IconButton, LinkButton} from '../Button'
+import {CopilotIcon} from '@primer/octicons-react'
+import {Box, Tooltip, ThemeProvider, BaseStyles} from '..'
+
+const meta: Meta<typeof ButtonGroup> = {
+  title: 'Components/ButtonGroup/DevOnly',
+  component: ButtonGroup,
+  decorators: [
+    Story => {
+      // Add some padding to the wrapper box to make sure tooltip v1 is always in the viewport
+      return (
+        <ThemeProvider>
+          <BaseStyles>
+            <Box padding={5}>{Story()}</Box>
+          </BaseStyles>
+        </ThemeProvider>
+      )
+    },
+  ],
+}
+
+export default meta
+
+export const LinkAndButtonWithTooltip2 = () => (
+  <ButtonGroup sx={{pl: 2}}>
+    <Tooltip text="Additional info about the link">
+      <Button as="a" href="https://primer.style">
+        Link
+      </Button>
+    </Tooltip>
+    <IconButton icon={CopilotIcon} aria-label="Open GitHub Copilot chat" />
+  </ButtonGroup>
+)
+
+export const ButtonAndLinkWithTooltip2 = () => (
+  <ButtonGroup sx={{pl: 2}}>
+    <IconButton icon={CopilotIcon} aria-label="Open GitHub Copilot chat" />
+    <Tooltip text="Additional info about the link">
+      <Button as="a" href="https://primer.style">
+        Link
+      </Button>
+    </Tooltip>
+  </ButtonGroup>
+)
+
+export const ButtonGroupSingleButton = () => (
+  <ButtonGroup>
+    <IconButton icon={CopilotIcon} aria-label="Open GitHub Copilot chat" />
+    <div></div>
+  </ButtonGroup>
+)
+
+export const LinkButtonWithIconButtons = () => (
+  <ButtonGroup>
+    <LinkButton size="small" sx={{color: 'deeppink'}} href="https://primer.style">
+      Small link
+    </LinkButton>
+    <Button className="testCustomClassnameColor">Pink link</Button>
+    <IconButton icon={CopilotIcon} aria-label="Open GitHub Copilot chat" />
+    <IconButton icon={CopilotIcon} aria-label="Open GitHub Copilot chat" />
+  </ButtonGroup>
+)
diff --git a/packages/react/src/ButtonGroup/ButtonGroup.features.stories.tsx b/packages/react/src/ButtonGroup/ButtonGroup.features.stories.tsx
index 211e09ad17e..da2b99ff6e6 100644
--- a/packages/react/src/ButtonGroup/ButtonGroup.features.stories.tsx
+++ b/packages/react/src/ButtonGroup/ButtonGroup.features.stories.tsx
@@ -1,10 +1,11 @@
-import React, {useState} from 'react'
+import React from 'react'
 import type {Meta} from '@storybook/react'
 import ButtonGroup from './ButtonGroup'
 import {IconButton, Button} from '../Button'
 import {PlusIcon, DashIcon, TriangleDownIcon} from '@primer/octicons-react'
 import {ActionMenu} from '../ActionMenu'
 import {ActionList} from '../ActionList'
+import {Tooltip} from '../next'
 
 export default {
   title: 'Components/ButtonGroup/Features',
@@ -14,26 +15,84 @@ export default {
 export const IconButtons = () => (
   <ButtonGroup>
     {/* We can remove these unsafe props after we resolve https://github.com/primer/react/issues/4129 */}
-    {/* eslint-disable-next-line primer-react/a11y-remove-disable-tooltip */}
-    <IconButton unsafeDisableTooltip={true} icon={PlusIcon} aria-label="Add" />
-    {/* eslint-disable-next-line primer-react/a11y-remove-disable-tooltip */}
-    <IconButton unsafeDisableTooltip={true} icon={DashIcon} aria-label="Subtract" />
+    <IconButton icon={PlusIcon} aria-label="Add" />
+    <IconButton icon={DashIcon} aria-label="Subtract" />
   </ButtonGroup>
 )
 
 export const LoadingButtons = () => {
-  const [isLoading, setIsLoading] = useState(false)
-
-  const handleClick = () => {
-    setIsLoading(true)
-  }
+  const handleClick = () => {}
   return (
     <ButtonGroup>
-      <Button loading={isLoading} onClick={handleClick}>
+      <Button loading={true} onClick={handleClick}>
         Button 1
       </Button>
       <Button onClick={handleClick}>Button 2</Button>
-      <Button onClick={handleClick}>Button 3</Button>
+      <Tooltip text="Additional info about the button">
+        <Button onClick={handleClick}>Button 3</Button>
+      </Tooltip>
+    </ButtonGroup>
+  )
+}
+
+export const IconButtonsWithTooltip = () => (
+  <ButtonGroup>
+    <IconButton icon={PlusIcon} aria-label="Add" />
+    <IconButton icon={DashIcon} aria-label="Subtract" />
+  </ButtonGroup>
+)
+export const ButtonAndLink = () => (
+  <ButtonGroup>
+    <Button>Button</Button>
+    <Button as="a" href="https://primer.style">
+      Link
+    </Button>
+  </ButtonGroup>
+)
+
+export const LinksWithTooltip = () => (
+  <ButtonGroup>
+    <Tooltip text="Additonal text for link 1" direction="s">
+      <Button as="a" href="https://primer.style">
+        Sample Link 1
+      </Button>
+    </Tooltip>
+    <Tooltip text="Additonal text for link 2" direction="s">
+      <Button as="a" href="https://primer.style">
+        Sample Link 2
+      </Button>
+    </Tooltip>
+  </ButtonGroup>
+)
+
+export const InactiveButtonsGroup = () => {
+  const primaryButton = (
+    <Button inactive={true} aria-disabled={true} onClick={() => {}}>
+      Primary Button
+    </Button>
+  )
+
+  const secondaryButton = (
+    <IconButton aria-label="Secondary Button Aria Label" aria-disabled={true} inactive={true} icon={DashIcon} />
+  )
+
+  return (
+    <ButtonGroup>
+      <Tooltip text="This button is inactive" direction="ne">
+        {primaryButton}
+      </Tooltip>
+
+      <ActionMenu open={false} onOpenChange={() => {}}>
+        <ActionMenu.Anchor>
+          <Tooltip text="this button is inactive" direction="ne" type="label">
+            {secondaryButton}
+          </Tooltip>
+        </ActionMenu.Anchor>
+        <ActionMenu.Overlay align="end">
+          <ActionList.Item>Item 1</ActionList.Item>
+          <ActionList.Item>Item 2</ActionList.Item>
+        </ActionMenu.Overlay>
+      </ActionMenu>
     </ButtonGroup>
   )
 }
diff --git a/packages/react/src/ButtonGroup/ButtonGroup.module.css b/packages/react/src/ButtonGroup/ButtonGroup.module.css
index 56e5b808a2a..7c289b69544 100644
--- a/packages/react/src/ButtonGroup/ButtonGroup.module.css
+++ b/packages/react/src/ButtonGroup/ButtonGroup.module.css
@@ -7,16 +7,27 @@
     /* stylelint-disable-next-line primer/spacing */
     margin-inline-end: -1px;
     position: relative;
-    border-radius: 0;
+
+    /* reset border-radius */
+    button,
+    a {
+      border-radius: 0;
+    }
 
     &:first-child {
-      border-top-left-radius: var(--borderRadius-medium);
-      border-bottom-left-radius: var(--borderRadius-medium);
+      button,
+      a {
+        border-top-left-radius: var(--borderRadius-medium);
+        border-bottom-left-radius: var(--borderRadius-medium);
+      }
     }
 
     &:last-child {
-      border-top-right-radius: var(--borderRadius-medium);
-      border-bottom-right-radius: var(--borderRadius-medium);
+      button,
+      a {
+        border-top-right-radius: var(--borderRadius-medium);
+        border-bottom-right-radius: var(--borderRadius-medium);
+      }
     }
 
     &:focus,
@@ -26,8 +37,32 @@
     }
   }
 
+  /* this is a workaround until portal based tooltips are fully removed from dotcom */
+  &:has(div:last-child:empty) {
+    button,
+    a {
+      border-radius: var(--borderRadius-medium);
+    }
+  }
+
   /* if child is loading button */
-  [data-loading-wrapper] {
+  & > *[data-loading-wrapper] {
+    /* stylelint-disable-next-line primer/spacing */
+    margin-inline-end: -1px;
+    position: relative;
+
+    /* reset border-radius */
+    button,
+    a {
+      border-radius: 0;
+    }
+
+    &:focus,
+    &:active,
+    &:hover {
+      z-index: 1;
+    }
+
     &:first-child {
       button,
       a {
@@ -44,17 +79,4 @@
       }
     }
   }
-
-  [data-loading-wrapper] > * {
-    /* stylelint-disable-next-line primer/spacing */
-    margin-inline-end: -1px;
-    position: relative;
-    border-radius: 0;
-
-    &:focus,
-    &:active,
-    &:hover {
-      z-index: 1;
-    }
-  }
 }
diff --git a/packages/react/src/ButtonGroup/ButtonGroup.tsx b/packages/react/src/ButtonGroup/ButtonGroup.tsx
index c901875909b..e3cc3e0632a 100644
--- a/packages/react/src/ButtonGroup/ButtonGroup.tsx
+++ b/packages/react/src/ButtonGroup/ButtonGroup.tsx
@@ -1,6 +1,5 @@
 import styled from 'styled-components'
 import React from 'react'
-import {get} from '../constants'
 import sx from '../sx'
 import type {ComponentProps} from '../utils/types'
 import classes from './ButtonGroup.module.css'
@@ -19,57 +18,79 @@ const StyledButtonGroup = toggleStyledComponent(
     vertical-align: middle;
     isolation: isolate;
 
-    && > *:not([data-loading-wrapper]) {
+    & > *:not([data-loading-wrapper]) {
+      /* stylelint-disable-next-line primer/spacing */
       margin-inline-end: -1px;
       position: relative;
-      border-radius: 0;
 
-      :first-child {
-        border-top-left-radius: ${get('radii.2')};
-        border-bottom-left-radius: ${get('radii.2')};
+      /* reset border-radius */
+      button,
+      a {
+        border-radius: 0;
       }
 
-      :last-child {
-        border-top-right-radius: ${get('radii.2')};
-        border-bottom-right-radius: ${get('radii.2')};
-      }
-
-      :focus,
-      :active,
-      :hover {
-        z-index: 1;
-      }
-    }
-
-    // if child is loading button
-    [data-loading-wrapper] {
-      :first-child {
+      &:first-child {
         button,
         a {
-          border-top-left-radius: ${get('radii.2')};
-          border-bottom-left-radius: ${get('radii.2')};
+          border-top-left-radius: var(--borderRadius-medium);
+          border-bottom-left-radius: var(--borderRadius-medium);
         }
       }
 
-      :last-child {
+      &:last-child {
         button,
         a {
-          border-top-right-radius: ${get('radii.2')};
-          border-bottom-right-radius: ${get('radii.2')};
+          border-top-right-radius: var(--borderRadius-medium);
+          border-bottom-right-radius: var(--borderRadius-medium);
         }
       }
+
+      &:focus,
+      &:active,
+      &:hover {
+        z-index: 1;
+      }
+    }
+
+    /* this is a workaround until portal based tooltips are fully removed from dotcom */
+    &:has(div:last-child:empty) {
+      button,
+      a {
+        border-radius: var(--borderRadius-medium);
+      }
     }
 
-    [data-loading-wrapper] > * {
+    /* if child is loading button */
+    & > *[data-loading-wrapper] {
+      /* stylelint-disable-next-line primer/spacing */
       margin-inline-end: -1px;
       position: relative;
-      border-radius: 0;
+      /* reset border-radius */
+      button,
+      a {
+        border-radius: 0;
+      }
 
-      :focus,
-      :active,
-      :hover {
+      &:focus,
+      &:active,
+      &:hover {
         z-index: 1;
       }
+      &:first-child {
+        button,
+        a {
+          border-top-left-radius: var(--borderRadius-medium);
+          border-bottom-left-radius: var(--borderRadius-medium);
+        }
+      }
+
+      &:last-child {
+        button,
+        a {
+          border-top-right-radius: var(--borderRadius-medium);
+          border-bottom-right-radius: var(--borderRadius-medium);
+        }
+      }
     }
 
     ${sx};
@@ -83,6 +104,7 @@ const ButtonGroup = React.forwardRef<HTMLElement, ButtonGroupProps>(function But
   forwardRef,
 ) {
   const enabled = useFeatureFlag('primer_react_css_modules_ga')
+  const buttons = React.Children.map(children, (child, index) => <div key={index}>{child}</div>)
   const buttonRef = useProvidedRefOrCreate(forwardRef as React.RefObject<HTMLDivElement>)
 
   useFocusZone({
@@ -101,7 +123,7 @@ const ButtonGroup = React.forwardRef<HTMLElement, ButtonGroupProps>(function But
       role={role}
       {...rest}
     >
-      {children}
+      {buttons}
     </StyledButtonGroup>
   )
 }) as PolymorphicForwardRefComponent<'div', ButtonGroupProps>
diff --git a/packages/react/src/Header/Header.tsx b/packages/react/src/Header/Header.tsx
index e36b2d983b1..33c7a6b7b0d 100644
--- a/packages/react/src/Header/Header.tsx
+++ b/packages/react/src/Header/Header.tsx
@@ -15,7 +15,7 @@ type StyledHeaderProps = React.ComponentProps<'header'> & SxProp
 type StyledHeaderItemProps = React.ComponentProps<'div'> & SxProp & {full?: boolean}
 type StyledHeaderLinkProps = React.ComponentProps<'a'> & SxProp & {to?: Location | Pathname}
 
-const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff'
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_ga'
 
 const StyledHeader = toggleStyledComponent(
   CSS_MODULES_FEATURE_FLAG,
diff --git a/packages/react/src/Text/Text.tsx b/packages/react/src/Text/Text.tsx
index 9bad8d5d923..a6cd88e276f 100644
--- a/packages/react/src/Text/Text.tsx
+++ b/packages/react/src/Text/Text.tsx
@@ -8,8 +8,9 @@ import sx from '../sx'
 import {useFeatureFlag} from '../FeatureFlags'
 import Box from '../Box'
 import {useRefObjectAsForwardedRef} from '../hooks'
-import classes from './Text.module.css'
 import type {ComponentProps} from '../utils/types'
+import {includesSystemProps} from '../utils/includeSystemProps'
+import classes from './Text.module.css'
 
 type StyledTextProps = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -58,19 +59,6 @@ const StyledText = styled.span<StyledTextProps>`
   ${sx};
 `
 
-const COMMON_PROP_NAMES = new Set(Object.keys(COMMON))
-const TYPOGRAPHY_PROP_NAMES = new Set(Object.keys(TYPOGRAPHY))
-
-const includesSystemProps = (props: StyledTextProps) => {
-  if (props.sx) {
-    return true
-  }
-
-  return Object.keys(props).some(prop => {
-    return TYPOGRAPHY_PROP_NAMES.has(prop) || COMMON_PROP_NAMES.has(prop)
-  })
-}
-
 const Text = forwardRef(({as: Component = 'span', className, size, weight, ...props}, forwardedRef) => {
   const enabled = useFeatureFlag('primer_react_css_modules_ga')
 
diff --git a/packages/react/src/TooltipV2/Tooltip.tsx b/packages/react/src/TooltipV2/Tooltip.tsx
index 43644bac051..09e9ac7c35a 100644
--- a/packages/react/src/TooltipV2/Tooltip.tsx
+++ b/packages/react/src/TooltipV2/Tooltip.tsx
@@ -301,11 +301,17 @@ export const Tooltip = React.forwardRef(
       // Has trigger element or any of its children interactive elements?
       const isTriggerInteractive = isInteractive(triggerRef.current)
       const triggerChildren = triggerRef.current.childNodes
-      const hasInteractiveChild = Array.from(triggerChildren).some(child => {
-        return child instanceof HTMLElement && isInteractive(child)
+      // two levels deep
+      const hasInteractiveDescendant = Array.from(triggerChildren).some(child => {
+        return (
+          (child instanceof HTMLElement && isInteractive(child)) ||
+          Array.from(child.childNodes).some(
+            grandChild => grandChild instanceof HTMLElement && isInteractive(grandChild),
+          )
+        )
       })
       invariant(
-        isTriggerInteractive || hasInteractiveChild,
+        isTriggerInteractive || hasInteractiveDescendant,
         'The `Tooltip` component expects a single React element that contains interactive content. Consider using a `<button>` or equivalent interactive element instead.',
       )
       // If the tooltip is used for labelling the interactive element, the trigger element or any of its children should not have aria-label
diff --git a/packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx b/packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx
index a088914a114..e832be1ec9c 100644
--- a/packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx
+++ b/packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx
@@ -4,7 +4,7 @@ import {Tooltip} from '../Tooltip'
 import {checkStoriesForAxeViolations} from '../../utils/testing'
 import {render as HTMLRender} from '@testing-library/react'
 import theme from '../../theme'
-import {Button, IconButton, ActionMenu, ActionList, ThemeProvider, BaseStyles} from '../..'
+import {Button, IconButton, ActionMenu, ActionList, ThemeProvider, BaseStyles, ButtonGroup} from '../..'
 import {XIcon} from '@primer/octicons-react'
 
 const TooltipComponent = (props: Omit<TooltipProps, 'text'> & {text?: string}) => (
@@ -140,4 +140,18 @@ describe('Tooltip', () => {
     const triggerEL = getByRole('button')
     expect(triggerEL).toBeInTheDocument()
   })
+  it('should allow for two-level deep interactive elements', () => {
+    const {getByText} = HTMLRender(
+      <Tooltip text="Tooltip text">
+        <ButtonGroup>
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+          <Button>Button 3</Button>
+        </ButtonGroup>
+      </Tooltip>,
+    )
+
+    const triggerEL = getByText('Button 1')
+    expect(triggerEL).toBeInTheDocument()
+  })
 })
diff --git a/packages/react/src/__tests__/BaseStyles.test.tsx b/packages/react/src/__tests__/BaseStyles.test.tsx
index 8895f46d3d8..c6d1270b348 100644
--- a/packages/react/src/__tests__/BaseStyles.test.tsx
+++ b/packages/react/src/__tests__/BaseStyles.test.tsx
@@ -16,7 +16,7 @@ describe('BaseStyles', () => {
   })
 
   it('has default styles', () => {
-    const {container} = render(<BaseStyles></BaseStyles>)
+    const {container} = render(<BaseStyles>Hello</BaseStyles>)
     expect(container).toMatchSnapshot()
   })
 
@@ -27,10 +27,24 @@ describe('BaseStyles', () => {
       lineHeight: '3.5',
     }
 
-    const {container} = render(<BaseStyles {...styles}></BaseStyles>)
+    const {container} = render(<BaseStyles {...styles}>Hello</BaseStyles>)
     expect(container.children[0]).toHaveStyle({color: '#f00', 'font-family': 'Arial', 'line-height': '3.5'})
   })
 
+  it('respects system props', () => {
+    const {container} = render(
+      <BaseStyles display="contents" whiteSpace="pre-wrap" mr="2">
+        Hello
+      </BaseStyles>,
+    )
+
+    expect(container.children[0]).toHaveStyle({
+      display: 'contents',
+      'white-space': 'pre-wrap',
+      'margin-right': '8px',
+    })
+  })
+
   it('accepts className and style props', () => {
     const styles = {
       style: {margin: '10px'},
@@ -38,7 +52,7 @@ describe('BaseStyles', () => {
       sx: {},
     }
 
-    const {container} = render(<BaseStyles {...styles}></BaseStyles>)
+    const {container} = render(<BaseStyles {...styles}>Hello</BaseStyles>)
     expect(container.children[0]).toHaveClass('test-classname')
     expect(container.children[0]).toHaveStyle({margin: '10px'})
   })
diff --git a/packages/react/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap
index b09b34fe96f..1c8391c7328 100644
--- a/packages/react/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`AnchoredOverlay should render consistently when open 1`] = `
 .c0 {
   font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
   line-height: 1.5;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  color: var(--fgColor-default);
 }
 
 .c1 {
@@ -38,7 +38,7 @@ exports[`AnchoredOverlay should render consistently when open 1`] = `
 <div>
   <div
     class="c0"
-    color="fg.default"
+    color="var(--fgColor-default)"
     data-color-mode="light"
     data-dark-theme="dark"
     data-light-theme="light"
diff --git a/packages/react/src/__tests__/__snapshots__/BaseStyles.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/BaseStyles.test.tsx.snap
index 18c719e6bff..4dab403c115 100644
--- a/packages/react/src/__tests__/__snapshots__/BaseStyles.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/BaseStyles.test.tsx.snap
@@ -4,16 +4,18 @@ exports[`BaseStyles has default styles 1`] = `
 .c0 {
   font-family: normal;
   line-height: default;
-  color: fg.default;
+  color: var(--fgColor-default);
 }
 
 <div>
   <div
     class="c0"
-    color="fg.default"
+    color="var(--fgColor-default)"
     data-color-mode="light"
     data-portal-root="true"
     font-family="normal"
-  />
+  >
+    Hello
+  </div>
 </div>
 `;
diff --git a/packages/react/src/utils/includeSystemProps.ts b/packages/react/src/utils/includeSystemProps.ts
new file mode 100644
index 00000000000..c958e79144e
--- /dev/null
+++ b/packages/react/src/utils/includeSystemProps.ts
@@ -0,0 +1,31 @@
+import {COMMON, TYPOGRAPHY, type SystemCommonProps, type SystemTypographyProps} from '../constants'
+import type {SxProp} from '../sx'
+
+const COMMON_PROP_NAMES = new Set(Object.keys(COMMON))
+const TYPOGRAPHY_PROP_NAMES = new Set(Object.keys(TYPOGRAPHY))
+
+const includesSystemProps = (props: SxProp) => {
+  if (props.sx) {
+    return true
+  }
+
+  return Object.keys(props).some(prop => {
+    return TYPOGRAPHY_PROP_NAMES.has(prop) || COMMON_PROP_NAMES.has(prop)
+  })
+}
+
+type TypographyAndCommonProp = SystemTypographyProps & SystemCommonProps
+
+const getTypographyAndCommonProps = (props: TypographyAndCommonProp): TypographyAndCommonProp => {
+  let typographyAndCommonProps = {} as TypographyAndCommonProp
+  for (const prop of Object.keys(props)) {
+    if (TYPOGRAPHY_PROP_NAMES.has(prop) || COMMON_PROP_NAMES.has(prop)) {
+      const p = prop as keyof TypographyAndCommonProp
+      typographyAndCommonProps = {...typographyAndCommonProps, [p]: props[p]}
+    }
+  }
+
+  return typographyAndCommonProps
+}
+
+export {includesSystemProps, getTypographyAndCommonProps}