chore: adjust SelectInputCheckbox styling

src/components/input/SelectInputCheckbox.tsx

@@ -25,14 +25,18 @@ const CheckboxOption = <
 >(
   props: OptionProps<T, IsMulti, Group>
 ) => {
-  const { isSelected, label, innerRef, innerProps, className } = props;
+  const { isSelected, label, innerRef, innerProps, className, isFocused } =
+    props;
 
   return (
     <div
       ref={innerRef}
       {...innerProps}
       className={cn(
-        'flex items-center gap-2 px-3 py-2 cursor-pointer',
+        'flex items-center gap-3 p-3 cursor-pointer transition-all hover:bg-primary/5',
+        {
+          'bg-primary/5': isFocused,
+        },
         className
       )}
     >
@@ -40,9 +44,12 @@ const CheckboxOption = <
         type='checkbox'
         checked={isSelected}
         onChange={() => null}
-        className='checkbox checkbox-sm rounded checkbox-primary pointer-events-none'
+        className='checkbox checkbox-sm rounded-md checkbox-primary pointer-events-none border-base-content/10'
       />
-      <label className='cursor-pointer flex-1 select-none'>{label}</label>
+
+      <label className='cursor-pointer flex-1 select-none text-sm text-base-content/50 font-medium'>
+        {label}
+      </label>
     </div>
   );
 };