@lookiero/checkout 11.1.0 → 11.3.0

package/dist/src/infrastructure/ui/views/feedback/Feedback.style.js

@@ -1,14 +1,16 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-const { space3, space6, space8 } = theme();
-const style = StyleSheet.create({
-    container: {
-        justifyContent: "flex-start",
-        paddingHorizontal: space6,
-        paddingVertical: space8,
-    },
-    containerDesktop: {
-        paddingHorizontal: space3,
-    },
-});
+const style = () => {
+    const { space3, space6, space8 } = theme();
+    return StyleSheet.create({
+        container: {
+            justifyContent: "flex-start",
+            paddingHorizontal: space6,
+            paddingVertical: space8,
+        },
+        containerDesktop: {
+            paddingHorizontal: space3,
+        },
+    });
+};
 export { style };

package/dist/src/infrastructure/ui/views/item/Item.js

@@ -22,14 +22,15 @@ import { ItemDetailHeader } from "../../components/templates/header/itemDetailHe
 import { ItemHeader } from "../../components/templates/header/itemHeader/ItemHeader";
 import { useStaticInfo } from "../../hooks/useStaticInfo";
 import { Routes } from "../../routing/routes";
-import { style } from "./Item.style";
+import { style as itemStyle } from "./Item.style";
 import { ItemWithCustomerDecission, } from "./views/itemWithCustomerDecission/ItemWithCustomerDecission";
 import { ItemWithoutCustomerDecission, } from "./views/itemWithoutCustomerDecission/ItemWithoutCustomerDecission";
 const Item = ({ layout: Layout }) => {
     const logger = useLogger();
-    const screenSize = useScreenSize();
     const navigate = useNavigate();
     const { customer: { customerId, country, segment }, basePath, } = useStaticInfo();
+    const style = useMemo(() => itemStyle(), []);
+    const screenSize = useScreenSize();
     const isDesktopScreen = screenSize !== "S";
     const { id } = useParams();
     const [fiveItemsDiscount = 0, fiveItemsDiscountStatus] = useViewFiveItemsDiscountByCustomerId({ customerId });
@@ -124,6 +125,7 @@ const Item = ({ layout: Layout }) => {
         handleOnNext,
         handleOnPrevious,
         itemDetailRouteMatch,
+        style.headerWrapper,
     ]);
     const itemWithoutCustomerDecission = checkoutItem.status === CheckoutItemStatus.INITIAL;
     const dependenciesLoaded = checkoutStatus !== QueryStatus.LOADING &&

package/dist/src/infrastructure/ui/views/item/Item.style.d.ts

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

package/dist/src/infrastructure/ui/views/item/Item.style.js

@@ -1,23 +1,25 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 import { HEADER_HEIGHT } from "../../components/templates/header/Header.style";
-const { colorBgPrimaryLight, space12 } = theme();
-const style = StyleSheet.create({
-    fiveItemsDiscountPadding: {
-        paddingTop: space12,
-    },
-    header: {
-        height: HEADER_HEIGHT,
-    },
-    headerWithDoubleHeight: {
-        height: HEADER_HEIGHT * 2,
-    },
-    headerWrapper: {
-        display: "flex",
-        flexDirection: "column",
-    },
-    safeAreaView: {
-        backgroundColor: colorBgPrimaryLight,
-    },
-});
+const style = () => {
+    const { colorBgPrimaryLight, space12 } = theme();
+    return StyleSheet.create({
+        fiveItemsDiscountPadding: {
+            paddingTop: space12,
+        },
+        header: {
+            height: HEADER_HEIGHT,
+        },
+        headerWithDoubleHeight: {
+            height: HEADER_HEIGHT * 2,
+        },
+        headerWrapper: {
+            display: "flex",
+            flexDirection: "column",
+        },
+        safeAreaView: {
+            backgroundColor: colorBgPrimaryLight,
+        },
+    });
+};
 export { style };

package/dist/src/infrastructure/ui/views/item/components/banner/CustomerDecissionBanner.js

