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.tsx

@@ -16,6 +16,7 @@ import type { SelectProps, SelectFilterProps } from './types'
 
 import styles from './select.module.css'
 import { useState } from 'react'
+import { Label } from '../Label'
 
 export function Select({
   name,
@@ -64,15 +65,12 @@ export function Select({
           {({ selectedText }) => {
             return (
               <>
-                <Typography
-                  variant={
-                    selectedText || isOpen
-                      ? 'Label/xsRegular'
-                      : 'Body/Paragraph/mdRegular'
-                  }
+                <Label
+                  className={styles.label}
+                  selected={Boolean(selectedText || isOpen)}
                 >
-                  <span className={styles.label}>{label}</span>
-                </Typography>
+                  {label}
+                </Label>
                 <Typography variant="Body/Paragraph/mdRegular">
                   <span className={styles.selectedText}>{selectedText}</span>
                 </Typography>

packages/design-system/lib/components/Select/SelectFilter.tsx

@@ -7,7 +7,7 @@ import {
   Key,
   ListBox,
   Popover,
-  Label,
+  Label as AriaLabel,
   ComboBoxStateContext,
 } from 'react-aria-components'
 import {
@@ -26,6 +26,7 @@ import { SelectItem } from './SelectItem'
 import type { SelectFilterProps } from './types'
 
 import styles from './select.module.css'
+import { Label } from '../Label'
 
 /**
  * ComboBoxInner
@@ -124,7 +125,7 @@ export function SelectFilter({
       {...props}
     >
       <ComboBoxInner inputRef={inputRef}>
-        <Label>
+        <AriaLabel>
           {icon ? (
             <MaterialIcon
               icon={icon}
@@ -135,13 +136,9 @@ export function SelectFilter({
           ) : null}
 
           <span className={styles.displayText}>
-            <Typography
-              variant={
-                focus || value ? 'Label/xsRegular' : 'Body/Paragraph/mdRegular'
-              }
-            >
-              <span className={styles.label}>{label}</span>
-            </Typography>
+            <Label className={styles.label} selected={Boolean(focus || value)}>
+              {label}
+            </Label>
             <Typography variant="Body/Paragraph/mdRegular">
               <Input
                 ref={inputRef}
@@ -151,7 +148,7 @@ export function SelectFilter({
               />
             </Typography>
           </span>
-        </Label>
+        </AriaLabel>
         <Button className={styles.button}>
           <MaterialIcon
             icon="chevron_right"

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%;