refactor(VerificationCode): migrate to use vanilla extract

Author: matthprost

.changeset/tender-flowers-drive.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": minor
+---
+
+Refactor `<VerificationCode /> to use vanilla extract`

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

@@ -3,93 +3,9 @@
 exports[`VerificationCodeField > should render correctly 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  border: none;
-  padding: 0;
-  margin: 0;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.emotion-2 {
   cursor: text;
 }
 
-.emotion-4 {
-  background: #ffffff;
-  color: #3f4250;
-  font-size: 1rem;
-  font-weight: 400;
-  text-align: center;
-  border-radius: 0.25rem;
-  margin-right: 0.5rem;
-  width: 2.5rem;
-  height: 3rem;
-  outline-style: none;
-  -webkit-transition: border-color 0.2s ease,box-shadow 0.2s ease;
-  transition: border-color 0.2s ease,box-shadow 0.2s ease;
-  border: solid 1px #d9dadd;
-}
-
-.emotion-4[aria-invalid='true'] {
-  border-color: #b3144d;
-}
-
-.emotion-4[data-success='true'] {
-  border-color: #22674e;
-}
-
-.emotion-4:hover,
-.emotion-4:focus {
-  border-color: #792dd4;
-}
-
-.emotion-4:hover[aria-invalid='true'],
-.emotion-4:focus[aria-invalid='true'] {
-  border-color: #92103f;
-}
-
-.emotion-4:hover[data-success='true'],
-.emotion-4:focus[data-success='true'] {
-  border-color: #1b533f;
-}
-
-.emotion-4:focus {
-  box-shadow: 0px 0px 0px 3px #8c40ef40;
-}
-
-.emotion-4:last-child {
-  margin-right: 0;
-}
-
-.emotion-4::-webkit-input-placeholder {
-  color: #727683;
-}
-
-.emotion-4::-moz-placeholder {
-  color: #727683;
-}
-
-.emotion-4:-ms-input-placeholder {
-  color: #727683;
-}
-
-.emotion-4::placeholder {
-  color: #727683;
-}
-
-.emotion-4:disabled {
-  cursor: not-allowed;
-  background: #f3f3f4;
-  color: #b5b7bd;
-  border: solid 1px #e9eaeb;
-}
-
 <div
     data-testid="testing"
   >
@@ -98,14 +14,14 @@ exports[`VerificationCodeField > should render correctly 1`] = `
       style="display: contents;"
     >
       <fieldset
-        class="emotion-0 emotion-1"
+        class="uv_1k9synd5"
       >
         <div
           class="uv_toi52u0 uv_toi52u3j uv_toi52u2j uv_toi52u7d uv_toi52u1v uv_toi52u5d"
           style="--uv_4k0ekn0: var(--uv_4k0ekn0); --uv_4k0ekn1: var(--uv_4k0ekn1); --uv_4k0ekn2: var(--uv_4k0ekn2); --uv_4k0ekn3: var(--uv_4k0ekn3);"
         >
           <label
-            class="emotion-2 emotion-3 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow8 uv_m4c9owb uv_m4c9owi uv_m4c9owq uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
+            class="emotion-0 emotion-1 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow8 uv_m4c9owb uv_m4c9owi uv_m4c9owq uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
           >
             Code
           </label>
@@ -120,7 +36,7 @@ exports[`VerificationCodeField > should render correctly 1`] = `
             aria-invalid="false"
             aria-label="Verification code 0"
             autocomplete="off"
-            class="emotion-4 emotion-5"
+            class="uv_1k9synd2 uv_1k9synd4 emotion-2"
             data-success="false"
             data-testid="0"
             id="verification-code-input-0"
@@ -134,7 +50,7 @@ exports[`VerificationCodeField > should render correctly 1`] = `
             aria-invalid="false"
             aria-label="Verification code 1"
             autocomplete="off"
-            class="emotion-4 emotion-5"
+            class="uv_1k9synd2 uv_1k9synd4 emotion-2"
             data-success="false"
             data-testid="1"
             id="verification-code-input-1"
@@ -148,7 +64,7 @@ exports[`VerificationCodeField > should render correctly 1`] = `
             aria-invalid="false"
             aria-label="Verification code 2"
             autocomplete="off"
-            class="emotion-4 emotion-5"
+            class="uv_1k9synd2 uv_1k9synd4 emotion-2"
             data-success="false"
             data-testid="2"
             id="verification-code-input-2"
@@ -162,7 +78,7 @@ exports[`VerificationCodeField > should render correctly 1`] = `
             aria-invalid="false"
             aria-label="Verification code 3"
             autocomplete="off"
-            class="emotion-4 emotion-5"
+            class="uv_1k9synd2 uv_1k9synd4 emotion-2"
             data-success="false"
             data-testid="3"
             id="verification-code-input-3"