@@ -1,11 +1,11 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { Pressable, View } from "react-native";
 import { InfoBox, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { useScreenSize } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
 import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
-import { style } from "./CustomerDecissionBanner.style";
+import { style as customerDecissionBannerStyle } from "./CustomerDecissionBanner.style";
 const i18nMessageForCheckoutItemStatus = {
     [CheckoutItemStatus.KEPT]: I18nMessages.ITEM_BANNER_CUSTOMER_KEPT_DECISSION,
     [CheckoutItemStatus.REPLACED]: I18nMessages.ITEM_BANNER_CUSTOMER_REPLACED_DECISSION,
@@ -16,6 +16,7 @@ const CustomerDecissionBanner = ({ checkoutItemStatus, onPress }) => {
     const bannerButtonText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.ITEM_BANNER_BUTTON });
     const screenSize = useScreenSize();
     const isSmallScreen = screenSize === "S";
+    const style = useMemo(() => customerDecissionBannerStyle(), []);
     return (React.createElement(View, { style: [style.container, isSmallScreen ? style.smallContainer : null] },
         React.createElement(InfoBox, { text: decissionText },
             React.createElement(Pressable, { testID: "customer-decission-banner", onPress: onPress },

package/dist/src/infrastructure/ui/views/item/components/banner/CustomerDecissionBanner.style.d.ts

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

package/dist/src/infrastructure/ui/views/item/components/banner/CustomerDecissionBanner.style.js

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

package/dist/src/infrastructure/ui/views/item/components/getOutOfCheckoutModal/GetOutOfCheckoutModal.js

@@ -1,10 +1,10 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { View } from "react-native";
-import { ALIGN, Button, BUTTON_VARIANT, Text } from "@lookiero/aurora";
+import { Button, BUTTON_VARIANT, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { Modal } from "@lookiero/sty-psp-ui";
 import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
-import { style } from "./GetOutOfCheckoutModal.style";
+import { style as getOutOfCheckoutModalStyle } from "./GetOutOfCheckoutModal.style";
 const GetOutOfCheckoutModal = ({ visible, onDismiss, onConfirm }) => {
     const titleText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.GET_OUT_OF_CHECKOUT_MODAL_TITLE });
     const descriptionText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.GET_OUT_OF_CHECKOUT_MODAL_DESCRIPTION });
@@ -16,13 +16,14 @@ const GetOutOfCheckoutModal = ({ visible, onDismiss, onConfirm }) => {
         domain: DOMAIN,
         id: I18nMessages.GET_OUT_OF_CHECKOUT_MODAL_CONFIRM_BUTTON,
     });
+    const style = useMemo(() => getOutOfCheckoutModalStyle(), []);
     return (React.createElement(Modal, { portalHostName: "Checkout", visible: visible, onClose: onDismiss },
         React.createElement(View, { style: style.modalContent },
-            React.createElement(Text, { align: ALIGN.CENTER, level: 1, style: style.title }, titleText),
+            React.createElement(Text, { level: 1, style: style.title }, titleText),
             React.createElement(Text, { level: 3, style: style.description }, descriptionText),
             React.createElement(Button, { style: style.button, onPress: onDismiss },
-                React.createElement(Text, { align: ALIGN.CENTER, level: 3, selectable: false, style: style.buttonText, action: true, upperCase: true }, dismissButtonText)),
+                React.createElement(Text, { level: 3, selectable: false, style: style.buttonText, action: true, upperCase: true }, dismissButtonText)),
             React.createElement(Button, { style: [style.button, style.confirmButton], variant: BUTTON_VARIANT.SECONDARY, onPress: onConfirm },
-                React.createElement(Text, { align: ALIGN.CENTER, level: 3, selectable: false, style: style.buttonText, action: true, upperCase: true }, confirmButtonText)))));
+                React.createElement(Text, { level: 3, selectable: false, style: style.buttonText, action: true, upperCase: true }, confirmButtonText)))));
 };
 export { GetOutOfCheckoutModal };

