feat: add initial design to Select

components/TempDesignSystem/Form/Select/index.tsx

@@ -1,5 +1,5 @@
 "use client"
-import { useRef } from "react"
+import { RefObject, useEffect, useRef, useState } from "react"
 import {
   Button,
   type Key,
@@ -21,20 +21,23 @@ export default function Select({
   "aria-label": ariaLabel,
   items,
   label,
-  name,
+  // name,
   onSelect,
   placeholder,
   value,
   defaultSelectedKey,
 }: SelectProps) {
-  const divRef = useRef<HTMLDivElement>(null)
-
+  const ref = useRef<HTMLDivElement>(null)
+  const [rootDiv, setRootDiv] = useState<HTMLDivElement | null>(null)
+  useEffect(() => {
+    setRootDiv(ref.current)
+  }, [ref])
   function handleOnSelect(key: Key) {
     onSelect(key)
   }
 
   return (
-    <div className={styles.date} ref={divRef}>
+    <div className={styles.container} ref={ref}>
       <ReactAriaSelect
         defaultSelectedKey={defaultSelectedKey}
         aria-label={ariaLabel}
@@ -43,9 +46,11 @@ export default function Select({
         placeholder={placeholder}
         selectedKey={value as Key}
       >
-        <Label className={styles.label}>{label}</Label>
         <Button className={styles.input}>
-          <SelectValue />
+          <div className={styles.inputContentWrapper}>
+            <Label className={styles.label}>{label}</Label>
+            <SelectValue />
+          </div>
           <SelectChevron />
         </Button>
         <Popover
@@ -58,7 +63,7 @@ export default function Select({
            * by this component to both access css variables assigned
            * on the container as well as to not overflow it at any time.
            */
-          UNSTABLE_portalContainer={divRef.current ?? undefined}
+          UNSTABLE_portalContainer={rootDiv ?? undefined}
         >
           <ListBox className={styles.listBox}>
             {items.map((item) => (