From 0c52a528b16fa15a468363d384d3c27103f03451 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Thu, 1 Dec 2022 18:26:10 +0000
Subject: [PATCH] fix(tests): update snapshots

---
 ...rtGroupCollapseConfiguration.test.tsx.snap | 12 +--
 .../AlertGroupSortConfiguration.test.tsx.snap | 12 +--
 .../MultiGridConfiguration.test.tsx.snap      | 12 +--
 .../ThemeConfiguration.test.tsx.snap          | 12 +--
 .../__snapshots__/index.test.tsx.snap         | 48 ++++++------
 .../MainModalContent.test.tsx.snap            | 48 ++++++------
 .../__snapshots__/index.test.tsx.snap         | 24 +++---
 .../AlertManagerInput/index.test.tsx          |  8 +-
 .../SilenceMatch/LabelValueInput.test.tsx     |  4 +-
 .../LabelNameInput.test.tsx.snap              | 12 +--
 .../LabelValueInput.test.tsx.snap             | 24 +++---
 .../__snapshots__/ReactSelect.test.tsx.snap   | 78 +++++++++----------
 12 files changed, 147 insertions(+), 147 deletions(-)

diff --git a/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupCollapseConfiguration.test.tsx.snap b/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupCollapseConfiguration.test.tsx.snap
index 1c288ed65..d9b99c222 100644
--- a/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupCollapseConfiguration.test.tsx.snap
+++ b/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupCollapseConfiguration.test.tsx.snap
@@ -16,13 +16,13 @@ exports[`<AlertGroupCollapseConfiguration /> matches snapshot with default value
       class=\\"css-1f43avz-a11yText-A11yText\\"
     >
     </span>
-    <div class=\\"react-select__control css-n90zkc-control\\">
-      <div class=\\"react-select__value-container react-select__value-container--has-value css-1kabp7a-ValueContainer\\">
-        <div class=\\"react-select__single-value css-bgy71k-singleValue\\">
+    <div class=\\"react-select__control css-18hiu1u-control\\">
+      <div class=\\"react-select__value-container react-select__value-container--has-value css-1a3grgz-ValueContainer\\">
+        <div class=\\"react-select__single-value css-qav5hl-singleValue\\">
           Collapse on mobile
         </div>
         <div
-          class=\\"react-select__input-container css-dmcbcz-Input\\"
+          class=\\"react-select__input-container css-3qym3m-Input\\"
           data-value
         >
           <input
@@ -44,10 +44,10 @@ exports[`<AlertGroupCollapseConfiguration /> matches snapshot with default value
         </div>
       </div>
       <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
-        <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
+        <span class=\\"react-select__indicator-separator css-1u9des2-indicatorSeparator\\">
         </span>
         <div
-          class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
+          class=\\"react-select__indicator react-select__dropdown-indicator css-1xc3v61-indicatorContainer\\"
           aria-hidden=\\"true\\"
         >
           <svg
diff --git a/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupSortConfiguration.test.tsx.snap b/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupSortConfiguration.test.tsx.snap
index 56688017f..189a61065 100644
--- a/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupSortConfiguration.test.tsx.snap
+++ b/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupSortConfiguration.test.tsx.snap
@@ -18,13 +18,13 @@ exports[`<AlertGroupSortConfiguration /> matches snapshot with default values 1`
           class=\\"css-1f43avz-a11yText-A11yText\\"
         >
         </span>
-        <div class=\\"react-select__control css-n90zkc-control\\">
-          <div class=\\"react-select__value-container react-select__value-container--has-value css-1kabp7a-ValueContainer\\">
-            <div class=\\"react-select__single-value css-bgy71k-singleValue\\">
+        <div class=\\"react-select__control css-18hiu1u-control\\">
+          <div class=\\"react-select__value-container react-select__value-container--has-value css-1a3grgz-ValueContainer\\">
+            <div class=\\"react-select__single-value css-qav5hl-singleValue\\">
               Use defaults from karma config file
             </div>
             <div
-              class=\\"react-select__input-container css-dmcbcz-Input\\"
+              class=\\"react-select__input-container css-3qym3m-Input\\"
               data-value
             >
               <input
@@ -46,10 +46,10 @@ exports[`<AlertGroupSortConfiguration /> matches snapshot with default values 1`
             </div>
           </div>
           <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
-            <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
+            <span class=\\"react-select__indicator-separator css-1u9des2-indicatorSeparator\\">
             </span>
             <div
-              class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
+              class=\\"react-select__indicator react-select__dropdown-indicator css-1xc3v61-indicatorContainer\\"
               aria-hidden=\\"true\\"
             >
               <svg
diff --git a/ui/src/Components/MainModal/Configuration/__snapshots__/MultiGridConfiguration.test.tsx.snap b/ui/src/Components/MainModal/Configuration/__snapshots__/MultiGridConfiguration.test.tsx.snap
index a0274a78e..3d69a86bc 100644
--- a/ui/src/Components/MainModal/Configuration/__snapshots__/MultiGridConfiguration.test.tsx.snap
+++ b/ui/src/Components/MainModal/Configuration/__snapshots__/MultiGridConfiguration.test.tsx.snap
@@ -18,13 +18,13 @@ exports[`<MultiGridConfiguration /> matches snapshot with default values 1`] = `
           class=\\"css-1f43avz-a11yText-A11yText\\"
         >
         </span>
-        <div class=\\"react-select__control css-n90zkc-control\\">
-          <div class=\\"react-select__value-container react-select__value-container--has-value css-1kabp7a-ValueContainer\\">
-            <div class=\\"react-select__single-value css-bgy71k-singleValue\\">
+        <div class=\\"react-select__control css-18hiu1u-control\\">
+          <div class=\\"react-select__value-container react-select__value-container--has-value css-1a3grgz-ValueContainer\\">
+            <div class=\\"react-select__single-value css-qav5hl-singleValue\\">
               Disable multi-grid
             </div>
             <div
-              class=\\"react-select__input-container css-dmcbcz-Input\\"
+              class=\\"react-select__input-container css-3qym3m-Input\\"
               data-value
             >
               <input
@@ -46,10 +46,10 @@ exports[`<MultiGridConfiguration /> matches snapshot with default values 1`] = `
             </div>
           </div>
           <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
-            <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
+            <span class=\\"react-select__indicator-separator css-1u9des2-indicatorSeparator\\">
             </span>
             <div
-              class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
+              class=\\"react-select__indicator react-select__dropdown-indicator css-1xc3v61-indicatorContainer\\"
               aria-hidden=\\"true\\"
             >
               <svg
diff --git a/ui/src/Components/MainModal/Configuration/__snapshots__/ThemeConfiguration.test.tsx.snap b/ui/src/Components/MainModal/Configuration/__snapshots__/ThemeConfiguration.test.tsx.snap
index 20b92e48d..f06f6f826 100644
--- a/ui/src/Components/MainModal/Configuration/__snapshots__/ThemeConfiguration.test.tsx.snap
+++ b/ui/src/Components/MainModal/Configuration/__snapshots__/ThemeConfiguration.test.tsx.snap
@@ -16,13 +16,13 @@ exports[`<ThemeConfiguration /> matches snapshot with default values 1`] = `
       class=\\"css-1f43avz-a11yText-A11yText\\"
     >
     </span>
-    <div class=\\"react-select__control css-n90zkc-control\\">
-      <div class=\\"react-select__value-container react-select__value-container--has-value css-1kabp7a-ValueContainer\\">
-        <div class=\\"react-select__single-value css-bgy71k-singleValue\\">
+    <div class=\\"react-select__control css-18hiu1u-control\\">
+      <div class=\\"react-select__value-container react-select__value-container--has-value css-1a3grgz-ValueContainer\\">
+        <div class=\\"react-select__single-value css-qav5hl-singleValue\\">
           Automatic theme, follow browser preference
         </div>
         <div
-          class=\\"react-select__input-container css-dmcbcz-Input\\"
+          class=\\"react-select__input-container css-3qym3m-Input\\"
           data-value
         >
           <input
@@ -44,10 +44,10 @@ exports[`<ThemeConfiguration /> matches snapshot with default values 1`] = `
         </div>
       </div>
       <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
-        <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
+        <span class=\\"react-select__indicator-separator css-1u9des2-indicatorSeparator\\">
         </span>
         <div
-          class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
+          class=\\"react-select__indicator react-select__dropdown-indicator css-1xc3v61-indicatorContainer\\"
           aria-hidden=\\"true\\"
         >
           <svg
diff --git a/ui/src/Components/MainModal/Configuration/__snapshots__/index.test.tsx.snap b/ui/src/Components/MainModal/Configuration/__snapshots__/index.test.tsx.snap
index f37bbe964..ad17e71d9 100644
--- a/ui/src/Components/MainModal/Configuration/__snapshots__/index.test.tsx.snap
+++ b/ui/src/Components/MainModal/Configuration/__snapshots__/index.test.tsx.snap
@@ -91,13 +91,13 @@ exports[`<Configuration /> matches snapshot 1`] = `
               class=\\"css-1f43avz-a11yText-A11yText\\"
             >
             </span>
-            <div class=\\"react-select__control css-n90zkc-control\\">
-              <div class=\\"react-select__value-container react-select__value-container--has-value css-1kabp7a-ValueContainer\\">
-                <div class=\\"react-select__single-value css-bgy71k-singleValue\\">
+            <div class=\\"react-select__control css-18hiu1u-control\\">
+              <div class=\\"react-select__value-container react-select__value-container--has-value css-1a3grgz-ValueContainer\\">
+                <div class=\\"react-select__single-value css-qav5hl-singleValue\\">
                   Automatic theme, follow browser preference
                 </div>
                 <div
-                  class=\\"react-select__input-container css-dmcbcz-Input\\"
+                  class=\\"react-select__input-container css-3qym3m-Input\\"
                   data-value
                 >
                   <input
@@ -119,10 +119,10 @@ exports[`<Configuration /> matches snapshot 1`] = `
                 </div>
               </div>
               <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
-                <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
+                <span class=\\"react-select__indicator-separator css-1u9des2-indicatorSeparator\\">
                 </span>
                 <div
-                  class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
+                  class=\\"react-select__indicator react-select__dropdown-indicator css-1xc3v61-indicatorContainer\\"
                   aria-hidden=\\"true\\"
                 >
                   <svg
@@ -270,13 +270,13 @@ exports[`<Configuration /> matches snapshot 1`] = `
               class=\\"css-1f43avz-a11yText-A11yText\\"
             >
             </span>
-            <div class=\\"react-select__control css-n90zkc-control\\">
-              <div class=\\"react-select__value-container react-select__value-container--has-value css-1kabp7a-ValueContainer\\">
-                <div class=\\"react-select__single-value css-bgy71k-singleValue\\">
+            <div class=\\"react-select__control css-18hiu1u-control\\">
+              <div class=\\"react-select__value-container react-select__value-container--has-value css-1a3grgz-ValueContainer\\">
+                <div class=\\"react-select__single-value css-qav5hl-singleValue\\">
                   Collapse on mobile
                 </div>
                 <div
-                  class=\\"react-select__input-container css-dmcbcz-Input\\"
+                  class=\\"react-select__input-container css-3qym3m-Input\\"
                   data-value
                 >
                   <input
@@ -298,10 +298,10 @@ exports[`<Configuration /> matches snapshot 1`] = `
                 </div>
               </div>
               <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
-                <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
+                <span class=\\"react-select__indicator-separator css-1u9des2-indicatorSeparator\\">
                 </span>
                 <div
-                  class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
+                  class=\\"react-select__indicator react-select__dropdown-indicator css-1xc3v61-indicatorContainer\\"
                   aria-hidden=\\"true\\"
                 >
                   <svg
@@ -350,13 +350,13 @@ exports[`<Configuration /> matches snapshot 1`] = `
                   class=\\"css-1f43avz-a11yText-A11yText\\"
                 >
                 </span>
-                <div class=\\"react-select__control css-n90zkc-control\\">
-                  <div class=\\"react-select__value-container react-select__value-container--has-value css-1kabp7a-ValueContainer\\">
-                    <div class=\\"react-select__single-value css-bgy71k-singleValue\\">
+                <div class=\\"react-select__control css-18hiu1u-control\\">
+                  <div class=\\"react-select__value-container react-select__value-container--has-value css-1a3grgz-ValueContainer\\">
+                    <div class=\\"react-select__single-value css-qav5hl-singleValue\\">
                       Use defaults from karma config file
                     </div>
                     <div
-                      class=\\"react-select__input-container css-dmcbcz-Input\\"
+                      class=\\"react-select__input-container css-3qym3m-Input\\"
                       data-value
                     >
                       <input
@@ -378,10 +378,10 @@ exports[`<Configuration /> matches snapshot 1`] = `
                     </div>
                   </div>
                   <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
-                    <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
+                    <span class=\\"react-select__indicator-separator css-1u9des2-indicatorSeparator\\">
                     </span>
                     <div
-                      class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
+                      class=\\"react-select__indicator react-select__dropdown-indicator css-1xc3v61-indicatorContainer\\"
                       aria-hidden=\\"true\\"
                     >
                       <svg
@@ -432,13 +432,13 @@ exports[`<Configuration /> matches snapshot 1`] = `
                   class=\\"css-1f43avz-a11yText-A11yText\\"
                 >
                 </span>
-                <div class=\\"react-select__control css-n90zkc-control\\">
-                  <div class=\\"react-select__value-container react-select__value-container--has-value css-1kabp7a-ValueContainer\\">
-                    <div class=\\"react-select__single-value css-bgy71k-singleValue\\">
+                <div class=\\"react-select__control css-18hiu1u-control\\">
+                  <div class=\\"react-select__value-container react-select__value-container--has-value css-1a3grgz-ValueContainer\\">
+                    <div class=\\"react-select__single-value css-qav5hl-singleValue\\">
                       Disable multi-grid
                     </div>
                     <div
-                      class=\\"react-select__input-container css-dmcbcz-Input\\"
+                      class=\\"react-select__input-container css-3qym3m-Input\\"
                       data-value
                     >
                       <input
@@ -460,10 +460,10 @@ exports[`<Configuration /> matches snapshot 1`] = `
                     </div>
                   </div>
                   <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
-                    <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
+                    <span class=\\"react-select__indicator-separator css-1u9des2-indicatorSeparator\\">
                     </span>
                     <div
-                      class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
+                      class=\\"react-select__indicator react-select__dropdown-indicator css-1xc3v61-indicatorContainer\\"
                       aria-hidden=\\"true\\"
                     >
                       <svg
diff --git a/ui/src/Components/MainModal/__snapshots__/MainModalContent.test.tsx.snap b/ui/src/Components/MainModal/__snapshots__/MainModalContent.test.tsx.snap
index 2468c4543..fbdc97b44 100644
--- a/ui/src/Components/MainModal/__snapshots__/MainModalContent.test.tsx.snap
+++ b/ui/src/Components/MainModal/__snapshots__/MainModalContent.test.tsx.snap
@@ -108,13 +108,13 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
                   class=\\"css-1f43avz-a11yText-A11yText\\"
                 >
                 </span>
-                <div class=\\"react-select__control css-n90zkc-control\\">
-                  <div class=\\"react-select__value-container react-select__value-container--has-value css-1kabp7a-ValueContainer\\">
-                    <div class=\\"react-select__single-value css-bgy71k-singleValue\\">
+                <div class=\\"react-select__control css-18hiu1u-control\\">
+                  <div class=\\"react-select__value-container react-select__value-container--has-value css-1a3grgz-ValueContainer\\">
+                    <div class=\\"react-select__single-value css-qav5hl-singleValue\\">
                       Automatic theme, follow browser preference
                     </div>
                     <div
-                      class=\\"react-select__input-container css-dmcbcz-Input\\"
+                      class=\\"react-select__input-container css-3qym3m-Input\\"
                       data-value
                     >
                       <input
@@ -136,10 +136,10 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
                     </div>
                   </div>
                   <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
-                    <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
+                    <span class=\\"react-select__indicator-separator css-1u9des2-indicatorSeparator\\">
                     </span>
                     <div
-                      class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
+                      class=\\"react-select__indicator react-select__dropdown-indicator css-1xc3v61-indicatorContainer\\"
                       aria-hidden=\\"true\\"
                     >
                       <svg
@@ -287,13 +287,13 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
                   class=\\"css-1f43avz-a11yText-A11yText\\"
                 >
                 </span>
-                <div class=\\"react-select__control css-n90zkc-control\\">
-                  <div class=\\"react-select__value-container react-select__value-container--has-value css-1kabp7a-ValueContainer\\">
-                    <div class=\\"react-select__single-value css-bgy71k-singleValue\\">
+                <div class=\\"react-select__control css-18hiu1u-control\\">
+                  <div class=\\"react-select__value-container react-select__value-container--has-value css-1a3grgz-ValueContainer\\">
+                    <div class=\\"react-select__single-value css-qav5hl-singleValue\\">
                       Collapse on mobile
                     </div>
                     <div
-                      class=\\"react-select__input-container css-dmcbcz-Input\\"
+                      class=\\"react-select__input-container css-3qym3m-Input\\"
                       data-value
                     >
                       <input
@@ -315,10 +315,10 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
                     </div>
                   </div>
                   <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
-                    <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
+                    <span class=\\"react-select__indicator-separator css-1u9des2-indicatorSeparator\\">
                     </span>
                     <div
-                      class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
+                      class=\\"react-select__indicator react-select__dropdown-indicator css-1xc3v61-indicatorContainer\\"
                       aria-hidden=\\"true\\"
                     >
                       <svg
@@ -367,13 +367,13 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
                       class=\\"css-1f43avz-a11yText-A11yText\\"
                     >
                     </span>
-                    <div class=\\"react-select__control css-n90zkc-control\\">
-                      <div class=\\"react-select__value-container react-select__value-container--has-value css-1kabp7a-ValueContainer\\">
-                        <div class=\\"react-select__single-value css-bgy71k-singleValue\\">
+                    <div class=\\"react-select__control css-18hiu1u-control\\">
+                      <div class=\\"react-select__value-container react-select__value-container--has-value css-1a3grgz-ValueContainer\\">
+                        <div class=\\"react-select__single-value css-qav5hl-singleValue\\">
                           Use defaults from karma config file
                         </div>
                         <div
-                          class=\\"react-select__input-container css-dmcbcz-Input\\"
+                          class=\\"react-select__input-container css-3qym3m-Input\\"
                           data-value
                         >
                           <input
@@ -395,10 +395,10 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
                         </div>
                       </div>
                       <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
-                        <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
+                        <span class=\\"react-select__indicator-separator css-1u9des2-indicatorSeparator\\">
                         </span>
                         <div
-                          class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
+                          class=\\"react-select__indicator react-select__dropdown-indicator css-1xc3v61-indicatorContainer\\"
                           aria-hidden=\\"true\\"
                         >
                           <svg
@@ -449,13 +449,13 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
                       class=\\"css-1f43avz-a11yText-A11yText\\"
                     >
                     </span>
-                    <div class=\\"react-select__control css-n90zkc-control\\">
-                      <div class=\\"react-select__value-container react-select__value-container--has-value css-1kabp7a-ValueContainer\\">
-                        <div class=\\"react-select__single-value css-bgy71k-singleValue\\">
+                    <div class=\\"react-select__control css-18hiu1u-control\\">
+                      <div class=\\"react-select__value-container react-select__value-container--has-value css-1a3grgz-ValueContainer\\">
+                        <div class=\\"react-select__single-value css-qav5hl-singleValue\\">
                           Disable multi-grid
                         </div>
                         <div
-                          class=\\"react-select__input-container css-dmcbcz-Input\\"
+                          class=\\"react-select__input-container css-3qym3m-Input\\"
                           data-value
                         >
                           <input
@@ -477,10 +477,10 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
                         </div>
                       </div>
                       <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
-                        <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
+                        <span class=\\"react-select__indicator-separator css-1u9des2-indicatorSeparator\\">
                         </span>
                         <div
-                          class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
+                          class=\\"react-select__indicator react-select__dropdown-indicator css-1xc3v61-indicatorContainer\\"
                           aria-hidden=\\"true\\"
                         >
                           <svg
diff --git a/ui/src/Components/SilenceModal/AlertManagerInput/__snapshots__/index.test.tsx.snap b/ui/src/Components/SilenceModal/AlertManagerInput/__snapshots__/index.test.tsx.snap
index 1d047c53b..18f574827 100644
--- a/ui/src/Components/SilenceModal/AlertManagerInput/__snapshots__/index.test.tsx.snap
+++ b/ui/src/Components/SilenceModal/AlertManagerInput/__snapshots__/index.test.tsx.snap
@@ -15,15 +15,15 @@ exports[`<AlertManagerInput /> matches snapshot 1`] = `
     class=\\"css-1f43avz-a11yText-A11yText\\"
   >
   </span>
-  <div class=\\"react-select__control css-n90zkc-control\\">
-    <div class=\\"react-select__value-container react-select__value-container--is-multi react-select__value-container--has-value css-115r1xl-ValueContainer\\">
-      <div class=\\"css-owt1hd-multiValue react-select__multi-value\\">
-        <div class=\\"css-xbn6jz react-select__multi-value__label\\">
+  <div class=\\"react-select__control css-18hiu1u-control\\">
+    <div class=\\"react-select__value-container react-select__value-container--is-multi react-select__value-container--has-value css-127noje-ValueContainer\\">
+      <div class=\\"react-select__multi-value css-1laq446-multiValue\\">
+        <div class=\\"react-select__multi-value__label css-iljojb-MultiValueGeneric\\">
           Cluster: HA
         </div>
         <div
           role=\\"button\\"
-          class=\\"css-1ucqin4 react-select__multi-value__remove\\"
+          class=\\"react-select__multi-value__remove css-1izoyac-MultiValueRemove\\"
           aria-label=\\"Remove Cluster: HA\\"
         >
           <svg
@@ -39,13 +39,13 @@ exports[`<AlertManagerInput /> matches snapshot 1`] = `
           </svg>
         </div>
       </div>
-      <div class=\\"css-owt1hd-multiValue react-select__multi-value\\">
-        <div class=\\"css-xbn6jz react-select__multi-value__label\\">
+      <div class=\\"react-select__multi-value css-1laq446-multiValue\\">
+        <div class=\\"react-select__multi-value__label css-iljojb-MultiValueGeneric\\">
           am3
         </div>
         <div
           role=\\"button\\"
-          class=\\"css-1ucqin4 react-select__multi-value__remove\\"
+          class=\\"react-select__multi-value__remove css-1izoyac-MultiValueRemove\\"
           aria-label=\\"Remove am3\\"
         >
           <svg
@@ -62,7 +62,7 @@ exports[`<AlertManagerInput /> matches snapshot 1`] = `
         </div>
       </div>
       <div
-        class=\\"react-select__input-container css-dmcbcz-Input\\"
+        class=\\"react-select__input-container css-3qym3m-Input\\"
         data-value
       >
         <input
@@ -85,7 +85,7 @@ exports[`<AlertManagerInput /> matches snapshot 1`] = `
     </div>
     <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
       <div
-        class=\\"react-select__indicator react-select__clear-indicator css-tlfecz-indicatorContainer\\"
+        class=\\"react-select__indicator react-select__clear-indicator css-1xc3v61-indicatorContainer\\"
         aria-hidden=\\"true\\"
       >
         <svg
@@ -100,10 +100,10 @@ exports[`<AlertManagerInput /> matches snapshot 1`] = `
           </path>
         </svg>
       </div>
-      <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
+      <span class=\\"react-select__indicator-separator css-1u9des2-indicatorSeparator\\">
       </span>
       <div
-        class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
+        class=\\"react-select__indicator react-select__dropdown-indicator css-1xc3v61-indicatorContainer\\"
         aria-hidden=\\"true\\"
       >
         <svg
diff --git a/ui/src/Components/SilenceModal/AlertManagerInput/index.test.tsx b/ui/src/Components/SilenceModal/AlertManagerInput/index.test.tsx
index 1ccf48d45..d6cdbfa1d 100644
--- a/ui/src/Components/SilenceModal/AlertManagerInput/index.test.tsx
+++ b/ui/src/Components/SilenceModal/AlertManagerInput/index.test.tsx
@@ -101,8 +101,8 @@ describe("<AlertManagerInput />", () => {
 
   it("renders ValidationError after failed validation", () => {
     const tree = MountedAlertManagerInput();
-    tree.find(".react-select__multi-value__remove").at(0).simulate("click");
-    tree.find(".react-select__multi-value__remove").at(0).simulate("click");
+    tree.find("div.react-select__multi-value__remove").at(0).simulate("click");
+    tree.find("div.react-select__multi-value__remove").at(0).simulate("click");
     silenceFormStore.data.setAlertmanagers([]);
     silenceFormStore.data.setWasValidated(true);
     expect(toDiffableHtml(tree.html())).toMatch(/fa-circle-exclamation/);
@@ -186,10 +186,10 @@ describe("<AlertManagerInput />", () => {
     const tree = MountedAlertManagerInput();
     expect(silenceFormStore.data.alertmanagers).toHaveLength(2);
 
-    tree.find(".react-select__multi-value__remove").at(0).simulate("click");
+    tree.find("div.react-select__multi-value__remove").at(0).simulate("click");
     expect(silenceFormStore.data.alertmanagers).toHaveLength(1);
 
-    tree.find(".react-select__multi-value__remove").simulate("click");
+    tree.find("div.react-select__multi-value__remove").simulate("click");
     expect(silenceFormStore.data.alertmanagers).toHaveLength(0);
     expect(silenceFormStore.data.alertmanagers).toEqual([]);
   });
diff --git a/ui/src/Components/SilenceModal/SilenceMatch/LabelValueInput.test.tsx b/ui/src/Components/SilenceModal/SilenceMatch/LabelValueInput.test.tsx
index d227c7900..51223a102 100644
--- a/ui/src/Components/SilenceModal/SilenceMatch/LabelValueInput.test.tsx
+++ b/ui/src/Components/SilenceModal/SilenceMatch/LabelValueInput.test.tsx
@@ -144,10 +144,10 @@ describe("<LabelValueInput />", () => {
     matcher.values = [StringToOption("dev"), StringToOption("staging")];
     const tree = MountedLabelValueInput(true);
 
-    tree.find(".react-select__multi-value__remove").at(0).simulate("click");
+    tree.find("div.react-select__multi-value__remove").at(0).simulate("click");
     expect(matcher.values).toHaveLength(1);
 
-    tree.find(".react-select__multi-value__remove").simulate("click");
+    tree.find("div.react-select__multi-value__remove").simulate("click");
     expect(matcher.values).toHaveLength(0);
     expect(matcher.values).toEqual([]);
   });
diff --git a/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelNameInput.test.tsx.snap b/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelNameInput.test.tsx.snap
index a10e76d06..ac01b50f3 100644
--- a/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelNameInput.test.tsx.snap
+++ b/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelNameInput.test.tsx.snap
@@ -15,13 +15,13 @@ exports[`<LabelNameInput /> matches snapshot 1`] = `
     class=\\"css-1f43avz-a11yText-A11yText\\"
   >
   </span>
-  <div class=\\"react-select__control css-n90zkc-control\\">
-    <div class=\\"react-select__value-container react-select__value-container--has-value css-1kabp7a-ValueContainer\\">
-      <div class=\\"react-select__single-value css-bgy71k-singleValue\\">
+  <div class=\\"react-select__control css-18hiu1u-control\\">
+    <div class=\\"react-select__value-container react-select__value-container--has-value css-1a3grgz-ValueContainer\\">
+      <div class=\\"react-select__single-value css-qav5hl-singleValue\\">
         cluster
       </div>
       <div
-        class=\\"react-select__input-container css-dmcbcz-Input\\"
+        class=\\"react-select__input-container css-3qym3m-Input\\"
         data-value
       >
         <input
@@ -43,10 +43,10 @@ exports[`<LabelNameInput /> matches snapshot 1`] = `
       </div>
     </div>
     <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
-      <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
+      <span class=\\"react-select__indicator-separator css-1u9des2-indicatorSeparator\\">
       </span>
       <div
-        class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
+        class=\\"react-select__indicator react-select__dropdown-indicator css-1xc3v61-indicatorContainer\\"
         aria-hidden=\\"true\\"
       >
         <svg
diff --git a/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelValueInput.test.tsx.snap b/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelValueInput.test.tsx.snap
index e0e3cf12b..10730ee52 100644
--- a/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelValueInput.test.tsx.snap
+++ b/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelValueInput.test.tsx.snap
@@ -15,18 +15,18 @@ exports[`<LabelValueInput /> fetches suggestions on mount 1`] = `
     class=\\"css-1f43avz-a11yText-A11yText\\"
   >
   </span>
-  <div class=\\"react-select__control css-n90zkc-control\\">
-    <div class=\\"react-select__value-container react-select__value-container--is-multi css-115r1xl-ValueContainer\\">
+  <div class=\\"react-select__control css-18hiu1u-control\\">
+    <div class=\\"react-select__value-container react-select__value-container--is-multi css-127noje-ValueContainer\\">
       <div>
         <div
-          class=\\"react-select__placeholder css-14el2xx-placeholder\\"
+          class=\\"react-select__placeholder css-1jqq78o-placeholder\\"
           id=\\"react-select-silence-input-label-value-2-placeholder\\"
         >
           Label value
         </div>
       </div>
       <div
-        class=\\"react-select__input-container css-dmcbcz-Input\\"
+        class=\\"react-select__input-container css-3qym3m-Input\\"
         data-value
       >
         <input
@@ -49,10 +49,10 @@ exports[`<LabelValueInput /> fetches suggestions on mount 1`] = `
       </div>
     </div>
     <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
-      <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
+      <span class=\\"react-select__indicator-separator css-1u9des2-indicatorSeparator\\">
       </span>
       <div
-        class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
+        class=\\"react-select__indicator react-select__dropdown-indicator css-1xc3v61-indicatorContainer\\"
         aria-hidden=\\"true\\"
       >
         <svg
@@ -88,18 +88,18 @@ exports[`<LabelValueInput /> matches snapshot 1`] = `
     class=\\"css-1f43avz-a11yText-A11yText\\"
   >
   </span>
-  <div class=\\"react-select__control css-n90zkc-control\\">
-    <div class=\\"react-select__value-container react-select__value-container--is-multi css-115r1xl-ValueContainer\\">
+  <div class=\\"react-select__control css-18hiu1u-control\\">
+    <div class=\\"react-select__value-container react-select__value-container--is-multi css-127noje-ValueContainer\\">
       <div>
         <div
-          class=\\"react-select__placeholder css-14el2xx-placeholder\\"
+          class=\\"react-select__placeholder css-1jqq78o-placeholder\\"
           id=\\"react-select-silence-input-label-value-1-placeholder\\"
         >
           Label value
         </div>
       </div>
       <div
-        class=\\"react-select__input-container css-dmcbcz-Input\\"
+        class=\\"react-select__input-container css-3qym3m-Input\\"
         data-value
       >
         <input
@@ -122,10 +122,10 @@ exports[`<LabelValueInput /> matches snapshot 1`] = `
       </div>
     </div>
     <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
-      <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
+      <span class=\\"react-select__indicator-separator css-1u9des2-indicatorSeparator\\">
       </span>
       <div
-        class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
+        class=\\"react-select__indicator react-select__dropdown-indicator css-1xc3v61-indicatorContainer\\"
         aria-hidden=\\"true\\"
       >
         <svg
diff --git a/ui/src/Components/Theme/__snapshots__/ReactSelect.test.tsx.snap b/ui/src/Components/Theme/__snapshots__/ReactSelect.test.tsx.snap
index 0a8e97aa0..35f0e8398 100644
--- a/ui/src/Components/Theme/__snapshots__/ReactSelect.test.tsx.snap
+++ b/ui/src/Components/Theme/__snapshots__/ReactSelect.test.tsx.snap
@@ -21,16 +21,16 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot when focused 1`] = `
     class=\\"css-1f43avz-a11yText-A11yText\\"
   >
   </span>
-  <div class=\\" css-11rrdhm-control\\">
-    <div class=\\" css-1kabp7a-ValueContainer\\">
+  <div class=\\" css-ath5wh-control\\">
+    <div class=\\" css-1a3grgz-ValueContainer\\">
       <div
-        class=\\" css-14el2xx-placeholder\\"
+        class=\\" css-1jqq78o-placeholder\\"
         id=\\"react-select-3-placeholder\\"
       >
         Select...
       </div>
       <div
-        class=\\" css-dmcbcz-Input\\"
+        class=\\" css-3qym3m-Input\\"
         data-value
       >
         <input
@@ -53,10 +53,10 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot when focused 1`] = `
       </div>
     </div>
     <div class=\\" css-vcwr3k-IndicatorsContainer\\">
-      <span class=\\" css-1okebmr-indicatorSeparator\\">
+      <span class=\\" css-1u9des2-indicatorSeparator\\">
       </span>
       <div
-        class=\\" css-1ij327q-indicatorContainer\\"
+        class=\\" css-1fu8xx8-indicatorContainer\\"
         aria-hidden=\\"true\\"
       >
         <svg
@@ -98,16 +98,16 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot when focused and disabled
     class=\\"css-1f43avz-a11yText-A11yText\\"
   >
   </span>
-  <div class=\\" css-1tnfzgk-control\\">
-    <div class=\\" css-1kabp7a-ValueContainer\\">
+  <div class=\\" css-zximad-control\\">
+    <div class=\\" css-1a3grgz-ValueContainer\\">
       <div
-        class=\\" css-14el2xx-placeholder\\"
+        class=\\" css-1jqq78o-placeholder\\"
         id=\\"react-select-4-placeholder\\"
       >
         Select...
       </div>
       <div
-        class=\\" css-9ehl8g-Input\\"
+        class=\\" css-mg7c5y-Input\\"
         data-value
       >
         <input
@@ -131,10 +131,10 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot when focused and disabled
       </div>
     </div>
     <div class=\\" css-15bdmde-IndicatorsContainer\\">
-      <span class=\\" css-109onse-indicatorSeparator\\">
+      <span class=\\" css-894a34-indicatorSeparator\\">
       </span>
       <div
-        class=\\" css-1ij327q-indicatorContainer\\"
+        class=\\" css-1fu8xx8-indicatorContainer\\"
         aria-hidden=\\"true\\"
       >
         <svg
@@ -170,13 +170,13 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with a value 1`] = `
     class=\\"css-1f43avz-a11yText-A11yText\\"
   >
   </span>
-  <div class=\\" css-n90zkc-control\\">
-    <div class=\\" css-1kabp7a-ValueContainer\\">
-      <div class=\\" css-bgy71k-singleValue\\">
+  <div class=\\" css-18hiu1u-control\\">
+    <div class=\\" css-1a3grgz-ValueContainer\\">
+      <div class=\\" css-qav5hl-singleValue\\">
         foo
       </div>
       <div
-        class=\\" css-dmcbcz-Input\\"
+        class=\\" css-3qym3m-Input\\"
         data-value
       >
         <input
@@ -198,10 +198,10 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with a value 1`] = `
       </div>
     </div>
     <div class=\\" css-vcwr3k-IndicatorsContainer\\">
-      <span class=\\" css-1okebmr-indicatorSeparator\\">
+      <span class=\\" css-1u9des2-indicatorSeparator\\">
       </span>
       <div
-        class=\\" css-tlfecz-indicatorContainer\\"
+        class=\\" css-1xc3v61-indicatorContainer\\"
         aria-hidden=\\"true\\"
       >
         <svg
@@ -237,13 +237,13 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with isDisabled=true 1`]
     class=\\"css-1f43avz-a11yText-A11yText\\"
   >
   </span>
