diff --git a/src/Alert/__tests__/__snapshots__/Alert.test.js.snap b/src/Alert/__tests__/__snapshots__/Alert.test.js.snap
index 4c824a9c9..3b065d101 100644
--- a/src/Alert/__tests__/__snapshots__/Alert.test.js.snap
+++ b/src/Alert/__tests__/__snapshots__/Alert.test.js.snap
@@ -11,7 +11,7 @@ exports[`renders correctly 1`] = `
   font-size: 100%;
   box-sizing: border-box;
   background-color: unset;
-  color: inherit;
+  color: #fcfcfc;
 }
 
 .c3 {
@@ -24,36 +24,10 @@ exports[`renders correctly 1`] = `
   font-size: 100%;
   box-sizing: border-box;
   background-color: unset;
-  color: #fcfcfc;
+  color: inherit;
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   background-color: white;
   border: 1px solid #e6e6e6;
   border-left: 4px solid #435a6f;
@@ -62,18 +36,18 @@ exports[`renders correctly 1`] = `
   padding: 1rem;
 }
 
-abbr.c4 {
+abbr.c2 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c4 {
+i.c2 {
   font-style: italic;
 }
 
-kbd.c4 {
+kbd.c2 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -81,63 +55,59 @@ kbd.c4 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c4 {
+mark.c2 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c4 {
+strong.c2 {
   font-weight: bold;
 }
 
-sub.c4,
-sup.c4 {
+sub.c2,
+sup.c2 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c4,
-u.c4 {
+ins.c2,
+u.c2 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c4,
-cite.c4,
-var.c4,
-em.c4 {
+i.c2,
+cite.c2,
+var.c2,
+em.c2 {
   font-style: italic;
 }
 
-kbd.c4,
-pre.c4,
-samp.c4 {
+kbd.c2,
+pre.c2,
+samp.c2 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c4 .c5 {
+.c2 .c4 {
   top: 0.1em;
 }
 
 <div
   class="c0 c1"
+  role="alert"
 >
-  <div
+  <span
     class="c2 c3"
-    role="alert"
   >
-    <span
-      class="c4 c1"
-    >
-      Alert
-    </span>
-  </div>
+    Alert
+  </span>
 </div>
 `;
 
 exports[`renders correctly when a palette prop is set 1`] = `
-.c1 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -150,7 +120,7 @@ exports[`renders correctly when a palette prop is set 1`] = `
   color: inherit;
 }
 
-.c3 {
+.c1 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -164,32 +134,6 @@ exports[`renders correctly when a palette prop is set 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   background-color: white;
   border: 1px solid #e6e6e6;
   border-left: 4px solid #3926a5;
@@ -198,18 +142,18 @@ exports[`renders correctly when a palette prop is set 1`] = `
   padding: 1rem;
 }
 
-abbr.c4 {
+abbr.c2 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c4 {
+i.c2 {
   font-style: italic;
 }
 
-kbd.c4 {
+kbd.c2 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -217,58 +161,54 @@ kbd.c4 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c4 {
+mark.c2 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c4 {
+strong.c2 {
   font-weight: bold;
 }
 
-sub.c4,
-sup.c4 {
+sub.c2,
+sup.c2 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c4,
-u.c4 {
+ins.c2,
+u.c2 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c4,
-cite.c4,
-var.c4,
-em.c4 {
+i.c2,
+cite.c2,
+var.c2,
+em.c2 {
   font-style: italic;
 }
 
-kbd.c4,
-pre.c4,
-samp.c4 {
+kbd.c2,
+pre.c2,
+samp.c2 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c4 .c5 {
+.c2 .c4 {
   top: 0.1em;
 }
 
 <div
   class="c0 c1"
+  role="alert"
 >
-  <div
+  <span
     class="c2 c3"
-    role="alert"
   >
-    <span
-      class="c4 c1"
-    >
-      Alert
-    </span>
-  </div>
+    Alert
+  </span>
 </div>
 `;
 
@@ -283,10 +223,10 @@ exports[`renders correctly when a title prop is set 1`] = `
   font-size: 100%;
   box-sizing: border-box;
   background-color: unset;
-  color: inherit;
+  color: #fcfcfc;
 }
 
-.c3 {
+.c4 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -296,83 +236,57 @@ exports[`renders correctly when a title prop is set 1`] = `
   font-size: 100%;
   box-sizing: border-box;
   background-color: unset;
-  color: #fcfcfc;
-}
-
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
+  color: inherit;
 }
 
-.c5 {
+.c3 {
   font-weight: 700;
   line-height: 1.2;
   margin-bottom: 1rem;
 }
 
-.heading.c5 + .sub-heading {
+.heading.c3 + .sub-heading {
   margin-top: -1rem;
 }
 
-.c5:last-child {
+.c3:last-child {
   margin-bottom: 0;
 }
 
-h1.c5 {
+h1.c3 {
   font-size: 3rem;
 }
 
-h2.c5 {
+h2.c3 {
   font-size: 2.5rem;
 }
 
-h3.c5 {
+h3.c3 {
   font-size: 2rem;
 }
 
-h4.c5 {
+h4.c3 {
   font-size: 1.5rem;
 }
 
-h5.c5 {
+h5.c3 {
   font-size: 1.25rem;
 }
 
-h6.c5 {
+h6.c3 {
   font-size: 1rem;
 }
 
-.c5 .c7 {
+.c3 .c6 {
   top: 0.1em;
 }
 
-.c4 {
+.c2 {
   font-weight: 600;
   margin-bottom: 0.5rem;
 }
 
-.c2 {
+.c0 {
   background-color: white;
   border: 1px solid #e6e6e6;
   border-left: 4px solid #435a6f;
@@ -381,18 +295,18 @@ h6.c5 {
   padding: 1rem;
 }
 
-abbr.c6 {
+abbr.c5 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c6 {
+i.c5 {
   font-style: italic;
 }
 
-kbd.c6 {
+kbd.c5 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -400,111 +314,94 @@ kbd.c6 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c6 {
+mark.c5 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c6 {
+strong.c5 {
   font-weight: bold;
 }
 
-sub.c6,
-sup.c6 {
+sub.c5,
+sup.c5 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c6,
-u.c6 {
+ins.c5,
+u.c5 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c6,
-cite.c6,
-var.c6,
-em.c6 {
+i.c5,
+cite.c5,
+var.c5,
+em.c5 {
   font-style: italic;
 }
 
-kbd.c6,
-pre.c6,
-samp.c6 {
+kbd.c5,
+pre.c5,
+samp.c5 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c6 .c7 {
+.c5 .c6 {
   top: 0.1em;
 }
 
 @media (max-width:480px) {
-  h1.c5 {
+  h1.c3 {
     font-size: 2rem;
   }
 }
 
 @media (max-width:480px) {
-  h2.c5 {
+  h2.c3 {
     font-size: 1.8rem;
   }
 }
 
 @media (max-width:480px) {
-  h3.c5 {
+  h3.c3 {
     font-size: 1.6rem;
   }
 }
 
 @media (max-width:480px) {
-  h4.c5 {
+  h4.c3 {
     font-size: 1.4rem;
   }
 }
 
 @media (max-width:480px) {
-  h5.c5 {
+  h5.c3 {
     font-size: 1.2rem;
   }
 }
 
 <div
   class="c0 c1"
+  role="alert"
 >
-  <div
-    class="c2 c3"
-    role="alert"
+  <h6
+    class="c2 heading c3 c4"
+  >
+    Title
+  </h6>
+  <span
+    class="c5 c4"
   >
-    <h6
-      class="c4 heading c5 c1"
-    >
-      Title
-    </h6>
-    <span
-      class="c6 c1"
-    >
-      Alert
-    </span>
-  </div>
+    Alert
+  </span>
 </div>
 `;
 
 exports[`renders correctly with a custom element 1`] = `
 .c1 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
-}
-
-.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -518,32 +415,6 @@ exports[`renders correctly with a custom element 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   background-color: white;
   border: 1px solid #e6e6e6;
   border-left: 4px solid #435a6f;
@@ -554,14 +425,10 @@ exports[`renders correctly with a custom element 1`] = `
 
 <div
   class="c0 c1"
+  role="alert"
 >
-  <div
-    class="c2 c3"
-    role="alert"
-  >
-    <label>
-      Alert
-    </label>
-  </div>
+  <label>
+    Alert
+  </label>
 </div>
 `;
diff --git a/src/Alert/__tests__/__snapshots__/AlertTitle.test.js.snap b/src/Alert/__tests__/__snapshots__/AlertTitle.test.js.snap
index fab742580..8feee384d 100644
--- a/src/Alert/__tests__/__snapshots__/AlertTitle.test.js.snap
+++ b/src/Alert/__tests__/__snapshots__/AlertTitle.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly 1`] = `
-.c1 {
+.c2 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -14,116 +14,86 @@ exports[`renders correctly 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
+.c1 {
   font-weight: 700;
   line-height: 1.2;
   margin-bottom: 1rem;
 }
 
-.heading.c3 + .sub-heading {
+.heading.c1 + .sub-heading {
   margin-top: -1rem;
 }
 
-.c3:last-child {
+.c1:last-child {
   margin-bottom: 0;
 }
 
-h1.c3 {
+h1.c1 {
   font-size: 3rem;
 }
 
-h2.c3 {
+h2.c1 {
   font-size: 2.5rem;
 }
 
-h3.c3 {
+h3.c1 {
   font-size: 2rem;
 }
 
-h4.c3 {
+h4.c1 {
   font-size: 1.5rem;
 }
 
-h5.c3 {
+h5.c1 {
   font-size: 1.25rem;
 }
 
-h6.c3 {
+h6.c1 {
   font-size: 1rem;
 }
 
-.c3 .c4 {
+.c1 .c3 {
   top: 0.1em;
 }
 
-.c2 {
+.c0 {
   font-weight: 600;
   margin-bottom: 0.5rem;
 }
 
 @media (max-width:480px) {
-  h1.c3 {
+  h1.c1 {
     font-size: 2rem;
   }
 }
 
 @media (max-width:480px) {
-  h2.c3 {
+  h2.c1 {
     font-size: 1.8rem;
   }
 }
 
 @media (max-width:480px) {
-  h3.c3 {
+  h3.c1 {
     font-size: 1.6rem;
   }
 }
 
 @media (max-width:480px) {
-  h4.c3 {
+  h4.c1 {
     font-size: 1.4rem;
   }
 }
 
 @media (max-width:480px) {
-  h5.c3 {
+  h5.c1 {
     font-size: 1.2rem;
   }
 }
 
-<div
-  class="c0 c1"
+<h6
+  class="c0 heading c1 c2"
 >
-  <h6
-    class="c2 heading c3 c1"
-  >
-    AlertTitle
-  </h6>
-</div>
+  AlertTitle
+</h6>
 `;
diff --git a/src/Backdrop/__tests__/__snapshots__/Backdrop.test.js.snap b/src/Backdrop/__tests__/__snapshots__/Backdrop.test.js.snap
index dce57c83d..a59a9ffeb 100644
--- a/src/Backdrop/__tests__/__snapshots__/Backdrop.test.js.snap
+++ b/src/Backdrop/__tests__/__snapshots__/Backdrop.test.js.snap
@@ -15,32 +15,6 @@ exports[`renders correctly for a basic backdrop 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   -webkit-transform: translate3d(0px,0px,0px);
   -ms-transform: translate3d(0px,0px,0px);
   transform: translate3d(0px,0px,0px);
@@ -56,21 +30,17 @@ exports[`renders correctly for a basic backdrop 1`] = `
   opacity: 0.4;
 }
 
-.c2[aria-hidden="true"] {
+.c0[aria-hidden="true"] {
   pointer-events: none;
   display: none !important;
 }
 
 <div
+  aria-hidden="false"
   class="c0 c1"
+  role="button"
+  tabindex="-1"
 >
-  <div
-    aria-hidden="false"
-    class="c2 c1"
-    role="button"
-    tabindex="-1"
-  >
-    test
-  </div>
+  test
 </div>
 `;
diff --git a/src/Blockquote/__tests__/__snapshots__/Blockquote.test.js.snap b/src/Blockquote/__tests__/__snapshots__/Blockquote.test.js.snap
index 6c3dfb4c4..8a8a65dd7 100644
--- a/src/Blockquote/__tests__/__snapshots__/Blockquote.test.js.snap
+++ b/src/Blockquote/__tests__/__snapshots__/Blockquote.test.js.snap
@@ -15,43 +15,13 @@ exports[`renders correctly for a basic blockquote 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   border-left: 4px solid #ccc;
   padding: 1rem;
 }
 
-<div
+<blockquote
   class="c0 c1"
 >
-  <blockquote
-    class="c2 c1"
-  >
-    test
-  </blockquote>
-</div>
+  test
+</blockquote>
 `;
diff --git a/src/Button/__tests__/__snapshots__/ActionButtons.test.js.snap b/src/Button/__tests__/__snapshots__/ActionButtons.test.js.snap
index 27670f968..68851a9a6 100644
--- a/src/Button/__tests__/__snapshots__/ActionButtons.test.js.snap
+++ b/src/Button/__tests__/__snapshots__/ActionButtons.test.js.snap
@@ -14,7 +14,7 @@ exports[`renders correctly for action buttons that is loading 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -27,7 +27,7 @@ exports[`renders correctly for action buttons that is loading 1`] = `
   color: inherit;
 }
 
-.c7 {
+.c6 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -40,7 +40,7 @@ exports[`renders correctly for action buttons that is loading 1`] = `
   color: inherit;
 }
 
-.c10 {
+.c9 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -54,33 +54,7 @@ exports[`renders correctly for action buttons that is loading 1`] = `
   color: #fff !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c9 {
+.c8 {
   font-size: 20px;
   -webkit-animation: iVXCSc 0.6s infinite linear;
   animation: iVXCSc 0.6s infinite linear;
@@ -94,7 +68,7 @@ exports[`renders correctly for action buttons that is loading 1`] = `
   position: relative;
 }
 
-.c3 {
+.c2 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -120,28 +94,28 @@ exports[`renders correctly for action buttons that is loading 1`] = `
   text-decoration: none;
 }
 
-.c3:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   box-shadow: #7467c0 0px 0px 0px 2px;
 }
 
-.c3[disabled] {
+.c2[disabled] {
   cursor: not-allowed;
   opacity: 0.7;
   outline: unset;
   pointer-events: unset;
 }
 
-.c3:hover {
+.c2:hover {
   background-color: #efefef;
 }
 
-.c3:hover:active {
+.c2:hover:active {
   background-color: #e3e3e3;
 }
 
-.c6 {
+.c5 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -167,29 +141,29 @@ exports[`renders correctly for action buttons that is loading 1`] = `
   text-decoration: none;
 }
 
-.c6:focus {
+.c5:focus {
   outline: unset;
   z-index: 2;
   box-shadow: #7467c0 0px 0px 0px 2px;
 }
 
-.c6[disabled] {
+.c5[disabled] {
   cursor: not-allowed;
   opacity: 0.7;
   outline: unset;
   pointer-events: unset;
 }
 
-.c6 {
+.c5 {
   cursor: not-allowed;
 }
 
-.c6:focus {
+.c5:focus {
   box-shadow: unset !important;
   outline: unset !important;
 }
 
-.c8 {
+.c7 {
   position: absolute;
   display: -webkit-box;
   display: -webkit-flex;
@@ -205,11 +179,11 @@ exports[`renders correctly for action buttons that is loading 1`] = `
   justify-content: center;
 }
 
-.c8 + span {
+.c7 + span {
   opacity: 0;
 }
 
-.c5 {
+.c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -220,7 +194,7 @@ exports[`renders correctly for action buttons that is loading 1`] = `
   display: inline-flex;
 }
 
-.c2 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -240,50 +214,46 @@ exports[`renders correctly for action buttons that is loading 1`] = `
   margin-top: -0.5rem;
 }
 
-.c2 > * {
+.c0 > * {
   margin-left: 0.5rem;
   margin-top: 0.5rem;
 }
 
 <div
   class="c0 c1"
+  spacing="xxsmall"
 >
-  <div
-    class="c2 c1"
-    spacing="xxsmall"
+  <button
+    class="c2 c3"
+    kind="default"
+    style="size: default;"
   >
-    <button
-      class="c3 c4"
-      kind="default"
-      style="size: default;"
+    <span
+      class="c4"
     >
-      <span
-        class="c5"
-      >
-        Cancel
-      </span>
-    </button>
-    <button
-      class="c6 c7"
-      kind="default"
-      style="size: default;"
+      Cancel
+    </span>
+  </button>
+  <button
+    class="c5 c6"
+    kind="default"
+    style="size: default;"
+  >
+    <div
+      class="c7 c1"
     >
       <div
-        class="c8 c1"
-      >
-        <div
-          class="c9 c10"
-          color="primaryInverted"
-          style="size: default;"
-        />
-      </div>
-      <span
-        class="c5"
-      >
-        Submit
-      </span>
-    </button>
-  </div>
+        class="c8 c9"
+        color="primaryInverted"
+        style="size: default;"
+      />
+    </div>
+    <span
+      class="c4"
+    >
+      Submit
+    </span>
+  </button>
 </div>
 `;
 
@@ -301,7 +271,7 @@ exports[`renders correctly for action buttons with a type 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -314,7 +284,7 @@ exports[`renders correctly for action buttons with a type 1`] = `
   color: inherit;
 }
 
-.c7 {
+.c6 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -327,33 +297,7 @@ exports[`renders correctly for action buttons with a type 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
+.c2 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -379,28 +323,28 @@ exports[`renders correctly for action buttons with a type 1`] = `
   text-decoration: none;
 }
 
-.c3:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   box-shadow: #7467c0 0px 0px 0px 2px;
 }
 
-.c3[disabled] {
+.c2[disabled] {
   cursor: not-allowed;
   opacity: 0.7;
   outline: unset;
   pointer-events: unset;
 }
 
-.c3:hover {
+.c2:hover {
   background-color: #efefef;
 }
 
-.c3:hover:active {
+.c2:hover:active {
   background-color: #e3e3e3;
 }
 
-.c6 {
+.c5 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -426,28 +370,28 @@ exports[`renders correctly for action buttons with a type 1`] = `
   text-decoration: none;
 }
 
-.c6:focus {
+.c5:focus {
   outline: unset;
   z-index: 2;
   box-shadow: #7467c0 0px 0px 0px 2px;
 }
 
-.c6[disabled] {
+.c5[disabled] {
   cursor: not-allowed;
   opacity: 0.7;
   outline: unset;
   pointer-events: unset;
 }
 
-.c6:hover {
+.c5:hover {
   background-color: #322190;
 }
 
-.c6:hover:active {
+.c5:hover:active {
   background-color: #2b1c7c;
 }
 
-.c5 {
+.c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -458,7 +402,7 @@ exports[`renders correctly for action buttons with a type 1`] = `
   display: inline-flex;
 }
 
-.c2 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -478,42 +422,38 @@ exports[`renders correctly for action buttons with a type 1`] = `
   margin-top: -0.5rem;
 }
 
-.c2 > * {
+.c0 > * {
   margin-left: 0.5rem;
   margin-top: 0.5rem;
 }
 
 <div
   class="c0 c1"
+  spacing="xxsmall"
 >
-  <div
-    class="c2 c1"
-    spacing="xxsmall"
+  <button
+    class="c2 c3"
+    kind="default"
+    style="size: default;"
   >
-    <button
-      class="c3 c4"
-      kind="default"
-      style="size: default;"
+    <span
+      class="c4"
     >
-      <span
-        class="c5"
-      >
-        Cancel
-      </span>
-    </button>
-    <button
-      class="c6 c7"
-      kind="default"
-      style="size: default;"
-      type="submit"
+      Cancel
+    </span>
+  </button>
+  <button
+    class="c5 c6"
+    kind="default"
+    style="size: default;"
+    type="submit"
+  >
+    <span
+      class="c4"
     >
-      <span
-        class="c5"
-      >
-        Submit
-      </span>
-    </button>
-  </div>
+      Submit
+    </span>
+  </button>
 </div>
 `;
 
@@ -531,7 +471,7 @@ exports[`renders correctly for action buttons with custom props 1`] = `
   color: inherit;
 }
 
-.c7 {
+.c6 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -544,7 +484,7 @@ exports[`renders correctly for action buttons with custom props 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -557,33 +497,7 @@ exports[`renders correctly for action buttons with custom props 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
+.c2 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -609,28 +523,28 @@ exports[`renders correctly for action buttons with custom props 1`] = `
   text-decoration: none;
 }
 
-.c3:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   box-shadow: #e24c67 0px 0px 0px 2px;
 }
 
-.c3[disabled] {
+.c2[disabled] {
   cursor: not-allowed;
   opacity: 0.7;
   outline: unset;
   pointer-events: unset;
 }
 
-.c3:hover {
+.c2:hover {
   background-color: #bd0022;
 }
 
-.c3:hover:active {
+.c2:hover:active {
   background-color: #a3001e;
 }
 
-.c6 {
+.c5 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -656,20 +570,20 @@ exports[`renders correctly for action buttons with custom props 1`] = `
   text-decoration: none;
 }
 
-.c6:focus {
+.c5:focus {
   outline: unset;
   z-index: 2;
   box-shadow: #7467c0 0px 0px 0px 2px;
 }
 
-.c6[disabled] {
+.c5[disabled] {
   cursor: not-allowed;
   opacity: 0.7;
   outline: unset;
   pointer-events: unset;
 }
 
-.c5 {
+.c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -680,7 +594,7 @@ exports[`renders correctly for action buttons with custom props 1`] = `
   display: inline-flex;
 }
 
-.c2 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -700,42 +614,38 @@ exports[`renders correctly for action buttons with custom props 1`] = `
   margin-top: -0.5rem;
 }
 
-.c2 > * {
+.c0 > * {
   margin-left: 0.5rem;
   margin-top: 0.5rem;
 }
 
 <div
   class="c0 c1"
+  spacing="xxsmall"
 >
-  <div
-    class="c2 c1"
-    spacing="xxsmall"
+  <button
+    class="c2 c3"
+    kind="default"
+    style="size: default;"
   >
-    <button
-      class="c3 c4"
-      kind="default"
-      style="size: default;"
+    <span
+      class="c4"
     >
-      <span
-        class="c5"
-      >
-        Reject
-      </span>
-    </button>
-    <button
-      class="c6 c7"
-      disabled=""
-      kind="default"
-      style="size: default;"
+      Reject
+    </span>
+  </button>
+  <button
+    class="c5 c6"
+    disabled=""
+    kind="default"
+    style="size: default;"
+  >
+    <span
+      class="c4"
     >
-      <span
-        class="c5"
-      >
-        Submit
-      </span>
-    </button>
-  </div>
+      Submit
+    </span>
+  </button>
 </div>
 `;
 
@@ -753,7 +663,7 @@ exports[`renders correctly for action buttons with custom text 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -766,7 +676,7 @@ exports[`renders correctly for action buttons with custom text 1`] = `
   color: inherit;
 }
 
-.c7 {
+.c6 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -779,33 +689,7 @@ exports[`renders correctly for action buttons with custom text 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
+.c2 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -831,28 +715,28 @@ exports[`renders correctly for action buttons with custom text 1`] = `
   text-decoration: none;
 }
 
-.c3:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   box-shadow: #7467c0 0px 0px 0px 2px;
 }
 
-.c3[disabled] {
+.c2[disabled] {
   cursor: not-allowed;
   opacity: 0.7;
   outline: unset;
   pointer-events: unset;
 }
 
-.c3:hover {
+.c2:hover {
   background-color: #efefef;
 }
 
-.c3:hover:active {
+.c2:hover:active {
   background-color: #e3e3e3;
 }
 
-.c6 {
+.c5 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -878,28 +762,28 @@ exports[`renders correctly for action buttons with custom text 1`] = `
   text-decoration: none;
 }
 
-.c6:focus {
+.c5:focus {
   outline: unset;
   z-index: 2;
   box-shadow: #7467c0 0px 0px 0px 2px;
 }
 
-.c6[disabled] {
+.c5[disabled] {
   cursor: not-allowed;
   opacity: 0.7;
   outline: unset;
   pointer-events: unset;
 }
 
-.c6:hover {
+.c5:hover {
   background-color: #322190;
 }
 
-.c6:hover:active {
+.c5:hover:active {
   background-color: #2b1c7c;
 }
 
-.c5 {
+.c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -910,7 +794,7 @@ exports[`renders correctly for action buttons with custom text 1`] = `
   display: inline-flex;
 }
 
-.c2 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -930,41 +814,37 @@ exports[`renders correctly for action buttons with custom text 1`] = `
   margin-top: -0.5rem;
 }
 
-.c2 > * {
+.c0 > * {
   margin-left: 0.5rem;
   margin-top: 0.5rem;
 }
 
 <div
   class="c0 c1"
+  spacing="xxsmall"
 >
-  <div
-    class="c2 c1"
-    spacing="xxsmall"
+  <button
+    class="c2 c3"
+    kind="default"
+    style="size: default;"
   >
-    <button
-      class="c3 c4"
-      kind="default"
-      style="size: default;"
+    <span
+      class="c4"
     >
-      <span
-        class="c5"
-      >
-        Close
-      </span>
-    </button>
-    <button
-      class="c6 c7"
-      kind="default"
-      style="size: default;"
+      Close
+    </span>
+  </button>
+  <button
+    class="c5 c6"
+    kind="default"
+    style="size: default;"
+  >
+    <span
+      class="c4"
     >
-      <span
-        class="c5"
-      >
-        Save
-      </span>
-    </button>
-  </div>
+      Save
+    </span>
+  </button>
 </div>
 `;
 
@@ -982,7 +862,7 @@ exports[`renders correctly for default action buttons 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -995,7 +875,7 @@ exports[`renders correctly for default action buttons 1`] = `
   color: inherit;
 }
 
-.c7 {
+.c6 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1008,33 +888,7 @@ exports[`renders correctly for default action buttons 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
+.c2 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1060,28 +914,28 @@ exports[`renders correctly for default action buttons 1`] = `
   text-decoration: none;
 }
 
-.c3:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   box-shadow: #7467c0 0px 0px 0px 2px;
 }
 
-.c3[disabled] {
+.c2[disabled] {
   cursor: not-allowed;
   opacity: 0.7;
   outline: unset;
   pointer-events: unset;
 }
 
-.c3:hover {
+.c2:hover {
   background-color: #efefef;
 }
 
-.c3:hover:active {
+.c2:hover:active {
   background-color: #e3e3e3;
 }
 
-.c6 {
+.c5 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1107,28 +961,28 @@ exports[`renders correctly for default action buttons 1`] = `
   text-decoration: none;
 }
 
-.c6:focus {
+.c5:focus {
   outline: unset;
   z-index: 2;
   box-shadow: #7467c0 0px 0px 0px 2px;
 }
 
-.c6[disabled] {
+.c5[disabled] {
   cursor: not-allowed;
   opacity: 0.7;
   outline: unset;
   pointer-events: unset;
 }
 
-.c6:hover {
+.c5:hover {
   background-color: #322190;
 }
 
-.c6:hover:active {
+.c5:hover:active {
   background-color: #2b1c7c;
 }
 
-.c5 {
+.c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1139,7 +993,7 @@ exports[`renders correctly for default action buttons 1`] = `
   display: inline-flex;
 }
 
-.c2 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1159,41 +1013,37 @@ exports[`renders correctly for default action buttons 1`] = `
   margin-top: -0.5rem;
 }
 
-.c2 > * {
+.c0 > * {
   margin-left: 0.5rem;
   margin-top: 0.5rem;
 }
 
 <div
   class="c0 c1"
+  spacing="xxsmall"
 >
-  <div
-    class="c2 c1"
-    spacing="xxsmall"
+  <button
+    class="c2 c3"
+    kind="default"
+    style="size: default;"
   >
-    <button
-      class="c3 c4"
-      kind="default"
-      style="size: default;"
+    <span
+      class="c4"
     >
-      <span
-        class="c5"
-      >
-        Cancel
-      </span>
-    </button>
-    <button
-      class="c6 c7"
-      kind="default"
-      style="size: default;"
+      Cancel
+    </span>
+  </button>
+  <button
+    class="c5 c6"
+    kind="default"
+    style="size: default;"
+  >
+    <span
+      class="c4"
     >
-      <span
-        class="c5"
-      >
-        Submit
-      </span>
-    </button>
-  </div>
+      Submit
+    </span>
+  </button>
 </div>
 `;
 
@@ -1211,7 +1061,7 @@ exports[`renders correctly when a palette prop is set 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1224,7 +1074,7 @@ exports[`renders correctly when a palette prop is set 1`] = `
   color: inherit;
 }
 
-.c7 {
+.c6 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1237,33 +1087,7 @@ exports[`renders correctly when a palette prop is set 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
+.c2 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1289,28 +1113,28 @@ exports[`renders correctly when a palette prop is set 1`] = `
   text-decoration: none;
 }
 
-.c3:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   box-shadow: #7467c0 0px 0px 0px 2px;
 }
 
-.c3[disabled] {
+.c2[disabled] {
   cursor: not-allowed;
   opacity: 0.7;
   outline: unset;
   pointer-events: unset;
 }
 
-.c3:hover {
+.c2:hover {
   background-color: #efefef;
 }
 
-.c3:hover:active {
+.c2:hover:active {
   background-color: #e3e3e3;
 }
 
-.c6 {
+.c5 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1336,28 +1160,28 @@ exports[`renders correctly when a palette prop is set 1`] = `
   text-decoration: none;
 }
 
-.c6:focus {
+.c5:focus {
   outline: unset;
   z-index: 2;
   box-shadow: #56748f 0px 0px 0px 2px;
 }
 
-.c6[disabled] {
+.c5[disabled] {
   cursor: not-allowed;
   opacity: 0.7;
   outline: unset;
   pointer-events: unset;
 }
 
-.c6:hover {
+.c5:hover {
   background-color: #394d5f;
 }
 
-.c6:hover:active {
+.c5:hover:active {
   background-color: #30404f;
 }
 
-.c5 {
+.c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1368,7 +1192,7 @@ exports[`renders correctly when a palette prop is set 1`] = `
   display: inline-flex;
 }
 
-.c2 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1388,40 +1212,36 @@ exports[`renders correctly when a palette prop is set 1`] = `
   margin-top: -0.5rem;
 }
 
-.c2 > * {
+.c0 > * {
   margin-left: 0.5rem;
   margin-top: 0.5rem;
 }
 
 <div
   class="c0 c1"
+  spacing="xxsmall"
 >
-  <div
-    class="c2 c1"
-    spacing="xxsmall"
+  <button
+    class="c2 c3"
+    kind="default"
+    style="size: default;"
   >
-    <button
-      class="c3 c4"
-      kind="default"
-      style="size: default;"
+    <span
+      class="c4"
     >
-      <span
-        class="c5"
-      >
-        Cancel
-      </span>
-    </button>
-    <button
-      class="c6 c7"
-      kind="default"
-      style="size: default;"
+      Cancel
+    </span>
+  </button>
+  <button
+    class="c5 c6"
+    kind="default"
+    style="size: default;"
+  >
+    <span
+      class="c4"
     >
-      <span
-        class="c5"
-      >
-        Submit
-      </span>
-    </button>
-  </div>
+      Submit
+    </span>
+  </button>
 </div>
 `;
diff --git a/src/Button/__tests__/__snapshots__/Button.test.js.snap b/src/Button/__tests__/__snapshots__/Button.test.js.snap
index 5de9849f4..deee85bef 100644
--- a/src/Button/__tests__/__snapshots__/Button.test.js.snap
+++ b/src/Button/__tests__/__snapshots__/Button.test.js.snap
@@ -10,7 +10,7 @@ exports[`renders correctly for a button that is loading 1`] = `
   font-family: inherit;
   font-size: 100%;
   box-sizing: border-box;
-  background-color: unset;
+  background-color: #fcfcfc;
   color: inherit;
 }
 
@@ -23,11 +23,11 @@ exports[`renders correctly for a button that is loading 1`] = `
   font-family: inherit;
   font-size: 100%;
   box-sizing: border-box;
-  background-color: #fcfcfc;
+  background-color: unset;
   color: inherit;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -41,33 +41,7 @@ exports[`renders correctly for a button that is loading 1`] = `
   color: #435a6f !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c5 {
+.c4 {
   font-size: 20px;
   -webkit-animation: iVXCSc 0.6s infinite linear;
   animation: iVXCSc 0.6s infinite linear;
@@ -81,7 +55,7 @@ exports[`renders correctly for a button that is loading 1`] = `
   position: relative;
 }
 
-.c2 {
+.c0 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -107,29 +81,29 @@ exports[`renders correctly for a button that is loading 1`] = `
   text-decoration: none;
 }
 
-.c2:focus {
+.c0:focus {
   outline: unset;
   z-index: 2;
   box-shadow: #7467c0 0px 0px 0px 2px;
 }
 
-.c2[disabled] {
+.c0[disabled] {
   cursor: not-allowed;
   opacity: 0.7;
   outline: unset;
   pointer-events: unset;
 }
 
-.c2 {
+.c0 {
   cursor: not-allowed;
 }
 
-.c2:focus {
+.c0:focus {
   box-shadow: unset !important;
   outline: unset !important;
 }
 
-.c4 {
+.c2 {
   position: absolute;
   display: -webkit-box;
   display: -webkit-flex;
@@ -145,11 +119,11 @@ exports[`renders correctly for a button that is loading 1`] = `
   justify-content: center;
 }
 
-.c4 + span {
+.c2 + span {
   opacity: 0;
 }
 
-.c7 {
+.c6 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -160,47 +134,30 @@ exports[`renders correctly for a button that is loading 1`] = `
   display: inline-flex;
 }
 
-<div
+<button
   class="c0 c1"
+  kind="default"
+  style="size: default;"
 >
-  <button
+  <div
     class="c2 c3"
-    kind="default"
-    style="size: default;"
   >
     <div
-      class="c4 c1"
-    >
-      <div
-        class="c5 c6"
-        color="defaultInverted"
-        style="size: default;"
-      />
-    </div>
-    <span
-      class="c7"
-    >
-      Test
-    </span>
-  </button>
-</div>
+      class="c4 c5"
+      color="defaultInverted"
+      style="size: default;"
+    />
+  </div>
+  <span
+    class="c6"
+  >
+    Test
+  </span>
+</button>
 `;
 
 exports[`renders correctly for a button with a custom element 1`] = `
 .c1 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
-}
-
-.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -214,32 +171,6 @@ exports[`renders correctly for a button with a custom element 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -265,28 +196,28 @@ exports[`renders correctly for a button with a custom element 1`] = `
   text-decoration: none;
 }
 
-.c2:focus {
+.c0:focus {
   outline: unset;
   z-index: 2;
   box-shadow: #7467c0 0px 0px 0px 2px;
 }
 
-.c2[disabled] {
+.c0[disabled] {
   cursor: not-allowed;
   opacity: 0.7;
   outline: unset;
   pointer-events: unset;
 }
 
-.c2:hover {
+.c0:hover {
   background-color: #efefef;
 }
 
-.c2:hover:active {
+.c0:hover:active {
   background-color: #e3e3e3;
 }
 
-.c4 {
+.c2 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -297,39 +228,22 @@ exports[`renders correctly for a button with a custom element 1`] = `
   display: inline-flex;
 }
 
-<div
+<a
   class="c0 c1"
+  href="#"
+  kind="default"
+  style="size: default;"
 >
-  <a
-    class="c2 c3"
-    href="#"
-    kind="default"
-    style="size: default;"
+  <span
+    class="c2"
   >
-    <span
-      class="c4"
-    >
-      Test
-    </span>
-  </a>
-</div>
+    Test
+  </span>
+</a>
 `;
 
 exports[`renders correctly for a button with a palette prop set 1`] = `
 .c1 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
-}
-
-.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -343,32 +257,6 @@ exports[`renders correctly for a button with a palette prop set 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -394,28 +282,28 @@ exports[`renders correctly for a button with a palette prop set 1`] = `
   text-decoration: none;
 }
 
-.c2:focus {
+.c0:focus {
   outline: unset;
   z-index: 2;
   box-shadow: #7467c0 0px 0px 0px 2px;
 }
 
-.c2[disabled] {
+.c0[disabled] {
   cursor: not-allowed;
   opacity: 0.7;
   outline: unset;
   pointer-events: unset;
 }
 
-.c2:hover {
+.c0:hover {
   background-color: #322190;
 }
 
-.c2:hover:active {
+.c0:hover:active {
   background-color: #2b1c7c;
 }
 
-.c4 {
+.c2 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -426,21 +314,17 @@ exports[`renders correctly for a button with a palette prop set 1`] = `
   display: inline-flex;
 }
 
-<div
+<button
   class="c0 c1"
+  kind="default"
+  style="size: default;"
 >
-  <button
-    class="c2 c3"
-    kind="default"
-    style="size: default;"
+  <span
+    class="c2"
   >
-    <span
-      class="c4"
-    >
-      Test
-    </span>
-  </button>
-</div>
+    Test
+  </span>
+</button>
 `;
 
 exports[`renders correctly for a colored button that is loading 1`] = `
@@ -453,7 +337,7 @@ exports[`renders correctly for a colored button that is loading 1`] = `
   font-family: inherit;
   font-size: 100%;
   box-sizing: border-box;
-  background-color: unset;
+  background-color: #3926a5;
   color: inherit;
 }
 
@@ -466,11 +350,11 @@ exports[`renders correctly for a colored button that is loading 1`] = `
   font-family: inherit;
   font-size: 100%;
   box-sizing: border-box;
-  background-color: #3926a5;
+  background-color: unset;
   color: inherit;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -484,33 +368,7 @@ exports[`renders correctly for a colored button that is loading 1`] = `
   color: #fff !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c5 {
+.c4 {
   font-size: 20px;
   -webkit-animation: iVXCSc 0.6s infinite linear;
   animation: iVXCSc 0.6s infinite linear;
@@ -524,7 +382,7 @@ exports[`renders correctly for a colored button that is loading 1`] = `
   position: relative;
 }
 
-.c2 {
+.c0 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -550,29 +408,29 @@ exports[`renders correctly for a colored button that is loading 1`] = `
   text-decoration: none;
 }
 
-.c2:focus {
+.c0:focus {
   outline: unset;
   z-index: 2;
   box-shadow: #7467c0 0px 0px 0px 2px;
 }
 
-.c2[disabled] {
+.c0[disabled] {
   cursor: not-allowed;
   opacity: 0.7;
   outline: unset;
   pointer-events: unset;
 }
 
-.c2 {
+.c0 {
   cursor: not-allowed;
 }
 
-.c2:focus {
+.c0:focus {
   box-shadow: unset !important;
   outline: unset !important;
 }
 
-.c4 {
+.c2 {
   position: absolute;
   display: -webkit-box;
   display: -webkit-flex;
@@ -588,11 +446,11 @@ exports[`renders correctly for a colored button that is loading 1`] = `
   justify-content: center;
 }
 
-.c4 + span {
+.c2 + span {
   opacity: 0;
 }
 
-.c7 {
+.c6 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -603,47 +461,30 @@ exports[`renders correctly for a colored button that is loading 1`] = `
   display: inline-flex;
 }
 
-<div
+<button
   class="c0 c1"
+  kind="default"
+  style="size: default;"
 >
-  <button
+  <div
     class="c2 c3"
-    kind="default"
-    style="size: default;"
   >
     <div
-      class="c4 c1"
-    >
-      <div
-        class="c5 c6"
-        color="primaryInverted"
-        style="size: default;"
-      />
-    </div>
-    <span
-      class="c7"
-    >
-      Test
-    </span>
-  </button>
-</div>
+      class="c4 c5"
+      color="primaryInverted"
+      style="size: default;"
+    />
+  </div>
+  <span
+    class="c6"
+  >
+    Test
+  </span>
+</button>
 `;
 
 exports[`renders correctly for a default button 1`] = `
 .c1 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
-}
-
-.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -657,32 +498,6 @@ exports[`renders correctly for a default button 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -708,28 +523,28 @@ exports[`renders correctly for a default button 1`] = `
   text-decoration: none;
 }
 
-.c2:focus {
+.c0:focus {
   outline: unset;
   z-index: 2;
   box-shadow: #7467c0 0px 0px 0px 2px;
 }
 
-.c2[disabled] {
+.c0[disabled] {
   cursor: not-allowed;
   opacity: 0.7;
   outline: unset;
   pointer-events: unset;
 }
 
-.c2:hover {
+.c0:hover {
   background-color: #efefef;
 }
 
-.c2:hover:active {
+.c0:hover:active {
   background-color: #e3e3e3;
 }
 
-.c4 {
+.c2 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -740,38 +555,21 @@ exports[`renders correctly for a default button 1`] = `
   display: inline-flex;
 }
 
-<div
+<button
   class="c0 c1"
+  kind="default"
+  style="size: default;"
 >
-  <button
-    class="c2 c3"
-    kind="default"
-    style="size: default;"
+  <span
+    class="c2"
   >
-    <span
-      class="c4"
-    >
-      Test
-    </span>
-  </button>
-</div>
+    Test
+  </span>
+</button>
 `;
 
 exports[`renders correctly for a disabled button 1`] = `
 .c1 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
-}
-
-.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -785,32 +583,6 @@ exports[`renders correctly for a disabled button 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -836,20 +608,20 @@ exports[`renders correctly for a disabled button 1`] = `
   text-decoration: none;
 }
 
-.c2:focus {
+.c0:focus {
   outline: unset;
   z-index: 2;
   box-shadow: #7467c0 0px 0px 0px 2px;
 }
 
-.c2[disabled] {
+.c0[disabled] {
   cursor: not-allowed;
   opacity: 0.7;
   outline: unset;
   pointer-events: unset;
 }
 
-.c4 {
+.c2 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -860,39 +632,22 @@ exports[`renders correctly for a disabled button 1`] = `
   display: inline-flex;
 }
 
-<div
+<button
   class="c0 c1"
+  disabled=""
+  kind="default"
+  style="size: default;"
 >
-  <button
-    class="c2 c3"
-    disabled=""
-    kind="default"
-    style="size: default;"
+  <span
+    class="c2"
   >
-    <span
-      class="c4"
-    >
-      Test
-    </span>
-  </button>
-</div>
+    Test
+  </span>
+</button>
 `;
 
 exports[`renders correctly for a link button 1`] = `
 .c1 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
-}
-
-.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -906,32 +661,6 @@ exports[`renders correctly for a link button 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -957,20 +686,20 @@ exports[`renders correctly for a link button 1`] = `
   text-decoration: none;
 }
 
-.c2:focus {
+.c0:focus {
   outline: unset;
   z-index: 2;
   box-shadow: #7467c0 0px 0px 0px 2px;
 }
 
-.c2[disabled] {
+.c0[disabled] {
   cursor: not-allowed;
   opacity: 0.7;
   outline: unset;
   pointer-events: unset;
 }
 
-.c2 {
+.c0 {
   border: 0;
   background: unset;
   color: #435a6f;
@@ -979,12 +708,12 @@ exports[`renders correctly for a link button 1`] = `
   text-decoration: underline;
 }
 
-.c2:hover {
+.c0:hover {
   color: #000;
   fill: #000;
 }
 
-.c4 {
+.c2 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -995,21 +724,17 @@ exports[`renders correctly for a link button 1`] = `
   display: inline-flex;
 }
 
-<div
-  class="c0 c1"
->
-  <button
-    class="c2 c3"
-    kind="link"
-    style="size: default;"
-  >
-    <span
-      class="c4"
-    >
-      Test
-    </span>
-  </button>
-</div>
+<button
+  class="c0 c1"
+  kind="link"
+  style="size: default;"
+>
+  <span
+    class="c2"
+  >
+    Test
+  </span>
+</button>
 `;
 
 exports[`renders correctly for a link button that is loading 1`] = `
@@ -1022,7 +747,7 @@ exports[`renders correctly for a link button that is loading 1`] = `
   font-family: inherit;
   font-size: 100%;
   box-sizing: border-box;
-  background-color: unset;
+  background-color: #fcfcfc;
   color: inherit;
 }
 
@@ -1035,11 +760,11 @@ exports[`renders correctly for a link button that is loading 1`] = `
   font-family: inherit;
   font-size: 100%;
   box-sizing: border-box;
-  background-color: #fcfcfc;
+  background-color: unset;
   color: inherit;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1053,33 +778,7 @@ exports[`renders correctly for a link button that is loading 1`] = `
   color: #fcfcfc !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c5 {
+.c4 {
   font-size: 20px;
   -webkit-animation: iVXCSc 0.6s infinite linear;
   animation: iVXCSc 0.6s infinite linear;
@@ -1093,7 +792,7 @@ exports[`renders correctly for a link button that is loading 1`] = `
   position: relative;
 }
 
-.c2 {
+.c0 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1119,20 +818,20 @@ exports[`renders correctly for a link button that is loading 1`] = `
   text-decoration: none;
 }
 
-.c2:focus {
+.c0:focus {
   outline: unset;
   z-index: 2;
   box-shadow: #7467c0 0px 0px 0px 2px;
 }
 
-.c2[disabled] {
+.c0[disabled] {
   cursor: not-allowed;
   opacity: 0.7;
   outline: unset;
   pointer-events: unset;
 }
 
-.c2 {
+.c0 {
   border: 0;
   background: unset;
   color: #435a6f;
@@ -1141,21 +840,21 @@ exports[`renders correctly for a link button that is loading 1`] = `
   text-decoration: underline;
 }
 
-.c2:hover {
+.c0:hover {
   color: #000;
   fill: #000;
 }
 
-.c2 {
+.c0 {
   cursor: not-allowed;
 }
 
-.c2:focus {
+.c0:focus {
   box-shadow: unset !important;
   outline: unset !important;
 }
 
-.c4 {
+.c2 {
   position: absolute;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1171,11 +870,11 @@ exports[`renders correctly for a link button that is loading 1`] = `
   justify-content: center;
 }
 
-.c4 + span {
+.c2 + span {
   opacity: 0;
 }
 
-.c7 {
+.c6 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1186,34 +885,30 @@ exports[`renders correctly for a link button that is loading 1`] = `
   display: inline-flex;
 }
 
-<div
+<button
   class="c0 c1"
+  kind="link"
+  style="size: default;"
 >
-  <button
+  <div
     class="c2 c3"
-    kind="link"
-    style="size: default;"
   >
     <div
-      class="c4 c1"
-    >
-      <div
-        class="c5 c6"
-        color="default"
-        style="size: default;"
-      />
-    </div>
-    <span
-      class="c7"
-    >
-      Test
-    </span>
-  </button>
-</div>
+      class="c4 c5"
+      color="default"
+      style="size: default;"
+    />
+  </div>
+  <span
+    class="c6"
+  >
+    Test
+  </span>
+</button>
 `;
 
 exports[`renders correctly for a list of buttons 1`] = `
-.c1 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1222,11 +917,11 @@ exports[`renders correctly for a list of buttons 1`] = `
   font-family: inherit;
   font-size: 100%;
   box-sizing: border-box;
-  background-color: unset;
+  background-color: #fcfcfc;
   color: inherit;
 }
 
-.c4 {
+.c1 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1235,37 +930,11 @@ exports[`renders correctly for a list of buttons 1`] = `
   font-family: inherit;
   font-size: 100%;
   box-sizing: border-box;
-  background-color: #fcfcfc;
+  background-color: unset;
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
+.c2 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1291,28 +960,28 @@ exports[`renders correctly for a list of buttons 1`] = `
   text-decoration: none;
 }
 
-.c3:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   box-shadow: #7467c0 0px 0px 0px 2px;
 }
 
-.c3[disabled] {
+.c2[disabled] {
   cursor: not-allowed;
   opacity: 0.7;
   outline: unset;
   pointer-events: unset;
 }
 
-.c3:hover {
+.c2:hover {
   background-color: #efefef;
 }
 
-.c3:hover:active {
+.c2:hover:active {
   background-color: #e3e3e3;
 }
 
-.c5 {
+.c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1323,7 +992,7 @@ exports[`renders correctly for a list of buttons 1`] = `
   display: inline-flex;
 }
 
-.c2 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1343,70 +1012,53 @@ exports[`renders correctly for a list of buttons 1`] = `
   margin-top: -0.5rem;
 }
 
-.c2 > * {
+.c0 > * {
   margin-left: 0.5rem;
   margin-top: 0.5rem;
 }
 
 <div
   class="c0 c1"
+  spacing="xxsmall"
 >
-  <div
-    class="c2 c1"
-    spacing="xxsmall"
+  <button
+    class="c2 c3"
+    kind="default"
+    style="size: default;"
   >
-    <button
-      class="c3 c4"
-      kind="default"
-      style="size: default;"
+    <span
+      class="c4"
     >
-      <span
-        class="c5"
-      >
-        Test
-      </span>
-    </button>
-    <button
-      class="c3 c4"
-      kind="default"
-      style="size: default;"
+      Test
+    </span>
+  </button>
+  <button
+    class="c2 c3"
+    kind="default"
+    style="size: default;"
+  >
+    <span
+      class="c4"
     >
-      <span
-        class="c5"
-      >
-        Test 2
-      </span>
-    </button>
-    <button
-      class="c3 c4"
-      kind="default"
-      style="size: default;"
+      Test 2
+    </span>
+  </button>
+  <button
+    class="c2 c3"
+    kind="default"
+    style="size: default;"
+  >
+    <span
+      class="c4"
     >
-      <span
-        class="c5"
-      >
-        Test 3
-      </span>
-    </button>
-  </div>
+      Test 3
+    </span>
+  </button>
 </div>
 `;
 
 exports[`renders correctly for an outlined button 1`] = `
 .c1 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
-}
-
-.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1420,32 +1072,6 @@ exports[`renders correctly for an outlined button 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1471,40 +1097,40 @@ exports[`renders correctly for an outlined button 1`] = `
   text-decoration: none;
 }
 
-.c2:focus {
+.c0:focus {
   outline: unset;
   z-index: 2;
   box-shadow: #7467c0 0px 0px 0px 2px;
 }
 
-.c2[disabled] {
+.c0[disabled] {
   cursor: not-allowed;
   opacity: 0.7;
   outline: unset;
   pointer-events: unset;
 }
 
-.c2 {
+.c0 {
   background-color: unset;
   border: 1px solid #fcfcfc;
   color: #fcfcfc;
   fill: #fcfcfc;
 }
 
-.c2:hover {
+.c0:hover {
   color: #435a6f;
   fill: #435a6f;
 }
 
-.c2:hover {
+.c0:hover {
   background-color: #efefef;
 }
 
-.c2:hover:active {
+.c0:hover:active {
   background-color: #e3e3e3;
 }
 
-.c4 {
+.c2 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1515,21 +1141,17 @@ exports[`renders correctly for an outlined button 1`] = `
   display: inline-flex;
 }
 
-<div
+<button
   class="c0 c1"
+  kind="outlined"
+  style="size: default;"
 >
-  <button
-    class="c2 c3"
-    kind="outlined"
-    style="size: default;"
+  <span
+    class="c2"
   >
-    <span
-      class="c4"
-    >
-      Test
-    </span>
-  </button>
-</div>
+    Test
+  </span>
+</button>
 `;
 
 exports[`renders correctly for an outlined button that is loading 1`] = `
@@ -1542,7 +1164,7 @@ exports[`renders correctly for an outlined button that is loading 1`] = `
   font-family: inherit;
   font-size: 100%;
   box-sizing: border-box;
-  background-color: unset;
+  background-color: #fcfcfc;
   color: inherit;
 }
 
@@ -1555,11 +1177,11 @@ exports[`renders correctly for an outlined button that is loading 1`] = `
   font-family: inherit;
   font-size: 100%;
   box-sizing: border-box;
-  background-color: #fcfcfc;
+  background-color: unset;
   color: inherit;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1573,33 +1195,7 @@ exports[`renders correctly for an outlined button that is loading 1`] = `
   color: #fcfcfc !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c5 {
+.c4 {
   font-size: 20px;
   -webkit-animation: iVXCSc 0.6s infinite linear;
   animation: iVXCSc 0.6s infinite linear;
@@ -1613,7 +1209,7 @@ exports[`renders correctly for an outlined button that is loading 1`] = `
   position: relative;
 }
 
-.c2 {
+.c0 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1639,41 +1235,41 @@ exports[`renders correctly for an outlined button that is loading 1`] = `
   text-decoration: none;
 }
 
-.c2:focus {
+.c0:focus {
   outline: unset;
   z-index: 2;
   box-shadow: #7467c0 0px 0px 0px 2px;
 }
 
-.c2[disabled] {
+.c0[disabled] {
   cursor: not-allowed;
   opacity: 0.7;
   outline: unset;
   pointer-events: unset;
 }
 
-.c2 {
+.c0 {
   background-color: unset;
   border: 1px solid #fcfcfc;
   color: #fcfcfc;
   fill: #fcfcfc;
 }
 
-.c2:hover {
+.c0:hover {
   color: #435a6f;
   fill: #435a6f;
 }
 
-.c2 {
+.c0 {
   cursor: not-allowed;
 }
 
-.c2:focus {
+.c0:focus {
   box-shadow: unset !important;
   outline: unset !important;
 }
 
-.c4 {
+.c2 {
   position: absolute;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1689,11 +1285,11 @@ exports[`renders correctly for an outlined button that is loading 1`] = `
   justify-content: center;
 }
 
-.c4 + span {
+.c2 + span {
   opacity: 0;
 }
 
-.c7 {
+.c6 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1704,34 +1300,30 @@ exports[`renders correctly for an outlined button that is loading 1`] = `
   display: inline-flex;
 }
 
-<div
+<button
   class="c0 c1"
+  kind="outlined"
+  style="size: default;"
 >
-  <button
+  <div
     class="c2 c3"
-    kind="outlined"
-    style="size: default;"
   >
     <div
-      class="c4 c1"
-    >
-      <div
-        class="c5 c6"
-        color="default"
-        style="size: default;"
-      />
-    </div>
-    <span
-      class="c7"
-    >
-      Test
-    </span>
-  </button>
-</div>
+      class="c4 c5"
+      color="default"
+      style="size: default;"
+    />
+  </div>
+  <span
+    class="c6"
+  >
+    Test
+  </span>
+</button>
 `;
 
 exports[`renders correctly for grouped buttons 1`] = `
-.c1 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1740,11 +1332,11 @@ exports[`renders correctly for grouped buttons 1`] = `
   font-family: inherit;
   font-size: 100%;
   box-sizing: border-box;
-  background-color: unset;
+  background-color: #fcfcfc;
   color: inherit;
 }
 
-.c4 {
+.c1 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1753,37 +1345,11 @@ exports[`renders correctly for grouped buttons 1`] = `
   font-family: inherit;
   font-size: 100%;
   box-sizing: border-box;
-  background-color: #fcfcfc;
+  background-color: unset;
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
+.c2 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1809,28 +1375,28 @@ exports[`renders correctly for grouped buttons 1`] = `
   text-decoration: none;
 }
 
-.c3:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   box-shadow: #7467c0 0px 0px 0px 2px;
 }
 
-.c3[disabled] {
+.c2[disabled] {
   cursor: not-allowed;
   opacity: 0.7;
   outline: unset;
   pointer-events: unset;
 }
 
-.c3:hover {
+.c2:hover {
   background-color: #efefef;
 }
 
-.c3:hover:active {
+.c2:hover:active {
   background-color: #e3e3e3;
 }
 
-.c5 {
+.c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1841,7 +1407,7 @@ exports[`renders correctly for grouped buttons 1`] = `
   display: inline-flex;
 }
 
-.c2 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1851,92 +1417,88 @@ exports[`renders correctly for grouped buttons 1`] = `
   flex-direction: row;
 }
 
-.c2 > *:not(:first-child):not(:last-child),
-.c2 > *:not(:first-child):not(:last-child) .GroupItem-sc-2orogz-0 {
+.c0 > *:not(:first-child):not(:last-child),
+.c0 > *:not(:first-child):not(:last-child) .GroupItem-sc-2orogz-0 {
   border-radius: 0;
   border-left-width: 0;
 }
 
-.c2 > *:first-child,
-.c2 > *:first-child .GroupItem-sc-2orogz-0 {
+.c0 > *:first-child,
+.c0 > *:first-child .GroupItem-sc-2orogz-0 {
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
 }
 
-.c2 > *:last-child,
-.c2 > *:last-child .GroupItem-sc-2orogz-0 {
+.c0 > *:last-child,
+.c0 > *:last-child .GroupItem-sc-2orogz-0 {
   border-top-left-radius: 0;
   border-left-width: 0;
   border-bottom-left-radius: 0;
 }
 
-.c2 > * {
+.c0 > * {
   border-radius: 4px;
 }
 
-.c2 input:focus,
-.c2 select:focus {
+.c0 input:focus,
+.c0 select:focus {
   z-index: 1;
   position: relative;
 }
 
-.c2 > *:first-child input,
-.c2 > *:first-child select {
+.c0 > *:first-child input,
+.c0 > *:first-child select {
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
 }
 
-.c2 > *:last-child input,
-.c2 > *:last-child select {
+.c0 > *:last-child input,
+.c0 > *:last-child select {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-.c2 > *:not(:first-child):not(:last-child) > input,
-.c2 > *:not(:first-child):not(:last-child) > select {
+.c0 > *:not(:first-child):not(:last-child) > input,
+.c0 > *:not(:first-child):not(:last-child) > select {
   border-radius: 0;
 }
 
 <div
   class="c0 c1"
+  role="group"
 >
-  <div
-    class="c2 c1"
-    role="group"
+  <button
+    class="c2 c3"
+    kind="default"
+    style="size: default;"
   >
-    <button
-      class="c3 c4"
-      kind="default"
-      style="size: default;"
+    <span
+      class="c4"
     >
-      <span
-        class="c5"
-      >
-        Test
-      </span>
-    </button>
-    <button
-      class="c3 c4"
-      kind="default"
-      style="size: default;"
+      Test
+    </span>
+  </button>
+  <button
+    class="c2 c3"
+    kind="default"
+    style="size: default;"
+  >
+    <span
+      class="c4"
     >
-      <span
-        class="c5"
-      >
-        Test 2
-      </span>
-    </button>
-    <button
-      class="c3 c4"
-      kind="default"
-      style="size: default;"
+      Test 2
+    </span>
+  </button>
+  <button
+    class="c2 c3"
+    kind="default"
+    style="size: default;"
+  >
+    <span
+      class="c4"
     >
-      <span
-        class="c5"
-      >
-        Test 3
-      </span>
-    </button>
-  </div>
+      Test 3
+    </span>
+  </button>
 </div>
 `;
diff --git a/src/Card/__tests__/__snapshots__/Card.test.js.snap b/src/Card/__tests__/__snapshots__/Card.test.js.snap
index 4dfaba251..092f14ae6 100644
--- a/src/Card/__tests__/__snapshots__/Card.test.js.snap
+++ b/src/Card/__tests__/__snapshots__/Card.test.js.snap
@@ -12,6 +12,7 @@ exports[`renders correctly for a card with a actions 1`] = `
   box-sizing: border-box;
   background-color: unset;
   color: inherit;
+  padding: 1.5rem !important;
 }
 
 .c3 {
@@ -25,36 +26,9 @@ exports[`renders correctly for a card with a actions 1`] = `
   box-sizing: border-box;
   background-color: unset;
   color: inherit;
-  padding: 1.5rem !important;
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   background-color: white;
   border-radius: 3px;
   display: -webkit-inline-box;
@@ -67,58 +41,58 @@ exports[`renders correctly for a card with a actions 1`] = `
   box-shadow: 0px 2px 4px 0px #e6e6e6,0px 0px 0px 1px #e6e6e6;
 }
 
-.c6 {
+.c5 {
   font-weight: 700;
   line-height: 1.2;
   margin-bottom: 1rem;
 }
 
-.heading.c6 + .sub-heading {
+.heading.c5 + .sub-heading {
   margin-top: -1rem;
 }
 
-.c6:last-child {
+.c5:last-child {
   margin-bottom: 0;
 }
 
-h1.c6 {
+h1.c5 {
   font-size: 3rem;
 }
 
-h2.c6 {
+h2.c5 {
   font-size: 2.5rem;
 }
 
-h3.c6 {
+h3.c5 {
   font-size: 2rem;
 }
 
-h4.c6 {
+h4.c5 {
   font-size: 1.5rem;
 }
 
-h5.c6 {
+h5.c5 {
   font-size: 1.25rem;
 }
 
-h6.c6 {
+h6.c5 {
   font-size: 1rem;
 }
 
-.c6 .c8 {
+.c5 .c7 {
   top: 0.1em;
 }
 
-.c6 {
+.c5 {
   font-weight: 600;
 }
 
-.c7 {
+.c6 {
   max-height: 50vh;
   overflow-y: scroll;
 }
 
-.c4 {
+.c2 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -139,36 +113,36 @@ h6.c6 {
   width: 100%;
 }
 
-.c5 {
+.c4 {
   margin-bottom: 0px;
 }
 
 @media (max-width:480px) {
-  h1.c6 {
+  h1.c5 {
     font-size: 2rem;
   }
 }
 
 @media (max-width:480px) {
-  h2.c6 {
+  h2.c5 {
     font-size: 1.8rem;
   }
 }
 
 @media (max-width:480px) {
-  h3.c6 {
+  h3.c5 {
     font-size: 1.6rem;
   }
 }
 
 @media (max-width:480px) {
-  h4.c6 {
+  h4.c5 {
     font-size: 1.4rem;
   }
 }
 
 @media (max-width:480px) {
-  h5.c6 {
+  h5.c5 {
     font-size: 1.2rem;
   }
 }
@@ -179,25 +153,21 @@ h6.c6 {
   <div
     class="c2 c3"
   >
-    <div
-      class="c4 c1"
+    <h5
+      class="c4 sub-heading c5 c3"
     >
-      <h5
-        class="c5 sub-heading c6 c1"
-      >
-        This is a title
-      </h5>
+      This is a title
+    </h5>
+    <div>
       <div>
-        <div>
-          test
-        </div>
+        test
       </div>
     </div>
-    <div
-      class="c7 c1"
-    >
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum, cursus id placerat congue, ultrices eget lectus. Duis posuere, lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum consectetur lectus augue sit amet justo.
-    </div>
+  </div>
+  <div
+    class="c6 c3"
+  >
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum, cursus id placerat congue, ultrices eget lectus. Duis posuere, lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum consectetur lectus augue sit amet justo.
   </div>
 </div>
 `;
@@ -214,6 +184,7 @@ exports[`renders correctly for a card with a footer 1`] = `
   box-sizing: border-box;
   background-color: unset;
   color: inherit;
+  padding: 1.5rem !important;
 }
 
 .c3 {
@@ -227,36 +198,9 @@ exports[`renders correctly for a card with a footer 1`] = `
   box-sizing: border-box;
   background-color: unset;
   color: inherit;
-  padding: 1.5rem !important;
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   background-color: white;
   border-radius: 3px;
   display: -webkit-inline-box;
@@ -269,58 +213,58 @@ exports[`renders correctly for a card with a footer 1`] = `
   box-shadow: 0px 2px 4px 0px #e6e6e6,0px 0px 0px 1px #e6e6e6;
 }
 
-.c7 {
+.c6 {
   font-weight: 700;
   line-height: 1.2;
   margin-bottom: 1rem;
 }
 
-.heading.c7 + .sub-heading {
+.heading.c6 + .sub-heading {
   margin-top: -1rem;
 }
 
-.c7:last-child {
+.c6:last-child {
   margin-bottom: 0;
 }
 
-h1.c7 {
+h1.c6 {
   font-size: 3rem;
 }
 
-h2.c7 {
+h2.c6 {
   font-size: 2.5rem;
 }
 
-h3.c7 {
+h3.c6 {
   font-size: 2rem;
 }
 
-h4.c7 {
+h4.c6 {
   font-size: 1.5rem;
 }
 
-h5.c7 {
+h5.c6 {
   font-size: 1.25rem;
 }
 
-h6.c7 {
+h6.c6 {
   font-size: 1rem;
 }
 
-.c7 .c9 {
+.c6 .c8 {
   top: 0.1em;
 }
 
-.c7 {
+.c6 {
   font-weight: 600;
 }
 
-.c4 {
+.c2 {
   max-height: 50vh;
   overflow-y: scroll;
 }
 
-.c5 {
+.c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -341,41 +285,41 @@ h6.c7 {
   width: 100%;
 }
 
-.c8 {
+.c7 {
   padding-top: 1.25rem;
   width: 100%;
 }
 
-.c6 {
+.c5 {
   margin-bottom: 0px;
 }
 
 @media (max-width:480px) {
-  h1.c7 {
+  h1.c6 {
     font-size: 2rem;
   }
 }
 
 @media (max-width:480px) {
-  h2.c7 {
+  h2.c6 {
     font-size: 1.8rem;
   }
 }
 
 @media (max-width:480px) {
-  h3.c7 {
+  h3.c6 {
     font-size: 1.6rem;
   }
 }
 
 @media (max-width:480px) {
-  h4.c7 {
+  h4.c6 {
     font-size: 1.4rem;
   }
 }
 
 @media (max-width:480px) {
-  h5.c7 {
+  h5.c6 {
     font-size: 1.2rem;
   }
 }
@@ -387,27 +331,23 @@ h6.c7 {
     class="c2 c3"
   >
     <div
-      class="c4 c1"
+      class="c4 c3"
     >
-      <div
-        class="c5 c1"
-      >
-        <h5
-          class="c6 sub-heading c7 c1"
-        >
-          This is a title
-        </h5>
-      </div>
-      <div
-        class="c4 c1"
-      >
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum, cursus id placerat congue, ultrices eget lectus. Duis posuere, lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum consectetur lectus augue sit amet justo.
-      </div>
-      <div
-        class="c8 c1"
+      <h5
+        class="c5 sub-heading c6 c3"
       >
-        test
-      </div>
+        This is a title
+      </h5>
+    </div>
+    <div
+      class="c2 c3"
+    >
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum, cursus id placerat congue, ultrices eget lectus. Duis posuere, lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum consectetur lectus augue sit amet justo.
+    </div>
+    <div
+      class="c7 c3"
+    >
+      test
     </div>
   </div>
 </div>
@@ -425,6 +365,7 @@ exports[`renders correctly for a default card 1`] = `
   box-sizing: border-box;
   background-color: unset;
   color: inherit;
+  padding: 1.5rem !important;
 }
 
 .c3 {
@@ -438,36 +379,9 @@ exports[`renders correctly for a default card 1`] = `
   box-sizing: border-box;
   background-color: unset;
   color: inherit;
-  padding: 1.5rem !important;
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   background-color: white;
   border-radius: 3px;
   display: -webkit-inline-box;
@@ -480,58 +394,58 @@ exports[`renders correctly for a default card 1`] = `
   box-shadow: 0px 2px 4px 0px #e6e6e6,0px 0px 0px 1px #e6e6e6;
 }
 
-.c7 {
+.c6 {
   font-weight: 700;
   line-height: 1.2;
   margin-bottom: 1rem;
 }
 
-.heading.c7 + .sub-heading {
+.heading.c6 + .sub-heading {
   margin-top: -1rem;
 }
 
-.c7:last-child {
+.c6:last-child {
   margin-bottom: 0;
 }
 
-h1.c7 {
+h1.c6 {
   font-size: 3rem;
 }
 
-h2.c7 {
+h2.c6 {
   font-size: 2.5rem;
 }
 
-h3.c7 {
+h3.c6 {
   font-size: 2rem;
 }
 
-h4.c7 {
+h4.c6 {
   font-size: 1.5rem;
 }
 
-h5.c7 {
+h5.c6 {
   font-size: 1.25rem;
 }
 
-h6.c7 {
+h6.c6 {
   font-size: 1rem;
 }
 
-.c7 .c8 {
+.c6 .c7 {
   top: 0.1em;
 }
 
-.c7 {
+.c6 {
   font-weight: 600;
 }
 
-.c4 {
+.c2 {
   max-height: 50vh;
   overflow-y: scroll;
 }
 
-.c5 {
+.c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -552,36 +466,36 @@ h6.c7 {
   width: 100%;
 }
 
-.c6 {
+.c5 {
   margin-bottom: 0px;
 }
 
 @media (max-width:480px) {
-  h1.c7 {
+  h1.c6 {
     font-size: 2rem;
   }
 }
 
 @media (max-width:480px) {
-  h2.c7 {
+  h2.c6 {
     font-size: 1.8rem;
   }
 }
 
 @media (max-width:480px) {
-  h3.c7 {
+  h3.c6 {
     font-size: 1.6rem;
   }
 }
 
 @media (max-width:480px) {
-  h4.c7 {
+  h4.c6 {
     font-size: 1.4rem;
   }
 }
 
 @media (max-width:480px) {
-  h5.c7 {
+  h5.c6 {
     font-size: 1.2rem;
   }
 }
@@ -593,22 +507,18 @@ h6.c7 {
     class="c2 c3"
   >
     <div
-      class="c4 c1"
+      class="c4 c3"
     >
-      <div
-        class="c5 c1"
-      >
-        <h5
-          class="c6 sub-heading c7 c1"
-        >
-          This is a title
-        </h5>
-      </div>
-      <div
-        class="c4 c1"
+      <h5
+        class="c5 sub-heading c6 c3"
       >
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum, cursus id placerat congue, ultrices eget lectus. Duis posuere, lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum consectetur lectus augue sit amet justo.
-      </div>
+        This is a title
+      </h5>
+    </div>
+    <div
+      class="c2 c3"
+    >
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum, cursus id placerat congue, ultrices eget lectus. Duis posuere, lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum consectetur lectus augue sit amet justo.
     </div>
   </div>
 </div>
diff --git a/src/Checkbox/__tests__/__snapshots__/Checkbox.test.js.snap b/src/Checkbox/__tests__/__snapshots__/Checkbox.test.js.snap
index cc7d9cbdc..185f0f99b 100644
--- a/src/Checkbox/__tests__/__snapshots__/Checkbox.test.js.snap
+++ b/src/Checkbox/__tests__/__snapshots__/Checkbox.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly for a basic checkbox 1`] = `
-.c1 {
+.c2 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -14,7 +14,7 @@ exports[`renders correctly for a basic checkbox 1`] = `
   color: inherit;
 }
 
-.c5 {
+.c4 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -27,7 +27,7 @@ exports[`renders correctly for a basic checkbox 1`] = `
   color: inherit;
 }
 
-.c9 {
+.c8 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -41,44 +41,18 @@ exports[`renders correctly for a basic checkbox 1`] = `
   margin-left: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-abbr.c8 {
+abbr.c7 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c8 {
+i.c7 {
   font-style: italic;
 }
 
-kbd.c8 {
+kbd.c7 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -86,50 +60,50 @@ kbd.c8 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c8 {
+mark.c7 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c8 {
+strong.c7 {
   font-weight: bold;
 }
 
-sub.c8,
-sup.c8 {
+sub.c7,
+sup.c7 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c8,
-u.c8 {
+ins.c7,
+u.c7 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c8,
-cite.c8,
-var.c8,
-em.c8 {
+i.c7,
+cite.c7,
+var.c7,
+em.c7 {
   font-style: italic;
 }
 
-kbd.c8,
-pre.c8,
-samp.c8 {
+kbd.c7,
+pre.c7,
+samp.c7 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c8 .c10 {
+.c7 .c9 {
   top: 0.1em;
 }
 
-.c3 {
+.c1 {
   display: inline-block;
 }
 
-.c7 {
+.c6 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -138,7 +112,7 @@ samp.c8 {
   width: 1em;
 }
 
-.c4 {
+.c3 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -148,26 +122,26 @@ samp.c8 {
   width: 1px;
 }
 
-.c4[disabled] + .c6 {
+.c3[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c4:checked:focus + .c6 {
+.c3:checked:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4:focus + .c6 {
+.c3:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4:not([disabled]):checked + .c6 {
+.c3:not([disabled]):checked + .c5 {
   border-color: #7467c0;
 }
 
-.c4:checked + .c6::before {
+.c3:checked + .c5::before {
   background-clip: padding-box;
   content: '';
   left: calc(50% - 3px);
@@ -175,7 +149,7 @@ samp.c8 {
   position: absolute;
 }
 
-.c4:checked + .c6::before {
+.c3:checked + .c5::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
@@ -186,11 +160,11 @@ samp.c8 {
   width: 6px;
 }
 
-.c4[disabled]:checked + .c6::before {
+.c3[disabled]:checked + .c5::before {
   border-color: #9a9a9a;
 }
 
-.c2 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -201,33 +175,29 @@ samp.c8 {
   align-items: center;
 }
 
-<div
-  class="c0 c1"
+<label
+  aria-describedby="label"
+  aria-invalid="false"
+  aria-required="false"
+  class="c0 c1 c2"
 >
-  <label
-    aria-describedby="label"
-    aria-invalid="false"
-    aria-required="false"
-    class="c2 c3 c1"
-  >
-    <input
-      class="c4 c5"
-      type="checkbox"
-      value=""
-    />
-    <div
-      class="c6 c7 c1"
-    />
-    <span
-      class="c8 c9"
-      id="label"
-    />
-  </label>
-</div>
+  <input
+    class="c3 c4"
+    type="checkbox"
+    value=""
+  />
+  <div
+    class="c5 c6 c2"
+  />
+  <span
+    class="c7 c8"
+    id="label"
+  />
+</label>
 `;
 
 exports[`renders correctly for a disabled checkbox 1`] = `
-.c1 {
+.c2 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -240,7 +210,7 @@ exports[`renders correctly for a disabled checkbox 1`] = `
   color: inherit;
 }
 
-.c5 {
+.c4 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -253,7 +223,7 @@ exports[`renders correctly for a disabled checkbox 1`] = `
   color: inherit;
 }
 
-.c9 {
+.c8 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -267,44 +237,18 @@ exports[`renders correctly for a disabled checkbox 1`] = `
   margin-left: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-abbr.c8 {
+abbr.c7 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c8 {
+i.c7 {
   font-style: italic;
 }
 
-kbd.c8 {
+kbd.c7 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -312,50 +256,50 @@ kbd.c8 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c8 {
+mark.c7 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c8 {
+strong.c7 {
   font-weight: bold;
 }
 
-sub.c8,
-sup.c8 {
+sub.c7,
+sup.c7 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c8,
-u.c8 {
+ins.c7,
+u.c7 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c8,
-cite.c8,
-var.c8,
-em.c8 {
+i.c7,
+cite.c7,
+var.c7,
+em.c7 {
   font-style: italic;
 }
 
-kbd.c8,
-pre.c8,
-samp.c8 {
+kbd.c7,
+pre.c7,
+samp.c7 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c8 .c10 {
+.c7 .c9 {
   top: 0.1em;
 }
 
-.c3 {
+.c1 {
   display: inline-block;
 }
 
-.c7 {
+.c6 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -364,7 +308,7 @@ samp.c8 {
   width: 1em;
 }
 
-.c4 {
+.c3 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -374,26 +318,26 @@ samp.c8 {
   width: 1px;
 }
 
-.c4[disabled] + .c6 {
+.c3[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c4:checked:focus + .c6 {
+.c3:checked:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4:focus + .c6 {
+.c3:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4:not([disabled]):checked + .c6 {
+.c3:not([disabled]):checked + .c5 {
   border-color: #7467c0;
 }
 
-.c4:checked + .c6::before {
+.c3:checked + .c5::before {
   background-clip: padding-box;
   content: '';
   left: calc(50% - 3px);
@@ -401,7 +345,7 @@ samp.c8 {
   position: absolute;
 }
 
-.c4:checked + .c6::before {
+.c3:checked + .c5::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
@@ -412,11 +356,11 @@ samp.c8 {
   width: 6px;
 }
 
-.c4[disabled]:checked + .c6::before {
+.c3[disabled]:checked + .c5::before {
   border-color: #9a9a9a;
 }
 
-.c2 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -427,34 +371,30 @@ samp.c8 {
   align-items: center;
 }
 
-<div
-  class="c0 c1"
+<label
+  aria-describedby="label"
+  aria-invalid="false"
+  aria-required="false"
+  class="c0 c1 c2"
 >
-  <label
-    aria-describedby="label"
-    aria-invalid="false"
-    aria-required="false"
-    class="c2 c3 c1"
-  >
-    <input
-      class="c4 c5"
-      disabled=""
-      type="checkbox"
-      value=""
-    />
-    <div
-      class="c6 c7 c1"
-    />
-    <span
-      class="c8 c9"
-      id="label"
-    />
-  </label>
-</div>
+  <input
+    class="c3 c4"
+    disabled=""
+    type="checkbox"
+    value=""
+  />
+  <div
+    class="c5 c6 c2"
+  />
+  <span
+    class="c7 c8"
+    id="label"
+  />
+</label>
 `;
 
 exports[`renders correctly for an indeterminate checkbox 1`] = `
-.c1 {
+.c2 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -467,7 +407,7 @@ exports[`renders correctly for an indeterminate checkbox 1`] = `
   color: inherit;
 }
 
-.c5 {
+.c4 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -480,7 +420,7 @@ exports[`renders correctly for an indeterminate checkbox 1`] = `
   color: inherit;
 }
 
-.c9 {
+.c8 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -494,44 +434,18 @@ exports[`renders correctly for an indeterminate checkbox 1`] = `
   margin-left: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-abbr.c8 {
+abbr.c7 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c8 {
+i.c7 {
   font-style: italic;
 }
 
-kbd.c8 {
+kbd.c7 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -539,50 +453,50 @@ kbd.c8 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c8 {
+mark.c7 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c8 {
+strong.c7 {
   font-weight: bold;
 }
 
-sub.c8,
-sup.c8 {
+sub.c7,
+sup.c7 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c8,
-u.c8 {
+ins.c7,
+u.c7 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c8,
-cite.c8,
-var.c8,
-em.c8 {
+i.c7,
+cite.c7,
+var.c7,
+em.c7 {
   font-style: italic;
 }
 
-kbd.c8,
-pre.c8,
-samp.c8 {
+kbd.c7,
+pre.c7,
+samp.c7 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c8 .c11 {
+.c7 .c10 {
   top: 0.1em;
 }
 
-.c3 {
+.c1 {
   display: inline-block;
 }
 
-.c7 {
+.c6 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -591,26 +505,26 @@ samp.c8 {
   width: 1em;
 }
 
-.c10[disabled] + .c6 {
+.c9[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c10:checked:focus + .c6 {
+.c9:checked:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c10:focus + .c6 {
+.c9:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c10:not([disabled]):checked + .c6 {
+.c9:not([disabled]):checked + .c5 {
   border-color: #7467c0;
 }
 
-.c10:checked + .c6::before {
+.c9:checked + .c5::before {
   background-clip: padding-box;
   content: '';
   left: calc(50% - 3px);
@@ -618,7 +532,7 @@ samp.c8 {
   position: absolute;
 }
 
-.c10:checked + .c6::before {
+.c9:checked + .c5::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
@@ -629,11 +543,11 @@ samp.c8 {
   width: 6px;
 }
 
-.c10[disabled]:checked + .c6::before {
+.c9[disabled]:checked + .c5::before {
   border-color: #9a9a9a;
 }
 
-.c4 {
+.c3 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -643,26 +557,26 @@ samp.c8 {
   width: 1px;
 }
 
-.c4[disabled] + .c6 {
+.c3[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c4:checked:focus + .c6 {
+.c3:checked:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4:focus + .c6 {
+.c3:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4:not([disabled]):checked + .c6 {
+.c3:not([disabled]):checked + .c5 {
   border-color: #7467c0;
 }
 
-.c4:checked + .c6::before {
+.c3:checked + .c5::before {
   background-clip: padding-box;
   content: '';
   left: calc(50% - 3px);
@@ -670,7 +584,7 @@ samp.c8 {
   position: absolute;
 }
 
-.c4:checked + .c6::before {
+.c3:checked + .c5::before {
   background-color: #7467c0;
   height: 2px;
   width: 10px;
@@ -678,11 +592,11 @@ samp.c8 {
   left: calc(50% - 5px);
 }
 
-.c4[disabled]:checked + .c6::before {
+.c3[disabled]:checked + .c5::before {
   border-color: #9a9a9a;
 }
 
-.c2 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -693,34 +607,30 @@ samp.c8 {
   align-items: center;
 }
 
-<div
-  class="c0 c1"
+<label
+  aria-describedby="label"
+  aria-invalid="false"
+  aria-required="false"
+  class="c0 c1 c2"
 >
-  <label
-    aria-describedby="label"
-    aria-invalid="false"
-    aria-required="false"
-    class="c2 c3 c1"
-  >
-    <input
-      checked=""
-      class="c4 c5"
-      type="checkbox"
-      value=""
-    />
-    <div
-      class="c6 c7 c1"
-    />
-    <span
-      class="c8 c9"
-      id="label"
-    />
-  </label>
-</div>
+  <input
+    checked=""
+    class="c3 c4"
+    type="checkbox"
+    value=""
+  />
+  <div
+    class="c5 c6 c2"
+  />
+  <span
+    class="c7 c8"
+    id="label"
+  />
+</label>
 `;
 
 exports[`states renders correctly for an checkbox with state danger 1`] = `
-.c1 {
+.c2 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -733,7 +643,7 @@ exports[`states renders correctly for an checkbox with state danger 1`] = `
   color: inherit;
 }
 
-.c5 {
+.c4 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -746,7 +656,7 @@ exports[`states renders correctly for an checkbox with state danger 1`] = `
   color: inherit;
 }
 
-.c9 {
+.c8 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -760,44 +670,18 @@ exports[`states renders correctly for an checkbox with state danger 1`] = `
   margin-left: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-abbr.c8 {
+abbr.c7 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c8 {
+i.c7 {
   font-style: italic;
 }
 
-kbd.c8 {
+kbd.c7 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -805,50 +689,50 @@ kbd.c8 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c8 {
+mark.c7 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c8 {
+strong.c7 {
   font-weight: bold;
 }
 
-sub.c8,
-sup.c8 {
+sub.c7,
+sup.c7 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c8,
-u.c8 {
+ins.c7,
+u.c7 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c8,
-cite.c8,
-var.c8,
-em.c8 {
+i.c7,
+cite.c7,
+var.c7,
+em.c7 {
   font-style: italic;
 }
 
-kbd.c8,
-pre.c8,
-samp.c8 {
+kbd.c7,
+pre.c7,
+samp.c7 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c8 .c12 {
+.c7 .c11 {
   top: 0.1em;
 }
 
-.c3 {
+.c1 {
   display: inline-block;
 }
 
-.c7 {
+.c6 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -857,31 +741,31 @@ samp.c8 {
   width: 1em;
 }
 
-.c7 {
+.c6 {
   border-color: #e24c67;
   box-shadow: #e24c67 0px 0px 0px 1px !important;
 }
 
-.c10[disabled] + .c6 {
+.c9[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c10:checked:focus + .c6 {
+.c9:checked:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c10:focus + .c6 {
+.c9:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c10:not([disabled]):checked + .c6 {
+.c9:not([disabled]):checked + .c5 {
   border-color: #7467c0;
 }
 
-.c10:checked + .c6::before {
+.c9:checked + .c5::before {
   background-clip: padding-box;
   content: '';
   left: calc(50% - 3px);
@@ -889,7 +773,7 @@ samp.c8 {
   position: absolute;
 }
 
-.c10:checked + .c6::before {
+.c9:checked + .c5::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
@@ -900,30 +784,30 @@ samp.c8 {
   width: 6px;
 }
 
-.c10[disabled]:checked + .c6::before {
+.c9[disabled]:checked + .c5::before {
   border-color: #9a9a9a;
 }
 
-.c11[disabled] + .c6 {
+.c10[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c11:checked:focus + .c6 {
+.c10:checked:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11:focus + .c6 {
+.c10:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11:not([disabled]):checked + .c6 {
+.c10:not([disabled]):checked + .c5 {
   border-color: #7467c0;
 }
 
-.c11:checked + .c6::before {
+.c10:checked + .c5::before {
   background-clip: padding-box;
   content: '';
   left: calc(50% - 3px);
@@ -931,7 +815,7 @@ samp.c8 {
   position: absolute;
 }
 
-.c11:checked + .c6::before {
+.c10:checked + .c5::before {
   background-color: #7467c0;
   height: 2px;
   width: 10px;
@@ -939,11 +823,11 @@ samp.c8 {
   left: calc(50% - 5px);
 }
 
-.c11[disabled]:checked + .c6::before {
+.c10[disabled]:checked + .c5::before {
   border-color: #9a9a9a;
 }
 
-.c4 {
+.c3 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -953,30 +837,30 @@ samp.c8 {
   width: 1px;
 }
 
-.c4[disabled] + .c6 {
+.c3[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c4:checked:focus + .c6 {
+.c3:checked:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4:focus + .c6 {
+.c3:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4:not([disabled]):checked + .c6 {
+.c3:not([disabled]):checked + .c5 {
   border-color: #7467c0;
 }
 
-.c4:checked + .c6 {
+.c3:checked + .c5 {
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4:checked + .c6::before {
+.c3:checked + .c5::before {
   background-clip: padding-box;
   content: '';
   left: calc(50% - 3px);
@@ -984,7 +868,7 @@ samp.c8 {
   position: absolute;
 }
 
-.c4:checked + .c6::before {
+.c3:checked + .c5::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
@@ -995,11 +879,11 @@ samp.c8 {
   width: 6px;
 }
 
-.c4[disabled]:checked + .c6::before {
+.c3[disabled]:checked + .c5::before {
   border-color: #9a9a9a;
 }
 
-.c2 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1010,33 +894,29 @@ samp.c8 {
   align-items: center;
 }
 
-<div
-  class="c0 c1"
+<label
+  aria-describedby="label"
+  aria-invalid="true"
+  aria-required="false"
+  class="c0 c1 c2"
 >
-  <label
-    aria-describedby="label"
-    aria-invalid="true"
-    aria-required="false"
-    class="c2 c3 c1"
-  >
-    <input
-      class="c4 c5"
-      type="checkbox"
-      value=""
-    />
-    <div
-      class="c6 c7 c1"
-    />
-    <span
-      class="c8 c9"
-      id="label"
-    />
-  </label>
-</div>
+  <input
+    class="c3 c4"
+    type="checkbox"
+    value=""
+  />
+  <div
+    class="c5 c6 c2"
+  />
+  <span
+    class="c7 c8"
+    id="label"
+  />
+</label>
 `;
 
 exports[`states renders correctly for an checkbox with state primary 1`] = `
-.c1 {
+.c2 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1049,7 +929,7 @@ exports[`states renders correctly for an checkbox with state primary 1`] = `
   color: inherit;
 }
 
-.c5 {
+.c4 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1062,7 +942,7 @@ exports[`states renders correctly for an checkbox with state primary 1`] = `
   color: inherit;
 }
 
-.c9 {
+.c8 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1076,44 +956,18 @@ exports[`states renders correctly for an checkbox with state primary 1`] = `
   margin-left: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-abbr.c8 {
+abbr.c7 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c8 {
+i.c7 {
   font-style: italic;
 }
 
-kbd.c8 {
+kbd.c7 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -1121,50 +975,50 @@ kbd.c8 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c8 {
+mark.c7 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c8 {
+strong.c7 {
   font-weight: bold;
 }
 
-sub.c8,
-sup.c8 {
+sub.c7,
+sup.c7 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c8,
-u.c8 {
+ins.c7,
+u.c7 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c8,
-cite.c8,
-var.c8,
-em.c8 {
+i.c7,
+cite.c7,
+var.c7,
+em.c7 {
   font-style: italic;
 }
 
-kbd.c8,
-pre.c8,
-samp.c8 {
+kbd.c7,
+pre.c7,
+samp.c7 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c8 .c12 {
+.c7 .c11 {
   top: 0.1em;
 }
 
-.c3 {
+.c1 {
   display: inline-block;
 }
 
-.c7 {
+.c6 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -1173,31 +1027,31 @@ samp.c8 {
   width: 1em;
 }
 
-.c7 {
+.c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c10[disabled] + .c6 {
+.c9[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c10:checked:focus + .c6 {
+.c9:checked:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c10:focus + .c6 {
+.c9:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c10:not([disabled]):checked + .c6 {
+.c9:not([disabled]):checked + .c5 {
   border-color: #7467c0;
 }
 
-.c10:checked + .c6::before {
+.c9:checked + .c5::before {
   background-clip: padding-box;
   content: '';
   left: calc(50% - 3px);
@@ -1205,7 +1059,7 @@ samp.c8 {
   position: absolute;
 }
 
-.c10:checked + .c6::before {
+.c9:checked + .c5::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
@@ -1216,30 +1070,30 @@ samp.c8 {
   width: 6px;
 }
 
-.c10[disabled]:checked + .c6::before {
+.c9[disabled]:checked + .c5::before {
   border-color: #9a9a9a;
 }
 
-.c11[disabled] + .c6 {
+.c10[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c11:checked:focus + .c6 {
+.c10:checked:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11:focus + .c6 {
+.c10:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11:not([disabled]):checked + .c6 {
+.c10:not([disabled]):checked + .c5 {
   border-color: #7467c0;
 }
 
-.c11:checked + .c6::before {
+.c10:checked + .c5::before {
   background-clip: padding-box;
   content: '';
   left: calc(50% - 3px);
@@ -1247,7 +1101,7 @@ samp.c8 {
   position: absolute;
 }
 
-.c11:checked + .c6::before {
+.c10:checked + .c5::before {
   background-color: #7467c0;
   height: 2px;
   width: 10px;
@@ -1255,11 +1109,11 @@ samp.c8 {
   left: calc(50% - 5px);
 }
 
-.c11[disabled]:checked + .c6::before {
+.c10[disabled]:checked + .c5::before {
   border-color: #9a9a9a;
 }
 
-.c4 {
+.c3 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -1269,30 +1123,30 @@ samp.c8 {
   width: 1px;
 }
 
-.c4[disabled] + .c6 {
+.c3[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c4:checked:focus + .c6 {
+.c3:checked:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4:focus + .c6 {
+.c3:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4:not([disabled]):checked + .c6 {
+.c3:not([disabled]):checked + .c5 {
   border-color: #7467c0;
 }
 
-.c4:checked + .c6 {
+.c3:checked + .c5 {
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4:checked + .c6::before {
+.c3:checked + .c5::before {
   background-clip: padding-box;
   content: '';
   left: calc(50% - 3px);
@@ -1300,7 +1154,7 @@ samp.c8 {
   position: absolute;
 }
 
-.c4:checked + .c6::before {
+.c3:checked + .c5::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
@@ -1311,11 +1165,11 @@ samp.c8 {
   width: 6px;
 }
 
-.c4[disabled]:checked + .c6::before {
+.c3[disabled]:checked + .c5::before {
   border-color: #9a9a9a;
 }
 
-.c2 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1326,33 +1180,29 @@ samp.c8 {
   align-items: center;
 }
 
-<div
-  class="c0 c1"
+<label
+  aria-describedby="label"
+  aria-invalid="false"
+  aria-required="false"
+  class="c0 c1 c2"
 >
-  <label
-    aria-describedby="label"
-    aria-invalid="false"
-    aria-required="false"
-    class="c2 c3 c1"
-  >
-    <input
-      class="c4 c5"
-      type="checkbox"
-      value=""
-    />
-    <div
-      class="c6 c7 c1"
-    />
-    <span
-      class="c8 c9"
-      id="label"
-    />
-  </label>
-</div>
+  <input
+    class="c3 c4"
+    type="checkbox"
+    value=""
+  />
+  <div
+    class="c5 c6 c2"
+  />
+  <span
+    class="c7 c8"
+    id="label"
+  />
+</label>
 `;
 
 exports[`states renders correctly for an checkbox with state success 1`] = `
-.c1 {
+.c2 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1365,7 +1215,7 @@ exports[`states renders correctly for an checkbox with state success 1`] = `
   color: inherit;
 }
 
-.c5 {
+.c4 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1378,7 +1228,7 @@ exports[`states renders correctly for an checkbox with state success 1`] = `
   color: inherit;
 }
 
-.c9 {
+.c8 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1392,44 +1242,18 @@ exports[`states renders correctly for an checkbox with state success 1`] = `
   margin-left: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-abbr.c8 {
+abbr.c7 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c8 {
+i.c7 {
   font-style: italic;
 }
 
-kbd.c8 {
+kbd.c7 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -1437,50 +1261,50 @@ kbd.c8 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c8 {
+mark.c7 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c8 {
+strong.c7 {
   font-weight: bold;
 }
 
-sub.c8,
-sup.c8 {
+sub.c7,
+sup.c7 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c8,
-u.c8 {
+ins.c7,
+u.c7 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c8,
-cite.c8,
-var.c8,
-em.c8 {
+i.c7,
+cite.c7,
+var.c7,
+em.c7 {
   font-style: italic;
 }
 
-kbd.c8,
-pre.c8,
-samp.c8 {
+kbd.c7,
+pre.c7,
+samp.c7 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c8 .c12 {
+.c7 .c11 {
   top: 0.1em;
 }
 
-.c3 {
+.c1 {
   display: inline-block;
 }
 
-.c7 {
+.c6 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -1489,31 +1313,31 @@ samp.c8 {
   width: 1em;
 }
 
-.c7 {
+.c6 {
   border-color: #4ca26c;
   box-shadow: #4ca26c 0px 0px 0px 1px !important;
 }
 
-.c10[disabled] + .c6 {
+.c9[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c10:checked:focus + .c6 {
+.c9:checked:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c10:focus + .c6 {
+.c9:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c10:not([disabled]):checked + .c6 {
+.c9:not([disabled]):checked + .c5 {
   border-color: #7467c0;
 }
 
-.c10:checked + .c6::before {
+.c9:checked + .c5::before {
   background-clip: padding-box;
   content: '';
   left: calc(50% - 3px);
@@ -1521,7 +1345,7 @@ samp.c8 {
   position: absolute;
 }
 
-.c10:checked + .c6::before {
+.c9:checked + .c5::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
@@ -1532,30 +1356,30 @@ samp.c8 {
   width: 6px;
 }
 
-.c10[disabled]:checked + .c6::before {
+.c9[disabled]:checked + .c5::before {
   border-color: #9a9a9a;
 }
 
-.c11[disabled] + .c6 {
+.c10[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c11:checked:focus + .c6 {
+.c10:checked:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11:focus + .c6 {
+.c10:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11:not([disabled]):checked + .c6 {
+.c10:not([disabled]):checked + .c5 {
   border-color: #7467c0;
 }
 
-.c11:checked + .c6::before {
+.c10:checked + .c5::before {
   background-clip: padding-box;
   content: '';
   left: calc(50% - 3px);
@@ -1563,7 +1387,7 @@ samp.c8 {
   position: absolute;
 }
 
-.c11:checked + .c6::before {
+.c10:checked + .c5::before {
   background-color: #7467c0;
   height: 2px;
   width: 10px;
@@ -1571,11 +1395,11 @@ samp.c8 {
   left: calc(50% - 5px);
 }
 
-.c11[disabled]:checked + .c6::before {
+.c10[disabled]:checked + .c5::before {
   border-color: #9a9a9a;
 }
 
-.c4 {
+.c3 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -1585,30 +1409,30 @@ samp.c8 {
   width: 1px;
 }
 
-.c4[disabled] + .c6 {
+.c3[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c4:checked:focus + .c6 {
+.c3:checked:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4:focus + .c6 {
+.c3:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4:not([disabled]):checked + .c6 {
+.c3:not([disabled]):checked + .c5 {
   border-color: #7467c0;
 }
 
-.c4:checked + .c6 {
+.c3:checked + .c5 {
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4:checked + .c6::before {
+.c3:checked + .c5::before {
   background-clip: padding-box;
   content: '';
   left: calc(50% - 3px);
@@ -1616,7 +1440,7 @@ samp.c8 {
   position: absolute;
 }
 
-.c4:checked + .c6::before {
+.c3:checked + .c5::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
@@ -1627,11 +1451,11 @@ samp.c8 {
   width: 6px;
 }
 
-.c4[disabled]:checked + .c6::before {
+.c3[disabled]:checked + .c5::before {
   border-color: #9a9a9a;
 }
 
-.c2 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1642,33 +1466,29 @@ samp.c8 {
   align-items: center;
 }
 
-<div
-  class="c0 c1"
+<label
+  aria-describedby="label"
+  aria-invalid="false"
+  aria-required="false"
+  class="c0 c1 c2"
 >
-  <label
-    aria-describedby="label"
-    aria-invalid="false"
-    aria-required="false"
-    class="c2 c3 c1"
-  >
-    <input
-      class="c4 c5"
-      type="checkbox"
-      value=""
-    />
-    <div
-      class="c6 c7 c1"
-    />
-    <span
-      class="c8 c9"
-      id="label"
-    />
-  </label>
-</div>
+  <input
+    class="c3 c4"
+    type="checkbox"
+    value=""
+  />
+  <div
+    class="c5 c6 c2"
+  />
+  <span
+    class="c7 c8"
+    id="label"
+  />
+</label>
 `;
 
 exports[`states renders correctly for an checkbox with state warning 1`] = `
-.c1 {
+.c2 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1681,7 +1501,7 @@ exports[`states renders correctly for an checkbox with state warning 1`] = `
   color: inherit;
 }
 
-.c5 {
+.c4 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1694,7 +1514,7 @@ exports[`states renders correctly for an checkbox with state warning 1`] = `
   color: inherit;
 }
 
-.c9 {
+.c8 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1708,44 +1528,18 @@ exports[`states renders correctly for an checkbox with state warning 1`] = `
   margin-left: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-abbr.c8 {
+abbr.c7 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c8 {
+i.c7 {
   font-style: italic;
 }
 
-kbd.c8 {
+kbd.c7 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -1753,50 +1547,50 @@ kbd.c8 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c8 {
+mark.c7 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c8 {
+strong.c7 {
   font-weight: bold;
 }
 
-sub.c8,
-sup.c8 {
+sub.c7,
+sup.c7 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c8,
-u.c8 {
+ins.c7,
+u.c7 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c8,
-cite.c8,
-var.c8,
-em.c8 {
+i.c7,
+cite.c7,
+var.c7,
+em.c7 {
   font-style: italic;
 }
 
-kbd.c8,
-pre.c8,
-samp.c8 {
+kbd.c7,
+pre.c7,
+samp.c7 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c8 .c12 {
+.c7 .c11 {
   top: 0.1em;
 }
 
-.c3 {
+.c1 {
   display: inline-block;
 }
 
-.c7 {
+.c6 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -1805,31 +1599,31 @@ samp.c8 {
   width: 1em;
 }
 
-.c7 {
+.c6 {
   border-color: #ffc94c;
   box-shadow: #ffc94c 0px 0px 0px 1px !important;
 }
 
-.c10[disabled] + .c6 {
+.c9[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c10:checked:focus + .c6 {
+.c9:checked:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c10:focus + .c6 {
+.c9:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c10:not([disabled]):checked + .c6 {
+.c9:not([disabled]):checked + .c5 {
   border-color: #7467c0;
 }
 
-.c10:checked + .c6::before {
+.c9:checked + .c5::before {
   background-clip: padding-box;
   content: '';
   left: calc(50% - 3px);
@@ -1837,7 +1631,7 @@ samp.c8 {
   position: absolute;
 }
 
-.c10:checked + .c6::before {
+.c9:checked + .c5::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
@@ -1848,30 +1642,30 @@ samp.c8 {
   width: 6px;
 }
 
-.c10[disabled]:checked + .c6::before {
+.c9[disabled]:checked + .c5::before {
   border-color: #9a9a9a;
 }
 
-.c11[disabled] + .c6 {
+.c10[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c11:checked:focus + .c6 {
+.c10:checked:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11:focus + .c6 {
+.c10:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11:not([disabled]):checked + .c6 {
+.c10:not([disabled]):checked + .c5 {
   border-color: #7467c0;
 }
 
-.c11:checked + .c6::before {
+.c10:checked + .c5::before {
   background-clip: padding-box;
   content: '';
   left: calc(50% - 3px);
@@ -1879,7 +1673,7 @@ samp.c8 {
   position: absolute;
 }
 
-.c11:checked + .c6::before {
+.c10:checked + .c5::before {
   background-color: #7467c0;
   height: 2px;
   width: 10px;
@@ -1887,11 +1681,11 @@ samp.c8 {
   left: calc(50% - 5px);
 }
 
-.c11[disabled]:checked + .c6::before {
+.c10[disabled]:checked + .c5::before {
   border-color: #9a9a9a;
 }
 
-.c4 {
+.c3 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -1901,30 +1695,30 @@ samp.c8 {
   width: 1px;
 }
 
-.c4[disabled] + .c6 {
+.c3[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c4:checked:focus + .c6 {
+.c3:checked:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4:focus + .c6 {
+.c3:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4:not([disabled]):checked + .c6 {
+.c3:not([disabled]):checked + .c5 {
   border-color: #7467c0;
 }
 
-.c4:checked + .c6 {
+.c3:checked + .c5 {
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4:checked + .c6::before {
+.c3:checked + .c5::before {
   background-clip: padding-box;
   content: '';
   left: calc(50% - 3px);
@@ -1932,7 +1726,7 @@ samp.c8 {
   position: absolute;
 }
 
-.c4:checked + .c6::before {
+.c3:checked + .c5::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
@@ -1943,11 +1737,11 @@ samp.c8 {
   width: 6px;
 }
 
-.c4[disabled]:checked + .c6::before {
+.c3[disabled]:checked + .c5::before {
   border-color: #9a9a9a;
 }
 
-.c2 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1958,27 +1752,23 @@ samp.c8 {
   align-items: center;
 }
 
-<div
-  class="c0 c1"
+<label
+  aria-describedby="label"
+  aria-invalid="false"
+  aria-required="false"
+  class="c0 c1 c2"
 >
-  <label
-    aria-describedby="label"
-    aria-invalid="false"
-    aria-required="false"
-    class="c2 c3 c1"
-  >
-    <input
-      class="c4 c5"
-      type="checkbox"
-      value=""
-    />
-    <div
-      class="c6 c7 c1"
-    />
-    <span
-      class="c8 c9"
-      id="label"
-    />
-  </label>
-</div>
+  <input
+    class="c3 c4"
+    type="checkbox"
+    value=""
+  />
+  <div
+    class="c5 c6 c2"
+  />
+  <span
+    class="c7 c8"
+    id="label"
+  />
+</label>
 `;
diff --git a/src/Checkbox/__tests__/__snapshots__/CheckboxField.test.js.snap b/src/Checkbox/__tests__/__snapshots__/CheckboxField.test.js.snap
index 6106fdb70..f2ecb184e 100644
--- a/src/Checkbox/__tests__/__snapshots__/CheckboxField.test.js.snap
+++ b/src/Checkbox/__tests__/__snapshots__/CheckboxField.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly for a basic checkbox field 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -14,7 +14,7 @@ exports[`renders correctly for a basic checkbox field 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -28,7 +28,7 @@ exports[`renders correctly for a basic checkbox field 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -41,7 +41,7 @@ exports[`renders correctly for a basic checkbox field 1`] = `
   color: inherit;
 }
 
-.c10 {
+.c9 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -55,44 +55,18 @@ exports[`renders correctly for a basic checkbox field 1`] = `
   margin-left: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-abbr.c9 {
+abbr.c8 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c9 {
+i.c8 {
   font-style: italic;
 }
 
-kbd.c9 {
+kbd.c8 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -100,50 +74,50 @@ kbd.c9 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c9 {
+mark.c8 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c9 {
+strong.c8 {
   font-weight: bold;
 }
 
-sub.c9,
-sup.c9 {
+sub.c8,
+sup.c8 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c9,
-u.c9 {
+ins.c8,
+u.c8 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c9,
-cite.c9,
-var.c9,
-em.c9 {
+i.c8,
+cite.c8,
+var.c8,
+em.c8 {
   font-style: italic;
 }
 
-kbd.c9,
-pre.c9,
-samp.c9 {
+kbd.c8,
+pre.c8,
+samp.c8 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c9 .c11 {
+.c8 .c10 {
   top: 0.1em;
 }
 
-.c3 {
+.c2 {
   display: inline-block;
 }
 
-.c8 {
+.c7 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -152,7 +126,7 @@ samp.c9 {
   width: 1em;
 }
 
-.c5 {
+.c4 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -162,26 +136,26 @@ samp.c9 {
   width: 1px;
 }
 
-.c5[disabled] + .c7 {
+.c4[disabled] + .c6 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c5:checked:focus + .c7 {
+.c4:checked:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c5:focus + .c7 {
+.c4:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c5:not([disabled]):checked + .c7 {
+.c4:not([disabled]):checked + .c6 {
   border-color: #7467c0;
 }
 
-.c5:checked + .c7::before {
+.c4:checked + .c6::before {
   background-clip: padding-box;
   content: '';
   left: calc(50% - 3px);
@@ -189,7 +163,7 @@ samp.c9 {
   position: absolute;
 }
 
-.c5:checked + .c7::before {
+.c4:checked + .c6::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
@@ -200,11 +174,11 @@ samp.c9 {
   width: 6px;
 }
 
-.c5[disabled]:checked + .c7::before {
+.c4[disabled]:checked + .c6::before {
   border-color: #9a9a9a;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -216,43 +190,39 @@ samp.c9 {
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
-  <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+  <div />
+  <label
+    aria-describedby="label"
+    aria-invalid="false"
+    aria-label="Check me"
+    aria-required="false"
+    class="c1 c2 c3"
   >
-    <div />
-    <label
-      aria-describedby="label"
-      aria-invalid="false"
-      aria-label="Check me"
-      aria-required="false"
-      class="c2 c3 c4"
+    <input
+      class="c4 c5"
+      type="checkbox"
+      value=""
+    />
+    <div
+      class="c6 c7 c0"
+    />
+    <span
+      class="c8 c9"
+      id="label"
     >
-      <input
-        class="c5 c6"
-        type="checkbox"
-        value=""
-      />
-      <div
-        class="c7 c8 c1"
-      />
-      <span
-        class="c9 c10"
-        id="label"
-      >
-        Check me
-      </span>
-    </label>
-    <div />
-  </div>
+      Check me
+    </span>
+  </label>
+  <div />
 </div>
 `;
 
 exports[`renders correctly for a disabled checkbox field 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -265,7 +235,7 @@ exports[`renders correctly for a disabled checkbox field 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -279,7 +249,7 @@ exports[`renders correctly for a disabled checkbox field 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -292,7 +262,7 @@ exports[`renders correctly for a disabled checkbox field 1`] = `
   color: inherit;
 }
 
-.c10 {
+.c9 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -306,44 +276,18 @@ exports[`renders correctly for a disabled checkbox field 1`] = `
   margin-left: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-abbr.c9 {
+abbr.c8 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c9 {
+i.c8 {
   font-style: italic;
 }
 
-kbd.c9 {
+kbd.c8 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -351,50 +295,50 @@ kbd.c9 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c9 {
+mark.c8 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c9 {
+strong.c8 {
   font-weight: bold;
 }
 
-sub.c9,
-sup.c9 {
+sub.c8,
+sup.c8 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c9,
-u.c9 {
+ins.c8,
+u.c8 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c9,
-cite.c9,
-var.c9,
-em.c9 {
+i.c8,
+cite.c8,
+var.c8,
+em.c8 {
   font-style: italic;
 }
 
-kbd.c9,
-pre.c9,
-samp.c9 {
+kbd.c8,
+pre.c8,
+samp.c8 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c9 .c11 {
+.c8 .c10 {
   top: 0.1em;
 }
 
-.c3 {
+.c2 {
   display: inline-block;
 }
 
-.c8 {
+.c7 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -403,7 +347,7 @@ samp.c9 {
   width: 1em;
 }
 
-.c5 {
+.c4 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -413,26 +357,26 @@ samp.c9 {
   width: 1px;
 }
 
-.c5[disabled] + .c7 {
+.c4[disabled] + .c6 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c5:checked:focus + .c7 {
+.c4:checked:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c5:focus + .c7 {
+.c4:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c5:not([disabled]):checked + .c7 {
+.c4:not([disabled]):checked + .c6 {
   border-color: #7467c0;
 }
 
-.c5:checked + .c7::before {
+.c4:checked + .c6::before {
   background-clip: padding-box;
   content: '';
   left: calc(50% - 3px);
@@ -440,7 +384,7 @@ samp.c9 {
   position: absolute;
 }
 
-.c5:checked + .c7::before {
+.c4:checked + .c6::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
@@ -451,11 +395,11 @@ samp.c9 {
   width: 6px;
 }
 
-.c5[disabled]:checked + .c7::before {
+.c4[disabled]:checked + .c6::before {
   border-color: #9a9a9a;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -467,44 +411,40 @@ samp.c9 {
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
-  <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+  <div />
+  <label
+    aria-describedby="label"
+    aria-invalid="false"
+    aria-label="Check me"
+    aria-required="false"
+    class="c1 c2 c3"
   >
-    <div />
-    <label
-      aria-describedby="label"
-      aria-invalid="false"
-      aria-label="Check me"
-      aria-required="false"
-      class="c2 c3 c4"
+    <input
+      class="c4 c5"
+      disabled=""
+      type="checkbox"
+      value=""
+    />
+    <div
+      class="c6 c7 c0"
+    />
+    <span
+      class="c8 c9"
+      id="label"
     >
-      <input
-        class="c5 c6"
-        disabled=""
-        type="checkbox"
-        value=""
-      />
-      <div
-        class="c7 c8 c1"
-      />
-      <span
-        class="c9 c10"
-        id="label"
-      >
-        Check me
-      </span>
-    </label>
-    <div />
-  </div>
+      Check me
+    </span>
+  </label>
+  <div />
 </div>
 `;
 
 exports[`renders correctly for a required field 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -517,7 +457,7 @@ exports[`renders correctly for a required field 1`] = `
   color: inherit;
 }
 
-.c8 {
+.c7 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -531,7 +471,7 @@ exports[`renders correctly for a required field 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c10 {
+.c9 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -544,7 +484,7 @@ exports[`renders correctly for a required field 1`] = `
   color: inherit;
 }
 
-.c14 {
+.c13 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -558,7 +498,7 @@ exports[`renders correctly for a required field 1`] = `
   margin-left: 0.5rem !important;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -572,51 +512,25 @@ exports[`renders correctly for a required field 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-abbr.c13 {
+abbr.c12 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c13 {
+i.c12 {
   font-style: italic;
 }
 
-kbd.c13 {
+kbd.c12 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -624,50 +538,50 @@ kbd.c13 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c13 {
+mark.c12 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c13 {
+strong.c12 {
   font-weight: bold;
 }
 
-sub.c13,
-sup.c13 {
+sub.c12,
+sup.c12 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c13,
-u.c13 {
+ins.c12,
+u.c12 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c13,
-cite.c13,
-var.c13,
-em.c13 {
+i.c12,
+cite.c12,
+var.c12,
+em.c12 {
   font-style: italic;
 }
 
-kbd.c13,
-pre.c13,
-samp.c13 {
+kbd.c12,
+pre.c12,
+samp.c12 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c13 .c16 {
+.c12 .c15 {
   top: 0.1em;
 }
 
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c12 {
+.c11 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -676,7 +590,7 @@ samp.c13 {
   width: 1em;
 }
 
-.c9 {
+.c8 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -686,26 +600,26 @@ samp.c13 {
   width: 1px;
 }
 
-.c9[disabled] + .c11 {
+.c8[disabled] + .c10 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c9:checked:focus + .c11 {
+.c8:checked:focus + .c10 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c9:focus + .c11 {
+.c8:focus + .c10 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c9:not([disabled]):checked + .c11 {
+.c8:not([disabled]):checked + .c10 {
   border-color: #7467c0;
 }
 
-.c9:checked + .c11::before {
+.c8:checked + .c10::before {
   background-clip: padding-box;
   content: '';
   left: calc(50% - 3px);
@@ -713,7 +627,7 @@ samp.c13 {
   position: absolute;
 }
 
-.c9:checked + .c11::before {
+.c8:checked + .c10::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
@@ -724,34 +638,34 @@ samp.c13 {
   width: 6px;
 }
 
-.c9[disabled]:checked + .c11::before {
+.c8[disabled]:checked + .c10::before {
   border-color: #9a9a9a;
 }
 
-.c15[disabled] + .c11 {
+.c14[disabled] + .c10 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c15:checked:focus + .c11 {
+.c14:checked:focus + .c10 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c15:focus + .c11 {
+.c14:focus + .c10 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c15:not([disabled]):checked + .c11 {
+.c14:not([disabled]):checked + .c10 {
   border-color: #7467c0;
 }
 
-.c15:checked + .c11 {
+.c14:checked + .c10 {
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c15:checked + .c11::before {
+.c14:checked + .c10::before {
   background-clip: padding-box;
   content: '';
   left: calc(50% - 3px);
@@ -759,7 +673,7 @@ samp.c13 {
   position: absolute;
 }
 
-.c15:checked + .c11::before {
+.c14:checked + .c10::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
@@ -770,11 +684,11 @@ samp.c13 {
   width: 6px;
 }
 
-.c15[disabled]:checked + .c11::before {
+.c14[disabled]:checked + .c10::before {
   border-color: #9a9a9a;
 }
 
-.c7 {
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -785,65 +699,61 @@ samp.c13 {
   align-items: center;
 }
 
-.c4 {
+.c3 {
   display: block;
 }
 
-.c3 {
+.c2 {
   margin-bottom: 0 !important;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="align-items: center;"
   >
-    <div
-      class="c2 c1"
-      style="align-items: center;"
-    >
-      <label
-        class="c3 c4 c5 c6"
-        font-weight="600"
-        for="username"
-        style="font-weight: 600;"
-      >
-        Username
-      </label>
-    </div>
-    <div />
     <label
-      aria-describedby="label"
-      aria-invalid="false"
-      aria-label="Check me"
-      aria-required="true"
-      class="c7 c5 c8"
+      class="c2 c3 c4 c5"
+      font-weight="600"
+      for="username"
+      style="font-weight: 600;"
     >
-      <input
-        class="c9 c10"
-        type="checkbox"
-        value=""
-      />
-      <div
-        class="c11 c12 c1"
-      />
-      <span
-        class="c13 c14"
-        id="label"
-      >
-        Check me
-      </span>
+      Username
     </label>
-    <div />
   </div>
+  <div />
+  <label
+    aria-describedby="label"
+    aria-invalid="false"
+    aria-label="Check me"
+    aria-required="true"
+    class="c6 c4 c7"
+  >
+    <input
+      class="c8 c9"
+      type="checkbox"
+      value=""
+    />
+    <div
+      class="c10 c11 c0"
+    />
+    <span
+      class="c12 c13"
+      id="label"
+    >
+      Check me
+    </span>
+  </label>
+  <div />
 </div>
 `;
 
 exports[`renders correctly for an input field with a description 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -856,7 +766,7 @@ exports[`renders correctly for an input field with a description 1`] = `
   color: inherit;
 }
 
-.c10 {
+.c9 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -870,7 +780,7 @@ exports[`renders correctly for an input field with a description 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c12 {
+.c11 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -883,7 +793,7 @@ exports[`renders correctly for an input field with a description 1`] = `
   color: inherit;
 }
 
-.c15 {
+.c14 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -897,7 +807,7 @@ exports[`renders correctly for an input field with a description 1`] = `
   margin-left: 0.5rem !important;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -911,51 +821,25 @@ exports[`renders correctly for an input field with a description 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-abbr.c8 {
+abbr.c7 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c8 {
+i.c7 {
   font-style: italic;
 }
 
-kbd.c8 {
+kbd.c7 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -963,50 +847,50 @@ kbd.c8 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c8 {
+mark.c7 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c8 {
+strong.c7 {
   font-weight: bold;
 }
 
-sub.c8,
-sup.c8 {
+sub.c7,
+sup.c7 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c8,
-u.c8 {
+ins.c7,
+u.c7 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c8,
-cite.c8,
-var.c8,
-em.c8 {
+i.c7,
+cite.c7,
+var.c7,
+em.c7 {
   font-style: italic;
 }
 
-kbd.c8,
-pre.c8,
-samp.c8 {
+kbd.c7,
+pre.c7,
+samp.c7 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c8 .c17 {
+.c7 .c16 {
   top: 0.1em;
 }
 
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c14 {
+.c13 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -1015,7 +899,7 @@ samp.c8 {
   width: 1em;
 }
 
-.c11 {
+.c10 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -1025,26 +909,26 @@ samp.c8 {
   width: 1px;
 }
 
-.c11[disabled] + .c13 {
+.c10[disabled] + .c12 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c11:checked:focus + .c13 {
+.c10:checked:focus + .c12 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11:focus + .c13 {
+.c10:focus + .c12 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11:not([disabled]):checked + .c13 {
+.c10:not([disabled]):checked + .c12 {
   border-color: #7467c0;
 }
 
-.c11:checked + .c13::before {
+.c10:checked + .c12::before {
   background-clip: padding-box;
   content: '';
   left: calc(50% - 3px);
@@ -1052,7 +936,7 @@ samp.c8 {
   position: absolute;
 }
 
-.c11:checked + .c13::before {
+.c10:checked + .c12::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
@@ -1063,34 +947,34 @@ samp.c8 {
   width: 6px;
 }
 
-.c11[disabled]:checked + .c13::before {
+.c10[disabled]:checked + .c12::before {
   border-color: #9a9a9a;
 }
 
-.c16[disabled] + .c13 {
+.c15[disabled] + .c12 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c16:checked:focus + .c13 {
+.c15:checked:focus + .c12 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c16:focus + .c13 {
+.c15:focus + .c12 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c16:not([disabled]):checked + .c13 {
+.c15:not([disabled]):checked + .c12 {
   border-color: #7467c0;
 }
 
-.c16:checked + .c13 {
+.c15:checked + .c12 {
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c16:checked + .c13::before {
+.c15:checked + .c12::before {
   background-clip: padding-box;
   content: '';
   left: calc(50% - 3px);
@@ -1098,7 +982,7 @@ samp.c8 {
   position: absolute;
 }
 
-.c16:checked + .c13::before {
+.c15:checked + .c12::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
@@ -1109,11 +993,11 @@ samp.c8 {
   width: 6px;
 }
 
-.c16[disabled]:checked + .c13::before {
+.c15[disabled]:checked + .c12::before {
   border-color: #9a9a9a;
 }
 
-.c9 {
+.c8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1124,74 +1008,70 @@ samp.c8 {
   align-items: center;
 }
 
-.c4 {
+.c3 {
   display: block;
 }
 
-.c3 {
+.c2 {
   margin-bottom: 0 !important;
 }
 
-.c7 {
+.c6 {
   display: block;
   font-size: 0.8rem;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="align-items: center;"
   >
-    <div
-      class="c2 c1"
-      style="align-items: center;"
-    >
-      <label
-        class="c3 c4 c5 c6"
-        font-weight="600"
-        for="username"
-        style="font-weight: 600;"
-      >
-        Username
-      </label>
-    </div>
-    <span
-      class="c7 c8 c1"
-    >
-      Required for your fannypack
-    </span>
     <label
-      aria-describedby="label"
-      aria-invalid="false"
-      aria-label="Check me"
-      aria-required="false"
-      class="c9 c5 c10"
+      class="c2 c3 c4 c5"
+      font-weight="600"
+      for="username"
+      style="font-weight: 600;"
     >
-      <input
-        class="c11 c12"
-        type="checkbox"
-        value=""
-      />
-      <div
-        class="c13 c14 c1"
-      />
-      <span
-        class="c8 c15"
-        id="label"
-      >
-        Check me
-      </span>
+      Username
     </label>
-    <div />
   </div>
+  <span
+    class="c6 c7 c0"
+  >
+    Required for your fannypack
+  </span>
+  <label
+    aria-describedby="label"
+    aria-invalid="false"
+    aria-label="Check me"
+    aria-required="false"
+    class="c8 c4 c9"
+  >
+    <input
+      class="c10 c11"
+      type="checkbox"
+      value=""
+    />
+    <div
+      class="c12 c13 c0"
+    />
+    <span
+      class="c7 c14"
+      id="label"
+    >
+      Check me
+    </span>
+  </label>
+  <div />
 </div>
 `;
 
 exports[`renders correctly for an input field with a hint 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1204,7 +1084,7 @@ exports[`renders correctly for an input field with a hint 1`] = `
   color: inherit;
 }
 
-.c8 {
+.c7 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1218,7 +1098,7 @@ exports[`renders correctly for an input field with a hint 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c10 {
+.c9 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1231,7 +1111,7 @@ exports[`renders correctly for an input field with a hint 1`] = `
   color: inherit;
 }
 
-.c14 {
+.c13 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1245,7 +1125,7 @@ exports[`renders correctly for an input field with a hint 1`] = `
   margin-left: 0.5rem !important;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1259,51 +1139,25 @@ exports[`renders correctly for an input field with a hint 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-abbr.c13 {
+abbr.c12 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c13 {
+i.c12 {
   font-style: italic;
 }
 
-kbd.c13 {
+kbd.c12 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -1311,50 +1165,50 @@ kbd.c13 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c13 {
+mark.c12 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c13 {
+strong.c12 {
   font-weight: bold;
 }
 
-sub.c13,
-sup.c13 {
+sub.c12,
+sup.c12 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c13,
-u.c13 {
+ins.c12,
+u.c12 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c13,
-cite.c13,
-var.c13,
-em.c13 {
+i.c12,
+cite.c12,
+var.c12,
+em.c12 {
   font-style: italic;
 }
 
-kbd.c13,
-pre.c13,
-samp.c13 {
+kbd.c12,
+pre.c12,
+samp.c12 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c13 .c17 {
+.c12 .c16 {
   top: 0.1em;
 }
 
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c12 {
+.c11 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -1363,7 +1217,7 @@ samp.c13 {
   width: 1em;
 }
 
-.c9 {
+.c8 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -1373,26 +1227,26 @@ samp.c13 {
   width: 1px;
 }
 
-.c9[disabled] + .c11 {
+.c8[disabled] + .c10 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c9:checked:focus + .c11 {
+.c8:checked:focus + .c10 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c9:focus + .c11 {
+.c8:focus + .c10 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c9:not([disabled]):checked + .c11 {
+.c8:not([disabled]):checked + .c10 {
   border-color: #7467c0;
 }
 
-.c9:checked + .c11::before {
+.c8:checked + .c10::before {
   background-clip: padding-box;
   content: '';
   left: calc(50% - 3px);
@@ -1400,7 +1254,7 @@ samp.c13 {
   position: absolute;
 }
 
-.c9:checked + .c11::before {
+.c8:checked + .c10::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
@@ -1411,34 +1265,34 @@ samp.c13 {
   width: 6px;
 }
 
-.c9[disabled]:checked + .c11::before {
+.c8[disabled]:checked + .c10::before {
   border-color: #9a9a9a;
 }
 
-.c16[disabled] + .c11 {
+.c15[disabled] + .c10 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c16:checked:focus + .c11 {
+.c15:checked:focus + .c10 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c16:focus + .c11 {
+.c15:focus + .c10 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c16:not([disabled]):checked + .c11 {
+.c15:not([disabled]):checked + .c10 {
   border-color: #7467c0;
 }
 
-.c16:checked + .c11 {
+.c15:checked + .c10 {
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c16:checked + .c11::before {
+.c15:checked + .c10::before {
   background-clip: padding-box;
   content: '';
   left: calc(50% - 3px);
@@ -1446,7 +1300,7 @@ samp.c13 {
   position: absolute;
 }
 
-.c16:checked + .c11::before {
+.c15:checked + .c10::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
@@ -1457,11 +1311,11 @@ samp.c13 {
   width: 6px;
 }
 
-.c16[disabled]:checked + .c11::before {
+.c15[disabled]:checked + .c10::before {
   border-color: #9a9a9a;
 }
 
-.c7 {
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1472,75 +1326,71 @@ samp.c13 {
   align-items: center;
 }
 
-.c4 {
+.c3 {
   display: block;
 }
 
-.c3 {
+.c2 {
   margin-bottom: 0 !important;
 }
 
-.c15 {
+.c14 {
   display: block;
   font-size: 0.8rem;
   margin-top: 0.25rem;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="align-items: center;"
   >
-    <div
-      class="c2 c1"
-      style="align-items: center;"
-    >
-      <label
-        class="c3 c4 c5 c6"
-        font-weight="600"
-        for="username"
-        style="font-weight: 600;"
-      >
-        Username
-      </label>
-    </div>
-    <div />
     <label
-      aria-describedby="label"
-      aria-invalid="false"
-      aria-label="Check me"
-      aria-required="false"
-      class="c7 c5 c8"
+      class="c2 c3 c4 c5"
+      font-weight="600"
+      for="username"
+      style="font-weight: 600;"
     >
-      <input
-        class="c9 c10"
-        type="checkbox"
-        value=""
-      />
-      <div
-        class="c11 c12 c1"
-      />
-      <span
-        class="c13 c14"
-        id="label"
-      >
-        Check me
-      </span>
+      Username
     </label>
+  </div>
+  <div />
+  <label
+    aria-describedby="label"
+    aria-invalid="false"
+    aria-label="Check me"
+    aria-required="false"
+    class="c6 c4 c7"
+  >
+    <input
+      class="c8 c9"
+      type="checkbox"
+      value=""
+    />
+    <div
+      class="c10 c11 c0"
+    />
     <span
-      class="c15 c13 c1"
+      class="c12 c13"
+      id="label"
     >
-      Must be awesome
+      Check me
     </span>
-  </div>
+  </label>
+  <span
+    class="c14 c12 c0"
+  >
+    Must be awesome
+  </span>
 </div>
 `;
 
 exports[`renders correctly for an optional input field 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1553,7 +1403,7 @@ exports[`renders correctly for an optional input field 1`] = `
   color: inherit;
 }
 
-.c10 {
+.c9 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1567,7 +1417,7 @@ exports[`renders correctly for an optional input field 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c12 {
+.c11 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1580,7 +1430,7 @@ exports[`renders correctly for an optional input field 1`] = `
   color: inherit;
 }
 
-.c15 {
+.c14 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1594,7 +1444,7 @@ exports[`renders correctly for an optional input field 1`] = `
   margin-left: 0.5rem !important;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1608,51 +1458,25 @@ exports[`renders correctly for an optional input field 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-abbr.c8 {
+abbr.c7 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c8 {
+i.c7 {
   font-style: italic;
 }
 
-kbd.c8 {
+kbd.c7 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -1660,50 +1484,50 @@ kbd.c8 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c8 {
+mark.c7 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c8 {
+strong.c7 {
   font-weight: bold;
 }
 
-sub.c8,
-sup.c8 {
+sub.c7,
+sup.c7 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c8,
-u.c8 {
+ins.c7,
+u.c7 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c8,
-cite.c8,
-var.c8,
-em.c8 {
+i.c7,
+cite.c7,
+var.c7,
+em.c7 {
   font-style: italic;
 }
 
-kbd.c8,
-pre.c8,
-samp.c8 {
+kbd.c7,
+pre.c7,
+samp.c7 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c8 .c17 {
+.c7 .c16 {
   top: 0.1em;
 }
 
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c14 {
+.c13 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -1712,7 +1536,7 @@ samp.c8 {
   width: 1em;
 }
 
-.c11 {
+.c10 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -1722,26 +1546,26 @@ samp.c8 {
   width: 1px;
 }
 
-.c11[disabled] + .c13 {
+.c10[disabled] + .c12 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c11:checked:focus + .c13 {
+.c10:checked:focus + .c12 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11:focus + .c13 {
+.c10:focus + .c12 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11:not([disabled]):checked + .c13 {
+.c10:not([disabled]):checked + .c12 {
   border-color: #7467c0;
 }
 
-.c11:checked + .c13::before {
+.c10:checked + .c12::before {
   background-clip: padding-box;
   content: '';
   left: calc(50% - 3px);
@@ -1749,7 +1573,7 @@ samp.c8 {
   position: absolute;
 }
 
-.c11:checked + .c13::before {
+.c10:checked + .c12::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
@@ -1760,34 +1584,34 @@ samp.c8 {
   width: 6px;
 }
 
-.c11[disabled]:checked + .c13::before {
+.c10[disabled]:checked + .c12::before {
   border-color: #9a9a9a;
 }
 
-.c16[disabled] + .c13 {
+.c15[disabled] + .c12 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c16:checked:focus + .c13 {
+.c15:checked:focus + .c12 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c16:focus + .c13 {
+.c15:focus + .c12 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c16:not([disabled]):checked + .c13 {
+.c15:not([disabled]):checked + .c12 {
   border-color: #7467c0;
 }
 
-.c16:checked + .c13 {
+.c15:checked + .c12 {
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c16:checked + .c13::before {
+.c15:checked + .c12::before {
   background-clip: padding-box;
   content: '';
   left: calc(50% - 3px);
@@ -1795,7 +1619,7 @@ samp.c8 {
   position: absolute;
 }
 
-.c16:checked + .c13::before {
+.c15:checked + .c12::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
@@ -1806,11 +1630,11 @@ samp.c8 {
   width: 6px;
 }
 
-.c16[disabled]:checked + .c13::before {
+.c15[disabled]:checked + .c12::before {
   border-color: #9a9a9a;
 }
 
-.c9 {
+.c8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1821,76 +1645,72 @@ samp.c8 {
   align-items: center;
 }
 
-.c4 {
+.c3 {
   display: block;
 }
 
-.c3 {
+.c2 {
   margin-bottom: 0 !important;
 }
 
-.c7 {
+.c6 {
   font-size: 0.8rem;
   color: #708da8;
   margin-left: 0.5rem;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="align-items: center;"
   >
-    <div
-      class="c2 c1"
-      style="align-items: center;"
-    >
-      <label
-        class="c3 c4 c5 c6"
-        font-weight="600"
-        for="username"
-        style="font-weight: 600;"
-      >
-        Username
-      </label>
-      <span
-        class="c7 c8 c1"
-      >
-        OPTIONAL
-      </span>
-    </div>
-    <div />
     <label
-      aria-describedby="label"
-      aria-invalid="false"
-      aria-label="Check me"
-      aria-required="false"
-      class="c9 c5 c10"
+      class="c2 c3 c4 c5"
+      font-weight="600"
+      for="username"
+      style="font-weight: 600;"
     >
-      <input
-        class="c11 c12"
-        type="checkbox"
-        value=""
-      />
-      <div
-        class="c13 c14 c1"
-      />
-      <span
-        class="c8 c15"
-        id="label"
-      >
-        Check me
-      </span>
+      Username
     </label>
-    <div />
+    <span
+      class="c6 c7 c0"
+    >
+      OPTIONAL
+    </span>
   </div>
+  <div />
+  <label
+    aria-describedby="label"
+    aria-invalid="false"
+    aria-label="Check me"
+    aria-required="false"
+    class="c8 c4 c9"
+  >
+    <input
+      class="c10 c11"
+      type="checkbox"
+      value=""
+    />
+    <div
+      class="c12 c13 c0"
+    />
+    <span
+      class="c7 c14"
+      id="label"
+    >
+      Check me
+    </span>
+  </label>
+  <div />
 </div>
 `;
 
 exports[`states renders correctly for a checkbox field with state danger 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1903,7 +1723,7 @@ exports[`states renders correctly for a checkbox field with state danger 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1917,7 +1737,7 @@ exports[`states renders correctly for a checkbox field with state danger 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1930,7 +1750,7 @@ exports[`states renders correctly for a checkbox field with state danger 1`] = `
   color: inherit;
 }
 
-.c10 {
+.c9 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1944,44 +1764,18 @@ exports[`states renders correctly for a checkbox field with state danger 1`] = `
   margin-left: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-abbr.c9 {
+abbr.c8 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c9 {
+i.c8 {
   font-style: italic;
 }
 
-kbd.c9 {
+kbd.c8 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -1989,50 +1783,50 @@ kbd.c9 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c9 {
+mark.c8 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c9 {
+strong.c8 {
   font-weight: bold;
 }
 
-sub.c9,
-sup.c9 {
+sub.c8,
+sup.c8 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c9,
-u.c9 {
+ins.c8,
+u.c8 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c9,
-cite.c9,
-var.c9,
-em.c9 {
+i.c8,
+cite.c8,
+var.c8,
+em.c8 {
   font-style: italic;
 }
 
-kbd.c9,
-pre.c9,
-samp.c9 {
+kbd.c8,
+pre.c8,
+samp.c8 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c9 .c12 {
+.c8 .c11 {
   top: 0.1em;
 }
 
-.c3 {
+.c2 {
   display: inline-block;
 }
 
-.c8 {
+.c7 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -2041,31 +1835,31 @@ samp.c9 {
   width: 1em;
 }
 
-.c8 {
+.c7 {
   border-color: #e24c67;
   box-shadow: #e24c67 0px 0px 0px 1px !important;
 }
 
-.c11[disabled] + .c7 {
+.c10[disabled] + .c6 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c11:checked:focus + .c7 {
+.c10:checked:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11:focus + .c7 {
+.c10:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11:not([disabled]):checked + .c7 {
+.c10:not([disabled]):checked + .c6 {
   border-color: #7467c0;
 }
 
-.c11:checked + .c7::before {
+.c10:checked + .c6::before {
   background-clip: padding-box;
   content: '';
   left: calc(50% - 3px);
@@ -2073,7 +1867,7 @@ samp.c9 {
   position: absolute;
 }
 
-.c11:checked + .c7::before {
+.c10:checked + .c6::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
@@ -2084,11 +1878,11 @@ samp.c9 {
   width: 6px;
 }
 
-.c11[disabled]:checked + .c7::before {
+.c10[disabled]:checked + .c6::before {
   border-color: #9a9a9a;
 }
 
-.c5 {
+.c4 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -2098,30 +1892,30 @@ samp.c9 {
   width: 1px;
 }
 
-.c5[disabled] + .c7 {
+.c4[disabled] + .c6 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c5:checked:focus + .c7 {
+.c4:checked:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c5:focus + .c7 {
+.c4:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c5:not([disabled]):checked + .c7 {
+.c4:not([disabled]):checked + .c6 {
   border-color: #7467c0;
 }
 
-.c5:checked + .c7 {
+.c4:checked + .c6 {
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c5:checked + .c7::before {
+.c4:checked + .c6::before {
   background-clip: padding-box;
   content: '';
   left: calc(50% - 3px);
@@ -2129,7 +1923,7 @@ samp.c9 {
   position: absolute;
 }
 
-.c5:checked + .c7::before {
+.c4:checked + .c6::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
@@ -2140,11 +1934,11 @@ samp.c9 {
   width: 6px;
 }
 
-.c5[disabled]:checked + .c7::before {
+.c4[disabled]:checked + .c6::before {
   border-color: #9a9a9a;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2156,43 +1950,39 @@ samp.c9 {
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
-  <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+  <div />
+  <label
+    aria-describedby="label"
+    aria-invalid="true"
+    aria-label="Check me"
+    aria-required="false"
+    class="c1 c2 c3"
   >
-    <div />
-    <label
-      aria-describedby="label"
-      aria-invalid="true"
-      aria-label="Check me"
-      aria-required="false"
-      class="c2 c3 c4"
+    <input
+      class="c4 c5"
+      type="checkbox"
+      value=""
+    />
+    <div
+      class="c6 c7 c0"
+    />
+    <span
+      class="c8 c9"
+      id="label"
     >
-      <input
-        class="c5 c6"
-        type="checkbox"
-        value=""
-      />
-      <div
-        class="c7 c8 c1"
-      />
-      <span
-        class="c9 c10"
-        id="label"
-      >
-        Check me
-      </span>
-    </label>
-    <div />
-  </div>
+      Check me
+    </span>
+  </label>
+  <div />
 </div>
 `;
 
 exports[`states renders correctly for a checkbox field with state primary 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2205,7 +1995,7 @@ exports[`states renders correctly for a checkbox field with state primary 1`] =
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2219,7 +2009,7 @@ exports[`states renders correctly for a checkbox field with state primary 1`] =
   margin-top: 0.5rem !important;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2232,7 +2022,7 @@ exports[`states renders correctly for a checkbox field with state primary 1`] =
   color: inherit;
 }
 
-.c10 {
+.c9 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2246,44 +2036,18 @@ exports[`states renders correctly for a checkbox field with state primary 1`] =
   margin-left: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-abbr.c9 {
+abbr.c8 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c9 {
+i.c8 {
   font-style: italic;
 }
 
-kbd.c9 {
+kbd.c8 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -2291,50 +2055,50 @@ kbd.c9 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c9 {
+mark.c8 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c9 {
+strong.c8 {
   font-weight: bold;
 }
 
-sub.c9,
-sup.c9 {
+sub.c8,
+sup.c8 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c9,
-u.c9 {
+ins.c8,
+u.c8 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c9,
-cite.c9,
-var.c9,
-em.c9 {
+i.c8,
+cite.c8,
+var.c8,
+em.c8 {
   font-style: italic;
 }
 
-kbd.c9,
-pre.c9,
-samp.c9 {
+kbd.c8,
+pre.c8,
+samp.c8 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c9 .c12 {
+.c8 .c11 {
   top: 0.1em;
 }
 
-.c3 {
+.c2 {
   display: inline-block;
 }
 
-.c8 {
+.c7 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -2343,31 +2107,31 @@ samp.c9 {
   width: 1em;
 }
 
-.c8 {
+.c7 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11[disabled] + .c7 {
+.c10[disabled] + .c6 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c11:checked:focus + .c7 {
+.c10:checked:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11:focus + .c7 {
+.c10:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11:not([disabled]):checked + .c7 {
+.c10:not([disabled]):checked + .c6 {
   border-color: #7467c0;
 }
 
-.c11:checked + .c7::before {
+.c10:checked + .c6::before {
   background-clip: padding-box;
   content: '';
   left: calc(50% - 3px);
@@ -2375,7 +2139,7 @@ samp.c9 {
   position: absolute;
 }
 
-.c11:checked + .c7::before {
+.c10:checked + .c6::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
@@ -2386,11 +2150,11 @@ samp.c9 {
   width: 6px;
 }
 
-.c11[disabled]:checked + .c7::before {
+.c10[disabled]:checked + .c6::before {
   border-color: #9a9a9a;
 }
 
-.c5 {
+.c4 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -2400,30 +2164,30 @@ samp.c9 {
   width: 1px;
 }
 
-.c5[disabled] + .c7 {
+.c4[disabled] + .c6 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c5:checked:focus + .c7 {
+.c4:checked:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c5:focus + .c7 {
+.c4:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c5:not([disabled]):checked + .c7 {
+.c4:not([disabled]):checked + .c6 {
   border-color: #7467c0;
 }
 
-.c5:checked + .c7 {
+.c4:checked + .c6 {
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c5:checked + .c7::before {
+.c4:checked + .c6::before {
   background-clip: padding-box;
   content: '';
   left: calc(50% - 3px);
@@ -2431,7 +2195,7 @@ samp.c9 {
   position: absolute;
 }
 
-.c5:checked + .c7::before {
+.c4:checked + .c6::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
@@ -2442,11 +2206,11 @@ samp.c9 {
   width: 6px;
 }
 
-.c5[disabled]:checked + .c7::before {
+.c4[disabled]:checked + .c6::before {
   border-color: #9a9a9a;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2458,43 +2222,39 @@ samp.c9 {
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
-  <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+  <div />
+  <label
+    aria-describedby="label"
+    aria-invalid="false"
+    aria-label="Check me"
+    aria-required="false"
+    class="c1 c2 c3"
   >
-    <div />
-    <label
-      aria-describedby="label"
-      aria-invalid="false"
-      aria-label="Check me"
-      aria-required="false"
-      class="c2 c3 c4"
+    <input
+      class="c4 c5"
+      type="checkbox"
+      value=""
+    />
+    <div
+      class="c6 c7 c0"
+    />
+    <span
+      class="c8 c9"
+      id="label"
     >
-      <input
-        class="c5 c6"
-        type="checkbox"
-        value=""
-      />
-      <div
-        class="c7 c8 c1"
-      />
-      <span
-        class="c9 c10"
-        id="label"
-      >
-        Check me
-      </span>
-    </label>
-    <div />
-  </div>
+      Check me
+    </span>
+  </label>
+  <div />
 </div>
 `;
 
 exports[`states renders correctly for a checkbox field with state success 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2507,7 +2267,7 @@ exports[`states renders correctly for a checkbox field with state success 1`] =
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2521,7 +2281,7 @@ exports[`states renders correctly for a checkbox field with state success 1`] =
   margin-top: 0.5rem !important;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2534,7 +2294,7 @@ exports[`states renders correctly for a checkbox field with state success 1`] =
   color: inherit;
 }
 
-.c10 {
+.c9 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2548,44 +2308,18 @@ exports[`states renders correctly for a checkbox field with state success 1`] =
   margin-left: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-abbr.c9 {
+abbr.c8 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c9 {
+i.c8 {
   font-style: italic;
 }
 
-kbd.c9 {
+kbd.c8 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -2593,50 +2327,50 @@ kbd.c9 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c9 {
+mark.c8 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c9 {
+strong.c8 {
   font-weight: bold;
 }
 
-sub.c9,
-sup.c9 {
+sub.c8,
+sup.c8 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c9,
-u.c9 {
+ins.c8,
+u.c8 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c9,
-cite.c9,
-var.c9,
-em.c9 {
+i.c8,
+cite.c8,
+var.c8,
+em.c8 {
   font-style: italic;
 }
 
-kbd.c9,
-pre.c9,
-samp.c9 {
+kbd.c8,
+pre.c8,
+samp.c8 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c9 .c12 {
+.c8 .c11 {
   top: 0.1em;
 }
 
-.c3 {
+.c2 {
   display: inline-block;
 }
 
-.c8 {
+.c7 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -2645,31 +2379,31 @@ samp.c9 {
   width: 1em;
 }
 
-.c8 {
+.c7 {
   border-color: #4ca26c;
   box-shadow: #4ca26c 0px 0px 0px 1px !important;
 }
 
-.c11[disabled] + .c7 {
+.c10[disabled] + .c6 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c11:checked:focus + .c7 {
+.c10:checked:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11:focus + .c7 {
+.c10:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11:not([disabled]):checked + .c7 {
+.c10:not([disabled]):checked + .c6 {
   border-color: #7467c0;
 }
 
-.c11:checked + .c7::before {
+.c10:checked + .c6::before {
   background-clip: padding-box;
   content: '';
   left: calc(50% - 3px);
@@ -2677,7 +2411,7 @@ samp.c9 {
   position: absolute;
 }
 
-.c11:checked + .c7::before {
+.c10:checked + .c6::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
@@ -2688,11 +2422,11 @@ samp.c9 {
   width: 6px;
 }
 
-.c11[disabled]:checked + .c7::before {
+.c10[disabled]:checked + .c6::before {
   border-color: #9a9a9a;
 }
 
-.c5 {
+.c4 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -2702,30 +2436,30 @@ samp.c9 {
   width: 1px;
 }
 
-.c5[disabled] + .c7 {
+.c4[disabled] + .c6 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c5:checked:focus + .c7 {
+.c4:checked:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c5:focus + .c7 {
+.c4:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c5:not([disabled]):checked + .c7 {
+.c4:not([disabled]):checked + .c6 {
   border-color: #7467c0;
 }
 
-.c5:checked + .c7 {
+.c4:checked + .c6 {
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c5:checked + .c7::before {
+.c4:checked + .c6::before {
   background-clip: padding-box;
   content: '';
   left: calc(50% - 3px);
@@ -2733,7 +2467,7 @@ samp.c9 {
   position: absolute;
 }
 
-.c5:checked + .c7::before {
+.c4:checked + .c6::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
@@ -2744,11 +2478,11 @@ samp.c9 {
   width: 6px;
 }
 
-.c5[disabled]:checked + .c7::before {
+.c4[disabled]:checked + .c6::before {
   border-color: #9a9a9a;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2760,43 +2494,39 @@ samp.c9 {
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
-  <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+  <div />
+  <label
+    aria-describedby="label"
+    aria-invalid="false"
+    aria-label="Check me"
+    aria-required="false"
+    class="c1 c2 c3"
   >
-    <div />
-    <label
-      aria-describedby="label"
-      aria-invalid="false"
-      aria-label="Check me"
-      aria-required="false"
-      class="c2 c3 c4"
+    <input
+      class="c4 c5"
+      type="checkbox"
+      value=""
+    />
+    <div
+      class="c6 c7 c0"
+    />
+    <span
+      class="c8 c9"
+      id="label"
     >
-      <input
-        class="c5 c6"
-        type="checkbox"
-        value=""
-      />
-      <div
-        class="c7 c8 c1"
-      />
-      <span
-        class="c9 c10"
-        id="label"
-      >
-        Check me
-      </span>
-    </label>
-    <div />
-  </div>
+      Check me
+    </span>
+  </label>
+  <div />
 </div>
 `;
 
 exports[`states renders correctly for a checkbox field with state warning 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2809,7 +2539,7 @@ exports[`states renders correctly for a checkbox field with state warning 1`] =
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2823,7 +2553,7 @@ exports[`states renders correctly for a checkbox field with state warning 1`] =
   margin-top: 0.5rem !important;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2836,7 +2566,7 @@ exports[`states renders correctly for a checkbox field with state warning 1`] =
   color: inherit;
 }
 
-.c10 {
+.c9 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2850,44 +2580,18 @@ exports[`states renders correctly for a checkbox field with state warning 1`] =
   margin-left: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-abbr.c9 {
+abbr.c8 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c9 {
+i.c8 {
   font-style: italic;
 }
 
-kbd.c9 {
+kbd.c8 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -2895,50 +2599,50 @@ kbd.c9 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c9 {
+mark.c8 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c9 {
+strong.c8 {
   font-weight: bold;
 }
 
-sub.c9,
-sup.c9 {
+sub.c8,
+sup.c8 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c9,
-u.c9 {
+ins.c8,
+u.c8 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c9,
-cite.c9,
-var.c9,
-em.c9 {
+i.c8,
+cite.c8,
+var.c8,
+em.c8 {
   font-style: italic;
 }
 
-kbd.c9,
-pre.c9,
-samp.c9 {
+kbd.c8,
+pre.c8,
+samp.c8 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c9 .c12 {
+.c8 .c11 {
   top: 0.1em;
 }
 
-.c3 {
+.c2 {
   display: inline-block;
 }
 
-.c8 {
+.c7 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -2947,31 +2651,31 @@ samp.c9 {
   width: 1em;
 }
 
-.c8 {
+.c7 {
   border-color: #ffc94c;
   box-shadow: #ffc94c 0px 0px 0px 1px !important;
 }
 
-.c11[disabled] + .c7 {
+.c10[disabled] + .c6 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c11:checked:focus + .c7 {
+.c10:checked:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11:focus + .c7 {
+.c10:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11:not([disabled]):checked + .c7 {
+.c10:not([disabled]):checked + .c6 {
   border-color: #7467c0;
 }
 
-.c11:checked + .c7::before {
+.c10:checked + .c6::before {
   background-clip: padding-box;
   content: '';
   left: calc(50% - 3px);
@@ -2979,7 +2683,7 @@ samp.c9 {
   position: absolute;
 }
 
-.c11:checked + .c7::before {
+.c10:checked + .c6::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
@@ -2990,11 +2694,11 @@ samp.c9 {
   width: 6px;
 }
 
-.c11[disabled]:checked + .c7::before {
+.c10[disabled]:checked + .c6::before {
   border-color: #9a9a9a;
 }
 
-.c5 {
+.c4 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -3004,30 +2708,30 @@ samp.c9 {
   width: 1px;
 }
 
-.c5[disabled] + .c7 {
+.c4[disabled] + .c6 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c5:checked:focus + .c7 {
+.c4:checked:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c5:focus + .c7 {
+.c4:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c5:not([disabled]):checked + .c7 {
+.c4:not([disabled]):checked + .c6 {
   border-color: #7467c0;
 }
 
-.c5:checked + .c7 {
+.c4:checked + .c6 {
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c5:checked + .c7::before {
+.c4:checked + .c6::before {
   background-clip: padding-box;
   content: '';
   left: calc(50% - 3px);
@@ -3035,7 +2739,7 @@ samp.c9 {
   position: absolute;
 }
 
-.c5:checked + .c7::before {
+.c4:checked + .c6::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
@@ -3046,11 +2750,11 @@ samp.c9 {
   width: 6px;
 }
 
-.c5[disabled]:checked + .c7::before {
+.c4[disabled]:checked + .c6::before {
   border-color: #9a9a9a;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3062,37 +2766,33 @@ samp.c9 {
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
-  <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+  <div />
+  <label
+    aria-describedby="label"
+    aria-invalid="false"
+    aria-label="Check me"
+    aria-required="false"
+    class="c1 c2 c3"
   >
-    <div />
-    <label
-      aria-describedby="label"
-      aria-invalid="false"
-      aria-label="Check me"
-      aria-required="false"
-      class="c2 c3 c4"
+    <input
+      class="c4 c5"
+      type="checkbox"
+      value=""
+    />
+    <div
+      class="c6 c7 c0"
+    />
+    <span
+      class="c8 c9"
+      id="label"
     >
-      <input
-        class="c5 c6"
-        type="checkbox"
-        value=""
-      />
-      <div
-        class="c7 c8 c1"
-      />
-      <span
-        class="c9 c10"
-        id="label"
-      >
-        Check me
-      </span>
-    </label>
-    <div />
-  </div>
+      Check me
+    </span>
+  </label>
+  <div />
 </div>
 `;
diff --git a/src/Code/__tests__/__snapshots__/Code.test.js.snap b/src/Code/__tests__/__snapshots__/Code.test.js.snap
index bc72a2345..92dfd9f9c 100644
--- a/src/Code/__tests__/__snapshots__/Code.test.js.snap
+++ b/src/Code/__tests__/__snapshots__/Code.test.js.snap
@@ -15,57 +15,27 @@ exports[`renders correctly for code (block) 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   background-color: #f2f2f2;
   border-radius: 0.1rem;
   color: #435a6f;
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-code.c2 {
+code.c0 {
   padding: 0.1rem 0.2rem;
 }
 
-pre.c2 {
+pre.c0 {
   padding: 1rem;
 }
 
-<div
+<pre
   class="c0 c1"
 >
-  <pre
-    class="c2 c1"
-  >
-    <code>
-      test
-    </code>
-  </pre>
-</div>
+  <code>
+    test
+  </code>
+</pre>
 `;
 
 exports[`renders correctly for code (inline) 1`] = `
@@ -83,53 +53,23 @@ exports[`renders correctly for code (inline) 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   background-color: #f2f2f2;
   border-radius: 0.1rem;
   color: #435a6f;
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-code.c2 {
+code.c0 {
   padding: 0.1rem 0.2rem;
 }
 
-pre.c2 {
+pre.c0 {
   padding: 1rem;
 }
 
-<div
+<code
   class="c0 c1"
 >
-  <code
-    class="c2 c1"
-  >
-    test
-  </code>
-</div>
+  test
+</code>
 `;
diff --git a/src/Column/__tests__/__snapshots__/Column.test.js.snap b/src/Column/__tests__/__snapshots__/Column.test.js.snap
index 388e0c895..aa327de8f 100644
--- a/src/Column/__tests__/__snapshots__/Column.test.js.snap
+++ b/src/Column/__tests__/__snapshots__/Column.test.js.snap
@@ -14,33 +14,7 @@ exports[`basic offsets renders correctly for a spread offset of "both" 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
+.c2 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -48,14 +22,14 @@ exports[`basic offsets renders correctly for a spread offset of "both" 1`] = `
   padding: 0.5rem;
 }
 
-.c3 {
+.c2 {
   -webkit-flex: none;
   -ms-flex: none;
   flex: none;
   width: 50%;
 }
 
-.c4 {
+.c3 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -63,19 +37,19 @@ exports[`basic offsets renders correctly for a spread offset of "both" 1`] = `
   padding: 0.5rem;
 }
 
-.c4 {
+.c3 {
   -webkit-flex: none;
   -ms-flex: none;
   flex: none;
   width: 16.666666666666664%;
 }
 
-.c4 {
+.c3 {
   margin-left: auto;
   margin-right: auto;
 }
 
-.c2 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -87,25 +61,25 @@ exports[`basic offsets renders correctly for a spread offset of "both" 1`] = `
 }
 
 @media (max-width:768px) {
-  .c3 {
+  .c2 {
     width: 100%;
   }
 }
 
 @media (max-width:480px) {
-  .c3 {
+  .c2 {
     width: 100%;
   }
 }
 
 @media (max-width:768px) {
-  .c4 {
+  .c3 {
     width: 100%;
   }
 }
 
 @media (max-width:480px) {
-  .c4 {
+  .c3 {
     width: 100%;
   }
 }
@@ -116,16 +90,12 @@ exports[`basic offsets renders correctly for a spread offset of "both" 1`] = `
   <div
     class="c2 c1"
   >
-    <div
-      class="c3 c1"
-    >
-      Column
-    </div>
-    <div
-      class="c4 c1"
-    >
-      Column
-    </div>
+    Column
+  </div>
+  <div
+    class="c3 c1"
+  >
+    Column
   </div>
 </div>
 `;
@@ -144,33 +114,7 @@ exports[`basic offsets renders correctly for a spread offset of "left" 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
+.c2 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -178,14 +122,14 @@ exports[`basic offsets renders correctly for a spread offset of "left" 1`] = `
   padding: 0.5rem;
 }
 
-.c3 {
+.c2 {
   -webkit-flex: none;
   -ms-flex: none;
   flex: none;
   width: 50%;
 }
 
-.c4 {
+.c3 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -193,18 +137,18 @@ exports[`basic offsets renders correctly for a spread offset of "left" 1`] = `
   padding: 0.5rem;
 }
 
-.c4 {
+.c3 {
   -webkit-flex: none;
   -ms-flex: none;
   flex: none;
   width: 16.666666666666664%;
 }
 
-.c4 {
+.c3 {
   margin-left: auto;
 }
 
-.c2 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -216,25 +160,25 @@ exports[`basic offsets renders correctly for a spread offset of "left" 1`] = `
 }
 
 @media (max-width:768px) {
-  .c3 {
+  .c2 {
     width: 100%;
   }
 }
 
 @media (max-width:480px) {
-  .c3 {
+  .c2 {
     width: 100%;
   }
 }
 
 @media (max-width:768px) {
-  .c4 {
+  .c3 {
     width: 100%;
   }
 }
 
 @media (max-width:480px) {
-  .c4 {
+  .c3 {
     width: 100%;
   }
 }
@@ -245,16 +189,12 @@ exports[`basic offsets renders correctly for a spread offset of "left" 1`] = `
   <div
     class="c2 c1"
   >
-    <div
-      class="c3 c1"
-    >
-      Column
-    </div>
-    <div
-      class="c4 c1"
-    >
-      Column
-    </div>
+    Column
+  </div>
+  <div
+    class="c3 c1"
+  >
+    Column
   </div>
 </div>
 `;
@@ -273,33 +213,7 @@ exports[`basic offsets renders correctly for a spread offset of "right" 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c4 {
+.c3 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -307,14 +221,14 @@ exports[`basic offsets renders correctly for a spread offset of "right" 1`] = `
   padding: 0.5rem;
 }
 
-.c4 {
+.c3 {
   -webkit-flex: none;
   -ms-flex: none;
   flex: none;
   width: 50%;
 }
 
-.c3 {
+.c2 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -322,18 +236,18 @@ exports[`basic offsets renders correctly for a spread offset of "right" 1`] = `
   padding: 0.5rem;
 }
 
-.c3 {
+.c2 {
   -webkit-flex: none;
   -ms-flex: none;
   flex: none;
   width: 16.666666666666664%;
 }
 
-.c3 {
+.c2 {
   margin-right: auto;
 }
 
-.c2 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -345,25 +259,25 @@ exports[`basic offsets renders correctly for a spread offset of "right" 1`] = `
 }
 
 @media (max-width:768px) {
-  .c4 {
+  .c3 {
     width: 100%;
   }
 }
 
 @media (max-width:480px) {
-  .c4 {
+  .c3 {
     width: 100%;
   }
 }
 
 @media (max-width:768px) {
-  .c3 {
+  .c2 {
     width: 100%;
   }
 }
 
 @media (max-width:480px) {
-  .c3 {
+  .c2 {
     width: 100%;
   }
 }
@@ -374,16 +288,12 @@ exports[`basic offsets renders correctly for a spread offset of "right" 1`] = `
   <div
     class="c2 c1"
   >
-    <div
-      class="c3 c1"
-    >
-      Column
-    </div>
-    <div
-      class="c4 c1"
-    >
-      Column
-    </div>
+    Column
+  </div>
+  <div
+    class="c3 c1"
+  >
+    Column
   </div>
 </div>
 `;
@@ -402,33 +312,7 @@ exports[`basic offsets renders correctly for a spread offset of values between 1
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
+.c2 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -436,14 +320,14 @@ exports[`basic offsets renders correctly for a spread offset of values between 1
   padding: 0.5rem;
 }
 
-.c3 {
+.c2 {
   -webkit-flex: none;
   -ms-flex: none;
   flex: none;
   width: 50%;
 }
 
-.c4 {
+.c3 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -451,18 +335,18 @@ exports[`basic offsets renders correctly for a spread offset of values between 1
   padding: 0.5rem;
 }
 
-.c4 {
+.c3 {
   -webkit-flex: none;
   -ms-flex: none;
   flex: none;
   width: 25%;
 }
 
-.c4 {
+.c3 {
   margin-left: 25%;
 }
 
-.c2 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -474,37 +358,37 @@ exports[`basic offsets renders correctly for a spread offset of values between 1
 }
 
 @media (max-width:768px) {
-  .c3 {
+  .c2 {
     width: 100%;
   }
 }
 
 @media (max-width:480px) {
-  .c3 {
+  .c2 {
     width: 100%;
   }
 }
 
 @media (max-width:768px) {
-  .c4 {
+  .c3 {
     width: 100%;
   }
 }
 
 @media (max-width:480px) {
-  .c4 {
+  .c3 {
     width: 100%;
   }
 }
 
 @media (max-width:768px) {
-  .c4 {
+  .c3 {
     margin-left: 0;
   }
 }
 
 @media (max-width:480px) {
-  .c4 {
+  .c3 {
     margin-left: 0;
   }
 }
@@ -515,16 +399,12 @@ exports[`basic offsets renders correctly for a spread offset of values between 1
   <div
     class="c2 c1"
   >
-    <div
-      class="c3 c1"
-    >
-      Column
-    </div>
-    <div
-      class="c4 c1"
-    >
-      Column
-    </div>
+    Column
+  </div>
+  <div
+    class="c3 c1"
+  >
+    Column
   </div>
 </div>
 `;
@@ -543,33 +423,7 @@ exports[`basic sizes renders correctly when all columns have sizes 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
+.c2 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -577,14 +431,14 @@ exports[`basic sizes renders correctly when all columns have sizes 1`] = `
   padding: 0.5rem;
 }
 
-.c3 {
+.c2 {
   -webkit-flex: none;
   -ms-flex: none;
   flex: none;
   width: 50%;
 }
 
-.c4 {
+.c3 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -592,14 +446,14 @@ exports[`basic sizes renders correctly when all columns have sizes 1`] = `
   padding: 0.5rem;
 }
 
-.c4 {
+.c3 {
   -webkit-flex: none;
   -ms-flex: none;
   flex: none;
   width: 25%;
 }
 
-.c5 {
+.c4 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -607,14 +461,14 @@ exports[`basic sizes renders correctly when all columns have sizes 1`] = `
   padding: 0.5rem;
 }
 
-.c5 {
+.c4 {
   -webkit-flex: none;
   -ms-flex: none;
   flex: none;
   width: 16.666666666666664%;
 }
 
-.c6 {
+.c5 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -622,14 +476,14 @@ exports[`basic sizes renders correctly when all columns have sizes 1`] = `
   padding: 0.5rem;
 }
 
-.c6 {
+.c5 {
   -webkit-flex: none;
   -ms-flex: none;
   flex: none;
   width: 8.333333333333332%;
 }
 
-.c2 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -641,49 +495,49 @@ exports[`basic sizes renders correctly when all columns have sizes 1`] = `
 }
 
 @media (max-width:768px) {
-  .c3 {
+  .c2 {
     width: 100%;
   }
 }
 
 @media (max-width:480px) {
-  .c3 {
+  .c2 {
     width: 100%;
   }
 }
 
 @media (max-width:768px) {
-  .c4 {
+  .c3 {
     width: 100%;
   }
 }
 
 @media (max-width:480px) {
-  .c4 {
+  .c3 {
     width: 100%;
   }
 }
 
 @media (max-width:768px) {
-  .c5 {
+  .c4 {
     width: 100%;
   }
 }
 
 @media (max-width:480px) {
-  .c5 {
+  .c4 {
     width: 100%;
   }
 }
 
 @media (max-width:768px) {
-  .c6 {
+  .c5 {
     width: 100%;
   }
 }
 
 @media (max-width:480px) {
-  .c6 {
+  .c5 {
     width: 100%;
   }
 }
@@ -694,26 +548,22 @@ exports[`basic sizes renders correctly when all columns have sizes 1`] = `
   <div
     class="c2 c1"
   >
-    <div
-      class="c3 c1"
-    >
-      Column
-    </div>
-    <div
-      class="c4 c1"
-    >
-      Column
-    </div>
-    <div
-      class="c5 c1"
-    >
-      Column
-    </div>
-    <div
-      class="c6 c1"
-    >
-      Column
-    </div>
+    Column
+  </div>
+  <div
+    class="c3 c1"
+  >
+    Column
+  </div>
+  <div
+    class="c4 c1"
+  >
+    Column
+  </div>
+  <div
+    class="c5 c1"
+  >
+    Column
   </div>
 </div>
 `;
@@ -732,33 +582,7 @@ exports[`basic sizes renders correctly when one of the columns does not have a s
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c5 {
+.c4 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -766,7 +590,7 @@ exports[`basic sizes renders correctly when one of the columns does not have a s
   padding: 0.5rem;
 }
 
-.c3 {
+.c2 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -774,14 +598,14 @@ exports[`basic sizes renders correctly when one of the columns does not have a s
   padding: 0.5rem;
 }
 
-.c3 {
+.c2 {
   -webkit-flex: none;
   -ms-flex: none;
   flex: none;
   width: 50%;
 }
 
-.c4 {
+.c3 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -789,14 +613,14 @@ exports[`basic sizes renders correctly when one of the columns does not have a s
   padding: 0.5rem;
 }
 
-.c4 {
+.c3 {
   -webkit-flex: none;
   -ms-flex: none;
   flex: none;
   width: 25%;
 }
 
-.c6 {
+.c5 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -804,14 +628,14 @@ exports[`basic sizes renders correctly when one of the columns does not have a s
   padding: 0.5rem;
 }
 
-.c6 {
+.c5 {
   -webkit-flex: none;
   -ms-flex: none;
   flex: none;
   width: 8.333333333333332%;
 }
 
-.c2 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -823,7 +647,7 @@ exports[`basic sizes renders correctly when one of the columns does not have a s
 }
 
 @media (max-width:768px) {
-  .c5 {
+  .c4 {
     -webkit-flex: none;
     -ms-flex: none;
     flex: none;
@@ -832,37 +656,37 @@ exports[`basic sizes renders correctly when one of the columns does not have a s
 }
 
 @media (max-width:768px) {
-  .c3 {
+  .c2 {
     width: 100%;
   }
 }
 
 @media (max-width:480px) {
-  .c3 {
+  .c2 {
     width: 100%;
   }
 }
 
 @media (max-width:768px) {
-  .c4 {
+  .c3 {
     width: 100%;
   }
 }
 
 @media (max-width:480px) {
-  .c4 {
+  .c3 {
     width: 100%;
   }
 }
 
 @media (max-width:768px) {
-  .c6 {
+  .c5 {
     width: 100%;
   }
 }
 
 @media (max-width:480px) {
-  .c6 {
+  .c5 {
     width: 100%;
   }
 }
@@ -873,26 +697,22 @@ exports[`basic sizes renders correctly when one of the columns does not have a s
   <div
     class="c2 c1"
   >
-    <div
-      class="c3 c1"
-    >
-      Column
-    </div>
-    <div
-      class="c4 c1"
-    >
-      Column
-    </div>
-    <div
-      class="c5 c1"
-    >
-      Column
-    </div>
-    <div
-      class="c6 c1"
-    >
-      Column
-    </div>
+    Column
+  </div>
+  <div
+    class="c3 c1"
+  >
+    Column
+  </div>
+  <div
+    class="c4 c1"
+  >
+    Column
+  </div>
+  <div
+    class="c5 c1"
+  >
+    Column
   </div>
 </div>
 `;
@@ -911,33 +731,7 @@ exports[`basic sizes renders correctly when the first column does not have a siz
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
+.c2 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -945,7 +739,7 @@ exports[`basic sizes renders correctly when the first column does not have a siz
   padding: 0.5rem;
 }
 
-.c4 {
+.c3 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -953,14 +747,14 @@ exports[`basic sizes renders correctly when the first column does not have a siz
   padding: 0.5rem;
 }
 
-.c4 {
+.c3 {
   -webkit-flex: none;
   -ms-flex: none;
   flex: none;
   width: 25%;
 }
 
-.c5 {
+.c4 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -968,14 +762,14 @@ exports[`basic sizes renders correctly when the first column does not have a siz
   padding: 0.5rem;
 }
 
-.c5 {
+.c4 {
   -webkit-flex: none;
   -ms-flex: none;
   flex: none;
   width: 16.666666666666664%;
 }
 
-.c6 {
+.c5 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -983,14 +777,14 @@ exports[`basic sizes renders correctly when the first column does not have a siz
   padding: 0.5rem;
 }
 
-.c6 {
+.c5 {
   -webkit-flex: none;
   -ms-flex: none;
   flex: none;
   width: 8.333333333333332%;
 }
 
-.c2 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1002,7 +796,7 @@ exports[`basic sizes renders correctly when the first column does not have a siz
 }
 
 @media (max-width:768px) {
-  .c3 {
+  .c2 {
     -webkit-flex: none;
     -ms-flex: none;
     flex: none;
@@ -1011,37 +805,37 @@ exports[`basic sizes renders correctly when the first column does not have a siz
 }
 
 @media (max-width:768px) {
-  .c4 {
+  .c3 {
     width: 100%;
   }
 }
 
 @media (max-width:480px) {
-  .c4 {
+  .c3 {
     width: 100%;
   }
 }
 
 @media (max-width:768px) {
-  .c5 {
+  .c4 {
     width: 100%;
   }
 }
 
 @media (max-width:480px) {
-  .c5 {
+  .c4 {
     width: 100%;
   }
 }
 
 @media (max-width:768px) {
-  .c6 {
+  .c5 {
     width: 100%;
   }
 }
 
 @media (max-width:480px) {
-  .c6 {
+  .c5 {
     width: 100%;
   }
 }
@@ -1052,26 +846,22 @@ exports[`basic sizes renders correctly when the first column does not have a siz
   <div
     class="c2 c1"
   >
-    <div
-      class="c3 c1"
-    >
-      Column
-    </div>
-    <div
-      class="c4 c1"
-    >
-      Column
-    </div>
-    <div
-      class="c5 c1"
-    >
-      Column
-    </div>
-    <div
-      class="c6 c1"
-    >
-      Column
-    </div>
+    Column
+  </div>
+  <div
+    class="c3 c1"
+  >
+    Column
+  </div>
+  <div
+    class="c4 c1"
+  >
+    Column
+  </div>
+  <div
+    class="c5 c1"
+  >
+    Column
   </div>
 </div>
 `;
@@ -1090,33 +880,7 @@ exports[`basic sizes renders correctly when there is space still left on the rig
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
+.c2 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -1124,14 +888,14 @@ exports[`basic sizes renders correctly when there is space still left on the rig
   padding: 0.5rem;
 }
 
-.c3 {
+.c2 {
   -webkit-flex: none;
   -ms-flex: none;
   flex: none;
   width: 50%;
 }
 
-.c4 {
+.c3 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -1139,14 +903,14 @@ exports[`basic sizes renders correctly when there is space still left on the rig
   padding: 0.5rem;
 }
 
-.c4 {
+.c3 {
   -webkit-flex: none;
   -ms-flex: none;
   flex: none;
   width: 25%;
 }
 
-.c2 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1158,25 +922,25 @@ exports[`basic sizes renders correctly when there is space still left on the rig
 }
 
 @media (max-width:768px) {
-  .c3 {
+  .c2 {
     width: 100%;
   }
 }
 
 @media (max-width:480px) {
-  .c3 {
+  .c2 {
     width: 100%;
   }
 }
 
 @media (max-width:768px) {
-  .c4 {
+  .c3 {
     width: 100%;
   }
 }
 
 @media (max-width:480px) {
-  .c4 {
+  .c3 {
     width: 100%;
   }
 }
@@ -1187,16 +951,12 @@ exports[`basic sizes renders correctly when there is space still left on the rig
   <div
     class="c2 c1"
   >
-    <div
-      class="c3 c1"
-    >
-      Column
-    </div>
-    <div
-      class="c4 c1"
-    >
-      Column
-    </div>
+    Column
+  </div>
+  <div
+    class="c3 c1"
+  >
+    Column
   </div>
 </div>
 `;
@@ -1215,33 +975,7 @@ exports[`renders correctly for basic columns 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
+.c2 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -1249,7 +983,7 @@ exports[`renders correctly for basic columns 1`] = `
   padding: 0.5rem;
 }
 
-.c2 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1261,7 +995,7 @@ exports[`renders correctly for basic columns 1`] = `
 }
 
 @media (max-width:768px) {
-  .c3 {
+  .c2 {
     -webkit-flex: none;
     -ms-flex: none;
     flex: none;
@@ -1275,26 +1009,22 @@ exports[`renders correctly for basic columns 1`] = `
   <div
     class="c2 c1"
   >
-    <div
-      class="c3 c1"
-    >
-      Column
-    </div>
-    <div
-      class="c3 c1"
-    >
-      Column
-    </div>
-    <div
-      class="c3 c1"
-    >
-      Column
-    </div>
-    <div
-      class="c3 c1"
-    >
-      Column
-    </div>
+    Column
+  </div>
+  <div
+    class="c2 c1"
+  >
+    Column
+  </div>
+  <div
+    class="c2 c1"
+  >
+    Column
+  </div>
+  <div
+    class="c2 c1"
+  >
+    Column
   </div>
 </div>
 `;
@@ -1313,33 +1043,7 @@ exports[`variable offsets renders correctly when all spreadOffsets are specified
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
+.c2 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -1347,18 +1051,18 @@ exports[`variable offsets renders correctly when all spreadOffsets are specified
   padding: 0.5rem;
 }
 
-.c3 {
+.c2 {
   -webkit-flex: none;
   -ms-flex: none;
   flex: none;
   width: 91.66666666666666%;
 }
 
-.c3 {
+.c2 {
   margin-left: 8.333333333333332%;
 }
 
-.c2 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1370,7 +1074,7 @@ exports[`variable offsets renders correctly when all spreadOffsets are specified
 }
 
 @media (max-width:1440px) {
-  .c3 {
+  .c2 {
     -webkit-flex: none;
     -ms-flex: none;
     flex: none;
@@ -1379,7 +1083,7 @@ exports[`variable offsets renders correctly when all spreadOffsets are specified
 }
 
 @media (max-width:1200px) {
-  .c3 {
+  .c2 {
     -webkit-flex: none;
     -ms-flex: none;
     flex: none;
@@ -1388,7 +1092,7 @@ exports[`variable offsets renders correctly when all spreadOffsets are specified
 }
 
 @media (max-width:1024px) {
-  .c3 {
+  .c2 {
     -webkit-flex: none;
     -ms-flex: none;
     flex: none;
@@ -1397,7 +1101,7 @@ exports[`variable offsets renders correctly when all spreadOffsets are specified
 }
 
 @media (max-width:768px) {
-  .c3 {
+  .c2 {
     -webkit-flex: none;
     -ms-flex: none;
     flex: none;
@@ -1406,7 +1110,7 @@ exports[`variable offsets renders correctly when all spreadOffsets are specified
 }
 
 @media (max-width:480px) {
-  .c3 {
+  .c2 {
     -webkit-flex: none;
     -ms-flex: none;
     flex: none;
@@ -1415,31 +1119,31 @@ exports[`variable offsets renders correctly when all spreadOffsets are specified
 }
 
 @media (max-width:1440px) {
-  .c3 {
+  .c2 {
     margin-left: 16.666666666666664%;
   }
 }
 
 @media (max-width:1200px) {
-  .c3 {
+  .c2 {
     margin-left: 25%;
   }
 }
 
 @media (max-width:1024px) {
-  .c3 {
+  .c2 {
     margin-left: 33.33333333333333%;
   }
 }
 
 @media (max-width:768px) {
-  .c3 {
+  .c2 {
     margin-left: 41.66666666666667%;
   }
 }
 
 @media (max-width:480px) {
-  .c3 {
+  .c2 {
     margin-left: 50%;
   }
 }
@@ -1450,11 +1154,7 @@ exports[`variable offsets renders correctly when all spreadOffsets are specified
   <div
     class="c2 c1"
   >
-    <div
-      class="c3 c1"
-    >
-      Column
-    </div>
+    Column
   </div>
 </div>
 `;
@@ -1473,33 +1173,7 @@ exports[`variable offsets renders correctly when only mobile spread offset is sp
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
+.c2 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -1507,7 +1181,7 @@ exports[`variable offsets renders correctly when only mobile spread offset is sp
   padding: 0.5rem;
 }
 
-.c2 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1519,7 +1193,7 @@ exports[`variable offsets renders correctly when only mobile spread offset is sp
 }
 
 @media (max-width:480px) {
-  .c3 {
+  .c2 {
     -webkit-flex: none;
     -ms-flex: none;
     flex: none;
@@ -1533,11 +1207,7 @@ exports[`variable offsets renders correctly when only mobile spread offset is sp
   <div
     class="c2 c1"
   >
-    <div
-      class="c3 c1"
-    >
-      Column
-    </div>
+    Column
   </div>
 </div>
 `;
@@ -1556,33 +1226,7 @@ exports[`variable offsets renders correctly when only spreadOffset and spreadDes
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
+.c2 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -1590,18 +1234,18 @@ exports[`variable offsets renders correctly when only spreadOffset and spreadDes
   padding: 0.5rem;
 }
 
-.c3 {
+.c2 {
   -webkit-flex: none;
   -ms-flex: none;
   flex: none;
   width: 83.33333333333334%;
 }
 
-.c3 {
+.c2 {
   margin-left: 16.666666666666664%;
 }
 
-.c2 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1613,7 +1257,7 @@ exports[`variable offsets renders correctly when only spreadOffset and spreadDes
 }
 
 @media (max-width:1024px) {
-  .c3 {
+  .c2 {
     -webkit-flex: none;
     -ms-flex: none;
     flex: none;
@@ -1622,31 +1266,31 @@ exports[`variable offsets renders correctly when only spreadOffset and spreadDes
 }
 
 @media (max-width:768px) {
-  .c3 {
+  .c2 {
     width: 100%;
   }
 }
 
 @media (max-width:480px) {
-  .c3 {
+  .c2 {
     width: 100%;
   }
 }
 
 @media (max-width:1024px) {
-  .c3 {
+  .c2 {
     margin-left: 33.33333333333333%;
   }
 }
 
 @media (max-width:768px) {
-  .c3 {
+  .c2 {
     margin-left: 0;
   }
 }
 
 @media (max-width:480px) {
-  .c3 {
+  .c2 {
     margin-left: 0;
   }
 }
@@ -1657,11 +1301,7 @@ exports[`variable offsets renders correctly when only spreadOffset and spreadDes
   <div
     class="c2 c1"
   >
-    <div
-      class="c3 c1"
-    >
-      Column
-    </div>
+    Column
   </div>
 </div>
 `;
@@ -1680,33 +1320,7 @@ exports[`variable offsets renders correctly when only tablet spread offset is sp
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
+.c2 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -1714,7 +1328,7 @@ exports[`variable offsets renders correctly when only tablet spread offset is sp
   padding: 0.5rem;
 }
 
-.c2 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1726,7 +1340,7 @@ exports[`variable offsets renders correctly when only tablet spread offset is sp
 }
 
 @media (max-width:768px) {
-  .c3 {
+  .c2 {
     -webkit-flex: none;
     -ms-flex: none;
     flex: none;
@@ -1735,7 +1349,7 @@ exports[`variable offsets renders correctly when only tablet spread offset is sp
 }
 
 @media (max-width:480px) {
-  .c3 {
+  .c2 {
     width: 100%;
   }
 }
@@ -1746,11 +1360,7 @@ exports[`variable offsets renders correctly when only tablet spread offset is sp
   <div
     class="c2 c1"
   >
-    <div
-      class="c3 c1"
-    >
-      Column
-    </div>
+    Column
   </div>
 </div>
 `;
@@ -1769,33 +1379,7 @@ exports[`variable sizes renders correctly when all spreads are specified 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
+.c2 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -1803,14 +1387,14 @@ exports[`variable sizes renders correctly when all spreads are specified 1`] = `
   padding: 0.5rem;
 }
 
-.c3 {
+.c2 {
   -webkit-flex: none;
   -ms-flex: none;
   flex: none;
   width: 91.66666666666666%;
 }
 
-.c4 {
+.c3 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -1818,14 +1402,14 @@ exports[`variable sizes renders correctly when all spreads are specified 1`] = `
   padding: 0.5rem;
 }
 
-.c4 {
+.c3 {
   -webkit-flex: none;
   -ms-flex: none;
   flex: none;
   width: 8.333333333333332%;
 }
 
-.c2 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1837,7 +1421,7 @@ exports[`variable sizes renders correctly when all spreads are specified 1`] = `
 }
 
 @media (max-width:1440px) {
-  .c3 {
+  .c2 {
     -webkit-flex: none;
     -ms-flex: none;
     flex: none;
@@ -1846,7 +1430,7 @@ exports[`variable sizes renders correctly when all spreads are specified 1`] = `
 }
 
 @media (max-width:1200px) {
-  .c3 {
+  .c2 {
     -webkit-flex: none;
     -ms-flex: none;
     flex: none;
@@ -1855,7 +1439,7 @@ exports[`variable sizes renders correctly when all spreads are specified 1`] = `
 }
 
 @media (max-width:1024px) {
-  .c3 {
+  .c2 {
     -webkit-flex: none;
     -ms-flex: none;
     flex: none;
@@ -1864,7 +1448,7 @@ exports[`variable sizes renders correctly when all spreads are specified 1`] = `
 }
 
 @media (max-width:768px) {
-  .c3 {
+  .c2 {
     -webkit-flex: none;
     -ms-flex: none;
     flex: none;
@@ -1873,7 +1457,7 @@ exports[`variable sizes renders correctly when all spreads are specified 1`] = `
 }
 
 @media (max-width:480px) {
-  .c3 {
+  .c2 {
     -webkit-flex: none;
     -ms-flex: none;
     flex: none;
@@ -1882,7 +1466,7 @@ exports[`variable sizes renders correctly when all spreads are specified 1`] = `
 }
 
 @media (max-width:1440px) {
-  .c4 {
+  .c3 {
     -webkit-flex: none;
     -ms-flex: none;
     flex: none;
@@ -1891,7 +1475,7 @@ exports[`variable sizes renders correctly when all spreads are specified 1`] = `
 }
 
 @media (max-width:1200px) {
-  .c4 {
+  .c3 {
     -webkit-flex: none;
     -ms-flex: none;
     flex: none;
@@ -1900,7 +1484,7 @@ exports[`variable sizes renders correctly when all spreads are specified 1`] = `
 }
 
 @media (max-width:1024px) {
-  .c4 {
+  .c3 {
     -webkit-flex: none;
     -ms-flex: none;
     flex: none;
@@ -1909,7 +1493,7 @@ exports[`variable sizes renders correctly when all spreads are specified 1`] = `
 }
 
 @media (max-width:768px) {
-  .c4 {
+  .c3 {
     -webkit-flex: none;
     -ms-flex: none;
     flex: none;
@@ -1918,7 +1502,7 @@ exports[`variable sizes renders correctly when all spreads are specified 1`] = `
 }
 
 @media (max-width:480px) {
-  .c4 {
+  .c3 {
     -webkit-flex: none;
     -ms-flex: none;
     flex: none;
@@ -1932,16 +1516,12 @@ exports[`variable sizes renders correctly when all spreads are specified 1`] = `
   <div
     class="c2 c1"
   >
-    <div
-      class="c3 c1"
-    >
-      Column
-    </div>
-    <div
-      class="c4 c1"
-    >
-      Column
-    </div>
+    Column
+  </div>
+  <div
+    class="c3 c1"
+  >
+    Column
   </div>
 </div>
 `;
@@ -1960,33 +1540,7 @@ exports[`variable sizes renders correctly when only mobile spread is specified 1
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
+.c2 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -1994,7 +1548,7 @@ exports[`variable sizes renders correctly when only mobile spread is specified 1
   padding: 0.5rem;
 }
 
-.c4 {
+.c3 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -2002,7 +1556,7 @@ exports[`variable sizes renders correctly when only mobile spread is specified 1
   padding: 0.5rem;
 }
 
-.c2 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2014,7 +1568,7 @@ exports[`variable sizes renders correctly when only mobile spread is specified 1
 }
 
 @media (max-width:480px) {
-  .c3 {
+  .c2 {
     -webkit-flex: none;
     -ms-flex: none;
     flex: none;
@@ -2023,7 +1577,7 @@ exports[`variable sizes renders correctly when only mobile spread is specified 1
 }
 
 @media (max-width:480px) {
-  .c4 {
+  .c3 {
     -webkit-flex: none;
     -ms-flex: none;
     flex: none;
@@ -2037,16 +1591,12 @@ exports[`variable sizes renders correctly when only mobile spread is specified 1
   <div
     class="c2 c1"
   >
-    <div
-      class="c3 c1"
-    >
-      Column
-    </div>
-    <div
-      class="c4 c1"
-    >
-      Column
-    </div>
+    Column
+  </div>
+  <div
+    class="c3 c1"
+  >
+    Column
   </div>
 </div>
 `;
@@ -2065,33 +1615,7 @@ exports[`variable sizes renders correctly when only spread and spreadDesktop is
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
+.c2 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -2099,14 +1623,14 @@ exports[`variable sizes renders correctly when only spread and spreadDesktop is
   padding: 0.5rem;
 }
 
-.c3 {
+.c2 {
   -webkit-flex: none;
   -ms-flex: none;
   flex: none;
   width: 83.33333333333334%;
 }
 
-.c4 {
+.c3 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -2114,14 +1638,14 @@ exports[`variable sizes renders correctly when only spread and spreadDesktop is
   padding: 0.5rem;
 }
 
-.c4 {
+.c3 {
   -webkit-flex: none;
   -ms-flex: none;
   flex: none;
   width: 16.666666666666664%;
 }
 
-.c2 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2133,7 +1657,7 @@ exports[`variable sizes renders correctly when only spread and spreadDesktop is
 }
 
 @media (max-width:1024px) {
-  .c3 {
+  .c2 {
     -webkit-flex: none;
     -ms-flex: none;
     flex: none;
@@ -2142,19 +1666,19 @@ exports[`variable sizes renders correctly when only spread and spreadDesktop is
 }
 
 @media (max-width:768px) {
-  .c3 {
+  .c2 {
     width: 100%;
   }
 }
 
 @media (max-width:480px) {
-  .c3 {
+  .c2 {
     width: 100%;
   }
 }
 
 @media (max-width:1024px) {
-  .c4 {
+  .c3 {
     -webkit-flex: none;
     -ms-flex: none;
     flex: none;
@@ -2163,13 +1687,13 @@ exports[`variable sizes renders correctly when only spread and spreadDesktop is
 }
 
 @media (max-width:768px) {
-  .c4 {
+  .c3 {
     width: 100%;
   }
 }
 
 @media (max-width:480px) {
-  .c4 {
+  .c3 {
     width: 100%;
   }
 }
@@ -2180,16 +1704,12 @@ exports[`variable sizes renders correctly when only spread and spreadDesktop is
   <div
     class="c2 c1"
   >
-    <div
-      class="c3 c1"
-    >
-      Column
-    </div>
-    <div
-      class="c4 c1"
-    >
-      Column
-    </div>
+    Column
+  </div>
+  <div
+    class="c3 c1"
+  >
+    Column
   </div>
 </div>
 `;
@@ -2208,33 +1728,7 @@ exports[`variable sizes renders correctly when only tablet spread is specified 1
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
+.c2 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -2242,7 +1736,7 @@ exports[`variable sizes renders correctly when only tablet spread is specified 1
   padding: 0.5rem;
 }
 
-.c4 {
+.c3 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -2250,7 +1744,7 @@ exports[`variable sizes renders correctly when only tablet spread is specified 1
   padding: 0.5rem;
 }
 
-.c2 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2262,7 +1756,7 @@ exports[`variable sizes renders correctly when only tablet spread is specified 1
 }
 
 @media (max-width:768px) {
-  .c3 {
+  .c2 {
     -webkit-flex: none;
     -ms-flex: none;
     flex: none;
@@ -2271,13 +1765,13 @@ exports[`variable sizes renders correctly when only tablet spread is specified 1
 }
 
 @media (max-width:480px) {
-  .c3 {
+  .c2 {
     width: 100%;
   }
 }
 
 @media (max-width:768px) {
-  .c4 {
+  .c3 {
     -webkit-flex: none;
     -ms-flex: none;
     flex: none;
@@ -2286,7 +1780,7 @@ exports[`variable sizes renders correctly when only tablet spread is specified 1
 }
 
 @media (max-width:480px) {
-  .c4 {
+  .c3 {
     width: 100%;
   }
 }
@@ -2297,16 +1791,12 @@ exports[`variable sizes renders correctly when only tablet spread is specified 1
   <div
     class="c2 c1"
   >
-    <div
-      class="c3 c1"
-    >
-      Column
-    </div>
-    <div
-      class="c4 c1"
-    >
-      Column
-    </div>
+    Column
+  </div>
+  <div
+    class="c3 c1"
+  >
+    Column
   </div>
 </div>
 `;
diff --git a/src/Columns/__tests__/__snapshots__/Columns.test.js.snap b/src/Columns/__tests__/__snapshots__/Columns.test.js.snap
index ce7acf0a4..c884ff06d 100644
--- a/src/Columns/__tests__/__snapshots__/Columns.test.js.snap
+++ b/src/Columns/__tests__/__snapshots__/Columns.test.js.snap
@@ -14,33 +14,7 @@ exports[`renders correctly for basic columns 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
+.c2 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -48,7 +22,7 @@ exports[`renders correctly for basic columns 1`] = `
   padding: 0.5rem;
 }
 
-.c2 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -60,7 +34,7 @@ exports[`renders correctly for basic columns 1`] = `
 }
 
 @media (max-width:768px) {
-  .c3 {
+  .c2 {
     -webkit-flex: none;
     -ms-flex: none;
     flex: none;
@@ -74,26 +48,22 @@ exports[`renders correctly for basic columns 1`] = `
   <div
     class="c2 c1"
   >
-    <div
-      class="c3 c1"
-    >
-      Column
-    </div>
-    <div
-      class="c3 c1"
-    >
-      Column
-    </div>
-    <div
-      class="c3 c1"
-    >
-      Column
-    </div>
-    <div
-      class="c3 c1"
-    >
-      Column
-    </div>
+    Column
+  </div>
+  <div
+    class="c2 c1"
+  >
+    Column
+  </div>
+  <div
+    class="c2 c1"
+  >
+    Column
+  </div>
+  <div
+    class="c2 c1"
+  >
+    Column
   </div>
 </div>
 `;
@@ -112,40 +82,14 @@ exports[`renders correctly for gapless columns 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
+.c2 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
   max-width: 100%;
 }
 
-.c2 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -156,7 +100,7 @@ exports[`renders correctly for gapless columns 1`] = `
 }
 
 @media (max-width:768px) {
-  .c3 {
+  .c2 {
     -webkit-flex: none;
     -ms-flex: none;
     flex: none;
@@ -170,26 +114,22 @@ exports[`renders correctly for gapless columns 1`] = `
   <div
     class="c2 c1"
   >
-    <div
-      class="c3 c1"
-    >
-      Column
-    </div>
-    <div
-      class="c3 c1"
-    >
-      Column
-    </div>
-    <div
-      class="c3 c1"
-    >
-      Column
-    </div>
-    <div
-      class="c3 c1"
-    >
-      Column
-    </div>
+    Column
+  </div>
+  <div
+    class="c2 c1"
+  >
+    Column
+  </div>
+  <div
+    class="c2 c1"
+  >
+    Column
+  </div>
+  <div
+    class="c2 c1"
+  >
+    Column
   </div>
 </div>
 `;
@@ -208,33 +148,7 @@ exports[`renders correctly for one line columns 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
+.c2 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -242,7 +156,7 @@ exports[`renders correctly for one line columns 1`] = `
   padding: 0.5rem;
 }
 
-.c2 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -251,7 +165,7 @@ exports[`renders correctly for one line columns 1`] = `
 }
 
 @media (max-width:768px) {
-  .c3 {
+  .c2 {
     -webkit-flex: none;
     -ms-flex: none;
     flex: none;
@@ -260,7 +174,7 @@ exports[`renders correctly for one line columns 1`] = `
 }
 
 @media (max-width:768px) {
-  .c2 {
+  .c0 {
     -webkit-flex-wrap: wrap;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
@@ -273,26 +187,22 @@ exports[`renders correctly for one line columns 1`] = `
   <div
     class="c2 c1"
   >
-    <div
-      class="c3 c1"
-    >
-      Column
-    </div>
-    <div
-      class="c3 c1"
-    >
-      Column
-    </div>
-    <div
-      class="c3 c1"
-    >
-      Column
-    </div>
-    <div
-      class="c3 c1"
-    >
-      Column
-    </div>
+    Column
+  </div>
+  <div
+    class="c2 c1"
+  >
+    Column
+  </div>
+  <div
+    class="c2 c1"
+  >
+    Column
+  </div>
+  <div
+    class="c2 c1"
+  >
+    Column
   </div>
 </div>
 `;
@@ -311,33 +221,7 @@ exports[`renders correctly when minBreakpoint is "mobile" 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
+.c2 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -345,7 +229,7 @@ exports[`renders correctly when minBreakpoint is "mobile" 1`] = `
   padding: 0.5rem;
 }
 
-.c2 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -362,26 +246,22 @@ exports[`renders correctly when minBreakpoint is "mobile" 1`] = `
   <div
     class="c2 c1"
   >
-    <div
-      class="c3 c1"
-    >
-      Column
-    </div>
-    <div
-      class="c3 c1"
-    >
-      Column
-    </div>
-    <div
-      class="c3 c1"
-    >
-      Column
-    </div>
-    <div
-      class="c3 c1"
-    >
-      Column
-    </div>
+    Column
+  </div>
+  <div
+    class="c2 c1"
+  >
+    Column
+  </div>
+  <div
+    class="c2 c1"
+  >
+    Column
+  </div>
+  <div
+    class="c2 c1"
+  >
+    Column
   </div>
 </div>
 `;
@@ -400,33 +280,7 @@ exports[`renders correctly when minBreakpoint is "tablet" 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
+.c2 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -434,7 +288,7 @@ exports[`renders correctly when minBreakpoint is "tablet" 1`] = `
   padding: 0.5rem;
 }
 
-.c2 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -446,7 +300,7 @@ exports[`renders correctly when minBreakpoint is "tablet" 1`] = `
 }
 
 @media (max-width:480px) {
-  .c3 {
+  .c2 {
     width: 100%;
   }
 }
@@ -457,26 +311,22 @@ exports[`renders correctly when minBreakpoint is "tablet" 1`] = `
   <div
     class="c2 c1"
   >
-    <div
-      class="c3 c1"
-    >
-      Column
-    </div>
-    <div
-      class="c3 c1"
-    >
-      Column
-    </div>
-    <div
-      class="c3 c1"
-    >
-      Column
-    </div>
-    <div
-      class="c3 c1"
-    >
-      Column
-    </div>
+    Column
+  </div>
+  <div
+    class="c2 c1"
+  >
+    Column
+  </div>
+  <div
+    class="c2 c1"
+  >
+    Column
+  </div>
+  <div
+    class="c2 c1"
+  >
+    Column
   </div>
 </div>
 `;
diff --git a/src/Container/__tests__/__snapshots__/Container.test.js.snap b/src/Container/__tests__/__snapshots__/Container.test.js.snap
index f8bbb222e..52ebf2881 100644
--- a/src/Container/__tests__/__snapshots__/Container.test.js.snap
+++ b/src/Container/__tests__/__snapshots__/Container.test.js.snap
@@ -15,57 +15,31 @@ exports[`alignment renders correctly for a center aligned container 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   max-width: 1440px;
   margin-left: auto;
   margin-right: auto;
 }
 
 @media (max-width:768px) {
-  .c2 {
+  .c0 {
     margin: 0 1rem;
   }
 }
 
 @media (max-width:1568px) {
-  .c2 {
+  .c0 {
     max-width: 1200px;
   }
 }
 
 @media (max-width:1328px) {
-  .c2 {
+  .c0 {
     max-width: 1024px;
   }
 }
 
 @media (max-width:1152px) {
-  .c2 {
+  .c0 {
     max-width: 768px;
   }
 }
@@ -73,11 +47,7 @@ exports[`alignment renders correctly for a center aligned container 1`] = `
 <div
   class="c0 c1"
 >
-  <div
-    class="c2 c1"
-  >
-    test
-  </div>
+  test
 </div>
 `;
 
@@ -96,56 +66,30 @@ exports[`alignment renders correctly for a left aligned container 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   max-width: 1440px;
   margin-right: auto;
 }
 
 @media (max-width:768px) {
-  .c2 {
+  .c0 {
     margin: 0 1rem;
   }
 }
 
 @media (max-width:1568px) {
-  .c2 {
+  .c0 {
     max-width: 1200px;
   }
 }
 
 @media (max-width:1328px) {
-  .c2 {
+  .c0 {
     max-width: 1024px;
   }
 }
 
 @media (max-width:1152px) {
-  .c2 {
+  .c0 {
     max-width: 768px;
   }
 }
@@ -153,11 +97,7 @@ exports[`alignment renders correctly for a left aligned container 1`] = `
 <div
   class="c0 c1"
 >
-  <div
-    class="c2 c1"
-  >
-    test
-  </div>
+  test
 </div>
 `;
 
@@ -176,56 +116,30 @@ exports[`alignment renders correctly for a right aligned container 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   max-width: 1440px;
   margin-left: auto;
 }
 
 @media (max-width:768px) {
-  .c2 {
+  .c0 {
     margin: 0 1rem;
   }
 }
 
 @media (max-width:1568px) {
-  .c2 {
+  .c0 {
     max-width: 1200px;
   }
 }
 
 @media (max-width:1328px) {
-  .c2 {
+  .c0 {
     max-width: 1024px;
   }
 }
 
 @media (max-width:1152px) {
-  .c2 {
+  .c0 {
     max-width: 768px;
   }
 }
@@ -233,11 +147,7 @@ exports[`alignment renders correctly for a right aligned container 1`] = `
 <div
   class="c0 c1"
 >
-  <div
-    class="c2 c1"
-  >
-    test
-  </div>
+  test
 </div>
 `;
 
@@ -256,43 +166,17 @@ exports[`fixed width renders correctly when breakpoint is desktop 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   max-width: 1440px;
   margin-left: auto;
   margin-right: auto;
 }
 
-.c2 {
+.c0 {
   max-width: 1024px;
 }
 
 @media (max-width:768px) {
-  .c2 {
+  .c0 {
     margin: 0 1rem;
   }
 }
@@ -300,11 +184,7 @@ exports[`fixed width renders correctly when breakpoint is desktop 1`] = `
 <div
   class="c0 c1"
 >
-  <div
-    class="c2 c1"
-  >
-    test
-  </div>
+  test
 </div>
 `;
 
@@ -323,43 +203,17 @@ exports[`fixed width renders correctly when breakpoint is fullHD 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   max-width: 1440px;
   margin-left: auto;
   margin-right: auto;
 }
 
-.c2 {
+.c0 {
   max-width: 1440px;
 }
 
 @media (max-width:768px) {
-  .c2 {
+  .c0 {
     margin: 0 1rem;
   }
 }
@@ -367,11 +221,7 @@ exports[`fixed width renders correctly when breakpoint is fullHD 1`] = `
 <div
   class="c0 c1"
 >
-  <div
-    class="c2 c1"
-  >
-    test
-  </div>
+  test
 </div>
 `;
 
@@ -390,43 +240,17 @@ exports[`fixed width renders correctly when breakpoint is mobile 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   max-width: 1440px;
   margin-left: auto;
   margin-right: auto;
 }
 
-.c2 {
+.c0 {
   max-width: 480px;
 }
 
 @media (max-width:768px) {
-  .c2 {
+  .c0 {
     margin: 0 1rem;
   }
 }
@@ -434,11 +258,7 @@ exports[`fixed width renders correctly when breakpoint is mobile 1`] = `
 <div
   class="c0 c1"
 >
-  <div
-    class="c2 c1"
-  >
-    test
-  </div>
+  test
 </div>
 `;
 
@@ -457,43 +277,17 @@ exports[`fixed width renders correctly when breakpoint is tablet 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   max-width: 1440px;
   margin-left: auto;
   margin-right: auto;
 }
 
-.c2 {
+.c0 {
   max-width: 768px;
 }
 
 @media (max-width:768px) {
-  .c2 {
+  .c0 {
     margin: 0 1rem;
   }
 }
@@ -501,11 +295,7 @@ exports[`fixed width renders correctly when breakpoint is tablet 1`] = `
 <div
   class="c0 c1"
 >
-  <div
-    class="c2 c1"
-  >
-    test
-  </div>
+  test
 </div>
 `;
 
@@ -524,43 +314,17 @@ exports[`fixed width renders correctly when breakpoint is widescreen 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   max-width: 1440px;
   margin-left: auto;
   margin-right: auto;
 }
 
-.c2 {
+.c0 {
   max-width: 1200px;
 }
 
 @media (max-width:768px) {
-  .c2 {
+  .c0 {
     margin: 0 1rem;
   }
 }
@@ -568,11 +332,7 @@ exports[`fixed width renders correctly when breakpoint is widescreen 1`] = `
 <div
   class="c0 c1"
 >
-  <div
-    class="c2 c1"
-  >
-    test
-  </div>
+  test
 </div>
 `;
 
@@ -591,37 +351,11 @@ exports[`fluid renders correctly for a fluid container 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   margin: 0 2rem;
 }
 
 @media (max-width:768px) {
-  .c2 {
+  .c0 {
     margin: 0 1rem;
   }
 }
@@ -629,11 +363,7 @@ exports[`fluid renders correctly for a fluid container 1`] = `
 <div
   class="c0 c1"
 >
-  <div
-    class="c2 c1"
-  >
-    test
-  </div>
+  test
 </div>
 `;
 
@@ -652,57 +382,31 @@ exports[`renders correctly for a basic container 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   max-width: 1440px;
   margin-left: auto;
   margin-right: auto;
 }
 
 @media (max-width:768px) {
-  .c2 {
+  .c0 {
     margin: 0 1rem;
   }
 }
 
 @media (max-width:1568px) {
-  .c2 {
+  .c0 {
     max-width: 1200px;
   }
 }
 
 @media (max-width:1328px) {
-  .c2 {
+  .c0 {
     max-width: 1024px;
   }
 }
 
 @media (max-width:1152px) {
-  .c2 {
+  .c0 {
     max-width: 768px;
   }
 }
@@ -710,10 +414,6 @@ exports[`renders correctly for a basic container 1`] = `
 <div
   class="c0 c1"
 >
-  <div
-    class="c2 c1"
-  >
-    test
-  </div>
+  test
 </div>
 `;
diff --git a/src/Dialog/__tests__/__snapshots__/Dialog.test.js.snap b/src/Dialog/__tests__/__snapshots__/Dialog.test.js.snap
index 6d142d18b..7c53cb17c 100644
--- a/src/Dialog/__tests__/__snapshots__/Dialog.test.js.snap
+++ b/src/Dialog/__tests__/__snapshots__/Dialog.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly for a default dialog 1`] = `
-.c1 {
+.c2 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -14,79 +14,53 @@ exports[`renders correctly for a default dialog 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c7 {
+.c6 {
   font-weight: 700;
   line-height: 1.2;
   margin-bottom: 1rem;
 }
 
-.heading.c7 + .sub-heading {
+.heading.c6 + .sub-heading {
   margin-top: -1rem;
 }
 
-.c7:last-child {
+.c6:last-child {
   margin-bottom: 0;
 }
 
-h1.c7 {
+h1.c6 {
   font-size: 3rem;
 }
 
-h2.c7 {
+h2.c6 {
   font-size: 2.5rem;
 }
 
-h3.c7 {
+h3.c6 {
   font-size: 2rem;
 }
 
-h4.c7 {
+h4.c6 {
   font-size: 1.5rem;
 }
 
-h5.c7 {
+h5.c6 {
   font-size: 1.25rem;
 }
 
-h6.c7 {
+h6.c6 {
   font-size: 1rem;
 }
 
-.c7 .c8 {
+.c6 .c7 {
   top: 0.1em;
 }
 
-.c7 {
+.c6 {
   font-weight: 600;
 }
 
-.c3 {
+.c1 {
   background-color: white;
   border-radius: 3px;
   display: -webkit-inline-box;
@@ -99,13 +73,13 @@ h6.c7 {
   border: 1px solid #e6e6e6;
 }
 
-.c4 {
+.c3 {
   padding: 1.25rem;
   max-height: 50vh;
   overflow-y: scroll;
 }
 
-.c5 {
+.c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -123,75 +97,71 @@ h6.c7 {
   width: 100%;
 }
 
-.c6 {
+.c5 {
   margin-bottom: 0px;
 }
 
-.c2 {
+.c0 {
   border-radius: 5px;
 }
 
 @media (max-width:480px) {
-  h1.c7 {
+  h1.c6 {
     font-size: 2rem;
   }
 }
 
 @media (max-width:480px) {
-  h2.c7 {
+  h2.c6 {
     font-size: 1.8rem;
   }
 }
 
 @media (max-width:480px) {
-  h3.c7 {
+  h3.c6 {
     font-size: 1.6rem;
   }
 }
 
 @media (max-width:480px) {
-  h4.c7 {
+  h4.c6 {
     font-size: 1.4rem;
   }
 }
 
 @media (max-width:480px) {
-  h5.c7 {
+  h5.c6 {
     font-size: 1.2rem;
   }
 }
 
 <div
-  class="c0 c1"
+  class="c0 c1 c2"
+  role="dialog"
 >
   <div
-    class="c2 c3 c1"
-    role="dialog"
+    class="c3 c2"
   >
     <div
-      class="c4 c1"
+      class="c4 c2"
     >
-      <div
-        class="c5 c1"
-      >
-        <h5
-          class="c6 sub-heading c7 c1"
-        >
-          This is a title
-        </h5>
-      </div>
-      <div
-        class="c4 c1"
+      <h5
+        class="c5 sub-heading c6 c2"
       >
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum, cursus id placerat congue, ultrices eget lectus. Duis posuere, lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum consectetur lectus augue sit amet justo.
-      </div>
+        This is a title
+      </h5>
+    </div>
+    <div
+      class="c3 c2"
+    >
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum, cursus id placerat congue, ultrices eget lectus. Duis posuere, lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum consectetur lectus augue sit amet justo.
     </div>
   </div>
 </div>
 `;
 
 exports[`renders correctly for a dialog with a close button 1`] = `
-.c1 {
+.c2 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -204,7 +174,7 @@ exports[`renders correctly for a dialog with a close button 1`] = `
   color: inherit;
 }
 
-.c9 {
+.c8 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -217,33 +187,7 @@ exports[`renders correctly for a dialog with a close button 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c8 {
+.c7 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -269,20 +213,20 @@ exports[`renders correctly for a dialog with a close button 1`] = `
   text-decoration: none;
 }
 
-.c8:focus {
+.c7:focus {
   outline: unset;
   z-index: 2;
   box-shadow: #7467c0 0px 0px 0px 2px;
 }
 
-.c8[disabled] {
+.c7[disabled] {
   cursor: not-allowed;
   opacity: 0.7;
   outline: unset;
   pointer-events: unset;
 }
 
-.c8 {
+.c7 {
   border: 0;
   background: unset;
   color: #435a6f;
@@ -291,12 +235,12 @@ exports[`renders correctly for a dialog with a close button 1`] = `
   text-decoration: underline;
 }
 
-.c8:hover {
+.c7:hover {
   color: #000;
   fill: #000;
 }
 
-.c10 {
+.c9 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -307,60 +251,60 @@ exports[`renders correctly for a dialog with a close button 1`] = `
   display: inline-flex;
 }
 
-.c12 {
+.c11 {
   fill: inherit;
   position: relative;
   height: 1em;
   width: 1em;
 }
 
-.c6 {
+.c5 {
   font-weight: 700;
   line-height: 1.2;
   margin-bottom: 1rem;
 }
 
-.heading.c6 + .sub-heading {
+.heading.c5 + .sub-heading {
   margin-top: -1rem;
 }
 
-.c6:last-child {
+.c5:last-child {
   margin-bottom: 0;
 }
 
-h1.c6 {
+h1.c5 {
   font-size: 3rem;
 }
 
-h2.c6 {
+h2.c5 {
   font-size: 2.5rem;
 }
 
-h3.c6 {
+h3.c5 {
   font-size: 2rem;
 }
 
-h4.c6 {
+h4.c5 {
   font-size: 1.5rem;
 }
 
-h5.c6 {
+h5.c5 {
   font-size: 1.25rem;
 }
 
-h6.c6 {
+h6.c5 {
   font-size: 1rem;
 }
 
-.c6 .c11 {
+.c5 .c10 {
   top: 0.1em;
 }
 
-.c6 {
+.c5 {
   font-weight: 600;
 }
 
-.c3 {
+.c1 {
   background-color: white;
   border-radius: 3px;
   display: -webkit-inline-box;
@@ -373,13 +317,13 @@ h6.c6 {
   border: 1px solid #e6e6e6;
 }
 
-.c13 {
+.c12 {
   padding: 1.25rem;
   max-height: 50vh;
   overflow-y: scroll;
 }
 
-.c4 {
+.c3 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -397,103 +341,99 @@ h6.c6 {
   width: 100%;
 }
 
-.c5 {
+.c4 {
   margin-bottom: 0px;
 }
 
-.c7 {
+.c6 {
   height: 2em;
   width: 2em;
   padding: 0px;
 }
 
-.c7:hover {
+.c6:hover {
   background-color: #f2f2f2;
 }
 
-.c2 {
+.c0 {
   border-radius: 5px;
 }
 
 @media (max-width:480px) {
-  h1.c6 {
+  h1.c5 {
     font-size: 2rem;
   }
 }
 
 @media (max-width:480px) {
-  h2.c6 {
+  h2.c5 {
     font-size: 1.8rem;
   }
 }
 
 @media (max-width:480px) {
-  h3.c6 {
+  h3.c5 {
     font-size: 1.6rem;
   }
 }
 
 @media (max-width:480px) {
-  h4.c6 {
+  h4.c5 {
     font-size: 1.4rem;
   }
 }
 
 @media (max-width:480px) {
-  h5.c6 {
+  h5.c5 {
     font-size: 1.2rem;
   }
 }
 
 <div
-  class="c0 c1"
+  class="c0 c1 c2"
+  role="dialog"
 >
   <div
-    class="c2 c3 c1"
-    role="dialog"
+    class="c3 c2"
   >
-    <div
-      class="c4 c1"
+    <h5
+      class="c4 sub-heading c5 c2"
     >
-      <h5
-        class="c5 sub-heading c6 c1"
-      >
-        This is a title
-      </h5>
-      <button
-        class="c7 c8 c9"
-        kind="link"
-        style="size: default;"
+      This is a title
+    </h5>
+    <button
+      class="c6 c7 c8"
+      kind="link"
+      style="size: default;"
+    >
+      <span
+        class="c9"
       >
-        <span
-          class="c10"
+        <svg
+          class="c10 c11 c2"
+          role="img"
+          size="1"
+          style="size: 1px;"
+          viewBox="0 0 16 16"
         >
-          <svg
-            class="c11 c12 c1"
-            role="img"
-            size="1"
-            style="size: 1px;"
-            viewBox="0 0 16 16"
-          >
-            <path
-              d="M9.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 0 0-1.71-.71L8 6.59l-3.29-3.3a1.003 1.003 0 0 0-1.42 1.42L6.59 8 3.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 0 0 1.71.71L8 9.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 0 0 .71-1.71L9.41 8z"
-              fill-rule="even-odd"
-            />
-          </svg>
-        </span>
-      </button>
-    </div>
-    <div
-      class="c13 c1"
-    >
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum, cursus id placerat congue, ultrices eget lectus. Duis posuere, lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum consectetur lectus augue sit amet justo.
-    </div>
+          <path
+            d="M9.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 0 0-1.71-.71L8 6.59l-3.29-3.3a1.003 1.003 0 0 0-1.42 1.42L6.59 8 3.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 0 0 1.71.71L8 9.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 0 0 .71-1.71L9.41 8z"
+            fill-rule="even-odd"
+          />
+        </svg>
+      </span>
+    </button>
+  </div>
+  <div
+    class="c12 c2"
+  >
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum, cursus id placerat congue, ultrices eget lectus. Duis posuere, lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum consectetur lectus augue sit amet justo.
   </div>
 </div>
 `;
 
 exports[`renders correctly for a dialog with a footer 1`] = `
-.c1 {
+.c2 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -506,79 +446,53 @@ exports[`renders correctly for a dialog with a footer 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c7 {
+.c6 {
   font-weight: 700;
   line-height: 1.2;
   margin-bottom: 1rem;
 }
 
-.heading.c7 + .sub-heading {
+.heading.c6 + .sub-heading {
   margin-top: -1rem;
 }
 
-.c7:last-child {
+.c6:last-child {
   margin-bottom: 0;
 }
 
-h1.c7 {
+h1.c6 {
   font-size: 3rem;
 }
 
-h2.c7 {
+h2.c6 {
   font-size: 2.5rem;
 }
 
-h3.c7 {
+h3.c6 {
   font-size: 2rem;
 }
 
-h4.c7 {
+h4.c6 {
   font-size: 1.5rem;
 }
 
-h5.c7 {
+h5.c6 {
   font-size: 1.25rem;
 }
 
-h6.c7 {
+h6.c6 {
   font-size: 1rem;
 }
 
-.c7 .c9 {
+.c6 .c8 {
   top: 0.1em;
 }
 
-.c7 {
+.c6 {
   font-weight: 600;
 }
 
-.c3 {
+.c1 {
   background-color: white;
   border-radius: 3px;
   display: -webkit-inline-box;
@@ -591,13 +505,13 @@ h6.c7 {
   border: 1px solid #e6e6e6;
 }
 
-.c4 {
+.c3 {
   padding: 1.25rem;
   max-height: 50vh;
   overflow-y: scroll;
 }
 
-.c5 {
+.c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -615,79 +529,75 @@ h6.c7 {
   width: 100%;
 }
 
-.c8 {
+.c7 {
   border-top: 1px solid #e6e6e6;
   padding: 1rem 1rem;
   width: 100%;
 }
 
-.c6 {
+.c5 {
   margin-bottom: 0px;
 }
 
-.c2 {
+.c0 {
   border-radius: 5px;
 }
 
 @media (max-width:480px) {
-  h1.c7 {
+  h1.c6 {
     font-size: 2rem;
   }
 }
 
 @media (max-width:480px) {
-  h2.c7 {
+  h2.c6 {
     font-size: 1.8rem;
   }
 }
 
 @media (max-width:480px) {
-  h3.c7 {
+  h3.c6 {
     font-size: 1.6rem;
   }
 }
 
 @media (max-width:480px) {
-  h4.c7 {
+  h4.c6 {
     font-size: 1.4rem;
   }
 }
 
 @media (max-width:480px) {
-  h5.c7 {
+  h5.c6 {
     font-size: 1.2rem;
   }
 }
 
 <div
-  class="c0 c1"
+  class="c0 c1 c2"
+  role="dialog"
 >
   <div
-    class="c2 c3 c1"
-    role="dialog"
+    class="c3 c2"
   >
     <div
-      class="c4 c1"
+      class="c4 c2"
     >
-      <div
-        class="c5 c1"
-      >
-        <h5
-          class="c6 sub-heading c7 c1"
-        >
-          This is a title
-        </h5>
-      </div>
-      <div
-        class="c4 c1"
-      >
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum, cursus id placerat congue, ultrices eget lectus. Duis posuere, lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum consectetur lectus augue sit amet justo.
-      </div>
-      <div
-        class="c8 c1"
+      <h5
+        class="c5 sub-heading c6 c2"
       >
-        test
-      </div>
+        This is a title
+      </h5>
+    </div>
+    <div
+      class="c3 c2"
+    >
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum, cursus id placerat congue, ultrices eget lectus. Duis posuere, lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum consectetur lectus augue sit amet justo.
+    </div>
+    <div
+      class="c7 c2"
+    >
+      test
     </div>
   </div>
 </div>
diff --git a/src/Divider/__tests__/__snapshots__/Divider.test.js.snap b/src/Divider/__tests__/__snapshots__/Divider.test.js.snap
index ab0a43fa8..032b80157 100644
--- a/src/Divider/__tests__/__snapshots__/Divider.test.js.snap
+++ b/src/Divider/__tests__/__snapshots__/Divider.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly for a basic divider 1`] = `
-.c1 {
+.c2 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -14,33 +14,7 @@ exports[`renders correctly for a basic divider 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
+.c1 {
   border-color: currentColor;
   border-style: solid;
   opacity: 0.2;
@@ -49,22 +23,18 @@ exports[`renders correctly for a basic divider 1`] = `
   border-width: 1px 0 0 0;
 }
 
-.c2 {
+.c0 {
   opacity: 1;
   border-color: #e7e9ed;
 }
 
-<div
-  class="c0 c1"
->
-  <hr
-    class="c2 c3 c1"
-  />
-</div>
+<hr
+  class="c0 c1 c2"
+/>
 `;
 
 exports[`renders correctly for a horizontal divider with content 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -77,33 +47,7 @@ exports[`renders correctly for a horizontal divider with content 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
+.c2 {
   border-color: currentColor;
   border-style: solid;
   opacity: 0.2;
@@ -112,12 +56,12 @@ exports[`renders correctly for a horizontal divider with content 1`] = `
   border-width: 1px 0 0 0;
 }
 
-.c2 {
+.c1 {
   opacity: 1;
   border-color: #e7e9ed;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -132,7 +76,7 @@ exports[`renders correctly for a horizontal divider with content 1`] = `
   justify-content: center;
 }
 
-.c2::before {
+.c1::before {
   background: white;
   color: #c3c3c3;
   content: 'Test';
@@ -143,19 +87,15 @@ exports[`renders correctly for a horizontal divider with content 1`] = `
 }
 
 <div
-  class="c0 c1"
+  class="c0"
 >
-  <div
-    class="c1"
-  >
-    Hello
-    <hr
-      class="c2 c3 c1"
-      content="Test"
-      style="content: Test;"
-    />
-    World
-  </div>
+  Hello
+  <hr
+    class="c1 c2 c0"
+    content="Test"
+    style="content: Test;"
+  />
+  World
 </div>
 `;
 
@@ -173,33 +113,7 @@ exports[`renders correctly for a vertical divider 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c4 {
+.c3 {
   border-color: currentColor;
   border-style: solid;
   opacity: 0.2;
@@ -209,16 +123,16 @@ exports[`renders correctly for a vertical divider 1`] = `
   border-width: 0 0 0 1px;
 }
 
-.c3 {
+.c2 {
   opacity: 1;
   border-color: #e7e9ed;
 }
 
-.c3 {
+.c2 {
   height: auto;
 }
 
-.c2 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -228,15 +142,11 @@ exports[`renders correctly for a vertical divider 1`] = `
 <div
   class="c0 c1"
 >
-  <div
-    class="c2 c1"
-  >
-    Hello
-    <hr
-      class="c3 c4 c1"
-    />
-    World
-  </div>
+  Hello
+  <hr
+    class="c2 c3 c1"
+  />
+  World
 </div>
 `;
 
@@ -254,33 +164,7 @@ exports[`renders correctly for a vertical divider with content 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c4 {
+.c3 {
   border-color: currentColor;
   border-style: solid;
   opacity: 0.2;
@@ -290,12 +174,12 @@ exports[`renders correctly for a vertical divider with content 1`] = `
   border-width: 0 0 0 1px;
 }
 
-.c3 {
+.c2 {
   opacity: 1;
   border-color: #e7e9ed;
 }
 
-.c3 {
+.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -311,7 +195,7 @@ exports[`renders correctly for a vertical divider with content 1`] = `
   height: auto;
 }
 
-.c3::before {
+.c2::before {
   background: white;
   color: #c3c3c3;
   content: 'or';
@@ -321,7 +205,7 @@ exports[`renders correctly for a vertical divider with content 1`] = `
   padding: 0.2rem 0.5rem;
 }
 
-.c2 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -330,19 +214,15 @@ exports[`renders correctly for a vertical divider with content 1`] = `
 
 <div
   class="c0 c1"
+  height="50px"
+  style="align-items: center; height: 50px;"
 >
-  <div
-    class="c2 c1"
-    height="50px"
-    style="align-items: center; height: 50px;"
-  >
-    Hello
-    <hr
-      class="c3 c4 c1"
-      content="or"
-      style="content: or;"
-    />
-    World
-  </div>
+  Hello
+  <hr
+    class="c2 c3 c1"
+    content="or"
+    style="content: or;"
+  />
+  World
 </div>
 `;
diff --git a/src/FieldWrapper/__tests__/__snapshots__/FieldWrapper.test.js.snap b/src/FieldWrapper/__tests__/__snapshots__/FieldWrapper.test.js.snap
index a0cf6c4e0..b3a905012 100644
--- a/src/FieldWrapper/__tests__/__snapshots__/FieldWrapper.test.js.snap
+++ b/src/FieldWrapper/__tests__/__snapshots__/FieldWrapper.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly for a basic field 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -14,7 +14,7 @@ exports[`renders correctly for a basic field 1`] = `
   color: inherit;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -28,7 +28,7 @@ exports[`renders correctly for a basic field 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c9 {
+.c8 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -42,52 +42,26 @@ exports[`renders correctly for a basic field 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   display: block;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c3 {
+.c2 {
   margin-bottom: 0 !important;
 }
 
-.c7 {
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -103,7 +77,7 @@ exports[`renders correctly for a basic field 1`] = `
   position: relative;
 }
 
-.c8 {
+.c7 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -112,78 +86,74 @@ exports[`renders correctly for a basic field 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c8[disabled] {
+.c7[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c8:focus {
+.c7:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c8::-webkit-input-placeholder {
+.c7::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c8::-moz-placeholder {
+.c7::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c8:-ms-input-placeholder {
+.c7:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c8::placeholder {
+.c7::placeholder {
   opacity: 0.6;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="align-items: center;"
   >
-    <div
-      class="c2 c1"
-      style="align-items: center;"
+    <label
+      class="c2 c3 c4 c5"
+      font-weight="600"
+      for="username"
+      style="font-weight: 600;"
     >
-      <label
-        class="c3 c4 c5 c6"
-        font-weight="600"
-        for="username"
-        style="font-weight: 600;"
-      >
-        Username
-      </label>
-    </div>
-    <div />
-    <div
-      class="c7 c1"
+      Username
+    </label>
+  </div>
+  <div />
+  <div
+    class="c6 c0"
+    style="size: default;"
+  >
+    <input
+      aria-invalid="false"
+      aria-required="false"
+      class="c7 c8"
+      id="username"
       style="size: default;"
-    >
-      <input
-        aria-invalid="false"
-        aria-required="false"
-        class="c8 c9"
-        id="username"
-        style="size: default;"
-        type="text"
-        value=""
-      />
-    </div>
-    <div />
+      type="text"
+      value=""
+    />
   </div>
+  <div />
 </div>
 `;
 
 exports[`renders correctly for a field with a description 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -196,7 +166,7 @@ exports[`renders correctly for a field with a description 1`] = `
   color: inherit;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -210,7 +180,7 @@ exports[`renders correctly for a field with a description 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c11 {
+.c10 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -224,59 +194,33 @@ exports[`renders correctly for a field with a description 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   display: block;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-abbr.c8 {
+abbr.c7 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c8 {
+i.c7 {
   font-style: italic;
 }
 
-kbd.c8 {
+kbd.c7 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -284,55 +228,55 @@ kbd.c8 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c8 {
+mark.c7 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c8 {
+strong.c7 {
   font-weight: bold;
 }
 
-sub.c8,
-sup.c8 {
+sub.c7,
+sup.c7 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c8,
-u.c8 {
+ins.c7,
+u.c7 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c8,
-cite.c8,
-var.c8,
-em.c8 {
+i.c7,
+cite.c7,
+var.c7,
+em.c7 {
   font-style: italic;
 }
 
-kbd.c8,
-pre.c8,
-samp.c8 {
+kbd.c7,
+pre.c7,
+samp.c7 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c8 .c12 {
+.c7 .c11 {
   top: 0.1em;
 }
 
-.c3 {
+.c2 {
   margin-bottom: 0 !important;
 }
 
-.c7 {
+.c6 {
   display: block;
   font-size: 0.8rem;
 }
 
-.c9 {
+.c8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -348,7 +292,7 @@ samp.c8 {
   position: relative;
 }
 
-.c10 {
+.c9 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -357,82 +301,78 @@ samp.c8 {
   padding: 0.4em 0.6em;
 }
 
-.c10[disabled] {
+.c9[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c10:focus {
+.c9:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c10::-webkit-input-placeholder {
+.c9::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c10::-moz-placeholder {
+.c9::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c10:-ms-input-placeholder {
+.c9:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c10::placeholder {
+.c9::placeholder {
   opacity: 0.6;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="align-items: center;"
   >
-    <div
-      class="c2 c1"
-      style="align-items: center;"
+    <label
+      class="c2 c3 c4 c5"
+      font-weight="600"
+      for="username"
+      style="font-weight: 600;"
     >
-      <label
-        class="c3 c4 c5 c6"
-        font-weight="600"
-        for="username"
-        style="font-weight: 600;"
-      >
-        Username
-      </label>
-    </div>
-    <span
-      class="c7 c8 c1"
-    >
-      Required for your fannypack
-    </span>
-    <div
-      class="c9 c1"
+      Username
+    </label>
+  </div>
+  <span
+    class="c6 c7 c0"
+  >
+    Required for your fannypack
+  </span>
+  <div
+    class="c8 c0"
+    style="size: default;"
+  >
+    <input
+      aria-invalid="false"
+      aria-required="false"
+      class="c9 c10"
+      id="username"
       style="size: default;"
-    >
-      <input
-        aria-invalid="false"
-        aria-required="false"
-        class="c10 c11"
-        id="username"
-        style="size: default;"
-        type="text"
-        value=""
-      />
-    </div>
-    <div />
+      type="text"
+      value=""
+    />
   </div>
+  <div />
 </div>
 `;
 
 exports[`renders correctly for a field with a hint 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -445,7 +385,7 @@ exports[`renders correctly for a field with a hint 1`] = `
   color: inherit;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -459,7 +399,7 @@ exports[`renders correctly for a field with a hint 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c9 {
+.c8 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -473,59 +413,33 @@ exports[`renders correctly for a field with a hint 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   display: block;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-abbr.c11 {
+abbr.c10 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c11 {
+i.c10 {
   font-style: italic;
 }
 
-kbd.c11 {
+kbd.c10 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -533,56 +447,56 @@ kbd.c11 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c11 {
+mark.c10 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c11 {
+strong.c10 {
   font-weight: bold;
 }
 
-sub.c11,
-sup.c11 {
+sub.c10,
+sup.c10 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c11,
-u.c11 {
+ins.c10,
+u.c10 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c11,
-cite.c11,
-var.c11,
-em.c11 {
+i.c10,
+cite.c10,
+var.c10,
+em.c10 {
   font-style: italic;
 }
 
-kbd.c11,
-pre.c11,
-samp.c11 {
+kbd.c10,
+pre.c10,
+samp.c10 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c11 .c12 {
+.c10 .c11 {
   top: 0.1em;
 }
 
-.c3 {
+.c2 {
   margin-bottom: 0 !important;
 }
 
-.c10 {
+.c9 {
   display: block;
   font-size: 0.8rem;
   margin-top: 0.25rem;
 }
 
-.c7 {
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -598,7 +512,7 @@ samp.c11 {
   position: relative;
 }
 
-.c8 {
+.c7 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -607,77 +521,73 @@ samp.c11 {
   padding: 0.4em 0.6em;
 }
 
-.c8[disabled] {
+.c7[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c8:focus {
+.c7:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c8::-webkit-input-placeholder {
+.c7::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c8::-moz-placeholder {
+.c7::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c8:-ms-input-placeholder {
+.c7:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c8::placeholder {
+.c7::placeholder {
   opacity: 0.6;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="align-items: center;"
   >
-    <div
-      class="c2 c1"
-      style="align-items: center;"
+    <label
+      class="c2 c3 c4 c5"
+      font-weight="600"
+      for="username"
+      style="font-weight: 600;"
     >
-      <label
-        class="c3 c4 c5 c6"
-        font-weight="600"
-        for="username"
-        style="font-weight: 600;"
-      >
-        Username
-      </label>
-    </div>
-    <div />
-    <div
-      class="c7 c1"
+      Username
+    </label>
+  </div>
+  <div />
+  <div
+    class="c6 c0"
+    style="size: default;"
+  >
+    <input
+      aria-invalid="false"
+      aria-required="false"
+      class="c7 c8"
+      id="username"
       style="size: default;"
-    >
-      <input
-        aria-invalid="false"
-        aria-required="false"
-        class="c8 c9"
-        id="username"
-        style="size: default;"
-        type="text"
-        value=""
-      />
-    </div>
-    <span
-      class="c10 c11 c1"
-    >
-      Must be awesome
-    </span>
+      type="text"
+      value=""
+    />
   </div>
+  <span
+    class="c9 c10 c0"
+  >
+    Must be awesome
+  </span>
 </div>
 `;
 
@@ -695,7 +605,7 @@ exports[`renders correctly for a full width field 1`] = `
   color: inherit;
 }
 
-.c7 {
+.c6 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -709,7 +619,7 @@ exports[`renders correctly for a full width field 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c10 {
+.c9 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -723,56 +633,30 @@ exports[`renders correctly for a full width field 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c6 {
+.c5 {
   display: inline-block;
 }
 
-.c5 {
+.c4 {
   display: block;
 }
 
-.c3 {
+.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c4 {
+.c3 {
   margin-bottom: 0 !important;
 }
 
-.c2 {
+.c0 {
   width: 100%;
 }
 
-.c8 {
+.c7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -789,7 +673,7 @@ exports[`renders correctly for a full width field 1`] = `
   width: 100%;
 }
 
-.c9 {
+.c8 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -798,82 +682,78 @@ exports[`renders correctly for a full width field 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c9[disabled] {
+.c8[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c9:focus {
+.c8:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c9::-webkit-input-placeholder {
+.c8::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c9::-moz-placeholder {
+.c8::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c9:-ms-input-placeholder {
+.c8:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c9::placeholder {
+.c8::placeholder {
   opacity: 0.6;
 }
 
-.c9 {
+.c8 {
   width: 100%;
 }
 
 <div
   class="c0 c1"
+  display="inline-block"
+  style="display: inline-block;"
 >
   <div
     class="c2 c1"
-    display="inline-block"
-    style="display: inline-block;"
+    style="align-items: center;"
   >
-    <div
-      class="c3 c1"
-      style="align-items: center;"
+    <label
+      class="c3 c4 c5 c6"
+      font-weight="600"
+      for="username"
+      style="font-weight: 600;"
     >
-      <label
-        class="c4 c5 c6 c7"
-        font-weight="600"
-        for="username"
-        style="font-weight: 600;"
-      >
-        Username
-      </label>
-    </div>
-    <div />
-    <div
-      class="c8 c1"
+      Username
+    </label>
+  </div>
+  <div />
+  <div
+    class="c7 c1"
+    style="size: default;"
+  >
+    <input
+      aria-invalid="false"
+      aria-required="false"
+      class="c8 c9"
+      id="username"
       style="size: default;"
-    >
-      <input
-        aria-invalid="false"
-        aria-required="false"
-        class="c9 c10"
-        id="username"
-        style="size: default;"
-        type="text"
-        value=""
-      />
-    </div>
-    <div />
+      type="text"
+      value=""
+    />
   </div>
+  <div />
 </div>
 `;
 
 exports[`renders correctly for a required field 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -886,7 +766,7 @@ exports[`renders correctly for a required field 1`] = `
   color: inherit;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -900,7 +780,7 @@ exports[`renders correctly for a required field 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c9 {
+.c8 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -914,52 +794,26 @@ exports[`renders correctly for a required field 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   display: block;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c3 {
+.c2 {
   margin-bottom: 0 !important;
 }
 
-.c7 {
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -975,7 +829,7 @@ exports[`renders correctly for a required field 1`] = `
   position: relative;
 }
 
-.c8 {
+.c7 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -984,78 +838,74 @@ exports[`renders correctly for a required field 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c8[disabled] {
+.c7[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c8:focus {
+.c7:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c8::-webkit-input-placeholder {
+.c7::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c8::-moz-placeholder {
+.c7::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c8:-ms-input-placeholder {
+.c7:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c8::placeholder {
+.c7::placeholder {
   opacity: 0.6;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="align-items: center;"
   >
-    <div
-      class="c2 c1"
-      style="align-items: center;"
+    <label
+      class="c2 c3 c4 c5"
+      font-weight="600"
+      for="username"
+      style="font-weight: 600;"
     >
-      <label
-        class="c3 c4 c5 c6"
-        font-weight="600"
-        for="username"
-        style="font-weight: 600;"
-      >
-        Username
-      </label>
-    </div>
-    <div />
-    <div
-      class="c7 c1"
+      Username
+    </label>
+  </div>
+  <div />
+  <div
+    class="c6 c0"
+    style="size: default;"
+  >
+    <input
+      aria-invalid="false"
+      aria-required="true"
+      class="c7 c8"
+      id="username"
       style="size: default;"
-    >
-      <input
-        aria-invalid="false"
-        aria-required="true"
-        class="c8 c9"
-        id="username"
-        style="size: default;"
-        type="text"
-        value=""
-      />
-    </div>
-    <div />
+      type="text"
+      value=""
+    />
   </div>
+  <div />
 </div>
 `;
 
 exports[`renders correctly for an optional field 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1068,7 +918,7 @@ exports[`renders correctly for an optional field 1`] = `
   color: inherit;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1082,7 +932,7 @@ exports[`renders correctly for an optional field 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c11 {
+.c10 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1096,59 +946,33 @@ exports[`renders correctly for an optional field 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   display: block;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-abbr.c8 {
+abbr.c7 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c8 {
+i.c7 {
   font-style: italic;
 }
 
-kbd.c8 {
+kbd.c7 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -1156,56 +980,56 @@ kbd.c8 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c8 {
+mark.c7 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c8 {
+strong.c7 {
   font-weight: bold;
 }
 
-sub.c8,
-sup.c8 {
+sub.c7,
+sup.c7 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c8,
-u.c8 {
+ins.c7,
+u.c7 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c8,
-cite.c8,
-var.c8,
-em.c8 {
+i.c7,
+cite.c7,
+var.c7,
+em.c7 {
   font-style: italic;
 }
 
-kbd.c8,
-pre.c8,
-samp.c8 {
+kbd.c7,
+pre.c7,
+samp.c7 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c8 .c12 {
+.c7 .c11 {
   top: 0.1em;
 }
 
-.c3 {
+.c2 {
   margin-bottom: 0 !important;
 }
 
-.c7 {
+.c6 {
   font-size: 0.8rem;
   color: #708da8;
   margin-left: 0.5rem;
 }
 
-.c9 {
+.c8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1221,7 +1045,7 @@ samp.c8 {
   position: relative;
 }
 
-.c10 {
+.c9 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -1230,83 +1054,79 @@ samp.c8 {
   padding: 0.4em 0.6em;
 }
 
-.c10[disabled] {
+.c9[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c10:focus {
+.c9:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c10::-webkit-input-placeholder {
+.c9::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c10::-moz-placeholder {
+.c9::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c10:-ms-input-placeholder {
+.c9:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c10::placeholder {
+.c9::placeholder {
   opacity: 0.6;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="align-items: center;"
   >
-    <div
-      class="c2 c1"
-      style="align-items: center;"
+    <label
+      class="c2 c3 c4 c5"
+      font-weight="600"
+      for="username"
+      style="font-weight: 600;"
     >
-      <label
-        class="c3 c4 c5 c6"
-        font-weight="600"
-        for="username"
-        style="font-weight: 600;"
-      >
-        Username
-      </label>
-      <span
-        class="c7 c8 c1"
-      >
-        OPTIONAL
-      </span>
-    </div>
-    <div />
-    <div
-      class="c9 c1"
-      style="size: default;"
+      Username
+    </label>
+    <span
+      class="c6 c7 c0"
     >
-      <input
-        aria-invalid="false"
-        aria-required="false"
-        class="c10 c11"
-        id="username"
-        style="size: default;"
-        type="text"
-        value=""
-      />
-    </div>
-    <div />
+      OPTIONAL
+    </span>
   </div>
+  <div />
+  <div
+    class="c8 c0"
+    style="size: default;"
+  >
+    <input
+      aria-invalid="false"
+      aria-required="false"
+      class="c9 c10"
+      id="username"
+      style="size: default;"
+      type="text"
+      value=""
+    />
+  </div>
+  <div />
 </div>
 `;
 
 exports[`states renders correctly for an input with state danger 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1319,7 +1139,7 @@ exports[`states renders correctly for an input with state danger 1`] = `
   color: inherit;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1333,7 +1153,7 @@ exports[`states renders correctly for an input with state danger 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c9 {
+.c8 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1347,7 +1167,7 @@ exports[`states renders correctly for an input with state danger 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c12 {
+.c11 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1361,59 +1181,33 @@ exports[`states renders correctly for an input with state danger 1`] = `
   color: #d60027 !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   display: block;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-abbr.c11 {
+abbr.c10 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c11 {
+i.c10 {
   font-style: italic;
 }
 
-kbd.c11 {
+kbd.c10 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -1421,56 +1215,56 @@ kbd.c11 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c11 {
+mark.c10 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c11 {
+strong.c10 {
   font-weight: bold;
 }
 
-sub.c11,
-sup.c11 {
+sub.c10,
+sup.c10 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c11,
-u.c11 {
+ins.c10,
+u.c10 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c11,
-cite.c11,
-var.c11,
-em.c11 {
+i.c10,
+cite.c10,
+var.c10,
+em.c10 {
   font-style: italic;
 }
 
-kbd.c11,
-pre.c11,
-samp.c11 {
+kbd.c10,
+pre.c10,
+samp.c10 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c11 .c13 {
+.c10 .c12 {
   top: 0.1em;
 }
 
-.c3 {
+.c2 {
   margin-bottom: 0 !important;
 }
 
-.c10 {
+.c9 {
   display: block;
   font-size: 0.8rem;
   margin-top: 0.25rem;
 }
 
-.c7 {
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1486,7 +1280,7 @@ samp.c11 {
   position: relative;
 }
 
-.c8 {
+.c7 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -1495,89 +1289,85 @@ samp.c11 {
   padding: 0.4em 0.6em;
 }
 
-.c8[disabled] {
+.c7[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c8:focus {
+.c7:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c8::-webkit-input-placeholder {
+.c7::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c8::-moz-placeholder {
+.c7::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c8:-ms-input-placeholder {
+.c7:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c8::placeholder {
+.c7::placeholder {
   opacity: 0.6;
 }
 
-.c8 {
+.c7 {
   border-color: #e24c67;
   box-shadow: #e24c67 0px 0px 0px 1px !important;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="align-items: center;"
   >
-    <div
-      class="c2 c1"
-      style="align-items: center;"
+    <label
+      class="c2 c3 c4 c5"
+      font-weight="600"
+      for="username"
+      style="font-weight: 600;"
     >
-      <label
-        class="c3 c4 c5 c6"
-        font-weight="600"
-        for="username"
-        style="font-weight: 600;"
-      >
-        Username
-      </label>
-    </div>
-    <div />
-    <div
-      class="c7 c1"
+      Username
+    </label>
+  </div>
+  <div />
+  <div
+    class="c6 c0"
+    style="size: default;"
+  >
+    <input
+      aria-invalid="true"
+      aria-required="false"
+      class="c7 c8"
+      id="username"
       style="size: default;"
-    >
-      <input
-        aria-invalid="true"
-        aria-required="false"
-        class="c8 c9"
-        id="username"
-        style="size: default;"
-        type="text"
-        value="Jake"
-      />
-    </div>
-    <div />
-    <span
-      class="c10 c11 c12"
-      color="danger"
-    >
-      This is an invalid name
-    </span>
+      type="text"
+      value="Jake"
+    />
   </div>
+  <div />
+  <span
+    class="c9 c10 c11"
+    color="danger"
+  >
+    This is an invalid name
+  </span>
 </div>
 `;
 
 exports[`states renders correctly for an input with state primary 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1590,7 +1380,7 @@ exports[`states renders correctly for an input with state primary 1`] = `
   color: inherit;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1604,7 +1394,7 @@ exports[`states renders correctly for an input with state primary 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c9 {
+.c8 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1618,7 +1408,7 @@ exports[`states renders correctly for an input with state primary 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c12 {
+.c11 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1632,59 +1422,33 @@ exports[`states renders correctly for an input with state primary 1`] = `
   color: #3926a5 !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   display: block;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-abbr.c11 {
+abbr.c10 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c11 {
+i.c10 {
   font-style: italic;
 }
 
-kbd.c11 {
+kbd.c10 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -1692,56 +1456,56 @@ kbd.c11 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c11 {
+mark.c10 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c11 {
+strong.c10 {
   font-weight: bold;
 }
 
-sub.c11,
-sup.c11 {
+sub.c10,
+sup.c10 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c11,
-u.c11 {
+ins.c10,
+u.c10 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c11,
-cite.c11,
-var.c11,
-em.c11 {
+i.c10,
+cite.c10,
+var.c10,
+em.c10 {
   font-style: italic;
 }
 
-kbd.c11,
-pre.c11,
-samp.c11 {
+kbd.c10,
+pre.c10,
+samp.c10 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c11 .c13 {
+.c10 .c12 {
   top: 0.1em;
 }
 
-.c3 {
+.c2 {
   margin-bottom: 0 !important;
 }
 
-.c10 {
+.c9 {
   display: block;
   font-size: 0.8rem;
   margin-top: 0.25rem;
 }
 
-.c7 {
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1757,7 +1521,7 @@ samp.c11 {
   position: relative;
 }
 
-.c8 {
+.c7 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -1766,89 +1530,85 @@ samp.c11 {
   padding: 0.4em 0.6em;
 }
 
-.c8[disabled] {
+.c7[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c8:focus {
+.c7:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c8::-webkit-input-placeholder {
+.c7::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c8::-moz-placeholder {
+.c7::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c8:-ms-input-placeholder {
+.c7:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c8::placeholder {
+.c7::placeholder {
   opacity: 0.6;
 }
 
-.c8 {
+.c7 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="align-items: center;"
   >
-    <div
-      class="c2 c1"
-      style="align-items: center;"
+    <label
+      class="c2 c3 c4 c5"
+      font-weight="600"
+      for="username"
+      style="font-weight: 600;"
     >
-      <label
-        class="c3 c4 c5 c6"
-        font-weight="600"
-        for="username"
-        style="font-weight: 600;"
-      >
-        Username
-      </label>
-    </div>
-    <div />
-    <div
-      class="c7 c1"
+      Username
+    </label>
+  </div>
+  <div />
+  <div
+    class="c6 c0"
+    style="size: default;"
+  >
+    <input
+      aria-invalid="false"
+      aria-required="false"
+      class="c7 c8"
+      id="username"
       style="size: default;"
-    >
-      <input
-        aria-invalid="false"
-        aria-required="false"
-        class="c8 c9"
-        id="username"
-        style="size: default;"
-        type="text"
-        value="Jake"
-      />
-    </div>
-    <div />
-    <span
-      class="c10 c11 c12"
-      color="primary"
-    >
-      This is an invalid name
-    </span>
+      type="text"
+      value="Jake"
+    />
   </div>
+  <div />
+  <span
+    class="c9 c10 c11"
+    color="primary"
+  >
+    This is an invalid name
+  </span>
 </div>
 `;
 
 exports[`states renders correctly for an input with state success 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1861,7 +1621,7 @@ exports[`states renders correctly for an input with state success 1`] = `
   color: inherit;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1875,7 +1635,7 @@ exports[`states renders correctly for an input with state success 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c9 {
+.c8 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1889,7 +1649,7 @@ exports[`states renders correctly for an input with state success 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c12 {
+.c11 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1903,59 +1663,33 @@ exports[`states renders correctly for an input with state success 1`] = `
   color: #007b2e !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   display: block;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-abbr.c11 {
+abbr.c10 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c11 {
+i.c10 {
   font-style: italic;
 }
 
-kbd.c11 {
+kbd.c10 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -1963,56 +1697,56 @@ kbd.c11 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c11 {
+mark.c10 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c11 {
+strong.c10 {
   font-weight: bold;
 }
 
-sub.c11,
-sup.c11 {
+sub.c10,
+sup.c10 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c11,
-u.c11 {
+ins.c10,
+u.c10 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c11,
-cite.c11,
-var.c11,
-em.c11 {
+i.c10,
+cite.c10,
+var.c10,
+em.c10 {
   font-style: italic;
 }
 
-kbd.c11,
-pre.c11,
-samp.c11 {
+kbd.c10,
+pre.c10,
+samp.c10 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c11 .c13 {
+.c10 .c12 {
   top: 0.1em;
 }
 
-.c3 {
+.c2 {
   margin-bottom: 0 !important;
 }
 
-.c10 {
+.c9 {
   display: block;
   font-size: 0.8rem;
   margin-top: 0.25rem;
 }
 
-.c7 {
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2028,7 +1762,7 @@ samp.c11 {
   position: relative;
 }
 
-.c8 {
+.c7 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -2037,89 +1771,85 @@ samp.c11 {
   padding: 0.4em 0.6em;
 }
 
-.c8[disabled] {
+.c7[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c8:focus {
+.c7:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c8::-webkit-input-placeholder {
+.c7::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c8::-moz-placeholder {
+.c7::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c8:-ms-input-placeholder {
+.c7:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c8::placeholder {
+.c7::placeholder {
   opacity: 0.6;
 }
 
-.c8 {
+.c7 {
   border-color: #4ca26c;
   box-shadow: #4ca26c 0px 0px 0px 1px !important;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="align-items: center;"
   >
-    <div
-      class="c2 c1"
-      style="align-items: center;"
+    <label
+      class="c2 c3 c4 c5"
+      font-weight="600"
+      for="username"
+      style="font-weight: 600;"
     >
-      <label
-        class="c3 c4 c5 c6"
-        font-weight="600"
-        for="username"
-        style="font-weight: 600;"
-      >
-        Username
-      </label>
-    </div>
-    <div />
-    <div
-      class="c7 c1"
+      Username
+    </label>
+  </div>
+  <div />
+  <div
+    class="c6 c0"
+    style="size: default;"
+  >
+    <input
+      aria-invalid="false"
+      aria-required="false"
+      class="c7 c8"
+      id="username"
       style="size: default;"
-    >
-      <input
-        aria-invalid="false"
-        aria-required="false"
-        class="c8 c9"
-        id="username"
-        style="size: default;"
-        type="text"
-        value="Jake"
-      />
-    </div>
-    <div />
-    <span
-      class="c10 c11 c12"
-      color="success"
-    >
-      This is an invalid name
-    </span>
+      type="text"
+      value="Jake"
+    />
   </div>
+  <div />
+  <span
+    class="c9 c10 c11"
+    color="success"
+  >
+    This is an invalid name
+  </span>
 </div>
 `;
 
 exports[`states renders correctly for an input with state warning 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2132,7 +1862,7 @@ exports[`states renders correctly for an input with state warning 1`] = `
   color: inherit;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2146,7 +1876,7 @@ exports[`states renders correctly for an input with state warning 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c9 {
+.c8 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2160,7 +1890,7 @@ exports[`states renders correctly for an input with state warning 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c12 {
+.c11 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2174,59 +1904,33 @@ exports[`states renders correctly for an input with state warning 1`] = `
   color: #ffb300 !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   display: block;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-abbr.c11 {
+abbr.c10 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c11 {
+i.c10 {
   font-style: italic;
 }
 
-kbd.c11 {
+kbd.c10 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -2234,56 +1938,56 @@ kbd.c11 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c11 {
+mark.c10 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c11 {
+strong.c10 {
   font-weight: bold;
 }
 
-sub.c11,
-sup.c11 {
+sub.c10,
+sup.c10 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c11,
-u.c11 {
+ins.c10,
+u.c10 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c11,
-cite.c11,
-var.c11,
-em.c11 {
+i.c10,
+cite.c10,
+var.c10,
+em.c10 {
   font-style: italic;
 }
 
-kbd.c11,
-pre.c11,
-samp.c11 {
+kbd.c10,
+pre.c10,
+samp.c10 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c11 .c13 {
+.c10 .c12 {
   top: 0.1em;
 }
 
-.c3 {
+.c2 {
   margin-bottom: 0 !important;
 }
 
-.c10 {
+.c9 {
   display: block;
   font-size: 0.8rem;
   margin-top: 0.25rem;
 }
 
-.c7 {
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2299,7 +2003,7 @@ samp.c11 {
   position: relative;
 }
 
-.c8 {
+.c7 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -2308,83 +2012,79 @@ samp.c11 {
   padding: 0.4em 0.6em;
 }
 
-.c8[disabled] {
+.c7[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c8:focus {
+.c7:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c8::-webkit-input-placeholder {
+.c7::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c8::-moz-placeholder {
+.c7::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c8:-ms-input-placeholder {
+.c7:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c8::placeholder {
+.c7::placeholder {
   opacity: 0.6;
 }
 
-.c8 {
+.c7 {
   border-color: #ffc94c;
   box-shadow: #ffc94c 0px 0px 0px 1px !important;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="align-items: center;"
   >
-    <div
-      class="c2 c1"
-      style="align-items: center;"
+    <label
+      class="c2 c3 c4 c5"
+      font-weight="600"
+      for="username"
+      style="font-weight: 600;"
     >
-      <label
-        class="c3 c4 c5 c6"
-        font-weight="600"
-        for="username"
-        style="font-weight: 600;"
-      >
-        Username
-      </label>
-    </div>
-    <div />
-    <div
-      class="c7 c1"
+      Username
+    </label>
+  </div>
+  <div />
+  <div
+    class="c6 c0"
+    style="size: default;"
+  >
+    <input
+      aria-invalid="false"
+      aria-required="false"
+      class="c7 c8"
+      id="username"
       style="size: default;"
-    >
-      <input
-        aria-invalid="false"
-        aria-required="false"
-        class="c8 c9"
-        id="username"
-        style="size: default;"
-        type="text"
-        value="Jake"
-      />
-    </div>
-    <div />
-    <span
-      class="c10 c11 c12"
-      color="warning"
-    >
-      This is an invalid name
-    </span>
+      type="text"
+      value="Jake"
+    />
   </div>
+  <div />
+  <span
+    class="c9 c10 c11"
+    color="warning"
+  >
+    This is an invalid name
+  </span>
 </div>
 `;
diff --git a/src/Group/__tests__/__snapshots__/Group.test.js.snap b/src/Group/__tests__/__snapshots__/Group.test.js.snap
index 7d4df38db..124ed34f4 100644
--- a/src/Group/__tests__/__snapshots__/Group.test.js.snap
+++ b/src/Group/__tests__/__snapshots__/Group.test.js.snap
@@ -14,7 +14,7 @@ exports[`renders correctly for a basic group 1`] = `
   color: inherit;
 }
 
-.c3 {
+.c2 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -29,7 +29,7 @@ exports[`renders correctly for a basic group 1`] = `
   background-color: #3926a5 !important;
 }
 
-.c5 {
+.c4 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -42,33 +42,7 @@ exports[`renders correctly for a basic group 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c4 {
+.c3 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -94,28 +68,28 @@ exports[`renders correctly for a basic group 1`] = `
   text-decoration: none;
 }
 
-.c4:focus {
+.c3:focus {
   outline: unset;
   z-index: 2;
   box-shadow: #7467c0 0px 0px 0px 2px;
 }
 
-.c4[disabled] {
+.c3[disabled] {
   cursor: not-allowed;
   opacity: 0.7;
   outline: unset;
   pointer-events: unset;
 }
 
-.c4:hover {
+.c3:hover {
   background-color: #efefef;
 }
 
-.c4:hover:active {
+.c3:hover:active {
   background-color: #e3e3e3;
 }
 
-.c6 {
+.c5 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -126,7 +100,7 @@ exports[`renders correctly for a basic group 1`] = `
   display: inline-flex;
 }
 
-.c2 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -136,78 +110,74 @@ exports[`renders correctly for a basic group 1`] = `
   flex-direction: row;
 }
 
-.c2 > *:not(:first-child):not(:last-child),
-.c2 > *:not(:first-child):not(:last-child) .GroupItem-sc-2orogz-0 {
+.c0 > *:not(:first-child):not(:last-child),
+.c0 > *:not(:first-child):not(:last-child) .GroupItem-sc-2orogz-0 {
   border-radius: 0;
   border-left-width: 0;
 }
 
-.c2 > *:first-child,
-.c2 > *:first-child .GroupItem-sc-2orogz-0 {
+.c0 > *:first-child,
+.c0 > *:first-child .GroupItem-sc-2orogz-0 {
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
 }
 
-.c2 > *:last-child,
-.c2 > *:last-child .GroupItem-sc-2orogz-0 {
+.c0 > *:last-child,
+.c0 > *:last-child .GroupItem-sc-2orogz-0 {
   border-top-left-radius: 0;
   border-left-width: 0;
   border-bottom-left-radius: 0;
 }
 
-.c2 > * {
+.c0 > * {
   border-radius: 4px;
 }
 
-.c2 input:focus,
-.c2 select:focus {
+.c0 input:focus,
+.c0 select:focus {
   z-index: 1;
   position: relative;
 }
 
-.c2 > *:first-child input,
-.c2 > *:first-child select {
+.c0 > *:first-child input,
+.c0 > *:first-child select {
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
 }
 
-.c2 > *:last-child input,
-.c2 > *:last-child select {
+.c0 > *:last-child input,
+.c0 > *:last-child select {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-.c2 > *:not(:first-child):not(:last-child) > input,
-.c2 > *:not(:first-child):not(:last-child) > select {
+.c0 > *:not(:first-child):not(:last-child) > input,
+.c0 > *:not(:first-child):not(:last-child) > select {
   border-radius: 0;
 }
 
 <div
   class="c0 c1"
+  role="group"
 >
   <div
-    class="c2 c1"
-    role="group"
+    class="c2"
+    color="white"
+    style="color: white; padding: 0.5rem 1rem;"
   >
-    <div
-      class="c3"
-      color="white"
-      style="color: white; padding: 0.5rem 1rem;"
-    >
-      Hello
-    </div>
-    <button
-      class="c4 c5"
-      kind="default"
-      style="size: default;"
-    >
-      <span
-        class="c6"
-      >
-        Send
-      </span>
-    </button>
+    Hello
   </div>
+  <button
+    class="c3 c4"
+    kind="default"
+    style="size: default;"
+  >
+    <span
+      class="c5"
+    >
+      Send
+    </span>
+  </button>
 </div>
 `;
 
@@ -225,7 +195,7 @@ exports[`renders correctly for a responsive group 1`] = `
   color: inherit;
 }
 
-.c3 {
+.c2 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -240,7 +210,7 @@ exports[`renders correctly for a responsive group 1`] = `
   background-color: #3926a5 !important;
 }
 
-.c5 {
+.c4 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -253,33 +223,7 @@ exports[`renders correctly for a responsive group 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c4 {
+.c3 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -305,28 +249,28 @@ exports[`renders correctly for a responsive group 1`] = `
   text-decoration: none;
 }
 
-.c4:focus {
+.c3:focus {
   outline: unset;
   z-index: 2;
   box-shadow: #7467c0 0px 0px 0px 2px;
 }
 
-.c4[disabled] {
+.c3[disabled] {
   cursor: not-allowed;
   opacity: 0.7;
   outline: unset;
   pointer-events: unset;
 }
 
-.c4:hover {
+.c3:hover {
   background-color: #efefef;
 }
 
-.c4:hover:active {
+.c3:hover:active {
   background-color: #e3e3e3;
 }
 
-.c6 {
+.c5 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -337,7 +281,7 @@ exports[`renders correctly for a responsive group 1`] = `
   display: inline-flex;
 }
 
-.c2 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -347,50 +291,50 @@ exports[`renders correctly for a responsive group 1`] = `
   flex-direction: row;
 }
 
-.c2 > *:not(:first-child):not(:last-child),
-.c2 > *:not(:first-child):not(:last-child) .GroupItem-sc-2orogz-0 {
+.c0 > *:not(:first-child):not(:last-child),
+.c0 > *:not(:first-child):not(:last-child) .GroupItem-sc-2orogz-0 {
   border-radius: 0;
 }
 
-.c2 > *:first-child,
-.c2 > *:first-child .GroupItem-sc-2orogz-0 {
+.c0 > *:first-child,
+.c0 > *:first-child .GroupItem-sc-2orogz-0 {
   border-bottom-right-radius: 0;
 }
 
-.c2 > *:last-child,
-.c2 > *:last-child .GroupItem-sc-2orogz-0 {
+.c0 > *:last-child,
+.c0 > *:last-child .GroupItem-sc-2orogz-0 {
   border-top-left-radius: 0;
 }
 
-.c2 > * {
+.c0 > * {
   border-radius: 4px;
 }
 
-.c2 input:focus,
-.c2 select:focus {
+.c0 input:focus,
+.c0 select:focus {
   z-index: 1;
   position: relative;
 }
 
-.c2 > *:first-child input,
-.c2 > *:first-child select {
+.c0 > *:first-child input,
+.c0 > *:first-child select {
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
 }
 
-.c2 > *:last-child input,
-.c2 > *:last-child select {
+.c0 > *:last-child input,
+.c0 > *:last-child select {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-.c2 > *:not(:first-child):not(:last-child) > input,
-.c2 > *:not(:first-child):not(:last-child) > select {
+.c0 > *:not(:first-child):not(:last-child) > input,
+.c0 > *:not(:first-child):not(:last-child) > select {
   border-radius: 0;
 }
 
 @media (max-width:768px) {
-  .c2 {
+  .c0 {
     -webkit-flex-direction: column;
     -ms-flex-direction: column;
     flex-direction: column;
@@ -398,44 +342,44 @@ exports[`renders correctly for a responsive group 1`] = `
 }
 
 @media (min-width:769px) {
-  .c2 > *:not(:first-child):not(:last-child),
-  .c2 > *:not(:first-child):not(:last-child) .GroupItem-sc-2orogz-0 {
+  .c0 > *:not(:first-child):not(:last-child),
+  .c0 > *:not(:first-child):not(:last-child) .GroupItem-sc-2orogz-0 {
     border-left-width: 0;
   }
 }
 
 @media (max-width:768px) {
-  .c2 > *:not(:first-child):not(:last-child),
-  .c2 > *:not(:first-child):not(:last-child) .GroupItem-sc-2orogz-0 {
+  .c0 > *:not(:first-child):not(:last-child),
+  .c0 > *:not(:first-child):not(:last-child) .GroupItem-sc-2orogz-0 {
     border-top-width: 0;
   }
 }
 
 @media (min-width:769px) {
-  .c2 > *:first-child,
-  .c2 > *:first-child .GroupItem-sc-2orogz-0 {
+  .c0 > *:first-child,
+  .c0 > *:first-child .GroupItem-sc-2orogz-0 {
     border-top-right-radius: 0;
   }
 }
 
 @media (max-width:768px) {
-  .c2 > *:first-child,
-  .c2 > *:first-child .GroupItem-sc-2orogz-0 {
+  .c0 > *:first-child,
+  .c0 > *:first-child .GroupItem-sc-2orogz-0 {
     border-bottom-left-radius: 0;
   }
 }
 
 @media (min-width:769px) {
-  .c2 > *:last-child,
-  .c2 > *:last-child .GroupItem-sc-2orogz-0 {
+  .c0 > *:last-child,
+  .c0 > *:last-child .GroupItem-sc-2orogz-0 {
     border-left-width: 0;
     border-bottom-left-radius: 0;
   }
 }
 
 @media (max-width:768px) {
-  .c2 > *:last-child,
-  .c2 > *:last-child .GroupItem-sc-2orogz-0 {
+  .c0 > *:last-child,
+  .c0 > *:last-child .GroupItem-sc-2orogz-0 {
     border-top-width: 0;
     border-top-right-radius: 0;
   }
@@ -443,30 +387,26 @@ exports[`renders correctly for a responsive group 1`] = `
 
 <div
   class="c0 c1"
+  role="group"
 >
   <div
-    class="c2 c1"
-    role="group"
+    class="c2"
+    color="white"
+    style="color: white; padding: 0.5rem 1rem;"
   >
-    <div
-      class="c3"
-      color="white"
-      style="color: white; padding: 0.5rem 1rem;"
-    >
-      Hello
-    </div>
-    <button
-      class="c4 c5"
-      kind="default"
-      style="size: default;"
-    >
-      <span
-        class="c6"
-      >
-        Send
-      </span>
-    </button>
+    Hello
   </div>
+  <button
+    class="c3 c4"
+    kind="default"
+    style="size: default;"
+  >
+    <span
+      class="c5"
+    >
+      Send
+    </span>
+  </button>
 </div>
 `;
 
@@ -484,7 +424,7 @@ exports[`renders correctly for a vertical group 1`] = `
   color: inherit;
 }
 
-.c3 {
+.c2 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -499,7 +439,7 @@ exports[`renders correctly for a vertical group 1`] = `
   background-color: #3926a5 !important;
 }
 
-.c5 {
+.c4 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -512,33 +452,7 @@ exports[`renders correctly for a vertical group 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c4 {
+.c3 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -564,28 +478,28 @@ exports[`renders correctly for a vertical group 1`] = `
   text-decoration: none;
 }
 
-.c4:focus {
+.c3:focus {
   outline: unset;
   z-index: 2;
   box-shadow: #7467c0 0px 0px 0px 2px;
 }
 
-.c4[disabled] {
+.c3[disabled] {
   cursor: not-allowed;
   opacity: 0.7;
   outline: unset;
   pointer-events: unset;
 }
 
-.c4:hover {
+.c3:hover {
   background-color: #efefef;
 }
 
-.c4:hover:active {
+.c3:hover:active {
   background-color: #e3e3e3;
 }
 
-.c6 {
+.c5 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -596,7 +510,7 @@ exports[`renders correctly for a vertical group 1`] = `
   display: inline-flex;
 }
 
-.c2 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -606,77 +520,73 @@ exports[`renders correctly for a vertical group 1`] = `
   flex-direction: column;
 }
 
-.c2 > *:not(:first-child):not(:last-child),
-.c2 > *:not(:first-child):not(:last-child) .GroupItem-sc-2orogz-0 {
+.c0 > *:not(:first-child):not(:last-child),
+.c0 > *:not(:first-child):not(:last-child) .GroupItem-sc-2orogz-0 {
   border-radius: 0;
   border-top-width: 0;
 }
 
-.c2 > *:first-child,
-.c2 > *:first-child .GroupItem-sc-2orogz-0 {
+.c0 > *:first-child,
+.c0 > *:first-child .GroupItem-sc-2orogz-0 {
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-.c2 > *:last-child,
-.c2 > *:last-child .GroupItem-sc-2orogz-0 {
+.c0 > *:last-child,
+.c0 > *:last-child .GroupItem-sc-2orogz-0 {
   border-top-left-radius: 0;
   border-top-width: 0;
   border-top-right-radius: 0;
 }
 
-.c2 > * {
+.c0 > * {
   border-radius: 4px;
 }
 
-.c2 input:focus,
-.c2 select:focus {
+.c0 input:focus,
+.c0 select:focus {
   z-index: 1;
   position: relative;
 }
 
-.c2 > *:first-child input,
-.c2 > *:first-child select {
+.c0 > *:first-child input,
+.c0 > *:first-child select {
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-.c2 > *:last-child input,
-.c2 > *:last-child select {
+.c0 > *:last-child input,
+.c0 > *:last-child select {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
 
-.c2 > *:not(:first-child):not(:last-child) > input,
-.c2 > *:not(:first-child):not(:last-child) > select {
+.c0 > *:not(:first-child):not(:last-child) > input,
+.c0 > *:not(:first-child):not(:last-child) > select {
   border-radius: 0;
 }
 
 <div
   class="c0 c1"
+  role="group"
 >
   <div
-    class="c2 c1"
-    role="group"
+    class="c2"
+    color="white"
+    style="color: white; padding: 0.5rem 1rem;"
   >
-    <div
-      class="c3"
-      color="white"
-      style="color: white; padding: 0.5rem 1rem;"
-    >
-      Hello
-    </div>
-    <button
-      class="c4 c5"
-      kind="default"
-      style="size: default;"
-    >
-      <span
-        class="c6"
-      >
-        Send
-      </span>
-    </button>
+    Hello
   </div>
+  <button
+    class="c3 c4"
+    kind="default"
+    style="size: default;"
+  >
+    <span
+      class="c5"
+    >
+      Send
+    </span>
+  </button>
 </div>
 `;
diff --git a/src/Heading/__tests__/__snapshots__/Heading.test.js.snap b/src/Heading/__tests__/__snapshots__/Heading.test.js.snap
index 79271deae..1af319339 100644
--- a/src/Heading/__tests__/__snapshots__/Heading.test.js.snap
+++ b/src/Heading/__tests__/__snapshots__/Heading.test.js.snap
@@ -15,112 +15,82 @@ exports[`renders correctly for a basic heading 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   font-weight: 700;
   line-height: 1.2;
   margin-bottom: 1rem;
 }
 
-.heading.c2 + .sub-heading {
+.heading.c0 + .sub-heading {
   margin-top: -1rem;
 }
 
-.c2:last-child {
+.c0:last-child {
   margin-bottom: 0;
 }
 
-h1.c2 {
+h1.c0 {
   font-size: 3rem;
 }
 
-h2.c2 {
+h2.c0 {
   font-size: 2.5rem;
 }
 
-h3.c2 {
+h3.c0 {
   font-size: 2rem;
 }
 
-h4.c2 {
+h4.c0 {
   font-size: 1.5rem;
 }
 
-h5.c2 {
+h5.c0 {
   font-size: 1.25rem;
 }
 
-h6.c2 {
+h6.c0 {
   font-size: 1rem;
 }
 
-.c2 .c3 {
+.c0 .c2 {
   top: 0.1em;
 }
 
 @media (max-width:480px) {
-  h1.c2 {
+  h1.c0 {
     font-size: 2rem;
   }
 }
 
 @media (max-width:480px) {
-  h2.c2 {
+  h2.c0 {
     font-size: 1.8rem;
   }
 }
 
 @media (max-width:480px) {
-  h3.c2 {
+  h3.c0 {
     font-size: 1.6rem;
   }
 }
 
 @media (max-width:480px) {
-  h4.c2 {
+  h4.c0 {
     font-size: 1.4rem;
   }
 }
 
 @media (max-width:480px) {
-  h5.c2 {
+  h5.c0 {
     font-size: 1.2rem;
   }
 }
 
-<div
-  class="c0 c1"
+<h1
+  class="heading c0 c1"
 >
-  <h1
-    class="heading c2 c1"
-  >
-    test
-  </h1>
-</div>
+  test
+</h1>
 `;
 
 exports[`renders correctly for a heading of a different element 1`] = `
@@ -138,112 +108,82 @@ exports[`renders correctly for a heading of a different element 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   font-weight: 700;
   line-height: 1.2;
   margin-bottom: 1rem;
 }
 
-.heading.c2 + .sub-heading {
+.heading.c0 + .sub-heading {
   margin-top: -1rem;
 }
 
-.c2:last-child {
+.c0:last-child {
   margin-bottom: 0;
 }
 
-h1.c2 {
+h1.c0 {
   font-size: 3rem;
 }
 
-h2.c2 {
+h2.c0 {
   font-size: 2.5rem;
 }
 
-h3.c2 {
+h3.c0 {
   font-size: 2rem;
 }
 
-h4.c2 {
+h4.c0 {
   font-size: 1.5rem;
 }
 
-h5.c2 {
+h5.c0 {
   font-size: 1.25rem;
 }
 
-h6.c2 {
+h6.c0 {
   font-size: 1rem;
 }
 
-.c2 .c3 {
+.c0 .c2 {
   top: 0.1em;
 }
 
 @media (max-width:480px) {
-  h1.c2 {
+  h1.c0 {
     font-size: 2rem;
   }
 }
 
 @media (max-width:480px) {
-  h2.c2 {
+  h2.c0 {
     font-size: 1.8rem;
   }
 }
 
 @media (max-width:480px) {
-  h3.c2 {
+  h3.c0 {
     font-size: 1.6rem;
   }
 }
 
 @media (max-width:480px) {
-  h4.c2 {
+  h4.c0 {
     font-size: 1.4rem;
   }
 }
 
 @media (max-width:480px) {
-  h5.c2 {
+  h5.c0 {
     font-size: 1.2rem;
   }
 }
 
-<div
-  class="c0 c1"
+<h3
+  class="heading c0 c1"
 >
-  <h3
-    class="heading c2 c1"
-  >
-    test
-  </h3>
-</div>
+  test
+</h3>
 `;
 
 exports[`renders correctly for a heading with a subheading 1`] = `
@@ -261,194 +201,164 @@ exports[`renders correctly for a heading with a subheading 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   font-weight: 700;
   line-height: 1.2;
   margin-bottom: 1rem;
 }
 
-.heading.c2 + .sub-heading {
+.heading.c0 + .sub-heading {
   margin-top: -1rem;
 }
 
-.c2:last-child {
+.c0:last-child {
   margin-bottom: 0;
 }
 
-h1.c2 {
+h1.c0 {
   font-size: 3rem;
 }
 
-h2.c2 {
+h2.c0 {
   font-size: 2.5rem;
 }
 
-h3.c2 {
+h3.c0 {
   font-size: 2rem;
 }
 
-h4.c2 {
+h4.c0 {
   font-size: 1.5rem;
 }
 
-h5.c2 {
+h5.c0 {
   font-size: 1.25rem;
 }
 
-h6.c2 {
+h6.c0 {
   font-size: 1rem;
 }
 
-.c2 .c4 {
+.c0 .c3 {
   top: 0.1em;
 }
 
-.c3 {
+.c2 {
   font-weight: 700;
   line-height: 1.2;
   margin-bottom: 1rem;
 }
 
-.heading.c3 + .sub-heading {
+.heading.c2 + .sub-heading {
   margin-top: -1rem;
 }
 
-.c3:last-child {
+.c2:last-child {
   margin-bottom: 0;
 }
 
-h1.c3 {
+h1.c2 {
   font-size: 3rem;
 }
 
-h2.c3 {
+h2.c2 {
   font-size: 2.5rem;
 }
 
-h3.c3 {
+h3.c2 {
   font-size: 2rem;
 }
 
-h4.c3 {
+h4.c2 {
   font-size: 1.5rem;
 }
 
-h5.c3 {
+h5.c2 {
   font-size: 1.25rem;
 }
 
-h6.c3 {
+h6.c2 {
   font-size: 1rem;
 }
 
-.c3 .c4 {
+.c2 .c3 {
   top: 0.1em;
 }
 
-.c3 {
+.c2 {
   font-weight: 600;
 }
 
 @media (max-width:480px) {
-  h1.c2 {
+  h1.c0 {
     font-size: 2rem;
   }
 }
 
 @media (max-width:480px) {
-  h2.c2 {
+  h2.c0 {
     font-size: 1.8rem;
   }
 }
 
 @media (max-width:480px) {
-  h3.c2 {
+  h3.c0 {
     font-size: 1.6rem;
   }
 }
 
 @media (max-width:480px) {
-  h4.c2 {
+  h4.c0 {
     font-size: 1.4rem;
   }
 }
 
 @media (max-width:480px) {
-  h5.c2 {
+  h5.c0 {
     font-size: 1.2rem;
   }
 }
 
 @media (max-width:480px) {
-  h1.c3 {
+  h1.c2 {
     font-size: 2rem;
   }
 }
 
 @media (max-width:480px) {
-  h2.c3 {
+  h2.c2 {
     font-size: 1.8rem;
   }
 }
 
 @media (max-width:480px) {
-  h3.c3 {
+  h3.c2 {
     font-size: 1.6rem;
   }
 }
 
 @media (max-width:480px) {
-  h4.c3 {
+  h4.c2 {
     font-size: 1.4rem;
   }
 }
 
 @media (max-width:480px) {
-  h5.c3 {
+  h5.c2 {
     font-size: 1.2rem;
   }
 }
 
-<div
-  class="c0 c1"
->
-  <div>
-    <h3
-      class="heading c2 c1"
-    >
-      heading
-    </h3>
-    <h5
-      class="sub-heading c3 c1"
-    >
-      subheading
-    </h5>
-  </div>
+<div>
+  <h3
+    class="heading c0 c1"
+  >
+    heading
+  </h3>
+  <h5
+    class="sub-heading c2 c1"
+  >
+    subheading
+  </h5>
 </div>
 `;
 
@@ -467,114 +377,84 @@ exports[`renders correctly for a subheading 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   font-weight: 700;
   line-height: 1.2;
   margin-bottom: 1rem;
 }
 
-.heading.c2 + .sub-heading {
+.heading.c0 + .sub-heading {
   margin-top: -1rem;
 }
 
-.c2:last-child {
+.c0:last-child {
   margin-bottom: 0;
 }
 
-h1.c2 {
+h1.c0 {
   font-size: 3rem;
 }
 
-h2.c2 {
+h2.c0 {
   font-size: 2.5rem;
 }
 
-h3.c2 {
+h3.c0 {
   font-size: 2rem;
 }
 
-h4.c2 {
+h4.c0 {
   font-size: 1.5rem;
 }
 
-h5.c2 {
+h5.c0 {
   font-size: 1.25rem;
 }
 
-h6.c2 {
+h6.c0 {
   font-size: 1rem;
 }
 
-.c2 .c3 {
+.c0 .c2 {
   top: 0.1em;
 }
 
-.c2 {
+.c0 {
   font-weight: 600;
 }
 
 @media (max-width:480px) {
-  h1.c2 {
+  h1.c0 {
     font-size: 2rem;
   }
 }
 
 @media (max-width:480px) {
-  h2.c2 {
+  h2.c0 {
     font-size: 1.8rem;
   }
 }
 
 @media (max-width:480px) {
-  h3.c2 {
+  h3.c0 {
     font-size: 1.6rem;
   }
 }
 
 @media (max-width:480px) {
-  h4.c2 {
+  h4.c0 {
     font-size: 1.4rem;
   }
 }
 
 @media (max-width:480px) {
-  h5.c2 {
+  h5.c0 {
     font-size: 1.2rem;
   }
 }
 
-<div
-  class="c0 c1"
+<h3
+  class="sub-heading c0 c1"
 >
-  <h3
-    class="sub-heading c2 c1"
-  >
-    test
-  </h3>
-</div>
+  test
+</h3>
 `;
diff --git a/src/Icon/__tests__/__snapshots__/Icon.test.js.snap b/src/Icon/__tests__/__snapshots__/Icon.test.js.snap
index 801413a18..7e9286416 100644
--- a/src/Icon/__tests__/__snapshots__/Icon.test.js.snap
+++ b/src/Icon/__tests__/__snapshots__/Icon.test.js.snap
@@ -12,75 +12,32 @@ exports[`colors renders correctly for an icon with color danger 1`] = `
   box-sizing: border-box;
   background-color: unset;
   color: inherit;
-}
-
-.c3 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
   color: #d60027 !important;
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   fill: #d60027;
   position: relative;
   height: 1em;
   width: 1em;
 }
 
-<div
+<svg
   class="c0 c1"
+  color="danger"
+  role="img"
+  size="1"
+  style="size: 1px;"
+  viewBox="0 0 16 16"
 >
-  <svg
-    class="c2 c3"
-    color="danger"
-    role="img"
-    size="1"
-    style="size: 1px;"
-    viewBox="0 0 16 16"
-  >
-    <title>
-      Settings
-    </title>
-    <path
-      d="M15.19 6.39h-1.85c-.11-.37-.27-.71-.45-1.04l1.36-1.36c.31-.31.31-.82 0-1.13l-1.13-1.13a.803.803 0 0 0-1.13 0l-1.36 1.36c-.33-.17-.67-.33-1.04-.44V.79c0-.44-.36-.8-.8-.8h-1.6c-.44 0-.8.36-.8.8v1.86c-.39.12-.75.28-1.1.47l-1.3-1.3c-.3-.3-.79-.3-1.09 0L1.82 2.91c-.3.3-.3.79 0 1.09l1.3 1.3c-.2.34-.36.7-.48 1.09H.79c-.44 0-.8.36-.8.8v1.6c0 .44.36.8.8.8h1.85c.11.37.27.71.45 1.04l-1.36 1.36c-.31.31-.31.82 0 1.13l1.13 1.13c.31.31.82.31 1.13 0l1.36-1.36c.33.18.67.33 1.04.44v1.86c0 .44.36.8.8.8h1.6c.44 0 .8-.36.8-.8v-1.86c.39-.12.75-.28 1.1-.47l1.3 1.3c.3.3.79.3 1.09 0l1.09-1.09c.3-.3.3-.79 0-1.09l-1.3-1.3c.19-.35.36-.71.48-1.1h1.85c.44 0 .8-.36.8-.8v-1.6a.816.816 0 0 0-.81-.79zm-7.2 4.6c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"
-      fill-rule="even-odd"
-    />
-  </svg>
-</div>
+  <title>
+    Settings
+  </title>
+  <path
+    d="M15.19 6.39h-1.85c-.11-.37-.27-.71-.45-1.04l1.36-1.36c.31-.31.31-.82 0-1.13l-1.13-1.13a.803.803 0 0 0-1.13 0l-1.36 1.36c-.33-.17-.67-.33-1.04-.44V.79c0-.44-.36-.8-.8-.8h-1.6c-.44 0-.8.36-.8.8v1.86c-.39.12-.75.28-1.1.47l-1.3-1.3c-.3-.3-.79-.3-1.09 0L1.82 2.91c-.3.3-.3.79 0 1.09l1.3 1.3c-.2.34-.36.7-.48 1.09H.79c-.44 0-.8.36-.8.8v1.6c0 .44.36.8.8.8h1.85c.11.37.27.71.45 1.04l-1.36 1.36c-.31.31-.31.82 0 1.13l1.13 1.13c.31.31.82.31 1.13 0l1.36-1.36c.33.18.67.33 1.04.44v1.86c0 .44.36.8.8.8h1.6c.44 0 .8-.36.8-.8v-1.86c.39-.12.75-.28 1.1-.47l1.3 1.3c.3.3.79.3 1.09 0l1.09-1.09c.3-.3.3-.79 0-1.09l-1.3-1.3c.19-.35.36-.71.48-1.1h1.85c.44 0 .8-.36.8-.8v-1.6a.816.816 0 0 0-.81-.79zm-7.2 4.6c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"
+    fill-rule="even-odd"
+  />
+</svg>
 `;
 
 exports[`colors renders correctly for an icon with color primary 1`] = `
@@ -95,75 +52,32 @@ exports[`colors renders correctly for an icon with color primary 1`] = `
   box-sizing: border-box;
   background-color: unset;
   color: inherit;
-}
-
-.c3 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
   color: #3926a5 !important;
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   fill: #3926a5;
   position: relative;
   height: 1em;
   width: 1em;
 }
 
-<div
+<svg
   class="c0 c1"
+  color="primary"
+  role="img"
+  size="1"
+  style="size: 1px;"
+  viewBox="0 0 16 16"
 >
-  <svg
-    class="c2 c3"
-    color="primary"
-    role="img"
-    size="1"
-    style="size: 1px;"
-    viewBox="0 0 16 16"
-  >
-    <title>
-      Settings
-    </title>
-    <path
-      d="M15.19 6.39h-1.85c-.11-.37-.27-.71-.45-1.04l1.36-1.36c.31-.31.31-.82 0-1.13l-1.13-1.13a.803.803 0 0 0-1.13 0l-1.36 1.36c-.33-.17-.67-.33-1.04-.44V.79c0-.44-.36-.8-.8-.8h-1.6c-.44 0-.8.36-.8.8v1.86c-.39.12-.75.28-1.1.47l-1.3-1.3c-.3-.3-.79-.3-1.09 0L1.82 2.91c-.3.3-.3.79 0 1.09l1.3 1.3c-.2.34-.36.7-.48 1.09H.79c-.44 0-.8.36-.8.8v1.6c0 .44.36.8.8.8h1.85c.11.37.27.71.45 1.04l-1.36 1.36c-.31.31-.31.82 0 1.13l1.13 1.13c.31.31.82.31 1.13 0l1.36-1.36c.33.18.67.33 1.04.44v1.86c0 .44.36.8.8.8h1.6c.44 0 .8-.36.8-.8v-1.86c.39-.12.75-.28 1.1-.47l1.3 1.3c.3.3.79.3 1.09 0l1.09-1.09c.3-.3.3-.79 0-1.09l-1.3-1.3c.19-.35.36-.71.48-1.1h1.85c.44 0 .8-.36.8-.8v-1.6a.816.816 0 0 0-.81-.79zm-7.2 4.6c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"
-      fill-rule="even-odd"
-    />
-  </svg>
-</div>
+  <title>
+    Settings
+  </title>
+  <path
+    d="M15.19 6.39h-1.85c-.11-.37-.27-.71-.45-1.04l1.36-1.36c.31-.31.31-.82 0-1.13l-1.13-1.13a.803.803 0 0 0-1.13 0l-1.36 1.36c-.33-.17-.67-.33-1.04-.44V.79c0-.44-.36-.8-.8-.8h-1.6c-.44 0-.8.36-.8.8v1.86c-.39.12-.75.28-1.1.47l-1.3-1.3c-.3-.3-.79-.3-1.09 0L1.82 2.91c-.3.3-.3.79 0 1.09l1.3 1.3c-.2.34-.36.7-.48 1.09H.79c-.44 0-.8.36-.8.8v1.6c0 .44.36.8.8.8h1.85c.11.37.27.71.45 1.04l-1.36 1.36c-.31.31-.31.82 0 1.13l1.13 1.13c.31.31.82.31 1.13 0l1.36-1.36c.33.18.67.33 1.04.44v1.86c0 .44.36.8.8.8h1.6c.44 0 .8-.36.8-.8v-1.86c.39-.12.75-.28 1.1-.47l1.3 1.3c.3.3.79.3 1.09 0l1.09-1.09c.3-.3.3-.79 0-1.09l-1.3-1.3c.19-.35.36-.71.48-1.1h1.85c.44 0 .8-.36.8-.8v-1.6a.816.816 0 0 0-.81-.79zm-7.2 4.6c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"
+    fill-rule="even-odd"
+  />
+</svg>
 `;
 
 exports[`colors renders correctly for an icon with color success 1`] = `
@@ -178,75 +92,32 @@ exports[`colors renders correctly for an icon with color success 1`] = `
   box-sizing: border-box;
   background-color: unset;
   color: inherit;
-}
-
-.c3 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
   color: #007b2e !important;
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   fill: #007b2e;
   position: relative;
   height: 1em;
   width: 1em;
 }
 
-<div
+<svg
   class="c0 c1"
+  color="success"
+  role="img"
+  size="1"
+  style="size: 1px;"
+  viewBox="0 0 16 16"
 >
-  <svg
-    class="c2 c3"
-    color="success"
-    role="img"
-    size="1"
-    style="size: 1px;"
-    viewBox="0 0 16 16"
-  >
-    <title>
-      Settings
-    </title>
-    <path
-      d="M15.19 6.39h-1.85c-.11-.37-.27-.71-.45-1.04l1.36-1.36c.31-.31.31-.82 0-1.13l-1.13-1.13a.803.803 0 0 0-1.13 0l-1.36 1.36c-.33-.17-.67-.33-1.04-.44V.79c0-.44-.36-.8-.8-.8h-1.6c-.44 0-.8.36-.8.8v1.86c-.39.12-.75.28-1.1.47l-1.3-1.3c-.3-.3-.79-.3-1.09 0L1.82 2.91c-.3.3-.3.79 0 1.09l1.3 1.3c-.2.34-.36.7-.48 1.09H.79c-.44 0-.8.36-.8.8v1.6c0 .44.36.8.8.8h1.85c.11.37.27.71.45 1.04l-1.36 1.36c-.31.31-.31.82 0 1.13l1.13 1.13c.31.31.82.31 1.13 0l1.36-1.36c.33.18.67.33 1.04.44v1.86c0 .44.36.8.8.8h1.6c.44 0 .8-.36.8-.8v-1.86c.39-.12.75-.28 1.1-.47l1.3 1.3c.3.3.79.3 1.09 0l1.09-1.09c.3-.3.3-.79 0-1.09l-1.3-1.3c.19-.35.36-.71.48-1.1h1.85c.44 0 .8-.36.8-.8v-1.6a.816.816 0 0 0-.81-.79zm-7.2 4.6c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"
-      fill-rule="even-odd"
-    />
-  </svg>
-</div>
+  <title>
+    Settings
+  </title>
+  <path
+    d="M15.19 6.39h-1.85c-.11-.37-.27-.71-.45-1.04l1.36-1.36c.31-.31.31-.82 0-1.13l-1.13-1.13a.803.803 0 0 0-1.13 0l-1.36 1.36c-.33-.17-.67-.33-1.04-.44V.79c0-.44-.36-.8-.8-.8h-1.6c-.44 0-.8.36-.8.8v1.86c-.39.12-.75.28-1.1.47l-1.3-1.3c-.3-.3-.79-.3-1.09 0L1.82 2.91c-.3.3-.3.79 0 1.09l1.3 1.3c-.2.34-.36.7-.48 1.09H.79c-.44 0-.8.36-.8.8v1.6c0 .44.36.8.8.8h1.85c.11.37.27.71.45 1.04l-1.36 1.36c-.31.31-.31.82 0 1.13l1.13 1.13c.31.31.82.31 1.13 0l1.36-1.36c.33.18.67.33 1.04.44v1.86c0 .44.36.8.8.8h1.6c.44 0 .8-.36.8-.8v-1.86c.39-.12.75-.28 1.1-.47l1.3 1.3c.3.3.79.3 1.09 0l1.09-1.09c.3-.3.3-.79 0-1.09l-1.3-1.3c.19-.35.36-.71.48-1.1h1.85c.44 0 .8-.36.8-.8v-1.6a.816.816 0 0 0-.81-.79zm-7.2 4.6c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"
+    fill-rule="even-odd"
+  />
+</svg>
 `;
 
 exports[`colors renders correctly for an icon with color warning 1`] = `
@@ -261,75 +132,32 @@ exports[`colors renders correctly for an icon with color warning 1`] = `
   box-sizing: border-box;
   background-color: unset;
   color: inherit;
-}
-
-.c3 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
   color: #ffb300 !important;
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   fill: #ffb300;
   position: relative;
   height: 1em;
   width: 1em;
 }
 
-<div
+<svg
   class="c0 c1"
+  color="warning"
+  role="img"
+  size="1"
+  style="size: 1px;"
+  viewBox="0 0 16 16"
 >
-  <svg
-    class="c2 c3"
-    color="warning"
-    role="img"
-    size="1"
-    style="size: 1px;"
-    viewBox="0 0 16 16"
-  >
-    <title>
-      Settings
-    </title>
-    <path
-      d="M15.19 6.39h-1.85c-.11-.37-.27-.71-.45-1.04l1.36-1.36c.31-.31.31-.82 0-1.13l-1.13-1.13a.803.803 0 0 0-1.13 0l-1.36 1.36c-.33-.17-.67-.33-1.04-.44V.79c0-.44-.36-.8-.8-.8h-1.6c-.44 0-.8.36-.8.8v1.86c-.39.12-.75.28-1.1.47l-1.3-1.3c-.3-.3-.79-.3-1.09 0L1.82 2.91c-.3.3-.3.79 0 1.09l1.3 1.3c-.2.34-.36.7-.48 1.09H.79c-.44 0-.8.36-.8.8v1.6c0 .44.36.8.8.8h1.85c.11.37.27.71.45 1.04l-1.36 1.36c-.31.31-.31.82 0 1.13l1.13 1.13c.31.31.82.31 1.13 0l1.36-1.36c.33.18.67.33 1.04.44v1.86c0 .44.36.8.8.8h1.6c.44 0 .8-.36.8-.8v-1.86c.39-.12.75-.28 1.1-.47l1.3 1.3c.3.3.79.3 1.09 0l1.09-1.09c.3-.3.3-.79 0-1.09l-1.3-1.3c.19-.35.36-.71.48-1.1h1.85c.44 0 .8-.36.8-.8v-1.6a.816.816 0 0 0-.81-.79zm-7.2 4.6c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"
-      fill-rule="even-odd"
-    />
-  </svg>
-</div>
+  <title>
+    Settings
+  </title>
+  <path
+    d="M15.19 6.39h-1.85c-.11-.37-.27-.71-.45-1.04l1.36-1.36c.31-.31.31-.82 0-1.13l-1.13-1.13a.803.803 0 0 0-1.13 0l-1.36 1.36c-.33-.17-.67-.33-1.04-.44V.79c0-.44-.36-.8-.8-.8h-1.6c-.44 0-.8.36-.8.8v1.86c-.39.12-.75.28-1.1.47l-1.3-1.3c-.3-.3-.79-.3-1.09 0L1.82 2.91c-.3.3-.3.79 0 1.09l1.3 1.3c-.2.34-.36.7-.48 1.09H.79c-.44 0-.8.36-.8.8v1.6c0 .44.36.8.8.8h1.85c.11.37.27.71.45 1.04l-1.36 1.36c-.31.31-.31.82 0 1.13l1.13 1.13c.31.31.82.31 1.13 0l1.36-1.36c.33.18.67.33 1.04.44v1.86c0 .44.36.8.8.8h1.6c.44 0 .8-.36.8-.8v-1.86c.39-.12.75-.28 1.1-.47l1.3 1.3c.3.3.79.3 1.09 0l1.09-1.09c.3-.3.3-.79 0-1.09l-1.3-1.3c.19-.35.36-.71.48-1.1h1.85c.44 0 .8-.36.8-.8v-1.6a.816.816 0 0 0-.81-.79zm-7.2 4.6c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"
+    fill-rule="even-odd"
+  />
+</svg>
 `;
 
 exports[`renders correctly for a basic icon 1`] = `
@@ -347,57 +175,27 @@ exports[`renders correctly for a basic icon 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   fill: inherit;
   position: relative;
   height: 1em;
   width: 1em;
 }
 
-<div
+<svg
   class="c0 c1"
+  role="img"
+  size="1"
+  style="size: 1px;"
+  viewBox="0 0 16 16"
 >
-  <svg
-    class="c2 c1"
-    role="img"
-    size="1"
-    style="size: 1px;"
-    viewBox="0 0 16 16"
-  >
-    <title>
-      Settings
-    </title>
-    <path
-      d="M15.19 6.39h-1.85c-.11-.37-.27-.71-.45-1.04l1.36-1.36c.31-.31.31-.82 0-1.13l-1.13-1.13a.803.803 0 0 0-1.13 0l-1.36 1.36c-.33-.17-.67-.33-1.04-.44V.79c0-.44-.36-.8-.8-.8h-1.6c-.44 0-.8.36-.8.8v1.86c-.39.12-.75.28-1.1.47l-1.3-1.3c-.3-.3-.79-.3-1.09 0L1.82 2.91c-.3.3-.3.79 0 1.09l1.3 1.3c-.2.34-.36.7-.48 1.09H.79c-.44 0-.8.36-.8.8v1.6c0 .44.36.8.8.8h1.85c.11.37.27.71.45 1.04l-1.36 1.36c-.31.31-.31.82 0 1.13l1.13 1.13c.31.31.82.31 1.13 0l1.36-1.36c.33.18.67.33 1.04.44v1.86c0 .44.36.8.8.8h1.6c.44 0 .8-.36.8-.8v-1.86c.39-.12.75-.28 1.1-.47l1.3 1.3c.3.3.79.3 1.09 0l1.09-1.09c.3-.3.3-.79 0-1.09l-1.3-1.3c.19-.35.36-.71.48-1.1h1.85c.44 0 .8-.36.8-.8v-1.6a.816.816 0 0 0-.81-.79zm-7.2 4.6c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"
-      fill-rule="even-odd"
-    />
-  </svg>
-</div>
+  <title>
+    Settings
+  </title>
+  <path
+    d="M15.19 6.39h-1.85c-.11-.37-.27-.71-.45-1.04l1.36-1.36c.31-.31.31-.82 0-1.13l-1.13-1.13a.803.803 0 0 0-1.13 0l-1.36 1.36c-.33-.17-.67-.33-1.04-.44V.79c0-.44-.36-.8-.8-.8h-1.6c-.44 0-.8.36-.8.8v1.86c-.39.12-.75.28-1.1.47l-1.3-1.3c-.3-.3-.79-.3-1.09 0L1.82 2.91c-.3.3-.3.79 0 1.09l1.3 1.3c-.2.34-.36.7-.48 1.09H.79c-.44 0-.8.36-.8.8v1.6c0 .44.36.8.8.8h1.85c.11.37.27.71.45 1.04l-1.36 1.36c-.31.31-.31.82 0 1.13l1.13 1.13c.31.31.82.31 1.13 0l1.36-1.36c.33.18.67.33 1.04.44v1.86c0 .44.36.8.8.8h1.6c.44 0 .8-.36.8-.8v-1.86c.39-.12.75-.28 1.1-.47l1.3 1.3c.3.3.79.3 1.09 0l1.09-1.09c.3-.3.3-.79 0-1.09l-1.3-1.3c.19-.35.36-.71.48-1.1h1.85c.44 0 .8-.36.8-.8v-1.6a.816.816 0 0 0-.81-.79zm-7.2 4.6c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"
+    fill-rule="even-odd"
+  />
+</svg>
 `;
 
 exports[`sizes renders correctly for an icon with size large 1`] = `
@@ -415,57 +213,27 @@ exports[`sizes renders correctly for an icon with size large 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   fill: inherit;
   position: relative;
   height: 2em;
   width: 2em;
 }
 
-<div
+<svg
   class="c0 c1"
+  role="img"
+  size="2"
+  style="size: 2px;"
+  viewBox="0 0 16 16"
 >
-  <svg
-    class="c2 c1"
-    role="img"
-    size="2"
-    style="size: 2px;"
-    viewBox="0 0 16 16"
-  >
-    <title>
-      Settings
-    </title>
-    <path
-      d="M15.19 6.39h-1.85c-.11-.37-.27-.71-.45-1.04l1.36-1.36c.31-.31.31-.82 0-1.13l-1.13-1.13a.803.803 0 0 0-1.13 0l-1.36 1.36c-.33-.17-.67-.33-1.04-.44V.79c0-.44-.36-.8-.8-.8h-1.6c-.44 0-.8.36-.8.8v1.86c-.39.12-.75.28-1.1.47l-1.3-1.3c-.3-.3-.79-.3-1.09 0L1.82 2.91c-.3.3-.3.79 0 1.09l1.3 1.3c-.2.34-.36.7-.48 1.09H.79c-.44 0-.8.36-.8.8v1.6c0 .44.36.8.8.8h1.85c.11.37.27.71.45 1.04l-1.36 1.36c-.31.31-.31.82 0 1.13l1.13 1.13c.31.31.82.31 1.13 0l1.36-1.36c.33.18.67.33 1.04.44v1.86c0 .44.36.8.8.8h1.6c.44 0 .8-.36.8-.8v-1.86c.39-.12.75-.28 1.1-.47l1.3 1.3c.3.3.79.3 1.09 0l1.09-1.09c.3-.3.3-.79 0-1.09l-1.3-1.3c.19-.35.36-.71.48-1.1h1.85c.44 0 .8-.36.8-.8v-1.6a.816.816 0 0 0-.81-.79zm-7.2 4.6c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"
-      fill-rule="even-odd"
-    />
-  </svg>
-</div>
+  <title>
+    Settings
+  </title>
+  <path
+    d="M15.19 6.39h-1.85c-.11-.37-.27-.71-.45-1.04l1.36-1.36c.31-.31.31-.82 0-1.13l-1.13-1.13a.803.803 0 0 0-1.13 0l-1.36 1.36c-.33-.17-.67-.33-1.04-.44V.79c0-.44-.36-.8-.8-.8h-1.6c-.44 0-.8.36-.8.8v1.86c-.39.12-.75.28-1.1.47l-1.3-1.3c-.3-.3-.79-.3-1.09 0L1.82 2.91c-.3.3-.3.79 0 1.09l1.3 1.3c-.2.34-.36.7-.48 1.09H.79c-.44 0-.8.36-.8.8v1.6c0 .44.36.8.8.8h1.85c.11.37.27.71.45 1.04l-1.36 1.36c-.31.31-.31.82 0 1.13l1.13 1.13c.31.31.82.31 1.13 0l1.36-1.36c.33.18.67.33 1.04.44v1.86c0 .44.36.8.8.8h1.6c.44 0 .8-.36.8-.8v-1.86c.39-.12.75-.28 1.1-.47l1.3 1.3c.3.3.79.3 1.09 0l1.09-1.09c.3-.3.3-.79 0-1.09l-1.3-1.3c.19-.35.36-.71.48-1.1h1.85c.44 0 .8-.36.8-.8v-1.6a.816.816 0 0 0-.81-.79zm-7.2 4.6c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"
+    fill-rule="even-odd"
+  />
+</svg>
 `;
 
 exports[`sizes renders correctly for an icon with size medium 1`] = `
@@ -483,57 +251,27 @@ exports[`sizes renders correctly for an icon with size medium 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   fill: inherit;
   position: relative;
   height: 1.5em;
   width: 1.5em;
 }
 
-<div
+<svg
   class="c0 c1"
+  role="img"
+  size="1.5"
+  style="size: 1.5px;"
+  viewBox="0 0 16 16"
 >
-  <svg
-    class="c2 c1"
-    role="img"
-    size="1.5"
-    style="size: 1.5px;"
-    viewBox="0 0 16 16"
-  >
-    <title>
-      Settings
-    </title>
-    <path
-      d="M15.19 6.39h-1.85c-.11-.37-.27-.71-.45-1.04l1.36-1.36c.31-.31.31-.82 0-1.13l-1.13-1.13a.803.803 0 0 0-1.13 0l-1.36 1.36c-.33-.17-.67-.33-1.04-.44V.79c0-.44-.36-.8-.8-.8h-1.6c-.44 0-.8.36-.8.8v1.86c-.39.12-.75.28-1.1.47l-1.3-1.3c-.3-.3-.79-.3-1.09 0L1.82 2.91c-.3.3-.3.79 0 1.09l1.3 1.3c-.2.34-.36.7-.48 1.09H.79c-.44 0-.8.36-.8.8v1.6c0 .44.36.8.8.8h1.85c.11.37.27.71.45 1.04l-1.36 1.36c-.31.31-.31.82 0 1.13l1.13 1.13c.31.31.82.31 1.13 0l1.36-1.36c.33.18.67.33 1.04.44v1.86c0 .44.36.8.8.8h1.6c.44 0 .8-.36.8-.8v-1.86c.39-.12.75-.28 1.1-.47l1.3 1.3c.3.3.79.3 1.09 0l1.09-1.09c.3-.3.3-.79 0-1.09l-1.3-1.3c.19-.35.36-.71.48-1.1h1.85c.44 0 .8-.36.8-.8v-1.6a.816.816 0 0 0-.81-.79zm-7.2 4.6c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"
-      fill-rule="even-odd"
-    />
-  </svg>
-</div>
+  <title>
+    Settings
+  </title>
+  <path
+    d="M15.19 6.39h-1.85c-.11-.37-.27-.71-.45-1.04l1.36-1.36c.31-.31.31-.82 0-1.13l-1.13-1.13a.803.803 0 0 0-1.13 0l-1.36 1.36c-.33-.17-.67-.33-1.04-.44V.79c0-.44-.36-.8-.8-.8h-1.6c-.44 0-.8.36-.8.8v1.86c-.39.12-.75.28-1.1.47l-1.3-1.3c-.3-.3-.79-.3-1.09 0L1.82 2.91c-.3.3-.3.79 0 1.09l1.3 1.3c-.2.34-.36.7-.48 1.09H.79c-.44 0-.8.36-.8.8v1.6c0 .44.36.8.8.8h1.85c.11.37.27.71.45 1.04l-1.36 1.36c-.31.31-.31.82 0 1.13l1.13 1.13c.31.31.82.31 1.13 0l1.36-1.36c.33.18.67.33 1.04.44v1.86c0 .44.36.8.8.8h1.6c.44 0 .8-.36.8-.8v-1.86c.39-.12.75-.28 1.1-.47l1.3 1.3c.3.3.79.3 1.09 0l1.09-1.09c.3-.3.3-.79 0-1.09l-1.3-1.3c.19-.35.36-.71.48-1.1h1.85c.44 0 .8-.36.8-.8v-1.6a.816.816 0 0 0-.81-.79zm-7.2 4.6c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"
+    fill-rule="even-odd"
+  />
+</svg>
 `;
 
 exports[`sizes renders correctly for an icon with size small 1`] = `
@@ -551,56 +289,26 @@ exports[`sizes renders correctly for an icon with size small 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   fill: inherit;
   position: relative;
   height: 0.8em;
   width: 0.8em;
 }
 
-<div
+<svg
   class="c0 c1"
+  role="img"
+  style="size: 0.8px;"
+  viewBox="0 0 16 16"
 >
-  <svg
-    class="c2 c1"
-    role="img"
-    style="size: 0.8px;"
-    viewBox="0 0 16 16"
-  >
-    <title>
-      Settings
-    </title>
-    <path
-      d="M15.19 6.39h-1.85c-.11-.37-.27-.71-.45-1.04l1.36-1.36c.31-.31.31-.82 0-1.13l-1.13-1.13a.803.803 0 0 0-1.13 0l-1.36 1.36c-.33-.17-.67-.33-1.04-.44V.79c0-.44-.36-.8-.8-.8h-1.6c-.44 0-.8.36-.8.8v1.86c-.39.12-.75.28-1.1.47l-1.3-1.3c-.3-.3-.79-.3-1.09 0L1.82 2.91c-.3.3-.3.79 0 1.09l1.3 1.3c-.2.34-.36.7-.48 1.09H.79c-.44 0-.8.36-.8.8v1.6c0 .44.36.8.8.8h1.85c.11.37.27.71.45 1.04l-1.36 1.36c-.31.31-.31.82 0 1.13l1.13 1.13c.31.31.82.31 1.13 0l1.36-1.36c.33.18.67.33 1.04.44v1.86c0 .44.36.8.8.8h1.6c.44 0 .8-.36.8-.8v-1.86c.39-.12.75-.28 1.1-.47l1.3 1.3c.3.3.79.3 1.09 0l1.09-1.09c.3-.3.3-.79 0-1.09l-1.3-1.3c.19-.35.36-.71.48-1.1h1.85c.44 0 .8-.36.8-.8v-1.6a.816.816 0 0 0-.81-.79zm-7.2 4.6c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"
-      fill-rule="even-odd"
-    />
-  </svg>
-</div>
+  <title>
+    Settings
+  </title>
+  <path
+    d="M15.19 6.39h-1.85c-.11-.37-.27-.71-.45-1.04l1.36-1.36c.31-.31.31-.82 0-1.13l-1.13-1.13a.803.803 0 0 0-1.13 0l-1.36 1.36c-.33-.17-.67-.33-1.04-.44V.79c0-.44-.36-.8-.8-.8h-1.6c-.44 0-.8.36-.8.8v1.86c-.39.12-.75.28-1.1.47l-1.3-1.3c-.3-.3-.79-.3-1.09 0L1.82 2.91c-.3.3-.3.79 0 1.09l1.3 1.3c-.2.34-.36.7-.48 1.09H.79c-.44 0-.8.36-.8.8v1.6c0 .44.36.8.8.8h1.85c.11.37.27.71.45 1.04l-1.36 1.36c-.31.31-.31.82 0 1.13l1.13 1.13c.31.31.82.31 1.13 0l1.36-1.36c.33.18.67.33 1.04.44v1.86c0 .44.36.8.8.8h1.6c.44 0 .8-.36.8-.8v-1.86c.39-.12.75-.28 1.1-.47l1.3 1.3c.3.3.79.3 1.09 0l1.09-1.09c.3-.3.3-.79 0-1.09l-1.3-1.3c.19-.35.36-.71.48-1.1h1.85c.44 0 .8-.36.8-.8v-1.6a.816.816 0 0 0-.81-.79zm-7.2 4.6c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"
+    fill-rule="even-odd"
+  />
+</svg>
 `;
 
 exports[`sizes renders correctly for an icon with size xlarge 1`] = `
@@ -618,57 +326,27 @@ exports[`sizes renders correctly for an icon with size xlarge 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   fill: inherit;
   position: relative;
   height: 2.5em;
   width: 2.5em;
 }
 
-<div
+<svg
   class="c0 c1"
+  role="img"
+  size="2.5"
+  style="size: 2.5px;"
+  viewBox="0 0 16 16"
 >
-  <svg
-    class="c2 c1"
-    role="img"
-    size="2.5"
-    style="size: 2.5px;"
-    viewBox="0 0 16 16"
-  >
-    <title>
-      Settings
-    </title>
-    <path
-      d="M15.19 6.39h-1.85c-.11-.37-.27-.71-.45-1.04l1.36-1.36c.31-.31.31-.82 0-1.13l-1.13-1.13a.803.803 0 0 0-1.13 0l-1.36 1.36c-.33-.17-.67-.33-1.04-.44V.79c0-.44-.36-.8-.8-.8h-1.6c-.44 0-.8.36-.8.8v1.86c-.39.12-.75.28-1.1.47l-1.3-1.3c-.3-.3-.79-.3-1.09 0L1.82 2.91c-.3.3-.3.79 0 1.09l1.3 1.3c-.2.34-.36.7-.48 1.09H.79c-.44 0-.8.36-.8.8v1.6c0 .44.36.8.8.8h1.85c.11.37.27.71.45 1.04l-1.36 1.36c-.31.31-.31.82 0 1.13l1.13 1.13c.31.31.82.31 1.13 0l1.36-1.36c.33.18.67.33 1.04.44v1.86c0 .44.36.8.8.8h1.6c.44 0 .8-.36.8-.8v-1.86c.39-.12.75-.28 1.1-.47l1.3 1.3c.3.3.79.3 1.09 0l1.09-1.09c.3-.3.3-.79 0-1.09l-1.3-1.3c.19-.35.36-.71.48-1.1h1.85c.44 0 .8-.36.8-.8v-1.6a.816.816 0 0 0-.81-.79zm-7.2 4.6c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"
-      fill-rule="even-odd"
-    />
-  </svg>
-</div>
+  <title>
+    Settings
+  </title>
+  <path
+    d="M15.19 6.39h-1.85c-.11-.37-.27-.71-.45-1.04l1.36-1.36c.31-.31.31-.82 0-1.13l-1.13-1.13a.803.803 0 0 0-1.13 0l-1.36 1.36c-.33-.17-.67-.33-1.04-.44V.79c0-.44-.36-.8-.8-.8h-1.6c-.44 0-.8.36-.8.8v1.86c-.39.12-.75.28-1.1.47l-1.3-1.3c-.3-.3-.79-.3-1.09 0L1.82 2.91c-.3.3-.3.79 0 1.09l1.3 1.3c-.2.34-.36.7-.48 1.09H.79c-.44 0-.8.36-.8.8v1.6c0 .44.36.8.8.8h1.85c.11.37.27.71.45 1.04l-1.36 1.36c-.31.31-.31.82 0 1.13l1.13 1.13c.31.31.82.31 1.13 0l1.36-1.36c.33.18.67.33 1.04.44v1.86c0 .44.36.8.8.8h1.6c.44 0 .8-.36.8-.8v-1.86c.39-.12.75-.28 1.1-.47l1.3 1.3c.3.3.79.3 1.09 0l1.09-1.09c.3-.3.3-.79 0-1.09l-1.3-1.3c.19-.35.36-.71.48-1.1h1.85c.44 0 .8-.36.8-.8v-1.6a.816.816 0 0 0-.81-.79zm-7.2 4.6c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"
+    fill-rule="even-odd"
+  />
+</svg>
 `;
 
 exports[`sizes renders correctly for an icon with size xxlarge 1`] = `
@@ -686,57 +364,27 @@ exports[`sizes renders correctly for an icon with size xxlarge 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   fill: inherit;
   position: relative;
   height: 3em;
   width: 3em;
 }
 
-<div
+<svg
   class="c0 c1"
+  role="img"
+  size="3"
+  style="size: 3px;"
+  viewBox="0 0 16 16"
 >
-  <svg
-    class="c2 c1"
-    role="img"
-    size="3"
-    style="size: 3px;"
-    viewBox="0 0 16 16"
-  >
-    <title>
-      Settings
-    </title>
-    <path
-      d="M15.19 6.39h-1.85c-.11-.37-.27-.71-.45-1.04l1.36-1.36c.31-.31.31-.82 0-1.13l-1.13-1.13a.803.803 0 0 0-1.13 0l-1.36 1.36c-.33-.17-.67-.33-1.04-.44V.79c0-.44-.36-.8-.8-.8h-1.6c-.44 0-.8.36-.8.8v1.86c-.39.12-.75.28-1.1.47l-1.3-1.3c-.3-.3-.79-.3-1.09 0L1.82 2.91c-.3.3-.3.79 0 1.09l1.3 1.3c-.2.34-.36.7-.48 1.09H.79c-.44 0-.8.36-.8.8v1.6c0 .44.36.8.8.8h1.85c.11.37.27.71.45 1.04l-1.36 1.36c-.31.31-.31.82 0 1.13l1.13 1.13c.31.31.82.31 1.13 0l1.36-1.36c.33.18.67.33 1.04.44v1.86c0 .44.36.8.8.8h1.6c.44 0 .8-.36.8-.8v-1.86c.39-.12.75-.28 1.1-.47l1.3 1.3c.3.3.79.3 1.09 0l1.09-1.09c.3-.3.3-.79 0-1.09l-1.3-1.3c.19-.35.36-.71.48-1.1h1.85c.44 0 .8-.36.8-.8v-1.6a.816.816 0 0 0-.81-.79zm-7.2 4.6c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"
-      fill-rule="even-odd"
-    />
-  </svg>
-</div>
+  <title>
+    Settings
+  </title>
+  <path
+    d="M15.19 6.39h-1.85c-.11-.37-.27-.71-.45-1.04l1.36-1.36c.31-.31.31-.82 0-1.13l-1.13-1.13a.803.803 0 0 0-1.13 0l-1.36 1.36c-.33-.17-.67-.33-1.04-.44V.79c0-.44-.36-.8-.8-.8h-1.6c-.44 0-.8.36-.8.8v1.86c-.39.12-.75.28-1.1.47l-1.3-1.3c-.3-.3-.79-.3-1.09 0L1.82 2.91c-.3.3-.3.79 0 1.09l1.3 1.3c-.2.34-.36.7-.48 1.09H.79c-.44 0-.8.36-.8.8v1.6c0 .44.36.8.8.8h1.85c.11.37.27.71.45 1.04l-1.36 1.36c-.31.31-.31.82 0 1.13l1.13 1.13c.31.31.82.31 1.13 0l1.36-1.36c.33.18.67.33 1.04.44v1.86c0 .44.36.8.8.8h1.6c.44 0 .8-.36.8-.8v-1.86c.39-.12.75-.28 1.1-.47l1.3 1.3c.3.3.79.3 1.09 0l1.09-1.09c.3-.3.3-.79 0-1.09l-1.3-1.3c.19-.35.36-.71.48-1.1h1.85c.44 0 .8-.36.8-.8v-1.6a.816.816 0 0 0-.81-.79zm-7.2 4.6c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"
+    fill-rule="even-odd"
+  />
+</svg>
 `;
 
 exports[`sizes renders correctly for an icon with size xxxlarge 1`] = `
@@ -754,55 +402,25 @@ exports[`sizes renders correctly for an icon with size xxxlarge 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   fill: inherit;
   position: relative;
   height: 4em;
   width: 4em;
 }
 
-<div
+<svg
   class="c0 c1"
+  role="img"
+  size="4"
+  style="size: 4px;"
+  viewBox="0 0 16 16"
 >
-  <svg
-    class="c2 c1"
-    role="img"
-    size="4"
-    style="size: 4px;"
-    viewBox="0 0 16 16"
-  >
-    <title>
-      Settings
-    </title>
-    <path
-      d="M15.19 6.39h-1.85c-.11-.37-.27-.71-.45-1.04l1.36-1.36c.31-.31.31-.82 0-1.13l-1.13-1.13a.803.803 0 0 0-1.13 0l-1.36 1.36c-.33-.17-.67-.33-1.04-.44V.79c0-.44-.36-.8-.8-.8h-1.6c-.44 0-.8.36-.8.8v1.86c-.39.12-.75.28-1.1.47l-1.3-1.3c-.3-.3-.79-.3-1.09 0L1.82 2.91c-.3.3-.3.79 0 1.09l1.3 1.3c-.2.34-.36.7-.48 1.09H.79c-.44 0-.8.36-.8.8v1.6c0 .44.36.8.8.8h1.85c.11.37.27.71.45 1.04l-1.36 1.36c-.31.31-.31.82 0 1.13l1.13 1.13c.31.31.82.31 1.13 0l1.36-1.36c.33.18.67.33 1.04.44v1.86c0 .44.36.8.8.8h1.6c.44 0 .8-.36.8-.8v-1.86c.39-.12.75-.28 1.1-.47l1.3 1.3c.3.3.79.3 1.09 0l1.09-1.09c.3-.3.3-.79 0-1.09l-1.3-1.3c.19-.35.36-.71.48-1.1h1.85c.44 0 .8-.36.8-.8v-1.6a.816.816 0 0 0-.81-.79zm-7.2 4.6c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"
-      fill-rule="even-odd"
-    />
-  </svg>
-</div>
+  <title>
+    Settings
+  </title>
+  <path
+    d="M15.19 6.39h-1.85c-.11-.37-.27-.71-.45-1.04l1.36-1.36c.31-.31.31-.82 0-1.13l-1.13-1.13a.803.803 0 0 0-1.13 0l-1.36 1.36c-.33-.17-.67-.33-1.04-.44V.79c0-.44-.36-.8-.8-.8h-1.6c-.44 0-.8.36-.8.8v1.86c-.39.12-.75.28-1.1.47l-1.3-1.3c-.3-.3-.79-.3-1.09 0L1.82 2.91c-.3.3-.3.79 0 1.09l1.3 1.3c-.2.34-.36.7-.48 1.09H.79c-.44 0-.8.36-.8.8v1.6c0 .44.36.8.8.8h1.85c.11.37.27.71.45 1.04l-1.36 1.36c-.31.31-.31.82 0 1.13l1.13 1.13c.31.31.82.31 1.13 0l1.36-1.36c.33.18.67.33 1.04.44v1.86c0 .44.36.8.8.8h1.6c.44 0 .8-.36.8-.8v-1.86c.39-.12.75-.28 1.1-.47l1.3 1.3c.3.3.79.3 1.09 0l1.09-1.09c.3-.3.3-.79 0-1.09l-1.3-1.3c.19-.35.36-.71.48-1.1h1.85c.44 0 .8-.36.8-.8v-1.6a.816.816 0 0 0-.81-.79zm-7.2 4.6c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"
+    fill-rule="even-odd"
+  />
+</svg>
 `;
diff --git a/src/Image/__tests__/__snapshots__/Image.test.js.snap b/src/Image/__tests__/__snapshots__/Image.test.js.snap
index 513c9836b..de2dd35f2 100644
--- a/src/Image/__tests__/__snapshots__/Image.test.js.snap
+++ b/src/Image/__tests__/__snapshots__/Image.test.js.snap
@@ -15,44 +15,14 @@ exports[`renders correctly for a basic image 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   max-width: 100%;
 }
 
-<div
+<img
+  alt="Bean"
   class="c0 c1"
->
-  <img
-    alt="Bean"
-    class="c2 c1"
-    src="https://raw.githubusercontent.com/bigbellies/fannypack/master/src/_docs/bean.jpg"
-  />
-</div>
+  src="https://raw.githubusercontent.com/bigbellies/fannypack/master/src/_docs/bean.jpg"
+/>
 `;
 
 exports[`renders correctly for a fitted image (contain) 1`] = `
@@ -70,51 +40,21 @@ exports[`renders correctly for a fitted image (contain) 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   max-width: 100%;
 }
 
-.c2 {
+.c0 {
   object-fit: contain;
 }
 
-<div
+<img
+  alt="Bean"
   class="c0 c1"
->
-  <img
-    alt="Bean"
-    class="c2 c1"
-    height="300"
-    src="https://raw.githubusercontent.com/bigbellies/fannypack/master/src/_docs/bean.jpg"
-    style="height: 300px; width: 300px;"
-    width="300"
-  />
-</div>
+  height="300"
+  src="https://raw.githubusercontent.com/bigbellies/fannypack/master/src/_docs/bean.jpg"
+  style="height: 300px; width: 300px;"
+  width="300"
+/>
 `;
 
 exports[`renders correctly for a fitted image (cover) 1`] = `
@@ -132,51 +72,21 @@ exports[`renders correctly for a fitted image (cover) 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   max-width: 100%;
 }
 
-.c2 {
+.c0 {
   object-fit: cover;
 }
 
-<div
+<img
+  alt="Bean"
   class="c0 c1"
->
-  <img
-    alt="Bean"
-    class="c2 c1"
-    height="300"
-    src="https://raw.githubusercontent.com/bigbellies/fannypack/master/src/_docs/bean.jpg"
-    style="height: 300px; width: 300px;"
-    width="300"
-  />
-</div>
+  height="300"
+  src="https://raw.githubusercontent.com/bigbellies/fannypack/master/src/_docs/bean.jpg"
+  style="height: 300px; width: 300px;"
+  width="300"
+/>
 `;
 
 exports[`renders correctly for a fitted image with a position 1`] = `
@@ -194,52 +104,22 @@ exports[`renders correctly for a fitted image with a position 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   max-width: 100%;
 }
 
-.c2 {
+.c0 {
   object-fit: contain;
   object-position: top;
 }
 
-<div
+<img
+  alt="Bean"
   class="c0 c1"
->
-  <img
-    alt="Bean"
-    class="c2 c1"
-    height="300"
-    src="https://raw.githubusercontent.com/bigbellies/fannypack/master/src/_docs/bean.jpg"
-    style="height: 300px; width: 300px;"
-    width="300"
-  />
-</div>
+  height="300"
+  src="https://raw.githubusercontent.com/bigbellies/fannypack/master/src/_docs/bean.jpg"
+  style="height: 300px; width: 300px;"
+  width="300"
+/>
 `;
 
 exports[`renders correctly for a fitted image with a position 2`] = `
@@ -257,52 +137,22 @@ exports[`renders correctly for a fitted image with a position 2`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   max-width: 100%;
 }
 
-.c2 {
+.c0 {
   object-fit: contain;
   object-position: 10px 5px;
 }
 
-<div
+<img
+  alt="Bean"
   class="c0 c1"
->
-  <img
-    alt="Bean"
-    class="c2 c1"
-    height="300"
-    src="https://raw.githubusercontent.com/bigbellies/fannypack/master/src/_docs/bean.jpg"
-    style="height: 300px; width: 300px;"
-    width="300"
-  />
-</div>
+  height="300"
+  src="https://raw.githubusercontent.com/bigbellies/fannypack/master/src/_docs/bean.jpg"
+  style="height: 300px; width: 300px;"
+  width="300"
+/>
 `;
 
 exports[`renders correctly for a fixed image 1`] = `
@@ -320,48 +170,18 @@ exports[`renders correctly for a fixed image 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   max-width: 100%;
 }
 
-.c2 {
+.c0 {
   max-width: unset;
 }
 
-<div
+<img
+  alt="Bean"
   class="c0 c1"
->
-  <img
-    alt="Bean"
-    class="c2 c1"
-    src="https://raw.githubusercontent.com/bigbellies/fannypack/master/src/_docs/bean.jpg"
-    style="width: 500px;"
-    width="500"
-  />
-</div>
+  src="https://raw.githubusercontent.com/bigbellies/fannypack/master/src/_docs/bean.jpg"
+  style="width: 500px;"
+  width="500"
+/>
 `;
diff --git a/src/Input/__tests__/__snapshots__/Input.test.js.snap b/src/Input/__tests__/__snapshots__/Input.test.js.snap
index 21edab488..c6c837e82 100644
--- a/src/Input/__tests__/__snapshots__/Input.test.js.snap
+++ b/src/Input/__tests__/__snapshots__/Input.test.js.snap
@@ -14,7 +14,7 @@ exports[`renders correctly for a basic input 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -28,32 +28,6 @@ exports[`renders correctly for a basic input 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -69,7 +43,7 @@ exports[`renders correctly for a basic input 1`] = `
   position: relative;
 }
 
-.c3 {
+.c2 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -78,51 +52,47 @@ exports[`renders correctly for a basic input 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c3[disabled] {
+.c2[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c3:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c3::-webkit-input-placeholder {
+.c2::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::-moz-placeholder {
+.c2::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c3:-ms-input-placeholder {
+.c2:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::placeholder {
+.c2::placeholder {
   opacity: 0.6;
 }
 
 <div
   class="c0 c1"
+  style="size: default;"
 >
-  <div
-    class="c2 c1"
+  <input
+    aria-invalid="false"
+    aria-required="false"
+    class="c2 c3"
     style="size: default;"
-  >
-    <input
-      aria-invalid="false"
-      aria-required="false"
-      class="c3 c4"
-      style="size: default;"
-      type="text"
-      value=""
-    />
-  </div>
+    type="text"
+    value=""
+  />
 </div>
 `;
 
@@ -140,7 +110,7 @@ exports[`renders correctly for a disabled input 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -154,32 +124,6 @@ exports[`renders correctly for a disabled input 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -195,7 +139,7 @@ exports[`renders correctly for a disabled input 1`] = `
   position: relative;
 }
 
-.c3 {
+.c2 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -204,52 +148,48 @@ exports[`renders correctly for a disabled input 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c3[disabled] {
+.c2[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c3:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c3::-webkit-input-placeholder {
+.c2::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::-moz-placeholder {
+.c2::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c3:-ms-input-placeholder {
+.c2:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::placeholder {
+.c2::placeholder {
   opacity: 0.6;
 }
 
 <div
   class="c0 c1"
+  style="size: default;"
 >
-  <div
-    class="c2 c1"
+  <input
+    aria-invalid="false"
+    aria-required="false"
+    class="c2 c3"
+    disabled=""
     style="size: default;"
-  >
-    <input
-      aria-invalid="false"
-      aria-required="false"
-      class="c3 c4"
-      disabled=""
-      style="size: default;"
-      type="text"
-      value=""
-    />
-  </div>
+    type="text"
+    value=""
+  />
 </div>
 `;
 
@@ -267,7 +207,7 @@ exports[`renders correctly for a full width input 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -281,32 +221,6 @@ exports[`renders correctly for a full width input 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -323,7 +237,7 @@ exports[`renders correctly for a full width input 1`] = `
   width: 100%;
 }
 
-.c3 {
+.c2 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -332,55 +246,51 @@ exports[`renders correctly for a full width input 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c3[disabled] {
+.c2[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c3:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c3::-webkit-input-placeholder {
+.c2::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::-moz-placeholder {
+.c2::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c3:-ms-input-placeholder {
+.c2:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::placeholder {
+.c2::placeholder {
   opacity: 0.6;
 }
 
-.c3 {
+.c2 {
   width: 100%;
 }
 
 <div
   class="c0 c1"
+  style="size: default;"
 >
-  <div
-    class="c2 c1"
+  <input
+    aria-invalid="false"
+    aria-required="false"
+    class="c2 c3"
     style="size: default;"
-  >
-    <input
-      aria-invalid="false"
-      aria-required="false"
-      class="c3 c4"
-      style="size: default;"
-      type="text"
-      value=""
-    />
-  </div>
+    type="text"
+    value=""
+  />
 </div>
 `;
 
@@ -398,7 +308,7 @@ exports[`renders correctly for an input with a after component 1`] = `
   color: inherit;
 }
 
-.c8 {
+.c7 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -411,7 +321,7 @@ exports[`renders correctly for an input with a after component 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -424,37 +334,11 @@ exports[`renders correctly for an input with a after component 1`] = `
   color: inherit;
 }
 
-.c4.c4.c4 {
+.c3.c3.c3 {
   position: absolute;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
+.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -465,21 +349,21 @@ exports[`renders correctly for an input with a after component 1`] = `
   display: inline-flex;
 }
 
-.c6 {
+.c5 {
   fill: inherit;
   position: relative;
   height: 1em;
   width: 1em;
 }
 
-.c5 {
+.c4 {
   fill: #708da8;
   height: 2.5em;
   margin: 0 0.75em;
   top: 0;
 }
 
-.c2 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -495,7 +379,7 @@ exports[`renders correctly for an input with a after component 1`] = `
   position: relative;
 }
 
-.c7 {
+.c6 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -504,72 +388,68 @@ exports[`renders correctly for an input with a after component 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c7[disabled] {
+.c6[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c7:focus {
+.c6:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c7::-webkit-input-placeholder {
+.c6::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c7::-moz-placeholder {
+.c6::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c7:-ms-input-placeholder {
+.c6:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c7::placeholder {
+.c6::placeholder {
   opacity: 0.6;
 }
 
-.c7 {
+.c6 {
   padding-right: 2.3em;
 }
 
 <div
   class="c0 c1"
+  style="size: default;"
 >
   <div
-    class="c2 c1"
-    style="size: default;"
+    class="c2 c3"
+    style="right: 0px; z-index: 3;"
   >
-    <div
-      class="c3 c4"
-      style="right: 0px; z-index: 3;"
+    <svg
+      class="c4 c5 c1"
+      role="img"
+      size="1"
+      style="size: 1px;"
+      viewBox="0 0 16 16"
     >
-      <svg
-        class="c5 c6 c1"
-        role="img"
-        size="1"
-        style="size: 1px;"
-        viewBox="0 0 16 16"
-      >
-        <path
-          d="M15.55 13.43l-2.67-2.68a6.94 6.94 0 0 0 1.11-3.76c0-3.87-3.13-7-7-7s-7 3.13-7 7 3.13 7 7 7c1.39 0 2.68-.42 3.76-1.11l2.68 2.67a1.498 1.498 0 1 0 2.12-2.12zm-8.56-1.44c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"
-          fill-rule="even-odd"
-        />
-      </svg>
-    </div>
-    <input
-      aria-invalid="false"
-      aria-required="false"
-      class="c7 c8"
-      style="size: default;"
-      type="text"
-      value=""
-    />
+      <path
+        d="M15.55 13.43l-2.67-2.68a6.94 6.94 0 0 0 1.11-3.76c0-3.87-3.13-7-7-7s-7 3.13-7 7 3.13 7 7 7c1.39 0 2.68-.42 3.76-1.11l2.68 2.67a1.498 1.498 0 1 0 2.12-2.12zm-8.56-1.44c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"
+        fill-rule="even-odd"
+      />
+    </svg>
   </div>
+  <input
+    aria-invalid="false"
+    aria-required="false"
+    class="c6 c7"
+    style="size: default;"
+    type="text"
+    value=""
+  />
 </div>
 `;
 
@@ -587,7 +467,7 @@ exports[`renders correctly for an input with a before component 1`] = `
   color: inherit;
 }
 
-.c8 {
+.c7 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -600,7 +480,7 @@ exports[`renders correctly for an input with a before component 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -613,37 +493,11 @@ exports[`renders correctly for an input with a before component 1`] = `
   color: inherit;
 }
 
-.c4.c4.c4 {
+.c3.c3.c3 {
   position: absolute;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
+.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -654,21 +508,21 @@ exports[`renders correctly for an input with a before component 1`] = `
   display: inline-flex;
 }
 
-.c6 {
+.c5 {
   fill: inherit;
   position: relative;
   height: 1em;
   width: 1em;
 }
 
-.c5 {
+.c4 {
   fill: #708da8;
   height: 2.5em;
   margin: 0 0.75em;
   top: 0;
 }
 
-.c2 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -684,7 +538,7 @@ exports[`renders correctly for an input with a before component 1`] = `
   position: relative;
 }
 
-.c7 {
+.c6 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -693,72 +547,68 @@ exports[`renders correctly for an input with a before component 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c7[disabled] {
+.c6[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c7:focus {
+.c6:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c7::-webkit-input-placeholder {
+.c6::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c7::-moz-placeholder {
+.c6::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c7:-ms-input-placeholder {
+.c6:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c7::placeholder {
+.c6::placeholder {
   opacity: 0.6;
 }
 
-.c7 {
+.c6 {
   padding-left: 2.3em;
 }
 
 <div
   class="c0 c1"
+  style="size: default;"
 >
   <div
-    class="c2 c1"
-    style="size: default;"
+    class="c2 c3"
+    style="z-index: 3;"
   >
-    <div
-      class="c3 c4"
-      style="z-index: 3;"
+    <svg
+      class="c4 c5 c1"
+      role="img"
+      size="1"
+      style="size: 1px;"
+      viewBox="0 0 16 16"
     >
-      <svg
-        class="c5 c6 c1"
-        role="img"
-        size="1"
-        style="size: 1px;"
-        viewBox="0 0 16 16"
-      >
-        <path
-          d="M15.55 13.43l-2.67-2.68a6.94 6.94 0 0 0 1.11-3.76c0-3.87-3.13-7-7-7s-7 3.13-7 7 3.13 7 7 7c1.39 0 2.68-.42 3.76-1.11l2.68 2.67a1.498 1.498 0 1 0 2.12-2.12zm-8.56-1.44c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"
-          fill-rule="even-odd"
-        />
-      </svg>
-    </div>
-    <input
-      aria-invalid="false"
-      aria-required="false"
-      class="c7 c8"
-      style="size: default;"
-      type="text"
-      value=""
-    />
+      <path
+        d="M15.55 13.43l-2.67-2.68a6.94 6.94 0 0 0 1.11-3.76c0-3.87-3.13-7-7-7s-7 3.13-7 7 3.13 7 7 7c1.39 0 2.68-.42 3.76-1.11l2.68 2.67a1.498 1.498 0 1 0 2.12-2.12zm-8.56-1.44c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"
+        fill-rule="even-odd"
+      />
+    </svg>
   </div>
+  <input
+    aria-invalid="false"
+    aria-required="false"
+    class="c6 c7"
+    style="size: default;"
+    type="text"
+    value=""
+  />
 </div>
 `;
 
@@ -776,7 +626,7 @@ exports[`renders correctly for an input with a default value 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -790,32 +640,6 @@ exports[`renders correctly for an input with a default value 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -831,7 +655,7 @@ exports[`renders correctly for an input with a default value 1`] = `
   position: relative;
 }
 
-.c3 {
+.c2 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -840,51 +664,47 @@ exports[`renders correctly for an input with a default value 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c3[disabled] {
+.c2[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c3:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c3::-webkit-input-placeholder {
+.c2::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::-moz-placeholder {
+.c2::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c3:-ms-input-placeholder {
+.c2:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::placeholder {
+.c2::placeholder {
   opacity: 0.6;
 }
 
 <div
   class="c0 c1"
+  style="size: default;"
 >
-  <div
-    class="c2 c1"
+  <input
+    aria-invalid="false"
+    aria-required="false"
+    class="c2 c3"
     style="size: default;"
-  >
-    <input
-      aria-invalid="false"
-      aria-required="false"
-      class="c3 c4"
-      style="size: default;"
-      type="text"
-      value="Awesome value"
-    />
-  </div>
+    type="text"
+    value="Awesome value"
+  />
 </div>
 `;
 
@@ -902,7 +722,7 @@ exports[`renders correctly for an input with a placeholder 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -916,32 +736,6 @@ exports[`renders correctly for an input with a placeholder 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -957,7 +751,7 @@ exports[`renders correctly for an input with a placeholder 1`] = `
   position: relative;
 }
 
-.c3 {
+.c2 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -966,52 +760,48 @@ exports[`renders correctly for an input with a placeholder 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c3[disabled] {
+.c2[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c3:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c3::-webkit-input-placeholder {
+.c2::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::-moz-placeholder {
+.c2::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c3:-ms-input-placeholder {
+.c2:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::placeholder {
+.c2::placeholder {
   opacity: 0.6;
 }
 
 <div
   class="c0 c1"
+  style="size: default;"
 >
-  <div
-    class="c2 c1"
+  <input
+    aria-invalid="false"
+    aria-required="false"
+    class="c2 c3"
+    placeholder="Awesome placeholder"
     style="size: default;"
-  >
-    <input
-      aria-invalid="false"
-      aria-required="false"
-      class="c3 c4"
-      placeholder="Awesome placeholder"
-      style="size: default;"
-      type="text"
-      value=""
-    />
-  </div>
+    type="text"
+    value=""
+  />
 </div>
 `;
 
@@ -1029,7 +819,7 @@ exports[`sizes renders correctly for an input with size large 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1043,32 +833,6 @@ exports[`sizes renders correctly for an input with size large 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1084,11 +848,11 @@ exports[`sizes renders correctly for an input with size large 1`] = `
   position: relative;
 }
 
-.c2 {
+.c0 {
   font-size: 1.5rem;
 }
 
-.c3 {
+.c2 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -1097,36 +861,36 @@ exports[`sizes renders correctly for an input with size large 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c3[disabled] {
+.c2[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c3:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c3::-webkit-input-placeholder {
+.c2::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::-moz-placeholder {
+.c2::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c3:-ms-input-placeholder {
+.c2:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::placeholder {
+.c2::placeholder {
   opacity: 0.6;
 }
 
-.c3 + .c5 {
+.c2 + .c4 {
   width: 25px;
   height: 25px;
   top: 16px;
@@ -1135,20 +899,16 @@ exports[`sizes renders correctly for an input with size large 1`] = `
 
 <div
   class="c0 c1"
+  style="size: large;"
 >
-  <div
-    class="c2 c1"
+  <input
+    aria-invalid="false"
+    aria-required="false"
+    class="c2 c3"
     style="size: large;"
-  >
-    <input
-      aria-invalid="false"
-      aria-required="false"
-      class="c3 c4"
-      style="size: large;"
-      type="text"
-      value=""
-    />
-  </div>
+    type="text"
+    value=""
+  />
 </div>
 `;
 
@@ -1166,7 +926,7 @@ exports[`sizes renders correctly for an input with size medium 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1180,32 +940,6 @@ exports[`sizes renders correctly for an input with size medium 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1221,11 +955,11 @@ exports[`sizes renders correctly for an input with size medium 1`] = `
   position: relative;
 }
 
-.c2 {
+.c0 {
   font-size: 1.25rem;
 }
 
-.c3 {
+.c2 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -1234,36 +968,36 @@ exports[`sizes renders correctly for an input with size medium 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c3[disabled] {
+.c2[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c3:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c3::-webkit-input-placeholder {
+.c2::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::-moz-placeholder {
+.c2::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c3:-ms-input-placeholder {
+.c2:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::placeholder {
+.c2::placeholder {
   opacity: 0.6;
 }
 
-.c3 + .c5 {
+.c2 + .c4 {
   width: 20px;
   height: 20px;
   top: 15px;
@@ -1272,20 +1006,16 @@ exports[`sizes renders correctly for an input with size medium 1`] = `
 
 <div
   class="c0 c1"
+  style="size: medium;"
 >
-  <div
-    class="c2 c1"
+  <input
+    aria-invalid="false"
+    aria-required="false"
+    class="c2 c3"
     style="size: medium;"
-  >
-    <input
-      aria-invalid="false"
-      aria-required="false"
-      class="c3 c4"
-      style="size: medium;"
-      type="text"
-      value=""
-    />
-  </div>
+    type="text"
+    value=""
+  />
 </div>
 `;
 
@@ -1303,7 +1033,7 @@ exports[`sizes renders correctly for an input with size small 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1317,32 +1047,6 @@ exports[`sizes renders correctly for an input with size small 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1358,11 +1062,11 @@ exports[`sizes renders correctly for an input with size small 1`] = `
   position: relative;
 }
 
-.c2 {
+.c0 {
   font-size: 0.8rem;
 }
 
-.c3 {
+.c2 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -1371,36 +1075,36 @@ exports[`sizes renders correctly for an input with size small 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c3[disabled] {
+.c2[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c3:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c3::-webkit-input-placeholder {
+.c2::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::-moz-placeholder {
+.c2::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c3:-ms-input-placeholder {
+.c2:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::placeholder {
+.c2::placeholder {
   opacity: 0.6;
 }
 
-.c3 + .c5 {
+.c2 + .c4 {
   width: 10px;
   height: 10px;
   top: 10px;
@@ -1408,20 +1112,16 @@ exports[`sizes renders correctly for an input with size small 1`] = `
 
 <div
   class="c0 c1"
+  style="size: small;"
 >
-  <div
-    class="c2 c1"
+  <input
+    aria-invalid="false"
+    aria-required="false"
+    class="c2 c3"
     style="size: small;"
-  >
-    <input
-      aria-invalid="false"
-      aria-required="false"
-      class="c3 c4"
-      style="size: small;"
-      type="text"
-      value=""
-    />
-  </div>
+    type="text"
+    value=""
+  />
 </div>
 `;
 
@@ -1439,7 +1139,7 @@ exports[`states renders correctly for an input with state danger 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1453,32 +1153,6 @@ exports[`states renders correctly for an input with state danger 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1494,7 +1168,7 @@ exports[`states renders correctly for an input with state danger 1`] = `
   position: relative;
 }
 
-.c3 {
+.c2 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -1503,56 +1177,52 @@ exports[`states renders correctly for an input with state danger 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c3[disabled] {
+.c2[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c3:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c3::-webkit-input-placeholder {
+.c2::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::-moz-placeholder {
+.c2::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c3:-ms-input-placeholder {
+.c2:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::placeholder {
+.c2::placeholder {
   opacity: 0.6;
 }
 
-.c3 {
+.c2 {
   border-color: #e24c67;
   box-shadow: #e24c67 0px 0px 0px 1px !important;
 }
 
 <div
   class="c0 c1"
+  style="size: default;"
 >
-  <div
-    class="c2 c1"
+  <input
+    aria-invalid="true"
+    aria-required="false"
+    class="c2 c3"
     style="size: default;"
-  >
-    <input
-      aria-invalid="true"
-      aria-required="false"
-      class="c3 c4"
-      style="size: default;"
-      type="text"
-      value=""
-    />
-  </div>
+    type="text"
+    value=""
+  />
 </div>
 `;
 
@@ -1570,7 +1240,7 @@ exports[`states renders correctly for an input with state primary 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1584,32 +1254,6 @@ exports[`states renders correctly for an input with state primary 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1625,7 +1269,7 @@ exports[`states renders correctly for an input with state primary 1`] = `
   position: relative;
 }
 
-.c3 {
+.c2 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -1634,56 +1278,52 @@ exports[`states renders correctly for an input with state primary 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c3[disabled] {
+.c2[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c3:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c3::-webkit-input-placeholder {
+.c2::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::-moz-placeholder {
+.c2::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c3:-ms-input-placeholder {
+.c2:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::placeholder {
+.c2::placeholder {
   opacity: 0.6;
 }
 
-.c3 {
+.c2 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
 <div
   class="c0 c1"
+  style="size: default;"
 >
-  <div
-    class="c2 c1"
+  <input
+    aria-invalid="false"
+    aria-required="false"
+    class="c2 c3"
     style="size: default;"
-  >
-    <input
-      aria-invalid="false"
-      aria-required="false"
-      class="c3 c4"
-      style="size: default;"
-      type="text"
-      value=""
-    />
-  </div>
+    type="text"
+    value=""
+  />
 </div>
 `;
 
@@ -1701,7 +1341,7 @@ exports[`states renders correctly for an input with state success 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1715,32 +1355,6 @@ exports[`states renders correctly for an input with state success 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1756,7 +1370,7 @@ exports[`states renders correctly for an input with state success 1`] = `
   position: relative;
 }
 
-.c3 {
+.c2 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -1765,56 +1379,52 @@ exports[`states renders correctly for an input with state success 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c3[disabled] {
+.c2[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c3:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c3::-webkit-input-placeholder {
+.c2::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::-moz-placeholder {
+.c2::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c3:-ms-input-placeholder {
+.c2:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::placeholder {
+.c2::placeholder {
   opacity: 0.6;
 }
 
-.c3 {
+.c2 {
   border-color: #4ca26c;
   box-shadow: #4ca26c 0px 0px 0px 1px !important;
 }
 
 <div
   class="c0 c1"
+  style="size: default;"
 >
-  <div
-    class="c2 c1"
+  <input
+    aria-invalid="false"
+    aria-required="false"
+    class="c2 c3"
     style="size: default;"
-  >
-    <input
-      aria-invalid="false"
-      aria-required="false"
-      class="c3 c4"
-      style="size: default;"
-      type="text"
-      value=""
-    />
-  </div>
+    type="text"
+    value=""
+  />
 </div>
 `;
 
@@ -1832,7 +1442,7 @@ exports[`states renders correctly for an input with state warning 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1846,32 +1456,6 @@ exports[`states renders correctly for an input with state warning 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1887,7 +1471,7 @@ exports[`states renders correctly for an input with state warning 1`] = `
   position: relative;
 }
 
-.c3 {
+.c2 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -1896,56 +1480,52 @@ exports[`states renders correctly for an input with state warning 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c3[disabled] {
+.c2[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c3:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c3::-webkit-input-placeholder {
+.c2::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::-moz-placeholder {
+.c2::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c3:-ms-input-placeholder {
+.c2:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::placeholder {
+.c2::placeholder {
   opacity: 0.6;
 }
 
-.c3 {
+.c2 {
   border-color: #ffc94c;
   box-shadow: #ffc94c 0px 0px 0px 1px !important;
 }
 
 <div
   class="c0 c1"
+  style="size: default;"
 >
-  <div
-    class="c2 c1"
+  <input
+    aria-invalid="false"
+    aria-required="false"
+    class="c2 c3"
     style="size: default;"
-  >
-    <input
-      aria-invalid="false"
-      aria-required="false"
-      class="c3 c4"
-      style="size: default;"
-      type="text"
-      value=""
-    />
-  </div>
+    type="text"
+    value=""
+  />
 </div>
 `;
 
@@ -1963,7 +1543,7 @@ exports[`types renders correctly for an input with type date 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1977,32 +1557,6 @@ exports[`types renders correctly for an input with type date 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2018,7 +1572,7 @@ exports[`types renders correctly for an input with type date 1`] = `
   position: relative;
 }
 
-.c3 {
+.c2 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -2027,51 +1581,47 @@ exports[`types renders correctly for an input with type date 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c3[disabled] {
+.c2[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c3:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c3::-webkit-input-placeholder {
+.c2::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::-moz-placeholder {
+.c2::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c3:-ms-input-placeholder {
+.c2:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::placeholder {
+.c2::placeholder {
   opacity: 0.6;
 }
 
 <div
   class="c0 c1"
+  style="size: default;"
 >
-  <div
-    class="c2 c1"
+  <input
+    aria-invalid="false"
+    aria-required="false"
+    class="c2 c3"
     style="size: default;"
-  >
-    <input
-      aria-invalid="false"
-      aria-required="false"
-      class="c3 c4"
-      style="size: default;"
-      type="date"
-      value=""
-    />
-  </div>
+    type="date"
+    value=""
+  />
 </div>
 `;
 
@@ -2089,7 +1639,7 @@ exports[`types renders correctly for an input with type email 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2103,32 +1653,6 @@ exports[`types renders correctly for an input with type email 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2144,7 +1668,7 @@ exports[`types renders correctly for an input with type email 1`] = `
   position: relative;
 }
 
-.c3 {
+.c2 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -2153,51 +1677,47 @@ exports[`types renders correctly for an input with type email 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c3[disabled] {
+.c2[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c3:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c3::-webkit-input-placeholder {
+.c2::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::-moz-placeholder {
+.c2::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c3:-ms-input-placeholder {
+.c2:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::placeholder {
+.c2::placeholder {
   opacity: 0.6;
 }
 
 <div
   class="c0 c1"
+  style="size: default;"
 >
-  <div
-    class="c2 c1"
+  <input
+    aria-invalid="false"
+    aria-required="false"
+    class="c2 c3"
     style="size: default;"
-  >
-    <input
-      aria-invalid="false"
-      aria-required="false"
-      class="c3 c4"
-      style="size: default;"
-      type="email"
-      value=""
-    />
-  </div>
+    type="email"
+    value=""
+  />
 </div>
 `;
 
@@ -2215,7 +1735,7 @@ exports[`types renders correctly for an input with type number 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2229,32 +1749,6 @@ exports[`types renders correctly for an input with type number 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2270,7 +1764,7 @@ exports[`types renders correctly for an input with type number 1`] = `
   position: relative;
 }
 
-.c3 {
+.c2 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -2279,51 +1773,47 @@ exports[`types renders correctly for an input with type number 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c3[disabled] {
+.c2[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c3:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c3::-webkit-input-placeholder {
+.c2::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::-moz-placeholder {
+.c2::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c3:-ms-input-placeholder {
+.c2:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::placeholder {
+.c2::placeholder {
   opacity: 0.6;
 }
 
 <div
   class="c0 c1"
+  style="size: default;"
 >
-  <div
-    class="c2 c1"
+  <input
+    aria-invalid="false"
+    aria-required="false"
+    class="c2 c3"
     style="size: default;"
-  >
-    <input
-      aria-invalid="false"
-      aria-required="false"
-      class="c3 c4"
-      style="size: default;"
-      type="number"
-      value=""
-    />
-  </div>
+    type="number"
+    value=""
+  />
 </div>
 `;
 
@@ -2341,7 +1831,7 @@ exports[`types renders correctly for an input with type password 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2355,32 +1845,6 @@ exports[`types renders correctly for an input with type password 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2396,7 +1860,7 @@ exports[`types renders correctly for an input with type password 1`] = `
   position: relative;
 }
 
-.c3 {
+.c2 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -2405,51 +1869,47 @@ exports[`types renders correctly for an input with type password 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c3[disabled] {
+.c2[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c3:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c3::-webkit-input-placeholder {
+.c2::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::-moz-placeholder {
+.c2::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c3:-ms-input-placeholder {
+.c2:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::placeholder {
+.c2::placeholder {
   opacity: 0.6;
 }
 
 <div
   class="c0 c1"
+  style="size: default;"
 >
-  <div
-    class="c2 c1"
+  <input
+    aria-invalid="false"
+    aria-required="false"
+    class="c2 c3"
     style="size: default;"
-  >
-    <input
-      aria-invalid="false"
-      aria-required="false"
-      class="c3 c4"
-      style="size: default;"
-      type="password"
-      value=""
-    />
-  </div>
+    type="password"
+    value=""
+  />
 </div>
 `;
 
@@ -2467,7 +1927,7 @@ exports[`types renders correctly for an input with type search 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2481,32 +1941,6 @@ exports[`types renders correctly for an input with type search 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2522,7 +1956,7 @@ exports[`types renders correctly for an input with type search 1`] = `
   position: relative;
 }
 
-.c3 {
+.c2 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -2531,51 +1965,47 @@ exports[`types renders correctly for an input with type search 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c3[disabled] {
+.c2[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c3:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c3::-webkit-input-placeholder {
+.c2::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::-moz-placeholder {
+.c2::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c3:-ms-input-placeholder {
+.c2:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::placeholder {
+.c2::placeholder {
   opacity: 0.6;
 }
 
 <div
   class="c0 c1"
+  style="size: default;"
 >
-  <div
-    class="c2 c1"
+  <input
+    aria-invalid="false"
+    aria-required="false"
+    class="c2 c3"
     style="size: default;"
-  >
-    <input
-      aria-invalid="false"
-      aria-required="false"
-      class="c3 c4"
-      style="size: default;"
-      type="search"
-      value=""
-    />
-  </div>
+    type="search"
+    value=""
+  />
 </div>
 `;
 
@@ -2593,7 +2023,7 @@ exports[`types renders correctly for an input with type tel 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2607,32 +2037,6 @@ exports[`types renders correctly for an input with type tel 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2648,7 +2052,7 @@ exports[`types renders correctly for an input with type tel 1`] = `
   position: relative;
 }
 
-.c3 {
+.c2 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -2657,51 +2061,47 @@ exports[`types renders correctly for an input with type tel 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c3[disabled] {
+.c2[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c3:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c3::-webkit-input-placeholder {
+.c2::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::-moz-placeholder {
+.c2::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c3:-ms-input-placeholder {
+.c2:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::placeholder {
+.c2::placeholder {
   opacity: 0.6;
 }
 
 <div
   class="c0 c1"
+  style="size: default;"
 >
-  <div
-    class="c2 c1"
+  <input
+    aria-invalid="false"
+    aria-required="false"
+    class="c2 c3"
     style="size: default;"
-  >
-    <input
-      aria-invalid="false"
-      aria-required="false"
-      class="c3 c4"
-      style="size: default;"
-      type="tel"
-      value=""
-    />
-  </div>
+    type="tel"
+    value=""
+  />
 </div>
 `;
 
@@ -2719,7 +2119,7 @@ exports[`types renders correctly for an input with type time 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2733,32 +2133,6 @@ exports[`types renders correctly for an input with type time 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2774,7 +2148,7 @@ exports[`types renders correctly for an input with type time 1`] = `
   position: relative;
 }
 
-.c3 {
+.c2 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -2783,51 +2157,47 @@ exports[`types renders correctly for an input with type time 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c3[disabled] {
+.c2[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c3:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c3::-webkit-input-placeholder {
+.c2::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::-moz-placeholder {
+.c2::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c3:-ms-input-placeholder {
+.c2:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::placeholder {
+.c2::placeholder {
   opacity: 0.6;
 }
 
 <div
   class="c0 c1"
+  style="size: default;"
 >
-  <div
-    class="c2 c1"
+  <input
+    aria-invalid="false"
+    aria-required="false"
+    class="c2 c3"
     style="size: default;"
-  >
-    <input
-      aria-invalid="false"
-      aria-required="false"
-      class="c3 c4"
-      style="size: default;"
-      type="time"
-      value=""
-    />
-  </div>
+    type="time"
+    value=""
+  />
 </div>
 `;
 
@@ -2845,7 +2215,7 @@ exports[`types renders correctly for an input with type url 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2859,32 +2229,6 @@ exports[`types renders correctly for an input with type url 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2900,7 +2244,7 @@ exports[`types renders correctly for an input with type url 1`] = `
   position: relative;
 }
 
-.c3 {
+.c2 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -2909,50 +2253,46 @@ exports[`types renders correctly for an input with type url 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c3[disabled] {
+.c2[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c3:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c3::-webkit-input-placeholder {
+.c2::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::-moz-placeholder {
+.c2::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c3:-ms-input-placeholder {
+.c2:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::placeholder {
+.c2::placeholder {
   opacity: 0.6;
 }
 
 <div
   class="c0 c1"
+  style="size: default;"
 >
-  <div
-    class="c2 c1"
+  <input
+    aria-invalid="false"
+    aria-required="false"
+    class="c2 c3"
     style="size: default;"
-  >
-    <input
-      aria-invalid="false"
-      aria-required="false"
-      class="c3 c4"
-      style="size: default;"
-      type="url"
-      value=""
-    />
-  </div>
+    type="url"
+    value=""
+  />
 </div>
 `;
diff --git a/src/Input/__tests__/__snapshots__/InputField.test.js.snap b/src/Input/__tests__/__snapshots__/InputField.test.js.snap
index aa2059a3e..7cec8dfa4 100644
--- a/src/Input/__tests__/__snapshots__/InputField.test.js.snap
+++ b/src/Input/__tests__/__snapshots__/InputField.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly for a basic input field 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -14,7 +14,7 @@ exports[`renders correctly for a basic input field 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -28,33 +28,7 @@ exports[`renders correctly for a basic input field 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -70,7 +44,7 @@ exports[`renders correctly for a basic input field 1`] = `
   position: relative;
 }
 
-.c3 {
+.c2 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -79,64 +53,60 @@ exports[`renders correctly for a basic input field 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c3[disabled] {
+.c2[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c3:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c3::-webkit-input-placeholder {
+.c2::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::-moz-placeholder {
+.c2::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c3:-ms-input-placeholder {
+.c2:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::placeholder {
+.c2::placeholder {
   opacity: 0.6;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
+  <div />
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="size: default;"
   >
-    <div />
-    <div
-      class="c2 c1"
+    <input
+      aria-invalid="false"
+      aria-required="false"
+      class="c2 c3"
       style="size: default;"
-    >
-      <input
-        aria-invalid="false"
-        aria-required="false"
-        class="c3 c4"
-        style="size: default;"
-        type="text"
-        value=""
-      />
-    </div>
-    <div />
+      type="text"
+      value=""
+    />
   </div>
+  <div />
 </div>
 `;
 
 exports[`renders correctly for a disabled input field 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -149,7 +119,7 @@ exports[`renders correctly for a disabled input field 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -163,33 +133,7 @@ exports[`renders correctly for a disabled input field 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -205,7 +149,7 @@ exports[`renders correctly for a disabled input field 1`] = `
   position: relative;
 }
 
-.c3 {
+.c2 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -214,60 +158,56 @@ exports[`renders correctly for a disabled input field 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c3[disabled] {
+.c2[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c3:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c3::-webkit-input-placeholder {
+.c2::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::-moz-placeholder {
+.c2::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c3:-ms-input-placeholder {
+.c2:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::placeholder {
+.c2::placeholder {
   opacity: 0.6;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
+  <div />
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="size: default;"
   >
-    <div />
-    <div
-      class="c2 c1"
+    <input
+      aria-invalid="false"
+      aria-required="false"
+      class="c2 c3"
+      disabled=""
       style="size: default;"
-    >
-      <input
-        aria-invalid="false"
-        aria-required="false"
-        class="c3 c4"
-        disabled=""
-        style="size: default;"
-        type="text"
-        value=""
-      />
-    </div>
-    <div />
+      type="text"
+      value=""
+    />
   </div>
+  <div />
 </div>
 `;
 
@@ -285,7 +225,7 @@ exports[`renders correctly for a full width input field 1`] = `
   color: inherit;
 }
 
-.c5 {
+.c4 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -299,33 +239,7 @@ exports[`renders correctly for a full width input field 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
+.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -342,7 +256,7 @@ exports[`renders correctly for a full width input field 1`] = `
   width: 100%;
 }
 
-.c4 {
+.c3 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -351,72 +265,68 @@ exports[`renders correctly for a full width input field 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c3[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c3:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c3::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c3::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c3:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c3::placeholder {
   opacity: 0.6;
 }
 
-.c4 {
+.c3 {
   width: 100%;
 }
 
-.c2 {
+.c0 {
   width: 100%;
 }
 
 <div
   class="c0 c1"
+  display="inline-block"
+  style="display: inline-block;"
 >
+  <div />
   <div
     class="c2 c1"
-    display="inline-block"
-    style="display: inline-block;"
+    style="size: default;"
   >
-    <div />
-    <div
-      class="c3 c1"
+    <input
+      aria-invalid="false"
+      aria-required="false"
+      class="c3 c4"
       style="size: default;"
-    >
-      <input
-        aria-invalid="false"
-        aria-required="false"
-        class="c4 c5"
-        style="size: default;"
-        type="text"
-        value=""
-      />
-    </div>
-    <div />
+      type="text"
+      value=""
+    />
   </div>
+  <div />
 </div>
 `;
 
 exports[`renders correctly for a required field 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -429,7 +339,7 @@ exports[`renders correctly for a required field 1`] = `
   color: inherit;
 }
 
-.c9 {
+.c8 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -443,7 +353,7 @@ exports[`renders correctly for a required field 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -457,40 +367,14 @@ exports[`renders correctly for a required field 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c7 {
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -506,7 +390,7 @@ exports[`renders correctly for a required field 1`] = `
   position: relative;
 }
 
-.c8 {
+.c7 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -515,90 +399,86 @@ exports[`renders correctly for a required field 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c8[disabled] {
+.c7[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c8:focus {
+.c7:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c8::-webkit-input-placeholder {
+.c7::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c8::-moz-placeholder {
+.c7::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c8:-ms-input-placeholder {
+.c7:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c8::placeholder {
+.c7::placeholder {
   opacity: 0.6;
 }
 
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   display: block;
 }
 
-.c3 {
+.c2 {
   margin-bottom: 0 !important;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="align-items: center;"
   >
-    <div
-      class="c2 c1"
-      style="align-items: center;"
+    <label
+      class="c2 c3 c4 c5"
+      font-weight="600"
+      for="username"
+      style="font-weight: 600;"
     >
-      <label
-        class="c3 c4 c5 c6"
-        font-weight="600"
-        for="username"
-        style="font-weight: 600;"
-      >
-        Username
-      </label>
-    </div>
-    <div />
-    <div
-      class="c7 c1"
+      Username
+    </label>
+  </div>
+  <div />
+  <div
+    class="c6 c0"
+    style="size: default;"
+  >
+    <input
+      aria-invalid="false"
+      aria-required="true"
+      class="c7 c8"
+      id="username"
       style="size: default;"
-    >
-      <input
-        aria-invalid="false"
-        aria-required="true"
-        class="c8 c9"
-        id="username"
-        style="size: default;"
-        type="text"
-        value=""
-      />
-    </div>
-    <div />
+      type="text"
+      value=""
+    />
   </div>
+  <div />
 </div>
 `;
 
 exports[`renders correctly for addon component (after) 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -611,7 +491,7 @@ exports[`renders correctly for addon component (after) 1`] = `
   color: inherit;
 }
 
-.c10 {
+.c9 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -625,7 +505,7 @@ exports[`renders correctly for addon component (after) 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -639,40 +519,14 @@ exports[`renders correctly for addon component (after) 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c8 {
+.c7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -688,7 +542,7 @@ exports[`renders correctly for addon component (after) 1`] = `
   position: relative;
 }
 
-.c9 {
+.c8 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -697,36 +551,36 @@ exports[`renders correctly for addon component (after) 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c9[disabled] {
+.c8[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c9:focus {
+.c8:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c9::-webkit-input-placeholder {
+.c8::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c9::-moz-placeholder {
+.c8::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c9:-ms-input-placeholder {
+.c8:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c9::placeholder {
+.c8::placeholder {
   opacity: 0.6;
 }
 
-.c7 {
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -736,115 +590,111 @@ exports[`renders correctly for addon component (after) 1`] = `
   flex-direction: row;
 }
 
-.c7 > *:not(:first-child):not(:last-child),
-.c7 > *:not(:first-child):not(:last-child) .GroupItem-sc-2orogz-0 {
+.c6 > *:not(:first-child):not(:last-child),
+.c6 > *:not(:first-child):not(:last-child) .GroupItem-sc-2orogz-0 {
   border-radius: 0;
   border-left-width: 0;
 }
 
-.c7 > *:first-child,
-.c7 > *:first-child .GroupItem-sc-2orogz-0 {
+.c6 > *:first-child,
+.c6 > *:first-child .GroupItem-sc-2orogz-0 {
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
 }
 
-.c7 > *:last-child,
-.c7 > *:last-child .GroupItem-sc-2orogz-0 {
+.c6 > *:last-child,
+.c6 > *:last-child .GroupItem-sc-2orogz-0 {
   border-top-left-radius: 0;
   border-left-width: 0;
   border-bottom-left-radius: 0;
 }
 
-.c7 > * {
+.c6 > * {
   border-radius: 4px;
 }
 
-.c7 input:focus,
-.c7 select:focus {
+.c6 input:focus,
+.c6 select:focus {
   z-index: 1;
   position: relative;
 }
 
-.c7 > *:first-child input,
-.c7 > *:first-child select {
+.c6 > *:first-child input,
+.c6 > *:first-child select {
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
 }
 
-.c7 > *:last-child input,
-.c7 > *:last-child select {
+.c6 > *:last-child input,
+.c6 > *:last-child select {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-.c7 > *:not(:first-child):not(:last-child) > input,
-.c7 > *:not(:first-child):not(:last-child) > select {
+.c6 > *:not(:first-child):not(:last-child) > input,
+.c6 > *:not(:first-child):not(:last-child) > select {
   border-radius: 0;
 }
 
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   display: block;
 }
 
-.c3 {
+.c2 {
   margin-bottom: 0 !important;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="align-items: center;"
   >
-    <div
-      class="c2 c1"
-      style="align-items: center;"
+    <label
+      class="c2 c3 c4 c5"
+      font-weight="600"
+      for="username"
+      style="font-weight: 600;"
     >
-      <label
-        class="c3 c4 c5 c6"
-        font-weight="600"
-        for="username"
-        style="font-weight: 600;"
-      >
-        Username
-      </label>
-    </div>
-    <div />
+      Username
+    </label>
+  </div>
+  <div />
+  <div
+    class="c6 c0"
+    role="group"
+  >
     <div
-      class="c7 c1"
-      role="group"
+      class="c7 c0"
+      style="size: default;"
     >
-      <div
-        class="c8 c1"
+      <input
+        aria-invalid="false"
+        aria-required="false"
+        class="c8 c9"
+        id="username"
         style="size: default;"
-      >
-        <input
-          aria-invalid="false"
-          aria-required="false"
-          class="c9 c10"
-          id="username"
-          style="size: default;"
-          type="text"
-          value=""
-        />
-      </div>
-      <div>
-        test
-      </div>
+        type="text"
+        value=""
+      />
+    </div>
+    <div>
+      test
     </div>
-    <div />
   </div>
+  <div />
 </div>
 `;
 
 exports[`renders correctly for addon component (before) 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -857,7 +707,7 @@ exports[`renders correctly for addon component (before) 1`] = `
   color: inherit;
 }
 
-.c10 {
+.c9 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -871,7 +721,7 @@ exports[`renders correctly for addon component (before) 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -885,40 +735,14 @@ exports[`renders correctly for addon component (before) 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c8 {
+.c7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -934,7 +758,7 @@ exports[`renders correctly for addon component (before) 1`] = `
   position: relative;
 }
 
-.c9 {
+.c8 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -943,36 +767,36 @@ exports[`renders correctly for addon component (before) 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c9[disabled] {
+.c8[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c9:focus {
+.c8:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c9::-webkit-input-placeholder {
+.c8::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c9::-moz-placeholder {
+.c8::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c9:-ms-input-placeholder {
+.c8:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c9::placeholder {
+.c8::placeholder {
   opacity: 0.6;
 }
 
-.c7 {
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -982,115 +806,111 @@ exports[`renders correctly for addon component (before) 1`] = `
   flex-direction: row;
 }
 
-.c7 > *:not(:first-child):not(:last-child),
-.c7 > *:not(:first-child):not(:last-child) .GroupItem-sc-2orogz-0 {
+.c6 > *:not(:first-child):not(:last-child),
+.c6 > *:not(:first-child):not(:last-child) .GroupItem-sc-2orogz-0 {
   border-radius: 0;
   border-left-width: 0;
 }
 
-.c7 > *:first-child,
-.c7 > *:first-child .GroupItem-sc-2orogz-0 {
+.c6 > *:first-child,
+.c6 > *:first-child .GroupItem-sc-2orogz-0 {
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
 }
 
-.c7 > *:last-child,
-.c7 > *:last-child .GroupItem-sc-2orogz-0 {
+.c6 > *:last-child,
+.c6 > *:last-child .GroupItem-sc-2orogz-0 {
   border-top-left-radius: 0;
   border-left-width: 0;
   border-bottom-left-radius: 0;
 }
 
-.c7 > * {
+.c6 > * {
   border-radius: 4px;
 }
 
-.c7 input:focus,
-.c7 select:focus {
+.c6 input:focus,
+.c6 select:focus {
   z-index: 1;
   position: relative;
 }
 
-.c7 > *:first-child input,
-.c7 > *:first-child select {
+.c6 > *:first-child input,
+.c6 > *:first-child select {
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
 }
 
-.c7 > *:last-child input,
-.c7 > *:last-child select {
+.c6 > *:last-child input,
+.c6 > *:last-child select {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-.c7 > *:not(:first-child):not(:last-child) > input,
-.c7 > *:not(:first-child):not(:last-child) > select {
+.c6 > *:not(:first-child):not(:last-child) > input,
+.c6 > *:not(:first-child):not(:last-child) > select {
   border-radius: 0;
 }
 
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   display: block;
 }
 
-.c3 {
+.c2 {
   margin-bottom: 0 !important;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="align-items: center;"
   >
-    <div
-      class="c2 c1"
-      style="align-items: center;"
+    <label
+      class="c2 c3 c4 c5"
+      font-weight="600"
+      for="username"
+      style="font-weight: 600;"
     >
-      <label
-        class="c3 c4 c5 c6"
-        font-weight="600"
-        for="username"
-        style="font-weight: 600;"
-      >
-        Username
-      </label>
+      Username
+    </label>
+  </div>
+  <div />
+  <div
+    class="c6 c0"
+    role="group"
+  >
+    <div>
+      test
     </div>
-    <div />
     <div
-      class="c7 c1"
-      role="group"
+      class="c7 c0"
+      style="size: default;"
     >
-      <div>
-        test
-      </div>
-      <div
-        class="c8 c1"
+      <input
+        aria-invalid="false"
+        aria-required="false"
+        class="c8 c9"
+        id="username"
         style="size: default;"
-      >
-        <input
-          aria-invalid="false"
-          aria-required="false"
-          class="c9 c10"
-          id="username"
-          style="size: default;"
-          type="text"
-          value=""
-        />
-      </div>
+        type="text"
+        value=""
+      />
     </div>
-    <div />
   </div>
+  <div />
 </div>
 `;
 
 exports[`renders correctly for addon component (vertical) 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1103,7 +923,7 @@ exports[`renders correctly for addon component (vertical) 1`] = `
   color: inherit;
 }
 
-.c10 {
+.c9 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1117,7 +937,7 @@ exports[`renders correctly for addon component (vertical) 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1131,40 +951,14 @@ exports[`renders correctly for addon component (vertical) 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c8 {
+.c7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1180,7 +974,7 @@ exports[`renders correctly for addon component (vertical) 1`] = `
   position: relative;
 }
 
-.c9 {
+.c8 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -1189,36 +983,36 @@ exports[`renders correctly for addon component (vertical) 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c9[disabled] {
+.c8[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c9:focus {
+.c8:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c9::-webkit-input-placeholder {
+.c8::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c9::-moz-placeholder {
+.c8::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c9:-ms-input-placeholder {
+.c8:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c9::placeholder {
+.c8::placeholder {
   opacity: 0.6;
 }
 
-.c7 {
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1228,115 +1022,111 @@ exports[`renders correctly for addon component (vertical) 1`] = `
   flex-direction: column;
 }
 
-.c7 > *:not(:first-child):not(:last-child),
-.c7 > *:not(:first-child):not(:last-child) .GroupItem-sc-2orogz-0 {
+.c6 > *:not(:first-child):not(:last-child),
+.c6 > *:not(:first-child):not(:last-child) .GroupItem-sc-2orogz-0 {
   border-radius: 0;
   border-top-width: 0;
 }
 
-.c7 > *:first-child,
-.c7 > *:first-child .GroupItem-sc-2orogz-0 {
+.c6 > *:first-child,
+.c6 > *:first-child .GroupItem-sc-2orogz-0 {
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-.c7 > *:last-child,
-.c7 > *:last-child .GroupItem-sc-2orogz-0 {
+.c6 > *:last-child,
+.c6 > *:last-child .GroupItem-sc-2orogz-0 {
   border-top-left-radius: 0;
   border-top-width: 0;
   border-top-right-radius: 0;
 }
 
-.c7 > * {
+.c6 > * {
   border-radius: 4px;
 }
 
-.c7 input:focus,
-.c7 select:focus {
+.c6 input:focus,
+.c6 select:focus {
   z-index: 1;
   position: relative;
 }
 
-.c7 > *:first-child input,
-.c7 > *:first-child select {
+.c6 > *:first-child input,
+.c6 > *:first-child select {
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-.c7 > *:last-child input,
-.c7 > *:last-child select {
+.c6 > *:last-child input,
+.c6 > *:last-child select {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
 
-.c7 > *:not(:first-child):not(:last-child) > input,
-.c7 > *:not(:first-child):not(:last-child) > select {
+.c6 > *:not(:first-child):not(:last-child) > input,
+.c6 > *:not(:first-child):not(:last-child) > select {
   border-radius: 0;
 }
 
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   display: block;
 }
 
-.c3 {
+.c2 {
   margin-bottom: 0 !important;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="align-items: center;"
   >
-    <div
-      class="c2 c1"
-      style="align-items: center;"
+    <label
+      class="c2 c3 c4 c5"
+      font-weight="600"
+      for="username"
+      style="font-weight: 600;"
     >
-      <label
-        class="c3 c4 c5 c6"
-        font-weight="600"
-        for="username"
-        style="font-weight: 600;"
-      >
-        Username
-      </label>
-    </div>
-    <div />
+      Username
+    </label>
+  </div>
+  <div />
+  <div
+    class="c6 c0"
+    role="group"
+  >
     <div
-      class="c7 c1"
-      role="group"
+      class="c7 c0"
+      style="size: default;"
     >
-      <div
-        class="c8 c1"
+      <input
+        aria-invalid="false"
+        aria-required="false"
+        class="c8 c9"
+        id="username"
         style="size: default;"
-      >
-        <input
-          aria-invalid="false"
-          aria-required="false"
-          class="c9 c10"
-          id="username"
-          style="size: default;"
-          type="text"
-          value=""
-        />
-      </div>
-      <div>
-        test
-      </div>
+        type="text"
+        value=""
+      />
+    </div>
+    <div>
+      test
     </div>
-    <div />
   </div>
+  <div />
 </div>
 `;
 
 exports[`renders correctly for an input field with a default value 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1349,7 +1139,7 @@ exports[`renders correctly for an input field with a default value 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1363,33 +1153,7 @@ exports[`renders correctly for an input field with a default value 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1405,7 +1169,7 @@ exports[`renders correctly for an input field with a default value 1`] = `
   position: relative;
 }
 
-.c3 {
+.c2 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -1414,64 +1178,60 @@ exports[`renders correctly for an input field with a default value 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c3[disabled] {
+.c2[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c3:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c3::-webkit-input-placeholder {
+.c2::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::-moz-placeholder {
+.c2::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c3:-ms-input-placeholder {
+.c2:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::placeholder {
+.c2::placeholder {
   opacity: 0.6;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
+  <div />
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="size: default;"
   >
-    <div />
-    <div
-      class="c2 c1"
+    <input
+      aria-invalid="false"
+      aria-required="false"
+      class="c2 c3"
       style="size: default;"
-    >
-      <input
-        aria-invalid="false"
-        aria-required="false"
-        class="c3 c4"
-        style="size: default;"
-        type="text"
-        value="Awesome value"
-      />
-    </div>
-    <div />
+      type="text"
+      value="Awesome value"
+    />
   </div>
+  <div />
 </div>
 `;
 
 exports[`renders correctly for an input field with a description 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1484,7 +1244,7 @@ exports[`renders correctly for an input field with a description 1`] = `
   color: inherit;
 }
 
-.c11 {
+.c10 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1498,7 +1258,7 @@ exports[`renders correctly for an input field with a description 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1512,40 +1272,14 @@ exports[`renders correctly for an input field with a description 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c9 {
+.c8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1561,7 +1295,7 @@ exports[`renders correctly for an input field with a description 1`] = `
   position: relative;
 }
 
-.c10 {
+.c9 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -1570,55 +1304,55 @@ exports[`renders correctly for an input field with a description 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c10[disabled] {
+.c9[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c10:focus {
+.c9:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c10::-webkit-input-placeholder {
+.c9::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c10::-moz-placeholder {
+.c9::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c10:-ms-input-placeholder {
+.c9:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c10::placeholder {
+.c9::placeholder {
   opacity: 0.6;
 }
 
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   display: block;
 }
 
-abbr.c8 {
+abbr.c7 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c8 {
+i.c7 {
   font-style: italic;
 }
 
-kbd.c8 {
+kbd.c7 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -1626,101 +1360,97 @@ kbd.c8 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c8 {
+mark.c7 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c8 {
+strong.c7 {
   font-weight: bold;
 }
 
-sub.c8,
-sup.c8 {
+sub.c7,
+sup.c7 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c8,
-u.c8 {
+ins.c7,
+u.c7 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c8,
-cite.c8,
-var.c8,
-em.c8 {
+i.c7,
+cite.c7,
+var.c7,
+em.c7 {
   font-style: italic;
 }
 
-kbd.c8,
-pre.c8,
-samp.c8 {
+kbd.c7,
+pre.c7,
+samp.c7 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c8 .c12 {
+.c7 .c11 {
   top: 0.1em;
 }
 
-.c3 {
+.c2 {
   margin-bottom: 0 !important;
 }
 
-.c7 {
+.c6 {
   display: block;
   font-size: 0.8rem;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="align-items: center;"
   >
-    <div
-      class="c2 c1"
-      style="align-items: center;"
+    <label
+      class="c2 c3 c4 c5"
+      font-weight="600"
+      for="username"
+      style="font-weight: 600;"
     >
-      <label
-        class="c3 c4 c5 c6"
-        font-weight="600"
-        for="username"
-        style="font-weight: 600;"
-      >
-        Username
-      </label>
-    </div>
-    <span
-      class="c7 c8 c1"
-    >
-      Required for your fannypack
-    </span>
-    <div
-      class="c9 c1"
+      Username
+    </label>
+  </div>
+  <span
+    class="c6 c7 c0"
+  >
+    Required for your fannypack
+  </span>
+  <div
+    class="c8 c0"
+    style="size: default;"
+  >
+    <input
+      aria-invalid="false"
+      aria-required="false"
+      class="c9 c10"
+      id="username"
       style="size: default;"
-    >
-      <input
-        aria-invalid="false"
-        aria-required="false"
-        class="c10 c11"
-        id="username"
-        style="size: default;"
-        type="text"
-        value=""
-      />
-    </div>
-    <div />
+      type="text"
+      value=""
+    />
   </div>
+  <div />
 </div>
 `;
 
 exports[`renders correctly for an input field with a hint 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1733,7 +1463,7 @@ exports[`renders correctly for an input field with a hint 1`] = `
   color: inherit;
 }
 
-.c9 {
+.c8 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1747,7 +1477,7 @@ exports[`renders correctly for an input field with a hint 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1761,40 +1491,14 @@ exports[`renders correctly for an input field with a hint 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c7 {
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1810,7 +1514,7 @@ exports[`renders correctly for an input field with a hint 1`] = `
   position: relative;
 }
 
-.c8 {
+.c7 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -1819,55 +1523,55 @@ exports[`renders correctly for an input field with a hint 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c8[disabled] {
+.c7[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c8:focus {
+.c7:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c8::-webkit-input-placeholder {
+.c7::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c8::-moz-placeholder {
+.c7::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c8:-ms-input-placeholder {
+.c7:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c8::placeholder {
+.c7::placeholder {
   opacity: 0.6;
 }
 
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   display: block;
 }
 
-abbr.c11 {
+abbr.c10 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c11 {
+i.c10 {
   font-style: italic;
 }
 
-kbd.c11 {
+kbd.c10 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -1875,102 +1579,98 @@ kbd.c11 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c11 {
+mark.c10 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c11 {
+strong.c10 {
   font-weight: bold;
 }
 
-sub.c11,
-sup.c11 {
+sub.c10,
+sup.c10 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c11,
-u.c11 {
+ins.c10,
+u.c10 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c11,
-cite.c11,
-var.c11,
-em.c11 {
+i.c10,
+cite.c10,
+var.c10,
+em.c10 {
   font-style: italic;
 }
 
-kbd.c11,
-pre.c11,
-samp.c11 {
+kbd.c10,
+pre.c10,
+samp.c10 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c11 .c12 {
+.c10 .c11 {
   top: 0.1em;
 }
 
-.c3 {
+.c2 {
   margin-bottom: 0 !important;
 }
 
-.c10 {
+.c9 {
   display: block;
   font-size: 0.8rem;
   margin-top: 0.25rem;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="align-items: center;"
   >
-    <div
-      class="c2 c1"
-      style="align-items: center;"
+    <label
+      class="c2 c3 c4 c5"
+      font-weight="600"
+      for="username"
+      style="font-weight: 600;"
     >
-      <label
-        class="c3 c4 c5 c6"
-        font-weight="600"
-        for="username"
-        style="font-weight: 600;"
-      >
-        Username
-      </label>
-    </div>
-    <div />
-    <div
-      class="c7 c1"
+      Username
+    </label>
+  </div>
+  <div />
+  <div
+    class="c6 c0"
+    style="size: default;"
+  >
+    <input
+      aria-invalid="false"
+      aria-required="false"
+      class="c7 c8"
+      id="username"
       style="size: default;"
-    >
-      <input
-        aria-invalid="false"
-        aria-required="false"
-        class="c8 c9"
-        id="username"
-        style="size: default;"
-        type="text"
-        value=""
-      />
-    </div>
-    <span
-      class="c10 c11 c1"
-    >
-      Must be awesome
-    </span>
+      type="text"
+      value=""
+    />
   </div>
+  <span
+    class="c9 c10 c0"
+  >
+    Must be awesome
+  </span>
 </div>
 `;
 
 exports[`renders correctly for an input field with a placeholder 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1983,7 +1683,7 @@ exports[`renders correctly for an input field with a placeholder 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1997,33 +1697,7 @@ exports[`renders correctly for an input field with a placeholder 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2039,7 +1713,7 @@ exports[`renders correctly for an input field with a placeholder 1`] = `
   position: relative;
 }
 
-.c3 {
+.c2 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -2048,65 +1722,61 @@ exports[`renders correctly for an input field with a placeholder 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c3[disabled] {
+.c2[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c3:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c3::-webkit-input-placeholder {
+.c2::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::-moz-placeholder {
+.c2::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c3:-ms-input-placeholder {
+.c2:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::placeholder {
+.c2::placeholder {
   opacity: 0.6;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
+  <div />
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="size: default;"
   >
-    <div />
-    <div
-      class="c2 c1"
+    <input
+      aria-invalid="false"
+      aria-required="false"
+      class="c2 c3"
+      placeholder="Awesome placeholder"
       style="size: default;"
-    >
-      <input
-        aria-invalid="false"
-        aria-required="false"
-        class="c3 c4"
-        placeholder="Awesome placeholder"
-        style="size: default;"
-        type="text"
-        value=""
-      />
-    </div>
-    <div />
+      type="text"
+      value=""
+    />
   </div>
+  <div />
 </div>
 `;
 
 exports[`renders correctly for an input with a after component 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2119,7 +1789,7 @@ exports[`renders correctly for an input with a after component 1`] = `
   color: inherit;
 }
 
-.c9 {
+.c8 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2133,7 +1803,7 @@ exports[`renders correctly for an input with a after component 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2146,37 +1816,11 @@ exports[`renders correctly for an input with a after component 1`] = `
   color: inherit;
 }
 
-.c4.c4.c4 {
+.c3.c3.c3 {
   position: absolute;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
+.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2187,21 +1831,21 @@ exports[`renders correctly for an input with a after component 1`] = `
   display: inline-flex;
 }
 
-.c7 {
+.c6 {
   fill: inherit;
   position: relative;
   height: 1em;
   width: 1em;
 }
 
-.c5 {
+.c4 {
   fill: #708da8;
   height: 2.5em;
   margin: 0 0.75em;
   top: 0;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2217,7 +1861,7 @@ exports[`renders correctly for an input with a after component 1`] = `
   position: relative;
 }
 
-.c8 {
+.c7 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -2226,89 +1870,85 @@ exports[`renders correctly for an input with a after component 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c8[disabled] {
+.c7[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c8:focus {
+.c7:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c8::-webkit-input-placeholder {
+.c7::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c8::-moz-placeholder {
+.c7::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c8:-ms-input-placeholder {
+.c7:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c8::placeholder {
+.c7::placeholder {
   opacity: 0.6;
 }
 
-.c8 {
+.c7 {
   padding-right: 2.3em;
 }
 
-.c10 .c6 {
+.c9 .c5 {
   top: 0.1em;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
+  <div />
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="size: default;"
   >
-    <div />
     <div
-      class="c2 c1"
-      style="size: default;"
+      class="c2 c3"
+      style="right: 0px; z-index: 3;"
     >
-      <div
-        class="c3 c4"
-        style="right: 0px; z-index: 3;"
+      <svg
+        class="c4 c5 c6 c0"
+        role="img"
+        size="1"
+        style="size: 1px;"
+        viewBox="0 0 16 16"
       >
-        <svg
-          class="c5 c6 c7 c1"
-          role="img"
-          size="1"
-          style="size: 1px;"
-          viewBox="0 0 16 16"
-        >
-          <path
-            d="M15.55 13.43l-2.67-2.68a6.94 6.94 0 0 0 1.11-3.76c0-3.87-3.13-7-7-7s-7 3.13-7 7 3.13 7 7 7c1.39 0 2.68-.42 3.76-1.11l2.68 2.67a1.498 1.498 0 1 0 2.12-2.12zm-8.56-1.44c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"
-            fill-rule="even-odd"
-          />
-        </svg>
-      </div>
-      <input
-        aria-invalid="false"
-        aria-required="false"
-        class="c8 c9"
-        style="size: default;"
-        type="text"
-        value=""
-      />
+        <path
+          d="M15.55 13.43l-2.67-2.68a6.94 6.94 0 0 0 1.11-3.76c0-3.87-3.13-7-7-7s-7 3.13-7 7 3.13 7 7 7c1.39 0 2.68-.42 3.76-1.11l2.68 2.67a1.498 1.498 0 1 0 2.12-2.12zm-8.56-1.44c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"
+          fill-rule="even-odd"
+        />
+      </svg>
     </div>
-    <div />
+    <input
+      aria-invalid="false"
+      aria-required="false"
+      class="c7 c8"
+      style="size: default;"
+      type="text"
+      value=""
+    />
   </div>
+  <div />
 </div>
 `;
 
 exports[`renders correctly for an input with a before component 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2321,7 +1961,7 @@ exports[`renders correctly for an input with a before component 1`] = `
   color: inherit;
 }
 
-.c9 {
+.c8 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2335,7 +1975,7 @@ exports[`renders correctly for an input with a before component 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2348,37 +1988,11 @@ exports[`renders correctly for an input with a before component 1`] = `
   color: inherit;
 }
 
-.c4.c4.c4 {
+.c3.c3.c3 {
   position: absolute;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
+.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2389,21 +2003,21 @@ exports[`renders correctly for an input with a before component 1`] = `
   display: inline-flex;
 }
 
-.c7 {
+.c6 {
   fill: inherit;
   position: relative;
   height: 1em;
   width: 1em;
 }
 
-.c5 {
+.c4 {
   fill: #708da8;
   height: 2.5em;
   margin: 0 0.75em;
   top: 0;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2419,7 +2033,7 @@ exports[`renders correctly for an input with a before component 1`] = `
   position: relative;
 }
 
-.c8 {
+.c7 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -2428,89 +2042,85 @@ exports[`renders correctly for an input with a before component 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c8[disabled] {
+.c7[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c8:focus {
+.c7:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c8::-webkit-input-placeholder {
+.c7::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c8::-moz-placeholder {
+.c7::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c8:-ms-input-placeholder {
+.c7:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c8::placeholder {
+.c7::placeholder {
   opacity: 0.6;
 }
 
-.c8 {
+.c7 {
   padding-left: 2.3em;
 }
 
-.c10 .c6 {
+.c9 .c5 {
   top: 0.1em;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
+  <div />
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="size: default;"
   >
-    <div />
     <div
-      class="c2 c1"
-      style="size: default;"
+      class="c2 c3"
+      style="z-index: 3;"
     >
-      <div
-        class="c3 c4"
-        style="z-index: 3;"
+      <svg
+        class="c4 c5 c6 c0"
+        role="img"
+        size="1"
+        style="size: 1px;"
+        viewBox="0 0 16 16"
       >
-        <svg
-          class="c5 c6 c7 c1"
-          role="img"
-          size="1"
-          style="size: 1px;"
-          viewBox="0 0 16 16"
-        >
-          <path
-            d="M15.55 13.43l-2.67-2.68a6.94 6.94 0 0 0 1.11-3.76c0-3.87-3.13-7-7-7s-7 3.13-7 7 3.13 7 7 7c1.39 0 2.68-.42 3.76-1.11l2.68 2.67a1.498 1.498 0 1 0 2.12-2.12zm-8.56-1.44c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"
-            fill-rule="even-odd"
-          />
-        </svg>
-      </div>
-      <input
-        aria-invalid="false"
-        aria-required="false"
-        class="c8 c9"
-        style="size: default;"
-        type="text"
-        value=""
-      />
+        <path
+          d="M15.55 13.43l-2.67-2.68a6.94 6.94 0 0 0 1.11-3.76c0-3.87-3.13-7-7-7s-7 3.13-7 7 3.13 7 7 7c1.39 0 2.68-.42 3.76-1.11l2.68 2.67a1.498 1.498 0 1 0 2.12-2.12zm-8.56-1.44c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"
+          fill-rule="even-odd"
+        />
+      </svg>
     </div>
-    <div />
+    <input
+      aria-invalid="false"
+      aria-required="false"
+      class="c7 c8"
+      style="size: default;"
+      type="text"
+      value=""
+    />
   </div>
+  <div />
 </div>
 `;
 
 exports[`renders correctly for an optional input field 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2523,7 +2133,7 @@ exports[`renders correctly for an optional input field 1`] = `
   color: inherit;
 }
 
-.c11 {
+.c10 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2537,7 +2147,7 @@ exports[`renders correctly for an optional input field 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2551,40 +2161,14 @@ exports[`renders correctly for an optional input field 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c9 {
+.c8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2600,7 +2184,7 @@ exports[`renders correctly for an optional input field 1`] = `
   position: relative;
 }
 
-.c10 {
+.c9 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -2609,55 +2193,55 @@ exports[`renders correctly for an optional input field 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c10[disabled] {
+.c9[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c10:focus {
+.c9:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c10::-webkit-input-placeholder {
+.c9::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c10::-moz-placeholder {
+.c9::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c10:-ms-input-placeholder {
+.c9:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c10::placeholder {
+.c9::placeholder {
   opacity: 0.6;
 }
 
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   display: block;
 }
 
-abbr.c8 {
+abbr.c7 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c8 {
+i.c7 {
   font-style: italic;
 }
 
-kbd.c8 {
+kbd.c7 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -2665,103 +2249,99 @@ kbd.c8 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c8 {
+mark.c7 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c8 {
+strong.c7 {
   font-weight: bold;
 }
 
-sub.c8,
-sup.c8 {
+sub.c7,
+sup.c7 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c8,
-u.c8 {
+ins.c7,
+u.c7 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c8,
-cite.c8,
-var.c8,
-em.c8 {
+i.c7,
+cite.c7,
+var.c7,
+em.c7 {
   font-style: italic;
 }
 
-kbd.c8,
-pre.c8,
-samp.c8 {
+kbd.c7,
+pre.c7,
+samp.c7 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c8 .c12 {
+.c7 .c11 {
   top: 0.1em;
 }
 
-.c3 {
+.c2 {
   margin-bottom: 0 !important;
 }
 
-.c7 {
+.c6 {
   font-size: 0.8rem;
   color: #708da8;
   margin-left: 0.5rem;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="align-items: center;"
   >
-    <div
-      class="c2 c1"
-      style="align-items: center;"
+    <label
+      class="c2 c3 c4 c5"
+      font-weight="600"
+      for="username"
+      style="font-weight: 600;"
     >
-      <label
-        class="c3 c4 c5 c6"
-        font-weight="600"
-        for="username"
-        style="font-weight: 600;"
-      >
-        Username
-      </label>
-      <span
-        class="c7 c8 c1"
-      >
-        OPTIONAL
-      </span>
-    </div>
-    <div />
-    <div
-      class="c9 c1"
-      style="size: default;"
+      Username
+    </label>
+    <span
+      class="c6 c7 c0"
     >
-      <input
-        aria-invalid="false"
-        aria-required="false"
-        class="c10 c11"
-        id="username"
-        style="size: default;"
-        type="text"
-        value=""
-      />
-    </div>
-    <div />
+      OPTIONAL
+    </span>
+  </div>
+  <div />
+  <div
+    class="c8 c0"
+    style="size: default;"
+  >
+    <input
+      aria-invalid="false"
+      aria-required="false"
+      class="c9 c10"
+      id="username"
+      style="size: default;"
+      type="text"
+      value=""
+    />
   </div>
+  <div />
 </div>
 `;
 
 exports[`sizes renders correctly for an input field with size large 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2774,7 +2354,7 @@ exports[`sizes renders correctly for an input field with size large 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2788,33 +2368,7 @@ exports[`sizes renders correctly for an input field with size large 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2830,11 +2384,11 @@ exports[`sizes renders correctly for an input field with size large 1`] = `
   position: relative;
 }
 
-.c2 {
+.c1 {
   font-size: 1.5rem;
 }
 
-.c3 {
+.c2 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -2843,36 +2397,36 @@ exports[`sizes renders correctly for an input field with size large 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c3[disabled] {
+.c2[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c3:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c3::-webkit-input-placeholder {
+.c2::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::-moz-placeholder {
+.c2::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c3:-ms-input-placeholder {
+.c2:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::placeholder {
+.c2::placeholder {
   opacity: 0.6;
 }
 
-.c3 + .c5 {
+.c2 + .c4 {
   width: 25px;
   height: 25px;
   top: 16px;
@@ -2880,34 +2434,30 @@ exports[`sizes renders correctly for an input field with size large 1`] = `
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
+  <div />
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="size: large;"
   >
-    <div />
-    <div
-      class="c2 c1"
+    <input
+      aria-invalid="false"
+      aria-required="false"
+      class="c2 c3"
       style="size: large;"
-    >
-      <input
-        aria-invalid="false"
-        aria-required="false"
-        class="c3 c4"
-        style="size: large;"
-        type="text"
-        value=""
-      />
-    </div>
-    <div />
+      type="text"
+      value=""
+    />
   </div>
+  <div />
 </div>
 `;
 
 exports[`sizes renders correctly for an input field with size medium 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2920,7 +2470,7 @@ exports[`sizes renders correctly for an input field with size medium 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2934,33 +2484,7 @@ exports[`sizes renders correctly for an input field with size medium 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2976,11 +2500,11 @@ exports[`sizes renders correctly for an input field with size medium 1`] = `
   position: relative;
 }
 
-.c2 {
+.c1 {
   font-size: 1.25rem;
 }
 
-.c3 {
+.c2 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -2989,36 +2513,36 @@ exports[`sizes renders correctly for an input field with size medium 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c3[disabled] {
+.c2[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c3:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c3::-webkit-input-placeholder {
+.c2::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::-moz-placeholder {
+.c2::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c3:-ms-input-placeholder {
+.c2:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::placeholder {
+.c2::placeholder {
   opacity: 0.6;
 }
 
-.c3 + .c5 {
+.c2 + .c4 {
   width: 20px;
   height: 20px;
   top: 15px;
@@ -3026,34 +2550,30 @@ exports[`sizes renders correctly for an input field with size medium 1`] = `
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
+  <div />
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="size: medium;"
   >
-    <div />
-    <div
-      class="c2 c1"
+    <input
+      aria-invalid="false"
+      aria-required="false"
+      class="c2 c3"
       style="size: medium;"
-    >
-      <input
-        aria-invalid="false"
-        aria-required="false"
-        class="c3 c4"
-        style="size: medium;"
-        type="text"
-        value=""
-      />
-    </div>
-    <div />
+      type="text"
+      value=""
+    />
   </div>
+  <div />
 </div>
 `;
 
 exports[`sizes renders correctly for an input field with size small 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3066,7 +2586,7 @@ exports[`sizes renders correctly for an input field with size small 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3080,33 +2600,7 @@ exports[`sizes renders correctly for an input field with size small 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3122,11 +2616,11 @@ exports[`sizes renders correctly for an input field with size small 1`] = `
   position: relative;
 }
 
-.c2 {
+.c1 {
   font-size: 0.8rem;
 }
 
-.c3 {
+.c2 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -3135,70 +2629,66 @@ exports[`sizes renders correctly for an input field with size small 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c3[disabled] {
+.c2[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c3:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c3::-webkit-input-placeholder {
+.c2::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::-moz-placeholder {
+.c2::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c3:-ms-input-placeholder {
+.c2:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::placeholder {
+.c2::placeholder {
   opacity: 0.6;
 }
 
-.c3 + .c5 {
+.c2 + .c4 {
   width: 10px;
   height: 10px;
   top: 10px;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
+  <div />
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="size: small;"
   >
-    <div />
-    <div
-      class="c2 c1"
+    <input
+      aria-invalid="false"
+      aria-required="false"
+      class="c2 c3"
       style="size: small;"
-    >
-      <input
-        aria-invalid="false"
-        aria-required="false"
-        class="c3 c4"
-        style="size: small;"
-        type="text"
-        value=""
-      />
-    </div>
-    <div />
+      type="text"
+      value=""
+    />
   </div>
+  <div />
 </div>
 `;
 
 exports[`states renders correctly for an input field with state danger 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3211,7 +2701,7 @@ exports[`states renders correctly for an input field with state danger 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3225,33 +2715,7 @@ exports[`states renders correctly for an input field with state danger 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3267,7 +2731,7 @@ exports[`states renders correctly for an input field with state danger 1`] = `
   position: relative;
 }
 
-.c3 {
+.c2 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -3276,69 +2740,65 @@ exports[`states renders correctly for an input field with state danger 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c3[disabled] {
+.c2[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c3:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c3::-webkit-input-placeholder {
+.c2::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::-moz-placeholder {
+.c2::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c3:-ms-input-placeholder {
+.c2:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::placeholder {
+.c2::placeholder {
   opacity: 0.6;
 }
 
-.c3 {
+.c2 {
   border-color: #e24c67;
   box-shadow: #e24c67 0px 0px 0px 1px !important;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
+  <div />
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="size: default;"
   >
-    <div />
-    <div
-      class="c2 c1"
+    <input
+      aria-invalid="true"
+      aria-required="false"
+      class="c2 c3"
       style="size: default;"
-    >
-      <input
-        aria-invalid="true"
-        aria-required="false"
-        class="c3 c4"
-        style="size: default;"
-        type="text"
-        value=""
-      />
-    </div>
-    <div />
+      type="text"
+      value=""
+    />
   </div>
+  <div />
 </div>
 `;
 
 exports[`states renders correctly for an input field with state primary 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3351,7 +2811,7 @@ exports[`states renders correctly for an input field with state primary 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3365,33 +2825,7 @@ exports[`states renders correctly for an input field with state primary 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3407,7 +2841,7 @@ exports[`states renders correctly for an input field with state primary 1`] = `
   position: relative;
 }
 
-.c3 {
+.c2 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -3416,69 +2850,65 @@ exports[`states renders correctly for an input field with state primary 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c3[disabled] {
+.c2[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c3:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c3::-webkit-input-placeholder {
+.c2::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::-moz-placeholder {
+.c2::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c3:-ms-input-placeholder {
+.c2:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::placeholder {
+.c2::placeholder {
   opacity: 0.6;
 }
 
-.c3 {
+.c2 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
+  <div />
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="size: default;"
   >
-    <div />
-    <div
-      class="c2 c1"
+    <input
+      aria-invalid="false"
+      aria-required="false"
+      class="c2 c3"
       style="size: default;"
-    >
-      <input
-        aria-invalid="false"
-        aria-required="false"
-        class="c3 c4"
-        style="size: default;"
-        type="text"
-        value=""
-      />
-    </div>
-    <div />
+      type="text"
+      value=""
+    />
   </div>
+  <div />
 </div>
 `;
 
 exports[`states renders correctly for an input field with state success 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3491,7 +2921,7 @@ exports[`states renders correctly for an input field with state success 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3505,33 +2935,7 @@ exports[`states renders correctly for an input field with state success 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3547,7 +2951,7 @@ exports[`states renders correctly for an input field with state success 1`] = `
   position: relative;
 }
 
-.c3 {
+.c2 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -3556,69 +2960,65 @@ exports[`states renders correctly for an input field with state success 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c3[disabled] {
+.c2[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c3:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c3::-webkit-input-placeholder {
+.c2::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::-moz-placeholder {
+.c2::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c3:-ms-input-placeholder {
+.c2:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::placeholder {
+.c2::placeholder {
   opacity: 0.6;
 }
 
-.c3 {
+.c2 {
   border-color: #4ca26c;
   box-shadow: #4ca26c 0px 0px 0px 1px !important;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
+  <div />
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="size: default;"
   >
-    <div />
-    <div
-      class="c2 c1"
+    <input
+      aria-invalid="false"
+      aria-required="false"
+      class="c2 c3"
       style="size: default;"
-    >
-      <input
-        aria-invalid="false"
-        aria-required="false"
-        class="c3 c4"
-        style="size: default;"
-        type="text"
-        value=""
-      />
-    </div>
-    <div />
+      type="text"
+      value=""
+    />
   </div>
+  <div />
 </div>
 `;
 
 exports[`states renders correctly for an input field with state warning 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3631,7 +3031,7 @@ exports[`states renders correctly for an input field with state warning 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3645,33 +3045,7 @@ exports[`states renders correctly for an input field with state warning 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3687,7 +3061,7 @@ exports[`states renders correctly for an input field with state warning 1`] = `
   position: relative;
 }
 
-.c3 {
+.c2 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -3696,69 +3070,65 @@ exports[`states renders correctly for an input field with state warning 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c3[disabled] {
+.c2[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c3:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c3::-webkit-input-placeholder {
+.c2::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::-moz-placeholder {
+.c2::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c3:-ms-input-placeholder {
+.c2:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::placeholder {
+.c2::placeholder {
   opacity: 0.6;
 }
 
-.c3 {
+.c2 {
   border-color: #ffc94c;
   box-shadow: #ffc94c 0px 0px 0px 1px !important;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
+  <div />
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="size: default;"
   >
-    <div />
-    <div
-      class="c2 c1"
+    <input
+      aria-invalid="false"
+      aria-required="false"
+      class="c2 c3"
       style="size: default;"
-    >
-      <input
-        aria-invalid="false"
-        aria-required="false"
-        class="c3 c4"
-        style="size: default;"
-        type="text"
-        value=""
-      />
-    </div>
-    <div />
+      type="text"
+      value=""
+    />
   </div>
+  <div />
 </div>
 `;
 
 exports[`types renders correctly for an input field with type date 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3771,7 +3141,7 @@ exports[`types renders correctly for an input field with type date 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3785,33 +3155,7 @@ exports[`types renders correctly for an input field with type date 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3827,7 +3171,7 @@ exports[`types renders correctly for an input field with type date 1`] = `
   position: relative;
 }
 
-.c3 {
+.c2 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -3836,64 +3180,60 @@ exports[`types renders correctly for an input field with type date 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c3[disabled] {
+.c2[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c3:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c3::-webkit-input-placeholder {
+.c2::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::-moz-placeholder {
+.c2::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c3:-ms-input-placeholder {
+.c2:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::placeholder {
+.c2::placeholder {
   opacity: 0.6;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
+  <div />
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="size: default;"
   >
-    <div />
-    <div
-      class="c2 c1"
+    <input
+      aria-invalid="false"
+      aria-required="false"
+      class="c2 c3"
       style="size: default;"
-    >
-      <input
-        aria-invalid="false"
-        aria-required="false"
-        class="c3 c4"
-        style="size: default;"
-        type="date"
-        value=""
-      />
-    </div>
-    <div />
+      type="date"
+      value=""
+    />
   </div>
+  <div />
 </div>
 `;
 
 exports[`types renders correctly for an input field with type email 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3906,7 +3246,7 @@ exports[`types renders correctly for an input field with type email 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3920,33 +3260,7 @@ exports[`types renders correctly for an input field with type email 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3962,7 +3276,7 @@ exports[`types renders correctly for an input field with type email 1`] = `
   position: relative;
 }
 
-.c3 {
+.c2 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -3971,64 +3285,60 @@ exports[`types renders correctly for an input field with type email 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c3[disabled] {
+.c2[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c3:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c3::-webkit-input-placeholder {
+.c2::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::-moz-placeholder {
+.c2::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c3:-ms-input-placeholder {
+.c2:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::placeholder {
+.c2::placeholder {
   opacity: 0.6;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
+  <div />
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="size: default;"
   >
-    <div />
-    <div
-      class="c2 c1"
+    <input
+      aria-invalid="false"
+      aria-required="false"
+      class="c2 c3"
       style="size: default;"
-    >
-      <input
-        aria-invalid="false"
-        aria-required="false"
-        class="c3 c4"
-        style="size: default;"
-        type="email"
-        value=""
-      />
-    </div>
-    <div />
+      type="email"
+      value=""
+    />
   </div>
+  <div />
 </div>
 `;
 
 exports[`types renders correctly for an input field with type number 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -4041,7 +3351,7 @@ exports[`types renders correctly for an input field with type number 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -4055,33 +3365,7 @@ exports[`types renders correctly for an input field with type number 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4097,7 +3381,7 @@ exports[`types renders correctly for an input field with type number 1`] = `
   position: relative;
 }
 
-.c3 {
+.c2 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -4106,64 +3390,60 @@ exports[`types renders correctly for an input field with type number 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c3[disabled] {
+.c2[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c3:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c3::-webkit-input-placeholder {
+.c2::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::-moz-placeholder {
+.c2::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c3:-ms-input-placeholder {
+.c2:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::placeholder {
+.c2::placeholder {
   opacity: 0.6;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
+  <div />
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="size: default;"
   >
-    <div />
-    <div
-      class="c2 c1"
+    <input
+      aria-invalid="false"
+      aria-required="false"
+      class="c2 c3"
       style="size: default;"
-    >
-      <input
-        aria-invalid="false"
-        aria-required="false"
-        class="c3 c4"
-        style="size: default;"
-        type="number"
-        value=""
-      />
-    </div>
-    <div />
+      type="number"
+      value=""
+    />
   </div>
+  <div />
 </div>
 `;
 
 exports[`types renders correctly for an input field with type password 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -4176,7 +3456,7 @@ exports[`types renders correctly for an input field with type password 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -4190,33 +3470,7 @@ exports[`types renders correctly for an input field with type password 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4232,7 +3486,7 @@ exports[`types renders correctly for an input field with type password 1`] = `
   position: relative;
 }
 
-.c3 {
+.c2 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -4241,64 +3495,60 @@ exports[`types renders correctly for an input field with type password 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c3[disabled] {
+.c2[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c3:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c3::-webkit-input-placeholder {
+.c2::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::-moz-placeholder {
+.c2::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c3:-ms-input-placeholder {
+.c2:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::placeholder {
+.c2::placeholder {
   opacity: 0.6;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
+  <div />
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="size: default;"
   >
-    <div />
-    <div
-      class="c2 c1"
+    <input
+      aria-invalid="false"
+      aria-required="false"
+      class="c2 c3"
       style="size: default;"
-    >
-      <input
-        aria-invalid="false"
-        aria-required="false"
-        class="c3 c4"
-        style="size: default;"
-        type="password"
-        value=""
-      />
-    </div>
-    <div />
+      type="password"
+      value=""
+    />
   </div>
+  <div />
 </div>
 `;
 
 exports[`types renders correctly for an input field with type search 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -4311,7 +3561,7 @@ exports[`types renders correctly for an input field with type search 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -4325,33 +3575,7 @@ exports[`types renders correctly for an input field with type search 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4367,7 +3591,7 @@ exports[`types renders correctly for an input field with type search 1`] = `
   position: relative;
 }
 
-.c3 {
+.c2 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -4376,64 +3600,60 @@ exports[`types renders correctly for an input field with type search 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c3[disabled] {
+.c2[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c3:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c3::-webkit-input-placeholder {
+.c2::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::-moz-placeholder {
+.c2::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c3:-ms-input-placeholder {
+.c2:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::placeholder {
+.c2::placeholder {
   opacity: 0.6;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
+  <div />
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="size: default;"
   >
-    <div />
-    <div
-      class="c2 c1"
+    <input
+      aria-invalid="false"
+      aria-required="false"
+      class="c2 c3"
       style="size: default;"
-    >
-      <input
-        aria-invalid="false"
-        aria-required="false"
-        class="c3 c4"
-        style="size: default;"
-        type="search"
-        value=""
-      />
-    </div>
-    <div />
+      type="search"
+      value=""
+    />
   </div>
+  <div />
 </div>
 `;
 
 exports[`types renders correctly for an input field with type tel 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -4446,7 +3666,7 @@ exports[`types renders correctly for an input field with type tel 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -4460,33 +3680,7 @@ exports[`types renders correctly for an input field with type tel 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4502,7 +3696,7 @@ exports[`types renders correctly for an input field with type tel 1`] = `
   position: relative;
 }
 
-.c3 {
+.c2 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -4511,64 +3705,60 @@ exports[`types renders correctly for an input field with type tel 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c3[disabled] {
+.c2[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c3:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c3::-webkit-input-placeholder {
+.c2::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::-moz-placeholder {
+.c2::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c3:-ms-input-placeholder {
+.c2:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::placeholder {
+.c2::placeholder {
   opacity: 0.6;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
+  <div />
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="size: default;"
   >
-    <div />
-    <div
-      class="c2 c1"
+    <input
+      aria-invalid="false"
+      aria-required="false"
+      class="c2 c3"
       style="size: default;"
-    >
-      <input
-        aria-invalid="false"
-        aria-required="false"
-        class="c3 c4"
-        style="size: default;"
-        type="tel"
-        value=""
-      />
-    </div>
-    <div />
+      type="tel"
+      value=""
+    />
   </div>
+  <div />
 </div>
 `;
 
 exports[`types renders correctly for an input field with type time 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -4581,7 +3771,7 @@ exports[`types renders correctly for an input field with type time 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -4595,33 +3785,7 @@ exports[`types renders correctly for an input field with type time 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4637,7 +3801,7 @@ exports[`types renders correctly for an input field with type time 1`] = `
   position: relative;
 }
 
-.c3 {
+.c2 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -4646,64 +3810,60 @@ exports[`types renders correctly for an input field with type time 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c3[disabled] {
+.c2[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c3:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c3::-webkit-input-placeholder {
+.c2::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::-moz-placeholder {
+.c2::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c3:-ms-input-placeholder {
+.c2:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::placeholder {
+.c2::placeholder {
   opacity: 0.6;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
+  <div />
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="size: default;"
   >
-    <div />
-    <div
-      class="c2 c1"
+    <input
+      aria-invalid="false"
+      aria-required="false"
+      class="c2 c3"
       style="size: default;"
-    >
-      <input
-        aria-invalid="false"
-        aria-required="false"
-        class="c3 c4"
-        style="size: default;"
-        type="time"
-        value=""
-      />
-    </div>
-    <div />
+      type="time"
+      value=""
+    />
   </div>
+  <div />
 </div>
 `;
 
 exports[`types renders correctly for an input field with type url 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -4716,7 +3876,7 @@ exports[`types renders correctly for an input field with type url 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -4730,33 +3890,7 @@ exports[`types renders correctly for an input field with type url 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4772,7 +3906,7 @@ exports[`types renders correctly for an input field with type url 1`] = `
   position: relative;
 }
 
-.c3 {
+.c2 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -4781,58 +3915,54 @@ exports[`types renders correctly for an input field with type url 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c3[disabled] {
+.c2[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c3:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c3::-webkit-input-placeholder {
+.c2::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::-moz-placeholder {
+.c2::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c3:-ms-input-placeholder {
+.c2:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c3::placeholder {
+.c2::placeholder {
   opacity: 0.6;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
+  <div />
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="size: default;"
   >
-    <div />
-    <div
-      class="c2 c1"
+    <input
+      aria-invalid="false"
+      aria-required="false"
+      class="c2 c3"
       style="size: default;"
-    >
-      <input
-        aria-invalid="false"
-        aria-required="false"
-        class="c3 c4"
-        style="size: default;"
-        type="url"
-        value=""
-      />
-    </div>
-    <div />
+      type="url"
+      value=""
+    />
   </div>
+  <div />
 </div>
 `;
diff --git a/src/Label/__tests__/__snapshots__/Label.test.js.snap b/src/Label/__tests__/__snapshots__/Label.test.js.snap
index 1cd727034..7c38f0595 100644
--- a/src/Label/__tests__/__snapshots__/Label.test.js.snap
+++ b/src/Label/__tests__/__snapshots__/Label.test.js.snap
@@ -1,20 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly for a basic label 1`] = `
-.c1 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
-}
-
-.c4 {
+.c2 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -28,49 +15,19 @@ exports[`renders correctly for a basic label 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
+.c1 {
   display: inline-block;
 }
 
-.c2 {
+.c0 {
   display: block;
 }
 
-<div
-  class="c0 c1"
+<label
+  class="c0 c1 c2"
+  font-weight="600"
+  style="font-weight: 600;"
 >
-  <label
-    class="c2 c3 c4"
-    font-weight="600"
-    style="font-weight: 600;"
-  >
-    Hello world
-  </label>
-</div>
+  Hello world
+</label>
 `;
diff --git a/src/Link/__tests__/__snapshots__/Link.test.js.snap b/src/Link/__tests__/__snapshots__/Link.test.js.snap
index aa448939a..3d07e57f0 100644
--- a/src/Link/__tests__/__snapshots__/Link.test.js.snap
+++ b/src/Link/__tests__/__snapshots__/Link.test.js.snap
@@ -2,19 +2,6 @@
 
 exports[`renders correctly for a basic link 1`] = `
 .c1 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
-}
-
-.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -28,32 +15,6 @@ exports[`renders correctly for a basic link 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   color: #3926a5;
   fill: #3926a5;
   cursor: pointer;
@@ -63,22 +24,18 @@ exports[`renders correctly for a basic link 1`] = `
   text-decoration-skip: ink edges;
 }
 
-.c2:hover {
+.c0:hover {
   color: #000;
   fill: #000;
 }
 
-.c2 .c4 {
+.c0 .c2 {
   top: 0.1em;
 }
 
-<div
+<a
   class="c0 c1"
 >
-  <a
-    class="c2 c3"
-  >
-    test
-  </a>
-</div>
+  test
+</a>
 `;
diff --git a/src/List/__tests__/__snapshots__/List.test.js.snap b/src/List/__tests__/__snapshots__/List.test.js.snap
index 7be77994a..07dd03441 100644
--- a/src/List/__tests__/__snapshots__/List.test.js.snap
+++ b/src/List/__tests__/__snapshots__/List.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly for a basic list 1`] = `
-.c1 {
+.c2 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -14,77 +14,47 @@ exports[`renders correctly for a basic list 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c4 {
+.c3 {
   margin-bottom: 0.2rem;
 }
 
-.c3 {
+.c1 {
   list-style: unset;
   list-style-type: none;
 }
 
-.c3 .c2 {
+.c1 .c0 {
   margin-left: 1rem;
 }
 
-<div
-  class="c0 c1"
+<ul
+  class="c0 c1 c2"
 >
-  <ul
-    class="c2 c3 c1"
+  <li
+    class="c3 c2"
   >
-    <li
-      class="c4 c1"
-    >
-      Item 1
-    </li>
-    <li
-      class="c4 c1"
-    >
-      Item 2
-    </li>
-    <li
-      class="c4 c1"
-    >
-      Item 3
-    </li>
-    <li
-      class="c4 c1"
-    >
-      Item 4
-    </li>
-  </ul>
-</div>
+    Item 1
+  </li>
+  <li
+    class="c3 c2"
+  >
+    Item 2
+  </li>
+  <li
+    class="c3 c2"
+  >
+    Item 3
+  </li>
+  <li
+    class="c3 c2"
+  >
+    Item 4
+  </li>
+</ul>
 `;
 
 exports[`renders correctly for a list with styles 1`] = `
-.c1 {
+.c2 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -97,101 +67,71 @@ exports[`renders correctly for a list with styles 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c4 {
+.c3 {
   margin-bottom: 0.2rem;
 }
 
-.c3 {
+.c1 {
   list-style: unset;
   list-style-type: none;
 }
 
-.c3 .c2 {
+.c1 .c0 {
   margin-left: 1rem;
 }
 
-<div
-  class="c0 c1"
->
-  <div>
-    <ul
-      class="c2 c3 c1"
-      style="list-style-type: disc; list-style-position: inside;"
+<div>
+  <ul
+    class="c0 c1 c2"
+    style="list-style-type: disc; list-style-position: inside;"
+  >
+    <li
+      class="c3 c2"
     >
-      <li
-        class="c4 c1"
-      >
-        Item 1
-      </li>
-      <li
-        class="c4 c1"
-      >
-        Item 2
-      </li>
-    </ul>
+      Item 1
+    </li>
+    <li
+      class="c3 c2"
+    >
+      Item 2
+    </li>
+  </ul>
+  <ul
+    class="c0 c1 c2"
+    style="list-style-type: circle; list-style-position: inside;"
+  >
+    <li
+      class="c3 c2"
+    >
+      Item 1
+    </li>
+    <li
+      class="c3 c2"
+      style="list-style-type: georgian;"
+    >
+      Item 2
+    </li>
     <ul
-      class="c2 c3 c1"
-      style="list-style-type: circle; list-style-position: inside;"
+      class="c0 c1 c2"
+      style="list-style-type: circle;"
     >
       <li
-        class="c4 c1"
+        class="c3 c2"
       >
         Item 1
       </li>
       <li
-        class="c4 c1"
-        style="list-style-type: georgian;"
+        class="c3 c2"
       >
         Item 2
       </li>
-      <ul
-        class="c2 c3 c1"
-        style="list-style-type: circle;"
-      >
-        <li
-          class="c4 c1"
-        >
-          Item 1
-        </li>
-        <li
-          class="c4 c1"
-        >
-          Item 2
-        </li>
-      </ul>
     </ul>
-  </div>
+  </ul>
 </div>
 `;
 
 exports[`renders correctly for horizontal lists 1`] = `
-.c1 {
+.c2 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -204,101 +144,71 @@ exports[`renders correctly for horizontal lists 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c4 {
+.c3 {
   margin-bottom: 0.2rem;
 }
 
-.c5 .c2 {
+.c4 .c0 {
   margin-left: 1rem;
 }
 
-.c6 .c2 {
+.c5 .c0 {
   margin-left: 1rem;
 }
 
-.c6 .c2 {
+.c5 .c0 {
   list-style-type: lower-alpha;
 }
 
-.c6 .c2 .c2 {
+.c5 .c0 .c0 {
   list-style-type: lower-roman;
 }
 
-.c3 {
+.c1 {
   list-style: unset;
   list-style-type: none;
 }
 
-.c3 .c2 {
+.c1 .c0 {
   margin-left: 1rem;
 }
 
-.c3 li {
+.c1 li {
   display: inline-block;
   margin-right: 1rem;
   margin-bottom: unset;
 }
 
-<div
-  class="c0 c1"
->
-  <div>
-    <ul
-      class="c2 c3 c1"
+<div>
+  <ul
+    class="c0 c1 c2"
+  >
+    <li
+      class="c3 c2"
     >
-      <li
-        class="c4 c1"
-      >
-        Item 1
-      </li>
-      <li
-        class="c4 c1"
-      >
-        Item 2
-      </li>
-      <li
-        class="c4 c1"
-      >
-        Item 3
-      </li>
-      <li
-        class="c4 c1"
-      >
-        Item 4
-      </li>
-    </ul>
-  </div>
+      Item 1
+    </li>
+    <li
+      class="c3 c2"
+    >
+      Item 2
+    </li>
+    <li
+      class="c3 c2"
+    >
+      Item 3
+    </li>
+    <li
+      class="c3 c2"
+    >
+      Item 4
+    </li>
+  </ul>
 </div>
 `;
 
 exports[`renders correctly for ordered lists 1`] = `
-.c1 {
+.c2 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -311,98 +221,68 @@ exports[`renders correctly for ordered lists 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c4 {
+.c3 {
   margin-bottom: 0.2rem;
 }
 
-.c5 .c2 {
+.c4 .c0 {
   margin-left: 1rem;
 }
 
-.c3 {
+.c1 {
   list-style: unset;
   list-style-type: none;
 }
 
-.c3 .c2 {
+.c1 .c0 {
   margin-left: 1rem;
 }
 
-.c3 {
+.c1 {
   list-style-type: decimal;
 }
 
-.c3 .c2 {
+.c1 .c0 {
   list-style-type: lower-alpha;
 }
 
-.c3 .c2 .c2 {
+.c1 .c0 .c0 {
   list-style-type: lower-roman;
 }
 
-<div
-  class="c0 c1"
->
-  <div>
+<div>
+  <ol
+    class="c0 c1 c2"
+    style="list-style-position: inside;"
+  >
+    <li
+      class="c3 c2"
+    >
+      Item 1
+    </li>
+    <li
+      class="c3 c2"
+    >
+      Item 2
+    </li>
     <ol
-      class="c2 c3 c1"
-      style="list-style-position: inside;"
+      class="c0 c1 c2"
     >
       <li
-        class="c4 c1"
-      >
-        Item 1
-      </li>
-      <li
-        class="c4 c1"
+        class="c3 c2"
       >
-        Item 2
+        Item 3
       </li>
       <ol
-        class="c2 c3 c1"
+        class="c0 c1 c2"
       >
         <li
-          class="c4 c1"
+          class="c3 c2"
         >
-          Item 3
+          Item 4
         </li>
-        <ol
-          class="c2 c3 c1"
-        >
-          <li
-            class="c4 c1"
-          >
-            Item 4
-          </li>
-        </ol>
       </ol>
     </ol>
-  </div>
+  </ol>
 </div>
 `;
diff --git a/src/Pane/__tests__/__snapshots__/Pane.test.js.snap b/src/Pane/__tests__/__snapshots__/Pane.test.js.snap
index f6c8dd505..94f08976b 100644
--- a/src/Pane/__tests__/__snapshots__/Pane.test.js.snap
+++ b/src/Pane/__tests__/__snapshots__/Pane.test.js.snap
@@ -15,32 +15,6 @@ exports[`renders correctly for a basic pane 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   background-color: white;
   border-radius: 3px;
   display: -webkit-inline-box;
@@ -55,11 +29,7 @@ exports[`renders correctly for a basic pane 1`] = `
 <div
   class="c0 c1"
 >
-  <div
-    class="c2 c1"
-  >
-    test
-  </div>
+  test
 </div>
 `;
 
@@ -78,32 +48,6 @@ exports[`renders correctly for a full width pane 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   background-color: white;
   border-radius: 3px;
   display: -webkit-inline-box;
@@ -119,11 +63,7 @@ exports[`renders correctly for a full width pane 1`] = `
 <div
   class="c0 c1"
 >
-  <div
-    class="c2 c1"
-  >
-    test
-  </div>
+  test
 </div>
 `;
 
@@ -142,32 +82,6 @@ exports[`renders correctly for a pane with a border 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   background-color: white;
   border-radius: 3px;
   display: -webkit-inline-box;
@@ -183,11 +97,7 @@ exports[`renders correctly for a pane with a border 1`] = `
 <div
   class="c0 c1"
 >
-  <div
-    class="c2 c1"
-  >
-    test
-  </div>
+  test
 </div>
 `;
 
@@ -206,32 +116,6 @@ exports[`renders correctly for a pane with a shadow 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   background-color: white;
   border-radius: 3px;
   display: -webkit-inline-box;
@@ -247,10 +131,6 @@ exports[`renders correctly for a pane with a shadow 1`] = `
 <div
   class="c0 c1"
 >
-  <div
-    class="c2 c1"
-  >
-    test
-  </div>
+  test
 </div>
 `;
diff --git a/src/Paragraph/__tests__/__snapshots__/Paragraph.test.js.snap b/src/Paragraph/__tests__/__snapshots__/Paragraph.test.js.snap
index d9e31dd33..b5d7bf733 100644
--- a/src/Paragraph/__tests__/__snapshots__/Paragraph.test.js.snap
+++ b/src/Paragraph/__tests__/__snapshots__/Paragraph.test.js.snap
@@ -14,47 +14,17 @@ exports[`renders correctly for a basic paragraph 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2:not(:last-child) {
+.c0:not(:last-child) {
   margin: 0 0 1rem;
 }
 
-.c2 .c3 {
+.c0 .c2 {
   top: 0.1em;
 }
 
-<div
+<p
   class="c0 c1"
 >
-  <p
-    class="c2 c1"
-  >
-    test
-  </p>
-</div>
+  test
+</p>
 `;
diff --git a/src/Radio/__tests__/__snapshots__/Radio.test.js.snap b/src/Radio/__tests__/__snapshots__/Radio.test.js.snap
index 51d81d118..8ea9cfa92 100644
--- a/src/Radio/__tests__/__snapshots__/Radio.test.js.snap
+++ b/src/Radio/__tests__/__snapshots__/Radio.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly for a basic radio 1`] = `
-.c1 {
+.c2 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -14,7 +14,7 @@ exports[`renders correctly for a basic radio 1`] = `
   color: inherit;
 }
 
-.c5 {
+.c4 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -27,7 +27,7 @@ exports[`renders correctly for a basic radio 1`] = `
   color: inherit;
 }
 
-.c9 {
+.c8 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -41,44 +41,18 @@ exports[`renders correctly for a basic radio 1`] = `
   margin-left: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-abbr.c8 {
+abbr.c7 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c8 {
+i.c7 {
   font-style: italic;
 }
 
-kbd.c8 {
+kbd.c7 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -86,50 +60,50 @@ kbd.c8 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c8 {
+mark.c7 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c8 {
+strong.c7 {
   font-weight: bold;
 }
 
-sub.c8,
-sup.c8 {
+sub.c7,
+sup.c7 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c8,
-u.c8 {
+ins.c7,
+u.c7 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c8,
-cite.c8,
-var.c8,
-em.c8 {
+i.c7,
+cite.c7,
+var.c7,
+em.c7 {
   font-style: italic;
 }
 
-kbd.c8,
-pre.c8,
-samp.c8 {
+kbd.c7,
+pre.c7,
+samp.c7 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c8 .c10 {
+.c7 .c9 {
   top: 0.1em;
 }
 
-.c3 {
+.c1 {
   display: inline-block;
 }
 
-.c7 {
+.c6 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 100%;
@@ -138,7 +112,7 @@ samp.c8 {
   width: 1em;
 }
 
-.c4 {
+.c3 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -148,26 +122,26 @@ samp.c8 {
   width: 1px;
 }
 
-.c4[disabled] + .c6 {
+.c3[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c4:checked:focus + .c6 {
+.c3:checked:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4:focus + .c6 {
+.c3:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4:not([disabled]):checked + .c6 {
+.c3:not([disabled]):checked + .c5 {
   border-color: #7467c0;
 }
 
-.c4:checked + .c6::before {
+.c3:checked + .c5::before {
   background: #7467c0;
   border-radius: 50%;
   content: '';
@@ -181,11 +155,11 @@ samp.c8 {
   width: 8px;
 }
 
-.c4[disabled]:checked + .c6::before {
+.c3[disabled]:checked + .c5::before {
   background: #9a9a9a;
 }
 
-.c2 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -196,33 +170,29 @@ samp.c8 {
   align-items: center;
 }
 
-<div
-  class="c0 c1"
+<label
+  aria-describedby="label"
+  aria-invalid="false"
+  aria-required="false"
+  class="c0 c1 c2"
 >
-  <label
-    aria-describedby="label"
-    aria-invalid="false"
-    aria-required="false"
-    class="c2 c3 c1"
-  >
-    <input
-      class="c4 c5"
-      type="radio"
-      value=""
-    />
-    <div
-      class="c6 c7 c1"
-    />
-    <span
-      class="c8 c9"
-      id="label"
-    />
-  </label>
-</div>
+  <input
+    class="c3 c4"
+    type="radio"
+    value=""
+  />
+  <div
+    class="c5 c6 c2"
+  />
+  <span
+    class="c7 c8"
+    id="label"
+  />
+</label>
 `;
 
 exports[`renders correctly for a disabled radio 1`] = `
-.c1 {
+.c2 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -235,7 +205,7 @@ exports[`renders correctly for a disabled radio 1`] = `
   color: inherit;
 }
 
-.c5 {
+.c4 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -248,7 +218,7 @@ exports[`renders correctly for a disabled radio 1`] = `
   color: inherit;
 }
 
-.c9 {
+.c8 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -262,44 +232,18 @@ exports[`renders correctly for a disabled radio 1`] = `
   margin-left: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-abbr.c8 {
+abbr.c7 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c8 {
+i.c7 {
   font-style: italic;
 }
 
-kbd.c8 {
+kbd.c7 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -307,50 +251,50 @@ kbd.c8 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c8 {
+mark.c7 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c8 {
+strong.c7 {
   font-weight: bold;
 }
 
-sub.c8,
-sup.c8 {
+sub.c7,
+sup.c7 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c8,
-u.c8 {
+ins.c7,
+u.c7 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c8,
-cite.c8,
-var.c8,
-em.c8 {
+i.c7,
+cite.c7,
+var.c7,
+em.c7 {
   font-style: italic;
 }
 
-kbd.c8,
-pre.c8,
-samp.c8 {
+kbd.c7,
+pre.c7,
+samp.c7 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c8 .c10 {
+.c7 .c9 {
   top: 0.1em;
 }
 
-.c3 {
+.c1 {
   display: inline-block;
 }
 
-.c7 {
+.c6 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 100%;
@@ -359,7 +303,7 @@ samp.c8 {
   width: 1em;
 }
 
-.c4 {
+.c3 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -369,26 +313,26 @@ samp.c8 {
   width: 1px;
 }
 
-.c4[disabled] + .c6 {
+.c3[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c4:checked:focus + .c6 {
+.c3:checked:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4:focus + .c6 {
+.c3:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4:not([disabled]):checked + .c6 {
+.c3:not([disabled]):checked + .c5 {
   border-color: #7467c0;
 }
 
-.c4:checked + .c6::before {
+.c3:checked + .c5::before {
   background: #7467c0;
   border-radius: 50%;
   content: '';
@@ -402,11 +346,11 @@ samp.c8 {
   width: 8px;
 }
 
-.c4[disabled]:checked + .c6::before {
+.c3[disabled]:checked + .c5::before {
   background: #9a9a9a;
 }
 
-.c2 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -417,34 +361,30 @@ samp.c8 {
   align-items: center;
 }
 
-<div
-  class="c0 c1"
+<label
+  aria-describedby="label"
+  aria-invalid="false"
+  aria-required="false"
+  class="c0 c1 c2"
 >
-  <label
-    aria-describedby="label"
-    aria-invalid="false"
-    aria-required="false"
-    class="c2 c3 c1"
-  >
-    <input
-      class="c4 c5"
-      disabled=""
-      type="radio"
-      value=""
-    />
-    <div
-      class="c6 c7 c1"
-    />
-    <span
-      class="c8 c9"
-      id="label"
-    />
-  </label>
-</div>
+  <input
+    class="c3 c4"
+    disabled=""
+    type="radio"
+    value=""
+  />
+  <div
+    class="c5 c6 c2"
+  />
+  <span
+    class="c7 c8"
+    id="label"
+  />
+</label>
 `;
 
 exports[`states renders correctly for an radio with state danger 1`] = `
-.c1 {
+.c2 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -457,7 +397,7 @@ exports[`states renders correctly for an radio with state danger 1`] = `
   color: inherit;
 }
 
-.c5 {
+.c4 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -470,7 +410,7 @@ exports[`states renders correctly for an radio with state danger 1`] = `
   color: inherit;
 }
 
-.c9 {
+.c8 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -484,44 +424,18 @@ exports[`states renders correctly for an radio with state danger 1`] = `
   margin-left: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-abbr.c8 {
+abbr.c7 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c8 {
+i.c7 {
   font-style: italic;
 }
 
-kbd.c8 {
+kbd.c7 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -529,50 +443,50 @@ kbd.c8 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c8 {
+mark.c7 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c8 {
+strong.c7 {
   font-weight: bold;
 }
 
-sub.c8,
-sup.c8 {
+sub.c7,
+sup.c7 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c8,
-u.c8 {
+ins.c7,
+u.c7 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c8,
-cite.c8,
-var.c8,
-em.c8 {
+i.c7,
+cite.c7,
+var.c7,
+em.c7 {
   font-style: italic;
 }
 
-kbd.c8,
-pre.c8,
-samp.c8 {
+kbd.c7,
+pre.c7,
+samp.c7 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c8 .c11 {
+.c7 .c10 {
   top: 0.1em;
 }
 
-.c3 {
+.c1 {
   display: inline-block;
 }
 
-.c7 {
+.c6 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 100%;
@@ -581,31 +495,31 @@ samp.c8 {
   width: 1em;
 }
 
-.c7 {
+.c6 {
   border-color: #e24c67;
   box-shadow: #e24c67 0px 0px 0px 1px !important;
 }
 
-.c10[disabled] + .c6 {
+.c9[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c10:checked:focus + .c6 {
+.c9:checked:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c10:focus + .c6 {
+.c9:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c10:not([disabled]):checked + .c6 {
+.c9:not([disabled]):checked + .c5 {
   border-color: #7467c0;
 }
 
-.c10:checked + .c6::before {
+.c9:checked + .c5::before {
   background: #7467c0;
   border-radius: 50%;
   content: '';
@@ -619,11 +533,11 @@ samp.c8 {
   width: 8px;
 }
 
-.c10[disabled]:checked + .c6::before {
+.c9[disabled]:checked + .c5::before {
   background: #9a9a9a;
 }
 
-.c4 {
+.c3 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -633,30 +547,30 @@ samp.c8 {
   width: 1px;
 }
 
-.c4[disabled] + .c6 {
+.c3[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c4:checked:focus + .c6 {
+.c3:checked:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4:focus + .c6 {
+.c3:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4:not([disabled]):checked + .c6 {
+.c3:not([disabled]):checked + .c5 {
   border-color: #7467c0;
 }
 
-.c4:checked + .c6 {
+.c3:checked + .c5 {
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4:checked + .c6::before {
+.c3:checked + .c5::before {
   background: #7467c0;
   border-radius: 50%;
   content: '';
@@ -670,11 +584,11 @@ samp.c8 {
   width: 8px;
 }
 
-.c4[disabled]:checked + .c6::before {
+.c3[disabled]:checked + .c5::before {
   background: #9a9a9a;
 }
 
-.c2 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -685,33 +599,29 @@ samp.c8 {
   align-items: center;
 }
 
-<div
-  class="c0 c1"
+<label
+  aria-describedby="label"
+  aria-invalid="true"
+  aria-required="false"
+  class="c0 c1 c2"
 >
-  <label
-    aria-describedby="label"
-    aria-invalid="true"
-    aria-required="false"
-    class="c2 c3 c1"
-  >
-    <input
-      class="c4 c5"
-      type="radio"
-      value=""
-    />
-    <div
-      class="c6 c7 c1"
-    />
-    <span
-      class="c8 c9"
-      id="label"
-    />
-  </label>
-</div>
+  <input
+    class="c3 c4"
+    type="radio"
+    value=""
+  />
+  <div
+    class="c5 c6 c2"
+  />
+  <span
+    class="c7 c8"
+    id="label"
+  />
+</label>
 `;
 
 exports[`states renders correctly for an radio with state primary 1`] = `
-.c1 {
+.c2 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -724,7 +634,7 @@ exports[`states renders correctly for an radio with state primary 1`] = `
   color: inherit;
 }
 
-.c5 {
+.c4 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -737,7 +647,7 @@ exports[`states renders correctly for an radio with state primary 1`] = `
   color: inherit;
 }
 
-.c9 {
+.c8 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -751,44 +661,18 @@ exports[`states renders correctly for an radio with state primary 1`] = `
   margin-left: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-abbr.c8 {
+abbr.c7 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c8 {
+i.c7 {
   font-style: italic;
 }
 
-kbd.c8 {
+kbd.c7 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -796,50 +680,50 @@ kbd.c8 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c8 {
+mark.c7 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c8 {
+strong.c7 {
   font-weight: bold;
 }
 
-sub.c8,
-sup.c8 {
+sub.c7,
+sup.c7 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c8,
-u.c8 {
+ins.c7,
+u.c7 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c8,
-cite.c8,
-var.c8,
-em.c8 {
+i.c7,
+cite.c7,
+var.c7,
+em.c7 {
   font-style: italic;
 }
 
-kbd.c8,
-pre.c8,
-samp.c8 {
+kbd.c7,
+pre.c7,
+samp.c7 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c8 .c11 {
+.c7 .c10 {
   top: 0.1em;
 }
 
-.c3 {
+.c1 {
   display: inline-block;
 }
 
-.c7 {
+.c6 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 100%;
@@ -848,31 +732,31 @@ samp.c8 {
   width: 1em;
 }
 
-.c7 {
+.c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c10[disabled] + .c6 {
+.c9[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c10:checked:focus + .c6 {
+.c9:checked:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c10:focus + .c6 {
+.c9:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c10:not([disabled]):checked + .c6 {
+.c9:not([disabled]):checked + .c5 {
   border-color: #7467c0;
 }
 
-.c10:checked + .c6::before {
+.c9:checked + .c5::before {
   background: #7467c0;
   border-radius: 50%;
   content: '';
@@ -886,11 +770,11 @@ samp.c8 {
   width: 8px;
 }
 
-.c10[disabled]:checked + .c6::before {
+.c9[disabled]:checked + .c5::before {
   background: #9a9a9a;
 }
 
-.c4 {
+.c3 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -900,30 +784,30 @@ samp.c8 {
   width: 1px;
 }
 
-.c4[disabled] + .c6 {
+.c3[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c4:checked:focus + .c6 {
+.c3:checked:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4:focus + .c6 {
+.c3:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4:not([disabled]):checked + .c6 {
+.c3:not([disabled]):checked + .c5 {
   border-color: #7467c0;
 }
 
-.c4:checked + .c6 {
+.c3:checked + .c5 {
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4:checked + .c6::before {
+.c3:checked + .c5::before {
   background: #7467c0;
   border-radius: 50%;
   content: '';
@@ -937,11 +821,11 @@ samp.c8 {
   width: 8px;
 }
 
-.c4[disabled]:checked + .c6::before {
+.c3[disabled]:checked + .c5::before {
   background: #9a9a9a;
 }
 
-.c2 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -952,33 +836,29 @@ samp.c8 {
   align-items: center;
 }
 
-<div
-  class="c0 c1"
+<label
+  aria-describedby="label"
+  aria-invalid="false"
+  aria-required="false"
+  class="c0 c1 c2"
 >
-  <label
-    aria-describedby="label"
-    aria-invalid="false"
-    aria-required="false"
-    class="c2 c3 c1"
-  >
-    <input
-      class="c4 c5"
-      type="radio"
-      value=""
-    />
-    <div
-      class="c6 c7 c1"
-    />
-    <span
-      class="c8 c9"
-      id="label"
-    />
-  </label>
-</div>
+  <input
+    class="c3 c4"
+    type="radio"
+    value=""
+  />
+  <div
+    class="c5 c6 c2"
+  />
+  <span
+    class="c7 c8"
+    id="label"
+  />
+</label>
 `;
 
 exports[`states renders correctly for an radio with state success 1`] = `
-.c1 {
+.c2 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -991,7 +871,7 @@ exports[`states renders correctly for an radio with state success 1`] = `
   color: inherit;
 }
 
-.c5 {
+.c4 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1004,7 +884,7 @@ exports[`states renders correctly for an radio with state success 1`] = `
   color: inherit;
 }
 
-.c9 {
+.c8 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1018,44 +898,18 @@ exports[`states renders correctly for an radio with state success 1`] = `
   margin-left: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-abbr.c8 {
+abbr.c7 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c8 {
+i.c7 {
   font-style: italic;
 }
 
-kbd.c8 {
+kbd.c7 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -1063,50 +917,50 @@ kbd.c8 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c8 {
+mark.c7 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c8 {
+strong.c7 {
   font-weight: bold;
 }
 
-sub.c8,
-sup.c8 {
+sub.c7,
+sup.c7 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c8,
-u.c8 {
+ins.c7,
+u.c7 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c8,
-cite.c8,
-var.c8,
-em.c8 {
+i.c7,
+cite.c7,
+var.c7,
+em.c7 {
   font-style: italic;
 }
 
-kbd.c8,
-pre.c8,
-samp.c8 {
+kbd.c7,
+pre.c7,
+samp.c7 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c8 .c11 {
+.c7 .c10 {
   top: 0.1em;
 }
 
-.c3 {
+.c1 {
   display: inline-block;
 }
 
-.c7 {
+.c6 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 100%;
@@ -1115,31 +969,31 @@ samp.c8 {
   width: 1em;
 }
 
-.c7 {
+.c6 {
   border-color: #4ca26c;
   box-shadow: #4ca26c 0px 0px 0px 1px !important;
 }
 
-.c10[disabled] + .c6 {
+.c9[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c10:checked:focus + .c6 {
+.c9:checked:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c10:focus + .c6 {
+.c9:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c10:not([disabled]):checked + .c6 {
+.c9:not([disabled]):checked + .c5 {
   border-color: #7467c0;
 }
 
-.c10:checked + .c6::before {
+.c9:checked + .c5::before {
   background: #7467c0;
   border-radius: 50%;
   content: '';
@@ -1153,11 +1007,11 @@ samp.c8 {
   width: 8px;
 }
 
-.c10[disabled]:checked + .c6::before {
+.c9[disabled]:checked + .c5::before {
   background: #9a9a9a;
 }
 
-.c4 {
+.c3 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -1167,30 +1021,30 @@ samp.c8 {
   width: 1px;
 }
 
-.c4[disabled] + .c6 {
+.c3[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c4:checked:focus + .c6 {
+.c3:checked:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4:focus + .c6 {
+.c3:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4:not([disabled]):checked + .c6 {
+.c3:not([disabled]):checked + .c5 {
   border-color: #7467c0;
 }
 
-.c4:checked + .c6 {
+.c3:checked + .c5 {
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4:checked + .c6::before {
+.c3:checked + .c5::before {
   background: #7467c0;
   border-radius: 50%;
   content: '';
@@ -1204,11 +1058,11 @@ samp.c8 {
   width: 8px;
 }
 
-.c4[disabled]:checked + .c6::before {
+.c3[disabled]:checked + .c5::before {
   background: #9a9a9a;
 }
 
-.c2 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1219,33 +1073,29 @@ samp.c8 {
   align-items: center;
 }
 
-<div
-  class="c0 c1"
+<label
+  aria-describedby="label"
+  aria-invalid="false"
+  aria-required="false"
+  class="c0 c1 c2"
 >
-  <label
-    aria-describedby="label"
-    aria-invalid="false"
-    aria-required="false"
-    class="c2 c3 c1"
-  >
-    <input
-      class="c4 c5"
-      type="radio"
-      value=""
-    />
-    <div
-      class="c6 c7 c1"
-    />
-    <span
-      class="c8 c9"
-      id="label"
-    />
-  </label>
-</div>
+  <input
+    class="c3 c4"
+    type="radio"
+    value=""
+  />
+  <div
+    class="c5 c6 c2"
+  />
+  <span
+    class="c7 c8"
+    id="label"
+  />
+</label>
 `;
 
 exports[`states renders correctly for an radio with state warning 1`] = `
-.c1 {
+.c2 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1258,7 +1108,7 @@ exports[`states renders correctly for an radio with state warning 1`] = `
   color: inherit;
 }
 
-.c5 {
+.c4 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1271,7 +1121,7 @@ exports[`states renders correctly for an radio with state warning 1`] = `
   color: inherit;
 }
 
-.c9 {
+.c8 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1285,44 +1135,18 @@ exports[`states renders correctly for an radio with state warning 1`] = `
   margin-left: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-abbr.c8 {
+abbr.c7 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c8 {
+i.c7 {
   font-style: italic;
 }
 
-kbd.c8 {
+kbd.c7 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -1330,50 +1154,50 @@ kbd.c8 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c8 {
+mark.c7 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c8 {
+strong.c7 {
   font-weight: bold;
 }
 
-sub.c8,
-sup.c8 {
+sub.c7,
+sup.c7 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c8,
-u.c8 {
+ins.c7,
+u.c7 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c8,
-cite.c8,
-var.c8,
-em.c8 {
+i.c7,
+cite.c7,
+var.c7,
+em.c7 {
   font-style: italic;
 }
 
-kbd.c8,
-pre.c8,
-samp.c8 {
+kbd.c7,
+pre.c7,
+samp.c7 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c8 .c11 {
+.c7 .c10 {
   top: 0.1em;
 }
 
-.c3 {
+.c1 {
   display: inline-block;
 }
 
-.c7 {
+.c6 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 100%;
@@ -1382,31 +1206,31 @@ samp.c8 {
   width: 1em;
 }
 
-.c7 {
+.c6 {
   border-color: #ffc94c;
   box-shadow: #ffc94c 0px 0px 0px 1px !important;
 }
 
-.c10[disabled] + .c6 {
+.c9[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c10:checked:focus + .c6 {
+.c9:checked:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c10:focus + .c6 {
+.c9:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c10:not([disabled]):checked + .c6 {
+.c9:not([disabled]):checked + .c5 {
   border-color: #7467c0;
 }
 
-.c10:checked + .c6::before {
+.c9:checked + .c5::before {
   background: #7467c0;
   border-radius: 50%;
   content: '';
@@ -1420,11 +1244,11 @@ samp.c8 {
   width: 8px;
 }
 
-.c10[disabled]:checked + .c6::before {
+.c9[disabled]:checked + .c5::before {
   background: #9a9a9a;
 }
 
-.c4 {
+.c3 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -1434,30 +1258,30 @@ samp.c8 {
   width: 1px;
 }
 
-.c4[disabled] + .c6 {
+.c3[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c4:checked:focus + .c6 {
+.c3:checked:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4:focus + .c6 {
+.c3:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4:not([disabled]):checked + .c6 {
+.c3:not([disabled]):checked + .c5 {
   border-color: #7467c0;
 }
 
-.c4:checked + .c6 {
+.c3:checked + .c5 {
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4:checked + .c6::before {
+.c3:checked + .c5::before {
   background: #7467c0;
   border-radius: 50%;
   content: '';
@@ -1471,11 +1295,11 @@ samp.c8 {
   width: 8px;
 }
 
-.c4[disabled]:checked + .c6::before {
+.c3[disabled]:checked + .c5::before {
   background: #9a9a9a;
 }
 
-.c2 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1486,27 +1310,23 @@ samp.c8 {
   align-items: center;
 }
 
-<div
-  class="c0 c1"
+<label
+  aria-describedby="label"
+  aria-invalid="false"
+  aria-required="false"
+  class="c0 c1 c2"
 >
-  <label
-    aria-describedby="label"
-    aria-invalid="false"
-    aria-required="false"
-    class="c2 c3 c1"
-  >
-    <input
-      class="c4 c5"
-      type="radio"
-      value=""
-    />
-    <div
-      class="c6 c7 c1"
-    />
-    <span
-      class="c8 c9"
-      id="label"
-    />
-  </label>
-</div>
+  <input
+    class="c3 c4"
+    type="radio"
+    value=""
+  />
+  <div
+    class="c5 c6 c2"
+  />
+  <span
+    class="c7 c8"
+    id="label"
+  />
+</label>
 `;
diff --git a/src/Radio/__tests__/__snapshots__/RadioGroup.test.js.snap b/src/Radio/__tests__/__snapshots__/RadioGroup.test.js.snap
index a0e93ac34..18118b8ad 100644
--- a/src/Radio/__tests__/__snapshots__/RadioGroup.test.js.snap
+++ b/src/Radio/__tests__/__snapshots__/RadioGroup.test.js.snap
@@ -14,7 +14,7 @@ exports[`renders correctly for a basic RadioGroup 1`] = `
   color: inherit;
 }
 
-.c7 {
+.c6 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -27,7 +27,7 @@ exports[`renders correctly for a basic RadioGroup 1`] = `
   color: inherit;
 }
 
-.c11 {
+.c10 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -41,37 +41,11 @@ exports[`renders correctly for a basic RadioGroup 1`] = `
   margin-left: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c9 {
+.c8 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 100%;
@@ -80,7 +54,7 @@ exports[`renders correctly for a basic RadioGroup 1`] = `
   width: 1em;
 }
 
-.c6 {
+.c5 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -90,26 +64,26 @@ exports[`renders correctly for a basic RadioGroup 1`] = `
   width: 1px;
 }
 
-.c6[disabled] + .c8 {
+.c5[disabled] + .c7 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c6:checked:focus + .c8 {
+.c5:checked:focus + .c7 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c6:focus + .c8 {
+.c5:focus + .c7 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c6:not([disabled]):checked + .c8 {
+.c5:not([disabled]):checked + .c7 {
   border-color: #7467c0;
 }
 
-.c6:checked + .c8::before {
+.c5:checked + .c7::before {
   background: #7467c0;
   border-radius: 50%;
   content: '';
@@ -123,11 +97,11 @@ exports[`renders correctly for a basic RadioGroup 1`] = `
   width: 8px;
 }
 
-.c6[disabled]:checked + .c8::before {
+.c5[disabled]:checked + .c7::before {
   background: #9a9a9a;
 }
 
-.c4 {
+.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -138,22 +112,22 @@ exports[`renders correctly for a basic RadioGroup 1`] = `
   align-items: center;
 }
 
-.c2 .c3:not(:last-child) {
+.c0 .c2:not(:last-child) {
   margin-bottom: 0.5rem;
 }
 
-abbr.c10 {
+abbr.c9 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c10 {
+i.c9 {
   font-style: italic;
 }
 
-kbd.c10 {
+kbd.c9 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -161,124 +135,120 @@ kbd.c10 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c10 {
+mark.c9 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c10 {
+strong.c9 {
   font-weight: bold;
 }
 
-sub.c10,
-sup.c10 {
+sub.c9,
+sup.c9 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c10,
-u.c10 {
+ins.c9,
+u.c9 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c10,
-cite.c10,
-var.c10,
-em.c10 {
+i.c9,
+cite.c9,
+var.c9,
+em.c9 {
   font-style: italic;
 }
 
-kbd.c10,
-pre.c10,
-samp.c10 {
+kbd.c9,
+pre.c9,
+samp.c9 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c10 .c12 {
+.c9 .c11 {
   top: 0.1em;
 }
 
 <div
+  aria-describedby="label"
+  aria-invalid="false"
   class="c0 c1"
+  role="group"
 >
-  <div
+  <label
     aria-describedby="label"
     aria-invalid="false"
-    class="c2 c1"
-    role="group"
+    aria-label="Sunny"
+    aria-required="false"
+    class="c2 c3 c4 c1"
   >
-    <label
-      aria-describedby="label"
-      aria-invalid="false"
-      aria-label="Sunny"
-      aria-required="false"
-      class="c3 c4 c5 c1"
+    <input
+      class="c5 c6"
+      name="weather"
+      type="radio"
+      value="\\"sunny\\""
+    />
+    <div
+      class="c7 c8 c1"
+    />
+    <span
+      class="c9 c10"
+      id="label"
     >
-      <input
-        class="c6 c7"
-        name="weather"
-        type="radio"
-        value="\\"sunny\\""
-      />
-      <div
-        class="c8 c9 c1"
-      />
-      <span
-        class="c10 c11"
-        id="label"
-      >
-        Sunny
-      </span>
-    </label>
-    <label
-      aria-describedby="label"
-      aria-invalid="false"
-      aria-label="Windy"
-      aria-required="false"
-      class="c3 c4 c5 c1"
+      Sunny
+    </span>
+  </label>
+  <label
+    aria-describedby="label"
+    aria-invalid="false"
+    aria-label="Windy"
+    aria-required="false"
+    class="c2 c3 c4 c1"
+  >
+    <input
+      class="c5 c6"
+      name="weather"
+      type="radio"
+      value="\\"windy\\""
+    />
+    <div
+      class="c7 c8 c1"
+    />
+    <span
+      class="c9 c10"
+      id="label"
     >
-      <input
-        class="c6 c7"
-        name="weather"
-        type="radio"
-        value="\\"windy\\""
-      />
-      <div
-        class="c8 c9 c1"
-      />
-      <span
-        class="c10 c11"
-        id="label"
-      >
-        Windy
-      </span>
-    </label>
-    <label
-      aria-describedby="label"
-      aria-invalid="false"
-      aria-label="Overcast"
-      aria-required="false"
-      class="c3 c4 c5 c1"
+      Windy
+    </span>
+  </label>
+  <label
+    aria-describedby="label"
+    aria-invalid="false"
+    aria-label="Overcast"
+    aria-required="false"
+    class="c2 c3 c4 c1"
+  >
+    <input
+      class="c5 c6"
+      name="weather"
+      type="radio"
+      value="\\"overcast\\""
+    />
+    <div
+      class="c7 c8 c1"
+    />
+    <span
+      class="c9 c10"
+      id="label"
     >
-      <input
-        class="c6 c7"
-        name="weather"
-        type="radio"
-        value="\\"overcast\\""
-      />
-      <div
-        class="c8 c9 c1"
-      />
-      <span
-        class="c10 c11"
-        id="label"
-      >
-        Overcast
-      </span>
-    </label>
-  </div>
+      Overcast
+    </span>
+  </label>
 </div>
 `;
 
@@ -296,7 +266,7 @@ exports[`renders correctly for a disabled RadioGroup 1`] = `
   color: inherit;
 }
 
-.c7 {
+.c6 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -309,7 +279,7 @@ exports[`renders correctly for a disabled RadioGroup 1`] = `
   color: inherit;
 }
 
-.c11 {
+.c10 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -323,37 +293,11 @@ exports[`renders correctly for a disabled RadioGroup 1`] = `
   margin-left: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c9 {
+.c8 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 100%;
@@ -362,7 +306,7 @@ exports[`renders correctly for a disabled RadioGroup 1`] = `
   width: 1em;
 }
 
-.c6 {
+.c5 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -372,26 +316,26 @@ exports[`renders correctly for a disabled RadioGroup 1`] = `
   width: 1px;
 }
 
-.c6[disabled] + .c8 {
+.c5[disabled] + .c7 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c6:checked:focus + .c8 {
+.c5:checked:focus + .c7 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c6:focus + .c8 {
+.c5:focus + .c7 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c6:not([disabled]):checked + .c8 {
+.c5:not([disabled]):checked + .c7 {
   border-color: #7467c0;
 }
 
-.c6:checked + .c8::before {
+.c5:checked + .c7::before {
   background: #7467c0;
   border-radius: 50%;
   content: '';
@@ -405,11 +349,11 @@ exports[`renders correctly for a disabled RadioGroup 1`] = `
   width: 8px;
 }
 
-.c6[disabled]:checked + .c8::before {
+.c5[disabled]:checked + .c7::before {
   background: #9a9a9a;
 }
 
-.c4 {
+.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -420,22 +364,22 @@ exports[`renders correctly for a disabled RadioGroup 1`] = `
   align-items: center;
 }
 
-.c2 .c3:not(:last-child) {
+.c0 .c2:not(:last-child) {
   margin-bottom: 0.5rem;
 }
 
-abbr.c10 {
+abbr.c9 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c10 {
+i.c9 {
   font-style: italic;
 }
 
-kbd.c10 {
+kbd.c9 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -443,127 +387,123 @@ kbd.c10 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c10 {
+mark.c9 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c10 {
+strong.c9 {
   font-weight: bold;
 }
 
-sub.c10,
-sup.c10 {
+sub.c9,
+sup.c9 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c10,
-u.c10 {
+ins.c9,
+u.c9 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c10,
-cite.c10,
-var.c10,
-em.c10 {
+i.c9,
+cite.c9,
+var.c9,
+em.c9 {
   font-style: italic;
 }
 
-kbd.c10,
-pre.c10,
-samp.c10 {
+kbd.c9,
+pre.c9,
+samp.c9 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c10 .c12 {
+.c9 .c11 {
   top: 0.1em;
 }
 
 <div
+  aria-describedby="label"
+  aria-invalid="false"
   class="c0 c1"
+  role="group"
 >
-  <div
+  <label
     aria-describedby="label"
     aria-invalid="false"
-    class="c2 c1"
-    role="group"
+    aria-label="Sunny"
+    aria-required="false"
+    class="c2 c3 c4 c1"
   >
-    <label
-      aria-describedby="label"
-      aria-invalid="false"
-      aria-label="Sunny"
-      aria-required="false"
-      class="c3 c4 c5 c1"
+    <input
+      class="c5 c6"
+      disabled=""
+      name="weather"
+      type="radio"
+      value="\\"sunny\\""
+    />
+    <div
+      class="c7 c8 c1"
+    />
+    <span
+      class="c9 c10"
+      id="label"
     >
-      <input
-        class="c6 c7"
-        disabled=""
-        name="weather"
-        type="radio"
-        value="\\"sunny\\""
-      />
-      <div
-        class="c8 c9 c1"
-      />
-      <span
-        class="c10 c11"
-        id="label"
-      >
-        Sunny
-      </span>
-    </label>
-    <label
-      aria-describedby="label"
-      aria-invalid="false"
-      aria-label="Windy"
-      aria-required="false"
-      class="c3 c4 c5 c1"
+      Sunny
+    </span>
+  </label>
+  <label
+    aria-describedby="label"
+    aria-invalid="false"
+    aria-label="Windy"
+    aria-required="false"
+    class="c2 c3 c4 c1"
+  >
+    <input
+      class="c5 c6"
+      disabled=""
+      name="weather"
+      type="radio"
+      value="\\"windy\\""
+    />
+    <div
+      class="c7 c8 c1"
+    />
+    <span
+      class="c9 c10"
+      id="label"
     >
-      <input
-        class="c6 c7"
-        disabled=""
-        name="weather"
-        type="radio"
-        value="\\"windy\\""
-      />
-      <div
-        class="c8 c9 c1"
-      />
-      <span
-        class="c10 c11"
-        id="label"
-      >
-        Windy
-      </span>
-    </label>
-    <label
-      aria-describedby="label"
-      aria-invalid="false"
-      aria-label="Overcast"
-      aria-required="false"
-      class="c3 c4 c5 c1"
+      Windy
+    </span>
+  </label>
+  <label
+    aria-describedby="label"
+    aria-invalid="false"
+    aria-label="Overcast"
+    aria-required="false"
+    class="c2 c3 c4 c1"
+  >
+    <input
+      class="c5 c6"
+      disabled=""
+      name="weather"
+      type="radio"
+      value="\\"overcast\\""
+    />
+    <div
+      class="c7 c8 c1"
+    />
+    <span
+      class="c9 c10"
+      id="label"
     >
-      <input
-        class="c6 c7"
-        disabled=""
-        name="weather"
-        type="radio"
-        value="\\"overcast\\""
-      />
-      <div
-        class="c8 c9 c1"
-      />
-      <span
-        class="c10 c11"
-        id="label"
-      >
-        Overcast
-      </span>
-    </label>
-  </div>
+      Overcast
+    </span>
+  </label>
 </div>
 `;
 
@@ -581,7 +521,7 @@ exports[`renders correctly for a disabled RadioGroup option 1`] = `
   color: inherit;
 }
 
-.c7 {
+.c6 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -594,7 +534,7 @@ exports[`renders correctly for a disabled RadioGroup option 1`] = `
   color: inherit;
 }
 
-.c11 {
+.c10 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -608,37 +548,11 @@ exports[`renders correctly for a disabled RadioGroup option 1`] = `
   margin-left: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c9 {
+.c8 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 100%;
@@ -647,7 +561,7 @@ exports[`renders correctly for a disabled RadioGroup option 1`] = `
   width: 1em;
 }
 
-.c6 {
+.c5 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -657,26 +571,26 @@ exports[`renders correctly for a disabled RadioGroup option 1`] = `
   width: 1px;
 }
 
-.c6[disabled] + .c8 {
+.c5[disabled] + .c7 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c6:checked:focus + .c8 {
+.c5:checked:focus + .c7 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c6:focus + .c8 {
+.c5:focus + .c7 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c6:not([disabled]):checked + .c8 {
+.c5:not([disabled]):checked + .c7 {
   border-color: #7467c0;
 }
 
-.c6:checked + .c8::before {
+.c5:checked + .c7::before {
   background: #7467c0;
   border-radius: 50%;
   content: '';
@@ -690,11 +604,11 @@ exports[`renders correctly for a disabled RadioGroup option 1`] = `
   width: 8px;
 }
 
-.c6[disabled]:checked + .c8::before {
+.c5[disabled]:checked + .c7::before {
   background: #9a9a9a;
 }
 
-.c4 {
+.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -705,22 +619,22 @@ exports[`renders correctly for a disabled RadioGroup option 1`] = `
   align-items: center;
 }
 
-.c2 .c3:not(:last-child) {
+.c0 .c2:not(:last-child) {
   margin-bottom: 0.5rem;
 }
 
-abbr.c10 {
+abbr.c9 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c10 {
+i.c9 {
   font-style: italic;
 }
 
-kbd.c10 {
+kbd.c9 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -728,125 +642,121 @@ kbd.c10 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c10 {
+mark.c9 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c10 {
+strong.c9 {
   font-weight: bold;
 }
 
-sub.c10,
-sup.c10 {
+sub.c9,
+sup.c9 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c10,
-u.c10 {
+ins.c9,
+u.c9 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c10,
-cite.c10,
-var.c10,
-em.c10 {
+i.c9,
+cite.c9,
+var.c9,
+em.c9 {
   font-style: italic;
 }
 
-kbd.c10,
-pre.c10,
-samp.c10 {
+kbd.c9,
+pre.c9,
+samp.c9 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c10 .c12 {
+.c9 .c11 {
   top: 0.1em;
 }
 
 <div
+  aria-describedby="label"
+  aria-invalid="false"
   class="c0 c1"
+  role="group"
 >
-  <div
+  <label
     aria-describedby="label"
     aria-invalid="false"
-    class="c2 c1"
-    role="group"
+    aria-label="Sunny"
+    aria-required="false"
+    class="c2 c3 c4 c1"
   >
-    <label
-      aria-describedby="label"
-      aria-invalid="false"
-      aria-label="Sunny"
-      aria-required="false"
-      class="c3 c4 c5 c1"
+    <input
+      class="c5 c6"
+      disabled=""
+      name="weather"
+      type="radio"
+      value="\\"sunny\\""
+    />
+    <div
+      class="c7 c8 c1"
+    />
+    <span
+      class="c9 c10"
+      id="label"
     >
-      <input
-        class="c6 c7"
-        disabled=""
-        name="weather"
-        type="radio"
-        value="\\"sunny\\""
-      />
-      <div
-        class="c8 c9 c1"
-      />
-      <span
-        class="c10 c11"
-        id="label"
-      >
-        Sunny
-      </span>
-    </label>
-    <label
-      aria-describedby="label"
-      aria-invalid="false"
-      aria-label="Windy"
-      aria-required="false"
-      class="c3 c4 c5 c1"
+      Sunny
+    </span>
+  </label>
+  <label
+    aria-describedby="label"
+    aria-invalid="false"
+    aria-label="Windy"
+    aria-required="false"
+    class="c2 c3 c4 c1"
+  >
+    <input
+      class="c5 c6"
+      name="weather"
+      type="radio"
+      value="\\"windy\\""
+    />
+    <div
+      class="c7 c8 c1"
+    />
+    <span
+      class="c9 c10"
+      id="label"
     >
-      <input
-        class="c6 c7"
-        name="weather"
-        type="radio"
-        value="\\"windy\\""
-      />
-      <div
-        class="c8 c9 c1"
-      />
-      <span
-        class="c10 c11"
-        id="label"
-      >
-        Windy
-      </span>
-    </label>
-    <label
-      aria-describedby="label"
-      aria-invalid="false"
-      aria-label="Overcast"
-      aria-required="false"
-      class="c3 c4 c5 c1"
+      Windy
+    </span>
+  </label>
+  <label
+    aria-describedby="label"
+    aria-invalid="false"
+    aria-label="Overcast"
+    aria-required="false"
+    class="c2 c3 c4 c1"
+  >
+    <input
+      class="c5 c6"
+      name="weather"
+      type="radio"
+      value="\\"overcast\\""
+    />
+    <div
+      class="c7 c8 c1"
+    />
+    <span
+      class="c9 c10"
+      id="label"
     >
-      <input
-        class="c6 c7"
-        name="weather"
-        type="radio"
-        value="\\"overcast\\""
-      />
-      <div
-        class="c8 c9 c1"
-      />
-      <span
-        class="c10 c11"
-        id="label"
-      >
-        Overcast
-      </span>
-    </label>
-  </div>
+      Overcast
+    </span>
+  </label>
 </div>
 `;
 
@@ -864,7 +774,7 @@ exports[`states renders correctly for an RadioGroup with state danger 1`] = `
   color: inherit;
 }
 
-.c7 {
+.c6 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -877,7 +787,7 @@ exports[`states renders correctly for an RadioGroup with state danger 1`] = `
   color: inherit;
 }
 
-.c11 {
+.c10 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -891,37 +801,11 @@ exports[`states renders correctly for an RadioGroup with state danger 1`] = `
   margin-left: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c9 {
+.c8 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 100%;
@@ -930,31 +814,31 @@ exports[`states renders correctly for an RadioGroup with state danger 1`] = `
   width: 1em;
 }
 
-.c9 {
+.c8 {
   border-color: #e24c67;
   box-shadow: #e24c67 0px 0px 0px 1px !important;
 }
 
-.c12[disabled] + .c8 {
+.c11[disabled] + .c7 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c12:checked:focus + .c8 {
+.c11:checked:focus + .c7 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c12:focus + .c8 {
+.c11:focus + .c7 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c12:not([disabled]):checked + .c8 {
+.c11:not([disabled]):checked + .c7 {
   border-color: #7467c0;
 }
 
-.c12:checked + .c8::before {
+.c11:checked + .c7::before {
   background: #7467c0;
   border-radius: 50%;
   content: '';
@@ -968,11 +852,11 @@ exports[`states renders correctly for an RadioGroup with state danger 1`] = `
   width: 8px;
 }
 
-.c12[disabled]:checked + .c8::before {
+.c11[disabled]:checked + .c7::before {
   background: #9a9a9a;
 }
 
-.c6 {
+.c5 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -982,30 +866,30 @@ exports[`states renders correctly for an RadioGroup with state danger 1`] = `
   width: 1px;
 }
 
-.c6[disabled] + .c8 {
+.c5[disabled] + .c7 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c6:checked:focus + .c8 {
+.c5:checked:focus + .c7 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c6:focus + .c8 {
+.c5:focus + .c7 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c6:not([disabled]):checked + .c8 {
+.c5:not([disabled]):checked + .c7 {
   border-color: #7467c0;
 }
 
-.c6:checked + .c8 {
+.c5:checked + .c7 {
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c6:checked + .c8::before {
+.c5:checked + .c7::before {
   background: #7467c0;
   border-radius: 50%;
   content: '';
@@ -1019,11 +903,11 @@ exports[`states renders correctly for an RadioGroup with state danger 1`] = `
   width: 8px;
 }
 
-.c6[disabled]:checked + .c8::before {
+.c5[disabled]:checked + .c7::before {
   background: #9a9a9a;
 }
 
-.c4 {
+.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1034,22 +918,22 @@ exports[`states renders correctly for an RadioGroup with state danger 1`] = `
   align-items: center;
 }
 
-.c2 .c3:not(:last-child) {
+.c0 .c2:not(:last-child) {
   margin-bottom: 0.5rem;
 }
 
-abbr.c10 {
+abbr.c9 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c10 {
+i.c9 {
   font-style: italic;
 }
 
-kbd.c10 {
+kbd.c9 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -1057,124 +941,120 @@ kbd.c10 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c10 {
+mark.c9 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c10 {
+strong.c9 {
   font-weight: bold;
 }
 
-sub.c10,
-sup.c10 {
+sub.c9,
+sup.c9 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c10,
-u.c10 {
+ins.c9,
+u.c9 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c10,
-cite.c10,
-var.c10,
-em.c10 {
+i.c9,
+cite.c9,
+var.c9,
+em.c9 {
   font-style: italic;
 }
 
-kbd.c10,
-pre.c10,
-samp.c10 {
+kbd.c9,
+pre.c9,
+samp.c9 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c10 .c13 {
+.c9 .c12 {
   top: 0.1em;
 }
 
 <div
+  aria-describedby="label"
+  aria-invalid="true"
   class="c0 c1"
+  role="group"
 >
-  <div
+  <label
     aria-describedby="label"
     aria-invalid="true"
-    class="c2 c1"
-    role="group"
+    aria-label="Sunny"
+    aria-required="false"
+    class="c2 c3 c4 c1"
   >
-    <label
-      aria-describedby="label"
-      aria-invalid="true"
-      aria-label="Sunny"
-      aria-required="false"
-      class="c3 c4 c5 c1"
+    <input
+      class="c5 c6"
+      name="weather"
+      type="radio"
+      value="\\"sunny\\""
+    />
+    <div
+      class="c7 c8 c1"
+    />
+    <span
+      class="c9 c10"
+      id="label"
     >
-      <input
-        class="c6 c7"
-        name="weather"
-        type="radio"
-        value="\\"sunny\\""
-      />
-      <div
-        class="c8 c9 c1"
-      />
-      <span
-        class="c10 c11"
-        id="label"
-      >
-        Sunny
-      </span>
-    </label>
-    <label
-      aria-describedby="label"
-      aria-invalid="true"
-      aria-label="Windy"
-      aria-required="false"
-      class="c3 c4 c5 c1"
+      Sunny
+    </span>
+  </label>
+  <label
+    aria-describedby="label"
+    aria-invalid="true"
+    aria-label="Windy"
+    aria-required="false"
+    class="c2 c3 c4 c1"
+  >
+    <input
+      class="c5 c6"
+      name="weather"
+      type="radio"
+      value="\\"windy\\""
+    />
+    <div
+      class="c7 c8 c1"
+    />
+    <span
+      class="c9 c10"
+      id="label"
     >
-      <input
-        class="c6 c7"
-        name="weather"
-        type="radio"
-        value="\\"windy\\""
-      />
-      <div
-        class="c8 c9 c1"
-      />
-      <span
-        class="c10 c11"
-        id="label"
-      >
-        Windy
-      </span>
-    </label>
-    <label
-      aria-describedby="label"
-      aria-invalid="true"
-      aria-label="Overcast"
-      aria-required="false"
-      class="c3 c4 c5 c1"
+      Windy
+    </span>
+  </label>
+  <label
+    aria-describedby="label"
+    aria-invalid="true"
+    aria-label="Overcast"
+    aria-required="false"
+    class="c2 c3 c4 c1"
+  >
+    <input
+      class="c5 c6"
+      name="weather"
+      type="radio"
+      value="\\"overcast\\""
+    />
+    <div
+      class="c7 c8 c1"
+    />
+    <span
+      class="c9 c10"
+      id="label"
     >
-      <input
-        class="c6 c7"
-        name="weather"
-        type="radio"
-        value="\\"overcast\\""
-      />
-      <div
-        class="c8 c9 c1"
-      />
-      <span
-        class="c10 c11"
-        id="label"
-      >
-        Overcast
-      </span>
-    </label>
-  </div>
+      Overcast
+    </span>
+  </label>
 </div>
 `;
 
@@ -1192,7 +1072,7 @@ exports[`states renders correctly for an RadioGroup with state primary 1`] = `
   color: inherit;
 }
 
-.c7 {
+.c6 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1205,7 +1085,7 @@ exports[`states renders correctly for an RadioGroup with state primary 1`] = `
   color: inherit;
 }
 
-.c11 {
+.c10 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1219,37 +1099,11 @@ exports[`states renders correctly for an RadioGroup with state primary 1`] = `
   margin-left: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c9 {
+.c8 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 100%;
@@ -1258,31 +1112,31 @@ exports[`states renders correctly for an RadioGroup with state primary 1`] = `
   width: 1em;
 }
 
-.c9 {
+.c8 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c12[disabled] + .c8 {
+.c11[disabled] + .c7 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c12:checked:focus + .c8 {
+.c11:checked:focus + .c7 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c12:focus + .c8 {
+.c11:focus + .c7 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c12:not([disabled]):checked + .c8 {
+.c11:not([disabled]):checked + .c7 {
   border-color: #7467c0;
 }
 
-.c12:checked + .c8::before {
+.c11:checked + .c7::before {
   background: #7467c0;
   border-radius: 50%;
   content: '';
@@ -1296,11 +1150,11 @@ exports[`states renders correctly for an RadioGroup with state primary 1`] = `
   width: 8px;
 }
 
-.c12[disabled]:checked + .c8::before {
+.c11[disabled]:checked + .c7::before {
   background: #9a9a9a;
 }
 
-.c6 {
+.c5 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -1310,30 +1164,30 @@ exports[`states renders correctly for an RadioGroup with state primary 1`] = `
   width: 1px;
 }
 
-.c6[disabled] + .c8 {
+.c5[disabled] + .c7 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c6:checked:focus + .c8 {
+.c5:checked:focus + .c7 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c6:focus + .c8 {
+.c5:focus + .c7 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c6:not([disabled]):checked + .c8 {
+.c5:not([disabled]):checked + .c7 {
   border-color: #7467c0;
 }
 
-.c6:checked + .c8 {
+.c5:checked + .c7 {
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c6:checked + .c8::before {
+.c5:checked + .c7::before {
   background: #7467c0;
   border-radius: 50%;
   content: '';
@@ -1347,11 +1201,11 @@ exports[`states renders correctly for an RadioGroup with state primary 1`] = `
   width: 8px;
 }
 
-.c6[disabled]:checked + .c8::before {
+.c5[disabled]:checked + .c7::before {
   background: #9a9a9a;
 }
 
-.c4 {
+.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1362,22 +1216,22 @@ exports[`states renders correctly for an RadioGroup with state primary 1`] = `
   align-items: center;
 }
 
-.c2 .c3:not(:last-child) {
+.c0 .c2:not(:last-child) {
   margin-bottom: 0.5rem;
 }
 
-abbr.c10 {
+abbr.c9 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c10 {
+i.c9 {
   font-style: italic;
 }
 
-kbd.c10 {
+kbd.c9 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -1385,124 +1239,120 @@ kbd.c10 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c10 {
+mark.c9 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c10 {
+strong.c9 {
   font-weight: bold;
 }
 
-sub.c10,
-sup.c10 {
+sub.c9,
+sup.c9 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c10,
-u.c10 {
+ins.c9,
+u.c9 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c10,
-cite.c10,
-var.c10,
-em.c10 {
+i.c9,
+cite.c9,
+var.c9,
+em.c9 {
   font-style: italic;
 }
 
-kbd.c10,
-pre.c10,
-samp.c10 {
+kbd.c9,
+pre.c9,
+samp.c9 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c10 .c13 {
+.c9 .c12 {
   top: 0.1em;
 }
 
 <div
+  aria-describedby="label"
+  aria-invalid="false"
   class="c0 c1"
+  role="group"
 >
-  <div
+  <label
     aria-describedby="label"
     aria-invalid="false"
-    class="c2 c1"
-    role="group"
+    aria-label="Sunny"
+    aria-required="false"
+    class="c2 c3 c4 c1"
   >
-    <label
-      aria-describedby="label"
-      aria-invalid="false"
-      aria-label="Sunny"
-      aria-required="false"
-      class="c3 c4 c5 c1"
+    <input
+      class="c5 c6"
+      name="weather"
+      type="radio"
+      value="\\"sunny\\""
+    />
+    <div
+      class="c7 c8 c1"
+    />
+    <span
+      class="c9 c10"
+      id="label"
     >
-      <input
-        class="c6 c7"
-        name="weather"
-        type="radio"
-        value="\\"sunny\\""
-      />
-      <div
-        class="c8 c9 c1"
-      />
-      <span
-        class="c10 c11"
-        id="label"
-      >
-        Sunny
-      </span>
-    </label>
-    <label
-      aria-describedby="label"
-      aria-invalid="false"
-      aria-label="Windy"
-      aria-required="false"
-      class="c3 c4 c5 c1"
+      Sunny
+    </span>
+  </label>
+  <label
+    aria-describedby="label"
+    aria-invalid="false"
+    aria-label="Windy"
+    aria-required="false"
+    class="c2 c3 c4 c1"
+  >
+    <input
+      class="c5 c6"
+      name="weather"
+      type="radio"
+      value="\\"windy\\""
+    />
+    <div
+      class="c7 c8 c1"
+    />
+    <span
+      class="c9 c10"
+      id="label"
     >
-      <input
-        class="c6 c7"
-        name="weather"
-        type="radio"
-        value="\\"windy\\""
-      />
-      <div
-        class="c8 c9 c1"
-      />
-      <span
-        class="c10 c11"
-        id="label"
-      >
-        Windy
-      </span>
-    </label>
-    <label
-      aria-describedby="label"
-      aria-invalid="false"
-      aria-label="Overcast"
-      aria-required="false"
-      class="c3 c4 c5 c1"
+      Windy
+    </span>
+  </label>
+  <label
+    aria-describedby="label"
+    aria-invalid="false"
+    aria-label="Overcast"
+    aria-required="false"
+    class="c2 c3 c4 c1"
+  >
+    <input
+      class="c5 c6"
+      name="weather"
+      type="radio"
+      value="\\"overcast\\""
+    />
+    <div
+      class="c7 c8 c1"
+    />
+    <span
+      class="c9 c10"
+      id="label"
     >
-      <input
-        class="c6 c7"
-        name="weather"
-        type="radio"
-        value="\\"overcast\\""
-      />
-      <div
-        class="c8 c9 c1"
-      />
-      <span
-        class="c10 c11"
-        id="label"
-      >
-        Overcast
-      </span>
-    </label>
-  </div>
+      Overcast
+    </span>
+  </label>
 </div>
 `;
 
@@ -1520,7 +1370,7 @@ exports[`states renders correctly for an RadioGroup with state success 1`] = `
   color: inherit;
 }
 
-.c7 {
+.c6 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1533,7 +1383,7 @@ exports[`states renders correctly for an RadioGroup with state success 1`] = `
   color: inherit;
 }
 
-.c11 {
+.c10 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1547,37 +1397,11 @@ exports[`states renders correctly for an RadioGroup with state success 1`] = `
   margin-left: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c9 {
+.c8 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 100%;
@@ -1586,31 +1410,31 @@ exports[`states renders correctly for an RadioGroup with state success 1`] = `
   width: 1em;
 }
 
-.c9 {
+.c8 {
   border-color: #4ca26c;
   box-shadow: #4ca26c 0px 0px 0px 1px !important;
 }
 
-.c12[disabled] + .c8 {
+.c11[disabled] + .c7 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c12:checked:focus + .c8 {
+.c11:checked:focus + .c7 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c12:focus + .c8 {
+.c11:focus + .c7 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c12:not([disabled]):checked + .c8 {
+.c11:not([disabled]):checked + .c7 {
   border-color: #7467c0;
 }
 
-.c12:checked + .c8::before {
+.c11:checked + .c7::before {
   background: #7467c0;
   border-radius: 50%;
   content: '';
@@ -1624,11 +1448,11 @@ exports[`states renders correctly for an RadioGroup with state success 1`] = `
   width: 8px;
 }
 
-.c12[disabled]:checked + .c8::before {
+.c11[disabled]:checked + .c7::before {
   background: #9a9a9a;
 }
 
-.c6 {
+.c5 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -1638,30 +1462,30 @@ exports[`states renders correctly for an RadioGroup with state success 1`] = `
   width: 1px;
 }
 
-.c6[disabled] + .c8 {
+.c5[disabled] + .c7 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c6:checked:focus + .c8 {
+.c5:checked:focus + .c7 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c6:focus + .c8 {
+.c5:focus + .c7 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c6:not([disabled]):checked + .c8 {
+.c5:not([disabled]):checked + .c7 {
   border-color: #7467c0;
 }
 
-.c6:checked + .c8 {
+.c5:checked + .c7 {
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c6:checked + .c8::before {
+.c5:checked + .c7::before {
   background: #7467c0;
   border-radius: 50%;
   content: '';
@@ -1675,11 +1499,11 @@ exports[`states renders correctly for an RadioGroup with state success 1`] = `
   width: 8px;
 }
 
-.c6[disabled]:checked + .c8::before {
+.c5[disabled]:checked + .c7::before {
   background: #9a9a9a;
 }
 
-.c4 {
+.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1690,22 +1514,22 @@ exports[`states renders correctly for an RadioGroup with state success 1`] = `
   align-items: center;
 }
 
-.c2 .c3:not(:last-child) {
+.c0 .c2:not(:last-child) {
   margin-bottom: 0.5rem;
 }
 
-abbr.c10 {
+abbr.c9 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c10 {
+i.c9 {
   font-style: italic;
 }
 
-kbd.c10 {
+kbd.c9 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -1713,124 +1537,120 @@ kbd.c10 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c10 {
+mark.c9 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c10 {
+strong.c9 {
   font-weight: bold;
 }
 
-sub.c10,
-sup.c10 {
+sub.c9,
+sup.c9 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c10,
-u.c10 {
+ins.c9,
+u.c9 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c10,
-cite.c10,
-var.c10,
-em.c10 {
+i.c9,
+cite.c9,
+var.c9,
+em.c9 {
   font-style: italic;
 }
 
-kbd.c10,
-pre.c10,
-samp.c10 {
+kbd.c9,
+pre.c9,
+samp.c9 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c10 .c13 {
+.c9 .c12 {
   top: 0.1em;
 }
 
 <div
+  aria-describedby="label"
+  aria-invalid="false"
   class="c0 c1"
+  role="group"
 >
-  <div
+  <label
     aria-describedby="label"
     aria-invalid="false"
-    class="c2 c1"
-    role="group"
+    aria-label="Sunny"
+    aria-required="false"
+    class="c2 c3 c4 c1"
   >
-    <label
-      aria-describedby="label"
-      aria-invalid="false"
-      aria-label="Sunny"
-      aria-required="false"
-      class="c3 c4 c5 c1"
+    <input
+      class="c5 c6"
+      name="weather"
+      type="radio"
+      value="\\"sunny\\""
+    />
+    <div
+      class="c7 c8 c1"
+    />
+    <span
+      class="c9 c10"
+      id="label"
     >
-      <input
-        class="c6 c7"
-        name="weather"
-        type="radio"
-        value="\\"sunny\\""
-      />
-      <div
-        class="c8 c9 c1"
-      />
-      <span
-        class="c10 c11"
-        id="label"
-      >
-        Sunny
-      </span>
-    </label>
-    <label
-      aria-describedby="label"
-      aria-invalid="false"
-      aria-label="Windy"
-      aria-required="false"
-      class="c3 c4 c5 c1"
+      Sunny
+    </span>
+  </label>
+  <label
+    aria-describedby="label"
+    aria-invalid="false"
+    aria-label="Windy"
+    aria-required="false"
+    class="c2 c3 c4 c1"
+  >
+    <input
+      class="c5 c6"
+      name="weather"
+      type="radio"
+      value="\\"windy\\""
+    />
+    <div
+      class="c7 c8 c1"
+    />
+    <span
+      class="c9 c10"
+      id="label"
     >
-      <input
-        class="c6 c7"
-        name="weather"
-        type="radio"
-        value="\\"windy\\""
-      />
-      <div
-        class="c8 c9 c1"
-      />
-      <span
-        class="c10 c11"
-        id="label"
-      >
-        Windy
-      </span>
-    </label>
-    <label
-      aria-describedby="label"
-      aria-invalid="false"
-      aria-label="Overcast"
-      aria-required="false"
-      class="c3 c4 c5 c1"
+      Windy
+    </span>
+  </label>
+  <label
+    aria-describedby="label"
+    aria-invalid="false"
+    aria-label="Overcast"
+    aria-required="false"
+    class="c2 c3 c4 c1"
+  >
+    <input
+      class="c5 c6"
+      name="weather"
+      type="radio"
+      value="\\"overcast\\""
+    />
+    <div
+      class="c7 c8 c1"
+    />
+    <span
+      class="c9 c10"
+      id="label"
     >
-      <input
-        class="c6 c7"
-        name="weather"
-        type="radio"
-        value="\\"overcast\\""
-      />
-      <div
-        class="c8 c9 c1"
-      />
-      <span
-        class="c10 c11"
-        id="label"
-      >
-        Overcast
-      </span>
-    </label>
-  </div>
+      Overcast
+    </span>
+  </label>
 </div>
 `;
 
@@ -1848,7 +1668,7 @@ exports[`states renders correctly for an RadioGroup with state warning 1`] = `
   color: inherit;
 }
 
-.c7 {
+.c6 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1861,7 +1681,7 @@ exports[`states renders correctly for an RadioGroup with state warning 1`] = `
   color: inherit;
 }
 
-.c11 {
+.c10 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1875,37 +1695,11 @@ exports[`states renders correctly for an RadioGroup with state warning 1`] = `
   margin-left: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c9 {
+.c8 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 100%;
@@ -1914,31 +1708,31 @@ exports[`states renders correctly for an RadioGroup with state warning 1`] = `
   width: 1em;
 }
 
-.c9 {
+.c8 {
   border-color: #ffc94c;
   box-shadow: #ffc94c 0px 0px 0px 1px !important;
 }
 
-.c12[disabled] + .c8 {
+.c11[disabled] + .c7 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c12:checked:focus + .c8 {
+.c11:checked:focus + .c7 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c12:focus + .c8 {
+.c11:focus + .c7 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c12:not([disabled]):checked + .c8 {
+.c11:not([disabled]):checked + .c7 {
   border-color: #7467c0;
 }
 
-.c12:checked + .c8::before {
+.c11:checked + .c7::before {
   background: #7467c0;
   border-radius: 50%;
   content: '';
@@ -1952,11 +1746,11 @@ exports[`states renders correctly for an RadioGroup with state warning 1`] = `
   width: 8px;
 }
 
-.c12[disabled]:checked + .c8::before {
+.c11[disabled]:checked + .c7::before {
   background: #9a9a9a;
 }
 
-.c6 {
+.c5 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -1966,30 +1760,30 @@ exports[`states renders correctly for an RadioGroup with state warning 1`] = `
   width: 1px;
 }
 
-.c6[disabled] + .c8 {
+.c5[disabled] + .c7 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c6:checked:focus + .c8 {
+.c5:checked:focus + .c7 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c6:focus + .c8 {
+.c5:focus + .c7 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c6:not([disabled]):checked + .c8 {
+.c5:not([disabled]):checked + .c7 {
   border-color: #7467c0;
 }
 
-.c6:checked + .c8 {
+.c5:checked + .c7 {
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c6:checked + .c8::before {
+.c5:checked + .c7::before {
   background: #7467c0;
   border-radius: 50%;
   content: '';
@@ -2003,11 +1797,11 @@ exports[`states renders correctly for an RadioGroup with state warning 1`] = `
   width: 8px;
 }
 
-.c6[disabled]:checked + .c8::before {
+.c5[disabled]:checked + .c7::before {
   background: #9a9a9a;
 }
 
-.c4 {
+.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2018,22 +1812,22 @@ exports[`states renders correctly for an RadioGroup with state warning 1`] = `
   align-items: center;
 }
 
-.c2 .c3:not(:last-child) {
+.c0 .c2:not(:last-child) {
   margin-bottom: 0.5rem;
 }
 
-abbr.c10 {
+abbr.c9 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c10 {
+i.c9 {
   font-style: italic;
 }
 
-kbd.c10 {
+kbd.c9 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -2041,123 +1835,119 @@ kbd.c10 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c10 {
+mark.c9 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c10 {
+strong.c9 {
   font-weight: bold;
 }
 
-sub.c10,
-sup.c10 {
+sub.c9,
+sup.c9 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c10,
-u.c10 {
+ins.c9,
+u.c9 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c10,
-cite.c10,
-var.c10,
-em.c10 {
+i.c9,
+cite.c9,
+var.c9,
+em.c9 {
   font-style: italic;
 }
 
-kbd.c10,
-pre.c10,
-samp.c10 {
+kbd.c9,
+pre.c9,
+samp.c9 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c10 .c13 {
+.c9 .c12 {
   top: 0.1em;
 }
 
 <div
+  aria-describedby="label"
+  aria-invalid="false"
   class="c0 c1"
+  role="group"
 >
-  <div
+  <label
     aria-describedby="label"
     aria-invalid="false"
-    class="c2 c1"
-    role="group"
+    aria-label="Sunny"
+    aria-required="false"
+    class="c2 c3 c4 c1"
   >
-    <label
-      aria-describedby="label"
-      aria-invalid="false"
-      aria-label="Sunny"
-      aria-required="false"
-      class="c3 c4 c5 c1"
+    <input
+      class="c5 c6"
+      name="weather"
+      type="radio"
+      value="\\"sunny\\""
+    />
+    <div
+      class="c7 c8 c1"
+    />
+    <span
+      class="c9 c10"
+      id="label"
     >
-      <input
-        class="c6 c7"
-        name="weather"
-        type="radio"
-        value="\\"sunny\\""
-      />
-      <div
-        class="c8 c9 c1"
-      />
-      <span
-        class="c10 c11"
-        id="label"
-      >
-        Sunny
-      </span>
-    </label>
-    <label
-      aria-describedby="label"
-      aria-invalid="false"
-      aria-label="Windy"
-      aria-required="false"
-      class="c3 c4 c5 c1"
+      Sunny
+    </span>
+  </label>
+  <label
+    aria-describedby="label"
+    aria-invalid="false"
+    aria-label="Windy"
+    aria-required="false"
+    class="c2 c3 c4 c1"
+  >
+    <input
+      class="c5 c6"
+      name="weather"
+      type="radio"
+      value="\\"windy\\""
+    />
+    <div
+      class="c7 c8 c1"
+    />
+    <span
+      class="c9 c10"
+      id="label"
     >
-      <input
-        class="c6 c7"
-        name="weather"
-        type="radio"
-        value="\\"windy\\""
-      />
-      <div
-        class="c8 c9 c1"
-      />
-      <span
-        class="c10 c11"
-        id="label"
-      >
-        Windy
-      </span>
-    </label>
-    <label
-      aria-describedby="label"
-      aria-invalid="false"
-      aria-label="Overcast"
-      aria-required="false"
-      class="c3 c4 c5 c1"
+      Windy
+    </span>
+  </label>
+  <label
+    aria-describedby="label"
+    aria-invalid="false"
+    aria-label="Overcast"
+    aria-required="false"
+    class="c2 c3 c4 c1"
+  >
+    <input
+      class="c5 c6"
+      name="weather"
+      type="radio"
+      value="\\"overcast\\""
+    />
+    <div
+      class="c7 c8 c1"
+    />
+    <span
+      class="c9 c10"
+      id="label"
     >
-      <input
-        class="c6 c7"
-        name="weather"
-        type="radio"
-        value="\\"overcast\\""
-      />
-      <div
-        class="c8 c9 c1"
-      />
-      <span
-        class="c10 c11"
-        id="label"
-      >
-        Overcast
-      </span>
-    </label>
-  </div>
+      Overcast
+    </span>
+  </label>
 </div>
 `;
diff --git a/src/Radio/__tests__/__snapshots__/RadioGroupField.test.js.snap b/src/Radio/__tests__/__snapshots__/RadioGroupField.test.js.snap
index e83245216..4ccc73ec3 100644
--- a/src/Radio/__tests__/__snapshots__/RadioGroupField.test.js.snap
+++ b/src/Radio/__tests__/__snapshots__/RadioGroupField.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly for a basic RadioGroupField 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -14,7 +14,7 @@ exports[`renders correctly for a basic RadioGroupField 1`] = `
   color: inherit;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -28,7 +28,7 @@ exports[`renders correctly for a basic RadioGroupField 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c8 {
+.c7 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -42,7 +42,7 @@ exports[`renders correctly for a basic RadioGroupField 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c12 {
+.c11 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -55,7 +55,7 @@ exports[`renders correctly for a basic RadioGroupField 1`] = `
   color: inherit;
 }
 
-.c16 {
+.c15 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -69,44 +69,18 @@ exports[`renders correctly for a basic RadioGroupField 1`] = `
   margin-left: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c14 {
+.c13 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 100%;
@@ -115,7 +89,7 @@ exports[`renders correctly for a basic RadioGroupField 1`] = `
   width: 1em;
 }
 
-.c11 {
+.c10 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -125,26 +99,26 @@ exports[`renders correctly for a basic RadioGroupField 1`] = `
   width: 1px;
 }
 
-.c11[disabled] + .c13 {
+.c10[disabled] + .c12 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c11:checked:focus + .c13 {
+.c10:checked:focus + .c12 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11:focus + .c13 {
+.c10:focus + .c12 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11:not([disabled]):checked + .c13 {
+.c10:not([disabled]):checked + .c12 {
   border-color: #7467c0;
 }
 
-.c11:checked + .c13::before {
+.c10:checked + .c12::before {
   background: #7467c0;
   border-radius: 50%;
   content: '';
@@ -158,11 +132,11 @@ exports[`renders correctly for a basic RadioGroupField 1`] = `
   width: 8px;
 }
 
-.c11[disabled]:checked + .c13::before {
+.c10[disabled]:checked + .c12::before {
   background: #9a9a9a;
 }
 
-.c10 {
+.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -173,22 +147,22 @@ exports[`renders correctly for a basic RadioGroupField 1`] = `
   align-items: center;
 }
 
-.c7 .c9:not(:last-child) {
+.c6 .c8:not(:last-child) {
   margin-bottom: 0.5rem;
 }
 
-abbr.c15 {
+abbr.c14 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c15 {
+i.c14 {
   font-style: italic;
 }
 
-kbd.c15 {
+kbd.c14 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -196,164 +170,160 @@ kbd.c15 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c15 {
+mark.c14 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c15 {
+strong.c14 {
   font-weight: bold;
 }
 
-sub.c15,
-sup.c15 {
+sub.c14,
+sup.c14 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c15,
-u.c15 {
+ins.c14,
+u.c14 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c15,
-cite.c15,
-var.c15,
-em.c15 {
+i.c14,
+cite.c14,
+var.c14,
+em.c14 {
   font-style: italic;
 }
 
-kbd.c15,
-pre.c15,
-samp.c15 {
+kbd.c14,
+pre.c14,
+samp.c14 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c15 .c17 {
+.c14 .c16 {
   top: 0.1em;
 }
 
-.c4 {
+.c3 {
   display: block;
 }
 
-.c3 {
+.c2 {
   margin-bottom: 0 !important;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="align-items: center;"
+  >
+    <label
+      class="c2 c3 c4 c5"
+      font-weight="600"
+      for="weather"
+      style="font-weight: 600;"
+    >
+      Weather
+    </label>
+  </div>
+  <div />
+  <div
+    aria-describedby="label"
+    aria-invalid="false"
+    class="c6 c7"
+    role="group"
   >
-    <div
-      class="c2 c1"
-      style="align-items: center;"
+    <label
+      aria-describedby="label"
+      aria-invalid="false"
+      aria-label="Sunny"
+      aria-required="false"
+      class="c8 c9 c4 c0"
     >
-      <label
-        class="c3 c4 c5 c6"
-        font-weight="600"
+      <input
+        class="c10 c11"
+        id="weather"
+        name="weather"
+        type="radio"
+        value="\\"sunny\\""
+      />
+      <div
+        class="c12 c13 c0"
+      />
+      <span
+        class="c14 c15"
         for="weather"
-        style="font-weight: 600;"
+        id="label"
       >
-        Weather
-      </label>
-    </div>
-    <div />
-    <div
+        Sunny
+      </span>
+    </label>
+    <label
       aria-describedby="label"
       aria-invalid="false"
-      class="c7 c8"
-      role="group"
+      aria-label="Windy"
+      aria-required="false"
+      class="c8 c9 c4 c0"
     >
-      <label
-        aria-describedby="label"
-        aria-invalid="false"
-        aria-label="Sunny"
-        aria-required="false"
-        class="c9 c10 c5 c1"
-      >
-        <input
-          class="c11 c12"
-          id="weather"
-          name="weather"
-          type="radio"
-          value="\\"sunny\\""
-        />
-        <div
-          class="c13 c14 c1"
-        />
-        <span
-          class="c15 c16"
-          for="weather"
-          id="label"
-        >
-          Sunny
-        </span>
-      </label>
-      <label
-        aria-describedby="label"
-        aria-invalid="false"
-        aria-label="Windy"
-        aria-required="false"
-        class="c9 c10 c5 c1"
+      <input
+        class="c10 c11"
+        id="weather"
+        name="weather"
+        type="radio"
+        value="\\"windy\\""
+      />
+      <div
+        class="c12 c13 c0"
+      />
+      <span
+        class="c14 c15"
+        for="weather"
+        id="label"
       >
-        <input
-          class="c11 c12"
-          id="weather"
-          name="weather"
-          type="radio"
-          value="\\"windy\\""
-        />
-        <div
-          class="c13 c14 c1"
-        />
-        <span
-          class="c15 c16"
-          for="weather"
-          id="label"
-        >
-          Windy
-        </span>
-      </label>
-      <label
-        aria-describedby="label"
-        aria-invalid="false"
-        aria-label="Overcast"
-        aria-required="false"
-        class="c9 c10 c5 c1"
+        Windy
+      </span>
+    </label>
+    <label
+      aria-describedby="label"
+      aria-invalid="false"
+      aria-label="Overcast"
+      aria-required="false"
+      class="c8 c9 c4 c0"
+    >
+      <input
+        class="c10 c11"
+        id="weather"
+        name="weather"
+        type="radio"
+        value="\\"overcast\\""
+      />
+      <div
+        class="c12 c13 c0"
+      />
+      <span
+        class="c14 c15"
+        for="weather"
+        id="label"
       >
-        <input
-          class="c11 c12"
-          id="weather"
-          name="weather"
-          type="radio"
-          value="\\"overcast\\""
-        />
-        <div
-          class="c13 c14 c1"
-        />
-        <span
-          class="c15 c16"
-          for="weather"
-          id="label"
-        >
-          Overcast
-        </span>
-      </label>
-    </div>
-    <div />
+        Overcast
+      </span>
+    </label>
   </div>
+  <div />
 </div>
 `;
 
 exports[`renders correctly for a disabled RadioGroupField 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -366,7 +336,7 @@ exports[`renders correctly for a disabled RadioGroupField 1`] = `
   color: inherit;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -380,7 +350,7 @@ exports[`renders correctly for a disabled RadioGroupField 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c8 {
+.c7 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -394,7 +364,7 @@ exports[`renders correctly for a disabled RadioGroupField 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c12 {
+.c11 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -407,7 +377,7 @@ exports[`renders correctly for a disabled RadioGroupField 1`] = `
   color: inherit;
 }
 
-.c16 {
+.c15 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -421,44 +391,18 @@ exports[`renders correctly for a disabled RadioGroupField 1`] = `
   margin-left: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c14 {
+.c13 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 100%;
@@ -467,7 +411,7 @@ exports[`renders correctly for a disabled RadioGroupField 1`] = `
   width: 1em;
 }
 
-.c11 {
+.c10 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -477,26 +421,26 @@ exports[`renders correctly for a disabled RadioGroupField 1`] = `
   width: 1px;
 }
 
-.c11[disabled] + .c13 {
+.c10[disabled] + .c12 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c11:checked:focus + .c13 {
+.c10:checked:focus + .c12 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11:focus + .c13 {
+.c10:focus + .c12 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11:not([disabled]):checked + .c13 {
+.c10:not([disabled]):checked + .c12 {
   border-color: #7467c0;
 }
 
-.c11:checked + .c13::before {
+.c10:checked + .c12::before {
   background: #7467c0;
   border-radius: 50%;
   content: '';
@@ -510,11 +454,11 @@ exports[`renders correctly for a disabled RadioGroupField 1`] = `
   width: 8px;
 }
 
-.c11[disabled]:checked + .c13::before {
+.c10[disabled]:checked + .c12::before {
   background: #9a9a9a;
 }
 
-.c10 {
+.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -525,22 +469,22 @@ exports[`renders correctly for a disabled RadioGroupField 1`] = `
   align-items: center;
 }
 
-.c7 .c9:not(:last-child) {
+.c6 .c8:not(:last-child) {
   margin-bottom: 0.5rem;
 }
 
-abbr.c15 {
+abbr.c14 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c15 {
+i.c14 {
   font-style: italic;
 }
 
-kbd.c15 {
+kbd.c14 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -548,167 +492,163 @@ kbd.c15 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c15 {
+mark.c14 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c15 {
+strong.c14 {
   font-weight: bold;
 }
 
-sub.c15,
-sup.c15 {
+sub.c14,
+sup.c14 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c15,
-u.c15 {
+ins.c14,
+u.c14 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c15,
-cite.c15,
-var.c15,
-em.c15 {
+i.c14,
+cite.c14,
+var.c14,
+em.c14 {
   font-style: italic;
 }
 
-kbd.c15,
-pre.c15,
-samp.c15 {
+kbd.c14,
+pre.c14,
+samp.c14 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c15 .c17 {
+.c14 .c16 {
   top: 0.1em;
 }
 
-.c4 {
+.c3 {
   display: block;
 }
 
-.c3 {
+.c2 {
   margin-bottom: 0 !important;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="align-items: center;"
   >
-    <div
-      class="c2 c1"
-      style="align-items: center;"
+    <label
+      class="c2 c3 c4 c5"
+      font-weight="600"
+      for="weather"
+      style="font-weight: 600;"
     >
-      <label
-        class="c3 c4 c5 c6"
-        font-weight="600"
+      Weather
+    </label>
+  </div>
+  <div />
+  <div
+    aria-describedby="label"
+    aria-invalid="false"
+    class="c6 c7"
+    role="group"
+  >
+    <label
+      aria-describedby="label"
+      aria-invalid="false"
+      aria-label="Sunny"
+      aria-required="false"
+      class="c8 c9 c4 c0"
+    >
+      <input
+        class="c10 c11"
+        disabled=""
+        id="weather"
+        name="weather"
+        type="radio"
+        value="\\"sunny\\""
+      />
+      <div
+        class="c12 c13 c0"
+      />
+      <span
+        class="c14 c15"
         for="weather"
-        style="font-weight: 600;"
+        id="label"
       >
-        Weather
-      </label>
-    </div>
-    <div />
-    <div
+        Sunny
+      </span>
+    </label>
+    <label
       aria-describedby="label"
       aria-invalid="false"
-      class="c7 c8"
-      role="group"
+      aria-label="Windy"
+      aria-required="false"
+      class="c8 c9 c4 c0"
     >
-      <label
-        aria-describedby="label"
-        aria-invalid="false"
-        aria-label="Sunny"
-        aria-required="false"
-        class="c9 c10 c5 c1"
-      >
-        <input
-          class="c11 c12"
-          disabled=""
-          id="weather"
-          name="weather"
-          type="radio"
-          value="\\"sunny\\""
-        />
-        <div
-          class="c13 c14 c1"
-        />
-        <span
-          class="c15 c16"
-          for="weather"
-          id="label"
-        >
-          Sunny
-        </span>
-      </label>
-      <label
-        aria-describedby="label"
-        aria-invalid="false"
-        aria-label="Windy"
-        aria-required="false"
-        class="c9 c10 c5 c1"
+      <input
+        class="c10 c11"
+        disabled=""
+        id="weather"
+        name="weather"
+        type="radio"
+        value="\\"windy\\""
+      />
+      <div
+        class="c12 c13 c0"
+      />
+      <span
+        class="c14 c15"
+        for="weather"
+        id="label"
       >
-        <input
-          class="c11 c12"
-          disabled=""
-          id="weather"
-          name="weather"
-          type="radio"
-          value="\\"windy\\""
-        />
-        <div
-          class="c13 c14 c1"
-        />
-        <span
-          class="c15 c16"
-          for="weather"
-          id="label"
-        >
-          Windy
-        </span>
-      </label>
-      <label
-        aria-describedby="label"
-        aria-invalid="false"
-        aria-label="Overcast"
-        aria-required="false"
-        class="c9 c10 c5 c1"
+        Windy
+      </span>
+    </label>
+    <label
+      aria-describedby="label"
+      aria-invalid="false"
+      aria-label="Overcast"
+      aria-required="false"
+      class="c8 c9 c4 c0"
+    >
+      <input
+        class="c10 c11"
+        disabled=""
+        id="weather"
+        name="weather"
+        type="radio"
+        value="\\"overcast\\""
+      />
+      <div
+        class="c12 c13 c0"
+      />
+      <span
+        class="c14 c15"
+        for="weather"
+        id="label"
       >
-        <input
-          class="c11 c12"
-          disabled=""
-          id="weather"
-          name="weather"
-          type="radio"
-          value="\\"overcast\\""
-        />
-        <div
-          class="c13 c14 c1"
-        />
-        <span
-          class="c15 c16"
-          for="weather"
-          id="label"
-        >
-          Overcast
-        </span>
-      </label>
-    </div>
-    <div />
+        Overcast
+      </span>
+    </label>
   </div>
+  <div />
 </div>
 `;
 
 exports[`renders correctly for a disabled RadioGroupField option 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -721,7 +661,7 @@ exports[`renders correctly for a disabled RadioGroupField option 1`] = `
   color: inherit;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -735,7 +675,7 @@ exports[`renders correctly for a disabled RadioGroupField option 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c8 {
+.c7 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -749,7 +689,7 @@ exports[`renders correctly for a disabled RadioGroupField option 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c12 {
+.c11 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -762,7 +702,7 @@ exports[`renders correctly for a disabled RadioGroupField option 1`] = `
   color: inherit;
 }
 
-.c16 {
+.c15 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -776,44 +716,18 @@ exports[`renders correctly for a disabled RadioGroupField option 1`] = `
   margin-left: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c14 {
+.c13 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 100%;
@@ -822,7 +736,7 @@ exports[`renders correctly for a disabled RadioGroupField option 1`] = `
   width: 1em;
 }
 
-.c11 {
+.c10 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -832,26 +746,26 @@ exports[`renders correctly for a disabled RadioGroupField option 1`] = `
   width: 1px;
 }
 
-.c11[disabled] + .c13 {
+.c10[disabled] + .c12 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c11:checked:focus + .c13 {
+.c10:checked:focus + .c12 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11:focus + .c13 {
+.c10:focus + .c12 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11:not([disabled]):checked + .c13 {
+.c10:not([disabled]):checked + .c12 {
   border-color: #7467c0;
 }
 
-.c11:checked + .c13::before {
+.c10:checked + .c12::before {
   background: #7467c0;
   border-radius: 50%;
   content: '';
@@ -865,11 +779,11 @@ exports[`renders correctly for a disabled RadioGroupField option 1`] = `
   width: 8px;
 }
 
-.c11[disabled]:checked + .c13::before {
+.c10[disabled]:checked + .c12::before {
   background: #9a9a9a;
 }
 
-.c10 {
+.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -880,22 +794,22 @@ exports[`renders correctly for a disabled RadioGroupField option 1`] = `
   align-items: center;
 }
 
-.c7 .c9:not(:last-child) {
+.c6 .c8:not(:last-child) {
   margin-bottom: 0.5rem;
 }
 
-abbr.c15 {
+abbr.c14 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c15 {
+i.c14 {
   font-style: italic;
 }
 
-kbd.c15 {
+kbd.c14 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -903,165 +817,161 @@ kbd.c15 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c15 {
+mark.c14 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c15 {
+strong.c14 {
   font-weight: bold;
 }
 
-sub.c15,
-sup.c15 {
+sub.c14,
+sup.c14 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c15,
-u.c15 {
+ins.c14,
+u.c14 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c15,
-cite.c15,
-var.c15,
-em.c15 {
+i.c14,
+cite.c14,
+var.c14,
+em.c14 {
   font-style: italic;
 }
 
-kbd.c15,
-pre.c15,
-samp.c15 {
+kbd.c14,
+pre.c14,
+samp.c14 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c15 .c17 {
+.c14 .c16 {
   top: 0.1em;
 }
 
-.c4 {
+.c3 {
   display: block;
 }
 
-.c3 {
+.c2 {
   margin-bottom: 0 !important;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="align-items: center;"
+  >
+    <label
+      class="c2 c3 c4 c5"
+      font-weight="600"
+      for="weather"
+      style="font-weight: 600;"
+    >
+      Weather
+    </label>
+  </div>
+  <div />
+  <div
+    aria-describedby="label"
+    aria-invalid="false"
+    class="c6 c7"
+    role="group"
   >
-    <div
-      class="c2 c1"
-      style="align-items: center;"
+    <label
+      aria-describedby="label"
+      aria-invalid="false"
+      aria-label="Sunny"
+      aria-required="false"
+      class="c8 c9 c4 c0"
     >
-      <label
-        class="c3 c4 c5 c6"
-        font-weight="600"
+      <input
+        class="c10 c11"
+        disabled=""
+        id="weather"
+        name="weather"
+        type="radio"
+        value="\\"sunny\\""
+      />
+      <div
+        class="c12 c13 c0"
+      />
+      <span
+        class="c14 c15"
         for="weather"
-        style="font-weight: 600;"
+        id="label"
       >
-        Weather
-      </label>
-    </div>
-    <div />
-    <div
+        Sunny
+      </span>
+    </label>
+    <label
       aria-describedby="label"
       aria-invalid="false"
-      class="c7 c8"
-      role="group"
+      aria-label="Windy"
+      aria-required="false"
+      class="c8 c9 c4 c0"
     >
-      <label
-        aria-describedby="label"
-        aria-invalid="false"
-        aria-label="Sunny"
-        aria-required="false"
-        class="c9 c10 c5 c1"
-      >
-        <input
-          class="c11 c12"
-          disabled=""
-          id="weather"
-          name="weather"
-          type="radio"
-          value="\\"sunny\\""
-        />
-        <div
-          class="c13 c14 c1"
-        />
-        <span
-          class="c15 c16"
-          for="weather"
-          id="label"
-        >
-          Sunny
-        </span>
-      </label>
-      <label
-        aria-describedby="label"
-        aria-invalid="false"
-        aria-label="Windy"
-        aria-required="false"
-        class="c9 c10 c5 c1"
+      <input
+        class="c10 c11"
+        id="weather"
+        name="weather"
+        type="radio"
+        value="\\"windy\\""
+      />
+      <div
+        class="c12 c13 c0"
+      />
+      <span
+        class="c14 c15"
+        for="weather"
+        id="label"
       >
-        <input
-          class="c11 c12"
-          id="weather"
-          name="weather"
-          type="radio"
-          value="\\"windy\\""
-        />
-        <div
-          class="c13 c14 c1"
-        />
-        <span
-          class="c15 c16"
-          for="weather"
-          id="label"
-        >
-          Windy
-        </span>
-      </label>
-      <label
-        aria-describedby="label"
-        aria-invalid="false"
-        aria-label="Overcast"
-        aria-required="false"
-        class="c9 c10 c5 c1"
+        Windy
+      </span>
+    </label>
+    <label
+      aria-describedby="label"
+      aria-invalid="false"
+      aria-label="Overcast"
+      aria-required="false"
+      class="c8 c9 c4 c0"
+    >
+      <input
+        class="c10 c11"
+        id="weather"
+        name="weather"
+        type="radio"
+        value="\\"overcast\\""
+      />
+      <div
+        class="c12 c13 c0"
+      />
+      <span
+        class="c14 c15"
+        for="weather"
+        id="label"
       >
-        <input
-          class="c11 c12"
-          id="weather"
-          name="weather"
-          type="radio"
-          value="\\"overcast\\""
-        />
-        <div
-          class="c13 c14 c1"
-        />
-        <span
-          class="c15 c16"
-          for="weather"
-          id="label"
-        >
-          Overcast
-        </span>
-      </label>
-    </div>
-    <div />
+        Overcast
+      </span>
+    </label>
   </div>
+  <div />
 </div>
 `;
 
 exports[`renders correctly for a required field 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1074,7 +984,7 @@ exports[`renders correctly for a required field 1`] = `
   color: inherit;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1088,7 +998,7 @@ exports[`renders correctly for a required field 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c8 {
+.c7 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1102,7 +1012,7 @@ exports[`renders correctly for a required field 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c12 {
+.c11 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1115,7 +1025,7 @@ exports[`renders correctly for a required field 1`] = `
   color: inherit;
 }
 
-.c16 {
+.c15 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1129,44 +1039,18 @@ exports[`renders correctly for a required field 1`] = `
   margin-left: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c14 {
+.c13 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 100%;
@@ -1175,7 +1059,7 @@ exports[`renders correctly for a required field 1`] = `
   width: 1em;
 }
 
-.c11 {
+.c10 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -1185,26 +1069,26 @@ exports[`renders correctly for a required field 1`] = `
   width: 1px;
 }
 
-.c11[disabled] + .c13 {
+.c10[disabled] + .c12 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c11:checked:focus + .c13 {
+.c10:checked:focus + .c12 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11:focus + .c13 {
+.c10:focus + .c12 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11:not([disabled]):checked + .c13 {
+.c10:not([disabled]):checked + .c12 {
   border-color: #7467c0;
 }
 
-.c11:checked + .c13::before {
+.c10:checked + .c12::before {
   background: #7467c0;
   border-radius: 50%;
   content: '';
@@ -1218,34 +1102,34 @@ exports[`renders correctly for a required field 1`] = `
   width: 8px;
 }
 
-.c11[disabled]:checked + .c13::before {
+.c10[disabled]:checked + .c12::before {
   background: #9a9a9a;
 }
 
-.c17[disabled] + .c13 {
+.c16[disabled] + .c12 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c17:checked:focus + .c13 {
+.c16:checked:focus + .c12 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c17:focus + .c13 {
+.c16:focus + .c12 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c17:not([disabled]):checked + .c13 {
+.c16:not([disabled]):checked + .c12 {
   border-color: #7467c0;
 }
 
-.c17:checked + .c13 {
+.c16:checked + .c12 {
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c17:checked + .c13::before {
+.c16:checked + .c12::before {
   background: #7467c0;
   border-radius: 50%;
   content: '';
@@ -1259,11 +1143,11 @@ exports[`renders correctly for a required field 1`] = `
   width: 8px;
 }
 
-.c17[disabled]:checked + .c13::before {
+.c16[disabled]:checked + .c12::before {
   background: #9a9a9a;
 }
 
-.c10 {
+.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1274,22 +1158,22 @@ exports[`renders correctly for a required field 1`] = `
   align-items: center;
 }
 
-.c7 .c9:not(:last-child) {
+.c6 .c8:not(:last-child) {
   margin-bottom: 0.5rem;
 }
 
-abbr.c15 {
+abbr.c14 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c15 {
+i.c14 {
   font-style: italic;
 }
 
-kbd.c15 {
+kbd.c14 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -1297,164 +1181,160 @@ kbd.c15 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c15 {
+mark.c14 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c15 {
+strong.c14 {
   font-weight: bold;
 }
 
-sub.c15,
-sup.c15 {
+sub.c14,
+sup.c14 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c15,
-u.c15 {
+ins.c14,
+u.c14 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c15,
-cite.c15,
-var.c15,
-em.c15 {
+i.c14,
+cite.c14,
+var.c14,
+em.c14 {
   font-style: italic;
 }
 
-kbd.c15,
-pre.c15,
-samp.c15 {
+kbd.c14,
+pre.c14,
+samp.c14 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c15 .c18 {
+.c14 .c17 {
   top: 0.1em;
 }
 
-.c4 {
+.c3 {
   display: block;
 }
 
-.c3 {
+.c2 {
   margin-bottom: 0 !important;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="align-items: center;"
   >
-    <div
-      class="c2 c1"
-      style="align-items: center;"
+    <label
+      class="c2 c3 c4 c5"
+      font-weight="600"
+      for="username"
+      style="font-weight: 600;"
     >
-      <label
-        class="c3 c4 c5 c6"
-        font-weight="600"
+      Username
+    </label>
+  </div>
+  <div />
+  <div
+    aria-describedby="label"
+    aria-invalid="false"
+    class="c6 c7"
+    role="group"
+  >
+    <label
+      aria-describedby="label"
+      aria-invalid="false"
+      aria-label="Sunny"
+      aria-required="false"
+      class="c8 c9 c4 c0"
+    >
+      <input
+        class="c10 c11"
+        id="username"
+        name="weather"
+        type="radio"
+        value="\\"sunny\\""
+      />
+      <div
+        class="c12 c13 c0"
+      />
+      <span
+        class="c14 c15"
         for="username"
-        style="font-weight: 600;"
+        id="label"
       >
-        Username
-      </label>
-    </div>
-    <div />
-    <div
+        Sunny
+      </span>
+    </label>
+    <label
       aria-describedby="label"
       aria-invalid="false"
-      class="c7 c8"
-      role="group"
+      aria-label="Windy"
+      aria-required="false"
+      class="c8 c9 c4 c0"
     >
-      <label
-        aria-describedby="label"
-        aria-invalid="false"
-        aria-label="Sunny"
-        aria-required="false"
-        class="c9 c10 c5 c1"
-      >
-        <input
-          class="c11 c12"
-          id="username"
-          name="weather"
-          type="radio"
-          value="\\"sunny\\""
-        />
-        <div
-          class="c13 c14 c1"
-        />
-        <span
-          class="c15 c16"
-          for="username"
-          id="label"
-        >
-          Sunny
-        </span>
-      </label>
-      <label
-        aria-describedby="label"
-        aria-invalid="false"
-        aria-label="Windy"
-        aria-required="false"
-        class="c9 c10 c5 c1"
+      <input
+        class="c10 c11"
+        id="username"
+        name="weather"
+        type="radio"
+        value="\\"windy\\""
+      />
+      <div
+        class="c12 c13 c0"
+      />
+      <span
+        class="c14 c15"
+        for="username"
+        id="label"
       >
-        <input
-          class="c11 c12"
-          id="username"
-          name="weather"
-          type="radio"
-          value="\\"windy\\""
-        />
-        <div
-          class="c13 c14 c1"
-        />
-        <span
-          class="c15 c16"
-          for="username"
-          id="label"
-        >
-          Windy
-        </span>
-      </label>
-      <label
-        aria-describedby="label"
-        aria-invalid="false"
-        aria-label="Overcast"
-        aria-required="false"
-        class="c9 c10 c5 c1"
+        Windy
+      </span>
+    </label>
+    <label
+      aria-describedby="label"
+      aria-invalid="false"
+      aria-label="Overcast"
+      aria-required="false"
+      class="c8 c9 c4 c0"
+    >
+      <input
+        class="c10 c11"
+        id="username"
+        name="weather"
+        type="radio"
+        value="\\"overcast\\""
+      />
+      <div
+        class="c12 c13 c0"
+      />
+      <span
+        class="c14 c15"
+        for="username"
+        id="label"
       >
-        <input
-          class="c11 c12"
-          id="username"
-          name="weather"
-          type="radio"
-          value="\\"overcast\\""
-        />
-        <div
-          class="c13 c14 c1"
-        />
-        <span
-          class="c15 c16"
-          for="username"
-          id="label"
-        >
-          Overcast
-        </span>
-      </label>
-    </div>
-    <div />
+        Overcast
+      </span>
+    </label>
   </div>
+  <div />
 </div>
 `;
 
 exports[`renders correctly for an input field with a description 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1467,7 +1347,7 @@ exports[`renders correctly for an input field with a description 1`] = `
   color: inherit;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1481,7 +1361,7 @@ exports[`renders correctly for an input field with a description 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c10 {
+.c9 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1495,7 +1375,7 @@ exports[`renders correctly for an input field with a description 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c14 {
+.c13 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1508,7 +1388,7 @@ exports[`renders correctly for an input field with a description 1`] = `
   color: inherit;
 }
 
-.c17 {
+.c16 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1522,44 +1402,18 @@ exports[`renders correctly for an input field with a description 1`] = `
   margin-left: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c16 {
+.c15 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 100%;
@@ -1568,7 +1422,7 @@ exports[`renders correctly for an input field with a description 1`] = `
   width: 1em;
 }
 
-.c13 {
+.c12 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -1578,26 +1432,26 @@ exports[`renders correctly for an input field with a description 1`] = `
   width: 1px;
 }
 
-.c13[disabled] + .c15 {
+.c12[disabled] + .c14 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c13:checked:focus + .c15 {
+.c12:checked:focus + .c14 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c13:focus + .c15 {
+.c12:focus + .c14 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c13:not([disabled]):checked + .c15 {
+.c12:not([disabled]):checked + .c14 {
   border-color: #7467c0;
 }
 
-.c13:checked + .c15::before {
+.c12:checked + .c14::before {
   background: #7467c0;
   border-radius: 50%;
   content: '';
@@ -1611,34 +1465,34 @@ exports[`renders correctly for an input field with a description 1`] = `
   width: 8px;
 }
 
-.c13[disabled]:checked + .c15::before {
+.c12[disabled]:checked + .c14::before {
   background: #9a9a9a;
 }
 
-.c18[disabled] + .c15 {
+.c17[disabled] + .c14 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c18:checked:focus + .c15 {
+.c17:checked:focus + .c14 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c18:focus + .c15 {
+.c17:focus + .c14 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c18:not([disabled]):checked + .c15 {
+.c17:not([disabled]):checked + .c14 {
   border-color: #7467c0;
 }
 
-.c18:checked + .c15 {
+.c17:checked + .c14 {
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c18:checked + .c15::before {
+.c17:checked + .c14::before {
   background: #7467c0;
   border-radius: 50%;
   content: '';
@@ -1652,11 +1506,11 @@ exports[`renders correctly for an input field with a description 1`] = `
   width: 8px;
 }
 
-.c18[disabled]:checked + .c15::before {
+.c17[disabled]:checked + .c14::before {
   background: #9a9a9a;
 }
 
-.c12 {
+.c11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1667,22 +1521,22 @@ exports[`renders correctly for an input field with a description 1`] = `
   align-items: center;
 }
 
-.c9 .c11:not(:last-child) {
+.c8 .c10:not(:last-child) {
   margin-bottom: 0.5rem;
 }
 
-abbr.c8 {
+abbr.c7 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c8 {
+i.c7 {
   font-style: italic;
 }
 
-kbd.c8 {
+kbd.c7 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -1690,173 +1544,169 @@ kbd.c8 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c8 {
+mark.c7 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c8 {
+strong.c7 {
   font-weight: bold;
 }
 
-sub.c8,
-sup.c8 {
+sub.c7,
+sup.c7 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c8,
-u.c8 {
+ins.c7,
+u.c7 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c8,
-cite.c8,
-var.c8,
-em.c8 {
+i.c7,
+cite.c7,
+var.c7,
+em.c7 {
   font-style: italic;
 }
 
-kbd.c8,
-pre.c8,
-samp.c8 {
+kbd.c7,
+pre.c7,
+samp.c7 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c8 .c19 {
+.c7 .c18 {
   top: 0.1em;
 }
 
-.c4 {
+.c3 {
   display: block;
 }
 
-.c3 {
+.c2 {
   margin-bottom: 0 !important;
 }
 
-.c7 {
+.c6 {
   display: block;
   font-size: 0.8rem;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="align-items: center;"
+  >
+    <label
+      class="c2 c3 c4 c5"
+      font-weight="600"
+      for="username"
+      style="font-weight: 600;"
+    >
+      Username
+    </label>
+  </div>
+  <span
+    class="c6 c7 c0"
+  >
+    Required for your fannypack
+  </span>
+  <div
+    aria-describedby="label"
+    aria-invalid="false"
+    class="c8 c9"
+    role="group"
   >
-    <div
-      class="c2 c1"
-      style="align-items: center;"
+    <label
+      aria-describedby="label"
+      aria-invalid="false"
+      aria-label="Sunny"
+      aria-required="false"
+      class="c10 c11 c4 c0"
     >
-      <label
-        class="c3 c4 c5 c6"
-        font-weight="600"
+      <input
+        class="c12 c13"
+        id="username"
+        name="weather"
+        type="radio"
+        value="\\"sunny\\""
+      />
+      <div
+        class="c14 c15 c0"
+      />
+      <span
+        class="c7 c16"
         for="username"
-        style="font-weight: 600;"
+        id="label"
       >
-        Username
-      </label>
-    </div>
-    <span
-      class="c7 c8 c1"
-    >
-      Required for your fannypack
-    </span>
-    <div
+        Sunny
+      </span>
+    </label>
+    <label
       aria-describedby="label"
       aria-invalid="false"
-      class="c9 c10"
-      role="group"
+      aria-label="Windy"
+      aria-required="false"
+      class="c10 c11 c4 c0"
     >
-      <label
-        aria-describedby="label"
-        aria-invalid="false"
-        aria-label="Sunny"
-        aria-required="false"
-        class="c11 c12 c5 c1"
-      >
-        <input
-          class="c13 c14"
-          id="username"
-          name="weather"
-          type="radio"
-          value="\\"sunny\\""
-        />
-        <div
-          class="c15 c16 c1"
-        />
-        <span
-          class="c8 c17"
-          for="username"
-          id="label"
-        >
-          Sunny
-        </span>
-      </label>
-      <label
-        aria-describedby="label"
-        aria-invalid="false"
-        aria-label="Windy"
-        aria-required="false"
-        class="c11 c12 c5 c1"
+      <input
+        class="c12 c13"
+        id="username"
+        name="weather"
+        type="radio"
+        value="\\"windy\\""
+      />
+      <div
+        class="c14 c15 c0"
+      />
+      <span
+        class="c7 c16"
+        for="username"
+        id="label"
       >
-        <input
-          class="c13 c14"
-          id="username"
-          name="weather"
-          type="radio"
-          value="\\"windy\\""
-        />
-        <div
-          class="c15 c16 c1"
-        />
-        <span
-          class="c8 c17"
-          for="username"
-          id="label"
-        >
-          Windy
-        </span>
-      </label>
-      <label
-        aria-describedby="label"
-        aria-invalid="false"
-        aria-label="Overcast"
-        aria-required="false"
-        class="c11 c12 c5 c1"
+        Windy
+      </span>
+    </label>
+    <label
+      aria-describedby="label"
+      aria-invalid="false"
+      aria-label="Overcast"
+      aria-required="false"
+      class="c10 c11 c4 c0"
+    >
+      <input
+        class="c12 c13"
+        id="username"
+        name="weather"
+        type="radio"
+        value="\\"overcast\\""
+      />
+      <div
+        class="c14 c15 c0"
+      />
+      <span
+        class="c7 c16"
+        for="username"
+        id="label"
       >
-        <input
-          class="c13 c14"
-          id="username"
-          name="weather"
-          type="radio"
-          value="\\"overcast\\""
-        />
-        <div
-          class="c15 c16 c1"
-        />
-        <span
-          class="c8 c17"
-          for="username"
-          id="label"
-        >
-          Overcast
-        </span>
-      </label>
-    </div>
-    <div />
+        Overcast
+      </span>
+    </label>
   </div>
+  <div />
 </div>
 `;
 
 exports[`renders correctly for an input field with a hint 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1869,7 +1719,7 @@ exports[`renders correctly for an input field with a hint 1`] = `
   color: inherit;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1883,7 +1733,7 @@ exports[`renders correctly for an input field with a hint 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c8 {
+.c7 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1897,7 +1747,7 @@ exports[`renders correctly for an input field with a hint 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c12 {
+.c11 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1910,7 +1760,7 @@ exports[`renders correctly for an input field with a hint 1`] = `
   color: inherit;
 }
 
-.c16 {
+.c15 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1924,44 +1774,18 @@ exports[`renders correctly for an input field with a hint 1`] = `
   margin-left: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c14 {
+.c13 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 100%;
@@ -1970,7 +1794,7 @@ exports[`renders correctly for an input field with a hint 1`] = `
   width: 1em;
 }
 
-.c11 {
+.c10 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -1980,26 +1804,26 @@ exports[`renders correctly for an input field with a hint 1`] = `
   width: 1px;
 }
 
-.c11[disabled] + .c13 {
+.c10[disabled] + .c12 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c11:checked:focus + .c13 {
+.c10:checked:focus + .c12 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11:focus + .c13 {
+.c10:focus + .c12 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11:not([disabled]):checked + .c13 {
+.c10:not([disabled]):checked + .c12 {
   border-color: #7467c0;
 }
 
-.c11:checked + .c13::before {
+.c10:checked + .c12::before {
   background: #7467c0;
   border-radius: 50%;
   content: '';
@@ -2013,34 +1837,34 @@ exports[`renders correctly for an input field with a hint 1`] = `
   width: 8px;
 }
 
-.c11[disabled]:checked + .c13::before {
+.c10[disabled]:checked + .c12::before {
   background: #9a9a9a;
 }
 
-.c18[disabled] + .c13 {
+.c17[disabled] + .c12 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c18:checked:focus + .c13 {
+.c17:checked:focus + .c12 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c18:focus + .c13 {
+.c17:focus + .c12 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c18:not([disabled]):checked + .c13 {
+.c17:not([disabled]):checked + .c12 {
   border-color: #7467c0;
 }
 
-.c18:checked + .c13 {
+.c17:checked + .c12 {
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c18:checked + .c13::before {
+.c17:checked + .c12::before {
   background: #7467c0;
   border-radius: 50%;
   content: '';
@@ -2054,11 +1878,11 @@ exports[`renders correctly for an input field with a hint 1`] = `
   width: 8px;
 }
 
-.c18[disabled]:checked + .c13::before {
+.c17[disabled]:checked + .c12::before {
   background: #9a9a9a;
 }
 
-.c10 {
+.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2069,22 +1893,22 @@ exports[`renders correctly for an input field with a hint 1`] = `
   align-items: center;
 }
 
-.c7 .c9:not(:last-child) {
+.c6 .c8:not(:last-child) {
   margin-bottom: 0.5rem;
 }
 
-abbr.c15 {
+abbr.c14 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c15 {
+i.c14 {
   font-style: italic;
 }
 
-kbd.c15 {
+kbd.c14 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -2092,174 +1916,170 @@ kbd.c15 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c15 {
+mark.c14 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c15 {
+strong.c14 {
   font-weight: bold;
 }
 
-sub.c15,
-sup.c15 {
+sub.c14,
+sup.c14 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c15,
-u.c15 {
+ins.c14,
+u.c14 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c15,
-cite.c15,
-var.c15,
-em.c15 {
+i.c14,
+cite.c14,
+var.c14,
+em.c14 {
   font-style: italic;
 }
 
-kbd.c15,
-pre.c15,
-samp.c15 {
+kbd.c14,
+pre.c14,
+samp.c14 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c15 .c19 {
+.c14 .c18 {
   top: 0.1em;
 }
 
-.c4 {
+.c3 {
   display: block;
 }
 
-.c3 {
+.c2 {
   margin-bottom: 0 !important;
 }
 
-.c17 {
+.c16 {
   display: block;
   font-size: 0.8rem;
   margin-top: 0.25rem;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="align-items: center;"
+  >
+    <label
+      class="c2 c3 c4 c5"
+      font-weight="600"
+      for="username"
+      style="font-weight: 600;"
+    >
+      Username
+    </label>
+  </div>
+  <div />
+  <div
+    aria-describedby="label"
+    aria-invalid="false"
+    class="c6 c7"
+    role="group"
   >
-    <div
-      class="c2 c1"
-      style="align-items: center;"
+    <label
+      aria-describedby="label"
+      aria-invalid="false"
+      aria-label="Sunny"
+      aria-required="false"
+      class="c8 c9 c4 c0"
     >
-      <label
-        class="c3 c4 c5 c6"
-        font-weight="600"
+      <input
+        class="c10 c11"
+        id="username"
+        name="weather"
+        type="radio"
+        value="\\"sunny\\""
+      />
+      <div
+        class="c12 c13 c0"
+      />
+      <span
+        class="c14 c15"
         for="username"
-        style="font-weight: 600;"
+        id="label"
       >
-        Username
-      </label>
-    </div>
-    <div />
-    <div
+        Sunny
+      </span>
+    </label>
+    <label
       aria-describedby="label"
       aria-invalid="false"
-      class="c7 c8"
-      role="group"
+      aria-label="Windy"
+      aria-required="false"
+      class="c8 c9 c4 c0"
     >
-      <label
-        aria-describedby="label"
-        aria-invalid="false"
-        aria-label="Sunny"
-        aria-required="false"
-        class="c9 c10 c5 c1"
-      >
-        <input
-          class="c11 c12"
-          id="username"
-          name="weather"
-          type="radio"
-          value="\\"sunny\\""
-        />
-        <div
-          class="c13 c14 c1"
-        />
-        <span
-          class="c15 c16"
-          for="username"
-          id="label"
-        >
-          Sunny
-        </span>
-      </label>
-      <label
-        aria-describedby="label"
-        aria-invalid="false"
-        aria-label="Windy"
-        aria-required="false"
-        class="c9 c10 c5 c1"
-      >
-        <input
-          class="c11 c12"
-          id="username"
-          name="weather"
-          type="radio"
-          value="\\"windy\\""
-        />
-        <div
-          class="c13 c14 c1"
-        />
-        <span
-          class="c15 c16"
-          for="username"
-          id="label"
-        >
-          Windy
-        </span>
-      </label>
-      <label
-        aria-describedby="label"
-        aria-invalid="false"
-        aria-label="Overcast"
-        aria-required="false"
-        class="c9 c10 c5 c1"
+      <input
+        class="c10 c11"
+        id="username"
+        name="weather"
+        type="radio"
+        value="\\"windy\\""
+      />
+      <div
+        class="c12 c13 c0"
+      />
+      <span
+        class="c14 c15"
+        for="username"
+        id="label"
       >
-        <input
-          class="c11 c12"
-          id="username"
-          name="weather"
-          type="radio"
-          value="\\"overcast\\""
-        />
-        <div
-          class="c13 c14 c1"
-        />
-        <span
-          class="c15 c16"
-          for="username"
-          id="label"
-        >
-          Overcast
-        </span>
-      </label>
-    </div>
-    <span
-      class="c17 c15 c1"
+        Windy
+      </span>
+    </label>
+    <label
+      aria-describedby="label"
+      aria-invalid="false"
+      aria-label="Overcast"
+      aria-required="false"
+      class="c8 c9 c4 c0"
     >
-      Must be awesome
-    </span>
+      <input
+        class="c10 c11"
+        id="username"
+        name="weather"
+        type="radio"
+        value="\\"overcast\\""
+      />
+      <div
+        class="c12 c13 c0"
+      />
+      <span
+        class="c14 c15"
+        for="username"
+        id="label"
+      >
+        Overcast
+      </span>
+    </label>
   </div>
+  <span
+    class="c16 c14 c0"
+  >
+    Must be awesome
+  </span>
 </div>
 `;
 
 exports[`renders correctly for an optional input field 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2272,7 +2092,7 @@ exports[`renders correctly for an optional input field 1`] = `
   color: inherit;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2286,7 +2106,7 @@ exports[`renders correctly for an optional input field 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c10 {
+.c9 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2300,7 +2120,7 @@ exports[`renders correctly for an optional input field 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c14 {
+.c13 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2313,7 +2133,7 @@ exports[`renders correctly for an optional input field 1`] = `
   color: inherit;
 }
 
-.c17 {
+.c16 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2327,44 +2147,18 @@ exports[`renders correctly for an optional input field 1`] = `
   margin-left: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c16 {
+.c15 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 100%;
@@ -2373,7 +2167,7 @@ exports[`renders correctly for an optional input field 1`] = `
   width: 1em;
 }
 
-.c13 {
+.c12 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -2383,26 +2177,26 @@ exports[`renders correctly for an optional input field 1`] = `
   width: 1px;
 }
 
-.c13[disabled] + .c15 {
+.c12[disabled] + .c14 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c13:checked:focus + .c15 {
+.c12:checked:focus + .c14 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c13:focus + .c15 {
+.c12:focus + .c14 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c13:not([disabled]):checked + .c15 {
+.c12:not([disabled]):checked + .c14 {
   border-color: #7467c0;
 }
 
-.c13:checked + .c15::before {
+.c12:checked + .c14::before {
   background: #7467c0;
   border-radius: 50%;
   content: '';
@@ -2416,34 +2210,34 @@ exports[`renders correctly for an optional input field 1`] = `
   width: 8px;
 }
 
-.c13[disabled]:checked + .c15::before {
+.c12[disabled]:checked + .c14::before {
   background: #9a9a9a;
 }
 
-.c18[disabled] + .c15 {
+.c17[disabled] + .c14 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c18:checked:focus + .c15 {
+.c17:checked:focus + .c14 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c18:focus + .c15 {
+.c17:focus + .c14 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c18:not([disabled]):checked + .c15 {
+.c17:not([disabled]):checked + .c14 {
   border-color: #7467c0;
 }
 
-.c18:checked + .c15 {
+.c17:checked + .c14 {
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c18:checked + .c15::before {
+.c17:checked + .c14::before {
   background: #7467c0;
   border-radius: 50%;
   content: '';
@@ -2457,11 +2251,11 @@ exports[`renders correctly for an optional input field 1`] = `
   width: 8px;
 }
 
-.c18[disabled]:checked + .c15::before {
+.c17[disabled]:checked + .c14::before {
   background: #9a9a9a;
 }
 
-.c12 {
+.c11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2472,22 +2266,22 @@ exports[`renders correctly for an optional input field 1`] = `
   align-items: center;
 }
 
-.c9 .c11:not(:last-child) {
+.c8 .c10:not(:last-child) {
   margin-bottom: 0.5rem;
 }
 
-abbr.c8 {
+abbr.c7 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c8 {
+i.c7 {
   font-style: italic;
 }
 
-kbd.c8 {
+kbd.c7 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -2495,175 +2289,171 @@ kbd.c8 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c8 {
+mark.c7 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c8 {
+strong.c7 {
   font-weight: bold;
 }
 
-sub.c8,
-sup.c8 {
+sub.c7,
+sup.c7 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c8,
-u.c8 {
+ins.c7,
+u.c7 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c8,
-cite.c8,
-var.c8,
-em.c8 {
+i.c7,
+cite.c7,
+var.c7,
+em.c7 {
   font-style: italic;
 }
 
-kbd.c8,
-pre.c8,
-samp.c8 {
+kbd.c7,
+pre.c7,
+samp.c7 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c8 .c19 {
+.c7 .c18 {
   top: 0.1em;
 }
 
-.c4 {
+.c3 {
   display: block;
 }
 
-.c3 {
+.c2 {
   margin-bottom: 0 !important;
 }
 
-.c7 {
+.c6 {
   font-size: 0.8rem;
   color: #708da8;
   margin-left: 0.5rem;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="align-items: center;"
   >
-    <div
-      class="c2 c1"
-      style="align-items: center;"
+    <label
+      class="c2 c3 c4 c5"
+      font-weight="600"
+      for="username"
+      style="font-weight: 600;"
     >
-      <label
-        class="c3 c4 c5 c6"
-        font-weight="600"
+      Username
+    </label>
+    <span
+      class="c6 c7 c0"
+    >
+      OPTIONAL
+    </span>
+  </div>
+  <div />
+  <div
+    aria-describedby="label"
+    aria-invalid="false"
+    class="c8 c9"
+    role="group"
+  >
+    <label
+      aria-describedby="label"
+      aria-invalid="false"
+      aria-label="Sunny"
+      aria-required="false"
+      class="c10 c11 c4 c0"
+    >
+      <input
+        class="c12 c13"
+        id="username"
+        name="weather"
+        type="radio"
+        value="\\"sunny\\""
+      />
+      <div
+        class="c14 c15 c0"
+      />
+      <span
+        class="c7 c16"
         for="username"
-        style="font-weight: 600;"
+        id="label"
       >
-        Username
-      </label>
+        Sunny
+      </span>
+    </label>
+    <label
+      aria-describedby="label"
+      aria-invalid="false"
+      aria-label="Windy"
+      aria-required="false"
+      class="c10 c11 c4 c0"
+    >
+      <input
+        class="c12 c13"
+        id="username"
+        name="weather"
+        type="radio"
+        value="\\"windy\\""
+      />
+      <div
+        class="c14 c15 c0"
+      />
       <span
-        class="c7 c8 c1"
+        class="c7 c16"
+        for="username"
+        id="label"
       >
-        OPTIONAL
+        Windy
       </span>
-    </div>
-    <div />
-    <div
+    </label>
+    <label
       aria-describedby="label"
       aria-invalid="false"
-      class="c9 c10"
-      role="group"
+      aria-label="Overcast"
+      aria-required="false"
+      class="c10 c11 c4 c0"
     >
-      <label
-        aria-describedby="label"
-        aria-invalid="false"
-        aria-label="Sunny"
-        aria-required="false"
-        class="c11 c12 c5 c1"
-      >
-        <input
-          class="c13 c14"
-          id="username"
-          name="weather"
-          type="radio"
-          value="\\"sunny\\""
-        />
-        <div
-          class="c15 c16 c1"
-        />
-        <span
-          class="c8 c17"
-          for="username"
-          id="label"
-        >
-          Sunny
-        </span>
-      </label>
-      <label
-        aria-describedby="label"
-        aria-invalid="false"
-        aria-label="Windy"
-        aria-required="false"
-        class="c11 c12 c5 c1"
-      >
-        <input
-          class="c13 c14"
-          id="username"
-          name="weather"
-          type="radio"
-          value="\\"windy\\""
-        />
-        <div
-          class="c15 c16 c1"
-        />
-        <span
-          class="c8 c17"
-          for="username"
-          id="label"
-        >
-          Windy
-        </span>
-      </label>
-      <label
-        aria-describedby="label"
-        aria-invalid="false"
-        aria-label="Overcast"
-        aria-required="false"
-        class="c11 c12 c5 c1"
+      <input
+        class="c12 c13"
+        id="username"
+        name="weather"
+        type="radio"
+        value="\\"overcast\\""
+      />
+      <div
+        class="c14 c15 c0"
+      />
+      <span
+        class="c7 c16"
+        for="username"
+        id="label"
       >
-        <input
-          class="c13 c14"
-          id="username"
-          name="weather"
-          type="radio"
-          value="\\"overcast\\""
-        />
-        <div
-          class="c15 c16 c1"
-        />
-        <span
-          class="c8 c17"
-          for="username"
-          id="label"
-        >
-          Overcast
-        </span>
-      </label>
-    </div>
-    <div />
+        Overcast
+      </span>
+    </label>
   </div>
+  <div />
 </div>
 `;
 
 exports[`states renders correctly for an RadioGroupField with state danger 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2676,7 +2466,7 @@ exports[`states renders correctly for an RadioGroupField with state danger 1`] =
   color: inherit;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2690,7 +2480,7 @@ exports[`states renders correctly for an RadioGroupField with state danger 1`] =
   margin-bottom: 0.25rem !important;
 }
 
-.c8 {
+.c7 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2704,7 +2494,7 @@ exports[`states renders correctly for an RadioGroupField with state danger 1`] =
   margin-top: 0.5rem !important;
 }
 
-.c12 {
+.c11 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2717,7 +2507,7 @@ exports[`states renders correctly for an RadioGroupField with state danger 1`] =
   color: inherit;
 }
 
-.c16 {
+.c15 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2731,44 +2521,18 @@ exports[`states renders correctly for an RadioGroupField with state danger 1`] =
   margin-left: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c14 {
+.c13 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 100%;
@@ -2777,31 +2541,31 @@ exports[`states renders correctly for an RadioGroupField with state danger 1`] =
   width: 1em;
 }
 
-.c14 {
+.c13 {
   border-color: #e24c67;
   box-shadow: #e24c67 0px 0px 0px 1px !important;
 }
 
-.c17[disabled] + .c13 {
+.c16[disabled] + .c12 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c17:checked:focus + .c13 {
+.c16:checked:focus + .c12 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c17:focus + .c13 {
+.c16:focus + .c12 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c17:not([disabled]):checked + .c13 {
+.c16:not([disabled]):checked + .c12 {
   border-color: #7467c0;
 }
 
-.c17:checked + .c13::before {
+.c16:checked + .c12::before {
   background: #7467c0;
   border-radius: 50%;
   content: '';
@@ -2815,11 +2579,11 @@ exports[`states renders correctly for an RadioGroupField with state danger 1`] =
   width: 8px;
 }
 
-.c17[disabled]:checked + .c13::before {
+.c16[disabled]:checked + .c12::before {
   background: #9a9a9a;
 }
 
-.c11 {
+.c10 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -2829,30 +2593,30 @@ exports[`states renders correctly for an RadioGroupField with state danger 1`] =
   width: 1px;
 }
 
-.c11[disabled] + .c13 {
+.c10[disabled] + .c12 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c11:checked:focus + .c13 {
+.c10:checked:focus + .c12 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11:focus + .c13 {
+.c10:focus + .c12 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11:not([disabled]):checked + .c13 {
+.c10:not([disabled]):checked + .c12 {
   border-color: #7467c0;
 }
 
-.c11:checked + .c13 {
+.c10:checked + .c12 {
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11:checked + .c13::before {
+.c10:checked + .c12::before {
   background: #7467c0;
   border-radius: 50%;
   content: '';
@@ -2866,11 +2630,11 @@ exports[`states renders correctly for an RadioGroupField with state danger 1`] =
   width: 8px;
 }
 
-.c11[disabled]:checked + .c13::before {
+.c10[disabled]:checked + .c12::before {
   background: #9a9a9a;
 }
 
-.c10 {
+.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2881,22 +2645,22 @@ exports[`states renders correctly for an RadioGroupField with state danger 1`] =
   align-items: center;
 }
 
-.c7 .c9:not(:last-child) {
+.c6 .c8:not(:last-child) {
   margin-bottom: 0.5rem;
 }
 
-abbr.c15 {
+abbr.c14 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c15 {
+i.c14 {
   font-style: italic;
 }
 
-kbd.c15 {
+kbd.c14 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -2904,164 +2668,160 @@ kbd.c15 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c15 {
+mark.c14 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c15 {
+strong.c14 {
   font-weight: bold;
 }
 
-sub.c15,
-sup.c15 {
+sub.c14,
+sup.c14 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c15,
-u.c15 {
+ins.c14,
+u.c14 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c15,
-cite.c15,
-var.c15,
-em.c15 {
+i.c14,
+cite.c14,
+var.c14,
+em.c14 {
   font-style: italic;
 }
 
-kbd.c15,
-pre.c15,
-samp.c15 {
+kbd.c14,
+pre.c14,
+samp.c14 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c15 .c18 {
+.c14 .c17 {
   top: 0.1em;
 }
 
-.c4 {
+.c3 {
   display: block;
 }
 
-.c3 {
+.c2 {
   margin-bottom: 0 !important;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="align-items: center;"
+  >
+    <label
+      class="c2 c3 c4 c5"
+      font-weight="600"
+      for="weather"
+      style="font-weight: 600;"
+    >
+      Weather
+    </label>
+  </div>
+  <div />
+  <div
+    aria-describedby="label"
+    aria-invalid="true"
+    class="c6 c7"
+    role="group"
   >
-    <div
-      class="c2 c1"
-      style="align-items: center;"
+    <label
+      aria-describedby="label"
+      aria-invalid="true"
+      aria-label="Sunny"
+      aria-required="false"
+      class="c8 c9 c4 c0"
     >
-      <label
-        class="c3 c4 c5 c6"
-        font-weight="600"
+      <input
+        class="c10 c11"
+        id="weather"
+        name="weather"
+        type="radio"
+        value="\\"sunny\\""
+      />
+      <div
+        class="c12 c13 c0"
+      />
+      <span
+        class="c14 c15"
         for="weather"
-        style="font-weight: 600;"
+        id="label"
       >
-        Weather
-      </label>
-    </div>
-    <div />
-    <div
+        Sunny
+      </span>
+    </label>
+    <label
       aria-describedby="label"
       aria-invalid="true"
-      class="c7 c8"
-      role="group"
+      aria-label="Windy"
+      aria-required="false"
+      class="c8 c9 c4 c0"
     >
-      <label
-        aria-describedby="label"
-        aria-invalid="true"
-        aria-label="Sunny"
-        aria-required="false"
-        class="c9 c10 c5 c1"
-      >
-        <input
-          class="c11 c12"
-          id="weather"
-          name="weather"
-          type="radio"
-          value="\\"sunny\\""
-        />
-        <div
-          class="c13 c14 c1"
-        />
-        <span
-          class="c15 c16"
-          for="weather"
-          id="label"
-        >
-          Sunny
-        </span>
-      </label>
-      <label
-        aria-describedby="label"
-        aria-invalid="true"
-        aria-label="Windy"
-        aria-required="false"
-        class="c9 c10 c5 c1"
+      <input
+        class="c10 c11"
+        id="weather"
+        name="weather"
+        type="radio"
+        value="\\"windy\\""
+      />
+      <div
+        class="c12 c13 c0"
+      />
+      <span
+        class="c14 c15"
+        for="weather"
+        id="label"
       >
-        <input
-          class="c11 c12"
-          id="weather"
-          name="weather"
-          type="radio"
-          value="\\"windy\\""
-        />
-        <div
-          class="c13 c14 c1"
-        />
-        <span
-          class="c15 c16"
-          for="weather"
-          id="label"
-        >
-          Windy
-        </span>
-      </label>
-      <label
-        aria-describedby="label"
-        aria-invalid="true"
-        aria-label="Overcast"
-        aria-required="false"
-        class="c9 c10 c5 c1"
+        Windy
+      </span>
+    </label>
+    <label
+      aria-describedby="label"
+      aria-invalid="true"
+      aria-label="Overcast"
+      aria-required="false"
+      class="c8 c9 c4 c0"
+    >
+      <input
+        class="c10 c11"
+        id="weather"
+        name="weather"
+        type="radio"
+        value="\\"overcast\\""
+      />
+      <div
+        class="c12 c13 c0"
+      />
+      <span
+        class="c14 c15"
+        for="weather"
+        id="label"
       >
-        <input
-          class="c11 c12"
-          id="weather"
-          name="weather"
-          type="radio"
-          value="\\"overcast\\""
-        />
-        <div
-          class="c13 c14 c1"
-        />
-        <span
-          class="c15 c16"
-          for="weather"
-          id="label"
-        >
-          Overcast
-        </span>
-      </label>
-    </div>
-    <div />
+        Overcast
+      </span>
+    </label>
   </div>
+  <div />
 </div>
 `;
 
 exports[`states renders correctly for an RadioGroupField with state primary 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3074,7 +2834,7 @@ exports[`states renders correctly for an RadioGroupField with state primary 1`]
   color: inherit;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3088,7 +2848,7 @@ exports[`states renders correctly for an RadioGroupField with state primary 1`]
   margin-bottom: 0.25rem !important;
 }
 
-.c8 {
+.c7 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3102,7 +2862,7 @@ exports[`states renders correctly for an RadioGroupField with state primary 1`]
   margin-top: 0.5rem !important;
 }
 
-.c12 {
+.c11 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3115,7 +2875,7 @@ exports[`states renders correctly for an RadioGroupField with state primary 1`]
   color: inherit;
 }
 
-.c16 {
+.c15 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3129,44 +2889,18 @@ exports[`states renders correctly for an RadioGroupField with state primary 1`]
   margin-left: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c14 {
+.c13 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 100%;
@@ -3175,31 +2909,31 @@ exports[`states renders correctly for an RadioGroupField with state primary 1`]
   width: 1em;
 }
 
-.c14 {
+.c13 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c17[disabled] + .c13 {
+.c16[disabled] + .c12 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c17:checked:focus + .c13 {
+.c16:checked:focus + .c12 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c17:focus + .c13 {
+.c16:focus + .c12 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c17:not([disabled]):checked + .c13 {
+.c16:not([disabled]):checked + .c12 {
   border-color: #7467c0;
 }
 
-.c17:checked + .c13::before {
+.c16:checked + .c12::before {
   background: #7467c0;
   border-radius: 50%;
   content: '';
@@ -3213,11 +2947,11 @@ exports[`states renders correctly for an RadioGroupField with state primary 1`]
   width: 8px;
 }
 
-.c17[disabled]:checked + .c13::before {
+.c16[disabled]:checked + .c12::before {
   background: #9a9a9a;
 }
 
-.c11 {
+.c10 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -3227,30 +2961,30 @@ exports[`states renders correctly for an RadioGroupField with state primary 1`]
   width: 1px;
 }
 
-.c11[disabled] + .c13 {
+.c10[disabled] + .c12 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c11:checked:focus + .c13 {
+.c10:checked:focus + .c12 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11:focus + .c13 {
+.c10:focus + .c12 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11:not([disabled]):checked + .c13 {
+.c10:not([disabled]):checked + .c12 {
   border-color: #7467c0;
 }
 
-.c11:checked + .c13 {
+.c10:checked + .c12 {
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11:checked + .c13::before {
+.c10:checked + .c12::before {
   background: #7467c0;
   border-radius: 50%;
   content: '';
@@ -3264,11 +2998,11 @@ exports[`states renders correctly for an RadioGroupField with state primary 1`]
   width: 8px;
 }
 
-.c11[disabled]:checked + .c13::before {
+.c10[disabled]:checked + .c12::before {
   background: #9a9a9a;
 }
 
-.c10 {
+.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3279,22 +3013,22 @@ exports[`states renders correctly for an RadioGroupField with state primary 1`]
   align-items: center;
 }
 
-.c7 .c9:not(:last-child) {
+.c6 .c8:not(:last-child) {
   margin-bottom: 0.5rem;
 }
 
-abbr.c15 {
+abbr.c14 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c15 {
+i.c14 {
   font-style: italic;
 }
 
-kbd.c15 {
+kbd.c14 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -3302,164 +3036,160 @@ kbd.c15 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c15 {
+mark.c14 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c15 {
+strong.c14 {
   font-weight: bold;
 }
 
-sub.c15,
-sup.c15 {
+sub.c14,
+sup.c14 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c15,
-u.c15 {
+ins.c14,
+u.c14 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c15,
-cite.c15,
-var.c15,
-em.c15 {
+i.c14,
+cite.c14,
+var.c14,
+em.c14 {
   font-style: italic;
 }
 
-kbd.c15,
-pre.c15,
-samp.c15 {
+kbd.c14,
+pre.c14,
+samp.c14 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c15 .c18 {
+.c14 .c17 {
   top: 0.1em;
 }
 
-.c4 {
+.c3 {
   display: block;
 }
 
-.c3 {
+.c2 {
   margin-bottom: 0 !important;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="align-items: center;"
   >
-    <div
-      class="c2 c1"
-      style="align-items: center;"
+    <label
+      class="c2 c3 c4 c5"
+      font-weight="600"
+      for="weather"
+      style="font-weight: 600;"
     >
-      <label
-        class="c3 c4 c5 c6"
-        font-weight="600"
+      Weather
+    </label>
+  </div>
+  <div />
+  <div
+    aria-describedby="label"
+    aria-invalid="false"
+    class="c6 c7"
+    role="group"
+  >
+    <label
+      aria-describedby="label"
+      aria-invalid="false"
+      aria-label="Sunny"
+      aria-required="false"
+      class="c8 c9 c4 c0"
+    >
+      <input
+        class="c10 c11"
+        id="weather"
+        name="weather"
+        type="radio"
+        value="\\"sunny\\""
+      />
+      <div
+        class="c12 c13 c0"
+      />
+      <span
+        class="c14 c15"
         for="weather"
-        style="font-weight: 600;"
+        id="label"
       >
-        Weather
-      </label>
-    </div>
-    <div />
-    <div
+        Sunny
+      </span>
+    </label>
+    <label
       aria-describedby="label"
       aria-invalid="false"
-      class="c7 c8"
-      role="group"
+      aria-label="Windy"
+      aria-required="false"
+      class="c8 c9 c4 c0"
     >
-      <label
-        aria-describedby="label"
-        aria-invalid="false"
-        aria-label="Sunny"
-        aria-required="false"
-        class="c9 c10 c5 c1"
-      >
-        <input
-          class="c11 c12"
-          id="weather"
-          name="weather"
-          type="radio"
-          value="\\"sunny\\""
-        />
-        <div
-          class="c13 c14 c1"
-        />
-        <span
-          class="c15 c16"
-          for="weather"
-          id="label"
-        >
-          Sunny
-        </span>
-      </label>
-      <label
-        aria-describedby="label"
-        aria-invalid="false"
-        aria-label="Windy"
-        aria-required="false"
-        class="c9 c10 c5 c1"
+      <input
+        class="c10 c11"
+        id="weather"
+        name="weather"
+        type="radio"
+        value="\\"windy\\""
+      />
+      <div
+        class="c12 c13 c0"
+      />
+      <span
+        class="c14 c15"
+        for="weather"
+        id="label"
       >
-        <input
-          class="c11 c12"
-          id="weather"
-          name="weather"
-          type="radio"
-          value="\\"windy\\""
-        />
-        <div
-          class="c13 c14 c1"
-        />
-        <span
-          class="c15 c16"
-          for="weather"
-          id="label"
-        >
-          Windy
-        </span>
-      </label>
-      <label
-        aria-describedby="label"
-        aria-invalid="false"
-        aria-label="Overcast"
-        aria-required="false"
-        class="c9 c10 c5 c1"
+        Windy
+      </span>
+    </label>
+    <label
+      aria-describedby="label"
+      aria-invalid="false"
+      aria-label="Overcast"
+      aria-required="false"
+      class="c8 c9 c4 c0"
+    >
+      <input
+        class="c10 c11"
+        id="weather"
+        name="weather"
+        type="radio"
+        value="\\"overcast\\""
+      />
+      <div
+        class="c12 c13 c0"
+      />
+      <span
+        class="c14 c15"
+        for="weather"
+        id="label"
       >
-        <input
-          class="c11 c12"
-          id="weather"
-          name="weather"
-          type="radio"
-          value="\\"overcast\\""
-        />
-        <div
-          class="c13 c14 c1"
-        />
-        <span
-          class="c15 c16"
-          for="weather"
-          id="label"
-        >
-          Overcast
-        </span>
-      </label>
-    </div>
-    <div />
+        Overcast
+      </span>
+    </label>
   </div>
+  <div />
 </div>
 `;
 
 exports[`states renders correctly for an RadioGroupField with state success 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3472,7 +3202,7 @@ exports[`states renders correctly for an RadioGroupField with state success 1`]
   color: inherit;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3486,7 +3216,7 @@ exports[`states renders correctly for an RadioGroupField with state success 1`]
   margin-bottom: 0.25rem !important;
 }
 
-.c8 {
+.c7 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3500,7 +3230,7 @@ exports[`states renders correctly for an RadioGroupField with state success 1`]
   margin-top: 0.5rem !important;
 }
 
-.c12 {
+.c11 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3513,7 +3243,7 @@ exports[`states renders correctly for an RadioGroupField with state success 1`]
   color: inherit;
 }
 
-.c16 {
+.c15 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3527,44 +3257,18 @@ exports[`states renders correctly for an RadioGroupField with state success 1`]
   margin-left: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c14 {
+.c13 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 100%;
@@ -3573,31 +3277,31 @@ exports[`states renders correctly for an RadioGroupField with state success 1`]
   width: 1em;
 }
 
-.c14 {
+.c13 {
   border-color: #4ca26c;
   box-shadow: #4ca26c 0px 0px 0px 1px !important;
 }
 
-.c17[disabled] + .c13 {
+.c16[disabled] + .c12 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c17:checked:focus + .c13 {
+.c16:checked:focus + .c12 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c17:focus + .c13 {
+.c16:focus + .c12 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c17:not([disabled]):checked + .c13 {
+.c16:not([disabled]):checked + .c12 {
   border-color: #7467c0;
 }
 
-.c17:checked + .c13::before {
+.c16:checked + .c12::before {
   background: #7467c0;
   border-radius: 50%;
   content: '';
@@ -3611,11 +3315,11 @@ exports[`states renders correctly for an RadioGroupField with state success 1`]
   width: 8px;
 }
 
-.c17[disabled]:checked + .c13::before {
+.c16[disabled]:checked + .c12::before {
   background: #9a9a9a;
 }
 
-.c11 {
+.c10 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -3625,30 +3329,30 @@ exports[`states renders correctly for an RadioGroupField with state success 1`]
   width: 1px;
 }
 
-.c11[disabled] + .c13 {
+.c10[disabled] + .c12 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c11:checked:focus + .c13 {
+.c10:checked:focus + .c12 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11:focus + .c13 {
+.c10:focus + .c12 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11:not([disabled]):checked + .c13 {
+.c10:not([disabled]):checked + .c12 {
   border-color: #7467c0;
 }
 
-.c11:checked + .c13 {
+.c10:checked + .c12 {
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11:checked + .c13::before {
+.c10:checked + .c12::before {
   background: #7467c0;
   border-radius: 50%;
   content: '';
@@ -3662,11 +3366,11 @@ exports[`states renders correctly for an RadioGroupField with state success 1`]
   width: 8px;
 }
 
-.c11[disabled]:checked + .c13::before {
+.c10[disabled]:checked + .c12::before {
   background: #9a9a9a;
 }
 
-.c10 {
+.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3677,22 +3381,22 @@ exports[`states renders correctly for an RadioGroupField with state success 1`]
   align-items: center;
 }
 
-.c7 .c9:not(:last-child) {
+.c6 .c8:not(:last-child) {
   margin-bottom: 0.5rem;
 }
 
-abbr.c15 {
+abbr.c14 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c15 {
+i.c14 {
   font-style: italic;
 }
 
-kbd.c15 {
+kbd.c14 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -3700,164 +3404,160 @@ kbd.c15 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c15 {
+mark.c14 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c15 {
+strong.c14 {
   font-weight: bold;
 }
 
-sub.c15,
-sup.c15 {
+sub.c14,
+sup.c14 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c15,
-u.c15 {
+ins.c14,
+u.c14 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c15,
-cite.c15,
-var.c15,
-em.c15 {
+i.c14,
+cite.c14,
+var.c14,
+em.c14 {
   font-style: italic;
 }
 
-kbd.c15,
-pre.c15,
-samp.c15 {
+kbd.c14,
+pre.c14,
+samp.c14 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c15 .c18 {
+.c14 .c17 {
   top: 0.1em;
 }
 
-.c4 {
+.c3 {
   display: block;
 }
 
-.c3 {
+.c2 {
   margin-bottom: 0 !important;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="align-items: center;"
+  >
+    <label
+      class="c2 c3 c4 c5"
+      font-weight="600"
+      for="weather"
+      style="font-weight: 600;"
+    >
+      Weather
+    </label>
+  </div>
+  <div />
+  <div
+    aria-describedby="label"
+    aria-invalid="false"
+    class="c6 c7"
+    role="group"
   >
-    <div
-      class="c2 c1"
-      style="align-items: center;"
+    <label
+      aria-describedby="label"
+      aria-invalid="false"
+      aria-label="Sunny"
+      aria-required="false"
+      class="c8 c9 c4 c0"
     >
-      <label
-        class="c3 c4 c5 c6"
-        font-weight="600"
+      <input
+        class="c10 c11"
+        id="weather"
+        name="weather"
+        type="radio"
+        value="\\"sunny\\""
+      />
+      <div
+        class="c12 c13 c0"
+      />
+      <span
+        class="c14 c15"
         for="weather"
-        style="font-weight: 600;"
+        id="label"
       >
-        Weather
-      </label>
-    </div>
-    <div />
-    <div
+        Sunny
+      </span>
+    </label>
+    <label
       aria-describedby="label"
       aria-invalid="false"
-      class="c7 c8"
-      role="group"
+      aria-label="Windy"
+      aria-required="false"
+      class="c8 c9 c4 c0"
     >
-      <label
-        aria-describedby="label"
-        aria-invalid="false"
-        aria-label="Sunny"
-        aria-required="false"
-        class="c9 c10 c5 c1"
-      >
-        <input
-          class="c11 c12"
-          id="weather"
-          name="weather"
-          type="radio"
-          value="\\"sunny\\""
-        />
-        <div
-          class="c13 c14 c1"
-        />
-        <span
-          class="c15 c16"
-          for="weather"
-          id="label"
-        >
-          Sunny
-        </span>
-      </label>
-      <label
-        aria-describedby="label"
-        aria-invalid="false"
-        aria-label="Windy"
-        aria-required="false"
-        class="c9 c10 c5 c1"
+      <input
+        class="c10 c11"
+        id="weather"
+        name="weather"
+        type="radio"
+        value="\\"windy\\""
+      />
+      <div
+        class="c12 c13 c0"
+      />
+      <span
+        class="c14 c15"
+        for="weather"
+        id="label"
       >
-        <input
-          class="c11 c12"
-          id="weather"
-          name="weather"
-          type="radio"
-          value="\\"windy\\""
-        />
-        <div
-          class="c13 c14 c1"
-        />
-        <span
-          class="c15 c16"
-          for="weather"
-          id="label"
-        >
-          Windy
-        </span>
-      </label>
-      <label
-        aria-describedby="label"
-        aria-invalid="false"
-        aria-label="Overcast"
-        aria-required="false"
-        class="c9 c10 c5 c1"
+        Windy
+      </span>
+    </label>
+    <label
+      aria-describedby="label"
+      aria-invalid="false"
+      aria-label="Overcast"
+      aria-required="false"
+      class="c8 c9 c4 c0"
+    >
+      <input
+        class="c10 c11"
+        id="weather"
+        name="weather"
+        type="radio"
+        value="\\"overcast\\""
+      />
+      <div
+        class="c12 c13 c0"
+      />
+      <span
+        class="c14 c15"
+        for="weather"
+        id="label"
       >
-        <input
-          class="c11 c12"
-          id="weather"
-          name="weather"
-          type="radio"
-          value="\\"overcast\\""
-        />
-        <div
-          class="c13 c14 c1"
-        />
-        <span
-          class="c15 c16"
-          for="weather"
-          id="label"
-        >
-          Overcast
-        </span>
-      </label>
-    </div>
-    <div />
+        Overcast
+      </span>
+    </label>
   </div>
+  <div />
 </div>
 `;
 
 exports[`states renders correctly for an RadioGroupField with state warning 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3870,7 +3570,7 @@ exports[`states renders correctly for an RadioGroupField with state warning 1`]
   color: inherit;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3884,7 +3584,7 @@ exports[`states renders correctly for an RadioGroupField with state warning 1`]
   margin-bottom: 0.25rem !important;
 }
 
-.c8 {
+.c7 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3898,7 +3598,7 @@ exports[`states renders correctly for an RadioGroupField with state warning 1`]
   margin-top: 0.5rem !important;
 }
 
-.c12 {
+.c11 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3911,7 +3611,7 @@ exports[`states renders correctly for an RadioGroupField with state warning 1`]
   color: inherit;
 }
 
-.c16 {
+.c15 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3925,44 +3625,18 @@ exports[`states renders correctly for an RadioGroupField with state warning 1`]
   margin-left: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c14 {
+.c13 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 100%;
@@ -3971,31 +3645,31 @@ exports[`states renders correctly for an RadioGroupField with state warning 1`]
   width: 1em;
 }
 
-.c14 {
+.c13 {
   border-color: #ffc94c;
   box-shadow: #ffc94c 0px 0px 0px 1px !important;
 }
 
-.c17[disabled] + .c13 {
+.c16[disabled] + .c12 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c17:checked:focus + .c13 {
+.c16:checked:focus + .c12 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c17:focus + .c13 {
+.c16:focus + .c12 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c17:not([disabled]):checked + .c13 {
+.c16:not([disabled]):checked + .c12 {
   border-color: #7467c0;
 }
 
-.c17:checked + .c13::before {
+.c16:checked + .c12::before {
   background: #7467c0;
   border-radius: 50%;
   content: '';
@@ -4009,11 +3683,11 @@ exports[`states renders correctly for an RadioGroupField with state warning 1`]
   width: 8px;
 }
 
-.c17[disabled]:checked + .c13::before {
+.c16[disabled]:checked + .c12::before {
   background: #9a9a9a;
 }
 
-.c11 {
+.c10 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -4023,30 +3697,30 @@ exports[`states renders correctly for an RadioGroupField with state warning 1`]
   width: 1px;
 }
 
-.c11[disabled] + .c13 {
+.c10[disabled] + .c12 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c11:checked:focus + .c13 {
+.c10:checked:focus + .c12 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11:focus + .c13 {
+.c10:focus + .c12 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11:not([disabled]):checked + .c13 {
+.c10:not([disabled]):checked + .c12 {
   border-color: #7467c0;
 }
 
-.c11:checked + .c13 {
+.c10:checked + .c12 {
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11:checked + .c13::before {
+.c10:checked + .c12::before {
   background: #7467c0;
   border-radius: 50%;
   content: '';
@@ -4060,11 +3734,11 @@ exports[`states renders correctly for an RadioGroupField with state warning 1`]
   width: 8px;
 }
 
-.c11[disabled]:checked + .c13::before {
+.c10[disabled]:checked + .c12::before {
   background: #9a9a9a;
 }
 
-.c10 {
+.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4075,22 +3749,22 @@ exports[`states renders correctly for an RadioGroupField with state warning 1`]
   align-items: center;
 }
 
-.c7 .c9:not(:last-child) {
+.c6 .c8:not(:last-child) {
   margin-bottom: 0.5rem;
 }
 
-abbr.c15 {
+abbr.c14 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c15 {
+i.c14 {
   font-style: italic;
 }
 
-kbd.c15 {
+kbd.c14 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -4098,158 +3772,154 @@ kbd.c15 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c15 {
+mark.c14 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c15 {
+strong.c14 {
   font-weight: bold;
 }
 
-sub.c15,
-sup.c15 {
+sub.c14,
+sup.c14 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c15,
-u.c15 {
+ins.c14,
+u.c14 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c15,
-cite.c15,
-var.c15,
-em.c15 {
+i.c14,
+cite.c14,
+var.c14,
+em.c14 {
   font-style: italic;
 }
 
-kbd.c15,
-pre.c15,
-samp.c15 {
+kbd.c14,
+pre.c14,
+samp.c14 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c15 .c18 {
+.c14 .c17 {
   top: 0.1em;
 }
 
-.c4 {
+.c3 {
   display: block;
 }
 
-.c3 {
+.c2 {
   margin-bottom: 0 !important;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="align-items: center;"
+  >
+    <label
+      class="c2 c3 c4 c5"
+      font-weight="600"
+      for="weather"
+      style="font-weight: 600;"
+    >
+      Weather
+    </label>
+  </div>
+  <div />
+  <div
+    aria-describedby="label"
+    aria-invalid="false"
+    class="c6 c7"
+    role="group"
   >
-    <div
-      class="c2 c1"
-      style="align-items: center;"
+    <label
+      aria-describedby="label"
+      aria-invalid="false"
+      aria-label="Sunny"
+      aria-required="false"
+      class="c8 c9 c4 c0"
     >
-      <label
-        class="c3 c4 c5 c6"
-        font-weight="600"
+      <input
+        class="c10 c11"
+        id="weather"
+        name="weather"
+        type="radio"
+        value="\\"sunny\\""
+      />
+      <div
+        class="c12 c13 c0"
+      />
+      <span
+        class="c14 c15"
         for="weather"
-        style="font-weight: 600;"
+        id="label"
       >
-        Weather
-      </label>
-    </div>
-    <div />
-    <div
+        Sunny
+      </span>
+    </label>
+    <label
       aria-describedby="label"
       aria-invalid="false"
-      class="c7 c8"
-      role="group"
+      aria-label="Windy"
+      aria-required="false"
+      class="c8 c9 c4 c0"
     >
-      <label
-        aria-describedby="label"
-        aria-invalid="false"
-        aria-label="Sunny"
-        aria-required="false"
-        class="c9 c10 c5 c1"
-      >
-        <input
-          class="c11 c12"
-          id="weather"
-          name="weather"
-          type="radio"
-          value="\\"sunny\\""
-        />
-        <div
-          class="c13 c14 c1"
-        />
-        <span
-          class="c15 c16"
-          for="weather"
-          id="label"
-        >
-          Sunny
-        </span>
-      </label>
-      <label
-        aria-describedby="label"
-        aria-invalid="false"
-        aria-label="Windy"
-        aria-required="false"
-        class="c9 c10 c5 c1"
+      <input
+        class="c10 c11"
+        id="weather"
+        name="weather"
+        type="radio"
+        value="\\"windy\\""
+      />
+      <div
+        class="c12 c13 c0"
+      />
+      <span
+        class="c14 c15"
+        for="weather"
+        id="label"
       >
-        <input
-          class="c11 c12"
-          id="weather"
-          name="weather"
-          type="radio"
-          value="\\"windy\\""
-        />
-        <div
-          class="c13 c14 c1"
-        />
-        <span
-          class="c15 c16"
-          for="weather"
-          id="label"
-        >
-          Windy
-        </span>
-      </label>
-      <label
-        aria-describedby="label"
-        aria-invalid="false"
-        aria-label="Overcast"
-        aria-required="false"
-        class="c9 c10 c5 c1"
+        Windy
+      </span>
+    </label>
+    <label
+      aria-describedby="label"
+      aria-invalid="false"
+      aria-label="Overcast"
+      aria-required="false"
+      class="c8 c9 c4 c0"
+    >
+      <input
+        class="c10 c11"
+        id="weather"
+        name="weather"
+        type="radio"
+        value="\\"overcast\\""
+      />
+      <div
+        class="c12 c13 c0"
+      />
+      <span
+        class="c14 c15"
+        for="weather"
+        id="label"
       >
-        <input
-          class="c11 c12"
-          id="weather"
-          name="weather"
-          type="radio"
-          value="\\"overcast\\""
-        />
-        <div
-          class="c13 c14 c1"
-        />
-        <span
-          class="c15 c16"
-          for="weather"
-          id="label"
-        >
-          Overcast
-        </span>
-      </label>
-    </div>
-    <div />
+        Overcast
+      </span>
+    </label>
   </div>
+  <div />
 </div>
 `;
diff --git a/src/Rating/__tests__/__snapshots__/Rating.test.js.snap b/src/Rating/__tests__/__snapshots__/Rating.test.js.snap
index 26fd55fd6..6f87c677d 100644
--- a/src/Rating/__tests__/__snapshots__/Rating.test.js.snap
+++ b/src/Rating/__tests__/__snapshots__/Rating.test.js.snap
@@ -1,741 +1,483 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly for a basic rating 1`] = `
-.c1 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
-}
-
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   width: 1.5rem;
   height: 1.5rem;
 }
 
-.c2 path {
+.c0 path {
   fill: #e6e6e6;
 }
 
 <div>
   <div
-    class="c0 c1"
+    class=""
   >
-    <div
-      class=""
-    >
-      <svg
-        aria-label="1"
-        class="c2"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
-        />
-      </svg>
-      <svg
-        aria-label="2"
-        class="c2"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
-        />
-      </svg>
-      <svg
-        aria-label="3"
-        class="c2"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
-        />
-      </svg>
-      <svg
-        aria-label="4"
-        class="c2"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
-        />
-      </svg>
-      <svg
-        aria-label="5"
-        class="c2"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
-        />
-      </svg>
-    </div>
+    <svg
+      aria-label="1"
+      class="c0"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
+      />
+    </svg>
+    <svg
+      aria-label="2"
+      class="c0"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
+      />
+    </svg>
+    <svg
+      aria-label="3"
+      class="c0"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
+      />
+    </svg>
+    <svg
+      aria-label="4"
+      class="c0"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
+      />
+    </svg>
+    <svg
+      aria-label="5"
+      class="c0"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
+      />
+    </svg>
   </div>
 </div>
 `;
 
 exports[`renders correctly with a default rating 1`] = `
 .c1 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
-}
-
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
   width: 1.5rem;
   height: 1.5rem;
 }
 
-.c3 path {
+.c1 path {
   fill: #e6e6e6;
 }
 
-.c2 {
+.c0 {
   width: 1.5rem;
   height: 1.5rem;
 }
 
-.c2 path {
+.c0 path {
   fill: gold;
 }
 
 <div>
   <div
-    class="c0 c1"
+    class=""
   >
-    <div
-      class=""
-    >
-      <svg
-        aria-label="1"
-        class="c2"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
-        />
-      </svg>
-      <svg
-        aria-label="2"
-        class="c2"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
-        />
-      </svg>
-      <svg
-        aria-label="3"
-        class="c2"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
-        />
-      </svg>
-      <svg
-        aria-label="4"
-        class="c3"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
-        />
-      </svg>
-      <svg
-        aria-label="5"
-        class="c3"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
-        />
-      </svg>
-    </div>
+    <svg
+      aria-label="1"
+      class="c0"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
+      />
+    </svg>
+    <svg
+      aria-label="2"
+      class="c0"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
+      />
+    </svg>
+    <svg
+      aria-label="3"
+      class="c0"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
+      />
+    </svg>
+    <svg
+      aria-label="4"
+      class="c1"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
+      />
+    </svg>
+    <svg
+      aria-label="5"
+      class="c1"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
+      />
+    </svg>
   </div>
 </div>
 `;
 
 exports[`renders correctly with a different max rating 1`] = `
-.c1 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
-}
-
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   width: 1.5rem;
   height: 1.5rem;
 }
 
-.c2 path {
+.c0 path {
   fill: #e6e6e6;
 }
 
 <div>
   <div
-    class="c0 c1"
+    class=""
   >
-    <div
-      class=""
-    >
-      <svg
-        aria-label="1"
-        class="c2"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
-        />
-      </svg>
-      <svg
-        aria-label="2"
-        class="c2"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
-        />
-      </svg>
-      <svg
-        aria-label="3"
-        class="c2"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
-        />
-      </svg>
-      <svg
-        aria-label="4"
-        class="c2"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
-        />
-      </svg>
-      <svg
-        aria-label="5"
-        class="c2"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
-        />
-      </svg>
-      <svg
-        aria-label="6"
-        class="c2"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
-        />
-      </svg>
-      <svg
-        aria-label="7"
-        class="c2"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
-        />
-      </svg>
-      <svg
-        aria-label="8"
-        class="c2"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
-        />
-      </svg>
-      <svg
-        aria-label="9"
-        class="c2"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
-        />
-      </svg>
-      <svg
-        aria-label="10"
-        class="c2"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
-        />
-      </svg>
-    </div>
+    <svg
+      aria-label="1"
+      class="c0"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
+      />
+    </svg>
+    <svg
+      aria-label="2"
+      class="c0"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
+      />
+    </svg>
+    <svg
+      aria-label="3"
+      class="c0"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
+      />
+    </svg>
+    <svg
+      aria-label="4"
+      class="c0"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
+      />
+    </svg>
+    <svg
+      aria-label="5"
+      class="c0"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
+      />
+    </svg>
+    <svg
+      aria-label="6"
+      class="c0"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
+      />
+    </svg>
+    <svg
+      aria-label="7"
+      class="c0"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
+      />
+    </svg>
+    <svg
+      aria-label="8"
+      class="c0"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
+      />
+    </svg>
+    <svg
+      aria-label="9"
+      class="c0"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
+      />
+    </svg>
+    <svg
+      aria-label="10"
+      class="c0"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
+      />
+    </svg>
   </div>
 </div>
 `;
 
 exports[`sizes renders correctly for a select with size large 1`] = `
-.c1 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
-}
-
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   width: 1.5rem;
   height: 1.5rem;
 }
 
-.c2 {
+.c0 {
   width: 3rem;
   height: 3rem;
 }
 
-.c2 path {
+.c0 path {
   fill: #e6e6e6;
 }
 
 <div>
   <div
-    class="c0 c1"
+    class=""
   >
-    <div
-      class=""
-    >
-      <svg
-        aria-label="1"
-        class="c2"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
-        />
-      </svg>
-      <svg
-        aria-label="2"
-        class="c2"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
-        />
-      </svg>
-      <svg
-        aria-label="3"
-        class="c2"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
-        />
-      </svg>
-      <svg
-        aria-label="4"
-        class="c2"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
-        />
-      </svg>
-      <svg
-        aria-label="5"
-        class="c2"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
-        />
-      </svg>
-    </div>
+    <svg
+      aria-label="1"
+      class="c0"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
+      />
+    </svg>
+    <svg
+      aria-label="2"
+      class="c0"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
+      />
+    </svg>
+    <svg
+      aria-label="3"
+      class="c0"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
+      />
+    </svg>
+    <svg
+      aria-label="4"
+      class="c0"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
+      />
+    </svg>
+    <svg
+      aria-label="5"
+      class="c0"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
+      />
+    </svg>
   </div>
 </div>
 `;
 
 exports[`sizes renders correctly for a select with size medium 1`] = `
-.c1 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
-}
-
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   width: 1.5rem;
   height: 1.5rem;
 }
 
-.c2 {
+.c0 {
   width: 2rem;
   height: 2rem;
 }
 
-.c2 path {
+.c0 path {
   fill: #e6e6e6;
 }
 
 <div>
   <div
-    class="c0 c1"
+    class=""
   >
-    <div
-      class=""
-    >
-      <svg
-        aria-label="1"
-        class="c2"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
-        />
-      </svg>
-      <svg
-        aria-label="2"
-        class="c2"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
-        />
-      </svg>
-      <svg
-        aria-label="3"
-        class="c2"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
-        />
-      </svg>
-      <svg
-        aria-label="4"
-        class="c2"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
-        />
-      </svg>
-      <svg
-        aria-label="5"
-        class="c2"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
-        />
-      </svg>
-    </div>
+    <svg
+      aria-label="1"
+      class="c0"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
+      />
+    </svg>
+    <svg
+      aria-label="2"
+      class="c0"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
+      />
+    </svg>
+    <svg
+      aria-label="3"
+      class="c0"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
+      />
+    </svg>
+    <svg
+      aria-label="4"
+      class="c0"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
+      />
+    </svg>
+    <svg
+      aria-label="5"
+      class="c0"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
+      />
+    </svg>
   </div>
 </div>
 `;
 
 exports[`sizes renders correctly for a select with size small 1`] = `
-.c1 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
-}
-
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   width: 1.5rem;
   height: 1.5rem;
 }
 
-.c2 {
+.c0 {
   width: 1rem;
   height: 1rem;
 }
 
-.c2 path {
+.c0 path {
   fill: #e6e6e6;
 }
 
 <div>
   <div
-    class="c0 c1"
+    class=""
   >
-    <div
-      class=""
-    >
-      <svg
-        aria-label="1"
-        class="c2"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
-        />
-      </svg>
-      <svg
-        aria-label="2"
-        class="c2"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
-        />
-      </svg>
-      <svg
-        aria-label="3"
-        class="c2"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
-        />
-      </svg>
-      <svg
-        aria-label="4"
-        class="c2"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
-        />
-      </svg>
-      <svg
-        aria-label="5"
-        class="c2"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
-        />
-      </svg>
-    </div>
+    <svg
+      aria-label="1"
+      class="c0"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
+      />
+    </svg>
+    <svg
+      aria-label="2"
+      class="c0"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
+      />
+    </svg>
+    <svg
+      aria-label="3"
+      class="c0"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
+      />
+    </svg>
+    <svg
+      aria-label="4"
+      class="c0"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
+      />
+    </svg>
+    <svg
+      aria-label="5"
+      class="c0"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
+      />
+    </svg>
   </div>
 </div>
 `;
diff --git a/src/Rating/__tests__/__snapshots__/RatingStar.test.js.snap b/src/Rating/__tests__/__snapshots__/RatingStar.test.js.snap
index a6058ebc4..e184ad260 100644
--- a/src/Rating/__tests__/__snapshots__/RatingStar.test.js.snap
+++ b/src/Rating/__tests__/__snapshots__/RatingStar.test.js.snap
@@ -1,346 +1,131 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly in basic form 1`] = `
-.c1 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
-}
-
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   width: 1.5rem;
   height: 1.5rem;
 }
 
-.c2 path {
+.c0 path {
   fill: #e6e6e6;
 }
 
 <div>
-  <div
-    class="c0 c1"
+  <svg
+    class="c0"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
   >
-    <svg
-      class="c2"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
-      />
-    </svg>
-  </div>
+    <path
+      d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
+    />
+  </svg>
 </div>
 `;
 
 exports[`renders correctly when active 1`] = `
-.c1 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
-}
-
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   width: 1.5rem;
   height: 1.5rem;
 }
 
-.c2 path {
+.c0 path {
   fill: gold;
 }
 
 <div>
-  <div
-    class="c0 c1"
+  <svg
+    class="c0"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
   >
-    <svg
-      class="c2"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
-      />
-    </svg>
-  </div>
+    <path
+      d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
+    />
+  </svg>
 </div>
 `;
 
 exports[`sizes renders correctly for a select with size large 1`] = `
-.c1 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
-}
-
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   width: 1.5rem;
   height: 1.5rem;
 }
 
-.c2 {
+.c0 {
   width: 3rem;
   height: 3rem;
 }
 
-.c2 path {
+.c0 path {
   fill: #e6e6e6;
 }
 
 <div>
-  <div
-    class="c0 c1"
+  <svg
+    class="c0"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
   >
-    <svg
-      class="c2"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
-      />
-    </svg>
-  </div>
+    <path
+      d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
+    />
+  </svg>
 </div>
 `;
 
 exports[`sizes renders correctly for a select with size medium 1`] = `
-.c1 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
-}
-
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   width: 1.5rem;
   height: 1.5rem;
 }
 
-.c2 {
+.c0 {
   width: 2rem;
   height: 2rem;
 }
 
-.c2 path {
+.c0 path {
   fill: #e6e6e6;
 }
 
 <div>
-  <div
-    class="c0 c1"
+  <svg
+    class="c0"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
   >
-    <svg
-      class="c2"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
-      />
-    </svg>
-  </div>
+    <path
+      d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
+    />
+  </svg>
 </div>
 `;
 
 exports[`sizes renders correctly for a select with size small 1`] = `
-.c1 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
-}
-
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   width: 1.5rem;
   height: 1.5rem;
 }
 
-.c2 {
+.c0 {
   width: 1rem;
   height: 1rem;
 }
 
-.c2 path {
+.c0 path {
   fill: #e6e6e6;
 }
 
 <div>
-  <div
-    class="c0 c1"
+  <svg
+    class="c0"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
   >
-    <svg
-      class="c2"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
-      />
-    </svg>
-  </div>
+    <path
+      d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
+    />
+  </svg>
 </div>
 `;
diff --git a/src/Select/__tests__/__snapshots__/Select.test.js.snap b/src/Select/__tests__/__snapshots__/Select.test.js.snap
index 495dbb25a..03b2edda5 100644
--- a/src/Select/__tests__/__snapshots__/Select.test.js.snap
+++ b/src/Select/__tests__/__snapshots__/Select.test.js.snap
@@ -14,24 +14,11 @@ exports[`renders correctly for a basic select 1`] = `
   color: inherit;
 }
 
-.c3 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
-}
-
-.c3.c3.c3 {
+.c1.c1.c1 {
   position: relative;
 }
 
-.c5 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -45,36 +32,10 @@ exports[`renders correctly for a basic select 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   display: inline-block;
 }
 
-.c7 {
+.c5 {
   position: absolute;
   width: 20px;
   height: 20px;
@@ -86,7 +47,7 @@ exports[`renders correctly for a basic select 1`] = `
   transform: translateY(50%);
 }
 
-.c4 {
+.c2 {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -100,17 +61,17 @@ exports[`renders correctly for a basic select 1`] = `
   width: 100%;
 }
 
-.c4[disabled] {
+.c2[disabled] {
   background: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4[disabled] + .c6 {
+.c2[disabled] + .c4 {
   fill: #8d8d8d;
 }
 
-.c4:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
@@ -120,44 +81,40 @@ exports[`renders correctly for a basic select 1`] = `
 <div
   class="c0 c1"
 >
-  <div
+  <select
+    aria-invalid="false"
+    aria-required="false"
     class="c2 c3"
+    style="size: default;"
+    type="text"
   >
-    <select
-      aria-invalid="false"
-      aria-required="false"
-      class="c4 c5"
-      style="size: default;"
-      type="text"
+    <option
+      value="sunny"
+    >
+      Sunny
+    </option>
+    <option
+      value="windy"
     >
-      <option
-        value="sunny"
-      >
-        Sunny
-      </option>
-      <option
-        value="windy"
-      >
-        Windy
-      </option>
-      <option
-        value="overcast"
-      >
-        Overcast
-      </option>
-    </select>
-    <svg
-      aria-hidden="true"
-      class="c6 c7"
-      focusable="false"
-      viewBox="0 0 20 20"
+      Windy
+    </option>
+    <option
+      value="overcast"
     >
-      <path
-        d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
-        fill-rule="evenodd"
-      />
-    </svg>
-  </div>
+      Overcast
+    </option>
+  </select>
+  <svg
+    aria-hidden="true"
+    class="c4 c5"
+    focusable="false"
+    viewBox="0 0 20 20"
+  >
+    <path
+      d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
+      fill-rule="evenodd"
+    />
+  </svg>
 </div>
 `;
 
@@ -175,24 +132,11 @@ exports[`renders correctly for a disabled select 1`] = `
   color: inherit;
 }
 
-.c3 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
-}
-
-.c3.c3.c3 {
+.c1.c1.c1 {
   position: relative;
 }
 
-.c5 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -206,36 +150,10 @@ exports[`renders correctly for a disabled select 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   display: inline-block;
 }
 
-.c7 {
+.c5 {
   position: absolute;
   width: 20px;
   height: 20px;
@@ -247,7 +165,7 @@ exports[`renders correctly for a disabled select 1`] = `
   transform: translateY(50%);
 }
 
-.c4 {
+.c2 {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -261,72 +179,68 @@ exports[`renders correctly for a disabled select 1`] = `
   width: 100%;
 }
 
-.c4[disabled] {
+.c2[disabled] {
   background: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4[disabled] + .c6 {
+.c2[disabled] + .c4 {
   fill: #8d8d8d;
 }
 
-.c4:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c8[disabled] + .c6 {
+.c6[disabled] + .c4 {
   fill: #8d8d8d;
 }
 
 <div
   class="c0 c1"
 >
-  <div
+  <select
+    aria-invalid="false"
+    aria-required="false"
     class="c2 c3"
+    disabled=""
+    style="size: default;"
+    type="text"
   >
-    <select
-      aria-invalid="false"
-      aria-required="false"
-      class="c4 c5"
+    <option
       disabled=""
-      style="size: default;"
-      type="text"
+      value="sunny"
     >
-      <option
-        disabled=""
-        value="sunny"
-      >
-        Sunny
-      </option>
-      <option
-        disabled=""
-        value="windy"
-      >
-        Windy
-      </option>
-      <option
-        disabled=""
-        value="overcast"
-      >
-        Overcast
-      </option>
-    </select>
-    <svg
-      aria-hidden="true"
-      class="c6 c7"
-      focusable="false"
-      viewBox="0 0 20 20"
+      Sunny
+    </option>
+    <option
+      disabled=""
+      value="windy"
     >
-      <path
-        d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
-        fill-rule="evenodd"
-      />
-    </svg>
-  </div>
+      Windy
+    </option>
+    <option
+      disabled=""
+      value="overcast"
+    >
+      Overcast
+    </option>
+  </select>
+  <svg
+    aria-hidden="true"
+    class="c4 c5"
+    focusable="false"
+    viewBox="0 0 20 20"
+  >
+    <path
+      d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
+      fill-rule="evenodd"
+    />
+  </svg>
 </div>
 `;
 
@@ -344,24 +258,11 @@ exports[`renders correctly for a full width select 1`] = `
   color: inherit;
 }
 
-.c3 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
-}
-
-.c3.c3.c3 {
+.c1.c1.c1 {
   position: relative;
 }
 
-.c5 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -375,36 +276,10 @@ exports[`renders correctly for a full width select 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   display: inline-block;
 }
 
-.c7 {
+.c5 {
   position: absolute;
   width: 20px;
   height: 20px;
@@ -416,7 +291,7 @@ exports[`renders correctly for a full width select 1`] = `
   transform: translateY(50%);
 }
 
-.c4 {
+.c2 {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -430,70 +305,66 @@ exports[`renders correctly for a full width select 1`] = `
   width: 100%;
 }
 
-.c4[disabled] {
+.c2[disabled] {
   background: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4[disabled] + .c6 {
+.c2[disabled] + .c4 {
   fill: #8d8d8d;
 }
 
-.c4:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c8[disabled] + .c6 {
+.c6[disabled] + .c4 {
   fill: #8d8d8d;
 }
 
 <div
   class="c0 c1"
+  style="width: 100%;"
+  width="100%"
 >
-  <div
+  <select
+    aria-invalid="false"
+    aria-required="false"
     class="c2 c3"
-    style="width: 100%;"
-    width="100%"
+    style="size: default;"
+    type="text"
   >
-    <select
-      aria-invalid="false"
-      aria-required="false"
-      class="c4 c5"
-      style="size: default;"
-      type="text"
+    <option
+      value="sunny"
+    >
+      Sunny
+    </option>
+    <option
+      value="windy"
     >
-      <option
-        value="sunny"
-      >
-        Sunny
-      </option>
-      <option
-        value="windy"
-      >
-        Windy
-      </option>
-      <option
-        value="overcast"
-      >
-        Overcast
-      </option>
-    </select>
-    <svg
-      aria-hidden="true"
-      class="c6 c7"
-      focusable="false"
-      viewBox="0 0 20 20"
+      Windy
+    </option>
+    <option
+      value="overcast"
     >
-      <path
-        d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
-        fill-rule="evenodd"
-      />
-    </svg>
-  </div>
+      Overcast
+    </option>
+  </select>
+  <svg
+    aria-hidden="true"
+    class="c4 c5"
+    focusable="false"
+    viewBox="0 0 20 20"
+  >
+    <path
+      d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
+      fill-rule="evenodd"
+    />
+  </svg>
 </div>
 `;
 
@@ -511,24 +382,11 @@ exports[`renders correctly for a select with a default value 1`] = `
   color: inherit;
 }
 
-.c3 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
-}
-
-.c3.c3.c3 {
+.c1.c1.c1 {
   position: relative;
 }
 
-.c5 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -542,36 +400,10 @@ exports[`renders correctly for a select with a default value 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   display: inline-block;
 }
 
-.c7 {
+.c5 {
   position: absolute;
   width: 20px;
   height: 20px;
@@ -583,7 +415,7 @@ exports[`renders correctly for a select with a default value 1`] = `
   transform: translateY(50%);
 }
 
-.c4 {
+.c2 {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -597,69 +429,65 @@ exports[`renders correctly for a select with a default value 1`] = `
   width: 100%;
 }
 
-.c4[disabled] {
+.c2[disabled] {
   background: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4[disabled] + .c6 {
+.c2[disabled] + .c4 {
   fill: #8d8d8d;
 }
 
-.c4:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c8[disabled] + .c6 {
+.c6[disabled] + .c4 {
   fill: #8d8d8d;
 }
 
 <div
   class="c0 c1"
 >
-  <div
+  <select
+    aria-invalid="false"
+    aria-required="false"
     class="c2 c3"
+    style="size: default;"
+    type="text"
   >
-    <select
-      aria-invalid="false"
-      aria-required="false"
-      class="c4 c5"
-      style="size: default;"
-      type="text"
+    <option
+      value="sunny"
     >
-      <option
-        value="sunny"
-      >
-        Sunny
-      </option>
-      <option
-        selected=""
-        value="windy"
-      >
-        Windy
-      </option>
-      <option
-        value="overcast"
-      >
-        Overcast
-      </option>
-    </select>
-    <svg
-      aria-hidden="true"
-      class="c6 c7"
-      focusable="false"
-      viewBox="0 0 20 20"
+      Sunny
+    </option>
+    <option
+      selected=""
+      value="windy"
     >
-      <path
-        d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
-        fill-rule="evenodd"
-      />
-    </svg>
-  </div>
+      Windy
+    </option>
+    <option
+      value="overcast"
+    >
+      Overcast
+    </option>
+  </select>
+  <svg
+    aria-hidden="true"
+    class="c4 c5"
+    focusable="false"
+    viewBox="0 0 20 20"
+  >
+    <path
+      d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
+      fill-rule="evenodd"
+    />
+  </svg>
 </div>
 `;
 
@@ -677,24 +505,11 @@ exports[`renders correctly for a select with a placeholder 1`] = `
   color: inherit;
 }
 
-.c3 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
-}
-
-.c3.c3.c3 {
+.c1.c1.c1 {
   position: relative;
 }
 
-.c5 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -708,36 +523,10 @@ exports[`renders correctly for a select with a placeholder 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   display: inline-block;
 }
 
-.c7 {
+.c5 {
   position: absolute;
   width: 20px;
   height: 20px;
@@ -749,11 +538,11 @@ exports[`renders correctly for a select with a placeholder 1`] = `
   transform: translateY(50%);
 }
 
-.c8[disabled] + .c6 {
+.c6[disabled] + .c4 {
   fill: #8d8d8d;
 }
 
-.c4 {
+.c2 {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -767,17 +556,17 @@ exports[`renders correctly for a select with a placeholder 1`] = `
   width: 100%;
 }
 
-.c4[disabled] {
+.c2[disabled] {
   background: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4[disabled] + .c6 {
+.c2[disabled] + .c4 {
   fill: #8d8d8d;
 }
 
-.c4:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
@@ -787,50 +576,46 @@ exports[`renders correctly for a select with a placeholder 1`] = `
 <div
   class="c0 c1"
 >
-  <div
+  <select
+    aria-invalid="false"
+    aria-required="false"
     class="c2 c3"
+    style="size: default;"
+    type="text"
   >
-    <select
-      aria-invalid="false"
-      aria-required="false"
-      class="c4 c5"
-      style="size: default;"
-      type="text"
+    <option
+      disabled=""
+      selected=""
+    >
+      Select weather...
+    </option>
+    <option
+      value="sunny"
     >
-      <option
-        disabled=""
-        selected=""
-      >
-        Select weather...
-      </option>
-      <option
-        value="sunny"
-      >
-        Sunny
-      </option>
-      <option
-        value="windy"
-      >
-        Windy
-      </option>
-      <option
-        value="overcast"
-      >
-        Overcast
-      </option>
-    </select>
-    <svg
-      aria-hidden="true"
-      class="c6 c7"
-      focusable="false"
-      viewBox="0 0 20 20"
+      Sunny
+    </option>
+    <option
+      value="windy"
     >
-      <path
-        d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
-        fill-rule="evenodd"
-      />
-    </svg>
-  </div>
+      Windy
+    </option>
+    <option
+      value="overcast"
+    >
+      Overcast
+    </option>
+  </select>
+  <svg
+    aria-hidden="true"
+    class="c4 c5"
+    focusable="false"
+    viewBox="0 0 20 20"
+  >
+    <path
+      d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
+      fill-rule="evenodd"
+    />
+  </svg>
 </div>
 `;
 
@@ -848,24 +633,11 @@ exports[`sizes renders correctly for a select with size large 1`] = `
   color: inherit;
 }
 
-.c3 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
-}
-
-.c3.c3.c3 {
+.c1.c1.c1 {
   position: relative;
 }
 
-.c5 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -879,36 +651,10 @@ exports[`sizes renders correctly for a select with size large 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   display: inline-block;
 }
 
-.c7 {
+.c5 {
   position: absolute;
   width: 20px;
   height: 20px;
@@ -920,33 +666,33 @@ exports[`sizes renders correctly for a select with size large 1`] = `
   transform: translateY(50%);
 }
 
-.c8[disabled] + .c6 {
+.c6[disabled] + .c4 {
   fill: #8d8d8d;
 }
 
-.c9[disabled] + .c6 {
+.c7[disabled] + .c4 {
   fill: #8d8d8d;
 }
 
-.c10[disabled] + .c6 {
+.c8[disabled] + .c4 {
   fill: #8d8d8d;
 }
 
-.c10 + .c6 {
+.c8 + .c4 {
   width: 15px;
   height: 15px;
 }
 
-.c11[disabled] + .c6 {
+.c9[disabled] + .c4 {
   fill: #8d8d8d;
 }
 
-.c11 + .c6 {
+.c9 + .c4 {
   width: 25px;
   height: 25px;
 }
 
-.c4 {
+.c2 {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -960,33 +706,33 @@ exports[`sizes renders correctly for a select with size large 1`] = `
   width: 100%;
 }
 
-.c4[disabled] {
+.c2[disabled] {
   background: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4[disabled] + .c6 {
+.c2[disabled] + .c4 {
   fill: #8d8d8d;
 }
 
-.c4:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4 {
+.c2 {
   font-size: 1.5rem;
 }
 
-.c4 + .c6 {
+.c2 + .c4 {
   width: 30px;
   height: 30px;
 }
 
-.c4 + .c12 {
+.c2 + .c10 {
   width: 25px;
   height: 25px;
   top: 16px;
@@ -996,44 +742,40 @@ exports[`sizes renders correctly for a select with size large 1`] = `
 <div
   class="c0 c1"
 >
-  <div
+  <select
+    aria-invalid="false"
+    aria-required="false"
     class="c2 c3"
+    style="size: large;"
+    type="text"
   >
-    <select
-      aria-invalid="false"
-      aria-required="false"
-      class="c4 c5"
-      style="size: large;"
-      type="text"
+    <option
+      value="sunny"
+    >
+      Sunny
+    </option>
+    <option
+      value="windy"
     >
-      <option
-        value="sunny"
-      >
-        Sunny
-      </option>
-      <option
-        value="windy"
-      >
-        Windy
-      </option>
-      <option
-        value="overcast"
-      >
-        Overcast
-      </option>
-    </select>
-    <svg
-      aria-hidden="true"
-      class="c6 c7"
-      focusable="false"
-      viewBox="0 0 20 20"
+      Windy
+    </option>
+    <option
+      value="overcast"
     >
-      <path
-        d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
-        fill-rule="evenodd"
-      />
-    </svg>
-  </div>
+      Overcast
+    </option>
+  </select>
+  <svg
+    aria-hidden="true"
+    class="c4 c5"
+    focusable="false"
+    viewBox="0 0 20 20"
+  >
+    <path
+      d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
+      fill-rule="evenodd"
+    />
+  </svg>
 </div>
 `;
 
@@ -1051,24 +793,11 @@ exports[`sizes renders correctly for a select with size medium 1`] = `
   color: inherit;
 }
 
-.c3 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
-}
-
-.c3.c3.c3 {
+.c1.c1.c1 {
   position: relative;
 }
 
-.c5 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1082,36 +811,10 @@ exports[`sizes renders correctly for a select with size medium 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   display: inline-block;
 }
 
-.c7 {
+.c5 {
   position: absolute;
   width: 20px;
   height: 20px;
@@ -1123,24 +826,24 @@ exports[`sizes renders correctly for a select with size medium 1`] = `
   transform: translateY(50%);
 }
 
-.c8[disabled] + .c6 {
+.c6[disabled] + .c4 {
   fill: #8d8d8d;
 }
 
-.c9[disabled] + .c6 {
+.c7[disabled] + .c4 {
   fill: #8d8d8d;
 }
 
-.c10[disabled] + .c6 {
+.c8[disabled] + .c4 {
   fill: #8d8d8d;
 }
 
-.c10 + .c6 {
+.c8 + .c4 {
   width: 15px;
   height: 15px;
 }
 
-.c4 {
+.c2 {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -1154,33 +857,33 @@ exports[`sizes renders correctly for a select with size medium 1`] = `
   width: 100%;
 }
 
-.c4[disabled] {
+.c2[disabled] {
   background: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4[disabled] + .c6 {
+.c2[disabled] + .c4 {
   fill: #8d8d8d;
 }
 
-.c4:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4 {
+.c2 {
   font-size: 1.25rem;
 }
 
-.c4 + .c6 {
+.c2 + .c4 {
   width: 25px;
   height: 25px;
 }
 
-.c4 + .c11 {
+.c2 + .c9 {
   width: 20px;
   height: 20px;
   top: 15px;
@@ -1190,44 +893,40 @@ exports[`sizes renders correctly for a select with size medium 1`] = `
 <div
   class="c0 c1"
 >
-  <div
+  <select
+    aria-invalid="false"
+    aria-required="false"
     class="c2 c3"
+    style="size: medium;"
+    type="text"
   >
-    <select
-      aria-invalid="false"
-      aria-required="false"
-      class="c4 c5"
-      style="size: medium;"
-      type="text"
+    <option
+      value="sunny"
+    >
+      Sunny
+    </option>
+    <option
+      value="windy"
     >
-      <option
-        value="sunny"
-      >
-        Sunny
-      </option>
-      <option
-        value="windy"
-      >
-        Windy
-      </option>
-      <option
-        value="overcast"
-      >
-        Overcast
-      </option>
-    </select>
-    <svg
-      aria-hidden="true"
-      class="c6 c7"
-      focusable="false"
-      viewBox="0 0 20 20"
+      Windy
+    </option>
+    <option
+      value="overcast"
     >
-      <path
-        d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
-        fill-rule="evenodd"
-      />
-    </svg>
-  </div>
+      Overcast
+    </option>
+  </select>
+  <svg
+    aria-hidden="true"
+    class="c4 c5"
+    focusable="false"
+    viewBox="0 0 20 20"
+  >
+    <path
+      d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
+      fill-rule="evenodd"
+    />
+  </svg>
 </div>
 `;
 
@@ -1245,24 +944,11 @@ exports[`sizes renders correctly for a select with size small 1`] = `
   color: inherit;
 }
 
-.c3 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
-}
-
-.c3.c3.c3 {
+.c1.c1.c1 {
   position: relative;
 }
 
-.c5 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1276,36 +962,10 @@ exports[`sizes renders correctly for a select with size small 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   display: inline-block;
 }
 
-.c7 {
+.c5 {
   position: absolute;
   width: 20px;
   height: 20px;
@@ -1317,15 +977,15 @@ exports[`sizes renders correctly for a select with size small 1`] = `
   transform: translateY(50%);
 }
 
-.c8[disabled] + .c6 {
+.c6[disabled] + .c4 {
   fill: #8d8d8d;
 }
 
-.c9[disabled] + .c6 {
+.c7[disabled] + .c4 {
   fill: #8d8d8d;
 }
 
-.c4 {
+.c2 {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -1339,33 +999,33 @@ exports[`sizes renders correctly for a select with size small 1`] = `
   width: 100%;
 }
 
-.c4[disabled] {
+.c2[disabled] {
   background: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4[disabled] + .c6 {
+.c2[disabled] + .c4 {
   fill: #8d8d8d;
 }
 
-.c4:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4 {
+.c2 {
   font-size: 0.8rem;
 }
 
-.c4 + .c6 {
+.c2 + .c4 {
   width: 15px;
   height: 15px;
 }
 
-.c4 + .c10 {
+.c2 + .c8 {
   width: 10px;
   height: 10px;
   top: 10px;
@@ -1374,44 +1034,40 @@ exports[`sizes renders correctly for a select with size small 1`] = `
 <div
   class="c0 c1"
 >
-  <div
+  <select
+    aria-invalid="false"
+    aria-required="false"
     class="c2 c3"
+    style="size: small;"
+    type="text"
   >
-    <select
-      aria-invalid="false"
-      aria-required="false"
-      class="c4 c5"
-      style="size: small;"
-      type="text"
+    <option
+      value="sunny"
     >
-      <option
-        value="sunny"
-      >
-        Sunny
-      </option>
-      <option
-        value="windy"
-      >
-        Windy
-      </option>
-      <option
-        value="overcast"
-      >
-        Overcast
-      </option>
-    </select>
-    <svg
-      aria-hidden="true"
-      class="c6 c7"
-      focusable="false"
-      viewBox="0 0 20 20"
+      Sunny
+    </option>
+    <option
+      value="windy"
     >
-      <path
-        d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
-        fill-rule="evenodd"
-      />
-    </svg>
-  </div>
+      Windy
+    </option>
+    <option
+      value="overcast"
+    >
+      Overcast
+    </option>
+  </select>
+  <svg
+    aria-hidden="true"
+    class="c4 c5"
+    focusable="false"
+    viewBox="0 0 20 20"
+  >
+    <path
+      d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
+      fill-rule="evenodd"
+    />
+  </svg>
 </div>
 `;
 
@@ -1429,24 +1085,11 @@ exports[`states renders correctly for a select with state danger 1`] = `
   color: inherit;
 }
 
-.c3 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
-}
-
-.c3.c3.c3 {
+.c1.c1.c1 {
   position: relative;
 }
 
-.c5 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1460,36 +1103,10 @@ exports[`states renders correctly for a select with state danger 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   display: inline-block;
 }
 
-.c7 {
+.c5 {
   position: absolute;
   width: 20px;
   height: 20px;
@@ -1501,42 +1118,42 @@ exports[`states renders correctly for a select with state danger 1`] = `
   transform: translateY(50%);
 }
 
-.c8[disabled] + .c6 {
+.c6[disabled] + .c4 {
   fill: #8d8d8d;
 }
 
-.c9[disabled] + .c6 {
+.c7[disabled] + .c4 {
   fill: #8d8d8d;
 }
 
-.c10[disabled] + .c6 {
+.c8[disabled] + .c4 {
   fill: #8d8d8d;
 }
 
-.c10 + .c6 {
+.c8 + .c4 {
   width: 15px;
   height: 15px;
 }
 
-.c11[disabled] + .c6 {
+.c9[disabled] + .c4 {
   fill: #8d8d8d;
 }
 
-.c11 + .c6 {
+.c9 + .c4 {
   width: 25px;
   height: 25px;
 }
 
-.c12[disabled] + .c6 {
+.c10[disabled] + .c4 {
   fill: #8d8d8d;
 }
 
-.c12 + .c6 {
+.c10 + .c4 {
   width: 30px;
   height: 30px;
 }
 
-.c4 {
+.c2 {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -1550,24 +1167,24 @@ exports[`states renders correctly for a select with state danger 1`] = `
   width: 100%;
 }
 
-.c4[disabled] {
+.c2[disabled] {
   background: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4[disabled] + .c6 {
+.c2[disabled] + .c4 {
   fill: #8d8d8d;
 }
 
-.c4:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4 {
+.c2 {
   border-color: #e24c67;
   box-shadow: #e24c67 0px 0px 0px 1px !important;
 }
@@ -1575,44 +1192,40 @@ exports[`states renders correctly for a select with state danger 1`] = `
 <div
   class="c0 c1"
 >
-  <div
+  <select
+    aria-invalid="true"
+    aria-required="false"
     class="c2 c3"
+    style="size: default;"
+    type="text"
   >
-    <select
-      aria-invalid="true"
-      aria-required="false"
-      class="c4 c5"
-      style="size: default;"
-      type="text"
+    <option
+      value="sunny"
+    >
+      Sunny
+    </option>
+    <option
+      value="windy"
     >
-      <option
-        value="sunny"
-      >
-        Sunny
-      </option>
-      <option
-        value="windy"
-      >
-        Windy
-      </option>
-      <option
-        value="overcast"
-      >
-        Overcast
-      </option>
-    </select>
-    <svg
-      aria-hidden="true"
-      class="c6 c7"
-      focusable="false"
-      viewBox="0 0 20 20"
+      Windy
+    </option>
+    <option
+      value="overcast"
     >
-      <path
-        d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
-        fill-rule="evenodd"
-      />
-    </svg>
-  </div>
+      Overcast
+    </option>
+  </select>
+  <svg
+    aria-hidden="true"
+    class="c4 c5"
+    focusable="false"
+    viewBox="0 0 20 20"
+  >
+    <path
+      d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
+      fill-rule="evenodd"
+    />
+  </svg>
 </div>
 `;
 
@@ -1630,24 +1243,11 @@ exports[`states renders correctly for a select with state primary 1`] = `
   color: inherit;
 }
 
-.c3 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
-}
-
-.c3.c3.c3 {
+.c1.c1.c1 {
   position: relative;
 }
 
-.c5 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1661,36 +1261,10 @@ exports[`states renders correctly for a select with state primary 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   display: inline-block;
 }
 
-.c7 {
+.c5 {
   position: absolute;
   width: 20px;
   height: 20px;
@@ -1702,54 +1276,54 @@ exports[`states renders correctly for a select with state primary 1`] = `
   transform: translateY(50%);
 }
 
-.c8[disabled] + .c6 {
+.c6[disabled] + .c4 {
   fill: #8d8d8d;
 }
 
-.c9[disabled] + .c6 {
+.c7[disabled] + .c4 {
   fill: #8d8d8d;
 }
 
-.c10[disabled] + .c6 {
+.c8[disabled] + .c4 {
   fill: #8d8d8d;
 }
 
-.c10 + .c6 {
+.c8 + .c4 {
   width: 15px;
   height: 15px;
 }
 
-.c11[disabled] + .c6 {
+.c9[disabled] + .c4 {
   fill: #8d8d8d;
 }
 
-.c11 + .c6 {
+.c9 + .c4 {
   width: 25px;
   height: 25px;
 }
 
-.c12[disabled] + .c6 {
+.c10[disabled] + .c4 {
   fill: #8d8d8d;
 }
 
-.c12 + .c6 {
+.c10 + .c4 {
   width: 30px;
   height: 30px;
 }
 
-.c13[disabled] + .c6 {
+.c11[disabled] + .c4 {
   fill: #8d8d8d;
 }
 
-.c14[disabled] + .c6 {
+.c12[disabled] + .c4 {
   fill: #8d8d8d;
 }
 
-.c15[disabled] + .c6 {
+.c13[disabled] + .c4 {
   fill: #8d8d8d;
 }
 
-.c4 {
+.c2 {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -1763,24 +1337,24 @@ exports[`states renders correctly for a select with state primary 1`] = `
   width: 100%;
 }
 
-.c4[disabled] {
+.c2[disabled] {
   background: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4[disabled] + .c6 {
+.c2[disabled] + .c4 {
   fill: #8d8d8d;
 }
 
-.c4:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4 {
+.c2 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
@@ -1788,44 +1362,40 @@ exports[`states renders correctly for a select with state primary 1`] = `
 <div
   class="c0 c1"
 >
-  <div
+  <select
+    aria-invalid="false"
+    aria-required="false"
     class="c2 c3"
+    style="size: default;"
+    type="text"
   >
-    <select
-      aria-invalid="false"
-      aria-required="false"
-      class="c4 c5"
-      style="size: default;"
-      type="text"
+    <option
+      value="sunny"
+    >
+      Sunny
+    </option>
+    <option
+      value="windy"
     >
-      <option
-        value="sunny"
-      >
-        Sunny
-      </option>
-      <option
-        value="windy"
-      >
-        Windy
-      </option>
-      <option
-        value="overcast"
-      >
-        Overcast
-      </option>
-    </select>
-    <svg
-      aria-hidden="true"
-      class="c6 c7"
-      focusable="false"
-      viewBox="0 0 20 20"
+      Windy
+    </option>
+    <option
+      value="overcast"
     >
-      <path
-        d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
-        fill-rule="evenodd"
-      />
-    </svg>
-  </div>
+      Overcast
+    </option>
+  </select>
+  <svg
+    aria-hidden="true"
+    class="c4 c5"
+    focusable="false"
+    viewBox="0 0 20 20"
+  >
+    <path
+      d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
+      fill-rule="evenodd"
+    />
+  </svg>
 </div>
 `;
 
@@ -1843,24 +1413,11 @@ exports[`states renders correctly for a select with state success 1`] = `
   color: inherit;
 }
 
-.c3 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
-}
-
-.c3.c3.c3 {
+.c1.c1.c1 {
   position: relative;
 }
 
-.c5 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1874,36 +1431,10 @@ exports[`states renders correctly for a select with state success 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   display: inline-block;
 }
 
-.c7 {
+.c5 {
   position: absolute;
   width: 20px;
   height: 20px;
@@ -1915,46 +1446,46 @@ exports[`states renders correctly for a select with state success 1`] = `
   transform: translateY(50%);
 }
 
-.c8[disabled] + .c6 {
+.c6[disabled] + .c4 {
   fill: #8d8d8d;
 }
 
-.c9[disabled] + .c6 {
+.c7[disabled] + .c4 {
   fill: #8d8d8d;
 }
 
-.c10[disabled] + .c6 {
+.c8[disabled] + .c4 {
   fill: #8d8d8d;
 }
 
-.c10 + .c6 {
+.c8 + .c4 {
   width: 15px;
   height: 15px;
 }
 
-.c11[disabled] + .c6 {
+.c9[disabled] + .c4 {
   fill: #8d8d8d;
 }
 
-.c11 + .c6 {
+.c9 + .c4 {
   width: 25px;
   height: 25px;
 }
 
-.c12[disabled] + .c6 {
+.c10[disabled] + .c4 {
   fill: #8d8d8d;
 }
 
-.c12 + .c6 {
+.c10 + .c4 {
   width: 30px;
   height: 30px;
 }
 
-.c13[disabled] + .c6 {
+.c11[disabled] + .c4 {
   fill: #8d8d8d;
 }
 
-.c4 {
+.c2 {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -1968,24 +1499,24 @@ exports[`states renders correctly for a select with state success 1`] = `
   width: 100%;
 }
 
-.c4[disabled] {
+.c2[disabled] {
   background: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4[disabled] + .c6 {
+.c2[disabled] + .c4 {
   fill: #8d8d8d;
 }
 
-.c4:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4 {
+.c2 {
   border-color: #4ca26c;
   box-shadow: #4ca26c 0px 0px 0px 1px !important;
 }
@@ -1993,44 +1524,40 @@ exports[`states renders correctly for a select with state success 1`] = `
 <div
   class="c0 c1"
 >
-  <div
+  <select
+    aria-invalid="false"
+    aria-required="false"
     class="c2 c3"
+    style="size: default;"
+    type="text"
   >
-    <select
-      aria-invalid="false"
-      aria-required="false"
-      class="c4 c5"
-      style="size: default;"
-      type="text"
+    <option
+      value="sunny"
+    >
+      Sunny
+    </option>
+    <option
+      value="windy"
     >
-      <option
-        value="sunny"
-      >
-        Sunny
-      </option>
-      <option
-        value="windy"
-      >
-        Windy
-      </option>
-      <option
-        value="overcast"
-      >
-        Overcast
-      </option>
-    </select>
-    <svg
-      aria-hidden="true"
-      class="c6 c7"
-      focusable="false"
-      viewBox="0 0 20 20"
+      Windy
+    </option>
+    <option
+      value="overcast"
     >
-      <path
-        d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
-        fill-rule="evenodd"
-      />
-    </svg>
-  </div>
+      Overcast
+    </option>
+  </select>
+  <svg
+    aria-hidden="true"
+    class="c4 c5"
+    focusable="false"
+    viewBox="0 0 20 20"
+  >
+    <path
+      d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
+      fill-rule="evenodd"
+    />
+  </svg>
 </div>
 `;
 
@@ -2048,24 +1575,11 @@ exports[`states renders correctly for a select with state warning 1`] = `
   color: inherit;
 }
 
-.c3 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
-}
-
-.c3.c3.c3 {
+.c1.c1.c1 {
   position: relative;
 }
 
-.c5 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2079,36 +1593,10 @@ exports[`states renders correctly for a select with state warning 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   display: inline-block;
 }
 
-.c7 {
+.c5 {
   position: absolute;
   width: 20px;
   height: 20px;
@@ -2120,50 +1608,50 @@ exports[`states renders correctly for a select with state warning 1`] = `
   transform: translateY(50%);
 }
 
-.c8[disabled] + .c6 {
+.c6[disabled] + .c4 {
   fill: #8d8d8d;
 }
 
-.c9[disabled] + .c6 {
+.c7[disabled] + .c4 {
   fill: #8d8d8d;
 }
 
-.c10[disabled] + .c6 {
+.c8[disabled] + .c4 {
   fill: #8d8d8d;
 }
 
-.c10 + .c6 {
+.c8 + .c4 {
   width: 15px;
   height: 15px;
 }
 
-.c11[disabled] + .c6 {
+.c9[disabled] + .c4 {
   fill: #8d8d8d;
 }
 
-.c11 + .c6 {
+.c9 + .c4 {
   width: 25px;
   height: 25px;
 }
 
-.c12[disabled] + .c6 {
+.c10[disabled] + .c4 {
   fill: #8d8d8d;
 }
 
-.c12 + .c6 {
+.c10 + .c4 {
   width: 30px;
   height: 30px;
 }
 
-.c13[disabled] + .c6 {
+.c11[disabled] + .c4 {
   fill: #8d8d8d;
 }
 
-.c14[disabled] + .c6 {
+.c12[disabled] + .c4 {
   fill: #8d8d8d;
 }
 
-.c4 {
+.c2 {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -2177,24 +1665,24 @@ exports[`states renders correctly for a select with state warning 1`] = `
   width: 100%;
 }
 
-.c4[disabled] {
+.c2[disabled] {
   background: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4[disabled] + .c6 {
+.c2[disabled] + .c4 {
   fill: #8d8d8d;
 }
 
-.c4:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4 {
+.c2 {
   border-color: #ffc94c;
   box-shadow: #ffc94c 0px 0px 0px 1px !important;
 }
@@ -2202,43 +1690,39 @@ exports[`states renders correctly for a select with state warning 1`] = `
 <div
   class="c0 c1"
 >
-  <div
+  <select
+    aria-invalid="false"
+    aria-required="false"
     class="c2 c3"
+    style="size: default;"
+    type="text"
   >
-    <select
-      aria-invalid="false"
-      aria-required="false"
-      class="c4 c5"
-      style="size: default;"
-      type="text"
+    <option
+      value="sunny"
     >
-      <option
-        value="sunny"
-      >
-        Sunny
-      </option>
-      <option
-        value="windy"
-      >
-        Windy
-      </option>
-      <option
-        value="overcast"
-      >
-        Overcast
-      </option>
-    </select>
-    <svg
-      aria-hidden="true"
-      class="c6 c7"
-      focusable="false"
-      viewBox="0 0 20 20"
+      Sunny
+    </option>
+    <option
+      value="windy"
     >
-      <path
-        d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
-        fill-rule="evenodd"
-      />
-    </svg>
-  </div>
+      Windy
+    </option>
+    <option
+      value="overcast"
+    >
+      Overcast
+    </option>
+  </select>
+  <svg
+    aria-hidden="true"
+    class="c4 c5"
+    focusable="false"
+    viewBox="0 0 20 20"
+  >
+    <path
+      d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
+      fill-rule="evenodd"
+    />
+  </svg>
 </div>
 `;
diff --git a/src/Select/__tests__/__snapshots__/SelectField.test.js.snap b/src/Select/__tests__/__snapshots__/SelectField.test.js.snap
index d4b96b961..e83c33fa7 100644
--- a/src/Select/__tests__/__snapshots__/SelectField.test.js.snap
+++ b/src/Select/__tests__/__snapshots__/SelectField.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly for a basic select 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -14,7 +14,7 @@ exports[`renders correctly for a basic select 1`] = `
   color: inherit;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -28,7 +28,7 @@ exports[`renders correctly for a basic select 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c8 {
+.c7 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -42,11 +42,11 @@ exports[`renders correctly for a basic select 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c8.c8.c8 {
+.c7.c7.c7 {
   position: relative;
 }
 
-.c10 {
+.c9 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -59,44 +59,18 @@ exports[`renders correctly for a basic select 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c7 {
+.c6 {
   display: inline-block;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c12 {
+.c11 {
   position: absolute;
   width: 20px;
   height: 20px;
@@ -108,7 +82,7 @@ exports[`renders correctly for a basic select 1`] = `
   transform: translateY(50%);
 }
 
-.c9 {
+.c8 {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -122,103 +96,99 @@ exports[`renders correctly for a basic select 1`] = `
   width: 100%;
 }
 
-.c9[disabled] {
+.c8[disabled] {
   background: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c9[disabled] + .c11 {
+.c8[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c9:focus {
+.c8:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   display: block;
 }
 
-.c3 {
+.c2 {
   margin-bottom: 0 !important;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="align-items: center;"
   >
-    <div
-      class="c2 c1"
-      style="align-items: center;"
+    <label
+      class="c2 c3 c4 c5"
+      font-weight="600"
+      for="weather"
+      style="font-weight: 600;"
     >
-      <label
-        class="c3 c4 c5 c6"
-        font-weight="600"
-        for="weather"
-        style="font-weight: 600;"
-      >
-        Weather
-      </label>
-    </div>
-    <div />
-    <div
-      class="c7 c8"
+      Weather
+    </label>
+  </div>
+  <div />
+  <div
+    class="c6 c7"
+  >
+    <select
+      aria-invalid="false"
+      aria-required="false"
+      class="c8 c9"
+      id="weather"
+      style="size: default;"
+      type="text"
     >
-      <select
-        aria-invalid="false"
-        aria-required="false"
-        class="c9 c10"
-        id="weather"
-        style="size: default;"
-        type="text"
+      <option
+        value="sunny"
       >
-        <option
-          value="sunny"
-        >
-          Sunny
-        </option>
-        <option
-          value="windy"
-        >
-          Windy
-        </option>
-        <option
-          value="overcast"
-        >
-          Overcast
-        </option>
-      </select>
-      <svg
-        aria-hidden="true"
-        class="c11 c12"
-        focusable="false"
-        viewBox="0 0 20 20"
+        Sunny
+      </option>
+      <option
+        value="windy"
       >
-        <path
-          d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
-          fill-rule="evenodd"
-        />
-      </svg>
-    </div>
-    <div />
+        Windy
+      </option>
+      <option
+        value="overcast"
+      >
+        Overcast
+      </option>
+    </select>
+    <svg
+      aria-hidden="true"
+      class="c10 c11"
+      focusable="false"
+      viewBox="0 0 20 20"
+    >
+      <path
+        d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
+        fill-rule="evenodd"
+      />
+    </svg>
   </div>
+  <div />
 </div>
 `;
 
 exports[`renders correctly for a disabled select 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -231,7 +201,7 @@ exports[`renders correctly for a disabled select 1`] = `
   color: inherit;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -245,7 +215,7 @@ exports[`renders correctly for a disabled select 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c8 {
+.c7 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -259,11 +229,11 @@ exports[`renders correctly for a disabled select 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c8.c8.c8 {
+.c7.c7.c7 {
   position: relative;
 }
 
-.c10 {
+.c9 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -276,44 +246,18 @@ exports[`renders correctly for a disabled select 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c7 {
+.c6 {
   display: inline-block;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c12 {
+.c11 {
   position: absolute;
   width: 20px;
   height: 20px;
@@ -325,7 +269,7 @@ exports[`renders correctly for a disabled select 1`] = `
   transform: translateY(50%);
 }
 
-.c9 {
+.c8 {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -339,106 +283,102 @@ exports[`renders correctly for a disabled select 1`] = `
   width: 100%;
 }
 
-.c9[disabled] {
+.c8[disabled] {
   background: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c9[disabled] + .c11 {
+.c8[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c9:focus {
+.c8:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c13[disabled] + .c11 {
+.c12[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   display: block;
 }
 
-.c3 {
+.c2 {
   margin-bottom: 0 !important;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="align-items: center;"
   >
-    <div
-      class="c2 c1"
-      style="align-items: center;"
+    <label
+      class="c2 c3 c4 c5"
+      font-weight="600"
+      for="weather"
+      style="font-weight: 600;"
     >
-      <label
-        class="c3 c4 c5 c6"
-        font-weight="600"
-        for="weather"
-        style="font-weight: 600;"
-      >
-        Weather
-      </label>
-    </div>
-    <div />
-    <div
-      class="c7 c8"
+      Weather
+    </label>
+  </div>
+  <div />
+  <div
+    class="c6 c7"
+  >
+    <select
+      aria-invalid="false"
+      aria-required="false"
+      class="c8 c9"
+      disabled=""
+      id="weather"
+      style="size: default;"
+      type="text"
     >
-      <select
-        aria-invalid="false"
-        aria-required="false"
-        class="c9 c10"
+      <option
         disabled=""
-        id="weather"
-        style="size: default;"
-        type="text"
+        value="sunny"
       >
-        <option
-          disabled=""
-          value="sunny"
-        >
-          Sunny
-        </option>
-        <option
-          disabled=""
-          value="windy"
-        >
-          Windy
-        </option>
-        <option
-          disabled=""
-          value="overcast"
-        >
-          Overcast
-        </option>
-      </select>
-      <svg
-        aria-hidden="true"
-        class="c11 c12"
-        focusable="false"
-        viewBox="0 0 20 20"
+        Sunny
+      </option>
+      <option
+        disabled=""
+        value="windy"
       >
-        <path
-          d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
-          fill-rule="evenodd"
-        />
-      </svg>
-    </div>
-    <div />
+        Windy
+      </option>
+      <option
+        disabled=""
+        value="overcast"
+      >
+        Overcast
+      </option>
+    </select>
+    <svg
+      aria-hidden="true"
+      class="c10 c11"
+      focusable="false"
+      viewBox="0 0 20 20"
+    >
+      <path
+        d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
+        fill-rule="evenodd"
+      />
+    </svg>
   </div>
+  <div />
 </div>
 `;
 
@@ -456,7 +396,7 @@ exports[`renders correctly for a full width select 1`] = `
   color: inherit;
 }
 
-.c7 {
+.c6 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -470,7 +410,7 @@ exports[`renders correctly for a full width select 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c9 {
+.c8 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -484,11 +424,11 @@ exports[`renders correctly for a full width select 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c9.c9.c9 {
+.c8.c8.c8 {
   position: relative;
 }
 
-.c11 {
+.c10 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -501,44 +441,18 @@ exports[`renders correctly for a full width select 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c8 {
+.c7 {
   display: inline-block;
 }
 
-.c3 {
+.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c13 {
+.c12 {
   position: absolute;
   width: 20px;
   height: 20px;
@@ -550,7 +464,7 @@ exports[`renders correctly for a full width select 1`] = `
   transform: translateY(50%);
 }
 
-.c10 {
+.c9 {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -564,113 +478,109 @@ exports[`renders correctly for a full width select 1`] = `
   width: 100%;
 }
 
-.c10[disabled] {
+.c9[disabled] {
   background: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c10[disabled] + .c12 {
+.c9[disabled] + .c11 {
   fill: #8d8d8d;
 }
 
-.c10:focus {
+.c9:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c14[disabled] + .c12 {
+.c13[disabled] + .c11 {
   fill: #8d8d8d;
 }
 
-.c6 {
+.c5 {
   display: inline-block;
 }
 
-.c5 {
+.c4 {
   display: block;
 }
 
-.c4 {
+.c3 {
   margin-bottom: 0 !important;
 }
 
-.c2 {
+.c0 {
   width: 100%;
 }
 
 <div
   class="c0 c1"
+  display="inline-block"
+  style="display: inline-block;"
 >
   <div
     class="c2 c1"
-    display="inline-block"
-    style="display: inline-block;"
+    style="align-items: center;"
   >
-    <div
-      class="c3 c1"
-      style="align-items: center;"
+    <label
+      class="c3 c4 c5 c6"
+      font-weight="600"
+      for="weather"
+      style="font-weight: 600;"
     >
-      <label
-        class="c4 c5 c6 c7"
-        font-weight="600"
-        for="weather"
-        style="font-weight: 600;"
-      >
-        Weather
-      </label>
-    </div>
-    <div />
-    <div
-      class="c8 c9"
-      style="width: 100%;"
-      width="100%"
+      Weather
+    </label>
+  </div>
+  <div />
+  <div
+    class="c7 c8"
+    style="width: 100%;"
+    width="100%"
+  >
+    <select
+      aria-invalid="false"
+      aria-required="false"
+      class="c9 c10"
+      id="weather"
+      style="size: default;"
+      type="text"
     >
-      <select
-        aria-invalid="false"
-        aria-required="false"
-        class="c10 c11"
-        id="weather"
-        style="size: default;"
-        type="text"
+      <option
+        value="sunny"
       >
-        <option
-          value="sunny"
-        >
-          Sunny
-        </option>
-        <option
-          value="windy"
-        >
-          Windy
-        </option>
-        <option
-          value="overcast"
-        >
-          Overcast
-        </option>
-      </select>
-      <svg
-        aria-hidden="true"
-        class="c12 c13"
-        focusable="false"
-        viewBox="0 0 20 20"
+        Sunny
+      </option>
+      <option
+        value="windy"
       >
-        <path
-          d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
-          fill-rule="evenodd"
-        />
-      </svg>
-    </div>
-    <div />
+        Windy
+      </option>
+      <option
+        value="overcast"
+      >
+        Overcast
+      </option>
+    </select>
+    <svg
+      aria-hidden="true"
+      class="c11 c12"
+      focusable="false"
+      viewBox="0 0 20 20"
+    >
+      <path
+        d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
+        fill-rule="evenodd"
+      />
+    </svg>
   </div>
+  <div />
 </div>
 `;
 
 exports[`renders correctly for a required field 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -683,7 +593,7 @@ exports[`renders correctly for a required field 1`] = `
   color: inherit;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -697,7 +607,7 @@ exports[`renders correctly for a required field 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c8 {
+.c7 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -711,11 +621,11 @@ exports[`renders correctly for a required field 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c8.c8.c8 {
+.c7.c7.c7 {
   position: relative;
 }
 
-.c10 {
+.c9 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -728,44 +638,18 @@ exports[`renders correctly for a required field 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c7 {
+.c6 {
   display: inline-block;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c12 {
+.c11 {
   position: absolute;
   width: 20px;
   height: 20px;
@@ -777,7 +661,7 @@ exports[`renders correctly for a required field 1`] = `
   transform: translateY(50%);
 }
 
-.c9 {
+.c8 {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -791,150 +675,146 @@ exports[`renders correctly for a required field 1`] = `
   width: 100%;
 }
 
-.c9[disabled] {
+.c8[disabled] {
   background: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c9[disabled] + .c11 {
+.c8[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c9:focus {
+.c8:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c13[disabled] + .c11 {
+.c12[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c14[disabled] + .c11 {
+.c13[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c14 + .c11 {
+.c13 + .c10 {
   width: 15px;
   height: 15px;
 }
 
-.c15[disabled] + .c11 {
+.c14[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c15 + .c11 {
+.c14 + .c10 {
   width: 25px;
   height: 25px;
 }
 
-.c16[disabled] + .c11 {
+.c15[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c16 + .c11 {
+.c15 + .c10 {
   width: 30px;
   height: 30px;
 }
 
-.c17[disabled] + .c11 {
+.c16[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c18[disabled] + .c11 {
+.c17[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c19[disabled] + .c11 {
+.c18[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c20[disabled] + .c11 {
+.c19[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   display: block;
 }
 
-.c3 {
+.c2 {
   margin-bottom: 0 !important;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="align-items: center;"
   >
-    <div
-      class="c2 c1"
-      style="align-items: center;"
+    <label
+      class="c2 c3 c4 c5"
+      font-weight="600"
+      for="weather"
+      style="font-weight: 600;"
     >
-      <label
-        class="c3 c4 c5 c6"
-        font-weight="600"
-        for="weather"
-        style="font-weight: 600;"
-      >
-        Weather
-      </label>
-    </div>
-    <div />
-    <div
-      class="c7 c8"
+      Weather
+    </label>
+  </div>
+  <div />
+  <div
+    class="c6 c7"
+  >
+    <select
+      aria-invalid="false"
+      aria-required="true"
+      class="c8 c9"
+      id="weather"
+      style="size: default;"
+      type="text"
     >
-      <select
-        aria-invalid="false"
-        aria-required="true"
-        class="c9 c10"
-        id="weather"
-        style="size: default;"
-        type="text"
+      <option
+        value="sunny"
       >
-        <option
-          value="sunny"
-        >
-          Sunny
-        </option>
-        <option
-          value="windy"
-        >
-          Windy
-        </option>
-        <option
-          value="overcast"
-        >
-          Overcast
-        </option>
-      </select>
-      <svg
-        aria-hidden="true"
-        class="c11 c12"
-        focusable="false"
-        viewBox="0 0 20 20"
+        Sunny
+      </option>
+      <option
+        value="windy"
       >
-        <path
-          d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
-          fill-rule="evenodd"
-        />
-      </svg>
-    </div>
-    <div />
+        Windy
+      </option>
+      <option
+        value="overcast"
+      >
+        Overcast
+      </option>
+    </select>
+    <svg
+      aria-hidden="true"
+      class="c10 c11"
+      focusable="false"
+      viewBox="0 0 20 20"
+    >
+      <path
+        d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
+        fill-rule="evenodd"
+      />
+    </svg>
   </div>
+  <div />
 </div>
 `;
 
 exports[`renders correctly for a select with a default value 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -947,7 +827,7 @@ exports[`renders correctly for a select with a default value 1`] = `
   color: inherit;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -961,7 +841,7 @@ exports[`renders correctly for a select with a default value 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c8 {
+.c7 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -975,11 +855,11 @@ exports[`renders correctly for a select with a default value 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c8.c8.c8 {
+.c7.c7.c7 {
   position: relative;
 }
 
-.c10 {
+.c9 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -992,44 +872,18 @@ exports[`renders correctly for a select with a default value 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c7 {
+.c6 {
   display: inline-block;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c12 {
+.c11 {
   position: absolute;
   width: 20px;
   height: 20px;
@@ -1041,7 +895,7 @@ exports[`renders correctly for a select with a default value 1`] = `
   transform: translateY(50%);
 }
 
-.c9 {
+.c8 {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -1055,108 +909,104 @@ exports[`renders correctly for a select with a default value 1`] = `
   width: 100%;
 }
 
-.c9[disabled] {
+.c8[disabled] {
   background: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c9[disabled] + .c11 {
+.c8[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c9:focus {
+.c8:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c13[disabled] + .c11 {
+.c12[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   display: block;
 }
 
-.c3 {
+.c2 {
   margin-bottom: 0 !important;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="align-items: center;"
   >
-    <div
-      class="c2 c1"
-      style="align-items: center;"
+    <label
+      class="c2 c3 c4 c5"
+      font-weight="600"
+      for="weather"
+      style="font-weight: 600;"
     >
-      <label
-        class="c3 c4 c5 c6"
-        font-weight="600"
-        for="weather"
-        style="font-weight: 600;"
-      >
-        Weather
-      </label>
-    </div>
-    <div />
-    <div
-      class="c7 c8"
+      Weather
+    </label>
+  </div>
+  <div />
+  <div
+    class="c6 c7"
+  >
+    <select
+      aria-invalid="false"
+      aria-required="false"
+      class="c8 c9"
+      id="weather"
+      style="size: default;"
+      type="text"
     >
-      <select
-        aria-invalid="false"
-        aria-required="false"
-        class="c9 c10"
-        id="weather"
-        style="size: default;"
-        type="text"
+      <option
+        value="sunny"
       >
-        <option
-          value="sunny"
-        >
-          Sunny
-        </option>
-        <option
-          selected=""
-          value="windy"
-        >
-          Windy
-        </option>
-        <option
-          value="overcast"
-        >
-          Overcast
-        </option>
-      </select>
-      <svg
-        aria-hidden="true"
-        class="c11 c12"
-        focusable="false"
-        viewBox="0 0 20 20"
+        Sunny
+      </option>
+      <option
+        selected=""
+        value="windy"
       >
-        <path
-          d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
-          fill-rule="evenodd"
-        />
-      </svg>
-    </div>
-    <div />
+        Windy
+      </option>
+      <option
+        value="overcast"
+      >
+        Overcast
+      </option>
+    </select>
+    <svg
+      aria-hidden="true"
+      class="c10 c11"
+      focusable="false"
+      viewBox="0 0 20 20"
+    >
+      <path
+        d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
+        fill-rule="evenodd"
+      />
+    </svg>
   </div>
+  <div />
 </div>
 `;
 
 exports[`renders correctly for a select with a placeholder 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1169,7 +1019,7 @@ exports[`renders correctly for a select with a placeholder 1`] = `
   color: inherit;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1183,7 +1033,7 @@ exports[`renders correctly for a select with a placeholder 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c8 {
+.c7 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1197,11 +1047,11 @@ exports[`renders correctly for a select with a placeholder 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c8.c8.c8 {
+.c7.c7.c7 {
   position: relative;
 }
 
-.c10 {
+.c9 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1214,44 +1064,18 @@ exports[`renders correctly for a select with a placeholder 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c7 {
+.c6 {
   display: inline-block;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c12 {
+.c11 {
   position: absolute;
   width: 20px;
   height: 20px;
@@ -1263,11 +1087,11 @@ exports[`renders correctly for a select with a placeholder 1`] = `
   transform: translateY(50%);
 }
 
-.c13[disabled] + .c11 {
+.c12[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c9 {
+.c8 {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -1281,109 +1105,105 @@ exports[`renders correctly for a select with a placeholder 1`] = `
   width: 100%;
 }
 
-.c9[disabled] {
+.c8[disabled] {
   background: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c9[disabled] + .c11 {
+.c8[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c9:focus {
+.c8:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   display: block;
 }
 
-.c3 {
+.c2 {
   margin-bottom: 0 !important;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="align-items: center;"
   >
-    <div
-      class="c2 c1"
-      style="align-items: center;"
-    >
-      <label
-        class="c3 c4 c5 c6"
-        font-weight="600"
-        for="weather"
-        style="font-weight: 600;"
-      >
-        Weather
-      </label>
-    </div>
-    <div />
-    <div
-      class="c7 c8"
+    <label
+      class="c2 c3 c4 c5"
+      font-weight="600"
+      for="weather"
+      style="font-weight: 600;"
     >
-      <select
-        aria-invalid="false"
-        aria-required="false"
-        class="c9 c10"
-        id="weather"
-        style="size: default;"
-        type="text"
+      Weather
+    </label>
+  </div>
+  <div />
+  <div
+    class="c6 c7"
+  >
+    <select
+      aria-invalid="false"
+      aria-required="false"
+      class="c8 c9"
+      id="weather"
+      style="size: default;"
+      type="text"
+    >
+      <option
+        disabled=""
+        selected=""
       >
-        <option
-          disabled=""
-          selected=""
-        >
-          Select weather...
-        </option>
-        <option
-          value="sunny"
-        >
-          Sunny
-        </option>
-        <option
-          value="windy"
-        >
-          Windy
-        </option>
-        <option
-          value="overcast"
-        >
-          Overcast
-        </option>
-      </select>
-      <svg
-        aria-hidden="true"
-        class="c11 c12"
-        focusable="false"
-        viewBox="0 0 20 20"
+        Select weather...
+      </option>
+      <option
+        value="sunny"
       >
-        <path
-          d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
-          fill-rule="evenodd"
-        />
-      </svg>
-    </div>
-    <div />
+        Sunny
+      </option>
+      <option
+        value="windy"
+      >
+        Windy
+      </option>
+      <option
+        value="overcast"
+      >
+        Overcast
+      </option>
+    </select>
+    <svg
+      aria-hidden="true"
+      class="c10 c11"
+      focusable="false"
+      viewBox="0 0 20 20"
+    >
+      <path
+        d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
+        fill-rule="evenodd"
+      />
+    </svg>
   </div>
+  <div />
 </div>
 `;
 
 exports[`renders correctly for addon component (after) 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1396,7 +1216,7 @@ exports[`renders correctly for addon component (after) 1`] = `
   color: inherit;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1410,7 +1230,7 @@ exports[`renders correctly for addon component (after) 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c9 {
+.c8 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1424,11 +1244,11 @@ exports[`renders correctly for addon component (after) 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c9.c9.c9 {
+.c8.c8.c8 {
   position: relative;
 }
 
-.c11 {
+.c10 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1441,33 +1261,7 @@ exports[`renders correctly for addon component (after) 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c7 {
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1477,64 +1271,64 @@ exports[`renders correctly for addon component (after) 1`] = `
   flex-direction: row;
 }
 
-.c7 > *:not(:first-child):not(:last-child),
-.c7 > *:not(:first-child):not(:last-child) .GroupItem-sc-2orogz-0 {
+.c6 > *:not(:first-child):not(:last-child),
+.c6 > *:not(:first-child):not(:last-child) .GroupItem-sc-2orogz-0 {
   border-radius: 0;
   border-left-width: 0;
 }
 
-.c7 > *:first-child,
-.c7 > *:first-child .GroupItem-sc-2orogz-0 {
+.c6 > *:first-child,
+.c6 > *:first-child .GroupItem-sc-2orogz-0 {
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
 }
 
-.c7 > *:last-child,
-.c7 > *:last-child .GroupItem-sc-2orogz-0 {
+.c6 > *:last-child,
+.c6 > *:last-child .GroupItem-sc-2orogz-0 {
   border-top-left-radius: 0;
   border-left-width: 0;
   border-bottom-left-radius: 0;
 }
 
-.c7 > * {
+.c6 > * {
   border-radius: 4px;
 }
 
-.c7 input:focus,
-.c7 select:focus {
+.c6 input:focus,
+.c6 select:focus {
   z-index: 1;
   position: relative;
 }
 
-.c7 > *:first-child input,
-.c7 > *:first-child select {
+.c6 > *:first-child input,
+.c6 > *:first-child select {
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
 }
 
-.c7 > *:last-child input,
-.c7 > *:last-child select {
+.c6 > *:last-child input,
+.c6 > *:last-child select {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-.c7 > *:not(:first-child):not(:last-child) > input,
-.c7 > *:not(:first-child):not(:last-child) > select {
+.c6 > *:not(:first-child):not(:last-child) > input,
+.c6 > *:not(:first-child):not(:last-child) > select {
   border-radius: 0;
 }
 
-.c8 {
+.c7 {
   display: inline-block;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c13 {
+.c12 {
   position: absolute;
   width: 20px;
   height: 20px;
@@ -1546,7 +1340,7 @@ exports[`renders correctly for addon component (after) 1`] = `
   transform: translateY(50%);
 }
 
-.c10 {
+.c9 {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -1560,158 +1354,154 @@ exports[`renders correctly for addon component (after) 1`] = `
   width: 100%;
 }
 
-.c10[disabled] {
+.c9[disabled] {
   background: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c10[disabled] + .c12 {
+.c9[disabled] + .c11 {
   fill: #8d8d8d;
 }
 
-.c10:focus {
+.c9:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c14[disabled] + .c12 {
+.c13[disabled] + .c11 {
   fill: #8d8d8d;
 }
 
-.c15[disabled] + .c12 {
+.c14[disabled] + .c11 {
   fill: #8d8d8d;
 }
 
-.c15 + .c12 {
+.c14 + .c11 {
   width: 15px;
   height: 15px;
 }
 
-.c16[disabled] + .c12 {
+.c15[disabled] + .c11 {
   fill: #8d8d8d;
 }
 
-.c16 + .c12 {
+.c15 + .c11 {
   width: 25px;
   height: 25px;
 }
 
-.c17[disabled] + .c12 {
+.c16[disabled] + .c11 {
   fill: #8d8d8d;
 }
 
-.c17 + .c12 {
+.c16 + .c11 {
   width: 30px;
   height: 30px;
 }
 
-.c18[disabled] + .c12 {
+.c17[disabled] + .c11 {
   fill: #8d8d8d;
 }
 
-.c19[disabled] + .c12 {
+.c18[disabled] + .c11 {
   fill: #8d8d8d;
 }
 
-.c20[disabled] + .c12 {
+.c19[disabled] + .c11 {
   fill: #8d8d8d;
 }
 
-.c21[disabled] + .c12 {
+.c20[disabled] + .c11 {
   fill: #8d8d8d;
 }
 
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   display: block;
 }
 
-.c3 {
+.c2 {
   margin-bottom: 0 !important;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="align-items: center;"
   >
-    <div
-      class="c2 c1"
-      style="align-items: center;"
+    <label
+      class="c2 c3 c4 c5"
+      font-weight="600"
+      for="weather"
+      style="font-weight: 600;"
     >
-      <label
-        class="c3 c4 c5 c6"
-        font-weight="600"
-        for="weather"
-        style="font-weight: 600;"
-      >
-        Weather
-      </label>
-    </div>
-    <div />
+      Weather
+    </label>
+  </div>
+  <div />
+  <div
+    class="c6 c0"
+    role="group"
+  >
     <div
-      class="c7 c1"
-      role="group"
+      class="c7 c8"
     >
-      <div
-        class="c8 c9"
+      <select
+        aria-invalid="false"
+        aria-required="false"
+        class="c9 c10"
+        id="weather"
+        style="size: default;"
+        type="text"
       >
-        <select
-          aria-invalid="false"
-          aria-required="false"
-          class="c10 c11"
-          id="weather"
-          style="size: default;"
-          type="text"
+        <option
+          value="sunny"
+        >
+          Sunny
+        </option>
+        <option
+          value="windy"
         >
-          <option
-            value="sunny"
-          >
-            Sunny
-          </option>
-          <option
-            value="windy"
-          >
-            Windy
-          </option>
-          <option
-            value="overcast"
-          >
-            Overcast
-          </option>
-        </select>
-        <svg
-          aria-hidden="true"
-          class="c12 c13"
-          focusable="false"
-          viewBox="0 0 20 20"
+          Windy
+        </option>
+        <option
+          value="overcast"
         >
-          <path
-            d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
-            fill-rule="evenodd"
-          />
-        </svg>
-      </div>
-      <div>
-        test
-      </div>
+          Overcast
+        </option>
+      </select>
+      <svg
+        aria-hidden="true"
+        class="c11 c12"
+        focusable="false"
+        viewBox="0 0 20 20"
+      >
+        <path
+          d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
+          fill-rule="evenodd"
+        />
+      </svg>
+    </div>
+    <div>
+      test
     </div>
-    <div />
   </div>
+  <div />
 </div>
 `;
 
 exports[`renders correctly for addon component (before) 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1724,7 +1514,7 @@ exports[`renders correctly for addon component (before) 1`] = `
   color: inherit;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1738,7 +1528,7 @@ exports[`renders correctly for addon component (before) 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c9 {
+.c8 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1752,11 +1542,11 @@ exports[`renders correctly for addon component (before) 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c9.c9.c9 {
+.c8.c8.c8 {
   position: relative;
 }
 
-.c11 {
+.c10 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1769,33 +1559,7 @@ exports[`renders correctly for addon component (before) 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c7 {
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1805,64 +1569,64 @@ exports[`renders correctly for addon component (before) 1`] = `
   flex-direction: row;
 }
 
-.c7 > *:not(:first-child):not(:last-child),
-.c7 > *:not(:first-child):not(:last-child) .GroupItem-sc-2orogz-0 {
+.c6 > *:not(:first-child):not(:last-child),
+.c6 > *:not(:first-child):not(:last-child) .GroupItem-sc-2orogz-0 {
   border-radius: 0;
   border-left-width: 0;
 }
 
-.c7 > *:first-child,
-.c7 > *:first-child .GroupItem-sc-2orogz-0 {
+.c6 > *:first-child,
+.c6 > *:first-child .GroupItem-sc-2orogz-0 {
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
 }
 
-.c7 > *:last-child,
-.c7 > *:last-child .GroupItem-sc-2orogz-0 {
+.c6 > *:last-child,
+.c6 > *:last-child .GroupItem-sc-2orogz-0 {
   border-top-left-radius: 0;
   border-left-width: 0;
   border-bottom-left-radius: 0;
 }
 
-.c7 > * {
+.c6 > * {
   border-radius: 4px;
 }
 
-.c7 input:focus,
-.c7 select:focus {
+.c6 input:focus,
+.c6 select:focus {
   z-index: 1;
   position: relative;
 }
 
-.c7 > *:first-child input,
-.c7 > *:first-child select {
+.c6 > *:first-child input,
+.c6 > *:first-child select {
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
 }
 
-.c7 > *:last-child input,
-.c7 > *:last-child select {
+.c6 > *:last-child input,
+.c6 > *:last-child select {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-.c7 > *:not(:first-child):not(:last-child) > input,
-.c7 > *:not(:first-child):not(:last-child) > select {
+.c6 > *:not(:first-child):not(:last-child) > input,
+.c6 > *:not(:first-child):not(:last-child) > select {
   border-radius: 0;
 }
 
-.c8 {
+.c7 {
   display: inline-block;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c13 {
+.c12 {
   position: absolute;
   width: 20px;
   height: 20px;
@@ -1874,7 +1638,7 @@ exports[`renders correctly for addon component (before) 1`] = `
   transform: translateY(50%);
 }
 
-.c10 {
+.c9 {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -1888,158 +1652,154 @@ exports[`renders correctly for addon component (before) 1`] = `
   width: 100%;
 }
 
-.c10[disabled] {
+.c9[disabled] {
   background: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c10[disabled] + .c12 {
+.c9[disabled] + .c11 {
   fill: #8d8d8d;
 }
 
-.c10:focus {
+.c9:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c14[disabled] + .c12 {
+.c13[disabled] + .c11 {
   fill: #8d8d8d;
 }
 
-.c15[disabled] + .c12 {
+.c14[disabled] + .c11 {
   fill: #8d8d8d;
 }
 
-.c15 + .c12 {
+.c14 + .c11 {
   width: 15px;
   height: 15px;
 }
 
-.c16[disabled] + .c12 {
+.c15[disabled] + .c11 {
   fill: #8d8d8d;
 }
 
-.c16 + .c12 {
+.c15 + .c11 {
   width: 25px;
   height: 25px;
 }
 
-.c17[disabled] + .c12 {
+.c16[disabled] + .c11 {
   fill: #8d8d8d;
 }
 
-.c17 + .c12 {
+.c16 + .c11 {
   width: 30px;
   height: 30px;
 }
 
-.c18[disabled] + .c12 {
+.c17[disabled] + .c11 {
   fill: #8d8d8d;
 }
 
-.c19[disabled] + .c12 {
+.c18[disabled] + .c11 {
   fill: #8d8d8d;
 }
 
-.c20[disabled] + .c12 {
+.c19[disabled] + .c11 {
   fill: #8d8d8d;
 }
 
-.c21[disabled] + .c12 {
+.c20[disabled] + .c11 {
   fill: #8d8d8d;
 }
 
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   display: block;
 }
 
-.c3 {
+.c2 {
   margin-bottom: 0 !important;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="align-items: center;"
   >
-    <div
-      class="c2 c1"
-      style="align-items: center;"
+    <label
+      class="c2 c3 c4 c5"
+      font-weight="600"
+      for="weather"
+      style="font-weight: 600;"
     >
-      <label
-        class="c3 c4 c5 c6"
-        font-weight="600"
-        for="weather"
-        style="font-weight: 600;"
-      >
-        Weather
-      </label>
+      Weather
+    </label>
+  </div>
+  <div />
+  <div
+    class="c6 c0"
+    role="group"
+  >
+    <div>
+      test
     </div>
-    <div />
     <div
-      class="c7 c1"
-      role="group"
+      class="c7 c8"
     >
-      <div>
-        test
-      </div>
-      <div
-        class="c8 c9"
+      <select
+        aria-invalid="false"
+        aria-required="false"
+        class="c9 c10"
+        id="weather"
+        style="size: default;"
+        type="text"
       >
-        <select
-          aria-invalid="false"
-          aria-required="false"
-          class="c10 c11"
-          id="weather"
-          style="size: default;"
-          type="text"
+        <option
+          value="sunny"
+        >
+          Sunny
+        </option>
+        <option
+          value="windy"
         >
-          <option
-            value="sunny"
-          >
-            Sunny
-          </option>
-          <option
-            value="windy"
-          >
-            Windy
-          </option>
-          <option
-            value="overcast"
-          >
-            Overcast
-          </option>
-        </select>
-        <svg
-          aria-hidden="true"
-          class="c12 c13"
-          focusable="false"
-          viewBox="0 0 20 20"
+          Windy
+        </option>
+        <option
+          value="overcast"
         >
-          <path
-            d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
-            fill-rule="evenodd"
-          />
-        </svg>
-      </div>
+          Overcast
+        </option>
+      </select>
+      <svg
+        aria-hidden="true"
+        class="c11 c12"
+        focusable="false"
+        viewBox="0 0 20 20"
+      >
+        <path
+          d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
+          fill-rule="evenodd"
+        />
+      </svg>
     </div>
-    <div />
   </div>
+  <div />
 </div>
 `;
 
 exports[`renders correctly for addon component (vertical) 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2052,7 +1812,7 @@ exports[`renders correctly for addon component (vertical) 1`] = `
   color: inherit;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2066,7 +1826,7 @@ exports[`renders correctly for addon component (vertical) 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c9 {
+.c8 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2080,11 +1840,11 @@ exports[`renders correctly for addon component (vertical) 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c9.c9.c9 {
+.c8.c8.c8 {
   position: relative;
 }
 
-.c11 {
+.c10 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2097,33 +1857,7 @@ exports[`renders correctly for addon component (vertical) 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c7 {
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2133,64 +1867,64 @@ exports[`renders correctly for addon component (vertical) 1`] = `
   flex-direction: column;
 }
 
-.c7 > *:not(:first-child):not(:last-child),
-.c7 > *:not(:first-child):not(:last-child) .GroupItem-sc-2orogz-0 {
+.c6 > *:not(:first-child):not(:last-child),
+.c6 > *:not(:first-child):not(:last-child) .GroupItem-sc-2orogz-0 {
   border-radius: 0;
   border-top-width: 0;
 }
 
-.c7 > *:first-child,
-.c7 > *:first-child .GroupItem-sc-2orogz-0 {
+.c6 > *:first-child,
+.c6 > *:first-child .GroupItem-sc-2orogz-0 {
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-.c7 > *:last-child,
-.c7 > *:last-child .GroupItem-sc-2orogz-0 {
+.c6 > *:last-child,
+.c6 > *:last-child .GroupItem-sc-2orogz-0 {
   border-top-left-radius: 0;
   border-top-width: 0;
   border-top-right-radius: 0;
 }
 
-.c7 > * {
+.c6 > * {
   border-radius: 4px;
 }
 
-.c7 input:focus,
-.c7 select:focus {
+.c6 input:focus,
+.c6 select:focus {
   z-index: 1;
   position: relative;
 }
 
-.c7 > *:first-child input,
-.c7 > *:first-child select {
+.c6 > *:first-child input,
+.c6 > *:first-child select {
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-.c7 > *:last-child input,
-.c7 > *:last-child select {
+.c6 > *:last-child input,
+.c6 > *:last-child select {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
 
-.c7 > *:not(:first-child):not(:last-child) > input,
-.c7 > *:not(:first-child):not(:last-child) > select {
+.c6 > *:not(:first-child):not(:last-child) > input,
+.c6 > *:not(:first-child):not(:last-child) > select {
   border-radius: 0;
 }
 
-.c8 {
+.c7 {
   display: inline-block;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c13 {
+.c12 {
   position: absolute;
   width: 20px;
   height: 20px;
@@ -2202,7 +1936,7 @@ exports[`renders correctly for addon component (vertical) 1`] = `
   transform: translateY(50%);
 }
 
-.c10 {
+.c9 {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -2216,158 +1950,154 @@ exports[`renders correctly for addon component (vertical) 1`] = `
   width: 100%;
 }
 
-.c10[disabled] {
+.c9[disabled] {
   background: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c10[disabled] + .c12 {
+.c9[disabled] + .c11 {
   fill: #8d8d8d;
 }
 
-.c10:focus {
+.c9:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c14[disabled] + .c12 {
+.c13[disabled] + .c11 {
   fill: #8d8d8d;
 }
 
-.c15[disabled] + .c12 {
+.c14[disabled] + .c11 {
   fill: #8d8d8d;
 }
 
-.c15 + .c12 {
+.c14 + .c11 {
   width: 15px;
   height: 15px;
 }
 
-.c16[disabled] + .c12 {
+.c15[disabled] + .c11 {
   fill: #8d8d8d;
 }
 
-.c16 + .c12 {
+.c15 + .c11 {
   width: 25px;
   height: 25px;
 }
 
-.c17[disabled] + .c12 {
+.c16[disabled] + .c11 {
   fill: #8d8d8d;
 }
 
-.c17 + .c12 {
+.c16 + .c11 {
   width: 30px;
   height: 30px;
 }
 
-.c18[disabled] + .c12 {
+.c17[disabled] + .c11 {
   fill: #8d8d8d;
 }
 
-.c19[disabled] + .c12 {
+.c18[disabled] + .c11 {
   fill: #8d8d8d;
 }
 
-.c20[disabled] + .c12 {
+.c19[disabled] + .c11 {
   fill: #8d8d8d;
 }
 
-.c21[disabled] + .c12 {
+.c20[disabled] + .c11 {
   fill: #8d8d8d;
 }
 
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   display: block;
 }
 
-.c3 {
+.c2 {
   margin-bottom: 0 !important;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="align-items: center;"
   >
-    <div
-      class="c2 c1"
-      style="align-items: center;"
+    <label
+      class="c2 c3 c4 c5"
+      font-weight="600"
+      for="weather"
+      style="font-weight: 600;"
     >
-      <label
-        class="c3 c4 c5 c6"
-        font-weight="600"
-        for="weather"
-        style="font-weight: 600;"
-      >
-        Weather
-      </label>
+      Weather
+    </label>
+  </div>
+  <div />
+  <div
+    class="c6 c0"
+    role="group"
+  >
+    <div>
+      test
     </div>
-    <div />
     <div
-      class="c7 c1"
-      role="group"
+      class="c7 c8"
     >
-      <div>
-        test
-      </div>
-      <div
-        class="c8 c9"
+      <select
+        aria-invalid="false"
+        aria-required="false"
+        class="c9 c10"
+        id="weather"
+        style="size: default;"
+        type="text"
       >
-        <select
-          aria-invalid="false"
-          aria-required="false"
-          class="c10 c11"
-          id="weather"
-          style="size: default;"
-          type="text"
+        <option
+          value="sunny"
+        >
+          Sunny
+        </option>
+        <option
+          value="windy"
         >
-          <option
-            value="sunny"
-          >
-            Sunny
-          </option>
-          <option
-            value="windy"
-          >
-            Windy
-          </option>
-          <option
-            value="overcast"
-          >
-            Overcast
-          </option>
-        </select>
-        <svg
-          aria-hidden="true"
-          class="c12 c13"
-          focusable="false"
-          viewBox="0 0 20 20"
+          Windy
+        </option>
+        <option
+          value="overcast"
         >
-          <path
-            d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
-            fill-rule="evenodd"
-          />
-        </svg>
-      </div>
+          Overcast
+        </option>
+      </select>
+      <svg
+        aria-hidden="true"
+        class="c11 c12"
+        focusable="false"
+        viewBox="0 0 20 20"
+      >
+        <path
+          d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
+          fill-rule="evenodd"
+        />
+      </svg>
     </div>
-    <div />
   </div>
+  <div />
 </div>
 `;
 
 exports[`renders correctly for an input field with a description 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2380,7 +2110,7 @@ exports[`renders correctly for an input field with a description 1`] = `
   color: inherit;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2394,7 +2124,7 @@ exports[`renders correctly for an input field with a description 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c10 {
+.c9 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2408,11 +2138,11 @@ exports[`renders correctly for an input field with a description 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c10.c10.c10 {
+.c9.c9.c9 {
   position: relative;
 }
 
-.c12 {
+.c11 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2425,44 +2155,18 @@ exports[`renders correctly for an input field with a description 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c9 {
+.c8 {
   display: inline-block;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c14 {
+.c13 {
   position: absolute;
   width: 20px;
   height: 20px;
@@ -2474,7 +2178,7 @@ exports[`renders correctly for an input field with a description 1`] = `
   transform: translateY(50%);
 }
 
-.c11 {
+.c10 {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -2488,90 +2192,90 @@ exports[`renders correctly for an input field with a description 1`] = `
   width: 100%;
 }
 
-.c11[disabled] {
+.c10[disabled] {
   background: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c11[disabled] + .c13 {
+.c10[disabled] + .c12 {
   fill: #8d8d8d;
 }
 
-.c11:focus {
+.c10:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c15[disabled] + .c13 {
+.c14[disabled] + .c12 {
   fill: #8d8d8d;
 }
 
-.c16[disabled] + .c13 {
+.c15[disabled] + .c12 {
   fill: #8d8d8d;
 }
 
-.c16 + .c13 {
+.c15 + .c12 {
   width: 15px;
   height: 15px;
 }
 
-.c17[disabled] + .c13 {
+.c16[disabled] + .c12 {
   fill: #8d8d8d;
 }
 
-.c17 + .c13 {
+.c16 + .c12 {
   width: 25px;
   height: 25px;
 }
 
-.c18[disabled] + .c13 {
+.c17[disabled] + .c12 {
   fill: #8d8d8d;
 }
 
-.c18 + .c13 {
+.c17 + .c12 {
   width: 30px;
   height: 30px;
 }
 
-.c19[disabled] + .c13 {
+.c18[disabled] + .c12 {
   fill: #8d8d8d;
 }
 
-.c20[disabled] + .c13 {
+.c19[disabled] + .c12 {
   fill: #8d8d8d;
 }
 
-.c21[disabled] + .c13 {
+.c20[disabled] + .c12 {
   fill: #8d8d8d;
 }
 
-.c22[disabled] + .c13 {
+.c21[disabled] + .c12 {
   fill: #8d8d8d;
 }
 
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   display: block;
 }
 
-abbr.c8 {
+abbr.c7 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c8 {
+i.c7 {
   font-style: italic;
 }
 
-kbd.c8 {
+kbd.c7 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -2579,126 +2283,122 @@ kbd.c8 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c8 {
+mark.c7 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c8 {
+strong.c7 {
   font-weight: bold;
 }
 
-sub.c8,
-sup.c8 {
+sub.c7,
+sup.c7 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c8,
-u.c8 {
+ins.c7,
+u.c7 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c8,
-cite.c8,
-var.c8,
-em.c8 {
+i.c7,
+cite.c7,
+var.c7,
+em.c7 {
   font-style: italic;
 }
 
-kbd.c8,
-pre.c8,
-samp.c8 {
+kbd.c7,
+pre.c7,
+samp.c7 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c8 .c23 {
+.c7 .c22 {
   top: 0.1em;
 }
 
-.c3 {
+.c2 {
   margin-bottom: 0 !important;
 }
 
-.c7 {
+.c6 {
   display: block;
   font-size: 0.8rem;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="align-items: center;"
   >
-    <div
-      class="c2 c1"
-      style="align-items: center;"
-    >
-      <label
-        class="c3 c4 c5 c6"
-        font-weight="600"
-        for="weather"
-        style="font-weight: 600;"
-      >
-        Weather
-      </label>
-    </div>
-    <span
-      class="c7 c8 c1"
+    <label
+      class="c2 c3 c4 c5"
+      font-weight="600"
+      for="weather"
+      style="font-weight: 600;"
     >
-      Required for your fannypack
-    </span>
-    <div
-      class="c9 c10"
+      Weather
+    </label>
+  </div>
+  <span
+    class="c6 c7 c0"
+  >
+    Required for your fannypack
+  </span>
+  <div
+    class="c8 c9"
+  >
+    <select
+      aria-invalid="false"
+      aria-required="false"
+      class="c10 c11"
+      id="weather"
+      style="size: default;"
+      type="text"
     >
-      <select
-        aria-invalid="false"
-        aria-required="false"
-        class="c11 c12"
-        id="weather"
-        style="size: default;"
-        type="text"
+      <option
+        value="sunny"
       >
-        <option
-          value="sunny"
-        >
-          Sunny
-        </option>
-        <option
-          value="windy"
-        >
-          Windy
-        </option>
-        <option
-          value="overcast"
-        >
-          Overcast
-        </option>
-      </select>
-      <svg
-        aria-hidden="true"
-        class="c13 c14"
-        focusable="false"
-        viewBox="0 0 20 20"
+        Sunny
+      </option>
+      <option
+        value="windy"
       >
-        <path
-          d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
-          fill-rule="evenodd"
-        />
-      </svg>
-    </div>
-    <div />
+        Windy
+      </option>
+      <option
+        value="overcast"
+      >
+        Overcast
+      </option>
+    </select>
+    <svg
+      aria-hidden="true"
+      class="c12 c13"
+      focusable="false"
+      viewBox="0 0 20 20"
+    >
+      <path
+        d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
+        fill-rule="evenodd"
+      />
+    </svg>
   </div>
+  <div />
 </div>
 `;
 
 exports[`renders correctly for an input field with a hint 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2711,7 +2411,7 @@ exports[`renders correctly for an input field with a hint 1`] = `
   color: inherit;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2725,7 +2425,7 @@ exports[`renders correctly for an input field with a hint 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c8 {
+.c7 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2739,11 +2439,11 @@ exports[`renders correctly for an input field with a hint 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c8.c8.c8 {
+.c7.c7.c7 {
   position: relative;
 }
 
-.c10 {
+.c9 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2756,44 +2456,18 @@ exports[`renders correctly for an input field with a hint 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c7 {
+.c6 {
   display: inline-block;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c12 {
+.c11 {
   position: absolute;
   width: 20px;
   height: 20px;
@@ -2805,7 +2479,7 @@ exports[`renders correctly for an input field with a hint 1`] = `
   transform: translateY(50%);
 }
 
-.c9 {
+.c8 {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -2819,90 +2493,90 @@ exports[`renders correctly for an input field with a hint 1`] = `
   width: 100%;
 }
 
-.c9[disabled] {
+.c8[disabled] {
   background: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c9[disabled] + .c11 {
+.c8[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c9:focus {
+.c8:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c15[disabled] + .c11 {
+.c14[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c16[disabled] + .c11 {
+.c15[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c16 + .c11 {
+.c15 + .c10 {
   width: 15px;
   height: 15px;
 }
 
-.c17[disabled] + .c11 {
+.c16[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c17 + .c11 {
+.c16 + .c10 {
   width: 25px;
   height: 25px;
 }
 
-.c18[disabled] + .c11 {
+.c17[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c18 + .c11 {
+.c17 + .c10 {
   width: 30px;
   height: 30px;
 }
 
-.c19[disabled] + .c11 {
+.c18[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c20[disabled] + .c11 {
+.c19[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c21[disabled] + .c11 {
+.c20[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c22[disabled] + .c11 {
+.c21[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   display: block;
 }
 
-abbr.c14 {
+abbr.c13 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c14 {
+i.c13 {
   font-style: italic;
 }
 
-kbd.c14 {
+kbd.c13 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -2910,127 +2584,123 @@ kbd.c14 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c14 {
+mark.c13 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c14 {
+strong.c13 {
   font-weight: bold;
 }
 
-sub.c14,
-sup.c14 {
+sub.c13,
+sup.c13 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c14,
-u.c14 {
+ins.c13,
+u.c13 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c14,
-cite.c14,
-var.c14,
-em.c14 {
+i.c13,
+cite.c13,
+var.c13,
+em.c13 {
   font-style: italic;
 }
 
-kbd.c14,
-pre.c14,
-samp.c14 {
+kbd.c13,
+pre.c13,
+samp.c13 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c14 .c23 {
+.c13 .c22 {
   top: 0.1em;
 }
 
-.c3 {
+.c2 {
   margin-bottom: 0 !important;
 }
 
-.c13 {
+.c12 {
   display: block;
   font-size: 0.8rem;
   margin-top: 0.25rem;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="align-items: center;"
   >
-    <div
-      class="c2 c1"
-      style="align-items: center;"
-    >
-      <label
-        class="c3 c4 c5 c6"
-        font-weight="600"
-        for="weather"
-        style="font-weight: 600;"
-      >
-        Weather
-      </label>
-    </div>
-    <div />
-    <div
-      class="c7 c8"
+    <label
+      class="c2 c3 c4 c5"
+      font-weight="600"
+      for="weather"
+      style="font-weight: 600;"
     >
-      <select
-        aria-invalid="false"
-        aria-required="false"
-        class="c9 c10"
-        id="weather"
-        style="size: default;"
-        type="text"
+      Weather
+    </label>
+  </div>
+  <div />
+  <div
+    class="c6 c7"
+  >
+    <select
+      aria-invalid="false"
+      aria-required="false"
+      class="c8 c9"
+      id="weather"
+      style="size: default;"
+      type="text"
+    >
+      <option
+        value="sunny"
       >
-        <option
-          value="sunny"
-        >
-          Sunny
-        </option>
-        <option
-          value="windy"
-        >
-          Windy
-        </option>
-        <option
-          value="overcast"
-        >
-          Overcast
-        </option>
-      </select>
-      <svg
-        aria-hidden="true"
-        class="c11 c12"
-        focusable="false"
-        viewBox="0 0 20 20"
+        Sunny
+      </option>
+      <option
+        value="windy"
       >
-        <path
-          d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
-          fill-rule="evenodd"
-        />
-      </svg>
-    </div>
-    <span
-      class="c13 c14 c1"
+        Windy
+      </option>
+      <option
+        value="overcast"
+      >
+        Overcast
+      </option>
+    </select>
+    <svg
+      aria-hidden="true"
+      class="c10 c11"
+      focusable="false"
+      viewBox="0 0 20 20"
     >
-      Must be awesome
-    </span>
+      <path
+        d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
+        fill-rule="evenodd"
+      />
+    </svg>
   </div>
+  <span
+    class="c12 c13 c0"
+  >
+    Must be awesome
+  </span>
 </div>
 `;
 
 exports[`renders correctly for an optional input field 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3043,7 +2713,7 @@ exports[`renders correctly for an optional input field 1`] = `
   color: inherit;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3057,7 +2727,7 @@ exports[`renders correctly for an optional input field 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c10 {
+.c9 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3071,11 +2741,11 @@ exports[`renders correctly for an optional input field 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c10.c10.c10 {
+.c9.c9.c9 {
   position: relative;
 }
 
-.c12 {
+.c11 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3088,44 +2758,18 @@ exports[`renders correctly for an optional input field 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c9 {
+.c8 {
   display: inline-block;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c14 {
+.c13 {
   position: absolute;
   width: 20px;
   height: 20px;
@@ -3137,7 +2781,7 @@ exports[`renders correctly for an optional input field 1`] = `
   transform: translateY(50%);
 }
 
-.c11 {
+.c10 {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -3151,90 +2795,90 @@ exports[`renders correctly for an optional input field 1`] = `
   width: 100%;
 }
 
-.c11[disabled] {
+.c10[disabled] {
   background: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c11[disabled] + .c13 {
+.c10[disabled] + .c12 {
   fill: #8d8d8d;
 }
 
-.c11:focus {
+.c10:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c15[disabled] + .c13 {
+.c14[disabled] + .c12 {
   fill: #8d8d8d;
 }
 
-.c16[disabled] + .c13 {
+.c15[disabled] + .c12 {
   fill: #8d8d8d;
 }
 
-.c16 + .c13 {
+.c15 + .c12 {
   width: 15px;
   height: 15px;
 }
 
-.c17[disabled] + .c13 {
+.c16[disabled] + .c12 {
   fill: #8d8d8d;
 }
 
-.c17 + .c13 {
+.c16 + .c12 {
   width: 25px;
   height: 25px;
 }
 
-.c18[disabled] + .c13 {
+.c17[disabled] + .c12 {
   fill: #8d8d8d;
 }
 
-.c18 + .c13 {
+.c17 + .c12 {
   width: 30px;
   height: 30px;
 }
 
-.c19[disabled] + .c13 {
+.c18[disabled] + .c12 {
   fill: #8d8d8d;
 }
 
-.c20[disabled] + .c13 {
+.c19[disabled] + .c12 {
   fill: #8d8d8d;
 }
 
-.c21[disabled] + .c13 {
+.c20[disabled] + .c12 {
   fill: #8d8d8d;
 }
 
-.c22[disabled] + .c13 {
+.c21[disabled] + .c12 {
   fill: #8d8d8d;
 }
 
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   display: block;
 }
 
-abbr.c8 {
+abbr.c7 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c8 {
+i.c7 {
   font-style: italic;
 }
 
-kbd.c8 {
+kbd.c7 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -3242,128 +2886,124 @@ kbd.c8 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c8 {
+mark.c7 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c8 {
+strong.c7 {
   font-weight: bold;
 }
 
-sub.c8,
-sup.c8 {
+sub.c7,
+sup.c7 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c8,
-u.c8 {
+ins.c7,
+u.c7 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c8,
-cite.c8,
-var.c8,
-em.c8 {
+i.c7,
+cite.c7,
+var.c7,
+em.c7 {
   font-style: italic;
 }
 
-kbd.c8,
-pre.c8,
-samp.c8 {
+kbd.c7,
+pre.c7,
+samp.c7 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c8 .c23 {
+.c7 .c22 {
   top: 0.1em;
 }
 
-.c3 {
+.c2 {
   margin-bottom: 0 !important;
 }
 
-.c7 {
+.c6 {
   font-size: 0.8rem;
   color: #708da8;
   margin-left: 0.5rem;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="align-items: center;"
   >
-    <div
-      class="c2 c1"
-      style="align-items: center;"
+    <label
+      class="c2 c3 c4 c5"
+      font-weight="600"
+      for="weather"
+      style="font-weight: 600;"
     >
-      <label
-        class="c3 c4 c5 c6"
-        font-weight="600"
-        for="weather"
-        style="font-weight: 600;"
-      >
-        Weather
-      </label>
-      <span
-        class="c7 c8 c1"
-      >
-        OPTIONAL
-      </span>
-    </div>
-    <div />
-    <div
-      class="c9 c10"
+      Weather
+    </label>
+    <span
+      class="c6 c7 c0"
     >
-      <select
-        aria-invalid="false"
-        aria-required="false"
-        class="c11 c12"
-        id="weather"
-        style="size: default;"
-        type="text"
+      OPTIONAL
+    </span>
+  </div>
+  <div />
+  <div
+    class="c8 c9"
+  >
+    <select
+      aria-invalid="false"
+      aria-required="false"
+      class="c10 c11"
+      id="weather"
+      style="size: default;"
+      type="text"
+    >
+      <option
+        value="sunny"
       >
-        <option
-          value="sunny"
-        >
-          Sunny
-        </option>
-        <option
-          value="windy"
-        >
-          Windy
-        </option>
-        <option
-          value="overcast"
-        >
-          Overcast
-        </option>
-      </select>
-      <svg
-        aria-hidden="true"
-        class="c13 c14"
-        focusable="false"
-        viewBox="0 0 20 20"
+        Sunny
+      </option>
+      <option
+        value="windy"
       >
-        <path
-          d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
-          fill-rule="evenodd"
-        />
-      </svg>
-    </div>
-    <div />
+        Windy
+      </option>
+      <option
+        value="overcast"
+      >
+        Overcast
+      </option>
+    </select>
+    <svg
+      aria-hidden="true"
+      class="c12 c13"
+      focusable="false"
+      viewBox="0 0 20 20"
+    >
+      <path
+        d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
+        fill-rule="evenodd"
+      />
+    </svg>
   </div>
+  <div />
 </div>
 `;
 
 exports[`sizes renders correctly for a select with size large 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3376,7 +3016,7 @@ exports[`sizes renders correctly for a select with size large 1`] = `
   color: inherit;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3390,7 +3030,7 @@ exports[`sizes renders correctly for a select with size large 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c8 {
+.c7 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3404,11 +3044,11 @@ exports[`sizes renders correctly for a select with size large 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c8.c8.c8 {
+.c7.c7.c7 {
   position: relative;
 }
 
-.c10 {
+.c9 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3421,44 +3061,18 @@ exports[`sizes renders correctly for a select with size large 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c7 {
+.c6 {
   display: inline-block;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c12 {
+.c11 {
   position: absolute;
   width: 20px;
   height: 20px;
@@ -3470,33 +3084,33 @@ exports[`sizes renders correctly for a select with size large 1`] = `
   transform: translateY(50%);
 }
 
-.c13[disabled] + .c11 {
+.c12[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c14[disabled] + .c11 {
+.c13[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c15[disabled] + .c11 {
+.c14[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c15 + .c11 {
+.c14 + .c10 {
   width: 15px;
   height: 15px;
 }
 
-.c16[disabled] + .c11 {
+.c15[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c16 + .c11 {
+.c15 + .c10 {
   width: 25px;
   height: 25px;
 }
 
-.c9 {
+.c8 {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -3510,119 +3124,115 @@ exports[`sizes renders correctly for a select with size large 1`] = `
   width: 100%;
 }
 
-.c9[disabled] {
+.c8[disabled] {
   background: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c9[disabled] + .c11 {
+.c8[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c9:focus {
+.c8:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c9 {
+.c8 {
   font-size: 1.5rem;
 }
 
-.c9 + .c11 {
+.c8 + .c10 {
   width: 30px;
   height: 30px;
 }
 
-.c9 + .c17 {
+.c8 + .c16 {
   width: 25px;
   height: 25px;
   top: 16px;
   right: 12px;
 }
 
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   display: block;
 }
 
-.c3 {
+.c2 {
   margin-bottom: 0 !important;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="align-items: center;"
   >
-    <div
-      class="c2 c1"
-      style="align-items: center;"
+    <label
+      class="c2 c3 c4 c5"
+      font-weight="600"
+      for="weather"
+      style="font-weight: 600;"
     >
-      <label
-        class="c3 c4 c5 c6"
-        font-weight="600"
-        for="weather"
-        style="font-weight: 600;"
-      >
-        Weather
-      </label>
-    </div>
-    <div />
-    <div
-      class="c7 c8"
+      Weather
+    </label>
+  </div>
+  <div />
+  <div
+    class="c6 c7"
+  >
+    <select
+      aria-invalid="false"
+      aria-required="false"
+      class="c8 c9"
+      id="weather"
+      style="size: large;"
+      type="text"
     >
-      <select
-        aria-invalid="false"
-        aria-required="false"
-        class="c9 c10"
-        id="weather"
-        style="size: large;"
-        type="text"
+      <option
+        value="sunny"
       >
-        <option
-          value="sunny"
-        >
-          Sunny
-        </option>
-        <option
-          value="windy"
-        >
-          Windy
-        </option>
-        <option
-          value="overcast"
-        >
-          Overcast
-        </option>
-      </select>
-      <svg
-        aria-hidden="true"
-        class="c11 c12"
-        focusable="false"
-        viewBox="0 0 20 20"
+        Sunny
+      </option>
+      <option
+        value="windy"
       >
-        <path
-          d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
-          fill-rule="evenodd"
-        />
-      </svg>
-    </div>
-    <div />
+        Windy
+      </option>
+      <option
+        value="overcast"
+      >
+        Overcast
+      </option>
+    </select>
+    <svg
+      aria-hidden="true"
+      class="c10 c11"
+      focusable="false"
+      viewBox="0 0 20 20"
+    >
+      <path
+        d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
+        fill-rule="evenodd"
+      />
+    </svg>
   </div>
+  <div />
 </div>
 `;
 
 exports[`sizes renders correctly for a select with size medium 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3635,7 +3245,7 @@ exports[`sizes renders correctly for a select with size medium 1`] = `
   color: inherit;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3649,7 +3259,7 @@ exports[`sizes renders correctly for a select with size medium 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c8 {
+.c7 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3663,11 +3273,11 @@ exports[`sizes renders correctly for a select with size medium 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c8.c8.c8 {
+.c7.c7.c7 {
   position: relative;
 }
 
-.c10 {
+.c9 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3680,44 +3290,18 @@ exports[`sizes renders correctly for a select with size medium 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c7 {
+.c6 {
   display: inline-block;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c12 {
+.c11 {
   position: absolute;
   width: 20px;
   height: 20px;
@@ -3729,24 +3313,24 @@ exports[`sizes renders correctly for a select with size medium 1`] = `
   transform: translateY(50%);
 }
 
-.c13[disabled] + .c11 {
+.c12[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c14[disabled] + .c11 {
+.c13[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c15[disabled] + .c11 {
+.c14[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c15 + .c11 {
+.c14 + .c10 {
   width: 15px;
   height: 15px;
 }
 
-.c9 {
+.c8 {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -3760,119 +3344,115 @@ exports[`sizes renders correctly for a select with size medium 1`] = `
   width: 100%;
 }
 
-.c9[disabled] {
+.c8[disabled] {
   background: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c9[disabled] + .c11 {
+.c8[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c9:focus {
+.c8:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c9 {
+.c8 {
   font-size: 1.25rem;
 }
 
-.c9 + .c11 {
+.c8 + .c10 {
   width: 25px;
   height: 25px;
 }
 
-.c9 + .c16 {
+.c8 + .c15 {
   width: 20px;
   height: 20px;
   top: 15px;
   right: 10px;
 }
 
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   display: block;
 }
 
-.c3 {
+.c2 {
   margin-bottom: 0 !important;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="align-items: center;"
   >
-    <div
-      class="c2 c1"
-      style="align-items: center;"
+    <label
+      class="c2 c3 c4 c5"
+      font-weight="600"
+      for="weather"
+      style="font-weight: 600;"
     >
-      <label
-        class="c3 c4 c5 c6"
-        font-weight="600"
-        for="weather"
-        style="font-weight: 600;"
-      >
-        Weather
-      </label>
-    </div>
-    <div />
-    <div
-      class="c7 c8"
+      Weather
+    </label>
+  </div>
+  <div />
+  <div
+    class="c6 c7"
+  >
+    <select
+      aria-invalid="false"
+      aria-required="false"
+      class="c8 c9"
+      id="weather"
+      style="size: medium;"
+      type="text"
     >
-      <select
-        aria-invalid="false"
-        aria-required="false"
-        class="c9 c10"
-        id="weather"
-        style="size: medium;"
-        type="text"
+      <option
+        value="sunny"
       >
-        <option
-          value="sunny"
-        >
-          Sunny
-        </option>
-        <option
-          value="windy"
-        >
-          Windy
-        </option>
-        <option
-          value="overcast"
-        >
-          Overcast
-        </option>
-      </select>
-      <svg
-        aria-hidden="true"
-        class="c11 c12"
-        focusable="false"
-        viewBox="0 0 20 20"
+        Sunny
+      </option>
+      <option
+        value="windy"
       >
-        <path
-          d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
-          fill-rule="evenodd"
-        />
-      </svg>
-    </div>
-    <div />
+        Windy
+      </option>
+      <option
+        value="overcast"
+      >
+        Overcast
+      </option>
+    </select>
+    <svg
+      aria-hidden="true"
+      class="c10 c11"
+      focusable="false"
+      viewBox="0 0 20 20"
+    >
+      <path
+        d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
+        fill-rule="evenodd"
+      />
+    </svg>
   </div>
+  <div />
 </div>
 `;
 
 exports[`sizes renders correctly for a select with size small 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3885,7 +3465,7 @@ exports[`sizes renders correctly for a select with size small 1`] = `
   color: inherit;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3899,7 +3479,7 @@ exports[`sizes renders correctly for a select with size small 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c8 {
+.c7 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3913,11 +3493,11 @@ exports[`sizes renders correctly for a select with size small 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c8.c8.c8 {
+.c7.c7.c7 {
   position: relative;
 }
 
-.c10 {
+.c9 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3930,44 +3510,18 @@ exports[`sizes renders correctly for a select with size small 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c7 {
+.c6 {
   display: inline-block;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c12 {
+.c11 {
   position: absolute;
   width: 20px;
   height: 20px;
@@ -3979,15 +3533,15 @@ exports[`sizes renders correctly for a select with size small 1`] = `
   transform: translateY(50%);
 }
 
-.c13[disabled] + .c11 {
+.c12[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c14[disabled] + .c11 {
+.c13[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c9 {
+.c8 {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -4001,118 +3555,114 @@ exports[`sizes renders correctly for a select with size small 1`] = `
   width: 100%;
 }
 
-.c9[disabled] {
+.c8[disabled] {
   background: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c9[disabled] + .c11 {
+.c8[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c9:focus {
+.c8:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c9 {
+.c8 {
   font-size: 0.8rem;
 }
 
-.c9 + .c11 {
+.c8 + .c10 {
   width: 15px;
   height: 15px;
 }
 
-.c9 + .c15 {
+.c8 + .c14 {
   width: 10px;
   height: 10px;
   top: 10px;
 }
 
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   display: block;
 }
 
-.c3 {
+.c2 {
   margin-bottom: 0 !important;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="align-items: center;"
   >
-    <div
-      class="c2 c1"
-      style="align-items: center;"
+    <label
+      class="c2 c3 c4 c5"
+      font-weight="600"
+      for="weather"
+      style="font-weight: 600;"
     >
-      <label
-        class="c3 c4 c5 c6"
-        font-weight="600"
-        for="weather"
-        style="font-weight: 600;"
-      >
-        Weather
-      </label>
-    </div>
-    <div />
-    <div
-      class="c7 c8"
+      Weather
+    </label>
+  </div>
+  <div />
+  <div
+    class="c6 c7"
+  >
+    <select
+      aria-invalid="false"
+      aria-required="false"
+      class="c8 c9"
+      id="weather"
+      style="size: small;"
+      type="text"
     >
-      <select
-        aria-invalid="false"
-        aria-required="false"
-        class="c9 c10"
-        id="weather"
-        style="size: small;"
-        type="text"
+      <option
+        value="sunny"
       >
-        <option
-          value="sunny"
-        >
-          Sunny
-        </option>
-        <option
-          value="windy"
-        >
-          Windy
-        </option>
-        <option
-          value="overcast"
-        >
-          Overcast
-        </option>
-      </select>
-      <svg
-        aria-hidden="true"
-        class="c11 c12"
-        focusable="false"
-        viewBox="0 0 20 20"
+        Sunny
+      </option>
+      <option
+        value="windy"
       >
-        <path
-          d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
-          fill-rule="evenodd"
-        />
-      </svg>
-    </div>
-    <div />
+        Windy
+      </option>
+      <option
+        value="overcast"
+      >
+        Overcast
+      </option>
+    </select>
+    <svg
+      aria-hidden="true"
+      class="c10 c11"
+      focusable="false"
+      viewBox="0 0 20 20"
+    >
+      <path
+        d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
+        fill-rule="evenodd"
+      />
+    </svg>
   </div>
+  <div />
 </div>
 `;
 
 exports[`states renders correctly for a select with state danger 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -4125,7 +3675,7 @@ exports[`states renders correctly for a select with state danger 1`] = `
   color: inherit;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -4139,7 +3689,7 @@ exports[`states renders correctly for a select with state danger 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c8 {
+.c7 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -4153,11 +3703,11 @@ exports[`states renders correctly for a select with state danger 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c8.c8.c8 {
+.c7.c7.c7 {
   position: relative;
 }
 
-.c10 {
+.c9 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -4170,44 +3720,18 @@ exports[`states renders correctly for a select with state danger 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c7 {
+.c6 {
   display: inline-block;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c12 {
+.c11 {
   position: absolute;
   width: 20px;
   height: 20px;
@@ -4219,42 +3743,42 @@ exports[`states renders correctly for a select with state danger 1`] = `
   transform: translateY(50%);
 }
 
-.c13[disabled] + .c11 {
+.c12[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c14[disabled] + .c11 {
+.c13[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c15[disabled] + .c11 {
+.c14[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c15 + .c11 {
+.c14 + .c10 {
   width: 15px;
   height: 15px;
 }
 
-.c16[disabled] + .c11 {
+.c15[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c16 + .c11 {
+.c15 + .c10 {
   width: 25px;
   height: 25px;
 }
 
-.c17[disabled] + .c11 {
+.c16[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c17 + .c11 {
+.c16 + .c10 {
   width: 30px;
   height: 30px;
 }
 
-.c9 {
+.c8 {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -4268,108 +3792,104 @@ exports[`states renders correctly for a select with state danger 1`] = `
   width: 100%;
 }
 
-.c9[disabled] {
+.c8[disabled] {
   background: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c9[disabled] + .c11 {
+.c8[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c9:focus {
+.c8:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c9 {
+.c8 {
   border-color: #e24c67;
   box-shadow: #e24c67 0px 0px 0px 1px !important;
 }
 
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   display: block;
 }
 
-.c3 {
+.c2 {
   margin-bottom: 0 !important;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="align-items: center;"
   >
-    <div
-      class="c2 c1"
-      style="align-items: center;"
+    <label
+      class="c2 c3 c4 c5"
+      font-weight="600"
+      for="weather"
+      style="font-weight: 600;"
     >
-      <label
-        class="c3 c4 c5 c6"
-        font-weight="600"
-        for="weather"
-        style="font-weight: 600;"
-      >
-        Weather
-      </label>
-    </div>
-    <div />
-    <div
-      class="c7 c8"
+      Weather
+    </label>
+  </div>
+  <div />
+  <div
+    class="c6 c7"
+  >
+    <select
+      aria-invalid="true"
+      aria-required="false"
+      class="c8 c9"
+      id="weather"
+      style="size: default;"
+      type="text"
     >
-      <select
-        aria-invalid="true"
-        aria-required="false"
-        class="c9 c10"
-        id="weather"
-        style="size: default;"
-        type="text"
+      <option
+        value="sunny"
       >
-        <option
-          value="sunny"
-        >
-          Sunny
-        </option>
-        <option
-          value="windy"
-        >
-          Windy
-        </option>
-        <option
-          value="overcast"
-        >
-          Overcast
-        </option>
-      </select>
-      <svg
-        aria-hidden="true"
-        class="c11 c12"
-        focusable="false"
-        viewBox="0 0 20 20"
+        Sunny
+      </option>
+      <option
+        value="windy"
       >
-        <path
-          d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
-          fill-rule="evenodd"
-        />
-      </svg>
-    </div>
-    <div />
+        Windy
+      </option>
+      <option
+        value="overcast"
+      >
+        Overcast
+      </option>
+    </select>
+    <svg
+      aria-hidden="true"
+      class="c10 c11"
+      focusable="false"
+      viewBox="0 0 20 20"
+    >
+      <path
+        d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
+        fill-rule="evenodd"
+      />
+    </svg>
   </div>
+  <div />
 </div>
 `;
 
 exports[`states renders correctly for a select with state primary 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -4382,7 +3902,7 @@ exports[`states renders correctly for a select with state primary 1`] = `
   color: inherit;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -4396,7 +3916,7 @@ exports[`states renders correctly for a select with state primary 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c8 {
+.c7 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -4410,11 +3930,11 @@ exports[`states renders correctly for a select with state primary 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c8.c8.c8 {
+.c7.c7.c7 {
   position: relative;
 }
 
-.c10 {
+.c9 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -4427,44 +3947,18 @@ exports[`states renders correctly for a select with state primary 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c7 {
+.c6 {
   display: inline-block;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c12 {
+.c11 {
   position: absolute;
   width: 20px;
   height: 20px;
@@ -4476,54 +3970,54 @@ exports[`states renders correctly for a select with state primary 1`] = `
   transform: translateY(50%);
 }
 
-.c13[disabled] + .c11 {
+.c12[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c14[disabled] + .c11 {
+.c13[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c15[disabled] + .c11 {
+.c14[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c15 + .c11 {
+.c14 + .c10 {
   width: 15px;
   height: 15px;
 }
 
-.c16[disabled] + .c11 {
+.c15[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c16 + .c11 {
+.c15 + .c10 {
   width: 25px;
   height: 25px;
 }
 
-.c17[disabled] + .c11 {
+.c16[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c17 + .c11 {
+.c16 + .c10 {
   width: 30px;
   height: 30px;
 }
 
-.c18[disabled] + .c11 {
+.c17[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c19[disabled] + .c11 {
+.c18[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c20[disabled] + .c11 {
+.c19[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c9 {
+.c8 {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -4537,108 +4031,104 @@ exports[`states renders correctly for a select with state primary 1`] = `
   width: 100%;
 }
 
-.c9[disabled] {
+.c8[disabled] {
   background: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c9[disabled] + .c11 {
+.c8[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c9:focus {
+.c8:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c9 {
+.c8 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   display: block;
 }
 
-.c3 {
+.c2 {
   margin-bottom: 0 !important;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="align-items: center;"
   >
-    <div
-      class="c2 c1"
-      style="align-items: center;"
+    <label
+      class="c2 c3 c4 c5"
+      font-weight="600"
+      for="weather"
+      style="font-weight: 600;"
     >
-      <label
-        class="c3 c4 c5 c6"
-        font-weight="600"
-        for="weather"
-        style="font-weight: 600;"
-      >
-        Weather
-      </label>
-    </div>
-    <div />
-    <div
-      class="c7 c8"
+      Weather
+    </label>
+  </div>
+  <div />
+  <div
+    class="c6 c7"
+  >
+    <select
+      aria-invalid="false"
+      aria-required="false"
+      class="c8 c9"
+      id="weather"
+      style="size: default;"
+      type="text"
     >
-      <select
-        aria-invalid="false"
-        aria-required="false"
-        class="c9 c10"
-        id="weather"
-        style="size: default;"
-        type="text"
+      <option
+        value="sunny"
       >
-        <option
-          value="sunny"
-        >
-          Sunny
-        </option>
-        <option
-          value="windy"
-        >
-          Windy
-        </option>
-        <option
-          value="overcast"
-        >
-          Overcast
-        </option>
-      </select>
-      <svg
-        aria-hidden="true"
-        class="c11 c12"
-        focusable="false"
-        viewBox="0 0 20 20"
+        Sunny
+      </option>
+      <option
+        value="windy"
       >
-        <path
-          d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
-          fill-rule="evenodd"
-        />
-      </svg>
-    </div>
-    <div />
+        Windy
+      </option>
+      <option
+        value="overcast"
+      >
+        Overcast
+      </option>
+    </select>
+    <svg
+      aria-hidden="true"
+      class="c10 c11"
+      focusable="false"
+      viewBox="0 0 20 20"
+    >
+      <path
+        d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
+        fill-rule="evenodd"
+      />
+    </svg>
   </div>
+  <div />
 </div>
 `;
 
 exports[`states renders correctly for a select with state success 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -4651,7 +4141,7 @@ exports[`states renders correctly for a select with state success 1`] = `
   color: inherit;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -4665,7 +4155,7 @@ exports[`states renders correctly for a select with state success 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c8 {
+.c7 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -4679,11 +4169,11 @@ exports[`states renders correctly for a select with state success 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c8.c8.c8 {
+.c7.c7.c7 {
   position: relative;
 }
 
-.c10 {
+.c9 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -4696,44 +4186,18 @@ exports[`states renders correctly for a select with state success 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c7 {
+.c6 {
   display: inline-block;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c12 {
+.c11 {
   position: absolute;
   width: 20px;
   height: 20px;
@@ -4745,46 +4209,46 @@ exports[`states renders correctly for a select with state success 1`] = `
   transform: translateY(50%);
 }
 
-.c13[disabled] + .c11 {
+.c12[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c14[disabled] + .c11 {
+.c13[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c15[disabled] + .c11 {
+.c14[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c15 + .c11 {
+.c14 + .c10 {
   width: 15px;
   height: 15px;
 }
 
-.c16[disabled] + .c11 {
+.c15[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c16 + .c11 {
+.c15 + .c10 {
   width: 25px;
   height: 25px;
 }
 
-.c17[disabled] + .c11 {
+.c16[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c17 + .c11 {
+.c16 + .c10 {
   width: 30px;
   height: 30px;
 }
 
-.c18[disabled] + .c11 {
+.c17[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c9 {
+.c8 {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -4798,108 +4262,104 @@ exports[`states renders correctly for a select with state success 1`] = `
   width: 100%;
 }
 
-.c9[disabled] {
+.c8[disabled] {
   background: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c9[disabled] + .c11 {
+.c8[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c9:focus {
+.c8:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c9 {
+.c8 {
   border-color: #4ca26c;
   box-shadow: #4ca26c 0px 0px 0px 1px !important;
 }
 
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   display: block;
 }
 
-.c3 {
+.c2 {
   margin-bottom: 0 !important;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="align-items: center;"
   >
-    <div
-      class="c2 c1"
-      style="align-items: center;"
+    <label
+      class="c2 c3 c4 c5"
+      font-weight="600"
+      for="weather"
+      style="font-weight: 600;"
     >
-      <label
-        class="c3 c4 c5 c6"
-        font-weight="600"
-        for="weather"
-        style="font-weight: 600;"
-      >
-        Weather
-      </label>
-    </div>
-    <div />
-    <div
-      class="c7 c8"
+      Weather
+    </label>
+  </div>
+  <div />
+  <div
+    class="c6 c7"
+  >
+    <select
+      aria-invalid="false"
+      aria-required="false"
+      class="c8 c9"
+      id="weather"
+      style="size: default;"
+      type="text"
     >
-      <select
-        aria-invalid="false"
-        aria-required="false"
-        class="c9 c10"
-        id="weather"
-        style="size: default;"
-        type="text"
+      <option
+        value="sunny"
       >
-        <option
-          value="sunny"
-        >
-          Sunny
-        </option>
-        <option
-          value="windy"
-        >
-          Windy
-        </option>
-        <option
-          value="overcast"
-        >
-          Overcast
-        </option>
-      </select>
-      <svg
-        aria-hidden="true"
-        class="c11 c12"
-        focusable="false"
-        viewBox="0 0 20 20"
+        Sunny
+      </option>
+      <option
+        value="windy"
       >
-        <path
-          d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
-          fill-rule="evenodd"
-        />
-      </svg>
-    </div>
-    <div />
+        Windy
+      </option>
+      <option
+        value="overcast"
+      >
+        Overcast
+      </option>
+    </select>
+    <svg
+      aria-hidden="true"
+      class="c10 c11"
+      focusable="false"
+      viewBox="0 0 20 20"
+    >
+      <path
+        d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
+        fill-rule="evenodd"
+      />
+    </svg>
   </div>
+  <div />
 </div>
 `;
 
 exports[`states renders correctly for a select with state warning 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -4912,7 +4372,7 @@ exports[`states renders correctly for a select with state warning 1`] = `
   color: inherit;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -4926,7 +4386,7 @@ exports[`states renders correctly for a select with state warning 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c8 {
+.c7 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -4940,11 +4400,11 @@ exports[`states renders correctly for a select with state warning 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c8.c8.c8 {
+.c7.c7.c7 {
   position: relative;
 }
 
-.c10 {
+.c9 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -4957,44 +4417,18 @@ exports[`states renders correctly for a select with state warning 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c7 {
+.c6 {
   display: inline-block;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c12 {
+.c11 {
   position: absolute;
   width: 20px;
   height: 20px;
@@ -5006,50 +4440,50 @@ exports[`states renders correctly for a select with state warning 1`] = `
   transform: translateY(50%);
 }
 
-.c13[disabled] + .c11 {
+.c12[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c14[disabled] + .c11 {
+.c13[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c15[disabled] + .c11 {
+.c14[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c15 + .c11 {
+.c14 + .c10 {
   width: 15px;
   height: 15px;
 }
 
-.c16[disabled] + .c11 {
+.c15[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c16 + .c11 {
+.c15 + .c10 {
   width: 25px;
   height: 25px;
 }
 
-.c17[disabled] + .c11 {
+.c16[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c17 + .c11 {
+.c16 + .c10 {
   width: 30px;
   height: 30px;
 }
 
-.c18[disabled] + .c11 {
+.c17[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c19[disabled] + .c11 {
+.c18[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c9 {
+.c8 {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -5063,102 +4497,98 @@ exports[`states renders correctly for a select with state warning 1`] = `
   width: 100%;
 }
 
-.c9[disabled] {
+.c8[disabled] {
   background: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c9[disabled] + .c11 {
+.c8[disabled] + .c10 {
   fill: #8d8d8d;
 }
 
-.c9:focus {
+.c8:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c9 {
+.c8 {
   border-color: #ffc94c;
   box-shadow: #ffc94c 0px 0px 0px 1px !important;
 }
 
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   display: block;
 }
 
-.c3 {
+.c2 {
   margin-bottom: 0 !important;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="align-items: center;"
   >
-    <div
-      class="c2 c1"
-      style="align-items: center;"
+    <label
+      class="c2 c3 c4 c5"
+      font-weight="600"
+      for="weather"
+      style="font-weight: 600;"
     >
-      <label
-        class="c3 c4 c5 c6"
-        font-weight="600"
-        for="weather"
-        style="font-weight: 600;"
-      >
-        Weather
-      </label>
-    </div>
-    <div />
-    <div
-      class="c7 c8"
+      Weather
+    </label>
+  </div>
+  <div />
+  <div
+    class="c6 c7"
+  >
+    <select
+      aria-invalid="false"
+      aria-required="false"
+      class="c8 c9"
+      id="weather"
+      style="size: default;"
+      type="text"
     >
-      <select
-        aria-invalid="false"
-        aria-required="false"
-        class="c9 c10"
-        id="weather"
-        style="size: default;"
-        type="text"
+      <option
+        value="sunny"
       >
-        <option
-          value="sunny"
-        >
-          Sunny
-        </option>
-        <option
-          value="windy"
-        >
-          Windy
-        </option>
-        <option
-          value="overcast"
-        >
-          Overcast
-        </option>
-      </select>
-      <svg
-        aria-hidden="true"
-        class="c11 c12"
-        focusable="false"
-        viewBox="0 0 20 20"
+        Sunny
+      </option>
+      <option
+        value="windy"
       >
-        <path
-          d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
-          fill-rule="evenodd"
-        />
-      </svg>
-    </div>
-    <div />
+        Windy
+      </option>
+      <option
+        value="overcast"
+      >
+        Overcast
+      </option>
+    </select>
+    <svg
+      aria-hidden="true"
+      class="c10 c11"
+      focusable="false"
+      viewBox="0 0 20 20"
+    >
+      <path
+        d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z"
+        fill-rule="evenodd"
+      />
+    </svg>
   </div>
+  <div />
 </div>
 `;
diff --git a/src/Set/__tests__/__snapshots__/Set.test.js.snap b/src/Set/__tests__/__snapshots__/Set.test.js.snap
index 5607bebdd..0e6c9d04c 100644
--- a/src/Set/__tests__/__snapshots__/Set.test.js.snap
+++ b/src/Set/__tests__/__snapshots__/Set.test.js.snap
@@ -15,39 +15,10 @@ exports[`renders correctly for a basic set 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-}
-
-.c2 {
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
@@ -63,24 +34,20 @@ exports[`renders correctly for a basic set 1`] = `
   margin-top: -0.5rem;
 }
 
-.c2 > * {
+.c0 > * {
   margin-left: 0.5rem;
   margin-top: 0.5rem;
 }
 
 <div
   class="c0 c1"
+  spacing="xxsmall"
 >
-  <div
-    class="c2 c3 c1"
-    spacing="xxsmall"
-  >
-    <div>
-      test
-    </div>
-    <div>
-      test
-    </div>
+  <div>
+    test
+  </div>
+  <div>
+    test
   </div>
 </div>
 `;
@@ -100,39 +67,10 @@ exports[`renders correctly for a set with custom spacing 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-}
-
-.c2 {
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
@@ -148,24 +86,20 @@ exports[`renders correctly for a set with custom spacing 1`] = `
   margin-top: -2rem;
 }
 
-.c2 > * {
+.c0 > * {
   margin-left: 2rem;
   margin-top: 2rem;
 }
 
 <div
   class="c0 c1"
+  spacing="large"
 >
-  <div
-    class="c2 c3 c1"
-    spacing="large"
-  >
-    <div>
-      test
-    </div>
-    <div>
-      test
-    </div>
+  <div>
+    test
+  </div>
+  <div>
+    test
   </div>
 </div>
 `;
@@ -185,39 +119,10 @@ exports[`renders correctly for a vertical set 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-}
-
-.c2 {
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
@@ -235,23 +140,19 @@ exports[`renders correctly for a vertical set 1`] = `
   margin-top: -0.5rem;
 }
 
-.c2 > * {
+.c0 > * {
   margin-top: 0.5rem;
 }
 
 <div
   class="c0 c1"
+  spacing="xxsmall"
 >
-  <div
-    class="c2 c3 c1"
-    spacing="xxsmall"
-  >
-    <div>
-      test
-    </div>
-    <div>
-      test
-    </div>
+  <div>
+    test
+  </div>
+  <div>
+    test
   </div>
 </div>
 `;
diff --git a/src/Spinner/__tests__/__snapshots__/Spinner.test.js.snap b/src/Spinner/__tests__/__snapshots__/Spinner.test.js.snap
index 170a21c10..af91a5d24 100644
--- a/src/Spinner/__tests__/__snapshots__/Spinner.test.js.snap
+++ b/src/Spinner/__tests__/__snapshots__/Spinner.test.js.snap
@@ -12,49 +12,10 @@ exports[`renders correctly 1`] = `
   box-sizing: border-box;
   background-color: unset;
   color: inherit;
-}
-
-.c3 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
   color: #3926a5 !important;
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   font-size: 20px;
   -webkit-animation: iVXCSc 0.6s infinite linear;
   animation: iVXCSc 0.6s infinite linear;
@@ -70,13 +31,9 @@ exports[`renders correctly 1`] = `
 
 <div
   class="c0 c1"
->
-  <div
-    class="c2 c3"
-    color="primary"
-    style="size: default;"
-  />
-</div>
+  color="primary"
+  style="size: default;"
+/>
 `;
 
 exports[`renders correctly when a color prop is set 1`] = `
@@ -94,32 +51,6 @@ exports[`renders correctly when a color prop is set 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   font-size: 20px;
   -webkit-animation: iVXCSc 0.6s infinite linear;
   animation: iVXCSc 0.6s infinite linear;
@@ -135,30 +66,13 @@ exports[`renders correctly when a color prop is set 1`] = `
 
 <div
   class="c0 c1"
->
-  <div
-    class="c2 c1"
-    color="red"
-    style="color: red; size: default;"
-  />
-</div>
+  color="red"
+  style="color: red; size: default;"
+/>
 `;
 
 exports[`renders correctly when a palette prop is set 1`] = `
 .c1 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
-}
-
-.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -173,32 +87,6 @@ exports[`renders correctly when a palette prop is set 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   font-size: 20px;
   -webkit-animation: iVXCSc 0.6s infinite linear;
   animation: iVXCSc 0.6s infinite linear;
@@ -214,13 +102,9 @@ exports[`renders correctly when a palette prop is set 1`] = `
 
 <div
   class="c0 c1"
->
-  <div
-    class="c2 c3"
-    color="primary"
-    style="size: default;"
-  />
-</div>
+  color="primary"
+  style="size: default;"
+/>
 `;
 
 exports[`renders correctly when a size prop is set 1`] = `
@@ -235,49 +119,10 @@ exports[`renders correctly when a size prop is set 1`] = `
   box-sizing: border-box;
   background-color: unset;
   color: inherit;
-}
-
-.c3 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
   color: #3926a5 !important;
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   font-size: 20px;
   -webkit-animation: iVXCSc 0.6s infinite linear;
   animation: iVXCSc 0.6s infinite linear;
@@ -291,17 +136,13 @@ exports[`renders correctly when a size prop is set 1`] = `
   position: relative;
 }
 
-.c2 {
+.c0 {
   font-size: 36px;
 }
 
 <div
   class="c0 c1"
->
-  <div
-    class="c2 c3"
-    color="primary"
-    style="size: large;"
-  />
-</div>
+  color="primary"
+  style="size: large;"
+/>
 `;
diff --git a/src/Switch/__tests__/__snapshots__/Switch.test.js.snap b/src/Switch/__tests__/__snapshots__/Switch.test.js.snap
index 1836714e8..ed3c1570c 100644
--- a/src/Switch/__tests__/__snapshots__/Switch.test.js.snap
+++ b/src/Switch/__tests__/__snapshots__/Switch.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`colors renders correctly for an switch with color danger 1`] = `
-.c1 {
+.c2 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -14,7 +14,7 @@ exports[`colors renders correctly for an switch with color danger 1`] = `
   color: inherit;
 }
 
-.c9 {
+.c8 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -28,7 +28,7 @@ exports[`colors renders correctly for an switch with color danger 1`] = `
   margin-left: 0.5rem !important;
 }
 
-.c5 {
+.c4 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -41,44 +41,18 @@ exports[`colors renders correctly for an switch with color danger 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-abbr.c8 {
+abbr.c7 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c8 {
+i.c7 {
   font-style: italic;
 }
 
-kbd.c8 {
+kbd.c7 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -86,50 +60,50 @@ kbd.c8 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c8 {
+mark.c7 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c8 {
+strong.c7 {
   font-weight: bold;
 }
 
-sub.c8,
-sup.c8 {
+sub.c7,
+sup.c7 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c8,
-u.c8 {
+ins.c7,
+u.c7 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c8,
-cite.c8,
-var.c8,
-em.c8 {
+i.c7,
+cite.c7,
+var.c7,
+em.c7 {
   font-style: italic;
 }
 
-kbd.c8,
-pre.c8,
-samp.c8 {
+kbd.c7,
+pre.c7,
+samp.c7 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c8 .c11 {
+.c7 .c10 {
   top: 0.1em;
 }
 
-.c3 {
+.c1 {
   display: inline-block;
 }
 
-.c7 {
+.c6 {
   background-color: #f2f2f2;
   border: 1px solid #bdbdbd;
   border-radius: 1em;
@@ -138,7 +112,7 @@ samp.c8 {
   width: 3em;
 }
 
-.c10 + .c6::before {
+.c9 + .c5::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -152,47 +126,47 @@ samp.c8 {
   position: absolute;
 }
 
-.c10[disabled] + .c6 {
+.c9[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c10[disabled] + .c6::before {
+.c9[disabled] + .c5::before {
   background: #f2f2f2;
 }
 
-.c10:checked:focus + .c6 {
+.c9:checked:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c10:focus + .c6 {
+.c9:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c10:not([disabled]):checked + .c6 {
+.c9:not([disabled]):checked + .c5 {
   border-color: #7467c0;
   background-color: #3926a5;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c10:checked + .c6 {
+.c9:checked + .c5 {
   background-color: #9c92d2;
   border-color: #9c92d2;
 }
 
-.c10:checked + .c6::before {
+.c9:checked + .c5::before {
   border-color: #3926a5;
   left: 1.7em;
 }
 
-.c10[disabled]:checked + .c6::before {
+.c9[disabled]:checked + .c5::before {
   border-color: #9c92d2;
 }
 
-.c4 {
+.c3 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -202,7 +176,7 @@ samp.c8 {
   width: 1px;
 }
 
-.c4 + .c6::before {
+.c3 + .c5::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -216,47 +190,47 @@ samp.c8 {
   position: absolute;
 }
 
-.c4[disabled] + .c6 {
+.c3[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c4[disabled] + .c6::before {
+.c3[disabled] + .c5::before {
   background: #f2f2f2;
 }
 
-.c4:checked:focus + .c6 {
+.c3:checked:focus + .c5 {
   border-color: #e24c67;
   box-shadow: #e24c67 0px 0px 0px 1px !important;
 }
 
-.c4:focus + .c6 {
+.c3:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4:not([disabled]):checked + .c6 {
+.c3:not([disabled]):checked + .c5 {
   border-color: #e24c67;
   background-color: #d60027;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c4:checked + .c6 {
+.c3:checked + .c5 {
   background-color: #ea7f93;
   border-color: #ea7f93;
 }
 
-.c4:checked + .c6::before {
+.c3:checked + .c5::before {
   border-color: #d60027;
   left: 1.7em;
 }
 
-.c4[disabled]:checked + .c6::before {
+.c3[disabled]:checked + .c5::before {
   border-color: #ea7f93;
 }
 
-.c2 {
+.c0 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -268,36 +242,32 @@ samp.c8 {
   display: flex;
 }
 
-<div
-  class="c0 c1"
+<label
+  aria-describedby="label"
+  aria-invalid="false"
+  aria-label="Test"
+  aria-required="false"
+  class="c0 c1 c2"
 >
-  <label
-    aria-describedby="label"
-    aria-invalid="false"
-    aria-label="Test"
-    aria-required="false"
-    class="c2 c3 c1"
+  <input
+    class="c3 c4"
+    type="checkbox"
+    value=""
+  />
+  <div
+    class="c5 c6 c2"
+  />
+  <span
+    class="c7 c8"
+    id="label"
   >
-    <input
-      class="c4 c5"
-      type="checkbox"
-      value=""
-    />
-    <div
-      class="c6 c7 c1"
-    />
-    <span
-      class="c8 c9"
-      id="label"
-    >
-      Test
-    </span>
-  </label>
-</div>
+    Test
+  </span>
+</label>
 `;
 
 exports[`colors renders correctly for an switch with color primary 1`] = `
-.c1 {
+.c2 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -310,7 +280,7 @@ exports[`colors renders correctly for an switch with color primary 1`] = `
   color: inherit;
 }
 
-.c9 {
+.c8 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -324,7 +294,7 @@ exports[`colors renders correctly for an switch with color primary 1`] = `
   margin-left: 0.5rem !important;
 }
 
-.c5 {
+.c4 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -337,44 +307,18 @@ exports[`colors renders correctly for an switch with color primary 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-abbr.c8 {
+abbr.c7 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c8 {
+i.c7 {
   font-style: italic;
 }
 
-kbd.c8 {
+kbd.c7 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -382,50 +326,50 @@ kbd.c8 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c8 {
+mark.c7 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c8 {
+strong.c7 {
   font-weight: bold;
 }
 
-sub.c8,
-sup.c8 {
+sub.c7,
+sup.c7 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c8,
-u.c8 {
+ins.c7,
+u.c7 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c8,
-cite.c8,
-var.c8,
-em.c8 {
+i.c7,
+cite.c7,
+var.c7,
+em.c7 {
   font-style: italic;
 }
 
-kbd.c8,
-pre.c8,
-samp.c8 {
+kbd.c7,
+pre.c7,
+samp.c7 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c8 .c13 {
+.c7 .c12 {
   top: 0.1em;
 }
 
-.c3 {
+.c1 {
   display: inline-block;
 }
 
-.c7 {
+.c6 {
   background-color: #f2f2f2;
   border: 1px solid #bdbdbd;
   border-radius: 1em;
@@ -434,7 +378,7 @@ samp.c8 {
   width: 3em;
 }
 
-.c4 {
+.c3 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -444,7 +388,7 @@ samp.c8 {
   width: 1px;
 }
 
-.c4 + .c6::before {
+.c3 + .c5::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -458,47 +402,47 @@ samp.c8 {
   position: absolute;
 }
 
-.c4[disabled] + .c6 {
+.c3[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c4[disabled] + .c6::before {
+.c3[disabled] + .c5::before {
   background: #f2f2f2;
 }
 
-.c4:checked:focus + .c6 {
+.c3:checked:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4:focus + .c6 {
+.c3:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4:not([disabled]):checked + .c6 {
+.c3:not([disabled]):checked + .c5 {
   border-color: #7467c0;
   background-color: #3926a5;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c4:checked + .c6 {
+.c3:checked + .c5 {
   background-color: #9c92d2;
   border-color: #9c92d2;
 }
 
-.c4:checked + .c6::before {
+.c3:checked + .c5::before {
   border-color: #3926a5;
   left: 1.7em;
 }
 
-.c4[disabled]:checked + .c6::before {
+.c3[disabled]:checked + .c5::before {
   border-color: #9c92d2;
 }
 
-.c10 + .c6::before {
+.c9 + .c5::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -512,47 +456,47 @@ samp.c8 {
   position: absolute;
 }
 
-.c10[disabled] + .c6 {
+.c9[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c10[disabled] + .c6::before {
+.c9[disabled] + .c5::before {
   background: #f2f2f2;
 }
 
-.c10:checked:focus + .c6 {
+.c9:checked:focus + .c5 {
   border-color: #e24c67;
   box-shadow: #e24c67 0px 0px 0px 1px !important;
 }
 
-.c10:focus + .c6 {
+.c9:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c10:not([disabled]):checked + .c6 {
+.c9:not([disabled]):checked + .c5 {
   border-color: #e24c67;
   background-color: #d60027;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c10:checked + .c6 {
+.c9:checked + .c5 {
   background-color: #ea7f93;
   border-color: #ea7f93;
 }
 
-.c10:checked + .c6::before {
+.c9:checked + .c5::before {
   border-color: #d60027;
   left: 1.7em;
 }
 
-.c10[disabled]:checked + .c6::before {
+.c9[disabled]:checked + .c5::before {
   border-color: #ea7f93;
 }
 
-.c11 + .c6::before {
+.c10 + .c5::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -566,47 +510,47 @@ samp.c8 {
   position: absolute;
 }
 
-.c11[disabled] + .c6 {
+.c10[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c11[disabled] + .c6::before {
+.c10[disabled] + .c5::before {
   background: #f2f2f2;
 }
 
-.c11:checked:focus + .c6 {
+.c10:checked:focus + .c5 {
   border-color: #4ca26c;
   box-shadow: #4ca26c 0px 0px 0px 1px !important;
 }
 
-.c11:focus + .c6 {
+.c10:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11:not([disabled]):checked + .c6 {
+.c10:not([disabled]):checked + .c5 {
   border-color: #4ca26c;
   background-color: #007b2e;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c11:checked + .c6 {
+.c10:checked + .c5 {
   background-color: #7fbd96;
   border-color: #7fbd96;
 }
 
-.c11:checked + .c6::before {
+.c10:checked + .c5::before {
   border-color: #007b2e;
   left: 1.7em;
 }
 
-.c11[disabled]:checked + .c6::before {
+.c10[disabled]:checked + .c5::before {
   border-color: #7fbd96;
 }
 
-.c12 + .c6::before {
+.c11 + .c5::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -620,47 +564,47 @@ samp.c8 {
   position: absolute;
 }
 
-.c12[disabled] + .c6 {
+.c11[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c12[disabled] + .c6::before {
+.c11[disabled] + .c5::before {
   background: #f2f2f2;
 }
 
-.c12:checked:focus + .c6 {
+.c11:checked:focus + .c5 {
   border-color: #ffc94c;
   box-shadow: #ffc94c 0px 0px 0px 1px !important;
 }
 
-.c12:focus + .c6 {
+.c11:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c12:not([disabled]):checked + .c6 {
+.c11:not([disabled]):checked + .c5 {
   border-color: #ffc94c;
   background-color: #ffb300;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c12:checked + .c6 {
+.c11:checked + .c5 {
   background-color: #ffd97f;
   border-color: #ffd97f;
 }
 
-.c12:checked + .c6::before {
+.c11:checked + .c5::before {
   border-color: #ffb300;
   left: 1.7em;
 }
 
-.c12[disabled]:checked + .c6::before {
+.c11[disabled]:checked + .c5::before {
   border-color: #ffd97f;
 }
 
-.c2 {
+.c0 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -672,36 +616,32 @@ samp.c8 {
   display: flex;
 }
 
-<div
-  class="c0 c1"
+<label
+  aria-describedby="label"
+  aria-invalid="false"
+  aria-label="Test"
+  aria-required="false"
+  class="c0 c1 c2"
 >
-  <label
-    aria-describedby="label"
-    aria-invalid="false"
-    aria-label="Test"
-    aria-required="false"
-    class="c2 c3 c1"
+  <input
+    class="c3 c4"
+    type="checkbox"
+    value=""
+  />
+  <div
+    class="c5 c6 c2"
+  />
+  <span
+    class="c7 c8"
+    id="label"
   >
-    <input
-      class="c4 c5"
-      type="checkbox"
-      value=""
-    />
-    <div
-      class="c6 c7 c1"
-    />
-    <span
-      class="c8 c9"
-      id="label"
-    >
-      Test
-    </span>
-  </label>
-</div>
+    Test
+  </span>
+</label>
 `;
 
 exports[`colors renders correctly for an switch with color success 1`] = `
-.c1 {
+.c2 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -714,7 +654,7 @@ exports[`colors renders correctly for an switch with color success 1`] = `
   color: inherit;
 }
 
-.c9 {
+.c8 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -728,7 +668,7 @@ exports[`colors renders correctly for an switch with color success 1`] = `
   margin-left: 0.5rem !important;
 }
 
-.c5 {
+.c4 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -741,44 +681,18 @@ exports[`colors renders correctly for an switch with color success 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-abbr.c8 {
+abbr.c7 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c8 {
+i.c7 {
   font-style: italic;
 }
 
-kbd.c8 {
+kbd.c7 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -786,50 +700,50 @@ kbd.c8 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c8 {
+mark.c7 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c8 {
+strong.c7 {
   font-weight: bold;
 }
 
-sub.c8,
-sup.c8 {
+sub.c7,
+sup.c7 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c8,
-u.c8 {
+ins.c7,
+u.c7 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c8,
-cite.c8,
-var.c8,
-em.c8 {
+i.c7,
+cite.c7,
+var.c7,
+em.c7 {
   font-style: italic;
 }
 
-kbd.c8,
-pre.c8,
-samp.c8 {
+kbd.c7,
+pre.c7,
+samp.c7 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c8 .c12 {
+.c7 .c11 {
   top: 0.1em;
 }
 
-.c3 {
+.c1 {
   display: inline-block;
 }
 
-.c7 {
+.c6 {
   background-color: #f2f2f2;
   border: 1px solid #bdbdbd;
   border-radius: 1em;
@@ -838,7 +752,7 @@ samp.c8 {
   width: 3em;
 }
 
-.c10 + .c6::before {
+.c9 + .c5::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -852,47 +766,47 @@ samp.c8 {
   position: absolute;
 }
 
-.c10[disabled] + .c6 {
+.c9[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c10[disabled] + .c6::before {
+.c9[disabled] + .c5::before {
   background: #f2f2f2;
 }
 
-.c10:checked:focus + .c6 {
+.c9:checked:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c10:focus + .c6 {
+.c9:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c10:not([disabled]):checked + .c6 {
+.c9:not([disabled]):checked + .c5 {
   border-color: #7467c0;
   background-color: #3926a5;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c10:checked + .c6 {
+.c9:checked + .c5 {
   background-color: #9c92d2;
   border-color: #9c92d2;
 }
 
-.c10:checked + .c6::before {
+.c9:checked + .c5::before {
   border-color: #3926a5;
   left: 1.7em;
 }
 
-.c10[disabled]:checked + .c6::before {
+.c9[disabled]:checked + .c5::before {
   border-color: #9c92d2;
 }
 
-.c11 + .c6::before {
+.c10 + .c5::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -906,47 +820,47 @@ samp.c8 {
   position: absolute;
 }
 
-.c11[disabled] + .c6 {
+.c10[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c11[disabled] + .c6::before {
+.c10[disabled] + .c5::before {
   background: #f2f2f2;
 }
 
-.c11:checked:focus + .c6 {
+.c10:checked:focus + .c5 {
   border-color: #e24c67;
   box-shadow: #e24c67 0px 0px 0px 1px !important;
 }
 
-.c11:focus + .c6 {
+.c10:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11:not([disabled]):checked + .c6 {
+.c10:not([disabled]):checked + .c5 {
   border-color: #e24c67;
   background-color: #d60027;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c11:checked + .c6 {
+.c10:checked + .c5 {
   background-color: #ea7f93;
   border-color: #ea7f93;
 }
 
-.c11:checked + .c6::before {
+.c10:checked + .c5::before {
   border-color: #d60027;
   left: 1.7em;
 }
 
-.c11[disabled]:checked + .c6::before {
+.c10[disabled]:checked + .c5::before {
   border-color: #ea7f93;
 }
 
-.c4 {
+.c3 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -956,7 +870,7 @@ samp.c8 {
   width: 1px;
 }
 
-.c4 + .c6::before {
+.c3 + .c5::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -970,47 +884,47 @@ samp.c8 {
   position: absolute;
 }
 
-.c4[disabled] + .c6 {
+.c3[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c4[disabled] + .c6::before {
+.c3[disabled] + .c5::before {
   background: #f2f2f2;
 }
 
-.c4:checked:focus + .c6 {
+.c3:checked:focus + .c5 {
   border-color: #4ca26c;
   box-shadow: #4ca26c 0px 0px 0px 1px !important;
 }
 
-.c4:focus + .c6 {
+.c3:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4:not([disabled]):checked + .c6 {
+.c3:not([disabled]):checked + .c5 {
   border-color: #4ca26c;
   background-color: #007b2e;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c4:checked + .c6 {
+.c3:checked + .c5 {
   background-color: #7fbd96;
   border-color: #7fbd96;
 }
 
-.c4:checked + .c6::before {
+.c3:checked + .c5::before {
   border-color: #007b2e;
   left: 1.7em;
 }
 
-.c4[disabled]:checked + .c6::before {
+.c3[disabled]:checked + .c5::before {
   border-color: #7fbd96;
 }
 
-.c2 {
+.c0 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1022,36 +936,32 @@ samp.c8 {
   display: flex;
 }
 
-<div
-  class="c0 c1"
+<label
+  aria-describedby="label"
+  aria-invalid="false"
+  aria-label="Test"
+  aria-required="false"
+  class="c0 c1 c2"
 >
-  <label
-    aria-describedby="label"
-    aria-invalid="false"
-    aria-label="Test"
-    aria-required="false"
-    class="c2 c3 c1"
+  <input
+    class="c3 c4"
+    type="checkbox"
+    value=""
+  />
+  <div
+    class="c5 c6 c2"
+  />
+  <span
+    class="c7 c8"
+    id="label"
   >
-    <input
-      class="c4 c5"
-      type="checkbox"
-      value=""
-    />
-    <div
-      class="c6 c7 c1"
-    />
-    <span
-      class="c8 c9"
-      id="label"
-    >
-      Test
-    </span>
-  </label>
-</div>
+    Test
+  </span>
+</label>
 `;
 
 exports[`colors renders correctly for an switch with color warning 1`] = `
-.c1 {
+.c2 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1064,7 +974,7 @@ exports[`colors renders correctly for an switch with color warning 1`] = `
   color: inherit;
 }
 
-.c9 {
+.c8 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1078,7 +988,7 @@ exports[`colors renders correctly for an switch with color warning 1`] = `
   margin-left: 0.5rem !important;
 }
 
-.c5 {
+.c4 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1091,44 +1001,18 @@ exports[`colors renders correctly for an switch with color warning 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-abbr.c8 {
+abbr.c7 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c8 {
+i.c7 {
   font-style: italic;
 }
 
-kbd.c8 {
+kbd.c7 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -1136,50 +1020,50 @@ kbd.c8 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c8 {
+mark.c7 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c8 {
+strong.c7 {
   font-weight: bold;
 }
 
-sub.c8,
-sup.c8 {
+sub.c7,
+sup.c7 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c8,
-u.c8 {
+ins.c7,
+u.c7 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c8,
-cite.c8,
-var.c8,
-em.c8 {
+i.c7,
+cite.c7,
+var.c7,
+em.c7 {
   font-style: italic;
 }
 
-kbd.c8,
-pre.c8,
-samp.c8 {
+kbd.c7,
+pre.c7,
+samp.c7 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c8 .c13 {
+.c7 .c12 {
   top: 0.1em;
 }
 
-.c3 {
+.c1 {
   display: inline-block;
 }
 
-.c7 {
+.c6 {
   background-color: #f2f2f2;
   border: 1px solid #bdbdbd;
   border-radius: 1em;
@@ -1188,7 +1072,7 @@ samp.c8 {
   width: 3em;
 }
 
-.c10 + .c6::before {
+.c9 + .c5::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -1202,47 +1086,47 @@ samp.c8 {
   position: absolute;
 }
 
-.c10[disabled] + .c6 {
+.c9[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c10[disabled] + .c6::before {
+.c9[disabled] + .c5::before {
   background: #f2f2f2;
 }
 
-.c10:checked:focus + .c6 {
+.c9:checked:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c10:focus + .c6 {
+.c9:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c10:not([disabled]):checked + .c6 {
+.c9:not([disabled]):checked + .c5 {
   border-color: #7467c0;
   background-color: #3926a5;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c10:checked + .c6 {
+.c9:checked + .c5 {
   background-color: #9c92d2;
   border-color: #9c92d2;
 }
 
-.c10:checked + .c6::before {
+.c9:checked + .c5::before {
   border-color: #3926a5;
   left: 1.7em;
 }
 
-.c10[disabled]:checked + .c6::before {
+.c9[disabled]:checked + .c5::before {
   border-color: #9c92d2;
 }
 
-.c11 + .c6::before {
+.c10 + .c5::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -1256,47 +1140,47 @@ samp.c8 {
   position: absolute;
 }
 
-.c11[disabled] + .c6 {
+.c10[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c11[disabled] + .c6::before {
+.c10[disabled] + .c5::before {
   background: #f2f2f2;
 }
 
-.c11:checked:focus + .c6 {
+.c10:checked:focus + .c5 {
   border-color: #e24c67;
   box-shadow: #e24c67 0px 0px 0px 1px !important;
 }
 
-.c11:focus + .c6 {
+.c10:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11:not([disabled]):checked + .c6 {
+.c10:not([disabled]):checked + .c5 {
   border-color: #e24c67;
   background-color: #d60027;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c11:checked + .c6 {
+.c10:checked + .c5 {
   background-color: #ea7f93;
   border-color: #ea7f93;
 }
 
-.c11:checked + .c6::before {
+.c10:checked + .c5::before {
   border-color: #d60027;
   left: 1.7em;
 }
 
-.c11[disabled]:checked + .c6::before {
+.c10[disabled]:checked + .c5::before {
   border-color: #ea7f93;
 }
 
-.c12 + .c6::before {
+.c11 + .c5::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -1310,47 +1194,47 @@ samp.c8 {
   position: absolute;
 }
 
-.c12[disabled] + .c6 {
+.c11[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c12[disabled] + .c6::before {
+.c11[disabled] + .c5::before {
   background: #f2f2f2;
 }
 
-.c12:checked:focus + .c6 {
+.c11:checked:focus + .c5 {
   border-color: #4ca26c;
   box-shadow: #4ca26c 0px 0px 0px 1px !important;
 }
 
-.c12:focus + .c6 {
+.c11:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c12:not([disabled]):checked + .c6 {
+.c11:not([disabled]):checked + .c5 {
   border-color: #4ca26c;
   background-color: #007b2e;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c12:checked + .c6 {
+.c11:checked + .c5 {
   background-color: #7fbd96;
   border-color: #7fbd96;
 }
 
-.c12:checked + .c6::before {
+.c11:checked + .c5::before {
   border-color: #007b2e;
   left: 1.7em;
 }
 
-.c12[disabled]:checked + .c6::before {
+.c11[disabled]:checked + .c5::before {
   border-color: #7fbd96;
 }
 
-.c4 {
+.c3 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -1360,7 +1244,7 @@ samp.c8 {
   width: 1px;
 }
 
-.c4 + .c6::before {
+.c3 + .c5::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -1374,47 +1258,47 @@ samp.c8 {
   position: absolute;
 }
 
-.c4[disabled] + .c6 {
+.c3[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c4[disabled] + .c6::before {
+.c3[disabled] + .c5::before {
   background: #f2f2f2;
 }
 
-.c4:checked:focus + .c6 {
+.c3:checked:focus + .c5 {
   border-color: #ffc94c;
   box-shadow: #ffc94c 0px 0px 0px 1px !important;
 }
 
-.c4:focus + .c6 {
+.c3:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4:not([disabled]):checked + .c6 {
+.c3:not([disabled]):checked + .c5 {
   border-color: #ffc94c;
   background-color: #ffb300;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c4:checked + .c6 {
+.c3:checked + .c5 {
   background-color: #ffd97f;
   border-color: #ffd97f;
 }
 
-.c4:checked + .c6::before {
+.c3:checked + .c5::before {
   border-color: #ffb300;
   left: 1.7em;
 }
 
-.c4[disabled]:checked + .c6::before {
+.c3[disabled]:checked + .c5::before {
   border-color: #ffd97f;
 }
 
-.c2 {
+.c0 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1426,36 +1310,32 @@ samp.c8 {
   display: flex;
 }
 
-<div
-  class="c0 c1"
+<label
+  aria-describedby="label"
+  aria-invalid="false"
+  aria-label="Test"
+  aria-required="false"
+  class="c0 c1 c2"
 >
-  <label
-    aria-describedby="label"
-    aria-invalid="false"
-    aria-label="Test"
-    aria-required="false"
-    class="c2 c3 c1"
+  <input
+    class="c3 c4"
+    type="checkbox"
+    value=""
+  />
+  <div
+    class="c5 c6 c2"
+  />
+  <span
+    class="c7 c8"
+    id="label"
   >
-    <input
-      class="c4 c5"
-      type="checkbox"
-      value=""
-    />
-    <div
-      class="c6 c7 c1"
-    />
-    <span
-      class="c8 c9"
-      id="label"
-    >
-      Test
-    </span>
-  </label>
-</div>
+    Test
+  </span>
+</label>
 `;
 
 exports[`renders correctly for a basic switch 1`] = `
-.c1 {
+.c2 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1468,7 +1348,7 @@ exports[`renders correctly for a basic switch 1`] = `
   color: inherit;
 }
 
-.c5 {
+.c4 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1481,7 +1361,7 @@ exports[`renders correctly for a basic switch 1`] = `
   color: inherit;
 }
 
-.c9 {
+.c8 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1495,44 +1375,18 @@ exports[`renders correctly for a basic switch 1`] = `
   margin-left: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-abbr.c8 {
+abbr.c7 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c8 {
+i.c7 {
   font-style: italic;
 }
 
-kbd.c8 {
+kbd.c7 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -1540,50 +1394,50 @@ kbd.c8 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c8 {
+mark.c7 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c8 {
+strong.c7 {
   font-weight: bold;
 }
 
-sub.c8,
-sup.c8 {
+sub.c7,
+sup.c7 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c8,
-u.c8 {
+ins.c7,
+u.c7 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c8,
-cite.c8,
-var.c8,
-em.c8 {
+i.c7,
+cite.c7,
+var.c7,
+em.c7 {
   font-style: italic;
 }
 
-kbd.c8,
-pre.c8,
-samp.c8 {
+kbd.c7,
+pre.c7,
+samp.c7 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c8 .c10 {
+.c7 .c9 {
   top: 0.1em;
 }
 
-.c3 {
+.c1 {
   display: inline-block;
 }
 
-.c7 {
+.c6 {
   background-color: #f2f2f2;
   border: 1px solid #bdbdbd;
   border-radius: 1em;
@@ -1592,7 +1446,7 @@ samp.c8 {
   width: 3em;
 }
 
-.c4 {
+.c3 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -1602,7 +1456,7 @@ samp.c8 {
   width: 1px;
 }
 
-.c4 + .c6::before {
+.c3 + .c5::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -1616,47 +1470,47 @@ samp.c8 {
   position: absolute;
 }
 
-.c4[disabled] + .c6 {
+.c3[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c4[disabled] + .c6::before {
+.c3[disabled] + .c5::before {
   background: #f2f2f2;
 }
 
-.c4:checked:focus + .c6 {
+.c3:checked:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4:focus + .c6 {
+.c3:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4:not([disabled]):checked + .c6 {
+.c3:not([disabled]):checked + .c5 {
   border-color: #7467c0;
   background-color: #3926a5;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c4:checked + .c6 {
+.c3:checked + .c5 {
   background-color: #9c92d2;
   border-color: #9c92d2;
 }
 
-.c4:checked + .c6::before {
+.c3:checked + .c5::before {
   border-color: #3926a5;
   left: 1.7em;
 }
 
-.c4[disabled]:checked + .c6::before {
+.c3[disabled]:checked + .c5::before {
   border-color: #9c92d2;
 }
 
-.c2 {
+.c0 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1668,36 +1522,32 @@ samp.c8 {
   display: flex;
 }
 
-<div
-  class="c0 c1"
+<label
+  aria-describedby="label"
+  aria-invalid="false"
+  aria-label="Test"
+  aria-required="false"
+  class="c0 c1 c2"
 >
-  <label
-    aria-describedby="label"
-    aria-invalid="false"
-    aria-label="Test"
-    aria-required="false"
-    class="c2 c3 c1"
+  <input
+    class="c3 c4"
+    type="checkbox"
+    value=""
+  />
+  <div
+    class="c5 c6 c2"
+  />
+  <span
+    class="c7 c8"
+    id="label"
   >
-    <input
-      class="c4 c5"
-      type="checkbox"
-      value=""
-    />
-    <div
-      class="c6 c7 c1"
-    />
-    <span
-      class="c8 c9"
-      id="label"
-    >
-      Test
-    </span>
-  </label>
-</div>
+    Test
+  </span>
+</label>
 `;
 
 exports[`renders correctly for a disabled switch 1`] = `
-.c1 {
+.c2 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1710,7 +1560,7 @@ exports[`renders correctly for a disabled switch 1`] = `
   color: inherit;
 }
 
-.c5 {
+.c4 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1723,7 +1573,7 @@ exports[`renders correctly for a disabled switch 1`] = `
   color: inherit;
 }
 
-.c9 {
+.c8 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1737,44 +1587,18 @@ exports[`renders correctly for a disabled switch 1`] = `
   margin-left: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-abbr.c8 {
+abbr.c7 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c8 {
+i.c7 {
   font-style: italic;
 }
 
-kbd.c8 {
+kbd.c7 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -1782,50 +1606,50 @@ kbd.c8 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c8 {
+mark.c7 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c8 {
+strong.c7 {
   font-weight: bold;
 }
 
-sub.c8,
-sup.c8 {
+sub.c7,
+sup.c7 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c8,
-u.c8 {
+ins.c7,
+u.c7 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c8,
-cite.c8,
-var.c8,
-em.c8 {
+i.c7,
+cite.c7,
+var.c7,
+em.c7 {
   font-style: italic;
 }
 
-kbd.c8,
-pre.c8,
-samp.c8 {
+kbd.c7,
+pre.c7,
+samp.c7 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c8 .c10 {
+.c7 .c9 {
   top: 0.1em;
 }
 
-.c3 {
+.c1 {
   display: inline-block;
 }
 
-.c7 {
+.c6 {
   background-color: #f2f2f2;
   border: 1px solid #bdbdbd;
   border-radius: 1em;
@@ -1834,7 +1658,7 @@ samp.c8 {
   width: 3em;
 }
 
-.c4 {
+.c3 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -1844,7 +1668,7 @@ samp.c8 {
   width: 1px;
 }
 
-.c4 + .c6::before {
+.c3 + .c5::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -1858,47 +1682,47 @@ samp.c8 {
   position: absolute;
 }
 
-.c4[disabled] + .c6 {
+.c3[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c4[disabled] + .c6::before {
+.c3[disabled] + .c5::before {
   background: #f2f2f2;
 }
 
-.c4:checked:focus + .c6 {
+.c3:checked:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4:focus + .c6 {
+.c3:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4:not([disabled]):checked + .c6 {
+.c3:not([disabled]):checked + .c5 {
   border-color: #7467c0;
   background-color: #3926a5;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c4:checked + .c6 {
+.c3:checked + .c5 {
   background-color: #9c92d2;
   border-color: #9c92d2;
 }
 
-.c4:checked + .c6::before {
+.c3:checked + .c5::before {
   border-color: #3926a5;
   left: 1.7em;
 }
 
-.c4[disabled]:checked + .c6::before {
+.c3[disabled]:checked + .c5::before {
   border-color: #9c92d2;
 }
 
-.c2 {
+.c0 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1910,38 +1734,34 @@ samp.c8 {
   display: flex;
 }
 
-<div
-  class="c0 c1"
+<label
+  aria-describedby="label"
+  aria-invalid="false"
+  aria-label="Test"
+  aria-required="false"
+  class="c0 c1 c2"
+  disabled=""
 >
-  <label
-    aria-describedby="label"
-    aria-invalid="false"
-    aria-label="Test"
-    aria-required="false"
-    class="c2 c3 c1"
+  <input
+    class="c3 c4"
     disabled=""
+    type="checkbox"
+    value=""
+  />
+  <div
+    class="c5 c6 c2"
+  />
+  <span
+    class="c7 c8"
+    id="label"
   >
-    <input
-      class="c4 c5"
-      disabled=""
-      type="checkbox"
-      value=""
-    />
-    <div
-      class="c6 c7 c1"
-    />
-    <span
-      class="c8 c9"
-      id="label"
-    >
-      Test
-    </span>
-  </label>
-</div>
+    Test
+  </span>
+</label>
 `;
 
 exports[`states renders correctly for an switch with state danger 1`] = `
-.c1 {
+.c2 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1954,7 +1774,7 @@ exports[`states renders correctly for an switch with state danger 1`] = `
   color: inherit;
 }
 
-.c5 {
+.c4 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1967,7 +1787,7 @@ exports[`states renders correctly for an switch with state danger 1`] = `
   color: inherit;
 }
 
-.c9 {
+.c8 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1981,44 +1801,18 @@ exports[`states renders correctly for an switch with state danger 1`] = `
   margin-left: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-abbr.c8 {
+abbr.c7 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c8 {
+i.c7 {
   font-style: italic;
 }
 
-kbd.c8 {
+kbd.c7 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -2026,50 +1820,50 @@ kbd.c8 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c8 {
+mark.c7 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c8 {
+strong.c7 {
   font-weight: bold;
 }
 
-sub.c8,
-sup.c8 {
+sub.c7,
+sup.c7 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c8,
-u.c8 {
+ins.c7,
+u.c7 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c8,
-cite.c8,
-var.c8,
-em.c8 {
+i.c7,
+cite.c7,
+var.c7,
+em.c7 {
   font-style: italic;
 }
 
-kbd.c8,
-pre.c8,
-samp.c8 {
+kbd.c7,
+pre.c7,
+samp.c7 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c8 .c14 {
+.c7 .c13 {
   top: 0.1em;
 }
 
-.c3 {
+.c1 {
   display: inline-block;
 }
 
-.c7 {
+.c6 {
   background-color: #f2f2f2;
   border: 1px solid #bdbdbd;
   border-radius: 1em;
@@ -2078,12 +1872,12 @@ samp.c8 {
   width: 3em;
 }
 
-.c7 {
+.c6 {
   border-color: #e24c67;
   box-shadow: #e24c67 0px 0px 0px 1px !important;
 }
 
-.c10 + .c6::before {
+.c9 + .c5::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -2097,47 +1891,47 @@ samp.c8 {
   position: absolute;
 }
 
-.c10[disabled] + .c6 {
+.c9[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c10[disabled] + .c6::before {
+.c9[disabled] + .c5::before {
   background: #f2f2f2;
 }
 
-.c10:checked:focus + .c6 {
+.c9:checked:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c10:focus + .c6 {
+.c9:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c10:not([disabled]):checked + .c6 {
+.c9:not([disabled]):checked + .c5 {
   border-color: #7467c0;
   background-color: #3926a5;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c10:checked + .c6 {
+.c9:checked + .c5 {
   background-color: #9c92d2;
   border-color: #9c92d2;
 }
 
-.c10:checked + .c6::before {
+.c9:checked + .c5::before {
   border-color: #3926a5;
   left: 1.7em;
 }
 
-.c10[disabled]:checked + .c6::before {
+.c9[disabled]:checked + .c5::before {
   border-color: #9c92d2;
 }
 
-.c11 + .c6::before {
+.c10 + .c5::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -2151,47 +1945,47 @@ samp.c8 {
   position: absolute;
 }
 
-.c11[disabled] + .c6 {
+.c10[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c11[disabled] + .c6::before {
+.c10[disabled] + .c5::before {
   background: #f2f2f2;
 }
 
-.c11:checked:focus + .c6 {
+.c10:checked:focus + .c5 {
   border-color: #e24c67;
   box-shadow: #e24c67 0px 0px 0px 1px !important;
 }
 
-.c11:focus + .c6 {
+.c10:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11:not([disabled]):checked + .c6 {
+.c10:not([disabled]):checked + .c5 {
   border-color: #e24c67;
   background-color: #d60027;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c11:checked + .c6 {
+.c10:checked + .c5 {
   background-color: #ea7f93;
   border-color: #ea7f93;
 }
 
-.c11:checked + .c6::before {
+.c10:checked + .c5::before {
   border-color: #d60027;
   left: 1.7em;
 }
 
-.c11[disabled]:checked + .c6::before {
+.c10[disabled]:checked + .c5::before {
   border-color: #ea7f93;
 }
 
-.c12 + .c6::before {
+.c11 + .c5::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -2205,47 +1999,47 @@ samp.c8 {
   position: absolute;
 }
 
-.c12[disabled] + .c6 {
+.c11[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c12[disabled] + .c6::before {
+.c11[disabled] + .c5::before {
   background: #f2f2f2;
 }
 
-.c12:checked:focus + .c6 {
+.c11:checked:focus + .c5 {
   border-color: #4ca26c;
   box-shadow: #4ca26c 0px 0px 0px 1px !important;
 }
 
-.c12:focus + .c6 {
+.c11:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c12:not([disabled]):checked + .c6 {
+.c11:not([disabled]):checked + .c5 {
   border-color: #4ca26c;
   background-color: #007b2e;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c12:checked + .c6 {
+.c11:checked + .c5 {
   background-color: #7fbd96;
   border-color: #7fbd96;
 }
 
-.c12:checked + .c6::before {
+.c11:checked + .c5::before {
   border-color: #007b2e;
   left: 1.7em;
 }
 
-.c12[disabled]:checked + .c6::before {
+.c11[disabled]:checked + .c5::before {
   border-color: #7fbd96;
 }
 
-.c13 + .c6::before {
+.c12 + .c5::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -2259,47 +2053,47 @@ samp.c8 {
   position: absolute;
 }
 
-.c13[disabled] + .c6 {
+.c12[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c13[disabled] + .c6::before {
+.c12[disabled] + .c5::before {
   background: #f2f2f2;
 }
 
-.c13:checked:focus + .c6 {
+.c12:checked:focus + .c5 {
   border-color: #ffc94c;
   box-shadow: #ffc94c 0px 0px 0px 1px !important;
 }
 
-.c13:focus + .c6 {
+.c12:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c13:not([disabled]):checked + .c6 {
+.c12:not([disabled]):checked + .c5 {
   border-color: #ffc94c;
   background-color: #ffb300;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c13:checked + .c6 {
+.c12:checked + .c5 {
   background-color: #ffd97f;
   border-color: #ffd97f;
 }
 
-.c13:checked + .c6::before {
+.c12:checked + .c5::before {
   border-color: #ffb300;
   left: 1.7em;
 }
 
-.c13[disabled]:checked + .c6::before {
+.c12[disabled]:checked + .c5::before {
   border-color: #ffd97f;
 }
 
-.c4 {
+.c3 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -2309,7 +2103,7 @@ samp.c8 {
   width: 1px;
 }
 
-.c4 + .c6::before {
+.c3 + .c5::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -2323,51 +2117,51 @@ samp.c8 {
   position: absolute;
 }
 
-.c4[disabled] + .c6 {
+.c3[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c4[disabled] + .c6::before {
+.c3[disabled] + .c5::before {
   background: #f2f2f2;
 }
 
-.c4:checked:focus + .c6 {
+.c3:checked:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4:focus + .c6 {
+.c3:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4:not([disabled]):checked + .c6 {
+.c3:not([disabled]):checked + .c5 {
   border-color: #7467c0;
   background-color: #3926a5;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c4:checked + .c6 {
+.c3:checked + .c5 {
   background-color: #9c92d2;
   border-color: #9c92d2;
 }
 
-.c4:checked + .c6 {
+.c3:checked + .c5 {
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4:checked + .c6::before {
+.c3:checked + .c5::before {
   border-color: #3926a5;
   left: 1.7em;
 }
 
-.c4[disabled]:checked + .c6::before {
+.c3[disabled]:checked + .c5::before {
   border-color: #9c92d2;
 }
 
-.c2 {
+.c0 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -2379,36 +2173,32 @@ samp.c8 {
   display: flex;
 }
 
-<div
-  class="c0 c1"
+<label
+  aria-describedby="label"
+  aria-invalid="true"
+  aria-label="Test"
+  aria-required="false"
+  class="c0 c1 c2"
 >
-  <label
-    aria-describedby="label"
-    aria-invalid="true"
-    aria-label="Test"
-    aria-required="false"
-    class="c2 c3 c1"
+  <input
+    class="c3 c4"
+    type="checkbox"
+    value=""
+  />
+  <div
+    class="c5 c6 c2"
+  />
+  <span
+    class="c7 c8"
+    id="label"
   >
-    <input
-      class="c4 c5"
-      type="checkbox"
-      value=""
-    />
-    <div
-      class="c6 c7 c1"
-    />
-    <span
-      class="c8 c9"
-      id="label"
-    >
-      Test
-    </span>
-  </label>
-</div>
+    Test
+  </span>
+</label>
 `;
 
 exports[`states renders correctly for an switch with state primary 1`] = `
-.c1 {
+.c2 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2421,7 +2211,7 @@ exports[`states renders correctly for an switch with state primary 1`] = `
   color: inherit;
 }
 
-.c5 {
+.c4 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2434,7 +2224,7 @@ exports[`states renders correctly for an switch with state primary 1`] = `
   color: inherit;
 }
 
-.c9 {
+.c8 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2448,44 +2238,18 @@ exports[`states renders correctly for an switch with state primary 1`] = `
   margin-left: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-abbr.c8 {
+abbr.c7 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c8 {
+i.c7 {
   font-style: italic;
 }
 
-kbd.c8 {
+kbd.c7 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -2493,50 +2257,50 @@ kbd.c8 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c8 {
+mark.c7 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c8 {
+strong.c7 {
   font-weight: bold;
 }
 
-sub.c8,
-sup.c8 {
+sub.c7,
+sup.c7 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c8,
-u.c8 {
+ins.c7,
+u.c7 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c8,
-cite.c8,
-var.c8,
-em.c8 {
+i.c7,
+cite.c7,
+var.c7,
+em.c7 {
   font-style: italic;
 }
 
-kbd.c8,
-pre.c8,
-samp.c8 {
+kbd.c7,
+pre.c7,
+samp.c7 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c8 .c14 {
+.c7 .c13 {
   top: 0.1em;
 }
 
-.c3 {
+.c1 {
   display: inline-block;
 }
 
-.c7 {
+.c6 {
   background-color: #f2f2f2;
   border: 1px solid #bdbdbd;
   border-radius: 1em;
@@ -2545,12 +2309,12 @@ samp.c8 {
   width: 3em;
 }
 
-.c7 {
+.c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c10 + .c6::before {
+.c9 + .c5::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -2564,47 +2328,47 @@ samp.c8 {
   position: absolute;
 }
 
-.c10[disabled] + .c6 {
+.c9[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c10[disabled] + .c6::before {
+.c9[disabled] + .c5::before {
   background: #f2f2f2;
 }
 
-.c10:checked:focus + .c6 {
+.c9:checked:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c10:focus + .c6 {
+.c9:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c10:not([disabled]):checked + .c6 {
+.c9:not([disabled]):checked + .c5 {
   border-color: #7467c0;
   background-color: #3926a5;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c10:checked + .c6 {
+.c9:checked + .c5 {
   background-color: #9c92d2;
   border-color: #9c92d2;
 }
 
-.c10:checked + .c6::before {
+.c9:checked + .c5::before {
   border-color: #3926a5;
   left: 1.7em;
 }
 
-.c10[disabled]:checked + .c6::before {
+.c9[disabled]:checked + .c5::before {
   border-color: #9c92d2;
 }
 
-.c11 + .c6::before {
+.c10 + .c5::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -2618,47 +2382,47 @@ samp.c8 {
   position: absolute;
 }
 
-.c11[disabled] + .c6 {
+.c10[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c11[disabled] + .c6::before {
+.c10[disabled] + .c5::before {
   background: #f2f2f2;
 }
 
-.c11:checked:focus + .c6 {
+.c10:checked:focus + .c5 {
   border-color: #e24c67;
   box-shadow: #e24c67 0px 0px 0px 1px !important;
 }
 
-.c11:focus + .c6 {
+.c10:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11:not([disabled]):checked + .c6 {
+.c10:not([disabled]):checked + .c5 {
   border-color: #e24c67;
   background-color: #d60027;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c11:checked + .c6 {
+.c10:checked + .c5 {
   background-color: #ea7f93;
   border-color: #ea7f93;
 }
 
-.c11:checked + .c6::before {
+.c10:checked + .c5::before {
   border-color: #d60027;
   left: 1.7em;
 }
 
-.c11[disabled]:checked + .c6::before {
+.c10[disabled]:checked + .c5::before {
   border-color: #ea7f93;
 }
 
-.c12 + .c6::before {
+.c11 + .c5::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -2672,47 +2436,47 @@ samp.c8 {
   position: absolute;
 }
 
-.c12[disabled] + .c6 {
+.c11[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c12[disabled] + .c6::before {
+.c11[disabled] + .c5::before {
   background: #f2f2f2;
 }
 
-.c12:checked:focus + .c6 {
+.c11:checked:focus + .c5 {
   border-color: #4ca26c;
   box-shadow: #4ca26c 0px 0px 0px 1px !important;
 }
 
-.c12:focus + .c6 {
+.c11:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c12:not([disabled]):checked + .c6 {
+.c11:not([disabled]):checked + .c5 {
   border-color: #4ca26c;
   background-color: #007b2e;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c12:checked + .c6 {
+.c11:checked + .c5 {
   background-color: #7fbd96;
   border-color: #7fbd96;
 }
 
-.c12:checked + .c6::before {
+.c11:checked + .c5::before {
   border-color: #007b2e;
   left: 1.7em;
 }
 
-.c12[disabled]:checked + .c6::before {
+.c11[disabled]:checked + .c5::before {
   border-color: #7fbd96;
 }
 
-.c13 + .c6::before {
+.c12 + .c5::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -2726,47 +2490,47 @@ samp.c8 {
   position: absolute;
 }
 
-.c13[disabled] + .c6 {
+.c12[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c13[disabled] + .c6::before {
+.c12[disabled] + .c5::before {
   background: #f2f2f2;
 }
 
-.c13:checked:focus + .c6 {
+.c12:checked:focus + .c5 {
   border-color: #ffc94c;
   box-shadow: #ffc94c 0px 0px 0px 1px !important;
 }
 
-.c13:focus + .c6 {
+.c12:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c13:not([disabled]):checked + .c6 {
+.c12:not([disabled]):checked + .c5 {
   border-color: #ffc94c;
   background-color: #ffb300;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c13:checked + .c6 {
+.c12:checked + .c5 {
   background-color: #ffd97f;
   border-color: #ffd97f;
 }
 
-.c13:checked + .c6::before {
+.c12:checked + .c5::before {
   border-color: #ffb300;
   left: 1.7em;
 }
 
-.c13[disabled]:checked + .c6::before {
+.c12[disabled]:checked + .c5::before {
   border-color: #ffd97f;
 }
 
-.c4 {
+.c3 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -2776,7 +2540,7 @@ samp.c8 {
   width: 1px;
 }
 
-.c4 + .c6::before {
+.c3 + .c5::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -2790,51 +2554,51 @@ samp.c8 {
   position: absolute;
 }
 
-.c4[disabled] + .c6 {
+.c3[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c4[disabled] + .c6::before {
+.c3[disabled] + .c5::before {
   background: #f2f2f2;
 }
 
-.c4:checked:focus + .c6 {
+.c3:checked:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4:focus + .c6 {
+.c3:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4:not([disabled]):checked + .c6 {
+.c3:not([disabled]):checked + .c5 {
   border-color: #7467c0;
   background-color: #3926a5;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c4:checked + .c6 {
+.c3:checked + .c5 {
   background-color: #9c92d2;
   border-color: #9c92d2;
 }
 
-.c4:checked + .c6 {
+.c3:checked + .c5 {
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4:checked + .c6::before {
+.c3:checked + .c5::before {
   border-color: #3926a5;
   left: 1.7em;
 }
 
-.c4[disabled]:checked + .c6::before {
+.c3[disabled]:checked + .c5::before {
   border-color: #9c92d2;
 }
 
-.c2 {
+.c0 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -2846,36 +2610,32 @@ samp.c8 {
   display: flex;
 }
 
-<div
-  class="c0 c1"
+<label
+  aria-describedby="label"
+  aria-invalid="false"
+  aria-label="Test"
+  aria-required="false"
+  class="c0 c1 c2"
 >
-  <label
-    aria-describedby="label"
-    aria-invalid="false"
-    aria-label="Test"
-    aria-required="false"
-    class="c2 c3 c1"
+  <input
+    class="c3 c4"
+    type="checkbox"
+    value=""
+  />
+  <div
+    class="c5 c6 c2"
+  />
+  <span
+    class="c7 c8"
+    id="label"
   >
-    <input
-      class="c4 c5"
-      type="checkbox"
-      value=""
-    />
-    <div
-      class="c6 c7 c1"
-    />
-    <span
-      class="c8 c9"
-      id="label"
-    >
-      Test
-    </span>
-  </label>
-</div>
+    Test
+  </span>
+</label>
 `;
 
 exports[`states renders correctly for an switch with state success 1`] = `
-.c1 {
+.c2 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2888,7 +2648,7 @@ exports[`states renders correctly for an switch with state success 1`] = `
   color: inherit;
 }
 
-.c5 {
+.c4 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2901,7 +2661,7 @@ exports[`states renders correctly for an switch with state success 1`] = `
   color: inherit;
 }
 
-.c9 {
+.c8 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2915,44 +2675,18 @@ exports[`states renders correctly for an switch with state success 1`] = `
   margin-left: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-abbr.c8 {
+abbr.c7 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c8 {
+i.c7 {
   font-style: italic;
 }
 
-kbd.c8 {
+kbd.c7 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -2960,50 +2694,50 @@ kbd.c8 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c8 {
+mark.c7 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c8 {
+strong.c7 {
   font-weight: bold;
 }
 
-sub.c8,
-sup.c8 {
+sub.c7,
+sup.c7 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c8,
-u.c8 {
+ins.c7,
+u.c7 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c8,
-cite.c8,
-var.c8,
-em.c8 {
+i.c7,
+cite.c7,
+var.c7,
+em.c7 {
   font-style: italic;
 }
 
-kbd.c8,
-pre.c8,
-samp.c8 {
+kbd.c7,
+pre.c7,
+samp.c7 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c8 .c14 {
+.c7 .c13 {
   top: 0.1em;
 }
 
-.c3 {
+.c1 {
   display: inline-block;
 }
 
-.c7 {
+.c6 {
   background-color: #f2f2f2;
   border: 1px solid #bdbdbd;
   border-radius: 1em;
@@ -3012,12 +2746,12 @@ samp.c8 {
   width: 3em;
 }
 
-.c7 {
+.c6 {
   border-color: #4ca26c;
   box-shadow: #4ca26c 0px 0px 0px 1px !important;
 }
 
-.c10 + .c6::before {
+.c9 + .c5::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -3031,47 +2765,47 @@ samp.c8 {
   position: absolute;
 }
 
-.c10[disabled] + .c6 {
+.c9[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c10[disabled] + .c6::before {
+.c9[disabled] + .c5::before {
   background: #f2f2f2;
 }
 
-.c10:checked:focus + .c6 {
+.c9:checked:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c10:focus + .c6 {
+.c9:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c10:not([disabled]):checked + .c6 {
+.c9:not([disabled]):checked + .c5 {
   border-color: #7467c0;
   background-color: #3926a5;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c10:checked + .c6 {
+.c9:checked + .c5 {
   background-color: #9c92d2;
   border-color: #9c92d2;
 }
 
-.c10:checked + .c6::before {
+.c9:checked + .c5::before {
   border-color: #3926a5;
   left: 1.7em;
 }
 
-.c10[disabled]:checked + .c6::before {
+.c9[disabled]:checked + .c5::before {
   border-color: #9c92d2;
 }
 
-.c11 + .c6::before {
+.c10 + .c5::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -3085,47 +2819,47 @@ samp.c8 {
   position: absolute;
 }
 
-.c11[disabled] + .c6 {
+.c10[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c11[disabled] + .c6::before {
+.c10[disabled] + .c5::before {
   background: #f2f2f2;
 }
 
-.c11:checked:focus + .c6 {
+.c10:checked:focus + .c5 {
   border-color: #e24c67;
   box-shadow: #e24c67 0px 0px 0px 1px !important;
 }
 
-.c11:focus + .c6 {
+.c10:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11:not([disabled]):checked + .c6 {
+.c10:not([disabled]):checked + .c5 {
   border-color: #e24c67;
   background-color: #d60027;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c11:checked + .c6 {
+.c10:checked + .c5 {
   background-color: #ea7f93;
   border-color: #ea7f93;
 }
 
-.c11:checked + .c6::before {
+.c10:checked + .c5::before {
   border-color: #d60027;
   left: 1.7em;
 }
 
-.c11[disabled]:checked + .c6::before {
+.c10[disabled]:checked + .c5::before {
   border-color: #ea7f93;
 }
 
-.c12 + .c6::before {
+.c11 + .c5::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -3139,47 +2873,47 @@ samp.c8 {
   position: absolute;
 }
 
-.c12[disabled] + .c6 {
+.c11[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c12[disabled] + .c6::before {
+.c11[disabled] + .c5::before {
   background: #f2f2f2;
 }
 
-.c12:checked:focus + .c6 {
+.c11:checked:focus + .c5 {
   border-color: #4ca26c;
   box-shadow: #4ca26c 0px 0px 0px 1px !important;
 }
 
-.c12:focus + .c6 {
+.c11:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c12:not([disabled]):checked + .c6 {
+.c11:not([disabled]):checked + .c5 {
   border-color: #4ca26c;
   background-color: #007b2e;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c12:checked + .c6 {
+.c11:checked + .c5 {
   background-color: #7fbd96;
   border-color: #7fbd96;
 }
 
-.c12:checked + .c6::before {
+.c11:checked + .c5::before {
   border-color: #007b2e;
   left: 1.7em;
 }
 
-.c12[disabled]:checked + .c6::before {
+.c11[disabled]:checked + .c5::before {
   border-color: #7fbd96;
 }
 
-.c13 + .c6::before {
+.c12 + .c5::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -3193,47 +2927,47 @@ samp.c8 {
   position: absolute;
 }
 
-.c13[disabled] + .c6 {
+.c12[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c13[disabled] + .c6::before {
+.c12[disabled] + .c5::before {
   background: #f2f2f2;
 }
 
-.c13:checked:focus + .c6 {
+.c12:checked:focus + .c5 {
   border-color: #ffc94c;
   box-shadow: #ffc94c 0px 0px 0px 1px !important;
 }
 
-.c13:focus + .c6 {
+.c12:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c13:not([disabled]):checked + .c6 {
+.c12:not([disabled]):checked + .c5 {
   border-color: #ffc94c;
   background-color: #ffb300;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c13:checked + .c6 {
+.c12:checked + .c5 {
   background-color: #ffd97f;
   border-color: #ffd97f;
 }
 
-.c13:checked + .c6::before {
+.c12:checked + .c5::before {
   border-color: #ffb300;
   left: 1.7em;
 }
 
-.c13[disabled]:checked + .c6::before {
+.c12[disabled]:checked + .c5::before {
   border-color: #ffd97f;
 }
 
-.c4 {
+.c3 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -3243,7 +2977,7 @@ samp.c8 {
   width: 1px;
 }
 
-.c4 + .c6::before {
+.c3 + .c5::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -3257,51 +2991,51 @@ samp.c8 {
   position: absolute;
 }
 
-.c4[disabled] + .c6 {
+.c3[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c4[disabled] + .c6::before {
+.c3[disabled] + .c5::before {
   background: #f2f2f2;
 }
 
-.c4:checked:focus + .c6 {
+.c3:checked:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4:focus + .c6 {
+.c3:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4:not([disabled]):checked + .c6 {
+.c3:not([disabled]):checked + .c5 {
   border-color: #7467c0;
   background-color: #3926a5;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c4:checked + .c6 {
+.c3:checked + .c5 {
   background-color: #9c92d2;
   border-color: #9c92d2;
 }
 
-.c4:checked + .c6 {
+.c3:checked + .c5 {
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4:checked + .c6::before {
+.c3:checked + .c5::before {
   border-color: #3926a5;
   left: 1.7em;
 }
 
-.c4[disabled]:checked + .c6::before {
+.c3[disabled]:checked + .c5::before {
   border-color: #9c92d2;
 }
 
-.c2 {
+.c0 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -3313,36 +3047,32 @@ samp.c8 {
   display: flex;
 }
 
-<div
-  class="c0 c1"
+<label
+  aria-describedby="label"
+  aria-invalid="false"
+  aria-label="Test"
+  aria-required="false"
+  class="c0 c1 c2"
 >
-  <label
-    aria-describedby="label"
-    aria-invalid="false"
-    aria-label="Test"
-    aria-required="false"
-    class="c2 c3 c1"
+  <input
+    class="c3 c4"
+    type="checkbox"
+    value=""
+  />
+  <div
+    class="c5 c6 c2"
+  />
+  <span
+    class="c7 c8"
+    id="label"
   >
-    <input
-      class="c4 c5"
-      type="checkbox"
-      value=""
-    />
-    <div
-      class="c6 c7 c1"
-    />
-    <span
-      class="c8 c9"
-      id="label"
-    >
-      Test
-    </span>
-  </label>
-</div>
+    Test
+  </span>
+</label>
 `;
 
 exports[`states renders correctly for an switch with state warning 1`] = `
-.c1 {
+.c2 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3355,7 +3085,7 @@ exports[`states renders correctly for an switch with state warning 1`] = `
   color: inherit;
 }
 
-.c5 {
+.c4 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3368,7 +3098,7 @@ exports[`states renders correctly for an switch with state warning 1`] = `
   color: inherit;
 }
 
-.c9 {
+.c8 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3382,44 +3112,18 @@ exports[`states renders correctly for an switch with state warning 1`] = `
   margin-left: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-abbr.c8 {
+abbr.c7 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c8 {
+i.c7 {
   font-style: italic;
 }
 
-kbd.c8 {
+kbd.c7 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -3427,50 +3131,50 @@ kbd.c8 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c8 {
+mark.c7 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c8 {
+strong.c7 {
   font-weight: bold;
 }
 
-sub.c8,
-sup.c8 {
+sub.c7,
+sup.c7 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c8,
-u.c8 {
+ins.c7,
+u.c7 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c8,
-cite.c8,
-var.c8,
-em.c8 {
+i.c7,
+cite.c7,
+var.c7,
+em.c7 {
   font-style: italic;
 }
 
-kbd.c8,
-pre.c8,
-samp.c8 {
+kbd.c7,
+pre.c7,
+samp.c7 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c8 .c14 {
+.c7 .c13 {
   top: 0.1em;
 }
 
-.c3 {
+.c1 {
   display: inline-block;
 }
 
-.c7 {
+.c6 {
   background-color: #f2f2f2;
   border: 1px solid #bdbdbd;
   border-radius: 1em;
@@ -3479,12 +3183,12 @@ samp.c8 {
   width: 3em;
 }
 
-.c7 {
+.c6 {
   border-color: #ffc94c;
   box-shadow: #ffc94c 0px 0px 0px 1px !important;
 }
 
-.c10 + .c6::before {
+.c9 + .c5::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -3498,47 +3202,47 @@ samp.c8 {
   position: absolute;
 }
 
-.c10[disabled] + .c6 {
+.c9[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c10[disabled] + .c6::before {
+.c9[disabled] + .c5::before {
   background: #f2f2f2;
 }
 
-.c10:checked:focus + .c6 {
+.c9:checked:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c10:focus + .c6 {
+.c9:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c10:not([disabled]):checked + .c6 {
+.c9:not([disabled]):checked + .c5 {
   border-color: #7467c0;
   background-color: #3926a5;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c10:checked + .c6 {
+.c9:checked + .c5 {
   background-color: #9c92d2;
   border-color: #9c92d2;
 }
 
-.c10:checked + .c6::before {
+.c9:checked + .c5::before {
   border-color: #3926a5;
   left: 1.7em;
 }
 
-.c10[disabled]:checked + .c6::before {
+.c9[disabled]:checked + .c5::before {
   border-color: #9c92d2;
 }
 
-.c11 + .c6::before {
+.c10 + .c5::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -3552,47 +3256,47 @@ samp.c8 {
   position: absolute;
 }
 
-.c11[disabled] + .c6 {
+.c10[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c11[disabled] + .c6::before {
+.c10[disabled] + .c5::before {
   background: #f2f2f2;
 }
 
-.c11:checked:focus + .c6 {
+.c10:checked:focus + .c5 {
   border-color: #e24c67;
   box-shadow: #e24c67 0px 0px 0px 1px !important;
 }
 
-.c11:focus + .c6 {
+.c10:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11:not([disabled]):checked + .c6 {
+.c10:not([disabled]):checked + .c5 {
   border-color: #e24c67;
   background-color: #d60027;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c11:checked + .c6 {
+.c10:checked + .c5 {
   background-color: #ea7f93;
   border-color: #ea7f93;
 }
 
-.c11:checked + .c6::before {
+.c10:checked + .c5::before {
   border-color: #d60027;
   left: 1.7em;
 }
 
-.c11[disabled]:checked + .c6::before {
+.c10[disabled]:checked + .c5::before {
   border-color: #ea7f93;
 }
 
-.c12 + .c6::before {
+.c11 + .c5::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -3606,47 +3310,47 @@ samp.c8 {
   position: absolute;
 }
 
-.c12[disabled] + .c6 {
+.c11[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c12[disabled] + .c6::before {
+.c11[disabled] + .c5::before {
   background: #f2f2f2;
 }
 
-.c12:checked:focus + .c6 {
+.c11:checked:focus + .c5 {
   border-color: #4ca26c;
   box-shadow: #4ca26c 0px 0px 0px 1px !important;
 }
 
-.c12:focus + .c6 {
+.c11:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c12:not([disabled]):checked + .c6 {
+.c11:not([disabled]):checked + .c5 {
   border-color: #4ca26c;
   background-color: #007b2e;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c12:checked + .c6 {
+.c11:checked + .c5 {
   background-color: #7fbd96;
   border-color: #7fbd96;
 }
 
-.c12:checked + .c6::before {
+.c11:checked + .c5::before {
   border-color: #007b2e;
   left: 1.7em;
 }
 
-.c12[disabled]:checked + .c6::before {
+.c11[disabled]:checked + .c5::before {
   border-color: #7fbd96;
 }
 
-.c13 + .c6::before {
+.c12 + .c5::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -3660,47 +3364,47 @@ samp.c8 {
   position: absolute;
 }
 
-.c13[disabled] + .c6 {
+.c12[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c13[disabled] + .c6::before {
+.c12[disabled] + .c5::before {
   background: #f2f2f2;
 }
 
-.c13:checked:focus + .c6 {
+.c12:checked:focus + .c5 {
   border-color: #ffc94c;
   box-shadow: #ffc94c 0px 0px 0px 1px !important;
 }
 
-.c13:focus + .c6 {
+.c12:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c13:not([disabled]):checked + .c6 {
+.c12:not([disabled]):checked + .c5 {
   border-color: #ffc94c;
   background-color: #ffb300;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c13:checked + .c6 {
+.c12:checked + .c5 {
   background-color: #ffd97f;
   border-color: #ffd97f;
 }
 
-.c13:checked + .c6::before {
+.c12:checked + .c5::before {
   border-color: #ffb300;
   left: 1.7em;
 }
 
-.c13[disabled]:checked + .c6::before {
+.c12[disabled]:checked + .c5::before {
   border-color: #ffd97f;
 }
 
-.c4 {
+.c3 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -3710,7 +3414,7 @@ samp.c8 {
   width: 1px;
 }
 
-.c4 + .c6::before {
+.c3 + .c5::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -3724,51 +3428,51 @@ samp.c8 {
   position: absolute;
 }
 
-.c4[disabled] + .c6 {
+.c3[disabled] + .c5 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c4[disabled] + .c6::before {
+.c3[disabled] + .c5::before {
   background: #f2f2f2;
 }
 
-.c4:checked:focus + .c6 {
+.c3:checked:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4:focus + .c6 {
+.c3:focus + .c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4:not([disabled]):checked + .c6 {
+.c3:not([disabled]):checked + .c5 {
   border-color: #7467c0;
   background-color: #3926a5;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c4:checked + .c6 {
+.c3:checked + .c5 {
   background-color: #9c92d2;
   border-color: #9c92d2;
 }
 
-.c4:checked + .c6 {
+.c3:checked + .c5 {
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4:checked + .c6::before {
+.c3:checked + .c5::before {
   border-color: #3926a5;
   left: 1.7em;
 }
 
-.c4[disabled]:checked + .c6::before {
+.c3[disabled]:checked + .c5::before {
   border-color: #9c92d2;
 }
 
-.c2 {
+.c0 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -3780,30 +3484,26 @@ samp.c8 {
   display: flex;
 }
 
-<div
-  class="c0 c1"
+<label
+  aria-describedby="label"
+  aria-invalid="false"
+  aria-label="Test"
+  aria-required="false"
+  class="c0 c1 c2"
 >
-  <label
-    aria-describedby="label"
-    aria-invalid="false"
-    aria-label="Test"
-    aria-required="false"
-    class="c2 c3 c1"
+  <input
+    class="c3 c4"
+    type="checkbox"
+    value=""
+  />
+  <div
+    class="c5 c6 c2"
+  />
+  <span
+    class="c7 c8"
+    id="label"
   >
-    <input
-      class="c4 c5"
-      type="checkbox"
-      value=""
-    />
-    <div
-      class="c6 c7 c1"
-    />
-    <span
-      class="c8 c9"
-      id="label"
-    >
-      Test
-    </span>
-  </label>
-</div>
+    Test
+  </span>
+</label>
 `;
diff --git a/src/Switch/__tests__/__snapshots__/SwitchField.test.js.snap b/src/Switch/__tests__/__snapshots__/SwitchField.test.js.snap
index 71efcc622..e1375c6e3 100644
--- a/src/Switch/__tests__/__snapshots__/SwitchField.test.js.snap
+++ b/src/Switch/__tests__/__snapshots__/SwitchField.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`colors renders correctly for a switch field with color danger 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -14,7 +14,7 @@ exports[`colors renders correctly for a switch field with color danger 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -28,7 +28,7 @@ exports[`colors renders correctly for a switch field with color danger 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -41,37 +41,11 @@ exports[`colors renders correctly for a switch field with color danger 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
+.c2 {
   display: inline-block;
 }
 
-.c8 {
+.c7 {
   background-color: #f2f2f2;
   border: 1px solid #bdbdbd;
   border-radius: 1em;
@@ -80,7 +54,7 @@ exports[`colors renders correctly for a switch field with color danger 1`] = `
   width: 3em;
 }
 
-.c9 + .c7::before {
+.c8 + .c6::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -94,47 +68,47 @@ exports[`colors renders correctly for a switch field with color danger 1`] = `
   position: absolute;
 }
 
-.c9[disabled] + .c7 {
+.c8[disabled] + .c6 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c9[disabled] + .c7::before {
+.c8[disabled] + .c6::before {
   background: #f2f2f2;
 }
 
-.c9:checked:focus + .c7 {
+.c8:checked:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c9:focus + .c7 {
+.c8:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c9:not([disabled]):checked + .c7 {
+.c8:not([disabled]):checked + .c6 {
   border-color: #7467c0;
   background-color: #3926a5;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c9:checked + .c7 {
+.c8:checked + .c6 {
   background-color: #9c92d2;
   border-color: #9c92d2;
 }
 
-.c9:checked + .c7::before {
+.c8:checked + .c6::before {
   border-color: #3926a5;
   left: 1.7em;
 }
 
-.c9[disabled]:checked + .c7::before {
+.c8[disabled]:checked + .c6::before {
   border-color: #9c92d2;
 }
 
-.c5 {
+.c4 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -144,7 +118,7 @@ exports[`colors renders correctly for a switch field with color danger 1`] = `
   width: 1px;
 }
 
-.c5 + .c7::before {
+.c4 + .c6::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -158,47 +132,47 @@ exports[`colors renders correctly for a switch field with color danger 1`] = `
   position: absolute;
 }
 
-.c5[disabled] + .c7 {
+.c4[disabled] + .c6 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c5[disabled] + .c7::before {
+.c4[disabled] + .c6::before {
   background: #f2f2f2;
 }
 
-.c5:checked:focus + .c7 {
+.c4:checked:focus + .c6 {
   border-color: #e24c67;
   box-shadow: #e24c67 0px 0px 0px 1px !important;
 }
 
-.c5:focus + .c7 {
+.c4:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c5:not([disabled]):checked + .c7 {
+.c4:not([disabled]):checked + .c6 {
   border-color: #e24c67;
   background-color: #d60027;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c5:checked + .c7 {
+.c4:checked + .c6 {
   background-color: #ea7f93;
   border-color: #ea7f93;
 }
 
-.c5:checked + .c7::before {
+.c4:checked + .c6::before {
   border-color: #d60027;
   left: 1.7em;
 }
 
-.c5[disabled]:checked + .c7::before {
+.c4[disabled]:checked + .c6::before {
   border-color: #ea7f93;
 }
 
-.c2 {
+.c1 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -211,36 +185,32 @@ exports[`colors renders correctly for a switch field with color danger 1`] = `
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
-  <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+  <div />
+  <label
+    aria-describedby="label"
+    aria-invalid="false"
+    aria-required="false"
+    class="c1 c2 c3"
   >
-    <div />
-    <label
-      aria-describedby="label"
-      aria-invalid="false"
-      aria-required="false"
-      class="c2 c3 c4"
-    >
-      <input
-        class="c5 c6"
-        type="checkbox"
-        value=""
-      />
-      <div
-        class="c7 c8 c1"
-      />
-    </label>
-    <div />
-  </div>
+    <input
+      class="c4 c5"
+      type="checkbox"
+      value=""
+    />
+    <div
+      class="c6 c7 c0"
+    />
+  </label>
+  <div />
 </div>
 `;
 
 exports[`colors renders correctly for a switch field with color primary 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -253,7 +223,7 @@ exports[`colors renders correctly for a switch field with color primary 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -267,7 +237,7 @@ exports[`colors renders correctly for a switch field with color primary 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -280,37 +250,11 @@ exports[`colors renders correctly for a switch field with color primary 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
+.c2 {
   display: inline-block;
 }
 
-.c8 {
+.c7 {
   background-color: #f2f2f2;
   border: 1px solid #bdbdbd;
   border-radius: 1em;
@@ -319,7 +263,7 @@ exports[`colors renders correctly for a switch field with color primary 1`] = `
   width: 3em;
 }
 
-.c5 {
+.c4 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -329,7 +273,7 @@ exports[`colors renders correctly for a switch field with color primary 1`] = `
   width: 1px;
 }
 
-.c5 + .c7::before {
+.c4 + .c6::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -343,47 +287,47 @@ exports[`colors renders correctly for a switch field with color primary 1`] = `
   position: absolute;
 }
 
-.c5[disabled] + .c7 {
+.c4[disabled] + .c6 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c5[disabled] + .c7::before {
+.c4[disabled] + .c6::before {
   background: #f2f2f2;
 }
 
-.c5:checked:focus + .c7 {
+.c4:checked:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c5:focus + .c7 {
+.c4:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c5:not([disabled]):checked + .c7 {
+.c4:not([disabled]):checked + .c6 {
   border-color: #7467c0;
   background-color: #3926a5;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c5:checked + .c7 {
+.c4:checked + .c6 {
   background-color: #9c92d2;
   border-color: #9c92d2;
 }
 
-.c5:checked + .c7::before {
+.c4:checked + .c6::before {
   border-color: #3926a5;
   left: 1.7em;
 }
 
-.c5[disabled]:checked + .c7::before {
+.c4[disabled]:checked + .c6::before {
   border-color: #9c92d2;
 }
 
-.c9 + .c7::before {
+.c8 + .c6::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -397,47 +341,47 @@ exports[`colors renders correctly for a switch field with color primary 1`] = `
   position: absolute;
 }
 
-.c9[disabled] + .c7 {
+.c8[disabled] + .c6 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c9[disabled] + .c7::before {
+.c8[disabled] + .c6::before {
   background: #f2f2f2;
 }
 
-.c9:checked:focus + .c7 {
+.c8:checked:focus + .c6 {
   border-color: #e24c67;
   box-shadow: #e24c67 0px 0px 0px 1px !important;
 }
 
-.c9:focus + .c7 {
+.c8:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c9:not([disabled]):checked + .c7 {
+.c8:not([disabled]):checked + .c6 {
   border-color: #e24c67;
   background-color: #d60027;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c9:checked + .c7 {
+.c8:checked + .c6 {
   background-color: #ea7f93;
   border-color: #ea7f93;
 }
 
-.c9:checked + .c7::before {
+.c8:checked + .c6::before {
   border-color: #d60027;
   left: 1.7em;
 }
 
-.c9[disabled]:checked + .c7::before {
+.c8[disabled]:checked + .c6::before {
   border-color: #ea7f93;
 }
 
-.c10 + .c7::before {
+.c9 + .c6::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -451,47 +395,47 @@ exports[`colors renders correctly for a switch field with color primary 1`] = `
   position: absolute;
 }
 
-.c10[disabled] + .c7 {
+.c9[disabled] + .c6 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c10[disabled] + .c7::before {
+.c9[disabled] + .c6::before {
   background: #f2f2f2;
 }
 
-.c10:checked:focus + .c7 {
+.c9:checked:focus + .c6 {
   border-color: #4ca26c;
   box-shadow: #4ca26c 0px 0px 0px 1px !important;
 }
 
-.c10:focus + .c7 {
+.c9:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c10:not([disabled]):checked + .c7 {
+.c9:not([disabled]):checked + .c6 {
   border-color: #4ca26c;
   background-color: #007b2e;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c10:checked + .c7 {
+.c9:checked + .c6 {
   background-color: #7fbd96;
   border-color: #7fbd96;
 }
 
-.c10:checked + .c7::before {
+.c9:checked + .c6::before {
   border-color: #007b2e;
   left: 1.7em;
 }
 
-.c10[disabled]:checked + .c7::before {
+.c9[disabled]:checked + .c6::before {
   border-color: #7fbd96;
 }
 
-.c11 + .c7::before {
+.c10 + .c6::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -505,47 +449,47 @@ exports[`colors renders correctly for a switch field with color primary 1`] = `
   position: absolute;
 }
 
-.c11[disabled] + .c7 {
+.c10[disabled] + .c6 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c11[disabled] + .c7::before {
+.c10[disabled] + .c6::before {
   background: #f2f2f2;
 }
 
-.c11:checked:focus + .c7 {
+.c10:checked:focus + .c6 {
   border-color: #ffc94c;
   box-shadow: #ffc94c 0px 0px 0px 1px !important;
 }
 
-.c11:focus + .c7 {
+.c10:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11:not([disabled]):checked + .c7 {
+.c10:not([disabled]):checked + .c6 {
   border-color: #ffc94c;
   background-color: #ffb300;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c11:checked + .c7 {
+.c10:checked + .c6 {
   background-color: #ffd97f;
   border-color: #ffd97f;
 }
 
-.c11:checked + .c7::before {
+.c10:checked + .c6::before {
   border-color: #ffb300;
   left: 1.7em;
 }
 
-.c11[disabled]:checked + .c7::before {
+.c10[disabled]:checked + .c6::before {
   border-color: #ffd97f;
 }
 
-.c2 {
+.c1 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -558,36 +502,32 @@ exports[`colors renders correctly for a switch field with color primary 1`] = `
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
-  <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+  <div />
+  <label
+    aria-describedby="label"
+    aria-invalid="false"
+    aria-required="false"
+    class="c1 c2 c3"
   >
-    <div />
-    <label
-      aria-describedby="label"
-      aria-invalid="false"
-      aria-required="false"
-      class="c2 c3 c4"
-    >
-      <input
-        class="c5 c6"
-        type="checkbox"
-        value=""
-      />
-      <div
-        class="c7 c8 c1"
-      />
-    </label>
-    <div />
-  </div>
+    <input
+      class="c4 c5"
+      type="checkbox"
+      value=""
+    />
+    <div
+      class="c6 c7 c0"
+    />
+  </label>
+  <div />
 </div>
 `;
 
 exports[`colors renders correctly for a switch field with color success 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -600,7 +540,7 @@ exports[`colors renders correctly for a switch field with color success 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -614,7 +554,7 @@ exports[`colors renders correctly for a switch field with color success 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -627,37 +567,11 @@ exports[`colors renders correctly for a switch field with color success 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
+.c2 {
   display: inline-block;
 }
 
-.c8 {
+.c7 {
   background-color: #f2f2f2;
   border: 1px solid #bdbdbd;
   border-radius: 1em;
@@ -666,7 +580,7 @@ exports[`colors renders correctly for a switch field with color success 1`] = `
   width: 3em;
 }
 
-.c9 + .c7::before {
+.c8 + .c6::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -680,47 +594,47 @@ exports[`colors renders correctly for a switch field with color success 1`] = `
   position: absolute;
 }
 
-.c9[disabled] + .c7 {
+.c8[disabled] + .c6 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c9[disabled] + .c7::before {
+.c8[disabled] + .c6::before {
   background: #f2f2f2;
 }
 
-.c9:checked:focus + .c7 {
+.c8:checked:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c9:focus + .c7 {
+.c8:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c9:not([disabled]):checked + .c7 {
+.c8:not([disabled]):checked + .c6 {
   border-color: #7467c0;
   background-color: #3926a5;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c9:checked + .c7 {
+.c8:checked + .c6 {
   background-color: #9c92d2;
   border-color: #9c92d2;
 }
 
-.c9:checked + .c7::before {
+.c8:checked + .c6::before {
   border-color: #3926a5;
   left: 1.7em;
 }
 
-.c9[disabled]:checked + .c7::before {
+.c8[disabled]:checked + .c6::before {
   border-color: #9c92d2;
 }
 
-.c10 + .c7::before {
+.c9 + .c6::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -734,47 +648,47 @@ exports[`colors renders correctly for a switch field with color success 1`] = `
   position: absolute;
 }
 
-.c10[disabled] + .c7 {
+.c9[disabled] + .c6 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c10[disabled] + .c7::before {
+.c9[disabled] + .c6::before {
   background: #f2f2f2;
 }
 
-.c10:checked:focus + .c7 {
+.c9:checked:focus + .c6 {
   border-color: #e24c67;
   box-shadow: #e24c67 0px 0px 0px 1px !important;
 }
 
-.c10:focus + .c7 {
+.c9:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c10:not([disabled]):checked + .c7 {
+.c9:not([disabled]):checked + .c6 {
   border-color: #e24c67;
   background-color: #d60027;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c10:checked + .c7 {
+.c9:checked + .c6 {
   background-color: #ea7f93;
   border-color: #ea7f93;
 }
 
-.c10:checked + .c7::before {
+.c9:checked + .c6::before {
   border-color: #d60027;
   left: 1.7em;
 }
 
-.c10[disabled]:checked + .c7::before {
+.c9[disabled]:checked + .c6::before {
   border-color: #ea7f93;
 }
 
-.c5 {
+.c4 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -784,7 +698,7 @@ exports[`colors renders correctly for a switch field with color success 1`] = `
   width: 1px;
 }
 
-.c5 + .c7::before {
+.c4 + .c6::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -798,47 +712,47 @@ exports[`colors renders correctly for a switch field with color success 1`] = `
   position: absolute;
 }
 
-.c5[disabled] + .c7 {
+.c4[disabled] + .c6 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c5[disabled] + .c7::before {
+.c4[disabled] + .c6::before {
   background: #f2f2f2;
 }
 
-.c5:checked:focus + .c7 {
+.c4:checked:focus + .c6 {
   border-color: #4ca26c;
   box-shadow: #4ca26c 0px 0px 0px 1px !important;
 }
 
-.c5:focus + .c7 {
+.c4:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c5:not([disabled]):checked + .c7 {
+.c4:not([disabled]):checked + .c6 {
   border-color: #4ca26c;
   background-color: #007b2e;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c5:checked + .c7 {
+.c4:checked + .c6 {
   background-color: #7fbd96;
   border-color: #7fbd96;
 }
 
-.c5:checked + .c7::before {
+.c4:checked + .c6::before {
   border-color: #007b2e;
   left: 1.7em;
 }
 
-.c5[disabled]:checked + .c7::before {
+.c4[disabled]:checked + .c6::before {
   border-color: #7fbd96;
 }
 
-.c2 {
+.c1 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -851,36 +765,32 @@ exports[`colors renders correctly for a switch field with color success 1`] = `
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
-  <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+  <div />
+  <label
+    aria-describedby="label"
+    aria-invalid="false"
+    aria-required="false"
+    class="c1 c2 c3"
   >
-    <div />
-    <label
-      aria-describedby="label"
-      aria-invalid="false"
-      aria-required="false"
-      class="c2 c3 c4"
-    >
-      <input
-        class="c5 c6"
-        type="checkbox"
-        value=""
-      />
-      <div
-        class="c7 c8 c1"
-      />
-    </label>
-    <div />
-  </div>
+    <input
+      class="c4 c5"
+      type="checkbox"
+      value=""
+    />
+    <div
+      class="c6 c7 c0"
+    />
+  </label>
+  <div />
 </div>
 `;
 
 exports[`colors renders correctly for a switch field with color warning 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -893,7 +803,7 @@ exports[`colors renders correctly for a switch field with color warning 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -907,7 +817,7 @@ exports[`colors renders correctly for a switch field with color warning 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -920,37 +830,11 @@ exports[`colors renders correctly for a switch field with color warning 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
+.c2 {
   display: inline-block;
 }
 
-.c8 {
+.c7 {
   background-color: #f2f2f2;
   border: 1px solid #bdbdbd;
   border-radius: 1em;
@@ -959,7 +843,7 @@ exports[`colors renders correctly for a switch field with color warning 1`] = `
   width: 3em;
 }
 
-.c9 + .c7::before {
+.c8 + .c6::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -973,47 +857,47 @@ exports[`colors renders correctly for a switch field with color warning 1`] = `
   position: absolute;
 }
 
-.c9[disabled] + .c7 {
+.c8[disabled] + .c6 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c9[disabled] + .c7::before {
+.c8[disabled] + .c6::before {
   background: #f2f2f2;
 }
 
-.c9:checked:focus + .c7 {
+.c8:checked:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c9:focus + .c7 {
+.c8:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c9:not([disabled]):checked + .c7 {
+.c8:not([disabled]):checked + .c6 {
   border-color: #7467c0;
   background-color: #3926a5;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c9:checked + .c7 {
+.c8:checked + .c6 {
   background-color: #9c92d2;
   border-color: #9c92d2;
 }
 
-.c9:checked + .c7::before {
+.c8:checked + .c6::before {
   border-color: #3926a5;
   left: 1.7em;
 }
 
-.c9[disabled]:checked + .c7::before {
+.c8[disabled]:checked + .c6::before {
   border-color: #9c92d2;
 }
 
-.c10 + .c7::before {
+.c9 + .c6::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -1027,47 +911,47 @@ exports[`colors renders correctly for a switch field with color warning 1`] = `
   position: absolute;
 }
 
-.c10[disabled] + .c7 {
+.c9[disabled] + .c6 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c10[disabled] + .c7::before {
+.c9[disabled] + .c6::before {
   background: #f2f2f2;
 }
 
-.c10:checked:focus + .c7 {
+.c9:checked:focus + .c6 {
   border-color: #e24c67;
   box-shadow: #e24c67 0px 0px 0px 1px !important;
 }
 
-.c10:focus + .c7 {
+.c9:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c10:not([disabled]):checked + .c7 {
+.c9:not([disabled]):checked + .c6 {
   border-color: #e24c67;
   background-color: #d60027;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c10:checked + .c7 {
+.c9:checked + .c6 {
   background-color: #ea7f93;
   border-color: #ea7f93;
 }
 
-.c10:checked + .c7::before {
+.c9:checked + .c6::before {
   border-color: #d60027;
   left: 1.7em;
 }
 
-.c10[disabled]:checked + .c7::before {
+.c9[disabled]:checked + .c6::before {
   border-color: #ea7f93;
 }
 
-.c11 + .c7::before {
+.c10 + .c6::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -1081,47 +965,47 @@ exports[`colors renders correctly for a switch field with color warning 1`] = `
   position: absolute;
 }
 
-.c11[disabled] + .c7 {
+.c10[disabled] + .c6 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c11[disabled] + .c7::before {
+.c10[disabled] + .c6::before {
   background: #f2f2f2;
 }
 
-.c11:checked:focus + .c7 {
+.c10:checked:focus + .c6 {
   border-color: #4ca26c;
   box-shadow: #4ca26c 0px 0px 0px 1px !important;
 }
 
-.c11:focus + .c7 {
+.c10:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11:not([disabled]):checked + .c7 {
+.c10:not([disabled]):checked + .c6 {
   border-color: #4ca26c;
   background-color: #007b2e;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c11:checked + .c7 {
+.c10:checked + .c6 {
   background-color: #7fbd96;
   border-color: #7fbd96;
 }
 
-.c11:checked + .c7::before {
+.c10:checked + .c6::before {
   border-color: #007b2e;
   left: 1.7em;
 }
 
-.c11[disabled]:checked + .c7::before {
+.c10[disabled]:checked + .c6::before {
   border-color: #7fbd96;
 }
 
-.c5 {
+.c4 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -1131,7 +1015,7 @@ exports[`colors renders correctly for a switch field with color warning 1`] = `
   width: 1px;
 }
 
-.c5 + .c7::before {
+.c4 + .c6::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -1145,47 +1029,47 @@ exports[`colors renders correctly for a switch field with color warning 1`] = `
   position: absolute;
 }
 
-.c5[disabled] + .c7 {
+.c4[disabled] + .c6 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c5[disabled] + .c7::before {
+.c4[disabled] + .c6::before {
   background: #f2f2f2;
 }
 
-.c5:checked:focus + .c7 {
+.c4:checked:focus + .c6 {
   border-color: #ffc94c;
   box-shadow: #ffc94c 0px 0px 0px 1px !important;
 }
 
-.c5:focus + .c7 {
+.c4:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c5:not([disabled]):checked + .c7 {
+.c4:not([disabled]):checked + .c6 {
   border-color: #ffc94c;
   background-color: #ffb300;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c5:checked + .c7 {
+.c4:checked + .c6 {
   background-color: #ffd97f;
   border-color: #ffd97f;
 }
 
-.c5:checked + .c7::before {
+.c4:checked + .c6::before {
   border-color: #ffb300;
   left: 1.7em;
 }
 
-.c5[disabled]:checked + .c7::before {
+.c4[disabled]:checked + .c6::before {
   border-color: #ffd97f;
 }
 
-.c2 {
+.c1 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1198,36 +1082,32 @@ exports[`colors renders correctly for a switch field with color warning 1`] = `
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
-  <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+  <div />
+  <label
+    aria-describedby="label"
+    aria-invalid="false"
+    aria-required="false"
+    class="c1 c2 c3"
   >
-    <div />
-    <label
-      aria-describedby="label"
-      aria-invalid="false"
-      aria-required="false"
-      class="c2 c3 c4"
-    >
-      <input
-        class="c5 c6"
-        type="checkbox"
-        value=""
-      />
-      <div
-        class="c7 c8 c1"
-      />
-    </label>
-    <div />
-  </div>
+    <input
+      class="c4 c5"
+      type="checkbox"
+      value=""
+    />
+    <div
+      class="c6 c7 c0"
+    />
+  </label>
+  <div />
 </div>
 `;
 
 exports[`renders correctly for a basic switch field 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1240,7 +1120,7 @@ exports[`renders correctly for a basic switch field 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1254,7 +1134,7 @@ exports[`renders correctly for a basic switch field 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1267,37 +1147,11 @@ exports[`renders correctly for a basic switch field 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
+.c2 {
   display: inline-block;
 }
 
-.c8 {
+.c7 {
   background-color: #f2f2f2;
   border: 1px solid #bdbdbd;
   border-radius: 1em;
@@ -1306,7 +1160,7 @@ exports[`renders correctly for a basic switch field 1`] = `
   width: 3em;
 }
 
-.c5 {
+.c4 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -1316,7 +1170,7 @@ exports[`renders correctly for a basic switch field 1`] = `
   width: 1px;
 }
 
-.c5 + .c7::before {
+.c4 + .c6::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -1330,47 +1184,47 @@ exports[`renders correctly for a basic switch field 1`] = `
   position: absolute;
 }
 
-.c5[disabled] + .c7 {
+.c4[disabled] + .c6 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c5[disabled] + .c7::before {
+.c4[disabled] + .c6::before {
   background: #f2f2f2;
 }
 
-.c5:checked:focus + .c7 {
+.c4:checked:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c5:focus + .c7 {
+.c4:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c5:not([disabled]):checked + .c7 {
+.c4:not([disabled]):checked + .c6 {
   border-color: #7467c0;
   background-color: #3926a5;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c5:checked + .c7 {
+.c4:checked + .c6 {
   background-color: #9c92d2;
   border-color: #9c92d2;
 }
 
-.c5:checked + .c7::before {
+.c4:checked + .c6::before {
   border-color: #3926a5;
   left: 1.7em;
 }
 
-.c5[disabled]:checked + .c7::before {
+.c4[disabled]:checked + .c6::before {
   border-color: #9c92d2;
 }
 
-.c2 {
+.c1 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1383,36 +1237,32 @@ exports[`renders correctly for a basic switch field 1`] = `
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
-  <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+  <div />
+  <label
+    aria-describedby="label"
+    aria-invalid="false"
+    aria-required="false"
+    class="c1 c2 c3"
   >
-    <div />
-    <label
-      aria-describedby="label"
-      aria-invalid="false"
-      aria-required="false"
-      class="c2 c3 c4"
-    >
-      <input
-        class="c5 c6"
-        type="checkbox"
-        value=""
-      />
-      <div
-        class="c7 c8 c1"
-      />
-    </label>
-    <div />
-  </div>
+    <input
+      class="c4 c5"
+      type="checkbox"
+      value=""
+    />
+    <div
+      class="c6 c7 c0"
+    />
+  </label>
+  <div />
 </div>
 `;
 
 exports[`renders correctly for a disabled switch field 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1425,7 +1275,7 @@ exports[`renders correctly for a disabled switch field 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1439,7 +1289,7 @@ exports[`renders correctly for a disabled switch field 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1452,37 +1302,11 @@ exports[`renders correctly for a disabled switch field 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
+.c2 {
   display: inline-block;
 }
 
-.c8 {
+.c7 {
   background-color: #f2f2f2;
   border: 1px solid #bdbdbd;
   border-radius: 1em;
@@ -1491,7 +1315,7 @@ exports[`renders correctly for a disabled switch field 1`] = `
   width: 3em;
 }
 
-.c5 {
+.c4 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -1501,7 +1325,7 @@ exports[`renders correctly for a disabled switch field 1`] = `
   width: 1px;
 }
 
-.c5 + .c7::before {
+.c4 + .c6::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -1515,47 +1339,47 @@ exports[`renders correctly for a disabled switch field 1`] = `
   position: absolute;
 }
 
-.c5[disabled] + .c7 {
+.c4[disabled] + .c6 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c5[disabled] + .c7::before {
+.c4[disabled] + .c6::before {
   background: #f2f2f2;
 }
 
-.c5:checked:focus + .c7 {
+.c4:checked:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c5:focus + .c7 {
+.c4:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c5:not([disabled]):checked + .c7 {
+.c4:not([disabled]):checked + .c6 {
   border-color: #7467c0;
   background-color: #3926a5;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c5:checked + .c7 {
+.c4:checked + .c6 {
   background-color: #9c92d2;
   border-color: #9c92d2;
 }
 
-.c5:checked + .c7::before {
+.c4:checked + .c6::before {
   border-color: #3926a5;
   left: 1.7em;
 }
 
-.c5[disabled]:checked + .c7::before {
+.c4[disabled]:checked + .c6::before {
   border-color: #9c92d2;
 }
 
-.c2 {
+.c1 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1568,38 +1392,34 @@ exports[`renders correctly for a disabled switch field 1`] = `
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
-  <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+  <div />
+  <label
+    aria-describedby="label"
+    aria-invalid="false"
+    aria-required="false"
+    class="c1 c2 c3"
+    disabled=""
   >
-    <div />
-    <label
-      aria-describedby="label"
-      aria-invalid="false"
-      aria-required="false"
-      class="c2 c3 c4"
+    <input
+      class="c4 c5"
       disabled=""
-    >
-      <input
-        class="c5 c6"
-        disabled=""
-        type="checkbox"
-        value=""
-      />
-      <div
-        class="c7 c8 c1"
-      />
-    </label>
-    <div />
-  </div>
+      type="checkbox"
+      value=""
+    />
+    <div
+      class="c6 c7 c0"
+    />
+  </label>
+  <div />
 </div>
 `;
 
 exports[`states renders correctly for a switch field with state danger 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1612,7 +1432,7 @@ exports[`states renders correctly for a switch field with state danger 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1626,7 +1446,7 @@ exports[`states renders correctly for a switch field with state danger 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1639,37 +1459,11 @@ exports[`states renders correctly for a switch field with state danger 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
+.c2 {
   display: inline-block;
 }
 
-.c8 {
+.c7 {
   background-color: #f2f2f2;
   border: 1px solid #bdbdbd;
   border-radius: 1em;
@@ -1678,12 +1472,12 @@ exports[`states renders correctly for a switch field with state danger 1`] = `
   width: 3em;
 }
 
-.c8 {
+.c7 {
   border-color: #e24c67;
   box-shadow: #e24c67 0px 0px 0px 1px !important;
 }
 
-.c9 + .c7::before {
+.c8 + .c6::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -1697,47 +1491,47 @@ exports[`states renders correctly for a switch field with state danger 1`] = `
   position: absolute;
 }
 
-.c9[disabled] + .c7 {
+.c8[disabled] + .c6 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c9[disabled] + .c7::before {
+.c8[disabled] + .c6::before {
   background: #f2f2f2;
 }
 
-.c9:checked:focus + .c7 {
+.c8:checked:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c9:focus + .c7 {
+.c8:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c9:not([disabled]):checked + .c7 {
+.c8:not([disabled]):checked + .c6 {
   border-color: #7467c0;
   background-color: #3926a5;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c9:checked + .c7 {
+.c8:checked + .c6 {
   background-color: #9c92d2;
   border-color: #9c92d2;
 }
 
-.c9:checked + .c7::before {
+.c8:checked + .c6::before {
   border-color: #3926a5;
   left: 1.7em;
 }
 
-.c9[disabled]:checked + .c7::before {
+.c8[disabled]:checked + .c6::before {
   border-color: #9c92d2;
 }
 
-.c10 + .c7::before {
+.c9 + .c6::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -1751,47 +1545,47 @@ exports[`states renders correctly for a switch field with state danger 1`] = `
   position: absolute;
 }
 
-.c10[disabled] + .c7 {
+.c9[disabled] + .c6 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c10[disabled] + .c7::before {
+.c9[disabled] + .c6::before {
   background: #f2f2f2;
 }
 
-.c10:checked:focus + .c7 {
+.c9:checked:focus + .c6 {
   border-color: #e24c67;
   box-shadow: #e24c67 0px 0px 0px 1px !important;
 }
 
-.c10:focus + .c7 {
+.c9:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c10:not([disabled]):checked + .c7 {
+.c9:not([disabled]):checked + .c6 {
   border-color: #e24c67;
   background-color: #d60027;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c10:checked + .c7 {
+.c9:checked + .c6 {
   background-color: #ea7f93;
   border-color: #ea7f93;
 }
 
-.c10:checked + .c7::before {
+.c9:checked + .c6::before {
   border-color: #d60027;
   left: 1.7em;
 }
 
-.c10[disabled]:checked + .c7::before {
+.c9[disabled]:checked + .c6::before {
   border-color: #ea7f93;
 }
 
-.c11 + .c7::before {
+.c10 + .c6::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -1805,47 +1599,47 @@ exports[`states renders correctly for a switch field with state danger 1`] = `
   position: absolute;
 }
 
-.c11[disabled] + .c7 {
+.c10[disabled] + .c6 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c11[disabled] + .c7::before {
+.c10[disabled] + .c6::before {
   background: #f2f2f2;
 }
 
-.c11:checked:focus + .c7 {
+.c10:checked:focus + .c6 {
   border-color: #4ca26c;
   box-shadow: #4ca26c 0px 0px 0px 1px !important;
 }
 
-.c11:focus + .c7 {
+.c10:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11:not([disabled]):checked + .c7 {
+.c10:not([disabled]):checked + .c6 {
   border-color: #4ca26c;
   background-color: #007b2e;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c11:checked + .c7 {
+.c10:checked + .c6 {
   background-color: #7fbd96;
   border-color: #7fbd96;
 }
 
-.c11:checked + .c7::before {
+.c10:checked + .c6::before {
   border-color: #007b2e;
   left: 1.7em;
 }
 
-.c11[disabled]:checked + .c7::before {
+.c10[disabled]:checked + .c6::before {
   border-color: #7fbd96;
 }
 
-.c12 + .c7::before {
+.c11 + .c6::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -1859,47 +1653,47 @@ exports[`states renders correctly for a switch field with state danger 1`] = `
   position: absolute;
 }
 
-.c12[disabled] + .c7 {
+.c11[disabled] + .c6 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c12[disabled] + .c7::before {
+.c11[disabled] + .c6::before {
   background: #f2f2f2;
 }
 
-.c12:checked:focus + .c7 {
+.c11:checked:focus + .c6 {
   border-color: #ffc94c;
   box-shadow: #ffc94c 0px 0px 0px 1px !important;
 }
 
-.c12:focus + .c7 {
+.c11:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c12:not([disabled]):checked + .c7 {
+.c11:not([disabled]):checked + .c6 {
   border-color: #ffc94c;
   background-color: #ffb300;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c12:checked + .c7 {
+.c11:checked + .c6 {
   background-color: #ffd97f;
   border-color: #ffd97f;
 }
 
-.c12:checked + .c7::before {
+.c11:checked + .c6::before {
   border-color: #ffb300;
   left: 1.7em;
 }
 
-.c12[disabled]:checked + .c7::before {
+.c11[disabled]:checked + .c6::before {
   border-color: #ffd97f;
 }
 
-.c5 {
+.c4 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -1909,7 +1703,7 @@ exports[`states renders correctly for a switch field with state danger 1`] = `
   width: 1px;
 }
 
-.c5 + .c7::before {
+.c4 + .c6::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -1923,51 +1717,51 @@ exports[`states renders correctly for a switch field with state danger 1`] = `
   position: absolute;
 }
 
-.c5[disabled] + .c7 {
+.c4[disabled] + .c6 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c5[disabled] + .c7::before {
+.c4[disabled] + .c6::before {
   background: #f2f2f2;
 }
 
-.c5:checked:focus + .c7 {
+.c4:checked:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c5:focus + .c7 {
+.c4:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c5:not([disabled]):checked + .c7 {
+.c4:not([disabled]):checked + .c6 {
   border-color: #7467c0;
   background-color: #3926a5;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c5:checked + .c7 {
+.c4:checked + .c6 {
   background-color: #9c92d2;
   border-color: #9c92d2;
 }
 
-.c5:checked + .c7 {
+.c4:checked + .c6 {
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c5:checked + .c7::before {
+.c4:checked + .c6::before {
   border-color: #3926a5;
   left: 1.7em;
 }
 
-.c5[disabled]:checked + .c7::before {
+.c4[disabled]:checked + .c6::before {
   border-color: #9c92d2;
 }
 
-.c2 {
+.c1 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1980,36 +1774,32 @@ exports[`states renders correctly for a switch field with state danger 1`] = `
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
-  <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+  <div />
+  <label
+    aria-describedby="label"
+    aria-invalid="true"
+    aria-required="false"
+    class="c1 c2 c3"
   >
-    <div />
-    <label
-      aria-describedby="label"
-      aria-invalid="true"
-      aria-required="false"
-      class="c2 c3 c4"
-    >
-      <input
-        class="c5 c6"
-        type="checkbox"
-        value=""
-      />
-      <div
-        class="c7 c8 c1"
-      />
-    </label>
-    <div />
-  </div>
+    <input
+      class="c4 c5"
+      type="checkbox"
+      value=""
+    />
+    <div
+      class="c6 c7 c0"
+    />
+  </label>
+  <div />
 </div>
 `;
 
 exports[`states renders correctly for a switch field with state primary 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2022,7 +1812,7 @@ exports[`states renders correctly for a switch field with state primary 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2036,7 +1826,7 @@ exports[`states renders correctly for a switch field with state primary 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2049,37 +1839,11 @@ exports[`states renders correctly for a switch field with state primary 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
+.c2 {
   display: inline-block;
 }
 
-.c8 {
+.c7 {
   background-color: #f2f2f2;
   border: 1px solid #bdbdbd;
   border-radius: 1em;
@@ -2088,12 +1852,12 @@ exports[`states renders correctly for a switch field with state primary 1`] = `
   width: 3em;
 }
 
-.c8 {
+.c7 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c9 + .c7::before {
+.c8 + .c6::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -2107,47 +1871,47 @@ exports[`states renders correctly for a switch field with state primary 1`] = `
   position: absolute;
 }
 
-.c9[disabled] + .c7 {
+.c8[disabled] + .c6 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c9[disabled] + .c7::before {
+.c8[disabled] + .c6::before {
   background: #f2f2f2;
 }
 
-.c9:checked:focus + .c7 {
+.c8:checked:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c9:focus + .c7 {
+.c8:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c9:not([disabled]):checked + .c7 {
+.c8:not([disabled]):checked + .c6 {
   border-color: #7467c0;
   background-color: #3926a5;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c9:checked + .c7 {
+.c8:checked + .c6 {
   background-color: #9c92d2;
   border-color: #9c92d2;
 }
 
-.c9:checked + .c7::before {
+.c8:checked + .c6::before {
   border-color: #3926a5;
   left: 1.7em;
 }
 
-.c9[disabled]:checked + .c7::before {
+.c8[disabled]:checked + .c6::before {
   border-color: #9c92d2;
 }
 
-.c10 + .c7::before {
+.c9 + .c6::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -2161,47 +1925,47 @@ exports[`states renders correctly for a switch field with state primary 1`] = `
   position: absolute;
 }
 
-.c10[disabled] + .c7 {
+.c9[disabled] + .c6 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c10[disabled] + .c7::before {
+.c9[disabled] + .c6::before {
   background: #f2f2f2;
 }
 
-.c10:checked:focus + .c7 {
+.c9:checked:focus + .c6 {
   border-color: #e24c67;
   box-shadow: #e24c67 0px 0px 0px 1px !important;
 }
 
-.c10:focus + .c7 {
+.c9:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c10:not([disabled]):checked + .c7 {
+.c9:not([disabled]):checked + .c6 {
   border-color: #e24c67;
   background-color: #d60027;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c10:checked + .c7 {
+.c9:checked + .c6 {
   background-color: #ea7f93;
   border-color: #ea7f93;
 }
 
-.c10:checked + .c7::before {
+.c9:checked + .c6::before {
   border-color: #d60027;
   left: 1.7em;
 }
 
-.c10[disabled]:checked + .c7::before {
+.c9[disabled]:checked + .c6::before {
   border-color: #ea7f93;
 }
 
-.c11 + .c7::before {
+.c10 + .c6::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -2215,47 +1979,47 @@ exports[`states renders correctly for a switch field with state primary 1`] = `
   position: absolute;
 }
 
-.c11[disabled] + .c7 {
+.c10[disabled] + .c6 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c11[disabled] + .c7::before {
+.c10[disabled] + .c6::before {
   background: #f2f2f2;
 }
 
-.c11:checked:focus + .c7 {
+.c10:checked:focus + .c6 {
   border-color: #4ca26c;
   box-shadow: #4ca26c 0px 0px 0px 1px !important;
 }
 
-.c11:focus + .c7 {
+.c10:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11:not([disabled]):checked + .c7 {
+.c10:not([disabled]):checked + .c6 {
   border-color: #4ca26c;
   background-color: #007b2e;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c11:checked + .c7 {
+.c10:checked + .c6 {
   background-color: #7fbd96;
   border-color: #7fbd96;
 }
 
-.c11:checked + .c7::before {
+.c10:checked + .c6::before {
   border-color: #007b2e;
   left: 1.7em;
 }
 
-.c11[disabled]:checked + .c7::before {
+.c10[disabled]:checked + .c6::before {
   border-color: #7fbd96;
 }
 
-.c12 + .c7::before {
+.c11 + .c6::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -2269,47 +2033,47 @@ exports[`states renders correctly for a switch field with state primary 1`] = `
   position: absolute;
 }
 
-.c12[disabled] + .c7 {
+.c11[disabled] + .c6 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c12[disabled] + .c7::before {
+.c11[disabled] + .c6::before {
   background: #f2f2f2;
 }
 
-.c12:checked:focus + .c7 {
+.c11:checked:focus + .c6 {
   border-color: #ffc94c;
   box-shadow: #ffc94c 0px 0px 0px 1px !important;
 }
 
-.c12:focus + .c7 {
+.c11:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c12:not([disabled]):checked + .c7 {
+.c11:not([disabled]):checked + .c6 {
   border-color: #ffc94c;
   background-color: #ffb300;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c12:checked + .c7 {
+.c11:checked + .c6 {
   background-color: #ffd97f;
   border-color: #ffd97f;
 }
 
-.c12:checked + .c7::before {
+.c11:checked + .c6::before {
   border-color: #ffb300;
   left: 1.7em;
 }
 
-.c12[disabled]:checked + .c7::before {
+.c11[disabled]:checked + .c6::before {
   border-color: #ffd97f;
 }
 
-.c5 {
+.c4 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -2319,7 +2083,7 @@ exports[`states renders correctly for a switch field with state primary 1`] = `
   width: 1px;
 }
 
-.c5 + .c7::before {
+.c4 + .c6::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -2333,51 +2097,51 @@ exports[`states renders correctly for a switch field with state primary 1`] = `
   position: absolute;
 }
 
-.c5[disabled] + .c7 {
+.c4[disabled] + .c6 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c5[disabled] + .c7::before {
+.c4[disabled] + .c6::before {
   background: #f2f2f2;
 }
 
-.c5:checked:focus + .c7 {
+.c4:checked:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c5:focus + .c7 {
+.c4:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c5:not([disabled]):checked + .c7 {
+.c4:not([disabled]):checked + .c6 {
   border-color: #7467c0;
   background-color: #3926a5;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c5:checked + .c7 {
+.c4:checked + .c6 {
   background-color: #9c92d2;
   border-color: #9c92d2;
 }
 
-.c5:checked + .c7 {
+.c4:checked + .c6 {
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c5:checked + .c7::before {
+.c4:checked + .c6::before {
   border-color: #3926a5;
   left: 1.7em;
 }
 
-.c5[disabled]:checked + .c7::before {
+.c4[disabled]:checked + .c6::before {
   border-color: #9c92d2;
 }
 
-.c2 {
+.c1 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -2390,36 +2154,32 @@ exports[`states renders correctly for a switch field with state primary 1`] = `
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
-  <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+  <div />
+  <label
+    aria-describedby="label"
+    aria-invalid="false"
+    aria-required="false"
+    class="c1 c2 c3"
   >
-    <div />
-    <label
-      aria-describedby="label"
-      aria-invalid="false"
-      aria-required="false"
-      class="c2 c3 c4"
-    >
-      <input
-        class="c5 c6"
-        type="checkbox"
-        value=""
-      />
-      <div
-        class="c7 c8 c1"
-      />
-    </label>
-    <div />
-  </div>
+    <input
+      class="c4 c5"
+      type="checkbox"
+      value=""
+    />
+    <div
+      class="c6 c7 c0"
+    />
+  </label>
+  <div />
 </div>
 `;
 
 exports[`states renders correctly for a switch field with state success 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2432,7 +2192,7 @@ exports[`states renders correctly for a switch field with state success 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2446,7 +2206,7 @@ exports[`states renders correctly for a switch field with state success 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2459,37 +2219,11 @@ exports[`states renders correctly for a switch field with state success 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
+.c2 {
   display: inline-block;
 }
 
-.c8 {
+.c7 {
   background-color: #f2f2f2;
   border: 1px solid #bdbdbd;
   border-radius: 1em;
@@ -2498,12 +2232,12 @@ exports[`states renders correctly for a switch field with state success 1`] = `
   width: 3em;
 }
 
-.c8 {
+.c7 {
   border-color: #4ca26c;
   box-shadow: #4ca26c 0px 0px 0px 1px !important;
 }
 
-.c9 + .c7::before {
+.c8 + .c6::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -2517,47 +2251,47 @@ exports[`states renders correctly for a switch field with state success 1`] = `
   position: absolute;
 }
 
-.c9[disabled] + .c7 {
+.c8[disabled] + .c6 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c9[disabled] + .c7::before {
+.c8[disabled] + .c6::before {
   background: #f2f2f2;
 }
 
-.c9:checked:focus + .c7 {
+.c8:checked:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c9:focus + .c7 {
+.c8:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c9:not([disabled]):checked + .c7 {
+.c8:not([disabled]):checked + .c6 {
   border-color: #7467c0;
   background-color: #3926a5;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c9:checked + .c7 {
+.c8:checked + .c6 {
   background-color: #9c92d2;
   border-color: #9c92d2;
 }
 
-.c9:checked + .c7::before {
+.c8:checked + .c6::before {
   border-color: #3926a5;
   left: 1.7em;
 }
 
-.c9[disabled]:checked + .c7::before {
+.c8[disabled]:checked + .c6::before {
   border-color: #9c92d2;
 }
 
-.c10 + .c7::before {
+.c9 + .c6::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -2571,47 +2305,47 @@ exports[`states renders correctly for a switch field with state success 1`] = `
   position: absolute;
 }
 
-.c10[disabled] + .c7 {
+.c9[disabled] + .c6 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c10[disabled] + .c7::before {
+.c9[disabled] + .c6::before {
   background: #f2f2f2;
 }
 
-.c10:checked:focus + .c7 {
+.c9:checked:focus + .c6 {
   border-color: #e24c67;
   box-shadow: #e24c67 0px 0px 0px 1px !important;
 }
 
-.c10:focus + .c7 {
+.c9:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c10:not([disabled]):checked + .c7 {
+.c9:not([disabled]):checked + .c6 {
   border-color: #e24c67;
   background-color: #d60027;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c10:checked + .c7 {
+.c9:checked + .c6 {
   background-color: #ea7f93;
   border-color: #ea7f93;
 }
 
-.c10:checked + .c7::before {
+.c9:checked + .c6::before {
   border-color: #d60027;
   left: 1.7em;
 }
 
-.c10[disabled]:checked + .c7::before {
+.c9[disabled]:checked + .c6::before {
   border-color: #ea7f93;
 }
 
-.c11 + .c7::before {
+.c10 + .c6::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -2625,47 +2359,47 @@ exports[`states renders correctly for a switch field with state success 1`] = `
   position: absolute;
 }
 
-.c11[disabled] + .c7 {
+.c10[disabled] + .c6 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c11[disabled] + .c7::before {
+.c10[disabled] + .c6::before {
   background: #f2f2f2;
 }
 
-.c11:checked:focus + .c7 {
+.c10:checked:focus + .c6 {
   border-color: #4ca26c;
   box-shadow: #4ca26c 0px 0px 0px 1px !important;
 }
 
-.c11:focus + .c7 {
+.c10:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11:not([disabled]):checked + .c7 {
+.c10:not([disabled]):checked + .c6 {
   border-color: #4ca26c;
   background-color: #007b2e;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c11:checked + .c7 {
+.c10:checked + .c6 {
   background-color: #7fbd96;
   border-color: #7fbd96;
 }
 
-.c11:checked + .c7::before {
+.c10:checked + .c6::before {
   border-color: #007b2e;
   left: 1.7em;
 }
 
-.c11[disabled]:checked + .c7::before {
+.c10[disabled]:checked + .c6::before {
   border-color: #7fbd96;
 }
 
-.c12 + .c7::before {
+.c11 + .c6::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -2679,47 +2413,47 @@ exports[`states renders correctly for a switch field with state success 1`] = `
   position: absolute;
 }
 
-.c12[disabled] + .c7 {
+.c11[disabled] + .c6 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c12[disabled] + .c7::before {
+.c11[disabled] + .c6::before {
   background: #f2f2f2;
 }
 
-.c12:checked:focus + .c7 {
+.c11:checked:focus + .c6 {
   border-color: #ffc94c;
   box-shadow: #ffc94c 0px 0px 0px 1px !important;
 }
 
-.c12:focus + .c7 {
+.c11:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c12:not([disabled]):checked + .c7 {
+.c11:not([disabled]):checked + .c6 {
   border-color: #ffc94c;
   background-color: #ffb300;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c12:checked + .c7 {
+.c11:checked + .c6 {
   background-color: #ffd97f;
   border-color: #ffd97f;
 }
 
-.c12:checked + .c7::before {
+.c11:checked + .c6::before {
   border-color: #ffb300;
   left: 1.7em;
 }
 
-.c12[disabled]:checked + .c7::before {
+.c11[disabled]:checked + .c6::before {
   border-color: #ffd97f;
 }
 
-.c5 {
+.c4 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -2729,7 +2463,7 @@ exports[`states renders correctly for a switch field with state success 1`] = `
   width: 1px;
 }
 
-.c5 + .c7::before {
+.c4 + .c6::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -2743,51 +2477,51 @@ exports[`states renders correctly for a switch field with state success 1`] = `
   position: absolute;
 }
 
-.c5[disabled] + .c7 {
+.c4[disabled] + .c6 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c5[disabled] + .c7::before {
+.c4[disabled] + .c6::before {
   background: #f2f2f2;
 }
 
-.c5:checked:focus + .c7 {
+.c4:checked:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c5:focus + .c7 {
+.c4:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c5:not([disabled]):checked + .c7 {
+.c4:not([disabled]):checked + .c6 {
   border-color: #7467c0;
   background-color: #3926a5;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c5:checked + .c7 {
+.c4:checked + .c6 {
   background-color: #9c92d2;
   border-color: #9c92d2;
 }
 
-.c5:checked + .c7 {
+.c4:checked + .c6 {
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c5:checked + .c7::before {
+.c4:checked + .c6::before {
   border-color: #3926a5;
   left: 1.7em;
 }
 
-.c5[disabled]:checked + .c7::before {
+.c4[disabled]:checked + .c6::before {
   border-color: #9c92d2;
 }
 
-.c2 {
+.c1 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -2800,36 +2534,32 @@ exports[`states renders correctly for a switch field with state success 1`] = `
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
-  <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+  <div />
+  <label
+    aria-describedby="label"
+    aria-invalid="false"
+    aria-required="false"
+    class="c1 c2 c3"
   >
-    <div />
-    <label
-      aria-describedby="label"
-      aria-invalid="false"
-      aria-required="false"
-      class="c2 c3 c4"
-    >
-      <input
-        class="c5 c6"
-        type="checkbox"
-        value=""
-      />
-      <div
-        class="c7 c8 c1"
-      />
-    </label>
-    <div />
-  </div>
+    <input
+      class="c4 c5"
+      type="checkbox"
+      value=""
+    />
+    <div
+      class="c6 c7 c0"
+    />
+  </label>
+  <div />
 </div>
 `;
 
 exports[`states renders correctly for a switch field with state warning 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2842,7 +2572,7 @@ exports[`states renders correctly for a switch field with state warning 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2856,7 +2586,7 @@ exports[`states renders correctly for a switch field with state warning 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2869,37 +2599,11 @@ exports[`states renders correctly for a switch field with state warning 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
+.c2 {
   display: inline-block;
 }
 
-.c8 {
+.c7 {
   background-color: #f2f2f2;
   border: 1px solid #bdbdbd;
   border-radius: 1em;
@@ -2908,12 +2612,12 @@ exports[`states renders correctly for a switch field with state warning 1`] = `
   width: 3em;
 }
 
-.c8 {
+.c7 {
   border-color: #ffc94c;
   box-shadow: #ffc94c 0px 0px 0px 1px !important;
 }
 
-.c9 + .c7::before {
+.c8 + .c6::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -2927,47 +2631,47 @@ exports[`states renders correctly for a switch field with state warning 1`] = `
   position: absolute;
 }
 
-.c9[disabled] + .c7 {
+.c8[disabled] + .c6 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c9[disabled] + .c7::before {
+.c8[disabled] + .c6::before {
   background: #f2f2f2;
 }
 
-.c9:checked:focus + .c7 {
+.c8:checked:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c9:focus + .c7 {
+.c8:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c9:not([disabled]):checked + .c7 {
+.c8:not([disabled]):checked + .c6 {
   border-color: #7467c0;
   background-color: #3926a5;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c9:checked + .c7 {
+.c8:checked + .c6 {
   background-color: #9c92d2;
   border-color: #9c92d2;
 }
 
-.c9:checked + .c7::before {
+.c8:checked + .c6::before {
   border-color: #3926a5;
   left: 1.7em;
 }
 
-.c9[disabled]:checked + .c7::before {
+.c8[disabled]:checked + .c6::before {
   border-color: #9c92d2;
 }
 
-.c10 + .c7::before {
+.c9 + .c6::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -2981,47 +2685,47 @@ exports[`states renders correctly for a switch field with state warning 1`] = `
   position: absolute;
 }
 
-.c10[disabled] + .c7 {
+.c9[disabled] + .c6 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c10[disabled] + .c7::before {
+.c9[disabled] + .c6::before {
   background: #f2f2f2;
 }
 
-.c10:checked:focus + .c7 {
+.c9:checked:focus + .c6 {
   border-color: #e24c67;
   box-shadow: #e24c67 0px 0px 0px 1px !important;
 }
 
-.c10:focus + .c7 {
+.c9:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c10:not([disabled]):checked + .c7 {
+.c9:not([disabled]):checked + .c6 {
   border-color: #e24c67;
   background-color: #d60027;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c10:checked + .c7 {
+.c9:checked + .c6 {
   background-color: #ea7f93;
   border-color: #ea7f93;
 }
 
-.c10:checked + .c7::before {
+.c9:checked + .c6::before {
   border-color: #d60027;
   left: 1.7em;
 }
 
-.c10[disabled]:checked + .c7::before {
+.c9[disabled]:checked + .c6::before {
   border-color: #ea7f93;
 }
 
-.c11 + .c7::before {
+.c10 + .c6::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -3035,47 +2739,47 @@ exports[`states renders correctly for a switch field with state warning 1`] = `
   position: absolute;
 }
 
-.c11[disabled] + .c7 {
+.c10[disabled] + .c6 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c11[disabled] + .c7::before {
+.c10[disabled] + .c6::before {
   background: #f2f2f2;
 }
 
-.c11:checked:focus + .c7 {
+.c10:checked:focus + .c6 {
   border-color: #4ca26c;
   box-shadow: #4ca26c 0px 0px 0px 1px !important;
 }
 
-.c11:focus + .c7 {
+.c10:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11:not([disabled]):checked + .c7 {
+.c10:not([disabled]):checked + .c6 {
   border-color: #4ca26c;
   background-color: #007b2e;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c11:checked + .c7 {
+.c10:checked + .c6 {
   background-color: #7fbd96;
   border-color: #7fbd96;
 }
 
-.c11:checked + .c7::before {
+.c10:checked + .c6::before {
   border-color: #007b2e;
   left: 1.7em;
 }
 
-.c11[disabled]:checked + .c7::before {
+.c10[disabled]:checked + .c6::before {
   border-color: #7fbd96;
 }
 
-.c12 + .c7::before {
+.c11 + .c6::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -3089,47 +2793,47 @@ exports[`states renders correctly for a switch field with state warning 1`] = `
   position: absolute;
 }
 
-.c12[disabled] + .c7 {
+.c11[disabled] + .c6 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c12[disabled] + .c7::before {
+.c11[disabled] + .c6::before {
   background: #f2f2f2;
 }
 
-.c12:checked:focus + .c7 {
+.c11:checked:focus + .c6 {
   border-color: #ffc94c;
   box-shadow: #ffc94c 0px 0px 0px 1px !important;
 }
 
-.c12:focus + .c7 {
+.c11:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c12:not([disabled]):checked + .c7 {
+.c11:not([disabled]):checked + .c6 {
   border-color: #ffc94c;
   background-color: #ffb300;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c12:checked + .c7 {
+.c11:checked + .c6 {
   background-color: #ffd97f;
   border-color: #ffd97f;
 }
 
-.c12:checked + .c7::before {
+.c11:checked + .c6::before {
   border-color: #ffb300;
   left: 1.7em;
 }
 
-.c12[disabled]:checked + .c7::before {
+.c11[disabled]:checked + .c6::before {
   border-color: #ffd97f;
 }
 
-.c5 {
+.c4 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   height: 1px;
@@ -3139,7 +2843,7 @@ exports[`states renders correctly for a switch field with state warning 1`] = `
   width: 1px;
 }
 
-.c5 + .c7::before {
+.c4 + .c6::before {
   background: white;
   content: '';
   border-radius: 100%;
@@ -3153,51 +2857,51 @@ exports[`states renders correctly for a switch field with state warning 1`] = `
   position: absolute;
 }
 
-.c5[disabled] + .c7 {
+.c4[disabled] + .c6 {
   background-color: #f2f2f2;
   box-shadow: unset;
 }
 
-.c5[disabled] + .c7::before {
+.c4[disabled] + .c6::before {
   background: #f2f2f2;
 }
 
-.c5:checked:focus + .c7 {
+.c4:checked:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c5:focus + .c7 {
+.c4:focus + .c6 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c5:not([disabled]):checked + .c7 {
+.c4:not([disabled]):checked + .c6 {
   border-color: #7467c0;
   background-color: #3926a5;
   -webkit-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
 
-.c5:checked + .c7 {
+.c4:checked + .c6 {
   background-color: #9c92d2;
   border-color: #9c92d2;
 }
 
-.c5:checked + .c7 {
+.c4:checked + .c6 {
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c5:checked + .c7::before {
+.c4:checked + .c6::before {
   border-color: #3926a5;
   left: 1.7em;
 }
 
-.c5[disabled]:checked + .c7::before {
+.c4[disabled]:checked + .c6::before {
   border-color: #9c92d2;
 }
 
-.c2 {
+.c1 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -3210,30 +2914,26 @@ exports[`states renders correctly for a switch field with state warning 1`] = `
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
-  <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+  <div />
+  <label
+    aria-describedby="label"
+    aria-invalid="false"
+    aria-required="false"
+    class="c1 c2 c3"
   >
-    <div />
-    <label
-      aria-describedby="label"
-      aria-invalid="false"
-      aria-required="false"
-      class="c2 c3 c4"
-    >
-      <input
-        class="c5 c6"
-        type="checkbox"
-        value=""
-      />
-      <div
-        class="c7 c8 c1"
-      />
-    </label>
-    <div />
-  </div>
+    <input
+      class="c4 c5"
+      type="checkbox"
+      value=""
+    />
+    <div
+      class="c6 c7 c0"
+    />
+  </label>
+  <div />
 </div>
 `;
diff --git a/src/Table/__tests__/__snapshots__/Table.test.js.snap b/src/Table/__tests__/__snapshots__/Table.test.js.snap
index d77dda541..086dbdb94 100644
--- a/src/Table/__tests__/__snapshots__/Table.test.js.snap
+++ b/src/Table/__tests__/__snapshots__/Table.test.js.snap
@@ -14,227 +14,36 @@ exports[`borders renders correctly when an outer border is set 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c6 {
+.c5 {
   padding: 0.5rem;
 }
 
-.c4 {
+.c3 {
   border: unset;
 }
 
-.c4 {
+.c3 {
   border-bottom: 2px solid #b3b3b3;
 }
 
-.c5 {
+.c4 {
   font-weight: bold;
   padding: 0.5rem;
 }
 
-.c3 {
+.c2 {
   border-collapse: collapse;
   border-spacing: 0;
   text-align: left;
 }
 
-.c2 {
+.c0 {
   display: inline-block;
   border: 1px solid #b3b3b3;
   border-radius: 5px;
   padding: 0.25rem 0.5rem;
 }
 
-<div
-  class="c0 c1"
->
-  <div
-    class="c2 c1"
-  >
-    <table
-      class="c3 c1"
-    >
-      <thead
-        class="c4 c1"
-      >
-        <tr
-          class="c1"
-        >
-          <th
-            class="c5 c1"
-          >
-            Name
-          </th>
-          <th
-            class="c5 c1"
-          >
-            Quantity
-          </th>
-          <th
-            class="c5 c1"
-          >
-            Price
-          </th>
-        </tr>
-      </thead>
-      <tbody
-        class="c1"
-      >
-        <tr
-          class="c1"
-        >
-          <td
-            class="c6 c1"
-          >
-            Nike
-          </td>
-          <td
-            class="c6 c1"
-          >
-            3
-          </td>
-          <td
-            class="c6 c1"
-          >
-            $9.00
-          </td>
-        </tr>
-        <tr
-          class="c1"
-        >
-          <td
-            class="c6 c1"
-          >
-            Adidas
-          </td>
-          <td
-            class="c6 c1"
-          >
-            4
-          </td>
-          <td
-            class="c6 c1"
-          >
-            $12.00
-          </td>
-        </tr>
-        <tr
-          class="c1"
-        >
-          <td
-            class="c6 c1"
-          >
-            North Face
-          </td>
-          <td
-            class="c6 c1"
-          >
-            5
-          </td>
-          <td
-            class="c6 c1"
-          >
-            $15.00
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</div>
-`;
-
-exports[`borders renders correctly when row borders are set 1`] = `
-.c1 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
-}
-
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c7 {
-  padding: 0.5rem;
-}
-
-.c3 {
-  border: unset;
-}
-
-.c3 {
-  border-bottom: 2px solid #b3b3b3;
-}
-
-.c5 {
-  font-weight: bold;
-  padding: 0.5rem;
-}
-
-.c6 .c4 {
-  border-bottom: 1px solid #b3b3b3;
-}
-
-.c2 {
-  border-collapse: collapse;
-  border-spacing: 0;
-  text-align: left;
-}
-
 <div
   class="c0 c1"
 >
@@ -245,81 +54,81 @@ exports[`borders renders correctly when row borders are set 1`] = `
       class="c3 c1"
     >
       <tr
-        class="c4 c1"
+        class="c1"
       >
         <th
-          class="c5 c1"
+          class="c4 c1"
         >
           Name
         </th>
         <th
-          class="c5 c1"
+          class="c4 c1"
         >
           Quantity
         </th>
         <th
-          class="c5 c1"
+          class="c4 c1"
         >
           Price
         </th>
       </tr>
     </thead>
     <tbody
-      class="c6 c1"
+      class="c1"
     >
       <tr
-        class="c4 c1"
+        class="c1"
       >
         <td
-          class="c7 c1"
+          class="c5 c1"
         >
           Nike
         </td>
         <td
-          class="c7 c1"
+          class="c5 c1"
         >
           3
         </td>
         <td
-          class="c7 c1"
+          class="c5 c1"
         >
           $9.00
         </td>
       </tr>
       <tr
-        class="c4 c1"
+        class="c1"
       >
         <td
-          class="c7 c1"
+          class="c5 c1"
         >
           Adidas
         </td>
         <td
-          class="c7 c1"
+          class="c5 c1"
         >
           4
         </td>
         <td
-          class="c7 c1"
+          class="c5 c1"
         >
           $12.00
         </td>
       </tr>
       <tr
-        class="c4 c1"
+        class="c1"
       >
         <td
-          class="c7 c1"
+          class="c5 c1"
         >
           North Face
         </td>
         <td
-          class="c7 c1"
+          class="c5 c1"
         >
           5
         </td>
         <td
-          class="c7 c1"
+          class="c5 c1"
         >
           $15.00
         </td>
@@ -329,7 +138,7 @@ exports[`borders renders correctly when row borders are set 1`] = `
 </div>
 `;
 
-exports[`renders correctly for a basic table 1`] = `
+exports[`borders renders correctly when row borders are set 1`] = `
 .c1 {
   margin: unset;
   padding: unset;
@@ -343,41 +152,15 @@ exports[`renders correctly for a basic table 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c5 {
+.c6 {
   padding: 0.5rem;
 }
 
-.c3 {
+.c2 {
   border: unset;
 }
 
-.c3 {
+.c2 {
   border-bottom: 2px solid #b3b3b3;
 }
 
@@ -386,107 +169,107 @@ exports[`renders correctly for a basic table 1`] = `
   padding: 0.5rem;
 }
 
-.c2 {
+.c5 .c3 {
+  border-bottom: 1px solid #b3b3b3;
+}
+
+.c0 {
   border-collapse: collapse;
   border-spacing: 0;
   text-align: left;
 }
 
-<div
+<table
   class="c0 c1"
 >
-  <table
+  <thead
     class="c2 c1"
   >
-    <thead
+    <tr
       class="c3 c1"
     >
-      <tr
-        class="c1"
+      <th
+        class="c4 c1"
       >
-        <th
-          class="c4 c1"
-        >
-          Name
-        </th>
-        <th
-          class="c4 c1"
-        >
-          Quantity
-        </th>
-        <th
-          class="c4 c1"
-        >
-          Price
-        </th>
-      </tr>
-    </thead>
-    <tbody
-      class="c1"
+        Name
+      </th>
+      <th
+        class="c4 c1"
+      >
+        Quantity
+      </th>
+      <th
+        class="c4 c1"
+      >
+        Price
+      </th>
+    </tr>
+  </thead>
+  <tbody
+    class="c5 c1"
+  >
+    <tr
+      class="c3 c1"
     >
-      <tr
-        class="c1"
+      <td
+        class="c6 c1"
       >
-        <td
-          class="c5 c1"
-        >
-          Nike
-        </td>
-        <td
-          class="c5 c1"
-        >
-          3
-        </td>
-        <td
-          class="c5 c1"
-        >
-          $9.00
-        </td>
-      </tr>
-      <tr
-        class="c1"
+        Nike
+      </td>
+      <td
+        class="c6 c1"
       >
-        <td
-          class="c5 c1"
-        >
-          Adidas
-        </td>
-        <td
-          class="c5 c1"
-        >
-          4
-        </td>
-        <td
-          class="c5 c1"
-        >
-          $12.00
-        </td>
-      </tr>
-      <tr
-        class="c1"
+        3
+      </td>
+      <td
+        class="c6 c1"
       >
-        <td
-          class="c5 c1"
-        >
-          North Face
-        </td>
-        <td
-          class="c5 c1"
-        >
-          5
-        </td>
-        <td
-          class="c5 c1"
-        >
-          $15.00
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
+        $9.00
+      </td>
+    </tr>
+    <tr
+      class="c3 c1"
+    >
+      <td
+        class="c6 c1"
+      >
+        Adidas
+      </td>
+      <td
+        class="c6 c1"
+      >
+        4
+      </td>
+      <td
+        class="c6 c1"
+      >
+        $12.00
+      </td>
+    </tr>
+    <tr
+      class="c3 c1"
+    >
+      <td
+        class="c6 c1"
+      >
+        North Face
+      </td>
+      <td
+        class="c6 c1"
+      >
+        5
+      </td>
+      <td
+        class="c6 c1"
+      >
+        $15.00
+      </td>
+    </tr>
+  </tbody>
+</table>
 `;
 
-exports[`renders correctly for a full width table 1`] = `
+exports[`renders correctly for a basic table 1`] = `
 .c1 {
   margin: unset;
   padding: unset;
@@ -500,154 +283,120 @@ exports[`renders correctly for a full width table 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c5 {
+.c4 {
   padding: 0.5rem;
 }
 
-.c3 {
+.c2 {
   border: unset;
 }
 
-.c3 {
+.c2 {
   border-bottom: 2px solid #b3b3b3;
 }
 
-.c4 {
+.c3 {
   font-weight: bold;
   padding: 0.5rem;
 }
 
-.c2 {
+.c0 {
   border-collapse: collapse;
   border-spacing: 0;
   text-align: left;
 }
 
-.c2 {
-  width: 100%;
-}
-
-<div
+<table
   class="c0 c1"
 >
-  <table
+  <thead
     class="c2 c1"
   >
-    <thead
-      class="c3 c1"
+    <tr
+      class="c1"
     >
-      <tr
-        class="c1"
+      <th
+        class="c3 c1"
       >
-        <th
-          class="c4 c1"
-        >
-          Name
-        </th>
-        <th
-          class="c4 c1"
-        >
-          Quantity
-        </th>
-        <th
-          class="c4 c1"
-        >
-          Price
-        </th>
-      </tr>
-    </thead>
-    <tbody
+        Name
+      </th>
+      <th
+        class="c3 c1"
+      >
+        Quantity
+      </th>
+      <th
+        class="c3 c1"
+      >
+        Price
+      </th>
+    </tr>
+  </thead>
+  <tbody
+    class="c1"
+  >
+    <tr
       class="c1"
     >
-      <tr
-        class="c1"
+      <td
+        class="c4 c1"
       >
-        <td
-          class="c5 c1"
-        >
-          Nike
-        </td>
-        <td
-          class="c5 c1"
-        >
-          3
-        </td>
-        <td
-          class="c5 c1"
-        >
-          $9.00
-        </td>
-      </tr>
-      <tr
-        class="c1"
+        Nike
+      </td>
+      <td
+        class="c4 c1"
       >
-        <td
-          class="c5 c1"
-        >
-          Adidas
-        </td>
-        <td
-          class="c5 c1"
-        >
-          4
-        </td>
-        <td
-          class="c5 c1"
-        >
-          $12.00
-        </td>
-      </tr>
-      <tr
-        class="c1"
+        3
+      </td>
+      <td
+        class="c4 c1"
       >
-        <td
-          class="c5 c1"
-        >
-          North Face
-        </td>
-        <td
-          class="c5 c1"
-        >
-          5
-        </td>
-        <td
-          class="c5 c1"
-        >
-          $15.00
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
+        $9.00
+      </td>
+    </tr>
+    <tr
+      class="c1"
+    >
+      <td
+        class="c4 c1"
+      >
+        Adidas
+      </td>
+      <td
+        class="c4 c1"
+      >
+        4
+      </td>
+      <td
+        class="c4 c1"
+      >
+        $12.00
+      </td>
+    </tr>
+    <tr
+      class="c1"
+    >
+      <td
+        class="c4 c1"
+      >
+        North Face
+      </td>
+      <td
+        class="c4 c1"
+      >
+        5
+      </td>
+      <td
+        class="c4 c1"
+      >
+        $15.00
+      </td>
+    </tr>
+  </tbody>
+</table>
 `;
 
-exports[`renders correctly for a hoverable table 1`] = `
+exports[`renders correctly for a full width table 1`] = `
 .c1 {
   margin: unset;
   padding: unset;
@@ -661,159 +410,260 @@ exports[`renders correctly for a hoverable table 1`] = `
   color: inherit;
 }
 
+.c4 {
+  padding: 0.5rem;
+}
+
+.c2 {
+  border: unset;
+}
+
+.c2 {
+  border-bottom: 2px solid #b3b3b3;
+}
+
+.c3 {
+  font-weight: bold;
+  padding: 0.5rem;
+}
+
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
+  border-collapse: collapse;
+  border-spacing: 0;
+  text-align: left;
 }
 
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
+.c0 {
+  width: 100%;
 }
 
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
+<table
+  class="c0 c1"
+>
+  <thead
+    class="c2 c1"
+  >
+    <tr
+      class="c1"
+    >
+      <th
+        class="c3 c1"
+      >
+        Name
+      </th>
+      <th
+        class="c3 c1"
+      >
+        Quantity
+      </th>
+      <th
+        class="c3 c1"
+      >
+        Price
+      </th>
+    </tr>
+  </thead>
+  <tbody
+    class="c1"
+  >
+    <tr
+      class="c1"
+    >
+      <td
+        class="c4 c1"
+      >
+        Nike
+      </td>
+      <td
+        class="c4 c1"
+      >
+        3
+      </td>
+      <td
+        class="c4 c1"
+      >
+        $9.00
+      </td>
+    </tr>
+    <tr
+      class="c1"
+    >
+      <td
+        class="c4 c1"
+      >
+        Adidas
+      </td>
+      <td
+        class="c4 c1"
+      >
+        4
+      </td>
+      <td
+        class="c4 c1"
+      >
+        $12.00
+      </td>
+    </tr>
+    <tr
+      class="c1"
+    >
+      <td
+        class="c4 c1"
+      >
+        North Face
+      </td>
+      <td
+        class="c4 c1"
+      >
+        5
+      </td>
+      <td
+        class="c4 c1"
+      >
+        $15.00
+      </td>
+    </tr>
+  </tbody>
+</table>
+`;
+
+exports[`renders correctly for a hoverable table 1`] = `
+.c1 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: inherit;
 }
 
-.c7 {
+.c6 {
   padding: 0.5rem;
 }
 
-.c3 {
+.c2 {
   border: unset;
 }
 
-.c3 {
+.c2 {
   border-bottom: 2px solid #b3b3b3;
 }
 
-.c5 {
+.c4 {
   font-weight: bold;
   padding: 0.5rem;
 }
 
-.c8 .c4 {
+.c7 .c3 {
   border-bottom: 1px solid #b3b3b3;
 }
 
-.c9 .c6 .c4:nth-child(even) {
+.c8 .c5 .c3:nth-child(even) {
   background-color: #f7f7f7;
 }
 
-.c2 {
+.c0 {
   border-collapse: collapse;
   border-spacing: 0;
   text-align: left;
 }
 
-.c2 .c6 .c4:hover {
+.c0 .c5 .c3:hover {
   background-color: #f2f2f2 !important;
 }
 
-<div
+<table
   class="c0 c1"
 >
-  <table
+  <thead
     class="c2 c1"
   >
-    <thead
+    <tr
       class="c3 c1"
     >
-      <tr
+      <th
         class="c4 c1"
       >
-        <th
-          class="c5 c1"
-        >
-          Name
-        </th>
-        <th
-          class="c5 c1"
-        >
-          Quantity
-        </th>
-        <th
-          class="c5 c1"
-        >
-          Price
-        </th>
-      </tr>
-    </thead>
-    <tbody
-      class="c6 c1"
-    >
-      <tr
+        Name
+      </th>
+      <th
         class="c4 c1"
       >
-        <td
-          class="c7 c1"
-        >
-          Nike
-        </td>
-        <td
-          class="c7 c1"
-        >
-          3
-        </td>
-        <td
-          class="c7 c1"
-        >
-          $9.00
-        </td>
-      </tr>
-      <tr
+        Quantity
+      </th>
+      <th
         class="c4 c1"
       >
-        <td
-          class="c7 c1"
-        >
-          Adidas
-        </td>
-        <td
-          class="c7 c1"
-        >
-          4
-        </td>
-        <td
-          class="c7 c1"
-        >
-          $12.00
-        </td>
-      </tr>
-      <tr
-        class="c4 c1"
+        Price
+      </th>
+    </tr>
+  </thead>
+  <tbody
+    class="c5 c1"
+  >
+    <tr
+      class="c3 c1"
+    >
+      <td
+        class="c6 c1"
       >
-        <td
-          class="c7 c1"
-        >
-          North Face
-        </td>
-        <td
-          class="c7 c1"
-        >
-          5
-        </td>
-        <td
-          class="c7 c1"
-        >
-          $15.00
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
+        Nike
+      </td>
+      <td
+        class="c6 c1"
+      >
+        3
+      </td>
+      <td
+        class="c6 c1"
+      >
+        $9.00
+      </td>
+    </tr>
+    <tr
+      class="c3 c1"
+    >
+      <td
+        class="c6 c1"
+      >
+        Adidas
+      </td>
+      <td
+        class="c6 c1"
+      >
+        4
+      </td>
+      <td
+        class="c6 c1"
+      >
+        $12.00
+      </td>
+    </tr>
+    <tr
+      class="c3 c1"
+    >
+      <td
+        class="c6 c1"
+      >
+        North Face
+      </td>
+      <td
+        class="c6 c1"
+      >
+        5
+      </td>
+      <td
+        class="c6 c1"
+      >
+        $15.00
+      </td>
+    </tr>
+  </tbody>
+</table>
 `;
 
 exports[`renders correctly for a striped table 1`] = `
@@ -830,155 +680,125 @@ exports[`renders correctly for a striped table 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c7 {
+.c6 {
   padding: 0.5rem;
 }
 
-.c3 {
+.c2 {
   border: unset;
 }
 
-.c3 {
+.c2 {
   border-bottom: 2px solid #b3b3b3;
 }
 
-.c5 {
+.c4 {
   font-weight: bold;
   padding: 0.5rem;
 }
 
-.c8 .c4 {
+.c7 .c3 {
   border-bottom: 1px solid #b3b3b3;
 }
 
-.c2 {
+.c0 {
   border-collapse: collapse;
   border-spacing: 0;
   text-align: left;
 }
 
-.c2 .c6 .c4:nth-child(even) {
+.c0 .c5 .c3:nth-child(even) {
   background-color: #f7f7f7;
 }
 
-<div
+<table
   class="c0 c1"
 >
-  <table
+  <thead
     class="c2 c1"
   >
-    <thead
+    <tr
       class="c3 c1"
     >
-      <tr
+      <th
         class="c4 c1"
       >
-        <th
-          class="c5 c1"
-        >
-          Name
-        </th>
-        <th
-          class="c5 c1"
-        >
-          Quantity
-        </th>
-        <th
-          class="c5 c1"
-        >
-          Price
-        </th>
-      </tr>
-    </thead>
-    <tbody
-      class="c6 c1"
-    >
-      <tr
+        Name
+      </th>
+      <th
         class="c4 c1"
       >
-        <td
-          class="c7 c1"
-        >
-          Nike
-        </td>
-        <td
-          class="c7 c1"
-        >
-          3
-        </td>
-        <td
-          class="c7 c1"
-        >
-          $9.00
-        </td>
-      </tr>
-      <tr
+        Quantity
+      </th>
+      <th
         class="c4 c1"
       >
-        <td
-          class="c7 c1"
-        >
-          Adidas
-        </td>
-        <td
-          class="c7 c1"
-        >
-          4
-        </td>
-        <td
-          class="c7 c1"
-        >
-          $12.00
-        </td>
-      </tr>
-      <tr
-        class="c4 c1"
+        Price
+      </th>
+    </tr>
+  </thead>
+  <tbody
+    class="c5 c1"
+  >
+    <tr
+      class="c3 c1"
+    >
+      <td
+        class="c6 c1"
       >
-        <td
-          class="c7 c1"
-        >
-          North Face
-        </td>
-        <td
-          class="c7 c1"
-        >
-          5
-        </td>
-        <td
-          class="c7 c1"
-        >
-          $15.00
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
+        Nike
+      </td>
+      <td
+        class="c6 c1"
+      >
+        3
+      </td>
+      <td
+        class="c6 c1"
+      >
+        $9.00
+      </td>
+    </tr>
+    <tr
+      class="c3 c1"
+    >
+      <td
+        class="c6 c1"
+      >
+        Adidas
+      </td>
+      <td
+        class="c6 c1"
+      >
+        4
+      </td>
+      <td
+        class="c6 c1"
+      >
+        $12.00
+      </td>
+    </tr>
+    <tr
+      class="c3 c1"
+    >
+      <td
+        class="c6 c1"
+      >
+        North Face
+      </td>
+      <td
+        class="c6 c1"
+      >
+        5
+      </td>
+      <td
+        class="c6 c1"
+      >
+        $15.00
+      </td>
+    </tr>
+  </tbody>
+</table>
 `;
 
 exports[`renders correctly for a table with a bottom caption 1`] = `
@@ -995,169 +815,139 @@ exports[`renders correctly for a table with a bottom caption 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
+.c2 {
   caption-side: bottom;
 }
 
-.c8 {
+.c7 {
   padding: 0.5rem;
 }
 
-.c4 {
+.c3 {
   border: unset;
 }
 
-.c4 {
+.c3 {
   border-bottom: 2px solid #b3b3b3;
 }
 
-.c6 {
+.c5 {
   font-weight: bold;
   padding: 0.5rem;
 }
 
-.c9 .c5 {
+.c8 .c4 {
   border-bottom: 1px solid #b3b3b3;
 }
 
-.c2 {
+.c0 {
   border-collapse: collapse;
   border-spacing: 0;
   text-align: left;
 }
 
-.c10 .c7 .c5:nth-child(even) {
+.c9 .c6 .c4:nth-child(even) {
   background-color: #f7f7f7;
 }
 
-.c11 .c7 .c5:hover {
+.c10 .c6 .c4:hover {
   background-color: #f2f2f2 !important;
 }
 
-<div
+<table
   class="c0 c1"
 >
-  <table
+  <caption
     class="c2 c1"
+    style="position: bottom;"
   >
-    <caption
-      class="c3 c1"
-      style="position: bottom;"
-    >
-      Fannypacks
-    </caption>
-    <thead
+    Fannypacks
+  </caption>
+  <thead
+    class="c3 c1"
+  >
+    <tr
       class="c4 c1"
     >
-      <tr
+      <th
         class="c5 c1"
       >
-        <th
-          class="c6 c1"
-        >
-          Name
-        </th>
-        <th
-          class="c6 c1"
-        >
-          Quantity
-        </th>
-        <th
-          class="c6 c1"
-        >
-          Price
-        </th>
-      </tr>
-    </thead>
-    <tbody
-      class="c7 c1"
-    >
-      <tr
+        Name
+      </th>
+      <th
         class="c5 c1"
       >
-        <td
-          class="c8 c1"
-        >
-          Nike
-        </td>
-        <td
-          class="c8 c1"
-        >
-          3
-        </td>
-        <td
-          class="c8 c1"
-        >
-          $9.00
-        </td>
-      </tr>
-      <tr
+        Quantity
+      </th>
+      <th
         class="c5 c1"
       >
-        <td
-          class="c8 c1"
-        >
-          Adidas
-        </td>
-        <td
-          class="c8 c1"
-        >
-          4
-        </td>
-        <td
-          class="c8 c1"
-        >
-          $12.00
-        </td>
-      </tr>
-      <tr
-        class="c5 c1"
+        Price
+      </th>
+    </tr>
+  </thead>
+  <tbody
+    class="c6 c1"
+  >
+    <tr
+      class="c4 c1"
+    >
+      <td
+        class="c7 c1"
       >
-        <td
-          class="c8 c1"
-        >
-          North Face
-        </td>
-        <td
-          class="c8 c1"
-        >
-          5
-        </td>
-        <td
-          class="c8 c1"
-        >
-          $15.00
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
+        Nike
+      </td>
+      <td
+        class="c7 c1"
+      >
+        3
+      </td>
+      <td
+        class="c7 c1"
+      >
+        $9.00
+      </td>
+    </tr>
+    <tr
+      class="c4 c1"
+    >
+      <td
+        class="c7 c1"
+      >
+        Adidas
+      </td>
+      <td
+        class="c7 c1"
+      >
+        4
+      </td>
+      <td
+        class="c7 c1"
+      >
+        $12.00
+      </td>
+    </tr>
+    <tr
+      class="c4 c1"
+    >
+      <td
+        class="c7 c1"
+      >
+        North Face
+      </td>
+      <td
+        class="c7 c1"
+      >
+        5
+      </td>
+      <td
+        class="c7 c1"
+      >
+        $15.00
+      </td>
+    </tr>
+  </tbody>
+</table>
 `;
 
 exports[`renders correctly for a table with a footer 1`] = `
@@ -1174,176 +964,146 @@ exports[`renders correctly for a table with a footer 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c5 {
+.c4 {
   padding: 0.5rem;
 }
 
-.c6 {
+.c5 {
   font-weight: bold;
 }
 
-.c6 {
+.c5 {
   border-top: 2px solid #b3b3b3;
 }
 
-.c3 {
+.c2 {
   border: unset;
 }
 
-.c3 {
+.c2 {
   border-bottom: 2px solid #b3b3b3;
 }
 
-.c4 {
+.c3 {
   font-weight: bold;
   padding: 0.5rem;
 }
 
-.c2 {
+.c0 {
   border-collapse: collapse;
   border-spacing: 0;
   text-align: left;
 }
 
-<div
+<table
   class="c0 c1"
 >
-  <table
+  <thead
     class="c2 c1"
   >
-    <thead
-      class="c3 c1"
+    <tr
+      class="c1"
     >
-      <tr
-        class="c1"
+      <th
+        class="c3 c1"
       >
-        <th
-          class="c4 c1"
-        >
-          Name
-        </th>
-        <th
-          class="c4 c1"
-        >
-          Quantity
-        </th>
-        <th
-          class="c4 c1"
-        >
-          Price
-        </th>
-      </tr>
-    </thead>
-    <tbody
+        Name
+      </th>
+      <th
+        class="c3 c1"
+      >
+        Quantity
+      </th>
+      <th
+        class="c3 c1"
+      >
+        Price
+      </th>
+    </tr>
+  </thead>
+  <tbody
+    class="c1"
+  >
+    <tr
       class="c1"
     >
-      <tr
-        class="c1"
+      <td
+        class="c4 c1"
       >
-        <td
-          class="c5 c1"
-        >
-          Nike
-        </td>
-        <td
-          class="c5 c1"
-        >
-          3
-        </td>
-        <td
-          class="c5 c1"
-        >
-          $9.00
-        </td>
-      </tr>
-      <tr
-        class="c1"
+        Nike
+      </td>
+      <td
+        class="c4 c1"
       >
-        <td
-          class="c5 c1"
-        >
-          Adidas
-        </td>
-        <td
-          class="c5 c1"
-        >
-          4
-        </td>
-        <td
-          class="c5 c1"
-        >
-          $12.00
-        </td>
-      </tr>
-      <tr
-        class="c1"
+        3
+      </td>
+      <td
+        class="c4 c1"
       >
-        <td
-          class="c5 c1"
-        >
-          North Face
-        </td>
-        <td
-          class="c5 c1"
-        >
-          5
-        </td>
-        <td
-          class="c5 c1"
-        >
-          $15.00
-        </td>
-      </tr>
-    </tbody>
-    <tfoot
-      class="c6 c1"
+        $9.00
+      </td>
+    </tr>
+    <tr
+      class="c1"
     >
-      <tr
-        class="c1"
+      <td
+        class="c4 c1"
       >
-        <td
-          class="c5 c1"
-        >
-          Total
-        </td>
-        <td
-          class="c5 c1"
-        />
-        <td
-          class="c5 c1"
-        >
-          $36.00
-        </td>
-      </tr>
-    </tfoot>
-  </table>
-</div>
+        Adidas
+      </td>
+      <td
+        class="c4 c1"
+      >
+        4
+      </td>
+      <td
+        class="c4 c1"
+      >
+        $12.00
+      </td>
+    </tr>
+    <tr
+      class="c1"
+    >
+      <td
+        class="c4 c1"
+      >
+        North Face
+      </td>
+      <td
+        class="c4 c1"
+      >
+        5
+      </td>
+      <td
+        class="c4 c1"
+      >
+        $15.00
+      </td>
+    </tr>
+  </tbody>
+  <tfoot
+    class="c5 c1"
+  >
+    <tr
+      class="c1"
+    >
+      <td
+        class="c4 c1"
+      >
+        Total
+      </td>
+      <td
+        class="c4 c1"
+      />
+      <td
+        class="c4 c1"
+      >
+        $36.00
+      </td>
+    </tr>
+  </tfoot>
+</table>
 `;
 
 exports[`renders correctly for a table with a top caption 1`] = `
@@ -1360,167 +1120,137 @@ exports[`renders correctly for a table with a top caption 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
+.c2 {
   caption-side: top;
 }
 
-.c8 {
+.c7 {
   padding: 0.5rem;
 }
 
-.c4 {
+.c3 {
   border: unset;
 }
 
-.c4 {
+.c3 {
   border-bottom: 2px solid #b3b3b3;
 }
 
-.c6 {
+.c5 {
   font-weight: bold;
   padding: 0.5rem;
 }
 
-.c9 .c5 {
+.c8 .c4 {
   border-bottom: 1px solid #b3b3b3;
 }
 
-.c2 {
+.c0 {
   border-collapse: collapse;
   border-spacing: 0;
   text-align: left;
 }
 
-.c10 .c7 .c5:nth-child(even) {
+.c9 .c6 .c4:nth-child(even) {
   background-color: #f7f7f7;
 }
 
-.c11 .c7 .c5:hover {
+.c10 .c6 .c4:hover {
   background-color: #f2f2f2 !important;
 }
 
-<div
+<table
   class="c0 c1"
 >
-  <table
+  <caption
     class="c2 c1"
+    style="position: top;"
   >
-    <caption
-      class="c3 c1"
-      style="position: top;"
-    >
-      Fannypacks
-    </caption>
-    <thead
+    Fannypacks
+  </caption>
+  <thead
+    class="c3 c1"
+  >
+    <tr
       class="c4 c1"
     >
-      <tr
+      <th
         class="c5 c1"
       >
-        <th
-          class="c6 c1"
-        >
-          Name
-        </th>
-        <th
-          class="c6 c1"
-        >
-          Quantity
-        </th>
-        <th
-          class="c6 c1"
-        >
-          Price
-        </th>
-      </tr>
-    </thead>
-    <tbody
-      class="c7 c1"
-    >
-      <tr
+        Name
+      </th>
+      <th
         class="c5 c1"
       >
-        <td
-          class="c8 c1"
-        >
-          Nike
-        </td>
-        <td
-          class="c8 c1"
-        >
-          3
-        </td>
-        <td
-          class="c8 c1"
-        >
-          $9.00
-        </td>
-      </tr>
-      <tr
+        Quantity
+      </th>
+      <th
         class="c5 c1"
       >
-        <td
-          class="c8 c1"
-        >
-          Adidas
-        </td>
-        <td
-          class="c8 c1"
-        >
-          4
-        </td>
-        <td
-          class="c8 c1"
-        >
-          $12.00
-        </td>
-      </tr>
-      <tr
-        class="c5 c1"
+        Price
+      </th>
+    </tr>
+  </thead>
+  <tbody
+    class="c6 c1"
+  >
+    <tr
+      class="c4 c1"
+    >
+      <td
+        class="c7 c1"
       >
-        <td
-          class="c8 c1"
-        >
-          North Face
-        </td>
-        <td
-          class="c8 c1"
-        >
-          5
-        </td>
-        <td
-          class="c8 c1"
-        >
-          $15.00
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
+        Nike
+      </td>
+      <td
+        class="c7 c1"
+      >
+        3
+      </td>
+      <td
+        class="c7 c1"
+      >
+        $9.00
+      </td>
+    </tr>
+    <tr
+      class="c4 c1"
+    >
+      <td
+        class="c7 c1"
+      >
+        Adidas
+      </td>
+      <td
+        class="c7 c1"
+      >
+        4
+      </td>
+      <td
+        class="c7 c1"
+      >
+        $12.00
+      </td>
+    </tr>
+    <tr
+      class="c4 c1"
+    >
+      <td
+        class="c7 c1"
+      >
+        North Face
+      </td>
+      <td
+        class="c7 c1"
+      >
+        5
+      </td>
+      <td
+        class="c7 c1"
+      >
+        $15.00
+      </td>
+    </tr>
+  </tbody>
+</table>
 `;
diff --git a/src/Tabs/__tests__/__snapshots__/Tabs.test.js.snap b/src/Tabs/__tests__/__snapshots__/Tabs.test.js.snap
index 1d8ea9137..8524cd0c8 100644
--- a/src/Tabs/__tests__/__snapshots__/Tabs.test.js.snap
+++ b/src/Tabs/__tests__/__snapshots__/Tabs.test.js.snap
@@ -14,44 +14,18 @@ exports[`renders correctly for an active tab 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c5 {
+.c4 {
   -webkit-transform: translate3d(0px,0px,0px);
   -ms-transform: translate3d(0px,0px,0px);
   transform: translate3d(0px,0px,0px);
 }
 
-.c5[aria-hidden="true"] {
+.c4[aria-hidden="true"] {
   pointer-events: none;
   display: none !important;
 }
 
-.c4 {
+.c3 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -72,26 +46,26 @@ exports[`renders correctly for an active tab 1`] = `
   padding: 0.5rem;
 }
 
-.c4.active {
+.c3.active {
   background-color: white;
   color: #3926a5;
   fill: #3926a5;
 }
 
-.c4:focus {
+.c3:focus {
   outline: none;
 }
 
-.c4:not(.active):hover {
+.c3:not(.active):hover {
   background-color: #f2f2f2;
   border-bottom: 1px solid #d9dee2;
 }
 
-.c4:not(:last-child) {
+.c3:not(:last-child) {
   margin-right: 0.5rem;
 }
 
-.c2 {
+.c0 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -105,62 +79,58 @@ exports[`renders correctly for an active tab 1`] = `
   list-style: none;
 }
 
-.c2 .c3.active {
+.c0 .c2.active {
   box-shadow: inset 0 -2px 0 0 #3926a5;
 }
 
-<div
+<ul
   class="c0 c1"
+  role="tablist"
+  type="default"
 >
-  <ul
-    class="c2 c1"
-    role="tablist"
+  <li
+    aria-controls="dogsPanel"
+    aria-hidden="false"
+    aria-selected="true"
+    class="active c2 c3 c4 c1"
+    id="dogsTab"
+    loop=""
+    role="tab"
+    step="dogs"
+    tabindex="0"
     type="default"
   >
-    <li
-      aria-controls="dogsPanel"
-      aria-hidden="false"
-      aria-selected="true"
-      class="active c3 c4 c5 c1"
-      id="dogsTab"
-      loop=""
-      role="tab"
-      step="dogs"
-      tabindex="0"
-      type="default"
-    >
-      Dogs
-    </li>
-    <li
-      aria-controls="catsPanel"
-      aria-hidden="false"
-      aria-selected="false"
-      class="c3 c4 c5 c1"
-      id="catsTab"
-      loop=""
-      role="tab"
-      step="cats"
-      tabindex="-1"
-      type="default"
-    >
-      Cats
-    </li>
-    <li
-      aria-controls="parrotsPanel"
-      aria-hidden="false"
-      aria-selected="false"
-      class="c3 c4 c5 c1"
-      id="parrotsTab"
-      loop=""
-      role="tab"
-      step="parrots"
-      tabindex="-1"
-      type="default"
-    >
-      Parrots
-    </li>
-  </ul>
-</div>
+    Dogs
+  </li>
+  <li
+    aria-controls="catsPanel"
+    aria-hidden="false"
+    aria-selected="false"
+    class="c2 c3 c4 c1"
+    id="catsTab"
+    loop=""
+    role="tab"
+    step="cats"
+    tabindex="-1"
+    type="default"
+  >
+    Cats
+  </li>
+  <li
+    aria-controls="parrotsPanel"
+    aria-hidden="false"
+    aria-selected="false"
+    class="c2 c3 c4 c1"
+    id="parrotsTab"
+    loop=""
+    role="tab"
+    step="parrots"
+    tabindex="-1"
+    type="default"
+  >
+    Parrots
+  </li>
+</ul>
 `;
 
 exports[`renders correctly for basic tabs 1`] = `
@@ -177,44 +147,18 @@ exports[`renders correctly for basic tabs 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c5 {
+.c4 {
   -webkit-transform: translate3d(0px,0px,0px);
   -ms-transform: translate3d(0px,0px,0px);
   transform: translate3d(0px,0px,0px);
 }
 
-.c5[aria-hidden="true"] {
+.c4[aria-hidden="true"] {
   pointer-events: none;
   display: none !important;
 }
 
-.c4 {
+.c3 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -235,26 +179,26 @@ exports[`renders correctly for basic tabs 1`] = `
   padding: 0.5rem;
 }
 
-.c4.active {
+.c3.active {
   background-color: white;
   color: #3926a5;
   fill: #3926a5;
 }
 
-.c4:focus {
+.c3:focus {
   outline: none;
 }
 
-.c4:not(.active):hover {
+.c3:not(.active):hover {
   background-color: #f2f2f2;
   border-bottom: 1px solid #d9dee2;
 }
 
-.c4:not(:last-child) {
+.c3:not(:last-child) {
   margin-right: 0.5rem;
 }
 
-.c2 {
+.c0 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -268,62 +212,58 @@ exports[`renders correctly for basic tabs 1`] = `
   list-style: none;
 }
 
-.c2 .c3.active {
+.c0 .c2.active {
   box-shadow: inset 0 -2px 0 0 #3926a5;
 }
 
-<div
+<ul
   class="c0 c1"
+  role="tablist"
+  type="default"
 >
-  <ul
-    class="c2 c1"
-    role="tablist"
+  <li
+    aria-controls="dogsPanel"
+    aria-hidden="false"
+    aria-selected="true"
+    class="c2 c3 active c4 c1"
+    id="dogsTab"
+    loop=""
+    role="tab"
+    step="dogs"
+    tabindex="0"
     type="default"
   >
-    <li
-      aria-controls="dogsPanel"
-      aria-hidden="false"
-      aria-selected="true"
-      class="c3 c4 active c5 c1"
-      id="dogsTab"
-      loop=""
-      role="tab"
-      step="dogs"
-      tabindex="0"
-      type="default"
-    >
-      Dogs
-    </li>
-    <li
-      aria-controls="catsPanel"
-      aria-hidden="false"
-      aria-selected="false"
-      class="c3 c4 c5 c1"
-      id="catsTab"
-      loop=""
-      role="tab"
-      step="cats"
-      tabindex="-1"
-      type="default"
-    >
-      Cats
-    </li>
-    <li
-      aria-controls="parrotsPanel"
-      aria-hidden="false"
-      aria-selected="false"
-      class="c3 c4 c5 c1"
-      id="parrotsTab"
-      loop=""
-      role="tab"
-      step="parrots"
-      tabindex="-1"
-      type="default"
-    >
-      Parrots
-    </li>
-  </ul>
-</div>
+    Dogs
+  </li>
+  <li
+    aria-controls="catsPanel"
+    aria-hidden="false"
+    aria-selected="false"
+    class="c2 c3 c4 c1"
+    id="catsTab"
+    loop=""
+    role="tab"
+    step="cats"
+    tabindex="-1"
+    type="default"
+  >
+    Cats
+  </li>
+  <li
+    aria-controls="parrotsPanel"
+    aria-hidden="false"
+    aria-selected="false"
+    class="c2 c3 c4 c1"
+    id="parrotsTab"
+    loop=""
+    role="tab"
+    step="parrots"
+    tabindex="-1"
+    type="default"
+  >
+    Parrots
+  </li>
+</ul>
 `;
 
 exports[`renders correctly for boxed tabs 1`] = `
@@ -340,44 +280,18 @@ exports[`renders correctly for boxed tabs 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c5 {
+.c4 {
   -webkit-transform: translate3d(0px,0px,0px);
   -ms-transform: translate3d(0px,0px,0px);
   transform: translate3d(0px,0px,0px);
 }
 
-.c5[aria-hidden="true"] {
+.c4[aria-hidden="true"] {
   pointer-events: none;
   display: none !important;
 }
 
-.c4 {
+.c3 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -398,48 +312,48 @@ exports[`renders correctly for boxed tabs 1`] = `
   padding: 0.5rem;
 }
 
-.c4.active {
+.c3.active {
   background-color: white;
   color: #3926a5;
   fill: #3926a5;
 }
 
-.c4:focus {
+.c3:focus {
   outline: none;
 }
 
-.c4:not(.active):hover {
+.c3:not(.active):hover {
   background-color: #f2f2f2;
   border-bottom: 1px solid #d9dee2;
 }
 
-.c4:not(:last-child) {
+.c3:not(:last-child) {
   margin-right: 0.5rem;
 }
 
-.c6 .c3.active {
+.c5 .c2.active {
   box-shadow: inset 0 -2px 0 0 #3926a5;
 }
 
-.c7 .c3 {
+.c6 .c2 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
 }
 
-.c7 .c3.active {
+.c6 .c2.active {
   box-shadow: inset 0 -2px 0 0 #3926a5;
 }
 
-.c8 .c3.active {
+.c7 .c2.active {
   box-shadow: inset 0 -2px 0 0 #3926a5;
 }
 
-.c9 .c3.active {
+.c8 .c2.active {
   box-shadow: inset 0 -2px 0 0 #3926a5;
 }
 
-.c2 {
+.c0 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -453,54 +367,50 @@ exports[`renders correctly for boxed tabs 1`] = `
   list-style: none;
 }
 
-.c2 .c3 {
+.c0 .c2 {
   border: 1px solid transparent;
 }
 
-.c2 .c3.active {
+.c0 .c2.active {
   border: 1px solid #d9dee2;
   border-bottom-color: transparent;
 }
 
-<div
-  class="c0 c1"
->
-  <div>
-    <ul
-      class="c2 c1"
-      role="tablist"
-      type="boxed"
+<div>
+  <ul
+    class="c0 c1"
+    role="tablist"
+    type="boxed"
+  >
+    <li
+      aria-controls="dogsPanel"
+      aria-hidden="false"
+      aria-selected="true"
+      class="c2 c3 active c4 c1"
+      id="dogsTab"
+      loop=""
+      role="tab"
+      step="dogs"
+      tabindex="0"
+      type="default"
     >
-      <li
-        aria-controls="dogsPanel"
-        aria-hidden="false"
-        aria-selected="true"
-        class="c3 c4 active c5 c1"
-        id="dogsTab"
-        loop=""
-        role="tab"
-        step="dogs"
-        tabindex="0"
-        type="default"
-      >
-        Dogs
-      </li>
-      <li
-        aria-controls="catsPanel"
-        aria-hidden="false"
-        aria-selected="false"
-        class="c3 c4 c5 c1"
-        id="catsTab"
-        loop=""
-        role="tab"
-        step="cats"
-        tabindex="-1"
-        type="default"
-      >
-        Cats
-      </li>
-    </ul>
-  </div>
+      Dogs
+    </li>
+    <li
+      aria-controls="catsPanel"
+      aria-hidden="false"
+      aria-selected="false"
+      class="c2 c3 c4 c1"
+      id="catsTab"
+      loop=""
+      role="tab"
+      step="cats"
+      tabindex="-1"
+      type="default"
+    >
+      Cats
+    </li>
+  </ul>
 </div>
 `;
 
@@ -518,44 +428,18 @@ exports[`renders correctly for center aligned tabs 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c5 {
+.c4 {
   -webkit-transform: translate3d(0px,0px,0px);
   -ms-transform: translate3d(0px,0px,0px);
   transform: translate3d(0px,0px,0px);
 }
 
-.c5[aria-hidden="true"] {
+.c4[aria-hidden="true"] {
   pointer-events: none;
   display: none !important;
 }
 
-.c4 {
+.c3 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -576,40 +460,40 @@ exports[`renders correctly for center aligned tabs 1`] = `
   padding: 0.5rem;
 }
 
-.c4.active {
+.c3.active {
   background-color: white;
   color: #3926a5;
   fill: #3926a5;
 }
 
-.c4:focus {
+.c3:focus {
   outline: none;
 }
 
-.c4:not(.active):hover {
+.c3:not(.active):hover {
   background-color: #f2f2f2;
   border-bottom: 1px solid #d9dee2;
 }
 
-.c4:not(:last-child) {
+.c3:not(:last-child) {
   margin-right: 0.5rem;
 }
 
-.c6 .c3.active {
+.c5 .c2.active {
   box-shadow: inset 0 -2px 0 0 #3926a5;
 }
 
-.c7 .c3 {
+.c6 .c2 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
 }
 
-.c7 .c3.active {
+.c6 .c2.active {
   box-shadow: inset 0 -2px 0 0 #3926a5;
 }
 
-.c2 {
+.c0 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -623,56 +507,52 @@ exports[`renders correctly for center aligned tabs 1`] = `
   list-style: none;
 }
 
-.c2 .c3.active {
+.c0 .c2.active {
   box-shadow: inset 0 -2px 0 0 #3926a5;
 }
 
-.c2 {
+.c0 {
   -webkit-box-pack: center;
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
 }
 
-<div
-  class="c0 c1"
->
-  <div>
-    <ul
-      class="c2 c1"
-      role="tablist"
+<div>
+  <ul
+    class="c0 c1"
+    role="tablist"
+    type="default"
+  >
+    <li
+      aria-controls="dogsPanel"
+      aria-hidden="false"
+      aria-selected="true"
+      class="c2 c3 active c4 c1"
+      id="dogsTab"
+      loop=""
+      role="tab"
+      step="dogs"
+      tabindex="0"
       type="default"
     >
-      <li
-        aria-controls="dogsPanel"
-        aria-hidden="false"
-        aria-selected="true"
-        class="c3 c4 active c5 c1"
-        id="dogsTab"
-        loop=""
-        role="tab"
-        step="dogs"
-        tabindex="0"
-        type="default"
-      >
-        Dogs
-      </li>
-      <li
-        aria-controls="catsPanel"
-        aria-hidden="false"
-        aria-selected="false"
-        class="c3 c4 c5 c1"
-        id="catsTab"
-        loop=""
-        role="tab"
-        step="cats"
-        tabindex="-1"
-        type="default"
-      >
-        Cats
-      </li>
-    </ul>
-  </div>
+      Dogs
+    </li>
+    <li
+      aria-controls="catsPanel"
+      aria-hidden="false"
+      aria-selected="false"
+      class="c2 c3 c4 c1"
+      id="catsTab"
+      loop=""
+      role="tab"
+      step="cats"
+      tabindex="-1"
+      type="default"
+    >
+      Cats
+    </li>
+  </ul>
 </div>
 `;
 
@@ -690,44 +570,18 @@ exports[`renders correctly for fitted tabs 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c5 {
+.c4 {
   -webkit-transform: translate3d(0px,0px,0px);
   -ms-transform: translate3d(0px,0px,0px);
   transform: translate3d(0px,0px,0px);
 }
 
-.c5[aria-hidden="true"] {
+.c4[aria-hidden="true"] {
   pointer-events: none;
   display: none !important;
 }
 
-.c4 {
+.c3 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -748,30 +602,30 @@ exports[`renders correctly for fitted tabs 1`] = `
   padding: 0.5rem;
 }
 
-.c4.active {
+.c3.active {
   background-color: white;
   color: #3926a5;
   fill: #3926a5;
 }
 
-.c4:focus {
+.c3:focus {
   outline: none;
 }
 
-.c4:not(.active):hover {
+.c3:not(.active):hover {
   background-color: #f2f2f2;
   border-bottom: 1px solid #d9dee2;
 }
 
-.c4:not(:last-child) {
+.c3:not(:last-child) {
   margin-right: 0.5rem;
 }
 
-.c6 .c3.active {
+.c5 .c2.active {
   box-shadow: inset 0 -2px 0 0 #3926a5;
 }
 
-.c2 {
+.c0 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -785,55 +639,51 @@ exports[`renders correctly for fitted tabs 1`] = `
   list-style: none;
 }
 
-.c2 .c3 {
+.c0 .c2 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
 }
 
-.c2 .c3.active {
+.c0 .c2.active {
   box-shadow: inset 0 -2px 0 0 #3926a5;
 }
 
-<div
-  class="c0 c1"
->
-  <div>
-    <ul
-      class="c2 c1"
-      role="tablist"
+<div>
+  <ul
+    class="c0 c1"
+    role="tablist"
+    type="default"
+  >
+    <li
+      aria-controls="dogsPanel"
+      aria-hidden="false"
+      aria-selected="true"
+      class="c2 c3 active c4 c1"
+      id="dogsTab"
+      loop=""
+      role="tab"
+      step="dogs"
+      tabindex="0"
       type="default"
     >
-      <li
-        aria-controls="dogsPanel"
-        aria-hidden="false"
-        aria-selected="true"
-        class="c3 c4 active c5 c1"
-        id="dogsTab"
-        loop=""
-        role="tab"
-        step="dogs"
-        tabindex="0"
-        type="default"
-      >
-        Dogs
-      </li>
-      <li
-        aria-controls="catsPanel"
-        aria-hidden="false"
-        aria-selected="false"
-        class="c3 c4 c5 c1"
-        id="catsTab"
-        loop=""
-        role="tab"
-        step="cats"
-        tabindex="-1"
-        type="default"
-      >
-        Cats
-      </li>
-    </ul>
-  </div>
+      Dogs
+    </li>
+    <li
+      aria-controls="catsPanel"
+      aria-hidden="false"
+      aria-selected="false"
+      class="c2 c3 c4 c1"
+      id="catsTab"
+      loop=""
+      role="tab"
+      step="cats"
+      tabindex="-1"
+      type="default"
+    >
+      Cats
+    </li>
+  </ul>
 </div>
 `;
 
@@ -851,44 +701,18 @@ exports[`renders correctly for right aligned tabs 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c5 {
+.c4 {
   -webkit-transform: translate3d(0px,0px,0px);
   -ms-transform: translate3d(0px,0px,0px);
   transform: translate3d(0px,0px,0px);
 }
 
-.c5[aria-hidden="true"] {
+.c4[aria-hidden="true"] {
   pointer-events: none;
   display: none !important;
 }
 
-.c4 {
+.c3 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -909,44 +733,44 @@ exports[`renders correctly for right aligned tabs 1`] = `
   padding: 0.5rem;
 }
 
-.c4.active {
+.c3.active {
   background-color: white;
   color: #3926a5;
   fill: #3926a5;
 }
 
-.c4:focus {
+.c3:focus {
   outline: none;
 }
 
-.c4:not(.active):hover {
+.c3:not(.active):hover {
   background-color: #f2f2f2;
   border-bottom: 1px solid #d9dee2;
 }
 
-.c4:not(:last-child) {
+.c3:not(:last-child) {
   margin-right: 0.5rem;
 }
 
-.c6 .c3.active {
+.c5 .c2.active {
   box-shadow: inset 0 -2px 0 0 #3926a5;
 }
 
-.c7 .c3 {
+.c6 .c2 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
 }
 
-.c7 .c3.active {
+.c6 .c2.active {
   box-shadow: inset 0 -2px 0 0 #3926a5;
 }
 
-.c8 .c3.active {
+.c7 .c2.active {
   box-shadow: inset 0 -2px 0 0 #3926a5;
 }
 
-.c2 {
+.c0 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -960,56 +784,52 @@ exports[`renders correctly for right aligned tabs 1`] = `
   list-style: none;
 }
 
-.c2 .c3.active {
+.c0 .c2.active {
   box-shadow: inset 0 -2px 0 0 #3926a5;
 }
 
-.c2 {
+.c0 {
   -webkit-box-pack: end;
   -webkit-justify-content: flex-end;
   -ms-flex-pack: end;
   justify-content: flex-end;
 }
 
-<div
-  class="c0 c1"
->
-  <div>
-    <ul
-      class="c2 c1"
-      role="tablist"
+<div>
+  <ul
+    class="c0 c1"
+    role="tablist"
+    type="default"
+  >
+    <li
+      aria-controls="dogsPanel"
+      aria-hidden="false"
+      aria-selected="true"
+      class="c2 c3 active c4 c1"
+      id="dogsTab"
+      loop=""
+      role="tab"
+      step="dogs"
+      tabindex="0"
       type="default"
     >
-      <li
-        aria-controls="dogsPanel"
-        aria-hidden="false"
-        aria-selected="true"
-        class="c3 c4 active c5 c1"
-        id="dogsTab"
-        loop=""
-        role="tab"
-        step="dogs"
-        tabindex="0"
-        type="default"
-      >
-        Dogs
-      </li>
-      <li
-        aria-controls="catsPanel"
-        aria-hidden="false"
-        aria-selected="false"
-        class="c3 c4 c5 c1"
-        id="catsTab"
-        loop=""
-        role="tab"
-        step="cats"
-        tabindex="-1"
-        type="default"
-      >
-        Cats
-      </li>
-    </ul>
-  </div>
+      Dogs
+    </li>
+    <li
+      aria-controls="catsPanel"
+      aria-hidden="false"
+      aria-selected="false"
+      class="c2 c3 c4 c1"
+      id="catsTab"
+      loop=""
+      role="tab"
+      step="cats"
+      tabindex="-1"
+      type="default"
+    >
+      Cats
+    </li>
+  </ul>
 </div>
 `;
 
@@ -1027,7 +847,7 @@ exports[`renders correctly for tabs with content 1`] = `
   color: inherit;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1041,44 +861,18 @@ exports[`renders correctly for tabs with content 1`] = `
   padding: 1.25rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c5 {
+.c4 {
   -webkit-transform: translate3d(0px,0px,0px);
   -ms-transform: translate3d(0px,0px,0px);
   transform: translate3d(0px,0px,0px);
 }
 
-.c5[aria-hidden="true"] {
+.c4[aria-hidden="true"] {
   pointer-events: none;
   display: none !important;
 }
 
-.c4 {
+.c3 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1099,26 +893,26 @@ exports[`renders correctly for tabs with content 1`] = `
   padding: 0.5rem;
 }
 
-.c4.active {
+.c3.active {
   background-color: white;
   color: #3926a5;
   fill: #3926a5;
 }
 
-.c4:focus {
+.c3:focus {
   outline: none;
 }
 
-.c4:not(.active):hover {
+.c3:not(.active):hover {
   background-color: #f2f2f2;
   border-bottom: 1px solid #d9dee2;
 }
 
-.c4:not(:last-child) {
+.c3:not(:last-child) {
   margin-right: 0.5rem;
 }
 
-.c2 {
+.c0 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1132,58 +926,54 @@ exports[`renders correctly for tabs with content 1`] = `
   list-style: none;
 }
 
-.c2 .c3.active {
+.c0 .c2.active {
   box-shadow: inset 0 -2px 0 0 #3926a5;
 }
 
-<div
-  class="c0 c1"
->
-  <div>
-    <ul
-      class="c2 c1"
-      role="tablist"
+<div>
+  <ul
+    class="c0 c1"
+    role="tablist"
+    type="default"
+  >
+    <li
+      aria-controls="dogsPanel"
+      aria-hidden="false"
+      aria-selected="true"
+      class="c2 c3 active c4 c1"
+      id="dogsTab"
+      loop=""
+      role="tab"
+      step="dogs"
+      tabindex="0"
       type="default"
     >
-      <li
-        aria-controls="dogsPanel"
-        aria-hidden="false"
-        aria-selected="true"
-        class="c3 c4 active c5 c1"
-        id="dogsTab"
-        loop=""
-        role="tab"
-        step="dogs"
-        tabindex="0"
-        type="default"
-      >
-        Dogs
-      </li>
-      <li
-        aria-controls="catsPanel"
-        aria-hidden="false"
-        aria-selected="false"
-        class="c3 c4 c5 c1"
-        id="catsTab"
-        loop=""
-        role="tab"
-        step="cats"
-        tabindex="-1"
-        type="default"
-      >
-        Cats
-      </li>
-    </ul>
-    <div
+      Dogs
+    </li>
+    <li
+      aria-controls="catsPanel"
       aria-hidden="false"
-      aria-labelledby="dogsTab"
-      class="c5 c6"
-      id="dogsPanel"
+      aria-selected="false"
+      class="c2 c3 c4 c1"
+      id="catsTab"
       loop=""
-      role="tabpanel"
+      role="tab"
+      step="cats"
+      tabindex="-1"
+      type="default"
     >
-      Dogs are awesome
-    </div>
+      Cats
+    </li>
+  </ul>
+  <div
+    aria-hidden="false"
+    aria-labelledby="dogsTab"
+    class="c4 c5"
+    id="dogsPanel"
+    loop=""
+    role="tabpanel"
+  >
+    Dogs are awesome
   </div>
 </div>
 `;
diff --git a/src/Tag/__tests__/__snapshots__/Tag.test.js.snap b/src/Tag/__tests__/__snapshots__/Tag.test.js.snap
index f3488c62e..d121ca3a5 100644
--- a/src/Tag/__tests__/__snapshots__/Tag.test.js.snap
+++ b/src/Tag/__tests__/__snapshots__/Tag.test.js.snap
@@ -2,19 +2,6 @@
 
 exports[`colors renders correctly for a tag with color danger 1`] = `
 .c1 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
-}
-
-.c4 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -28,36 +15,7 @@ exports[`colors renders correctly for a tag with color danger 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
   display: inline-block;
-}
-
-.c2 {
   background-color: #d60027;
   border-radius: 4px;
   color: #fff;
@@ -69,28 +27,11 @@ exports[`colors renders correctly for a tag with color danger 1`] = `
 
 <div
   class="c0 c1"
->
-  <div
-    class="c2 c3 c4"
-  />
-</div>
+/>
 `;
 
 exports[`colors renders correctly for a tag with color primary 1`] = `
 .c1 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
-}
-
-.c4 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -104,36 +45,7 @@ exports[`colors renders correctly for a tag with color primary 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
   display: inline-block;
-}
-
-.c2 {
   background-color: #3926a5;
   border-radius: 4px;
   color: #fff;
@@ -145,28 +57,11 @@ exports[`colors renders correctly for a tag with color primary 1`] = `
 
 <div
   class="c0 c1"
->
-  <div
-    class="c2 c3 c4"
-  />
-</div>
+/>
 `;
 
 exports[`colors renders correctly for a tag with color success 1`] = `
 .c1 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
-}
-
-.c4 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -180,36 +75,7 @@ exports[`colors renders correctly for a tag with color success 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
   display: inline-block;
-}
-
-.c2 {
   background-color: #007b2e;
   border-radius: 4px;
   color: #fff;
@@ -221,28 +87,11 @@ exports[`colors renders correctly for a tag with color success 1`] = `
 
 <div
   class="c0 c1"
->
-  <div
-    class="c2 c3 c4"
-  />
-</div>
+/>
 `;
 
 exports[`colors renders correctly for a tag with color warning 1`] = `
 .c1 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
-}
-
-.c4 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -256,36 +105,7 @@ exports[`colors renders correctly for a tag with color warning 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
   display: inline-block;
-}
-
-.c2 {
   background-color: #ffb300;
   border-radius: 4px;
   color: #000;
@@ -297,28 +117,11 @@ exports[`colors renders correctly for a tag with color warning 1`] = `
 
 <div
   class="c0 c1"
->
-  <div
-    class="c2 c3 c4"
-  />
-</div>
+/>
 `;
 
 exports[`renders correctly 1`] = `
 .c1 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
-}
-
-.c4 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -332,36 +135,7 @@ exports[`renders correctly 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
   display: inline-block;
-}
-
-.c2 {
   background-color: #435a6f;
   border-radius: 4px;
   color: #fff;
@@ -374,16 +148,12 @@ exports[`renders correctly 1`] = `
 <div
   class="c0 c1"
 >
-  <div
-    class="c2 c3 c4"
-  >
-    Tag
-  </div>
+  Tag
 </div>
 `;
 
 exports[`renders correctly for a list of tags 1`] = `
-.c1 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -393,10 +163,10 @@ exports[`renders correctly for a list of tags 1`] = `
   font-size: 100%;
   box-sizing: border-box;
   background-color: unset;
-  color: inherit;
+  color: #435a6f;
 }
 
-.c6 {
+.c1 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -406,40 +176,11 @@ exports[`renders correctly for a list of tags 1`] = `
   font-size: 100%;
   box-sizing: border-box;
   background-color: unset;
-  color: #435a6f;
-}
-
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
+  color: inherit;
 }
 
-.c5 {
+.c2 {
   display: inline-block;
-}
-
-.c4 {
   background-color: #435a6f;
   border-radius: 4px;
   color: #fff;
@@ -449,14 +190,11 @@ exports[`renders correctly for a list of tags 1`] = `
   padding: 0.2em 0.4em;
 }
 
-.c3 {
+.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-}
-
-.c2 {
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
@@ -472,52 +210,35 @@ exports[`renders correctly for a list of tags 1`] = `
   margin-top: -0.5rem;
 }
 
-.c2 > * {
+.c0 > * {
   margin-left: 0.5rem;
   margin-top: 0.5rem;
 }
 
 <div
   class="c0 c1"
+  spacing="xxsmall"
 >
   <div
-    class="c2 c3 c1"
-    spacing="xxsmall"
+    class="c2 c3"
+  >
+    Tag 1
+  </div>
+  <div
+    class="c2 c3"
   >
-    <div
-      class="c4 c5 c6"
-    >
-      Tag 1
-    </div>
-    <div
-      class="c4 c5 c6"
-    >
-      Tag 2
-    </div>
-    <div
-      class="c4 c5 c6"
-    >
-      Tag 3
-    </div>
+    Tag 2
+  </div>
+  <div
+    class="c2 c3"
+  >
+    Tag 3
   </div>
 </div>
 `;
 
 exports[`renders correctly for an outlined tag 1`] = `
 .c1 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
-}
-
-.c4 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -531,36 +252,7 @@ exports[`renders correctly for an outlined tag 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
   display: inline-block;
-}
-
-.c2 {
   background-color: #435a6f;
   border-radius: 4px;
   color: #fff;
@@ -570,7 +262,7 @@ exports[`renders correctly for an outlined tag 1`] = `
   padding: 0.2em 0.4em;
 }
 
-.c2 {
+.c0 {
   background-color: unset;
   border: 1px solid #435a6f;
   color: #435a6f;
@@ -579,31 +271,14 @@ exports[`renders correctly for an outlined tag 1`] = `
 
 <div
   class="c0 c1"
+  kind="outlined"
 >
-  <div
-    class="c2 c3 c4"
-    kind="outlined"
-  >
-    Outlined tag
-  </div>
+  Outlined tag
 </div>
 `;
 
 exports[`sizes renders correctly for a tag with size large 1`] = `
 .c1 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
-}
-
-.c4 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -617,36 +292,7 @@ exports[`sizes renders correctly for a tag with size large 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
   display: inline-block;
-}
-
-.c2 {
   background-color: #435a6f;
   border-radius: 4px;
   color: #fff;
@@ -656,35 +302,18 @@ exports[`sizes renders correctly for a tag with size large 1`] = `
   padding: 0.2em 0.4em;
 }
 
-.c2 {
+.c0 {
   font-size: 1.25em;
 }
 
 <div
   class="c0 c1"
->
-  <div
-    class="c2 c3 c4"
-    style="size: large;"
-  />
-</div>
+  style="size: large;"
+/>
 `;
 
 exports[`sizes renders correctly for a tag with size medium 1`] = `
 .c1 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
-}
-
-.c4 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -698,36 +327,7 @@ exports[`sizes renders correctly for a tag with size medium 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
   display: inline-block;
-}
-
-.c2 {
   background-color: #435a6f;
   border-radius: 4px;
   color: #fff;
@@ -737,16 +337,12 @@ exports[`sizes renders correctly for a tag with size medium 1`] = `
   padding: 0.2em 0.4em;
 }
 
-.c2 {
+.c0 {
   font-size: 1em;
 }
 
 <div
   class="c0 c1"
->
-  <div
-    class="c2 c3 c4"
-    style="size: medium;"
-  />
-</div>
+  style="size: medium;"
+/>
 `;
diff --git a/src/Text/__tests__/__snapshots__/Text.test.js.snap b/src/Text/__tests__/__snapshots__/Text.test.js.snap
index 729b52f88..55814e4b4 100644
--- a/src/Text/__tests__/__snapshots__/Text.test.js.snap
+++ b/src/Text/__tests__/__snapshots__/Text.test.js.snap
@@ -14,44 +14,18 @@ exports[`renders correctly for a basic text 1`] = `
   color: inherit;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-abbr.c2 {
+abbr.c0 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c2 {
+i.c0 {
   font-style: italic;
 }
 
-kbd.c2 {
+kbd.c0 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -59,54 +33,50 @@ kbd.c2 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c2 {
+mark.c0 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c2 {
+strong.c0 {
   font-weight: bold;
 }
 
-sub.c2,
-sup.c2 {
+sub.c0,
+sup.c0 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c2,
-u.c2 {
+ins.c0,
+u.c0 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c2,
-cite.c2,
-var.c2,
-em.c2 {
+i.c0,
+cite.c0,
+var.c0,
+em.c0 {
   font-style: italic;
 }
 
-kbd.c2,
-pre.c2,
-samp.c2 {
+kbd.c0,
+pre.c0,
+samp.c0 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c2 .c3 {
+.c0 .c2 {
   top: 0.1em;
 }
 
-<div
+<span
   class="c0 c1"
 >
-  <span
-    class="c2 c1"
-  >
-    test
-  </span>
-</div>
+  test
+</span>
 `;
 
 exports[`renders correctly for text with a another element 1`] = `
@@ -121,60 +91,21 @@ exports[`renders correctly for text with a another element 1`] = `
   box-sizing: border-box;
   background-color: unset;
   color: inherit;
-}
-
-.c3 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
   color: #3926a5 !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-abbr.c2 {
+abbr.c0 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c2 {
+i.c0 {
   font-style: italic;
 }
 
-kbd.c2 {
+kbd.c0 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -182,55 +113,51 @@ kbd.c2 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c2 {
+mark.c0 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c2 {
+strong.c0 {
   font-weight: bold;
 }
 
-sub.c2,
-sup.c2 {
+sub.c0,
+sup.c0 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c2,
-u.c2 {
+ins.c0,
+u.c0 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c2,
-cite.c2,
-var.c2,
-em.c2 {
+i.c0,
+cite.c0,
+var.c0,
+em.c0 {
   font-style: italic;
 }
 
-kbd.c2,
-pre.c2,
-samp.c2 {
+kbd.c0,
+pre.c0,
+samp.c0 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c2 .c4 {
+.c0 .c2 {
   top: 0.1em;
 }
 
-<div
+<strong
   class="c0 c1"
+  color="primary"
 >
-  <strong
-    class="c2 c3"
-    color="primary"
-  >
-    test
-  </strong>
-</div>
+  test
+</strong>
 `;
 
 exports[`renders correctly for text with a color 1`] = `
@@ -245,60 +172,21 @@ exports[`renders correctly for text with a color 1`] = `
   box-sizing: border-box;
   background-color: unset;
   color: inherit;
-}
-
-.c3 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
   color: #3926a5 !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-abbr.c2 {
+abbr.c0 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c2 {
+i.c0 {
   font-style: italic;
 }
 
-kbd.c2 {
+kbd.c0 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -306,53 +194,49 @@ kbd.c2 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c2 {
+mark.c0 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c2 {
+strong.c0 {
   font-weight: bold;
 }
 
-sub.c2,
-sup.c2 {
+sub.c0,
+sup.c0 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c2,
-u.c2 {
+ins.c0,
+u.c0 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c2,
-cite.c2,
-var.c2,
-em.c2 {
+i.c0,
+cite.c0,
+var.c0,
+em.c0 {
   font-style: italic;
 }
 
-kbd.c2,
-pre.c2,
-samp.c2 {
+kbd.c0,
+pre.c0,
+samp.c0 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c2 .c4 {
+.c0 .c2 {
   top: 0.1em;
 }
 
-<div
+<span
   class="c0 c1"
+  color="primary"
 >
-  <span
-    class="c2 c3"
-    color="primary"
-  >
-    test
-  </span>
-</div>
+  test
+</span>
 `;
diff --git a/src/Textarea/__tests__/__snapshots__/Textarea.test.js.snap b/src/Textarea/__tests__/__snapshots__/Textarea.test.js.snap
index a1232aa03..9b6797a43 100644
--- a/src/Textarea/__tests__/__snapshots__/Textarea.test.js.snap
+++ b/src/Textarea/__tests__/__snapshots__/Textarea.test.js.snap
@@ -14,24 +14,11 @@ exports[`renders correctly for a basic textarea 1`] = `
   color: inherit;
 }
 
-.c3 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
-}
-
-.c3.c3.c3 {
+.c1.c1.c1 {
   position: relative;
 }
 
-.c5 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -45,36 +32,10 @@ exports[`renders correctly for a basic textarea 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   display: inline-block;
 }
 
-.c4 {
+.c2 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -82,50 +43,46 @@ exports[`renders correctly for a basic textarea 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c2[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c2::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c2::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c2:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c2::placeholder {
   opacity: 0.6;
 }
 
 <div
   class="c0 c1"
 >
-  <div
+  <textarea
+    aria-invalid="false"
+    aria-required="false"
     class="c2 c3"
-  >
-    <textarea
-      aria-invalid="false"
-      aria-required="false"
-      class="c4 c5"
-      rows="3"
-      style="size: default;"
-      type="text"
-    />
-  </div>
+    rows="3"
+    style="size: default;"
+    type="text"
+  />
 </div>
 `;
 
@@ -143,24 +100,11 @@ exports[`renders correctly for a disabled textarea 1`] = `
   color: inherit;
 }
 
-.c3 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
-}
-
-.c3.c3.c3 {
+.c1.c1.c1 {
   position: relative;
 }
 
-.c5 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -174,36 +118,10 @@ exports[`renders correctly for a disabled textarea 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   display: inline-block;
 }
 
-.c4 {
+.c2 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -211,51 +129,47 @@ exports[`renders correctly for a disabled textarea 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c2[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c2::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c2::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c2:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c2::placeholder {
   opacity: 0.6;
 }
 
 <div
   class="c0 c1"
 >
-  <div
+  <textarea
+    aria-invalid="false"
+    aria-required="false"
     class="c2 c3"
-  >
-    <textarea
-      aria-invalid="false"
-      aria-required="false"
-      class="c4 c5"
-      disabled=""
-      rows="3"
-      style="size: default;"
-      type="text"
-    />
-  </div>
+    disabled=""
+    rows="3"
+    style="size: default;"
+    type="text"
+  />
 </div>
 `;
 
@@ -273,24 +187,11 @@ exports[`renders correctly for a full width textarea 1`] = `
   color: inherit;
 }
 
-.c3 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
-}
-
-.c3.c3.c3 {
+.c1.c1.c1 {
   position: relative;
 }
 
-.c5 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -304,36 +205,10 @@ exports[`renders correctly for a full width textarea 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   display: inline-block;
 }
 
-.c4 {
+.c2 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -341,56 +216,52 @@ exports[`renders correctly for a full width textarea 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c2[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c2::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c2::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c2:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c2::placeholder {
   opacity: 0.6;
 }
 
-.c4 {
+.c2 {
   width: 100%;
 }
 
 <div
   class="c0 c1"
+  style="width: 100%;"
+  width="100%"
 >
-  <div
+  <textarea
+    aria-invalid="false"
+    aria-required="false"
     class="c2 c3"
-    style="width: 100%;"
-    width="100%"
-  >
-    <textarea
-      aria-invalid="false"
-      aria-required="false"
-      class="c4 c5"
-      rows="3"
-      style="size: default;"
-      type="text"
-    />
-  </div>
+    rows="3"
+    style="size: default;"
+    type="text"
+  />
 </div>
 `;
 
@@ -408,24 +279,11 @@ exports[`renders correctly for a textarea with a placeholder 1`] = `
   color: inherit;
 }
 
-.c3 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
-}
-
-.c3.c3.c3 {
+.c1.c1.c1 {
   position: relative;
 }
 
-.c5 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -439,36 +297,10 @@ exports[`renders correctly for a textarea with a placeholder 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   display: inline-block;
 }
 
-.c4 {
+.c2 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -476,51 +308,47 @@ exports[`renders correctly for a textarea with a placeholder 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c2[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c2::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c2::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c2:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c2::placeholder {
   opacity: 0.6;
 }
 
 <div
   class="c0 c1"
 >
-  <div
+  <textarea
+    aria-invalid="false"
+    aria-required="false"
     class="c2 c3"
-  >
-    <textarea
-      aria-invalid="false"
-      aria-required="false"
-      class="c4 c5"
-      placeholder="Awesome placeholder"
-      rows="3"
-      style="size: default;"
-      type="text"
-    />
-  </div>
+    placeholder="Awesome placeholder"
+    rows="3"
+    style="size: default;"
+    type="text"
+  />
 </div>
 `;
 
@@ -538,24 +366,11 @@ exports[`renders correctly for an input with a default value 1`] = `
   color: inherit;
 }
 
-.c3 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
-}
-
-.c3.c3.c3 {
+.c1.c1.c1 {
   position: relative;
 }
 
-.c5 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -569,36 +384,10 @@ exports[`renders correctly for an input with a default value 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   display: inline-block;
 }
 
-.c4 {
+.c2 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -606,52 +395,48 @@ exports[`renders correctly for an input with a default value 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c2[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c2::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c2::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c2:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c2::placeholder {
   opacity: 0.6;
 }
 
 <div
   class="c0 c1"
 >
-  <div
+  <textarea
+    aria-invalid="false"
+    aria-required="false"
     class="c2 c3"
+    rows="3"
+    style="size: default;"
+    type="text"
   >
-    <textarea
-      aria-invalid="false"
-      aria-required="false"
-      class="c4 c5"
-      rows="3"
-      style="size: default;"
-      type="text"
-    >
-      Awesome value
-    </textarea>
-  </div>
+    Awesome value
+  </textarea>
 </div>
 `;
 
@@ -669,24 +454,11 @@ exports[`sizes renders correctly for a textarea with size large 1`] = `
   color: inherit;
 }
 
-.c3 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
-}
-
-.c3.c3.c3 {
+.c1.c1.c1 {
   position: relative;
 }
 
-.c5 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -700,36 +472,10 @@ exports[`sizes renders correctly for a textarea with size large 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   display: inline-block;
 }
 
-.c4 {
+.c2 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -737,40 +483,40 @@ exports[`sizes renders correctly for a textarea with size large 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c2[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c2::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c2::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c2:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c2::placeholder {
   opacity: 0.6;
 }
 
-.c4 {
+.c2 {
   font-size: 1.5rem;
 }
 
-.c4 + .c6 {
+.c2 + .c4 {
   width: 25px;
   height: 25px;
   top: 16px;
@@ -780,18 +526,14 @@ exports[`sizes renders correctly for a textarea with size large 1`] = `
 <div
   class="c0 c1"
 >
-  <div
+  <textarea
+    aria-invalid="false"
+    aria-required="false"
     class="c2 c3"
-  >
-    <textarea
-      aria-invalid="false"
-      aria-required="false"
-      class="c4 c5"
-      rows="3"
-      style="size: large;"
-      type="text"
-    />
-  </div>
+    rows="3"
+    style="size: large;"
+    type="text"
+  />
 </div>
 `;
 
@@ -809,24 +551,11 @@ exports[`sizes renders correctly for a textarea with size medium 1`] = `
   color: inherit;
 }
 
-.c3 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
-}
-
-.c3.c3.c3 {
+.c1.c1.c1 {
   position: relative;
 }
 
-.c5 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -840,36 +569,10 @@ exports[`sizes renders correctly for a textarea with size medium 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   display: inline-block;
 }
 
-.c4 {
+.c2 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -877,40 +580,40 @@ exports[`sizes renders correctly for a textarea with size medium 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c2[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c2::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c2::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c2:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c2::placeholder {
   opacity: 0.6;
 }
 
-.c4 {
+.c2 {
   font-size: 1.25rem;
 }
 
-.c4 + .c6 {
+.c2 + .c4 {
   width: 20px;
   height: 20px;
   top: 15px;
@@ -920,18 +623,14 @@ exports[`sizes renders correctly for a textarea with size medium 1`] = `
 <div
   class="c0 c1"
 >
-  <div
+  <textarea
+    aria-invalid="false"
+    aria-required="false"
     class="c2 c3"
-  >
-    <textarea
-      aria-invalid="false"
-      aria-required="false"
-      class="c4 c5"
-      rows="3"
-      style="size: medium;"
-      type="text"
-    />
-  </div>
+    rows="3"
+    style="size: medium;"
+    type="text"
+  />
 </div>
 `;
 
@@ -949,24 +648,11 @@ exports[`sizes renders correctly for a textarea with size small 1`] = `
   color: inherit;
 }
 
-.c3 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
-}
-
-.c3.c3.c3 {
+.c1.c1.c1 {
   position: relative;
 }
 
-.c5 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -980,36 +666,10 @@ exports[`sizes renders correctly for a textarea with size small 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   display: inline-block;
 }
 
-.c4 {
+.c2 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -1017,40 +677,40 @@ exports[`sizes renders correctly for a textarea with size small 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c2[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c2::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c2::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c2:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c2::placeholder {
   opacity: 0.6;
 }
 
-.c4 {
+.c2 {
   font-size: 0.8rem;
 }
 
-.c4 + .c6 {
+.c2 + .c4 {
   width: 10px;
   height: 10px;
   top: 10px;
@@ -1059,18 +719,14 @@ exports[`sizes renders correctly for a textarea with size small 1`] = `
 <div
   class="c0 c1"
 >
-  <div
+  <textarea
+    aria-invalid="false"
+    aria-required="false"
     class="c2 c3"
-  >
-    <textarea
-      aria-invalid="false"
-      aria-required="false"
-      class="c4 c5"
-      rows="3"
-      style="size: small;"
-      type="text"
-    />
-  </div>
+    rows="3"
+    style="size: small;"
+    type="text"
+  />
 </div>
 `;
 
@@ -1088,24 +744,11 @@ exports[`states renders correctly for a textarea with state danger 1`] = `
   color: inherit;
 }
 
-.c3 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
-}
-
-.c3.c3.c3 {
+.c1.c1.c1 {
   position: relative;
 }
 
-.c5 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1119,36 +762,10 @@ exports[`states renders correctly for a textarea with state danger 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   display: inline-block;
 }
 
-.c4 {
+.c2 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -1156,36 +773,36 @@ exports[`states renders correctly for a textarea with state danger 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c2[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c2::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c2::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c2:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c2::placeholder {
   opacity: 0.6;
 }
 
-.c4 {
+.c2 {
   border-color: #e24c67;
   box-shadow: #e24c67 0px 0px 0px 1px !important;
 }
@@ -1193,18 +810,14 @@ exports[`states renders correctly for a textarea with state danger 1`] = `
 <div
   class="c0 c1"
 >
-  <div
+  <textarea
+    aria-invalid="true"
+    aria-required="false"
     class="c2 c3"
-  >
-    <textarea
-      aria-invalid="true"
-      aria-required="false"
-      class="c4 c5"
-      rows="3"
-      style="size: default;"
-      type="text"
-    />
-  </div>
+    rows="3"
+    style="size: default;"
+    type="text"
+  />
 </div>
 `;
 
@@ -1222,24 +835,11 @@ exports[`states renders correctly for a textarea with state primary 1`] = `
   color: inherit;
 }
 
-.c3 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
-}
-
-.c3.c3.c3 {
+.c1.c1.c1 {
   position: relative;
 }
 
-.c5 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1253,36 +853,10 @@ exports[`states renders correctly for a textarea with state primary 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   display: inline-block;
 }
 
-.c4 {
+.c2 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -1290,36 +864,36 @@ exports[`states renders correctly for a textarea with state primary 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c2[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c2::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c2::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c2:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c2::placeholder {
   opacity: 0.6;
 }
 
-.c4 {
+.c2 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
@@ -1327,18 +901,14 @@ exports[`states renders correctly for a textarea with state primary 1`] = `
 <div
   class="c0 c1"
 >
-  <div
+  <textarea
+    aria-invalid="false"
+    aria-required="false"
     class="c2 c3"
-  >
-    <textarea
-      aria-invalid="false"
-      aria-required="false"
-      class="c4 c5"
-      rows="3"
-      style="size: default;"
-      type="text"
-    />
-  </div>
+    rows="3"
+    style="size: default;"
+    type="text"
+  />
 </div>
 `;
 
@@ -1356,24 +926,11 @@ exports[`states renders correctly for a textarea with state success 1`] = `
   color: inherit;
 }
 
-.c3 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
-}
-
-.c3.c3.c3 {
+.c1.c1.c1 {
   position: relative;
 }
 
-.c5 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1387,36 +944,10 @@ exports[`states renders correctly for a textarea with state success 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   display: inline-block;
 }
 
-.c4 {
+.c2 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -1424,36 +955,36 @@ exports[`states renders correctly for a textarea with state success 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c2[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c2::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c2::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c2:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c2::placeholder {
   opacity: 0.6;
 }
 
-.c4 {
+.c2 {
   border-color: #4ca26c;
   box-shadow: #4ca26c 0px 0px 0px 1px !important;
 }
@@ -1461,18 +992,14 @@ exports[`states renders correctly for a textarea with state success 1`] = `
 <div
   class="c0 c1"
 >
-  <div
+  <textarea
+    aria-invalid="false"
+    aria-required="false"
     class="c2 c3"
-  >
-    <textarea
-      aria-invalid="false"
-      aria-required="false"
-      class="c4 c5"
-      rows="3"
-      style="size: default;"
-      type="text"
-    />
-  </div>
+    rows="3"
+    style="size: default;"
+    type="text"
+  />
 </div>
 `;
 
@@ -1490,24 +1017,11 @@ exports[`states renders correctly for a textarea with state warning 1`] = `
   color: inherit;
 }
 
-.c3 {
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background: unset;
-  font: unset;
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  background-color: unset;
-  color: inherit;
-}
-
-.c3.c3.c3 {
+.c1.c1.c1 {
   position: relative;
 }
 
-.c5 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1521,36 +1035,10 @@ exports[`states renders correctly for a textarea with state warning 1`] = `
 }
 
 .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
   display: inline-block;
 }
 
-.c4 {
+.c2 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -1558,36 +1046,36 @@ exports[`states renders correctly for a textarea with state warning 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c2[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c2:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c2::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c2::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c2:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c2::placeholder {
   opacity: 0.6;
 }
 
-.c4 {
+.c2 {
   border-color: #ffc94c;
   box-shadow: #ffc94c 0px 0px 0px 1px !important;
 }
@@ -1595,17 +1083,13 @@ exports[`states renders correctly for a textarea with state warning 1`] = `
 <div
   class="c0 c1"
 >
-  <div
+  <textarea
+    aria-invalid="false"
+    aria-required="false"
     class="c2 c3"
-  >
-    <textarea
-      aria-invalid="false"
-      aria-required="false"
-      class="c4 c5"
-      rows="3"
-      style="size: default;"
-      type="text"
-    />
-  </div>
+    rows="3"
+    style="size: default;"
+    type="text"
+  />
 </div>
 `;
diff --git a/src/Textarea/__tests__/__snapshots__/TextareaField.test.js.snap b/src/Textarea/__tests__/__snapshots__/TextareaField.test.js.snap
index 9a0604921..e69a632c7 100644
--- a/src/Textarea/__tests__/__snapshots__/TextareaField.test.js.snap
+++ b/src/Textarea/__tests__/__snapshots__/TextareaField.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly for a basic input field 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -14,7 +14,7 @@ exports[`renders correctly for a basic input field 1`] = `
   color: inherit;
 }
 
-.c3 {
+.c2 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -27,11 +27,11 @@ exports[`renders correctly for a basic input field 1`] = `
   color: inherit;
 }
 
-.c3.c3.c3 {
+.c2.c2.c2 {
   position: relative;
 }
 
-.c5 {
+.c4 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -45,37 +45,11 @@ exports[`renders correctly for a basic input field 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
+.c1 {
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -83,63 +57,59 @@ exports[`renders correctly for a basic input field 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c3[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c3:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c3::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c3::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c3:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c3::placeholder {
   opacity: 0.6;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
+  <div />
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c2"
   >
-    <div />
-    <div
-      class="c2 c3"
-    >
-      <textarea
-        aria-invalid="false"
-        aria-required="false"
-        class="c4 c5"
-        rows="3"
-        style="size: default;"
-        type="text"
-      />
-    </div>
-    <div />
+    <textarea
+      aria-invalid="false"
+      aria-required="false"
+      class="c3 c4"
+      rows="3"
+      style="size: default;"
+      type="text"
+    />
   </div>
+  <div />
 </div>
 `;
 
 exports[`renders correctly for a disabled input field 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -152,7 +122,7 @@ exports[`renders correctly for a disabled input field 1`] = `
   color: inherit;
 }
 
-.c3 {
+.c2 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -165,11 +135,11 @@ exports[`renders correctly for a disabled input field 1`] = `
   color: inherit;
 }
 
-.c3.c3.c3 {
+.c2.c2.c2 {
   position: relative;
 }
 
-.c5 {
+.c4 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -183,37 +153,11 @@ exports[`renders correctly for a disabled input field 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
+.c1 {
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -221,59 +165,55 @@ exports[`renders correctly for a disabled input field 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c3[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c3:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c3::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c3::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c3:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c3::placeholder {
   opacity: 0.6;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
+  <div />
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c2"
   >
-    <div />
-    <div
-      class="c2 c3"
-    >
-      <textarea
-        aria-invalid="false"
-        aria-required="false"
-        class="c4 c5"
-        disabled=""
-        rows="3"
-        style="size: default;"
-        type="text"
-      />
-    </div>
-    <div />
+    <textarea
+      aria-invalid="false"
+      aria-required="false"
+      class="c3 c4"
+      disabled=""
+      rows="3"
+      style="size: default;"
+      type="text"
+    />
   </div>
+  <div />
 </div>
 `;
 
@@ -291,7 +231,7 @@ exports[`renders correctly for a full width input field 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c3 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -304,11 +244,11 @@ exports[`renders correctly for a full width input field 1`] = `
   color: inherit;
 }
 
-.c4.c4.c4 {
+.c3.c3.c3 {
   position: relative;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -322,37 +262,11 @@ exports[`renders correctly for a full width input field 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c3 {
+.c2 {
   display: inline-block;
 }
 
-.c5 {
+.c4 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -360,73 +274,69 @@ exports[`renders correctly for a full width input field 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c5[disabled] {
+.c4[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c5:focus {
+.c4:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c5::-webkit-input-placeholder {
+.c4::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c5::-moz-placeholder {
+.c4::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c5:-ms-input-placeholder {
+.c4:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c5::placeholder {
+.c4::placeholder {
   opacity: 0.6;
 }
 
-.c5 {
+.c4 {
   width: 100%;
 }
 
-.c2 {
+.c0 {
   width: 100%;
 }
 
 <div
   class="c0 c1"
+  display="inline-block"
+  style="display: inline-block;"
 >
+  <div />
   <div
-    class="c2 c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c2 c3"
+    style="width: 100%;"
+    width="100%"
   >
-    <div />
-    <div
-      class="c3 c4"
-      style="width: 100%;"
-      width="100%"
-    >
-      <textarea
-        aria-invalid="false"
-        aria-required="false"
-        class="c5 c6"
-        rows="3"
-        style="size: default;"
-        type="text"
-      />
-    </div>
-    <div />
+    <textarea
+      aria-invalid="false"
+      aria-required="false"
+      class="c4 c5"
+      rows="3"
+      style="size: default;"
+      type="text"
+    />
   </div>
+  <div />
 </div>
 `;
 
 exports[`renders correctly for a required field 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -439,7 +349,7 @@ exports[`renders correctly for a required field 1`] = `
   color: inherit;
 }
 
-.c8 {
+.c7 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -452,11 +362,11 @@ exports[`renders correctly for a required field 1`] = `
   color: inherit;
 }
 
-.c8.c8.c8 {
+.c7.c7.c7 {
   position: relative;
 }
 
-.c10 {
+.c9 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -470,7 +380,7 @@ exports[`renders correctly for a required field 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -484,44 +394,18 @@ exports[`renders correctly for a required field 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c7 {
+.c6 {
   display: inline-block;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c9 {
+.c8 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -529,89 +413,85 @@ exports[`renders correctly for a required field 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c9[disabled] {
+.c8[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c9:focus {
+.c8:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c9::-webkit-input-placeholder {
+.c8::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c9::-moz-placeholder {
+.c8::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c9:-ms-input-placeholder {
+.c8:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c9::placeholder {
+.c8::placeholder {
   opacity: 0.6;
 }
 
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   display: block;
 }
 
-.c3 {
+.c2 {
   margin-bottom: 0 !important;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="align-items: center;"
   >
-    <div
-      class="c2 c1"
-      style="align-items: center;"
+    <label
+      class="c2 c3 c4 c5"
+      font-weight="600"
+      for="username"
+      style="font-weight: 600;"
     >
-      <label
-        class="c3 c4 c5 c6"
-        font-weight="600"
-        for="username"
-        style="font-weight: 600;"
-      >
-        Username
-      </label>
-    </div>
-    <div />
-    <div
-      class="c7 c8"
-    >
-      <textarea
-        aria-invalid="false"
-        aria-required="true"
-        class="c9 c10"
-        id="username"
-        rows="3"
-        style="size: default;"
-        type="text"
-      />
-    </div>
-    <div />
+      Username
+    </label>
   </div>
+  <div />
+  <div
+    class="c6 c7"
+  >
+    <textarea
+      aria-invalid="false"
+      aria-required="true"
+      class="c8 c9"
+      id="username"
+      rows="3"
+      style="size: default;"
+      type="text"
+    />
+  </div>
+  <div />
 </div>
 `;
 
 exports[`renders correctly for an input field with a default value 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -624,7 +504,7 @@ exports[`renders correctly for an input field with a default value 1`] = `
   color: inherit;
 }
 
-.c3 {
+.c2 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -637,11 +517,11 @@ exports[`renders correctly for an input field with a default value 1`] = `
   color: inherit;
 }
 
-.c3.c3.c3 {
+.c2.c2.c2 {
   position: relative;
 }
 
-.c5 {
+.c4 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -655,37 +535,11 @@ exports[`renders correctly for an input field with a default value 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
+.c1 {
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -693,65 +547,61 @@ exports[`renders correctly for an input field with a default value 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c3[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c3:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c3::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c3::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c3:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c3::placeholder {
   opacity: 0.6;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
+  <div />
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c2"
   >
-    <div />
-    <div
-      class="c2 c3"
+    <textarea
+      aria-invalid="false"
+      aria-required="false"
+      class="c3 c4"
+      rows="3"
+      style="size: default;"
+      type="text"
     >
-      <textarea
-        aria-invalid="false"
-        aria-required="false"
-        class="c4 c5"
-        rows="3"
-        style="size: default;"
-        type="text"
-      >
-        Awesome value
-      </textarea>
-    </div>
-    <div />
+      Awesome value
+    </textarea>
   </div>
+  <div />
 </div>
 `;
 
 exports[`renders correctly for an input field with a description 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -764,7 +614,7 @@ exports[`renders correctly for an input field with a description 1`] = `
   color: inherit;
 }
 
-.c10 {
+.c9 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -777,11 +627,11 @@ exports[`renders correctly for an input field with a description 1`] = `
   color: inherit;
 }
 
-.c10.c10.c10 {
+.c9.c9.c9 {
   position: relative;
 }
 
-.c12 {
+.c11 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -795,7 +645,7 @@ exports[`renders correctly for an input field with a description 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -809,44 +659,18 @@ exports[`renders correctly for an input field with a description 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c9 {
+.c8 {
   display: inline-block;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c11 {
+.c10 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -854,55 +678,55 @@ exports[`renders correctly for an input field with a description 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c11[disabled] {
+.c10[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c11:focus {
+.c10:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11::-webkit-input-placeholder {
+.c10::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c11::-moz-placeholder {
+.c10::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c11:-ms-input-placeholder {
+.c10:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c11::placeholder {
+.c10::placeholder {
   opacity: 0.6;
 }
 
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   display: block;
 }
 
-abbr.c8 {
+abbr.c7 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c8 {
+i.c7 {
   font-style: italic;
 }
 
-kbd.c8 {
+kbd.c7 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -910,100 +734,96 @@ kbd.c8 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c8 {
+mark.c7 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c8 {
+strong.c7 {
   font-weight: bold;
 }
 
-sub.c8,
-sup.c8 {
+sub.c7,
+sup.c7 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c8,
-u.c8 {
+ins.c7,
+u.c7 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c8,
-cite.c8,
-var.c8,
-em.c8 {
+i.c7,
+cite.c7,
+var.c7,
+em.c7 {
   font-style: italic;
 }
 
-kbd.c8,
-pre.c8,
-samp.c8 {
+kbd.c7,
+pre.c7,
+samp.c7 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c8 .c13 {
+.c7 .c12 {
   top: 0.1em;
 }
 
-.c3 {
+.c2 {
   margin-bottom: 0 !important;
 }
 
-.c7 {
+.c6 {
   display: block;
   font-size: 0.8rem;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="align-items: center;"
   >
-    <div
-      class="c2 c1"
-      style="align-items: center;"
-    >
-      <label
-        class="c3 c4 c5 c6"
-        font-weight="600"
-        for="username"
-        style="font-weight: 600;"
-      >
-        Username
-      </label>
-    </div>
-    <span
-      class="c7 c8 c1"
+    <label
+      class="c2 c3 c4 c5"
+      font-weight="600"
+      for="username"
+      style="font-weight: 600;"
     >
-      Required for your fannypack
-    </span>
-    <div
-      class="c9 c10"
-    >
-      <textarea
-        aria-invalid="false"
-        aria-required="false"
-        class="c11 c12"
-        id="username"
-        rows="3"
-        style="size: default;"
-        type="text"
-      />
-    </div>
-    <div />
+      Username
+    </label>
   </div>
+  <span
+    class="c6 c7 c0"
+  >
+    Required for your fannypack
+  </span>
+  <div
+    class="c8 c9"
+  >
+    <textarea
+      aria-invalid="false"
+      aria-required="false"
+      class="c10 c11"
+      id="username"
+      rows="3"
+      style="size: default;"
+      type="text"
+    />
+  </div>
+  <div />
 </div>
 `;
 
 exports[`renders correctly for an input field with a hint 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1016,7 +836,7 @@ exports[`renders correctly for an input field with a hint 1`] = `
   color: inherit;
 }
 
-.c8 {
+.c7 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1029,11 +849,11 @@ exports[`renders correctly for an input field with a hint 1`] = `
   color: inherit;
 }
 
-.c8.c8.c8 {
+.c7.c7.c7 {
   position: relative;
 }
 
-.c10 {
+.c9 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1047,7 +867,7 @@ exports[`renders correctly for an input field with a hint 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1061,44 +881,18 @@ exports[`renders correctly for an input field with a hint 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c7 {
+.c6 {
   display: inline-block;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c9 {
+.c8 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -1106,55 +900,55 @@ exports[`renders correctly for an input field with a hint 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c9[disabled] {
+.c8[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c9:focus {
+.c8:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c9::-webkit-input-placeholder {
+.c8::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c9::-moz-placeholder {
+.c8::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c9:-ms-input-placeholder {
+.c8:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c9::placeholder {
+.c8::placeholder {
   opacity: 0.6;
 }
 
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   display: block;
 }
 
-abbr.c12 {
+abbr.c11 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c12 {
+i.c11 {
   font-style: italic;
 }
 
-kbd.c12 {
+kbd.c11 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -1162,101 +956,97 @@ kbd.c12 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c12 {
+mark.c11 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c12 {
+strong.c11 {
   font-weight: bold;
 }
 
-sub.c12,
-sup.c12 {
+sub.c11,
+sup.c11 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c12,
-u.c12 {
+ins.c11,
+u.c11 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c12,
-cite.c12,
-var.c12,
-em.c12 {
+i.c11,
+cite.c11,
+var.c11,
+em.c11 {
   font-style: italic;
 }
 
-kbd.c12,
-pre.c12,
-samp.c12 {
+kbd.c11,
+pre.c11,
+samp.c11 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c12 .c13 {
+.c11 .c12 {
   top: 0.1em;
 }
 
-.c3 {
+.c2 {
   margin-bottom: 0 !important;
 }
 
-.c11 {
+.c10 {
   display: block;
   font-size: 0.8rem;
   margin-top: 0.25rem;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="align-items: center;"
   >
-    <div
-      class="c2 c1"
-      style="align-items: center;"
-    >
-      <label
-        class="c3 c4 c5 c6"
-        font-weight="600"
-        for="username"
-        style="font-weight: 600;"
-      >
-        Username
-      </label>
-    </div>
-    <div />
-    <div
-      class="c7 c8"
+    <label
+      class="c2 c3 c4 c5"
+      font-weight="600"
+      for="username"
+      style="font-weight: 600;"
     >
-      <textarea
-        aria-invalid="false"
-        aria-required="false"
-        class="c9 c10"
-        id="username"
-        rows="3"
-        style="size: default;"
-        type="text"
-      />
-    </div>
-    <span
-      class="c11 c12 c1"
-    >
-      Must be awesome
-    </span>
+      Username
+    </label>
+  </div>
+  <div />
+  <div
+    class="c6 c7"
+  >
+    <textarea
+      aria-invalid="false"
+      aria-required="false"
+      class="c8 c9"
+      id="username"
+      rows="3"
+      style="size: default;"
+      type="text"
+    />
   </div>
+  <span
+    class="c10 c11 c0"
+  >
+    Must be awesome
+  </span>
 </div>
 `;
 
 exports[`renders correctly for an input field with a placeholder 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1269,7 +1059,7 @@ exports[`renders correctly for an input field with a placeholder 1`] = `
   color: inherit;
 }
 
-.c3 {
+.c2 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1282,11 +1072,11 @@ exports[`renders correctly for an input field with a placeholder 1`] = `
   color: inherit;
 }
 
-.c3.c3.c3 {
+.c2.c2.c2 {
   position: relative;
 }
 
-.c5 {
+.c4 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1300,37 +1090,11 @@ exports[`renders correctly for an input field with a placeholder 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
+.c1 {
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -1338,64 +1102,60 @@ exports[`renders correctly for an input field with a placeholder 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c3[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c3:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c3::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c3::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c3:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c3::placeholder {
   opacity: 0.6;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
+  <div />
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c2"
   >
-    <div />
-    <div
-      class="c2 c3"
-    >
-      <textarea
-        aria-invalid="false"
-        aria-required="false"
-        class="c4 c5"
-        placeholder="Awesome placeholder"
-        rows="3"
-        style="size: default;"
-        type="text"
-      />
-    </div>
-    <div />
+    <textarea
+      aria-invalid="false"
+      aria-required="false"
+      class="c3 c4"
+      placeholder="Awesome placeholder"
+      rows="3"
+      style="size: default;"
+      type="text"
+    />
   </div>
+  <div />
 </div>
 `;
 
 exports[`renders correctly for an optional input field 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1408,7 +1168,7 @@ exports[`renders correctly for an optional input field 1`] = `
   color: inherit;
 }
 
-.c10 {
+.c9 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1421,11 +1181,11 @@ exports[`renders correctly for an optional input field 1`] = `
   color: inherit;
 }
 
-.c10.c10.c10 {
+.c9.c9.c9 {
   position: relative;
 }
 
-.c12 {
+.c11 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1439,7 +1199,7 @@ exports[`renders correctly for an optional input field 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1453,44 +1213,18 @@ exports[`renders correctly for an optional input field 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c9 {
+.c8 {
   display: inline-block;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c11 {
+.c10 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -1498,55 +1232,55 @@ exports[`renders correctly for an optional input field 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c11[disabled] {
+.c10[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c11:focus {
+.c10:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c11::-webkit-input-placeholder {
+.c10::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c11::-moz-placeholder {
+.c10::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c11:-ms-input-placeholder {
+.c10:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c11::placeholder {
+.c10::placeholder {
   opacity: 0.6;
 }
 
-.c5 {
+.c4 {
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   display: block;
 }
 
-abbr.c8 {
+abbr.c7 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c8 {
+i.c7 {
   font-style: italic;
 }
 
-kbd.c8 {
+kbd.c7 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -1554,102 +1288,98 @@ kbd.c8 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c8 {
+mark.c7 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c8 {
+strong.c7 {
   font-weight: bold;
 }
 
-sub.c8,
-sup.c8 {
+sub.c7,
+sup.c7 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c8,
-u.c8 {
+ins.c7,
+u.c7 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c8,
-cite.c8,
-var.c8,
-em.c8 {
+i.c7,
+cite.c7,
+var.c7,
+em.c7 {
   font-style: italic;
 }
 
-kbd.c8,
-pre.c8,
-samp.c8 {
+kbd.c7,
+pre.c7,
+samp.c7 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c8 .c13 {
+.c7 .c12 {
   top: 0.1em;
 }
 
-.c3 {
+.c2 {
   margin-bottom: 0 !important;
 }
 
-.c7 {
+.c6 {
   font-size: 0.8rem;
   color: #708da8;
   margin-left: 0.5rem;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c0"
+    style="align-items: center;"
   >
-    <div
-      class="c2 c1"
-      style="align-items: center;"
+    <label
+      class="c2 c3 c4 c5"
+      font-weight="600"
+      for="username"
+      style="font-weight: 600;"
     >
-      <label
-        class="c3 c4 c5 c6"
-        font-weight="600"
-        for="username"
-        style="font-weight: 600;"
-      >
-        Username
-      </label>
-      <span
-        class="c7 c8 c1"
-      >
-        OPTIONAL
-      </span>
-    </div>
-    <div />
-    <div
-      class="c9 c10"
+      Username
+    </label>
+    <span
+      class="c6 c7 c0"
     >
-      <textarea
-        aria-invalid="false"
-        aria-required="false"
-        class="c11 c12"
-        id="username"
-        rows="3"
-        style="size: default;"
-        type="text"
-      />
-    </div>
-    <div />
+      OPTIONAL
+    </span>
   </div>
+  <div />
+  <div
+    class="c8 c9"
+  >
+    <textarea
+      aria-invalid="false"
+      aria-required="false"
+      class="c10 c11"
+      id="username"
+      rows="3"
+      style="size: default;"
+      type="text"
+    />
+  </div>
+  <div />
 </div>
 `;
 
 exports[`sizes renders correctly for an input field with size large 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1662,7 +1392,7 @@ exports[`sizes renders correctly for an input field with size large 1`] = `
   color: inherit;
 }
 
-.c3 {
+.c2 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1675,11 +1405,11 @@ exports[`sizes renders correctly for an input field with size large 1`] = `
   color: inherit;
 }
 
-.c3.c3.c3 {
+.c2.c2.c2 {
   position: relative;
 }
 
-.c5 {
+.c4 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1693,37 +1423,11 @@ exports[`sizes renders correctly for an input field with size large 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
+.c1 {
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -1731,63 +1435,59 @@ exports[`sizes renders correctly for an input field with size large 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c3[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c3:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c3::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c3::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c3:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c3::placeholder {
   opacity: 0.6;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
+  <div />
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c2"
   >
-    <div />
-    <div
-      class="c2 c3"
-    >
-      <textarea
-        aria-invalid="false"
-        aria-required="false"
-        class="c4 c5"
-        rows="3"
-        style="size: default;"
-        type="text"
-      />
-    </div>
-    <div />
+    <textarea
+      aria-invalid="false"
+      aria-required="false"
+      class="c3 c4"
+      rows="3"
+      style="size: default;"
+      type="text"
+    />
   </div>
+  <div />
 </div>
 `;
 
 exports[`sizes renders correctly for an input field with size medium 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1800,7 +1500,7 @@ exports[`sizes renders correctly for an input field with size medium 1`] = `
   color: inherit;
 }
 
-.c3 {
+.c2 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1813,11 +1513,11 @@ exports[`sizes renders correctly for an input field with size medium 1`] = `
   color: inherit;
 }
 
-.c3.c3.c3 {
+.c2.c2.c2 {
   position: relative;
 }
 
-.c5 {
+.c4 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1831,37 +1531,11 @@ exports[`sizes renders correctly for an input field with size medium 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
+.c1 {
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -1869,63 +1543,59 @@ exports[`sizes renders correctly for an input field with size medium 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c3[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c3:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c3::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c3::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c3:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c3::placeholder {
   opacity: 0.6;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
+  <div />
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c2"
   >
-    <div />
-    <div
-      class="c2 c3"
-    >
-      <textarea
-        aria-invalid="false"
-        aria-required="false"
-        class="c4 c5"
-        rows="3"
-        style="size: default;"
-        type="text"
-      />
-    </div>
-    <div />
+    <textarea
+      aria-invalid="false"
+      aria-required="false"
+      class="c3 c4"
+      rows="3"
+      style="size: default;"
+      type="text"
+    />
   </div>
+  <div />
 </div>
 `;
 
 exports[`sizes renders correctly for an input field with size small 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1938,7 +1608,7 @@ exports[`sizes renders correctly for an input field with size small 1`] = `
   color: inherit;
 }
 
-.c3 {
+.c2 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1951,11 +1621,11 @@ exports[`sizes renders correctly for an input field with size small 1`] = `
   color: inherit;
 }
 
-.c3.c3.c3 {
+.c2.c2.c2 {
   position: relative;
 }
 
-.c5 {
+.c4 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1969,37 +1639,11 @@ exports[`sizes renders correctly for an input field with size small 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
+.c1 {
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -2007,63 +1651,59 @@ exports[`sizes renders correctly for an input field with size small 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c3[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c3:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c3::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c3::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c3:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c3::placeholder {
   opacity: 0.6;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
+  <div />
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c2"
   >
-    <div />
-    <div
-      class="c2 c3"
-    >
-      <textarea
-        aria-invalid="false"
-        aria-required="false"
-        class="c4 c5"
-        rows="3"
-        style="size: default;"
-        type="text"
-      />
-    </div>
-    <div />
+    <textarea
+      aria-invalid="false"
+      aria-required="false"
+      class="c3 c4"
+      rows="3"
+      style="size: default;"
+      type="text"
+    />
   </div>
+  <div />
 </div>
 `;
 
 exports[`states renders correctly for an input field with state danger 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2076,7 +1716,7 @@ exports[`states renders correctly for an input field with state danger 1`] = `
   color: inherit;
 }
 
-.c3 {
+.c2 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2089,11 +1729,11 @@ exports[`states renders correctly for an input field with state danger 1`] = `
   color: inherit;
 }
 
-.c3.c3.c3 {
+.c2.c2.c2 {
   position: relative;
 }
 
-.c5 {
+.c4 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2107,37 +1747,11 @@ exports[`states renders correctly for an input field with state danger 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
+.c1 {
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -2145,68 +1759,64 @@ exports[`states renders correctly for an input field with state danger 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c3[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c3:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c3::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c3::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c3:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c3::placeholder {
   opacity: 0.6;
 }
 
-.c4 {
+.c3 {
   border-color: #e24c67;
   box-shadow: #e24c67 0px 0px 0px 1px !important;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
+  <div />
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c2"
   >
-    <div />
-    <div
-      class="c2 c3"
-    >
-      <textarea
-        aria-invalid="true"
-        aria-required="false"
-        class="c4 c5"
-        rows="3"
-        style="size: default;"
-        type="text"
-      />
-    </div>
-    <div />
+    <textarea
+      aria-invalid="true"
+      aria-required="false"
+      class="c3 c4"
+      rows="3"
+      style="size: default;"
+      type="text"
+    />
   </div>
+  <div />
 </div>
 `;
 
 exports[`states renders correctly for an input field with state primary 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2219,7 +1829,7 @@ exports[`states renders correctly for an input field with state primary 1`] = `
   color: inherit;
 }
 
-.c3 {
+.c2 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2232,11 +1842,11 @@ exports[`states renders correctly for an input field with state primary 1`] = `
   color: inherit;
 }
 
-.c3.c3.c3 {
+.c2.c2.c2 {
   position: relative;
 }
 
-.c5 {
+.c4 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2250,37 +1860,11 @@ exports[`states renders correctly for an input field with state primary 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
+.c1 {
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -2288,68 +1872,64 @@ exports[`states renders correctly for an input field with state primary 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c3[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c3:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c3::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c3::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c3:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c3::placeholder {
   opacity: 0.6;
 }
 
-.c4 {
+.c3 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
+  <div />
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c2"
   >
-    <div />
-    <div
-      class="c2 c3"
-    >
-      <textarea
-        aria-invalid="false"
-        aria-required="false"
-        class="c4 c5"
-        rows="3"
-        style="size: default;"
-        type="text"
-      />
-    </div>
-    <div />
+    <textarea
+      aria-invalid="false"
+      aria-required="false"
+      class="c3 c4"
+      rows="3"
+      style="size: default;"
+      type="text"
+    />
   </div>
+  <div />
 </div>
 `;
 
 exports[`states renders correctly for an input field with state success 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2362,7 +1942,7 @@ exports[`states renders correctly for an input field with state success 1`] = `
   color: inherit;
 }
 
-.c3 {
+.c2 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2375,11 +1955,11 @@ exports[`states renders correctly for an input field with state success 1`] = `
   color: inherit;
 }
 
-.c3.c3.c3 {
+.c2.c2.c2 {
   position: relative;
 }
 
-.c5 {
+.c4 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2393,37 +1973,11 @@ exports[`states renders correctly for an input field with state success 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
+.c1 {
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -2431,68 +1985,64 @@ exports[`states renders correctly for an input field with state success 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c3[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c3:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c3::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c3::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c3:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c3::placeholder {
   opacity: 0.6;
 }
 
-.c4 {
+.c3 {
   border-color: #4ca26c;
   box-shadow: #4ca26c 0px 0px 0px 1px !important;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
+  <div />
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c2"
   >
-    <div />
-    <div
-      class="c2 c3"
-    >
-      <textarea
-        aria-invalid="false"
-        aria-required="false"
-        class="c4 c5"
-        rows="3"
-        style="size: default;"
-        type="text"
-      />
-    </div>
-    <div />
+    <textarea
+      aria-invalid="false"
+      aria-required="false"
+      class="c3 c4"
+      rows="3"
+      style="size: default;"
+      type="text"
+    />
   </div>
+  <div />
 </div>
 `;
 
 exports[`states renders correctly for an input field with state warning 1`] = `
-.c1 {
+.c0 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2505,7 +2055,7 @@ exports[`states renders correctly for an input field with state warning 1`] = `
   color: inherit;
 }
 
-.c3 {
+.c2 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2518,11 +2068,11 @@ exports[`states renders correctly for an input field with state warning 1`] = `
   color: inherit;
 }
 
-.c3.c3.c3 {
+.c2.c2.c2 {
   position: relative;
 }
 
-.c5 {
+.c4 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2536,37 +2086,11 @@ exports[`states renders correctly for an input field with state warning 1`] = `
   margin-top: 0.5rem !important;
 }
 
-.c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  color: #435a6f;
-  fill: #435a6f;
-}
-
-.c0 *,
-.c0 *::before,
-.c0 *::after {
-  box-sizing: inherit;
-}
-
-.c0 *:focus {
-  outline: 2px solid #7467c0;
-  outline-offset: 2px;
-}
-
-.c2 {
+.c1 {
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -2574,62 +2098,58 @@ exports[`states renders correctly for an input field with state warning 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c3[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c3:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c3::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c3::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c3:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c3::placeholder {
   opacity: 0.6;
 }
 
-.c4 {
+.c3 {
   border-color: #ffc94c;
   box-shadow: #ffc94c 0px 0px 0px 1px !important;
 }
 
 <div
-  class="c0 c1"
+  class="c0"
+  display="inline-block"
+  style="display: inline-block;"
 >
+  <div />
   <div
-    class="c1"
-    display="inline-block"
-    style="display: inline-block;"
+    class="c1 c2"
   >
-    <div />
-    <div
-      class="c2 c3"
-    >
-      <textarea
-        aria-invalid="false"
-        aria-required="false"
-        class="c4 c5"
-        rows="3"
-        style="size: default;"
-        type="text"
-      />
-    </div>
-    <div />
+    <textarea
+      aria-invalid="false"
+      aria-required="false"
+      class="c3 c4"
+      rows="3"
+      style="size: default;"
+      type="text"
+    />
   </div>
+  <div />
 </div>
 `;