diff --git a/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Confirmation-Dialog-dark-colorblind-linux.png b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Confirmation-Dialog-dark-colorblind-linux.png
new file mode 100644
index 00000000000..7491948ec9a
Binary files /dev/null and b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Confirmation-Dialog-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Confirmation-Dialog-dark-colorblind-open-linux.png b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Confirmation-Dialog-dark-colorblind-open-linux.png
new file mode 100644
index 00000000000..e36b6b5c7a2
Binary files /dev/null and b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Confirmation-Dialog-dark-colorblind-open-linux.png differ
diff --git a/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Confirmation-Dialog-dark-dimmed-linux.png b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Confirmation-Dialog-dark-dimmed-linux.png
new file mode 100644
index 00000000000..15e6d5852fb
Binary files /dev/null and b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Confirmation-Dialog-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Confirmation-Dialog-dark-dimmed-open-linux.png b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Confirmation-Dialog-dark-dimmed-open-linux.png
new file mode 100644
index 00000000000..bd676876386
Binary files /dev/null and b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Confirmation-Dialog-dark-dimmed-open-linux.png differ
diff --git a/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Confirmation-Dialog-dark-high-contrast-linux.png b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Confirmation-Dialog-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..e4cdc12a1ef
Binary files /dev/null and b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Confirmation-Dialog-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Confirmation-Dialog-dark-high-contrast-open-linux.png b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Confirmation-Dialog-dark-high-contrast-open-linux.png
new file mode 100644
index 00000000000..f76d26b24b0
Binary files /dev/null and b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Confirmation-Dialog-dark-high-contrast-open-linux.png differ
diff --git a/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Confirmation-Dialog-dark-linux.png b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Confirmation-Dialog-dark-linux.png
new file mode 100644
index 00000000000..7491948ec9a
Binary files /dev/null and b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Confirmation-Dialog-dark-linux.png differ
diff --git a/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Confirmation-Dialog-dark-open-linux.png b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Confirmation-Dialog-dark-open-linux.png
new file mode 100644
index 00000000000..3ab67fb9f55
Binary files /dev/null and b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Confirmation-Dialog-dark-open-linux.png differ
diff --git a/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Confirmation-Dialog-dark-tritanopia-linux.png b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Confirmation-Dialog-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..7491948ec9a
Binary files /dev/null and b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Confirmation-Dialog-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Confirmation-Dialog-dark-tritanopia-open-linux.png b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Confirmation-Dialog-dark-tritanopia-open-linux.png
new file mode 100644
index 00000000000..3ab67fb9f55
Binary files /dev/null and b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Confirmation-Dialog-dark-tritanopia-open-linux.png differ
diff --git a/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Confirmation-Dialog-light-colorblind-linux.png b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Confirmation-Dialog-light-colorblind-linux.png
new file mode 100644
index 00000000000..a0cac7f272b
Binary files /dev/null and b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Confirmation-Dialog-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Confirmation-Dialog-light-colorblind-open-linux.png b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Confirmation-Dialog-light-colorblind-open-linux.png
new file mode 100644
index 00000000000..f9183dc7602
Binary files /dev/null and b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Confirmation-Dialog-light-colorblind-open-linux.png differ
diff --git a/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Confirmation-Dialog-light-high-contrast-linux.png b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Confirmation-Dialog-light-high-contrast-linux.png
new file mode 100644
index 00000000000..14c00a9b278
Binary files /dev/null and b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Confirmation-Dialog-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Confirmation-Dialog-light-high-contrast-open-linux.png b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Confirmation-Dialog-light-high-contrast-open-linux.png
new file mode 100644
index 00000000000..251f630f4a4
Binary files /dev/null and b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Confirmation-Dialog-light-high-contrast-open-linux.png differ
diff --git a/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Confirmation-Dialog-light-linux.png b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Confirmation-Dialog-light-linux.png
new file mode 100644
index 00000000000..a0cac7f272b
Binary files /dev/null and b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Confirmation-Dialog-light-linux.png differ
diff --git a/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Confirmation-Dialog-light-open-linux.png b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Confirmation-Dialog-light-open-linux.png
new file mode 100644
index 00000000000..a082cfc9e25
Binary files /dev/null and b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Confirmation-Dialog-light-open-linux.png differ
diff --git a/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Confirmation-Dialog-light-tritanopia-linux.png b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Confirmation-Dialog-light-tritanopia-linux.png
new file mode 100644
index 00000000000..a0cac7f272b
Binary files /dev/null and b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Confirmation-Dialog-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Confirmation-Dialog-light-tritanopia-open-linux.png b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Confirmation-Dialog-light-tritanopia-open-linux.png
new file mode 100644
index 00000000000..a082cfc9e25
Binary files /dev/null and b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Confirmation-Dialog-light-tritanopia-open-linux.png differ
diff --git a/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Dialog-dark-colorblind-linux.png b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Dialog-dark-colorblind-linux.png
new file mode 100644
index 00000000000..7491948ec9a
Binary files /dev/null and b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Dialog-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Dialog-dark-colorblind-open-linux.png b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Dialog-dark-colorblind-open-linux.png
new file mode 100644
index 00000000000..54679e020ff
Binary files /dev/null and b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Dialog-dark-colorblind-open-linux.png differ
diff --git a/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Dialog-dark-dimmed-linux.png b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Dialog-dark-dimmed-linux.png
new file mode 100644
index 00000000000..15e6d5852fb
Binary files /dev/null and b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Dialog-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Dialog-dark-dimmed-open-linux.png b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Dialog-dark-dimmed-open-linux.png
new file mode 100644
index 00000000000..ae452818bf2
Binary files /dev/null and b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Dialog-dark-dimmed-open-linux.png differ
diff --git a/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Dialog-dark-high-contrast-linux.png b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Dialog-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..e4cdc12a1ef
Binary files /dev/null and b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Dialog-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Dialog-dark-high-contrast-open-linux.png b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Dialog-dark-high-contrast-open-linux.png
new file mode 100644
index 00000000000..ec45bf5f92e
Binary files /dev/null and b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Dialog-dark-high-contrast-open-linux.png differ
diff --git a/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Dialog-dark-linux.png b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Dialog-dark-linux.png
new file mode 100644
index 00000000000..7491948ec9a
Binary files /dev/null and b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Dialog-dark-linux.png differ
diff --git a/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Dialog-dark-open-linux.png b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Dialog-dark-open-linux.png
new file mode 100644
index 00000000000..c796266fe2c
Binary files /dev/null and b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Dialog-dark-open-linux.png differ
diff --git a/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Dialog-dark-tritanopia-linux.png b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Dialog-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..7491948ec9a
Binary files /dev/null and b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Dialog-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Dialog-dark-tritanopia-open-linux.png b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Dialog-dark-tritanopia-open-linux.png
new file mode 100644
index 00000000000..d681c8b46cb
Binary files /dev/null and b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Dialog-dark-tritanopia-open-linux.png differ
diff --git a/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Dialog-light-colorblind-linux.png b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Dialog-light-colorblind-linux.png
new file mode 100644
index 00000000000..a0cac7f272b
Binary files /dev/null and b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Dialog-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Dialog-light-colorblind-open-linux.png b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Dialog-light-colorblind-open-linux.png
new file mode 100644
index 00000000000..ca12c0ea3db
Binary files /dev/null and b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Dialog-light-colorblind-open-linux.png differ
diff --git a/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Dialog-light-high-contrast-linux.png b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Dialog-light-high-contrast-linux.png
new file mode 100644
index 00000000000..14c00a9b278
Binary files /dev/null and b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Dialog-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Dialog-light-high-contrast-open-linux.png b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Dialog-light-high-contrast-open-linux.png
new file mode 100644
index 00000000000..68a4d671782
Binary files /dev/null and b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Dialog-light-high-contrast-open-linux.png differ
diff --git a/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Dialog-light-linux.png b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Dialog-light-linux.png
new file mode 100644
index 00000000000..a0cac7f272b
Binary files /dev/null and b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Dialog-light-linux.png differ
diff --git a/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Dialog-light-open-linux.png b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Dialog-light-open-linux.png
new file mode 100644
index 00000000000..e9ec32de38f
Binary files /dev/null and b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Dialog-light-open-linux.png differ
diff --git a/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Dialog-light-tritanopia-linux.png b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Dialog-light-tritanopia-linux.png
new file mode 100644
index 00000000000..a0cac7f272b
Binary files /dev/null and b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Dialog-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Dialog-light-tritanopia-open-linux.png b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Dialog-light-tritanopia-open-linux.png
new file mode 100644
index 00000000000..2cddc730547
Binary files /dev/null and b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Basic-Dialog-light-tritanopia-open-linux.png differ
diff --git a/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Default-dark-colorblind-linux.png
new file mode 100644
index 00000000000..7491948ec9a
Binary files /dev/null and b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Default-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Default-dark-colorblind-open-linux.png b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Default-dark-colorblind-open-linux.png
new file mode 100644
index 00000000000..52cf69ace23
Binary files /dev/null and b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Default-dark-colorblind-open-linux.png differ
diff --git a/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Default-dark-dimmed-linux.png
new file mode 100644
index 00000000000..15e6d5852fb
Binary files /dev/null and b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Default-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Default-dark-dimmed-open-linux.png b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Default-dark-dimmed-open-linux.png
new file mode 100644
index 00000000000..39f42ada002
Binary files /dev/null and b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Default-dark-dimmed-open-linux.png differ
diff --git a/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Default-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..e4cdc12a1ef
Binary files /dev/null and b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Default-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Default-dark-high-contrast-open-linux.png b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Default-dark-high-contrast-open-linux.png
new file mode 100644
index 00000000000..c136e00cc79
Binary files /dev/null and b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Default-dark-high-contrast-open-linux.png differ
diff --git a/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Default-dark-linux.png b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Default-dark-linux.png
new file mode 100644
index 00000000000..7491948ec9a
Binary files /dev/null and b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Default-dark-linux.png differ
diff --git a/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Default-dark-open-linux.png b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Default-dark-open-linux.png
new file mode 100644
index 00000000000..52cf69ace23
Binary files /dev/null and b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Default-dark-open-linux.png differ
diff --git a/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Default-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..7491948ec9a
Binary files /dev/null and b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Default-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Default-dark-tritanopia-open-linux.png b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Default-dark-tritanopia-open-linux.png
new file mode 100644
index 00000000000..52cf69ace23
Binary files /dev/null and b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Default-dark-tritanopia-open-linux.png differ
diff --git a/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Default-light-colorblind-linux.png b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Default-light-colorblind-linux.png
new file mode 100644
index 00000000000..a0cac7f272b
Binary files /dev/null and b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Default-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Default-light-colorblind-open-linux.png b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Default-light-colorblind-open-linux.png
new file mode 100644
index 00000000000..06482d06421
Binary files /dev/null and b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Default-light-colorblind-open-linux.png differ
diff --git a/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Default-light-high-contrast-linux.png
new file mode 100644
index 00000000000..14c00a9b278
Binary files /dev/null and b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Default-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Default-light-high-contrast-open-linux.png b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Default-light-high-contrast-open-linux.png
new file mode 100644
index 00000000000..050ed0b3a66
Binary files /dev/null and b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Default-light-high-contrast-open-linux.png differ
diff --git a/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Default-light-linux.png b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Default-light-linux.png
new file mode 100644
index 00000000000..a0cac7f272b
Binary files /dev/null and b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Default-light-linux.png differ
diff --git a/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Default-light-open-linux.png b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Default-light-open-linux.png
new file mode 100644
index 00000000000..06482d06421
Binary files /dev/null and b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Default-light-open-linux.png differ
diff --git a/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Default-light-tritanopia-linux.png
new file mode 100644
index 00000000000..a0cac7f272b
Binary files /dev/null and b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Default-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Default-light-tritanopia-open-linux.png b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Default-light-tritanopia-open-linux.png
new file mode 100644
index 00000000000..06482d06421
Binary files /dev/null and b/.playwright/snapshots/components/DialogV2.test.ts-snapshots/DialogV2-Default-light-tritanopia-open-linux.png differ
diff --git a/docs/content/drafts/Dialog.mdx b/docs/content/drafts/Dialog2.mdx
similarity index 97%
rename from docs/content/drafts/Dialog.mdx
rename to docs/content/drafts/Dialog2.mdx
index 3db183706d0..0d89fa0e764 100644
--- a/docs/content/drafts/Dialog.mdx
+++ b/docs/content/drafts/Dialog2.mdx
@@ -1,10 +1,14 @@
 ---
 title: Dialog v2
