From abd85362a5222adbb9cae40ba85f649ddd552d70 Mon Sep 17 00:00:00 2001
From: Renovate Bot <bot@renovateapp.com>
Date: Wed, 17 Apr 2019 06:05:46 +0000
Subject: [PATCH] fix(deps): update dependency react-select to v2.4.3

---
 ui/package.json                               |  2 +-
 ...ertGroupCollapseConfiguration.test.js.snap | 10 +--
 .../AlertGroupSortConfiguration.test.js.snap  | 10 +--
 .../__snapshots__/index.test.js.snap          | 24 +++---
 .../MainModalContent.test.js.snap             | 20 ++---
 .../__snapshots__/index.test.js.snap          | 74 +++++++++----------
 .../__snapshots__/index.test.js.snap          | 16 ++--
 .../__snapshots__/LabelNameInput.test.js.snap | 12 +--
 .../LabelValueInput.test.js.snap              | 12 +--
 ui/yarn.lock                                  |  8 +-
 10 files changed, 94 insertions(+), 94 deletions(-)

diff --git a/ui/package.json b/ui/package.json
index 9bf0780b1..25d5894a4 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -46,7 +46,7 @@
     "react-popper": "1.3.3",
     "react-resize-detector": "4.1.3",
     "react-scripts": "2.1.8",
-    "react-select": "2.4.2",
+    "react-select": "2.4.3",
     "react-tippy": "1.2.3",
     "react-transition-group": "4.0.0",
     "react-truncate": "2.4.0",
