From 01d7540b474f41fbd48ae412d8b6604bfe722cf3 Mon Sep 17 00:00:00 2001
From: Luke Bowerman <lukebowerman@google.com>
Date: Tue, 13 Oct 2020 21:40:32 +0000
Subject: [PATCH] Snapshot updates

---
 .../Button/__snapshots__/Button.test.tsx.snap |   2 +-
 .../__snapshots__/ButtonOutline.test.tsx.snap |   2 +-
 .../ButtonTransparent.test.tsx.snap           |   2 +-
 .../__snapshots__/ChipButton.test.tsx.snap    |  11 +-
 .../__snapshots__/DialogHeader.test.tsx.snap  |  41 +++----
 .../__snapshots__/FieldCheckbox.test.tsx.snap |   4 +-
 .../__snapshots__/FieldRadio.test.tsx.snap    |   4 +-
 .../__snapshots__/FieldText.test.tsx.snap     |  20 ++--
 .../__snapshots__/FieldTextArea.test.tsx.snap |  12 +--
 .../FieldToggleSwitch.test.tsx.snap           |   4 +-
 .../__snapshots__/Fieldset.test.tsx.snap      |  14 +--
 .../__snapshots__/InputText.test.tsx.snap     |  48 ++++-----
 .../src/Form/__snapshots__/Form.test.tsx.snap |  10 +-
 .../__snapshots__/MenuGroup.test.tsx.snap     | 102 +++++++++---------
 .../__snapshots__/Tooltip.test.tsx.snap       |   8 +-
 15 files changed, 148 insertions(+), 136 deletions(-)

