From 2e8115bf705573efa6efe761fa2daa2bd623f9a5 Mon Sep 17 00:00:00 2001
From: Sophie Stadler <sophie.stadler@mongodb.com>
Date: Thu, 8 Feb 2024 17:22:17 -0500
Subject: [PATCH] Update snapshots

---
 .../EditableTagField.stories.storyshot        | 252 +++++++++++-------
 .../FilterBadges.stories.storyshot            |  88 +++---
 .../HistoryTableTestSearch.stories.storyshot  |  45 ++--
 .../PageSizeSelector.stories.storyshot        |   6 +-
 .../SpruceForm.stories.storyshot              | 106 +++++---
 .../TableControl.stories.storyshot            |   6 +-
 .../TextInputWithGlyph.stories.storyshot      |  44 +--
 .../TextInputWithValidation.stories.storyshot |  42 +--
 .../TupleSelect.stories.storyshot             |  47 ++--
 ...lectWithRegexConditional.stories.storyshot |  55 ++--
 .../ProjectHealth.stories.storyshot           |   4 +-
 .../ConfigurePatchCore.stories.storyshot      |  85 +++---
 12 files changed, 489 insertions(+), 291 deletions(-)

diff --git a/src/components/EditableTagField/__snapshots__/EditableTagField.stories.storyshot b/src/components/EditableTagField/__snapshots__/EditableTagField.stories.storyshot
index c0b844ca17..013cf33724 100644
--- a/src/components/EditableTagField/__snapshots__/EditableTagField.stories.storyshot
+++ b/src/components/EditableTagField/__snapshots__/EditableTagField.stories.storyshot
@@ -19,35 +19,47 @@ exports[`Snapshot Tests EditableTagField.stories Default 1`] = `
             class="css-jmhbun-FlexColumnContainer-Section e161fbrp1"
           >
             <div
-              class="leafygreen-ui-xtefr5"
+              class="leafygreen-ui-1br9h7w"
             >
               <div
-                class="leafygreen-ui-a533bt"
+                class="leafygreen-ui-e3fvh5"
               >
                 <label
-                  class="leafygreen-ui-gr5280"
+                  class="leafygreen-ui-1qjbbjd"
                   for="tag_key_1"
+                  id="lg-form-field-label-3"
                 >
                   Key
                 </label>
               </div>
               <div
-                class="leafygreen-ui-lzja97"
+                aria-disabled="false"
+                class="leafygreen-ui-mrtshz"
               >
-                <input
-                  aria-invalid="false"
-                  autocomplete="on"
-                  class="leafygreen-ui-6i61vl"
-                  data-cy="user-tag-key-field"
-                  id="tag_key_1"
-                  required=""
-                  type="text"
-                  value="keyA"
-                />
                 <div
-                  class="lg-ui-icon-selector-0000 leafygreen-ui-uy5fvv"
+                  class="leafygreen-ui-1ago99h"
+                >
+                  <input
+                    aria-describedby=""
+                    aria-invalid="false"
+                    aria-label=""
+                    aria-labelledby="lg-form-field-label-3"
+                    autocomplete="on"
+                    class="lg-ui-form-field-input-0000 leafygreen-ui-vrj1me"
+                    data-cy="user-tag-key-field"
+                    id="tag_key_1"
+                    required=""
+                    type="text"
+                    value="keyA"
+                  />
+                </div>
+                <div
+                  class="leafygreen-ui-iwiovi"
                 />
               </div>
+              <div
+                class="leafygreen-ui-jsxxy6"
+              />
             </div>
           </div>
         </div>
@@ -58,35 +70,47 @@ exports[`Snapshot Tests EditableTagField.stories Default 1`] = `
             class="css-jmhbun-FlexColumnContainer-Section e161fbrp1"
           >
             <div
-              class="leafygreen-ui-xtefr5"
+              class="leafygreen-ui-1br9h7w"
             >
               <div
-                class="leafygreen-ui-a533bt"
+                class="leafygreen-ui-e3fvh5"
               >
                 <label
-                  class="leafygreen-ui-gr5280"
+                  class="leafygreen-ui-1qjbbjd"
                   for="tag_value_1"
+                  id="lg-form-field-label-7"
                 >
                   Value
                 </label>
               </div>
               <div
-                class="leafygreen-ui-lzja97"
+                aria-disabled="false"
+                class="leafygreen-ui-mrtshz"
               >
-                <input
-                  aria-invalid="false"
-                  autocomplete="on"
-                  class="leafygreen-ui-6i61vl"
-                  data-cy="user-tag-value-field"
-                  id="tag_value_1"
-                  required=""
-                  type="text"
-                  value="valueA"
-                />
                 <div
-                  class="lg-ui-icon-selector-0000 leafygreen-ui-uy5fvv"
+                  class="leafygreen-ui-1ago99h"
+                >
+                  <input
+                    aria-describedby=""
+                    aria-invalid="false"
+                    aria-label=""
+                    aria-labelledby="lg-form-field-label-7"
+                    autocomplete="on"
+                    class="lg-ui-form-field-input-0000 leafygreen-ui-vrj1me"
+                    data-cy="user-tag-value-field"
+                    id="tag_value_1"
+                    required=""
+                    type="text"
+                    value="valueA"
+                  />
+                </div>
+                <div
+                  class="leafygreen-ui-iwiovi"
                 />
               </div>
+              <div
+                class="leafygreen-ui-jsxxy6"
+              />
             </div>
           </div>
         </div>
