@lookiero/checkout 11.1.0 → 11.3.0

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

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

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

@@ -1,5 +1,4 @@
 import { ReturnQuestionType } from "../../../../../../../projection/returnQuestion/returnQuestion.constants";
 import { ReturnQuestionItem } from "../ReturnQuestionItem";
-import { style } from "./HostRadioGroupReturnQuestionItem.style";
 declare const HostRadioGroupReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.HOST_SELECT>;
-export { HostRadioGroupReturnQuestionItem, style };
+export { HostRadioGroupReturnQuestionItem };

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/hostRadioGroupReturnQuestionItem/HostRadioGroupReturnQuestionItem.js

@@ -4,13 +4,14 @@ import { View } from "react-native";
 import { Text } from "@lookiero/aurora";
 import { useI18n } from "@lookiero/i18n-react";
 import { DOMAIN } from "../../../../../i18n/i18n";
-import { style } from "./HostRadioGroupReturnQuestionItem.style";
+import { style as hostRadioGroupReturnQuestionItemStyle } from "./HostRadioGroupReturnQuestionItem.style";
 const HostRadioGroupReturnQuestionItem = ({ returnQuestion, children, testID, }) => {
     const { formatMessage } = useI18n({ domain: DOMAIN });
     const placeholderText = useMemo(() => (returnQuestion.metadata.placeholder ? formatMessage({ id: returnQuestion.metadata.placeholder }) : ""), [formatMessage, returnQuestion.metadata.placeholder]);
+    const style = useMemo(() => hostRadioGroupReturnQuestionItemStyle(), []);
     return (React.createElement(React.Fragment, null,
         React.createElement(View, { style: style.wrapper, testID: testID },
             React.createElement(Text, { level: 3, style: style.title, action: true }, placeholderText),
             children)));
 };
-export { HostRadioGroupReturnQuestionItem, style };
+export { HostRadioGroupReturnQuestionItem };

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

