feat: icons vanilla extract (#5481)

* feat: icons vanilla extract wip

* feat: update tests

* fix: changeset

Author: lisalupi

.changeset/clean-hotels-kneel.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/icons": minor
+---
+
+Refactor components `Icon`, `CategoryIcon`, `Logo` and `ProductIcon` to use vanilla-extract instead of Emotion

.changeset/pre.json

@@ -7,11 +7,11 @@
     "@examples/next-app-router": "1.0.0",
     "@examples/vite": "0.0.0",
     "@ultraviolet/fonts": "2.0.0",
-    "@ultraviolet/form": "4.0.3",
-    "@ultraviolet/icons": "4.0.2",
+    "@ultraviolet/form": "5.0.1",
+    "@ultraviolet/icons": "4.0.4",
     "@ultraviolet/illustrations": "5.0.1",
-    "@ultraviolet/nextjs": "1.0.3",
-    "@ultraviolet/plus": "1.0.3",
+    "@ultraviolet/nextjs": "2.0.1",
+    "@ultraviolet/plus": "2.1.0",
     "@ultraviolet/themes": "2.0.0",
     "@ultraviolet/ui": "2.0.3",
     "@utils/test": "0.0.1"

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

@@ -47,20 +47,6 @@ exports[`KeyValueField > should render with default props & max size 1`] = `
   flex-direction: row;
 }
 
-.emotion-4 {
-  vertical-align: middle;
-  fill: currentColor;
-  height: 1rem;
-  width: 1rem;
-  min-width: 1rem;
-  min-height: 1rem;
-}
-
-.emotion-4 .fillStroke {
-  stroke: currentColor;
-  fill: none;
-}
-
 <div
     data-testid="testing"
   >
@@ -86,7 +72,7 @@ exports[`KeyValueField > should render with default props & max size 1`] = `
               type="button"
             >
               <svg
-                class="emotion-4 emotion-5"
+                class="styles__1sbwqkz0 styles_prominence_default__1sbwqkzg styles_disabled_false__1sbwqkzf styles_size_small__1sbwqkza"
                 viewBox="0 0 16 16"
               >
                 <path
@@ -150,20 +136,6 @@ exports[`KeyValueField > should render with default props 1`] = `
   flex-direction: row;
 }
 
-.emotion-4 {
-  vertical-align: middle;
-  fill: currentColor;
-  height: 1rem;
-  width: 1rem;
-  min-width: 1rem;
-  min-height: 1rem;
-}
-
-.emotion-4 .fillStroke {
-  stroke: currentColor;
-  fill: none;
-}
-
 <div
     data-testid="testing"
   >
@@ -189,7 +161,7 @@ exports[`KeyValueField > should render with default props 1`] = `
               type="button"
             >
               <svg
-                class="emotion-4 emotion-5"
+                class="styles__1sbwqkz0 styles_prominence_default__1sbwqkzg styles_disabled_false__1sbwqkzf styles_size_small__1sbwqkza"
                 viewBox="0 0 16 16"
               >
                 <path
@@ -253,20 +225,6 @@ exports[`KeyValueField > should render with default props in readonly mode 1`] =
   flex-direction: row;
 }
 
-.emotion-4 {
-  vertical-align: middle;
-  fill: currentColor;
-  height: 1rem;
-  width: 1rem;
-  min-width: 1rem;
-  min-height: 1rem;
-}
-
-.emotion-4 .fillStroke {
-  stroke: currentColor;
-  fill: none;
-}
-
 <div
     data-testid="testing"
   >
@@ -293,7 +251,7 @@ exports[`KeyValueField > should render with default props in readonly mode 1`] =
               type="button"
             >
               <svg
-                class="emotion-4 emotion-5"
+                class="styles__1sbwqkz0 styles_prominence_default__1sbwqkzg styles_disabled_false__1sbwqkzf styles_size_small__1sbwqkza"
                 viewBox="0 0 16 16"
               >
                 <path