fix: make use of design system label component in select

minor tweaks to make sure input and select behaves consistently

packages/design-system/lib/components/Select/select.module.css

@@ -4,6 +4,7 @@
   border: 1px solid var(--Border-Interactive-Default);
   border-radius: var(--Corner-radius-md);
   height: 56px;
+  box-sizing: border-box;
 
   &[data-required] .label::after {
     content: ' *';
@@ -14,7 +15,7 @@
     }
 
     .selectedText {
-      min-height: 18px;
+      min-height: 24px;
     }
   }
   &[data-focused] {
@@ -26,7 +27,7 @@
       outline: none;
     }
     .input {
-      min-height: 18px;
+      min-height: 24px;
     }
     .label {
       color: var(--Text-Interactive-Focus);
@@ -58,8 +59,8 @@
   align-items: center;
   gap: var(--Space-x1);
   width: 100%;
-  height: 56px;
-  padding: var(--Space-x15);
+  height: 100%;
+  padding: 0 var(--Space-x15);
   box-sizing: border-box;
 
   .button {
@@ -83,7 +84,7 @@
   width: 100%;
 
   &[value]:not([value='']) {
-    min-height: 18px;
+    min-height: 24px;
   }
 }
 
@@ -94,13 +95,12 @@
 }
 
 .selectedText:not(:empty) {
-  min-height: 18px;
+  min-height: 24px;
 }
 
 .displayText {
   display: flex;
   flex-direction: column;
-  gap: calc(var(--Space-x05) / 2);
   flex: 1;
   justify-content: center;
   height: 100%;