@lookiero/checkout 11.1.0 → 11.3.0

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/iconCheckoutQuestionItem/icons/Normal.tsx

@@ -1,12 +1,12 @@
 import React, { FC } from "react";
 import Svg, { Circle, Path, SvgProps } from "react-native-svg";
 
-const Normal: FC<SvgProps> = ({ strokeWidth = 1, ...props }) => (
+const Normal: FC<SvgProps> = ({ strokeWidth = 1, color, ...props }) => (
   <Svg fill="none" height={48} width={48} {...props}>
-    <Circle cx={24} cy={24} r={23} stroke="#000" strokeWidth={strokeWidth} />
-    <Circle cx={16} cy={17} fill="#000" r={2} />
-    <Circle cx={32} cy={17} fill="#000" r={2} />
-    <Path d="M15 31h19v1H15z" fill="#000" strokeWidth={strokeWidth} />
+    <Circle cx={24} cy={24} r={23} stroke={color} strokeWidth={strokeWidth} />
+    <Circle cx={16} cy={17} fill={color} r={2} />
+    <Circle cx={32} cy={17} fill={color} r={2} />
+    <Path d="M15 31.5H34" stroke={color} strokeWidth={strokeWidth} />
   </Svg>
 );
 

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/iconCheckoutQuestionItem/icons/Sad.tsx

@@ -1,12 +1,12 @@
 import React, { FC } from "react";
 import Svg, { Circle, Path, SvgProps } from "react-native-svg";
 
-const Sad: FC<SvgProps> = ({ strokeWidth = 1, ...props }) => (
+const Sad: FC<SvgProps> = ({ strokeWidth = 1, color, ...props }) => (
   <Svg fill="none" height={48} width={48} {...props}>
-    <Circle cx={24} cy={24} r={23} stroke="#000" strokeWidth={strokeWidth} />
-    <Circle cx={16} cy={17} fill="#000" r={2} />
-    <Circle cx={32} cy={17} fill="#000" r={2} />
-    <Path d="M14 33.5s3-6 10-6 10 6 10 6" stroke="#000" strokeWidth={strokeWidth} />
+    <Circle cx={24} cy={24} r={23} stroke={color} strokeWidth={strokeWidth} />
+    <Circle cx={16} cy={17} fill={color} r={2} />
+    <Circle cx={32} cy={17} fill={color} r={2} />
+    <Path d="M14 33.5s3-6 10-6 10 6 10 6" stroke={color} strokeWidth={strokeWidth} />
   </Svg>
 );
 

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/textareaCheckoutQuestionItem/TextareaCheckoutQuestionItem.style.ts

@@ -1,31 +1,33 @@
 import { Platform, StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
-const { fontInputPaddingLeft, space2, space4 } = theme();
-
 const INPUT_HEIGHT = 96;
 
-const style = StyleSheet.create({
-  input: {
-    paddingTop: space4,
-    ...Platform.select({
-      android: {
-        paddingTop: space2,
-      },
-    }),
-  },
-  inputContainer: {
-    height: INPUT_HEIGHT,
-    ...Platform.select({
-      android: {
-        alignItems: "flex-start",
-        paddingLeft: fontInputPaddingLeft,
-      },
-    }),
-  },
-  inputField: {
-    height: INPUT_HEIGHT,
-  },
-});
+const style = () => {
+  const { fontInputPaddingLeft, space2, space4 } = theme();
+
+  return StyleSheet.create({
+    input: {
+      paddingTop: space4,
+      ...Platform.select({
+        android: {
+          paddingTop: space2,
+        },
+      }),
+    },
+    inputContainer: {
+      height: INPUT_HEIGHT,
+      ...Platform.select({
+        android: {
+          alignItems: "flex-start",
+          paddingLeft: fontInputPaddingLeft,
+        },
+      }),
+    },
+    inputField: {
+      height: INPUT_HEIGHT,
+    },
+  });
+};
 
 export { style };

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/textareaCheckoutQuestionItem/TextareaCheckoutQuestionItem.tsx

@@ -4,7 +4,7 @@ import { InputField, TextInput } from "@lookiero/sty-psp-ui";
 import { DOMAIN } from "../../../../../i18n/i18n";
 import { useCheckoutQuestionFeedbackForId } from "../../behaviors/useCheckoutQuestionFeedback";
 import { CheckoutQuestionItem, CheckoutQuestionItemProps } from "../CheckoutQuestionItem";
-import { style } from "./TextareaCheckoutQuestionItem.style";
+import { style as textareaCheckoutQuestionItemStyle } from "./TextareaCheckoutQuestionItem.style";
 
 const TextareaCheckoutQuestionItem: CheckoutQuestionItem = ({
   checkoutQuestion,
@@ -24,6 +24,8 @@ const TextareaCheckoutQuestionItem: CheckoutQuestionItem = ({
     [onChange, checkoutQuestionParentId],
   );
 
+  const style = useMemo(() => textareaCheckoutQuestionItemStyle(), []);
+
   return (
     <InputField
       label={placeholderText}

package/src/infrastructure/ui/components/organisms/returnQuestions/components/hostDefaultReturnQuestionItem/HostDefaultReturnQuestionItem.style.ts

@@ -1,15 +1,17 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
-const { colorBgBase, space4, space6 } = theme();
+const style = () => {
+  const { colorBgBase, space4, space6 } = theme();
 
-const style = StyleSheet.create({
-  title: {
-    backgroundColor: colorBgBase,
-    paddingBottom: space4,
-    paddingHorizontal: space6,
-    paddingTop: space6,
-  },
-});
+  return StyleSheet.create({
+    title: {
+      backgroundColor: colorBgBase,
+      paddingBottom: space4,
+      paddingHorizontal: space6,
+      paddingTop: space6,
+    },
+  });
+};
 
 export { style };

package/src/infrastructure/ui/components/organisms/returnQuestions/components/hostDefaultReturnQuestionItem/HostDefaultReturnQuestionItem.tsx

@@ -1,12 +1,13 @@
 /* eslint-disable react/prop-types */
-import React from "react";
-import { Text, View } from "@lookiero/aurora";
+import React, { useMemo } from "react";
+import { View } from "react-native";
+import { Text } from "@lookiero/aurora";
 import { useI18n } from "@lookiero/i18n-react";
 import { ReturnQuestionType } from "../../../../../../../projection/returnQuestion/returnQuestion.constants";
 import { returnQuestionWithTranslationKey } from "../../../../../../../projection/returnQuestion/returnQuestion.typeguard";
 import { DOMAIN, I18nMessages } from "../../../../../i18n/i18n";
 import { ReturnQuestionItem } from "../ReturnQuestionItem";
-import { style } from "./HostDefaultReturnQuestionItem.style";
+import { style as hostDefaultReturnQuestionItemStyle } from "./HostDefaultReturnQuestionItem.style";
 
 const HostDefaultReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.HOST_DEFAULT> = ({
   returnQuestion,
@@ -15,6 +16,8 @@ const HostDefaultReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.HOST_
   const { formatMessage } = useI18n({ domain: DOMAIN });
   const isAllOptions = returnQuestion.translationKey === I18nMessages.RETURN_QUESTION_MAIN_ALL_OPINION;
 
+  const style = useMemo(() => hostDefaultReturnQuestionItemStyle(), []);
+
   return (
     <>
       {returnQuestionWithTranslationKey(returnQuestion) && returnQuestion.translationKey !== " " && !isAllOptions ? (

package/src/infrastructure/ui/components/organisms/returnQuestions/components/hostRadioGroupReturnQuestionItem/HostRadioGroupReturnQuestionItem.style.ts

@@ -1,17 +1,19 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
-const { colorBgBase, space2, space6 } = theme();
+const style = () => {
+  const { colorBgBase, space2, space6 } = theme();
 
-const style = StyleSheet.create({
-  title: {
-    marginBottom: space2,
-  },
-  wrapper: {
-    backgroundColor: colorBgBase,
-    marginBottom: space2,
-    padding: space6,
-  },
-});
+  return StyleSheet.create({
+    title: {
+      marginBottom: space2,
+    },
+    wrapper: {
+      backgroundColor: colorBgBase,
+      marginBottom: space2,
+      padding: space6,
+    },
+  });
+};
 
 export { style };

package/src/infrastructure/ui/components/organisms/returnQuestions/components/hostRadioGroupReturnQuestionItem/HostRadioGroupReturnQuestionItem.tsx

@@ -6,7 +6,7 @@ import { useI18n } from "@lookiero/i18n-react";
 import { ReturnQuestionType } from "../../../../../../../projection/returnQuestion/returnQuestion.constants";
 import { DOMAIN } from "../../../../../i18n/i18n";
 import { ReturnQuestionItem } from "../ReturnQuestionItem";
-import { style } from "./HostRadioGroupReturnQuestionItem.style";
+import { style as hostRadioGroupReturnQuestionItemStyle } from "./HostRadioGroupReturnQuestionItem.style";
 
 const HostRadioGroupReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.HOST_SELECT> = ({
   returnQuestion,
@@ -19,6 +19,8 @@ const HostRadioGroupReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.HO
     [formatMessage, returnQuestion.metadata.placeholder],
   );
 
+  const style = useMemo(() => hostRadioGroupReturnQuestionItemStyle(), []);
+
   return (
     <>
       <View style={style.wrapper} testID={testID}>
@@ -31,4 +33,4 @@ const HostRadioGroupReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.HO
   );
 };
 
-export { HostRadioGroupReturnQuestionItem, style };
+export { HostRadioGroupReturnQuestionItem };

package/src/infrastructure/ui/components/organisms/returnQuestions/components/hostSelectReturnQuestionItem/HostSelectReturnQuestionItem.style.ts

@@ -1,23 +1,29 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
-const { colorBgPrimaryLight, space4, space6 } = theme();
-const containerUnderlayColor = colorBgPrimaryLight;
+const style = () => {
+  const { colorBgPrimaryLight, space4, space6 } = theme();
 
-const style = StyleSheet.create({
-  backButton: {
-    padding: 0,
-  },
-  container: {
-    marginBottom: space4,
-  },
-  header: {
-    justifyContent: "space-between",
-  },
-  modalContent: {
-    paddingBottom: space6,
-    paddingHorizontal: space6,
-  },
-});
+  const styles = StyleSheet.create({
+    backButton: {
+      padding: 0,
+    },
+    container: {
+      marginBottom: space4,
+    },
+    header: {
+      justifyContent: "space-between",
+    },
+    modalContent: {
+      paddingBottom: space6,
+      paddingHorizontal: space6,
+    },
+  });
 
-export { style, containerUnderlayColor };
+  return {
+    ...styles,
+    containerUnderlayColor: colorBgPrimaryLight,
+  };
+};
+
+export { style };

package/src/infrastructure/ui/components/organisms/returnQuestions/components/hostSelectReturnQuestionItem/HostSelectReturnQuestionItem.tsx

@@ -1,9 +1,8 @@
 /* eslint-disable react/prop-types */
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { TouchableHighlight, View } from "react-native";
-import { ButtonIcon } from "@lookiero/aurora";
 import { useI18n } from "@lookiero/i18n-react";
-import { InputField, Modal, TextInput } from "@lookiero/sty-psp-ui";
+import { ButtonIcon, InputField, Modal, TextInput } from "@lookiero/sty-psp-ui";
 import { ReturnQuestionType } from "../../../../../../../projection/returnQuestion/returnQuestion.constants";
 import { DOMAIN } from "../../../../../i18n/i18n";
 import {
@@ -15,7 +14,7 @@ import {
   feedbackForReturnQuestion,
 } from "../../util/returnQuestionFeedback";
 import { ReturnQuestionItem } from "../ReturnQuestionItem";
-import { style, containerUnderlayColor } from "./HostSelectReturnQuestionItem.style";
+import { style as hostSelectReturnQuestionItemStyle } from "./HostSelectReturnQuestionItem.style";
 
 const HostSelectReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.HOST_SELECT> = ({
   returnQuestion,
@@ -29,6 +28,8 @@ const HostSelectReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.HOST_S
     [formatMessage, returnQuestion.metadata.placeholder],
   );
 
+  const style = useMemo(() => hostSelectReturnQuestionItemStyle(), []);
+
   const [modalVisible, setModalVisible] = useState(false);
   const handleOnPress = useCallback(() => setModalVisible(true), []);
   const handleOnModalClose = useCallback(() => setModalVisible(false), []);
@@ -65,7 +66,7 @@ const HostSelectReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.HOST_S
         accessibilityLabel={testID}
         style={style.container}
         testID={testID}
-        underlayColor={containerUnderlayColor}
+        underlayColor={style.containerUnderlayColor}
         accessible
         onPress={handleOnPress}
       >
@@ -96,7 +97,7 @@ const HostSelectReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.HOST_S
           deepestReturnQuestionWithFeedback && (
             <ButtonIcon
               name="arrow_left"
-              style={style.backButton}
+              style={{ button: style.backButton }}
               testID="modal-back-button"
               onPress={handleOnBackButtonPress}
             />

package/src/infrastructure/ui/components/organisms/returnQuestions/components/hostStackReturnQuestionItem/modal/HostStackReturnQuestionItem.style.ts

@@ -1,12 +1,17 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
-const { space1 } = theme();
+const style = () => {
+  const { colorTextMedium, space1 } = theme();
 
-const style = StyleSheet.create({
-  title: {
-    marginBottom: space1,
-  },
-});
+  return StyleSheet.create({
+    text: {
+      color: colorTextMedium,
+    },
+    title: {
+      marginBottom: space1,
+    },
+  });
+};
 
 export { style };

package/src/infrastructure/ui/components/organisms/returnQuestions/components/hostStackReturnQuestionItem/modal/HostStackReturnQuestionItem.tsx

@@ -2,7 +2,7 @@
 import React, { useCallback, useMemo } from "react";
 import { LayoutChangeEvent, View } from "react-native";
 import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
-import { COLOR, Text } from "@lookiero/aurora";
+import { Text } from "@lookiero/aurora";
 import { useI18n } from "@lookiero/i18n-react";
 import { ReturnQuestionType } from "../../../../../../../../projection/returnQuestion/returnQuestion.constants";
 import { returnQuestionHasChildren } from "../../../../../../../../projection/returnQuestion/returnQuestion.typeguard";
@@ -10,7 +10,7 @@ import { DOMAIN } from "../../../../../../i18n/i18n";
 import ReturnQuestion from "../../../ReturnQuestion";
 import { useReturnQuestionFeedbackForReturnQuestion } from "../../../behaviors/useReturnQuestionFeedback";
 import { ReturnQuestionItem } from "../../ReturnQuestionItem";
-import { style } from "./HostStackReturnQuestionItem.style";
+import { style as hostStackReturnQuestionItemStyle } from "./HostStackReturnQuestionItem.style";
 
 const HostStackReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.HOST_STACK> = ({
   returnQuestion,
@@ -46,6 +46,8 @@ const HostStackReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.HOST_ST
 
   const stackAnimatedStyle = useAnimatedStyle(() => ({ height: withTiming(stackHeight.value) }), [stackHeight]);
 
+  const style = useMemo(() => hostStackReturnQuestionItemStyle(), []);
+
   return (
     <Animated.View style={stackAnimatedStyle}>
       <View onLayout={handleOnLayout}>
@@ -56,7 +58,7 @@ const HostStackReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.HOST_ST
         )}
         {feedbackReturnQuestion && returnQuestionHasChildren(feedbackReturnQuestion) ? (
           <>
-            <Text color={COLOR.TEXT_MEDIUM} level={3}>
+            <Text level={3} style={style.text}>
               {feedbackText}
             </Text>
             {feedbackReturnQuestion.children?.map((childReturnQuestion) => (

package/src/infrastructure/ui/components/organisms/returnQuestions/components/modalOptionReturnQuestionItems/ModalOptionReturnQuestionItems.style.ts

@@ -1,18 +1,21 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
-const { space2, space6 } = theme();
+const style = () => {
+  const { colorTextMedium, space2, space6 } = theme();
 
-const style = StyleSheet.create({
-  modalContent: {
-    paddingHorizontal: space6,
-  },
-  optionText: {
-    marginBottom: space6,
-  },
-  wrapper: {
-    marginBottom: space2,
-  },
-});
+  return StyleSheet.create({
+    modalContent: {
+      paddingHorizontal: space6,
+    },
+    optionText: {
+      color: colorTextMedium,
+      marginBottom: space6,
+    },
+    wrapper: {
+      marginBottom: space2,
+    },
+  });
+};
 
 export { style };

package/src/infrastructure/ui/components/organisms/returnQuestions/components/modalOptionReturnQuestionItems/ModalOptionReturnQuestionItems.tsx

@@ -1,13 +1,13 @@
-import React from "react";
+import React, { FC, useMemo } from "react";
 import { View } from "react-native";
-import { COLOR, Text } from "@lookiero/aurora";
+import { Text } from "@lookiero/aurora";
 import { useI18n } from "@lookiero/i18n-react";
 import { Modal } from "@lookiero/sty-psp-ui";
 import { ReturnQuestionProjection } from "../../../../../../../projection/returnQuestion/returnQuestion";
 import { returnQuestionHasChildren } from "../../../../../../../projection/returnQuestion/returnQuestion.typeguard";
 import { DOMAIN } from "../../../../../i18n/i18n";
 import ReturnQuestion from "../../ReturnQuestion";
-import { style } from "./ModalOptionReturnQuestionItems.style";
+import { style as modalOptionReturnQuestionItemsStyle } from "./ModalOptionReturnQuestionItems.style";
 
 interface ModalOptionReturnQuestionItemsProps {
   readonly portalHostName?: string;
@@ -17,19 +17,21 @@ interface ModalOptionReturnQuestionItemsProps {
   readonly onClose: () => void;
 }
 
-const ModalOptionReturnQuestionItems = ({
+const ModalOptionReturnQuestionItems: FC<ModalOptionReturnQuestionItemsProps> = ({
   portalHostName,
   returnQuestion,
   visible,
   onClose,
-}: ModalOptionReturnQuestionItemsProps) => {
+}) => {
   const { formatMessage } = useI18n({ domain: DOMAIN });
   const title = formatMessage({ id: returnQuestion.translationKey });
 
+  const style = useMemo(() => modalOptionReturnQuestionItemsStyle(), []);
+
   return (
     <Modal portalHostName={portalHostName} visible={visible} scroll showCloseButton onClose={onClose}>
       <View style={style.modalContent}>
-        <Text color={COLOR.TEXT_MEDIUM} level={2} style={style.optionText}>
+        <Text level={2} style={style.optionText}>
           {title}
         </Text>
         <>

package/src/infrastructure/ui/components/organisms/returnQuestions/components/optionReturnQuestionItem/OptionReturnQuestionItem.style.ts

@@ -1,18 +1,24 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
-const { colorBgPrimaryLight, colorBorderInteractive, space4, space6 } = theme();
-const containerUnderlayColor = colorBgPrimaryLight;
+const style = () => {
+  const { colorBgPrimaryLight, colorBorderInteractive, space4, space6 } = theme();
 
-const style = StyleSheet.create({
-  container: {
-    borderBottomColor: colorBorderInteractive,
-    borderBottomWidth: 1,
-    paddingVertical: space4,
-  },
-  text: {
-    lineHeight: space6,
-  },
-});
+  const styles = StyleSheet.create({
+    container: {
+      borderBottomColor: colorBorderInteractive,
+      borderBottomWidth: 1,
+      paddingVertical: space4,
+    },
+    text: {
+      lineHeight: space6,
+    },
+  });
 
-export { style, containerUnderlayColor };
+  return {
+    ...styles,
+    containerUnderlayColor: colorBgPrimaryLight,
+  };
+};
+
+export { style };

package/src/infrastructure/ui/components/organisms/returnQuestions/components/optionReturnQuestionItem/OptionReturnQuestionItem.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/prop-types */
-import React, { useCallback } from "react";
+import React, { useCallback, useMemo } from "react";
 import { TouchableHighlight, ViewStyle } from "react-native";
 import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
@@ -7,7 +7,7 @@ import { ReturnQuestionType } from "../../../../../../../projection/returnQuesti
 import { DOMAIN } from "../../../../../i18n/i18n";
 import { useReturnQuestionFeedbackForReturnQuestion } from "../../behaviors/useReturnQuestionFeedback";
 import { ReturnQuestionItem } from "../ReturnQuestionItem";
-import { containerUnderlayColor, style } from "./OptionReturnQuestionItem.style";
+import { style as optionReturnQuestionItemStyle } from "./OptionReturnQuestionItem.style";
 
 const OptionReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.OPTION> = ({
   returnQuestion,
@@ -22,12 +22,14 @@ const OptionReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.OPTION> =
     [onChange, returnQuestion.id, returnQuestionParent.id],
   );
 
+  const style = useMemo(() => optionReturnQuestionItemStyle(), []);
+
   return (
     <TouchableHighlight
       accessibilityLabel={testID}
       style={style.container}
       testID={testID}
-      underlayColor={containerUnderlayColor}
+      underlayColor={style.containerUnderlayColor}
       onPress={handleOnPress}
     >
       <Text level={3} style={style.text as ViewStyle}>

package/src/infrastructure/ui/components/organisms/returnQuestions/components/radioReturnQuestionItem/RadioReturnQuestionItem.style.ts

@@ -1,10 +1,22 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
-const { space2 } = theme();
+const style = () => {
+  const { colorText, space3, space4 } = theme();
 
-const style = StyleSheet.create({
-  wrapper: { marginBottom: space2 },
-});
+  return StyleSheet.create({
+    text: {
+      color: colorText,
+      flex: 1,
+      marginLeft: space4,
+    },
+    wrapper: {
+      alignItems: "center",
+      flex: 1,
+      flexDirection: "row",
+      marginVertical: space3,
+    },
+  });
+};
 
 export { style };

package/src/infrastructure/ui/components/organisms/returnQuestions/components/radioReturnQuestionItem/RadioReturnQuestionItem.tsx

@@ -1,7 +1,9 @@
 /* eslint-disable react/prop-types */
-import React, { useCallback, useEffect, useState } from "react";
-import { View, Option, OPTION_VARIANT, SIZE } from "@lookiero/aurora";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { Pressable } from "react-native";
+import { Text } from "@lookiero/aurora";
 import { useI18n } from "@lookiero/i18n-react";
+import { Checkbox } from "@lookiero/sty-psp-ui";
 import { ReturnQuestionType } from "../../../../../../../projection/returnQuestion/returnQuestion.constants";
 import { DOMAIN } from "../../../../../i18n/i18n";
 import {
@@ -14,7 +16,7 @@ import {
 } from "../../util/returnQuestionFeedback";
 import { ReturnQuestionItem } from "../ReturnQuestionItem";
 import { ModalOptionReturnQuestionItems } from "../modalOptionReturnQuestionItems/ModalOptionReturnQuestionItems";
-import { style } from "./RadioReturnQuestionItem.style";
+import { style as radioReturnQuestionItemStyle } from "./RadioReturnQuestionItem.style";
 
 const RadioReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.OPTION> = ({
   returnQuestion,
@@ -22,6 +24,8 @@ const RadioReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.OPTION> = (
   testID,
   portalHostName,
 }) => {
+  const style = useMemo(() => radioReturnQuestionItemStyle(), []);
+
   const { formatMessage } = useI18n({ domain: DOMAIN });
   const [modalVisible, setModalVisible] = useState(false);
   const {
@@ -72,19 +76,25 @@ const RadioReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.OPTION> = (
    * This logic is for closing the Modal when its children has been answered.
    */
 
+  const checked = returnQuestion.id === feedbackId;
+
   return (
     <>
-      <View style={style.wrapper} testID={testID}>
-        <Option
-          checked={returnQuestion.id === feedbackId}
-          flex={SIZE.XS}
-          name={returnQuestion.id}
-          title={inputValue ? `${optionText} / ${inputValue}` : `${optionText}`}
-          value={returnQuestion.id}
-          variant={OPTION_VARIANT.BUTTON}
-          onChange={handleOnPress}
-        />
-      </View>
+      <Pressable
+        accessibilityLabel="radio-return-question-item"
+        accessibilityState={{ checked }}
+        style={style.wrapper}
+        testID={testID}
+        accessible
+        onPress={handleOnPress}
+      >
+        <Checkbox checked={checked} />
+
+        <Text level={3} style={style.text}>
+          {inputValue ? `${optionText} / ${inputValue}` : `${optionText}`}
+        </Text>
+      </Pressable>
+
       {hasChildren ? (
         <ModalOptionReturnQuestionItems
           portalHostName={portalHostName}

package/src/infrastructure/ui/components/organisms/returnQuestions/components/returnQuestionFeedbackItem/ReturnQuestionFeedbackItem.style.ts

@@ -1,16 +1,18 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
-const { colorTextMedium, space1, space4 } = theme();
+const style = () => {
+  const { colorTextMedium, space1, space4 } = theme();
 
-const style = StyleSheet.create({
-  container: {
-    marginBottom: space4,
-  },
-  title: {
-    color: colorTextMedium,
-    marginBottom: space1,
-  },
-});
+  return StyleSheet.create({
+    container: {
+      marginBottom: space4,
+    },
+    title: {
+      color: colorTextMedium,
+      marginBottom: space1,
+    },
+  });
+};
 
 export { style };