Add Select component (#37702)

app/javascript/mastodon/components/form_fields/select_field.tsx

@@ -1,8 +1,11 @@
 import type { ComponentPropsWithoutRef } from 'react';
 import { forwardRef } from 'react';
 
+import classNames from 'classnames';
+
 import { FormFieldWrapper } from './form_field_wrapper';
 import type { CommonFieldWrapperProps } from './form_field_wrapper';
+import classes from './select.module.scss';
 
 interface Props
   extends ComponentPropsWithoutRef<'select'>, CommonFieldWrapperProps {}
@@ -25,14 +28,27 @@ export const SelectField = forwardRef<HTMLSelectElement, Props>(
       inputId={id}
     >
       {(inputProps) => (
-        <div className='select-wrapper'>
-          <select {...otherProps} {...inputProps} ref={ref}>
-            {children}
-          </select>
-        </div>
+        <Select {...otherProps} {...inputProps} ref={ref}>
+          {children}
+        </Select>
       )}
     </FormFieldWrapper>
   ),
 );
 
 SelectField.displayName = 'SelectField';
+
+export const Select = forwardRef<
+  HTMLSelectElement,
+  ComponentPropsWithoutRef<'select'>
+>(({ className, size, ...otherProps }, ref) => (
+  <div className={classes.wrapper}>
+    <select
+      {...otherProps}
+      className={classNames(className, classes.select)}
+      ref={ref}
+    />
+  </div>
+));
+
+Select.displayName = 'Select';