diff --git a/packages/components/src/Button/__snapshots__/Button.test.tsx.snap b/packages/components/src/Button/__snapshots__/Button.test.tsx.snap
index 59c6b4ba8db..4d12732b6b3 100644
--- a/packages/components/src/Button/__snapshots__/Button.test.tsx.snap
+++ b/packages/components/src/Button/__snapshots__/Button.test.tsx.snap
@@ -74,7 +74,7 @@ exports[`Button Focus: renders outline when tabbing into focus, but not when cli
 
 exports[`Button Focus: renders outline when tabbing into focus, but not when clicking 2`] = `
 <button
-  class="sc-htpNat fSpmeZ sc-bxivhb sc-ifAKCX cTAvkg"
+  class="sc-dlnjPT fETCVq sc-hKFyIo sc-eCApGN boPfme HTUZM"
 >
   focus
 </button>
diff --git a/packages/components/src/Button/__snapshots__/ButtonOutline.test.tsx.snap b/packages/components/src/Button/__snapshots__/ButtonOutline.test.tsx.snap
index 796e3ec6786..32e6d2500f8 100644
--- a/packages/components/src/Button/__snapshots__/ButtonOutline.test.tsx.snap
+++ b/packages/components/src/Button/__snapshots__/ButtonOutline.test.tsx.snap
@@ -76,7 +76,7 @@ exports[`ButtonOutline Focus: renders outline when tabbing into focus, but not w
 
 exports[`ButtonOutline Focus: renders outline when tabbing into focus, but not when clicking 2`] = `
 <button
-  class="sc-htpNat fSpmeZ sc-bxivhb sc-ifAKCX eWwItv"
+  class="sc-dlnjPT fETCVq sc-hKFyIo sc-eCApGN boPfme gNsZPV"
 >
   focus
 </button>
diff --git a/packages/components/src/Button/__snapshots__/ButtonTransparent.test.tsx.snap b/packages/components/src/Button/__snapshots__/ButtonTransparent.test.tsx.snap
index 027d57f115e..c4b65c4e386 100644
--- a/packages/components/src/Button/__snapshots__/ButtonTransparent.test.tsx.snap
+++ b/packages/components/src/Button/__snapshots__/ButtonTransparent.test.tsx.snap
@@ -76,7 +76,7 @@ exports[`ButtonTransparent Focus: renders outline when tabbing into focus, but n
 
 exports[`ButtonTransparent Focus: renders outline when tabbing into focus, but not when clicking 2`] = `
 <button
-  class="sc-htpNat fSpmeZ sc-bxivhb sc-ifAKCX DZEOe"
+  class="sc-dlnjPT fETCVq sc-hKFyIo sc-eCApGN boPfme Eezua"
 >
   focus
 </button>
diff --git a/packages/components/src/ChipButton/__snapshots__/ChipButton.test.tsx.snap b/packages/components/src/ChipButton/__snapshots__/ChipButton.test.tsx.snap
index 440a4c75acb..4e3c7fb79a6 100644
--- a/packages/components/src/ChipButton/__snapshots__/ChipButton.test.tsx.snap
+++ b/packages/components/src/ChipButton/__snapshots__/ChipButton.test.tsx.snap
@@ -1,6 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ChipButton renders correctly 1`] = `
+.c2 {
+  font-family: 'Roboto','Noto Sans JP','Noto Sans CJK KR','Noto Sans Arabic UI','Noto Sans Devanagari UI','Noto Sans Hebrew','Noto Sans Thai UI','Helvetica','Arial',sans-serif;
+}
+
 .c0 {
   font-family: 'Roboto','Noto Sans JP','Noto Sans CJK KR','Noto Sans Arabic UI','Noto Sans Devanagari UI','Noto Sans Hebrew','Noto Sans Thai UI','Helvetica','Arial',sans-serif;
   -webkit-align-items: center;
@@ -47,8 +51,7 @@ exports[`ChipButton renders correctly 1`] = `
   background: #F5F6F7;
 }
 
-.c2 {
-  font-family: 'Roboto','Noto Sans JP','Noto Sans CJK KR','Noto Sans Arabic UI','Noto Sans Devanagari UI','Noto Sans Hebrew','Noto Sans Thai UI','Helvetica','Arial',sans-serif;
+.c3 {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -99,7 +102,7 @@ exports[`ChipButton renders correctly 1`] = `
 }
 
 <span
-  className="c0 c1"
+  className="c0  c1"
   onBlur={[Function]}
   onClick={[Function]}
   onKeyDown={[Function]}
@@ -108,7 +111,7 @@ exports[`ChipButton renders correctly 1`] = `
   tabIndex={0}
 >
   <span
-    className="c2"
+    className="c2 c3"
   >
     chip
   </span>
diff --git a/packages/components/src/Dialog/Layout/__snapshots__/DialogHeader.test.tsx.snap b/packages/components/src/Dialog/Layout/__snapshots__/DialogHeader.test.tsx.snap
index df4790f8257..2e9d7981ec6 100644
--- a/packages/components/src/Dialog/Layout/__snapshots__/DialogHeader.test.tsx.snap
+++ b/packages/components/src/Dialog/Layout/__snapshots__/DialogHeader.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DialogHeader Snapshot 1`] = `
-.c6 {
+.c7 {
   font-family: 'Roboto','Noto Sans JP','Noto Sans CJK KR','Noto Sans Arabic UI','Noto Sans Devanagari UI','Noto Sans Hebrew','Noto Sans Thai UI','Helvetica','Arial',sans-serif;
   width: 1.25rem;
   height: 1.25rem;
@@ -18,12 +18,12 @@ exports[`DialogHeader Snapshot 1`] = `
   flex-shrink: 0;
 }
 
-.c6 svg {
+.c7 svg {
   height: 100%;
   width: 100%;
 }
 
-.c3 {
+.c4 {
   font-family: 'Roboto','Noto Sans JP','Noto Sans CJK KR','Noto Sans Arabic UI','Noto Sans Devanagari UI','Noto Sans Hebrew','Noto Sans Thai UI','Helvetica','Arial',sans-serif;
   width: 36px;
   -webkit-align-items: center;
@@ -55,7 +55,7 @@ exports[`DialogHeader Snapshot 1`] = `
   padding: 0rem;
 }
 
-.c3[disabled] {
+.c4[disabled] {
   cursor: default;
   -webkit-filter: grayscale(0.3);
   filter: grayscale(0.3);
@@ -68,13 +68,16 @@ exports[`DialogHeader Snapshot 1`] = `
   font-weight: 600;
   line-height: 1.5rem;
   margin-right: 2rem;
+}
+
+.c2 {
   color: #262D33;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.c5 {
+.c6 {
   -webkit-clip: rect(1px,1px,1px,1px);
   clip: rect(1px,1px,1px,1px);
   height: 1px;
@@ -83,7 +86,7 @@ exports[`DialogHeader Snapshot 1`] = `
   width: 1px;
 }
 
-.c4 {
+.c5 {
   font-family: 'Roboto','Noto Sans JP','Noto Sans CJK KR','Noto Sans Arabic UI','Noto Sans Devanagari UI','Noto Sans Hebrew','Noto Sans Thai UI','Helvetica','Arial',sans-serif;
   background: none;
   border: none;
@@ -91,23 +94,23 @@ exports[`DialogHeader Snapshot 1`] = `
   padding: 0;
 }
 
-.c4:hover,
-.c4:focus,
-.c4.hover {
+.c5:hover,
+.c5:focus,
+.c5.hover {
   color: #7a818b;
 }
 
-.c4[aria-expanded='true'],
-.c4:active,
-.c4.active {
+.c5[aria-expanded='true'],
+.c5:active,
+.c5.active {
   color: #5f656e;
 }
 
-.c4 svg {
+.c5 svg {
   pointer-events: none;
 }
 
-.c2 {
+.c3 {
   margin-left: auto;
 }
 
@@ -134,7 +137,7 @@ exports[`DialogHeader Snapshot 1`] = `
   id="test-DialogHeader"
 >
   <h3
-    className="c1"
+    className="c1 c2"
     fontFamily="brand"
     fontSize="large"
     fontWeight="semiBold"
@@ -147,11 +150,11 @@ exports[`DialogHeader Snapshot 1`] = `
     The Heading for a Dialog
   </h3>
   <div
-    className="c2"
+    className="c3"
   >
     <button
       aria-describedby="test-DialogHeader-iconButton-tooltip"
-      className="c3 c4"
+      className="c4 c5"
       color="neutral"
       onBlur={[Function]}
       onClick={[Function]}
@@ -165,13 +168,13 @@ exports[`DialogHeader Snapshot 1`] = `
       width={36}
     >
       <div
-        className="c5"
+        className="c6"
       >
         Close
       </div>
       <div
         aria-hidden={true}
-        className="c6"
+        className="c7"
       >
         <svg
           fill="currentColor"
diff --git a/packages/components/src/Form/Fields/FieldCheckbox/__snapshots__/FieldCheckbox.test.tsx.snap b/packages/components/src/Form/Fields/FieldCheckbox/__snapshots__/FieldCheckbox.test.tsx.snap
index 70187611551..f2ca15648ea 100644
--- a/packages/components/src/Form/Fields/FieldCheckbox/__snapshots__/FieldCheckbox.test.tsx.snap
+++ b/packages/components/src/Form/Fields/FieldCheckbox/__snapshots__/FieldCheckbox.test.tsx.snap
@@ -38,7 +38,7 @@ exports[`A FieldCheckbox 1`] = `
   padding-left: 0.5rem;
 }
 
-.c0 .sc-jlZIZy {
+.c0 .sc-ljslrt {
   -webkit-align-content: center;
   -ms-flex-line-pack: center;
   align-content: center;
@@ -211,7 +211,7 @@ exports[`A FieldCheckbox with checked value 1`] = `
   padding-left: 0.5rem;
 }
 
-.c0 .sc-jlZIZy {
+.c0 .sc-ljslrt {
   -webkit-align-content: center;
   -ms-flex-line-pack: center;
   align-content: center;
diff --git a/packages/components/src/Form/Fields/FieldRadio/__snapshots__/FieldRadio.test.tsx.snap b/packages/components/src/Form/Fields/FieldRadio/__snapshots__/FieldRadio.test.tsx.snap
index 0553379c2ae..b0d545617e0 100644
--- a/packages/components/src/Form/Fields/FieldRadio/__snapshots__/FieldRadio.test.tsx.snap
+++ b/packages/components/src/Form/Fields/FieldRadio/__snapshots__/FieldRadio.test.tsx.snap
@@ -106,7 +106,7 @@ exports[`A FieldRadio 1`] = `
   padding-left: 0.5rem;
 }
 
-.c0 .sc-iNiQeE {
+.c0 .sc-laZMyp {
   -webkit-align-content: center;
   -ms-flex-line-pack: center;
   align-content: center;
@@ -266,7 +266,7 @@ exports[`A FieldRadio checked 1`] = `
   padding-left: 0.5rem;
 }
 
-.c0 .sc-iNiQeE {
+.c0 .sc-laZMyp {
   -webkit-align-content: center;
   -ms-flex-line-pack: center;
   align-content: center;
diff --git a/packages/components/src/Form/Fields/FieldText/__snapshots__/FieldText.test.tsx.snap b/packages/components/src/Form/Fields/FieldText/__snapshots__/FieldText.test.tsx.snap
index cc087fa8903..673b9945440 100644
--- a/packages/components/src/Form/Fields/FieldText/__snapshots__/FieldText.test.tsx.snap
+++ b/packages/components/src/Form/Fields/FieldText/__snapshots__/FieldText.test.tsx.snap
@@ -47,13 +47,13 @@ exports[`A FieldText with default label 1`] = `
   padding-bottom: 0.25rem;
 }
 
-.c0 .sc-laZMyp {
+.c0 .sc-gSYCTC {
   grid-area: detail;
   justify-self: end;
   padding-left: 0.75rem;
 }
 
-.c0 .sc-jgPznn {
+.c0 .sc-hTRkEk {
   margin-top: 0.5rem;
 }
 
@@ -129,14 +129,14 @@ exports[`A FieldText with default label 1`] = `
   font-family: inherit;
 }
 
-.c5 .sc-eGJXgd {
+.c5 .sc-bXevSJ {
   height: 100%;
   max-width: 100%;
   width: 100%;
 }
 
-.c5 .sc-eGJXgd input,
-.c5 .sc-eGJXgd span {
+.c5 .sc-bXevSJ input,
+.c5 .sc-bXevSJ span {
   padding: 0 0.5rem;
 }
 
@@ -234,7 +234,7 @@ exports[`A FieldText with label inline 1`] = `
   text-align: right;
 }
 
-.c0 .sc-laZMyp {
+.c0 .sc-gSYCTC {
   grid-area: detail;
   justify-self: end;
   padding-left: 0.75rem;
@@ -243,7 +243,7 @@ exports[`A FieldText with label inline 1`] = `
   align-self: center;
 }
 
-.c0 .sc-jgPznn {
+.c0 .sc-hTRkEk {
   margin-top: 0.5rem;
 }
 
@@ -319,14 +319,14 @@ exports[`A FieldText with label inline 1`] = `
   font-family: inherit;
 }
 
-.c5 .sc-eGJXgd {
+.c5 .sc-bXevSJ {
   height: 100%;
   max-width: 100%;
   width: 100%;
 }
 
-.c5 .sc-eGJXgd input,
-.c5 .sc-eGJXgd span {
+.c5 .sc-bXevSJ input,
+.c5 .sc-bXevSJ span {
   padding: 0 0.5rem;
 }
 
diff --git a/packages/components/src/Form/Fields/FieldTextArea/__snapshots__/FieldTextArea.test.tsx.snap b/packages/components/src/Form/Fields/FieldTextArea/__snapshots__/FieldTextArea.test.tsx.snap
index a0b83933b58..94ab3089626 100644
--- a/packages/components/src/Form/Fields/FieldTextArea/__snapshots__/FieldTextArea.test.tsx.snap
+++ b/packages/components/src/Form/Fields/FieldTextArea/__snapshots__/FieldTextArea.test.tsx.snap
@@ -47,13 +47,13 @@ exports[`A FieldTextArea with default label 1`] = `
   padding-bottom: 0.25rem;
 }
 
-.c0 .sc-laZMyp {
+.c0 .sc-gSYCTC {
   grid-area: detail;
   justify-self: end;
   padding-left: 0.75rem;
 }
 
-.c0 .sc-jgPznn {
+.c0 .sc-hTRkEk {
   margin-top: 0.5rem;
 }
 
@@ -65,7 +65,7 @@ exports[`A FieldTextArea with default label 1`] = `
   width: 100%;
 }
 
-.c5 .sc-crzoUp {
+.c5 .sc-iqAbSa {
   position: absolute;
   right: 0.5rem;
   top: 0.5rem;
@@ -176,7 +176,7 @@ exports[`A FieldTextArea with label inline 1`] = `
   text-align: right;
 }
 
-.c0 .sc-laZMyp {
+.c0 .sc-gSYCTC {
   grid-area: detail;
   justify-self: end;
   padding-left: 0.75rem;
@@ -185,7 +185,7 @@ exports[`A FieldTextArea with label inline 1`] = `
   align-self: center;
 }
 
-.c0 .sc-jgPznn {
+.c0 .sc-hTRkEk {
   margin-top: 0.5rem;
 }
 
@@ -197,7 +197,7 @@ exports[`A FieldTextArea with label inline 1`] = `
   width: 100%;
 }
 
-.c5 .sc-crzoUp {
+.c5 .sc-iqAbSa {
   position: absolute;
   right: 0.5rem;
   top: 0.5rem;
diff --git a/packages/components/src/Form/Fields/FieldToggleSwitch/__snapshots__/FieldToggleSwitch.test.tsx.snap b/packages/components/src/Form/Fields/FieldToggleSwitch/__snapshots__/FieldToggleSwitch.test.tsx.snap
index 38dec33bef3..947696e2e1e 100644
--- a/packages/components/src/Form/Fields/FieldToggleSwitch/__snapshots__/FieldToggleSwitch.test.tsx.snap
+++ b/packages/components/src/Form/Fields/FieldToggleSwitch/__snapshots__/FieldToggleSwitch.test.tsx.snap
@@ -88,7 +88,7 @@ exports[`A FieldToggleSwitch 1`] = `
   padding-left: 0.5rem;
 }
 
-.c0 .sc-eJoaVz {
+.c0 .sc-jffIyK {
   -webkit-align-content: center;
   -ms-flex-line-pack: center;
   align-content: center;
@@ -237,7 +237,7 @@ exports[`A FieldToggleSwitch turned on 1`] = `
   padding-left: 0.5rem;
 }
 
-.c0 .sc-eJoaVz {
+.c0 .sc-jffIyK {
   -webkit-align-content: center;
   -ms-flex-line-pack: center;
   align-content: center;
diff --git a/packages/components/src/Form/Fieldset/__snapshots__/Fieldset.test.tsx.snap b/packages/components/src/Form/Fieldset/__snapshots__/Fieldset.test.tsx.snap
index db2e3b23fe6..5811015c3fb 100644
--- a/packages/components/src/Form/Fieldset/__snapshots__/Fieldset.test.tsx.snap
+++ b/packages/components/src/Form/Fieldset/__snapshots__/Fieldset.test.tsx.snap
@@ -47,12 +47,12 @@ exports[`Fieldset 1`] = `
   width: 100%;
 }
 
-.c0 .sc-efHXLn {
+.c0 .sc-iBzFoy {
   padding-left: calc(1px + 1rem + 0.5rem);
   padding-top: 1rem;
 }
 
-.c0 .sc-cOigif {
+.c0 .sc-bBjRzc {
   font-size: 0.875rem;
   font-weight: 600;
   height: 24px;
@@ -105,13 +105,13 @@ exports[`Fieldset 1`] = `
   padding-bottom: 0.25rem;
 }
 
-.c4 .sc-laZMyp {
+.c4 .sc-gSYCTC {
   grid-area: detail;
   justify-self: end;
   padding-left: 0.75rem;
 }
 
-.c4 .sc-jgPznn {
+.c4 .sc-hTRkEk {
   margin-top: 0.5rem;
 }
 
@@ -187,14 +187,14 @@ exports[`Fieldset 1`] = `
   font-family: inherit;
 }
 
-.c9 .sc-eGJXgd {
+.c9 .sc-bXevSJ {
   height: 100%;
   max-width: 100%;
   width: 100%;
 }
 
-.c9 .sc-eGJXgd input,
-.c9 .sc-eGJXgd span {
+.c9 .sc-bXevSJ input,
+.c9 .sc-bXevSJ span {
   padding: 0 0.5rem;
 }
 
diff --git a/packages/components/src/Form/Inputs/InputText/__snapshots__/InputText.test.tsx.snap b/packages/components/src/Form/Inputs/InputText/__snapshots__/InputText.test.tsx.snap
index a53ee2993bc..3f28599ae7f 100644
--- a/packages/components/src/Form/Inputs/InputText/__snapshots__/InputText.test.tsx.snap
+++ b/packages/components/src/Form/Inputs/InputText/__snapshots__/InputText.test.tsx.snap
@@ -73,14 +73,14 @@ exports[`InputText default 1`] = `
   font-family: inherit;
 }
 
-.c0 .sc-eGJXgd {
+.c0 .sc-bXevSJ {
   height: 100%;
   max-width: 100%;
   width: 100%;
 }
 
-.c0 .sc-eGJXgd input,
-.c0 .sc-eGJXgd span {
+.c0 .sc-bXevSJ input,
+.c0 .sc-bXevSJ span {
   padding: 0 0.5rem;
 }
 
@@ -182,14 +182,14 @@ exports[`InputText should accept disabled 1`] = `
   font-family: inherit;
 }
 
-.c0 .sc-eGJXgd {
+.c0 .sc-bXevSJ {
   height: 100%;
   max-width: 100%;
   width: 100%;
 }
 
-.c0 .sc-eGJXgd input,
-.c0 .sc-eGJXgd span {
+.c0 .sc-bXevSJ input,
+.c0 .sc-bXevSJ span {
   padding: 0 0.5rem;
 }
 
@@ -293,14 +293,14 @@ exports[`InputText should accept readOnly 1`] = `
   font-family: inherit;
 }
 
-.c0 .sc-eGJXgd {
+.c0 .sc-bXevSJ {
   height: 100%;
   max-width: 100%;
   width: 100%;
 }
 
-.c0 .sc-eGJXgd input,
-.c0 .sc-eGJXgd span {
+.c0 .sc-bXevSJ input,
+.c0 .sc-bXevSJ span {
   padding: 0 0.5rem;
 }
 
@@ -400,14 +400,14 @@ exports[`InputText should accept required 1`] = `
   font-family: inherit;
 }
 
-.c0 .sc-eGJXgd {
+.c0 .sc-bXevSJ {
   height: 100%;
   max-width: 100%;
   width: 100%;
 }
 
-.c0 .sc-eGJXgd input,
-.c0 .sc-eGJXgd span {
+.c0 .sc-bXevSJ input,
+.c0 .sc-bXevSJ span {
   padding: 0 0.5rem;
 }
 
@@ -507,14 +507,14 @@ exports[`InputText with a placeholder 1`] = `
   font-family: inherit;
 }
 
-.c0 .sc-eGJXgd {
+.c0 .sc-bXevSJ {
   height: 100%;
   max-width: 100%;
   width: 100%;
 }
 
-.c0 .sc-eGJXgd input,
-.c0 .sc-eGJXgd span {
+.c0 .sc-bXevSJ input,
+.c0 .sc-bXevSJ span {
   padding: 0 0.5rem;
 }
 
@@ -614,14 +614,14 @@ exports[`InputText with a value 1`] = `
   font-family: inherit;
 }
 
-.c0 .sc-eGJXgd {
+.c0 .sc-bXevSJ {
   height: 100%;
   max-width: 100%;
   width: 100%;
 }
 
-.c0 .sc-eGJXgd input,
-.c0 .sc-eGJXgd span {
+.c0 .sc-bXevSJ input,
+.c0 .sc-bXevSJ span {
   padding: 0 0.5rem;
 }
 
@@ -721,14 +721,14 @@ exports[`InputText with aria-describedby 1`] = `
   font-family: inherit;
 }
 
-.c0 .sc-eGJXgd {
+.c0 .sc-bXevSJ {
   height: 100%;
   max-width: 100%;
   width: 100%;
 }
 
-.c0 .sc-eGJXgd input,
-.c0 .sc-eGJXgd span {
+.c0 .sc-bXevSJ input,
+.c0 .sc-bXevSJ span {
   padding: 0 0.5rem;
 }
 
@@ -828,14 +828,14 @@ exports[`InputText with name and id 1`] = `
   font-family: inherit;
 }
 
-.c0 .sc-eGJXgd {
+.c0 .sc-bXevSJ {
   height: 100%;
   max-width: 100%;
   width: 100%;
 }
 
-.c0 .sc-eGJXgd input,
-.c0 .sc-eGJXgd span {
+.c0 .sc-bXevSJ input,
+.c0 .sc-bXevSJ span {
   padding: 0 0.5rem;
 }
 
diff --git a/packages/components/src/Form/__snapshots__/Form.test.tsx.snap b/packages/components/src/Form/__snapshots__/Form.test.tsx.snap
index b01f9902118..4222e9b47e5 100644
--- a/packages/components/src/Form/__snapshots__/Form.test.tsx.snap
+++ b/packages/components/src/Form/__snapshots__/Form.test.tsx.snap
@@ -63,13 +63,13 @@ exports[`Form with one child 1`] = `
   padding-bottom: 0.25rem;
 }
 
-.c1 .sc-laZMyp {
+.c1 .sc-gSYCTC {
   grid-area: detail;
   justify-self: end;
   padding-left: 0.75rem;
 }
 
-.c1 .sc-jgPznn {
+.c1 .sc-hTRkEk {
   margin-top: 0.5rem;
 }
 
@@ -145,14 +145,14 @@ exports[`Form with one child 1`] = `
   font-family: inherit;
 }
 
-.c6 .sc-eGJXgd {
+.c6 .sc-bXevSJ {
   height: 100%;
   max-width: 100%;
   width: 100%;
 }
 
-.c6 .sc-eGJXgd input,
-.c6 .sc-eGJXgd span {
+.c6 .sc-bXevSJ input,
+.c6 .sc-bXevSJ span {
   padding: 0 0.5rem;
 }
 
diff --git a/packages/components/src/Menu/__snapshots__/MenuGroup.test.tsx.snap b/packages/components/src/Menu/__snapshots__/MenuGroup.test.tsx.snap
index 430d23c279a..fff43de67d9 100644
--- a/packages/components/src/Menu/__snapshots__/MenuGroup.test.tsx.snap
+++ b/packages/components/src/Menu/__snapshots__/MenuGroup.test.tsx.snap
@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`MenuGroup - JSX label 1`] = `
-.c4 {
+.c5 {
   font-family: 'Roboto','Noto Sans JP','Noto Sans CJK KR','Noto Sans Arabic UI','Noto Sans Devanagari UI','Noto Sans Hebrew','Noto Sans Thai UI','Helvetica','Arial',sans-serif;
 }
 
-.c5 {
+.c6 {
   font-family: 'Roboto','Noto Sans JP','Noto Sans CJK KR','Noto Sans Arabic UI','Noto Sans Devanagari UI','Noto Sans Hebrew','Noto Sans Thai UI','Helvetica','Arial',sans-serif;
   list-style-type: none;
 }
@@ -16,6 +16,9 @@ exports[`MenuGroup - JSX label 1`] = `
   font-weight: 600;
   line-height: 1.25rem;
   padding-left: 1rem;
+}
+
+.c4 {
   color: #262D33;
 }
 
@@ -38,7 +41,7 @@ exports[`MenuGroup - JSX label 1`] = `
   padding: 0.5rem 0;
 }
 
-.c6 {
+.c7 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -54,8 +57,8 @@ exports[`MenuGroup - JSX label 1`] = `
   transition: background 150ms cubic-bezier(0.86,0,0.07,1), color 150ms cubic-bezier(0.86,0,0.07,1);
 }
 
-.c6 button,
-.c6 a {
+.c7 button,
+.c7 a {
   font-family: 'Roboto','Noto Sans JP','Noto Sans CJK KR','Noto Sans Arabic UI','Noto Sans Devanagari UI','Noto Sans Hebrew','Noto Sans Thai UI','Helvetica','Arial',sans-serif;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -84,45 +87,45 @@ exports[`MenuGroup - JSX label 1`] = `
   width: 100%;
 }
 
-.c6 button:hover,
-.c6 a:hover,
-.c6 button:focus,
-.c6 a:focus {
+.c7 button:hover,
+.c7 a:hover,
+.c7 button:focus,
+.c7 a:focus {
   color: inherit;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c6 .c8 {
+.c7 .sc-dlMBXb {
   -webkit-transition: color 150ms cubic-bezier(0.86,0,0.07,1);
   transition: color 150ms cubic-bezier(0.86,0,0.07,1);
 }
 
-.c6:hover,
-.c6[aria-current='true'] {
+.c7:hover,
+.c7[aria-current='true'] {
   background: #F5F6F7;
   color: #262D33;
 }
 
-.c6[aria-current='true'] {
+.c7[aria-current='true'] {
   font-weight: 600;
 }
 
-.c6[disabled] {
+.c7[disabled] {
   color: #939BA5;
 }
 
-.c6[disabled] button,
-.c6[disabled] a {
+.c7[disabled] button,
+.c7[disabled] a {
   cursor: not-allowed;
 }
 
-.c6[disabled]:hover {
+.c7[disabled]:hover {
   background: #FFFFFF;
   color: #939BA5;
 }
 
-.c7 .c8 {
+.c8 .sc-dlMBXb {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -142,24 +145,24 @@ exports[`MenuGroup - JSX label 1`] = `
       }
     />
     <h2
-      className="c2 c3"
+      className="c2 c3 c4"
       fontFamily="brand"
       fontSize="small"
       fontWeight="semiBold"
     >
       <div
-        className="c4"
+        className="c5"
       >
         Questions
       </div>
     </h2>
   </div>
   <ul
-    className="c5"
+    className="c6"
     type="none"
   >
     <li
-      className="c6 c7"
+      className="c7 c8"
       onBlur={[Function]}
       onClick={[Function]}
       onKeyDown={[Function]}
@@ -174,7 +177,7 @@ exports[`MenuGroup - JSX label 1`] = `
       </button>
     </li>
     <li
-      className="c6 c7"
+      className="c7 c8"
       onBlur={[Function]}
       onClick={[Function]}
       onKeyDown={[Function]}
@@ -189,7 +192,7 @@ exports[`MenuGroup - JSX label 1`] = `
       </button>
     </li>
     <li
-      className="c6 c7"
+      className="c7 c8"
       onBlur={[Function]}
       onClick={[Function]}
       onKeyDown={[Function]}
@@ -208,7 +211,7 @@ exports[`MenuGroup - JSX label 1`] = `
 `;
 
 exports[`MenuGroup - label 1`] = `
-.c4 {
+.c5 {
   font-family: 'Roboto','Noto Sans JP','Noto Sans CJK KR','Noto Sans Arabic UI','Noto Sans Devanagari UI','Noto Sans Hebrew','Noto Sans Thai UI','Helvetica','Arial',sans-serif;
   list-style-type: none;
 }
@@ -219,6 +222,9 @@ exports[`MenuGroup - label 1`] = `
   font-weight: 600;
   line-height: 1.25rem;
   padding-left: 1rem;
+}
+
+.c4 {
   color: #262D33;
 }
 
@@ -241,7 +247,7 @@ exports[`MenuGroup - label 1`] = `
   padding: 0.5rem 0;
 }
 
-.c5 {
+.c6 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -257,8 +263,8 @@ exports[`MenuGroup - label 1`] = `
   transition: background 150ms cubic-bezier(0.86,0,0.07,1), color 150ms cubic-bezier(0.86,0,0.07,1);
 }
 
-.c5 button,
-.c5 a {
+.c6 button,
+.c6 a {
   font-family: 'Roboto','Noto Sans JP','Noto Sans CJK KR','Noto Sans Arabic UI','Noto Sans Devanagari UI','Noto Sans Hebrew','Noto Sans Thai UI','Helvetica','Arial',sans-serif;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -287,45 +293,45 @@ exports[`MenuGroup - label 1`] = `
   width: 100%;
 }
 
-.c5 button:hover,
-.c5 a:hover,
-.c5 button:focus,
-.c5 a:focus {
+.c6 button:hover,
+.c6 a:hover,
+.c6 button:focus,
+.c6 a:focus {
   color: inherit;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c5 .c7 {
+.c6 .sc-dlMBXb {
   -webkit-transition: color 150ms cubic-bezier(0.86,0,0.07,1);
   transition: color 150ms cubic-bezier(0.86,0,0.07,1);
 }
 
-.c5:hover,
-.c5[aria-current='true'] {
+.c6:hover,
+.c6[aria-current='true'] {
   background: #F5F6F7;
   color: #262D33;
 }
 
-.c5[aria-current='true'] {
+.c6[aria-current='true'] {
   font-weight: 600;
 }
 
-.c5[disabled] {
+.c6[disabled] {
   color: #939BA5;
 }
 
-.c5[disabled] button,
-.c5[disabled] a {
+.c6[disabled] button,
+.c6[disabled] a {
   cursor: not-allowed;
 }
 
-.c5[disabled]:hover {
+.c6[disabled]:hover {
   background: #FFFFFF;
   color: #939BA5;
 }
 
-.c6 .c7 {
+.c7 .sc-dlMBXb {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -345,7 +351,7 @@ exports[`MenuGroup - label 1`] = `
       }
     />
     <h2
-      className="c2 c3"
+      className="c2 c3 c4"
       fontFamily="brand"
       fontSize="small"
       fontWeight="semiBold"
@@ -354,11 +360,11 @@ exports[`MenuGroup - label 1`] = `
     </h2>
   </div>
   <ul
-    className="c4"
+    className="c5"
     type="none"
   >
     <li
-      className="c5 c6"
+      className="c6 c7"
       onBlur={[Function]}
       onClick={[Function]}
       onKeyDown={[Function]}
@@ -373,7 +379,7 @@ exports[`MenuGroup - label 1`] = `
       </button>
     </li>
     <li
-      className="c5 c6"
+      className="c6 c7"
       onBlur={[Function]}
       onClick={[Function]}
       onKeyDown={[Function]}
@@ -388,7 +394,7 @@ exports[`MenuGroup - label 1`] = `
       </button>
     </li>
     <li
-      className="c5 c6"
+      className="c6 c7"
       onBlur={[Function]}
       onClick={[Function]}
       onKeyDown={[Function]}
@@ -473,7 +479,7 @@ exports[`MenuGroup 1`] = `
   text-decoration: none;
 }
 
-.c2 .c4 {
+.c2 .sc-dlMBXb {
   -webkit-transition: color 150ms cubic-bezier(0.86,0,0.07,1);
   transition: color 150ms cubic-bezier(0.86,0,0.07,1);
 }
@@ -502,7 +508,7 @@ exports[`MenuGroup 1`] = `
   color: #939BA5;
 }
 
-.c3 .c4 {
+.c3 .sc-dlMBXb {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
diff --git a/packages/components/src/Tooltip/__snapshots__/Tooltip.test.tsx.snap b/packages/components/src/Tooltip/__snapshots__/Tooltip.test.tsx.snap
index 73efa3e762b..b9ec91a802e 100644
--- a/packages/components/src/Tooltip/__snapshots__/Tooltip.test.tsx.snap
+++ b/packages/components/src/Tooltip/__snapshots__/Tooltip.test.tsx.snap
@@ -39,18 +39,18 @@ exports[`Tooltip trigger: open on mouseover, close on mouseout 1`] = `
   word-break: break-word;
 }
 
-.c3 .sc-juXuuo {
+.c3 .sc-bShfyb {
   color: #E8E5FF;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.c3 .sc-juXuuo:focus,
-.c3 .sc-juXuuo:hover {
+.c3 .sc-bShfyb:focus,
+.c3 .sc-bShfyb:hover {
   color: #F3F2FF;
 }
 
-.c3 .sc-juXuuo:active {
+.c3 .sc-bShfyb:active {
   color: #FFFFFF;
 }