@@ -139,35 +163,47 @@ exports[`Snapshot Tests EditableTagField.stories Default 1`] = `
             class="css-jmhbun-FlexColumnContainer-Section e161fbrp1"
           >
             <div
-              class="leafygreen-ui-xtefr5"
+              class="leafygreen-ui-1br9h7w"
             >
               <div
-                class="leafygreen-ui-a533bt"
+                class="leafygreen-ui-e3fvh5"
               >
                 <label
-                  class="leafygreen-ui-gr5280"
+                  class="leafygreen-ui-1qjbbjd"
                   for="tag_key_2"
+                  id="lg-form-field-label-11"
                 >
                   Key
                 </label>
               </div>
               <div
-                class="leafygreen-ui-lzja97"
+                aria-disabled="false"
+                class="leafygreen-ui-mrtshz"
               >
-                <input
-                  aria-invalid="false"
-                  autocomplete="on"
-                  class="leafygreen-ui-6i61vl"
-                  data-cy="user-tag-key-field"
-                  id="tag_key_2"
-                  required=""
-                  type="text"
-                  value="keyB"
-                />
                 <div
-                  class="lg-ui-icon-selector-0000 leafygreen-ui-uy5fvv"
+                  class="leafygreen-ui-1ago99h"
+                >
+                  <input
+                    aria-describedby=""
+                    aria-invalid="false"
+                    aria-label=""
+                    aria-labelledby="lg-form-field-label-11"
+                    autocomplete="on"
+                    class="lg-ui-form-field-input-0000 leafygreen-ui-vrj1me"
+                    data-cy="user-tag-key-field"
+                    id="tag_key_2"
+                    required=""
+                    type="text"
+                    value="keyB"
+                  />
+                </div>
+                <div
+                  class="leafygreen-ui-iwiovi"
                 />
               </div>
+              <div
+                class="leafygreen-ui-jsxxy6"
+              />
             </div>
           </div>
         </div>
@@ -178,35 +214,47 @@ exports[`Snapshot Tests EditableTagField.stories Default 1`] = `
             class="css-jmhbun-FlexColumnContainer-Section e161fbrp1"
           >
             <div
-              class="leafygreen-ui-xtefr5"
+              class="leafygreen-ui-1br9h7w"
             >
               <div
-                class="leafygreen-ui-a533bt"
+                class="leafygreen-ui-e3fvh5"
               >
                 <label
-                  class="leafygreen-ui-gr5280"
+                  class="leafygreen-ui-1qjbbjd"
                   for="tag_value_2"
+                  id="lg-form-field-label-15"
                 >
                   Value
                 </label>
               </div>
               <div
-                class="leafygreen-ui-lzja97"
+                aria-disabled="false"
+                class="leafygreen-ui-mrtshz"
               >
-                <input
-                  aria-invalid="false"
-                  autocomplete="on"
-                  class="leafygreen-ui-6i61vl"
-                  data-cy="user-tag-value-field"
-                  id="tag_value_2"
-                  required=""
-                  type="text"
-                  value="valueB"
-                />
                 <div
-                  class="lg-ui-icon-selector-0000 leafygreen-ui-uy5fvv"
+                  class="leafygreen-ui-1ago99h"
+                >
+                  <input
+                    aria-describedby=""
+                    aria-invalid="false"
+                    aria-label=""
+                    aria-labelledby="lg-form-field-label-15"
+                    autocomplete="on"
+                    class="lg-ui-form-field-input-0000 leafygreen-ui-vrj1me"
+                    data-cy="user-tag-value-field"
+                    id="tag_value_2"
+                    required=""
+                    type="text"
+                    value="valueB"
+                  />
+                </div>
+                <div
+                  class="leafygreen-ui-iwiovi"
                 />
               </div>
+              <div
+                class="leafygreen-ui-jsxxy6"
+              />
             </div>
           </div>
         </div>
@@ -259,35 +307,47 @@ exports[`Snapshot Tests EditableTagField.stories Default 1`] = `
             class="css-jmhbun-FlexColumnContainer-Section e161fbrp1"
           >
             <div
-              class="leafygreen-ui-xtefr5"
+              class="leafygreen-ui-1br9h7w"
             >
               <div
-                class="leafygreen-ui-a533bt"
+                class="leafygreen-ui-e3fvh5"
               >
                 <label
-                  class="leafygreen-ui-gr5280"
+                  class="leafygreen-ui-1qjbbjd"
                   for="tag_key_3"
+                  id="lg-form-field-label-19"
                 >
                   Key
                 </label>
               </div>
               <div
-                class="leafygreen-ui-lzja97"
+                aria-disabled="false"
+                class="leafygreen-ui-mrtshz"
               >
-                <input
-                  aria-invalid="false"
-                  autocomplete="on"
-                  class="leafygreen-ui-6i61vl"
-                  data-cy="user-tag-key-field"
-                  id="tag_key_3"
-                  required=""
-                  type="text"
-                  value="keyC"
-                />
                 <div
-                  class="lg-ui-icon-selector-0000 leafygreen-ui-uy5fvv"
+                  class="leafygreen-ui-1ago99h"
+                >
+                  <input
+                    aria-describedby=""
+                    aria-invalid="false"
+                    aria-label=""
+                    aria-labelledby="lg-form-field-label-19"
+                    autocomplete="on"
+                    class="lg-ui-form-field-input-0000 leafygreen-ui-vrj1me"
+                    data-cy="user-tag-key-field"
+                    id="tag_key_3"
+                    required=""
+                    type="text"
+                    value="keyC"
+                  />
+                </div>
+                <div
+                  class="leafygreen-ui-iwiovi"
                 />
               </div>
+              <div
+                class="leafygreen-ui-jsxxy6"
+              />
             </div>
           </div>
         </div>
@@ -298,35 +358,47 @@ exports[`Snapshot Tests EditableTagField.stories Default 1`] = `
             class="css-jmhbun-FlexColumnContainer-Section e161fbrp1"
           >
             <div
-              class="leafygreen-ui-xtefr5"
+              class="leafygreen-ui-1br9h7w"
             >
               <div
-                class="leafygreen-ui-a533bt"
+                class="leafygreen-ui-e3fvh5"
               >
                 <label