diff --git a/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupCollapseConfiguration.test.js.snap b/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupCollapseConfiguration.test.js.snap
index 7f4f118de..d30166057 100644
--- a/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupCollapseConfiguration.test.js.snap
+++ b/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupCollapseConfiguration.test.js.snap
@@ -8,10 +8,10 @@ exports[`<AlertGroupCollapseConfiguration /> matches snapshot with default value
       Default alert group display
     </label>
   </div>
-  <div class=\\"css-10nd86i\\">
-    <div class=\\"css-7jxtyj react-select__control\\">
+  <div class=\\"css-1pcexqc-container\\">
+    <div class=\\"css-75iuk3-control react-select__control\\">
       <div class=\\"css-pb81dw react-select__value-container react-select__value-container--has-value\\">
-        <div class=\\"css-xp4uvy react-select__single-value\\">
+        <div class=\\"css-dvua67-singleValue react-select__single-value\\">
           Collapse on mobile
         </div>
         <div class=\\"css-1g6gooi\\">
@@ -35,10 +35,10 @@ exports[`<AlertGroupCollapseConfiguration /> matches snapshot with default value
         </div>
       </div>
       <div class=\\"css-mik995 react-select__indicators\\">
-        <span class=\\"css-d8oujb react-select__indicator-separator\\">
+        <span class=\\"css-bgvzuu-indicatorSeparator react-select__indicator-separator\\">
         </span>
         <div aria-hidden=\\"true\\"
-             class=\\"css-1ep9fjw react-select__indicator react-select__dropdown-indicator\\"
+             class=\\"css-16pqwjk-indicatorContainer react-select__indicator react-select__dropdown-indicator\\"
         >
           <svg height=\\"20\\"
                width=\\"20\\"
diff --git a/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupSortConfiguration.test.js.snap b/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupSortConfiguration.test.js.snap
index 01a8f8031..71ff01e0f 100644
--- a/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupSortConfiguration.test.js.snap
+++ b/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupSortConfiguration.test.js.snap
@@ -10,10 +10,10 @@ exports[`<AlertGroupSortConfiguration /> matches snapshot with default values 1`
   </div>
   <div class=\\"d-flex flex-fill flex-lg-row flex-column justify-content-between\\">
     <div class=\\"flex-shrink-0 flex-grow-1 flex-basis-auto\\">
-      <div class=\\"css-10nd86i\\">
-        <div class=\\"css-7jxtyj react-select__control\\">
+      <div class=\\"css-1pcexqc-container\\">
+        <div class=\\"css-75iuk3-control react-select__control\\">
           <div class=\\"css-pb81dw react-select__value-container react-select__value-container--has-value\\">
-            <div class=\\"css-xp4uvy react-select__single-value\\">
+            <div class=\\"css-dvua67-singleValue react-select__single-value\\">
               Use defaults from karma config file
             </div>
             <div class=\\"css-1g6gooi\\">
@@ -37,10 +37,10 @@ exports[`<AlertGroupSortConfiguration /> matches snapshot with default values 1`
             </div>
           </div>
           <div class=\\"css-mik995 react-select__indicators\\">
-            <span class=\\"css-d8oujb react-select__indicator-separator\\">
+            <span class=\\"css-bgvzuu-indicatorSeparator react-select__indicator-separator\\">
             </span>
             <div aria-hidden=\\"true\\"
-                 class=\\"css-1ep9fjw react-select__indicator react-select__dropdown-indicator\\"
+                 class=\\"css-16pqwjk-indicatorContainer react-select__indicator react-select__dropdown-indicator\\"
             >
               <svg height=\\"20\\"
                    width=\\"20\\"
diff --git a/ui/src/Components/MainModal/Configuration/__snapshots__/index.test.js.snap b/ui/src/Components/MainModal/Configuration/__snapshots__/index.test.js.snap
index 5f0f81a6f..c230bc7d7 100644
--- a/ui/src/Components/MainModal/Configuration/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/MainModal/Configuration/__snapshots__/index.test.js.snap
@@ -168,10 +168,10 @@ exports[`<Configuration /> matches snapshot 1`] = `
         Default alert group display
       </label>
     </div>
-    <div class=\\"css-10nd86i\\">
-      <div class=\\"css-7jxtyj react-select__control\\">
+    <div class=\\"css-1pcexqc-container\\">
+      <div class=\\"css-75iuk3-control react-select__control\\">
         <div class=\\"css-pb81dw react-select__value-container react-select__value-container--has-value\\">
-          <div class=\\"css-xp4uvy react-select__single-value\\">
+          <div class=\\"css-dvua67-singleValue react-select__single-value\\">
             Collapse on mobile
           </div>
           <div class=\\"css-1g6gooi\\">
@@ -187,7 +187,7 @@ exports[`<Configuration /> matches snapshot 1`] = `
                      tabindex=\\"0\\"
                      value
                      aria-autocomplete=\\"list\\"
-                     style=\\"box-sizing:content-box;width:1px;background:0;border:0;font-size:inherit;opacity:1;outline:0;padding:0;color:inherit\\"
+                     style=\\"box-sizing:content-box;width:1px;label:input;background:0;border:0;font-size:inherit;opacity:1;outline:0;padding:0;color:inherit\\"
               >
               <div style=\\"position:absolute;top:0;left:0;visibility:hidden;height:0;overflow:scroll;white-space:pre\\">
               </div>
@@ -195,10 +195,10 @@ exports[`<Configuration /> matches snapshot 1`] = `
           </div>
         </div>
         <div class=\\"css-mik995 react-select__indicators\\">
-          <span class=\\"css-d8oujb react-select__indicator-separator\\">
+          <span class=\\"css-bgvzuu-indicatorSeparator react-select__indicator-separator\\">
           </span>
           <div aria-hidden=\\"true\\"
-               class=\\"css-1ep9fjw react-select__indicator react-select__dropdown-indicator\\"
+               class=\\"css-16pqwjk-indicatorContainer react-select__indicator react-select__dropdown-indicator\\"
           >
             <svg height=\\"20\\"
                  width=\\"20\\"
@@ -225,10 +225,10 @@ exports[`<Configuration /> matches snapshot 1`] = `
     </div>
     <div class=\\"d-flex flex-fill flex-lg-row flex-column justify-content-between\\">
       <div class=\\"flex-shrink-0 flex-grow-1 flex-basis-auto\\">
-        <div class=\\"css-10nd86i\\">
-          <div class=\\"css-7jxtyj react-select__control\\">
+        <div class=\\"css-1pcexqc-container\\">
+          <div class=\\"css-75iuk3-control react-select__control\\">
             <div class=\\"css-pb81dw react-select__value-container react-select__value-container--has-value\\">
-              <div class=\\"css-xp4uvy react-select__single-value\\">
+              <div class=\\"css-dvua67-singleValue react-select__single-value\\">
                 Use defaults from karma config file
               </div>
               <div class=\\"css-1g6gooi\\">
@@ -244,7 +244,7 @@ exports[`<Configuration /> matches snapshot 1`] = `
                          tabindex=\\"0\\"
                          value
                          aria-autocomplete=\\"list\\"
-                         style=\\"box-sizing:content-box;width:1px;background:0;border:0;font-size:inherit;opacity:1;outline:0;padding:0;color:inherit\\"
+                         style=\\"box-sizing:content-box;width:1px;label:input;background:0;border:0;font-size:inherit;opacity:1;outline:0;padding:0;color:inherit\\"
                   >
                   <div style=\\"position:absolute;top:0;left:0;visibility:hidden;height:0;overflow:scroll;white-space:pre\\">
                   </div>
@@ -252,10 +252,10 @@ exports[`<Configuration /> matches snapshot 1`] = `
               </div>
             </div>
             <div class=\\"css-mik995 react-select__indicators\\">
-              <span class=\\"css-d8oujb react-select__indicator-separator\\">
+              <span class=\\"css-bgvzuu-indicatorSeparator react-select__indicator-separator\\">
               </span>
               <div aria-hidden=\\"true\\"
-                   class=\\"css-1ep9fjw react-select__indicator react-select__dropdown-indicator\\"
+                   class=\\"css-16pqwjk-indicatorContainer react-select__indicator react-select__dropdown-indicator\\"
               >
                 <svg height=\\"20\\"
                      width=\\"20\\"
diff --git a/ui/src/Components/MainModal/__snapshots__/MainModalContent.test.js.snap b/ui/src/Components/MainModal/__snapshots__/MainModalContent.test.js.snap
index dac9b5a32..0e6eaf77d 100644
--- a/ui/src/Components/MainModal/__snapshots__/MainModalContent.test.js.snap
+++ b/ui/src/Components/MainModal/__snapshots__/MainModalContent.test.js.snap
@@ -187,10 +187,10 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
             Default alert group display
           </label>
         </div>
-        <div class=\\"css-10nd86i\\">
-          <div class=\\"css-7jxtyj react-select__control\\">
+        <div class=\\"css-1pcexqc-container\\">
+          <div class=\\"css-75iuk3-control react-select__control\\">
             <div class=\\"css-pb81dw react-select__value-container react-select__value-container--has-value\\">
-              <div class=\\"css-xp4uvy react-select__single-value\\">
+              <div class=\\"css-dvua67-singleValue react-select__single-value\\">
                 Collapse on mobile
               </div>
               <div class=\\"css-1g6gooi\\">
@@ -214,10 +214,10 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
               </div>
             </div>
             <div class=\\"css-mik995 react-select__indicators\\">
-              <span class=\\"css-d8oujb react-select__indicator-separator\\">
+              <span class=\\"css-bgvzuu-indicatorSeparator react-select__indicator-separator\\">
               </span>
               <div aria-hidden=\\"true\\"
-                   class=\\"css-1ep9fjw react-select__indicator react-select__dropdown-indicator\\"
+                   class=\\"css-16pqwjk-indicatorContainer react-select__indicator react-select__dropdown-indicator\\"
               >
                 <svg height=\\"20\\"
                      width=\\"20\\"
@@ -244,10 +244,10 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
         </div>
         <div class=\\"d-flex flex-fill flex-lg-row flex-column justify-content-between\\">
           <div class=\\"flex-shrink-0 flex-grow-1 flex-basis-auto\\">
-            <div class=\\"css-10nd86i\\">
-              <div class=\\"css-7jxtyj react-select__control\\">
+            <div class=\\"css-1pcexqc-container\\">
+              <div class=\\"css-75iuk3-control react-select__control\\">
                 <div class=\\"css-pb81dw react-select__value-container react-select__value-container--has-value\\">
-                  <div class=\\"css-xp4uvy react-select__single-value\\">
+                  <div class=\\"css-dvua67-singleValue react-select__single-value\\">
                     Use defaults from karma config file
                   </div>
                   <div class=\\"css-1g6gooi\\">
@@ -271,10 +271,10 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
                   </div>
                 </div>
                 <div class=\\"css-mik995 react-select__indicators\\">
-                  <span class=\\"css-d8oujb react-select__indicator-separator\\">
+                  <span class=\\"css-bgvzuu-indicatorSeparator react-select__indicator-separator\\">
                   </span>
                   <div aria-hidden=\\"true\\"
-                       class=\\"css-1ep9fjw react-select__indicator react-select__dropdown-indicator\\"
+                       class=\\"css-16pqwjk-indicatorContainer react-select__indicator react-select__dropdown-indicator\\"
                   >
                     <svg height=\\"20\\"
                          width=\\"20\\"
diff --git a/ui/src/Components/MultiSelect/__snapshots__/index.test.js.snap b/ui/src/Components/MultiSelect/__snapshots__/index.test.js.snap
index ec7253b7a..8d3f08cbc 100644
--- a/ui/src/Components/MultiSelect/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/MultiSelect/__snapshots__/index.test.js.snap
@@ -2,8 +2,8 @@
 
 exports[`<CustomMultiSelect /> matches snapshot when focused 1`] = `
 "
-<div class=\\"css-10nd86i\\">
-  <span class=\\"css-bl6clz\\"
+<div class=\\"css-1pcexqc-container\\">
+  <span class=\\"css-3esr4u-a11yText\\"
         aria-live=\\"assertive\\"
   >
     <p id=\\"aria-selection-event\\">
@@ -13,9 +13,9 @@ exports[`<CustomMultiSelect /> matches snapshot when focused 1`] = `
       &nbsp;  0 results available. Select is focused ,type to refine list, press Down to open the menu,
     </p>
   </span>
-  <div class=\\"css-7i0fzi react-select__control react-select__control--is-focused\\">
+  <div class=\\"css-1qu0514-control react-select__control react-select__control--is-focused\\">
     <div class=\\"css-pb81dw react-select__value-container\\">
-      <div class=\\"css-1492t68 react-select__placeholder\\">
+      <div class=\\"css-151xaom-placeholder react-select__placeholder\\">
         Select...
       </div>
       <div class=\\"css-1g6gooi\\">
@@ -39,10 +39,10 @@ exports[`<CustomMultiSelect /> matches snapshot when focused 1`] = `
       </div>
     </div>
     <div class=\\"css-mik995 react-select__indicators\\">
-      <span class=\\"css-d8oujb react-select__indicator-separator\\">
+      <span class=\\"css-bgvzuu-indicatorSeparator react-select__indicator-separator\\">
       </span>
       <div aria-hidden=\\"true\\"
-           class=\\"css-1uq0kb5 react-select__indicator react-select__dropdown-indicator\\"
+           class=\\"css-1thkkgx-indicatorContainer react-select__indicator react-select__dropdown-indicator\\"
       >
         <svg height=\\"20\\"
              width=\\"20\\"
@@ -63,10 +63,10 @@ exports[`<CustomMultiSelect /> matches snapshot when focused 1`] = `
 
 exports[`<CustomMultiSelect /> matches snapshot with a value 1`] = `
 "
-<div class=\\"css-10nd86i\\">
-  <div class=\\"css-7jxtyj react-select__control\\">
+<div class=\\"css-1pcexqc-container\\">
+  <div class=\\"css-75iuk3-control react-select__control\\">
     <div class=\\"css-pb81dw react-select__value-container react-select__value-container--has-value\\">
-      <div class=\\"css-xp4uvy react-select__single-value\\">
+      <div class=\\"css-dvua67-singleValue react-select__single-value\\">
         foo
       </div>
       <div class=\\"css-1g6gooi\\">
@@ -82,7 +82,7 @@ exports[`<CustomMultiSelect /> matches snapshot with a value 1`] = `
                  tabindex=\\"0\\"
                  value
                  aria-autocomplete=\\"list\\"
-                 style=\\"box-sizing:content-box;width:1px;background:0;border:0;font-size:inherit;opacity:1;outline:0;padding:0;color:inherit\\"
+                 style=\\"box-sizing:content-box;width:1px;label:input;background:0;border:0;font-size:inherit;opacity:1;outline:0;padding:0;color:inherit\\"
           >
           <div style=\\"position:absolute;top:0;left:0;visibility:hidden;height:0;overflow:scroll;white-space:pre\\">
           </div>
@@ -90,10 +90,10 @@ exports[`<CustomMultiSelect /> matches snapshot with a value 1`] = `
       </div>
     </div>
     <div class=\\"css-mik995 react-select__indicators\\">
-      <span class=\\"css-d8oujb react-select__indicator-separator\\">
+      <span class=\\"css-bgvzuu-indicatorSeparator react-select__indicator-separator\\">
       </span>
       <div aria-hidden=\\"true\\"
-           class=\\"css-1ep9fjw react-select__indicator react-select__dropdown-indicator\\"
+           class=\\"css-16pqwjk-indicatorContainer react-select__indicator react-select__dropdown-indicator\\"
       >
         <svg height=\\"20\\"
              width=\\"20\\"
@@ -114,10 +114,10 @@ exports[`<CustomMultiSelect /> matches snapshot with a value 1`] = `
 
 exports[`<CustomMultiSelect /> matches snapshot with defaults 1`] = `
 "
-<div class=\\"css-10nd86i\\">
-  <div class=\\"css-7jxtyj react-select__control\\">
+<div class=\\"css-1pcexqc-container\\">
+  <div class=\\"css-75iuk3-control react-select__control\\">
     <div class=\\"css-pb81dw react-select__value-container\\">
-      <div class=\\"css-1492t68 react-select__placeholder\\">
+      <div class=\\"css-151xaom-placeholder react-select__placeholder\\">
         Select...
       </div>
       <div class=\\"css-1g6gooi\\">
@@ -133,7 +133,7 @@ exports[`<CustomMultiSelect /> matches snapshot with defaults 1`] = `
                  tabindex=\\"0\\"
                  value
                  aria-autocomplete=\\"list\\"
-                 style=\\"box-sizing:content-box;width:1px;background:0;border:0;font-size:inherit;opacity:1;outline:0;padding:0;color:inherit\\"
+                 style=\\"box-sizing:content-box;width:1px;label:input;background:0;border:0;font-size:inherit;opacity:1;outline:0;padding:0;color:inherit\\"
           >
           <div style=\\"position:absolute;top:0;left:0;visibility:hidden;height:0;overflow:scroll;white-space:pre\\">
           </div>
@@ -141,10 +141,10 @@ exports[`<CustomMultiSelect /> matches snapshot with defaults 1`] = `
       </div>
     </div>
     <div class=\\"css-mik995 react-select__indicators\\">
-      <span class=\\"css-d8oujb react-select__indicator-separator\\">
+      <span class=\\"css-bgvzuu-indicatorSeparator react-select__indicator-separator\\">
       </span>
       <div aria-hidden=\\"true\\"
-           class=\\"css-1ep9fjw react-select__indicator react-select__dropdown-indicator\\"
+           class=\\"css-16pqwjk-indicatorContainer react-select__indicator react-select__dropdown-indicator\\"
       >
         <svg height=\\"20\\"
              width=\\"20\\"
@@ -165,10 +165,10 @@ exports[`<CustomMultiSelect /> matches snapshot with defaults 1`] = `
 
 exports[`<CustomMultiSelect /> matches snapshot with isDisabled=true 1`] = `
 "
-<div class=\\"css-1sontr1 react-select--is-disabled\\">
-  <div class=\\"css-rw4imq react-select__control react-select__control--is-disabled\\">
+<div class=\\"css-ssi0ig-container react-select--is-disabled\\">
+  <div class=\\"css-63ovm4-control react-select__control react-select__control--is-disabled\\">
     <div class=\\"css-57r8lk react-select__value-container react-select__value-container--has-value\\">
-      <div class=\\"css-142w6gm react-select__single-value react-select__single-value--is-disabled\\">
+      <div class=\\"css-ue83k8-singleValue react-select__single-value react-select__single-value--is-disabled\\">
         foo
       </div>
       <div class=\\"css-1g6gooi\\">
@@ -185,7 +185,7 @@ exports[`<CustomMultiSelect /> matches snapshot with isDisabled=true 1`] = `
                  tabindex=\\"0\\"
                  value
                  aria-autocomplete=\\"list\\"
-                 style=\\"box-sizing:content-box;width:1px;background:0;border:0;font-size:inherit;opacity:1;outline:0;padding:0;color:inherit\\"
+                 style=\\"box-sizing:content-box;width:1px;label:input;background:0;border:0;font-size:inherit;opacity:1;outline:0;padding:0;color:inherit\\"
           >
           <div style=\\"position:absolute;top:0;left:0;visibility:hidden;height:0;overflow:scroll;white-space:pre\\">
           </div>
@@ -193,10 +193,10 @@ exports[`<CustomMultiSelect /> matches snapshot with isDisabled=true 1`] = `
       </div>
     </div>
     <div class=\\"css-191n9vh react-select__indicators\\">
-      <span class=\\"css-ln5n5c react-select__indicator-separator\\">
+      <span class=\\"css-622gbt-indicatorSeparator react-select__indicator-separator\\">
       </span>
       <div aria-hidden=\\"true\\"
-           class=\\"css-1ep9fjw react-select__indicator react-select__dropdown-indicator\\"
+           class=\\"css-16pqwjk-indicatorContainer react-select__indicator react-select__dropdown-indicator\\"
       >
         <svg height=\\"20\\"
              width=\\"20\\"
@@ -217,10 +217,10 @@ exports[`<CustomMultiSelect /> matches snapshot with isDisabled=true 1`] = `
 
 exports[`<CustomMultiSelect /> matches snapshot with isMulti=true 1`] = `
 "
-<div class=\\"css-10nd86i\\">
-  <div class=\\"css-7jxtyj react-select__control\\">
+<div class=\\"css-1pcexqc-container\\">
+  <div class=\\"css-75iuk3-control react-select__control\\">
     <div class=\\"css-10war8y react-select__value-container react-select__value-container--is-multi\\">
-      <div class=\\"css-1492t68 react-select__placeholder\\">
+      <div class=\\"css-151xaom-placeholder react-select__placeholder\\">
         Select...
       </div>
       <div class=\\"css-1g6gooi\\">
@@ -236,7 +236,7 @@ exports[`<CustomMultiSelect /> matches snapshot with isMulti=true 1`] = `
                  tabindex=\\"0\\"
                  value
                  aria-autocomplete=\\"list\\"
-                 style=\\"box-sizing:content-box;width:1px;background:0;border:0;font-size:inherit;opacity:1;outline:0;padding:0;color:inherit\\"
+                 style=\\"box-sizing:content-box;width:1px;label:input;background:0;border:0;font-size:inherit;opacity:1;outline:0;padding:0;color:inherit\\"
           >
           <div style=\\"position:absolute;top:0;left:0;visibility:hidden;height:0;overflow:scroll;white-space:pre\\">
           </div>
@@ -244,10 +244,10 @@ exports[`<CustomMultiSelect /> matches snapshot with isMulti=true 1`] = `
       </div>
     </div>
     <div class=\\"css-mik995 react-select__indicators\\">
-      <span class=\\"css-d8oujb react-select__indicator-separator\\">
+      <span class=\\"css-bgvzuu-indicatorSeparator react-select__indicator-separator\\">
       </span>
       <div aria-hidden=\\"true\\"
-           class=\\"css-1ep9fjw react-select__indicator react-select__dropdown-indicator\\"
+           class=\\"css-16pqwjk-indicatorContainer react-select__indicator react-select__dropdown-indicator\\"
       >
         <svg height=\\"20\\"
              width=\\"20\\"
@@ -268,10 +268,10 @@ exports[`<CustomMultiSelect /> matches snapshot with isMulti=true 1`] = `
 
 exports[`<CustomMultiSelect /> matches snapshot with isMulti=true and a value 1`] = `
 "
-<div class=\\"css-10nd86i\\">
-  <div class=\\"css-7jxtyj react-select__control\\">
+<div class=\\"css-1pcexqc-container\\">
+  <div class=\\"css-75iuk3-control react-select__control\\">
     <div class=\\"css-10war8y react-select__value-container react-select__value-container--is-multi react-select__value-container--has-value\\">
-      <div class=\\"css-1y5uxcf react-select__multi-value\\">
+      <div class=\\"css-8oj454-multiValue react-select__multi-value\\">
         <div class=\\"css-xbn6jz react-select__multi-value__label\\">
           foo
         </div>
@@ -301,7 +301,7 @@ exports[`<CustomMultiSelect /> matches snapshot with isMulti=true and a value 1`
                  tabindex=\\"0\\"
                  value
                  aria-autocomplete=\\"list\\"
-                 style=\\"box-sizing:content-box;width:1px;background:0;border:0;font-size:inherit;opacity:1;outline:0;padding:0;color:inherit\\"
+                 style=\\"box-sizing:content-box;width:1px;label:input;background:0;border:0;font-size:inherit;opacity:1;outline:0;padding:0;color:inherit\\"
           >
           <div style=\\"position:absolute;top:0;left:0;visibility:hidden;height:0;overflow:scroll;white-space:pre\\">
           </div>
@@ -310,7 +310,7 @@ exports[`<CustomMultiSelect /> matches snapshot with isMulti=true and a value 1`
     </div>
     <div class=\\"css-mik995 react-select__indicators\\">
       <div aria-hidden=\\"true\\"
-           class=\\"css-1ep9fjw react-select__indicator react-select__clear-indicator\\"
+           class=\\"css-16pqwjk-indicatorContainer react-select__indicator react-select__clear-indicator\\"
       >
         <svg height=\\"20\\"
              width=\\"20\\"
@@ -323,10 +323,10 @@ exports[`<CustomMultiSelect /> matches snapshot with isMulti=true and a value 1`
           </path>
         </svg>
       </div>
-      <span class=\\"css-d8oujb react-select__indicator-separator\\">
+      <span class=\\"css-bgvzuu-indicatorSeparator react-select__indicator-separator\\">
       </span>
       <div aria-hidden=\\"true\\"
-           class=\\"css-1ep9fjw react-select__indicator react-select__dropdown-indicator\\"
+           class=\\"css-16pqwjk-indicatorContainer react-select__indicator react-select__dropdown-indicator\\"
       >
         <svg height=\\"20\\"
              width=\\"20\\"
diff --git a/ui/src/Components/SilenceModal/AlertManagerInput/__snapshots__/index.test.js.snap b/ui/src/Components/SilenceModal/AlertManagerInput/__snapshots__/index.test.js.snap
index 1b7086e8f..d111d7235 100644
--- a/ui/src/Components/SilenceModal/AlertManagerInput/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/SilenceModal/AlertManagerInput/__snapshots__/index.test.js.snap
@@ -2,10 +2,10 @@
 
 exports[`<AlertManagerInput /> matches snapshot 1`] = `
 "
-<div class=\\"css-10nd86i\\">
-  <div class=\\"css-7jxtyj react-select__control\\">
+<div class=\\"css-1pcexqc-container\\">
+  <div class=\\"css-75iuk3-control react-select__control\\">
     <div class=\\"css-10war8y react-select__value-container react-select__value-container--is-multi react-select__value-container--has-value\\">
-      <div class=\\"css-1y5uxcf react-select__multi-value\\">
+      <div class=\\"css-8oj454-multiValue react-select__multi-value\\">
         <div class=\\"css-xbn6jz react-select__multi-value__label\\">
           am1 | am2
         </div>
@@ -22,7 +22,7 @@ exports[`<AlertManagerInput /> matches snapshot 1`] = `
           </svg>
         </div>
       </div>
-      <div class=\\"css-1y5uxcf react-select__multi-value\\">
+      <div class=\\"css-8oj454-multiValue react-select__multi-value\\">
         <div class=\\"css-xbn6jz react-select__multi-value__label\\">
           am3
         </div>
@@ -52,7 +52,7 @@ exports[`<AlertManagerInput /> matches snapshot 1`] = `
                  tabindex=\\"0\\"
                  value
                  aria-autocomplete=\\"list\\"
-                 style=\\"box-sizing:content-box;width:1px;background:0;border:0;font-size:inherit;opacity:1;outline:0;padding:0;color:inherit\\"
+                 style=\\"box-sizing:content-box;width:1px;label:input;background:0;border:0;font-size:inherit;opacity:1;outline:0;padding:0;color:inherit\\"
           >
           <div style=\\"position:absolute;top:0;left:0;visibility:hidden;height:0;overflow:scroll;white-space:pre\\">
           </div>
@@ -61,7 +61,7 @@ exports[`<AlertManagerInput /> matches snapshot 1`] = `
     </div>
     <div class=\\"css-mik995 react-select__indicators\\">
       <div aria-hidden=\\"true\\"
-           class=\\"css-1ep9fjw react-select__indicator react-select__clear-indicator\\"
+           class=\\"css-16pqwjk-indicatorContainer react-select__indicator react-select__clear-indicator\\"
       >
         <svg height=\\"20\\"
              width=\\"20\\"
@@ -74,10 +74,10 @@ exports[`<AlertManagerInput /> matches snapshot 1`] = `
           </path>
         </svg>
       </div>
-      <span class=\\"css-d8oujb react-select__indicator-separator\\">
+      <span class=\\"css-bgvzuu-indicatorSeparator react-select__indicator-separator\\">
       </span>
       <div aria-hidden=\\"true\\"
-           class=\\"css-1ep9fjw react-select__indicator react-select__dropdown-indicator\\"
+           class=\\"css-16pqwjk-indicatorContainer react-select__indicator react-select__dropdown-indicator\\"
       >
         <svg height=\\"20\\"
              width=\\"20\\"
diff --git a/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelNameInput.test.js.snap b/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelNameInput.test.js.snap
index 76f2c0b92..42aa7b30d 100644
--- a/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelNameInput.test.js.snap
+++ b/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelNameInput.test.js.snap
@@ -2,10 +2,10 @@
 
 exports[`<LabelNameInput /> matches snapshot 1`] = `
 "
-<div class=\\"css-10nd86i\\">
-  <div class=\\"css-7jxtyj react-select__control\\">
+<div class=\\"css-1pcexqc-container\\">
+  <div class=\\"css-75iuk3-control react-select__control\\">
     <div class=\\"css-pb81dw react-select__value-container react-select__value-container--has-value\\">
-      <div class=\\"css-xp4uvy react-select__single-value\\">
+      <div class=\\"css-dvua67-singleValue react-select__single-value\\">
         name
       </div>
       <div class=\\"css-1g6gooi\\">
@@ -21,7 +21,7 @@ exports[`<LabelNameInput /> matches snapshot 1`] = `
                  tabindex=\\"0\\"
                  value
                  aria-autocomplete=\\"list\\"
-                 style=\\"box-sizing:content-box;width:1px;background:0;border:0;font-size:inherit;opacity:1;outline:0;padding:0;color:inherit\\"
+                 style=\\"box-sizing:content-box;width:1px;label:input;background:0;border:0;font-size:inherit;opacity:1;outline:0;padding:0;color:inherit\\"
           >
           <div style=\\"position:absolute;top:0;left:0;visibility:hidden;height:0;overflow:scroll;white-space:pre\\">
           </div>
@@ -29,10 +29,10 @@ exports[`<LabelNameInput /> matches snapshot 1`] = `
       </div>
     </div>
     <div class=\\"css-mik995 react-select__indicators\\">
-      <span class=\\"css-d8oujb react-select__indicator-separator\\">
+      <span class=\\"css-bgvzuu-indicatorSeparator react-select__indicator-separator\\">
       </span>
       <div aria-hidden=\\"true\\"
-           class=\\"css-1ep9fjw react-select__indicator react-select__dropdown-indicator\\"
+           class=\\"css-16pqwjk-indicatorContainer react-select__indicator react-select__dropdown-indicator\\"
       >
         <svg height=\\"20\\"
              width=\\"20\\"
diff --git a/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelValueInput.test.js.snap b/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelValueInput.test.js.snap
index 4844b5a35..550c753e5 100644
--- a/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelValueInput.test.js.snap
+++ b/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelValueInput.test.js.snap
@@ -2,8 +2,8 @@
 
 exports[`<LabelValueInput /> matches snapshot 1`] = `
 "
-<div class=\\"css-10nd86i\\">
-  <div class=\\"css-7jxtyj react-select__control\\">
+<div class=\\"css-1pcexqc-container\\">
+  <div class=\\"css-75iuk3-control react-select__control\\">
     <div class=\\"css-10war8y react-select__value-container react-select__value-container--is-multi\\">
       <div title=\\"Number of alerts matching this label\\"
            class
@@ -29,7 +29,7 @@ exports[`<LabelValueInput /> matches snapshot 1`] = `
         </span>
       </div>
       <div>
-        <div class=\\"css-1492t68 react-select__placeholder\\">
+        <div class=\\"css-151xaom-placeholder react-select__placeholder\\">
           Label value
         </div>
       </div>
@@ -46,7 +46,7 @@ exports[`<LabelValueInput /> matches snapshot 1`] = `
                  tabindex=\\"0\\"
                  value
                  aria-autocomplete=\\"list\\"
-                 style=\\"box-sizing:content-box;width:1px;background:0;border:0;font-size:inherit;opacity:1;outline:0;padding:0;color:inherit\\"
+                 style=\\"box-sizing:content-box;width:1px;label:input;background:0;border:0;font-size:inherit;opacity:1;outline:0;padding:0;color:inherit\\"
           >
           <div style=\\"position:absolute;top:0;left:0;visibility:hidden;height:0;overflow:scroll;white-space:pre\\">
           </div>
@@ -54,10 +54,10 @@ exports[`<LabelValueInput /> matches snapshot 1`] = `
       </div>
     </div>
     <div class=\\"css-mik995 react-select__indicators\\">
-      <span class=\\"css-d8oujb react-select__indicator-separator\\">
+      <span class=\\"css-bgvzuu-indicatorSeparator react-select__indicator-separator\\">
       </span>
       <div aria-hidden=\\"true\\"
-           class=\\"css-1ep9fjw react-select__indicator react-select__dropdown-indicator\\"
+           class=\\"css-16pqwjk-indicatorContainer react-select__indicator react-select__dropdown-indicator\\"
       >
         <svg height=\\"20\\"
              width=\\"20\\"
diff --git a/ui/yarn.lock b/ui/yarn.lock
index c88ad7825..b4e1c5b35 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -9582,10 +9582,10 @@ react-scripts@2.1.8:
   optionalDependencies:
     fsevents "1.2.4"
 
-react-select@2.4.2:
-  version "2.4.2"
-  resolved "https://registry.yarnpkg.com/react-select/-/react-select-2.4.2.tgz#27da80e3880e92b081be607207bebdf63bcf4f3a"
-  integrity sha512-5xFOQ6JJktkY5NTaHrc6x9mKwIjhNIiBkGic1j71uyY+ulFpRFra6f4WKLd9fuCylk4WjLpO5zDhdF4CAcwFzA==
+react-select@2.4.3:
+  version "2.4.3"
+  resolved "https://registry.yarnpkg.com/react-select/-/react-select-2.4.3.tgz#62efdf76d7e33e9bde22d907a0cc8abd0aeab656"
+  integrity sha512-cmxNaiHpviRYkojeW9rGEUJ4jpX7QTmPe2wcscwA4d1lStzw/cJtr4ft5H2O/YhfpkrcwaLghu3XmEYdXhBo8Q==
   dependencies:
     classnames "^2.2.5"
     emotion "^9.1.2"