From df44fadbdd63863129731073ed36b81b6b88282c Mon Sep 17 00:00:00 2001
From: jxom <jakemoxey@gmail.com>
Date: Mon, 19 Nov 2018 22:41:56 +1100
Subject: [PATCH] Add icons to the Input component

---
 .../__snapshots__/Dialog.test.js.snap         |    7 +-
 .../__snapshots__/FieldWrapper.test.js.snap   |  413 ++-
 src/Icon/Icon.js                              |    9 +-
 .../__tests__/__snapshots__/Icon.test.js.snap |   76 +-
 src/Icon/styled.js                            |    2 +
 src/Input/Input.js                            |   31 +-
 src/Input/Input.mdx                           |   52 +-
 src/Input/InputField.js                       |    4 +
 src/Input/__tests__/Input.test.js             |   10 +
 src/Input/__tests__/InputField.test.js        |   11 +
 .../__snapshots__/Input.test.js.snap          | 1487 +++++++----
 .../__snapshots__/InputField.test.js.snap     | 2264 ++++++++++-------
 src/Input/styled.js                           |   67 +-
 13 files changed, 2652 insertions(+), 1781 deletions(-)

diff --git a/src/Dialog/__tests__/__snapshots__/Dialog.test.js.snap b/src/Dialog/__tests__/__snapshots__/Dialog.test.js.snap
index b6daf1fb4..0660aad86 100644
--- a/src/Dialog/__tests__/__snapshots__/Dialog.test.js.snap
+++ b/src/Dialog/__tests__/__snapshots__/Dialog.test.js.snap
@@ -386,6 +386,8 @@ h6.c6 {
   fill: #435a6f;
   position: relative;
   top: 0.1em;
+  height: 1em;
+  width: 1em;
 }
 
 @media (max-width:480px) {
@@ -441,11 +443,10 @@ h6.c6 {
         <span>
           <svg
             class="c10 c1"
-            height="1em"
             role="img"
-            style="height: 1em; width: 1em;"
+            size="1"
+            style="size: 1px;"
             viewBox="0 0 16 16"
-            width="1em"
           >
             <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"
diff --git a/src/FieldWrapper/__tests__/__snapshots__/FieldWrapper.test.js.snap b/src/FieldWrapper/__tests__/__snapshots__/FieldWrapper.test.js.snap
index b6a259c9d..a9af64688 100644
--- a/src/FieldWrapper/__tests__/__snapshots__/FieldWrapper.test.js.snap
+++ b/src/FieldWrapper/__tests__/__snapshots__/FieldWrapper.test.js.snap
@@ -28,24 +28,6 @@ exports[`renders correctly for a basic field 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c8 {
-  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;
-  margin-top: 0.5rem !important;
-}
-
-.c8.c8.c8 {
-  position: relative;
-}
-
 .c10 {
   margin: unset;
   padding: unset;
@@ -57,6 +39,7 @@ exports[`renders correctly for a basic field 1`] = `
   box-sizing: border-box;
   background-color: white;
   color: inherit;
+  margin-top: 0.5rem !important;
 }
 
 .c0 {
@@ -96,10 +79,6 @@ exports[`renders correctly for a basic field 1`] = `
   margin-bottom: 0 !important;
 }
 
-.c7 {
-  display: inline-block;
-}
-
 .c2 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -107,6 +86,21 @@ exports[`renders correctly for a basic field 1`] = `
   display: flex;
 }
 
+.c8 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c7 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+}
+
 .c9 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
@@ -168,7 +162,8 @@ exports[`renders correctly for a basic field 1`] = `
     </div>
     <div />
     <div
-      class="c7 c8"
+      class="c7 c8 c2 c1"
+      style="size: default;"
     >
       <input
         aria-invalid="false"
@@ -213,24 +208,6 @@ exports[`renders correctly for a field with a description 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c10 {
-  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;
-  margin-top: 0.5rem !important;
-}
-
-.c10.c10.c10 {
-  position: relative;
-}
-
 .c12 {
   margin: unset;
   padding: unset;
@@ -242,6 +219,7 @@ exports[`renders correctly for a field with a description 1`] = `
   box-sizing: border-box;
   background-color: white;
   color: inherit;
+  margin-top: 0.5rem !important;
 }
 
 .c0 {
@@ -339,10 +317,6 @@ samp.c8 {
   font-size: 0.8rem;
 }
 
-.c9 {
-  display: inline-block;
-}
-
 .c2 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -350,6 +324,21 @@ samp.c8 {
   display: flex;
 }
 
+.c10 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c9 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+}
+
 .c11 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
@@ -415,7 +404,8 @@ samp.c8 {
       Required for your fannypack
     </span>
     <div
-      class="c9 c10"
+      class="c9 c10 c2 c1"
+      style="size: default;"
     >
       <input
         aria-invalid="false"
@@ -460,24 +450,6 @@ exports[`renders correctly for a field with a hint 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c8 {
-  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;
-  margin-top: 0.5rem !important;
-}
-
-.c8.c8.c8 {
-  position: relative;
-}
-
 .c10 {
   margin: unset;
   padding: unset;
@@ -489,6 +461,7 @@ exports[`renders correctly for a field with a hint 1`] = `
   box-sizing: border-box;
   background-color: white;
   color: inherit;
+  margin-top: 0.5rem !important;
 }
 
 .c0 {
@@ -587,10 +560,6 @@ samp.c12 {
   margin-top: 0.25rem;
 }
 
-.c7 {
-  display: inline-block;
-}
-
 .c2 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -598,6 +567,21 @@ samp.c12 {
   display: flex;
 }
 
+.c8 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c7 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+}
+
 .c9 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
@@ -659,7 +643,8 @@ samp.c12 {
     </div>
     <div />
     <div
-      class="c7 c8"
+      class="c7 c8 c2 c1"
+      style="size: default;"
     >
       <input
         aria-invalid="false"
@@ -708,24 +693,6 @@ exports[`renders correctly for a full width field 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c9 {
-  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;
-  margin-top: 0.5rem !important;
-}
-
-.c9.c9.c9 {
-  position: relative;
-}
-
 .c11 {
   margin: unset;
   padding: unset;
@@ -737,6 +704,7 @@ exports[`renders correctly for a full width field 1`] = `
   box-sizing: border-box;
   background-color: white;
   color: inherit;
+  margin-top: 0.5rem !important;
 }
 
 .c0 {
@@ -780,10 +748,6 @@ exports[`renders correctly for a full width field 1`] = `
   width: 100%;
 }
 
-.c8 {
-  display: inline-block;
-}
-
 .c3 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -791,6 +755,22 @@ exports[`renders correctly for a full width field 1`] = `
   display: flex;
 }
 
+.c9 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c8 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  width: 100%;
+}
+
 .c10 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
@@ -856,9 +836,8 @@ exports[`renders correctly for a full width field 1`] = `
     </div>
     <div />
     <div
-      class="c8 c9"
-      style="width: 100%;"
-      width="100%"
+      class="c8 c9 c3 c1"
+      style="size: default;"
     >
       <input
         aria-invalid="false"
@@ -903,24 +882,6 @@ exports[`renders correctly for a required field 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c8 {
-  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;
-  margin-top: 0.5rem !important;
-}
-
-.c8.c8.c8 {
-  position: relative;
-}
-
 .c10 {
   margin: unset;
   padding: unset;
@@ -932,6 +893,7 @@ exports[`renders correctly for a required field 1`] = `
   box-sizing: border-box;
   background-color: white;
   color: inherit;
+  margin-top: 0.5rem !important;
 }
 
 .c0 {
@@ -971,10 +933,6 @@ exports[`renders correctly for a required field 1`] = `
   margin-bottom: 0 !important;
 }
 
-.c7 {
-  display: inline-block;
-}
-
 .c2 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -982,6 +940,21 @@ exports[`renders correctly for a required field 1`] = `
   display: flex;
 }
 
+.c8 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c7 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+}
+
 .c9 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
@@ -1043,7 +1016,8 @@ exports[`renders correctly for a required field 1`] = `
     </div>
     <div />
     <div
-      class="c7 c8"
+      class="c7 c8 c2 c1"
+      style="size: default;"
     >
       <input
         aria-invalid="false"
@@ -1088,24 +1062,6 @@ exports[`renders correctly for an optional field 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c10 {
-  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;
-  margin-top: 0.5rem !important;
-}
-
-.c10.c10.c10 {
-  position: relative;
-}
-
 .c12 {
   margin: unset;
   padding: unset;
@@ -1117,6 +1073,7 @@ exports[`renders correctly for an optional field 1`] = `
   box-sizing: border-box;
   background-color: white;
   color: inherit;
+  margin-top: 0.5rem !important;
 }
 
 .c0 {
@@ -1215,10 +1172,6 @@ samp.c8 {
   margin-left: 0.5rem;
 }
 
-.c9 {
-  display: inline-block;
-}
-
 .c2 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1226,6 +1179,21 @@ samp.c8 {
   display: flex;
 }
 
+.c10 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c9 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+}
+
 .c11 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
@@ -1292,7 +1260,8 @@ samp.c8 {
     </div>
     <div />
     <div
-      class="c9 c10"
+      class="c9 c10 c2 c1"
+      style="size: default;"
     >
       <input
         aria-invalid="false"
@@ -1337,24 +1306,6 @@ exports[`states renders correctly for an input with state danger 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c8 {
-  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;
-  margin-top: 0.5rem !important;
-}
-
-.c8.c8.c8 {
-  position: relative;
-}
-
 .c10 {
   margin: unset;
   padding: unset;
@@ -1366,6 +1317,7 @@ exports[`states renders correctly for an input with state danger 1`] = `
   box-sizing: border-box;
   background-color: white;
   color: inherit;
+  margin-top: 0.5rem !important;
 }
 
 .c13 {
@@ -1478,10 +1430,6 @@ samp.c12 {
   margin-top: 0.25rem;
 }
 
-.c7 {
-  display: inline-block;
-}
-
 .c2 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1489,6 +1437,21 @@ samp.c12 {
   display: flex;
 }
 
+.c8 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c7 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+}
+
 .c9 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
@@ -1555,7 +1518,8 @@ samp.c12 {
     </div>
     <div />
     <div
-      class="c7 c8"
+      class="c7 c8 c2 c1"
+      style="size: default;"
     >
       <input
         aria-invalid="true"
@@ -1606,24 +1570,6 @@ exports[`states renders correctly for an input with state primary 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c8 {
-  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;
-  margin-top: 0.5rem !important;
-}
-
-.c8.c8.c8 {
-  position: relative;
-}
-
 .c10 {
   margin: unset;
   padding: unset;
@@ -1635,6 +1581,7 @@ exports[`states renders correctly for an input with state primary 1`] = `
   box-sizing: border-box;
   background-color: white;
   color: inherit;
+  margin-top: 0.5rem !important;
 }
 
 .c13 {
@@ -1747,10 +1694,6 @@ samp.c12 {
   margin-top: 0.25rem;
 }
 
-.c7 {
-  display: inline-block;
-}
-
 .c2 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1758,6 +1701,21 @@ samp.c12 {
   display: flex;
 }
 
+.c8 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c7 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+}
+
 .c9 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
@@ -1824,7 +1782,8 @@ samp.c12 {
     </div>
     <div />
     <div
-      class="c7 c8"
+      class="c7 c8 c2 c1"
+      style="size: default;"
     >
       <input
         aria-invalid="false"
@@ -1875,24 +1834,6 @@ exports[`states renders correctly for an input with state success 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c8 {
-  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;
-  margin-top: 0.5rem !important;
-}
-
-.c8.c8.c8 {
-  position: relative;
-}
-
 .c10 {
   margin: unset;
   padding: unset;
@@ -1904,6 +1845,7 @@ exports[`states renders correctly for an input with state success 1`] = `
   box-sizing: border-box;
   background-color: white;
   color: inherit;
+  margin-top: 0.5rem !important;
 }
 
 .c13 {
@@ -2016,10 +1958,6 @@ samp.c12 {
   margin-top: 0.25rem;
 }
 
-.c7 {
-  display: inline-block;
-}
-
 .c2 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -2027,6 +1965,21 @@ samp.c12 {
   display: flex;
 }
 
+.c8 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c7 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+}
+
 .c9 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
@@ -2093,7 +2046,8 @@ samp.c12 {
     </div>
     <div />
     <div
-      class="c7 c8"
+      class="c7 c8 c2 c1"
+      style="size: default;"
     >
       <input
         aria-invalid="false"
@@ -2144,24 +2098,6 @@ exports[`states renders correctly for an input with state warning 1`] = `
   margin-bottom: 0.25rem !important;
 }
 
-.c8 {
-  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;
-  margin-top: 0.5rem !important;
-}
-
-.c8.c8.c8 {
-  position: relative;
-}
-
 .c10 {
   margin: unset;
   padding: unset;
@@ -2173,6 +2109,7 @@ exports[`states renders correctly for an input with state warning 1`] = `
   box-sizing: border-box;
   background-color: white;
   color: inherit;
+  margin-top: 0.5rem !important;
 }
 
 .c13 {
@@ -2285,10 +2222,6 @@ samp.c12 {
   margin-top: 0.25rem;
 }
 
-.c7 {
-  display: inline-block;
-}
-
 .c2 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -2296,6 +2229,21 @@ samp.c12 {
   display: flex;
 }
 
+.c8 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c7 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+}
+
 .c9 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
@@ -2362,7 +2310,8 @@ samp.c12 {
     </div>
     <div />
     <div
-      class="c7 c8"
+      class="c7 c8 c2 c1"
+      style="size: default;"
     >
       <input
         aria-invalid="false"
diff --git a/src/Icon/Icon.js b/src/Icon/Icon.js
index 5faf45c64..4628907c2 100644
--- a/src/Icon/Icon.js
+++ b/src/Icon/Icon.js
@@ -30,14 +30,7 @@ export const Icon = ({ a11yLabel, children, icon, size: _size, theme, ...props }
   const viewBoxSize = size >= LARGE_VIEW_BOX_SIZE ? LARGE_VIEW_BOX_SIZE : DEFAULT_VIEW_BOX_SIZE;
   const paths = svgPaths[icon];
   return (
-    <_Icon
-      as="svg"
-      role="img"
-      height={`${size}em`}
-      width={`${size}em`}
-      viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}
-      {...props}
-    >
+    <_Icon as="svg" role="img" size={size} viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`} {...props}>
       {a11yLabel && <title>{a11yLabel}</title>}
       {paths.map(path => (
         <path key={path} d={path} fillRule="even-odd" />
diff --git a/src/Icon/__tests__/__snapshots__/Icon.test.js.snap b/src/Icon/__tests__/__snapshots__/Icon.test.js.snap
index c79b9ca96..c2914cfcb 100644
--- a/src/Icon/__tests__/__snapshots__/Icon.test.js.snap
+++ b/src/Icon/__tests__/__snapshots__/Icon.test.js.snap
@@ -57,6 +57,8 @@ exports[`colors renders correctly for an icon with color danger 1`] = `
   fill: #d60027;
   position: relative;
   top: 0.1em;
+  height: 1em;
+  width: 1em;
 }
 
 <div
@@ -65,11 +67,10 @@ exports[`colors renders correctly for an icon with color danger 1`] = `
   <svg
     class="c2 c3"
     color="danger"
-    height="1em"
     role="img"
-    style="height: 1em; width: 1em;"
+    size="1"
+    style="size: 1px;"
     viewBox="0 0 16 16"
-    width="1em"
   >
     <title>
       Settings
@@ -139,6 +140,8 @@ exports[`colors renders correctly for an icon with color primary 1`] = `
   fill: #3926a5;
   position: relative;
   top: 0.1em;
+  height: 1em;
+  width: 1em;
 }
 
 <div
@@ -147,11 +150,10 @@ exports[`colors renders correctly for an icon with color primary 1`] = `
   <svg
     class="c2 c3"
     color="primary"
-    height="1em"
     role="img"
-    style="height: 1em; width: 1em;"
+    size="1"
+    style="size: 1px;"
     viewBox="0 0 16 16"
-    width="1em"
   >
     <title>
       Settings
@@ -221,6 +223,8 @@ exports[`colors renders correctly for an icon with color success 1`] = `
   fill: #007b2e;
   position: relative;
   top: 0.1em;
+  height: 1em;
+  width: 1em;
 }
 
 <div
@@ -229,11 +233,10 @@ exports[`colors renders correctly for an icon with color success 1`] = `
   <svg
     class="c2 c3"
     color="success"
-    height="1em"
     role="img"
-    style="height: 1em; width: 1em;"
+    size="1"
+    style="size: 1px;"
     viewBox="0 0 16 16"
-    width="1em"
   >
     <title>
       Settings
@@ -303,6 +306,8 @@ exports[`colors renders correctly for an icon with color warning 1`] = `
   fill: #ffb300;
   position: relative;
   top: 0.1em;
+  height: 1em;
+  width: 1em;
 }
 
 <div
@@ -311,11 +316,10 @@ exports[`colors renders correctly for an icon with color warning 1`] = `
   <svg
     class="c2 c3"
     color="warning"
-    height="1em"
     role="img"
-    style="height: 1em; width: 1em;"
+    size="1"
+    style="size: 1px;"
     viewBox="0 0 16 16"
-    width="1em"
   >
     <title>
       Settings
@@ -371,6 +375,8 @@ exports[`renders correctly for a basic icon 1`] = `
   fill: #435a6f;
   position: relative;
   top: 0.1em;
+  height: 1em;
+  width: 1em;
 }
 
 <div
@@ -378,11 +384,10 @@ exports[`renders correctly for a basic icon 1`] = `
 >
   <svg
     class="c2 c1"
-    height="1em"
     role="img"
-    style="height: 1em; width: 1em;"
+    size="1"
+    style="size: 1px;"
     viewBox="0 0 16 16"
-    width="1em"
   >
     <title>
       Settings
@@ -438,6 +443,8 @@ exports[`sizes renders correctly for an icon with size large 1`] = `
   fill: #435a6f;
   position: relative;
   top: 0.1em;
+  height: 2em;
+  width: 2em;
 }
 
 <div
@@ -445,11 +452,10 @@ exports[`sizes renders correctly for an icon with size large 1`] = `
 >
   <svg
     class="c2 c1"
-    height="2em"
     role="img"
-    style="height: 2em; width: 2em;"
+    size="2"
+    style="size: 2px;"
     viewBox="0 0 16 16"
-    width="2em"
   >
     <title>
       Settings
@@ -505,6 +511,8 @@ exports[`sizes renders correctly for an icon with size medium 1`] = `
   fill: #435a6f;
   position: relative;
   top: 0.1em;
+  height: 1.5em;
+  width: 1.5em;
 }
 
 <div
@@ -512,11 +520,10 @@ exports[`sizes renders correctly for an icon with size medium 1`] = `
 >
   <svg
     class="c2 c1"
-    height="1.5em"
     role="img"
-    style="height: 1.5em; width: 1.5em;"
+    size="1.5"
+    style="size: 1.5px;"
     viewBox="0 0 16 16"
-    width="1.5em"
   >
     <title>
       Settings
@@ -572,6 +579,8 @@ exports[`sizes renders correctly for an icon with size small 1`] = `
   fill: #435a6f;
   position: relative;
   top: 0.1em;
+  height: 0.8em;
+  width: 0.8em;
 }
 
 <div
@@ -579,11 +588,9 @@ exports[`sizes renders correctly for an icon with size small 1`] = `
 >
   <svg
     class="c2 c1"
-    height="0.8em"
     role="img"
-    style="height: 0.8em; width: 0.8em;"
+    style="size: 0.8px;"
     viewBox="0 0 16 16"
-    width="0.8em"
   >
     <title>
       Settings
@@ -639,6 +646,8 @@ exports[`sizes renders correctly for an icon with size xlarge 1`] = `
   fill: #435a6f;
   position: relative;
   top: 0.1em;
+  height: 2.5em;
+  width: 2.5em;
 }
 
 <div
@@ -646,11 +655,10 @@ exports[`sizes renders correctly for an icon with size xlarge 1`] = `
 >
   <svg
     class="c2 c1"
-    height="2.5em"
     role="img"
-    style="height: 2.5em; width: 2.5em;"
+    size="2.5"
+    style="size: 2.5px;"
     viewBox="0 0 16 16"
-    width="2.5em"
   >
     <title>
       Settings
@@ -706,6 +714,8 @@ exports[`sizes renders correctly for an icon with size xxlarge 1`] = `
   fill: #435a6f;
   position: relative;
   top: 0.1em;
+  height: 3em;
+  width: 3em;
 }
 
 <div
@@ -713,11 +723,10 @@ exports[`sizes renders correctly for an icon with size xxlarge 1`] = `
 >
   <svg
     class="c2 c1"
-    height="3em"
     role="img"
-    style="height: 3em; width: 3em;"
+    size="3"
+    style="size: 3px;"
     viewBox="0 0 16 16"
-    width="3em"
   >
     <title>
       Settings
@@ -773,6 +782,8 @@ exports[`sizes renders correctly for an icon with size xxxlarge 1`] = `
   fill: #435a6f;
   position: relative;
   top: 0.1em;
+  height: 4em;
+  width: 4em;
 }
 
 <div
@@ -780,11 +791,10 @@ exports[`sizes renders correctly for an icon with size xxxlarge 1`] = `
 >
   <svg
     class="c2 c1"
-    height="4em"
     role="img"
-    style="height: 4em; width: 4em;"
+    size="4"
+    style="size: 4px;"
     viewBox="0 0 16 16"
-    width="4em"
   >
     <title>
       Settings
diff --git a/src/Icon/styled.js b/src/Icon/styled.js
index ee6d33b6a..29569572c 100644
--- a/src/Icon/styled.js
+++ b/src/Icon/styled.js
@@ -6,5 +6,7 @@ export default styled(Box)`
   fill: ${props => palette(props.color || 'text')(props)};
   position: relative;
   top: 0.1em;
+  height: ${props => props.size}em
+  width: ${props => props.size}em
   ${theme('fannypack.Icon.base')};
 `;
diff --git a/src/Input/Input.js b/src/Input/Input.js
index 56b3ed95c..a79acefa3 100644
--- a/src/Input/Input.js
+++ b/src/Input/Input.js
@@ -1,11 +1,12 @@
 // @flow
-import React, { type Node } from 'react';
+import React, { type Element, type Node } from 'react';
 
+import { InlineFlex } from '../primitives';
 import type { Size } from '../types';
-import { InlineBlock } from '../primitives';
-import _Input, { LoadingSpinner } from './styled';
+import _Input, { Icon, InputWrapper, LoadingSpinner } from './styled';
 
 export type Props = {
+  after?: Element<any>,
   /** An accessible identifier for the input */
   a11yId?: string,
   /** An accessible label for the input */
@@ -14,6 +15,7 @@ export type Props = {
   autoComplete?: string,
   /** Automatically focus on the input */
   autoFocus?: boolean,
+  before?: Element<any>,
   children: Node,
   className?: string,
   /** Default value of the input */
@@ -72,6 +74,8 @@ const Input = ({
   className,
   defaultValue,
   disabled,
+  after,
+  before,
   isFullWidth,
   isLoading,
   isRequired,
@@ -95,12 +99,24 @@ const Input = ({
   value,
   ...props
 }: Props) => (
-  <InlineBlock relative width={isFullWidth ? '100%' : undefined} {...props}>
+  <InputWrapper isFullWidth={isFullWidth} size={size}>
+    {before && (
+      <InlineFlex absolute zIndex="3">
+        {before}
+      </InlineFlex>
+    )}
+    {after && (
+      <InlineFlex absolute right="0" zIndex="3">
+        {after}
+      </InlineFlex>
+    )}
     <_Input
+      after={after}
       aria-invalid={state === 'danger'}
       aria-label={a11yLabel}
       aria-required={isRequired}
       autoComplete={autoComplete}
+      before={before}
       autoFocus={autoFocus}
       defaultValue={defaultValue}
       disabled={disabled}
@@ -124,11 +140,14 @@ const Input = ({
       step={step}
       type={type}
       value={value}
+      {...props}
     />
     {isLoading && <LoadingSpinner color="text" />}
-  </InlineBlock>
+  </InputWrapper>
 );
 
+Input.Icon = Icon;
+
 Input.defaultProps = {
   a11yId: undefined,
   a11yLabel: undefined,
@@ -138,6 +157,8 @@ Input.defaultProps = {
   className: undefined,
   defaultValue: undefined,
   disabled: false,
+  after: undefined,
+  before: undefined,
   isFullWidth: false,
   isLoading: false,
   isRequired: false,
diff --git a/src/Input/Input.mdx b/src/Input/Input.mdx
index b1979bbc2..726856290 100644
--- a/src/Input/Input.mdx
+++ b/src/Input/Input.mdx
@@ -57,14 +57,21 @@ To make the input span full width, add the `isFullWidth` prop.
 Just like normal `<input>` elements, you can specify a `type`.
 
 <Playground>
-  <Input type="number" /><br/>
-  <Input type="tel" marginTop="xxsmall"  /><br/>
-  <Input type="date" marginTop="xxsmall"  /><br/>
-  <Input type="email" marginTop="xxsmall"  /><br/>
-  <Input type="password" marginTop="xxsmall"  /><br/>
-  <Input type="search" marginTop="xxsmall"  /><br/>
-  <Input type="time" marginTop="xxsmall"  /><br/>
-  <Input type="url" marginTop="xxsmall"  />
+  <Input type="number" />
+  <br />
+  <Input type="tel" marginTop="xxsmall" />
+  <br />
+  <Input type="date" marginTop="xxsmall" />
+  <br />
+  <Input type="email" marginTop="xxsmall" />
+  <br />
+  <Input type="password" marginTop="xxsmall" />
+  <br />
+  <Input type="search" marginTop="xxsmall" />
+  <br />
+  <Input type="time" marginTop="xxsmall" />
+  <br />
+  <Input type="url" marginTop="xxsmall" />
 </Playground>
 
 ## Sizes
@@ -72,9 +79,12 @@ Just like normal `<input>` elements, you can specify a `type`.
 An input can come in different sizes - `small`, `medium`, `large`, or the default.
 
 <Playground>
-  <Input size="small" /><br/>
-  <Input marginTop="xxsmall" /><br/>
-  <Input size="medium" marginTop="xxsmall" /><br/>
+  <Input size="small" />
+  <br />
+  <Input marginTop="xxsmall" />
+  <br />
+  <Input size="medium" marginTop="xxsmall" />
+  <br />
   <Input size="large" marginTop="xxsmall" />
 </Playground>
 
@@ -83,9 +93,12 @@ An input can come in different sizes - `small`, `medium`, `large`, or the defaul
 An input can use different states (as per palette) such as `danger`, `success` and `warning`.
 
 <Playground>
-  <Input state="danger" /><br/>
-  <Input state="success" marginTop="xxsmall" /><br/>
-  <Input state="warning" marginTop="xxsmall" /><br/>
+  <Input state="danger" />
+  <br />
+  <Input state="success" marginTop="xxsmall" />
+  <br />
+  <Input state="warning" marginTop="xxsmall" />
+  <br />
   <Input state="primary" marginTop="xxsmall" />
 </Playground>
 
@@ -101,6 +114,13 @@ You can use the [Group component](/components/group) to add on stuff to your `<I
   </Group>
 </Playground>
 
+## Icons
+
+<Playground>
+  <Input before={<Input.Icon icon="search" />} placeholder="Jake Moxey" />
+  <Input after={<Input.Icon icon="search" />} placeholder="Jake Moxey" marginLeft="xxsmall" />
+</Playground>
+
 ## Controlled Usage
 
 The previous examples are examples of uncontrolled usage. To control the value yourself, use a combination of `onChange` and `value`.
@@ -109,9 +129,7 @@ Note: Do not use `defaultValue` with controlled inputs!
 
 <Playground>
   <Component initialState={{ value: 'Fannypacks rock!' }}>
-    {({ state, setState }) => (
-      <Input onChange={e => setState({ value: e.target.value })} value={state.value} />
-    )}
+    {({ state, setState }) => <Input onChange={e => setState({ value: e.target.value })} value={state.value} />}
   </Component>
 </Playground>
 
diff --git a/src/Input/InputField.js b/src/Input/InputField.js
index b986bd587..bb245d218 100644
--- a/src/Input/InputField.js
+++ b/src/Input/InputField.js
@@ -12,6 +12,7 @@ type Props = {
   a11yId?: string,
   /** An accessible label for the input */
   a11yLabel?: string,
+  after?: Element<any>,
   as?: any,
   autoComplete?: string,
   /** Automatically focus on the input */
@@ -20,6 +21,7 @@ type Props = {
   addonBefore?: Element<any>,
   /** Addon component to the input (after). Similar to the addon components in Input. */
   addonAfter?: Element<any>,
+  before?: Element<any>,
   children: Node,
   className?: string,
   /** Default value of the input */
@@ -121,9 +123,11 @@ InputField.defaultProps = {
   addonAfter: undefined,
   a11yId: undefined,
   a11yLabel: undefined,
+  after: undefined,
   as: undefined,
   autoComplete: undefined,
   autoFocus: false,
+  before: undefined,
   className: undefined,
   defaultValue: undefined,
   description: undefined,
diff --git a/src/Input/__tests__/Input.test.js b/src/Input/__tests__/Input.test.js
index 83a044877..16803a6b8 100644
--- a/src/Input/__tests__/Input.test.js
+++ b/src/Input/__tests__/Input.test.js
@@ -54,3 +54,13 @@ describe('states', () => {
     });
   });
 });
+
+it('renders correctly for an input with a before component', () => {
+  const { container } = render(<Input before={<Input.Icon icon="search" />} />);
+  expect(container.firstChild).toMatchSnapshot();
+});
+
+it('renders correctly for an input with a after component', () => {
+  const { container } = render(<Input after={<Input.Icon icon="search" />} />);
+  expect(container.firstChild).toMatchSnapshot();
+});
diff --git a/src/Input/__tests__/InputField.test.js b/src/Input/__tests__/InputField.test.js
index b2fae1ce8..ba412794a 100644
--- a/src/Input/__tests__/InputField.test.js
+++ b/src/Input/__tests__/InputField.test.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import render from '../../_utils/tests/render';
+import Input from '../Input';
 import InputField from '../InputField';
 import 'jest-styled-components';
 
@@ -93,3 +94,13 @@ it('renders correctly for addon component (vertical)', () => {
   );
   expect(container.firstChild).toMatchSnapshot();
 });
+
+it('renders correctly for an input with a before component', () => {
+  const { container } = render(<InputField before={<Input.Icon icon="search" />} />);
+  expect(container.firstChild).toMatchSnapshot();
+});
+
+it('renders correctly for an input with a after component', () => {
+  const { container } = render(<InputField after={<Input.Icon icon="search" />} />);
+  expect(container.firstChild).toMatchSnapshot();
+});
diff --git a/src/Input/__tests__/__snapshots__/Input.test.js.snap b/src/Input/__tests__/__snapshots__/Input.test.js.snap
index 9dc836e13..095d0fc6c 100644
--- a/src/Input/__tests__/__snapshots__/Input.test.js.snap
+++ b/src/Input/__tests__/__snapshots__/Input.test.js.snap
@@ -14,24 +14,7 @@ exports[`renders correctly for a basic input 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 {
-  position: relative;
-}
-
-.c5 {
+.c6 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -69,11 +52,29 @@ exports[`renders correctly for a basic input 1`] = `
   outline-offset: 2px;
 }
 
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
 .c2 {
-  display: inline-block;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
 }
 
-.c4 {
+.c5 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -82,32 +83,32 @@ exports[`renders correctly for a basic input 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c5[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c5:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c5::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c5::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c5:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c5::placeholder {
   opacity: 0.6;
 }
 
@@ -115,12 +116,13 @@ exports[`renders correctly for a basic input 1`] = `
   class="c0 c1"
 >
   <div
-    class="c2 c3"
+    class="c2 c3 c4 c1"
+    style="size: default;"
   >
     <input
       aria-invalid="false"
       aria-required="false"
-      class="c4 c5"
+      class="c5 c6"
       style="size: default;"
       type="text"
       value=""
@@ -143,7 +145,7 @@ exports[`renders correctly for a disabled input 1`] = `
   color: inherit;
 }
 
-.c3 {
+.c6 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -152,15 +154,130 @@ exports[`renders correctly for a disabled input 1`] = `
   font-family: inherit;
   font-size: 100%;
   box-sizing: border-box;
-  background-color: unset;
+  background-color: white;
   color: inherit;
 }
 
-.c3.c3.c3 {
+.c0 {
+  box-sizing: border-box;
+  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  color: #435a6f;
+}
+
+.c0 *,
+.c0 *::before,
+.c0 *::after {
+  box-sizing: inherit;
+}
+
+.c0 *:focus {
+  outline: 2px solid #7467c0;
+  outline-offset: 2px;
+}
+
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c2 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   position: relative;
 }
 
 .c5 {
+  border: 1px solid #bdbdbd;
+  box-shadow: inset 0px 1px 2px #e5e5e5;
+  border-radius: 0.2em;
+  height: 2.5em;
+  width: 100%;
+  padding: 0.4em 0.6em;
+}
+
+.c5[disabled] {
+  background-color: #f2f2f2;
+  box-shadow: unset;
+  color: #8d8d8d;
+}
+
+.c5:focus {
+  outline: unset;
+  z-index: 2;
+  border-color: #7467c0;
+  box-shadow: #7467c0 0px 0px 0px 1px !important;
+}
+
+.c5::-webkit-input-placeholder {
+  opacity: 0.6;
+}
+
+.c5::-moz-placeholder {
+  opacity: 0.6;
+}
+
+.c5:-ms-input-placeholder {
+  opacity: 0.6;
+}
+
+.c5::placeholder {
+  opacity: 0.6;
+}
+
+<div
+  class="c0 c1"
+>
+  <div
+    class="c2 c3 c4 c1"
+    style="size: default;"
+  >
+    <input
+      aria-invalid="false"
+      aria-required="false"
+      class="c5 c6"
+      disabled=""
+      style="size: default;"
+      type="text"
+      value=""
+    />
+  </div>
+</div>
+`;
+
+exports[`renders correctly for a full width input 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;
+}
+
+.c6 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -198,11 +315,30 @@ exports[`renders correctly for a disabled input 1`] = `
   outline-offset: 2px;
 }
 
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
 .c2 {
-  display: inline-block;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  width: 100%;
 }
 
-.c4 {
+.c5 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -211,46 +347,50 @@ exports[`renders correctly for a disabled input 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c5[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c5:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c5::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c5::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c5:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c5::placeholder {
   opacity: 0.6;
 }
 
+.c5 {
+  width: 100%;
+}
+
 <div
   class="c0 c1"
 >
   <div
-    class="c2 c3"
+    class="c2 c3 c4 c1"
+    style="size: default;"
   >
     <input
       aria-invalid="false"
       aria-required="false"
-      class="c4 c5"
-      disabled=""
+      class="c5 c6"
       style="size: default;"
       type="text"
       value=""
@@ -259,7 +399,7 @@ exports[`renders correctly for a disabled input 1`] = `
 </div>
 `;
 
-exports[`renders correctly for a full width input 1`] = `
+exports[`renders correctly for an input with a after component 1`] = `
 .c1 {
   margin: unset;
   padding: unset;
@@ -273,7 +413,7 @@ exports[`renders correctly for a full width input 1`] = `
   color: inherit;
 }
 
-.c3 {
+.c9 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -282,14 +422,10 @@ exports[`renders correctly for a full width input 1`] = `
   font-family: inherit;
   font-size: 100%;
   box-sizing: border-box;
-  background-color: unset;
+  background-color: white;
   color: inherit;
 }
 
-.c3.c3.c3 {
-  position: relative;
-}
-
 .c5 {
   margin: unset;
   padding: unset;
@@ -299,10 +435,14 @@ exports[`renders correctly for a full width input 1`] = `
   font-family: inherit;
   font-size: 100%;
   box-sizing: border-box;
-  background-color: white;
+  background-color: unset;
   color: inherit;
 }
 
+.c5.c5.c5 {
+  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;
@@ -328,11 +468,44 @@ exports[`renders correctly for a full width input 1`] = `
   outline-offset: 2px;
 }
 
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c7 {
+  fill: #435a6f;
+  position: relative;
+  top: 0.1em;
+  height: 1em;
+  width: 1em;
+}
+
+.c6 {
+  fill: #708da8;
+  height: 2.5em;
+  margin: 0 0.75em;
+  top: 0;
+}
+
 .c2 {
-  display: inline-block;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
 }
 
-.c4 {
+.c8 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -341,51 +514,67 @@ exports[`renders correctly for a full width input 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c8[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c8:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c8::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c8::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c8:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c8::placeholder {
   opacity: 0.6;
 }
 
-.c4 {
-  width: 100%;
+.c8 {
+  padding-right: 2.3em;
 }
 
 <div
   class="c0 c1"
 >
   <div
-    class="c2 c3"
-    style="width: 100%;"
-    width="100%"
+    class="c2 c3 c4 c1"
+    style="size: default;"
   >
+    <div
+      class="c3 c4 c5"
+      style="right: 0px; z-index: 3;"
+    >
+      <svg
+        class="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="c4 c5"
+      class="c8 c9"
       style="size: default;"
       type="text"
       value=""
@@ -394,7 +583,7 @@ exports[`renders correctly for a full width input 1`] = `
 </div>
 `;
 
-exports[`renders correctly for an input with a default value 1`] = `
+exports[`renders correctly for an input with a before component 1`] = `
 .c1 {
   margin: unset;
   padding: unset;
@@ -408,7 +597,7 @@ exports[`renders correctly for an input with a default value 1`] = `
   color: inherit;
 }
 
-.c3 {
+.c9 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -417,14 +606,10 @@ exports[`renders correctly for an input with a default value 1`] = `
   font-family: inherit;
   font-size: 100%;
   box-sizing: border-box;
-  background-color: unset;
+  background-color: white;
   color: inherit;
 }
 
-.c3.c3.c3 {
-  position: relative;
-}
-
 .c5 {
   margin: unset;
   padding: unset;
@@ -434,10 +619,14 @@ exports[`renders correctly for an input with a default value 1`] = `
   font-family: inherit;
   font-size: 100%;
   box-sizing: border-box;
-  background-color: white;
+  background-color: unset;
   color: inherit;
 }
 
+.c5.c5.c5 {
+  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;
@@ -463,11 +652,44 @@ exports[`renders correctly for an input with a default value 1`] = `
   outline-offset: 2px;
 }
 
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c7 {
+  fill: #435a6f;
+  position: relative;
+  top: 0.1em;
+  height: 1em;
+  width: 1em;
+}
+
+.c6 {
+  fill: #708da8;
+  height: 2.5em;
+  margin: 0 0.75em;
+  top: 0;
+}
+
 .c2 {
-  display: inline-block;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
 }
 
-.c4 {
+.c8 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -476,54 +698,76 @@ exports[`renders correctly for an input with a default value 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c8[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c8:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c8::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c8::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c8:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c8::placeholder {
   opacity: 0.6;
 }
 
+.c8 {
+  padding-left: 2.3em;
+}
+
 <div
   class="c0 c1"
 >
   <div
-    class="c2 c3"
+    class="c2 c3 c4 c1"
+    style="size: default;"
   >
+    <div
+      class="c3 c4 c5"
+      style="z-index: 3;"
+    >
+      <svg
+        class="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="c4 c5"
+      class="c8 c9"
       style="size: default;"
       type="text"
-      value="Awesome value"
+      value=""
     />
   </div>
 </div>
 `;
 
-exports[`renders correctly for an input with a placeholder 1`] = `
+exports[`renders correctly for an input with a default value 1`] = `
 .c1 {
   margin: unset;
   padding: unset;
@@ -537,7 +781,7 @@ exports[`renders correctly for an input with a placeholder 1`] = `
   color: inherit;
 }
 
-.c3 {
+.c6 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -546,15 +790,129 @@ exports[`renders correctly for an input with a placeholder 1`] = `
   font-family: inherit;
   font-size: 100%;
   box-sizing: border-box;
-  background-color: unset;
+  background-color: white;
   color: inherit;
 }
 
-.c3.c3.c3 {
+.c0 {
+  box-sizing: border-box;
+  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  color: #435a6f;
+}
+
+.c0 *,
+.c0 *::before,
+.c0 *::after {
+  box-sizing: inherit;
+}
+
+.c0 *:focus {
+  outline: 2px solid #7467c0;
+  outline-offset: 2px;
+}
+
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c2 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   position: relative;
 }
 
 .c5 {
+  border: 1px solid #bdbdbd;
+  box-shadow: inset 0px 1px 2px #e5e5e5;
+  border-radius: 0.2em;
+  height: 2.5em;
+  width: 100%;
+  padding: 0.4em 0.6em;
+}
+
+.c5[disabled] {
+  background-color: #f2f2f2;
+  box-shadow: unset;
+  color: #8d8d8d;
+}
+
+.c5:focus {
+  outline: unset;
+  z-index: 2;
+  border-color: #7467c0;
+  box-shadow: #7467c0 0px 0px 0px 1px !important;
+}
+
+.c5::-webkit-input-placeholder {
+  opacity: 0.6;
+}
+
+.c5::-moz-placeholder {
+  opacity: 0.6;
+}
+
+.c5:-ms-input-placeholder {
+  opacity: 0.6;
+}
+
+.c5::placeholder {
+  opacity: 0.6;
+}
+
+<div
+  class="c0 c1"
+>
+  <div
+    class="c2 c3 c4 c1"
+    style="size: default;"
+  >
+    <input
+      aria-invalid="false"
+      aria-required="false"
+      class="c5 c6"
+      style="size: default;"
+      type="text"
+      value="Awesome value"
+    />
+  </div>
+</div>
+`;
+
+exports[`renders correctly for an input with a placeholder 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;
+}
+
+.c6 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -592,11 +950,29 @@ exports[`renders correctly for an input with a placeholder 1`] = `
   outline-offset: 2px;
 }
 
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
 .c2 {
-  display: inline-block;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
 }
 
-.c4 {
+.c5 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -605,32 +981,32 @@ exports[`renders correctly for an input with a placeholder 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c5[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c5:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c5::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c5::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c5:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c5::placeholder {
   opacity: 0.6;
 }
 
@@ -638,12 +1014,13 @@ exports[`renders correctly for an input with a placeholder 1`] = `
   class="c0 c1"
 >
   <div
-    class="c2 c3"
+    class="c2 c3 c4 c1"
+    style="size: default;"
   >
     <input
       aria-invalid="false"
       aria-required="false"
-      class="c4 c5"
+      class="c5 c6"
       placeholder="Awesome placeholder"
       style="size: default;"
       type="text"
@@ -667,24 +1044,7 @@ exports[`sizes renders correctly for an input 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 {
-  position: relative;
-}
-
-.c5 {
+.c6 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -722,11 +1082,33 @@ exports[`sizes renders correctly for an input with size large 1`] = `
   outline-offset: 2px;
 }
 
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
 .c2 {
-  display: inline-block;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
 }
 
-.c4 {
+.c2 {
+  font-size: 1.5rem;
+}
+
+.c5 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -735,40 +1117,36 @@ exports[`sizes renders correctly for an input with size large 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c5[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c5:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c5::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c5::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c5:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c5::placeholder {
   opacity: 0.6;
 }
 
-.c4 {
-  font-size: 1.5rem;
-}
-
-.c4 + .c6 {
+.c5 + .c7 {
   width: 25px;
   height: 25px;
   top: 16px;
@@ -779,12 +1157,13 @@ exports[`sizes renders correctly for an input with size large 1`] = `
   class="c0 c1"
 >
   <div
-    class="c2 c3"
+    class="c2 c3 c4 c1"
+    style="size: large;"
   >
     <input
       aria-invalid="false"
       aria-required="false"
-      class="c4 c5"
+      class="c5 c6"
       style="size: large;"
       type="text"
       value=""
@@ -807,24 +1186,7 @@ exports[`sizes renders correctly for an input 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 {
-  position: relative;
-}
-
-.c5 {
+.c6 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -862,11 +1224,33 @@ exports[`sizes renders correctly for an input with size medium 1`] = `
   outline-offset: 2px;
 }
 
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
 .c2 {
-  display: inline-block;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
 }
 
-.c4 {
+.c2 {
+  font-size: 1.25rem;
+}
+
+.c5 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -875,40 +1259,36 @@ exports[`sizes renders correctly for an input with size medium 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c5[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c5:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c5::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c5::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c5:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c5::placeholder {
   opacity: 0.6;
 }
 
-.c4 {
-  font-size: 1.25rem;
-}
-
-.c4 + .c6 {
+.c5 + .c7 {
   width: 20px;
   height: 20px;
   top: 15px;
@@ -919,12 +1299,13 @@ exports[`sizes renders correctly for an input with size medium 1`] = `
   class="c0 c1"
 >
   <div
-    class="c2 c3"
+    class="c2 c3 c4 c1"
+    style="size: medium;"
   >
     <input
       aria-invalid="false"
       aria-required="false"
-      class="c4 c5"
+      class="c5 c6"
       style="size: medium;"
       type="text"
       value=""
@@ -947,24 +1328,7 @@ exports[`sizes renders correctly for an input 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 {
-  position: relative;
-}
-
-.c5 {
+.c6 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1002,11 +1366,33 @@ exports[`sizes renders correctly for an input with size small 1`] = `
   outline-offset: 2px;
 }
 
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
 .c2 {
-  display: inline-block;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
 }
 
-.c4 {
+.c2 {
+  font-size: 0.8rem;
+}
+
+.c5 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -1015,40 +1401,36 @@ exports[`sizes renders correctly for an input with size small 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c5[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c5:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c5::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c5::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c5:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c5::placeholder {
   opacity: 0.6;
 }
 
-.c4 {
-  font-size: 0.8rem;
-}
-
-.c4 + .c6 {
+.c5 + .c7 {
   width: 10px;
   height: 10px;
   top: 10px;
@@ -1058,12 +1440,13 @@ exports[`sizes renders correctly for an input with size small 1`] = `
   class="c0 c1"
 >
   <div
-    class="c2 c3"
+    class="c2 c3 c4 c1"
+    style="size: small;"
   >
     <input
       aria-invalid="false"
       aria-required="false"
-      class="c4 c5"
+      class="c5 c6"
       style="size: small;"
       type="text"
       value=""
@@ -1086,24 +1469,7 @@ exports[`states renders correctly for an input 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 {
-  position: relative;
-}
-
-.c5 {
+.c6 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1141,11 +1507,29 @@ exports[`states renders correctly for an input with state danger 1`] = `
   outline-offset: 2px;
 }
 
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
 .c2 {
-  display: inline-block;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
 }
 
-.c4 {
+.c5 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -1154,36 +1538,36 @@ exports[`states renders correctly for an input with state danger 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c5[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c5:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c5::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c5::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c5:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c5::placeholder {
   opacity: 0.6;
 }
 
-.c4 {
+.c5 {
   border-color: #e24c67;
   box-shadow: #e24c67 0px 0px 0px 1px !important;
 }
@@ -1192,12 +1576,13 @@ exports[`states renders correctly for an input with state danger 1`] = `
   class="c0 c1"
 >
   <div
-    class="c2 c3"
+    class="c2 c3 c4 c1"
+    style="size: default;"
   >
     <input
       aria-invalid="true"
       aria-required="false"
-      class="c4 c5"
+      class="c5 c6"
       style="size: default;"
       type="text"
       value=""
@@ -1220,24 +1605,7 @@ exports[`states renders correctly for an input 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 {
-  position: relative;
-}
-
-.c5 {
+.c6 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1275,11 +1643,29 @@ exports[`states renders correctly for an input with state primary 1`] = `
   outline-offset: 2px;
 }
 
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
 .c2 {
-  display: inline-block;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
 }
 
-.c4 {
+.c5 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -1288,36 +1674,36 @@ exports[`states renders correctly for an input with state primary 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c5[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c5:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c5::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c5::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c5:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c5::placeholder {
   opacity: 0.6;
 }
 
-.c4 {
+.c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
@@ -1326,35 +1712,23 @@ exports[`states renders correctly for an input with state primary 1`] = `
   class="c0 c1"
 >
   <div
-    class="c2 c3"
+    class="c2 c3 c4 c1"
+    style="size: default;"
   >
     <input
       aria-invalid="false"
       aria-required="false"
-      class="c4 c5"
+      class="c5 c6"
       style="size: default;"
       type="text"
       value=""
     />
   </div>
-</div>
-`;
-
-exports[`states renders correctly for an input with state 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;
-}
+</div>
+`;
 
-.c3 {
+exports[`states renders correctly for an input with state success 1`] = `
+.c1 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1367,11 +1741,7 @@ exports[`states renders correctly for an input with state success 1`] = `
   color: inherit;
 }
 
-.c3.c3.c3 {
-  position: relative;
-}
-
-.c5 {
+.c6 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1409,11 +1779,29 @@ exports[`states renders correctly for an input with state success 1`] = `
   outline-offset: 2px;
 }
 
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
 .c2 {
-  display: inline-block;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
 }
 
-.c4 {
+.c5 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -1422,36 +1810,36 @@ exports[`states renders correctly for an input with state success 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c5[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c5:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c5::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c5::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c5:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c5::placeholder {
   opacity: 0.6;
 }
 
-.c4 {
+.c5 {
   border-color: #4ca26c;
   box-shadow: #4ca26c 0px 0px 0px 1px !important;
 }
@@ -1460,12 +1848,13 @@ exports[`states renders correctly for an input with state success 1`] = `
   class="c0 c1"
 >
   <div
-    class="c2 c3"
+    class="c2 c3 c4 c1"
+    style="size: default;"
   >
     <input
       aria-invalid="false"
       aria-required="false"
-      class="c4 c5"
+      class="c5 c6"
       style="size: default;"
       type="text"
       value=""
@@ -1488,24 +1877,7 @@ exports[`states renders correctly for an input 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 {
-  position: relative;
-}
-
-.c5 {
+.c6 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1543,11 +1915,29 @@ exports[`states renders correctly for an input with state warning 1`] = `
   outline-offset: 2px;
 }
 
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
 .c2 {
-  display: inline-block;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
 }
 
-.c4 {
+.c5 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -1556,36 +1946,36 @@ exports[`states renders correctly for an input with state warning 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c5[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c5:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c5::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c5::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c5:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c5::placeholder {
   opacity: 0.6;
 }
 
-.c4 {
+.c5 {
   border-color: #ffc94c;
   box-shadow: #ffc94c 0px 0px 0px 1px !important;
 }
@@ -1594,12 +1984,13 @@ exports[`states renders correctly for an input with state warning 1`] = `
   class="c0 c1"
 >
   <div
-    class="c2 c3"
+    class="c2 c3 c4 c1"
+    style="size: default;"
   >
     <input
       aria-invalid="false"
       aria-required="false"
-      class="c4 c5"
+      class="c5 c6"
       style="size: default;"
       type="text"
       value=""
@@ -1622,24 +2013,7 @@ exports[`types renders correctly for an input with type date 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 {
-  position: relative;
-}
-
-.c5 {
+.c6 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1677,11 +2051,29 @@ exports[`types renders correctly for an input with type date 1`] = `
   outline-offset: 2px;
 }
 
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
 .c2 {
-  display: inline-block;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
 }
 
-.c4 {
+.c5 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -1690,32 +2082,32 @@ exports[`types renders correctly for an input with type date 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c5[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c5:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c5::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c5::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c5:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c5::placeholder {
   opacity: 0.6;
 }
 
@@ -1723,12 +2115,13 @@ exports[`types renders correctly for an input with type date 1`] = `
   class="c0 c1"
 >
   <div
-    class="c2 c3"
+    class="c2 c3 c4 c1"
+    style="size: default;"
   >
     <input
       aria-invalid="false"
       aria-required="false"
-      class="c4 c5"
+      class="c5 c6"
       style="size: default;"
       type="date"
       value=""
@@ -1751,24 +2144,7 @@ exports[`types renders correctly for an input with type email 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 {
-  position: relative;
-}
-
-.c5 {
+.c6 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1806,11 +2182,29 @@ exports[`types renders correctly for an input with type email 1`] = `
   outline-offset: 2px;
 }
 
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
 .c2 {
-  display: inline-block;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
 }
 
-.c4 {
+.c5 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -1819,32 +2213,32 @@ exports[`types renders correctly for an input with type email 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c5[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c5:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c5::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c5::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c5:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c5::placeholder {
   opacity: 0.6;
 }
 
@@ -1852,12 +2246,13 @@ exports[`types renders correctly for an input with type email 1`] = `
   class="c0 c1"
 >
   <div
-    class="c2 c3"
+    class="c2 c3 c4 c1"
+    style="size: default;"
   >
     <input
       aria-invalid="false"
       aria-required="false"
-      class="c4 c5"
+      class="c5 c6"
       style="size: default;"
       type="email"
       value=""
@@ -1880,24 +2275,7 @@ exports[`types renders correctly for an input with type number 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 {
-  position: relative;
-}
-
-.c5 {
+.c6 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1935,11 +2313,29 @@ exports[`types renders correctly for an input with type number 1`] = `
   outline-offset: 2px;
 }
 
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
 .c2 {
-  display: inline-block;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
 }
 
-.c4 {
+.c5 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -1948,32 +2344,32 @@ exports[`types renders correctly for an input with type number 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c5[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c5:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c5::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c5::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c5:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c5::placeholder {
   opacity: 0.6;
 }
 
@@ -1981,12 +2377,13 @@ exports[`types renders correctly for an input with type number 1`] = `
   class="c0 c1"
 >
   <div
-    class="c2 c3"
+    class="c2 c3 c4 c1"
+    style="size: default;"
   >
     <input
       aria-invalid="false"
       aria-required="false"
-      class="c4 c5"
+      class="c5 c6"
       style="size: default;"
       type="number"
       value=""
@@ -2009,24 +2406,7 @@ exports[`types renders correctly for an input with type password 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 {
-  position: relative;
-}
-
-.c5 {
+.c6 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2064,11 +2444,29 @@ exports[`types renders correctly for an input with type password 1`] = `
   outline-offset: 2px;
 }
 
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
 .c2 {
-  display: inline-block;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
 }
 
-.c4 {
+.c5 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -2077,32 +2475,32 @@ exports[`types renders correctly for an input with type password 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c5[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c5:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c5::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c5::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c5:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c5::placeholder {
   opacity: 0.6;
 }
 
@@ -2110,12 +2508,13 @@ exports[`types renders correctly for an input with type password 1`] = `
   class="c0 c1"
 >
   <div
-    class="c2 c3"
+    class="c2 c3 c4 c1"
+    style="size: default;"
   >
     <input
       aria-invalid="false"
       aria-required="false"
-      class="c4 c5"
+      class="c5 c6"
       style="size: default;"
       type="password"
       value=""
@@ -2138,24 +2537,7 @@ exports[`types renders correctly for an input with type search 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 {
-  position: relative;
-}
-
-.c5 {
+.c6 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2193,11 +2575,29 @@ exports[`types renders correctly for an input with type search 1`] = `
   outline-offset: 2px;
 }
 
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
 .c2 {
-  display: inline-block;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
 }
 
-.c4 {
+.c5 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -2206,32 +2606,32 @@ exports[`types renders correctly for an input with type search 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c5[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c5:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c5::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c5::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c5:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c5::placeholder {
   opacity: 0.6;
 }
 
@@ -2239,12 +2639,13 @@ exports[`types renders correctly for an input with type search 1`] = `
   class="c0 c1"
 >
   <div
-    class="c2 c3"
+    class="c2 c3 c4 c1"
+    style="size: default;"
   >
     <input
       aria-invalid="false"
       aria-required="false"
-      class="c4 c5"
+      class="c5 c6"
       style="size: default;"
       type="search"
       value=""
@@ -2267,24 +2668,7 @@ exports[`types renders correctly for an input with type tel 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 {
-  position: relative;
-}
-
-.c5 {
+.c6 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2322,11 +2706,29 @@ exports[`types renders correctly for an input with type tel 1`] = `
   outline-offset: 2px;
 }
 
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
 .c2 {
-  display: inline-block;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
 }
 
-.c4 {
+.c5 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -2335,32 +2737,32 @@ exports[`types renders correctly for an input with type tel 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c5[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c5:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c5::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c5::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c5:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c5::placeholder {
   opacity: 0.6;
 }
 
@@ -2368,12 +2770,13 @@ exports[`types renders correctly for an input with type tel 1`] = `
   class="c0 c1"
 >
   <div
-    class="c2 c3"
+    class="c2 c3 c4 c1"
+    style="size: default;"
   >
     <input
       aria-invalid="false"
       aria-required="false"
-      class="c4 c5"
+      class="c5 c6"
       style="size: default;"
       type="tel"
       value=""
@@ -2396,24 +2799,7 @@ exports[`types renders correctly for an input with type time 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 {
-  position: relative;
-}
-
-.c5 {
+.c6 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2451,11 +2837,29 @@ exports[`types renders correctly for an input with type time 1`] = `
   outline-offset: 2px;
 }
 
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
 .c2 {
-  display: inline-block;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
 }
 
-.c4 {
+.c5 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -2464,32 +2868,32 @@ exports[`types renders correctly for an input with type time 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c5[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c5:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c5::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c5::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c5:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c5::placeholder {
   opacity: 0.6;
 }
 
@@ -2497,12 +2901,13 @@ exports[`types renders correctly for an input with type time 1`] = `
   class="c0 c1"
 >
   <div
-    class="c2 c3"
+    class="c2 c3 c4 c1"
+    style="size: default;"
   >
     <input
       aria-invalid="false"
       aria-required="false"
-      class="c4 c5"
+      class="c5 c6"
       style="size: default;"
       type="time"
       value=""
@@ -2525,24 +2930,7 @@ exports[`types renders correctly for an input with type url 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 {
-  position: relative;
-}
-
-.c5 {
+.c6 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2580,11 +2968,29 @@ exports[`types renders correctly for an input with type url 1`] = `
   outline-offset: 2px;
 }
 
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
 .c2 {
-  display: inline-block;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
 }
 
-.c4 {
+.c5 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -2593,32 +2999,32 @@ exports[`types renders correctly for an input with type url 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c5[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c5:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c5::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c5::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c5:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c5::placeholder {
   opacity: 0.6;
 }
 
@@ -2626,12 +3032,13 @@ exports[`types renders correctly for an input with type url 1`] = `
   class="c0 c1"
 >
   <div
-    class="c2 c3"
+    class="c2 c3 c4 c1"
+    style="size: default;"
   >
     <input
       aria-invalid="false"
       aria-required="false"
-      class="c4 c5"
+      class="c5 c6"
       style="size: default;"
       type="url"
       value=""
diff --git a/src/Input/__tests__/__snapshots__/InputField.test.js.snap b/src/Input/__tests__/__snapshots__/InputField.test.js.snap
index b383c9f4d..bbdf04de6 100644
--- a/src/Input/__tests__/__snapshots__/InputField.test.js.snap
+++ b/src/Input/__tests__/__snapshots__/InputField.test.js.snap
@@ -14,25 +14,7 @@ exports[`renders correctly for a basic input field 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;
-  margin-top: 0.5rem !important;
-}
-
-.c3.c3.c3 {
-  position: relative;
-}
-
-.c5 {
+.c6 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -43,6 +25,7 @@ exports[`renders correctly for a basic input field 1`] = `
   box-sizing: border-box;
   background-color: white;
   color: inherit;
+  margin-top: 0.5rem !important;
 }
 
 .c0 {
@@ -70,11 +53,29 @@ exports[`renders correctly for a basic input field 1`] = `
   outline-offset: 2px;
 }
 
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
 .c2 {
-  display: inline-block;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
 }
 
-.c4 {
+.c5 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -83,32 +84,32 @@ exports[`renders correctly for a basic input field 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c5[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c5:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c5::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c5::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c5:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c5::placeholder {
   opacity: 0.6;
 }
 
@@ -122,12 +123,13 @@ exports[`renders correctly for a basic input field 1`] = `
   >
     <div />
     <div
-      class="c2 c3"
+      class="c2 c3 c4 c1"
+      style="size: default;"
     >
       <input
         aria-invalid="false"
         aria-required="false"
-        class="c4 c5"
+        class="c5 c6"
         style="size: default;"
         type="text"
         value=""
@@ -152,25 +154,7 @@ exports[`renders correctly for a disabled input field 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;
-  margin-top: 0.5rem !important;
-}
-
-.c3.c3.c3 {
-  position: relative;
-}
-
-.c5 {
+.c6 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -181,6 +165,7 @@ exports[`renders correctly for a disabled input field 1`] = `
   box-sizing: border-box;
   background-color: white;
   color: inherit;
+  margin-top: 0.5rem !important;
 }
 
 .c0 {
@@ -208,11 +193,29 @@ exports[`renders correctly for a disabled input field 1`] = `
   outline-offset: 2px;
 }
 
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
 .c2 {
-  display: inline-block;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
 }
 
-.c4 {
+.c5 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -221,32 +224,32 @@ exports[`renders correctly for a disabled input field 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c5[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c5:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c5::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c5::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c5:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c5::placeholder {
   opacity: 0.6;
 }
 
@@ -260,12 +263,13 @@ exports[`renders correctly for a disabled input field 1`] = `
   >
     <div />
     <div
-      class="c2 c3"
+      class="c2 c3 c4 c1"
+      style="size: default;"
     >
       <input
         aria-invalid="false"
         aria-required="false"
-        class="c4 c5"
+        class="c5 c6"
         disabled=""
         style="size: default;"
         type="text"
@@ -291,25 +295,7 @@ exports[`renders correctly for a full width input field 1`] = `
   color: inherit;
 }
 
-.c4 {
-  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;
-  margin-top: 0.5rem !important;
-}
-
-.c4.c4.c4 {
-  position: relative;
-}
-
-.c6 {
+.c7 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -320,6 +306,7 @@ exports[`renders correctly for a full width input field 1`] = `
   box-sizing: border-box;
   background-color: white;
   color: inherit;
+  margin-top: 0.5rem !important;
 }
 
 .c0 {
@@ -347,11 +334,30 @@ exports[`renders correctly for a full width input field 1`] = `
   outline-offset: 2px;
 }
 
+.c5 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c4 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
 .c3 {
-  display: inline-block;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  width: 100%;
 }
 
-.c5 {
+.c6 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -360,36 +366,36 @@ exports[`renders correctly for a full width input field 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c5[disabled] {
+.c6[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c5:focus {
+.c6:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c5::-webkit-input-placeholder {
+.c6::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c5::-moz-placeholder {
+.c6::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c5:-ms-input-placeholder {
+.c6:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c5::placeholder {
+.c6::placeholder {
   opacity: 0.6;
 }
 
-.c5 {
+.c6 {
   width: 100%;
 }
 
@@ -407,14 +413,13 @@ exports[`renders correctly for a full width input field 1`] = `
   >
     <div />
     <div
-      class="c3 c4"
-      style="width: 100%;"
-      width="100%"
+      class="c3 c4 c5 c1"
+      style="size: default;"
     >
       <input
         aria-invalid="false"
         aria-required="false"
-        class="c5 c6"
+        class="c6 c7"
         style="size: default;"
         type="text"
         value=""
@@ -439,24 +444,6 @@ exports[`renders correctly for a required field 1`] = `
   color: inherit;
 }
 
-.c8 {
-  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;
-  margin-top: 0.5rem !important;
-}
-
-.c8.c8.c8 {
-  position: relative;
-}
-
 .c10 {
   margin: unset;
   padding: unset;
@@ -468,6 +455,7 @@ exports[`renders correctly for a required field 1`] = `
   box-sizing: border-box;
   background-color: white;
   color: inherit;
+  margin-top: 0.5rem !important;
 }
 
 .c6 {
@@ -509,10 +497,6 @@ exports[`renders correctly for a required field 1`] = `
   outline-offset: 2px;
 }
 
-.c7 {
-  display: inline-block;
-}
-
 .c2 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -520,6 +504,21 @@ exports[`renders correctly for a required field 1`] = `
   display: flex;
 }
 
+.c8 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c7 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+}
+
 .c9 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
@@ -593,7 +592,8 @@ exports[`renders correctly for a required field 1`] = `
     </div>
     <div />
     <div
-      class="c7 c8"
+      class="c7 c8 c2 c1"
+      style="size: default;"
     >
       <input
         aria-invalid="false"
@@ -624,24 +624,6 @@ exports[`renders correctly for addon component (after) 1`] = `
   color: inherit;
 }
 
-.c10 {
-  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;
-  margin-top: 0.5rem !important;
-}
-
-.c10.c10.c10 {
-  position: relative;
-}
-
 .c12 {
   margin: unset;
   padding: unset;
@@ -653,6 +635,7 @@ exports[`renders correctly for addon component (after) 1`] = `
   box-sizing: border-box;
   background-color: white;
   color: inherit;
+  margin-top: 0.5rem !important;
 }
 
 .c6 {
@@ -694,6 +677,66 @@ exports[`renders correctly for addon component (after) 1`] = `
   outline-offset: 2px;
 }
 
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c10 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c9 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+}
+
+.c11 {
+  border: 1px solid #bdbdbd;
+  box-shadow: inset 0px 1px 2px #e5e5e5;
+  border-radius: 0.2em;
+  height: 2.5em;
+  width: 100%;
+  padding: 0.4em 0.6em;
+}
+
+.c11[disabled] {
+  background-color: #f2f2f2;
+  box-shadow: unset;
+  color: #8d8d8d;
+}
+
+.c11:focus {
+  outline: unset;
+  z-index: 2;
+  border-color: #7467c0;
+  box-shadow: #7467c0 0px 0px 0px 1px !important;
+}
+
+.c11::-webkit-input-placeholder {
+  opacity: 0.6;
+}
+
+.c11::-moz-placeholder {
+  opacity: 0.6;
+}
+
+.c11:-ms-input-placeholder {
+  opacity: 0.6;
+}
+
+.c11::placeholder {
+  opacity: 0.6;
+}
+
 .c8 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -750,65 +793,16 @@ exports[`renders correctly for addon component (after) 1`] = `
   border-radius: 0;
 }
 
-.c9 {
+.c5 {
   display: inline-block;
 }
 
-.c2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.c11 {
-  border: 1px solid #bdbdbd;
-  box-shadow: inset 0px 1px 2px #e5e5e5;
-  border-radius: 0.2em;
-  height: 2.5em;
-  width: 100%;
-  padding: 0.4em 0.6em;
-}
-
-.c11[disabled] {
-  background-color: #f2f2f2;
-  box-shadow: unset;
-  color: #8d8d8d;
+.c4 {
+  display: block;
 }
 
-.c11:focus {
-  outline: unset;
-  z-index: 2;
-  border-color: #7467c0;
-  box-shadow: #7467c0 0px 0px 0px 1px !important;
-}
-
-.c11::-webkit-input-placeholder {
-  opacity: 0.6;
-}
-
-.c11::-moz-placeholder {
-  opacity: 0.6;
-}
-
-.c11:-ms-input-placeholder {
-  opacity: 0.6;
-}
-
-.c11::placeholder {
-  opacity: 0.6;
-}
-
-.c5 {
-  display: inline-block;
-}
-
-.c4 {
-  display: block;
-}
-
-.c3 {
-  margin-bottom: 0 !important;
+.c3 {
+  margin-bottom: 0 !important;
 }
 
 <div
@@ -838,7 +832,8 @@ exports[`renders correctly for addon component (after) 1`] = `
       role="group"
     >
       <div
-        class="c9 c10"
+        class="c9 c10 c2 c1"
+        style="size: default;"
       >
         <input
           aria-invalid="false"
@@ -873,24 +868,6 @@ exports[`renders correctly for addon component (before) 1`] = `
   color: inherit;
 }
 
-.c10 {
-  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;
-  margin-top: 0.5rem !important;
-}
-
-.c10.c10.c10 {
-  position: relative;
-}
-
 .c12 {
   margin: unset;
   padding: unset;
@@ -902,6 +879,7 @@ exports[`renders correctly for addon component (before) 1`] = `
   box-sizing: border-box;
   background-color: white;
   color: inherit;
+  margin-top: 0.5rem !important;
 }
 
 .c6 {
@@ -943,6 +921,66 @@ exports[`renders correctly for addon component (before) 1`] = `
   outline-offset: 2px;
 }
 
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c10 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c9 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+}
+
+.c11 {
+  border: 1px solid #bdbdbd;
+  box-shadow: inset 0px 1px 2px #e5e5e5;
+  border-radius: 0.2em;
+  height: 2.5em;
+  width: 100%;
+  padding: 0.4em 0.6em;
+}
+
+.c11[disabled] {
+  background-color: #f2f2f2;
+  box-shadow: unset;
+  color: #8d8d8d;
+}
+
+.c11:focus {
+  outline: unset;
+  z-index: 2;
+  border-color: #7467c0;
+  box-shadow: #7467c0 0px 0px 0px 1px !important;
+}
+
+.c11::-webkit-input-placeholder {
+  opacity: 0.6;
+}
+
+.c11::-moz-placeholder {
+  opacity: 0.6;
+}
+
+.c11:-ms-input-placeholder {
+  opacity: 0.6;
+}
+
+.c11::placeholder {
+  opacity: 0.6;
+}
+
 .c8 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -999,55 +1037,6 @@ exports[`renders correctly for addon component (before) 1`] = `
   border-radius: 0;
 }
 
-.c9 {
-  display: inline-block;
-}
-
-.c2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.c11 {
-  border: 1px solid #bdbdbd;
-  box-shadow: inset 0px 1px 2px #e5e5e5;
-  border-radius: 0.2em;
-  height: 2.5em;
-  width: 100%;
-  padding: 0.4em 0.6em;
-}
-
-.c11[disabled] {
-  background-color: #f2f2f2;
-  box-shadow: unset;
-  color: #8d8d8d;
-}
-
-.c11:focus {
-  outline: unset;
-  z-index: 2;
-  border-color: #7467c0;
-  box-shadow: #7467c0 0px 0px 0px 1px !important;
-}
-
-.c11::-webkit-input-placeholder {
-  opacity: 0.6;
-}
-
-.c11::-moz-placeholder {
-  opacity: 0.6;
-}
-
-.c11:-ms-input-placeholder {
-  opacity: 0.6;
-}
-
-.c11::placeholder {
-  opacity: 0.6;
-}
-
 .c5 {
   display: inline-block;
 }
@@ -1090,7 +1079,8 @@ exports[`renders correctly for addon component (before) 1`] = `
         test
       </div>
       <div
-        class="c9 c10"
+        class="c9 c10 c2 c1"
+        style="size: default;"
       >
         <input
           aria-invalid="false"
@@ -1122,24 +1112,6 @@ exports[`renders correctly for addon component (vertical) 1`] = `
   color: inherit;
 }
 
-.c10 {
-  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;
-  margin-top: 0.5rem !important;
-}
-
-.c10.c10.c10 {
-  position: relative;
-}
-
 .c12 {
   margin: unset;
   padding: unset;
@@ -1151,6 +1123,7 @@ exports[`renders correctly for addon component (vertical) 1`] = `
   box-sizing: border-box;
   background-color: white;
   color: inherit;
+  margin-top: 0.5rem !important;
 }
 
 .c6 {
@@ -1192,6 +1165,66 @@ exports[`renders correctly for addon component (vertical) 1`] = `
   outline-offset: 2px;
 }
 
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c10 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c9 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+}
+
+.c11 {
+  border: 1px solid #bdbdbd;
+  box-shadow: inset 0px 1px 2px #e5e5e5;
+  border-radius: 0.2em;
+  height: 2.5em;
+  width: 100%;
+  padding: 0.4em 0.6em;
+}
+
+.c11[disabled] {
+  background-color: #f2f2f2;
+  box-shadow: unset;
+  color: #8d8d8d;
+}
+
+.c11:focus {
+  outline: unset;
+  z-index: 2;
+  border-color: #7467c0;
+  box-shadow: #7467c0 0px 0px 0px 1px !important;
+}
+
+.c11::-webkit-input-placeholder {
+  opacity: 0.6;
+}
+
+.c11::-moz-placeholder {
+  opacity: 0.6;
+}
+
+.c11:-ms-input-placeholder {
+  opacity: 0.6;
+}
+
+.c11::placeholder {
+  opacity: 0.6;
+}
+
 .c8 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1248,65 +1281,16 @@ exports[`renders correctly for addon component (vertical) 1`] = `
   border-radius: 0;
 }
 
-.c9 {
+.c5 {
   display: inline-block;
 }
 
-.c2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.c11 {
-  border: 1px solid #bdbdbd;
-  box-shadow: inset 0px 1px 2px #e5e5e5;
-  border-radius: 0.2em;
-  height: 2.5em;
-  width: 100%;
-  padding: 0.4em 0.6em;
-}
-
-.c11[disabled] {
-  background-color: #f2f2f2;
-  box-shadow: unset;
-  color: #8d8d8d;
-}
-
-.c11:focus {
-  outline: unset;
-  z-index: 2;
-  border-color: #7467c0;
-  box-shadow: #7467c0 0px 0px 0px 1px !important;
+.c4 {
+  display: block;
 }
 
-.c11::-webkit-input-placeholder {
-  opacity: 0.6;
-}
-
-.c11::-moz-placeholder {
-  opacity: 0.6;
-}
-
-.c11:-ms-input-placeholder {
-  opacity: 0.6;
-}
-
-.c11::placeholder {
-  opacity: 0.6;
-}
-
-.c5 {
-  display: inline-block;
-}
-
-.c4 {
-  display: block;
-}
-
-.c3 {
-  margin-bottom: 0 !important;
+.c3 {
+  margin-bottom: 0 !important;
 }
 
 <div
@@ -1336,7 +1320,8 @@ exports[`renders correctly for addon component (vertical) 1`] = `
       role="group"
     >
       <div
-        class="c9 c10"
+        class="c9 c10 c2 c1"
+        style="size: default;"
       >
         <input
           aria-invalid="false"
@@ -1371,25 +1356,7 @@ exports[`renders correctly for an input field 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;
-  margin-top: 0.5rem !important;
-}
-
-.c3.c3.c3 {
-  position: relative;
-}
-
-.c5 {
+.c6 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1400,6 +1367,7 @@ exports[`renders correctly for an input field with a default value 1`] = `
   box-sizing: border-box;
   background-color: white;
   color: inherit;
+  margin-top: 0.5rem !important;
 }
 
 .c0 {
@@ -1427,11 +1395,29 @@ exports[`renders correctly for an input field with a default value 1`] = `
   outline-offset: 2px;
 }
 
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
 .c2 {
-  display: inline-block;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
 }
 
-.c4 {
+.c5 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -1440,32 +1426,32 @@ exports[`renders correctly for an input field with a default value 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c5[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c5:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c5::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c5::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c5:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c5::placeholder {
   opacity: 0.6;
 }
 
@@ -1479,12 +1465,13 @@ exports[`renders correctly for an input field with a default value 1`] = `
   >
     <div />
     <div
-      class="c2 c3"
+      class="c2 c3 c4 c1"
+      style="size: default;"
     >
       <input
         aria-invalid="false"
         aria-required="false"
-        class="c4 c5"
+        class="c5 c6"
         style="size: default;"
         type="text"
         value="Awesome value"
@@ -1509,24 +1496,6 @@ exports[`renders correctly for an input field with a description 1`] = `
   color: inherit;
 }
 
-.c10 {
-  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;
-  margin-top: 0.5rem !important;
-}
-
-.c10.c10.c10 {
-  position: relative;
-}
-
 .c12 {
   margin: unset;
   padding: unset;
@@ -1538,6 +1507,7 @@ exports[`renders correctly for an input field with a description 1`] = `
   box-sizing: border-box;
   background-color: white;
   color: inherit;
+  margin-top: 0.5rem !important;
 }
 
 .c6 {
@@ -1579,10 +1549,6 @@ exports[`renders correctly for an input field with a description 1`] = `
   outline-offset: 2px;
 }
 
-.c9 {
-  display: inline-block;
-}
-
 .c2 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1590,6 +1556,21 @@ exports[`renders correctly for an input field with a description 1`] = `
   display: flex;
 }
 
+.c10 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c9 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+}
+
 .c11 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
@@ -1725,7 +1706,8 @@ samp.c8 {
       Required for your fannypack
     </span>
     <div
-      class="c9 c10"
+      class="c9 c10 c2 c1"
+      style="size: default;"
     >
       <input
         aria-invalid="false"
@@ -1756,24 +1738,6 @@ exports[`renders correctly for an input field with a hint 1`] = `
   color: inherit;
 }
 
-.c8 {
-  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;
-  margin-top: 0.5rem !important;
-}
-
-.c8.c8.c8 {
-  position: relative;
-}
-
 .c10 {
   margin: unset;
   padding: unset;
@@ -1785,6 +1749,7 @@ exports[`renders correctly for an input field with a hint 1`] = `
   box-sizing: border-box;
   background-color: white;
   color: inherit;
+  margin-top: 0.5rem !important;
 }
 
 .c6 {
@@ -1826,10 +1791,6 @@ exports[`renders correctly for an input field with a hint 1`] = `
   outline-offset: 2px;
 }
 
-.c7 {
-  display: inline-block;
-}
-
 .c2 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1837,6 +1798,21 @@ exports[`renders correctly for an input field with a hint 1`] = `
   display: flex;
 }
 
+.c8 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c7 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+}
+
 .c9 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
@@ -1917,33 +1893,368 @@ sup.c12 {
   vertical-align: baseline;
 }
 
-ins.c12,
-u.c12 {
-  -webkit-text-decoration-skip: ink edges;
-  text-decoration-skip: ink edges;
+ins.c12,
+u.c12 {
+  -webkit-text-decoration-skip: ink edges;
+  text-decoration-skip: ink edges;
+}
+
+i.c12,
+cite.c12,
+var.c12,
+em.c12 {
+  font-style: italic;
+}
+
+kbd.c12,
+pre.c12,
+samp.c12 {
+  font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
+}
+
+.c3 {
+  margin-bottom: 0 !important;
+}
+
+.c11 {
+  display: block;
+  font-size: 0.8rem;
+  margin-top: 0.25rem;
+}
+
+<div
+  class="c0 c1"
+>
+  <div
+    class="c1"
+    display="inline-block"
+    style="display: inline-block;"
+  >
+    <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 c2 c1"
+      style="size: default;"
+    >
+      <input
+        aria-invalid="false"
+        aria-required="false"
+        class="c9 c10"
+        id="username"
+        style="size: default;"
+        type="text"
+        value=""
+      />
+    </div>
+    <span
+      class="c11 c12 c1"
+    >
+      Must be awesome
+    </span>
+  </div>
+</div>
+`;
+
+exports[`renders correctly for an input field with a placeholder 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;
+}
+
+.c6 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: white;
+  color: inherit;
+  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;
+}
+
+.c0 *,
+.c0 *::before,
+.c0 *::after {
+  box-sizing: inherit;
+}
+
+.c0 *:focus {
+  outline: 2px solid #7467c0;
+  outline-offset: 2px;
+}
+
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c2 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+}
+
+.c5 {
+  border: 1px solid #bdbdbd;
+  box-shadow: inset 0px 1px 2px #e5e5e5;
+  border-radius: 0.2em;
+  height: 2.5em;
+  width: 100%;
+  padding: 0.4em 0.6em;
+}
+
+.c5[disabled] {
+  background-color: #f2f2f2;
+  box-shadow: unset;
+  color: #8d8d8d;
+}
+
+.c5:focus {
+  outline: unset;
+  z-index: 2;
+  border-color: #7467c0;
+  box-shadow: #7467c0 0px 0px 0px 1px !important;
+}
+
+.c5::-webkit-input-placeholder {
+  opacity: 0.6;
+}
+
+.c5::-moz-placeholder {
+  opacity: 0.6;
+}
+
+.c5:-ms-input-placeholder {
+  opacity: 0.6;
+}
+
+.c5::placeholder {
+  opacity: 0.6;
+}
+
+<div
+  class="c0 c1"
+>
+  <div
+    class="c1"
+    display="inline-block"
+    style="display: inline-block;"
+  >
+    <div />
+    <div
+      class="c2 c3 c4 c1"
+      style="size: default;"
+    >
+      <input
+        aria-invalid="false"
+        aria-required="false"
+        class="c5 c6"
+        placeholder="Awesome placeholder"
+        style="size: default;"
+        type="text"
+        value=""
+      />
+    </div>
+    <div />
+  </div>
+</div>
+`;
+
+exports[`renders correctly for an input with a after component 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;
+}
+
+.c9 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: white;
+  color: inherit;
+  margin-top: 0.5rem !important;
+}
+
+.c5 {
+  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;
+}
+
+.c5.c5.c5 {
+  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;
+}
+
+.c0 *,
+.c0 *::before,
+.c0 *::after {
+  box-sizing: inherit;
+}
+
+.c0 *:focus {
+  outline: 2px solid #7467c0;
+  outline-offset: 2px;
+}
+
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c7 {
+  fill: #435a6f;
+  position: relative;
+  top: 0.1em;
+  height: 1em;
+  width: 1em;
+}
+
+.c6 {
+  fill: #708da8;
+  height: 2.5em;
+  margin: 0 0.75em;
+  top: 0;
+}
+
+.c2 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+}
+
+.c8 {
+  border: 1px solid #bdbdbd;
+  box-shadow: inset 0px 1px 2px #e5e5e5;
+  border-radius: 0.2em;
+  height: 2.5em;
+  width: 100%;
+  padding: 0.4em 0.6em;
+}
+
+.c8[disabled] {
+  background-color: #f2f2f2;
+  box-shadow: unset;
+  color: #8d8d8d;
+}
+
+.c8:focus {
+  outline: unset;
+  z-index: 2;
+  border-color: #7467c0;
+  box-shadow: #7467c0 0px 0px 0px 1px !important;
+}
+
+.c8::-webkit-input-placeholder {
+  opacity: 0.6;
 }
 
-i.c12,
-cite.c12,
-var.c12,
-em.c12 {
-  font-style: italic;
+.c8::-moz-placeholder {
+  opacity: 0.6;
 }
 
-kbd.c12,
-pre.c12,
-samp.c12 {
-  font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
+.c8:-ms-input-placeholder {
+  opacity: 0.6;
 }
 
-.c3 {
-  margin-bottom: 0 !important;
+.c8::placeholder {
+  opacity: 0.6;
 }
 
-.c11 {
-  display: block;
-  font-size: 0.8rem;
-  margin-top: 0.25rem;
+.c8 {
+  padding-right: 2.3em;
 }
 
 <div
@@ -1954,43 +2265,43 @@ samp.c12 {
     display="inline-block"
     style="display: inline-block;"
   >
-    <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"
+      class="c2 c3 c4 c1"
+      style="size: default;"
     >
+      <div
+        class="c3 c4 c5"
+        style="right: 0px; z-index: 3;"
+      >
+        <svg
+          class="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="c9 c10"
-        id="username"
+        class="c8 c9"
         style="size: default;"
         type="text"
         value=""
       />
     </div>
-    <span
-      class="c11 c12 c1"
-    >
-      Must be awesome
-    </span>
+    <div />
   </div>
 </div>
 `;
 
-exports[`renders correctly for an input field with a placeholder 1`] = `
+exports[`renders correctly for an input with a before component 1`] = `
 .c1 {
   margin: unset;
   padding: unset;
@@ -2004,7 +2315,7 @@ exports[`renders correctly for an input field with a placeholder 1`] = `
   color: inherit;
 }
 
-.c3 {
+.c9 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2013,15 +2324,11 @@ exports[`renders correctly for an input field with a placeholder 1`] = `
   font-family: inherit;
   font-size: 100%;
   box-sizing: border-box;
-  background-color: unset;
+  background-color: white;
   color: inherit;
   margin-top: 0.5rem !important;
 }
 
-.c3.c3.c3 {
-  position: relative;
-}
-
 .c5 {
   margin: unset;
   padding: unset;
@@ -2031,10 +2338,14 @@ exports[`renders correctly for an input field with a placeholder 1`] = `
   font-family: inherit;
   font-size: 100%;
   box-sizing: border-box;
-  background-color: white;
+  background-color: unset;
   color: inherit;
 }
 
+.c5.c5.c5 {
+  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;
@@ -2060,11 +2371,44 @@ exports[`renders correctly for an input field with a placeholder 1`] = `
   outline-offset: 2px;
 }
 
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c7 {
+  fill: #435a6f;
+  position: relative;
+  top: 0.1em;
+  height: 1em;
+  width: 1em;
+}
+
+.c6 {
+  fill: #708da8;
+  height: 2.5em;
+  margin: 0 0.75em;
+  top: 0;
+}
+
 .c2 {
-  display: inline-block;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
 }
 
-.c4 {
+.c8 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -2073,35 +2417,39 @@ exports[`renders correctly for an input field with a placeholder 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c8[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c8:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c8::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c8::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c8:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c8::placeholder {
   opacity: 0.6;
 }
 
+.c8 {
+  padding-left: 2.3em;
+}
+
 <div
   class="c0 c1"
 >
@@ -2112,13 +2460,30 @@ exports[`renders correctly for an input field with a placeholder 1`] = `
   >
     <div />
     <div
-      class="c2 c3"
+      class="c2 c3 c4 c1"
+      style="size: default;"
     >
+      <div
+        class="c3 c4 c5"
+        style="z-index: 3;"
+      >
+        <svg
+          class="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="c4 c5"
-        placeholder="Awesome placeholder"
+        class="c8 c9"
         style="size: default;"
         type="text"
         value=""
@@ -2143,24 +2508,6 @@ exports[`renders correctly for an optional input field 1`] = `
   color: inherit;
 }
 
-.c10 {
-  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;
-  margin-top: 0.5rem !important;
-}
-
-.c10.c10.c10 {
-  position: relative;
-}
-
 .c12 {
   margin: unset;
   padding: unset;
@@ -2172,6 +2519,7 @@ exports[`renders correctly for an optional input field 1`] = `
   box-sizing: border-box;
   background-color: white;
   color: inherit;
+  margin-top: 0.5rem !important;
 }
 
 .c6 {
@@ -2213,10 +2561,6 @@ exports[`renders correctly for an optional input field 1`] = `
   outline-offset: 2px;
 }
 
-.c9 {
-  display: inline-block;
-}
-
 .c2 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -2224,6 +2568,21 @@ exports[`renders correctly for an optional input field 1`] = `
   display: flex;
 }
 
+.c10 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c9 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+}
+
 .c11 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
@@ -2361,7 +2720,8 @@ samp.c8 {
     </div>
     <div />
     <div
-      class="c9 c10"
+      class="c9 c10 c2 c1"
+      style="size: default;"
     >
       <input
         aria-invalid="false"
@@ -2392,25 +2752,7 @@ exports[`sizes renders correctly for an input field 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;
-  margin-top: 0.5rem !important;
-}
-
-.c3.c3.c3 {
-  position: relative;
-}
-
-.c5 {
+.c6 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2421,6 +2763,7 @@ exports[`sizes renders correctly for an input field with size large 1`] = `
   box-sizing: border-box;
   background-color: white;
   color: inherit;
+  margin-top: 0.5rem !important;
 }
 
 .c0 {
@@ -2448,11 +2791,33 @@ exports[`sizes renders correctly for an input field with size large 1`] = `
   outline-offset: 2px;
 }
 
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
 .c2 {
-  display: inline-block;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
 }
 
-.c4 {
+.c2 {
+  font-size: 1.5rem;
+}
+
+.c5 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -2461,40 +2826,36 @@ exports[`sizes renders correctly for an input field with size large 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c5[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c5:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c5::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c5::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c5:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c5::placeholder {
   opacity: 0.6;
 }
 
-.c4 {
-  font-size: 1.5rem;
-}
-
-.c4 + .c6 {
+.c5 + .c7 {
   width: 25px;
   height: 25px;
   top: 16px;
@@ -2511,12 +2872,13 @@ exports[`sizes renders correctly for an input field with size large 1`] = `
   >
     <div />
     <div
-      class="c2 c3"
+      class="c2 c3 c4 c1"
+      style="size: large;"
     >
       <input
         aria-invalid="false"
         aria-required="false"
-        class="c4 c5"
+        class="c5 c6"
         style="size: large;"
         type="text"
         value=""
@@ -2541,25 +2903,7 @@ exports[`sizes renders correctly for an input field 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;
-  margin-top: 0.5rem !important;
-}
-
-.c3.c3.c3 {
-  position: relative;
-}
-
-.c5 {
+.c6 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2570,6 +2914,7 @@ exports[`sizes renders correctly for an input field with size medium 1`] = `
   box-sizing: border-box;
   background-color: white;
   color: inherit;
+  margin-top: 0.5rem !important;
 }
 
 .c0 {
@@ -2597,11 +2942,33 @@ exports[`sizes renders correctly for an input field with size medium 1`] = `
   outline-offset: 2px;
 }
 
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
 .c2 {
-  display: inline-block;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
 }
 
-.c4 {
+.c2 {
+  font-size: 1.25rem;
+}
+
+.c5 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -2610,40 +2977,36 @@ exports[`sizes renders correctly for an input field with size medium 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c5[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c5:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c5::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c5::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c5:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c5::placeholder {
   opacity: 0.6;
 }
 
-.c4 {
-  font-size: 1.25rem;
-}
-
-.c4 + .c6 {
+.c5 + .c7 {
   width: 20px;
   height: 20px;
   top: 15px;
@@ -2660,12 +3023,13 @@ exports[`sizes renders correctly for an input field with size medium 1`] = `
   >
     <div />
     <div
-      class="c2 c3"
+      class="c2 c3 c4 c1"
+      style="size: medium;"
     >
       <input
         aria-invalid="false"
         aria-required="false"
-        class="c4 c5"
+        class="c5 c6"
         style="size: medium;"
         type="text"
         value=""
@@ -2690,25 +3054,7 @@ exports[`sizes renders correctly for an input field 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;
-  margin-top: 0.5rem !important;
-}
-
-.c3.c3.c3 {
-  position: relative;
-}
-
-.c5 {
+.c6 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2719,6 +3065,7 @@ exports[`sizes renders correctly for an input field with size small 1`] = `
   box-sizing: border-box;
   background-color: white;
   color: inherit;
+  margin-top: 0.5rem !important;
 }
 
 .c0 {
@@ -2746,11 +3093,33 @@ exports[`sizes renders correctly for an input field with size small 1`] = `
   outline-offset: 2px;
 }
 
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
 .c2 {
-  display: inline-block;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
 }
 
-.c4 {
+.c2 {
+  font-size: 0.8rem;
+}
+
+.c5 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -2759,40 +3128,36 @@ exports[`sizes renders correctly for an input field with size small 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c5[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c5:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c5::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c5::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c5:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c5::placeholder {
   opacity: 0.6;
 }
 
-.c4 {
-  font-size: 0.8rem;
-}
-
-.c4 + .c6 {
+.c5 + .c7 {
   width: 10px;
   height: 10px;
   top: 10px;
@@ -2808,12 +3173,13 @@ exports[`sizes renders correctly for an input field with size small 1`] = `
   >
     <div />
     <div
-      class="c2 c3"
+      class="c2 c3 c4 c1"
+      style="size: small;"
     >
       <input
         aria-invalid="false"
         aria-required="false"
-        class="c4 c5"
+        class="c5 c6"
         style="size: small;"
         type="text"
         value=""
@@ -2838,25 +3204,7 @@ exports[`states renders correctly for an input field 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;
-  margin-top: 0.5rem !important;
-}
-
-.c3.c3.c3 {
-  position: relative;
-}
-
-.c5 {
+.c6 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -2867,6 +3215,7 @@ exports[`states renders correctly for an input field with state danger 1`] = `
   box-sizing: border-box;
   background-color: white;
   color: inherit;
+  margin-top: 0.5rem !important;
 }
 
 .c0 {
@@ -2894,11 +3243,29 @@ exports[`states renders correctly for an input field with state danger 1`] = `
   outline-offset: 2px;
 }
 
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
 .c2 {
-  display: inline-block;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
 }
 
-.c4 {
+.c5 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -2907,36 +3274,36 @@ exports[`states renders correctly for an input field with state danger 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c5[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c5:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c5::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c5::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c5:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c5::placeholder {
   opacity: 0.6;
 }
 
-.c4 {
+.c5 {
   border-color: #e24c67;
   box-shadow: #e24c67 0px 0px 0px 1px !important;
 }
@@ -2951,12 +3318,13 @@ exports[`states renders correctly for an input field with state danger 1`] = `
   >
     <div />
     <div
-      class="c2 c3"
+      class="c2 c3 c4 c1"
+      style="size: default;"
     >
       <input
         aria-invalid="true"
         aria-required="false"
-        class="c4 c5"
+        class="c5 c6"
         style="size: default;"
         type="text"
         value=""
@@ -2981,25 +3349,7 @@ exports[`states renders correctly for an input field 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;
-  margin-top: 0.5rem !important;
-}
-
-.c3.c3.c3 {
-  position: relative;
-}
-
-.c5 {
+.c6 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3010,6 +3360,7 @@ exports[`states renders correctly for an input field with state primary 1`] = `
   box-sizing: border-box;
   background-color: white;
   color: inherit;
+  margin-top: 0.5rem !important;
 }
 
 .c0 {
@@ -3037,11 +3388,29 @@ exports[`states renders correctly for an input field with state primary 1`] = `
   outline-offset: 2px;
 }
 
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
 .c2 {
-  display: inline-block;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
 }
 
-.c4 {
+.c5 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -3050,36 +3419,36 @@ exports[`states renders correctly for an input field with state primary 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c5[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c5:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c5::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c5::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c5:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c5::placeholder {
   opacity: 0.6;
 }
 
-.c4 {
+.c5 {
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
@@ -3094,12 +3463,13 @@ exports[`states renders correctly for an input field with state primary 1`] = `
   >
     <div />
     <div
-      class="c2 c3"
+      class="c2 c3 c4 c1"
+      style="size: default;"
     >
       <input
         aria-invalid="false"
         aria-required="false"
-        class="c4 c5"
+        class="c5 c6"
         style="size: default;"
         type="text"
         value=""
@@ -3124,25 +3494,7 @@ exports[`states renders correctly for an input field 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;
-  margin-top: 0.5rem !important;
-}
-
-.c3.c3.c3 {
-  position: relative;
-}
-
-.c5 {
+.c6 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3153,6 +3505,7 @@ exports[`states renders correctly for an input field with state success 1`] = `
   box-sizing: border-box;
   background-color: white;
   color: inherit;
+  margin-top: 0.5rem !important;
 }
 
 .c0 {
@@ -3180,11 +3533,29 @@ exports[`states renders correctly for an input field with state success 1`] = `
   outline-offset: 2px;
 }
 
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
 .c2 {
-  display: inline-block;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
 }
 
-.c4 {
+.c5 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -3193,36 +3564,36 @@ exports[`states renders correctly for an input field with state success 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c5[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c5:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c5::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c5::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c5:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c5::placeholder {
   opacity: 0.6;
 }
 
-.c4 {
+.c5 {
   border-color: #4ca26c;
   box-shadow: #4ca26c 0px 0px 0px 1px !important;
 }
@@ -3237,12 +3608,13 @@ exports[`states renders correctly for an input field with state success 1`] = `
   >
     <div />
     <div
-      class="c2 c3"
+      class="c2 c3 c4 c1"
+      style="size: default;"
     >
       <input
         aria-invalid="false"
         aria-required="false"
-        class="c4 c5"
+        class="c5 c6"
         style="size: default;"
         type="text"
         value=""
@@ -3267,25 +3639,7 @@ exports[`states renders correctly for an input field 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;
-  margin-top: 0.5rem !important;
-}
-
-.c3.c3.c3 {
-  position: relative;
-}
-
-.c5 {
+.c6 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3296,6 +3650,7 @@ exports[`states renders correctly for an input field with state warning 1`] = `
   box-sizing: border-box;
   background-color: white;
   color: inherit;
+  margin-top: 0.5rem !important;
 }
 
 .c0 {
@@ -3323,11 +3678,29 @@ exports[`states renders correctly for an input field with state warning 1`] = `
   outline-offset: 2px;
 }
 
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
 .c2 {
-  display: inline-block;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
 }
 
-.c4 {
+.c5 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -3336,36 +3709,36 @@ exports[`states renders correctly for an input field with state warning 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c5[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c5:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c5::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c5::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c5:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c5::placeholder {
   opacity: 0.6;
 }
 
-.c4 {
+.c5 {
   border-color: #ffc94c;
   box-shadow: #ffc94c 0px 0px 0px 1px !important;
 }
@@ -3380,12 +3753,13 @@ exports[`states renders correctly for an input field with state warning 1`] = `
   >
     <div />
     <div
-      class="c2 c3"
+      class="c2 c3 c4 c1"
+      style="size: default;"
     >
       <input
         aria-invalid="false"
         aria-required="false"
-        class="c4 c5"
+        class="c5 c6"
         style="size: default;"
         type="text"
         value=""
@@ -3410,25 +3784,7 @@ exports[`types renders correctly for an input field with type date 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;
-  margin-top: 0.5rem !important;
-}
-
-.c3.c3.c3 {
-  position: relative;
-}
-
-.c5 {
+.c6 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3439,6 +3795,7 @@ exports[`types renders correctly for an input field with type date 1`] = `
   box-sizing: border-box;
   background-color: white;
   color: inherit;
+  margin-top: 0.5rem !important;
 }
 
 .c0 {
@@ -3466,11 +3823,29 @@ exports[`types renders correctly for an input field with type date 1`] = `
   outline-offset: 2px;
 }
 
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
 .c2 {
-  display: inline-block;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
 }
 
-.c4 {
+.c5 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -3479,32 +3854,32 @@ exports[`types renders correctly for an input field with type date 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c5[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c5:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c5::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c5::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c5:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c5::placeholder {
   opacity: 0.6;
 }
 
@@ -3518,12 +3893,13 @@ exports[`types renders correctly for an input field with type date 1`] = `
   >
     <div />
     <div
-      class="c2 c3"
+      class="c2 c3 c4 c1"
+      style="size: default;"
     >
       <input
         aria-invalid="false"
         aria-required="false"
-        class="c4 c5"
+        class="c5 c6"
         style="size: default;"
         type="date"
         value=""
@@ -3548,25 +3924,7 @@ exports[`types renders correctly for an input field with type email 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;
-  margin-top: 0.5rem !important;
-}
-
-.c3.c3.c3 {
-  position: relative;
-}
-
-.c5 {
+.c6 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3577,6 +3935,7 @@ exports[`types renders correctly for an input field with type email 1`] = `
   box-sizing: border-box;
   background-color: white;
   color: inherit;
+  margin-top: 0.5rem !important;
 }
 
 .c0 {
@@ -3604,11 +3963,29 @@ exports[`types renders correctly for an input field with type email 1`] = `
   outline-offset: 2px;
 }
 
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
 .c2 {
-  display: inline-block;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
 }
 
-.c4 {
+.c5 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -3617,32 +3994,32 @@ exports[`types renders correctly for an input field with type email 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c5[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c5:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c5::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c5::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c5:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c5::placeholder {
   opacity: 0.6;
 }
 
@@ -3656,12 +4033,13 @@ exports[`types renders correctly for an input field with type email 1`] = `
   >
     <div />
     <div
-      class="c2 c3"
+      class="c2 c3 c4 c1"
+      style="size: default;"
     >
       <input
         aria-invalid="false"
         aria-required="false"
-        class="c4 c5"
+        class="c5 c6"
         style="size: default;"
         type="email"
         value=""
@@ -3686,25 +4064,7 @@ exports[`types renders correctly for an input field with type number 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;
-  margin-top: 0.5rem !important;
-}
-
-.c3.c3.c3 {
-  position: relative;
-}
-
-.c5 {
+.c6 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3715,6 +4075,7 @@ exports[`types renders correctly for an input field with type number 1`] = `
   box-sizing: border-box;
   background-color: white;
   color: inherit;
+  margin-top: 0.5rem !important;
 }
 
 .c0 {
@@ -3742,11 +4103,29 @@ exports[`types renders correctly for an input field with type number 1`] = `
   outline-offset: 2px;
 }
 
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
 .c2 {
-  display: inline-block;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
 }
 
-.c4 {
+.c5 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -3755,32 +4134,32 @@ exports[`types renders correctly for an input field with type number 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c5[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c5:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c5::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c5::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c5:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c5::placeholder {
   opacity: 0.6;
 }
 
@@ -3794,12 +4173,13 @@ exports[`types renders correctly for an input field with type number 1`] = `
   >
     <div />
     <div
-      class="c2 c3"
+      class="c2 c3 c4 c1"
+      style="size: default;"
     >
       <input
         aria-invalid="false"
         aria-required="false"
-        class="c4 c5"
+        class="c5 c6"
         style="size: default;"
         type="number"
         value=""
@@ -3824,25 +4204,7 @@ exports[`types renders correctly for an input field with type password 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;
-  margin-top: 0.5rem !important;
-}
-
-.c3.c3.c3 {
-  position: relative;
-}
-
-.c5 {
+.c6 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3853,6 +4215,7 @@ exports[`types renders correctly for an input field with type password 1`] = `
   box-sizing: border-box;
   background-color: white;
   color: inherit;
+  margin-top: 0.5rem !important;
 }
 
 .c0 {
@@ -3880,11 +4243,29 @@ exports[`types renders correctly for an input field with type password 1`] = `
   outline-offset: 2px;
 }
 
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
 .c2 {
-  display: inline-block;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
 }
 
-.c4 {
+.c5 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -3893,32 +4274,32 @@ exports[`types renders correctly for an input field with type password 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c5[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c5:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c5::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c5::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c5:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c5::placeholder {
   opacity: 0.6;
 }
 
@@ -3932,12 +4313,13 @@ exports[`types renders correctly for an input field with type password 1`] = `
   >
     <div />
     <div
-      class="c2 c3"
+      class="c2 c3 c4 c1"
+      style="size: default;"
     >
       <input
         aria-invalid="false"
         aria-required="false"
-        class="c4 c5"
+        class="c5 c6"
         style="size: default;"
         type="password"
         value=""
@@ -3962,25 +4344,7 @@ exports[`types renders correctly for an input field with type search 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;
-  margin-top: 0.5rem !important;
-}
-
-.c3.c3.c3 {
-  position: relative;
-}
-
-.c5 {
+.c6 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -3991,6 +4355,7 @@ exports[`types renders correctly for an input field with type search 1`] = `
   box-sizing: border-box;
   background-color: white;
   color: inherit;
+  margin-top: 0.5rem !important;
 }
 
 .c0 {
@@ -4018,11 +4383,29 @@ exports[`types renders correctly for an input field with type search 1`] = `
   outline-offset: 2px;
 }
 
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
 .c2 {
-  display: inline-block;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
 }
 
-.c4 {
+.c5 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -4031,32 +4414,32 @@ exports[`types renders correctly for an input field with type search 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c5[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c5:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c5::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c5::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c5:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c5::placeholder {
   opacity: 0.6;
 }
 
@@ -4070,12 +4453,13 @@ exports[`types renders correctly for an input field with type search 1`] = `
   >
     <div />
     <div
-      class="c2 c3"
+      class="c2 c3 c4 c1"
+      style="size: default;"
     >
       <input
         aria-invalid="false"
         aria-required="false"
-        class="c4 c5"
+        class="c5 c6"
         style="size: default;"
         type="search"
         value=""
@@ -4100,25 +4484,7 @@ exports[`types renders correctly for an input field with type tel 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;
-  margin-top: 0.5rem !important;
-}
-
-.c3.c3.c3 {
-  position: relative;
-}
-
-.c5 {
+.c6 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -4129,6 +4495,7 @@ exports[`types renders correctly for an input field with type tel 1`] = `
   box-sizing: border-box;
   background-color: white;
   color: inherit;
+  margin-top: 0.5rem !important;
 }
 
 .c0 {
@@ -4156,11 +4523,29 @@ exports[`types renders correctly for an input field with type tel 1`] = `
   outline-offset: 2px;
 }
 
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
 .c2 {
-  display: inline-block;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
 }
 
-.c4 {
+.c5 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -4169,32 +4554,32 @@ exports[`types renders correctly for an input field with type tel 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c5[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c5:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c5::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c5::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c5:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c5::placeholder {
   opacity: 0.6;
 }
 
@@ -4208,12 +4593,13 @@ exports[`types renders correctly for an input field with type tel 1`] = `
   >
     <div />
     <div
-      class="c2 c3"
+      class="c2 c3 c4 c1"
+      style="size: default;"
     >
       <input
         aria-invalid="false"
         aria-required="false"
-        class="c4 c5"
+        class="c5 c6"
         style="size: default;"
         type="tel"
         value=""
@@ -4238,25 +4624,7 @@ exports[`types renders correctly for an input field with type time 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;
-  margin-top: 0.5rem !important;
-}
-
-.c3.c3.c3 {
-  position: relative;
-}
-
-.c5 {
+.c6 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -4267,6 +4635,7 @@ exports[`types renders correctly for an input field with type time 1`] = `
   box-sizing: border-box;
   background-color: white;
   color: inherit;
+  margin-top: 0.5rem !important;
 }
 
 .c0 {
@@ -4294,11 +4663,29 @@ exports[`types renders correctly for an input field with type time 1`] = `
   outline-offset: 2px;
 }
 
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
 .c2 {
-  display: inline-block;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
 }
 
-.c4 {
+.c5 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -4307,32 +4694,32 @@ exports[`types renders correctly for an input field with type time 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c5[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c5:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c5::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c5::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c5:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c5::placeholder {
   opacity: 0.6;
 }
 
@@ -4346,12 +4733,13 @@ exports[`types renders correctly for an input field with type time 1`] = `
   >
     <div />
     <div
-      class="c2 c3"
+      class="c2 c3 c4 c1"
+      style="size: default;"
     >
       <input
         aria-invalid="false"
         aria-required="false"
-        class="c4 c5"
+        class="c5 c6"
         style="size: default;"
         type="time"
         value=""
@@ -4376,25 +4764,7 @@ exports[`types renders correctly for an input field with type url 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;
-  margin-top: 0.5rem !important;
-}
-
-.c3.c3.c3 {
-  position: relative;
-}
-
-.c5 {
+.c6 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -4405,6 +4775,7 @@ exports[`types renders correctly for an input field with type url 1`] = `
   box-sizing: border-box;
   background-color: white;
   color: inherit;
+  margin-top: 0.5rem !important;
 }
 
 .c0 {
@@ -4432,11 +4803,29 @@ exports[`types renders correctly for an input field with type url 1`] = `
   outline-offset: 2px;
 }
 
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
 .c2 {
-  display: inline-block;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
 }
 
-.c4 {
+.c5 {
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;
@@ -4445,32 +4834,32 @@ exports[`types renders correctly for an input field with type url 1`] = `
   padding: 0.4em 0.6em;
 }
 
-.c4[disabled] {
+.c5[disabled] {
   background-color: #f2f2f2;
   box-shadow: unset;
   color: #8d8d8d;
 }
 
-.c4:focus {
+.c5:focus {
   outline: unset;
   z-index: 2;
   border-color: #7467c0;
   box-shadow: #7467c0 0px 0px 0px 1px !important;
 }
 
-.c4::-webkit-input-placeholder {
+.c5::-webkit-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::-moz-placeholder {
+.c5::-moz-placeholder {
   opacity: 0.6;
 }
 
-.c4:-ms-input-placeholder {
+.c5:-ms-input-placeholder {
   opacity: 0.6;
 }
 
-.c4::placeholder {
+.c5::placeholder {
   opacity: 0.6;
 }
 
@@ -4484,12 +4873,13 @@ exports[`types renders correctly for an input field with type url 1`] = `
   >
     <div />
     <div
-      class="c2 c3"
+      class="c2 c3 c4 c1"
+      style="size: default;"
     >
       <input
         aria-invalid="false"
         aria-required="false"
-        class="c4 c5"
+        class="c5 c6"
         style="size: default;"
         type="url"
         value=""
diff --git a/src/Input/styled.js b/src/Input/styled.js
index f22c0b016..da84107b6 100644
--- a/src/Input/styled.js
+++ b/src/Input/styled.js
@@ -3,6 +3,8 @@ import styled, { css } from 'reakit/styled';
 import { palette, theme } from 'styled-tools';
 import Input from 'reakit/Input';
 
+import { InlineFlex } from '../primitives';
+import _Icon from '../Icon';
 import Spinner from '../Spinner';
 
 export const LoadingSpinner = styled(Spinner)`
@@ -16,8 +18,6 @@ export const LoadingSpinner = styled(Spinner)`
 
 const sizeProperties = {
   small: css`
-    font-size: 0.8rem;
-
     & + ${LoadingSpinner} {
       width: 10px;
       height: 10px;
@@ -29,8 +29,6 @@ const sizeProperties = {
     }
   `,
   medium: css`
-    font-size: 1.25rem;
-
     & + ${LoadingSpinner} {
       width: 20px;
       height: 20px;
@@ -43,8 +41,6 @@ const sizeProperties = {
     }
   `,
   large: css`
-    font-size: 1.5rem;
-
     & + ${LoadingSpinner} {
       width: 25px;
       height: 25px;
@@ -58,11 +54,56 @@ const sizeProperties = {
   `
 };
 
+const wrapperSizeProperties = {
+  small: css`
+    font-size: 0.8rem;
+
+    & {
+      ${theme('fannypack.Input.Wrapper.sizes.small')};
+    }
+  `,
+  medium: css`
+    font-size: 1.25rem;
+
+    & {
+      ${theme('fannypack.Input.Wrapper.sizes.medium')};
+    }
+  `,
+  large: css`
+    font-size: 1.5rem;
+
+    & {
+      ${theme('fannypack.Input.Wrapper.sizes.large')};
+    }
+  `
+};
+
 const stateProperties = css`
   border-color: ${props => palette(`${props.state}Lighter`)(props)}
   box-shadow: ${props => palette(`${props.state}Lighter`)(props)} 0px 0px 0px 1px !important;
 `;
 
+export const Icon = styled(_Icon)`
+  fill: ${palette('textLightest')};
+  height: 2.5em;
+  margin: 0 0.75em;
+  top: 0;
+
+  ${theme('fannypack.Input.Icon.base')};
+`;
+
+export const InputWrapper = styled(InlineFlex)`
+  align-items: center;
+  position: relative;
+  width: ${props => (props.isFullWidth ? '100%' : undefined)};
+
+  & {
+    ${props => props.size && wrapperSizeProperties[props.size]};
+  }
+
+  ${theme('fannypack.Input.Wrapper.base')};
+`;
+
 export default styled(Input)`
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
@@ -100,6 +141,20 @@ export default styled(Input)`
     }
   }
 
+  & {
+    ${props =>
+      props.after &&
+      css`
+        padding-right: 2.3em;
+      `}
+  }
+  & {
+    ${props =>
+      props.before &&
+      css`
+        padding-left: 2.3em;
+      `}
+  }
   & {
     ${props =>
       props.isFullWidth &&