package/dist/src/infrastructure/ui/views/item/components/getOutOfCheckoutModal/GetOutOfCheckoutModal.style.d.ts

@@ -1,8 +1,9 @@
-declare const style: {
+declare const style: () => {
     button: {
         flex: number;
     };
     buttonText: {
+        textAlign: "center";
         width: "100%";
     };
     confirmButton: {
@@ -16,6 +17,7 @@ declare const style: {
         paddingHorizontal: number;
     };
     title: {
+        textAlign: "center";
         width: "100%";
     };
 };

package/dist/src/infrastructure/ui/views/item/components/getOutOfCheckoutModal/GetOutOfCheckoutModal.style.js

@@ -1,25 +1,29 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-const { space6, space8 } = theme();
-const style = StyleSheet.create({
-    button: {
-        flex: 0,
-    },
-    buttonText: {
-        width: "100%",
-    },
-    confirmButton: {
-        marginTop: space8,
-    },
-    description: {
-        marginVertical: space8,
-        width: "100%",
-    },
-    modalContent: {
-        paddingHorizontal: space6,
-    },
-    title: {
-        width: "100%",
-    },
-});
+const style = () => {
+    const { space6, space8 } = theme();
+    return StyleSheet.create({
+        button: {
+            flex: 0,
+        },
+        buttonText: {
+            textAlign: "center",
+            width: "100%",
+        },
+        confirmButton: {
+            marginTop: space8,
+        },
+        description: {
+            marginVertical: space8,
+            width: "100%",
+        },
+        modalContent: {
+            paddingHorizontal: space6,
+        },
+        title: {
+            textAlign: "center",
+            width: "100%",
+        },
+    });
+};
 export { style };

package/dist/src/infrastructure/ui/views/item/components/itemActions/ItemActions.js

@@ -7,9 +7,10 @@ import { size } from "../../../../../../projection/size/size";
 import { Body } from "../../../../components/layouts/body/Body";
 import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { SelectModal } from "../selectModal/SelectModal";
-import { style } from "./ItemActions.style";
+import { style as itemActionsStyle } from "./ItemActions.style";
 const ItemActions = ({ productVariants, currentProductVariant, country, onShowSizeWithoutStockModal = () => void 0, onKeep, onReplace, onReturn, onLayout, }) => {
     const [modalVisible, setModalVisible] = useState(false);
+    const style = useMemo(() => itemActionsStyle(), []);
     const changeSizeButtonText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.ITEM_CHANGE_SIZE_BUTTON });
     const keepButtonText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.ITEM_KEEP_BUTTON });
     const returnButtonText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.ITEM_RETURN_BUTTON });

package/dist/src/infrastructure/ui/views/item/components/itemActions/ItemActions.style.d.ts

@@ -1,4 +1,4 @@
-declare const style: {
+declare const style: () => {
     actionsRow: {
         alignItems: "center";
         flexDirection: "row";

package/dist/src/infrastructure/ui/views/item/components/itemActions/ItemActions.style.js

@@ -1,29 +1,31 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-const { colorTextDisabled, space3, space2, space4, space6 } = theme();
-const style = StyleSheet.create({
-    actionsRow: {
-        alignItems: "center",
-        flexDirection: "row",
-        marginBottom: space4,
-    },
-    inputDisabled: {
-        color: colorTextDisabled,
-    },
-    returnButton: {
-        flex: 1,
-    },
-    row: {
-        paddingHorizontal: space3,
-    },
-    sizeSelector: {
-        flex: 1,
-        marginRight: space2,
-    },
-    sticky: {
-        paddingBottom: space6,
-        paddingHorizontal: 0,
-        paddingTop: space6,
-    },
-});
+const style = () => {
+    const { colorTextDisabled, space3, space2, space4, space6 } = theme();
+    return StyleSheet.create({
+        actionsRow: {
+            alignItems: "center",
+            flexDirection: "row",
+            marginBottom: space4,
+        },
+        inputDisabled: {
+            color: colorTextDisabled,
+        },
+        returnButton: {
+            flex: 1,
+        },
+        row: {
+            paddingHorizontal: space3,
+        },
+        sizeSelector: {
+            flex: 1,
+            marginRight: space2,
+        },
+        sticky: {
+            paddingBottom: space6,
+            paddingHorizontal: 0,
+            paddingTop: space6,
+        },
+    });
+};
 export { style };

package/dist/src/infrastructure/ui/views/item/components/productVariantDescription/ProductVariantDescription.js

@@ -1,21 +1,22 @@
-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 { useI18nMessage } from "@lookiero/i18n-react";
 import { useScreenSize } from "@lookiero/sty-psp-ui";
 import { size } from "../../../../../../projection/size/size";
 import { Price } from "../../../../components/atoms/price/Price";
 import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
-import { style } from "./ProductVariantDescription.style";
+import { style as productVariantDescriptionStyle } from "./ProductVariantDescription.style";
 const ProductVariantDescription = ({ brand, name, price, size: sizeProjection, country, }) => {
     const sizeText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.ITEM_SIZE });
     const uniqueText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.ITEM_UNIQUE });
     const screenDevice = useScreenSize();
     const isDesktopScreen = screenDevice !== "S";
