feat(Popover): vanilla extract popup (#5477)

* feat: popup, popover and tooltip

* fix: var in new file

Author: lisalupi

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

@@ -48,18 +48,6 @@ exports[`keyValueField > should render with default props & max size 1`] = `
 }
 
 .emotion-4 {
-  display: inherit;
-}
-
-.emotion-4[data-container-full-height="true"] {
-  height: 100%;
-}
-
-.emotion-4[data-container-full-width="true"] {
-  width: 100%;
-}
-
-.emotion-6 {
   vertical-align: middle;
   fill: currentColor;
   height: 1rem;
@@ -68,7 +56,7 @@ exports[`keyValueField > should render with default props & max size 1`] = `
   min-height: 1rem;
 }
 
-.emotion-6 .fillStroke {
+.emotion-4 .fillStroke {
   stroke: currentColor;
   fill: none;
 }
@@ -89,8 +77,7 @@ exports[`keyValueField > should render with default props & max size 1`] = `
           <div
             aria-controls="«r8»"
             aria-describedby="«r8»"
-            class="emotion-4 emotion-5"
-            data-container-full-width="false"
+            class="uv_w40vpo9"
             tabindex="0"
           >
             <button
@@ -99,7 +86,7 @@ exports[`keyValueField > should render with default props & max size 1`] = `
               type="button"
             >
               <svg
-                class="emotion-6 emotion-7"
+                class="emotion-4 emotion-5"
                 viewBox="0 0 16 16"
               >
                 <path
@@ -164,18 +151,6 @@ exports[`keyValueField > should render with default props 1`] = `
 }
 
 .emotion-4 {
-  display: inherit;
-}
-
-.emotion-4[data-container-full-height="true"] {
-  height: 100%;
-}
-
-.emotion-4[data-container-full-width="true"] {
-  width: 100%;
-}
-
-.emotion-6 {
   vertical-align: middle;
   fill: currentColor;
   height: 1rem;
@@ -184,7 +159,7 @@ exports[`keyValueField > should render with default props 1`] = `
   min-height: 1rem;
 }
 
-.emotion-6 .fillStroke {
+.emotion-4 .fillStroke {
   stroke: currentColor;
   fill: none;
 }
@@ -205,8 +180,7 @@ exports[`keyValueField > should render with default props 1`] = `
           <div
             aria-controls="«r0»"
             aria-describedby="«r0»"
-            class="emotion-4 emotion-5"
-            data-container-full-width="false"
+            class="uv_w40vpo9"
             tabindex="0"
           >
             <button
@@ -215,7 +189,7 @@ exports[`keyValueField > should render with default props 1`] = `
               type="button"
             >
               <svg
-                class="emotion-6 emotion-7"
+                class="emotion-4 emotion-5"
                 viewBox="0 0 16 16"
               >
                 <path
@@ -280,18 +254,6 @@ exports[`keyValueField > should render with default props in readonly mode 1`] =
 }
 
 .emotion-4 {
-  display: inherit;
-}
-
-.emotion-4[data-container-full-height="true"] {
-  height: 100%;
-}
-
-.emotion-4[data-container-full-width="true"] {
-  width: 100%;
-}
-
-.emotion-6 {
   vertical-align: middle;
   fill: currentColor;
   height: 1rem;
@@ -300,7 +262,7 @@ exports[`keyValueField > should render with default props in readonly mode 1`] =
   min-height: 1rem;
 }
 
-.emotion-6 .fillStroke {
+.emotion-4 .fillStroke {
   stroke: currentColor;
   fill: none;
 }
@@ -321,8 +283,7 @@ exports[`keyValueField > should render with default props in readonly mode 1`] =
           <div
             aria-controls="«r9»"
             aria-describedby="«r9»"
-            class="emotion-4 emotion-5"
-            data-container-full-width="false"
+            class="uv_w40vpo9"
             tabindex="0"
           >
             <button
@@ -332,7 +293,7 @@ exports[`keyValueField > should render with default props in readonly mode 1`] =
               type="button"
             >
               <svg
-                class="emotion-6 emotion-7"
+                class="emotion-4 emotion-5"
                 viewBox="0 0 16 16"
               >
                 <path