-                  class="leafygreen-ui-gr5280"
+                  class="leafygreen-ui-1qjbbjd"
                   for="tag_value_3"
+                  id="lg-form-field-label-23"
                 >
                   Value
                 </label>
               </div>
               <div
-                class="leafygreen-ui-lzja97"
+                aria-disabled="false"
+                class="leafygreen-ui-mrtshz"
               >
-                <input
-                  aria-invalid="false"
-                  autocomplete="on"
-                  class="leafygreen-ui-6i61vl"
-                  data-cy="user-tag-value-field"
-                  id="tag_value_3"
-                  required=""
-                  type="text"
-                  value="valueC"
-                />
                 <div
-                  class="lg-ui-icon-selector-0000 leafygreen-ui-uy5fvv"
+                  class="leafygreen-ui-1ago99h"
+                >
+                  <input
+                    aria-describedby=""
+                    aria-invalid="false"
+                    aria-label=""
+                    aria-labelledby="lg-form-field-label-23"
+                    autocomplete="on"
+                    class="lg-ui-form-field-input-0000 leafygreen-ui-vrj1me"
+                    data-cy="user-tag-value-field"
+                    id="tag_value_3"
+                    required=""
+                    type="text"
+                    value="valueC"
+                  />
+                </div>
+                <div
+                  class="leafygreen-ui-iwiovi"
                 />
               </div>
+              <div
+                class="leafygreen-ui-jsxxy6"
+              />
             </div>
           </div>
         </div>
diff --git a/src/components/FilterBadges/__snapshots__/FilterBadges.stories.storyshot b/src/components/FilterBadges/__snapshots__/FilterBadges.stories.storyshot
index 2f8083bc61..4ef1b9a069 100644
--- a/src/components/FilterBadges/__snapshots__/FilterBadges.stories.storyshot
+++ b/src/components/FilterBadges/__snapshots__/FilterBadges.stories.storyshot
@@ -54,66 +54,90 @@ exports[`Snapshot Tests FilterBadges.stories Default 1`] = `
     </div>
     <div>
       <div
-        class="leafygreen-ui-xtefr5"
+        class="leafygreen-ui-1br9h7w"
       >
         <div
-          class="leafygreen-ui-a533bt"
+          class="leafygreen-ui-e3fvh5"
         >
           <label
-            class="leafygreen-ui-gr5280"
-            for="textinput-1"
+            class="leafygreen-ui-1qjbbjd"
+            for="lg-form-field-input-31"
+            id="lg-form-field-label-28"
           >
             key
           </label>
         </div>
         <div
-          class="leafygreen-ui-lzja97"
+          aria-disabled="false"
+          class="leafygreen-ui-mrtshz"
         >
-          <input
-            aria-invalid="false"
-            autocomplete="on"
-            class="leafygreen-ui-6i61vl"
-            id="textinput-1"
-            placeholder="key"
-            required=""
-            type="text"
-            value=""
-          />
           <div
-            class="lg-ui-icon-selector-0000 leafygreen-ui-uy5fvv"
+            class="leafygreen-ui-1ago99h"
+          >
+            <input
+              aria-describedby=""
+              aria-invalid="false"
+              aria-label=""
+              aria-labelledby="lg-form-field-label-28"
+              autocomplete="on"
+              class="lg-ui-form-field-input-0000 leafygreen-ui-vrj1me"
+              id="lg-form-field-input-31"
+              placeholder="key"
+              required=""
+              type="text"
+              value=""
+            />
+          </div>
+          <div
+            class="leafygreen-ui-iwiovi"
           />
         </div>
+        <div
+          class="leafygreen-ui-jsxxy6"
+        />
       </div>
       <div
-        class="leafygreen-ui-xtefr5"
+        class="leafygreen-ui-1br9h7w"
       >
         <div
-          class="leafygreen-ui-a533bt"
+          class="leafygreen-ui-e3fvh5"
         >
           <label
-            class="leafygreen-ui-gr5280"
-            for="textinput-2"
+            class="leafygreen-ui-1qjbbjd"
+            for="lg-form-field-input-35"
+            id="lg-form-field-label-32"
           >
             value
           </label>
         </div>
         <div
-          class="leafygreen-ui-lzja97"
+          aria-disabled="false"
+          class="leafygreen-ui-mrtshz"
         >
-          <input
-            aria-invalid="false"
-            autocomplete="on"
-            class="leafygreen-ui-6i61vl"
-            id="textinput-2"
-            placeholder="value"
-            required=""
-            type="text"
-            value=""
-          />
           <div
-            class="lg-ui-icon-selector-0000 leafygreen-ui-uy5fvv"
+            class="leafygreen-ui-1ago99h"
+          >
+            <input
+              aria-describedby=""
+              aria-invalid="false"
+              aria-label=""
+              aria-labelledby="lg-form-field-label-32"
+              autocomplete="on"
+              class="lg-ui-form-field-input-0000 leafygreen-ui-vrj1me"
+              id="lg-form-field-input-35"
+              placeholder="value"
+              required=""
+              type="text"
+              value=""
+            />
+          </div>
+          <div
+            class="leafygreen-ui-iwiovi"
           />
         </div>
+        <div
+          class="leafygreen-ui-jsxxy6"
+        />
       </div>
       <button
         aria-disabled="false"
diff --git a/src/components/HistoryTable/HistoryTableTestSearch/__snapshots__/HistoryTableTestSearch.stories.storyshot b/src/components/HistoryTable/HistoryTableTestSearch/__snapshots__/HistoryTableTestSearch.stories.storyshot
index c2053ef788..e3349561df 100644
--- a/src/components/HistoryTable/HistoryTableTestSearch/__snapshots__/HistoryTableTestSearch.stories.storyshot
+++ b/src/components/HistoryTable/HistoryTableTestSearch/__snapshots__/HistoryTableTestSearch.stories.storyshot
@@ -12,36 +12,47 @@ exports[`Snapshot Tests Components/HistoryTable/HistoryTableTestSearch Default 1
         class="css-mk4qpy-TextInputWrapper e13gwrw81"
       >
         <div
