diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-colorblind-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-colorblind-linux.png
index 827d09b2dd4..fbd7d2ffd0c 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-colorblind-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-dimmed-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-dimmed-linux.png
index 66cc4aabaa2..c7270ec0c04 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-dimmed-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-high-contrast-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-high-contrast-linux.png
index 6b05bdfc64a..021e42a6824 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-linux.png
index 827d09b2dd4..fbd7d2ffd0c 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-tritanopia-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-tritanopia-linux.png
index 827d09b2dd4..fbd7d2ffd0c 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-light-colorblind-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-light-colorblind-linux.png
index 89f5ae8ea44..b1cc6276e15 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-light-colorblind-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-light-high-contrast-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-light-high-contrast-linux.png
index 3ff39285e71..604017bdd20 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-light-high-contrast-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-light-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-light-linux.png
index 89f5ae8ea44..b1cc6276e15 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-light-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-light-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-light-tritanopia-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-light-tritanopia-linux.png
index 89f5ae8ea44..b1cc6276e15 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-light-tritanopia-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-colorblind-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-colorblind-linux.png
index 827d09b2dd4..fbd7d2ffd0c 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-colorblind-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-dimmed-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-dimmed-linux.png
index 66cc4aabaa2..c7270ec0c04 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-dimmed-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-high-contrast-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-high-contrast-linux.png
index 6b05bdfc64a..021e42a6824 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-linux.png
index 827d09b2dd4..fbd7d2ffd0c 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-tritanopia-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-tritanopia-linux.png
index 827d09b2dd4..fbd7d2ffd0c 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-light-colorblind-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-light-colorblind-linux.png
index 89f5ae8ea44..b1cc6276e15 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-light-colorblind-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-light-high-contrast-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-light-high-contrast-linux.png
index 3ff39285e71..604017bdd20 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-light-high-contrast-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-light-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-light-linux.png
index 89f5ae8ea44..b1cc6276e15 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-light-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-light-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-light-tritanopia-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-light-tritanopia-linux.png
index 89f5ae8ea44..b1cc6276e15 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-light-tritanopia-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-colorblind-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-colorblind-linux.png
index 3f20c78fd0c..4c10c1abae3 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-colorblind-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-dimmed-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-dimmed-linux.png
index 8a6e648b541..5fb70d35fb2 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-dimmed-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-high-contrast-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-high-contrast-linux.png
index 5ccf1a9c472..58afd6e789d 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-linux.png
index 3f20c78fd0c..4c10c1abae3 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-tritanopia-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-tritanopia-linux.png
index 3f20c78fd0c..4c10c1abae3 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-colorblind-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-colorblind-linux.png
index 6d97351bd7a..4919a5b9370 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-colorblind-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-high-contrast-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-high-contrast-linux.png
index a5f33bef82e..151fd95f42a 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-high-contrast-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-linux.png
index 6d97351bd7a..4919a5b9370 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-tritanopia-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-tritanopia-linux.png
index 6d97351bd7a..4919a5b9370 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-tritanopia-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-colorblind-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-colorblind-linux.png
index 486db0d6fc1..5f3d1ceb3fe 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-colorblind-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-dimmed-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-dimmed-linux.png
index 138fb8db558..3e8135ecf87 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-dimmed-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-high-contrast-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-high-contrast-linux.png
index 0ee89840e34..e04ff984164 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-linux.png
index 20c03f5ce8a..2e6f5c0ff48 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-tritanopia-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-tritanopia-linux.png
index 10f56ade2a3..038b0b9c545 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-colorblind-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-colorblind-linux.png
index ebe3a3803c9..638ef356967 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-colorblind-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-high-contrast-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-high-contrast-linux.png
index 7bff923ba69..9f8f6be3bde 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-high-contrast-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-linux.png
index 6a5865cda1d..e04c2ce9cde 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-tritanopia-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-tritanopia-linux.png
index b8d31193ec7..52251e61f76 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-tritanopia-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-colorblind-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-colorblind-linux.png
index f66b5bca6bc..b37c2ae9d26 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-colorblind-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-dimmed-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-dimmed-linux.png
index 8fdc1ed71f3..9c492b92955 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-dimmed-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-high-contrast-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-high-contrast-linux.png
index 6e514919145..a66ec4fbda9 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-linux.png
index 8f653389328..607b237427e 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-tritanopia-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-tritanopia-linux.png
index f0bc0d8af69..10b3a5b881d 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-colorblind-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-colorblind-linux.png
index 2a8cb804859..a0afbb9b1a2 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-colorblind-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-high-contrast-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-high-contrast-linux.png
index bb31e6e03b7..8caa3f4abd9 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-high-contrast-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-linux.png
index 2630727f07e..376491bef00 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-tritanopia-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-tritanopia-linux.png
index 54db4cf7f76..8d997aa4d19 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-tritanopia-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-on-Description-dark-colorblind-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-on-Description-dark-colorblind-linux.png
index a74b1f880a1..a15f33b01d4 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-on-Description-dark-colorblind-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-on-Description-dark-colorblind-linux.png differ
diff --git a/packages/react/.storybook/manager-head.html b/packages/react/.storybook/manager-head.html
new file mode 100644
index 00000000000..be00d6026b4
--- /dev/null
+++ b/packages/react/.storybook/manager-head.html
@@ -0,0 +1 @@
+<base href="/react/storybook/" />
diff --git a/packages/react/src/Dialog/Dialog.features.stories.module.css b/packages/react/src/Dialog/Dialog.features.stories.module.css
new file mode 100644
index 00000000000..a27896d7c47
--- /dev/null
+++ b/packages/react/src/Dialog/Dialog.features.stories.module.css
@@ -0,0 +1,45 @@
+/* CSS Module for Dialog features stories - replaces styled-components usage */
+
+/* Custom header background */
+.CustomHeaderBg {
+  background-color: var(--bgColor-accent-muted);
+}
+
+/* Text with small font size and no top margin */
+.SmallText {
+  font-size: var(--text-body-size-small);
+  margin-block-start: 0;
+}
+
+/* Layout containers */
+.FlexColumn {
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-size-16); /* gap: 4 * 4px = 16px */
+}
+
+.FlexColumnGap1 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-size-4); /* gap: 1 * 4px = 4px */
+}
+
+.FlexRowSpaceBetween {
+  display: flex;
+  justify-content: space-between;
+}
+
+/* Dialog Body with danger background */
+.DangerBodyBg {
+  background-color: var(--bgColor-danger-muted);
+}
+
+/* Dialog Footer with attention background */
+.AttentionFooterBg {
+  background-color: var(--bgColor-attention-muted);
+}
+
+/* Generic expandable content container */
+.ExpandContent {
+  /* No specific styles needed for the basic Box usage */
+}
diff --git a/packages/react/src/Dialog/Dialog.features.stories.tsx b/packages/react/src/Dialog/Dialog.features.stories.tsx
index 6fc1cb7d188..389e77e7487 100644
--- a/packages/react/src/Dialog/Dialog.features.stories.tsx
+++ b/packages/react/src/Dialog/Dialog.features.stories.tsx
@@ -1,7 +1,8 @@
 import React, {useState, useRef, useCallback} from 'react'
