Update test snapshots to use scoped class names

src/__snapshots__/AppBar.test.tsx.snap

@@ -3,12 +3,12 @@
 exports[`AppBar > renders 1`] = `
 <div>
   <div
-    class="bar"
+    class="_bar_221541"
   >
     <header>
       <button
         aria-labelledby="_r_0_"
-        class="_icon-button_1215g_8 primaryButton"
+        class="_icon-button_1215g_8 _primaryButton_221541"
         data-kind="primary"
         role="button"
         style="--cpd-icon-button-size: 24px;"
@@ -33,7 +33,7 @@ exports[`AppBar > renders 1`] = `
         </div>
       </button>
       <div
-        class="secondaryButton"
+        class="_secondaryButton_221541"
       />
     </header>
   </div>
@@ -46,12 +46,12 @@ exports[`AppBar > renders 1`] = `
 exports[`AppBar > renders with title and subtitle 1`] = `
 <div>
   <div
-    class="bar"
+    class="_bar_221541"
   >
     <header>
       <button
         aria-labelledby="_r_6_"
-        class="_icon-button_1215g_8 primaryButton"
+        class="_icon-button_1215g_8 _primaryButton_221541"
         data-kind="primary"
         role="button"
         style="--cpd-icon-button-size: 24px;"
@@ -76,17 +76,17 @@ exports[`AppBar > renders with title and subtitle 1`] = `
         </div>
       </button>
       <h1
-        class="_typography_6v6n8_153 _font-body-lg-medium_6v6n8_79 title"
+        class="_typography_6v6n8_153 _font-body-lg-medium_6v6n8_79 _title_221541"
       >
         Title
       </h1>
       <span
-        class="_typography_6v6n8_153 _font-body-lg-regular_6v6n8_69 subtitle"
+        class="_typography_6v6n8_153 _font-body-lg-regular_6v6n8_69 _subtitle_221541"
       >
         Subtitle
       </span>
       <div
-        class="secondaryButton"
+        class="_secondaryButton_221541"
       />
     </header>
   </div>

src/__snapshots__/Modal.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`the content is rendered when the modal is open 1`] = `
 <div
   aria-labelledby="radix-_r_4_"
-  class="overlay animate modal dialog _glass_sepwu_8"
+  class="_overlay_2f5303 _animate_2f5303 _modal_dbeffe _dialog_dbeffe _glass_sepwu_8"
   data-state="open"
   id="radix-_r_3_"
   role="dialog"
@@ -11,10 +11,10 @@ exports[`the content is rendered when the modal is open 1`] = `
   tabindex="-1"
 >
   <div
-    class="content"
+    class="_content_dbeffe"
   >
     <div
-      class="header"
+      class="_header_dbeffe"
     >
       <h2
         class="_typography_6v6n8_153 _font-heading-md-semibold_6v6n8_112"
@@ -24,7 +24,7 @@ exports[`the content is rendered when the modal is open 1`] = `
       </h2>
     </div>
     <div
-      class="body"
+      class="_body_dbeffe"
     >
       <p>
         This is the content.
@@ -37,7 +37,7 @@ exports[`the content is rendered when the modal is open 1`] = `
 exports[`the modal renders as a drawer in mobile viewports 1`] = `
 <div
   aria-labelledby="radix-_r_a_"
-  class="overlay modal drawer"
+  class="_overlay_2f5303 _modal_dbeffe _drawer_dbeffe"
   data-state="open"
   data-vaul-animate="true"
   data-vaul-custom-container="false"
@@ -51,13 +51,13 @@ exports[`the modal renders as a drawer in mobile viewports 1`] = `
   tabindex="-1"
 >
   <div
-    class="content"
+    class="_content_dbeffe"
   >
     <div
-      class="header"
+      class="_header_dbeffe"
     >
       <div
-        class="handle"
+        class="_handle_dbeffe"
       />
       <h2
         id="radix-_r_a_"
@@ -67,7 +67,7 @@ exports[`the modal renders as a drawer in mobile viewports 1`] = `
       </h2>
     </div>
     <div
-      class="body"
+      class="_body_dbeffe"
     >
       <p>
         This is the content.

src/__snapshots__/QrCode.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`QrCode > renders 1`] = `
 <div
-  class="qrCode bar"
+  class="_qrCode_458264 bar"
 >
   <img
     alt="QR Code"

src/__snapshots__/Toast.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Toast > renders 1`] = `
 <button
   aria-labelledby="radix-_r_4_"
-  class="overlay animate toast"
+  class="_overlay_2f5303 _animate_2f5303 _toast_15a045"
   data-state="open"
   id="radix-_r_3_"
   role="dialog"