-          class="leafygreen-ui-xtefr5"
+          class="leafygreen-ui-1br9h7w"
         >
           <div
-            class="leafygreen-ui-a533bt"
+            class="leafygreen-ui-e3fvh5"
           >
             <label
-              class="leafygreen-ui-gr5280"
-              for="textinput-3"
+              class="leafygreen-ui-1qjbbjd"
+              for="lg-form-field-input-65"
+              id="lg-form-field-label-62"
             >
               Filter by Failed Tests
             </label>
           </div>
           <div
-            class="leafygreen-ui-lzja97"
+            aria-disabled="false"
+            class="leafygreen-ui-mrtshz"
           >
-            <input
-              aria-invalid="false"
-              aria-label="history-table-test-search-input"
-              autocomplete="on"
-              class="leafygreen-ui-6i61vl"
-              id="textinput-3"
-              placeholder="Search test name regex"
-              required=""
-              type="search"
-              value=""
-            />
             <div
-              class="lg-ui-icon-selector-0000 leafygreen-ui-uy5fvv"
+              class="leafygreen-ui-1ago99h"
+            >
+              <input
+                aria-describedby=""
+                aria-invalid="false"
+                aria-label=""
+                aria-labelledby="lg-form-field-label-62"
+                autocomplete="on"
+                class="lg-ui-form-field-input-0000 leafygreen-ui-vrj1me"
+                id="lg-form-field-input-65"
+                placeholder="Search test name regex"
+                required=""
+                type="search"
+                value=""
+              />
+            </div>
+            <div
+              class="leafygreen-ui-iwiovi"
             />
           </div>
+          <div
+            class="leafygreen-ui-jsxxy6"
+          />
         </div>
         <div
           class="css-4bamt4-IconWrapper e13gwrw80"
diff --git a/src/components/PageSizeSelector/__snapshots__/PageSizeSelector.stories.storyshot b/src/components/PageSizeSelector/__snapshots__/PageSizeSelector.stories.storyshot
index 279d3c5a95..f181c9252e 100644
--- a/src/components/PageSizeSelector/__snapshots__/PageSizeSelector.stories.storyshot
+++ b/src/components/PageSizeSelector/__snapshots__/PageSizeSelector.stories.storyshot
@@ -6,15 +6,15 @@ exports[`Snapshot Tests PageSizeSelector.stories Default 1`] = `
     class="leafygreen-ui-1iyoj2o css-5krlfz-StyledSelect ekttol50"
   >
     <button
-      aria-controls="select-184-menu"
-      aria-describedby="select-184-description"
+      aria-controls="select-220-menu"
+      aria-describedby="select-220-description"
       aria-disabled="false"
       aria-expanded="false"
       aria-invalid="false"
       aria-labelledby="page-size-select"
       class="lg-ui-button-0000 leafygreen-ui-3wvwqe"
       data-testid="leafygreen-ui-select-menubutton"
-      id="select-185"
+      id="select-221"
       type="button"
       value="10"
     >
diff --git a/src/components/SpruceForm/__snapshots__/SpruceForm.stories.storyshot b/src/components/SpruceForm/__snapshots__/SpruceForm.stories.storyshot
index 2466b31ba7..f7b5501ecb 100644
--- a/src/components/SpruceForm/__snapshots__/SpruceForm.stories.storyshot
+++ b/src/components/SpruceForm/__snapshots__/SpruceForm.stories.storyshot
@@ -38,22 +38,22 @@ exports[`Snapshot Tests SpruceForm.stories Example1 1`] = `
                   >
                     <label
                       class="leafygreen-ui-nf64md"
-                      for="select-191"
-                      id="select-190-label"
+                      for="select-227"
+                      id="select-226-label"
                     >
                       Project Cloning Method
                     </label>
                   </div>
                   <button
-                    aria-controls="select-190-menu"
-                    aria-describedby="select-190-description"
+                    aria-controls="select-226-menu"
+                    aria-describedby="select-226-description"
                     aria-disabled="false"
                     aria-expanded="false"
                     aria-invalid="false"
-                    aria-labelledby="select-190-label"
+                    aria-labelledby="select-226-label"
                     class="lg-ui-button-0000 leafygreen-ui-c8np5"
                     data-testid="leafygreen-ui-select-menubutton"
-                    id="select-191"
+                    id="select-227"
                     type="button"
                     value="legacy-ssh"
                   >
@@ -160,35 +160,46 @@ exports[`Snapshot Tests SpruceForm.stories Example1 1`] = `
                           class="css-cjejq9-ElementWrapper ee4bs9n0"
                         >
                           <div
-                            class="css-1kbcljo-StyledTextInput eevpusu6 leafygreen-ui-xtefr5"
+                            class="leafygreen-ui-1br9h7w css-1kbcljo-StyledTextInput eevpusu6"
                           >
                             <div
-                              class="leafygreen-ui-a533bt"
+                              class="leafygreen-ui-e3fvh5"
                             >
                               <label
-                                class="leafygreen-ui-gr5280"
-                                for="textinput-4"
+                                class="leafygreen-ui-1qjbbjd"
+                                for="lg-form-field-input-231"
+                                id="lg-form-field-label-228"
                               >
                                 key
                               </label>
                             </div>
                             <div
-                              class="leafygreen-ui-lzja97"
+                              aria-disabled="false"
+                              class="leafygreen-ui-mrtshz"
                             >
-                              <input
-                                aria-invalid="false"
-                                aria-label="key"
-                                autocomplete="on"
-                                class="leafygreen-ui-6i61vl"
-                                id="textinput-4"
-                                required=""
-                                type="text"
-                                value="Sample Input"
-                              />
                               <div
-                                class="lg-ui-icon-selector-0000 leafygreen-ui-uy5fvv"
+                                class="leafygreen-ui-1ago99h"
+                              >
+                                <input
+                                  aria-describedby=""
+                                  aria-invalid="false"
+                                  aria-label=""
+                                  aria-labelledby="lg-form-field-label-228"
+                                  autocomplete="on"
+                                  class="lg-ui-form-field-input-0000 leafygreen-ui-vrj1me"
+                                  id="lg-form-field-input-231"
+                                  required=""
+                                  type="text"
+                                  value="Sample Input"
+                                />
+                              </div>
+                              <div
+                                class="leafygreen-ui-iwiovi"
                               />
                             </div>
+                            <div
+                              class="leafygreen-ui-jsxxy6"
+                            />
                           </div>
                         </div>
                       </div>
@@ -200,35 +211,46 @@ exports[`Snapshot Tests SpruceForm.stories Example1 1`] = `
                           class="css-cjejq9-ElementWrapper ee4bs9n0"
                         >
                           <div
