@lookiero/checkout 11.1.0 → 11.2.0

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/hostSelectCheckoutQuestionItem/HostSelectCheckoutQuestionItem.tsx

@@ -1,10 +1,10 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { View } from "react-native";
 import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { DOMAIN } from "../../../../../i18n/i18n";
 import { CheckoutQuestionItem, CheckoutQuestionItemProps } from "../CheckoutQuestionItem";
-import { style } from "./HostSelectCheckoutQuestionItem.style";
+import { style as hostSelectCheckoutQuestionItemStyle } from "./HostSelectCheckoutQuestionItem.style";
 
 const HostSelectCheckoutQuestionItem: CheckoutQuestionItem = ({
   checkoutQuestion,
@@ -12,6 +12,8 @@ const HostSelectCheckoutQuestionItem: CheckoutQuestionItem = ({
 }: CheckoutQuestionItemProps) => {
   const titleText = useI18nMessage({ domain: DOMAIN, id: checkoutQuestion.name });
 
+  const style = useMemo(() => hostSelectCheckoutQuestionItemStyle(), []);
+
   return (
     <>
       <Text level={3} style={style.title}>

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/iconCheckoutQuestionItem/IconCheckoutQuestionItem.style.ts

@@ -1,9 +1,19 @@
 import { StyleSheet } from "react-native";
+import { theme } from "@lookiero/sty-psp-ui";
 
-const style = StyleSheet.create({
-  icon: {
-    marginHorizontal: 12,
-  },
-});
+const style = () => {
+  const { colorBgPrimaryMediumLight } = theme();
+
+  const styles = StyleSheet.create({
+    icon: {
+      marginHorizontal: 12,
+    },
+  });
+
+  return {
+    ...styles,
+    colorBgPrimaryMediumLight,
+  };
+};
 
 export { style };

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/iconCheckoutQuestionItem/IconCheckoutQuestionItem.tsx

@@ -1,17 +1,14 @@
-import React, { FC, useCallback } from "react";
+import React, { FC, useCallback, useMemo } from "react";
 import { Pressable } from "react-native";
 import { SvgProps } from "react-native-svg";
 import invariant from "tiny-invariant";
-import { theme } from "@lookiero/sty-psp-ui";
 import { useCheckoutQuestionFeedbackForId } from "../../behaviors/useCheckoutQuestionFeedback";
 import { CheckoutQuestionItem, CheckoutQuestionItemProps } from "../CheckoutQuestionItem";
-import { style } from "./IconCheckoutQuestionItem.style";
+import { style as iconCheckoutQuestionItemStyle } from "./IconCheckoutQuestionItem.style";
 import { Happy } from "./icons/Happy";
 import { Normal } from "./icons/Normal";
 import { Sad } from "./icons/Sad";
 
-const { colorBgPrimaryMediumLight } = theme();
-
 type IconName = "checkout_question.icon.bad" | "checkout_question.icon.regular" | "checkout_question.icon.good";
 
 const ICON: Record<IconName, FC<SvgProps>> = {
@@ -30,6 +27,8 @@ const IconCheckoutQuestionItem: CheckoutQuestionItem = ({
 }: CheckoutQuestionItemProps) => {
   const Icon = ICON[checkoutQuestion.name as IconName];
 
+  const style = useMemo(() => iconCheckoutQuestionItemStyle(), []);
+
   const { feedback, onChange } = useCheckoutQuestionFeedbackForId({ id: checkoutQuestionParentId });
   const isSelected = feedback === checkoutQuestion.id;
 
@@ -43,7 +42,7 @@ const IconCheckoutQuestionItem: CheckoutQuestionItem = ({
   return (
     <Pressable accessibilityLabel={testID} testID={testID} onPress={handleOnPress}>
       <Icon
-        fill={isSelected ? colorBgPrimaryMediumLight : "none"}
+        fill={isSelected ? style.colorBgPrimaryMediumLight : "none"}
         strokeWidth={isSelected ? 2 : 1}
         style={style.icon}
       />

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,12 @@
 /* eslint-disable react/prop-types */
-import React from "react";
+import React, { useMemo } from "react";
 import { Text, View } 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 +15,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

@@ -15,7 +15,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 +29,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 +67,7 @@ const HostSelectReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.HOST_S
         accessibilityLabel={testID}
         style={style.container}
         testID={testID}
-        underlayColor={containerUnderlayColor}
+        underlayColor={style.containerUnderlayColor}
         accessible
         onPress={handleOnPress}
       >

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

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

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

@@ -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}>

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

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

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { FC, useMemo } from "react";
 import { View } from "react-native";
 import { COLOR, Text } from "@lookiero/aurora";
 import { useI18n } from "@lookiero/i18n-react";
@@ -7,7 +7,7 @@ import { ReturnQuestionProjection } from "../../../../../../../projection/return
 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,15 +17,17 @@ 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}>

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,14 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
-const { space2 } = theme();
+const style = () => {
+  const { space2 } = theme();
 
-const style = StyleSheet.create({
-  wrapper: { marginBottom: space2 },
-});
+  return StyleSheet.create({
+    wrapper: {
+      marginBottom: space2,
+    },
+  });
+};
 
 export { style };

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

@@ -1,5 +1,5 @@
 /* eslint-disable react/prop-types */
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { View, Option, OPTION_VARIANT, SIZE } from "@lookiero/aurora";
 import { useI18n } from "@lookiero/i18n-react";
 import { ReturnQuestionType } from "../../../../../../../projection/returnQuestion/returnQuestion.constants";
@@ -14,7 +14,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 +22,8 @@ const RadioReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.OPTION> = (
   testID,
   portalHostName,
 }) => {
+  const style = useMemo(() => radioReturnQuestionItemStyle(), []);
+
   const { formatMessage } = useI18n({ domain: DOMAIN });
   const [modalVisible, setModalVisible] = useState(false);
   const {

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 };

package/src/infrastructure/ui/components/organisms/returnQuestions/components/returnQuestionFeedbackItem/ReturnQuestionFeedbackItem.tsx

@@ -1,5 +1,5 @@
 /* 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";
@@ -8,7 +8,7 @@ import { DOMAIN, I18nMessages } from "../../../../../i18n/i18n";
 import { useReturnQuestionFeedback } from "../../behaviors/useReturnQuestionFeedback";
 import { feedbackForReturnQuestion } from "../../util/returnQuestionFeedback";
 import { ReturnQuestionItem } from "../ReturnQuestionItem";
-import { style } from "./ReturnQuestionFeedbackItem.style";
+import { style as returnQuestionFeedbackItemStyle } from "./ReturnQuestionFeedbackItem.style";
 
 const ReturnQuestionFeedbackItem: ReturnQuestionItem<ReturnQuestionType.HOST_DEFAULT> = ({ returnQuestion }) => {
   const titleText = useI18nMessage({ domain: DOMAIN, id: returnQuestion.translationKey });
@@ -25,6 +25,8 @@ const ReturnQuestionFeedbackItem: ReturnQuestionItem<ReturnQuestionType.HOST_DEF
     " / ",
   );
 
+  const style = useMemo(() => returnQuestionFeedbackItemStyle(), []);
+
   return (
     <View style={style.container}>
       <Text level={2} style={style.title} detailBold>