From d9894b2ff9f09bd138bff79efbffea1ce3f9a009 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kr=C3=A6n=20Hansen?= <kraen.hansen@mongodb.com>
Date: Thu, 18 Dec 2025 13:19:05 +0100
Subject: [PATCH 01/42] Upgrade LG modal packages

---
 package-lock.json                        | 648 +++++++++++------------
 package.json                             |   6 +-
 packages/compass-components/package.json |   6 +-
 3 files changed, 325 insertions(+), 335 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 42f215e21a4..1ddbab084b0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6322,9 +6322,9 @@
       }
     },
     "node_modules/@floating-ui/react/node_modules/tabbable": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
-      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==",
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.3.0.tgz",
+      "integrity": "sha512-EIHvdY5bPLuWForiR/AN2Bxngzpuwn1is4asboytXtpTgsArc+WmSJKVLlhdh71u7jFcryDqB2A8lQvj78MkyQ==",
       "license": "MIT"
     },
     "node_modules/@floating-ui/utils": {
@@ -6835,9 +6835,9 @@
       }
     },
     "node_modules/@leafygreen-ui/checkbox": {
-      "version": "18.1.3",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/checkbox/-/checkbox-18.1.3.tgz",
-      "integrity": "sha512-DwrJSVEo3J/rdWUpBcvHSaSVbyIb1Quvdu8Ok5Lmy6vT/ARfM1aM2KzheDQ25E2ArY7c/lsBf0T0qmIvYu2J3w==",
+      "version": "18.1.4",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/checkbox/-/checkbox-18.1.4.tgz",
+      "integrity": "sha512-aWVkalPdUUuUCt0iUaDg+z1ktusu18PfUbcR5zoLpQyIymeZK9mhsM/LdKAkQKt7mT2ExLeFzMzuSenRLVG8jg==",
       "license": "Apache-2.0",
       "dependencies": {
         "@leafygreen-ui/a11y": "^3.0.5",
@@ -6845,8 +6845,8 @@
         "@leafygreen-ui/hooks": "^9.3.0",
         "@leafygreen-ui/lib": "^15.6.2",
         "@leafygreen-ui/palette": "^5.0.2",
-        "@leafygreen-ui/tokens": "^4.0.0",
-        "@leafygreen-ui/typography": "^22.2.2",
+        "@leafygreen-ui/tokens": "^4.1.0",
+        "@leafygreen-ui/typography": "^22.2.3",
         "@lg-tools/test-harnesses": "^0.3.4",
         "react-transition-group": "^4.4.5"
       },
@@ -6855,26 +6855,26 @@
       }
     },
     "node_modules/@leafygreen-ui/chip": {
-      "version": "4.0.9",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/chip/-/chip-4.0.9.tgz",
-      "integrity": "sha512-TDk63YkB1WVfb4yDMOC0qq4OVkI4EVqOnQ/kIFna7MGy0W74829M5qqPg4Emzb8E0ayhfoCzyqonPdobdUvkmQ==",
+      "version": "4.0.10",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/chip/-/chip-4.0.10.tgz",
+      "integrity": "sha512-+zJxpwo9hVxryJEmiayjKm8W20+MOF61ngh3eOzebaK8JWPVut0TL+vcNh1Ja4mvhdIn3RtLAAmhZKx/nGfvSg==",
       "license": "Apache-2.0",
       "dependencies": {
         "@leafygreen-ui/emotion": "^5.1.0",
-        "@leafygreen-ui/icon": "^14.7.0",
-        "@leafygreen-ui/inline-definition": "^9.1.3",
+        "@leafygreen-ui/icon": "^14.7.1",
+        "@leafygreen-ui/inline-definition": "^9.1.4",
         "@leafygreen-ui/lib": "^15.6.2",
         "@leafygreen-ui/palette": "^5.0.2",
-        "@leafygreen-ui/tokens": "^4.0.0"
+        "@leafygreen-ui/tokens": "^4.1.0"
       },
       "peerDependencies": {
         "@leafygreen-ui/leafygreen-provider": "^5.0.0 || ^4.0.0 || ^3.2.0"
       }
     },
     "node_modules/@leafygreen-ui/code": {
-      "version": "20.2.5",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/code/-/code-20.2.5.tgz",
-      "integrity": "sha512-/gX0OKgO1HKIkIwsiXIlmxio5pVltTuz/LDmedNnNd5ZLJO2ZAsfK2JKHis4pxwfZHhtE+Ootq3jvMygbXbOwg==",
+      "version": "20.2.4",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/code/-/code-20.2.4.tgz",
+      "integrity": "sha512-qoqEmBoZa/Y/DOTconrkyfTDXgHfCiBQccWBLixYCtBPSsC5MQfAgoe5mTSP5dhNfW5RtjjPkZaezAiSmnayhA==",
       "license": "Apache-2.0",
       "dependencies": {
         "@leafygreen-ui/a11y": "^3.0.5",
@@ -6905,24 +6905,24 @@
       }
     },
     "node_modules/@leafygreen-ui/combobox": {
-      "version": "12.2.1",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/combobox/-/combobox-12.2.1.tgz",
-      "integrity": "sha512-nppvD3nWO3KmAlMQBVDlgRlll1bATnbcpoXo/gEws3bf2Jn8Yq54ywf783bSX1HkZysSCsjpVLxgIGhbcX7nwA==",
+      "version": "12.3.0",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/combobox/-/combobox-12.3.0.tgz",
+      "integrity": "sha512-NjRydZxbp7Ah4bzUNSHDU4glmvMxhtQBv8C0Zagg9EWoqq+q1YIbhC4yQT2k3LhatdYMXTZq8fSC9liVe+QI7Q==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@leafygreen-ui/checkbox": "^18.1.3",
-        "@leafygreen-ui/chip": "^4.0.9",
+        "@leafygreen-ui/checkbox": "^18.1.4",
+        "@leafygreen-ui/chip": "^4.0.10",
         "@leafygreen-ui/emotion": "^5.1.0",
-        "@leafygreen-ui/form-field": "^4.0.7",
+        "@leafygreen-ui/form-field": "^4.0.8",
         "@leafygreen-ui/hooks": "^9.3.0",
-        "@leafygreen-ui/icon": "^14.7.0",
-        "@leafygreen-ui/icon-button": "^17.1.3",
-        "@leafygreen-ui/input-option": "^4.1.3",
+        "@leafygreen-ui/icon": "^14.7.1",
+        "@leafygreen-ui/icon-button": "^17.1.4",
+        "@leafygreen-ui/input-option": "^4.1.4",
         "@leafygreen-ui/lib": "^15.6.2",
         "@leafygreen-ui/palette": "^5.0.2",
         "@leafygreen-ui/popover": "^14.3.1",
-        "@leafygreen-ui/tokens": "^4.0.0",
-        "@leafygreen-ui/typography": "^22.2.2",
+        "@leafygreen-ui/tokens": "^4.1.0",
+        "@leafygreen-ui/typography": "^22.2.3",
         "chalk": "^4.1.2",
         "lodash": "^4.17.21",
         "polished": "^4.2.2"
@@ -6932,40 +6932,40 @@
       }
     },
     "node_modules/@leafygreen-ui/confirmation-modal": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/confirmation-modal/-/confirmation-modal-8.0.1.tgz",
-      "integrity": "sha512-tZGavYwuBQ0EiL8LPJivM/qo1JQn/frBKj2/g1/9Ul+1vwr3EX2krtnWUV+66T4xSkLCZID3JtDftdohlc7Kkg==",
+      "version": "10.2.4",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/confirmation-modal/-/confirmation-modal-10.2.4.tgz",
+      "integrity": "sha512-xoCSjYIMxg97tIHEXjUchcBJ0/6Dsswl1iMemsJY6lUmqZdV4HVrfcJSS3ylziAN+cKBK8JH/wwL64FcM0e4RA==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@leafygreen-ui/button": "^24.0.1",
-        "@leafygreen-ui/emotion": "^5.0.0",
-        "@leafygreen-ui/icon": "^14.0.0",
-        "@leafygreen-ui/lib": "^15.0.0",
-        "@leafygreen-ui/modal": "^18.0.1",
-        "@leafygreen-ui/palette": "^5.0.0",
-        "@leafygreen-ui/text-input": "^15.0.1",
-        "@leafygreen-ui/tokens": "^3.1.0",
-        "@leafygreen-ui/typography": "^21.0.1"
+        "@leafygreen-ui/button": "^25.1.3",
+        "@leafygreen-ui/emotion": "^5.1.0",
+        "@leafygreen-ui/icon": "^14.7.1",
+        "@leafygreen-ui/lib": "^15.7.0",
+        "@leafygreen-ui/modal": "^21.0.0",
+        "@leafygreen-ui/palette": "^5.0.2",
+        "@leafygreen-ui/text-input": "^16.2.2",
+        "@leafygreen-ui/tokens": "^4.1.0",
+        "@leafygreen-ui/typography": "^22.2.3"
       },
       "peerDependencies": {
-        "@leafygreen-ui/leafygreen-provider": "^5.0.0"
+        "@leafygreen-ui/leafygreen-provider": "^5.0.0 || ^4.0.0 || ^3.2.0"
       }
     },
     "node_modules/@leafygreen-ui/copyable": {
-      "version": "12.0.1",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/copyable/-/copyable-12.0.1.tgz",
-      "integrity": "sha512-tf6mjjHQu/ZtuHSu88Vv71ZB+wVE4QT+ahRbPC61CSPY34EjHdKXic4/k/DF5Pl40DTB2vQZbU/T4aqVAaZgYQ==",
+      "version": "12.0.2",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/copyable/-/copyable-12.0.2.tgz",
+      "integrity": "sha512-tE23eBGVPn7u16gdFAt9182lrqMOf2y8DOZi/vHp9L2JtI4+0bwFxFVkJqjn+Y10UtD3Fe8/NY2yJ11kpMTlhA==",
       "license": "Apache-2.0",
       "dependencies": {
         "@leafygreen-ui/button": "^25.1.3",
         "@leafygreen-ui/emotion": "^5.1.0",
         "@leafygreen-ui/hooks": "^9.3.0",
-        "@leafygreen-ui/icon": "^14.7.0",
+        "@leafygreen-ui/icon": "^14.7.1",
         "@leafygreen-ui/lib": "^15.6.2",
         "@leafygreen-ui/palette": "^5.0.2",
-        "@leafygreen-ui/tokens": "^4.0.0",
-        "@leafygreen-ui/tooltip": "^14.2.3",
-        "@leafygreen-ui/typography": "^22.2.2",
+        "@leafygreen-ui/tokens": "^4.1.0",
+        "@leafygreen-ui/tooltip": "^14.3.0",
+        "@leafygreen-ui/typography": "^22.2.3",
         "clipboard": "^2.0.6",
         "polished": "^4.2.2"
       },
@@ -6988,24 +6988,24 @@
       }
     },
     "node_modules/@leafygreen-ui/drawer": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/drawer/-/drawer-5.1.3.tgz",
-      "integrity": "sha512-mKZhcAcdmvTt2SAiVsp5aoRm7xZXxalKvV5dpbWOh4p0YfDZJ3AtXhdLouTUe6u/90x4JWTcb3R3K2FdDwsNAw==",
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/drawer/-/drawer-5.2.0.tgz",
+      "integrity": "sha512-6HK481NmDWddRdSKK61A2vWLazqF5BxnONnNtjn+kBjlOndKaVCguEhrMqMSIPL6y2BstBhpcq5EYK8x5PjDdQ==",
       "license": "Apache-2.0",
       "dependencies": {
         "@leafygreen-ui/button": "^25.1.3",
         "@leafygreen-ui/emotion": "^5.1.0",
         "@leafygreen-ui/hooks": "^9.3.0",
-        "@leafygreen-ui/icon": "^14.7.0",
-        "@leafygreen-ui/icon-button": "^17.1.3",
+        "@leafygreen-ui/icon": "^14.7.1",
+        "@leafygreen-ui/icon-button": "^17.1.4",
         "@leafygreen-ui/lib": "^15.6.2",
         "@leafygreen-ui/palette": "^5.0.2",
         "@leafygreen-ui/polymorphic": "^3.1.0",
         "@leafygreen-ui/resizable": "^0.1.3",
-        "@leafygreen-ui/tabs": "^17.0.7",
-        "@leafygreen-ui/tokens": "^4.0.0",
-        "@leafygreen-ui/toolbar": "^1.1.3",
-        "@leafygreen-ui/typography": "^22.2.2",
+        "@leafygreen-ui/tabs": "^17.0.8",
+        "@leafygreen-ui/tokens": "^4.1.0",
+        "@leafygreen-ui/toolbar": "^1.2.0",
+        "@leafygreen-ui/typography": "^22.2.3",
         "@lg-tools/test-harnesses": "^0.3.4",
         "polished": "^4.2.2",
         "react-intersection-observer": "^8.25.1"
@@ -7025,40 +7025,40 @@
       }
     },
     "node_modules/@leafygreen-ui/form-field": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/form-field/-/form-field-4.0.7.tgz",
-      "integrity": "sha512-yCTCdPnHJbrmzV4HyZrXebzDacL0ElfCz6o4MWZlwRazQFGQnB6L3Ewf3fFUo53w6oO4o10iygCpXeuvrUaj7A==",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/form-field/-/form-field-4.0.8.tgz",
+      "integrity": "sha512-rkdC0aXUEx8O/Y7ktFAFpqzNo3TcAYi7LyxrCy6RxnKSfqMheRl4cvb4XYrU5s84/BzKtBCPSmUav0kxN8PWDg==",
       "license": "Apache-2.0",
       "dependencies": {
         "@leafygreen-ui/emotion": "^5.1.0",
         "@leafygreen-ui/hooks": "^9.3.0",
-        "@leafygreen-ui/icon": "^14.7.0",
+        "@leafygreen-ui/icon": "^14.7.1",
         "@leafygreen-ui/lib": "^15.6.2",
         "@leafygreen-ui/palette": "^5.0.2",
-        "@leafygreen-ui/tokens": "^4.0.0",
-        "@leafygreen-ui/typography": "^22.2.2"
+        "@leafygreen-ui/tokens": "^4.1.0",
+        "@leafygreen-ui/typography": "^22.2.3"
       },
       "peerDependencies": {
         "@leafygreen-ui/leafygreen-provider": "^5.0.0 || ^4.0.0 || ^3.2.0"
       }
     },
     "node_modules/@leafygreen-ui/guide-cue": {
-      "version": "8.1.1",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/guide-cue/-/guide-cue-8.1.1.tgz",
-      "integrity": "sha512-daef5lBRwCCmjoqh1EGv/00kJdlWx2Gw78fxYeJcaRSQ/D3Q97xZldul7UKNl8w/PVmBDMonnXUjrcNSPbHiww==",
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/guide-cue/-/guide-cue-8.2.0.tgz",
+      "integrity": "sha512-YDNcu+DA4aOE9QxI/TujT/v7h0YXz07rQpBcrew+7dIhDp3NcuNLN39SYegz5Gi6br+rhEQh8n7dowBHhVM6iw==",
       "license": "Apache-2.0",
       "dependencies": {
         "@leafygreen-ui/a11y": "^3.0.5",
         "@leafygreen-ui/button": "^25.1.3",
         "@leafygreen-ui/emotion": "^5.1.0",
         "@leafygreen-ui/hooks": "^9.3.0",
-        "@leafygreen-ui/icon": "^14.7.0",
-        "@leafygreen-ui/icon-button": "^17.1.3",
+        "@leafygreen-ui/icon": "^14.7.1",
+        "@leafygreen-ui/icon-button": "^17.1.4",
         "@leafygreen-ui/lib": "^15.6.2",
         "@leafygreen-ui/palette": "^5.0.2",
         "@leafygreen-ui/popover": "^14.3.1",
-        "@leafygreen-ui/tooltip": "^14.2.3",
-        "@leafygreen-ui/typography": "^22.2.2",
+        "@leafygreen-ui/tooltip": "^14.3.0",
+        "@leafygreen-ui/typography": "^22.2.3",
         "focus-trap": "6.9.4",
         "focus-trap-react": "9.0.2",
         "polished": "^4.2.2"
@@ -7109,33 +7109,33 @@
       }
     },
     "node_modules/@leafygreen-ui/info-sprinkle": {
-      "version": "5.0.9",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/info-sprinkle/-/info-sprinkle-5.0.9.tgz",
-      "integrity": "sha512-gkluPoZj5j5kbkwDVhaaVBAzgyEtonTJ/Vo4neFp8i1ngcxqF3iYF0biLq2BWK1wRnO7qT0P5/pUBX1VjczJ1g==",
+      "version": "5.0.10",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/info-sprinkle/-/info-sprinkle-5.0.10.tgz",
+      "integrity": "sha512-t9oJsRGfvgdTenR27EdwIxAExhBaHuYkFWWoYD+48RWQHh+fpVWUIGEHtehjI4/WNOI9MBRMAKrds2dkt6s6Ig==",
       "license": "Apache-2.0",
       "dependencies": {
         "@leafygreen-ui/emotion": "^5.1.0",
-        "@leafygreen-ui/icon": "^14.7.0",
+        "@leafygreen-ui/icon": "^14.7.1",
         "@leafygreen-ui/lib": "^15.6.2",
         "@leafygreen-ui/palette": "^5.0.2",
-        "@leafygreen-ui/tokens": "^4.0.0",
-        "@leafygreen-ui/tooltip": "^14.2.3"
+        "@leafygreen-ui/tokens": "^4.1.0",
+        "@leafygreen-ui/tooltip": "^14.3.0"
       },
       "peerDependencies": {
         "@leafygreen-ui/leafygreen-provider": "^5.0.0 || ^4.0.0 || ^3.2.0"
       }
     },
     "node_modules/@leafygreen-ui/inline-definition": {
-      "version": "9.1.3",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/inline-definition/-/inline-definition-9.1.3.tgz",
-      "integrity": "sha512-X+Zde5bdZI5oyd3Lk9lRAK4qOHDyWZPtL62Mf39UBtSxwW5/6qVubohXmdVXIll54LDVyoBP43Ip2ZpVKVvsvA==",
+      "version": "9.1.4",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/inline-definition/-/inline-definition-9.1.4.tgz",
+      "integrity": "sha512-97Sv/dO/ePXPH+MGQZf0O4ccjuoxurIBgim4fKcWp/FFL98SqE6opHvYM9LDvbZfXxHokCQSW3/EXtbCRbUpGw==",
       "license": "Apache-2.0",
       "dependencies": {
         "@leafygreen-ui/emotion": "^5.1.0",
         "@leafygreen-ui/lib": "^15.6.2",
         "@leafygreen-ui/palette": "^5.0.2",
-        "@leafygreen-ui/tokens": "^4.0.0",
-        "@leafygreen-ui/tooltip": "^14.2.3"
+        "@leafygreen-ui/tokens": "^4.1.0",
+        "@leafygreen-ui/tooltip": "^14.3.0"
       },
       "peerDependencies": {
         "@leafygreen-ui/leafygreen-provider": "^5.0.0 || ^4.0.0 || ^3.2.0"
@@ -7194,41 +7194,41 @@
       }
     },
     "node_modules/@leafygreen-ui/marketing-modal": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/marketing-modal/-/marketing-modal-6.1.0.tgz",
-      "integrity": "sha512-rqElAWR0ObLQ4lH+QxZu9In1mJMvmHU9MDqkRXH8nlIGYm4YTJHtf0UrkzaqOxOnrsB06l48q8uKDpc5nGb35A==",
+      "version": "8.1.7",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/marketing-modal/-/marketing-modal-8.1.7.tgz",
+      "integrity": "sha512-TIJfxA+35+6ruPev0g8Lc/XDpIHBK5mYOSbj5pB9J5wJnV/PWYZvzIcDqco5bv8IvkL5TmO3fF+OIVwBfoZpIA==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@leafygreen-ui/button": "^25.0.1",
-        "@leafygreen-ui/emotion": "^5.0.0",
-        "@leafygreen-ui/lib": "^15.2.0",
-        "@leafygreen-ui/modal": "^19.0.1",
-        "@leafygreen-ui/palette": "^5.0.0",
-        "@leafygreen-ui/tokens": "^3.2.1",
-        "@leafygreen-ui/typography": "^22.1.0"
+        "@leafygreen-ui/button": "^25.1.3",
+        "@leafygreen-ui/emotion": "^5.1.0",
+        "@leafygreen-ui/lib": "^15.7.0",
+        "@leafygreen-ui/modal": "^21.0.0",
+        "@leafygreen-ui/palette": "^5.0.2",
+        "@leafygreen-ui/tokens": "^4.1.0",
+        "@leafygreen-ui/typography": "^22.2.3"
       },
       "peerDependencies": {
-        "@leafygreen-ui/leafygreen-provider": "^5.0.2"
+        "@leafygreen-ui/leafygreen-provider": "^5.0.0 || ^4.0.0 || ^3.2.0"
       }
     },
     "node_modules/@leafygreen-ui/menu": {
-      "version": "33.0.1",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/menu/-/menu-33.0.1.tgz",
-      "integrity": "sha512-D4S8r39YHPRNJ7g9UPMYRdj0FDLSQNxBHyx9jjMRbFR8mgxeqo+fYzwQmpEXo4nTor6mO8rOOSjVBAGrDLhiqQ==",
+      "version": "33.1.0",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/menu/-/menu-33.1.0.tgz",
+      "integrity": "sha512-vY4F4PzqcL7WyHWY+sUc4WpitCjPs0e3BuNSK+yEAHCixABiAu+wyEA42MIff4+4BqrJkwRE0z/iU6kVvwU84w==",
       "license": "Apache-2.0",
       "dependencies": {
         "@leafygreen-ui/descendants": "^3.0.6",
         "@leafygreen-ui/emotion": "^5.1.0",
         "@leafygreen-ui/hooks": "^9.3.0",
-        "@leafygreen-ui/icon": "^14.7.0",
-        "@leafygreen-ui/icon-button": "^17.1.3",
-        "@leafygreen-ui/input-option": "^4.1.3",
+        "@leafygreen-ui/icon": "^14.7.1",
+        "@leafygreen-ui/icon-button": "^17.1.4",
+        "@leafygreen-ui/input-option": "^4.1.4",
         "@leafygreen-ui/lib": "^15.6.2",
         "@leafygreen-ui/palette": "^5.0.2",
         "@leafygreen-ui/polymorphic": "^3.1.0",
         "@leafygreen-ui/popover": "^14.3.1",
-        "@leafygreen-ui/tokens": "^4.0.0",
-        "@leafygreen-ui/typography": "^22.2.2",
+        "@leafygreen-ui/tokens": "^4.1.0",
+        "@leafygreen-ui/typography": "^22.2.3",
         "lodash": "^4.17.21",
         "polished": "^4.3.1",
         "react-transition-group": "^4.4.5"
@@ -7238,27 +7238,23 @@
       }
     },
     "node_modules/@leafygreen-ui/modal": {
-      "version": "18.0.1",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/modal/-/modal-18.0.1.tgz",
-      "integrity": "sha512-PTJ+jSf8wEgZhm2ZPSRw3QXGDAYMIGckPUGRVeRAI24lcr9ZHWEXng45zBaS5OUqoWn4LFufLpUjq5RN/H8nuw==",
+      "version": "21.0.0",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/modal/-/modal-21.0.0.tgz",
+      "integrity": "sha512-Eyo4/oKXcRlrts6ss4Zoeh4PUk56Y+vsinsPMppPR3/yqz1NUyVrH5ufyztC4OSdYRcnlATH1MRvCKKtRQ926Q==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@leafygreen-ui/emotion": "^5.0.0",
-        "@leafygreen-ui/hooks": "^9.0.0",
-        "@leafygreen-ui/icon": "^14.0.0",
-        "@leafygreen-ui/icon-button": "^17.0.1",
-        "@leafygreen-ui/lib": "^15.0.0",
-        "@leafygreen-ui/palette": "^5.0.0",
-        "@leafygreen-ui/portal": "^7.0.0",
-        "@leafygreen-ui/tokens": "^3.1.0",
-        "@lg-tools/test-harnesses": "^0.3.1",
-        "focus-trap": "6.9.4",
-        "focus-trap-react": "^9.0.2",
-        "polished": "^4.2.2",
-        "react-transition-group": "^4.4.5"
+        "@leafygreen-ui/emotion": "^5.1.0",
+        "@leafygreen-ui/hooks": "^9.3.0",
+        "@leafygreen-ui/icon": "^14.7.1",
+        "@leafygreen-ui/icon-button": "^17.1.4",
+        "@leafygreen-ui/lib": "^15.7.0",
+        "@leafygreen-ui/palette": "^5.0.2",
+        "@leafygreen-ui/tokens": "^4.1.0",
+        "@lg-tools/test-harnesses": "^0.3.4",
+        "polished": "^4.2.2"
       },
       "peerDependencies": {
-        "@leafygreen-ui/leafygreen-provider": "^5.0.0"
+        "@leafygreen-ui/leafygreen-provider": "^5.0.0 || ^4.0.0 || ^3.2.0"
       }
     },
     "node_modules/@leafygreen-ui/palette": {
@@ -7268,18 +7264,18 @@
       "license": "Apache-2.0"
     },
     "node_modules/@leafygreen-ui/pipeline": {
-      "version": "8.0.8",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/pipeline/-/pipeline-8.0.8.tgz",
-      "integrity": "sha512-oFRNB+5AH4ASXm0Rt4N6HT395Q3i58e0KMXliI3FKNcsAjjQeydDV3YlyTPxgWqLCokVrRCfnN/jOhymQ1b9iA==",
+      "version": "8.0.9",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/pipeline/-/pipeline-8.0.9.tgz",
+      "integrity": "sha512-OMzttGdSPuPYA7tCdmUecsZpeM9Fh11htOkmtqeI++eP/Jwj+7euCDUgnMUXpiY+O41qP27ona4FvzmFkswilA==",
       "license": "Apache-2.0",
       "dependencies": {
         "@leafygreen-ui/emotion": "^5.1.0",
         "@leafygreen-ui/hooks": "^9.3.0",
-        "@leafygreen-ui/icon": "^14.7.0",
+        "@leafygreen-ui/icon": "^14.7.1",
         "@leafygreen-ui/lib": "^15.6.2",
         "@leafygreen-ui/palette": "^5.0.2",
-        "@leafygreen-ui/tokens": "^4.0.0",
-        "@leafygreen-ui/tooltip": "^14.2.3",
+        "@leafygreen-ui/tokens": "^4.1.0",
+        "@leafygreen-ui/tooltip": "^14.3.0",
         "react-intersection-observer": "^8.25.1"
       },
       "peerDependencies": {
@@ -7368,17 +7364,17 @@
       }
     },
     "node_modules/@leafygreen-ui/radio-group": {
-      "version": "13.0.10",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/radio-group/-/radio-group-13.0.10.tgz",
-      "integrity": "sha512-ui59w/8B9QvR6s84WCsR8Hk2VTktQ1MlNsDDfV47K8cShA86AMo/tHTBpL0eUEkf1mefbl4n6iqLZiU4+fV5CA==",
+      "version": "13.0.11",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/radio-group/-/radio-group-13.0.11.tgz",
+      "integrity": "sha512-2FE716AspLbY5PchLwgkZs2PfIOXPdNjxrTOzAGOzkamt8oheq1n3KxDeQ5N3FFaTA4kUOVMFFKdgCRlYG+FcA==",
       "license": "Apache-2.0",
       "dependencies": {
         "@leafygreen-ui/emotion": "^5.1.0",
         "@leafygreen-ui/hooks": "^9.3.0",
         "@leafygreen-ui/lib": "^15.6.2",
         "@leafygreen-ui/palette": "^5.0.2",
-        "@leafygreen-ui/tokens": "^4.0.0",
-        "@leafygreen-ui/typography": "^22.2.2"
+        "@leafygreen-ui/tokens": "^4.1.0",
+        "@leafygreen-ui/typography": "^22.2.3"
       },
       "peerDependencies": {
         "@leafygreen-ui/leafygreen-provider": "^5.0.0 || ^4.0.0 || ^3.2.0"
@@ -7430,19 +7426,19 @@
       }
     },
     "node_modules/@leafygreen-ui/segmented-control": {
-      "version": "11.0.11",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/segmented-control/-/segmented-control-11.0.11.tgz",
-      "integrity": "sha512-ACheq8dbVz20qwK4u+FKT35mF0WqEStILwEdfcU54dh3/JzjBmA/+/5aJ7+W25N+Lbx6Gh/aZXEMhnJjj5LHCQ==",
+      "version": "11.0.12",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/segmented-control/-/segmented-control-11.0.12.tgz",
+      "integrity": "sha512-VU2ZNhIm6WL/kv8hPoPXeVG7VX/bTlx/rzARUZ8QrLbr+6Wp4VntE22nM2XmuZ3gQLMALamBA6Mi/Dlv8CnSNg==",
       "license": "Apache-2.0",
       "dependencies": {
         "@leafygreen-ui/emotion": "^5.1.0",
         "@leafygreen-ui/hooks": "^9.3.0",
-        "@leafygreen-ui/icon": "^14.7.0",
+        "@leafygreen-ui/icon": "^14.7.1",
         "@leafygreen-ui/lib": "^15.6.2",
         "@leafygreen-ui/palette": "^5.0.2",
         "@leafygreen-ui/polymorphic": "^3.1.0",
-        "@leafygreen-ui/tokens": "^4.0.0",
-        "@leafygreen-ui/typography": "^22.2.2",
+        "@leafygreen-ui/tokens": "^4.1.0",
+        "@leafygreen-ui/typography": "^22.2.3",
         "lodash": "^4.17.21",
         "polished": "^4.2.2"
       },
@@ -7504,42 +7500,41 @@
       }
     },
     "node_modules/@leafygreen-ui/split-button": {
-      "version": "6.1.7",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/split-button/-/split-button-6.1.7.tgz",
-      "integrity": "sha512-TGpJHUKB2jcUgBp76usP339Q4e3XIjQwMjNLhSebXqNF1mov9CgtkREP6cPsmUkPO6Gj44QfM6bdwniP3abthg==",
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/split-button/-/split-button-6.2.0.tgz",
+      "integrity": "sha512-i/h83Z6nK+Eot3pnuI87qT+psz26nlGe1eHJ5BnOUDfwnxhb5yPZeV+zAmSoKOKtT8JTrHooEKxqNovsg4vJwg==",
       "license": "Apache-2.0",
       "dependencies": {
         "@leafygreen-ui/button": "^25.1.3",
         "@leafygreen-ui/emotion": "^5.1.0",
         "@leafygreen-ui/hooks": "^9.3.0",
-        "@leafygreen-ui/icon": "^14.7.0",
+        "@leafygreen-ui/icon": "^14.7.1",
         "@leafygreen-ui/lib": "^15.6.2",
-        "@leafygreen-ui/menu": "^33.0.1",
+        "@leafygreen-ui/menu": "^33.1.0",
         "@leafygreen-ui/palette": "^5.0.2",
         "@leafygreen-ui/polymorphic": "^3.1.0",
-        "@leafygreen-ui/popover": "^14.3.1",
-        "@leafygreen-ui/tokens": "^4.0.0"
+        "@leafygreen-ui/tokens": "^4.1.0"
       },
       "peerDependencies": {
         "@leafygreen-ui/leafygreen-provider": "^5.0.0 || ^4.0.0 || ^3.2.0"
       }
     },
     "node_modules/@leafygreen-ui/table": {
-      "version": "15.2.1",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/table/-/table-15.2.1.tgz",
-      "integrity": "sha512-0NRUKTV4sFSuyEzwAz8JCvKYpL43PDNVZMvVP834RMCpKqeXEfTTb8xEt5xGXPiYP0t/efXc8r/ON4AaJ6TwWQ==",
+      "version": "15.2.2",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/table/-/table-15.2.2.tgz",
+      "integrity": "sha512-KAkloT8It3L+PbZYAGvSiTtRx4zbLjiyzIHifA0y+DvYo7aoDh2x6hHf4PsD7hn/Tu3NkxQrvxC/wykAMdB39g==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@leafygreen-ui/checkbox": "^18.1.3",
+        "@leafygreen-ui/checkbox": "^18.1.4",
         "@leafygreen-ui/emotion": "^5.1.0",
         "@leafygreen-ui/hooks": "^9.3.0",
-        "@leafygreen-ui/icon": "^14.7.0",
-        "@leafygreen-ui/icon-button": "^17.1.3",
+        "@leafygreen-ui/icon": "^14.7.1",
+        "@leafygreen-ui/icon-button": "^17.1.4",
         "@leafygreen-ui/lib": "^15.6.2",
         "@leafygreen-ui/palette": "^5.0.2",
         "@leafygreen-ui/polymorphic": "^3.1.0",
-        "@leafygreen-ui/tokens": "^4.0.0",
-        "@leafygreen-ui/typography": "^22.2.2",
+        "@leafygreen-ui/tokens": "^4.1.0",
+        "@leafygreen-ui/typography": "^22.2.3",
         "@lg-tools/test-harnesses": "^0.3.4",
         "@tanstack/react-table": "^8.20.5",
         "@tanstack/react-virtual": "^3.10.7",
@@ -7553,9 +7548,9 @@
       }
     },
     "node_modules/@leafygreen-ui/tabs": {
-      "version": "17.0.7",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/tabs/-/tabs-17.0.7.tgz",
-      "integrity": "sha512-UIqk8lk/sy4Wdyn7tEX7JusPTqYEbJHBHZeBJaRSfFGa3jEcsX8s9G4XBbZ7Blpdo+GB/6E4+Q0ycZRCVqNmkw==",
+      "version": "17.0.8",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/tabs/-/tabs-17.0.8.tgz",
+      "integrity": "sha512-US3LKkHfRBJW4LqSpYCWlQUdQx7P25fkk+YvrZlw49fTME0RXu9OnTXFk/H0/VXOOFRKnqswTv3lL0ndpytTpg==",
       "license": "Apache-2.0",
       "dependencies": {
         "@leafygreen-ui/a11y": "^3.0.5",
@@ -7565,8 +7560,8 @@
         "@leafygreen-ui/lib": "^15.6.2",
         "@leafygreen-ui/palette": "^5.0.2",
         "@leafygreen-ui/polymorphic": "^3.1.0",
-        "@leafygreen-ui/tokens": "^4.0.0",
-        "@leafygreen-ui/typography": "^22.2.2",
+        "@leafygreen-ui/tokens": "^4.1.0",
+        "@leafygreen-ui/typography": "^22.2.3",
         "@lg-tools/test-harnesses": "^0.3.4"
       },
       "peerDependencies": {
@@ -7594,17 +7589,17 @@
       }
     },
     "node_modules/@leafygreen-ui/text-input": {
-      "version": "16.2.1",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/text-input/-/text-input-16.2.1.tgz",
-      "integrity": "sha512-x+UKq1k2jQmRwpux0gAH4TKk7u7iu640fVBwgJUDoLTO0foN/4gc7uHyDFeyUtxFumDaHkCdnUP3Bxl080qcCw==",
+      "version": "16.2.2",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/text-input/-/text-input-16.2.2.tgz",
+      "integrity": "sha512-Pt6vvfXLDUcnYyOArfMOLAn2HrBKEy4zD7QOb+tuFKkrDqdD8G3656QFpynwuwatXqs0ftbS1gEySJ2F4LV0kQ==",
       "license": "Apache-2.0",
       "dependencies": {
         "@leafygreen-ui/emotion": "^5.1.0",
-        "@leafygreen-ui/form-field": "^4.0.7",
+        "@leafygreen-ui/form-field": "^4.0.8",
         "@leafygreen-ui/hooks": "^9.3.0",
         "@leafygreen-ui/lib": "^15.6.2",
-        "@leafygreen-ui/tokens": "^4.0.0",
-        "@leafygreen-ui/typography": "^22.2.2",
+        "@leafygreen-ui/tokens": "^4.1.0",
+        "@leafygreen-ui/typography": "^22.2.3",
         "@lg-tools/test-harnesses": "^0.3.4"
       },
       "peerDependencies": {
@@ -7612,20 +7607,20 @@
       }
     },
     "node_modules/@leafygreen-ui/toast": {
-      "version": "8.1.1",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/toast/-/toast-8.1.1.tgz",
-      "integrity": "sha512-idM7iADi/FxyyB5mMEP5xJMC36PVeuMxId+fvgB+9z80ZSvElCbuNgd2/VaIRiTpeDMFJpgcysC/HN8uTHtpUQ==",
+      "version": "8.1.2",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/toast/-/toast-8.1.2.tgz",
+      "integrity": "sha512-jWdYPaxxSW6dfnla1HSY0ee9hNrt4DfweWHXDtaNS53GyOewKSGDNCIDPkR+VvMLKvKP/wzdz1R7lKq2loAhrA==",
       "license": "Apache-2.0",
       "dependencies": {
         "@leafygreen-ui/emotion": "^5.1.0",
         "@leafygreen-ui/hooks": "^9.3.0",
-        "@leafygreen-ui/icon": "^14.7.0",
-        "@leafygreen-ui/icon-button": "^17.1.3",
+        "@leafygreen-ui/icon": "^14.7.1",
+        "@leafygreen-ui/icon-button": "^17.1.4",
         "@leafygreen-ui/lib": "^15.6.2",
         "@leafygreen-ui/palette": "^5.0.2",
         "@leafygreen-ui/portal": "^7.1.0",
-        "@leafygreen-ui/tokens": "^4.0.0",
-        "@leafygreen-ui/typography": "^22.2.2",
+        "@leafygreen-ui/tokens": "^4.1.0",
+        "@leafygreen-ui/typography": "^22.2.3",
         "lodash": "^4.17.21",
         "polished": "^4.2.2",
         "react-transition-group": "^4.4.5"
@@ -7635,17 +7630,17 @@
       }
     },
     "node_modules/@leafygreen-ui/toggle": {
-      "version": "12.1.3",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/toggle/-/toggle-12.1.3.tgz",
-      "integrity": "sha512-pKsHmvLObWt87NT53v+29xNazwubVCNQhh1lZg3uYsVf9rHB1tG6aGuLd0pzaF0rI8kPVF5nFQ4e/b8EKfopTQ==",
+      "version": "12.1.4",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/toggle/-/toggle-12.1.4.tgz",
+      "integrity": "sha512-2KuNmbNGCL+M0zFwLgDeEbG1Kczw8pE108mnozmqBMIa1xGyV1AkZta67w5v1T1l/lpTDCE7R1dzZEVZNosgqA==",
       "license": "Apache-2.0",
       "dependencies": {
         "@leafygreen-ui/a11y": "^3.0.5",
         "@leafygreen-ui/emotion": "^5.1.0",
-        "@leafygreen-ui/icon": "^14.7.0",
+        "@leafygreen-ui/icon": "^14.7.1",
         "@leafygreen-ui/lib": "^15.6.2",
         "@leafygreen-ui/palette": "^5.0.2",
-        "@leafygreen-ui/tokens": "^4.0.0",
+        "@leafygreen-ui/tokens": "^4.1.0",
         "@lg-tools/test-harnesses": "^0.3.4"
       },
       "peerDependencies": {
@@ -7664,20 +7659,20 @@
       }
     },
     "node_modules/@leafygreen-ui/toolbar": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/toolbar/-/toolbar-1.1.3.tgz",