-                            class="css-1kbcljo-StyledTextInput eevpusu6 leafygreen-ui-xtefr5"
+                            class="leafygreen-ui-1br9h7w css-1kbcljo-StyledTextInput eevpusu6"
                           >
                             <div
-                              class="leafygreen-ui-a533bt"
+                              class="leafygreen-ui-e3fvh5"
                             >
                               <label
-                                class="leafygreen-ui-gr5280"
-                                for="textinput-5"
+                                class="leafygreen-ui-1qjbbjd"
+                                for="lg-form-field-input-235"
+                                id="lg-form-field-label-232"
                               >
                                 value
                               </label>
                             </div>
                             <div
-                              class="leafygreen-ui-lzja97"
+                              aria-disabled="false"
+                              class="leafygreen-ui-mrtshz"
                             >
-                              <input
-                                aria-invalid="false"
-                                aria-label="value"
-                                autocomplete="on"
-                                class="leafygreen-ui-6i61vl"
-                                id="textinput-5"
-                                required=""
-                                type="text"
-                                value="Sample Input"
-                              />
                               <div
-                                class="lg-ui-icon-selector-0000 leafygreen-ui-uy5fvv"
+                                class="leafygreen-ui-1ago99h"
+                              >
+                                <input
+                                  aria-describedby=""
+                                  aria-invalid="false"
+                                  aria-label=""
+                                  aria-labelledby="lg-form-field-label-232"
+                                  autocomplete="on"
+                                  class="lg-ui-form-field-input-0000 leafygreen-ui-vrj1me"
+                                  id="lg-form-field-input-235"
+                                  required=""
+                                  type="text"
+                                  value="Sample Input"
+                                />
+                              </div>
+                              <div
+                                class="leafygreen-ui-iwiovi"
                               />
                             </div>
+                            <div
+                              class="leafygreen-ui-jsxxy6"
+                            />
                           </div>
                         </div>
                       </div>
@@ -284,13 +306,13 @@ exports[`Snapshot Tests SpruceForm.stories Example1 1`] = `
                 >
                   <label
                     class="leafygreen-ui-1fi5x3a"
-                    for="textarea-192"
+                    for="textarea-236"
                   >
                     Valid Projects
                   </label>
                   <textarea
                     class="leafygreen-ui-18em0fn"
-                    id="textarea-192"
+                    id="textarea-236"
                     rows="5"
                     title="Valid Projects"
                   />
@@ -578,7 +600,7 @@ exports[`Snapshot Tests SpruceForm.stories Example2 1`] = `
                     >
                       <input
                         aria-checked="false"
-                        aria-describedby="lg-193"
+                        aria-describedby="lg-237"
                         aria-disabled="false"
                         class="lg-ui-radio-group-0002 leafygreen-ui-1iwed1m"
                         id="radio-group--0"
@@ -605,7 +627,7 @@ exports[`Snapshot Tests SpruceForm.stories Example2 1`] = `
                     >
                       <input
                         aria-checked="false"
-                        aria-describedby="lg-194"
+                        aria-describedby="lg-238"
                         aria-disabled="false"
                         class="lg-ui-radio-group-0002 leafygreen-ui-1iwed1m"
                         id="radio-group--1"
diff --git a/src/components/Table/TableControl/__snapshots__/TableControl.stories.storyshot b/src/components/Table/TableControl/__snapshots__/TableControl.stories.storyshot
index 389fff5293..5e7ebc7767 100644
--- a/src/components/Table/TableControl/__snapshots__/TableControl.stories.storyshot
+++ b/src/components/Table/TableControl/__snapshots__/TableControl.stories.storyshot
@@ -128,8 +128,8 @@ exports[`Snapshot Tests TableControl.stories Default 1`] = `
         class="leafygreen-ui-1iyoj2o css-5krlfz-StyledSelect ekttol50"
       >
         <button
-          aria-controls="select-195-menu"
-          aria-describedby="select-195-description"
+          aria-controls="select-239-menu"
+          aria-describedby="select-239-description"
           aria-disabled="false"
           aria-expanded="false"
           aria-invalid="false"
@@ -137,7 +137,7 @@ exports[`Snapshot Tests TableControl.stories Default 1`] = `
           class="lg-ui-button-0000 leafygreen-ui-3wvwqe"
           data-cy="tasks-table-page-size-selector"
           data-testid="leafygreen-ui-select-menubutton"
-          id="select-196"
+          id="select-240"
           type="button"
           value="10"
         >
diff --git a/src/components/TextInputWithGlyph/__snapshots__/TextInputWithGlyph.stories.storyshot b/src/components/TextInputWithGlyph/__snapshots__/TextInputWithGlyph.stories.storyshot
index d122e0af49..bdab46e37d 100644
--- a/src/components/TextInputWithGlyph/__snapshots__/TextInputWithGlyph.stories.storyshot
+++ b/src/components/TextInputWithGlyph/__snapshots__/TextInputWithGlyph.stories.storyshot
@@ -6,35 +6,47 @@ exports[`Snapshot Tests Components/TextInput/TextInputWithGlyph Default 1`] = `
     class="css-mk4qpy-TextInputWrapper e13gwrw81"
   >
     <div
