feat(analysis): introduce optional clear button DEV-1194 (#6445)

### 📣 Summary
Modern implementations of radio components don't allow de-selection.
After updating the select one question type in the qualitative analysis
section to mantine, we lost this functionality. To ensure the ability to
de-select select one questions, they will appear with a "clear" button
next to the "delete" button

### Notes
Prerequisite for DEV-1169

### 👀 Preview steps
1. ℹ️ have an account and a project with NLP questions and submissions
2. go to qualitative analysis
3. add a select-one question type
4. 🔴 [on main] notice that there is no clear button
5. 🟢 [on PR] notice the clear button exists and works

Author: duvld

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

@@ -22,6 +22,8 @@ import type { AnalysisQuestionInternal } from '../constants'
 
 interface ResponseWrapperProps {
   uuid: string
+  /** Adds a clear button with the given logic */
+  onClear?: () => unknown
   children?: React.ReactNode
 }
 
@@ -136,7 +138,6 @@ export default function ResponseWrapper(props: ResponseWrapperProps) {
 
         <ActionIcon
           variant='light'
-          color=''
           size='sm'
           iconName='edit'
           onClick={openQuestionInEditor}
@@ -149,6 +150,8 @@ export default function ResponseWrapper(props: ResponseWrapperProps) {
           }
         />
 
+        {props.onClear && <ActionIcon variant='light' size='sm' iconName='close' onClick={props.onClear} />}
+
         <ActionIcon
           variant='danger-secondary'
           size='sm'

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

@@ -71,7 +71,7 @@ export default function SelectOneResponseForm(props: SelectOneResponseFormProps)
   }
 
   return (
-    <ResponseWrapper uuid={props.uuid}>
+    <ResponseWrapper uuid={props.uuid} onClear={() => onRadioChange('')}>
       <Radio
         options={getOptions()}
         name={question.labels._default}

jsapp/js/theme/kobo/ActionIcon.ts

@@ -18,6 +18,11 @@ export const ActionIconThemeKobo = ActionIcon.extend({
           '--ai-bg': theme.colors.blue[9],
           '--ai-hover': theme.colors.blue[8],
         }),
+        ...(props.variant === 'light-gray' && {
+          '--ai-color': theme.colors.gray[2],
+          '--ai-bg': theme.colors.gray[7],
+          '--ai-hover': theme.colors.gray[6],
+        }),
         ...(props.variant === 'transparent' && {
           '--ai-color': theme.colors.blue[4],
           '--ai-hover-color': theme.colors.blue[5],