-componentId: dialog
+componentId: dialog_2
 status: Draft
+a11yReviewed: false
+description: Use an underlined nav to allow tab like navigation with overflow behaviour in your UI.
+source: https://github.com/primer/react/tree/main/src/Dialog2
+storybook: '/react/storybook/?path=/story/drafts-components-dialog--default'
 ---
 
-import data from '../../../src/Dialog/Dialog.docs.json'
+import data from '../../../src/Dialog2/Dialog.docs.json'
 
 ```js
 import {Dialog} from '@primer/react/drafts'
diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml
index da1d837ce2b..82605d53b56 100644
--- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml
+++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml
@@ -159,7 +159,7 @@
 - title: Drafts
   children:
     - title: Dialog v2
-      url: /drafts/Dialog
+      url: /drafts/Dialog2
     - title: InlineAutocomplete
       url: /drafts/InlineAutocomplete
     - title: MarkdownEditor
diff --git a/e2e/components/DialogV2.test.ts b/e2e/components/DialogV2.test.ts
new file mode 100644
index 00000000000..f982ba9e610
--- /dev/null
+++ b/e2e/components/DialogV2.test.ts
@@ -0,0 +1,131 @@
+import {test, expect} from '@playwright/test'
+import {visit} from '../test-helpers/storybook'
+import {themes} from '../test-helpers/themes'
+
+test.describe('DialogV2', () => {
+  test.describe('Default', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-dialog--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(
+            await page.screenshot({
+              animations: 'disabled',
+            }),
+          ).toMatchSnapshot(`DialogV2.Default.${theme}.png`)
+          // Open Dialog
+          await page.getByRole('button', {name: 'Show dialog'}).click()
+          // wait for dialog to open
+          await page.getByRole('dialog', {name: 'Dialog'}).waitFor()
+          // Open state
+          expect(
+            await page.screenshot({
+              animations: 'disabled',
+            }),
+          ).toMatchSnapshot(`DialogV2.Default.${theme}.open.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-dialog--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+
+  test.describe('Basic Dialog', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-dialog-features--basic-dialog',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(
+            await page.screenshot({
+              animations: 'disabled',
+            }),
+          ).toMatchSnapshot(`DialogV2.Basic Dialog.${theme}.png`)
+          // Open Dialog
+          await page.getByRole('button', {name: 'Show dialog'}).click()
+          // wait for dialog to open
+          await page.getByRole('dialog', {name: 'Dialog'}).waitFor()
+          // Open state
+          expect(
+            await page.screenshot({
+              animations: 'disabled',
+            }),
+          ).toMatchSnapshot(`DialogV2.Basic Dialog.${theme}.open.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-dialog-features--basic-dialog',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+
+  test.describe('Basic Confirmation Dialog', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-dialog-features--basic-confirmation-dialog',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(
+            await page.screenshot({
+              animations: 'disabled',
+            }),
+          ).toMatchSnapshot(`DialogV2.Basic Confirmation Dialog.${theme}.png`)
+          // Open Dialog
+          await page.getByRole('button', {name: 'Show dialog'}).click()
+          // wait for dialog to open
+          await page.getByRole('alertdialog').waitFor()
+          // Open state
+          expect(
+            await page.screenshot({
+              animations: 'disabled',
+            }),
+          ).toMatchSnapshot(`DialogV2.Basic Confirmation Dialog.${theme}.open.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-dialog-features--basic-confirmation-dialog',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+})
diff --git a/generated/components.json b/generated/components.json
index cb5135fa7e3..4c2b620751d 100644
--- a/generated/components.json
+++ b/generated/components.json
@@ -2030,7 +2030,12 @@
       "name": "Dialog",
       "status": "draft",
       "a11yReviewed": false,
-      "stories": [],
+      "stories": [
+        {
+          "id": "components-dialog--default",
+          "code": "() => {\n  const [isOpen, setIsOpen] = useState(false)\n  const buttonRef = useRef<HTMLButtonElement>(null)\n  const onDialogClose = useCallback(() => setIsOpen(false), [])\n  return (\n    <>\n      <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>\n        Show dialog\n      </Button>\n      {isOpen && <Dialog onClose={onDialogClose}>Dialog Content</Dialog>}\n    </>\n  )\n}"
+        }
+      ],
       "props": [
         {
           "name": "title",
diff --git a/script/generate-e2e-tests.js b/script/generate-e2e-tests.js
index 0d030a15766..188c49d4514 100644
--- a/script/generate-e2e-tests.js
+++ b/script/generate-e2e-tests.js
@@ -336,6 +336,25 @@ const components = new Map([
       ],
     },
   ],
+  [
+    'DialogV2',
+    {
+      stories: [
+        {
+          id: 'drafts-components-dialog--default',
+          name: 'Default',
+        },
+        {
+          id: 'drafts-components-dialog-features--basic-dialog',
+          name: 'Basic Dialog',
+        },
+        {
+          id: 'drafts-components-dialog-features--basic-confirmation-dialog',
+          name: 'Basic Confirmation Dialog',
+        },
+      ],
+    },
+  ],
   [
     'Flash',
     {
diff --git a/src/Dialog/ConfirmationDialog.tsx b/src/Dialog2/ConfirmationDialog.tsx
similarity index 99%
rename from src/Dialog/ConfirmationDialog.tsx
rename to src/Dialog2/ConfirmationDialog.tsx
index 2fa2259849e..a4fcfaa09b9 100644
--- a/src/Dialog/ConfirmationDialog.tsx
+++ b/src/Dialog2/ConfirmationDialog.tsx
@@ -5,7 +5,7 @@ import Box from '../Box'
 import {ThemeProvider, useTheme, ThemeProviderProps} from '../ThemeProvider'
 import {FocusKeys} from '@primer/behaviors'
 import {get} from '../constants'
-import {Dialog, DialogProps, DialogHeaderProps, DialogButtonProps} from '../Dialog/Dialog'
+import {Dialog, DialogProps, DialogHeaderProps, DialogButtonProps} from './Dialog'
 import {useFocusZone} from '../hooks/useFocusZone'
 
 /**
diff --git a/src/Dialog/Dialog.docs.json b/src/Dialog2/Dialog.docs.json
similarity index 100%
rename from src/Dialog/Dialog.docs.json
rename to src/Dialog2/Dialog.docs.json
diff --git a/src/stories/Dialog.stories.tsx b/src/Dialog2/Dialog.features.stories.tsx
similarity index 71%
rename from src/stories/Dialog.stories.tsx
rename to src/Dialog2/Dialog.features.stories.tsx
index 9dab6838f5a..6af68cdc7ab 100644
--- a/src/stories/Dialog.stories.tsx
+++ b/src/Dialog2/Dialog.features.stories.tsx
@@ -1,12 +1,15 @@
 import React, {useState, useRef, useCallback} from 'react'
 import {Meta} from '@storybook/react'
-
-import {BaseStyles, ThemeProvider, Box} from '..'
+import {BaseStyles, ThemeProvider, Box, useTheme} from '..'
 import {Button} from '../Button'
-import {Dialog, DialogProps, DialogWidth, DialogHeight} from '../Dialog/Dialog'
+import {ActionMenu} from '../ActionMenu'
+import {ActionList} from '../ActionList'
+import {ConfirmationDialog, useConfirm} from './ConfirmationDialog'
+
+import {Dialog, DialogProps, DialogWidth, DialogHeight} from './Dialog'
 
 export default {
-  title: 'Components/Dialog',
+  title: 'Drafts/Components/Dialog/Features',
   component: Dialog,
   decorators: [
     Story => {
@@ -105,6 +108,43 @@ interface DialogStoryProps {
   height: DialogHeight
   subtitle: boolean
 }
+
+function CustomHeader({
+  title,
+  subtitle,
+  dialogLabelId,
+  dialogDescriptionId,
+  onClose,
+}: React.PropsWithChildren<DialogProps & {dialogLabelId: string; dialogDescriptionId: string}>) {
+  const onCloseClick = useCallback(() => {
+    onClose('close-button')
+  }, [onClose])
+  if (typeof title === 'string' && typeof subtitle === 'string') {
+    return (
+      <Dialog.Header>
+        <Box sx={{display: 'flex', justifyContent: 'space-between'}}>
+          <Box display="flex" flexDirection="column" flexGrow={1}>
+            <h1 id={dialogLabelId}>{title}</h1>
+            {subtitle && <h2 id={dialogDescriptionId}>{subtitle}</h2>}
+          </Box>
+          <Dialog.CloseButton onClose={onCloseClick} />
+        </Box>
+      </Dialog.Header>
+    )
+  }
+  return null
+}
+function CustomBody({children}: React.PropsWithChildren<DialogProps>) {
+  return <Dialog.Body sx={{bg: 'danger.subtle'}}>{children}</Dialog.Body>
+}
+function CustomFooter({footerButtons}: React.PropsWithChildren<DialogProps>) {
+  return (
+    <Dialog.Footer sx={{backgroundColor: 'attention.subtle'}}>
+      {footerButtons ? <Dialog.Buttons buttons={footerButtons} /> : null}
+    </Dialog.Footer>
+  )
+}
+
 export const BasicDialog = ({width, height, subtitle}: DialogStoryProps) => {
   const [isOpen, setIsOpen] = useState(false)
   const [secondOpen, setSecondOpen] = useState(false)
@@ -140,39 +180,7 @@ export const BasicDialog = ({width, height, subtitle}: DialogStoryProps) => {
     </>
   )
 }
-
-function CustomHeader({
-  title,
-  subtitle,
-  dialogLabelId,
-  dialogDescriptionId,
-  onClose,
-}: React.PropsWithChildren<DialogProps & {dialogLabelId: string; dialogDescriptionId: string}>) {
-  const onCloseClick = useCallback(() => {
-    onClose('close-button')
-  }, [onClose])
-  if (typeof title === 'string' && typeof subtitle === 'string') {
-    return (
-      <Box bg="accent.subtle">
-        <h1 id={dialogLabelId}>{title.toUpperCase()}</h1>
-        <h2 id={dialogDescriptionId}>{subtitle.toLowerCase()}</h2>
-        <Dialog.CloseButton onClose={onCloseClick} />
-      </Box>
-    )
-  }
-  return null
-}
-function CustomBody({children}: React.PropsWithChildren<DialogProps>) {
-  return <Dialog.Body sx={{bg: 'danger.subtle'}}>{children}</Dialog.Body>
-}
-function CustomFooter({footerButtons}: React.PropsWithChildren<DialogProps>) {
-  return (
-    <Dialog.Footer sx={{bg: 'attention.subtle'}}>
-      {footerButtons ? <Dialog.Buttons buttons={footerButtons} /> : null}
-    </Dialog.Footer>
-  )
-}
-export const WithCustomRenderers = ({width, height, subtitle}: DialogStoryProps) => {
+export const DialogWithCustomRenderers = ({width, height, subtitle}: DialogStoryProps) => {
   const [isOpen, setIsOpen] = useState(false)
   const onDialogClose = useCallback(() => setIsOpen(false), [])
   return (
@@ -200,7 +208,7 @@ export const WithCustomRenderers = ({width, height, subtitle}: DialogStoryProps)
   )
 }
 
-export const StressTest = ({width, height, subtitle}: DialogStoryProps) => {
+export const DialogWithStressTest = ({width, height, subtitle}: DialogStoryProps) => {
   const [isOpen, setIsOpen] = useState(false)
   const [secondOpen, setSecondOpen] = useState(false)
   const buttonRef = useRef<HTMLButtonElement>(null)
@@ -241,3 +249,84 @@ export const StressTest = ({width, height, subtitle}: DialogStoryProps) => {
     </>
   )
 }
+
+export const BasicConfirmationDialog = () => {
+  const [isOpen, setIsOpen] = useState(false)
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const onDialogClose = useCallback(() => setIsOpen(false), [])
+  return (
+    <>
+      <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>
+        Show dialog
+      </Button>
+      {isOpen && (
+        <ConfirmationDialog
+          title="Delete universe?"
+          onClose={onDialogClose}
+          confirmButtonContent="Delete it!"
+          confirmButtonType="danger"
+        >
+          Deleting the universe could have disastrous effects, including but not limited to destroying all life on
+          Earth.
+        </ConfirmationDialog>
+      )}
+    </>
+  )
+}
+
+export const ConfirmationDialogWithShorthandHook = () => {
+  const confirm = useConfirm()
+  const {theme} = useTheme()
+  const onButtonClick = useCallback(
+    async (event: React.MouseEvent) => {
+      if (
+        (await confirm({title: 'Are you sure?', content: 'Do you really want to turn this button green?'})) &&
+        event.target instanceof HTMLElement
+      ) {
+        event.target.style.color = theme?.colors.success.fg ?? 'green'
+        event.target.textContent = "I'm green!"
+      }
+    },
+    [confirm, theme],
+  )
+  return (
+    <Box display="flex" flexDirection="column" alignItems="flex-start">
+      <Button onClick={onButtonClick} sx={{mb: 2}}>
+        Turn me green!
+      </Button>
+      <Button onClick={onButtonClick} sx={{mb: 2}}>
+        Turn me green!
+      </Button>
+      <Button onClick={onButtonClick} sx={{mb: 2}}>
+        Turn me green!
+      </Button>
+      <Button onClick={onButtonClick} sx={{mb: 2}}>
+        Turn me green!
+      </Button>
+    </Box>
+  )
+}
+
+export const ConfirmationDialogWithShorthandHookFromActionMenu = () => {
+  const confirm = useConfirm()
+  const [text, setText] = useState('open me')
+  const onButtonClick = useCallback(async () => {
+    if (await confirm({title: 'Are you sure?', content: 'Do you really want to do a trick?'})) {
+      setText('tada!')
+    }
+  }, [confirm])
+
+  return (
+    <Box display="flex" flexDirection="column" alignItems="flex-start">
+      <ActionMenu>
+        <ActionMenu.Button>{text}</ActionMenu.Button>
+
+        <ActionMenu.Overlay>
+          <ActionList>
+            <ActionList.Item onSelect={onButtonClick}>Do a trick!</ActionList.Item>
+          </ActionList>
+        </ActionMenu.Overlay>
+      </ActionMenu>
+    </Box>
+  )
+}
diff --git a/src/Dialog2/Dialog.stories.tsx b/src/Dialog2/Dialog.stories.tsx
new file mode 100644
index 00000000000..b3a206f2e6e
--- /dev/null
+++ b/src/Dialog2/Dialog.stories.tsx
@@ -0,0 +1,39 @@
+import React, {useState, useRef, useCallback} from 'react'
+import {Meta} from '@storybook/react'
+
+import {BaseStyles, ThemeProvider} from '..'
+import {Button} from '../Button'
+import {Dialog} from './Dialog'
+
+export default {
+  title: 'Drafts/Components/Dialog',
+  component: Dialog,
+  decorators: [
+    Story => {
+      // Since portal roots are registered globally, we need this line so that each storybook
+      // story works in isolation.
+      return (
+        <ThemeProvider>
+          <BaseStyles>
+            <Story />
+          </BaseStyles>
+        </ThemeProvider>
+      )
+    },
+  ],
+} as Meta
+
+export const Default = () => {
+  const [isOpen, setIsOpen] = useState(false)
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const onDialogClose = useCallback(() => setIsOpen(false), [])
+
+  return (
+    <>
+      <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>
+        Show dialog
+      </Button>
+      {isOpen && <Dialog onClose={onDialogClose}>Dialog Content</Dialog>}
+    </>
+  )
+}
diff --git a/src/Dialog/Dialog.tsx b/src/Dialog2/Dialog.tsx
similarity index 100%
rename from src/Dialog/Dialog.tsx
rename to src/Dialog2/Dialog.tsx
diff --git a/src/__tests__/ConfirmationDialog.test.tsx b/src/Dialog2/__tests__/ConfirmationDialog.test.tsx
similarity index 88%
rename from src/__tests__/ConfirmationDialog.test.tsx
rename to src/Dialog2/__tests__/ConfirmationDialog.test.tsx
index 715614d4ba0..82c9fb48055 100644
--- a/src/__tests__/ConfirmationDialog.test.tsx
+++ b/src/Dialog2/__tests__/ConfirmationDialog.test.tsx
@@ -2,15 +2,15 @@ import {render as HTMLRender, act, fireEvent} from '@testing-library/react'
 import {axe} from 'jest-axe'
 import React, {useCallback, useRef, useState} from 'react'
 
-import {ActionMenu} from '../deprecated/ActionMenu'
-import BaseStyles from '../BaseStyles'
-import Box from '../Box'
-import Button from '../deprecated/Button/Button'
-import {ConfirmationDialog, useConfirm} from '../Dialog/ConfirmationDialog'
-import theme from '../theme'
-import {ThemeProvider} from '../ThemeProvider'
-import {SSRProvider} from '../utils/ssr'
-import {behavesAsComponent, checkExports} from '../utils/testing'
+import {ActionMenu} from '../../deprecated/ActionMenu'
+import BaseStyles from '../../BaseStyles'
+import Box from '../../Box'
+import Button from '../../deprecated/Button/Button'
+import {ConfirmationDialog, useConfirm} from '../ConfirmationDialog'
+import theme from '../../theme'
+import {ThemeProvider} from '../../ThemeProvider'
+import {SSRProvider} from '../../utils/ssr'
+import {behavesAsComponent, checkExports} from '../../utils/testing'
 
 declare const REACT_VERSION_LATEST: boolean
 
@@ -80,7 +80,7 @@ describe('ConfirmationDialog', () => {
     options: {skipAs: true, skipSx: true},
   })
 
-  checkExports('Dialog/ConfirmationDialog', {
+  checkExports('Dialog2/ConfirmationDialog', {
     default: undefined,
     useConfirm,
     ConfirmationDialog,
@@ -140,9 +140,7 @@ describe('ConfirmationDialog', () => {
     // REACT_VERSION_LATEST should be treated as a constant for the test
     // environment
     if (REACT_VERSION_LATEST) {
-      // eslint-disable-next-line jest/no-conditional-expect
       expect(spy).toHaveBeenCalledTimes(1)
-      // eslint-disable-next-line jest/no-conditional-expect
       expect(spy).toHaveBeenCalledWith(
         expect.stringContaining('Warning: ReactDOM.render is no longer supported in React 18'),
       )
diff --git a/src/__tests__/Dialog2.types.test.tsx b/src/Dialog2/__tests__/Dialog.types.test.tsx
similarity index 87%
rename from src/__tests__/Dialog2.types.test.tsx
rename to src/Dialog2/__tests__/Dialog.types.test.tsx
index a5774427458..591ccb74a05 100644
--- a/src/__tests__/Dialog2.types.test.tsx
+++ b/src/Dialog2/__tests__/Dialog.types.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import {Dialog} from '../Dialog/Dialog'
+import {Dialog} from '../Dialog'
 
 export function shouldAcceptCallWithNoProps() {
   return <Dialog onClose={() => null} />
diff --git a/src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap b/src/Dialog2/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap
similarity index 100%
rename from src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap
rename to src/Dialog2/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap
diff --git a/src/Dialog2/index.ts b/src/Dialog2/index.ts
new file mode 100644
index 00000000000..8390808a2a1
--- /dev/null
+++ b/src/Dialog2/index.ts
@@ -0,0 +1 @@
+export * from './Dialog'
diff --git a/src/TreeView/TreeView.tsx b/src/TreeView/TreeView.tsx
index d70195cfa90..9ddca3cc74b 100644
--- a/src/TreeView/TreeView.tsx
+++ b/src/TreeView/TreeView.tsx
@@ -8,7 +8,7 @@ import classnames from 'classnames'
 import React from 'react'
 import styled, {keyframes} from 'styled-components'
 import {get} from '../constants'
-import {ConfirmationDialog} from '../Dialog/ConfirmationDialog'
+import {ConfirmationDialog} from '../Dialog2/ConfirmationDialog'
 import {useControllableState} from '../hooks/useControllableState'
 import {useId} from '../hooks/useId'
 import useSafeTimeout from '../hooks/useSafeTimeout'
diff --git a/src/__tests__/storybook.test.tsx b/src/__tests__/storybook.test.tsx
index 5196e26bdf8..0833e37c9eb 100644
--- a/src/__tests__/storybook.test.tsx
+++ b/src/__tests__/storybook.test.tsx
@@ -20,6 +20,7 @@ const allowlist = [
   'CounterLabel',
   'DataTable',
   'Details',
+  'Dialog2',
   'Flash',
   'Heading',
   'IconButton',
diff --git a/src/drafts/index.ts b/src/drafts/index.ts
index 025ff2c959e..32c349be45a 100644
--- a/src/drafts/index.ts
+++ b/src/drafts/index.ts
@@ -21,7 +21,7 @@ export type {
   TableActionsProps,
 } from '../DataTable'
 
-export * from '../Dialog/Dialog'
+export * from '../Dialog2'
 
 export * from '../Hidden'
 
diff --git a/src/index.ts b/src/index.ts
index 3fe9d3bf285..6155c4fa3c3 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -34,7 +34,7 @@ export type {TouchOrMouseEvent} from './hooks/useOnOutsideClick'
 export {useOpenAndCloseFocus} from './hooks/useOpenAndCloseFocus'
 export {useOnEscapePress} from './hooks/useOnEscapePress'
 export {useOverlay} from './hooks/useOverlay'
-export {useConfirm} from './Dialog/ConfirmationDialog'
+export {useConfirm} from './Dialog2/ConfirmationDialog'
 export {useFocusTrap} from './hooks/useFocusTrap'
 export type {FocusTrapHookSettings} from './hooks/useFocusTrap'
 export {useFocusZone} from './hooks/useFocusZone'
@@ -86,8 +86,8 @@ export {default as Details} from './Details'
 export type {DetailsProps} from './Details'
 export {default as Dialog} from './Dialog'
 export type {DialogProps, DialogHeaderProps} from './Dialog'
-export type {ConfirmationDialogProps} from './Dialog/ConfirmationDialog'
-export {ConfirmationDialog} from './Dialog/ConfirmationDialog'
+export type {ConfirmationDialogProps} from './Dialog2/ConfirmationDialog'
+export {ConfirmationDialog} from './Dialog2/ConfirmationDialog'
 export {default as FilteredSearch} from './FilteredSearch'
 export type {FilteredSearchProps} from './FilteredSearch'
 export {default as FilterList} from './FilterList'
diff --git a/src/stories/ConfirmationDialog.stories.tsx b/src/stories/ConfirmationDialog.stories.tsx
deleted file mode 100644
index 6f5668a4b32..00000000000
--- a/src/stories/ConfirmationDialog.stories.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import React, {useState, useRef, useCallback} from 'react'
-import {Meta} from '@storybook/react'
-import {BaseStyles, Box, ThemeProvider, useTheme} from '..'
-import {Button} from '../Button'
-import {ActionMenu} from '../ActionMenu'
-import {ActionList} from '../ActionList'
-import {ConfirmationDialog, useConfirm} from '../Dialog/ConfirmationDialog'
-
-export default {
-  title: 'Components/ConfirmationDialog',
-  component: ConfirmationDialog,
-  decorators: [
-    Story => {
-      // Since portal roots are registered globally, we need this line so that each storybook
-      // story works in isolation.
-      return (
-        <ThemeProvider>
-          <BaseStyles>
-            <Story />
-          </BaseStyles>
-        </ThemeProvider>
-      )
-    },
-  ],
-} as Meta
-
-export const BasicConfirmationDialog = () => {
-  const [isOpen, setIsOpen] = useState(false)
-  const buttonRef = useRef<HTMLButtonElement>(null)
-  const onDialogClose = useCallback(() => setIsOpen(false), [])
-  return (
-    <>
-      <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>
-        Show dialog
-      </Button>
-      {isOpen && (
-        <ConfirmationDialog
-          title="Delete universe?"
-          onClose={onDialogClose}
-          confirmButtonContent="Delete it!"
-          confirmButtonType="danger"
-        >
-          Deleting the universe could have disastrous effects, including but not limited to destroying all life on
-          Earth.
-        </ConfirmationDialog>
-      )}
-    </>
-  )
-}
-
-export const ShorthandHook = () => {
-  const confirm = useConfirm()
-  const {theme} = useTheme()
-  const onButtonClick = useCallback(
-    async (event: React.MouseEvent) => {
-      if (
-        (await confirm({title: 'Are you sure?', content: 'Do you really want to turn this button green?'})) &&
-        event.target instanceof HTMLElement
-      ) {
-        event.target.style.color = theme?.colors.success.fg ?? 'green'
-        event.target.textContent = "I'm green!"
-      }
-    },
-    [confirm, theme],
-  )
-  return (
-    <Box display="flex" flexDirection="column" alignItems="flex-start">
-      <Button onClick={onButtonClick} sx={{mb: 2}}>
-        Turn me green!
-      </Button>
-      <Button onClick={onButtonClick} sx={{mb: 2}}>
-        Turn me green!
-      </Button>
-      <Button onClick={onButtonClick} sx={{mb: 2}}>
-        Turn me green!
-      </Button>
-      <Button onClick={onButtonClick} sx={{mb: 2}}>
-        Turn me green!
-      </Button>
-    </Box>
-  )
-}
-
-export const ShorthandHookFromActionMenu = () => {
-  const confirm = useConfirm()
-  const [text, setText] = useState('open me')
-  const onButtonClick = useCallback(async () => {
-    if (await confirm({title: 'Are you sure?', content: 'Do you really want to do a trick?'})) {
-      setText('tada!')
-    }
-  }, [confirm])
-
-  return (
-    <Box display="flex" flexDirection="column" alignItems="flex-start">
-      <ActionMenu>
-        <ActionMenu.Button>{text}</ActionMenu.Button>
-
-        <ActionMenu.Overlay>
-          <ActionList>
-            <ActionList.Item onSelect={onButtonClick}>Do a trick!</ActionList.Item>
-          </ActionList>
-        </ActionMenu.Overlay>
-      </ActionMenu>
-    </Box>
-  )
-}