-      class="leafygreen-ui-xtefr5"
+      class="leafygreen-ui-1br9h7w"
     >
       <div
-        class="leafygreen-ui-a533bt"
+        class="leafygreen-ui-e3fvh5"
       >
         <label
-          class="leafygreen-ui-gr5280"
-          for="textinput-6"
+          class="leafygreen-ui-1qjbbjd"
+          for="lg-form-field-input-244"
+          id="lg-form-field-label-241"
         >
           Some search field
         </label>
       </div>
       <div
-        class="leafygreen-ui-lzja97"
+        aria-disabled="false"
+        class="leafygreen-ui-mrtshz"
       >
-        <input
-          aria-invalid="false"
-          autocomplete="on"
-          class="leafygreen-ui-6i61vl"
-          id="textinput-6"
-          placeholder="Search"
-          required=""
-          type="text"
-          value=""
-        />
         <div
-          class="lg-ui-icon-selector-0000 leafygreen-ui-uy5fvv"
+          class="leafygreen-ui-1ago99h"
+        >
+          <input
+            aria-describedby=""
+            aria-invalid="false"
+            aria-label=""
+            aria-labelledby="lg-form-field-label-241"
+            autocomplete="on"
+            class="lg-ui-form-field-input-0000 leafygreen-ui-vrj1me"
+            id="lg-form-field-input-244"
+            placeholder="Search"
+            required=""
+            type="text"
+            value=""
+          />
+        </div>
+        <div
+          class="leafygreen-ui-iwiovi"
         />
       </div>
+      <div
+        class="leafygreen-ui-jsxxy6"
+      />
     </div>
     <div
       class="css-4bamt4-IconWrapper e13gwrw80"
diff --git a/src/components/TextInputWithValidation/__snapshots__/TextInputWithValidation.stories.storyshot b/src/components/TextInputWithValidation/__snapshots__/TextInputWithValidation.stories.storyshot
index 510da888a5..6b81a3d837 100644
--- a/src/components/TextInputWithValidation/__snapshots__/TextInputWithValidation.stories.storyshot
+++ b/src/components/TextInputWithValidation/__snapshots__/TextInputWithValidation.stories.storyshot
@@ -6,34 +6,46 @@ exports[`Snapshot Tests Components/TextInput/TextInputWithValidation Default 1`]
     class="css-mk4qpy-TextInputWrapper e13gwrw81"
   >
     <div
-      class="leafygreen-ui-xtefr5"
+      class="leafygreen-ui-1br9h7w"
     >
       <div
-        class="leafygreen-ui-a533bt"
+        class="leafygreen-ui-e3fvh5"
       >
         <label
-          class="leafygreen-ui-gr5280"
-          for="textinput-7"
+          class="leafygreen-ui-1qjbbjd"
+          for="lg-form-field-input-248"
+          id="lg-form-field-label-245"
         >
           Some search field
         </label>
       </div>
       <div
-        class="leafygreen-ui-lzja97"
+        aria-disabled="false"
+        class="leafygreen-ui-mrtshz"
       >
-        <input
-          aria-invalid="false"
-          autocomplete="on"
-          class="leafygreen-ui-6i61vl"
-          id="textinput-7"
-          required=""
-          type="text"
-          value=""
-        />
         <div
-          class="lg-ui-icon-selector-0000 leafygreen-ui-uy5fvv"
+          class="leafygreen-ui-1ago99h"
+        >
+          <input
+            aria-describedby=""
+            aria-invalid="false"
+            aria-label=""
+            aria-labelledby="lg-form-field-label-245"
+            autocomplete="on"
+            class="lg-ui-form-field-input-0000 leafygreen-ui-vrj1me"
+            id="lg-form-field-input-248"
+            required=""
+            type="text"
+            value=""
+          />
+        </div>
+        <div
+          class="leafygreen-ui-iwiovi"
         />
       </div>
+      <div
+        class="leafygreen-ui-jsxxy6"
+      />
     </div>
     <div
       class="css-4bamt4-IconWrapper e13gwrw80"
diff --git a/src/components/TupleSelect/__snapshots__/TupleSelect.stories.storyshot b/src/components/TupleSelect/__snapshots__/TupleSelect.stories.storyshot
index 884ee87520..7cfed7ae08 100644
--- a/src/components/TupleSelect/__snapshots__/TupleSelect.stories.storyshot
+++ b/src/components/TupleSelect/__snapshots__/TupleSelect.stories.storyshot
@@ -20,8 +20,8 @@ exports[`Snapshot Tests TupleSelect.stories Default 1`] = `
         class="leafygreen-ui-1iyoj2o css-1scwv0u-GroupedSelect e5gn9hl1"
       >
         <button
-          aria-controls="select-197-menu"
-          aria-describedby="select-197-description"
+          aria-controls="select-249-menu"
+          aria-describedby="select-249-description"
           aria-disabled="false"
           aria-expanded="false"
           aria-invalid="false"
@@ -29,7 +29,7 @@ exports[`Snapshot Tests TupleSelect.stories Default 1`] = `
           class="lg-ui-button-0000 leafygreen-ui-c8np5"
           data-cy="tuple-select-dropdown"
           data-testid="leafygreen-ui-select-menubutton"
-          id="select-198"
+          id="select-250"
           type="button"
           value="build_variant"
         >