-    return (React.createElement(View, { style: [style.container, isDesktopScreen ? null : style.smallContainer] },
+    const style = useMemo(() => productVariantDescriptionStyle(), []);
+    return (React.createElement(View, { style: [style.container, !isDesktopScreen && style.smallContainer] },
         React.createElement(View, { style: style.info },
-            React.createElement(View, { style: style.brand },
-                React.createElement(Text, { color: COLOR.TEXT_MEDIUM, level: 1, detail: true }, brand),
+            React.createElement(View, { style: style.content },
+                React.createElement(Text, { level: 1, style: style.brand, detail: true }, brand),
                 React.createElement(Text, { level: 1, detailBold: true }, name)),
             React.createElement(Price, { price: price, withPercentage: true })),
         React.createElement(Text, { level: 1, detail: true }, `${sizeText} ${sizeProjection.unique ? uniqueText : size({ size: sizeProjection, country })}`)));

package/dist/src/infrastructure/ui/views/item/components/productVariantDescription/ProductVariantDescription.style.d.ts

@@ -1,11 +1,14 @@
-declare const style: {
+declare const style: () => {
     brand: {
-        flex: number;
-        gap: number;
+        color: string;
     };
     container: {
         width: "100%";
     };
+    content: {
+        flex: number;
+        gap: number;
+    };
     info: {
         display: "flex";
         flexDirection: "row";

package/dist/src/infrastructure/ui/views/item/components/productVariantDescription/ProductVariantDescription.style.js

@@ -1,21 +1,26 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-const { space1, space4, space6 } = theme();
-const style = StyleSheet.create({
-    brand: {
-        flex: 1,
-        gap: space1,
-    },
-    container: {
-        width: "100%",
-    },
-    info: {
-        display: "flex",
-        flexDirection: "row",
-        marginBottom: space4,
-    },
-    smallContainer: {
-        paddingHorizontal: space6,
-    },
-});
+const style = () => {
+    const { colorTextMedium, space1, space4, space6 } = theme();
+    return StyleSheet.create({
+        brand: {
+            color: colorTextMedium,
+        },
+        container: {
+            width: "100%",
+        },
+        content: {
+            flex: 1,
+            gap: space1,
+        },
+        info: {
+            display: "flex",
+            flexDirection: "row",
+            marginBottom: space4,
+        },
+        smallContainer: {
+            paddingHorizontal: space6,
+        },
+    });
+};
 export { style };

package/dist/src/infrastructure/ui/views/item/components/productVariantSlider/ProductVariantSlider.js

@@ -1,13 +1,13 @@
-import React, { useCallback, useState } from "react";
-import { AspectRatioView, Bullets, Carousel, LazyImage, theme, useScreenSize, } from "@lookiero/sty-psp-ui";
+import React, { useCallback, useMemo, useState } from "react";
+import { AspectRatioView, Bullets, Carousel, LazyImage, useScreenSize, } from "@lookiero/sty-psp-ui";
 import { MediaPerspective } from "../../../../../../projection/checkoutItem/checkoutItem";
 import { useMediaImage } from "../../../../hooks/useMediaImage";
-import { style } from "./ProductVariantSlider.style";
-const { space16 } = theme();
+import { style as productVariantSliderStyle } from "./ProductVariantSlider.style";
 const ProductVariantSlider = ({ producVariantMedia, onChanged }) => {
     const cdnImageUrl = useMediaImage();
     const screenSize = useScreenSize();
     const isDesktopScreen = screenSize !== "S";
+    const style = useMemo(() => productVariantSliderStyle(), []);
     const [activeIndex, setActiveIndex] = useState(0);
     const handleOnActiveChanged = useCallback((activeIndex) => {
         setActiveIndex(activeIndex);
@@ -17,11 +17,18 @@ const ProductVariantSlider = ({ producVariantMedia, onChanged }) => {
         const isCollageImage = item.perspective === MediaPerspective.COLLAGE;
         const isLastItem = index === producVariantMedia.length - 1;
         return (React.createElement(AspectRatioView, { aspectRatio: 4 / 3, multiplier: isCollageImage && isLastItem ? 2 : 1, style: {
-                marginTop: isCollageImage && !isDesktopScreen ? space16 : 0,
+                marginTop: isCollageImage && !isDesktopScreen ? style.imageContainerMarginTop : 0,
                 alignSelf: isCollageImage ? (isLastItem ? "flex-end" : "flex-start") : undefined,
             } },
             React.createElement(LazyImage, { hiResSrc: cdnImageUrl({ url: item.url, width: 600 }), resizeMode: "stretch", src: cdnImageUrl({ url: item.url, width: 600, dpi: 1 }), style: { view: [style.image, isDesktopScreen ? style.largeImage : null] }, testID: "product-variant-image" })));
-    }, [cdnImageUrl, isDesktopScreen, producVariantMedia.length]);
+    }, [
+        cdnImageUrl,
+        isDesktopScreen,
+        producVariantMedia.length,
+        style.image,
+        style.imageContainerMarginTop,
+        style.largeImage,
+    ]);
     const renderBullets = useCallback(({ activeIndex, count, onChange }) => React.createElement(Bullets, { activeIndex: activeIndex, count: count, onChange: onChange }), []);
     return (React.createElement(Carousel, { activeIndex: activeIndex, bullets: renderBullets, data: producVariantMedia, onActiveIndexChanged: handleOnActiveChanged }, renderItem));
 };

package/dist/src/infrastructure/ui/views/item/components/productVariantSlider/ProductVariantSlider.style.d.ts

@@ -1,4 +1,5 @@
-declare const style: {
+declare const style: () => {
+    imageContainerMarginTop: number;
     image: {
         flex: number;
     };

package/dist/src/infrastructure/ui/views/item/components/productVariantSlider/ProductVariantSlider.style.js

@@ -1,32 +1,38 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-const { borderRadius4, colorBgBase, colorBgPrimaryMediumLight, colorBorderActionSecondary, space4 } = theme();
 const PAGINATION_SIZE = 37;
-const style = StyleSheet.create({
-    image: {
-        flex: 1,
-    },
-    largeImage: {
-        borderRadius: borderRadius4,
-    },
-    paginationActiveItemStyle: {
-        borderColor: colorBorderActionSecondary,
-    },
-    paginationImage: {
-        flex: 1,
-    },
-    paginationItemStyle: {
-        backgroundColor: colorBgBase,
-        borderColor: colorBgPrimaryMediumLight,
-        borderRadius: 0,
-        borderWidth: 1,
-        height: PAGINATION_SIZE,
-        width: PAGINATION_SIZE,
-    },
-    paginationStyle: {
-        bottom: 0,
-        marginTop: space4,
-        position: "relative",
-    },
-});
+const style = () => {
+    const { borderRadius4, colorBgBase, colorBgPrimaryMediumLight, colorBorderActionSecondary, space4, space16 } = theme();
+    const styles = StyleSheet.create({
+        image: {
+            flex: 1,
+        },
+        largeImage: {
+            borderRadius: borderRadius4,
+        },
+        paginationActiveItemStyle: {
+            borderColor: colorBorderActionSecondary,
+        },
+        paginationImage: {
+            flex: 1,
+        },
+        paginationItemStyle: {
+            backgroundColor: colorBgBase,
+            borderColor: colorBgPrimaryMediumLight,
+            borderRadius: 0,
+            borderWidth: 1,
+            height: PAGINATION_SIZE,
+            width: PAGINATION_SIZE,
+        },
+        paginationStyle: {
+            bottom: 0,
+            marginTop: space4,
+            position: "relative",
+        },
+    });
+    return {
+        ...styles,
+        imageContainerMarginTop: space16,
+    };
+};
 export { style };

package/dist/src/infrastructure/ui/views/item/components/returnQuestionsFeedback/ReturnQuestionsFeedback.js

@@ -1,14 +1,15 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { View } from "react-native";
-import { ButtonIcon, Text } from "@lookiero/aurora";
+import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
+import { ButtonIcon } from "@lookiero/sty-psp-ui";
 import { ReturnQuestionType } from "../../../../../../projection/returnQuestion/returnQuestion.constants";
 import { ReturnQuestions } from "../../../../components/organisms/returnQuestions/ReturnQuestions";
 import { ReturnQuestionItemProvider, } from "../../../../components/organisms/returnQuestions/behaviors/useReturnQuestionItem";
 import { HostDefaultReturnQuestionFeedbackItem } from "../../../../components/organisms/returnQuestions/components/hostDefaultReturnQuestionFeedbackItem/HostDefaultReturnQuestionFeedbackItem";
 import { ReturnQuestionFeedbackItem } from "../../../../components/organisms/returnQuestions/components/returnQuestionFeedbackItem/ReturnQuestionFeedbackItem";
 import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
-import { style } from "./ReturnQuestionsFeedback.style";
+import { style as returnQuestionsFeedbackStyle } from "./ReturnQuestionsFeedback.style";
 const returnQuestionItems = {
     [ReturnQuestionType.HOST_DEFAULT]: HostDefaultReturnQuestionFeedbackItem,
     [ReturnQuestionType.HOST_TEXTAREA]: ReturnQuestionFeedbackItem,
@@ -19,6 +20,7 @@ const returnQuestionItems = {
 };
 const ReturnQuestionsFeedback = ({ returnQuestions, onEditFeedback }) => {
     const titleText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.FEEDBACK_TITLE });
+    const style = useMemo(() => returnQuestionsFeedbackStyle(), []);
     return (React.createElement(View, null,
         React.createElement(View, { style: style.titleContainer },
             React.createElement(Text, { level: 2 }, titleText),

package/dist/src/infrastructure/ui/views/item/components/returnQuestionsFeedback/ReturnQuestionsFeedback.style.d.ts

@@ -1,4 +1,4 @@
-declare const style: {
+declare const style: () => {
     titleContainer: {
         alignItems: "center";
         flexDirection: "row";

package/dist/src/infrastructure/ui/views/item/components/returnQuestionsFeedback/ReturnQuestionsFeedback.style.js

@@ -1,12 +1,14 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-const { space4 } = theme();
-const style = StyleSheet.create({
-    titleContainer: {
-        alignItems: "center",
-        flexDirection: "row",
-        justifyContent: "space-between",
-        marginBottom: space4,
-    },
-});
+const style = () => {
+    const { space4 } = theme();
+    return StyleSheet.create({
+        titleContainer: {
+            alignItems: "center",
+            flexDirection: "row",
+            justifyContent: "space-between",
+            marginBottom: space4,
+        },
+    });
+};
 export { style };