refactor(row): vanilla extract (#5503)

* refactor(Row): use vanilla extract

* ci: add more tests

* fix: feedback alex

* fix: feedback alex

Author: matthprost

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

@@ -1061,6 +1061,7 @@ exports[`toggleField > should render correctly with label and checked 1`] = `
 <<<<<<< HEAD
 <<<<<<< HEAD
 <<<<<<< HEAD
+<<<<<<< HEAD
 .emotion-0:active .emotion-3[data-disabled='false']:after {
 =======
 .emotion-0:active .emotion-9[data-disabled='false']:after {
@@ -1071,6 +1072,9 @@ exports[`toggleField > should render correctly with label and checked 1`] = `
 =======
 .emotion-0:active .emotion-5[data-disabled='false']:after {
 >>>>>>> be21b81f1 (refactor(Stack): vanilla extract (#5492))
+=======
+.emotion-0:active .emotion-3[data-disabled='false']:after {
+>>>>>>> 81cb7b1fc (refactor(row): vanilla extract (#5503))
   width: calc(1rem * 1.3775);
 }
 
@@ -1082,6 +1086,7 @@ exports[`toggleField > should render correctly with label and checked 1`] = `
 .emotion-2 {
 <<<<<<< HEAD
 <<<<<<< HEAD
+<<<<<<< HEAD
 =======
   display: -webkit-box;
   display: -webkit-flex;
@@ -1142,6 +1147,8 @@ exports[`toggleField > should render correctly with label and checked 1`] = `
 =======
 .emotion-4 {
 >>>>>>> be21b81f1 (refactor(Stack): vanilla extract (#5492))
+=======
+>>>>>>> 81cb7b1fc (refactor(row): vanilla extract (#5503))
   box-sizing: content-box;
   outline: none;
   overflow: hidden;
@@ -1166,6 +1173,7 @@ exports[`toggleField > should render correctly with label and checked 1`] = `
 <<<<<<< HEAD
 <<<<<<< HEAD
 <<<<<<< HEAD
+<<<<<<< HEAD
 .emotion-2:hover {
   background-color: #d9dadd;
 }
@@ -1192,6 +1200,13 @@ exports[`toggleField > should render correctly with label and checked 1`] = `
 
 .emotion-4:after {
 >>>>>>> be21b81f1 (refactor(Stack): vanilla extract (#5492))
+=======
+.emotion-2:hover {
+  background-color: #d9dadd;
+}
+
+.emotion-2:after {
+>>>>>>> 81cb7b1fc (refactor(row): vanilla extract (#5503))
   content: "";
   position: absolute;
   top: calc(1.5rem / 2 - 1rem / 2);
@@ -1207,6 +1222,7 @@ exports[`toggleField > should render correctly with label and checked 1`] = `
 <<<<<<< HEAD
 <<<<<<< HEAD
 <<<<<<< HEAD
+<<<<<<< HEAD
 .emotion-2:focus-within,
 .emotion-2:focus {
   box-shadow: 0px 0px 0px 3px #151a2d5c;
@@ -1228,13 +1244,18 @@ exports[`toggleField > should render correctly with label and checked 1`] = `
 .emotion-4:focus-within,
 .emotion-4:focus {
 >>>>>>> be21b81f1 (refactor(Stack): vanilla extract (#5492))
+=======
+.emotion-2:focus-within,
+.emotion-2:focus {
+>>>>>>> 81cb7b1fc (refactor(row): vanilla extract (#5503))
   box-shadow: 0px 0px 0px 3px #151a2d5c;
 }
 
-.emotion-4[data-disabled="false"]:active:after {
+.emotion-2[data-disabled="false"]:active:after {
   width: calc(1rem * 1.3775);
 }
 
+<<<<<<< HEAD
 <<<<<<< HEAD
 <<<<<<< HEAD
 .emotion-8:has(:checked) {
@@ -1245,13 +1266,17 @@ exports[`toggleField > should render correctly with label and checked 1`] = `
 =======
 .emotion-4:has(:checked) {
 >>>>>>> be21b81f1 (refactor(Stack): vanilla extract (#5492))
+=======
+.emotion-2:has(:checked) {
+>>>>>>> 81cb7b1fc (refactor(row): vanilla extract (#5503))
   color: #222638;
   background-color: #8c40ef;
 }
 
 <<<<<<< HEAD
 <<<<<<< HEAD
 <<<<<<< HEAD
+<<<<<<< HEAD
 .emotion-2:has(:checked):hover {
   background-color: #792dd4;
 }
@@ -1278,6 +1303,13 @@ exports[`toggleField > should render correctly with label and checked 1`] = `
 
 .emotion-4:has(:checked):after {
 >>>>>>> be21b81f1 (refactor(Stack): vanilla extract (#5492))
+=======
+.emotion-2:has(:checked):hover {
+  background-color: #792dd4;
+}
+
+.emotion-2:has(:checked):after {
+>>>>>>> 81cb7b1fc (refactor(row): vanilla extract (#5503))
   left: calc(100% - 5px);
   -webkit-transform: translateX(-100%);
   -moz-transform: translateX(-100%);
@@ -1288,6 +1320,7 @@ exports[`toggleField > should render correctly with label and checked 1`] = `
 <<<<<<< HEAD
 <<<<<<< HEAD
 <<<<<<< HEAD
+<<<<<<< HEAD
 .emotion-2:has(:checked):focus-within,
 .emotion-2:has(:checked):focus {
   box-shadow: 0px 0px 0px 3px #8c40ef40;
@@ -1334,38 +1367,43 @@ exports[`toggleField > should render correctly with label and checked 1`] = `
 .emotion-4:has(:checked):focus-within,
 .emotion-4:has(:checked):focus {
 >>>>>>> be21b81f1 (refactor(Stack): vanilla extract (#5492))
+=======
+.emotion-2:has(:checked):focus-within,
+.emotion-2:has(:checked):focus {
+>>>>>>> 81cb7b1fc (refactor(row): vanilla extract (#5503))
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-4[data-disabled="true"] {
+.emotion-2[data-disabled="true"] {
   background: #f3f3f4;
 }
 
-.emotion-4[data-disabled="true"]:has(:checked) {
+.emotion-2[data-disabled="true"]:has(:checked) {
   background: #e5dbfd;
 }
 
-.emotion-4[data-error="true"] {
+.emotion-2[data-error="true"] {
   background-color: #ffebf2;
 }
 
-.emotion-4[data-error="true"]:focus-within,
-.emotion-4[data-error="true"]:focus {
+.emotion-2[data-error="true"]:focus-within,
+.emotion-2[data-error="true"]:focus {
   box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-4[data-error="true"]:has(:checked) {
+.emotion-2[data-error="true"]:has(:checked) {
   background-color: #e51963;
 }
 
-.emotion-4[data-error="true"][data-disabled="true"] {
+.emotion-2[data-error="true"][data-disabled="true"] {
   background-color: #fff3f7;
 }
 
-.emotion-4[data-error="true"][data-disabled="true"]:has(:checked) {
+.emotion-2[data-error="true"][data-disabled="true"]:has(:checked) {
   background-color: #ffd3e3;
 }
 
+<<<<<<< HEAD
 <<<<<<< HEAD
 <<<<<<< HEAD
 .emotion-10 {
@@ -1376,6 +1414,9 @@ exports[`toggleField > should render correctly with label and checked 1`] = `
 =======
 .emotion-6 {
 >>>>>>> be21b81f1 (refactor(Stack): vanilla extract (#5492))
+=======
+.emotion-4 {
+>>>>>>> 81cb7b1fc (refactor(row): vanilla extract (#5503))
   position: absolute;
   opacity: 0;
   top: 0;
@@ -1388,6 +1429,7 @@ exports[`toggleField > should render correctly with label and checked 1`] = `
 <<<<<<< HEAD
 <<<<<<< HEAD
 <<<<<<< HEAD
+<<<<<<< HEAD
 .emotion-4[disabled] {
 =======
 .emotion-10[disabled] {
@@ -1398,6 +1440,9 @@ exports[`toggleField > should render correctly with label and checked 1`] = `
 =======
 .emotion-6[disabled] {
 >>>>>>> be21b81f1 (refactor(Stack): vanilla extract (#5492))
+=======
+.emotion-4[disabled] {
+>>>>>>> 81cb7b1fc (refactor(row): vanilla extract (#5503))
   cursor: not-allowed;
 }
 
@@ -1431,7 +1476,8 @@ exports[`toggleField > should render correctly with label and checked 1`] = `
 >>>>>>> be21b81f1 (refactor(Stack): vanilla extract (#5492))
         >
           <div
-            class="emotion-2 emotion-3"
+            class="uv_x6hyh50 uv_x6hyh52p uv_x6hyh57"
+            style="--uv_3mg8xe0: auto 1fr; --uv_3mg8xe1: auto 1fr; --uv_3mg8xe2: auto 1fr; --uv_3mg8xe3: auto 1fr; --uv_3mg8xe4: auto 1fr; --uv_3mg8xe5: auto 1fr;"
           >
             <span
 <<<<<<< HEAD
@@ -1448,6 +1494,7 @@ exports[`toggleField > should render correctly with label and checked 1`] = `
         <div
 <<<<<<< HEAD
 <<<<<<< HEAD
+<<<<<<< HEAD
 <<<<<<< HEAD
           class="emotion-2 emotion-3"
 =======
@@ -1459,6 +1506,9 @@ exports[`toggleField > should render correctly with label and checked 1`] = `
 =======
           class="emotion-4 emotion-5"
 >>>>>>> be21b81f1 (refactor(Stack): vanilla extract (#5492))
+=======
+          class="emotion-2 emotion-3"
+>>>>>>> 81cb7b1fc (refactor(row): vanilla extract (#5503))
           data-disabled="false"
           data-error="false"
         >
@@ -1467,6 +1517,7 @@ exports[`toggleField > should render correctly with label and checked 1`] = `
             checked=""
 <<<<<<< HEAD
 <<<<<<< HEAD
+<<<<<<< HEAD
 <<<<<<< HEAD
             class="emotion-4 emotion-5"
 =======
@@ -1478,6 +1529,9 @@ exports[`toggleField > should render correctly with label and checked 1`] = `
 =======
             class="emotion-6 emotion-7"
 >>>>>>> be21b81f1 (refactor(Stack): vanilla extract (#5492))
+=======
+            class="emotion-4 emotion-5"
+>>>>>>> 81cb7b1fc (refactor(row): vanilla extract (#5503))
             id="«r6»"
             name="test"
             type="checkbox"