@@ -69,27 +69,38 @@ exports[`Snapshot Tests TupleSelect.stories Default 1`] = `
         class="e5gn9hl0 css-47706i-TextInputWrapper-GroupedTextInput e13gwrw81"
       >
         <div
-          class="leafygreen-ui-xtefr5"
+          class="leafygreen-ui-1br9h7w"
         >
           <div
-            class="leafygreen-ui-lzja97"
+            class="leafygreen-ui-e3fvh5"
+          />
+          <div
+            aria-disabled="false"
+            class="leafygreen-ui-mrtshz"
           >
-            <input
-              aria-invalid="false"
-              aria-label="Build Variant"
-              autocomplete="on"
-              class="leafygreen-ui-6i61vl"
-              data-cy="tuple-select-input"
-              id="filter-input"
-              placeholder="Search Build Variant names"
-              required=""
-              type="search"
-              value=""
-            />
             <div
-              class="lg-ui-icon-selector-0000 leafygreen-ui-uy5fvv"
+              class="leafygreen-ui-1ago99h"
+            >
+              <input
+                aria-describedby=""
+                aria-invalid="false"
+                autocomplete="on"
+                class="lg-ui-form-field-input-0000 leafygreen-ui-vrj1me"
+                data-cy="tuple-select-input"
+                id="filter-input"
+                placeholder="Search Build Variant names"
+                required=""
+                type="search"
+                value=""
+              />
+            </div>
+            <div
+              class="leafygreen-ui-iwiovi"
             />
           </div>
+          <div
+            class="leafygreen-ui-jsxxy6"
+          />
         </div>
         <div
           class="css-4bamt4-IconWrapper e13gwrw80"
diff --git a/src/components/TupleSelectWithRegexConditional/__snapshots__/TupleSelectWithRegexConditional.stories.storyshot b/src/components/TupleSelectWithRegexConditional/__snapshots__/TupleSelectWithRegexConditional.stories.storyshot
index f1e2be98e8..5d732158fe 100644
--- a/src/components/TupleSelectWithRegexConditional/__snapshots__/TupleSelectWithRegexConditional.stories.storyshot
+++ b/src/components/TupleSelectWithRegexConditional/__snapshots__/TupleSelectWithRegexConditional.stories.storyshot
@@ -17,8 +17,8 @@ exports[`Snapshot Tests Components/TupleSelect WithConditional 1`] = `
           class="leafygreen-ui-ozfao7 css-1qa4isu-PaddedSegmentedControl egmqwjk0"
         >
           <div
-            aria-label="segmented-control-199"
-            aria-owns="segmented-control-199-0 segmented-control-199-1"
+            aria-label="segmented-control-255"
+            aria-owns="segmented-control-255-0 segmented-control-255-1"
             class="leafygreen-ui-18en4yf"
             role="tablist"
           >
@@ -35,7 +35,7 @@ exports[`Snapshot Tests Components/TupleSelect WithConditional 1`] = `
                   aria-controls="tuple-select-with-regex"
                   aria-selected="true"
                   class="leafygreen-ui-ypz97o"
-                  id="segmented-control-199-0"
+                  id="segmented-control-255-0"
                   role="tab"
                   tabindex="0"
                   type="button"
@@ -65,7 +65,7 @@ exports[`Snapshot Tests Components/TupleSelect WithConditional 1`] = `
                   aria-controls="tuple-select-with-regex"
                   aria-selected="false"
                   class="leafygreen-ui-ypz97o"
-                  id="segmented-control-199-1"
+                  id="segmented-control-255-1"
                   role="tab"
                   tabindex="-1"
                   type="button"
@@ -99,8 +99,8 @@ exports[`Snapshot Tests Components/TupleSelect WithConditional 1`] = `
         class="leafygreen-ui-1iyoj2o css-1scwv0u-GroupedSelect e5gn9hl1"
       >
         <button
-          aria-controls="select-200-menu"
-          aria-describedby="select-200-description"
+          aria-controls="select-256-menu"
+          aria-describedby="select-256-description"
           aria-disabled="false"
           aria-expanded="false"
           aria-invalid="false"
@@ -108,7 +108,7 @@ exports[`Snapshot Tests Components/TupleSelect WithConditional 1`] = `
           class="lg-ui-button-0000 leafygreen-ui-c8np5"
           data-cy="tuple-select-dropdown"
           data-testid="leafygreen-ui-select-menubutton"
-          id="select-201"
+          id="select-257"
           type="button"
           value="build_variant"
         >
@@ -148,27 +148,38 @@ exports[`Snapshot Tests Components/TupleSelect WithConditional 1`] = `
         class="e5gn9hl0 css-47706i-TextInputWrapper-GroupedTextInput e13gwrw81"
       >
         <div
-          class="leafygreen-ui-xtefr5"
+          class="leafygreen-ui-1br9h7w"
         >
           <div
-            class="leafygreen-ui-lzja97"
+            class="leafygreen-ui-e3fvh5"
+          />
+          <div
+            aria-disabled="false"
+            class="leafygreen-ui-mrtshz"
           >
-            <input
-              aria-invalid="false"
-              aria-label="Build Variant"
-              autocomplete="on"
-              class="leafygreen-ui-6i61vl"
-              data-cy="tuple-select-input"
-              id="filter-input"
-              placeholder="Search Build Variant names"
-              required=""
-              type="search"
-              value=""
-            />
             <div
-              class="lg-ui-icon-selector-0000 leafygreen-ui-uy5fvv"
+              class="leafygreen-ui-1ago99h"
+            >
+              <input
+                aria-describedby=""
+                aria-invalid="false"
+                autocomplete="on"
+                class="lg-ui-form-field-input-0000 leafygreen-ui-vrj1me"
+                data-cy="tuple-select-input"
+                id="filter-input"
+                placeholder="Search Build Variant names"
+                required=""
+                type="search"
+                value=""
+              />
+            </div>
+            <div
+              class="leafygreen-ui-iwiovi"
             />
           </div>
+          <div
+            class="leafygreen-ui-jsxxy6"
+          />
         </div>
         <div
           class="css-4bamt4-IconWrapper e13gwrw80"
diff --git a/src/pages/commits/__snapshots__/ProjectHealth.stories.storyshot b/src/pages/commits/__snapshots__/ProjectHealth.stories.storyshot
index 8470bce5a8..4f8d93b0f0 100644
--- a/src/pages/commits/__snapshots__/ProjectHealth.stories.storyshot
+++ b/src/pages/commits/__snapshots__/ProjectHealth.stories.storyshot
@@ -256,7 +256,7 @@ exports[`Snapshot Tests Pages/Commits/Project Health Page Default 1`] = `
                             >
                               <input
                                 aria-checked="true"
