Design tweaks for mod pref dialog

src/components/forms/Toggle.tsx

@@ -49,12 +49,12 @@ const GroupContext = React.createContext<{
   setFieldValue: () => {},
 })
 
-export type GroupProps = React.PropsWithChildren<{
+export type GroupProps<T = string> = React.PropsWithChildren<{
   type?: 'radio' | 'checkbox'
-  values: string[]
+  values: T[]
   maxSelections?: number
   disabled?: boolean
-  onChange: (value: string[]) => void
+  onChange: (value: T[]) => void
   label: string
 }>
 
@@ -73,7 +73,7 @@ export function useItemContext() {
   return React.useContext(ItemContext)
 }
 
-export function Group({
+export function Group<ValuesType = string>({
   children,
   values: providedValues,
   onChange,
@@ -81,13 +81,13 @@ export function Group({
   type = 'checkbox',
   maxSelections,
   label,
-}: GroupProps) {
+}: GroupProps<ValuesType>) {
   const groupRole = type === 'radio' ? 'radiogroup' : undefined
   const values = type === 'radio' ? providedValues.slice(0, 1) : providedValues
   const [maxReached, setMaxReached] = React.useState(false)
 
   const setFieldValue = React.useCallback<
-    (props: {name: string; value: boolean}) => void
+    (props: {name: ValuesType; value: boolean}) => void
   >(
     ({name, value}) => {
       if (type === 'checkbox') {