fix: update design for select component and remove placeholders

components/TempDesignSystem/Form/Date/index.tsx

@@ -138,7 +138,6 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
                       onSelect={(key: Key) =>
                         setValue(DateName.day, Number(key))
                       }
-                      placeholder={dayLabel}
                       required
                       tabIndex={3}
                       value={segment.isPlaceholder ? undefined : segment.value}
@@ -158,7 +157,6 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
                       onSelect={(key: Key) =>
                         setValue(DateName.month, Number(key))
                       }
-                      placeholder={monthLabel}
                       required
                       tabIndex={2}
                       value={segment.isPlaceholder ? undefined : segment.value}
@@ -178,7 +176,6 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
                       onSelect={(key: Key) =>
                         setValue(DateName.year, Number(key))
                       }
-                      placeholder={yearLabel}
                       required
                       tabIndex={1}
                       value={segment.isPlaceholder ? undefined : segment.value}

components/TempDesignSystem/Form/Input/AriaInputWithLabel/input.module.css

@@ -37,6 +37,11 @@
   padding: 0;
 }
 
+.container:has(.input:not(:placeholder-shown)) {
+  align-content: space-around;
+  gap: var(--Spacing-x-half);
+}
+
 .input:not(:active, :focus):placeholder-shown {
   height: 0px;
   transition: height 150ms ease;

components/TempDesignSystem/Form/Label/label.module.css

@@ -24,48 +24,47 @@ span.discreet {
   order: unset;
 }
 
+/* Handle input and textarea fields */
 input:active ~ .label,
-input:not(:placeholder-shown) ~ .label {
-  display: block;
-  font-size: 12px;
-}
-
-input:focus ~ .label {
-  font-size: 12px;
-}
-
-input:placeholder-shown ~ .label {
-  grid-row: 1/-1;
-}
-
-input:placeholder-shown:focus ~ .label,
-input:placeholder-shown:active ~ .label {
-  margin-bottom: var(--Spacing-x-half);
-}
-
-input:disabled ~ .label {
-  color: var(--Main-Grey-40);
-}
-
+input:not(:placeholder-shown) ~ .label,
 textarea:active ~ .label,
 textarea:not(:placeholder-shown) ~ .label {
   display: block;
   font-size: 12px;
 }
 
+input:focus ~ .label,
 textarea:focus ~ .label {
   font-size: 12px;
 }
 
+input:placeholder-shown ~ .label,
 textarea:placeholder-shown ~ .label {
   grid-row: 1/-1;
 }
 
-textarea:placeholder-shown:focus ~ .label,
+input:placeholder-shown:focus ~ .label,
+input:placeholder-shown:active ~ .label,
+textarea:placeholder-shown.label,
 textarea:placeholder-shown:active ~ .label {
   margin-bottom: var(--Spacing-x-half);
 }
 
-textarea:disabled ~ .label {
+input:disabled ~ .label,
+textarea:disabled ~ .label,
+:global(.select-container)[data-disabled] .label {
   color: var(--Main-Grey-40);
 }
+
+/* Handle select fields */
+:global(.select-button) .label {
+  order: unset;
+}
+
+:global(.select-container)[data-open="true"] .label:not(.discreet),
+:global(.react-aria-SelectValue):has(:nth-child(2)) .label:not(.discreet),
+:global(.select-button):active .label:not(.discreet) {
+  display: grid;
+  font-size: 12px;
+  margin-bottom: var(--Spacing-x-half);
+}

components/TempDesignSystem/Form/Select/index.tsx

@@ -9,8 +9,8 @@ export default function Select({
   className,
   items,
   label,
+  disabled,
   name,
-  placeholder,
   registerOptions = {},
 }: SelectProps) {
   const { control } = useFormContext()
@@ -24,14 +24,13 @@ export default function Select({
     <ReactAriaSelect
       className={className}
       defaultSelectedKey={field.value}
-      disabled={field.disabled}
+      disabled={disabled || field.disabled}
       items={items}
       label={label}
       aria-label={label}
       name={field.name}
       onBlur={field.onBlur}
       onSelect={field.onChange}
-      placeholder={placeholder}
       value={field.value}
       data-testid={name}
     />

components/TempDesignSystem/Form/Select/select.ts

@@ -5,7 +5,7 @@ import type { SelectProps as ReactAriaSelectProps } from "@/components/TempDesig
 export interface SelectProps
   extends Omit<
       React.SelectHTMLAttributes<HTMLSelectElement>,
-      "name" | "onSelect"
+      "name" | "onSelect" | "placeholder"
     >,
     Omit<ReactAriaSelectProps, "onSelect" | "ref" | "value"> {
   registerOptions?: RegisterOptions