fix(form): remove all emotion usages (#5439)

* fix(form): remove all emotion usages

* fix: snapshots

Author: matthprost

packages/form/src/components/DateInputField/__tests__/__snapshots__/index.test.tsx.snap

@@ -278,7 +278,7 @@ exports[`DateInputField > should clear field 1`] = `
   gap: 1rem;
 }
 
-.emotion-21 {
+.emotion-19 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -300,7 +300,7 @@ exports[`DateInputField > should clear field 1`] = `
   flex-direction: row;
 }
 
-.emotion-23 {
+.emotion-21 {
   vertical-align: middle;
   fill: currentColor;
   height: 1rem;
@@ -309,12 +309,12 @@ exports[`DateInputField > should clear field 1`] = `
   min-height: 1rem;
 }
 
-.emotion-23 .fillStroke {
+.emotion-21 .fillStroke {
   stroke: currentColor;
   fill: none;
 }
 
-.emotion-26 {
+.emotion-24 {
   color: #3f4250;
   font-size: 1rem;
   font-family: Inter,sans-serif;
@@ -327,7 +327,7 @@ exports[`DateInputField > should clear field 1`] = `
   text-transform: capitalize;
 }
 
-.emotion-30 {
+.emotion-28 {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: 0.5rem;
@@ -341,7 +341,7 @@ exports[`DateInputField > should clear field 1`] = `
   justify-content: normal;
 }
 
-.emotion-33 {
+.emotion-31 {
   color: #3f4250;
   font-size: 1rem;
   font-family: Inter,sans-serif;
@@ -355,33 +355,33 @@ exports[`DateInputField > should clear field 1`] = `
   text-transform: lowercase;
 }
 
-.emotion-33::first-letter {
+.emotion-31::first-letter {
   text-transform: uppercase;
 }
 
-.emotion-53 {
+.emotion-51 {
   height: 1.5625rem;
   width: 100%;
   padding: 0;
   color: #727683;
 }
 
-.emotion-53[aria-label="in-range"] {
+.emotion-51[aria-label="in-range"] {
   color: #521094;
   background-color: #f1eefc;
 }
 
-.emotion-53[aria-label="in-range"]:hover {
+.emotion-51[aria-label="in-range"]:hover {
   color: #ffffff;
   background-color: #792dd4;
 }
 
-.emotion-53[aria-label="not-current"],
-.emotion-53:disabled {
+.emotion-51[aria-label="not-current"],
+.emotion-51:disabled {
   color: #b5b7bd;
 }
 
-.emotion-53[aria-label="selected"] {
+.emotion-51[aria-label="selected"] {
   color: #ffffff;
 }
 

packages/form/src/components/SelectInputField/__tests__/__snapshots__/index.test.tsx.snap

@@ -295,7 +295,7 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
   flex-direction: column;
 }
 
-.emotion-22 {
+.emotion-20 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -322,11 +322,11 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
   padding-top: 0.25rem;
 }
 
-.emotion-22[data-grouped="true"] {
+.emotion-20[data-grouped="true"] {
   padding-top: 0rem;
 }
 
-.emotion-24 {
+.emotion-22 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -349,13 +349,13 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
   gap: 0.125rem;
 }
 
-.emotion-26 {
+.emotion-24 {
   position: -webkit-sticky;
   position: sticky;
   top: 0;
 }
 
-.emotion-28 {
+.emotion-26 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -385,21 +385,21 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
   margin-bottom: 0.125rem;
 }
 
-.emotion-28:focus {
+.emotion-26:focus {
   background-color: #f9f9fa;
   outline: none;
 }
 
-.emotion-28[data-selectgroup='true'] {
+.emotion-26[data-selectgroup='true'] {
   padding-left: 1rem;
   border-left: 0.25rem solid #f9f9fa;
 }
 
-.emotion-28[data-selectgroup='true']:focus {
+.emotion-26[data-selectgroup='true']:focus {
   background-color: #e9eaeb;
 }
 
-.emotion-30 {
+.emotion-28 {
   color: #3f4250;
   font-size: 0.75rem;
   font-family: Inter,sans-serif;
@@ -412,7 +412,7 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
   text-align: left;
 }
 
-.emotion-34 {
+.emotion-32 {
   text-align: left;
   border: none;
   background-color: #ffffff;
@@ -424,31 +424,31 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
   border: 1px transparent solid;
 }
 
-.emotion-34:hover,
-.emotion-34:focus {
+.emotion-32:hover,
+.emotion-32:focus {
   background-color: #f1eefc;
   color: #641cb3;
   cursor: pointer;
 }
 
-.emotion-34[aria-selected='true'] {
+.emotion-32[aria-selected='true'] {
   background-color: #f1eefc;
 }
 
-.emotion-34[aria-disabled="true"] {
+.emotion-32[aria-disabled="true"] {
   background-color: #f3f3f4;
   color: #b5b7bd;
 }
 
-.emotion-34[aria-disabled="true"]:hover,
-.emotion-34 [aria-disabled="true"]:focus {
+.emotion-32[aria-disabled="true"]:hover,
+.emotion-32 [aria-disabled="true"]:focus {
   background-color: #f3f3f4;
   color: #b5b7bd;
   cursor: not-allowed;
   outline: none;
 }
 
-.emotion-38 {
+.emotion-36 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -471,7 +471,7 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
   overflow: hidden;
 }
 
-.emotion-41 {
+.emotion-39 {
   font-size: 1rem;
   font-family: Inter,sans-serif;
   font-weight: 400;
@@ -493,7 +493,7 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
   max-width: 100%;
 }
 
-.emotion-43 {
+.emotion-41 {
   color: #727683;
   font-size: 0.875rem;
   font-family: Inter,sans-serif;