-                                aria-describedby="lg-218"
+                                aria-describedby="lg-278"
                                 aria-disabled="false"
                                 checked=""
                                 class="lg-ui-radio-group-0002 leafygreen-ui-1iwed1m"
@@ -284,7 +284,7 @@ exports[`Snapshot Tests Pages/Commits/Project Health Page Default 1`] = `
                               for="chart-radio-percent"
                             >
                               <input
-                                aria-describedby="lg-219"
+                                aria-describedby="lg-279"
                                 aria-disabled="false"
                                 class="lg-ui-radio-group-0002 leafygreen-ui-1iwed1m"
                                 data-cy="cy-chart-percent-radio"
diff --git a/src/pages/configurePatch/configurePatchCore/__snapshots__/ConfigurePatchCore.stories.storyshot b/src/pages/configurePatch/configurePatchCore/__snapshots__/ConfigurePatchCore.stories.storyshot
index 25e7a3697d..6d10ca90b1 100644
--- a/src/pages/configurePatch/configurePatchCore/__snapshots__/ConfigurePatchCore.stories.storyshot
+++ b/src/pages/configurePatch/configurePatchCore/__snapshots__/ConfigurePatchCore.stories.storyshot
@@ -6,35 +6,47 @@ exports[`Snapshot Tests pages/configurePatch/configurePatchCore ConfigureTasksDe
     class="css-d31jx9-FlexRow ek3m3u40"
   >
     <div
-      class="css-pjeyga-StyledInput ek3m3u42 leafygreen-ui-xtefr5"
+      class="leafygreen-ui-1br9h7w css-pjeyga-StyledInput ek3m3u42"
     >
       <div
-        class="leafygreen-ui-a533bt"
+        class="leafygreen-ui-e3fvh5"
       >
         <label
-          class="leafygreen-ui-gr5280"
-          for="textinput-8"
+          class="leafygreen-ui-1qjbbjd"
+          for="lg-form-field-input-306"
+          id="lg-form-field-label-303"
         >
           Patch Name
         </label>
       </div>
       <div
-        class="leafygreen-ui-lzja97"
+        aria-disabled="false"
+        class="leafygreen-ui-mrtshz"
       >
-        <input
-          aria-invalid="false"
-          autocomplete="on"
-          class="leafygreen-ui-6i61vl"
-          data-cy="patch-name-input"
-          id="textinput-8"
-          required=""
-          type="text"
-          value="test"
-        />
         <div
-          class="lg-ui-icon-selector-0000 leafygreen-ui-uy5fvv"
+          class="leafygreen-ui-1ago99h"
+        >
+          <input
+            aria-describedby=""
+            aria-invalid="false"
+            aria-label=""
+            aria-labelledby="lg-form-field-label-303"
+            autocomplete="on"
+            class="lg-ui-form-field-input-0000 leafygreen-ui-vrj1me"
+            data-cy="patch-name-input"
+            id="lg-form-field-input-306"
+            required=""
+            type="text"
+            value="test"
+          />
+        </div>
+        <div
+          class="leafygreen-ui-iwiovi"
         />
       </div>
+      <div
+        class="leafygreen-ui-jsxxy6"
+      />
     </div>
     <div
       class="css-8i32g1-ButtonWrapper ek3m3u41"
@@ -305,27 +317,38 @@ exports[`Snapshot Tests pages/configurePatch/configurePatchCore ConfigureTasksDe
                     class="eoqkpw13 css-1pn85ix-TextInputWrapper-StyledTextInput e13gwrw81"
                   >
                     <div
-                      class="leafygreen-ui-xtefr5"
+                      class="leafygreen-ui-1br9h7w"
                     >
                       <div
-                        class="leafygreen-ui-lzja97"
+                        class="leafygreen-ui-e3fvh5"
+                      />
+                      <div
+                        aria-disabled="false"
+                        class="leafygreen-ui-mrtshz"
                       >
-                        <input
-                          aria-invalid="false"
-                          aria-labelledby="search-tasks"
-                          autocomplete="on"
-                          class="leafygreen-ui-6i61vl"
-                          data-cy="task-filter-input"
-                          id="textinput-10"
-                          placeholder="Search tasks regex"
-                          required=""
-                          type="text"
-                          value=""
-                        />
                         <div
-                          class="lg-ui-icon-selector-0000 leafygreen-ui-uy5fvv"
+                          class="leafygreen-ui-1ago99h"
+                        >
+                          <input
+                            aria-describedby=""
+                            aria-invalid="false"
+                            autocomplete="on"
+                            class="lg-ui-form-field-input-0000 leafygreen-ui-vrj1me"
+                            data-cy="task-filter-input"
+                            id="lg-form-field-input-314"
+                            placeholder="Search tasks regex"
+                            required=""
+                            type="text"
+                            value=""
+                          />
+                        </div>
+                        <div
+                          class="leafygreen-ui-iwiovi"
                         />
                       </div>
+                      <div
+                        class="leafygreen-ui-jsxxy6"
+                      />
                     </div>
                     <div
                       class="css-4bamt4-IconWrapper e13gwrw80"