-  <div class=\\" css-1imhm17-control\\">
-    <div class=\\" css-1kabp7a-ValueContainer\\">
-      <div class=\\" css-bgy71k-singleValue\\">
+  <div class=\\" css-1bxufhm-control\\">
+    <div class=\\" css-1a3grgz-ValueContainer\\">
+      <div class=\\" css-qav5hl-singleValue\\">
         foo
       </div>
       <div
-        class=\\" css-9ehl8g-Input\\"
+        class=\\" css-mg7c5y-Input\\"
         data-value
       >
         <input
@@ -266,10 +266,10 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with isDisabled=true 1`]
       </div>
     </div>
     <div class=\\" css-15bdmde-IndicatorsContainer\\">
-      <span class=\\" css-109onse-indicatorSeparator\\">
+      <span class=\\" css-894a34-indicatorSeparator\\">
       </span>
       <div
-        class=\\" css-tlfecz-indicatorContainer\\"
+        class=\\" css-1xc3v61-indicatorContainer\\"
         aria-hidden=\\"true\\"
       >
         <svg
@@ -305,16 +305,16 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with isMulti=true 1`] = `
     class=\\"css-1f43avz-a11yText-A11yText\\"
   >
   </span>
-  <div class=\\" css-n90zkc-control\\">
-    <div class=\\" css-115r1xl-ValueContainer\\">
+  <div class=\\" css-18hiu1u-control\\">
+    <div class=\\" css-127noje-ValueContainer\\">
       <div
-        class=\\" css-14el2xx-placeholder\\"
+        class=\\" css-1jqq78o-placeholder\\"
         id=\\"react-select-2-placeholder\\"
       >
         Select...
       </div>
       <div
-        class=\\" css-dmcbcz-Input\\"
+        class=\\" css-3qym3m-Input\\"
         data-value
       >
         <input
@@ -337,10 +337,10 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with isMulti=true 1`] = `
       </div>
     </div>
     <div class=\\" css-vcwr3k-IndicatorsContainer\\">
-      <span class=\\" css-1okebmr-indicatorSeparator\\">
+      <span class=\\" css-1u9des2-indicatorSeparator\\">
       </span>
       <div
-        class=\\" css-tlfecz-indicatorContainer\\"
+        class=\\" css-1xc3v61-indicatorContainer\\"
         aria-hidden=\\"true\\"
       >
         <svg
@@ -376,15 +376,15 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with isMulti=true and a v
     class=\\"css-1f43avz-a11yText-A11yText\\"
   >
   </span>
-  <div class=\\" css-n90zkc-control\\">
-    <div class=\\" css-115r1xl-ValueContainer\\">
-      <div class=\\"css-owt1hd-multiValue\\">
-        <div class=\\"css-xbn6jz\\">
+  <div class=\\" css-18hiu1u-control\\">
+    <div class=\\" css-127noje-ValueContainer\\">
+      <div class=\\" css-1laq446-multiValue\\">
+        <div class=\\" css-iljojb-MultiValueGeneric\\">
           foo
         </div>
         <div
           role=\\"button\\"
-          class=\\"css-1ucqin4\\"
+          class=\\" css-1izoyac-MultiValueRemove\\"
           aria-label=\\"Remove foo\\"
         >
           <svg
@@ -401,7 +401,7 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with isMulti=true and a v
         </div>
       </div>
       <div
-        class=\\" css-dmcbcz-Input\\"
+        class=\\" css-3qym3m-Input\\"
         data-value
       >
         <input
@@ -424,7 +424,7 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with isMulti=true and a v
     </div>
     <div class=\\" css-vcwr3k-IndicatorsContainer\\">
       <div
-        class=\\" css-tlfecz-indicatorContainer\\"
+        class=\\" css-1xc3v61-indicatorContainer\\"
         aria-hidden=\\"true\\"
       >
         <svg
@@ -439,10 +439,10 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with isMulti=true and a v
           </path>
         </svg>
       </div>
-      <span class=\\" css-1okebmr-indicatorSeparator\\">
+      <span class=\\" css-1u9des2-indicatorSeparator\\">
       </span>
       <div
-        class=\\" css-tlfecz-indicatorContainer\\"
+        class=\\" css-1xc3v61-indicatorContainer\\"
         aria-hidden=\\"true\\"
       >
         <svg