@lookiero/checkout 11.1.0 → 11.2.0

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

@@ -7,10 +7,11 @@ import { 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,7 +32,7 @@ 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 },

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

@@ -8,7 +8,7 @@ import { returnQuestionHasChildren } from "../../../../../../../../projection/re
 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,6 +22,7 @@ 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)),

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/hostStackReturnQuestionItem/modal/HostStackReturnQuestionItem.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/hostStackReturnQuestionItem/modal/HostStackReturnQuestionItem.style.js

@@ -1,9 +1,11 @@
 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 { space1 } = theme();
+    return StyleSheet.create({
+        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,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { View } from "react-native";
 import { COLOR, Text } from "@lookiero/aurora";
 import { useI18n } from "@lookiero/i18n-react";
@@ -6,10 +6,11 @@ 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),

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

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

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

@@ -1,15 +1,17 @@
 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 { space2, space6 } = theme();
+    return StyleSheet.create({
+        modalContent: {
+            paddingHorizontal: space6,
+        },
+        optionText: {
+            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,14 @@
 /* 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 { 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 });

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

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

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

@@ -1,7 +1,11 @@
 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 { space2 } = theme();
+    return StyleSheet.create({
+        wrapper: {
+            marginBottom: space2,
+        },
+    });
+};
 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

@@ -5,12 +5,13 @@ 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;
     };

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

@@ -1,32 +1,34 @@
 import { Platform, StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-const { colorBgBase, fontInputPaddingLeft, space2, space4, space6 } = 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,
-    },
-    wrapper: {
-        backgroundColor: colorBgBase,
-        padding: space6,
-        paddingTop: 0,
-    },
-});
+const style = () => {
+    const { colorBgBase, fontInputPaddingLeft, space2, space4, space6 } = 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,
+        },
+        wrapper: {
+            backgroundColor: colorBgBase,
+            padding: space6,
+            paddingTop: 0,
+        },
+    });
+};
 export { style };

package/dist/src/infrastructure/ui/components/templates/header/Header.js

@@ -1,5 +1,8 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { View } from "react-native";
-import { style } from "./Header.style";
-const Header = ({ children, style: customStyle, ...props }) => (React.createElement(View, { ...props, style: [style.header, customStyle] }, children));
+import { style as headerStyle } from "./Header.style";
+const Header = ({ children, style: customStyle, ...props }) => {
+    const style = useMemo(() => headerStyle(), []);
+    return (React.createElement(View, { ...props, style: [style.header, customStyle] }, children));
+};
 export { Header };

package/dist/src/infrastructure/ui/components/templates/header/Header.style.d.ts

@@ -1,5 +1,5 @@
 declare const HEADER_HEIGHT = 48;
-declare const style: {
+declare const style: () => {
     header: {
         alignItems: "center";
         backgroundColor: string;

package/dist/src/infrastructure/ui/components/templates/header/Header.style.js

@@ -1,19 +1,21 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-const { colorBgBase, space2 } = theme();
 const HEADER_HEIGHT = 48;
-const style = StyleSheet.create({
-    header: {
-        alignItems: "center",
-        backgroundColor: colorBgBase,
-        flexDirection: "row",
-        flexGrow: 0,
-        flexWrap: "nowrap",
-        height: HEADER_HEIGHT,
-        justifyContent: "space-between",
-        overflow: "visible",
-        paddingHorizontal: space2,
-        width: "100%",
-    },
-});
+const style = () => {
+    const { colorBgBase, space2 } = theme();
+    return StyleSheet.create({
+        header: {
+            alignItems: "center",
+            backgroundColor: colorBgBase,
+            flexDirection: "row",
+            flexGrow: 0,
+            flexWrap: "nowrap",
+            height: HEADER_HEIGHT,
+            justifyContent: "space-between",
+            overflow: "visible",
+            paddingHorizontal: space2,
+            width: "100%",
+        },
+    });
+};
 export { style, HEADER_HEIGHT };

package/dist/src/infrastructure/ui/components/templates/header/buttonIconPlaceholder/ButtonIconPlaceholder.js

@@ -1,5 +1,8 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { View } from "react-native";
-import { style } from "./ButtonIconPlaceholder.style";
-const ButtonIconPlaceholder = () => React.createElement(View, { style: style.buttonIconPlaceholder });
+import { style as buttonIconPlaceholderStyle } from "./ButtonIconPlaceholder.style";
+const ButtonIconPlaceholder = () => {
+    const style = useMemo(() => buttonIconPlaceholderStyle(), []);
+    return React.createElement(View, { style: style.buttonIconPlaceholder });
+};
 export { ButtonIconPlaceholder };

package/dist/src/infrastructure/ui/components/templates/header/buttonIconPlaceholder/ButtonIconPlaceholder.style.d.ts

@@ -1,4 +1,4 @@
-declare const style: {
+declare const style: () => {
     buttonIconPlaceholder: {
         flexGrow: number;
         height: number;

package/dist/src/infrastructure/ui/components/templates/header/buttonIconPlaceholder/ButtonIconPlaceholder.style.js

@@ -1,11 +1,13 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-const { space10 } = theme();
-const style = StyleSheet.create({
-    buttonIconPlaceholder: {
-        flexGrow: 0,
-        height: space10,
-        width: space10,
-    },
-});
+const style = () => {
+    const { space10 } = theme();
+    return StyleSheet.create({
+        buttonIconPlaceholder: {
+            flexGrow: 0,
+            height: space10,
+            width: space10,
+        },
+    });
+};
 export { style };

package/dist/src/infrastructure/ui/components/templates/header/checkoutHeader/CheckoutHeader.js

@@ -1,12 +1,13 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { ButtonIcon, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { Header } from "../Header";
 import { ButtonIconPlaceholder } from "../buttonIconPlaceholder/ButtonIconPlaceholder";
-import { style } from "./CheckoutHeader.style";
+import { style as checkoutHeader } from "./CheckoutHeader.style";
 const CheckoutHeader = ({ onBack }) => {
     const title = useI18nMessage({ domain: DOMAIN, id: I18nMessages.HEADER_COMPLETE_CHECKOUT_TITLE });
+    const style = useMemo(() => checkoutHeader(), []);
     return (React.createElement(Header, { testID: "checkout-header" },
         React.createElement(ButtonIcon, { name: "arrow_left", style: style.button, testID: "arrow-left-button-icon", onPress: onBack }),
         React.createElement(Text, { level: 3, action: true }, title),

package/dist/src/infrastructure/ui/components/templates/header/checkoutHeader/CheckoutHeader.style.d.ts

@@ -1,4 +1,4 @@
-declare const style: {
+declare const style: () => {
     button: {
         alignSelf: "auto";
         height: number;