Convert Form Components to TypeScript

Co-authored-by: Mark McDowall <mark@mcdowall.ca>

Remove defaultProps from TypeScript components

(cherry picked from commit a90c13e86f798841cb6db038bb6b6d1408a00585)

Fix multi-select checkboxes not appearing

(cherry picked from commit e199710c15fbfa643a9f71c7a20f70b1722d0df6)

frontend/src/Components/Form/Select/HintedSelectInputOption.tsx

@@ -0,0 +1,51 @@
+import classNames from 'classnames';
+import React from 'react';
+import EnhancedSelectInputOption, {
+  EnhancedSelectInputOptionProps,
+} from './EnhancedSelectInputOption';
+import styles from './HintedSelectInputOption.css';
+
+interface HintedSelectInputOptionProps
+  extends Omit<EnhancedSelectInputOptionProps, 'isSelected'> {
+  value: string;
+  hint?: React.ReactNode;
+  dividerAfter?: boolean;
+  isSelected?: boolean;
+}
+
+function HintedSelectInputOption(props: HintedSelectInputOptionProps) {
+  const {
+    id,
+    value,
+    hint,
+    depth,
+    isSelected = false,
+    isMobile,
+    dividerAfter = false,
+    ...otherProps
+  } = props;
+
+  return (
+    <>
+      <EnhancedSelectInputOption
+        id={id}
+        depth={depth}
+        isSelected={isSelected}
+        isMobile={isMobile}
+        {...otherProps}
+      >
+        <div
+          className={classNames(styles.optionText, isMobile && styles.isMobile)}
+        >
+          <div>{value}</div>
+
+          {hint != null && <div className={styles.hintText}>{hint}</div>}
+        </div>
+      </EnhancedSelectInputOption>
+
+      {dividerAfter ? <div className={styles.divider} /> : null}
+    </>
+  );
+}
+
+export default HintedSelectInputOption;