@lookiero/checkout 11.1.0 → 11.2.0

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,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { View } from "react-native";
 import { COLOR, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
@@ -6,12 +6,13 @@ 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";
+    const style = useMemo(() => productVariantDescriptionStyle(), []);
     return (React.createElement(View, { style: [style.container, isDesktopScreen ? null : style.smallContainer] },
         React.createElement(View, { style: style.info },
             React.createElement(View, { style: style.brand },

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

@@ -1,4 +1,4 @@
-declare const style: {
+declare const style: () => {
     brand: {
         flex: number;
         gap: number;

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

@@ -1,21 +1,23 @@
 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 { space1, space4, space6 } = theme();
+    return StyleSheet.create({
+        brand: {
+            flex: 1,
+            gap: space1,
+        },
+        container: {
+            width: "100%",
+        },
+        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,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { View } from "react-native";
 import { ButtonIcon, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
@@ -8,7 +8,7 @@ import { ReturnQuestionItemProvider, } from "../../../../components/organisms/re
 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 +19,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 };

package/dist/src/infrastructure/ui/views/item/components/selectModal/SelectModal.js

@@ -1,18 +1,18 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useMemo } from "react";
 import { TouchableHighlight, View } from "react-native";
 import { COLOR, Text } from "@lookiero/aurora";
-import { Modal, theme } from "@lookiero/sty-psp-ui";
-import { style } from "./SelectModal.style";
-const { colorBgPrimaryLight } = theme();
+import { Modal } from "@lookiero/sty-psp-ui";
+import { style as modalStyle } from "./SelectModal.style";
 const SelectModal = ({ modalVisible, options, style: customStyle, testID, title, value, portalHostName, onChange = () => void 0, onClose = () => void 0, }) => {
     const handleOnPressOption = useCallback((value) => {
         onChange(value);
         onClose();
     }, [onClose, onChange]);
+    const style = useMemo(() => modalStyle(), []);
     return (React.createElement(Modal, { portalHostName: portalHostName, testID: testID, visible: modalVisible, scroll: true, showCloseButton: true, onClose: onClose },
         React.createElement(View, { style: [style.modalContent, customStyle?.modalContent] },
             title && (React.createElement(Text, { level: 3, style: style.modalTitle, heading: true }, title)),
-            options.map(({ label, value: optionValue }) => (React.createElement(TouchableHighlight, { key: optionValue, accessibilityLabel: optionValue, disabled: value === optionValue, style: [style.option, customStyle?.option], testID: optionValue, underlayColor: colorBgPrimaryLight, accessible: true, onPress: value !== optionValue ? () => handleOnPressOption(optionValue) : undefined },
+            options.map(({ label, value: optionValue }) => (React.createElement(TouchableHighlight, { key: optionValue, accessibilityLabel: optionValue, disabled: value === optionValue, style: [style.option, customStyle?.option], testID: optionValue, underlayColor: style.underlayColor, accessible: true, onPress: value !== optionValue ? () => handleOnPressOption(optionValue) : undefined },
                 React.createElement(Text, { color: value === optionValue ? COLOR.TEXT_MEDIUM : COLOR.TEXT, level: 3, style: [style.optionText, customStyle?.optionText] }, label)))))));
 };
 export { SelectModal };

package/dist/src/infrastructure/ui/views/item/components/selectModal/SelectModal.style.d.ts

@@ -1,4 +1,5 @@
-declare const style: {
+declare const style: () => {
+    underlayColor: string;
     modalContent: {
         paddingBottom: number;
         paddingHorizontal: number;

package/dist/src/infrastructure/ui/views/item/components/selectModal/SelectModal.style.js

@@ -1,21 +1,27 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-const { borderWidth1, colorBorderInteractive, space1, space5, space6 } = theme();
-const style = StyleSheet.create({
-    modalContent: {
-        paddingBottom: space6,
-        paddingHorizontal: space6,
-    },
-    modalTitle: {
-        marginBottom: space1,
-    },
-    option: {
-        borderBottomColor: colorBorderInteractive,
-        borderBottomWidth: borderWidth1,
-        paddingVertical: space5,
-    },
-    optionText: {
-        lineHeight: space6,
-    },
-});
+const style = () => {
+    const { borderWidth1, colorBgPrimaryLight, colorBorderInteractive, space1, space5, space6 } = theme();
+    const styles = StyleSheet.create({
+        modalContent: {
+            paddingBottom: space6,
+            paddingHorizontal: space6,
+        },
+        modalTitle: {
+            marginBottom: space1,
+        },
+        option: {
+            borderBottomColor: colorBorderInteractive,
+            borderBottomWidth: borderWidth1,
+            paddingVertical: space5,
+        },
+        optionText: {
+            lineHeight: space6,
+        },
+    });
+    return {
+        ...styles,
+        underlayColor: colorBgPrimaryLight,
+    };
+};
 export { style };

package/dist/src/infrastructure/ui/views/item/components/sizeWithoutStockModal/SizeWithoutStockModal.js

@@ -1,14 +1,15 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { View } from "react-native";
 import { Button, 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 "./SizeWithoutStockModal.style";
+import { style as sizeWithoutStockModalStyle } from "./SizeWithoutStockModal.style";
 const SizeWithoutStockModal = ({ visible, onDismiss }) => {
     const titleText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SIZE_WITHOUT_STOCK_MODAL_TITLE });
     const descriptionText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SIZE_WITHOUT_STOCK_MODAL_DESCRIPTION });
     const buttonText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SIZE_WITHOUT_STOCK_MODAL_BUTTON });
+    const style = useMemo(() => sizeWithoutStockModalStyle(), []);
     return (React.createElement(Modal, { portalHostName: "Checkout", visible: visible, showCloseButton: true, onClose: onDismiss },
         React.createElement(View, { style: style.modalContent },
             React.createElement(Text, { level: 3, style: style.title, heading: true }, titleText),

package/dist/src/infrastructure/ui/views/item/components/sizeWithoutStockModal/SizeWithoutStockModal.style.d.ts

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

package/dist/src/infrastructure/ui/views/item/components/sizeWithoutStockModal/SizeWithoutStockModal.style.js

@@ -1,18 +1,20 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-const { space1, space6, colorTextMedium } = theme();
-const style = StyleSheet.create({
-    description: {
-        color: colorTextMedium,
-        marginBottom: space6,
-        width: "100%",
-    },
-    modalContent: {
-        paddingHorizontal: space6,
-    },
-    title: {
-        marginBottom: space1,
-        width: "100%",
-    },
-});
+const style = () => {
+    const { space1, space6, colorTextMedium } = theme();
+    return StyleSheet.create({
+        description: {
+            color: colorTextMedium,
+            marginBottom: space6,
+            width: "100%",
+        },
+        modalContent: {
+            paddingHorizontal: space6,
+        },
+        title: {
+            marginBottom: space1,
+            width: "100%",
+        },
+    });
+};
 export { style };

package/dist/src/infrastructure/ui/views/item/views/itemWithCustomerDecission/ItemWithCustomerDecission.js

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useMemo } from "react";
 import { View } from "react-native";
 import { Spinner } from "@lookiero/aurora";
 import { CommandStatus } from "@lookiero/messaging-react";
@@ -13,8 +13,9 @@ import { useStaticInfo } from "../../../../hooks/useStaticInfo";
 import { CustomerDecissionBanner, } from "../../components/banner/CustomerDecissionBanner";
 import { ReturnQuestionsFeedback } from "../../components/returnQuestionsFeedback/ReturnQuestionsFeedback";
 import { ProductVariant } from "../../views/productVariant/ProductVariant";
-import { style } from "./ItemWithCustomerDecission.style";
+import { style as itemWithCustomerDecissionStyle } from "./ItemWithCustomerDecission.style";
 const ItemWithCustomerDecission = ({ checkoutId, checkoutItem, returnQuestions, currentProductVariant, onEditFeedback, }) => {
+    const style = useMemo(() => itemWithCustomerDecissionStyle(), []);
     const screenSize = useScreenSize();
     const isMobile = screenSize === "S";
     const logger = useLogger();

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

@@ -1,4 +1,4 @@
-declare const style: {
+declare const style: () => {
     container: {
         justifyContent: "flex-start";
         paddingBottom: number;

package/dist/src/infrastructure/ui/views/item/views/itemWithCustomerDecission/ItemWithCustomerDecission.style.js

@@ -1,20 +1,22 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-const { borderWidth1, colorBorderInput, space6 } = theme();
-const style = StyleSheet.create({
-    container: {
-        justifyContent: "flex-start",
-        paddingBottom: space6,
-        paddingHorizontal: 0,
-    },
-    feedbackContainer: {
-        borderTopColor: colorBorderInput,
-        borderTopWidth: borderWidth1,
-        marginTop: space6,
-        paddingTop: space6,
-    },
-    feedbackContainerMobile: {
-        paddingHorizontal: space6,
-    },
-});
+const style = () => {
+    const { borderWidth1, colorBorderInput, space6 } = theme();
+    return StyleSheet.create({
+        container: {
+            justifyContent: "flex-start",
+            paddingBottom: space6,
+            paddingHorizontal: 0,
+        },
+        feedbackContainer: {
+            borderTopColor: colorBorderInput,
+            borderTopWidth: borderWidth1,
+            marginTop: space6,
+            paddingTop: space6,
+        },
+        feedbackContainerMobile: {
+            paddingHorizontal: space6,
+        },
+    });
+};
 export { style };

package/dist/src/infrastructure/ui/views/item/views/itemWithoutCustomerDecission/ItemWithoutCustomerDecission.js

@@ -1,9 +1,8 @@
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import { Platform, ScrollView } from "react-native";
 import { Spinner } from "@lookiero/aurora";
 import { CommandStatus } from "@lookiero/messaging-react";
 import { useLogger } from "@lookiero/sty-psp-logging";
-import { theme } from "@lookiero/sty-psp-ui";
 import "../../../../../../projection/checkout/viewFirstAvailableCheckoutByCustomerId";
 import { useKeepCheckoutItem } from "../../../../../domain/checkoutItem/react/useKeepCheckoutItem";
 import { useReplaceCheckoutItem } from "../../../../../domain/checkoutItem/react/useReplaceCheckoutItem";
@@ -15,11 +14,11 @@ import { useStaticInfo } from "../../../../hooks/useStaticInfo";
 import { ItemActions } from "../../components/itemActions/ItemActions";
 import { SizeWithoutStockModal } from "../../components/sizeWithoutStockModal/SizeWithoutStockModal";
 import { ProductVariant } from "../productVariant/ProductVariant";
-import { style } from "./ItemWithoutCustomerDecission.style";
-const { space6 } = theme();
+import { style as itemWithoutCustomerDecissionStyle } from "./ItemWithoutCustomerDecission.style";
 const ItemWithoutCustomerDecission = ({ checkoutId, checkoutItem, bookedProductsVariants, currentProductVariant, onReturn, }) => {
     const logger = useLogger();
     const { customer: { country, segment }, } = useStaticInfo();
+    const style = useMemo(() => itemWithoutCustomerDecissionStyle(), []);
     /* KeepCheckoutItem */
     const [keepCheckoutItem, keepCheckoutItemStatus] = useKeepCheckoutItem({ checkoutItemId: checkoutItem.id, logger });
     const trackKeepItem = useTrackKeepItem({
@@ -65,7 +64,9 @@ const ItemWithoutCustomerDecission = ({ checkoutId, checkoutItem, bookedProducts
         React.createElement(SizeWithoutStockModal, { visible: sizeWithoutStockModalVisible, onDismiss: handleOnHideSizeWithoutStockModal }),
         React.createElement(ScrollView, { showsVerticalScrollIndicator: false, testID: checkoutItem.id },
             React.createElement(Body, { style: { row: style.container } },
-                React.createElement(ProductVariant, { checkoutId: checkoutId, checkoutItem: checkoutItem, country: country, currentProductVariant: currentProductVariant, segment: segment, style: { content: { paddingBottom: Platform.OS === "web" ? space6 : stickyHeight } } }))),
+                React.createElement(ProductVariant, { checkoutId: checkoutId, checkoutItem: checkoutItem, country: country, currentProductVariant: currentProductVariant, segment: segment, style: {
+                        content: { paddingBottom: Platform.OS === "web" ? style.productVariantPaddingBottom : stickyHeight },
+                    } }))),
         React.createElement(ItemActions, { country: country, currentProductVariant: currentProductVariant, productVariants: bookedProductsVariants?.productVariants, onKeep: handleOnKeep, onLayout: handleOnStickyLayout, onReplace: handleOnReplace, onReturn: onReturn, onShowSizeWithoutStockModal: handleOnShowSizeWithoutStockModal })));
 };
 export { ItemWithoutCustomerDecission };

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

@@ -1,4 +1,5 @@
-declare const style: {
+declare const style: () => {
+    productVariantPaddingBottom: number;
     container: {
         paddingBottom: number;
         paddingHorizontal: number;

package/dist/src/infrastructure/ui/views/item/views/itemWithoutCustomerDecission/ItemWithoutCustomerDecission.style.js

@@ -1,10 +1,16 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-const { space10 } = theme();
-const style = StyleSheet.create({
-    container: {
-        paddingBottom: space10,
-        paddingHorizontal: 0,
-    },
-});
+const style = () => {
+    const { space6, space10 } = theme();
+    const styles = StyleSheet.create({
+        container: {
+            paddingBottom: space10,
+            paddingHorizontal: 0,
+        },
+    });
+    return {
+        ...styles,
+        productVariantPaddingBottom: space6,
+    };
+};
 export { style };

package/dist/src/infrastructure/ui/views/item/views/productVariant/ProductVariant.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from "react";
+import React, { useCallback, useEffect, useMemo } from "react";
 import { View } from "react-native";
 import { useScreenSize } from "@lookiero/sty-psp-ui";
 import { MediaPerspective, } from "../../../../../../projection/checkoutItem/checkoutItem";
@@ -6,10 +6,11 @@ import { TrackingPage } from "../../../../../tracking/tracking";
 import { useTrackImageView } from "../../../../../tracking/useTrackImageView";
 import { ProductVariantDescription } from "../../components/productVariantDescription/ProductVariantDescription";
 import { ProductVariantSlider } from "../../components/productVariantSlider/ProductVariantSlider";
-import { style } from "./ProductVariant.style";
+import { style as productVariantStyle } from "./ProductVariant.style";
 const ProductVariant = ({ country, segment, checkoutId, checkoutItem, currentProductVariant, style: customStyle, children, customerDecissionBanner, }) => {
     const screenSize = useScreenSize();
     const isDesktopScreen = screenSize !== "S";
+    const style = useMemo(() => productVariantStyle(), []);
     const trackImageView = useTrackImageView({
         page: TrackingPage.ITEM,
         country,

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

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