Squashed commit of the following:

commit a0969cd
Author: Anji <[email protected]>
Date:   Wed Nov 19 10:52:18 2025 -0500

    use correct theme name

commit d57f6ad
Author: Anji <[email protected]>
Date:   Mon Nov 17 21:11:35 2025 -0500

    WIP raido pointer

commit c42ed4b
Merge: f89b0ec 56c80e5
Author: Anji <[email protected]>
Date:   Mon Nov 17 17:23:28 2025 -0500

    Merge branch 'anji/dev-1194-clear-button' into anji/dev-1169-select-one-to-mantine

     Conflicts:
    	jsapp/js/components/processing/analysis/responseForms/selectOneResponseForm.component.tsx

commit f89b0ec
Merge: 92d9a3b 7bb767e
Author: Anji Tong <[email protected]>
Date:   Thu Nov 13 19:48:02 2025 +0000

    Merge branch 'anji/dev-1194-clear-button' into anji/dev-1169-select-one-to-mantine

commit 92d9a3b
Merge: 311d13d ea65cde
Author: Anji Tong <[email protected]>
Date:   Wed Nov 12 15:42:10 2025 +0000

    Merge branch 'anji/dev-1194-clear-button' into anji/dev-1169-select-one-to-mantine

commit 311d13d
Author: Anji <[email protected]>
Date:   Tue Nov 11 14:23:47 2025 -0500

    refactor(analysis): migrate select one form to mantine

Author: duvld

jsapp/js/components/processing/analysis/responseForms/selectOneResponseForm.component.tsx

@@ -1,5 +1,5 @@
+import { Radio, Stack } from '@mantine/core'
 import React, { useContext, useState } from 'react'
-import Radio from '#/components/common/radio'
 import type { RadioOption } from '#/components/common/radio'
 import AnalysisQuestionsContext from '#/components/processing/analysis/analysisQuestions.context'
 import {
@@ -71,15 +71,19 @@ export default function SelectOneResponseForm(props: SelectOneResponseFormProps)
   }
 
   return (
-    <ResponseWrapper uuid={props.uuid} onClear={() => onRadioChange('')}>
-      <Radio
-        options={getOptions()}
-        name={question.labels._default}
-        onChange={onRadioChange}
-        selected={response}
-        isClearable
-        isDisabled={!props.canEdit}
-      />
+    <ResponseWrapper uuid={props.uuid} onClear={() => setResponse('')}>
+      <Radio.Group>
+        <Stack gap={'xs'}>
+          {getOptions().map((option) => (
+            <Radio
+              value={option.value}
+              label={option.label}
+              onChange={(newResponse) => onRadioChange(newResponse.currentTarget.value)}
+              checked={response === option.value}
+            />
+          ))}
+        </Stack>
+      </Radio.Group>
     </ResponseWrapper>
   )
 }

jsapp/js/theme/kobo/Radio.module.css

@@ -0,0 +1,6 @@
+.label {
+  background-color: red;
+}
+.radio {
+  cursor: pointer;
+}

jsapp/js/theme/kobo/Radio.ts

@@ -0,0 +1,6 @@
+import { Radio } from '@mantine/core'
+import classes from './Radio.module.css'
+
+export const RadioThemeKobo = Radio.extend({
+  classNames: classes,
+})

jsapp/js/theme/kobo/index.ts

@@ -13,6 +13,7 @@ import { TableThemeKobo } from './Table'
 import { TagsInputThemeKobo } from './TagsInput'
 import { ThemeIconThemeKobo } from './ThemeIcon'
 import { TooltipThemeKobo } from './Tooltip'
+import {RadioThemeKobo} from './Radio'
 
 export const themeKobo = createTheme({
   primaryColor: 'blue',
@@ -123,5 +124,6 @@ export const themeKobo = createTheme({
     TagsInput: TagsInputThemeKobo,
     ThemeIcon: ThemeIconThemeKobo,
     NumberInput: NumberInputThemeKobo,
+    Radio: RadioThemeKobo,
   },
 })