@@ -1,4 +1,4 @@
-declare const style: {
+declare const style: () => {
     title: {
         marginBottom: number;
     };

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

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

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/hostSelectReturnQuestionItem/HostSelectReturnQuestionItem.js

@@ -1,16 +1,16 @@
 /* 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 { DOMAIN } from "../../../../../i18n/i18n";
 import { useReturnQuestionFeedback, useReturnQuestionFeedbackForReturnQuestion, } from "../../behaviors/useReturnQuestionFeedback";
 import { deepestReturnQuestionWithFeedbackForReturnQuestion, feedbackForReturnQuestion, } from "../../util/returnQuestionFeedback";
-import { style, containerUnderlayColor } from "./HostSelectReturnQuestionItem.style";
+import { style as hostSelectReturnQuestionItemStyle } from "./HostSelectReturnQuestionItem.style";
 const HostSelectReturnQuestionItem = ({ returnQuestion, children, portalHostName, testID, }) => {
     const { formatMessage } = useI18n({ domain: DOMAIN });
     const placeholderText = useMemo(() => (returnQuestion.metadata.placeholder ? formatMessage({ id: returnQuestion.metadata.placeholder }) : ""), [formatMessage, returnQuestion.metadata.placeholder]);
+    const style = useMemo(() => hostSelectReturnQuestionItemStyle(), []);
     const [modalVisible, setModalVisible] = useState(false);
     const handleOnPress = useCallback(() => setModalVisible(true), []);
     const handleOnModalClose = useCallback(() => setModalVisible(false), []);
@@ -31,10 +31,10 @@ const HostSelectReturnQuestionItem = ({ returnQuestion, children, portalHostName
         // deepestReturnQuestionWithFeedback needs to be as a dependency in order to be re-evaluated whenever it changes
     }, [handleOnModalClose, deepestReturnQuestionWithFeedback, isLeaf]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(TouchableHighlight, { accessibilityLabel: testID, style: style.container, testID: testID, underlayColor: containerUnderlayColor, accessible: true, onPress: handleOnPress },
+        React.createElement(TouchableHighlight, { accessibilityLabel: testID, style: style.container, testID: testID, underlayColor: style.containerUnderlayColor, accessible: true, onPress: handleOnPress },
             React.createElement(View, { pointerEvents: "none" },
                 React.createElement(InputField, { icon: "arrow_down", label: placeholderText, value: inputValue, input: ({ onBlur, onFocus, style }) => (React.createElement(TextInput, { editable: false, placeholder: placeholderText, style: style, value: inputValue, onBlur: onBlur, onChange: () => void 0, onFocus: onFocus })) }))),
-        React.createElement(Modal, { portalHostName: portalHostName, style: deepestReturnQuestionWithFeedback && { header: style.header }, visible: modalVisible, header: deepestReturnQuestionWithFeedback && (React.createElement(ButtonIcon, { name: "arrow_left", style: style.backButton, testID: "modal-back-button", onPress: handleOnBackButtonPress })), scroll: true, showCloseButton: true, onClose: handleOnModalClose },
+        React.createElement(Modal, { portalHostName: portalHostName, style: deepestReturnQuestionWithFeedback && { header: style.header }, visible: modalVisible, header: deepestReturnQuestionWithFeedback && (React.createElement(ButtonIcon, { name: "arrow_left", style: { button: style.backButton }, testID: "modal-back-button", onPress: handleOnBackButtonPress })), scroll: true, showCloseButton: true, onClose: handleOnModalClose },
             React.createElement(View, { style: style.modalContent }, children))));
 };
 export { HostSelectReturnQuestionItem };

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

@@ -1,5 +1,5 @@
-declare const containerUnderlayColor: string;
-declare const style: {
+declare const style: () => {
+    containerUnderlayColor: string;
     backButton: {
         padding: number;
     };
@@ -14,4 +14,4 @@ declare const style: {
         paddingHorizontal: number;
     };
 };
-export { style, containerUnderlayColor };
+export { style };

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

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

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

@@ -2,13 +2,13 @@
 import React, { useCallback, useMemo } from "react";
 import { 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 { returnQuestionHasChildren } from "../../../../../../../../projection/returnQuestion/returnQuestion.typeguard";
 import { DOMAIN } from "../../../../../../i18n/i18n";
 import ReturnQuestion from "../../../ReturnQuestion";
 import { useReturnQuestionFeedbackForReturnQuestion } from "../../../behaviors/useReturnQuestionFeedback";
-import { style } from "./HostStackReturnQuestionItem.style";
+import { style as hostStackReturnQuestionItemStyle } from "./HostStackReturnQuestionItem.style";
 const HostStackReturnQuestionItem = ({ returnQuestion, children, portalHostName, }) => {
     const { formatMessage } = useI18n({ domain: DOMAIN });
     const { feedback } = useReturnQuestionFeedbackForReturnQuestion({ returnQuestion });
@@ -22,11 +22,12 @@ const HostStackReturnQuestionItem = ({ returnQuestion, children, portalHostName,
         stackHeight.value = height;
     }, [stackHeight]);
     const stackAnimatedStyle = useAnimatedStyle(() => ({ height: withTiming(stackHeight.value) }), [stackHeight]);
+    const style = useMemo(() => hostStackReturnQuestionItemStyle(), []);
     return (React.createElement(Animated.View, { style: stackAnimatedStyle },
         React.createElement(View, { onLayout: handleOnLayout },
             titleText && (React.createElement(Text, { level: 3, style: style.title, heading: true }, titleText)),
             feedbackReturnQuestion && returnQuestionHasChildren(feedbackReturnQuestion) ? (React.createElement(React.Fragment, null,
-                React.createElement(Text, { color: COLOR.TEXT_MEDIUM, level: 3 }, feedbackText),
+                React.createElement(Text, { level: 3, style: style.text }, feedbackText),
                 feedbackReturnQuestion.children?.map((childReturnQuestion) => (React.createElement(ReturnQuestion, { key: childReturnQuestion.id, portalHostName: portalHostName, returnQuestion: childReturnQuestion, returnQuestionParent: feedbackReturnQuestion }))))) : (children))));
 };
 export { HostStackReturnQuestionItem };

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

@@ -1,4 +1,7 @@
-declare const style: {
+declare const style: () => {
+    text: {
+        color: string;
+    };
     title: {
         marginBottom: number;
     };

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

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

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

@@ -1,4 +1,4 @@
-import React from "react";
+import { FC } from "react";
 import { ReturnQuestionProjection } from "../../../../../../../projection/returnQuestion/returnQuestion";
 interface ModalOptionReturnQuestionItemsProps {
     readonly portalHostName?: string;
@@ -7,5 +7,5 @@ interface ModalOptionReturnQuestionItemsProps {
     readonly visible: boolean;
     readonly onClose: () => void;
 }
-declare const ModalOptionReturnQuestionItems: ({ portalHostName, returnQuestion, visible, onClose, }: ModalOptionReturnQuestionItemsProps) => React.JSX.Element;
+declare const ModalOptionReturnQuestionItems: FC<ModalOptionReturnQuestionItemsProps>;
 export { ModalOptionReturnQuestionItems };

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/modalOptionReturnQuestionItems/ModalOptionReturnQuestionItems.js

@@ -1,18 +1,19 @@
-import React from "react";
+import React, { 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 { 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";
 const ModalOptionReturnQuestionItems = ({ portalHostName, returnQuestion, visible, onClose, }) => {
     const { formatMessage } = useI18n({ domain: DOMAIN });
     const title = formatMessage({ id: returnQuestion.translationKey });
+    const style = useMemo(() => modalOptionReturnQuestionItemsStyle(), []);
     return (React.createElement(Modal, { portalHostName: portalHostName, visible: visible, scroll: true, showCloseButton: true, onClose: onClose },
         React.createElement(View, { style: style.modalContent },
-            React.createElement(Text, { color: COLOR.TEXT_MEDIUM, level: 2, style: style.optionText }, title),
+            React.createElement(Text, { level: 2, style: style.optionText }, title),
             React.createElement(React.Fragment, null, returnQuestionHasChildren(returnQuestion) &&
                 returnQuestion.children?.map((childReturnQuestion) => (React.createElement(ReturnQuestion, { key: childReturnQuestion.id, portalHostName: "", returnQuestion: childReturnQuestion, returnQuestionParent: returnQuestion })))))));
 };

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

@@ -1,8 +1,9 @@
-declare const style: {
+declare const style: () => {
     modalContent: {
         paddingHorizontal: number;
     };
     optionText: {
+        color: string;
         marginBottom: number;
     };
     wrapper: {

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

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

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/optionReturnQuestionItem/OptionReturnQuestionItem.js

@@ -1,16 +1,17 @@
 /* eslint-disable react/prop-types */
-import React, { useCallback } from "react";
+import React, { useCallback, useMemo } from "react";
 import { TouchableHighlight } from "react-native";
 import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { DOMAIN } from "../../../../../i18n/i18n";
 import { useReturnQuestionFeedbackForReturnQuestion } from "../../behaviors/useReturnQuestionFeedback";
-import { containerUnderlayColor, style } from "./OptionReturnQuestionItem.style";
+import { style as optionReturnQuestionItemStyle } from "./OptionReturnQuestionItem.style";
 const OptionReturnQuestionItem = ({ returnQuestion, returnQuestionParent, testID, }) => {
     const { onChange } = useReturnQuestionFeedbackForReturnQuestion({ returnQuestion: returnQuestionParent });
     const optionText = useI18nMessage({ domain: DOMAIN, id: returnQuestion.translationKey });
     const handleOnPress = useCallback(() => onChange({ returnQuestionId: returnQuestionParent.id, returnQuestionFeedback: returnQuestion.id }), [onChange, returnQuestion.id, returnQuestionParent.id]);
-    return (React.createElement(TouchableHighlight, { accessibilityLabel: testID, style: style.container, testID: testID, underlayColor: containerUnderlayColor, onPress: handleOnPress },
+    const style = useMemo(() => optionReturnQuestionItemStyle(), []);
+    return (React.createElement(TouchableHighlight, { accessibilityLabel: testID, style: style.container, testID: testID, underlayColor: style.containerUnderlayColor, onPress: handleOnPress },
         React.createElement(Text, { level: 3, style: style.text }, optionText)));
 };
 export { OptionReturnQuestionItem };

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

@@ -1,5 +1,5 @@
-declare const containerUnderlayColor: string;
-declare const style: {
+declare const style: () => {
+    containerUnderlayColor: string;
     container: {
         borderBottomColor: string;
         borderBottomWidth: number;
@@ -9,4 +9,4 @@ declare const style: {
         lineHeight: number;
     };
 };
-export { style, containerUnderlayColor };
+export { style };

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

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

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/radioReturnQuestionItem/RadioReturnQuestionItem.js

@@ -1,13 +1,16 @@
 /* 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 { DOMAIN } from "../../../../../i18n/i18n";
 import { useReturnQuestionFeedback, useReturnQuestionFeedbackForReturnQuestion, } from "../../behaviors/useReturnQuestionFeedback";
 import { deepestReturnQuestionWithFeedbackForReturnQuestion, feedbackForReturnQuestion, } from "../../util/returnQuestionFeedback";
 import { ModalOptionReturnQuestionItems } from "../modalOptionReturnQuestionItems/ModalOptionReturnQuestionItems";
-import { style } from "./RadioReturnQuestionItem.style";
+import { style as radioReturnQuestionItemStyle } from "./RadioReturnQuestionItem.style";
 const RadioReturnQuestionItem = ({ returnQuestion, returnQuestionParent, testID, portalHostName, }) => {
+    const style = useMemo(() => radioReturnQuestionItemStyle(), []);
     const { formatMessage } = useI18n({ domain: DOMAIN });
     const [modalVisible, setModalVisible] = useState(false);
     const { feedback: feedbackId, onChange, clear, } = useReturnQuestionFeedbackForReturnQuestion({ returnQuestion: returnQuestionParent });
@@ -43,9 +46,11 @@ const RadioReturnQuestionItem = ({ returnQuestion, returnQuestionParent, testID,
     /**
      * This logic is for closing the Modal when its children has been answered.
      */
+    const checked = returnQuestion.id === feedbackId;
     return (React.createElement(React.Fragment, null,
-        React.createElement(View, { style: style.wrapper, testID: testID },
-            React.createElement(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 })),
+        React.createElement(Pressable, { accessibilityLabel: "radio-return-question-item", accessibilityState: { checked }, style: style.wrapper, testID: testID, accessible: true, onPress: handleOnPress },
+            React.createElement(Checkbox, { checked: checked }),
+            React.createElement(Text, { level: 3, style: style.text }, inputValue ? `${optionText} / ${inputValue}` : `${optionText}`)),
         hasChildren ? (React.createElement(ModalOptionReturnQuestionItems, { portalHostName: portalHostName, returnQuestion: returnQuestion, returnQuestionParent: returnQuestion, visible: modalVisible, onClose: handleOnModalClose })) : null));
 };
 export { RadioReturnQuestionItem };

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

@@ -1,6 +1,14 @@
-declare const style: {
+declare const style: () => {
+    text: {
+        color: string;
+        flex: number;
+        marginLeft: number;
+    };
     wrapper: {
-        marginBottom: number;
+        alignItems: "center";
+        flex: number;
+        flexDirection: "row";
+        marginVertical: number;
     };
 };
 export { style };

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

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

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/returnQuestionFeedbackItem/ReturnQuestionFeedbackItem.js

@@ -1,12 +1,12 @@
 /* eslint-disable react/prop-types */
-import React, { useCallback } from "react";
+import React, { useCallback, useMemo } from "react";
 import { View } from "react-native";
 import { Text } from "@lookiero/aurora";
 import { useI18nMessage, useI18n } from "@lookiero/i18n-react";
 import { DOMAIN, I18nMessages } from "../../../../../i18n/i18n";
 import { useReturnQuestionFeedback } from "../../behaviors/useReturnQuestionFeedback";
 import { feedbackForReturnQuestion } from "../../util/returnQuestionFeedback";
-import { style } from "./ReturnQuestionFeedbackItem.style";
+import { style as returnQuestionFeedbackItemStyle } from "./ReturnQuestionFeedbackItem.style";
 const ReturnQuestionFeedbackItem = ({ returnQuestion }) => {
     const titleText = useI18nMessage({ domain: DOMAIN, id: returnQuestion.translationKey });
     const unansweredText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.FEEDBACK_UNANSWERED });
@@ -14,6 +14,7 @@ const ReturnQuestionFeedbackItem = ({ returnQuestion }) => {
     const { formatMessage } = useI18n({ domain: DOMAIN });
     const translate = useCallback((returnQuestionName) => formatMessage({ id: returnQuestionName, defaultMessage: returnQuestionName }), [formatMessage]);
     const feedback = feedbackForReturnQuestion({ feedback: returnQuestionFeedback, returnQuestion, translate }).join(" / ");
+    const style = useMemo(() => returnQuestionFeedbackItemStyle(), []);
     return (React.createElement(View, { style: style.container },
         React.createElement(Text, { level: 2, style: style.title, detailBold: true }, titleText),
         React.createElement(Text, { level: 1, detail: true }, feedback || unansweredText)));

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

@@ -1,4 +1,4 @@
-declare const style: {
+declare const style: () => {
     container: {
         marginBottom: number;
     };

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

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

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem.js

@@ -1,16 +1,17 @@
 /* eslint-disable react/prop-types */
 import React, { useCallback, useMemo } from "react";
-import { View } from "@lookiero/aurora";
+import { View } from "react-native";
 import { useI18n } from "@lookiero/i18n-react";
 import { InputField, TextInput } from "@lookiero/sty-psp-ui";
 import { DOMAIN } from "../../../../../i18n/i18n";
 import { useReturnQuestionFeedbackForReturnQuestion } from "../../behaviors/useReturnQuestionFeedback";
-import { style } from "./TextareaReturnQuestionItem.style";
+import { style as textareaReturnQuestionItemStyle } from "./TextareaReturnQuestionItem.style";
 const TextareaReturnQuestionItem = ({ returnQuestion, returnQuestionParent, testID, }) => {
     const { formatMessage } = useI18n({ domain: DOMAIN });
     const placeholderText = useMemo(() => (returnQuestion.metadata.placeholder ? formatMessage({ id: returnQuestion.metadata.placeholder }) : ""), [formatMessage, returnQuestion.metadata.placeholder]);
     const { feedback, onChange } = useReturnQuestionFeedbackForReturnQuestion({ returnQuestion: returnQuestionParent });
     const handleOnChange = useCallback((value) => onChange({ returnQuestionId: returnQuestionParent.id, returnQuestionFeedback: value }), [onChange, returnQuestionParent.id]);
+    const style = useMemo(() => textareaReturnQuestionItemStyle(), []);
     return (React.createElement(View, { style: style.wrapper, testID: "textarea-return-question-item" },
         React.createElement(InputField, { label: placeholderText, value: feedback, input: ({ onBlur, onFocus, style }) => (React.createElement(TextInput, { placeholder: placeholderText, style: style, testID: testID, textAlignVertical: "top", value: feedback, multiline: true, onBlur: onBlur, onChange: handleOnChange, onFocus: onFocus })), style: {
                 inputField: style.inputField,

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem.style.d.ts

@@ -1,4 +1,4 @@
-declare const style: {
+declare const style: () => {
     input: {
         paddingTop: number;
     };