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

@@ -2,11 +2,18 @@ import { labelVariants } from './variants'
 
 import type { LabelProps } from './types'
 
-export function Label({ children, className, required, size }: LabelProps) {
+export function Label({
+  children,
+  className,
+  selected,
+  required,
+  size,
+}: LabelProps) {
   const classNames = labelVariants({
     className,
     size,
     required,
+    selected,
   })
 
   return <span className={classNames}>{children}</span>

packages/design-system/lib/components/Label/label.module.css

@@ -43,23 +43,22 @@
   content: ' *';
 }
 
-input:focus,
-input:placeholder-shown,
-input[value]:not([value='']),
-textarea:focus,
-textarea:placeholder-shown,
-textarea[value]:not([value='']) {
-  & ~ .label {
-    font-family: var(--Label-Font-family), var(--Label-Font-fallback);
-    font-size: var(--Label-Size);
-    font-weight: var(--Label-Font-weight);
-    letter-spacing: var(--Label-Letter-spacing);
-    text-transform: unset;
-    line-height: 1.5;
-    text-decoration: none;
+input:focus ~ .label,
+input:placeholder-shown ~ .label,
+input[value]:not([value='']) ~ .label,
+textarea:focus ~ .label,
+textarea:placeholder-shown ~ .label,
+textarea[value]:not([value='']) ~ .label,
+.selected {
+  font-family: var(--Label-Font-family), var(--Label-Font-fallback);
+  font-size: var(--Label-Size);
+  font-weight: var(--Label-Font-weight);
+  letter-spacing: var(--Label-Letter-spacing);
+  text-transform: unset;
+  line-height: 1.5;
+  text-decoration: none;
 
-    margin-bottom: var(--Space-x05);
-  }
+  margin-bottom: var(--Space-x025);
 }
 
 input:disabled,
@@ -79,7 +78,7 @@ textarea:disabled {
     line-height: 1.5;
     text-decoration: none;
 
-    margin-bottom: var(--Space-x05);
+    margin-bottom: var(--Space-x025);
   }
 }
 

packages/design-system/lib/components/Label/variants.ts

@@ -12,6 +12,9 @@ export const labelVariants = cva(styles.label, {
     required: {
       true: styles.required,
     },
+    selected: {
+      true: styles.selected,
+    },
   },
   defaultVariants: {
     size: 'regular',