-      "integrity": "sha512-0LiLO3BwR7Rlyzupyxh0f45WZTsKhOwOPoA6VZX6m+1cGf5ICud1oDX/wbiv9mAtMEuBAzkitaLD+J0ewDY8HQ==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/toolbar/-/toolbar-1.2.0.tgz",
+      "integrity": "sha512-fP9ybklYsKf07JQDF3/njWGIe9OPL/A4rZpf40eWzRffqeybJXEUqWAWn4CL316Myb/FhuOpbWBLi8J5mWCAkQ==",
       "license": "Apache-2.0",
       "dependencies": {
         "@leafygreen-ui/descendants": "^3.0.6",
         "@leafygreen-ui/emotion": "^5.1.0",
         "@leafygreen-ui/hooks": "^9.3.0",
-        "@leafygreen-ui/icon": "^14.7.0",
-        "@leafygreen-ui/icon-button": "^17.1.3",
+        "@leafygreen-ui/icon": "^14.7.1",
+        "@leafygreen-ui/icon-button": "^17.1.4",
         "@leafygreen-ui/lib": "^15.6.2",
         "@leafygreen-ui/palette": "^5.0.2",
-        "@leafygreen-ui/tokens": "^4.0.0",
-        "@leafygreen-ui/tooltip": "^14.2.3",
+        "@leafygreen-ui/tokens": "^4.1.0",
+        "@leafygreen-ui/tooltip": "^14.3.0",
         "@lg-tools/test-harnesses": "^0.3.4"
       },
       "peerDependencies": {
@@ -7706,17 +7701,17 @@
       }
     },
     "node_modules/@leafygreen-ui/typography": {
-      "version": "22.2.2",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/typography/-/typography-22.2.2.tgz",
-      "integrity": "sha512-xpdxPvxvGVu7gGK6aem1qwKPwuX2TtT7Zc66ukrmtYtoBHDBnA3SVzbNcPxzDYwKcjbRrQnFdtW2lbfX4IS6Dg==",
+      "version": "22.2.3",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/typography/-/typography-22.2.3.tgz",
+      "integrity": "sha512-zOfPAFyUrUU0G9wPv7lFSMr4FvKi2NiulDMHhy5zea+J4gDn1yuiU0mItG6cwbWxpWSiBeF0gfsZoDuHgKppUg==",
       "license": "Apache-2.0",
       "dependencies": {
         "@leafygreen-ui/emotion": "^5.1.0",
-        "@leafygreen-ui/icon": "^14.7.0",
+        "@leafygreen-ui/icon": "^14.7.1",
         "@leafygreen-ui/lib": "^15.6.2",
         "@leafygreen-ui/palette": "^5.0.2",
         "@leafygreen-ui/polymorphic": "^3.1.0",
-        "@leafygreen-ui/tokens": "^4.0.0"
+        "@leafygreen-ui/tokens": "^4.1.0"
       },
       "peerDependencies": {
         "@leafygreen-ui/leafygreen-provider": "^5.0.0 || ^4.0.0 || ^3.2.0"
@@ -47949,7 +47944,7 @@
         "@leafygreen-ui/chip": "^4.0.9",
         "@leafygreen-ui/code": "^20.2.3",
         "@leafygreen-ui/combobox": "^12.2.1",
-        "@leafygreen-ui/confirmation-modal": "^8.0.0",
+        "@leafygreen-ui/confirmation-modal": "^10.2.4",
         "@leafygreen-ui/copyable": "^12.0.1",
         "@leafygreen-ui/drawer": "^5.1.3",
         "@leafygreen-ui/emotion": "^5.1.0",
@@ -47961,9 +47956,9 @@
         "@leafygreen-ui/input-option": "^4.1.3",
         "@leafygreen-ui/leafygreen-provider": "^5.0.4",
         "@leafygreen-ui/logo": "^11.1.0",
-        "@leafygreen-ui/marketing-modal": "^6.0.0",
+        "@leafygreen-ui/marketing-modal": "^8.1.7",
         "@leafygreen-ui/menu": "^33.0.1",
-        "@leafygreen-ui/modal": "^18.0.0",
+        "@leafygreen-ui/modal": "^21.0.0",
         "@leafygreen-ui/palette": "^5.0.2",
         "@leafygreen-ui/pipeline": "^8.0.8",
         "@leafygreen-ui/polymorphic": "^3.1.0",
@@ -58177,9 +58172,9 @@
       },
       "dependencies": {
         "tabbable": {
-          "version": "6.2.0",
-          "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
-          "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.3.0.tgz",
+          "integrity": "sha512-EIHvdY5bPLuWForiR/AN2Bxngzpuwn1is4asboytXtpTgsArc+WmSJKVLlhdh71u7jFcryDqB2A8lQvj78MkyQ=="
         }
       }
     },
@@ -58577,9 +58572,9 @@
       }
     },
     "@leafygreen-ui/checkbox": {
-      "version": "18.1.3",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/checkbox/-/checkbox-18.1.3.tgz",
-      "integrity": "sha512-DwrJSVEo3J/rdWUpBcvHSaSVbyIb1Quvdu8Ok5Lmy6vT/ARfM1aM2KzheDQ25E2ArY7c/lsBf0T0qmIvYu2J3w==",
+      "version": "18.1.4",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/checkbox/-/checkbox-18.1.4.tgz",
+      "integrity": "sha512-aWVkalPdUUuUCt0iUaDg+z1ktusu18PfUbcR5zoLpQyIymeZK9mhsM/LdKAkQKt7mT2ExLeFzMzuSenRLVG8jg==",
       "requires": {
         "@leafygreen-ui/a11y": "^3.0.5",
         "@leafygreen-ui/emotion": "^5.1.0",
@@ -58593,22 +58588,22 @@
       }
     },
     "@leafygreen-ui/chip": {
-      "version": "4.0.9",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/chip/-/chip-4.0.9.tgz",
-      "integrity": "sha512-TDk63YkB1WVfb4yDMOC0qq4OVkI4EVqOnQ/kIFna7MGy0W74829M5qqPg4Emzb8E0ayhfoCzyqonPdobdUvkmQ==",
+      "version": "4.0.10",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/chip/-/chip-4.0.10.tgz",
+      "integrity": "sha512-+zJxpwo9hVxryJEmiayjKm8W20+MOF61ngh3eOzebaK8JWPVut0TL+vcNh1Ja4mvhdIn3RtLAAmhZKx/nGfvSg==",
       "requires": {
         "@leafygreen-ui/emotion": "^5.1.0",
-        "@leafygreen-ui/icon": "^14.7.0",
-        "@leafygreen-ui/inline-definition": "^9.1.3",
+        "@leafygreen-ui/icon": "^14.7.1",
+        "@leafygreen-ui/inline-definition": "^9.1.4",
         "@leafygreen-ui/lib": "^15.6.2",
         "@leafygreen-ui/palette": "^5.0.2",
         "@leafygreen-ui/tokens": "^4.1.0"
       }
     },
     "@leafygreen-ui/code": {
-      "version": "20.2.5",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/code/-/code-20.2.5.tgz",
-      "integrity": "sha512-/gX0OKgO1HKIkIwsiXIlmxio5pVltTuz/LDmedNnNd5ZLJO2ZAsfK2JKHis4pxwfZHhtE+Ootq3jvMygbXbOwg==",
+      "version": "20.2.4",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/code/-/code-20.2.4.tgz",
+      "integrity": "sha512-qoqEmBoZa/Y/DOTconrkyfTDXgHfCiBQccWBLixYCtBPSsC5MQfAgoe5mTSP5dhNfW5RtjjPkZaezAiSmnayhA==",
       "requires": {
         "@leafygreen-ui/a11y": "^3.0.5",
         "@leafygreen-ui/button": "^25.1.3",
@@ -58635,18 +58630,18 @@
       }
     },
     "@leafygreen-ui/combobox": {
-      "version": "12.2.1",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/combobox/-/combobox-12.2.1.tgz",
-      "integrity": "sha512-nppvD3nWO3KmAlMQBVDlgRlll1bATnbcpoXo/gEws3bf2Jn8Yq54ywf783bSX1HkZysSCsjpVLxgIGhbcX7nwA==",
+      "version": "12.3.0",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/combobox/-/combobox-12.3.0.tgz",
+      "integrity": "sha512-NjRydZxbp7Ah4bzUNSHDU4glmvMxhtQBv8C0Zagg9EWoqq+q1YIbhC4yQT2k3LhatdYMXTZq8fSC9liVe+QI7Q==",
       "requires": {
-        "@leafygreen-ui/checkbox": "^18.1.3",
-        "@leafygreen-ui/chip": "^4.0.9",
+        "@leafygreen-ui/checkbox": "^18.1.4",
+        "@leafygreen-ui/chip": "^4.0.10",
         "@leafygreen-ui/emotion": "^5.1.0",
         "@leafygreen-ui/form-field": "^4.0.7",
         "@leafygreen-ui/hooks": "^9.3.0",
-        "@leafygreen-ui/icon": "^14.7.0",
-        "@leafygreen-ui/icon-button": "^17.1.3",
-        "@leafygreen-ui/input-option": "^4.1.3",
+        "@leafygreen-ui/icon": "^14.7.1",
+        "@leafygreen-ui/icon-button": "^17.1.4",
+        "@leafygreen-ui/input-option": "^4.1.4",
         "@leafygreen-ui/lib": "^15.6.2",
         "@leafygreen-ui/palette": "^5.0.2",
         "@leafygreen-ui/popover": "^14.3.1",
@@ -58658,34 +58653,34 @@
       }
     },
     "@leafygreen-ui/confirmation-modal": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/confirmation-modal/-/confirmation-modal-8.0.1.tgz",
-      "integrity": "sha512-tZGavYwuBQ0EiL8LPJivM/qo1JQn/frBKj2/g1/9Ul+1vwr3EX2krtnWUV+66T4xSkLCZID3JtDftdohlc7Kkg==",
+      "version": "10.2.4",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/confirmation-modal/-/confirmation-modal-10.2.4.tgz",
+      "integrity": "sha512-xoCSjYIMxg97tIHEXjUchcBJ0/6Dsswl1iMemsJY6lUmqZdV4HVrfcJSS3ylziAN+cKBK8JH/wwL64FcM0e4RA==",
       "requires": {
         "@leafygreen-ui/button": "^25.1.3",
-        "@leafygreen-ui/emotion": "^5.0.0",
-        "@leafygreen-ui/icon": "^14.0.0",
-        "@leafygreen-ui/lib": "^15.0.0",
-        "@leafygreen-ui/modal": "^18.0.0",
-        "@leafygreen-ui/palette": "^5.0.0",
+        "@leafygreen-ui/emotion": "^5.1.0",
+        "@leafygreen-ui/icon": "^14.7.1",
+        "@leafygreen-ui/lib": "^15.7.0",
+        "@leafygreen-ui/modal": "^21.0.0",
+        "@leafygreen-ui/palette": "^5.0.2",
         "@leafygreen-ui/text-input": "^16.2.1",
         "@leafygreen-ui/tokens": "^4.1.0",
         "@leafygreen-ui/typography": "^22.2.2"
       }
     },
     "@leafygreen-ui/copyable": {
-      "version": "12.0.1",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/copyable/-/copyable-12.0.1.tgz",
-      "integrity": "sha512-tf6mjjHQu/ZtuHSu88Vv71ZB+wVE4QT+ahRbPC61CSPY34EjHdKXic4/k/DF5Pl40DTB2vQZbU/T4aqVAaZgYQ==",
+      "version": "12.0.2",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/copyable/-/copyable-12.0.2.tgz",
+      "integrity": "sha512-tE23eBGVPn7u16gdFAt9182lrqMOf2y8DOZi/vHp9L2JtI4+0bwFxFVkJqjn+Y10UtD3Fe8/NY2yJ11kpMTlhA==",
       "requires": {
         "@leafygreen-ui/button": "^25.1.3",
         "@leafygreen-ui/emotion": "^5.1.0",
         "@leafygreen-ui/hooks": "^9.3.0",
-        "@leafygreen-ui/icon": "^14.7.0",
+        "@leafygreen-ui/icon": "^14.7.1",
         "@leafygreen-ui/lib": "^15.6.2",
         "@leafygreen-ui/palette": "^5.0.2",
         "@leafygreen-ui/tokens": "^4.1.0",
-        "@leafygreen-ui/tooltip": "^14.2.3",
+        "@leafygreen-ui/tooltip": "^14.3.0",
         "@leafygreen-ui/typography": "^22.2.2",
         "clipboard": "^2.0.6",
         "polished": "^4.2.2"
@@ -58702,22 +58697,22 @@
       }
     },
     "@leafygreen-ui/drawer": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/drawer/-/drawer-5.1.3.tgz",
-      "integrity": "sha512-mKZhcAcdmvTt2SAiVsp5aoRm7xZXxalKvV5dpbWOh4p0YfDZJ3AtXhdLouTUe6u/90x4JWTcb3R3K2FdDwsNAw==",
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/drawer/-/drawer-5.2.0.tgz",
+      "integrity": "sha512-6HK481NmDWddRdSKK61A2vWLazqF5BxnONnNtjn+kBjlOndKaVCguEhrMqMSIPL6y2BstBhpcq5EYK8x5PjDdQ==",
       "requires": {
         "@leafygreen-ui/button": "^25.1.3",
         "@leafygreen-ui/emotion": "^5.1.0",
         "@leafygreen-ui/hooks": "^9.3.0",
-        "@leafygreen-ui/icon": "^14.7.0",
-        "@leafygreen-ui/icon-button": "^17.1.3",
+        "@leafygreen-ui/icon": "^14.7.1",
+        "@leafygreen-ui/icon-button": "^17.1.4",
         "@leafygreen-ui/lib": "^15.6.2",
         "@leafygreen-ui/palette": "^5.0.2",
         "@leafygreen-ui/polymorphic": "^3.1.0",
         "@leafygreen-ui/resizable": "^0.1.3",
-        "@leafygreen-ui/tabs": "^17.0.7",
+        "@leafygreen-ui/tabs": "^17.0.8",
         "@leafygreen-ui/tokens": "^4.1.0",
-        "@leafygreen-ui/toolbar": "^1.1.3",
+        "@leafygreen-ui/toolbar": "^1.2.0",
         "@leafygreen-ui/typography": "^22.2.2",
         "@lg-tools/test-harnesses": "^0.3.4",
         "polished": "^4.2.2",
@@ -58734,13 +58729,13 @@
       }
     },
     "@leafygreen-ui/form-field": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/form-field/-/form-field-4.0.7.tgz",
-      "integrity": "sha512-yCTCdPnHJbrmzV4HyZrXebzDacL0ElfCz6o4MWZlwRazQFGQnB6L3Ewf3fFUo53w6oO4o10iygCpXeuvrUaj7A==",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/form-field/-/form-field-4.0.8.tgz",
+      "integrity": "sha512-rkdC0aXUEx8O/Y7ktFAFpqzNo3TcAYi7LyxrCy6RxnKSfqMheRl4cvb4XYrU5s84/BzKtBCPSmUav0kxN8PWDg==",
       "requires": {
         "@leafygreen-ui/emotion": "^5.1.0",
         "@leafygreen-ui/hooks": "^9.3.0",
-        "@leafygreen-ui/icon": "^14.7.0",
+        "@leafygreen-ui/icon": "^14.7.1",
         "@leafygreen-ui/lib": "^15.6.2",
         "@leafygreen-ui/palette": "^5.0.2",
         "@leafygreen-ui/tokens": "^4.1.0",
@@ -58748,20 +58743,20 @@
       }
     },
     "@leafygreen-ui/guide-cue": {
-      "version": "8.1.1",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/guide-cue/-/guide-cue-8.1.1.tgz",
-      "integrity": "sha512-daef5lBRwCCmjoqh1EGv/00kJdlWx2Gw78fxYeJcaRSQ/D3Q97xZldul7UKNl8w/PVmBDMonnXUjrcNSPbHiww==",
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/guide-cue/-/guide-cue-8.2.0.tgz",
+      "integrity": "sha512-YDNcu+DA4aOE9QxI/TujT/v7h0YXz07rQpBcrew+7dIhDp3NcuNLN39SYegz5Gi6br+rhEQh8n7dowBHhVM6iw==",
       "requires": {
         "@leafygreen-ui/a11y": "^3.0.5",
         "@leafygreen-ui/button": "^25.1.3",
         "@leafygreen-ui/emotion": "^5.1.0",
         "@leafygreen-ui/hooks": "^9.3.0",
-        "@leafygreen-ui/icon": "^14.7.0",
-        "@leafygreen-ui/icon-button": "^17.1.3",
+        "@leafygreen-ui/icon": "^14.7.1",
+        "@leafygreen-ui/icon-button": "^17.1.4",
         "@leafygreen-ui/lib": "^15.6.2",
         "@leafygreen-ui/palette": "^5.0.2",
         "@leafygreen-ui/popover": "^14.3.1",
-        "@leafygreen-ui/tooltip": "^14.2.3",
+        "@leafygreen-ui/tooltip": "^14.3.0",
         "@leafygreen-ui/typography": "^22.2.2",
         "focus-trap": "6.9.4",
         "focus-trap-react": "9.0.2",
@@ -58804,28 +58799,28 @@
       }
     },
     "@leafygreen-ui/info-sprinkle": {
-      "version": "5.0.9",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/info-sprinkle/-/info-sprinkle-5.0.9.tgz",
-      "integrity": "sha512-gkluPoZj5j5kbkwDVhaaVBAzgyEtonTJ/Vo4neFp8i1ngcxqF3iYF0biLq2BWK1wRnO7qT0P5/pUBX1VjczJ1g==",
+      "version": "5.0.10",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/info-sprinkle/-/info-sprinkle-5.0.10.tgz",
+      "integrity": "sha512-t9oJsRGfvgdTenR27EdwIxAExhBaHuYkFWWoYD+48RWQHh+fpVWUIGEHtehjI4/WNOI9MBRMAKrds2dkt6s6Ig==",
       "requires": {
         "@leafygreen-ui/emotion": "^5.1.0",
-        "@leafygreen-ui/icon": "^14.7.0",
+        "@leafygreen-ui/icon": "^14.7.1",
         "@leafygreen-ui/lib": "^15.6.2",
         "@leafygreen-ui/palette": "^5.0.2",
         "@leafygreen-ui/tokens": "^4.1.0",
-        "@leafygreen-ui/tooltip": "^14.2.3"
+        "@leafygreen-ui/tooltip": "^14.3.0"
       }
     },
     "@leafygreen-ui/inline-definition": {
-      "version": "9.1.3",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/inline-definition/-/inline-definition-9.1.3.tgz",
-      "integrity": "sha512-X+Zde5bdZI5oyd3Lk9lRAK4qOHDyWZPtL62Mf39UBtSxwW5/6qVubohXmdVXIll54LDVyoBP43Ip2ZpVKVvsvA==",
+      "version": "9.1.4",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/inline-definition/-/inline-definition-9.1.4.tgz",
+      "integrity": "sha512-97Sv/dO/ePXPH+MGQZf0O4ccjuoxurIBgim4fKcWp/FFL98SqE6opHvYM9LDvbZfXxHokCQSW3/EXtbCRbUpGw==",
       "requires": {
         "@leafygreen-ui/emotion": "^5.1.0",
         "@leafygreen-ui/lib": "^15.6.2",
         "@leafygreen-ui/palette": "^5.0.2",
         "@leafygreen-ui/tokens": "^4.1.0",
-        "@leafygreen-ui/tooltip": "^14.2.3"
+        "@leafygreen-ui/tooltip": "^14.3.0"
       }
     },
     "@leafygreen-ui/input-option": {
@@ -58871,30 +58866,30 @@
       }
     },
     "@leafygreen-ui/marketing-modal": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/marketing-modal/-/marketing-modal-6.1.0.tgz",
-      "integrity": "sha512-rqElAWR0ObLQ4lH+QxZu9In1mJMvmHU9MDqkRXH8nlIGYm4YTJHtf0UrkzaqOxOnrsB06l48q8uKDpc5nGb35A==",
+      "version": "8.1.7",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/marketing-modal/-/marketing-modal-8.1.7.tgz",
+      "integrity": "sha512-TIJfxA+35+6ruPev0g8Lc/XDpIHBK5mYOSbj5pB9J5wJnV/PWYZvzIcDqco5bv8IvkL5TmO3fF+OIVwBfoZpIA==",
       "requires": {
         "@leafygreen-ui/button": "^25.1.3",
-        "@leafygreen-ui/emotion": "^5.0.0",
-        "@leafygreen-ui/lib": "^15.2.0",
-        "@leafygreen-ui/modal": "^18.0.0",
-        "@leafygreen-ui/palette": "^5.0.0",
+        "@leafygreen-ui/emotion": "^5.1.0",
+        "@leafygreen-ui/lib": "^15.7.0",
+        "@leafygreen-ui/modal": "^21.0.0",
+        "@leafygreen-ui/palette": "^5.0.2",
         "@leafygreen-ui/tokens": "^4.1.0",
         "@leafygreen-ui/typography": "^22.2.2"
       }
     },
     "@leafygreen-ui/menu": {
-      "version": "33.0.1",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/menu/-/menu-33.0.1.tgz",
-      "integrity": "sha512-D4S8r39YHPRNJ7g9UPMYRdj0FDLSQNxBHyx9jjMRbFR8mgxeqo+fYzwQmpEXo4nTor6mO8rOOSjVBAGrDLhiqQ==",
+      "version": "33.1.0",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/menu/-/menu-33.1.0.tgz",
+      "integrity": "sha512-vY4F4PzqcL7WyHWY+sUc4WpitCjPs0e3BuNSK+yEAHCixABiAu+wyEA42MIff4+4BqrJkwRE0z/iU6kVvwU84w==",
       "requires": {
         "@leafygreen-ui/descendants": "^3.0.6",
         "@leafygreen-ui/emotion": "^5.1.0",
         "@leafygreen-ui/hooks": "^9.3.0",
-        "@leafygreen-ui/icon": "^14.7.0",
-        "@leafygreen-ui/icon-button": "^17.1.3",
-        "@leafygreen-ui/input-option": "^4.1.3",
+        "@leafygreen-ui/icon": "^14.7.1",
+        "@leafygreen-ui/icon-button": "^17.1.4",
+        "@leafygreen-ui/input-option": "^4.1.4",
         "@leafygreen-ui/lib": "^15.6.2",
         "@leafygreen-ui/palette": "^5.0.2",
         "@leafygreen-ui/polymorphic": "^3.1.0",
@@ -58907,23 +58902,19 @@
       }
     },
     "@leafygreen-ui/modal": {
-      "version": "18.0.1",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/modal/-/modal-18.0.1.tgz",
-      "integrity": "sha512-PTJ+jSf8wEgZhm2ZPSRw3QXGDAYMIGckPUGRVeRAI24lcr9ZHWEXng45zBaS5OUqoWn4LFufLpUjq5RN/H8nuw==",
-      "requires": {
-        "@leafygreen-ui/emotion": "^5.0.0",
-        "@leafygreen-ui/hooks": "^9.0.0",
-        "@leafygreen-ui/icon": "^14.0.0",
-        "@leafygreen-ui/icon-button": "^17.0.1",
-        "@leafygreen-ui/lib": "^15.0.0",
-        "@leafygreen-ui/palette": "^5.0.0",
-        "@leafygreen-ui/portal": "^7.0.0",
+      "version": "21.0.0",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/modal/-/modal-21.0.0.tgz",
+      "integrity": "sha512-Eyo4/oKXcRlrts6ss4Zoeh4PUk56Y+vsinsPMppPR3/yqz1NUyVrH5ufyztC4OSdYRcnlATH1MRvCKKtRQ926Q==",
+      "requires": {
+        "@leafygreen-ui/emotion": "^5.1.0",
+        "@leafygreen-ui/hooks": "^9.3.0",
+        "@leafygreen-ui/icon": "^14.7.1",
+        "@leafygreen-ui/icon-button": "^17.1.4",
+        "@leafygreen-ui/lib": "^15.7.0",
+        "@leafygreen-ui/palette": "^5.0.2",
         "@leafygreen-ui/tokens": "^4.1.0",
-        "@lg-tools/test-harnesses": "^0.3.1",
-        "focus-trap": "6.9.4",
-        "focus-trap-react": "^9.0.2",
-        "polished": "^4.2.2",
-        "react-transition-group": "^4.4.5"
+        "@lg-tools/test-harnesses": "^0.3.4",
+        "polished": "^4.2.2"
       }
     },
     "@leafygreen-ui/palette": {
@@ -58932,17 +58923,17 @@
       "integrity": "sha512-+PrfGeJSv4goxm/vKpfJJDOP7t/uElj+14K8jiIyu3qR3TcFRIZ5h1VMvICTUgqvRc8W+xIZYQwsLa2XCu2lvw=="
     },
     "@leafygreen-ui/pipeline": {
-      "version": "8.0.8",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/pipeline/-/pipeline-8.0.8.tgz",
-      "integrity": "sha512-oFRNB+5AH4ASXm0Rt4N6HT395Q3i58e0KMXliI3FKNcsAjjQeydDV3YlyTPxgWqLCokVrRCfnN/jOhymQ1b9iA==",
+      "version": "8.0.9",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/pipeline/-/pipeline-8.0.9.tgz",
+      "integrity": "sha512-OMzttGdSPuPYA7tCdmUecsZpeM9Fh11htOkmtqeI++eP/Jwj+7euCDUgnMUXpiY+O41qP27ona4FvzmFkswilA==",
       "requires": {
         "@leafygreen-ui/emotion": "^5.1.0",
         "@leafygreen-ui/hooks": "^9.3.0",
-        "@leafygreen-ui/icon": "^14.7.0",
+        "@leafygreen-ui/icon": "^14.7.1",
         "@leafygreen-ui/lib": "^15.6.2",
         "@leafygreen-ui/palette": "^5.0.2",
         "@leafygreen-ui/tokens": "^4.1.0",
-        "@leafygreen-ui/tooltip": "^14.2.3",
+        "@leafygreen-ui/tooltip": "^14.3.0",
         "react-intersection-observer": "^8.25.1"
       }
     },
@@ -59011,9 +59002,9 @@
       }
     },
     "@leafygreen-ui/radio-group": {
-      "version": "13.0.10",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/radio-group/-/radio-group-13.0.10.tgz",
-      "integrity": "sha512-ui59w/8B9QvR6s84WCsR8Hk2VTktQ1MlNsDDfV47K8cShA86AMo/tHTBpL0eUEkf1mefbl4n6iqLZiU4+fV5CA==",
+      "version": "13.0.11",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/radio-group/-/radio-group-13.0.11.tgz",
+      "integrity": "sha512-2FE716AspLbY5PchLwgkZs2PfIOXPdNjxrTOzAGOzkamt8oheq1n3KxDeQ5N3FFaTA4kUOVMFFKdgCRlYG+FcA==",
       "requires": {
         "@leafygreen-ui/emotion": "^5.1.0",
         "@leafygreen-ui/hooks": "^9.3.0",
@@ -59063,13 +59054,13 @@
       }
     },
     "@leafygreen-ui/segmented-control": {
-      "version": "11.0.11",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/segmented-control/-/segmented-control-11.0.11.tgz",
-      "integrity": "sha512-ACheq8dbVz20qwK4u+FKT35mF0WqEStILwEdfcU54dh3/JzjBmA/+/5aJ7+W25N+Lbx6Gh/aZXEMhnJjj5LHCQ==",
+      "version": "11.0.12",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/segmented-control/-/segmented-control-11.0.12.tgz",
+      "integrity": "sha512-VU2ZNhIm6WL/kv8hPoPXeVG7VX/bTlx/rzARUZ8QrLbr+6Wp4VntE22nM2XmuZ3gQLMALamBA6Mi/Dlv8CnSNg==",
       "requires": {
         "@leafygreen-ui/emotion": "^5.1.0",
         "@leafygreen-ui/hooks": "^9.3.0",
-        "@leafygreen-ui/icon": "^14.7.0",
+        "@leafygreen-ui/icon": "^14.7.1",
         "@leafygreen-ui/lib": "^15.6.2",
         "@leafygreen-ui/palette": "^5.0.2",
         "@leafygreen-ui/polymorphic": "^3.1.0",
@@ -59126,32 +59117,31 @@
       }
     },
     "@leafygreen-ui/split-button": {
-      "version": "6.1.7",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/split-button/-/split-button-6.1.7.tgz",
-      "integrity": "sha512-TGpJHUKB2jcUgBp76usP339Q4e3XIjQwMjNLhSebXqNF1mov9CgtkREP6cPsmUkPO6Gj44QfM6bdwniP3abthg==",
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/split-button/-/split-button-6.2.0.tgz",
+      "integrity": "sha512-i/h83Z6nK+Eot3pnuI87qT+psz26nlGe1eHJ5BnOUDfwnxhb5yPZeV+zAmSoKOKtT8JTrHooEKxqNovsg4vJwg==",
       "requires": {
         "@leafygreen-ui/button": "^25.1.3",
         "@leafygreen-ui/emotion": "^5.1.0",
         "@leafygreen-ui/hooks": "^9.3.0",
-        "@leafygreen-ui/icon": "^14.7.0",
+        "@leafygreen-ui/icon": "^14.7.1",
         "@leafygreen-ui/lib": "^15.6.2",
-        "@leafygreen-ui/menu": "^33.0.1",
+        "@leafygreen-ui/menu": "^33.1.0",
         "@leafygreen-ui/palette": "^5.0.2",
         "@leafygreen-ui/polymorphic": "^3.1.0",
-        "@leafygreen-ui/popover": "^14.3.1",
         "@leafygreen-ui/tokens": "^4.1.0"
       }
     },
     "@leafygreen-ui/table": {
-      "version": "15.2.1",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/table/-/table-15.2.1.tgz",
-      "integrity": "sha512-0NRUKTV4sFSuyEzwAz8JCvKYpL43PDNVZMvVP834RMCpKqeXEfTTb8xEt5xGXPiYP0t/efXc8r/ON4AaJ6TwWQ==",
+      "version": "15.2.2",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/table/-/table-15.2.2.tgz",
+      "integrity": "sha512-KAkloT8It3L+PbZYAGvSiTtRx4zbLjiyzIHifA0y+DvYo7aoDh2x6hHf4PsD7hn/Tu3NkxQrvxC/wykAMdB39g==",
       "requires": {
-        "@leafygreen-ui/checkbox": "^18.1.3",
+        "@leafygreen-ui/checkbox": "^18.1.4",
         "@leafygreen-ui/emotion": "^5.1.0",
         "@leafygreen-ui/hooks": "^9.3.0",
-        "@leafygreen-ui/icon": "^14.7.0",
-        "@leafygreen-ui/icon-button": "^17.1.3",
+        "@leafygreen-ui/icon": "^14.7.1",
+        "@leafygreen-ui/icon-button": "^17.1.4",
         "@leafygreen-ui/lib": "^15.6.2",
         "@leafygreen-ui/palette": "^5.0.2",
         "@leafygreen-ui/polymorphic": "^3.1.0",
@@ -59167,9 +59157,9 @@
       }
     },
     "@leafygreen-ui/tabs": {
-      "version": "17.0.7",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/tabs/-/tabs-17.0.7.tgz",
-      "integrity": "sha512-UIqk8lk/sy4Wdyn7tEX7JusPTqYEbJHBHZeBJaRSfFGa3jEcsX8s9G4XBbZ7Blpdo+GB/6E4+Q0ycZRCVqNmkw==",
+      "version": "17.0.8",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/tabs/-/tabs-17.0.8.tgz",
+      "integrity": "sha512-US3LKkHfRBJW4LqSpYCWlQUdQx7P25fkk+YvrZlw49fTME0RXu9OnTXFk/H0/VXOOFRKnqswTv3lL0ndpytTpg==",
       "requires": {
         "@leafygreen-ui/a11y": "^3.0.5",
         "@leafygreen-ui/descendants": "^3.0.6",
@@ -59200,9 +59190,9 @@
       }
     },
     "@leafygreen-ui/text-input": {
-      "version": "16.2.1",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/text-input/-/text-input-16.2.1.tgz",
-      "integrity": "sha512-x+UKq1k2jQmRwpux0gAH4TKk7u7iu640fVBwgJUDoLTO0foN/4gc7uHyDFeyUtxFumDaHkCdnUP3Bxl080qcCw==",
+      "version": "16.2.2",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/text-input/-/text-input-16.2.2.tgz",
+      "integrity": "sha512-Pt6vvfXLDUcnYyOArfMOLAn2HrBKEy4zD7QOb+tuFKkrDqdD8G3656QFpynwuwatXqs0ftbS1gEySJ2F4LV0kQ==",
       "requires": {
         "@leafygreen-ui/emotion": "^5.1.0",
         "@leafygreen-ui/form-field": "^4.0.7",
@@ -59214,14 +59204,14 @@
       }
     },
     "@leafygreen-ui/toast": {
-      "version": "8.1.1",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/toast/-/toast-8.1.1.tgz",
-      "integrity": "sha512-idM7iADi/FxyyB5mMEP5xJMC36PVeuMxId+fvgB+9z80ZSvElCbuNgd2/VaIRiTpeDMFJpgcysC/HN8uTHtpUQ==",
+      "version": "8.1.2",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/toast/-/toast-8.1.2.tgz",
+      "integrity": "sha512-jWdYPaxxSW6dfnla1HSY0ee9hNrt4DfweWHXDtaNS53GyOewKSGDNCIDPkR+VvMLKvKP/wzdz1R7lKq2loAhrA==",
       "requires": {
         "@leafygreen-ui/emotion": "^5.1.0",
         "@leafygreen-ui/hooks": "^9.3.0",
-        "@leafygreen-ui/icon": "^14.7.0",
-        "@leafygreen-ui/icon-button": "^17.1.3",
+        "@leafygreen-ui/icon": "^14.7.1",
+        "@leafygreen-ui/icon-button": "^17.1.4",
         "@leafygreen-ui/lib": "^15.6.2",
         "@leafygreen-ui/palette": "^5.0.2",
         "@leafygreen-ui/portal": "^7.1.0",
@@ -59233,13 +59223,13 @@
       }
     },
     "@leafygreen-ui/toggle": {
-      "version": "12.1.3",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/toggle/-/toggle-12.1.3.tgz",
-      "integrity": "sha512-pKsHmvLObWt87NT53v+29xNazwubVCNQhh1lZg3uYsVf9rHB1tG6aGuLd0pzaF0rI8kPVF5nFQ4e/b8EKfopTQ==",
+      "version": "12.1.4",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/toggle/-/toggle-12.1.4.tgz",
+      "integrity": "sha512-2KuNmbNGCL+M0zFwLgDeEbG1Kczw8pE108mnozmqBMIa1xGyV1AkZta67w5v1T1l/lpTDCE7R1dzZEVZNosgqA==",
       "requires": {
         "@leafygreen-ui/a11y": "^3.0.5",
         "@leafygreen-ui/emotion": "^5.1.0",
-        "@leafygreen-ui/icon": "^14.7.0",
+        "@leafygreen-ui/icon": "^14.7.1",
         "@leafygreen-ui/lib": "^15.6.2",
         "@leafygreen-ui/palette": "^5.0.2",
         "@leafygreen-ui/tokens": "^4.1.0",
@@ -59257,19 +59247,19 @@
       }
     },
     "@leafygreen-ui/toolbar": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/toolbar/-/toolbar-1.1.3.tgz",
-      "integrity": "sha512-0LiLO3BwR7Rlyzupyxh0f45WZTsKhOwOPoA6VZX6m+1cGf5ICud1oDX/wbiv9mAtMEuBAzkitaLD+J0ewDY8HQ==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/toolbar/-/toolbar-1.2.0.tgz",
+      "integrity": "sha512-fP9ybklYsKf07JQDF3/njWGIe9OPL/A4rZpf40eWzRffqeybJXEUqWAWn4CL316Myb/FhuOpbWBLi8J5mWCAkQ==",
       "requires": {
         "@leafygreen-ui/descendants": "^3.0.6",
         "@leafygreen-ui/emotion": "^5.1.0",
         "@leafygreen-ui/hooks": "^9.3.0",
-        "@leafygreen-ui/icon": "^14.7.0",
-        "@leafygreen-ui/icon-button": "^17.1.3",
+        "@leafygreen-ui/icon": "^14.7.1",
+        "@leafygreen-ui/icon-button": "^17.1.4",
         "@leafygreen-ui/lib": "^15.6.2",
         "@leafygreen-ui/palette": "^5.0.2",
         "@leafygreen-ui/tokens": "^4.1.0",
-        "@leafygreen-ui/tooltip": "^14.2.3",
+        "@leafygreen-ui/tooltip": "^14.3.0",
         "@lg-tools/test-harnesses": "^0.3.4"
       }
     },