-import {Box, TextInput, Text, Button, ActionList} from '..'
+import {TextInput, Button, ActionList} from '..'
 import type {DialogProps, DialogWidth, DialogHeight} from './Dialog'
 import {Dialog} from './Dialog'
+import classes from './Dialog.features.stories.module.css'
 
 /* Dialog Version 2 */
 
@@ -11,7 +12,7 @@ export default {
 
 const lipsum = (
   <>
-    <Text sx={{fontSize: 1, marginBlockStart: 0}} as="p">
+    <p className={classes.SmallText}>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sollicitudin mauris maximus elit sagittis, nec
       lobortis ligula elementum. Nam iaculis, urna nec lobortis posuere, eros urna venenatis eros, vel accumsan turpis
       nunc vitae enim. Maecenas et lorem lectus. Vivamus iaculis tortor eget ante placerat, nec posuere nisl tincidunt.
@@ -19,36 +20,36 @@ const lipsum = (
       amet, consectetur adipiscing elit. Ut consequat nunc id quam tempus, id tincidunt neque venenatis. Mauris
       fringilla tempor est, vitae fermentum enim elementum vitae. Nullam eleifend odio ut porta efficitur. Phasellus
       luctus tempus posuere.
-    </Text>
+    </p>
 
-    <Text sx={{fontSize: 1, marginBlockStart: 0}} as="p">
+    <p className={classes.SmallText}>
       Curabitur scelerisque bibendum faucibus. Duis rhoncus nunc est, at pharetra eros tristique a. Nam sodales turpis
       lectus, quis faucibus felis fermentum in. Curabitur vel velit vel eros laoreet pharetra. Aenean in facilisis
       sapien, eu porttitor ex. Donec ultrices ac arcu ut lobortis. Pellentesque vitae rutrum orci. Etiam pretium et enim
       sit amet scelerisque. Nulla sed odio nec lorem dapibus condimentum at sagittis quam. Sed in ornare ex, sed luctus
       sem. Mauris a est tellus.
-    </Text>
+    </p>
 
-    <Text sx={{fontSize: 1, marginBlockStart: 0}} as="p">
+    <p className={classes.SmallText}>
       Sed fringilla est ac urna aliquet, eget condimentum felis vulputate. Sed sagittis eros non mauris sodales
       molestie. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam ante leo,
       condimentum sed lectus non, rutrum octopodes urna. Mauris neque ante, interdum molestie tellus pharetra, eleifend
       dapibus justo. Sed at diam ligula. Donec dapibus ipsum quis elit euismod, sed suscipit eros euismod. Aliquam
       pretium felis quis risus luctus fringilla. Ut purus lacus, mattis a turpis eget, sollicitudin pellentesque neque.
-    </Text>
+    </p>
 
-    <Text sx={{fontSize: 1, marginBlockStart: 0}} as="p">
+    <p className={classes.SmallText}>
       Nunc sodales quis ante quis porttitor. Vestibulum ornare lacinia ante. Donec a nisi nec arcu aliquam pretium in
       nec nunc. Donec fringilla erat vitae viverra feugiat. Sed non odio vel ipsum porttitor maximus. Donec id eleifend
       lectus. Proin varius felis sit amet neque eleifend, vitae porttitor ligula commodo.
-    </Text>
+    </p>
 
-    <Text sx={{fontSize: 1, marginBlockStart: 0}} as="p">
+    <p className={classes.SmallText}>
       Vivamus felis quam, porttitor a justo sit amet, placerat ultricies nisl. Suspendisse potenti. Maecenas non
       consequat lorem, eu porta ante. Pellentesque elementum diam sapien, nec ultrices risus convallis eget. Nam
       pharetra dolor at dictum tempor. Quisque ut est a ligula hendrerit sodales. Curabitur ornare a nulla in laoreet.
       Maecenas semper mi egestas, dignissim nisi et, elementum neque.
-    </Text>
+    </p>
   </>
 )
 interface DialogStoryProps {
@@ -69,22 +70,28 @@ function CustomHeader({
   }, [onClose])
   if (typeof title === 'string' && typeof subtitle === 'string') {
     return (
-      <Box bg="accent.subtle">
+      <div className={classes.CustomHeaderBg}>
         <h1 id={dialogLabelId}>{title.toUpperCase()}</h1>
         <h2 id={dialogDescriptionId}>{subtitle.toLowerCase()}</h2>
         <Dialog.CloseButton onClose={onCloseClick} />
-      </Box>
+      </div>
     )
   }
   return null
 }
 function CustomBody({children}: React.PropsWithChildren<DialogProps>) {
-  return <Dialog.Body sx={{bg: 'danger.subtle'}}>{children}</Dialog.Body>
+  return (
+    <Dialog.Body>
+      <div className={classes.DangerBodyBg}>{children}</div>
+    </Dialog.Body>
+  )
 }
 function CustomFooter({footerButtons}: React.PropsWithChildren<DialogProps>) {
   return (
-    <Dialog.Footer sx={{bg: 'attention.subtle'}}>
-      {footerButtons ? <Dialog.Buttons buttons={footerButtons} /> : null}
+    <Dialog.Footer>
+      <div className={classes.AttentionFooterBg}>
+        {footerButtons ? <Dialog.Buttons buttons={footerButtons} /> : null}
+      </div>
     </Dialog.Footer>
   )
 }
@@ -201,17 +208,17 @@ export const ReproMultistepDialogWithConditionalFooter = ({width, height}: Dialo
           ref={dialogRef}
         >
           {step === 1 ? (
-            <Box sx={{display: 'flex', flexDirection: 'column', gap: 4}}>
-              <Box sx={{display: 'flex', justifyContent: 'space-between'}}>
+            <div className={classes.FlexColumn}>
+              <div className={classes.FlexRowSpaceBetween}>
                 Bug Report <Button onClick={() => setStep(2)}>Choose</Button>
-              </Box>
-              <Box sx={{display: 'flex', justifyContent: 'space-between'}}>
+              </div>
+              <div className={classes.FlexRowSpaceBetween}>
                 Feature request <Button onClick={() => setStep(2)}>Choose</Button>
-              </Box>
-            </Box>
+              </div>
+            </div>
           ) : (
             <div>
-              <Box sx={{display: 'flex', flexDirection: 'column', gap: 1}}>
+              <div className={classes.FlexColumnGap1}>
                 <label htmlFor="description">Description</label>
                 <TextInput
                   id="description"
@@ -219,7 +226,7 @@ export const ReproMultistepDialogWithConditionalFooter = ({width, height}: Dialo
                   value={inputText}
                   onChange={event => setInputText(event.target.value)}
                 />
-              </Box>
+              </div>
             </div>
           )}
         </Dialog>
@@ -229,7 +236,7 @@ export const ReproMultistepDialogWithConditionalFooter = ({width, height}: Dialo
 }
 
 const bodyContent = (
-  <Text sx={{fontSize: 1, marginBlockStart: 0}} as="p">
+  <p className={classes.SmallText}>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sollicitudin mauris maximus elit sagittis, nec
     lobortis ligula elementum. Nam iaculis, urna nec lobortis posuere, eros urna venenatis eros, vel accumsan turpis
     nunc vitae enim. Maecenas et lorem lectus. Vivamus iaculis tortor eget ante placerat, nec posuere nisl tincidunt.
@@ -237,7 +244,7 @@ const bodyContent = (
     amet, consectetur adipiscing elit. Ut consequat nunc id quam tempus, id tincidunt neque venenatis. Mauris fringilla
     tempor est, vitae fermentum enim elementum vitae. Nullam eleifend odio ut porta efficitur. Phasellus luctus tempus
     posuere.
-  </Text>
+  </p>
 )
 
 export const BottomSheetNarrow = () => {
@@ -386,11 +393,11 @@ export const RetainsFocusTrapWithDynamicContent = () => {
           </Button>
           <Button onClick={openSecondDialog}>Click me to open a new dialog</Button>
           {expandContent && (
-            <Box>
+            <div className={classes.ExpandContent}>
               {lipsum}
               <Button>Dialog Button Example 1</Button>
               <Button>Dialog Button Example 2</Button>
-            </Box>
+            </div>
           )}
           {secondOpen && (
             <Dialog title="Inner dialog!" onClose={onSecondDialogClose} width="small">