Updated several input components

lib/component/input/SelectInput.tsx

@@ -18,24 +18,22 @@ export default function SelectInput(props: SelectInputProps){
 			value={value}
 			onChange={onChange}
 		>
-			<div
-				className="relative w-full"
+			<ListboxButton
+				className={clsx(
+					"group relative flex flex-row items-center justify-between w-full",
+					"border-2 px-2 py-1 rounded-lg"
+					//"not-data-open:rounded-lg data-open:rounded-t-lg"
+				)}
 			>
-				<ListboxButton
-					className={clsx(
-						"flex flex-row items-center justify-between w-full",
-						"outline rounded px-2 py-1"
-					)}
-				>
-					<span>{label}</span>
-					<span><BsChevronDown size={22}/></span>
-				</ListboxButton>
-				<ListboxOptions
-					className="absolute w-full max-h-60 overflow-scroll z-10 outline-none"
-				>
-					{children}
-				</ListboxOptions>
-			</div>
+				<span>{label}</span>
+				<span className="block group-data-open:rotate-180 transition-transform duration-250"><BsChevronDown size={22}/></span>
+			</ListboxButton>
+			<ListboxOptions
+				className="w-(--button-width) max-h-60! overflow-hidden z-10 outline-none rounded-lg"
+				anchor="bottom"
+			>
+				{children}
+			</ListboxOptions>
 		</Listbox>
 	);
 }