@@ -59291,12 +59281,12 @@
       }
     },
     "@leafygreen-ui/typography": {
-      "version": "22.2.2",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/typography/-/typography-22.2.2.tgz",
-      "integrity": "sha512-xpdxPvxvGVu7gGK6aem1qwKPwuX2TtT7Zc66ukrmtYtoBHDBnA3SVzbNcPxzDYwKcjbRrQnFdtW2lbfX4IS6Dg==",
+      "version": "22.2.3",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/typography/-/typography-22.2.3.tgz",
+      "integrity": "sha512-zOfPAFyUrUU0G9wPv7lFSMr4FvKi2NiulDMHhy5zea+J4gDn1yuiU0mItG6cwbWxpWSiBeF0gfsZoDuHgKppUg==",
       "requires": {
         "@leafygreen-ui/emotion": "^5.1.0",
-        "@leafygreen-ui/icon": "^14.7.0",
+        "@leafygreen-ui/icon": "^14.7.1",
         "@leafygreen-ui/lib": "^15.6.2",
         "@leafygreen-ui/palette": "^5.0.2",
         "@leafygreen-ui/polymorphic": "^3.1.0",
@@ -61418,7 +61408,7 @@
         "@leafygreen-ui/chip": "^4.0.9",
         "@leafygreen-ui/code": "^20.2.3",
         "@leafygreen-ui/combobox": "^12.2.1",
-        "@leafygreen-ui/confirmation-modal": "^8.0.0",
+        "@leafygreen-ui/confirmation-modal": "^10.2.4",
         "@leafygreen-ui/copyable": "^12.0.1",
         "@leafygreen-ui/drawer": "^5.1.3",
         "@leafygreen-ui/emotion": "^5.1.0",
@@ -61431,9 +61421,9 @@
         "@leafygreen-ui/leafygreen-provider": "^5.0.4",
         "@leafygreen-ui/lib": "^15.6.2",
         "@leafygreen-ui/logo": "^11.1.0",
-        "@leafygreen-ui/marketing-modal": "^6.0.0",
+        "@leafygreen-ui/marketing-modal": "^8.1.7",
         "@leafygreen-ui/menu": "^33.0.1",
-        "@leafygreen-ui/modal": "^18.0.0",
+        "@leafygreen-ui/modal": "^21.0.0",
         "@leafygreen-ui/palette": "^5.0.2",
         "@leafygreen-ui/pipeline": "^8.0.8",
         "@leafygreen-ui/polymorphic": "^3.1.0",
diff --git a/package.json b/package.json
index e646cd9baa5..b91e7a2957e 100644
--- a/package.json
+++ b/package.json
@@ -112,11 +112,11 @@
       "eslint-plugin-react-hooks": "^7.0.1"
     },
     "@leafygreen-ui/button": "^25.1.3",
-    "@leafygreen-ui/confirmation-modal": "^8.0.0",
+    "@leafygreen-ui/confirmation-modal": "^10.2.4",
     "@leafygreen-ui/form-field": "^4.0.7",
     "@leafygreen-ui/leafygreen-provider": "^5.0.4",
-    "@leafygreen-ui/marketing-modal": "^6.0.0",
-    "@leafygreen-ui/modal": "^18.0.0",
+    "@leafygreen-ui/marketing-modal": "^8.1.7",
+    "@leafygreen-ui/modal": "^21.0.0",
     "@leafygreen-ui/select": "^17.0.2",
     "@leafygreen-ui/text-input": "^16.2.1",
     "@leafygreen-ui/tokens": "^4.1.0",
diff --git a/packages/compass-components/package.json b/packages/compass-components/package.json
index 4be938259ce..7658a2280b2 100644
--- a/packages/compass-components/package.json
+++ b/packages/compass-components/package.json
@@ -44,7 +44,7 @@
     "@leafygreen-ui/chip": "^4.0.9",
     "@leafygreen-ui/code": "^20.2.3",
     "@leafygreen-ui/combobox": "^12.2.1",
-    "@leafygreen-ui/confirmation-modal": "^8.0.0",
+    "@leafygreen-ui/confirmation-modal": "^10.2.4",
     "@leafygreen-ui/copyable": "^12.0.1",
     "@leafygreen-ui/drawer": "^5.1.3",
     "@leafygreen-ui/emotion": "^5.1.0",
@@ -56,9 +56,9 @@
     "@leafygreen-ui/input-option": "^4.1.3",
     "@leafygreen-ui/leafygreen-provider": "^5.0.4",
     "@leafygreen-ui/logo": "^11.1.0",
-    "@leafygreen-ui/marketing-modal": "^6.0.0",
+    "@leafygreen-ui/marketing-modal": "^8.1.7",
     "@leafygreen-ui/menu": "^33.0.1",
-    "@leafygreen-ui/modal": "^18.0.0",
+    "@leafygreen-ui/modal": "^21.0.0",
     "@leafygreen-ui/palette": "^5.0.2",
     "@leafygreen-ui/pipeline": "^8.0.8",
     "@leafygreen-ui/polymorphic": "^3.1.0",

From 809698323d292bf0675f3501a9729dd80852289a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kr=C3=A6n=20Hansen?= <kraen.hansen@mongodb.com>
Date: Tue, 30 Sep 2025 15:10:08 +0200
Subject: [PATCH 02/42] Fix Modal to adopt LG Modal v20

---
 .../src/components/modals/info-modal.tsx               |  2 +-
 .../compass-components/src/components/modals/modal.tsx | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/compass-components/src/components/modals/info-modal.tsx b/packages/compass-components/src/components/modals/info-modal.tsx
index 6905465a925..c1f731cd610 100644
--- a/packages/compass-components/src/components/modals/info-modal.tsx
+++ b/packages/compass-components/src/components/modals/info-modal.tsx
@@ -31,7 +31,7 @@ function InfoModal({
   return (
     <Modal
       setOpen={onClose}
-      contentClassName={cx(!showCloseButton && paddingBottomStyles)}
+      className={cx(!showCloseButton && paddingBottomStyles)}
       {...modalProps}
     >
       <ModalHeader title={title} subtitle={subtitle} />
diff --git a/packages/compass-components/src/components/modals/modal.tsx b/packages/compass-components/src/components/modals/modal.tsx
index f3ade3779eb..c0719b3932b 100644
--- a/packages/compass-components/src/components/modals/modal.tsx
+++ b/packages/compass-components/src/components/modals/modal.tsx
@@ -39,8 +39,8 @@ const contentFullScreenStyles = css({
 });
 
 function UnwrappedModal({
+  backdropClassName,
   className,
-  contentClassName,
   children,
   fullScreen = false,
   ...props
@@ -56,15 +56,15 @@ function UnwrappedModal({
 
   return (
     <LeafyGreenModal
-      className={cx(
+      backdropClassName={cx(
         scrollbarStyles,
         fullScreen && modalFullScreenStyles,
-        className
+        backdropClassName
       )}
-      contentClassName={cx(
+      className={cx(
         contentStyles,
         fullScreen && contentFullScreenStyles,
-        contentClassName
+        className
       )}
       {...props}
     >

From 1a79dee41888ecc7db2a22a6abecf765c57b2ca5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kr=C3=A6n=20Hansen?= <kraen.hansen@mongodb.com>
Date: Tue, 30 Sep 2025 18:31:10 +0200
Subject: [PATCH 03/42] Fix connection-form to work around LG Modal v20

---
 .../connection-form/src/components/connection-form-modal.tsx  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/connection-form/src/components/connection-form-modal.tsx b/packages/connection-form/src/components/connection-form-modal.tsx
index 4f8e547110c..d77ff2efdaa 100644
--- a/packages/connection-form/src/components/connection-form-modal.tsx
+++ b/packages/connection-form/src/components/connection-form-modal.tsx
@@ -48,8 +48,8 @@ export default function ConnectionFormModal({
       open={isOpen}
       setOpen={setOpen}
       data-testid="connection-form-modal"
-      className={modalStyles}
-      contentClassName={cx(
+      backdropClassName={modalStyles}
+      className={cx(
         modalContentStyles,
         advancedOpen && modalContentFullHeightStyles
       )}

From baf002b224b2f0e917204e8bd6b8423300d59b10 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kr=C3=A6n=20Hansen?= <kraen.hansen@mongodb.com>
Date: Tue, 30 Sep 2025 18:41:09 +0200
Subject: [PATCH 04/42] Update generative-ai to adopt marketing-modal v7

---
 .../compass-generative-ai/src/components/ai-optin-modal.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/compass-generative-ai/src/components/ai-optin-modal.tsx b/packages/compass-generative-ai/src/components/ai-optin-modal.tsx
index b286d3eaae9..7abe84e6e8a 100644
--- a/packages/compass-generative-ai/src/components/ai-optin-modal.tsx
+++ b/packages/compass-generative-ai/src/components/ai-optin-modal.tsx
@@ -210,8 +210,10 @@ export const AIOptInModal: React.FunctionComponent<OptInModalProps> = ({
       data-testid="ai-optin-modal"
       // TODO Button Disabling
       className={!isProjectAIEnabled ? currentDisabledButtonStyles : undefined}
-      buttonText="Use AI Features"
-      onButtonClick={onConfirmClick}
+      buttonProps={{
+        children: 'Use AI Features',
+        onClick: onConfirmClick,
+      }}
       linkText="Not now"
       onLinkClick={onOptInModalClose}
       graphic={<AiImageBanner />}

From 9fc6af68d905112442e8f3d6adf10aa576381a8c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kr=C3=A6n=20Hansen?= <kraen.hansen@mongodb.com>
Date: Tue, 30 Sep 2025 23:20:34 +0200
Subject: [PATCH 05/42] Fix compass-import-export to work around LG modal v20

---
 .../src/components/export-code-view.tsx                  | 2 ++
 .../src/components/export-modal.tsx                      | 9 ++-------
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/packages/compass-import-export/src/components/export-code-view.tsx b/packages/compass-import-export/src/components/export-code-view.tsx
index 2edfcc2ad7f..3e9272a5c06 100644
--- a/packages/compass-import-export/src/components/export-code-view.tsx
+++ b/packages/compass-import-export/src/components/export-code-view.tsx
@@ -78,6 +78,8 @@ function ExportCodeView({
         data-testid="export-collection-code-preview-wrapper"
         id={codeElementId}
         language="javascript"
+        // eslint-disable-next-line jsx-a11y/no-autofocus
+        autoFocus={true}
       >
         {code}
       </Code>
diff --git a/packages/compass-import-export/src/components/export-modal.tsx b/packages/compass-import-export/src/components/export-modal.tsx
index 786ae9c02f0..9d4d98cf174 100644
--- a/packages/compass-import-export/src/components/export-modal.tsx
+++ b/packages/compass-import-export/src/components/export-modal.tsx
@@ -30,7 +30,7 @@ import type { ExportStatus, FieldsToExportOption } from '../modules/export';
 import type { RootExportState } from '../stores/export-store';
 import { SelectFileType } from './select-file-type';
 import { ExportSelectFields } from './export-select-fields';
-import { codeElementId, ExportCodeView } from './export-code-view';
+import { ExportCodeView } from './export-code-view';
 import type { ExportAggregation, ExportQuery } from '../export/export-types';
 import { queryHasProjection } from '../utils/query-has-projection';
 import { FieldsToExportOptions } from './export-field-options';
@@ -246,12 +246,7 @@ function ExportModal({
   }, [isOpen, resetExportFormState]);
 
   return (
-    <Modal
-      open={isOpen}
-      setOpen={closeExport}
-      data-testid="export-modal"
-      initialFocus={exportFullCollection ? undefined : `#${codeElementId}`}
-    >
+    <Modal open={isOpen} setOpen={closeExport} data-testid="export-modal">
       <ModalHeader
         title="Export"
         subtitle={aggregation ? `Aggregation on ${ns}` : `Collection ${ns}`}

From e1855b4fc69cbc5411dc61b369cd98fa1d72a32c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kr=C3=A6n=20Hansen?= <kraen.hansen@mongodb.com>
Date: Wed, 5 Nov 2025 13:16:36 +0100
Subject: [PATCH 06/42] Update compass-welcome to adopt marketing-modal v7

---
 packages/compass-welcome/src/components/modal.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/compass-welcome/src/components/modal.tsx b/packages/compass-welcome/src/components/modal.tsx
index 4299fdb3370..df1a4280f05 100644
--- a/packages/compass-welcome/src/components/modal.tsx
+++ b/packages/compass-welcome/src/components/modal.tsx
@@ -40,9 +40,8 @@ export const WelcomeModal: React.FunctionComponent<WelcomeModalProps> = ({
       data-testid="welcome-modal"
       open={isOpen}
       onClose={onClose}
-      onButtonClick={onClose}
+      buttonProps={{ onClick: onClose, children: 'Start' }}
       title="Welcome to Compass"
-      buttonText="Start"
       showBlob
       blobPosition="top right"
       disclaimer={

From c5274cb0ee8fc7e5e7d65b33646f972b70281fc7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kr=C3=A6n=20Hansen?= <kraen.hansen@mongodb.com>
Date: Wed, 1 Oct 2025 15:15:36 +0200
Subject: [PATCH 07/42] Update compass-explain-plan to LG Modal v20

---
 .../compass-explain-plan/src/components/explain-plan-modal.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/compass-explain-plan/src/components/explain-plan-modal.tsx b/packages/compass-explain-plan/src/components/explain-plan-modal.tsx
index b39ec2a4513..54cf7002353 100644
--- a/packages/compass-explain-plan/src/components/explain-plan-modal.tsx
+++ b/packages/compass-explain-plan/src/components/explain-plan-modal.tsx
@@ -115,7 +115,7 @@ export const ExplainPlanModal: React.FunctionComponent<
   return (
     <Modal
       data-testid="explain-plan-modal"
-      contentClassName={explainPlanModalContentStyles}
+      className={explainPlanModalContentStyles}
       open={isModalOpen}
       setOpen={onModalClose}
       fullScreen={true}

From 37a6cc7739fa07a9033d6eb34bc3cb5f512ea6d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kr=C3=A6n=20Hansen?= <kraen.hansen@mongodb.com>
Date: Wed, 1 Oct 2025 16:08:19 +0200
Subject: [PATCH 08/42] Fix compass-crud to adopt LG modal v20

---
 .../compass-crud/src/components/bulk-delete-modal.tsx    | 9 +++------
 .../compass-crud/src/components/bulk-update-modal.tsx    | 5 +++--
 .../src/components/insert-document-dialog.tsx            | 2 +-
 3 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/packages/compass-crud/src/components/bulk-delete-modal.tsx b/packages/compass-crud/src/components/bulk-delete-modal.tsx
index 31408f6f1c1..38ee689798e 100644
--- a/packages/compass-crud/src/components/bulk-delete-modal.tsx
+++ b/packages/compass-crud/src/components/bulk-delete-modal.tsx
@@ -94,12 +94,7 @@ const BulkDeleteModal: React.FunctionComponent<BulkDeleteModalProps> = ({
 
   const exportButtonId = useId();
   return (
-    <Modal
-      initialFocus={`#${exportButtonId}`}
-      setOpen={onCancel}
-      open={open}
-      data-testid="bulk-delete-modal"
-    >
+    <Modal setOpen={onCancel} open={open} data-testid="bulk-delete-modal">
       <ModalHeader
         title={`Delete ${documentCount ?? ''} document${
           documentCount === 1 ? '' : 's'
@@ -118,6 +113,8 @@ const BulkDeleteModal: React.FunctionComponent<BulkDeleteModalProps> = ({
             onClick={onExportToLanguage}
             data-testid="export-button"
             id={exportButtonId}
+            // eslint-disable-next-line jsx-a11y/no-autofocus
+            autoFocus
           >
             Export
           </Button>
diff --git a/packages/compass-crud/src/components/bulk-update-modal.tsx b/packages/compass-crud/src/components/bulk-update-modal.tsx
index 3b25d498b5f..d6f1e68d47e 100644
--- a/packages/compass-crud/src/components/bulk-update-modal.tsx
+++ b/packages/compass-crud/src/components/bulk-update-modal.tsx
@@ -404,8 +404,7 @@ export default function BulkUpdateModal({
       open={isOpen}
       setOpen={closeBulkUpdateModal}
       data-testid="bulk-update-modal"
-      contentClassName={enablePreview ? modalContentStyles : undefined}
-      initialFocus={`#${bulkUpdateUpdateId} .cm-content`}
+      className={enablePreview ? modalContentStyles : undefined}
     >
       <ModalHeader title={modalTitleAndButtonText} subtitle={ns} />
       <ModalBody>
@@ -440,6 +439,8 @@ export default function BulkUpdateModal({
                   onBlur={() => ({})}
                   annotations={annotations}
                   minLines={12}
+                  // eslint-disable-next-line jsx-a11y/no-autofocus
+                  autoFocus
                 />
 
                 <div className={bannerContainerStyles}>
diff --git a/packages/compass-crud/src/components/insert-document-dialog.tsx b/packages/compass-crud/src/components/insert-document-dialog.tsx
index ae887ed8ee3..a9c4882b19d 100644
--- a/packages/compass-crud/src/components/insert-document-dialog.tsx
+++ b/packages/compass-crud/src/components/insert-document-dialog.tsx
@@ -306,7 +306,7 @@ const InsertDocumentDialog: React.FC<InsertDocumentDialogProps> = ({
     <FormModal
       title="Insert Document"
       subtitle={`To collection ${ns}`}
-      className="insert-document-dialog"
+      backdropClassName="insert-document-dialog"
       open={isOpen}
       onSubmit={handleInsert.bind(this)}
       onCancel={closeInsertDocumentDialog}

From 5f418d27defada13c1a1c58db8bf52b16f2abad9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kr=C3=A6n=20Hansen?= <kraen.hansen@mongodb.com>
Date: Wed, 1 Oct 2025 16:12:01 +0200
Subject: [PATCH 09/42] Update compass-schema to LG Modal v20

---
 .../src/components/export-schema-legacy-modal.tsx               | 2 +-
 packages/compass-schema/src/components/export-schema-modal.tsx  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/compass-schema/src/components/export-schema-legacy-modal.tsx b/packages/compass-schema/src/components/export-schema-legacy-modal.tsx
index 1dbcfc59b0a..6f9ed4cfb5f 100644
--- a/packages/compass-schema/src/components/export-schema-legacy-modal.tsx
+++ b/packages/compass-schema/src/components/export-schema-legacy-modal.tsx
@@ -500,7 +500,7 @@ const ExportSchemaLegacyModal: React.FunctionComponent<{
     setShowLegacyExportTooltip,
   ]);
   return (
-    <Modal open={isOpen} setOpen={onClose} contentClassName={containerStyles}>
+    <Modal open={isOpen} setOpen={onClose} className={containerStyles}>
       <ModalHeader
         title={
           <>
diff --git a/packages/compass-schema/src/components/export-schema-modal.tsx b/packages/compass-schema/src/components/export-schema-modal.tsx
index c674708ca8d..b7e1cdd3b4d 100644
--- a/packages/compass-schema/src/components/export-schema-modal.tsx
+++ b/packages/compass-schema/src/components/export-schema-modal.tsx
@@ -149,7 +149,7 @@ const ExportSchemaModal: React.FunctionComponent<{
   );
 
   return (
-    <Modal open={isOpen} setOpen={onClose} contentClassName={modalStyles}>
+    <Modal open={isOpen} setOpen={onClose} className={modalStyles}>
       <ModalHeader title="Export JSON Schema" />
       <ModalBody>
         <Label

From 65831d9790a01d8323fc35b24d93222c1cc84ad5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kr=C3=A6n=20Hansen?= <kraen.hansen@mongodb.com>
Date: Thu, 2 Oct 2025 10:09:17 +0200
Subject: [PATCH 10/42] Add workaround for jsdom missing HTMLDialogElement
 support

---
 .../register/jsdom-extra-mocks-register.js    | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/configs/mocha-config-compass/register/jsdom-extra-mocks-register.js b/configs/mocha-config-compass/register/jsdom-extra-mocks-register.js
index c8e938dc10b..e631609c475 100644
--- a/configs/mocha-config-compass/register/jsdom-extra-mocks-register.js
+++ b/configs/mocha-config-compass/register/jsdom-extra-mocks-register.js
@@ -35,6 +35,25 @@ Object.assign(tabbable, {
     origTabbable.isTabbable(node, { ...options, displayCheck: 'none' }),
 });
 
+// Workaround for missing HTMLDialogElement in jsdom
+// See https://github.com/jsdom/jsdom/issues/3294
+
+Object.assign(HTMLDialogElement.prototype, {
+  show() {
+    this.open = true;
+    this.style.display = '';
+  },
+  showModal() {
+    this.open = true;
+    this.style.display = '';
+  },
+  close(returnValue) {
+    this.open = false;
+    this.returnValue = returnValue;
+    this.style.display = 'none';
+  },
+});
+
 // leafygreen (through `clipboard` library) uses deprecated API check that is
 // not working in jsdom if copy / paste APIs are supported
 if (!window.document.queryCommandSupported) {

From 09eb31dc305044889c19ffbc53b0633bb81fae6e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kr=C3=A6n=20Hansen?= <kraen.hansen@mongodb.com>
Date: Tue, 7 Oct 2025 11:00:32 +0200
Subject: [PATCH 11/42] Update generative-ai to adopt LG modal v20

---
 .../compass-generative-ai/src/components/ai-optin-modal.tsx   | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/compass-generative-ai/src/components/ai-optin-modal.tsx b/packages/compass-generative-ai/src/components/ai-optin-modal.tsx
index 7abe84e6e8a..6bcfc228fb9 100644
--- a/packages/compass-generative-ai/src/components/ai-optin-modal.tsx
+++ b/packages/compass-generative-ai/src/components/ai-optin-modal.tsx
@@ -209,7 +209,9 @@ export const AIOptInModal: React.FunctionComponent<OptInModalProps> = ({
       onClose={handleModalClose}
       data-testid="ai-optin-modal"
       // TODO Button Disabling
-      className={!isProjectAIEnabled ? currentDisabledButtonStyles : undefined}
+      backdropClassName={
+        !isProjectAIEnabled ? currentDisabledButtonStyles : undefined
+      }
       buttonProps={{
         children: 'Use AI Features',
         onClick: onConfirmClick,

From cd281f6a29af06cb38ab19dcc3acc7527d1277de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kr=C3=A6n=20Hansen?= <kraen.hansen@mongodb.com>
Date: Tue, 7 Oct 2025 14:40:23 +0200
Subject: [PATCH 12/42] Fix fullScreen prop on derived Modal

---
 .../src/components/modals/modal.tsx           | 32 ++++---------------
 1 file changed, 6 insertions(+), 26 deletions(-)

diff --git a/packages/compass-components/src/components/modals/modal.tsx b/packages/compass-components/src/components/modals/modal.tsx
index c0719b3932b..2361377c1f3 100644
--- a/packages/compass-components/src/components/modals/modal.tsx
+++ b/packages/compass-components/src/components/modals/modal.tsx
@@ -1,11 +1,10 @@
 import React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
-import { spacing } from '@leafygreen-ui/tokens';
 import { Body, Modal as LeafyGreenModal } from '../leafygreen';
 import { useScrollbars } from '../../hooks/use-scrollbars';
 import { withStackedComponentStyles } from '../../hooks/use-stacked-component';
 
-const contentStyles = css({
+const styles = css({
   width: '600px',
   letterSpacing: 0,
   padding: 0,
@@ -15,22 +14,9 @@ const contentStyles = css({
   transform: 'none',
 });
 
-const modalFullScreenStyles = css({
-  '& > div': {
-    paddingTop: spacing[600],
-    paddingBottom: spacing[600],
-    paddingLeft: spacing[800],
-    paddingRight: spacing[800],
-    height: '100vh',
-    maxHeight: '100vh',
-  },
-});
-
-const contentFullScreenStyles = css({
+const fullScreenStyles = css({
   width: '100%',
   height: '100%',
-  maxHeight: '100%',
-  margin: 0,
   alignSelf: 'stretch',
   '& > div': {
     height: '100%',
@@ -56,16 +42,10 @@ function UnwrappedModal({
 
   return (
     <LeafyGreenModal
-      backdropClassName={cx(
-        scrollbarStyles,
-        fullScreen && modalFullScreenStyles,
-        backdropClassName
-      )}
-      className={cx(
-        contentStyles,
-        fullScreen && contentFullScreenStyles,
-        className
-      )}
+      backdropClassName={cx(scrollbarStyles, backdropClassName)}
+      className={cx(styles, className, {
+        [fullScreenStyles]: fullScreen && props.open,
+      })}
       {...props}
     >
       <Body as="div">{children}</Body>

From 21f3682c76a216c9eabae09616d93dc91ea79621 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kr=C3=A6n=20Hansen?= <kraen.hansen@mongodb.com>
Date: Tue, 7 Oct 2025 15:17:47 +0200
Subject: [PATCH 13/42] Remove use of deprecated backdropClassName

---
 .../components/modals/confirmation-modal.tsx  |  9 ++++---
 .../src/components/modals/marketing-modal.tsx |  7 ++++-
 .../src/components/modals/modal.tsx           | 12 +--------
 .../src/components/insert-document-dialog.tsx |  1 -
 .../src/components/connection-form-modal.tsx  | 27 +++----------------
 5 files changed, 17 insertions(+), 39 deletions(-)

diff --git a/packages/compass-components/src/components/modals/confirmation-modal.tsx b/packages/compass-components/src/components/modals/confirmation-modal.tsx
index c824cc59859..b92ca889c63 100644
--- a/packages/compass-components/src/components/modals/confirmation-modal.tsx
+++ b/packages/compass-components/src/components/modals/confirmation-modal.tsx
@@ -6,12 +6,15 @@ import {
 } from '../leafygreen';
 import { withStackedComponentStyles } from '../../hooks/use-stacked-component';
 
+export type ConfirmationModalProps = Omit<
+  React.ComponentProps<typeof LeafyGreenConfirmationModal>,
+  'backdropClassName'
+>;
+
 function ConfirmationModal({
   children,
   ...props
-}: React.ComponentProps<
-  typeof LeafyGreenConfirmationModal
->): React.ReactElement {
+}: ConfirmationModalProps): React.ReactElement {
   return (
     <LeafyGreenConfirmationModal {...props}>
       <Body as="div">{children}</Body>
diff --git a/packages/compass-components/src/components/modals/marketing-modal.tsx b/packages/compass-components/src/components/modals/marketing-modal.tsx
index 6277d545861..14fbf72dd99 100644
--- a/packages/compass-components/src/components/modals/marketing-modal.tsx
+++ b/packages/compass-components/src/components/modals/marketing-modal.tsx
@@ -5,10 +5,15 @@ import {
 } from '../leafygreen';
 import { withStackedComponentStyles } from '../../hooks/use-stacked-component';
 
+export type MarketingModalProps = Omit<
+  React.ComponentProps<typeof LeafyGreenMarketingModal>,
+  'backdropClassName'
+>;
+
 function MarketingModal({
   children,
   ...props
-}: React.ComponentProps<typeof LeafyGreenMarketingModal>): React.ReactElement {
+}: MarketingModalProps): React.ReactElement {
   return (
     <LeafyGreenMarketingModal {...props}>
       <Body as="div">{children}</Body>
diff --git a/packages/compass-components/src/components/modals/modal.tsx b/packages/compass-components/src/components/modals/modal.tsx
index 2361377c1f3..d35cfe30439 100644
--- a/packages/compass-components/src/components/modals/modal.tsx
+++ b/packages/compass-components/src/components/modals/modal.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { Body, Modal as LeafyGreenModal } from '../leafygreen';
-import { useScrollbars } from '../../hooks/use-scrollbars';
 import { withStackedComponentStyles } from '../../hooks/use-stacked-component';
 
 const styles = css({
@@ -25,24 +24,15 @@ const fullScreenStyles = css({
 });
 
 function UnwrappedModal({
-  backdropClassName,
   className,
   children,
   fullScreen = false,
   ...props
-}: React.ComponentProps<typeof LeafyGreenModal> & {
+}: Omit<React.ComponentProps<typeof LeafyGreenModal>, 'backdropClassName'> & {
   fullScreen?: boolean;
 }): React.ReactElement {
-  // NOTE: We supply scrollbar styles to the `Modal` content as
-  // there is currently a bug in `LeafyGreen` with the portal providers
-  // where our top level `portalContainer` we supply to the `LeafyGreenProvider`
-  // in home.tsx is not used by Modals.
-  // Once this issue is fixed we can remove these styles here.
-  const { className: scrollbarStyles } = useScrollbars();
-
   return (
     <LeafyGreenModal
-      backdropClassName={cx(scrollbarStyles, backdropClassName)}
       className={cx(styles, className, {
         [fullScreenStyles]: fullScreen && props.open,
       })}
diff --git a/packages/compass-crud/src/components/insert-document-dialog.tsx b/packages/compass-crud/src/components/insert-document-dialog.tsx
index a9c4882b19d..5d406e1a6e4 100644
--- a/packages/compass-crud/src/components/insert-document-dialog.tsx
+++ b/packages/compass-crud/src/components/insert-document-dialog.tsx
@@ -306,7 +306,6 @@ const InsertDocumentDialog: React.FC<InsertDocumentDialogProps> = ({
     <FormModal
       title="Insert Document"
       subtitle={`To collection ${ns}`}
-      backdropClassName="insert-document-dialog"
       open={isOpen}
       onSubmit={handleInsert.bind(this)}
       onCancel={closeInsertDocumentDialog}
diff --git a/packages/connection-form/src/components/connection-form-modal.tsx b/packages/connection-form/src/components/connection-form-modal.tsx
index d77ff2efdaa..7287b116557 100644
--- a/packages/connection-form/src/components/connection-form-modal.tsx
+++ b/packages/connection-form/src/components/connection-form-modal.tsx
@@ -1,32 +1,16 @@
-import { css, cx, Modal, spacing } from '@mongodb-js/compass-components';
+import { css, Modal } from '@mongodb-js/compass-components';
 import React, { useState } from 'react';
 import type { Dispatch, SetStateAction } from 'react';
 import type { ConnectionFormProps } from './connection-form';
 import ConnectionForm from './connection-form';
 
-const modalStyles = css({
-  '& > div': {
-    height: '100%',
-  },
-});
-
-const modalContentStyles = css({
+const styles = css({
   width: '960px',
   maxWidth: '960px',
-  margin: 0,
 
   display: 'flex',
   alignItems: 'stretch',
   justifyContent: 'stretch',
-
-  '& > div': {
-    width: '100%',
-  },
-});
-
-const modalContentFullHeightStyles = css({
-  height: '100%',
-  maxHeight: spacing[1600] * 18,
 });
 
 export default function ConnectionFormModal({
@@ -48,11 +32,8 @@ export default function ConnectionFormModal({
       open={isOpen}
       setOpen={setOpen}
       data-testid="connection-form-modal"
-      backdropClassName={modalStyles}
-      className={cx(
-        modalContentStyles,
-        advancedOpen && modalContentFullHeightStyles
-      )}
+      className={styles}
+      fullScreen={advancedOpen}
     >
       <ConnectionForm
         // Key is not applied to the Modal itself or the upper component so that

From aa0f76fbc9f4b51ed78f33ccb35ec360f119df10 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kr=C3=A6n=20Hansen?= <kraen.hansen@mongodb.com>
Date: Wed, 10 Dec 2025 11:48:35 +0100
Subject: [PATCH 14/42] Remove workaround for MarketingModal button disabling

---
 .../src/components/ai-optin-modal.tsx         | 55 +------------------
 1 file changed, 1 insertion(+), 54 deletions(-)

diff --git a/packages/compass-generative-ai/src/components/ai-optin-modal.tsx b/packages/compass-generative-ai/src/components/ai-optin-modal.tsx
index 6bcfc228fb9..ee55d55e5db 100644
--- a/packages/compass-generative-ai/src/components/ai-optin-modal.tsx
+++ b/packages/compass-generative-ai/src/components/ai-optin-modal.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect, useCallback } from 'react';
 import { connect } from 'react-redux';
-import type { Theme } from '@mongodb-js/compass-components';
 import {
   Banner,
   Body,
@@ -73,53 +72,6 @@ const bannerStyles = css({
   textAlign: 'left',
 });
 
-// TODO: The LG MarketingModal does not provide a way to disable the button
-// so this is a temporary workaround to make the button look disabled.
-const leafyGreenButtonSelector =
-  'button[data-lgid="lg-button"]:not([aria-label="Close modal"])';
-const focusSelector = `&:focus-visible, &[data-focus="true"]`;
-const hoverSelector = `&:hover, &[data-hover="true"]`;
-const activeSelector = `&:active, &[data-active="true"]`;
-const focusBoxShadow = (color: string) => `
-    0 0 0 2px ${color}, 
-    0 0 0 4px ${palette.blue.light1};
-`;
-const disabledButtonStyles: Record<Theme, string> = {
-  [Themes.Light]: css({
-    [leafyGreenButtonSelector]: {
-      [`&, ${hoverSelector}, ${activeSelector}`]: {
-        backgroundColor: palette.gray.light2,
-        borderColor: palette.gray.light1,
-        color: palette.gray.base,
-        boxShadow: 'none',
-        cursor: 'not-allowed',
-      },
-
-      [focusSelector]: {
-        color: palette.gray.base,
-        boxShadow: focusBoxShadow(palette.white),
-      },
-    },
-  }),
-
-  [Themes.Dark]: css({
-    [leafyGreenButtonSelector]: {
-      [`&, ${hoverSelector}, ${activeSelector}`]: {
-        backgroundColor: palette.gray.dark3,
-        borderColor: palette.gray.dark2,
-        color: palette.gray.dark1,
-        boxShadow: 'none',
-        cursor: 'not-allowed',
-      },
-
-      [focusSelector]: {
-        color: palette.gray.dark1,
-        boxShadow: focusBoxShadow(palette.black),
-      },
-    },
-  }),
-};
-
 const CloudAIOptInBannerContent: React.FunctionComponent<{
   isProjectAIEnabled: boolean;
   isSampleDocumentPassingEnabled: boolean;
@@ -179,8 +131,6 @@ export const AIOptInModal: React.FunctionComponent<OptInModalProps> = ({
   );
   const track = useTelemetry();
   const darkMode = useDarkMode();
-  const currentDisabledButtonStyles =
-    disabledButtonStyles[darkMode ? Themes.Dark : Themes.Light];
 
   useEffect(() => {
     if (isOptInModalVisible) {
@@ -208,13 +158,10 @@ export const AIOptInModal: React.FunctionComponent<OptInModalProps> = ({
       open={isOptInModalVisible}
       onClose={handleModalClose}
       data-testid="ai-optin-modal"
-      // TODO Button Disabling
-      backdropClassName={
-        !isProjectAIEnabled ? currentDisabledButtonStyles : undefined
-      }
       buttonProps={{
         children: 'Use AI Features',
         onClick: onConfirmClick,
+        disabled: !isProjectAIEnabled,
       }}
       linkText="Not now"
       onLinkClick={onOptInModalClose}

From 5cc4946f6c50a59ef96d143dbf496d4b0f6fc9de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kr=C3=A6n=20Hansen?= <kraen.hansen@mongodb.com>
Date: Tue, 7 Oct 2025 17:21:28 +0200
Subject: [PATCH 15/42] Fix remaining components tests

---
 .../components/modals/confirmation-modal.spec.tsx    | 11 ++++++++---
 .../src/hooks/use-confirmation.spec.tsx              | 12 ++++--------
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/packages/compass-components/src/components/modals/confirmation-modal.spec.tsx b/packages/compass-components/src/components/modals/confirmation-modal.spec.tsx
index fc1a1ed0640..392709a3ab2 100644
--- a/packages/compass-components/src/components/modals/confirmation-modal.spec.tsx
+++ b/packages/compass-components/src/components/modals/confirmation-modal.spec.tsx
@@ -1,5 +1,10 @@
 import React from 'react';
-import { render, screen, cleanup } from '@mongodb-js/testing-library-compass';
+import {
+  render,
+  screen,
+  cleanup,
+  within,
+} from '@mongodb-js/testing-library-compass';
 import { expect } from 'chai';
 
 import ConfirmationModal from './confirmation-modal';
@@ -23,8 +28,8 @@ describe('ConfirmationModal Component', function () {
   });
 
   it('should show the modal button', function () {
-    renderModal();
-    const button = screen.getByText('Confirm').closest('button');
+    const { container } = renderModal();
+    const button = within(container).getByText('Confirm').closest('button');
     expect(button).to.not.match('disabled');
   });
 
diff --git a/packages/compass-components/src/hooks/use-confirmation.spec.tsx b/packages/compass-components/src/hooks/use-confirmation.spec.tsx
index 15b436401d1..9dd3c25a845 100644
--- a/packages/compass-components/src/hooks/use-confirmation.spec.tsx
+++ b/packages/compass-components/src/hooks/use-confirmation.spec.tsx
@@ -2,7 +2,6 @@ import {
   render,
   screen,
   waitFor,
-  waitForElementToBeRemoved,
   within,
   userEvent,
 } from '@mongodb-js/testing-library-compass';
@@ -34,7 +33,8 @@ describe('use-confirmation', function () {
       );
       userEvent.click(screen.getByText('Open Modal'));
       await waitFor(() => {
-        modal = screen.getByTestId('confirmation-modal');
+        // TODO: Change to 'confirmation-modal' when https://github.com/mongodb/leafygreen-ui/pull/3183 gets released
+        modal = screen.getByTestId('lg-confirmation_modal');
       });
     });
 
@@ -49,18 +49,14 @@ describe('use-confirmation', function () {
 
     it('handles cancel action', async function () {
       userEvent.click(within(modal).getByText('Cancel'));
-      await waitForElementToBeRemoved(() =>
-        screen.getByTestId('confirmation-modal')
-      );
+      await waitFor(() => expect(modal).to.not.be.displayed);
       const confirmed = await response;
       expect(confirmed).to.be.false;
     });
 
     it('handles confirm action', async function () {
       userEvent.click(within(modal).getByText('Yes'));
-      await waitForElementToBeRemoved(() =>
-        screen.getByTestId('confirmation-modal')
-      );
+      await waitFor(() => expect(modal).to.not.be.displayed);
       const confirmed = await response;
       expect(confirmed).to.be.true;
     });

From 5ae783dab27191eb44ed52e470edc35310db3911 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kr=C3=A6n=20Hansen?= <kraen.hansen@mongodb.com>
Date: Wed, 8 Oct 2025 09:44:32 +0200
Subject: [PATCH 16/42] Revert workaround for LG-5593

---
 .../compass-components/src/hooks/use-confirmation.spec.tsx     | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/compass-components/src/hooks/use-confirmation.spec.tsx b/packages/compass-components/src/hooks/use-confirmation.spec.tsx
index 9dd3c25a845..962d9ee1499 100644
--- a/packages/compass-components/src/hooks/use-confirmation.spec.tsx
+++ b/packages/compass-components/src/hooks/use-confirmation.spec.tsx
@@ -33,8 +33,7 @@ describe('use-confirmation', function () {
       );
       userEvent.click(screen.getByText('Open Modal'));
       await waitFor(() => {
-        // TODO: Change to 'confirmation-modal' when https://github.com/mongodb/leafygreen-ui/pull/3183 gets released
-        modal = screen.getByTestId('lg-confirmation_modal');
+        modal = screen.getByTestId('confirmation-modal');
       });
     });
 

From 669e0cdf3f8322068a4015980fe0d3f072c24c6e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kr=C3=A6n=20Hansen?= <kraen.hansen@mongodb.com>
Date: Wed, 5 Nov 2025 18:10:28 +0100
Subject: [PATCH 17/42] Update existing tests to handle dialog elements
 remaining in the DOM

---
 .../testing-library-compass/src/assertions.ts | 41 +++++++++++++++++++
 configs/testing-library-compass/src/index.tsx |  2 +
 .../src/compass-assistant-provider.spec.tsx   | 40 ++++++++++--------
 .../mock-data-generator-modal.spec.tsx        | 16 ++++----
 .../src/components/modals/modal.spec.tsx      | 25 +++++++++++
 .../src/components/modal.spec.tsx             |  6 +--
 6 files changed, 103 insertions(+), 27 deletions(-)
 create mode 100644 configs/testing-library-compass/src/assertions.ts
 create mode 100644 packages/compass-components/src/components/modals/modal.spec.tsx

diff --git a/configs/testing-library-compass/src/assertions.ts b/configs/testing-library-compass/src/assertions.ts
new file mode 100644
index 00000000000..dd2bc945c90
--- /dev/null
+++ b/configs/testing-library-compass/src/assertions.ts
@@ -0,0 +1,41 @@
+import { Assertion, util } from 'chai';
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  export namespace Chai {
+    interface Assertion {
+      /** Asserts that a dialog is open */
+      get open(): Assertion;
+      /** Asserts that a dialog is closed */
+      get closed(): Assertion;
+    }
+  }
+}
+
+util.addProperty(
+  Assertion.prototype,
+  'open',
+  function (this: typeof Assertion) {
+    const obj = util.flag(this, 'object');
+    new Assertion(obj).to.be.instanceof(HTMLDialogElement);
+    new Assertion(obj as HTMLDialogElement).has.property(
+      'open',
+      true,
+      'Expected dialog to be open'
+    );
+  }
+);
+
+util.addProperty(
+  Assertion.prototype,
+  'closed',
+  function (this: typeof Assertion) {
+    const obj = util.flag(this, 'object');
+    new Assertion(obj).to.be.instanceof(HTMLDialogElement);
+    new Assertion(obj as HTMLDialogElement).has.property(
+      'open',
+      false,
+      'Expected dialog to be closed'
+    );
+  }
+);
diff --git a/configs/testing-library-compass/src/index.tsx b/configs/testing-library-compass/src/index.tsx
index 7a6d8bb9723..f16052129db 100644
--- a/configs/testing-library-compass/src/index.tsx
+++ b/configs/testing-library-compass/src/index.tsx
@@ -73,6 +73,8 @@ import { expect } from 'chai';
 import { Provider } from 'react-redux';
 import ConnectionString from 'mongodb-connection-string-url';
 
+import './assertions';
+
 function wait(ms: number) {
   return new Promise((resolve) => {
     setTimeout(resolve, ms);
diff --git a/packages/compass-assistant/src/compass-assistant-provider.spec.tsx b/packages/compass-assistant/src/compass-assistant-provider.spec.tsx
index 6e7af36a83e..bee716f208f 100644
--- a/packages/compass-assistant/src/compass-assistant-provider.spec.tsx
+++ b/packages/compass-assistant/src/compass-assistant-provider.spec.tsx
@@ -5,7 +5,6 @@ import {
   screen,
   userEvent,
   waitFor,
-  waitForElementToBeRemoved,
   within,
 } from '@mongodb-js/testing-library-compass';
 import {
@@ -628,8 +627,9 @@ describe('CompassAssistantProvider', function () {
         userEvent.click(clearButton);
 
         await waitFor(() => {
-          expect(screen.getByTestId('assistant-confirm-clear-chat-modal')).to
-            .exist;
+          expect(
+            screen.getByTestId('assistant-confirm-clear-chat-modal').firstChild
+          ).to.exist;
         });
 
         // There should be messages in the chat
@@ -640,9 +640,11 @@ describe('CompassAssistantProvider', function () {
         const confirmButton = within(modal).getByText('Clear chat');
         userEvent.click(confirmButton);
 
-        await waitForElementToBeRemoved(() =>
-          screen.getByTestId('assistant-confirm-clear-chat-modal')
-        );
+        await waitFor(() => {
+          expect(
+            screen.getByTestId('assistant-confirm-clear-chat-modal').firstChild
+          ).to.not.exist;
+        });
 
         expect(mockChat.messages).to.be.empty;
         expect(screen.queryByTestId('assistant-message-1')).to.not.exist;
@@ -658,8 +660,9 @@ describe('CompassAssistantProvider', function () {
         userEvent.click(clearButton);
 
         await waitFor(() => {
-          expect(screen.getByTestId('assistant-confirm-clear-chat-modal')).to
-            .exist;
+          expect(
+            screen.getByTestId('assistant-confirm-clear-chat-modal').firstChild
+          ).to.exist;
         });
 
         // There should be messages in the chat
@@ -670,9 +673,11 @@ describe('CompassAssistantProvider', function () {
         const cancelButton = within(modal).getByText('Cancel');
         userEvent.click(cancelButton);
 
-        await waitForElementToBeRemoved(() =>
-          screen.getByTestId('assistant-confirm-clear-chat-modal')
-        );
+        await waitFor(() => {
+          expect(
+            screen.getByTestId('assistant-confirm-clear-chat-modal').firstChild
+          ).to.not.exist;
+        });
 
         expect(mockChat.messages).to.deep.equal(mockMessages);
         expect(screen.getByTestId('assistant-message-1')).to.exist;
@@ -690,8 +695,9 @@ describe('CompassAssistantProvider', function () {
         userEvent.click(clearButton);
 
         await waitFor(() => {
-          expect(screen.getByTestId('assistant-confirm-clear-chat-modal')).to
-            .exist;
+          expect(
+            screen.getByTestId('assistant-confirm-clear-chat-modal').firstChild
+          ).to.exist;
         });
 
         // There should be messages in the chat
@@ -704,9 +710,11 @@ describe('CompassAssistantProvider', function () {
         const confirmButton = within(modal).getByText('Clear chat');
         userEvent.click(confirmButton);
 
-        await waitForElementToBeRemoved(() =>
-          screen.getByTestId('assistant-confirm-clear-chat-modal')
-        );
+        await waitFor(() => {
+          expect(
+            screen.getByTestId('assistant-confirm-clear-chat-modal').firstChild
+          ).to.not.exist;
+        });
 
         // The non-genuine warning message should still be in the chat
         expect(screen.getByTestId('assistant-message-non-genuine-warning')).to
diff --git a/packages/compass-collection/src/components/mock-data-generator-modal/mock-data-generator-modal.spec.tsx b/packages/compass-collection/src/components/mock-data-generator-modal/mock-data-generator-modal.spec.tsx
index 4b61eb4a41b..8907a2c3565 100644
--- a/packages/compass-collection/src/components/mock-data-generator-modal/mock-data-generator-modal.spec.tsx
+++ b/packages/compass-collection/src/components/mock-data-generator-modal/mock-data-generator-modal.spec.tsx
@@ -134,23 +134,23 @@ describe('MockDataGeneratorModal', () => {
     it('renders the modal when isOpen is true', async () => {
       await renderModal();
 
-      expect(screen.getByTestId('generate-mock-data-modal')).to.exist;
+      expect(screen.getByTestId('generate-mock-data-modal')).to.be.open;
     });
 
     it('does not render the modal when isOpen is false', async () => {
       await renderModal({ isOpen: false });
 
-      expect(screen.queryByTestId('generate-mock-data-modal')).to.not.exist;
+      expect(screen.getByTestId('generate-mock-data-modal')).to.be.closed;
     });
 
     it('closes the modal when the close button is clicked', async () => {
       await renderModal();
 
-      expect(screen.getByTestId('generate-mock-data-modal')).to.exist;
+      expect(screen.getByTestId('generate-mock-data-modal')).to.be.open;
       userEvent.click(screen.getByLabelText('Close modal'));
       await waitFor(
         () =>
-          expect(screen.queryByTestId('generate-mock-data-modal')).to.not.exist
+          expect(screen.getByTestId('generate-mock-data-modal')).to.be.closed
       );
     });
 
@@ -172,11 +172,11 @@ describe('MockDataGeneratorModal', () => {
     it('closes the modal when the cancel button is clicked', async () => {
       await renderModal();
 
-      expect(screen.getByTestId('generate-mock-data-modal')).to.exist;
+      expect(screen.getByTestId('generate-mock-data-modal')).to.be.open;
       userEvent.click(screen.getByText('Cancel'));
       await waitFor(
         () =>
-          expect(screen.queryByTestId('generate-mock-data-modal')).to.not.exist
+          expect(screen.getByTestId('generate-mock-data-modal')).to.be.closed
       );
     });
 
@@ -1098,11 +1098,11 @@ describe('MockDataGeneratorModal', () => {
         },
       });
 
-      expect(screen.getByTestId('generate-mock-data-modal')).to.exist;
+      expect(screen.getByTestId('generate-mock-data-modal')).to.be.open;
       userEvent.click(screen.getByText('Done'));
       await waitFor(
         () =>
-          expect(screen.queryByTestId('generate-mock-data-modal')).to.not.exist
+          expect(screen.getByTestId('generate-mock-data-modal')).to.be.closed
       );
     });
 
diff --git a/packages/compass-components/src/components/modals/modal.spec.tsx b/packages/compass-components/src/components/modals/modal.spec.tsx
new file mode 100644
index 00000000000..5b8e184f3f0
--- /dev/null
+++ b/packages/compass-components/src/components/modals/modal.spec.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { render, screen } from '@mongodb-js/testing-library-compass';
+import { expect } from 'chai';
+
+import { Modal } from './modal';
+
+describe('Modal Component', function () {
+  it('opens and closes', () => {
+    const { rerender } = render(
+      <Modal data-testid="modal" open={false}>
+        <p data-testid="modal-content">The content!</p>
+      </Modal>
+    );
+
+    expect(screen.getByTestId('modal')).to.be.closed;
+
+    rerender(
+      <Modal data-testid="modal" open={true}>
+        <p data-testid="modal-content">The content!</p>
+      </Modal>
+    );
+
+    expect(screen.getByTestId('modal')).to.be.open;
+  });
+});
diff --git a/packages/compass-welcome/src/components/modal.spec.tsx b/packages/compass-welcome/src/components/modal.spec.tsx
index 0af69e984e0..df813ccf58d 100644
--- a/packages/compass-welcome/src/components/modal.spec.tsx
+++ b/packages/compass-welcome/src/components/modal.spec.tsx
@@ -25,7 +25,7 @@ describe('WelcomeModal', function () {
     expect(startButton).to.be.visible;
     userEvent.click(startButton);
     await waitFor(() => {
-      expect(() => screen.getByTestId('welcome-modal')).to.throw();
+      expect(screen.getByTestId('welcome-modal')).to.be.closed;
     });
   });
 
@@ -36,7 +36,7 @@ describe('WelcomeModal', function () {
     const closeButton = screen.getByLabelText('Close modal');
     userEvent.click(closeButton);
     await waitFor(() => {
-      expect(() => screen.getByTestId('welcome-modal')).to.throw();
+      expect(screen.getByTestId('welcome-modal')).to.be.closed;
     });
   });
 
@@ -48,7 +48,7 @@ describe('WelcomeModal', function () {
     const settingsLink = screen.getByText('Settings');
     userEvent.click(settingsLink);
     await waitFor(() => {
-      expect(() => screen.getByTestId('welcome-modal')).to.throw();
+      expect(screen.getByTestId('welcome-modal')).to.be.closed;
     });
     expect(emitSpy).to.have.been.called;
   });

From e473a043aeebe3e113a09bc08a2024d755d90493 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kr=C3=A6n=20Hansen?= <kraen.hansen@mongodb.com>
Date: Thu, 6 Nov 2025 21:10:30 +0100
Subject: [PATCH 18/42] Update databases-collections to allow immediate removal
 of the heading

---
 .../src/stores/create-namespace.spec.tsx                     | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/databases-collections/src/stores/create-namespace.spec.tsx b/packages/databases-collections/src/stores/create-namespace.spec.tsx
index 0bf133115dd..9f223bb48d4 100644
--- a/packages/databases-collections/src/stores/create-namespace.spec.tsx
+++ b/packages/databases-collections/src/stores/create-namespace.spec.tsx
@@ -101,9 +101,8 @@ describe('CreateNamespacePlugin', function () {
     });
 
     userEvent.click(screen.getByRole('button', { name: 'Cancel' }));
-    await waitForElementToBeRemoved(
-      screen.queryByRole('heading', { name: 'Create Database' })
-    );
+    expect(screen.queryByRole('heading', { name: 'Create Database' })).to.not
+      .exist;
     expect(createCollectionSpy).to.not.be.called;
   });
 

From 01c66a3a93818d05cecd028477b18baf2f06734e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kr=C3=A6n=20Hansen?= <kraen.hansen@mongodb.com>
Date: Fri, 7 Nov 2025 00:08:01 +0100
Subject: [PATCH 19/42] Update e2e tests to use waitForDisplayed over
 waitForExist as this is more important with the new dialog

---
 packages/compass-e2e-tests/tests/tabs.test.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/compass-e2e-tests/tests/tabs.test.ts b/packages/compass-e2e-tests/tests/tabs.test.ts
index d363384eea8..b4d2357abc3 100644
--- a/packages/compass-e2e-tests/tests/tabs.test.ts
+++ b/packages/compass-e2e-tests/tests/tabs.test.ts
@@ -121,7 +121,7 @@ describe('Global Tabs', function () {
     );
     await browser
       .$(Selectors.ConfirmTabCloseModal)
-      .waitForExist({ reverse: true });
+      .waitForDisplayed({ reverse: true });
 
     // Checking first that cancel leaves the tab on the screen
     expect(await browser.$$(Selectors.workspaceTab()).length).to.equal(1);
@@ -140,7 +140,7 @@ describe('Global Tabs', function () {
     );
     await browser
       .$(Selectors.ConfirmTabCloseModal)
-      .waitForExist({ reverse: true });
+      .waitForDisplayed({ reverse: true });
 
     // When confirmed, should remove the tab
     expect(await browser.$$(Selectors.workspaceTab()).length).to.equal(0);

From b3439400034c856971fa63d2efd1300fcddfa926 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kr=C3=A6n=20Hansen?= <kraen.hansen@mongodb.com>
Date: Fri, 7 Nov 2025 11:13:03 +0100
Subject: [PATCH 20/42] Update e2e tests removing [role=dialog] from confirm
 dialog selectors

---
 packages/compass-e2e-tests/helpers/selectors.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/compass-e2e-tests/helpers/selectors.ts b/packages/compass-e2e-tests/helpers/selectors.ts
index b58127bf20e..a4ffb089b67 100644
--- a/packages/compass-e2e-tests/helpers/selectors.ts
+++ b/packages/compass-e2e-tests/helpers/selectors.ts
@@ -1330,11 +1330,11 @@ export const ConfirmationModalInput = `${ConfirmationModal} input`;
 
 export const confirmationModalConfirmButton = (
   modalSelector = ConfirmationModal
-) => `${modalSelector} [role=dialog] [data-testid*="confirm_button"]`;
+) => `${modalSelector} [data-testid*="confirm_button"]`;
 
 export const confirmationModalCancelButton = (
   modalSelector = ConfirmationModal
-) => `${modalSelector} [role=dialog] [data-testid*="cancel_button"]`;
+) => `${modalSelector} [data-testid*="cancel_button"]`;
 
 // New pipeline from text modal
 export const NewPipelineFromTextModal = '[data-testid="import-pipeline-modal"]';

From 3cdb6c7a5690d096c9b00b833adcbbea4c035838 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kr=C3=A6n=20Hansen?= <kraen.hansen@mongodb.com>
Date: Fri, 7 Nov 2025 11:14:32 +0100
Subject: [PATCH 21/42] Update e2e tests to wait for bulk delete modal to
 disappear

---
 .../compass-e2e-tests/tests/collection-bulk-delete.test.ts     | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/compass-e2e-tests/tests/collection-bulk-delete.test.ts b/packages/compass-e2e-tests/tests/collection-bulk-delete.test.ts
index 297b9dee1a2..a750d6d1539 100644
--- a/packages/compass-e2e-tests/tests/collection-bulk-delete.test.ts
+++ b/packages/compass-e2e-tests/tests/collection-bulk-delete.test.ts
@@ -90,6 +90,9 @@ describe('Bulk Delete', function () {
 
     // Press delete in the confirmation modal
     await browser.clickVisible(Selectors.confirmationModalConfirmButton());
+    await browser
+      .$(Selectors.BulkDeleteModal)
+      .waitForDisplayed({ reverse: true });
     await browser.runFindOperation('Documents', '{ i: 5 }');
 
     // Check the telemetry

From ad72a99a14d6c9f3ab459791ca6e9e152f00e993 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kr=C3=A6n=20Hansen?= <kraen.hansen@mongodb.com>
Date: Fri, 7 Nov 2025 15:02:25 +0100
Subject: [PATCH 22/42] Update e2e tests to wait for connection form to be
 non-clickable in any case

---
 packages/compass-e2e-tests/helpers/commands/connect-form.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/compass-e2e-tests/helpers/commands/connect-form.ts b/packages/compass-e2e-tests/helpers/commands/connect-form.ts
index 497e13623e8..a727fadaabf 100644
--- a/packages/compass-e2e-tests/helpers/commands/connect-form.ts
+++ b/packages/compass-e2e-tests/helpers/commands/connect-form.ts
@@ -15,10 +15,10 @@ const debug = Debug('compass-e2e-tests');
 export async function resetConnectForm(browser: CompassBrowser): Promise<void> {
   if (await browser.$(Selectors.ConnectionModal).isDisplayed()) {
     await browser.clickVisible(Selectors.ConnectionModalCloseButton);
-    await browser
-      .$(Selectors.ConnectionModal)
-      .waitForDisplayed({ reverse: true });
   }
+  await browser
+    .$(Selectors.ConnectionModal)
+    .waitForClickable({ reverse: true });
 
   await browser.clickVisible(Selectors.SidebarNewConnectionButton);
 

From 5e5ce3b05fc4a4d3a81a88b8fd08729f06178f74 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kr=C3=A6n=20Hansen?= <kraen.hansen@mongodb.com>
Date: Fri, 21 Nov 2025 10:35:01 +0100
Subject: [PATCH 23/42] Update e2e tests to fix modal regressions

---
 .../compass-e2e-tests/helpers/commands/open-settings-modal.ts | 2 +-
 packages/compass-e2e-tests/helpers/commands/save-favorite.ts  | 4 +++-
 packages/compass-e2e-tests/helpers/selectors.ts               | 4 ++--
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/compass-e2e-tests/helpers/commands/open-settings-modal.ts b/packages/compass-e2e-tests/helpers/commands/open-settings-modal.ts
index bee67004904..f33bc7dc4fb 100644
--- a/packages/compass-e2e-tests/helpers/commands/open-settings-modal.ts
+++ b/packages/compass-e2e-tests/helpers/commands/open-settings-modal.ts
@@ -11,7 +11,7 @@ export async function openSettingsModal(
   });
 
   const settingsModalElement = browser.$(Selectors.SettingsModal);
-  await settingsModalElement.waitForExist();
+  await settingsModalElement.waitForDisplayed();
   if (tab) {
     await browser.clickVisible(Selectors.SettingsModalTabSelector(tab));
   }
diff --git a/packages/compass-e2e-tests/helpers/commands/save-favorite.ts b/packages/compass-e2e-tests/helpers/commands/save-favorite.ts
index 4b53e0ba15c..10b81f48ff3 100644
--- a/packages/compass-e2e-tests/helpers/commands/save-favorite.ts
+++ b/packages/compass-e2e-tests/helpers/commands/save-favorite.ts
@@ -20,6 +20,8 @@ export async function saveFavorite(
   });
 
   await browser.clickVisible(Selectors.ConnectionModalSaveButton);
-  await browser.$(Selectors.ConnectionModal).waitForExist({ reverse: true });
+  await browser
+    .$(Selectors.ConnectionModal)
+    .waitForDisplayed({ reverse: true });
   return;
 }
diff --git a/packages/compass-e2e-tests/helpers/selectors.ts b/packages/compass-e2e-tests/helpers/selectors.ts
index a4ffb089b67..24f43ecaa60 100644
--- a/packages/compass-e2e-tests/helpers/selectors.ts
+++ b/packages/compass-e2e-tests/helpers/selectors.ts
@@ -25,8 +25,8 @@ export const SettingsInputElement = (settingName: string): string => {
 };
 
 // LG Modals
-export const LGModal = '[data-testid="lg-modal"]';
-export const LGModalClose = '[data-testid="lg-modal-close"]';
+export const LGModal = '[data-lgid="lg-modal"]';
+export const LGModalClose = '[data-lgid="lg-modal-close"]';
 
 // LG Toasts container (these test ids are used by LG in the toast and are not in the code anywhere).
 export const LGToastContainer = '[data-testid="lg-toast-scroll-container"]';

From 2778a71a94d2dfea2a293dac252e68c058d5207c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kr=C3=A6n=20Hansen?= <kraen.hansen@mongodb.com>
Date: Mon, 10 Nov 2025 12:01:53 +0100
Subject: [PATCH 24/42] Disable pointer events on a closed modal

---
 packages/compass-components/src/components/modals/modal.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/compass-components/src/components/modals/modal.tsx b/packages/compass-components/src/components/modals/modal.tsx
index d35cfe30439..d611203ea01 100644
--- a/packages/compass-components/src/components/modals/modal.tsx
+++ b/packages/compass-components/src/components/modals/modal.tsx
@@ -11,6 +11,9 @@ const styles = css({
   // content and this messes up the autocompleter within the modal. So we clear
   // the transform here.
   transform: 'none',
+  '&:not([open])': {
+    pointerEvents: 'none',
+  },
 });
 
 const fullScreenStyles = css({

From d1fe84b9236ae6877e66cf82cb9e7071c80ab167 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kr=C3=A6n=20Hansen?= <kraen.hansen@mongodb.com>
Date: Mon, 10 Nov 2025 12:59:47 +0100
Subject: [PATCH 25/42] Disable auto-focus on confirmation modal children by
 default

---
 .../src/hooks/use-confirmation.spec.tsx       | 15 ++++--
 .../src/hooks/use-confirmation.tsx            | 12 ++++-
 .../src/hooks/use-error-details.spec.tsx      | 46 +++++++++++++++++++
 .../src/hooks/use-error-details.tsx           |  2 +-
 .../tests/collection-aggregations-tab.test.ts |  4 --
 .../tests/collection-documents-tab.test.ts    |  4 --
 .../tests/collection-import.test.ts           |  3 --
 7 files changed, 68 insertions(+), 18 deletions(-)
 create mode 100644 packages/compass-components/src/hooks/use-error-details.spec.tsx

diff --git a/packages/compass-components/src/hooks/use-confirmation.spec.tsx b/packages/compass-components/src/hooks/use-confirmation.spec.tsx
index 962d9ee1499..86e7a0bd5e8 100644
--- a/packages/compass-components/src/hooks/use-confirmation.spec.tsx
+++ b/packages/compass-components/src/hooks/use-confirmation.spec.tsx
@@ -43,7 +43,9 @@ describe('use-confirmation', function () {
         within(modal).getByText('This action can not be undone.')
       ).to.exist;
       expect(within(modal).getByText('Yes')).to.exist;
-      expect(within(modal).getByText('Cancel')).to.exist;
+      const cancelElement = within(modal).getByText('Cancel');
+      expect(cancelElement).to.exist;
+      expect(cancelElement.parentElement).to.equal(document.activeElement);
     });
 
     it('handles cancel action', async function () {
@@ -78,10 +80,13 @@ describe('use-confirmation', function () {
             screen.getByRole('button', { name: 'Confirm' })
           ).to.have.attribute('aria-disabled', 'true');
 
-          userEvent.type(
-            screen.getByRole('textbox', { name: /Type "Yes"/ }),
-            'Yes'
-          );
+          const textInputElement = screen.getByRole('textbox', {
+            name: /Type "Yes"/,
+          });
+
+          // The input should have focus
+          expect(textInputElement).to.equal(document.activeElement);
+          userEvent.type(textInputElement, 'Yes');
 
           expect(
             screen.getByRole('button', { name: 'Confirm' })
diff --git a/packages/compass-components/src/hooks/use-confirmation.tsx b/packages/compass-components/src/hooks/use-confirmation.tsx
index 100e4153ec3..188d3c42788 100644
--- a/packages/compass-components/src/hooks/use-confirmation.tsx
+++ b/packages/compass-components/src/hooks/use-confirmation.tsx
@@ -19,7 +19,10 @@ export { ConfirmationModalVariant };
 type ConfirmationModalProps = React.ComponentProps<typeof ConfirmationModal>;
 
 type ConfirmationProperties = Partial<
-  Pick<ConfirmationModalProps, 'title' | 'variant' | 'requiredInputText'>
+  Pick<
+    ConfirmationModalProps,
+    'title' | 'variant' | 'requiredInputText' | 'initialFocus'
+  >
 > & {
   buttonText?: React.ReactNode;
   confirmButtonProps?: Omit<ButtonProps, 'onClick'>;
@@ -197,6 +200,13 @@ const ConfirmationModalStateHandler: React.FunctionComponent = ({
           onClick: handleCancel,
         }}
         requiredInputText={confirmationProps.requiredInputText ?? undefined}
+        initialFocus={
+          confirmationProps.initialFocus ??
+          (confirmationProps.requiredInputText
+            ? 'auto'
+            : // TODO: Update this once https://jira.mongodb.org/browse/LG-5735 gets resolved
+              '[data-testid=lg-confirmation_modal-footer-cancel_button]')
+        }
       >
         {confirmationProps.description}
         {confirmationProps.warning && (
diff --git a/packages/compass-components/src/hooks/use-error-details.spec.tsx b/packages/compass-components/src/hooks/use-error-details.spec.tsx
new file mode 100644
index 00000000000..3cc23040ad4
--- /dev/null
+++ b/packages/compass-components/src/hooks/use-error-details.spec.tsx
@@ -0,0 +1,46 @@
+import {
+  render,
+  screen,
+  waitFor,
+  within,
+  userEvent,
+} from '@mongodb-js/testing-library-compass';
+import { expect } from 'chai';
+import React from 'react';
+
+import { ConfirmationModalArea } from './use-confirmation';
+import { showErrorDetails } from './use-error-details';
+
+describe('use-error-details', function () {
+  context('showErrorDetails global function', function () {
+    let modal: HTMLElement;
+    beforeEach(async function () {
+      render(
+        <ConfirmationModalArea>
+          <button
+            type="button"
+            onClick={() => {
+              showErrorDetails({
+                details: { oh: 'noes' },
+                closeAction: 'back',
+              });
+            }}
+          >
+            Open Modal
+          </button>
+        </ConfirmationModalArea>
+      );
+      userEvent.click(screen.getByText('Open Modal'));
+      await waitFor(() => {
+        modal = screen.getByTestId('confirmation-modal');
+      });
+    });
+
+    it('renders modal with cancel button focused', function () {
+      expect(within(modal).getByText('Error details')).to.exist;
+      const confirmElement = within(modal).getByText('Back');
+      expect(confirmElement).to.exist;
+      expect(confirmElement.parentElement).to.equal(document.activeElement);
+    });
+  });
+});
diff --git a/packages/compass-components/src/hooks/use-error-details.tsx b/packages/compass-components/src/hooks/use-error-details.tsx
index c9491389949..a44d590a910 100644
--- a/packages/compass-components/src/hooks/use-error-details.tsx
+++ b/packages/compass-components/src/hooks/use-error-details.tsx
@@ -25,7 +25,7 @@ export const showErrorDetails = function showErrorDetails({
     buttonText: closeAction.replace(/\b\w/g, (c) => c.toUpperCase()),
     confirmButtonProps: {
       variant: ButtonVariant.Default,
-      autoFocus: true,
     },
+    initialFocus: '[data-testid=lg-confirmation_modal-footer-confirm_button]',
   });
 };
diff --git a/packages/compass-e2e-tests/tests/collection-aggregations-tab.test.ts b/packages/compass-e2e-tests/tests/collection-aggregations-tab.test.ts
index 75875058e36..9278db4751e 100644
--- a/packages/compass-e2e-tests/tests/collection-aggregations-tab.test.ts
+++ b/packages/compass-e2e-tests/tests/collection-aggregations-tab.test.ts
@@ -676,10 +676,6 @@ describe('Collection aggregations tab', function () {
       const errorDetailsJson = browser.$(Selectors.ErrorDetailsJson);
       await errorDetailsJson.waitForDisplayed();
 
-      // exit details
-      // leafygreen autofocus triggers a tooltip on the error code element,
-      // "Tab" to remove the focus
-      await browser.keys('Tab');
       // now click the close button
       await browser.clickVisible(Selectors.confirmationModalConfirmButton());
       // wait for the modal to go away
diff --git a/packages/compass-e2e-tests/tests/collection-documents-tab.test.ts b/packages/compass-e2e-tests/tests/collection-documents-tab.test.ts
index c489500d18e..19ea7f1623c 100644
--- a/packages/compass-e2e-tests/tests/collection-documents-tab.test.ts
+++ b/packages/compass-e2e-tests/tests/collection-documents-tab.test.ts
@@ -727,10 +727,6 @@ FindIterable<Document> result = collection.find(filter);`);
       const errorDetailsJson = browser.$(Selectors.ErrorDetailsJson);
       await errorDetailsJson.waitForDisplayed();
 
-      // exit details
-      // leafygreen autofocus triggers a tooltip on the error code element,
-      // "Tab" to remove the focus
-      await browser.keys('Tab');
       // now click the close button
       await browser.clickVisible(Selectors.confirmationModalConfirmButton());
       // wait for the modal to go away
diff --git a/packages/compass-e2e-tests/tests/collection-import.test.ts b/packages/compass-e2e-tests/tests/collection-import.test.ts
index 9c7e913b23e..d24e5341e1e 100644
--- a/packages/compass-e2e-tests/tests/collection-import.test.ts
+++ b/packages/compass-e2e-tests/tests/collection-import.test.ts
@@ -596,9 +596,6 @@ describe('Collection import', function () {
       expect(await errorDetailsJson.getText()).to.include(
         'schemaRulesNotSatisfied'
       );
-      // leafygreen autofocus triggers a tooltip on the error code element,
-      // "Tab" to remove the focus
-      await browser.keys('Tab');
       // now click the close button
       await browser.clickVisible(Selectors.confirmationModalConfirmButton());
       // wait for the modal to go away

From 6ab317e18c2a4cae3f92bc405ea0d70a470d9998 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kr=C3=A6n=20Hansen?= <kraen.hansen@mongodb.com>
Date: Tue, 11 Nov 2025 15:34:40 +0100
Subject: [PATCH 26/42] Add new modal specific commands

---
 .../helpers/commands/get-open-modals.ts       | 11 ++++++
 .../helpers/commands/hide-visible-modal.ts    |  4 ++-
 .../helpers/commands/index.ts                 |  4 +++
 .../commands/is-modal-eventually-open.ts      | 16 +++++++++
 .../helpers/commands/is-modal-open.ts         | 11 ++++++
 .../helpers/commands/wait-for-open-modal.ts   | 36 +++++++++++++++++++
 packages/compass-e2e-tests/helpers/compass.ts |  4 +++
 .../helpers/dialog-open-locator-strategy.ts   | 17 +++++++++
 8 files changed, 102 insertions(+), 1 deletion(-)
 create mode 100644 packages/compass-e2e-tests/helpers/commands/get-open-modals.ts
 create mode 100644 packages/compass-e2e-tests/helpers/commands/is-modal-eventually-open.ts
 create mode 100644 packages/compass-e2e-tests/helpers/commands/is-modal-open.ts
 create mode 100644 packages/compass-e2e-tests/helpers/commands/wait-for-open-modal.ts
 create mode 100644 packages/compass-e2e-tests/helpers/dialog-open-locator-strategy.ts

diff --git a/packages/compass-e2e-tests/helpers/commands/get-open-modals.ts b/packages/compass-e2e-tests/helpers/commands/get-open-modals.ts
new file mode 100644
index 00000000000..aa809c09025
--- /dev/null
+++ b/packages/compass-e2e-tests/helpers/commands/get-open-modals.ts
@@ -0,0 +1,11 @@
+import type { ChainablePromiseArray } from 'webdriverio';
+
+import { Selectors } from '../compass';
+import type { CompassBrowser } from '../compass-browser';
+
+export function getOpenModals(
+  browser: CompassBrowser,
+  selector: string = Selectors.LGModal
+): ChainablePromiseArray {
+  return browser.custom$$('dialogOpen', selector);
+}
diff --git a/packages/compass-e2e-tests/helpers/commands/hide-visible-modal.ts b/packages/compass-e2e-tests/helpers/commands/hide-visible-modal.ts
index 11125cc4e83..eb71a08a356 100644
--- a/packages/compass-e2e-tests/helpers/commands/hide-visible-modal.ts
+++ b/packages/compass-e2e-tests/helpers/commands/hide-visible-modal.ts
@@ -15,7 +15,9 @@ export async function hideVisibleModal(browser: CompassBrowser): Promise<void> {
     const waitOptions = { timeout: 2_000 };
     try {
       await browser.clickVisible(Selectors.LGModalClose, waitOptions);
-      await browser.$(Selectors.LGModal).waitForDisplayed({ reverse: true });
+      await browser
+        .$(Selectors.LGModal)
+        .waitForDisplayed({ reverse: true, ...waitOptions });
     } catch (err) {
       // if the modal disappears by itself in the meantime, that's fine
       debug('ignoring', err);
diff --git a/packages/compass-e2e-tests/helpers/commands/index.ts b/packages/compass-e2e-tests/helpers/commands/index.ts
index 3b56971674b..f5a6da81efb 100644
--- a/packages/compass-e2e-tests/helpers/commands/index.ts
+++ b/packages/compass-e2e-tests/helpers/commands/index.ts
@@ -67,3 +67,7 @@ export * from './read-stage-operators';
 export * from './click-confirmation-action';
 export * from './get-input-by-label';
 export * from './resize-window';
+export * from './get-open-modals';
+export * from './is-modal-open';
+export * from './is-modal-eventually-open';
+export * from './wait-for-open-modal';
diff --git a/packages/compass-e2e-tests/helpers/commands/is-modal-eventually-open.ts b/packages/compass-e2e-tests/helpers/commands/is-modal-eventually-open.ts
new file mode 100644
index 00000000000..23a963afcb6
--- /dev/null
+++ b/packages/compass-e2e-tests/helpers/commands/is-modal-eventually-open.ts
@@ -0,0 +1,16 @@
+import { Selectors } from '../compass';
+import type { CompassBrowser } from '../compass-browser';
+
+export async function isModalEventuallyOpen(
+  browser: CompassBrowser,
+  selector: string = Selectors.LGModal,
+  timeout?: number
+): Promise<boolean> {
+  try {
+    await browser.waitForOpenModal(selector, { timeout });
+    // return true if it opens before the timeout expires
+    return true;
+  } catch {
+    return false;
+  }
+}
diff --git a/packages/compass-e2e-tests/helpers/commands/is-modal-open.ts b/packages/compass-e2e-tests/helpers/commands/is-modal-open.ts
new file mode 100644
index 00000000000..6d16dc2b981
--- /dev/null
+++ b/packages/compass-e2e-tests/helpers/commands/is-modal-open.ts
@@ -0,0 +1,11 @@
+import { Selectors } from '../compass';
+import type { CompassBrowser } from '../compass-browser';
+
+export async function isModalOpen(
+  browser: CompassBrowser,
+  selector: string = Selectors.LGModal
+): Promise<boolean> {
+  const modals = await browser.getOpenModals(selector);
+  const count = await modals.length;
+  return count > 0;
+}
diff --git a/packages/compass-e2e-tests/helpers/commands/wait-for-open-modal.ts b/packages/compass-e2e-tests/helpers/commands/wait-for-open-modal.ts
new file mode 100644
index 00000000000..10a157c5bfd
--- /dev/null
+++ b/packages/compass-e2e-tests/helpers/commands/wait-for-open-modal.ts
@@ -0,0 +1,36 @@
+import { inspect } from 'node:util';
+import type { WaitForOptions } from 'webdriverio';
+import type { CompassBrowser } from '../compass-browser';
+
+export async function waitForOpenModal(
+  browser: CompassBrowser,
+  selector: string,
+  { reverse = false, ...options }: WaitForOptions = {}
+): Promise<void> {
+  await browser.waitUntil(
+    async () => {
+      const modals = await browser.getOpenModals(selector);
+      const count = await modals.length;
+      if (reverse) {
+        return count === 0;
+      } else if (count === 0) {
+        return false;
+      } else {
+        for (const modal of modals) {
+          // Ensure any modals are interactable if open
+          await modal.waitForClickable({
+            timeoutMsg: 'Timeout waiting for open modal to become clickable',
+            ...options,
+          });
+        }
+        return true;
+      }
+    },
+    {
+      timeoutMsg: `Timeout waiting for modal '${inspect(selector)}' to ${
+        reverse ? 'close' : 'open'
+      }`,
+      ...options,
+    }
+  );
+}
diff --git a/packages/compass-e2e-tests/helpers/compass.ts b/packages/compass-e2e-tests/helpers/compass.ts
index a614354389a..6efe106e2ca 100644
--- a/packages/compass-e2e-tests/helpers/compass.ts
+++ b/packages/compass-e2e-tests/helpers/compass.ts
@@ -44,6 +44,7 @@ import treeKill from 'tree-kill';
 import { downloadPath } from './downloads';
 import path from 'path';
 import { globalFixturesAbortController } from './test-runner-global-fixtures';
+import { dialogOpenLocator } from './dialog-open-locator-strategy';
 
 const killAsync = async (pid: number, signal?: string) => {
   return new Promise<void>((resolve, reject) => {
@@ -200,6 +201,9 @@ export class Compass {
       }
     );
 
+    // Adding a custom locator strategy to help locate open dialogs from a selector synchronously
+    browser.addLocatorStrategy('dialogOpen', dialogOpenLocator);
+
     this.addDebugger();
   }
 
diff --git a/packages/compass-e2e-tests/helpers/dialog-open-locator-strategy.ts b/packages/compass-e2e-tests/helpers/dialog-open-locator-strategy.ts
new file mode 100644
index 00000000000..f12e64b7324
--- /dev/null
+++ b/packages/compass-e2e-tests/helpers/dialog-open-locator-strategy.ts
@@ -0,0 +1,17 @@
+export function dialogOpenLocator(selector: string) {
+  // eslint-disable-next-line no-restricted-globals -- This runs in the browser
+  const result: HTMLDialogElement[] = [];
+  // eslint-disable-next-line no-restricted-globals -- This runs in the browser
+  const elements = document.querySelectorAll(selector);
+  for (let i = 0; i < elements.length; i++) {
+    const element = elements[i];
+    if (
+      // eslint-disable-next-line no-restricted-globals -- This runs in the browser
+      element instanceof HTMLDialogElement &&
+      element.open
+    ) {
+      result.push(element);
+    }
+  }
+  return result;
+}

From 70e70152bf66e0223f7cd568a02fa8d8e4b7da3e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kr=C3=A6n=20Hansen?= <kraen.hansen@mongodb.com>
Date: Tue, 11 Nov 2025 16:04:41 +0100
Subject: [PATCH 27/42] Update E2E tests to use new modal commands instead of
 waitForDisplayed

---
 .../helpers/commands/add-collection.ts        |   7 +-
 .../helpers/commands/add-database.ts          |   7 +-
 .../commands/click-confirmation-action.ts     |   7 +-
 .../helpers/commands/close-settings-modal.ts  |  11 +-
 .../helpers/commands/close-welcome-modal.ts   |  10 +-
 .../helpers/commands/connect-form.ts          |  10 +-
 .../helpers/commands/connect.ts               |   6 +-
 .../helpers/commands/create-index.ts          |   6 +-
 .../helpers/commands/drop-index.ts            |   5 +-
 .../helpers/commands/drop-namespace.ts        |   6 +-
 .../helpers/commands/export-to-language.ts    |   7 +-
 .../helpers/commands/hide-visible-modal.ts    |  18 +--
 .../helpers/commands/is-modal-open.ts         |   1 +
 .../helpers/commands/open-settings-modal.ts   |   3 +-
 .../commands/save-aggregation-pipeline.ts     |   7 +-
 .../helpers/commands/save-favorite.ts         |   5 +-
 .../commands/try-to-insert-document.ts        |   3 +-
 .../helpers/commands/wait-for-open-modal.ts   |   1 +
 .../helpers/commands/workspace-tabs.ts        |   8 +-
 .../compass-e2e-tests/tests/assistant.test.ts |  29 ++---
 .../tests/auto-connect.test.ts                |   2 +-
 .../tests/collection-aggregations-tab.test.ts | 119 +++++++++---------
 .../tests/collection-bulk-delete.test.ts      |  24 ++--
 .../tests/collection-bulk-update.test.ts      |  18 +--
 .../tests/collection-documents-tab.test.ts    |  40 +++---
 .../tests/collection-export.test.ts           |  78 ++++--------
 .../tests/collection-import.test.ts           | 111 ++++++++--------
 .../tests/collection-indexes-tab.test.ts      |  14 ++-
 .../tests/collection-rename.test.ts           |   6 +-
 .../tests/connection.test.ts                  |  33 ++---
 .../tests/data-modeling-tab.test.ts           |   9 +-
 .../tests/import-export-connections.test.ts   |   4 +-
 .../tests/in-use-encryption.test.ts           |  30 ++---
 .../tests/instance-sidebar.test.ts            |   8 +-
 .../tests/my-queries-tab.test.ts              |  43 ++++---
 packages/compass-e2e-tests/tests/oidc.test.ts |  11 +-
 .../compass-e2e-tests/tests/read-only.test.ts |   5 +-
 .../tests/search-indexes.test.ts              |  10 +-
 .../compass-e2e-tests/tests/shell.test.ts     |   9 +-
 packages/compass-e2e-tests/tests/tabs.test.ts |  16 +--
 40 files changed, 366 insertions(+), 381 deletions(-)

diff --git a/packages/compass-e2e-tests/helpers/commands/add-collection.ts b/packages/compass-e2e-tests/helpers/commands/add-collection.ts
index 373ba061d35..824b51623df 100644
--- a/packages/compass-e2e-tests/helpers/commands/add-collection.ts
+++ b/packages/compass-e2e-tests/helpers/commands/add-collection.ts
@@ -34,8 +34,7 @@ export async function addCollection(
   collectionOptions?: AddCollectionOptions,
   screenshotPath?: string
 ): Promise<void> {
-  const createModalElement = browser.$(Selectors.CreateCollectionModal);
-  await createModalElement.waitForDisplayed();
+  await browser.waitForOpenModal(Selectors.CreateCollectionModal);
 
   await browser.setValueVisible(
     Selectors.CreateDatabaseCollectionName,
@@ -216,5 +215,7 @@ export async function addCollection(
   }
 
   await browser.clickVisible(Selectors.CreateCollectionCreateButton);
-  await createModalElement.waitForDisplayed({ reverse: true });
+  await browser.waitForOpenModal(Selectors.CreateCollectionModal, {
+    reverse: true,
+  });
 }
diff --git a/packages/compass-e2e-tests/helpers/commands/add-database.ts b/packages/compass-e2e-tests/helpers/commands/add-database.ts
index 2e235fda161..13603ee4c62 100644
--- a/packages/compass-e2e-tests/helpers/commands/add-database.ts
+++ b/packages/compass-e2e-tests/helpers/commands/add-database.ts
@@ -10,8 +10,7 @@ export async function addDatabase(
   collectionOptions?: AddCollectionOptions,
   screenshotPath?: string
 ): Promise<void> {
-  const createModalElement = browser.$(Selectors.CreateDatabaseModal);
-  await createModalElement.waitForDisplayed();
+  await browser.waitForOpenModal(Selectors.CreateDatabaseModal);
   await browser.setValueVisible(Selectors.CreateDatabaseDatabaseName, dbName);
   await browser.setValueVisible(
     Selectors.CreateDatabaseCollectionName,
@@ -25,5 +24,7 @@ export async function addDatabase(
   }
 
   await createButton.click();
-  await createModalElement.waitForDisplayed({ reverse: true });
+  await browser.waitForOpenModal(Selectors.CreateDatabaseModal, {
+    reverse: true,
+  });
 }
diff --git a/packages/compass-e2e-tests/helpers/commands/click-confirmation-action.ts b/packages/compass-e2e-tests/helpers/commands/click-confirmation-action.ts
index 85e3d0706bc..a87de56ac71 100644
--- a/packages/compass-e2e-tests/helpers/commands/click-confirmation-action.ts
+++ b/packages/compass-e2e-tests/helpers/commands/click-confirmation-action.ts
@@ -9,8 +9,7 @@ export async function clickConfirmationAction(
 ) {
   await browser.clickVisible(actionButtonSelector);
 
-  const confirmationModal = browser.$(Selectors.ConfirmationModal);
-  await confirmationModal.waitForDisplayed();
+  await browser.waitForOpenModal(Selectors.ConfirmationModal);
 
   if (confirmationText) {
     await browser.setValueVisible(
@@ -24,5 +23,7 @@ export async function clickConfirmationAction(
   }
 
   await browser.clickVisible(Selectors.confirmationModalConfirmButton());
-  await confirmationModal.waitForDisplayed({ reverse: true });
+  await browser.waitForOpenModal(Selectors.ConfirmationModal, {
+    reverse: true,
+  });
 }
diff --git a/packages/compass-e2e-tests/helpers/commands/close-settings-modal.ts b/packages/compass-e2e-tests/helpers/commands/close-settings-modal.ts
index e397e8a2eef..05376d44c01 100644
--- a/packages/compass-e2e-tests/helpers/commands/close-settings-modal.ts
+++ b/packages/compass-e2e-tests/helpers/commands/close-settings-modal.ts
@@ -4,16 +4,11 @@ import * as Selectors from '../selectors';
 export async function closeSettingsModal(
   browser: CompassBrowser
 ): Promise<void> {
-  if (!(await browser.existsEventually(Selectors.SettingsModal))) {
+  if (!(await browser.isModalEventuallyOpen(Selectors.SettingsModal))) {
     return;
   }
 
-  const settingsModalElement = browser.$(Selectors.SettingsModal);
-
-  await settingsModalElement.waitForDisplayed();
-
+  await browser.waitForOpenModal(Selectors.SettingsModal);
   await browser.clickVisible(Selectors.CloseSettingsModalButton);
-  await settingsModalElement.waitForDisplayed({
-    reverse: true,
-  });
+  await browser.waitForOpenModal(Selectors.SettingsModal, { reverse: true });
 }
diff --git a/packages/compass-e2e-tests/helpers/commands/close-welcome-modal.ts b/packages/compass-e2e-tests/helpers/commands/close-welcome-modal.ts
index 2a71aa79ff1..16d418f3616 100644
--- a/packages/compass-e2e-tests/helpers/commands/close-welcome-modal.ts
+++ b/packages/compass-e2e-tests/helpers/commands/close-welcome-modal.ts
@@ -4,17 +4,13 @@ import * as Selectors from '../selectors';
 export async function closeWelcomeModal(
   browser: CompassBrowser
 ): Promise<void> {
-  if (!(await browser.existsEventually(Selectors.WelcomeModal))) {
+  if (!(await browser.isModalEventuallyOpen(Selectors.WelcomeModal))) {
     return;
   }
 
-  const welcomeModalElement = browser.$(Selectors.WelcomeModal);
-  await welcomeModalElement.waitForDisplayed();
-
+  await browser.waitForOpenModal(Selectors.WelcomeModal);
   await browser.clickVisible(Selectors.CloseWelcomeModalButton);
-  await welcomeModalElement.waitForDisplayed({
-    reverse: true,
-  });
+  await browser.waitForOpenModal(Selectors.WelcomeModal, { reverse: true });
 
   // By setting a feature after closing the welcome modal we know that
   // preferences will have been saved to disk and therefore showedNetworkOptIn
diff --git a/packages/compass-e2e-tests/helpers/commands/connect-form.ts b/packages/compass-e2e-tests/helpers/commands/connect-form.ts
index a727fadaabf..326df829b6f 100644
--- a/packages/compass-e2e-tests/helpers/commands/connect-form.ts
+++ b/packages/compass-e2e-tests/helpers/commands/connect-form.ts
@@ -13,13 +13,11 @@ import { getConnectionTitle } from '@mongodb-js/connection-info';
 const debug = Debug('compass-e2e-tests');
 
 export async function resetConnectForm(browser: CompassBrowser): Promise<void> {
-  if (await browser.$(Selectors.ConnectionModal).isDisplayed()) {
+  if (await browser.isModalOpen(Selectors.ConnectionModal)) {
     await browser.clickVisible(Selectors.ConnectionModalCloseButton);
   }
-  await browser
-    .$(Selectors.ConnectionModal)
-    .waitForClickable({ reverse: true });
 
+  await browser.waitForOpenModal(Selectors.ConnectionModal, { reverse: true });
   await browser.clickVisible(Selectors.SidebarNewConnectionButton);
 
   const connectionTitleSelector = Selectors.ConnectionModalTitle;
@@ -919,9 +917,7 @@ export async function saveConnection(
 ): Promise<void> {
   await browser.setConnectFormState(state);
   await browser.clickVisible(Selectors.ConnectionModalSaveButton);
-  await browser
-    .$(Selectors.ConnectionModal)
-    .waitForDisplayed({ reverse: true });
+  await browser.waitForOpenModal(Selectors.ConnectionModal, { reverse: true });
 }
 
 let screenshotCounter = 0;
diff --git a/packages/compass-e2e-tests/helpers/commands/connect.ts b/packages/compass-e2e-tests/helpers/commands/connect.ts
index 60fbc9d6d2d..13e37896057 100644
--- a/packages/compass-e2e-tests/helpers/commands/connect.ts
+++ b/packages/compass-e2e-tests/helpers/commands/connect.ts
@@ -63,9 +63,7 @@ export async function connectWithConnectionString(
 
   // if the modal is still animating away when we're connecting again, things
   // are going to get confused
-  await browser
-    .$(Selectors.ConnectionModal)
-    .waitForDisplayed({ reverse: true });
+  await browser.waitForOpenModal(Selectors.ConnectionModal, { reverse: true });
 
   // if a connection with this name already exists, remove it otherwise we'll
   // add a duplicate and things will get complicated fast
@@ -77,7 +75,7 @@ export async function connectWithConnectionString(
   }
 
   await browser.clickVisible(Selectors.SidebarNewConnectionButton);
-  await browser.$(Selectors.ConnectionModal).waitForDisplayed();
+  await browser.waitForOpenModal(Selectors.ConnectionModal);
 
   await browser.setValueVisible(
     Selectors.ConnectionFormStringInput,
diff --git a/packages/compass-e2e-tests/helpers/commands/create-index.ts b/packages/compass-e2e-tests/helpers/commands/create-index.ts
index 847f674ddd4..76326f23517 100644
--- a/packages/compass-e2e-tests/helpers/commands/create-index.ts
+++ b/packages/compass-e2e-tests/helpers/commands/create-index.ts
@@ -51,8 +51,8 @@ export async function createIndex(
   } else {
     await browser.clickVisible(Selectors.CreateIndexButton);
   }
-  const createModal = browser.$(Selectors.CreateIndexModal);
-  await createModal.waitForDisplayed();
+
+  await browser.waitForOpenModal(Selectors.CreateIndexModal);
 
   // Select / type field name
   await browser.setComboBoxValue(
@@ -114,7 +114,7 @@ export async function createIndex(
   await browser.clickVisible(Selectors.CreateIndexConfirmButton);
 
   // Assert that modal goes away
-  await createModal.waitForDisplayed({ reverse: true });
+  await browser.waitForOpenModal(Selectors.CreateIndexModal, { reverse: true });
 
   // Assert that index does come in table
   const indexComponentSelector = Selectors.indexComponent(indexName);
diff --git a/packages/compass-e2e-tests/helpers/commands/drop-index.ts b/packages/compass-e2e-tests/helpers/commands/drop-index.ts
index 263c202599e..cc8c6517e2d 100644
--- a/packages/compass-e2e-tests/helpers/commands/drop-index.ts
+++ b/packages/compass-e2e-tests/helpers/commands/drop-index.ts
@@ -15,8 +15,7 @@ export async function dropIndex(
     `${indexComponentSelector} ${Selectors.IndexesTableDropIndexButton}`
   );
 
-  const dropModal = browser.$(Selectors.DropIndexModal);
-  await dropModal.waitForDisplayed();
+  await browser.waitForOpenModal(Selectors.DropIndexModal);
 
   await browser.setValueVisible(
     Selectors.DropIndexModalConfirmNameInput,
@@ -29,7 +28,7 @@ export async function dropIndex(
 
   await browser.clickVisible(Selectors.DropIndexModalConfirmButton);
 
-  await dropModal.waitForDisplayed({ reverse: true });
+  await browser.waitForOpenModal(Selectors.DropIndexModal, { reverse: true });
 
   await indexComponent.waitForDisplayed({ reverse: true });
 }
diff --git a/packages/compass-e2e-tests/helpers/commands/drop-namespace.ts b/packages/compass-e2e-tests/helpers/commands/drop-namespace.ts
index e3c55b5899b..3d5a6c1207b 100644
--- a/packages/compass-e2e-tests/helpers/commands/drop-namespace.ts
+++ b/packages/compass-e2e-tests/helpers/commands/drop-namespace.ts
@@ -5,8 +5,7 @@ export async function dropNamespace(
   browser: CompassBrowser,
   collectionName: string
 ): Promise<void> {
-  const dropModalElement = browser.$(Selectors.DropNamespaceModal);
-  await dropModalElement.waitForDisplayed();
+  await browser.waitForOpenModal(Selectors.DropNamespaceModal);
   await browser.setValueVisible(
     Selectors.DropNamespaceConfirmNameInput,
     collectionName
@@ -15,6 +14,9 @@ export async function dropNamespace(
   await confirmButton.waitForEnabled();
 
   await confirmButton.click();
+  await browser.waitForOpenModal(Selectors.DropNamespaceModal, {
+    reverse: true,
+  });
 
   const successToast = browser.$(Selectors.DropNamespaceSuccessToast);
   await successToast.waitForDisplayed();
diff --git a/packages/compass-e2e-tests/helpers/commands/export-to-language.ts b/packages/compass-e2e-tests/helpers/commands/export-to-language.ts
index a0cd3a19f2b..452e89e4735 100644
--- a/packages/compass-e2e-tests/helpers/commands/export-to-language.ts
+++ b/packages/compass-e2e-tests/helpers/commands/export-to-language.ts
@@ -12,8 +12,7 @@ export async function exportToLanguage(
   language: string,
   options?: ExportToLanguageOptions
 ): Promise<string> {
-  const exportModal = browser.$(Selectors.ExportToLanguageModal);
-  await exportModal.waitForDisplayed();
+  await browser.waitForOpenModal(Selectors.ExportToLanguageModal);
 
   // pick the language
   await browser.waitUntil(async () => {
@@ -65,7 +64,9 @@ export async function exportToLanguage(
 
   // close the modal again
   await browser.clickVisible(Selectors.ExportToLanguageCloseButton);
-  await exportModal.waitForDisplayed({ reverse: true });
+  await browser.waitForOpenModal(Selectors.ExportToLanguageModal, {
+    reverse: true,
+  });
 
   // normalize copied text so that it's the same for all platforms
   return text.replace(/\r\n/g, '\n').replace(/\n+/g, '\n');
diff --git a/packages/compass-e2e-tests/helpers/commands/hide-visible-modal.ts b/packages/compass-e2e-tests/helpers/commands/hide-visible-modal.ts
index eb71a08a356..b90ce98d299 100644
--- a/packages/compass-e2e-tests/helpers/commands/hide-visible-modal.ts
+++ b/packages/compass-e2e-tests/helpers/commands/hide-visible-modal.ts
@@ -10,17 +10,19 @@ export async function hideVisibleModal(browser: CompassBrowser): Promise<void> {
   // the same time we're trying to close the modal, then make it error out
   // quickly so it can be ignored and we move on.
 
-  if (await browser.$(Selectors.LGModal).isDisplayed()) {
-    // close any modals that might be in the way
-    const waitOptions = { timeout: 2_000 };
+  /* eslint-disable-next-line @typescript-eslint/await-thenable -- WebdriverIO chainable promise array should be awaited */
+  const openModals = await browser.getOpenModals(Selectors.LGModal);
+  for (const modal of openModals) {
     try {
-      await browser.clickVisible(Selectors.LGModalClose, waitOptions);
-      await browser
-        .$(Selectors.LGModal)
-        .waitForDisplayed({ reverse: true, ...waitOptions });
+      await browser.clickVisible(browser.$(modal).$(Selectors.LGModalClose), {
+        timeout: 2_000,
+      });
     } catch (err) {
       // if the modal disappears by itself in the meantime, that's fine
-      debug('ignoring', err);
+      debug('ignoring', err instanceof Error ? err.stack : err);
     }
   }
+  await browser.waitForOpenModal(Selectors.LGModal, {
+    reverse: true,
+  });
 }
diff --git a/packages/compass-e2e-tests/helpers/commands/is-modal-open.ts b/packages/compass-e2e-tests/helpers/commands/is-modal-open.ts
index 6d16dc2b981..ce9546b5f62 100644
--- a/packages/compass-e2e-tests/helpers/commands/is-modal-open.ts
+++ b/packages/compass-e2e-tests/helpers/commands/is-modal-open.ts
@@ -5,6 +5,7 @@ export async function isModalOpen(
   browser: CompassBrowser,
   selector: string = Selectors.LGModal
 ): Promise<boolean> {
+  /* eslint-disable-next-line @typescript-eslint/await-thenable -- WebdriverIO chainable promise array should be awaited */
   const modals = await browser.getOpenModals(selector);
   const count = await modals.length;
   return count > 0;
diff --git a/packages/compass-e2e-tests/helpers/commands/open-settings-modal.ts b/packages/compass-e2e-tests/helpers/commands/open-settings-modal.ts
index f33bc7dc4fb..934690a46a5 100644
--- a/packages/compass-e2e-tests/helpers/commands/open-settings-modal.ts
+++ b/packages/compass-e2e-tests/helpers/commands/open-settings-modal.ts
@@ -10,8 +10,7 @@ export async function openSettingsModal(
     require('electron').ipcRenderer.emit('window:show-settings');
   });
 
-  const settingsModalElement = browser.$(Selectors.SettingsModal);
-  await settingsModalElement.waitForDisplayed();
+  await browser.waitForOpenModal(Selectors.SettingsModal);
   if (tab) {
     await browser.clickVisible(Selectors.SettingsModalTabSelector(tab));
   }
diff --git a/packages/compass-e2e-tests/helpers/commands/save-aggregation-pipeline.ts b/packages/compass-e2e-tests/helpers/commands/save-aggregation-pipeline.ts
index f0f9c580be7..01878d67c35 100644
--- a/packages/compass-e2e-tests/helpers/commands/save-aggregation-pipeline.ts
+++ b/packages/compass-e2e-tests/helpers/commands/save-aggregation-pipeline.ts
@@ -34,8 +34,7 @@ export async function saveAggregationPipeline(
   await browser.clickVisible(Selectors.SavePipelineSaveAsAction);
 
   // wait for the modal to appear
-  const savePipelineModal = browser.$(Selectors.SavePipelineModal);
-  await savePipelineModal.waitForDisplayed();
+  await browser.waitForOpenModal(Selectors.SavePipelineModal);
 
   // set aggregation name
   await browser.waitForAnimations(Selectors.SavePipelineNameInput);
@@ -49,7 +48,9 @@ export async function saveAggregationPipeline(
   await createButton.click();
 
   // wait for the modal to disappear
-  await savePipelineModal.waitForDisplayed({ reverse: true });
+  await browser.waitForOpenModal(Selectors.SavePipelineModal, {
+    reverse: true,
+  });
 
   // Wait for the aggregation's name to be displayed.
   await browser.waitForAnimations(Selectors.AggregationPipelineName);
diff --git a/packages/compass-e2e-tests/helpers/commands/save-favorite.ts b/packages/compass-e2e-tests/helpers/commands/save-favorite.ts
index 10b81f48ff3..9f72ed9a304 100644
--- a/packages/compass-e2e-tests/helpers/commands/save-favorite.ts
+++ b/packages/compass-e2e-tests/helpers/commands/save-favorite.ts
@@ -20,8 +20,5 @@ export async function saveFavorite(
   });
 
   await browser.clickVisible(Selectors.ConnectionModalSaveButton);
-  await browser
-    .$(Selectors.ConnectionModal)
-    .waitForDisplayed({ reverse: true });
-  return;
+  await browser.waitForOpenModal(Selectors.ConnectionModal, { reverse: true });
 }
diff --git a/packages/compass-e2e-tests/helpers/commands/try-to-insert-document.ts b/packages/compass-e2e-tests/helpers/commands/try-to-insert-document.ts
index 87334159004..1e9d273b39e 100644
--- a/packages/compass-e2e-tests/helpers/commands/try-to-insert-document.ts
+++ b/packages/compass-e2e-tests/helpers/commands/try-to-insert-document.ts
@@ -13,8 +13,7 @@ export async function tryToInsertDocument(
   await browser.clickVisible(Selectors.InsertDocumentOption);
 
   // wait for the modal to appear
-  const insertDialog = browser.$(Selectors.InsertDialog);
-  await insertDialog.waitForDisplayed();
+  await browser.waitForOpenModal(Selectors.InsertDialog);
 
   if (document) {
     // set the text in the editor
diff --git a/packages/compass-e2e-tests/helpers/commands/wait-for-open-modal.ts b/packages/compass-e2e-tests/helpers/commands/wait-for-open-modal.ts
index 10a157c5bfd..87aa86e7832 100644
--- a/packages/compass-e2e-tests/helpers/commands/wait-for-open-modal.ts
+++ b/packages/compass-e2e-tests/helpers/commands/wait-for-open-modal.ts
@@ -9,6 +9,7 @@ export async function waitForOpenModal(
 ): Promise<void> {
   await browser.waitUntil(
     async () => {
+      /* eslint-disable-next-line @typescript-eslint/await-thenable -- WebdriverIO chainable promise array should be awaited */
       const modals = await browser.getOpenModals(selector);
       const count = await modals.length;
       if (reverse) {
diff --git a/packages/compass-e2e-tests/helpers/commands/workspace-tabs.ts b/packages/compass-e2e-tests/helpers/commands/workspace-tabs.ts
index 068d24e7dd8..20848ab69ff 100644
--- a/packages/compass-e2e-tests/helpers/commands/workspace-tabs.ts
+++ b/packages/compass-e2e-tests/helpers/commands/workspace-tabs.ts
@@ -38,13 +38,13 @@ async function closeTab(
 
       if (autoConfirmTabClose) {
         // Tabs in "dirty" state can't be closed without confirmation
-        if (await browser.$(Selectors.ConfirmTabCloseModal).isExisting()) {
+        if (await browser.isModalOpen(Selectors.ConfirmTabCloseModal)) {
           await browser.clickVisible(
             browser.$(Selectors.ConfirmTabCloseModal).$('button=Close tab')
           );
-          await browser
-            .$(Selectors.ConfirmTabCloseModal)
-            .waitForDisplayed({ reverse: true });
+          await browser.waitForOpenModal(Selectors.ConfirmTabCloseModal, {
+            reverse: true,
+          });
         }
       }
       return (
diff --git a/packages/compass-e2e-tests/tests/assistant.test.ts b/packages/compass-e2e-tests/tests/assistant.test.ts
index 1c51da08815..b76c4b4aea7 100644
--- a/packages/compass-e2e-tests/tests/assistant.test.ts
+++ b/packages/compass-e2e-tests/tests/assistant.test.ts
@@ -230,8 +230,7 @@ describe('MongoDB Assistant', function () {
 
       await browser.clickVisible(Selectors.AIOptInModalDeclineLink);
 
-      const optInModal = browser.$(Selectors.AIOptInModal);
-      await optInModal.waitForDisplayed({ reverse: true });
+      await browser.waitForOpenModal(Selectors.AIOptInModal, { reverse: true });
 
       const chatInput = browser.$(Selectors.AssistantChatInputTextArea);
       expect(await chatInput.getValue()).not.to.equal(testMessage);
@@ -251,13 +250,13 @@ describe('MongoDB Assistant', function () {
           browser.$(Selectors.ConnectionToastErrorDebugButton)
         );
 
-        const optInModal = browser.$(Selectors.AIOptInModal);
-        await optInModal.waitForDisplayed();
-        expect(await optInModal.isDisplayed()).to.be.true;
+        await browser.waitForOpenModal(Selectors.AIOptInModal);
 
         await browser.clickVisible(Selectors.AIOptInModalDeclineLink);
 
-        await optInModal.waitForDisplayed({ reverse: true });
+        await browser.waitForOpenModal(Selectors.AIOptInModal, {
+          reverse: true,
+        });
 
         expect(
           await browser.$(Selectors.AssistantChatMessages).isDisplayed()
@@ -267,13 +266,12 @@ describe('MongoDB Assistant', function () {
       it('should display opt-in modal for explain plan entry point', async function () {
         await useExplainPlanEntryPoint(browser, { waitForMessages: false });
 
-        const optInModal = browser.$(Selectors.AIOptInModal);
-        await optInModal.waitForDisplayed();
-        expect(await optInModal.isDisplayed()).to.be.true;
+        await browser.waitForOpenModal(Selectors.AIOptInModal);
 
         await browser.clickVisible(Selectors.AIOptInModalDeclineLink);
-
-        await optInModal.waitForDisplayed({ reverse: true });
+        await browser.waitForOpenModal(Selectors.AIOptInModal, {
+          reverse: true,
+        });
 
         expect(
           await browser.$(Selectors.AssistantChatMessages).isDisplayed()
@@ -296,13 +294,10 @@ describe('MongoDB Assistant', function () {
     it('sends the message if the user opts in', async function () {
       await sendMessage(testMessage, { expectedResult: 'opt-in' });
 
-      const optInModal = browser.$(Selectors.AIOptInModal);
-      await optInModal.waitForDisplayed();
-      expect(await optInModal.isDisplayed()).to.be.true;
+      await browser.waitForOpenModal(Selectors.AIOptInModal);
 
       await browser.clickVisible(Selectors.AIOptInModalAcceptButton);
-
-      await optInModal.waitForDisplayed({ reverse: true });
+      await browser.waitForOpenModal(Selectors.AIOptInModal, { reverse: true });
 
       const chatInput = browser.$(Selectors.AssistantChatInputTextArea);
       expect(await chatInput.getValue()).to.equal('');
@@ -622,7 +617,7 @@ async function useExplainPlanEntryPoint(
 
   await browser.clickVisible(Selectors.ExplainPlanInterpretButton);
 
-  await browser.$(Selectors.AggregationExplainModal).waitForDisplayed({
+  await browser.waitForOpenModal(Selectors.AggregationExplainModal, {
     reverse: true,
   });
 
diff --git a/packages/compass-e2e-tests/tests/auto-connect.test.ts b/packages/compass-e2e-tests/tests/auto-connect.test.ts
index 6d9e302a62c..f978dcffe5b 100644
--- a/packages/compass-e2e-tests/tests/auto-connect.test.ts
+++ b/packages/compass-e2e-tests/tests/auto-connect.test.ts
@@ -201,7 +201,7 @@ describe('Automatically connecting from the command line', function () {
       );
       expect(error).to.include('Authentication failed');
       await browser.clickVisible(Selectors.ConnectionToastErrorReviewButton);
-      await browser.$(Selectors.ConnectionModal).waitForDisplayed();
+      await browser.waitForOpenModal(Selectors.ConnectionModal);
       const connectFormState = await browser.getConnectFormState();
       expect(connectFormState.defaultUsername).to.equal('doesnotexist');
       expect(connectFormState.defaultPassword).to.equal('asdf/');
diff --git a/packages/compass-e2e-tests/tests/collection-aggregations-tab.test.ts b/packages/compass-e2e-tests/tests/collection-aggregations-tab.test.ts
index 9278db4751e..f26218cf3f0 100644
--- a/packages/compass-e2e-tests/tests/collection-aggregations-tab.test.ts
+++ b/packages/compass-e2e-tests/tests/collection-aggregations-tab.test.ts
@@ -383,8 +383,7 @@ describe('Collection aggregations tab', function () {
     await browser.clickVisible(Selectors.SavePipelineCreateViewAction);
 
     // wait for the modal to appear
-    const createViewModal = browser.$(Selectors.CreateViewModal);
-    await createViewModal.waitForDisplayed();
+    await browser.waitForOpenModal(Selectors.CreateViewModal);
 
     // set view name
     await browser.setValueVisible(
@@ -409,10 +408,9 @@ describe('Collection aggregations tab', function () {
       'my-view-from-pipeline',
       'duplicate-view'
     );
-    const duplicateModal = browser.$(Selectors.DuplicateViewModal);
 
     // wait for the modal, fill out the modal, confirm
-    await duplicateModal.waitForDisplayed();
+    await browser.waitForOpenModal(Selectors.DuplicateViewModal);
     await browser.setValueVisible(
       Selectors.DuplicateViewModalTextInput,
       'duplicated-view'
@@ -423,7 +421,9 @@ describe('Collection aggregations tab', function () {
     await confirmDuplicateButton.waitForEnabled();
 
     await confirmDuplicateButton.click();
-    await duplicateModal.waitForDisplayed({ reverse: true });
+    await browser.waitForOpenModal(Selectors.DuplicateViewModal, {
+      reverse: true,
+    });
 
     // wait for the active tab to become the newly duplicated view
     await waitForTab(browser, 'test.duplicated-view');
@@ -479,8 +479,8 @@ describe('Collection aggregations tab', function () {
             await browser.setFeature('maxTimeMS', 1);
           } else {
             await browser.openSettingsModal();
-            const settingsModal = browser.$(Selectors.SettingsModal);
-            await settingsModal.waitForDisplayed();
+            await browser.waitForOpenModal(Selectors.SettingsModal);
+
             await browser.clickVisible(Selectors.GeneralSettingsButton);
 
             await browser.setValueVisible(
@@ -565,10 +565,9 @@ describe('Collection aggregations tab', function () {
     await browser.clickVisible(Selectors.RunPipelineButton);
 
     // confirm the write operation
-    const writeOperationConfirmationModal = browser.$(
+    await browser.waitForOpenModal(
       Selectors.AggregationWriteOperationConfirmationModal
     );
-    await writeOperationConfirmationModal.waitForDisplayed();
 
     const description = await browser
       .$(Selectors.AggregationWriteOperationConfirmationModalDescription)
@@ -581,7 +580,10 @@ describe('Collection aggregations tab', function () {
       Selectors.AggregationWriteOperationConfirmButton
     );
 
-    await writeOperationConfirmationModal.waitForDisplayed({ reverse: true });
+    await browser.waitForOpenModal(
+      Selectors.AggregationWriteOperationConfirmationModal,
+      { reverse: true }
+    );
 
     // go to the new collection
     const goToCollectionButton = browser.$(Selectors.GoToCollectionButton);
@@ -642,10 +644,9 @@ describe('Collection aggregations tab', function () {
       await browser.clickVisible(Selectors.RunPipelineButton);
 
       // confirm the write operation
-      const writeOperationConfirmationModal = browser.$(
+      await browser.waitForOpenModal(
         Selectors.AggregationWriteOperationConfirmationModal
       );
-      await writeOperationConfirmationModal.waitForDisplayed();
 
       const description = await browser
         .$(Selectors.AggregationWriteOperationConfirmationModalDescription)
@@ -657,7 +658,10 @@ describe('Collection aggregations tab', function () {
         Selectors.AggregationWriteOperationConfirmButton
       );
 
-      await writeOperationConfirmationModal.waitForDisplayed({ reverse: true });
+      await browser.waitForOpenModal(
+        Selectors.AggregationWriteOperationConfirmationModal,
+        { reverse: true }
+      );
 
       const errorElement = browser.$(Selectors.AggregationErrorBanner);
       await errorElement.waitForDisplayed();
@@ -673,13 +677,14 @@ describe('Collection aggregations tab', function () {
       await errorElement.waitForDisplayed();
       await errorDetailsBtn.click();
 
-      const errorDetailsJson = browser.$(Selectors.ErrorDetailsJson);
-      await errorDetailsJson.waitForDisplayed();
+      await browser.$(Selectors.ErrorDetailsJson).waitForDisplayed();
 
       // now click the close button
       await browser.clickVisible(Selectors.confirmationModalConfirmButton());
       // wait for the modal to go away
-      await errorDetailsJson.waitForDisplayed({ reverse: true });
+      await browser.$(Selectors.ErrorDetailsJson).waitForDisplayed({
+        reverse: true,
+      });
     });
   });
 
@@ -710,10 +715,9 @@ describe('Collection aggregations tab', function () {
     await browser.clickVisible(Selectors.RunPipelineButton);
 
     // confirm the write operation
-    const writeOperationConfirmationModal = browser.$(
+    await browser.waitForOpenModal(
       Selectors.AggregationWriteOperationConfirmationModal
     );
-    await writeOperationConfirmationModal.waitForDisplayed();
 
     const description = await browser
       .$(Selectors.AggregationWriteOperationConfirmationModalDescription)
@@ -723,7 +727,10 @@ describe('Collection aggregations tab', function () {
     expect(description).to.contain('test.numbers');
 
     await browser.clickVisible(Selectors.AggregationWriteOperationCancelButton);
-    await writeOperationConfirmationModal.waitForDisplayed({ reverse: true });
+    await browser.waitForOpenModal(
+      Selectors.AggregationWriteOperationConfirmationModal,
+      { reverse: true }
+    );
 
     // the pipeline can be futher edited
     await waitForAnyText(browser, browser.$(Selectors.stageContent(0)));
@@ -758,10 +765,9 @@ describe('Collection aggregations tab', function () {
     await browser.clickVisible(Selectors.RunPipelineButton);
 
     // confirm the write operation
-    const writeOperationConfirmationModal = browser.$(
+    await browser.waitForOpenModal(
       Selectors.AggregationWriteOperationConfirmationModal
     );
-    await writeOperationConfirmationModal.waitForDisplayed();
 
     const description = await browser
       .$(Selectors.AggregationWriteOperationConfirmationModalDescription)
@@ -774,7 +780,10 @@ describe('Collection aggregations tab', function () {
       Selectors.AggregationWriteOperationConfirmButton
     );
 
-    await writeOperationConfirmationModal.waitForDisplayed({ reverse: true });
+    await browser.waitForOpenModal(
+      Selectors.AggregationWriteOperationConfirmationModal,
+      { reverse: true }
+    );
 
     // go to the new collection
     const goToCollectionButton = browser.$(Selectors.GoToCollectionButton);
@@ -820,10 +829,9 @@ describe('Collection aggregations tab', function () {
     await browser.clickVisible(Selectors.RunPipelineButton);
 
     // confirm the write operation
-    const writeOperationConfirmationModal = browser.$(
+    await browser.waitForOpenModal(
       Selectors.AggregationWriteOperationConfirmationModal
     );
-    await writeOperationConfirmationModal.waitForDisplayed();
 
     const description = await browser
       .$(Selectors.AggregationWriteOperationConfirmationModalDescription)
@@ -833,7 +841,10 @@ describe('Collection aggregations tab', function () {
     expect(description).to.contain('test.numbers');
 
     await browser.clickVisible(Selectors.AggregationWriteOperationCancelButton);
-    await writeOperationConfirmationModal.waitForDisplayed({ reverse: true });
+    await browser.waitForOpenModal(
+      Selectors.AggregationWriteOperationConfirmationModal,
+      { reverse: true }
+    );
 
     // the pipeline can be futher edited
     await waitForAnyText(browser, browser.$(Selectors.stageContent(0)));
@@ -989,8 +1000,7 @@ describe('Collection aggregations tab', function () {
 
     // Click the export data button to open the modal.
     await browser.clickVisible(Selectors.ExportAggregationResultsButton);
-    const exportModal = browser.$(Selectors.ExportModal);
-    await exportModal.waitForDisplayed();
+    await browser.waitForOpenModal(Selectors.ExportModal);
 
     // Make sure the aggregation is shown in the modal.
     const exportModalAggregationTextElement = browser.$(
@@ -1009,10 +1019,7 @@ describe('Collection aggregations tab', function () {
     await browser.setExportFilename(filename);
 
     // Wait for the modal to go away.
-    const exportModalElement = browser.$(Selectors.ExportModal);
-    await exportModalElement.waitForDisplayed({
-      reverse: true,
-    });
+    await browser.waitForOpenModal(Selectors.ExportModal, { reverse: true });
 
     await browser.waitForExportToFinishAndCloseToast();
 
@@ -1036,15 +1043,16 @@ describe('Collection aggregations tab', function () {
 
     await browser.clickVisible(Selectors.AggregationExplainButton);
     await browser.waitForAnimations(Selectors.AggregationExplainModal);
+    await browser.waitForOpenModal(Selectors.AggregationExplainModal);
 
-    const modal = browser.$(Selectors.AggregationExplainModal);
-    await modal.waitForDisplayed();
-    await browser.waitForAnimations(Selectors.AggregationExplainModal);
-
-    expect(await modal.getText()).to.contain('Query Performance Summary');
+    expect(
+      await browser.$(Selectors.AggregationExplainModal).getText()
+    ).to.contain('Query Performance Summary');
 
     await browser.clickVisible(Selectors.AggregationExplainModalCloseButton);
-    await modal.waitForDisplayed({ reverse: true });
+    await browser.waitForOpenModal(Selectors.AggregationExplainModal, {
+      reverse: true,
+    });
   });
 
   it('shows confirmation modal when create new pipeline is clicked and aggregation is modified', async function () {
@@ -1317,8 +1325,8 @@ describe('Collection aggregations tab', function () {
         '{ i: 5 }'
       );
       await browser.clickVisible(Selectors.stageFocusModeButton(0));
-      const modal = browser.$(Selectors.FocusModeModal);
-      await modal.waitForDisplayed();
+
+      await browser.waitForOpenModal(Selectors.FocusModeModal);
 
       await browser.$(Selectors.FocusModeStageInput).waitForDisplayed();
       await browser.$(Selectors.FocusModeStageEditor).waitForDisplayed();
@@ -1326,7 +1334,9 @@ describe('Collection aggregations tab', function () {
 
       await browser.clickVisible(Selectors.FocusModeCloseModalButton);
 
-      await modal.waitForDisplayed({ reverse: true });
+      await browser.waitForOpenModal(Selectors.FocusModeModal, {
+        reverse: true,
+      });
     });
 
     it('navigates between stages', async function () {
@@ -1350,8 +1360,7 @@ describe('Collection aggregations tab', function () {
       );
 
       await browser.clickVisible(Selectors.stageFocusModeButton(0));
-      const modal = browser.$(Selectors.FocusModeModal);
-      await modal.waitForDisplayed();
+      await browser.waitForOpenModal(Selectors.FocusModeModal);
 
       const nextButton = browser.$(Selectors.FocusModeNextStageButton);
       const previousButton = browser.$(Selectors.FocusModePreviousStageButton);
@@ -1395,7 +1404,9 @@ describe('Collection aggregations tab', function () {
 
       await browser.clickVisible(Selectors.FocusModeCloseModalButton);
 
-      await modal.waitForDisplayed({ reverse: true });
+      await browser.waitForOpenModal(Selectors.FocusModeModal, {
+        reverse: true,
+      });
     });
 
     it('adds a new stage before or after current stage', async function () {
@@ -1406,8 +1417,7 @@ describe('Collection aggregations tab', function () {
       );
 
       await browser.clickVisible(Selectors.stageFocusModeButton(0));
-      const modal = browser.$(Selectors.FocusModeModal);
-      await modal.waitForDisplayed();
+      await browser.waitForOpenModal(Selectors.FocusModeModal);
 
       await browser.waitUntil(async () => {
         const activeStage = browser.$(Selectors.FocusModeActiveStageLabel);
@@ -1447,7 +1457,9 @@ describe('Collection aggregations tab', function () {
 
       await browser.clickVisible(Selectors.FocusModeCloseModalButton);
 
-      await modal.waitForDisplayed({ reverse: true });
+      await browser.waitForOpenModal(Selectors.FocusModeModal, {
+        reverse: true,
+      });
     });
 
     it('hides stage input and output when preview is disabled', async function () {
@@ -1460,8 +1472,7 @@ describe('Collection aggregations tab', function () {
       );
 
       await browser.clickVisible(Selectors.stageFocusModeButton(0));
-      const modal = browser.$(Selectors.FocusModeModal);
-      await modal.waitForDisplayed();
+      await browser.waitForOpenModal(Selectors.FocusModeModal);
 
       await browser
         .$(Selectors.FocusModeStageInput)
@@ -1480,8 +1491,7 @@ describe('Collection aggregations tab', function () {
       );
 
       await browser.clickVisible(Selectors.stageFocusModeButton(0));
-      const modal = browser.$(Selectors.FocusModeModal);
-      await modal.waitForDisplayed();
+      await browser.waitForOpenModal(Selectors.FocusModeModal);
 
       await browser.waitUntil(async () => {
         const outputElem = browser.$(Selectors.FocusModeStageOutput);
@@ -1498,8 +1508,7 @@ describe('Collection aggregations tab', function () {
       );
 
       await browser.clickVisible(Selectors.stageFocusModeButton(0));
-      const modal = browser.$(Selectors.FocusModeModal);
-      await modal.waitForDisplayed();
+      await browser.waitForOpenModal(Selectors.FocusModeModal);
 
       await browser.waitUntil(async () => {
         const outputElem = browser.$(Selectors.FocusModeStageOutput);
@@ -1513,8 +1522,7 @@ describe('Collection aggregations tab', function () {
       await browser.setCodemirrorEditorValue(Selectors.stageEditor(0), '{}');
 
       await browser.clickVisible(Selectors.stageFocusModeButton(0));
-      const modal = browser.$(Selectors.FocusModeModal);
-      await modal.waitForDisplayed();
+      await browser.waitForOpenModal(Selectors.FocusModeModal);
 
       await browser.waitUntil(async () => {
         const outputElem = browser.$(Selectors.FocusModeStageOutput);
@@ -1721,8 +1729,7 @@ describe('Collection aggregations tab', function () {
         await browser.setCodemirrorEditorValue(Selectors.stageEditor(1), '1');
 
         await browser.clickVisible(Selectors.stageFocusModeButton(0));
-        const modal = browser.$(Selectors.FocusModeModal);
-        await modal.waitForDisplayed();
+        await browser.waitForOpenModal(Selectors.FocusModeModal);
 
         await browser.$(Selectors.FocusModeStageInput).waitForDisplayed();
         await browser.$(Selectors.FocusModeStageEditor).waitForDisplayed();
diff --git a/packages/compass-e2e-tests/tests/collection-bulk-delete.test.ts b/packages/compass-e2e-tests/tests/collection-bulk-delete.test.ts
index a750d6d1539..ca3749541f9 100644
--- a/packages/compass-e2e-tests/tests/collection-bulk-delete.test.ts
+++ b/packages/compass-e2e-tests/tests/collection-bulk-delete.test.ts
@@ -57,7 +57,7 @@ describe('Bulk Delete', function () {
 
     // Open the modal.
     await browser.clickVisible(Selectors.OpenBulkDeleteButton);
-    await browser.$(Selectors.BulkDeleteModal).waitForDisplayed();
+    await browser.waitForOpenModal(Selectors.BulkDeleteModal);
 
     // Check the telemetry
     const openedEvent = await telemetryEntry('Bulk Delete Opened');
@@ -84,15 +84,15 @@ describe('Bulk Delete', function () {
     await browser.clickVisible(Selectors.BulkDeleteModalDeleteButton);
 
     // The modal should go away
-    await browser
-      .$(Selectors.BulkDeleteModal)
-      .waitForDisplayed({ reverse: true });
+    await browser.waitForOpenModal(Selectors.BulkDeleteModal, {
+      reverse: true,
+    });
 
     // Press delete in the confirmation modal
     await browser.clickVisible(Selectors.confirmationModalConfirmButton());
-    await browser
-      .$(Selectors.BulkDeleteModal)
-      .waitForDisplayed({ reverse: true });
+    await browser.waitForOpenModal(Selectors.ConfirmationModal, {
+      reverse: true,
+    });
     await browser.runFindOperation('Documents', '{ i: 5 }');
 
     // Check the telemetry
@@ -134,7 +134,7 @@ describe('Bulk Delete', function () {
 
     // Open the modal.
     await browser.clickVisible(Selectors.OpenBulkDeleteButton);
-    await browser.$(Selectors.BulkDeleteModal).waitForDisplayed();
+    await browser.waitForOpenModal(Selectors.BulkDeleteModal);
 
     // Check that it will update the expected number of documents
     expect(await browser.$(Selectors.BulkDeleteModalTitle).getText()).to.equal(
@@ -149,9 +149,9 @@ describe('Bulk Delete', function () {
     await browser.clickVisible(Selectors.BulkDeleteModalDeleteButton);
 
     // The modal should go away
-    await browser
-      .$(Selectors.BulkDeleteModal)
-      .waitForDisplayed({ reverse: true });
+    await browser.waitForOpenModal(Selectors.BulkDeleteModal, {
+      reverse: true,
+    });
 
     // Press cancel in the confirmation modal
     await browser.clickVisible(Selectors.confirmationModalCancelButton());
@@ -176,7 +176,7 @@ describe('Bulk Delete', function () {
 
     // Open the modal.
     await browser.clickVisible(Selectors.OpenBulkDeleteButton);
-    await browser.$(Selectors.BulkDeleteModal).waitForDisplayed();
+    await browser.waitForOpenModal(Selectors.BulkDeleteModal);
 
     // Click the export button
     await browser.clickVisible(Selectors.BulkDeleteModalExportButton);
diff --git a/packages/compass-e2e-tests/tests/collection-bulk-update.test.ts b/packages/compass-e2e-tests/tests/collection-bulk-update.test.ts
index 39a41421ec4..ebf333a63eb 100644
--- a/packages/compass-e2e-tests/tests/collection-bulk-update.test.ts
+++ b/packages/compass-e2e-tests/tests/collection-bulk-update.test.ts
@@ -57,7 +57,7 @@ describe('Bulk Update', () => {
 
     // Open the modal.
     await browser.clickVisible(Selectors.OpenBulkUpdateButton);
-    await browser.$(Selectors.BulkUpdateModal).waitForDisplayed();
+    await browser.waitForOpenModal(Selectors.BulkUpdateModal);
 
     // Check the telemetry
     const openedEvent = await telemetryEntry('Bulk Update Opened');
@@ -105,9 +105,9 @@ describe('Bulk Update', () => {
     await browser.clickVisible(Selectors.BulkUpdateUpdateButton);
 
     // The modal should go away
-    await browser
-      .$(Selectors.BulkUpdateModal)
-      .waitForDisplayed({ reverse: true });
+    await browser.waitForOpenModal(Selectors.BulkUpdateModal, {
+      reverse: true,
+    });
 
     // The success toast is displayed
     await browser.$(Selectors.BulkUpdateSuccessToast).waitForDisplayed();
@@ -152,7 +152,7 @@ describe('Bulk Update', () => {
 
     // Open the modal.
     await browser.clickVisible(Selectors.OpenBulkUpdateButton);
-    await browser.$(Selectors.BulkUpdateModal).waitForDisplayed();
+    await browser.waitForOpenModal(Selectors.BulkUpdateModal);
 
     // Change the update text
     await browser.setCodemirrorEditorValue(
@@ -186,9 +186,9 @@ describe('Bulk Update', () => {
     await browser.clickVisible(Selectors.BulkUpdateCancelButton);
 
     // Wait for the modal to go away
-    await browser
-      .$(Selectors.BulkUpdateModal)
-      .waitForDisplayed({ reverse: true });
+    await browser.waitForOpenModal(Selectors.BulkUpdateModal, {
+      reverse: true,
+    });
 
     // Open the dropdown
     await browser.clickVisible(Selectors.QueryBarHistoryButton);
@@ -216,7 +216,7 @@ describe('Bulk Update', () => {
     });
 
     // The modal should open
-    await browser.$(Selectors.BulkUpdateModal).waitForDisplayed();
+    await browser.waitForOpenModal(Selectors.BulkUpdateModal);
 
     // Make sure the query is shown in the modal.
     expect(
diff --git a/packages/compass-e2e-tests/tests/collection-documents-tab.test.ts b/packages/compass-e2e-tests/tests/collection-documents-tab.test.ts
index 19ea7f1623c..2b90b38decb 100644
--- a/packages/compass-e2e-tests/tests/collection-documents-tab.test.ts
+++ b/packages/compass-e2e-tests/tests/collection-documents-tab.test.ts
@@ -287,8 +287,7 @@ describe('Collection documents tab', function () {
           await browser.setFeature('maxTimeMS', 1);
         } else {
           await browser.openSettingsModal();
-          const settingsModal = browser.$(Selectors.SettingsModal);
-          await settingsModal.waitForDisplayed();
+          await browser.waitForOpenModal(Selectors.SettingsModal);
           await browser.clickVisible(Selectors.GeneralSettingsButton);
 
           await browser.setValueVisible(
@@ -296,7 +295,9 @@ describe('Collection documents tab', function () {
             '1'
           );
           await browser.clickVisible(Selectors.SaveSettingsButton);
-          await settingsModal.waitForDisplayed({ reverse: true });
+          await browser.waitForOpenModal(Selectors.SettingsModal, {
+            reverse: true,
+          });
         }
       }
 
@@ -588,8 +589,7 @@ FindIterable<Document> result = collection.find(filter);`);
     await browser.clickVisible(Selectors.CloneDocumentButton);
 
     // wait for the modal to appear
-    const insertDialog = browser.$(Selectors.InsertDialog);
-    await insertDialog.waitForDisplayed();
+    await browser.waitForOpenModal(Selectors.InsertDialog);
 
     // set the text in the editor and insert the document
     await browser.setCodemirrorEditorValue(
@@ -599,7 +599,7 @@ FindIterable<Document> result = collection.find(filter);`);
     const insertConfirm = browser.$(Selectors.InsertConfirm);
     await insertConfirm.waitForEnabled();
     await browser.clickVisible(Selectors.InsertConfirm);
-    await insertDialog.waitForDisplayed({ reverse: true });
+    await browser.waitForOpenModal(Selectors.InsertDialog, { reverse: true });
 
     await browser.runFindOperation('Documents', '{ i: 10042 }');
 
@@ -724,13 +724,14 @@ FindIterable<Document> result = collection.find(filter);`);
       await errorElement.waitForDisplayed();
       await errorDetailsBtn.click();
 
-      const errorDetailsJson = browser.$(Selectors.ErrorDetailsJson);
-      await errorDetailsJson.waitForDisplayed();
+      await browser.$(Selectors.ErrorDetailsJson).waitForDisplayed();
 
       // now click the close button
       await browser.clickVisible(Selectors.confirmationModalConfirmButton());
       // wait for the modal to go away
-      await errorDetailsJson.waitForDisplayed({ reverse: true });
+      await browser.$(Selectors.ErrorDetailsJson).waitForDisplayed({
+        reverse: true,
+      });
     });
 
     describe('Editing', function () {
@@ -777,12 +778,13 @@ FindIterable<Document> result = collection.find(filter);`);
         await errorDetailsBtn.waitForDisplayed();
         await errorDetailsBtn.click();
 
-        const errorDetailsJson = browser.$(Selectors.ErrorDetailsJson);
-        await errorDetailsJson.waitForDisplayed();
+        await browser.$(Selectors.ErrorDetailsJson).waitForDisplayed();
 
         // exit details
         await browser.clickVisible(Selectors.confirmationModalConfirmButton());
-        await errorDetailsJson.waitForDisplayed({ reverse: true });
+        await browser.$(Selectors.ErrorDetailsJson).waitForDisplayed({
+          reverse: true,
+        });
       });
 
       it('shows error info when editing via json view', async function () {
@@ -826,12 +828,13 @@ FindIterable<Document> result = collection.find(filter);`);
         await errorDetailsBtn.waitForDisplayed();
         await errorDetailsBtn.click();
 
-        const errorDetailsJson = browser.$(Selectors.ErrorDetailsJson);
-        await errorDetailsJson.waitForDisplayed();
+        await browser.$(Selectors.ErrorDetailsJson).waitForDisplayed();
 
         // exit details
         await browser.clickVisible(Selectors.confirmationModalConfirmButton());
-        await errorDetailsJson.waitForDisplayed({ reverse: true });
+        await browser.$(Selectors.ErrorDetailsJson).waitForDisplayed({
+          reverse: true,
+        });
       });
 
       it('shows error info when editing via table view', async function () {
@@ -872,12 +875,13 @@ FindIterable<Document> result = collection.find(filter);`);
         await errorDetailsBtn.waitForDisplayed();
         await errorDetailsBtn.click();
 
-        const errorDetailsJson = browser.$(Selectors.ErrorDetailsJson);
-        await errorDetailsJson.waitForDisplayed();
+        await browser.$(Selectors.ErrorDetailsJson).waitForDisplayed();
 
         // exit details
         await browser.clickVisible(Selectors.confirmationModalConfirmButton());
-        await errorDetailsJson.waitForDisplayed({ reverse: true });
+        await browser.$(Selectors.ErrorDetailsJson).waitForDisplayed({
+          reverse: true,
+        });
       });
     });
   });
diff --git a/packages/compass-e2e-tests/tests/collection-export.test.ts b/packages/compass-e2e-tests/tests/collection-export.test.ts
index dd6c90ac463..d225a997f7a 100644
--- a/packages/compass-e2e-tests/tests/collection-export.test.ts
+++ b/packages/compass-e2e-tests/tests/collection-export.test.ts
@@ -90,8 +90,7 @@ describe('Collection export', function () {
       // Open the modal.
       await browser.clickVisible(Selectors.ExportCollectionMenuButton);
       await browser.clickVisible(Selectors.ExportCollectionQueryOption);
-      const exportModal = browser.$(Selectors.ExportModal);
-      await exportModal.waitForDisplayed();
+      await browser.waitForOpenModal(Selectors.ExportModal);
 
       // Make sure the query is shown in the modal.
       const exportModalQueryTextElement = browser.$(
@@ -126,8 +125,7 @@ describe('Collection export', function () {
       await browser.setExportFilename(filename);
 
       // Wait for the modal to go away.
-      const exportModalElement = browser.$(Selectors.ExportModal);
-      await exportModalElement.waitForDisplayed({
+      await browser.waitForOpenModal(Selectors.ExportModal, {
         reverse: true,
       });
 
@@ -172,8 +170,7 @@ describe('Collection export', function () {
       // Open the modal.
       await browser.clickVisible(Selectors.ExportCollectionMenuButton);
       await browser.clickVisible(Selectors.ExportCollectionQueryOption);
-      const exportModal = browser.$(Selectors.ExportModal);
-      await exportModal.waitForDisplayed();
+      await browser.waitForOpenModal(Selectors.ExportModal);
 
       const exportModalQueryTextElement = browser.$(
         Selectors.ExportModalCodePreview
@@ -198,8 +195,7 @@ describe('Collection export', function () {
       await browser.setExportFilename(filename);
 
       // Wait for the modal to go away.
-      const exportModalElement = browser.$(Selectors.ExportModal);
-      await exportModalElement.waitForDisplayed({
+      await browser.waitForOpenModal(Selectors.ExportModal, {
         reverse: true,
       });
 
@@ -240,8 +236,7 @@ describe('Collection export', function () {
       // Open the modal.
       await browser.clickVisible(Selectors.ExportCollectionMenuButton);
       await browser.clickVisible(Selectors.ExportCollectionQueryOption);
-      const exportModal = browser.$(Selectors.ExportModal);
-      await exportModal.waitForDisplayed();
+      await browser.waitForOpenModal(Selectors.ExportModal);
 
       // Make sure the query is shown in the modal.
       const exportModalQueryTextElement = browser.$(
@@ -262,8 +257,7 @@ describe('Collection export', function () {
       await browser.setExportFilename(filename);
 
       // Wait for the modal to go away.
-      const exportModalElement = browser.$(Selectors.ExportModal);
-      await exportModalElement.waitForDisplayed({
+      await browser.waitForOpenModal(Selectors.ExportModal, {
         reverse: true,
       });
 
@@ -307,8 +301,7 @@ describe('Collection export', function () {
       await browser.clickVisible(
         Selectors.ExportCollectionFullCollectionOption
       );
-      const exportModal = browser.$(Selectors.ExportModal);
-      await exportModal.waitForDisplayed();
+      await browser.waitForOpenModal(Selectors.ExportModal);
 
       // Export the entire collection.
       await selectExportFileTypeCSV(browser);
@@ -318,8 +311,7 @@ describe('Collection export', function () {
       await browser.setExportFilename(filename);
 
       // Wait for the modal to go away.
-      const exportModalElement = browser.$(Selectors.ExportModal);
-      await exportModalElement.waitForDisplayed({
+      await browser.waitForOpenModal(Selectors.ExportModal, {
         reverse: true,
       });
 
@@ -357,8 +349,7 @@ describe('Collection export', function () {
       // Open the modal.
       await browser.clickVisible(Selectors.ExportCollectionMenuButton);
       await browser.clickVisible(Selectors.ExportCollectionQueryOption);
-      const exportModal = browser.$(Selectors.ExportModal);
-      await exportModal.waitForDisplayed();
+      await browser.waitForOpenModal(Selectors.ExportModal);
 
       // Make sure the query is shown in the modal.
       const exportModalQueryTextElement = browser.$(
@@ -390,8 +381,7 @@ describe('Collection export', function () {
       await browser.setExportFilename(filename);
 
       // Wait for the modal to go away.
-      const exportModalElement = browser.$(Selectors.ExportModal);
-      await exportModalElement.waitForDisplayed({
+      await browser.waitForOpenModal(Selectors.ExportModal, {
         reverse: true,
       });
 
@@ -436,8 +426,7 @@ describe('Collection export', function () {
       // Open the modal.
       await browser.clickVisible(Selectors.ExportCollectionMenuButton);
       await browser.clickVisible(Selectors.ExportCollectionQueryOption);
-      const exportModal = browser.$(Selectors.ExportModal);
-      await exportModal.waitForDisplayed();
+      await browser.waitForOpenModal(Selectors.ExportModal);
 
       const exportModalQueryTextElement = browser.$(
         Selectors.ExportModalCodePreview
@@ -462,8 +451,7 @@ describe('Collection export', function () {
       await browser.setExportFilename(filename);
 
       // Wait for the modal to go away.
-      const exportModalElement = browser.$(Selectors.ExportModal);
-      await exportModalElement.waitForDisplayed({
+      await browser.waitForOpenModal(Selectors.ExportModal, {
         reverse: true,
       });
 
@@ -503,8 +491,7 @@ describe('Collection export', function () {
       await browser.clickVisible(
         Selectors.ExportCollectionFullCollectionOption
       );
-      const exportModal = browser.$(Selectors.ExportModal);
-      await exportModal.waitForDisplayed();
+      await browser.waitForOpenModal(Selectors.ExportModal);
 
       await browser.clickVisible(Selectors.ExportModalExportButton);
 
@@ -513,8 +500,7 @@ describe('Collection export', function () {
       await browser.setExportFilename(filename);
 
       // Wait for the modal to go away.
-      const exportModalElement = browser.$(Selectors.ExportModal);
-      await exportModalElement.waitForDisplayed({
+      await browser.waitForOpenModal(Selectors.ExportModal, {
         reverse: true,
       });
 
@@ -554,8 +540,7 @@ describe('Collection export', function () {
       await browser.clickVisible(
         Selectors.ExportCollectionFullCollectionOption
       );
-      const exportModal = browser.$(Selectors.ExportModal);
-      await exportModal.waitForDisplayed();
+      await browser.waitForOpenModal(Selectors.ExportModal);
 
       // Set the json format to canonical.
       await browser.clickVisible(Selectors.ExportJSONFormatAccordion);
@@ -568,8 +553,7 @@ describe('Collection export', function () {
       await browser.setExportFilename(filename);
 
       // Wait for the modal to go away.
-      const exportModalElement = browser.$(Selectors.ExportModal);
-      await exportModalElement.waitForDisplayed({
+      await browser.waitForOpenModal(Selectors.ExportModal, {
         reverse: true,
       });
 
@@ -610,8 +594,7 @@ describe('Collection export', function () {
       // Open the modal.
       await browser.clickVisible(Selectors.ExportCollectionMenuButton);
       await browser.clickVisible(Selectors.ExportCollectionQueryOption);
-      const exportModal = browser.$(Selectors.ExportModal);
-      await exportModal.waitForDisplayed();
+      await browser.waitForOpenModal(Selectors.ExportModal);
 
       // Choose to export select fields.
       await browser.clickVisible(Selectors.ExportQuerySelectFieldsOption);
@@ -632,8 +615,7 @@ describe('Collection export', function () {
       await browser.setExportFilename(filename);
 
       // Wait for the modal to go away.
-      const exportModalElement = browser.$(Selectors.ExportModal);
-      await exportModalElement.waitForDisplayed({
+      await browser.waitForOpenModal(Selectors.ExportModal, {
         reverse: true,
       });
 
@@ -705,8 +687,7 @@ describe('Collection export', function () {
       // Open the modal.
       await browser.clickVisible(Selectors.ExportCollectionMenuButton);
       await browser.clickVisible(Selectors.ExportCollectionQueryOption);
-      const exportModal = browser.$(Selectors.ExportModal);
-      await exportModal.waitForDisplayed();
+      await browser.waitForOpenModal(Selectors.ExportModal);
 
       // Choose to export select fields.
       await browser.clickVisible(Selectors.ExportQuerySelectFieldsOption);
@@ -725,8 +706,7 @@ describe('Collection export', function () {
       await browser.setExportFilename(filename);
 
       // Wait for the modal to go away.
-      const exportModalElement = browser.$(Selectors.ExportModal);
-      await exportModalElement.waitForDisplayed({
+      await browser.waitForOpenModal(Selectors.ExportModal, {
         reverse: true,
       });
 
@@ -792,8 +772,7 @@ describe('Collection export', function () {
       // Open the modal.
       await browser.clickVisible(Selectors.ExportCollectionMenuButton);
       await browser.clickVisible(Selectors.ExportCollectionQueryOption);
-      const exportModal = browser.$(Selectors.ExportModal);
-      await exportModal.waitForDisplayed();
+      await browser.waitForOpenModal(Selectors.ExportModal);
 
       // Choose to export select fields.
       await browser.clickVisible(Selectors.ExportQuerySelectFieldsOption);
@@ -814,8 +793,7 @@ describe('Collection export', function () {
       await browser.setExportFilename(filename);
 
       // Wait for the modal to go away.
-      const exportModalElement = browser.$(Selectors.ExportModal);
-      await exportModalElement.waitForDisplayed({
+      await browser.waitForOpenModal(Selectors.ExportModal, {
         reverse: true,
       });
 
@@ -901,8 +879,7 @@ describe('Collection export', function () {
       // Open the modal.
       await browser.clickVisible(Selectors.ExportCollectionMenuButton);
       await browser.clickVisible(Selectors.ExportCollectionQueryOption);
-      const exportModal = browser.$(Selectors.ExportModal);
-      await exportModal.waitForDisplayed();
+      await browser.waitForOpenModal(Selectors.ExportModal);
 
       // Make sure the query is shown in the modal.
       const exportModalQueryTextElement = browser.$(
@@ -949,8 +926,7 @@ describe('Collection export', function () {
       await browser.setExportFilename(filename);
 
       // Wait for the modal to go away.
-      const exportModalElement = browser.$(Selectors.ExportModal);
-      await exportModalElement.waitForDisplayed({
+      await browser.waitForOpenModal(Selectors.ExportModal, {
         reverse: true,
       });
 
@@ -1000,8 +976,7 @@ describe('Collection export', function () {
       // Open the modal.
       await browser.clickVisible(Selectors.ExportCollectionMenuButton);
       await browser.clickVisible(Selectors.ExportCollectionQueryOption);
-      const exportModal = browser.$(Selectors.ExportModal);
-      await exportModal.waitForDisplayed();
+      await browser.waitForOpenModal(Selectors.ExportModal);
 
       // Make sure the query is shown in the modal.
       const exportModalQueryTextElement = browser.$(
@@ -1048,8 +1023,7 @@ describe('Collection export', function () {
       await browser.setExportFilename(filename);
 
       // Wait for the modal to go away.
-      const exportModalElement = browser.$(Selectors.ExportModal);
-      await exportModalElement.waitForDisplayed({
+      await browser.waitForOpenModal(Selectors.ExportModal, {
         reverse: true,
       });
 
diff --git a/packages/compass-e2e-tests/tests/collection-import.test.ts b/packages/compass-e2e-tests/tests/collection-import.test.ts
index d24e5341e1e..7f7ccf05581 100644
--- a/packages/compass-e2e-tests/tests/collection-import.test.ts
+++ b/packages/compass-e2e-tests/tests/collection-import.test.ts
@@ -36,14 +36,15 @@ async function importJSONFile(browser: CompassBrowser, jsonPath: string) {
   await browser.selectFile(Selectors.ImportFileInput, jsonPath);
 
   // Wait for the modal to appear.
-  const importModal = browser.$(Selectors.ImportModal);
-  await importModal.waitForDisplayed();
+  await browser.waitForOpenModal(Selectors.ImportModal);
 
   // Confirm import.
   await browser.clickVisible(Selectors.ImportConfirm);
 
   // Wait for the modal to go away.
-  await importModal.waitForDisplayed({ reverse: true });
+  await browser.waitForOpenModal(Selectors.ImportModal, {
+    reverse: true,
+  });
 
   // Wait for the done toast to appear and close it.
   const toastElement = browser.$(Selectors.ImportToast);
@@ -162,8 +163,7 @@ describe('Collection import', function () {
     await browser.clickVisible(Selectors.InsertDocumentOption);
 
     // wait for the modal to appear
-    const insertDialog = browser.$(Selectors.InsertDialog);
-    await insertDialog.waitForDisplayed();
+    await browser.waitForOpenModal(Selectors.InsertDialog);
 
     // set the text in the editor
     await browser.setCodemirrorEditorValue(
@@ -180,7 +180,9 @@ describe('Collection import', function () {
     await browser.clickVisible(Selectors.InsertConfirm);
 
     // wait for the modal to go away
-    await insertDialog.waitForDisplayed({ reverse: true });
+    await browser.waitForOpenModal(Selectors.InsertDialog, {
+      reverse: true,
+    });
 
     // make sure the documents appear in the collection
     const messageElement = browser.$(Selectors.DocumentListActionBarMessage);
@@ -223,8 +225,7 @@ describe('Collection import', function () {
     await browser.clickVisible(Selectors.InsertDocumentOption);
 
     // wait for the modal to appear
-    const insertDialog = browser.$(Selectors.InsertDialog);
-    await insertDialog.waitForDisplayed();
+    await browser.waitForOpenModal(Selectors.InsertDialog);
 
     // pick list view
     await browser.clickVisible(
@@ -275,7 +276,9 @@ describe('Collection import', function () {
     await browser.clickVisible(Selectors.InsertConfirm);
 
     // wait for the modal to go away
-    await insertDialog.waitForDisplayed({ reverse: true });
+    await browser.waitForOpenModal(Selectors.InsertDialog, {
+      reverse: true,
+    });
 
     // make sure the documents appear in the collection
     const messageElement = browser.$(Selectors.DocumentListActionBarMessage);
@@ -315,8 +318,7 @@ describe('Collection import', function () {
     await browser.clickVisible(Selectors.InsertDocumentOption);
 
     // wait for the modal to appear
-    const insertDialog = browser.$(Selectors.InsertDialog);
-    await insertDialog.waitForDisplayed();
+    await browser.waitForOpenModal(Selectors.InsertDialog);
 
     // set the text in the editor
     await browser.setCodemirrorEditorValue(Selectors.InsertJSONEditor, json);
@@ -331,7 +333,9 @@ describe('Collection import', function () {
     await browser.clickVisible(Selectors.InsertConfirm);
 
     // wait for the modal to go away
-    await insertDialog.waitForDisplayed({ reverse: true });
+    await browser.waitForOpenModal(Selectors.InsertDialog, {
+      reverse: true,
+    });
 
     // make sure the documents appear in the collection
     const messageElement = browser.$(Selectors.DocumentListActionBarMessage);
@@ -368,8 +372,7 @@ describe('Collection import', function () {
     await browser.clickVisible(Selectors.InsertDocumentOption);
 
     // wait for the modal to appear
-    const insertDialog = browser.$(Selectors.InsertDialog);
-    await insertDialog.waitForDisplayed();
+    await browser.waitForOpenModal(Selectors.InsertDialog);
 
     // set the text in the editor
     await browser.setCodemirrorEditorValue(Selectors.InsertJSONEditor, json);
@@ -384,7 +387,9 @@ describe('Collection import', function () {
 
     // cancel and wait for the modal to go away
     await browser.clickVisible(Selectors.InsertCancel);
-    await insertDialog.waitForDisplayed({ reverse: true });
+    await browser.waitForOpenModal(Selectors.InsertDialog, {
+      reverse: true,
+    });
   });
 
   it('supports JSON files', async function () {
@@ -503,14 +508,15 @@ describe('Collection import', function () {
     // Select the file.
     await browser.selectFile(Selectors.ImportFileInput, jsonPath);
     // Wait for the modal to appear.
-    const importModal = browser.$(Selectors.ImportModal);
-    await importModal.waitForDisplayed();
+    await browser.waitForOpenModal(Selectors.ImportModal);
 
     // Confirm import.
     await browser.clickVisible(Selectors.ImportConfirm);
 
     // Wait for the modal to go away.
-    await importModal.waitForDisplayed({ reverse: true });
+    await browser.waitForOpenModal(Selectors.ImportModal, {
+      reverse: true,
+    });
 
     // Wait for the error toast to appear and close it.
     const toastElement = browser.$(Selectors.ImportToast);
@@ -563,8 +569,7 @@ describe('Collection import', function () {
       // Select the file.
       await browser.selectFile(Selectors.ImportFileInput, jsonPath);
       // Wait for the modal to appear.
-      const importModal = browser.$(Selectors.ImportModal);
-      await importModal.waitForDisplayed();
+      await browser.waitForOpenModal(Selectors.ImportModal);
 
       // Click the stop on errors checkbox.
       const stopOnErrorsCheckbox = browser.$(
@@ -577,7 +582,9 @@ describe('Collection import', function () {
       await browser.clickVisible(Selectors.ImportConfirm);
 
       // Wait for the modal to go away.
-      await importModal.waitForDisplayed({ reverse: true });
+      await browser.waitForOpenModal(Selectors.ImportModal, {
+        reverse: true,
+      });
 
       // Wait for the error toast to appear
       const toastElement = browser.$(Selectors.ImportToast);
@@ -617,14 +624,15 @@ describe('Collection import', function () {
       // Select the file.
       await browser.selectFile(Selectors.ImportFileInput, csvPath);
       // Wait for the modal to appear.
-      const importModal = browser.$(Selectors.ImportModal);
-      await importModal.waitForDisplayed();
+      await browser.waitForOpenModal(Selectors.ImportModal);
 
       // Confirm import.
       await browser.clickVisible(Selectors.ImportConfirm);
 
       // Wait for the modal to go away.
-      await importModal.waitForDisplayed({ reverse: true });
+      await browser.waitForOpenModal(Selectors.ImportModal, {
+        reverse: true,
+      });
 
       // Wait for the error toast to appear
       const toastElement = browser.$(Selectors.ImportToast);
@@ -684,8 +692,7 @@ describe('Collection import', function () {
     await browser.selectFile(Selectors.ImportFileInput, csvPath);
 
     // Wait for the modal to appear.
-    const importModal = browser.$(Selectors.ImportModal);
-    await importModal.waitForDisplayed();
+    await browser.waitForOpenModal(Selectors.ImportModal);
 
     // wait for it to finish analyzing
     await browser.$(Selectors.ImportConfirm).waitForDisplayed();
@@ -722,7 +729,9 @@ describe('Collection import', function () {
     await browser.clickVisible(Selectors.ImportConfirm);
 
     // Wait for the modal to go away.
-    await importModal.waitForDisplayed({ reverse: true });
+    await browser.waitForOpenModal(Selectors.ImportModal, {
+      reverse: true,
+    });
 
     // Wait for the done toast to appear and close it.
     const toastElement = browser.$(Selectors.ImportToast);
@@ -812,8 +821,7 @@ describe('Collection import', function () {
     await browser.selectFile(Selectors.ImportFileInput, csvPath);
 
     // Wait for the modal to appear.
-    const importModal = browser.$(Selectors.ImportModal);
-    await importModal.waitForDisplayed();
+    await browser.waitForOpenModal(Selectors.ImportModal);
 
     // wait for it to finish analyzing
     await browser.$(Selectors.ImportConfirm).waitForDisplayed();
@@ -919,7 +927,9 @@ describe('Collection import', function () {
     await browser.clickVisible(Selectors.ImportConfirm);
 
     // Wait for the modal to go away.
-    await importModal.waitForDisplayed({ reverse: true });
+    await browser.waitForOpenModal(Selectors.ImportModal, {
+      reverse: true,
+    });
 
     // Wait for the done toast to appear and close it.
     const toastElement = browser.$(Selectors.ImportToast);
@@ -969,8 +979,7 @@ describe('Collection import', function () {
     await browser.selectFile(Selectors.ImportFileInput, csvPath);
 
     // Wait for the modal to appear.
-    const importModal = browser.$(Selectors.ImportModal);
-    await importModal.waitForDisplayed();
+    await browser.waitForOpenModal(Selectors.ImportModal);
 
     // it now autodetects the delimiter
     const importDelimiterSelectButton = browser.$(
@@ -1003,7 +1012,9 @@ describe('Collection import', function () {
     await browser.clickVisible(Selectors.ImportConfirm);
 
     // Wait for the modal to go away.
-    await importModal.waitForDisplayed({ reverse: true });
+    await browser.waitForOpenModal(Selectors.ImportModal, {
+      reverse: true,
+    });
 
     // Wait for the done toast to appear and close it.
     const toastElement = browser.$(Selectors.ImportToast);
@@ -1059,8 +1070,7 @@ describe('Collection import', function () {
     await browser.selectFile(Selectors.ImportFileInput, csvPath);
 
     // Wait for the modal to appear.
-    const importModal = browser.$(Selectors.ImportModal);
-    await importModal.waitForDisplayed();
+    await browser.waitForOpenModal(Selectors.ImportModal);
 
     // wait for it to finish analyzing
     await browser.$(Selectors.ImportConfirm).waitForDisplayed();
@@ -1075,7 +1085,9 @@ describe('Collection import', function () {
     await browser.clickVisible(Selectors.ImportConfirm);
 
     // Wait for the modal to go away.
-    await importModal.waitForDisplayed({ reverse: true });
+    await browser.waitForOpenModal(Selectors.ImportModal, {
+      reverse: true,
+    });
 
     // Wait for the error toast to appear and close it.
     const toastElement = browser.$(Selectors.ImportToast);
@@ -1118,8 +1130,7 @@ describe('Collection import', function () {
     await browser.selectFile(Selectors.ImportFileInput, csvPath);
 
     // wait for the modal to appear
-    const importModal = browser.$(Selectors.ImportModal);
-    await importModal.waitForDisplayed();
+    await browser.waitForOpenModal(Selectors.ImportModal);
 
     // it now autodetects the delimiter correctly
     const importDelimiterSelectButton = browser.$(
@@ -1149,7 +1160,9 @@ describe('Collection import', function () {
     await browser.clickVisible(Selectors.ImportConfirm);
 
     // Wait for the modal to go away.
-    await importModal.waitForDisplayed({ reverse: true });
+    await browser.waitForOpenModal(Selectors.ImportModal, {
+      reverse: true,
+    });
 
     // Wait for the done toast to appear and close it.
     const toastElement = browser.$(Selectors.ImportToast);
@@ -1207,8 +1220,7 @@ describe('Collection import', function () {
     await browser.selectFile(Selectors.ImportFileInput, jsonPath);
 
     // wait for the modal to appear
-    const importModal = browser.$(Selectors.ImportModal);
-    await importModal.waitForDisplayed();
+    await browser.waitForOpenModal(Selectors.ImportModal);
 
     // Click the stop on errors checkbox.
     const stopOnErrorsCheckbox = browser.$(
@@ -1221,7 +1233,9 @@ describe('Collection import', function () {
     await browser.clickVisible(Selectors.ImportConfirm);
 
     // Wait for the modal to go away.
-    await importModal.waitForDisplayed({ reverse: true });
+    await browser.waitForOpenModal(Selectors.ImportModal, {
+      reverse: true,
+    });
 
     // Wait for the error toast to appear and close it.
     const toastElement = browser.$(Selectors.ImportToast);
@@ -1263,14 +1277,15 @@ describe('Collection import', function () {
     await browser.selectFile(Selectors.ImportFileInput, jsonPath);
 
     // Wait for the modal to appear.
-    const importModal = browser.$(Selectors.ImportModal);
-    await importModal.waitForDisplayed();
+    await browser.waitForOpenModal(Selectors.ImportModal);
 
     // Confirm import.
     await browser.clickVisible(Selectors.ImportConfirm);
 
     // Wait for the modal to go away.
-    await importModal.waitForDisplayed({ reverse: true });
+    await browser.waitForOpenModal(Selectors.ImportModal, {
+      reverse: true,
+    });
 
     // Wait for the error toast to appear.
     const toastElement = browser.$(Selectors.ImportToast);
@@ -1337,8 +1352,7 @@ describe('Collection import', function () {
       await browser.selectFile(Selectors.ImportFileInput, csvPath);
 
       // Wait for the modal to appear.
-      const importModal = browser.$(Selectors.ImportModal);
-      await importModal.waitForDisplayed();
+      await browser.waitForOpenModal(Selectors.ImportModal);
 
       // Wait for the import button to become available because detect can take
       // a while
@@ -1483,8 +1497,7 @@ describe('Collection import', function () {
       await browser.selectFile(Selectors.ImportFileInput, csvPath);
 
       // Wait for the modal to appear.
-      const importModal = browser.$(Selectors.ImportModal);
-      await importModal.waitForDisplayed();
+      await browser.waitForOpenModal(Selectors.ImportModal);
 
       // Confirm import.
       await browser.clickVisible(Selectors.ImportConfirm);
diff --git a/packages/compass-e2e-tests/tests/collection-indexes-tab.test.ts b/packages/compass-e2e-tests/tests/collection-indexes-tab.test.ts
index 7552d67e694..6742e75407f 100644
--- a/packages/compass-e2e-tests/tests/collection-indexes-tab.test.ts
+++ b/packages/compass-e2e-tests/tests/collection-indexes-tab.test.ts
@@ -120,8 +120,7 @@ describe('Collection indexes tab', function () {
 
       await browser.clickVisible(Selectors.CreateIndexButton);
 
-      const createModal = browser.$(Selectors.CreateIndexModal);
-      await createModal.waitForDisplayed();
+      await browser.waitForOpenModal(Selectors.CreateIndexModal);
 
       // Select i filed name from Combobox.
       const fieldNameSelect = browser.$(
@@ -156,7 +155,9 @@ describe('Collection indexes tab', function () {
 
       await browser.clickVisible(Selectors.CreateIndexConfirmButton);
 
-      await createModal.waitForDisplayed({ reverse: true });
+      await browser.waitForOpenModal(Selectors.CreateIndexModal, {
+        reverse: true,
+      });
 
       const indexComponent = browser.$(Selectors.indexComponent('columnstore'));
       await indexComponent.waitForDisplayed();
@@ -168,8 +169,7 @@ describe('Collection indexes tab', function () {
         }`
       );
 
-      const dropModal = browser.$(Selectors.DropIndexModal);
-      await dropModal.waitForDisplayed();
+      await browser.waitForOpenModal(Selectors.DropIndexModal);
 
       await browser.setValueVisible(
         Selectors.DropIndexModalConfirmButton,
@@ -181,7 +181,9 @@ describe('Collection indexes tab', function () {
       );
       await browser.clickVisible(ConfirmButtonSelector);
 
-      await dropModal.waitForDisplayed({ reverse: true });
+      await browser.waitForOpenModal(Selectors.DropIndexModal, {
+        reverse: true,
+      });
 
       await indexComponent.waitForDisplayed({ reverse: true });
     });
diff --git a/packages/compass-e2e-tests/tests/collection-rename.test.ts b/packages/compass-e2e-tests/tests/collection-rename.test.ts
index 7a5d615e8df..740d8bb750e 100644
--- a/packages/compass-e2e-tests/tests/collection-rename.test.ts
+++ b/packages/compass-e2e-tests/tests/collection-rename.test.ts
@@ -40,13 +40,11 @@ class RenameCollectionModal {
   }
 
   async isVisible() {
-    const modal = this.browser.$(Selectors.RenameCollectionModal);
-    await modal.waitForDisplayed();
+    await this.browser.waitForOpenModal(Selectors.RenameCollectionModal);
   }
 
   async isNotVisible() {
-    const modal = this.browser.$(Selectors.RenameCollectionModal);
-    return modal.waitForDisplayed({
+    await this.browser.waitForOpenModal(Selectors.RenameCollectionModal, {
       reverse: true,
     });
   }
diff --git a/packages/compass-e2e-tests/tests/connection.test.ts b/packages/compass-e2e-tests/tests/connection.test.ts
index 8e5c1f14342..e0d8641e434 100644
--- a/packages/compass-e2e-tests/tests/connection.test.ts
+++ b/packages/compass-e2e-tests/tests/connection.test.ts
@@ -173,9 +173,8 @@ async function assertCannotInsertData(
   );
 
   // cancel and wait for the modal to go away
-  const insertDialog = browser.$(Selectors.InsertDialog);
   await browser.clickVisible(Selectors.InsertCancel);
-  await insertDialog.waitForDisplayed({ reverse: true });
+  await browser.waitForOpenModal(Selectors.InsertDialog, { reverse: true });
 }
 
 async function assertCannotCreateDb(
@@ -196,8 +195,7 @@ async function assertCannotCreateDb(
     false
   );
 
-  const createModalElement = browser.$(Selectors.CreateDatabaseModal);
-  await createModalElement.waitForDisplayed();
+  await browser.waitForOpenModal(Selectors.CreateDatabaseModal);
   await browser.setValueVisible(Selectors.CreateDatabaseDatabaseName, dbName);
   await browser.setValueVisible(
     Selectors.CreateDatabaseCollectionName,
@@ -216,7 +214,9 @@ async function assertCannotCreateDb(
 
   // cancel and wait for the modal to go away
   await browser.clickVisible(Selectors.CreateDatabaseCancelButton);
-  await createModalElement.waitForDisplayed({ reverse: true });
+  await browser.waitForOpenModal(Selectors.CreateDatabaseModal, {
+    reverse: true,
+  });
 }
 
 async function assertCannotCreateCollection(
@@ -235,8 +235,7 @@ async function assertCannotCreateCollection(
   await browser.hover(Selectors.sidebarDatabase(connectionId, dbName));
   await browser.clickVisible(Selectors.CreateCollectionButton);
 
-  const createModalElement = browser.$(Selectors.CreateCollectionModal);
-  await createModalElement.waitForDisplayed();
+  await browser.waitForOpenModal(Selectors.CreateCollectionModal);
   await browser.setValueVisible(
     Selectors.CreateDatabaseCollectionName,
     collectionName
@@ -253,7 +252,9 @@ async function assertCannotCreateCollection(
 
   // cancel and wait for the modal to go away
   await browser.clickVisible(Selectors.CreateCollectionCancelButton);
-  await createModalElement.waitForDisplayed({ reverse: true });
+  await browser.waitForOpenModal(Selectors.CreateCollectionModal, {
+    reverse: true,
+  });
 }
 
 function assertNotError(result: any) {
@@ -320,7 +321,7 @@ describe('Connection string', function () {
 
     // click the review button in the toast
     await browser.clickVisible(Selectors.ConnectionToastErrorReviewButton);
-    await browser.$(Selectors.ConnectionModal).waitForDisplayed();
+    await browser.waitForOpenModal(Selectors.ConnectionModal);
     const errorText = await browser
       .$(Selectors.ConnectionFormErrorMessage)
       .getText();
@@ -328,9 +329,9 @@ describe('Connection string', function () {
 
     // close the modal
     await browser.clickVisible(Selectors.ConnectionModalCloseButton);
-    await browser
-      .$(Selectors.ConnectionModal)
-      .waitForDisplayed({ reverse: true });
+    await browser.waitForOpenModal(Selectors.ConnectionModal, {
+      reverse: true,
+    });
   });
 
   it('can connect to an Atlas replicaset without srv', async function () {
@@ -1012,7 +1013,7 @@ describe('Connection form', function () {
       await browser.$(toastSelector).waitForDisplayed({ reverse: true });
 
       // make sure the connection form is populated with this connection
-      await browser.$(Selectors.ConnectionModal).waitForDisplayed();
+      await browser.waitForOpenModal(Selectors.ConnectionModal);
       const errorText = await browser
         .$(Selectors.ConnectionFormErrorMessage)
         .getText();
@@ -1024,9 +1025,9 @@ describe('Connection form', function () {
 
       // close the modal
       await browser.clickVisible(Selectors.ConnectionModalCloseButton);
-      await browser
-        .$(Selectors.ConnectionModal)
-        .waitForDisplayed({ reverse: true });
+      await browser.waitForOpenModal(Selectors.ConnectionModal, {
+        reverse: true,
+      });
     }
   });
 });
diff --git a/packages/compass-e2e-tests/tests/data-modeling-tab.test.ts b/packages/compass-e2e-tests/tests/data-modeling-tab.test.ts
index 2b2ec05e273..f97edb92931 100644
--- a/packages/compass-e2e-tests/tests/data-modeling-tab.test.ts
+++ b/packages/compass-e2e-tests/tests/data-modeling-tab.test.ts
@@ -429,8 +429,7 @@ describe('Data Modeling tab', function () {
       });
 
       await browser.clickVisible(Selectors.DataModelExportButton);
-      const exportModal = browser.$(Selectors.DataModelExportModal);
-      await exportModal.waitForDisplayed();
+      await browser.waitForOpenModal(Selectors.DataModelExportModal);
 
       await browser.clickParent(Selectors.DataModelExportJsonOption);
       await browser.clickVisible(Selectors.DataModelExportModalConfirmButton);
@@ -505,8 +504,7 @@ describe('Data Modeling tab', function () {
       });
 
       await browser.clickVisible(Selectors.DataModelExportButton);
-      const exportModal = browser.$(Selectors.DataModelExportModal);
-      await exportModal.waitForDisplayed();
+      await browser.waitForOpenModal(Selectors.DataModelExportModal);
 
       await browser.clickParent(Selectors.DataModelExportPngOption);
       await browser.clickVisible(Selectors.DataModelExportModalConfirmButton);
@@ -558,8 +556,7 @@ describe('Data Modeling tab', function () {
       await browser.waitForAnimations(dataModelEditor);
 
       await browser.clickVisible(Selectors.DataModelExportButton);
-      const exportModal = browser.$(Selectors.DataModelExportModal);
-      await exportModal.waitForDisplayed();
+      await browser.waitForOpenModal(Selectors.DataModelExportModal);
 
       await browser.clickParent(Selectors.DataModelExportDiagramOption);
       await browser.clickVisible(Selectors.DataModelExportModalConfirmButton);
diff --git a/packages/compass-e2e-tests/tests/import-export-connections.test.ts b/packages/compass-e2e-tests/tests/import-export-connections.test.ts
index 0bfb360b6ed..efe3c28ee1e 100644
--- a/packages/compass-e2e-tests/tests/import-export-connections.test.ts
+++ b/packages/compass-e2e-tests/tests/import-export-connections.test.ts
@@ -288,7 +288,7 @@ describe('Connection Import / Export', function () {
           await browser.selectConnectionsMenuItem(
             Selectors.ExportConnectionsModalOpen
           );
-          await browser.$(Selectors.ExportConnectionsModal).waitForDisplayed();
+          await browser.waitForOpenModal(Selectors.ExportConnectionsModal);
         }
 
         // Enter filename and adjust secrets handling
@@ -350,7 +350,7 @@ describe('Connection Import / Export', function () {
           await browser.selectConnectionsMenuItem(
             Selectors.ImportConnectionsModalOpen
           );
-          await browser.$(Selectors.ImportConnectionsModal).waitForDisplayed();
+          await browser.waitForOpenModal(Selectors.ImportConnectionsModal);
         }
 
         // Enter filename and adjust secrets handling
diff --git a/packages/compass-e2e-tests/tests/in-use-encryption.test.ts b/packages/compass-e2e-tests/tests/in-use-encryption.test.ts
index 2201812c81c..776c9f956c0 100644
--- a/packages/compass-e2e-tests/tests/in-use-encryption.test.ts
+++ b/packages/compass-e2e-tests/tests/in-use-encryption.test.ts
@@ -560,8 +560,7 @@ describe('CSFLE / QE', function () {
         await browser.clickVisible(Selectors.InsertDocumentOption);
 
         // wait for the modal to appear
-        const insertDialog = browser.$(Selectors.InsertDialog);
-        await insertDialog.waitForDisplayed();
+        await browser.waitForOpenModal(Selectors.InsertDialog);
 
         // set the text in the editor
         await browser.setCodemirrorEditorValue(
@@ -582,7 +581,9 @@ describe('CSFLE / QE', function () {
         await browser.clickVisible(Selectors.InsertConfirm);
 
         // wait for the modal to go away
-        await insertDialog.waitForDisplayed({ reverse: true });
+        await browser.waitForOpenModal(Selectors.InsertDialog, {
+          reverse: true,
+        });
 
         const result = await browser.getFirstListDocument();
 
@@ -901,8 +902,7 @@ describe('CSFLE / QE', function () {
         await browser.clickVisible(Selectors.CloneDocumentButton);
 
         // wait for the modal to appear
-        const insertDialog = browser.$(Selectors.InsertDialog);
-        await insertDialog.waitForDisplayed();
+        await browser.waitForOpenModal(Selectors.InsertDialog);
 
         // set the text in the editor
         await browser.setCodemirrorEditorValue(
@@ -923,7 +923,9 @@ describe('CSFLE / QE', function () {
         await browser.clickVisible(Selectors.InsertConfirm);
 
         // wait for the modal to go away
-        await insertDialog.waitForDisplayed({ reverse: true });
+        await browser.waitForOpenModal(Selectors.InsertDialog, {
+          reverse: true,
+        });
 
         await browser.runFindOperation('Documents', "{ name: 'Third' }");
 
@@ -993,14 +995,14 @@ describe('CSFLE / QE', function () {
           )
         );
 
-        await browser.$(Selectors.CSFLEConnectionModal).waitForDisplayed();
+        await browser.waitForOpenModal(Selectors.CSFLEConnectionModal);
 
         await browser.clickVisible(Selectors.SetCSFLEEnabledLabel);
 
         await browser.clickVisible(Selectors.CSFLEConnectionModalCloseButton);
-        await browser
-          .$(Selectors.CSFLEConnectionModal)
-          .waitForDisplayed({ reverse: true });
+        await browser.waitForOpenModal(Selectors.CSFLEConnectionModal, {
+          reverse: true,
+        });
 
         const encryptedResult = await browser.getFirstListDocument();
 
@@ -1019,14 +1021,14 @@ describe('CSFLE / QE', function () {
           )
         );
 
-        await browser.$(Selectors.CSFLEConnectionModal).waitForDisplayed();
+        await browser.waitForOpenModal(Selectors.CSFLEConnectionModal);
 
         await browser.clickVisible(Selectors.SetCSFLEEnabledLabel);
 
         await browser.clickVisible(Selectors.CSFLEConnectionModalCloseButton);
-        await browser
-          .$(Selectors.CSFLEConnectionModal)
-          .waitForDisplayed({ reverse: true });
+        await browser.waitForOpenModal(Selectors.CSFLEConnectionModal, {
+          reverse: true,
+        });
 
         decryptedResult = await browser.getFirstListDocument();
 
diff --git a/packages/compass-e2e-tests/tests/instance-sidebar.test.ts b/packages/compass-e2e-tests/tests/instance-sidebar.test.ts
index a55a70f020a..070dd638be5 100644
--- a/packages/compass-e2e-tests/tests/instance-sidebar.test.ts
+++ b/packages/compass-e2e-tests/tests/instance-sidebar.test.ts
@@ -51,11 +51,11 @@ describe('Instance sidebar', function () {
       Selectors.ClusterInfoItem
     );
 
-    const modal = browser.$(Selectors.ConnectionInfoModal);
-    await modal.waitForDisplayed();
-
+    await browser.waitForOpenModal(Selectors.ConnectionInfoModal);
     await browser.clickVisible(Selectors.ConnectionInfoModalCloseButton);
-    await modal.waitForDisplayed({ reverse: true });
+    await browser.waitForOpenModal(Selectors.ConnectionInfoModal, {
+      reverse: true,
+    });
   });
 
   it('contains a dbs/collections tree view', async function () {
diff --git a/packages/compass-e2e-tests/tests/my-queries-tab.test.ts b/packages/compass-e2e-tests/tests/my-queries-tab.test.ts
index cb4561df752..28d2380e4e5 100644
--- a/packages/compass-e2e-tests/tests/my-queries-tab.test.ts
+++ b/packages/compass-e2e-tests/tests/my-queries-tab.test.ts
@@ -133,8 +133,7 @@ async function saveAggregation(
   await browser.clickVisible(Selectors.SavePipelineSaveAsAction);
 
   // wait for the modal to appear
-  const savePipelineModal = browser.$(Selectors.SavePipelineModal);
-  await savePipelineModal.waitForDisplayed();
+  await browser.waitForOpenModal(Selectors.SavePipelineModal);
 
   // set aggregation name
   await browser.waitForAnimations(Selectors.SavePipelineNameInput);
@@ -145,8 +144,10 @@ async function saveAggregation(
 
   // click save button
   const createButton = browser.$(Selectors.SavePipelineModal).$('button=Save');
-
   await createButton.click();
+  await browser.waitForOpenModal(Selectors.SavePipelineModal, {
+    reverse: true,
+  });
 }
 
 describe('My Queries tab', function () {
@@ -241,15 +242,16 @@ describe('My Queries tab', function () {
 
         // rename the query
         await browser.clickVisible(Selectors.SavedItemMenuItemRename);
-        const renameModal = browser.$(Selectors.RenameSavedItemModal);
-        await renameModal.waitForDisplayed();
+        await browser.waitForOpenModal(Selectors.RenameSavedItemModal);
 
         await browser.setValueVisible(
           Selectors.RenameSavedItemModalTextInput,
           newFavoriteQueryName
         );
         await browser.clickVisible(Selectors.RenameSavedItemModalSubmit);
-        await renameModal.waitForDisplayed({ reverse: true });
+        await browser.waitForOpenModal(Selectors.RenameSavedItemModal, {
+          reverse: true,
+        });
 
         // rename the collection associated with the query to force the open item modal
         await client_1
@@ -271,8 +273,8 @@ describe('My Queries tab', function () {
         );
 
         // the open item modal - select a new collection
-        const openModal = browser.$(Selectors.OpenSavedItemModal);
-        await openModal.waitForDisplayed();
+        await browser.waitForOpenModal(Selectors.OpenSavedItemModal);
+
         await browser.selectOption({
           selectSelector: `${Selectors.OpenSavedItemDatabaseField} button`,
           optionText: 'test',
@@ -282,7 +284,9 @@ describe('My Queries tab', function () {
           optionText: 'numbers-renamed',
         });
         await browser.clickVisible(Selectors.OpenSavedItemModalConfirmButton);
-        await openModal.waitForDisplayed({ reverse: true });
+        await browser.waitForOpenModal(Selectors.OpenSavedItemModal, {
+          reverse: true,
+        });
 
         // we should eventually arrive on the collection
         const namespace = await browser.getActiveTabNamespace();
@@ -399,8 +403,7 @@ describe('My Queries tab', function () {
         await browser.clickVisible(Selectors.myQueriesItem(favoriteQueryName));
 
         // the open item modal - select a new collection
-        const openModal = browser.$(Selectors.OpenSavedItemModal);
-        await openModal.waitForDisplayed();
+        await browser.waitForOpenModal(Selectors.OpenSavedItemModal);
         await browser.selectOption({
           selectSelector: `${Selectors.OpenSavedItemDatabaseField} button`,
           optionText: 'test',
@@ -415,7 +418,9 @@ describe('My Queries tab', function () {
         );
 
         await browser.clickVisible(Selectors.OpenSavedItemModalConfirmButton);
-        await openModal.waitForDisplayed({ reverse: true });
+        await browser.waitForOpenModal(Selectors.OpenSavedItemModal, {
+          reverse: true,
+        });
 
         await browser.navigateToMyQueries();
 
@@ -513,8 +518,7 @@ describe('My Queries tab', function () {
         await browser.clickVisible(Selectors.myQueriesItem(favoriteQueryName));
 
         // the open item modal - select a new connection, database and collection
-        const openModal = browser.$(Selectors.OpenSavedItemModal);
-        await openModal.waitForDisplayed();
+        await browser.waitForOpenModal(Selectors.OpenSavedItemModal);
         await browser.selectOption({
           selectSelector: `${Selectors.OpenSavedItemConnectionField} button`,
           optionText: DEFAULT_CONNECTION_NAME_2,
@@ -530,7 +534,9 @@ describe('My Queries tab', function () {
 
         await browser.clickVisible(Selectors.OpenSavedItemModalConfirmButton);
 
-        await openModal.waitForDisplayed({ reverse: true });
+        await browser.waitForOpenModal(Selectors.OpenSavedItemModal, {
+          reverse: true,
+        });
 
         // we should land on connection-2 because that's the one we just selected
         await browser.waitUntil(async () => {
@@ -577,8 +583,7 @@ describe('My Queries tab', function () {
         await browser.clickVisible(Selectors.myQueriesItem(favoriteQueryName));
 
         // the open item modal - select a new connection, database and collection
-        const selectModal = browser.$(Selectors.SelectConnectionModal);
-        await selectModal.waitForDisplayed();
+        await browser.waitForOpenModal(Selectors.SelectConnectionModal);
 
         const connectionId = await browser.getConnectionIdByName(
           DEFAULT_CONNECTION_NAME_2
@@ -595,7 +600,9 @@ describe('My Queries tab', function () {
           Selectors.SelectConnectionModalConfirmButton
         );
 
-        await selectModal.waitForDisplayed({ reverse: true });
+        await browser.waitForOpenModal(Selectors.SelectConnectionModal, {
+          reverse: true,
+        });
 
         // we should land on connection-2 because that's the one we just selected
         await browser.waitUntil(async () => {
diff --git a/packages/compass-e2e-tests/tests/oidc.test.ts b/packages/compass-e2e-tests/tests/oidc.test.ts
index 400d1815df9..86aae580a0a 100644
--- a/packages/compass-e2e-tests/tests/oidc.test.ts
+++ b/packages/compass-e2e-tests/tests/oidc.test.ts
@@ -265,7 +265,8 @@ describe('OIDC integration', function () {
 
     await browser.removeConnection(connectionName);
     await browser.clickVisible(Selectors.SidebarNewConnectionButton);
-    await browser.$(Selectors.ConnectionModal).waitForDisplayed();
+    await browser.waitForOpenModal(Selectors.ConnectionModal);
+
     await browser.setValueVisible(
       Selectors.ConnectionFormStringInput,
       connectionString
@@ -323,7 +324,7 @@ describe('OIDC integration', function () {
 
     await browser.removeConnection(connectionName);
     await browser.clickVisible(Selectors.SidebarNewConnectionButton);
-    await browser.$(Selectors.ConnectionModal).waitForDisplayed();
+    await browser.waitForOpenModal(Selectors.ConnectionModal);
     await browser.setValueVisible(
       Selectors.ConnectionFormStringInput,
       connectionString
@@ -342,7 +343,7 @@ describe('OIDC integration', function () {
       false
     );
 
-    await browser.$(Selectors.ConfirmationModal).waitForDisplayed();
+    await browser.waitForOpenModal(Selectors.ConfirmationModal);
     const modalHeader = browser.$(Selectors.ConfirmationModalHeading);
     expect(await modalHeader.getText()).to.include('Authentication expired');
 
@@ -368,7 +369,7 @@ describe('OIDC integration', function () {
 
     await browser.removeConnection(connectionName);
     await browser.clickVisible(Selectors.SidebarNewConnectionButton);
-    await browser.$(Selectors.ConnectionModal).waitForDisplayed();
+    await browser.waitForOpenModal(Selectors.ConnectionModal);
     await browser.setValueVisible(
       Selectors.ConnectionFormStringInput,
       connectionString
@@ -387,7 +388,7 @@ describe('OIDC integration', function () {
       false
     );
 
-    await browser.$(Selectors.ConfirmationModal).waitForDisplayed();
+    await browser.waitForOpenModal(Selectors.ConfirmationModal);
     const modalHeader = browser.$(Selectors.ConfirmationModalHeading);
     expect(await modalHeader.getText()).to.include('Authentication expired');
 
diff --git a/packages/compass-e2e-tests/tests/read-only.test.ts b/packages/compass-e2e-tests/tests/read-only.test.ts
index 7a4538ec904..db5c269f581 100644
--- a/packages/compass-e2e-tests/tests/read-only.test.ts
+++ b/packages/compass-e2e-tests/tests/read-only.test.ts
@@ -21,8 +21,7 @@ async function setReadOnlyFeatureViaSettingsModal(
   }
 
   await browser.openSettingsModal();
-  const settingsModal = browser.$(Selectors.SettingsModal);
-  await settingsModal.waitForDisplayed();
+  await browser.waitForOpenModal(Selectors.SettingsModal);
 
   await browser.waitUntil(async () => {
     await browser.clickVisible(Selectors.GeneralSettingsButton);
@@ -48,7 +47,7 @@ async function setReadOnlyFeatureViaSettingsModal(
   }
 
   // wait for the modal to go away
-  await settingsModal.waitForDisplayed({ reverse: true });
+  await browser.waitForOpenModal(Selectors.SettingsModal, { reverse: true });
 }
 
 describe('readOnly: true / Read-Only Edition', function () {
diff --git a/packages/compass-e2e-tests/tests/search-indexes.test.ts b/packages/compass-e2e-tests/tests/search-indexes.test.ts
index 0bbd3c529c6..35b3fb91249 100644
--- a/packages/compass-e2e-tests/tests/search-indexes.test.ts
+++ b/packages/compass-e2e-tests/tests/search-indexes.test.ts
@@ -64,8 +64,7 @@ async function createSearchIndex(
     Selectors.createIndexDropdownAction('search-indexes')
   );
 
-  const modal = browser.$(Selectors.SearchIndexModal);
-  await modal.waitForDisplayed();
+  await browser.waitForOpenModal(Selectors.SearchIndexModal);
 
   await browser.setValueVisible(Selectors.SearchIndexName, indexName);
   await browser.setCodemirrorEditorValue(
@@ -74,7 +73,7 @@ async function createSearchIndex(
   );
 
   await browser.clickVisible(Selectors.SearchIndexConfirmButton);
-  await modal.waitForDisplayed({ reverse: true });
+  await browser.waitForOpenModal(Selectors.SearchIndexModal, { reverse: true });
 }
 
 async function updateSearchIndex(
@@ -89,8 +88,7 @@ async function updateSearchIndex(
   await browser.hover(indexRowSelector);
   await browser.clickVisible(Selectors.searchIndexEditButton(indexName));
 
-  const modal = browser.$(Selectors.SearchIndexModal);
-  await modal.waitForDisplayed();
+  await browser.waitForOpenModal(Selectors.SearchIndexModal);
 
   await browser.setCodemirrorEditorValue(
     Selectors.SearchIndexDefinition,
@@ -98,7 +96,7 @@ async function updateSearchIndex(
   );
 
   await browser.clickVisible(Selectors.SearchIndexConfirmButton);
-  await modal.waitForDisplayed({ reverse: true });
+  await browser.waitForOpenModal(Selectors.SearchIndexModal, { reverse: true });
 }
 
 async function dropSearchIndex(browser: CompassBrowser, indexName: string) {
diff --git a/packages/compass-e2e-tests/tests/shell.test.ts b/packages/compass-e2e-tests/tests/shell.test.ts
index 4704c7bd5ae..7f74c2e2cff 100644
--- a/packages/compass-e2e-tests/tests/shell.test.ts
+++ b/packages/compass-e2e-tests/tests/shell.test.ts
@@ -53,11 +53,10 @@ describe('Shell', function () {
     await browser.openShell(DEFAULT_CONNECTION_NAME_1);
     await browser.clickVisible(Selectors.ShellInfoButton);
 
-    const infoModalElement = browser.$(Selectors.ShellInfoModal);
-    await infoModalElement.waitForDisplayed();
+    await browser.waitForOpenModal(Selectors.ShellInfoModal);
 
     await browser.clickVisible(Selectors.ShellInfoModalCloseButton);
-    await infoModalElement.waitForDisplayed({ reverse: true });
+    await browser.waitForOpenModal(Selectors.ShellInfoModal, { reverse: true });
 
     await browser.closeShell(DEFAULT_CONNECTION_NAME_1);
   });
@@ -73,15 +72,13 @@ describe('Shell', function () {
     ).to.be.equal(true);
 
     await browser.openSettingsModal();
-    const settingsModal = browser.$(Selectors.SettingsModal);
-    await settingsModal.waitForDisplayed();
     await browser.clickVisible(Selectors.GeneralSettingsButton);
 
     await browser.clickParent(Selectors.SettingsInputElement('enableShell'));
     await browser.clickVisible(Selectors.SaveSettingsButton);
 
     // wait for the modal to go away
-    await settingsModal.waitForDisplayed({ reverse: true });
+    await browser.waitForOpenModal(Selectors.SettingsModal, { reverse: true });
 
     expect(
       await browser.hasConnectionMenuItem(
diff --git a/packages/compass-e2e-tests/tests/tabs.test.ts b/packages/compass-e2e-tests/tests/tabs.test.ts
index b4d2357abc3..08264f5ea17 100644
--- a/packages/compass-e2e-tests/tests/tabs.test.ts
+++ b/packages/compass-e2e-tests/tests/tabs.test.ts
@@ -114,14 +114,14 @@ describe('Global Tabs', function () {
       })
     );
     await browser.clickVisible(Selectors.CloseWorkspaceTab);
-    await browser.$(Selectors.ConfirmTabCloseModal).waitForDisplayed();
+    await browser.waitForOpenModal(Selectors.ConfirmTabCloseModal);
 
     await browser.clickVisible(
       browser.$(Selectors.ConfirmTabCloseModal).$('button=Cancel')
     );
-    await browser
-      .$(Selectors.ConfirmTabCloseModal)
-      .waitForDisplayed({ reverse: true });
+    await browser.waitForOpenModal(Selectors.ConfirmTabCloseModal, {
+      reverse: true,
+    });
 
     // Checking first that cancel leaves the tab on the screen
     expect(await browser.$$(Selectors.workspaceTab()).length).to.equal(1);
@@ -133,14 +133,14 @@ describe('Global Tabs', function () {
       })
     );
     await browser.clickVisible(Selectors.CloseWorkspaceTab);
-    await browser.$(Selectors.ConfirmTabCloseModal).waitForDisplayed();
+    await browser.waitForOpenModal(Selectors.ConfirmTabCloseModal);
 
     await browser.clickVisible(
       browser.$(Selectors.ConfirmTabCloseModal).$('button=Close tab')
     );
-    await browser
-      .$(Selectors.ConfirmTabCloseModal)
-      .waitForDisplayed({ reverse: true });
+    await browser.waitForOpenModal(Selectors.ConfirmTabCloseModal, {
+      reverse: true,
+    });
 
     // When confirmed, should remove the tab
     expect(await browser.$$(Selectors.workspaceTab()).length).to.equal(0);

From f83979384994498e51cdc230cb7e45087386f223 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kr=C3=A6n=20Hansen?= <kraen.hansen@mongodb.com>
Date: Wed, 12 Nov 2025 09:03:32 +0100
Subject: [PATCH 28/42] Default initialFocus to "null" to avoid breaking
 existing modals

---
 packages/compass-components/src/components/modals/modal.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/compass-components/src/components/modals/modal.tsx b/packages/compass-components/src/components/modals/modal.tsx
index d611203ea01..ac75eb2ca60 100644
--- a/packages/compass-components/src/components/modals/modal.tsx
+++ b/packages/compass-components/src/components/modals/modal.tsx
@@ -39,6 +39,8 @@ function UnwrappedModal({
       className={cx(styles, className, {
         [fullScreenStyles]: fullScreen && props.open,
       })}
+      /* For now, we're defaulting to not auto-focus the first focusable element */
+      initialFocus={null}
       {...props}
     >
       <Body as="div">{children}</Body>

From cf032a16b49483e1607fd7a3c8c54f4721ea9090 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kr=C3=A6n=20Hansen?= <kraen.hansen@mongodb.com>
Date: Mon, 17 Nov 2025 11:53:35 +0100
Subject: [PATCH 29/42] Wait for confirm button to show instead of simply
 expecting it

---
 .../helpers/commands/try-to-insert-document.ts                  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/compass-e2e-tests/helpers/commands/try-to-insert-document.ts b/packages/compass-e2e-tests/helpers/commands/try-to-insert-document.ts
index 1e9d273b39e..bb5a90201cd 100644
--- a/packages/compass-e2e-tests/helpers/commands/try-to-insert-document.ts
+++ b/packages/compass-e2e-tests/helpers/commands/try-to-insert-document.ts
@@ -26,7 +26,7 @@ export async function tryToInsertDocument(
   // confirm
   const insertConfirm = browser.$(Selectors.InsertConfirm);
   // this selector is very brittle, so just make sure it works
-  expect(await insertConfirm.isDisplayed()).to.be.true;
+  await insertConfirm.waitForDisplayed();
   expect(await insertConfirm.getText()).to.equal('Insert');
   await insertConfirm.waitForEnabled();
   await browser.clickVisible(Selectors.InsertConfirm);

From bb6ff363efdba7a64dd286b5c08a13756355f9b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kr=C3=A6n=20Hansen?= <kraen.hansen@mongodb.com>
Date: Tue, 25 Nov 2025 18:28:16 +0100
Subject: [PATCH 30/42] Update FocusMode tests to handle LG Modal v20

---
 .../src/components/focus-mode/focus-mode.spec.tsx  | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/packages/compass-aggregations/src/components/focus-mode/focus-mode.spec.tsx b/packages/compass-aggregations/src/components/focus-mode/focus-mode.spec.tsx
index 36dd66899d9..cefe8bd0bec 100644
--- a/packages/compass-aggregations/src/components/focus-mode/focus-mode.spec.tsx
+++ b/packages/compass-aggregations/src/components/focus-mode/focus-mode.spec.tsx
@@ -18,12 +18,8 @@ describe('FocusMode', function () {
 
   it('does not show modal when closed', async function () {
     const store = await renderFocusMode();
-    store.dispatch(disableFocusMode() as any);
-    await waitFor(() => {
-      expect(() => {
-        screen.getByTestId('focus-mode-modal');
-      }).to.throw();
-    });
+    store.dispatch(disableFocusMode());
+    expect(screen.getByTestId('focus-mode-modal')).to.be.closed;
   });
 
   it('shows modal when open', async function () {
@@ -36,14 +32,12 @@ describe('FocusMode', function () {
 
   it('hides modal when close button is clicked', async function () {
     const store = await renderFocusMode();
-    store.dispatch(enableFocusMode(0) as any);
+    store.dispatch(enableFocusMode(0));
 
     await waitFor(() => {
       screen.getByLabelText(/close modal/i).click();
     });
 
-    await waitFor(() => {
-      expect(screen.queryByTestId('focus-mode-modal')).to.not.exist;
-    });
+    expect(screen.queryByTestId('focus-mode-modal')).to.be.closed;
   });
 });

From 3799746b228933e14a6b2b73cce48e8602cc2ccd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kr=C3=A6n=20Hansen?= <kraen.hansen@mongodb.com>
Date: Tue, 25 Nov 2025 18:50:22 +0100
Subject: [PATCH 31/42] Update SettingsModal tests to handle LG Modal v20

---
 packages/compass-settings/src/components/modal.spec.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/compass-settings/src/components/modal.spec.tsx b/packages/compass-settings/src/components/modal.spec.tsx
index 092d884facb..b87dc6973a2 100644
--- a/packages/compass-settings/src/components/modal.spec.tsx
+++ b/packages/compass-settings/src/components/modal.spec.tsx
@@ -56,9 +56,7 @@ describe('SettingsModal', function () {
 
   it('renders nothing until it is open and loaded', function () {
     renderSettingsModal({ isOpen: false });
-
-    const container = screen.queryByTestId('settings-modal');
-    expect(container).to.not.exist;
+    expect(screen.getByTestId('settings-modal')).to.be.closed;
   });
 
   it('modal footer actions', async function () {

From 7ca774e1d1d462d3ec5f6f14b1872abccec2a7c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kr=C3=A6n=20Hansen?= <kraen.hansen@mongodb.com>
Date: Wed, 26 Nov 2025 12:05:18 +0100
Subject: [PATCH 32/42] Clarify disabling the @typescript-eslint/no-namespace
 and add a TODO to move the code later

---
 configs/testing-library-compass/src/assertions.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/configs/testing-library-compass/src/assertions.ts b/configs/testing-library-compass/src/assertions.ts
index dd2bc945c90..a90be9b3b22 100644
--- a/configs/testing-library-compass/src/assertions.ts
+++ b/configs/testing-library-compass/src/assertions.ts
@@ -1,7 +1,9 @@
 import { Assertion, util } from 'chai';
 
+// TODO(COMPASS-10119): Move declaration into a separate .d.ts and implementation into a *-register.js file as we do with other global patching code intended for tests.
+
 declare global {
-  // eslint-disable-next-line @typescript-eslint/no-namespace
+  // eslint-disable-next-line @typescript-eslint/no-namespace -- We're following a pattern established in the `@types/chai-as-promised` package to add a Chai assertion property.
   export namespace Chai {
     interface Assertion {
       /** Asserts that a dialog is open */

From de78fecb4c5ecf10c74839dc50f36507c7e3fe4e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kr=C3=A6n=20Hansen?= <kraen.hansen@mongodb.com>
Date: Wed, 26 Nov 2025 20:01:53 +0100
Subject: [PATCH 33/42] Partial revert of
 ddd6d70dd59fbe8f948ea6e5ef80b6d478bc1eff

---
 .../src/components/modals/confirmation-modal.spec.tsx | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/packages/compass-components/src/components/modals/confirmation-modal.spec.tsx b/packages/compass-components/src/components/modals/confirmation-modal.spec.tsx
index 392709a3ab2..fc1a1ed0640 100644
--- a/packages/compass-components/src/components/modals/confirmation-modal.spec.tsx
+++ b/packages/compass-components/src/components/modals/confirmation-modal.spec.tsx
@@ -1,10 +1,5 @@
 import React from 'react';
-import {
-  render,
-  screen,
-  cleanup,
-  within,
-} from '@mongodb-js/testing-library-compass';
+import { render, screen, cleanup } from '@mongodb-js/testing-library-compass';
 import { expect } from 'chai';
 
 import ConfirmationModal from './confirmation-modal';
@@ -28,8 +23,8 @@ describe('ConfirmationModal Component', function () {
   });
 
   it('should show the modal button', function () {
-    const { container } = renderModal();
-    const button = within(container).getByText('Confirm').closest('button');
+    renderModal();
+    const button = screen.getByText('Confirm').closest('button');
     expect(button).to.not.match('disabled');
   });
 

From 920efc6c09ca7ccda1b6a027c0869a114d1b3d7e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kr=C3=A6n=20Hansen?= <kraen.hansen@mongodb.com>
Date: Mon, 1 Dec 2025 16:46:53 +0100
Subject: [PATCH 34/42] Fix auto-focus in bulk update and delete modals

---
 packages/compass-crud/src/components/bulk-delete-modal.tsx | 7 ++++++-
 packages/compass-crud/src/components/bulk-update-modal.tsx | 3 +--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/compass-crud/src/components/bulk-delete-modal.tsx b/packages/compass-crud/src/components/bulk-delete-modal.tsx
index 38ee689798e..741b5f761f3 100644
--- a/packages/compass-crud/src/components/bulk-delete-modal.tsx
+++ b/packages/compass-crud/src/components/bulk-delete-modal.tsx
@@ -94,7 +94,12 @@ const BulkDeleteModal: React.FunctionComponent<BulkDeleteModalProps> = ({
 
   const exportButtonId = useId();
   return (
-    <Modal setOpen={onCancel} open={open} data-testid="bulk-delete-modal">
+    <Modal
+      setOpen={onCancel}
+      open={open}
+      data-testid="bulk-delete-modal"
+      initialFocus={`#${exportButtonId}`}
+    >
       <ModalHeader
         title={`Delete ${documentCount ?? ''} document${
           documentCount === 1 ? '' : 's'
diff --git a/packages/compass-crud/src/components/bulk-update-modal.tsx b/packages/compass-crud/src/components/bulk-update-modal.tsx
index d6f1e68d47e..203aa1bb79d 100644
--- a/packages/compass-crud/src/components/bulk-update-modal.tsx
+++ b/packages/compass-crud/src/components/bulk-update-modal.tsx
@@ -405,6 +405,7 @@ export default function BulkUpdateModal({
       setOpen={closeBulkUpdateModal}
       data-testid="bulk-update-modal"
       className={enablePreview ? modalContentStyles : undefined}
+      initialFocus={`#${bulkUpdateUpdateId} .cm-content`}
     >
       <ModalHeader title={modalTitleAndButtonText} subtitle={ns} />
       <ModalBody>
@@ -439,8 +440,6 @@ export default function BulkUpdateModal({
                   onBlur={() => ({})}
                   annotations={annotations}
                   minLines={12}
-                  // eslint-disable-next-line jsx-a11y/no-autofocus
-                  autoFocus
                 />
 
                 <div className={bannerContainerStyles}>

From 2f732609fe7b2e29f74f908ef9513fdb852de217 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kr=C3=A6n=20Hansen?= <kraen.hansen@mongodb.com>
Date: Tue, 9 Dec 2025 12:06:07 +0100
Subject: [PATCH 35/42] Correcting sizing styles

---
 .../src/components/modals/modal.tsx                   | 11 +++++++----
 .../src/components/connection-form-modal.tsx          |  4 ----
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/packages/compass-components/src/components/modals/modal.tsx b/packages/compass-components/src/components/modals/modal.tsx
index ac75eb2ca60..2d61d1b4ebe 100644
--- a/packages/compass-components/src/components/modals/modal.tsx
+++ b/packages/compass-components/src/components/modals/modal.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
+import { spacing } from '@leafygreen-ui/tokens';
 import { Body, Modal as LeafyGreenModal } from '../leafygreen';
 import { withStackedComponentStyles } from '../../hooks/use-stacked-component';
 
 const styles = css({
-  width: '600px',
   letterSpacing: 0,
   padding: 0,
   // The LG modal applies transform: translate3d(0, 0, 0) style to the modal
@@ -17,9 +17,12 @@ const styles = css({
 });
 
 const fullScreenStyles = css({
-  width: '100%',
-  height: '100%',
-  alignSelf: 'stretch',
+  top: spacing['600'],
+  bottom: spacing['600'],
+  left: spacing['800'],
+  right: spacing['800'],
+  height: 'auto',
+  width: 'auto',
   '& > div': {
     height: '100%',
     maxHeight: '100%',
diff --git a/packages/connection-form/src/components/connection-form-modal.tsx b/packages/connection-form/src/components/connection-form-modal.tsx
index 7287b116557..4282d0edc6a 100644
--- a/packages/connection-form/src/components/connection-form-modal.tsx
+++ b/packages/connection-form/src/components/connection-form-modal.tsx
@@ -7,10 +7,6 @@ import ConnectionForm from './connection-form';
 const styles = css({
   width: '960px',
   maxWidth: '960px',
-
-  display: 'flex',
-  alignItems: 'stretch',
-  justifyContent: 'stretch',
 });
 
 export default function ConnectionFormModal({

From c2e5d468687009d4f03786e82c9f217c75a77c42 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kr=C3=A6n=20Hansen?= <kraen.hansen@mongodb.com>
Date: Tue, 9 Dec 2025 14:53:39 +0100
Subject: [PATCH 36/42] Correcting sizing styles more

---
 .../src/components/modals/modal.tsx           | 20 +++++++++++--------
 .../src/components/bulk-update-modal.tsx      |  2 +-
 .../src/components/connection-form-modal.tsx  |  1 -
 3 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/packages/compass-components/src/components/modals/modal.tsx b/packages/compass-components/src/components/modals/modal.tsx
index 2d61d1b4ebe..98b1c908302 100644
--- a/packages/compass-components/src/components/modals/modal.tsx
+++ b/packages/compass-components/src/components/modals/modal.tsx
@@ -5,6 +5,10 @@ import { Body, Modal as LeafyGreenModal } from '../leafygreen';
 import { withStackedComponentStyles } from '../../hooks/use-stacked-component';
 
 const styles = css({
+  // Force the width and height and margins to never extend the containing element
+  maxHeight: `calc(100vh - 2 * ${spacing['600']}px)`,
+  maxWidth: `calc(100vw - 2 * ${spacing['800']}px)`,
+
   letterSpacing: 0,
   padding: 0,
   // The LG modal applies transform: translate3d(0, 0, 0) style to the modal
@@ -17,12 +21,8 @@ const styles = css({
 });
 
 const fullScreenStyles = css({
-  top: spacing['600'],
-  bottom: spacing['600'],
-  left: spacing['800'],
-  right: spacing['800'],
   height: 'auto',
-  width: 'auto',
+  width: '100%',
   '& > div': {
     height: '100%',
     maxHeight: '100%',
@@ -39,9 +39,13 @@ function UnwrappedModal({
 }): React.ReactElement {
   return (
     <LeafyGreenModal
-      className={cx(styles, className, {
-        [fullScreenStyles]: fullScreen && props.open,
-      })}
+      className={cx(
+        styles,
+        {
+          [fullScreenStyles]: fullScreen && props.open,
+        },
+        className
+      )}
       /* For now, we're defaulting to not auto-focus the first focusable element */
       initialFocus={null}
       {...props}
diff --git a/packages/compass-crud/src/components/bulk-update-modal.tsx b/packages/compass-crud/src/components/bulk-update-modal.tsx
index 203aa1bb79d..bc071bd5bda 100644
--- a/packages/compass-crud/src/components/bulk-update-modal.tsx
+++ b/packages/compass-crud/src/components/bulk-update-modal.tsx
@@ -37,7 +37,7 @@ import { useFavoriteQueryStorageAccess } from '@mongodb-js/my-queries-storage/pr
 
 const modalContentStyles = css({
   width: '100%',
-  maxWidth: '1280px',
+  maxWidth: `calc(min(100vw, 1280px) - 2 * ${spacing['800']}px)`,
 });
 
 const columnsStyles = css({
diff --git a/packages/connection-form/src/components/connection-form-modal.tsx b/packages/connection-form/src/components/connection-form-modal.tsx
index 4282d0edc6a..5030b47c115 100644
--- a/packages/connection-form/src/components/connection-form-modal.tsx
+++ b/packages/connection-form/src/components/connection-form-modal.tsx
@@ -6,7 +6,6 @@ import ConnectionForm from './connection-form';
 
 const styles = css({
   width: '960px',
-  maxWidth: '960px',
 });
 
 export default function ConnectionFormModal({

From 9646d875e3c11f0aaeb4d01e4faf4f0892079126 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kr=C3=A6n=20Hansen?= <kraen.hansen@mongodb.com>
Date: Thu, 18 Dec 2025 12:05:51 +0100
Subject: [PATCH 37/42] Use named imports

---
 packages/compass-components/src/components/leafygreen.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/compass-components/src/components/leafygreen.tsx b/packages/compass-components/src/components/leafygreen.tsx
index 38d1c9870ba..3809a430d2f 100644
--- a/packages/compass-components/src/components/leafygreen.tsx
+++ b/packages/compass-components/src/components/leafygreen.tsx
@@ -9,7 +9,7 @@ import { default as Banner } from '@leafygreen-ui/banner';
 import { Checkbox } from '@leafygreen-ui/checkbox';
 import { Card } from '@leafygreen-ui/card';
 import { Code, Language, Panel } from '@leafygreen-ui/code';
-import ConfirmationModal from '@leafygreen-ui/confirmation-modal';
+import { ConfirmationModal } from '@leafygreen-ui/confirmation-modal';
 export type { ConfirmationModalProps } from '@leafygreen-ui/confirmation-modal';
 import { Icon as LeafyGreenIcon } from '@leafygreen-ui/icon';
 import type { Size as LeafyGreenIconSize } from '@leafygreen-ui/icon';
@@ -33,8 +33,8 @@ import { ProgressBar } from '@leafygreen-ui/progress-bar';
   type: 'button',
 };
 
-import Modal, { Footer as ModalFooter } from '@leafygreen-ui/modal';
-import MarketingModal from '@leafygreen-ui/marketing-modal';
+import { Modal, Footer as ModalFooter } from '@leafygreen-ui/modal';
+import { MarketingModal } from '@leafygreen-ui/marketing-modal';
 import { Pipeline, Stage } from '@leafygreen-ui/pipeline';
 import { Popover } from '@leafygreen-ui/popover';
 import { RadioBox, RadioBoxGroup } from '@leafygreen-ui/radio-box-group';

From d43fc16799741e7bb9972cafc268a575fb436cff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kr=C3=A6n=20Hansen?= <kraen.hansen@mongodb.com>
Date: Thu, 18 Dec 2025 12:51:41 +0100
Subject: [PATCH 38/42] Upgrade confirm-modal package

---
 package-lock.json                        | 18 +++++++++---------
 package.json                             |  2 +-
 packages/compass-components/package.json |  2 +-
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1ddbab084b0..ff2244bf1d5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6932,9 +6932,9 @@
       }
     },
     "node_modules/@leafygreen-ui/confirmation-modal": {
-      "version": "10.2.4",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/confirmation-modal/-/confirmation-modal-10.2.4.tgz",
-      "integrity": "sha512-xoCSjYIMxg97tIHEXjUchcBJ0/6Dsswl1iMemsJY6lUmqZdV4HVrfcJSS3ylziAN+cKBK8JH/wwL64FcM0e4RA==",
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/confirmation-modal/-/confirmation-modal-10.3.0.tgz",
+      "integrity": "sha512-8TdX2p8uq/cUfCMgGpq8KhJuj60GzxILhQ95pdNwd7Z3E6vpRt7QFaJbPE/r03ZljwVdXkql1DcQgmJ3fSUALg==",
       "license": "Apache-2.0",
       "dependencies": {
         "@leafygreen-ui/button": "^25.1.3",
@@ -6944,7 +6944,7 @@
         "@leafygreen-ui/modal": "^21.0.0",
         "@leafygreen-ui/palette": "^5.0.2",
         "@leafygreen-ui/text-input": "^16.2.2",
-        "@leafygreen-ui/tokens": "^4.1.0",
+        "@leafygreen-ui/tokens": "^4.2.0",
         "@leafygreen-ui/typography": "^22.2.3"
       },
       "peerDependencies": {
@@ -47944,7 +47944,7 @@
         "@leafygreen-ui/chip": "^4.0.9",
         "@leafygreen-ui/code": "^20.2.3",
         "@leafygreen-ui/combobox": "^12.2.1",
-        "@leafygreen-ui/confirmation-modal": "^10.2.4",
+        "@leafygreen-ui/confirmation-modal": "^10.3.0",
         "@leafygreen-ui/copyable": "^12.0.1",
         "@leafygreen-ui/drawer": "^5.1.3",
         "@leafygreen-ui/emotion": "^5.1.0",
@@ -58653,9 +58653,9 @@
       }
     },
     "@leafygreen-ui/confirmation-modal": {
-      "version": "10.2.4",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/confirmation-modal/-/confirmation-modal-10.2.4.tgz",
-      "integrity": "sha512-xoCSjYIMxg97tIHEXjUchcBJ0/6Dsswl1iMemsJY6lUmqZdV4HVrfcJSS3ylziAN+cKBK8JH/wwL64FcM0e4RA==",
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/confirmation-modal/-/confirmation-modal-10.3.0.tgz",
+      "integrity": "sha512-8TdX2p8uq/cUfCMgGpq8KhJuj60GzxILhQ95pdNwd7Z3E6vpRt7QFaJbPE/r03ZljwVdXkql1DcQgmJ3fSUALg==",
       "requires": {
         "@leafygreen-ui/button": "^25.1.3",
         "@leafygreen-ui/emotion": "^5.1.0",
@@ -61408,7 +61408,7 @@
         "@leafygreen-ui/chip": "^4.0.9",
         "@leafygreen-ui/code": "^20.2.3",
         "@leafygreen-ui/combobox": "^12.2.1",
-        "@leafygreen-ui/confirmation-modal": "^10.2.4",
+        "@leafygreen-ui/confirmation-modal": "^10.3.0",
         "@leafygreen-ui/copyable": "^12.0.1",
         "@leafygreen-ui/drawer": "^5.1.3",
         "@leafygreen-ui/emotion": "^5.1.0",
diff --git a/package.json b/package.json
index b91e7a2957e..83d32a99cae 100644
--- a/package.json
+++ b/package.json
@@ -112,7 +112,7 @@
       "eslint-plugin-react-hooks": "^7.0.1"
     },
     "@leafygreen-ui/button": "^25.1.3",
-    "@leafygreen-ui/confirmation-modal": "^10.2.4",
+    "@leafygreen-ui/confirmation-modal": "^10.3.0",
     "@leafygreen-ui/form-field": "^4.0.7",
     "@leafygreen-ui/leafygreen-provider": "^5.0.4",
     "@leafygreen-ui/marketing-modal": "^8.1.7",
diff --git a/packages/compass-components/package.json b/packages/compass-components/package.json
index 7658a2280b2..84b9ef95af8 100644
--- a/packages/compass-components/package.json
+++ b/packages/compass-components/package.json
@@ -44,7 +44,7 @@
     "@leafygreen-ui/chip": "^4.0.9",
     "@leafygreen-ui/code": "^20.2.3",
     "@leafygreen-ui/combobox": "^12.2.1",
-    "@leafygreen-ui/confirmation-modal": "^10.2.4",
+    "@leafygreen-ui/confirmation-modal": "^10.3.0",
     "@leafygreen-ui/copyable": "^12.0.1",
     "@leafygreen-ui/drawer": "^5.1.3",
     "@leafygreen-ui/emotion": "^5.1.0",

From dbe7574fbdbbab32c7fa0beec96e22a2304423db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kr=C3=A6n=20Hansen?= <kraen.hansen@mongodb.com>
Date: Thu, 18 Dec 2025 12:52:23 +0100
Subject: [PATCH 39/42] Fix useConfirmation's confirmButtonProps types

---
 .../compass-components/src/hooks/use-confirmation.tsx     | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/compass-components/src/hooks/use-confirmation.tsx b/packages/compass-components/src/hooks/use-confirmation.tsx
index 188d3c42788..6dbcfbfa218 100644
--- a/packages/compass-components/src/hooks/use-confirmation.tsx
+++ b/packages/compass-components/src/hooks/use-confirmation.tsx
@@ -8,7 +8,6 @@ import React, {
 import { Variant as ConfirmationModalVariant } from '@leafygreen-ui/confirmation-modal';
 import ConfirmationModal from '../components/modals/confirmation-modal';
 import { css } from '@leafygreen-ui/emotion';
-import type { ButtonProps } from '@leafygreen-ui/button';
 import FormFieldContainer from '../components/form-field-container';
 import { Banner, TextInput } from '../components/leafygreen';
 import { spacing } from '@leafygreen-ui/tokens';
@@ -21,11 +20,14 @@ type ConfirmationModalProps = React.ComponentProps<typeof ConfirmationModal>;
 type ConfirmationProperties = Partial<
   Pick<
     ConfirmationModalProps,
-    'title' | 'variant' | 'requiredInputText' | 'initialFocus'
+    | 'title'
+    | 'variant'
+    | 'requiredInputText'
+    | 'initialFocus'
+    | 'confirmButtonProps'
   >
 > & {
   buttonText?: React.ReactNode;
-  confirmButtonProps?: Omit<ButtonProps, 'onClick'>;
   hideConfirmButton?: boolean;
   hideCancelButton?: boolean;
   description?: React.ReactNode;

From 9767e4f845aacc636356b590255d9261217c923c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kr=C3=A6n=20Hansen?= <kraen.hansen@mongodb.com>
Date: Thu, 18 Dec 2025 13:16:31 +0100
Subject: [PATCH 40/42] Update use of ConfirmationModal

---
 packages/compass-components/src/components/leafygreen.tsx | 6 +++++-
 .../compass-components/src/hooks/use-error-details.tsx    | 8 ++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/compass-components/src/components/leafygreen.tsx b/packages/compass-components/src/components/leafygreen.tsx
index 3809a430d2f..e2bc2814656 100644
--- a/packages/compass-components/src/components/leafygreen.tsx
+++ b/packages/compass-components/src/components/leafygreen.tsx
@@ -9,7 +9,10 @@ import { default as Banner } from '@leafygreen-ui/banner';
 import { Checkbox } from '@leafygreen-ui/checkbox';
 import { Card } from '@leafygreen-ui/card';
 import { Code, Language, Panel } from '@leafygreen-ui/code';
-import { ConfirmationModal } from '@leafygreen-ui/confirmation-modal';
+import {
+  ConfirmationModal,
+  Variant as ConfirmationModalVariant,
+} from '@leafygreen-ui/confirmation-modal';
 export type { ConfirmationModalProps } from '@leafygreen-ui/confirmation-modal';
 import { Icon as LeafyGreenIcon } from '@leafygreen-ui/icon';
 import type { Size as LeafyGreenIconSize } from '@leafygreen-ui/icon';
@@ -132,6 +135,7 @@ export {
   Code,
   Panel,
   ConfirmationModal,
+  ConfirmationModalVariant,
   Copyable,
   ExpandedContent,
   HeaderCell,
diff --git a/packages/compass-components/src/hooks/use-error-details.tsx b/packages/compass-components/src/hooks/use-error-details.tsx
index a44d590a910..238f76fc509 100644
--- a/packages/compass-components/src/hooks/use-error-details.tsx
+++ b/packages/compass-components/src/hooks/use-error-details.tsx
@@ -1,7 +1,6 @@
 import { showConfirmation } from './use-confirmation';
-import { Code } from '../components/leafygreen';
+import { Code, ConfirmationModalVariant } from '../components/leafygreen';
 import React from 'react';
-import { ButtonVariant } from '..';
 
 export const showErrorDetails = function showErrorDetails({
   details,
@@ -23,9 +22,6 @@ export const showErrorDetails = function showErrorDetails({
     ),
     hideCancelButton: true,
     buttonText: closeAction.replace(/\b\w/g, (c) => c.toUpperCase()),
-    confirmButtonProps: {
-      variant: ButtonVariant.Default,
-    },
-    initialFocus: '[data-testid=lg-confirmation_modal-footer-confirm_button]',
+    variant: ConfirmationModalVariant.Default,
   });
 };

From 564fc1e11311c9aa9179cf2498e68e48672b636d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kr=C3=A6n=20Hansen?= <kraen.hansen@mongodb.com>
Date: Thu, 18 Dec 2025 13:17:00 +0100
Subject: [PATCH 41/42] Set initial focus on cancel (fallback to confirm)
 button

---
 packages/compass-components/src/hooks/use-confirmation.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/compass-components/src/hooks/use-confirmation.tsx b/packages/compass-components/src/hooks/use-confirmation.tsx
index 6dbcfbfa218..c6ef0f325e0 100644
--- a/packages/compass-components/src/hooks/use-confirmation.tsx
+++ b/packages/compass-components/src/hooks/use-confirmation.tsx
@@ -12,6 +12,7 @@ import FormFieldContainer from '../components/form-field-container';
 import { Banner, TextInput } from '../components/leafygreen';
 import { spacing } from '@leafygreen-ui/tokens';
 import { useInitialValue } from './use-initial-value';
+import { useId } from '@react-aria/utils';
 
 export { ConfirmationModalVariant };
 
@@ -174,6 +175,8 @@ const ConfirmationModalStateHandler: React.FunctionComponent = ({
     onUserAction(false);
   }, [onUserAction]);
 
+  const initialFocusId = useId();
+
   return (
     <>
       {children}
@@ -188,6 +191,7 @@ const ConfirmationModalStateHandler: React.FunctionComponent = ({
         title={confirmationProps.title ?? 'Are you sure?'}
         variant={confirmationProps.variant ?? ConfirmationModalVariant.Default}
         confirmButtonProps={{
+          id: confirmationProps.hideCancelButton ? initialFocusId : undefined,
           className: confirmationProps.hideConfirmButton
             ? hideButtonStyles
             : undefined,
@@ -196,6 +200,7 @@ const ConfirmationModalStateHandler: React.FunctionComponent = ({
           ...confirmationProps.confirmButtonProps,
         }}
         cancelButtonProps={{
+          id: !confirmationProps.hideCancelButton ? initialFocusId : undefined,
           className: confirmationProps.hideCancelButton
             ? hideButtonStyles
             : undefined,
@@ -207,7 +212,7 @@ const ConfirmationModalStateHandler: React.FunctionComponent = ({
           (confirmationProps.requiredInputText
             ? 'auto'
             : // TODO: Update this once https://jira.mongodb.org/browse/LG-5735 gets resolved
-              '[data-testid=lg-confirmation_modal-footer-cancel_button]')
+              `#${initialFocusId}`)
         }
       >
         {confirmationProps.description}

From 6fa377da36c8886eb6e85207e077a714aad6eeed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kr=C3=A6n=20Hansen?= <kraen.hansen@mongodb.com>
Date: Thu, 18 Dec 2025 13:38:11 +0100
Subject: [PATCH 42/42] Fix package lock

---
 package-lock.json                        | 58 ++++++++++++------------
 packages/compass-components/package.json |  2 +-
 2 files changed, 31 insertions(+), 29 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ff2244bf1d5..2acd978fc8b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6749,17 +6749,18 @@
       }
     },
     "node_modules/@leafygreen-ui/avatar": {
-      "version": "3.1.6",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/avatar/-/avatar-3.1.6.tgz",
-      "integrity": "sha512-OOvVraABcH060IzVwd5zHyHTzoYmYiBhQipb148KG9EDoHaxf9HL1OtMciNrh0eKCZafmCYXxF9g7MCJTgHyvw==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/avatar/-/avatar-3.2.0.tgz",
+      "integrity": "sha512-MK2yibHUJj47KatctC7n0FWFoLUlErv2GPbzsCuKw8sNKUDcSDe6F3HIKhVGdMmuk4ylQMTYSHEwA1Q/rkjjMA==",
       "license": "Apache-2.0",
       "dependencies": {
         "@leafygreen-ui/emotion": "^5.1.0",
+        "@leafygreen-ui/hooks": "^9.3.0",
         "@leafygreen-ui/icon": "^14.7.1",
-        "@leafygreen-ui/lib": "^15.6.2",
+        "@leafygreen-ui/lib": "^15.7.0",
         "@leafygreen-ui/logo": "^11.1.0",
         "@leafygreen-ui/palette": "^5.0.2",
-        "@leafygreen-ui/tokens": "^4.1.0",
+        "@leafygreen-ui/tokens": "^4.2.0",
         "lodash": "^4.17.21"
       },
       "peerDependencies": {
@@ -6872,9 +6873,9 @@
       }
     },
     "node_modules/@leafygreen-ui/code": {
-      "version": "20.2.4",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/code/-/code-20.2.4.tgz",
-      "integrity": "sha512-qoqEmBoZa/Y/DOTconrkyfTDXgHfCiBQccWBLixYCtBPSsC5MQfAgoe5mTSP5dhNfW5RtjjPkZaezAiSmnayhA==",
+      "version": "20.2.5",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/code/-/code-20.2.5.tgz",
+      "integrity": "sha512-/gX0OKgO1HKIkIwsiXIlmxio5pVltTuz/LDmedNnNd5ZLJO2ZAsfK2JKHis4pxwfZHhtE+Ootq3jvMygbXbOwg==",
       "license": "Apache-2.0",
       "dependencies": {
         "@leafygreen-ui/a11y": "^3.0.5",
@@ -9266,12 +9267,12 @@
       }
     },
     "node_modules/@lg-chat/input-bar": {
-      "version": "12.1.0",
-      "resolved": "https://registry.npmjs.org/@lg-chat/input-bar/-/input-bar-12.1.0.tgz",
-      "integrity": "sha512-B6IvFe6mafd6TXoq1bCfZssp6b2yx/JOlClF8ygGYhX1oMl8zb25JaR8H84ldhQ9b1Y4PiK8hmtQKH1VP+nl/w==",
+      "version": "12.1.1",
+      "resolved": "https://registry.npmjs.org/@lg-chat/input-bar/-/input-bar-12.1.1.tgz",
+      "integrity": "sha512-zVKHt7tiihzc0OYugh9nb3+4AY44CqP/QM2loVNZ3tID6HEb8VZYfujoJKWK6vOPT4KBMajiJEvHvXsO+dkRbw==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@leafygreen-ui/avatar": "^3.1.6",
+        "@leafygreen-ui/avatar": "^3.2.0",
         "@leafygreen-ui/banner": "^10.2.4",
         "@leafygreen-ui/button": "^25.1.3",
         "@leafygreen-ui/emotion": "^5.1.0",
@@ -9279,12 +9280,12 @@
         "@leafygreen-ui/icon": "^14.7.1",
         "@leafygreen-ui/icon-button": "^17.1.4",
         "@leafygreen-ui/input-option": "^4.1.4",
-        "@leafygreen-ui/lib": "^15.6.2",
+        "@leafygreen-ui/lib": "^15.7.0",
         "@leafygreen-ui/palette": "^5.0.2",
         "@leafygreen-ui/polymorphic": "^3.1.0",
         "@leafygreen-ui/popover": "^14.3.1",
         "@leafygreen-ui/search-input": "^6.1.2",
-        "@leafygreen-ui/tokens": "^4.1.0",
+        "@leafygreen-ui/tokens": "^4.2.0",
         "@leafygreen-ui/typography": "^22.2.3",
         "lodash": "^4.17.21",
         "react-keyed-flatten-children": "^1.3.0",
@@ -47942,7 +47943,7 @@
         "@leafygreen-ui/card": "^13.2.1",
         "@leafygreen-ui/checkbox": "^18.1.3",
         "@leafygreen-ui/chip": "^4.0.9",
-        "@leafygreen-ui/code": "^20.2.3",
+        "@leafygreen-ui/code": "^20.2.5",
         "@leafygreen-ui/combobox": "^12.2.1",
         "@leafygreen-ui/confirmation-modal": "^10.3.0",
         "@leafygreen-ui/copyable": "^12.0.1",
@@ -58506,13 +58507,14 @@
       }
     },
     "@leafygreen-ui/avatar": {
-      "version": "3.1.6",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/avatar/-/avatar-3.1.6.tgz",
-      "integrity": "sha512-OOvVraABcH060IzVwd5zHyHTzoYmYiBhQipb148KG9EDoHaxf9HL1OtMciNrh0eKCZafmCYXxF9g7MCJTgHyvw==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/avatar/-/avatar-3.2.0.tgz",
+      "integrity": "sha512-MK2yibHUJj47KatctC7n0FWFoLUlErv2GPbzsCuKw8sNKUDcSDe6F3HIKhVGdMmuk4ylQMTYSHEwA1Q/rkjjMA==",
       "requires": {
         "@leafygreen-ui/emotion": "^5.1.0",
+        "@leafygreen-ui/hooks": "^9.3.0",
         "@leafygreen-ui/icon": "^14.7.1",
-        "@leafygreen-ui/lib": "^15.6.2",
+        "@leafygreen-ui/lib": "^15.7.0",
         "@leafygreen-ui/logo": "^11.1.0",
         "@leafygreen-ui/palette": "^5.0.2",
         "@leafygreen-ui/tokens": "^4.1.0",
@@ -58601,9 +58603,9 @@
       }
     },
     "@leafygreen-ui/code": {
-      "version": "20.2.4",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/code/-/code-20.2.4.tgz",
-      "integrity": "sha512-qoqEmBoZa/Y/DOTconrkyfTDXgHfCiBQccWBLixYCtBPSsC5MQfAgoe5mTSP5dhNfW5RtjjPkZaezAiSmnayhA==",
+      "version": "20.2.5",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/code/-/code-20.2.5.tgz",
+      "integrity": "sha512-/gX0OKgO1HKIkIwsiXIlmxio5pVltTuz/LDmedNnNd5ZLJO2ZAsfK2JKHis4pxwfZHhtE+Ootq3jvMygbXbOwg==",
       "requires": {
         "@leafygreen-ui/a11y": "^3.0.5",
         "@leafygreen-ui/button": "^25.1.3",
@@ -60514,11 +60516,11 @@
       }
     },
     "@lg-chat/input-bar": {
-      "version": "12.1.0",
-      "resolved": "https://registry.npmjs.org/@lg-chat/input-bar/-/input-bar-12.1.0.tgz",
-      "integrity": "sha512-B6IvFe6mafd6TXoq1bCfZssp6b2yx/JOlClF8ygGYhX1oMl8zb25JaR8H84ldhQ9b1Y4PiK8hmtQKH1VP+nl/w==",
+      "version": "12.1.1",
+      "resolved": "https://registry.npmjs.org/@lg-chat/input-bar/-/input-bar-12.1.1.tgz",
+      "integrity": "sha512-zVKHt7tiihzc0OYugh9nb3+4AY44CqP/QM2loVNZ3tID6HEb8VZYfujoJKWK6vOPT4KBMajiJEvHvXsO+dkRbw==",
       "requires": {
-        "@leafygreen-ui/avatar": "^3.1.6",
+        "@leafygreen-ui/avatar": "^3.2.0",
         "@leafygreen-ui/banner": "^10.2.4",
         "@leafygreen-ui/button": "^25.1.3",
         "@leafygreen-ui/emotion": "^5.1.0",
@@ -60526,7 +60528,7 @@
         "@leafygreen-ui/icon": "^14.7.1",
         "@leafygreen-ui/icon-button": "^17.1.4",
         "@leafygreen-ui/input-option": "^4.1.4",
-        "@leafygreen-ui/lib": "^15.6.2",
+        "@leafygreen-ui/lib": "^15.7.0",
         "@leafygreen-ui/palette": "^5.0.2",
         "@leafygreen-ui/polymorphic": "^3.1.0",
         "@leafygreen-ui/popover": "^14.3.1",
@@ -61406,7 +61408,7 @@
         "@leafygreen-ui/card": "^13.2.1",
         "@leafygreen-ui/checkbox": "^18.1.3",
         "@leafygreen-ui/chip": "^4.0.9",
-        "@leafygreen-ui/code": "^20.2.3",
+        "@leafygreen-ui/code": "^20.2.5",
         "@leafygreen-ui/combobox": "^12.2.1",
         "@leafygreen-ui/confirmation-modal": "^10.3.0",
         "@leafygreen-ui/copyable": "^12.0.1",
diff --git a/packages/compass-components/package.json b/packages/compass-components/package.json
index 84b9ef95af8..eda61f5f255 100644
--- a/packages/compass-components/package.json
+++ b/packages/compass-components/package.json
@@ -42,7 +42,7 @@
     "@leafygreen-ui/card": "^13.2.1",
     "@leafygreen-ui/checkbox": "^18.1.3",
     "@leafygreen-ui/chip": "^4.0.9",
-    "@leafygreen-ui/code": "^20.2.3",
+    "@leafygreen-ui/code": "^20.2.5",
     "@leafygreen-ui/combobox": "^12.2.1",
     "@leafygreen-ui/confirmation-modal": "^10.3.0",
     "@leafygreen-ui/copyable": "^12.0.1",