@lookiero/checkout 11.1.0 → 11.3.0

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,14 +1,16 @@
-import React from "react";
-import { ButtonIcon, Text } from "@lookiero/aurora";
+import React, { useMemo } from "react";
+import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
+import { ButtonIcon } from "@lookiero/sty-psp-ui";
 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(ButtonIcon, { name: "arrow_left", style: { button: style.button }, testID: "arrow-left-button-icon", onPress: onBack }),
         React.createElement(Text, { level: 3, action: true }, title),
         React.createElement(ButtonIconPlaceholder, null)));
 };

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;

package/dist/src/infrastructure/ui/components/templates/header/checkoutHeader/CheckoutHeader.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({
-    button: {
-        alignSelf: "auto",
-        height: space10,
-        width: space10,
-    },
-});
+const style = () => {
+    const { space10 } = theme();
+    return StyleSheet.create({
+        button: {
+            alignSelf: "auto",
+            height: space10,
+            width: space10,
+        },
+    });
+};
 export { style };

package/dist/src/infrastructure/ui/components/templates/header/itemDetailHeader/ItemDetailHeader.js

@@ -1,15 +1,17 @@
-import React from "react";
-import { ButtonIcon, Text } from "@lookiero/aurora";
+import React, { useMemo } from "react";
+import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
+import { ButtonIcon } from "@lookiero/sty-psp-ui";
 import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { Header } from "../Header";
 import { ButtonIconPlaceholder } from "../buttonIconPlaceholder/ButtonIconPlaceholder";
-import { style } from "./ItemDetailHeader.style";
+import { style as itemDetailHeaderStyle } from "./ItemDetailHeader.style";
 const ItemDetailHeader = ({ onBack }) => {
     const title = useI18nMessage({ domain: DOMAIN, id: I18nMessages.HEADER_CHECKOUT_TITLE });
+    const style = useMemo(() => itemDetailHeaderStyle(), []);
     return (React.createElement(Header, { testID: "item-detail-header" },
         React.createElement(ButtonIconPlaceholder, null),
         React.createElement(Text, { level: 3, action: true }, title),
-        React.createElement(ButtonIcon, { name: "close", style: style.button, testID: "close-button-icon", onPress: onBack })));
+        React.createElement(ButtonIcon, { name: "close", style: { button: style.button }, testID: "close-button-icon", onPress: onBack })));
 };
 export { ItemDetailHeader };

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

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

package/dist/src/infrastructure/ui/components/templates/header/itemDetailHeader/ItemDetailHeader.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({
-    button: {
-        alignSelf: "auto",
-        height: space10,
-        width: space10,
-    },
-});
+const style = () => {
+    const { space10 } = theme();
+    return StyleSheet.create({
+        button: {
+            alignSelf: "auto",
+            height: space10,
+            width: space10,
+        },
+    });
+};
 export { style };

package/dist/src/infrastructure/ui/components/templates/header/itemHeader/ItemHeader.js

@@ -1,14 +1,16 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useMemo } from "react";
 import { generatePath, useNavigate } from "react-router-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 { useStaticInfo } from "../../../../hooks/useStaticInfo";
 import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { Routes } from "../../../../routing/routes";
 import { Header } from "../Header";
 import { ButtonIconPlaceholder } from "../buttonIconPlaceholder/ButtonIconPlaceholder";
-import style from "./ItemHeader.style";
+import { style as itemHeaderStyle } from "./ItemHeader.style";
 const ItemHeader = ({ items, item, onNext, onPrevious }) => {
+    const style = useMemo(() => itemHeaderStyle(), []);
     const title = useI18nMessage({ domain: DOMAIN, id: I18nMessages.HEADER_CHECKOUT_TITLE });
     const itemIndex = items.indexOf(item);
     const isFirstItem = itemIndex === 0;
@@ -28,8 +30,8 @@ const ItemHeader = ({ items, item, onNext, onPrevious }) => {
         navigate(generatePath(`${basePath}/${Routes.ITEM}`, { id: nextItem.id }));
     }, [basePath, item.id, itemIndex, items, navigate, onNext]);
     return (React.createElement(Header, { testID: "item-header" },
-        !isFirstItem ? (React.createElement(ButtonIcon, { name: "arrow_left", style: style.button, testID: "arrow-left-button-icon", onPress: navigateToPreviousItem })) : (React.createElement(ButtonIconPlaceholder, null)),
+        !isFirstItem ? (React.createElement(ButtonIcon, { name: "arrow_left", style: { button: style.button }, testID: "arrow-left-button-icon", onPress: navigateToPreviousItem })) : (React.createElement(ButtonIconPlaceholder, null)),
         React.createElement(Text, { level: 3, action: true }, title),
-        !isLastItem ? (React.createElement(ButtonIcon, { name: "arrow_right", style: style.button, testID: "arrow-right-button-icon", onPress: navigateToNextItem })) : (React.createElement(ButtonIconPlaceholder, null))));
+        !isLastItem ? (React.createElement(ButtonIcon, { name: "arrow_right", style: { button: style.button }, testID: "arrow-right-button-icon", onPress: navigateToNextItem })) : (React.createElement(ButtonIconPlaceholder, null))));
 };
 export { ItemHeader };

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

@@ -1,8 +1,8 @@
-declare const style: {
+declare const style: () => {
     button: {
         alignSelf: "auto";
         height: number;
         width: number;
     };
 };
-export default style;
+export { style };

package/dist/src/infrastructure/ui/components/templates/header/itemHeader/ItemHeader.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({
-    button: {
-        alignSelf: "auto",
-        height: space10,
-        width: space10,
-    },
-});
-export default style;
+const style = () => {
+    const { space10 } = theme();
+    return StyleSheet.create({
+        button: {
+            alignSelf: "auto",
+            height: space10,
+            width: space10,
+        },
+    });
+};
+export { style };

package/dist/src/infrastructure/ui/views/App.js

@@ -6,10 +6,12 @@ import { Notifications } from "@lookiero/sty-psp-notifications";
 import { theme } from "@lookiero/sty-psp-ui";
 import { MESSAGING_CONTEXT_ID } from "../../delivery/baseBootstrap";
 import { DOMAIN } from "../i18n/i18n";
-const { colorBgBase } = theme();
-const App = ({ children }) => (React.createElement(SafeAreaProvider, null,
-    React.createElement(StatusBar, { backgroundColor: colorBgBase, barStyle: "dark-content", translucent: true }),
-    React.createElement(Notifications, { contextId: MESSAGING_CONTEXT_ID, domain: DOMAIN, portalHostName: "Checkout" }),
-    React.createElement(PortalHost, { name: "Checkout" }),
-    children));
+const App = ({ children }) => {
+    const { colorBgBase } = theme();
+    return (React.createElement(SafeAreaProvider, null,
+        React.createElement(StatusBar, { backgroundColor: colorBgBase, barStyle: "dark-content", translucent: true }),
+        React.createElement(Notifications, { contextId: MESSAGING_CONTEXT_ID, domain: DOMAIN, portalHostName: "Checkout" }),
+        React.createElement(PortalHost, { name: "Checkout" }),
+        children));
+};
 export { App };

package/dist/src/infrastructure/ui/views/checkout/Checkout.js

@@ -1,11 +1,11 @@
 import React, { useCallback, useMemo, useState } from "react";
 import { Platform, ScrollView, View } from "react-native";
 import { useNavigate } from "react-router-native";
-import { Box, Button, Layout as AuroraLayout, Spinner, Text, useDevice } from "@lookiero/aurora";
+import { Box, Button, Layout as AuroraLayout, Spinner, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { QueryStatus } from "@lookiero/messaging-react";
 import { Country } from "@lookiero/sty-psp-locale";
-import { Sticky } from "@lookiero/sty-psp-ui";
+import { Sticky, useScreenSize } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
 import { useViewPricingByCheckoutId } from "../../../projection/pricing/react/useViewPricingByCheckoutId";
@@ -21,14 +21,16 @@ import { DOMAIN, I18nMessages } from "../../i18n/i18n";
 import { Routes } from "../../routing/routes";
 import { ProductVariant } from "../shared/components/productVariant/ProductVariant";
 import { Pricing } from "../summary/components/pricing/Pricing";
-import { style } from "./Checkout.style";
+import { style as checkoutStyle } from "./Checkout.style";
 import { DeliveryBanner } from "./components/deliveryBanner/DeliveryBanner";
 import { PaymentInstrument } from "./components/paymentInstrument/PaymentInstrument";
 const Checkout = ({ layout: Layout, order, subscription, getAuthToken, useRedirect, onCheckoutFlowSuccess, }) => {
     const { customer: { customerId, country, segment }, basePath, } = useStaticInfo();
+    const screenSize = useScreenSize();
+    const isDektopScreen = screenSize === "L";
+    const style = useMemo(() => checkoutStyle(), []);
     const titleText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.CHECKOUT_TITLE });
     const submitButtonText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.CHECKOUT_PAY_BUTTON });
-    const { screen } = useDevice();
     const [pricingHeight, setPricingHeight] = useState(0);
     const handleOnPricingLayout = useCallback(({ height }) => setPricingHeight(height), []);
     const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
@@ -81,9 +83,9 @@ const Checkout = ({ layout: Layout, order, subscription, getAuthToken, useRedire
         } },
         React.createElement(ScrollView, { showsVerticalScrollIndicator: false, testID: "checkout-view" },
             hasReplacedCheckoutItem && React.createElement(DeliveryBanner, null),
-            React.createElement(AuroraLayout, { fullWidth: !screen.L, style: [screen.L && style.desktopLayoutSpacing, !screen.L && { paddingBottom: pricingHeight }] },
-                React.createElement(Box, { size: { L: "2/3" }, style: screen.L && style.desktopListSpacing },
-                    React.createElement(View, { style: [style.contentWrapper, screen.L && style.desktopContentWrapper] },
+            React.createElement(AuroraLayout, { fullWidth: !isDektopScreen, style: [isDektopScreen && style.desktopLayoutSpacing, !isDektopScreen && { paddingBottom: pricingHeight }] },
+                React.createElement(Box, { size: { L: "2/3" }, style: isDektopScreen && style.desktopListSpacing },
+                    React.createElement(View, { style: [style.contentWrapper, isDektopScreen && style.desktopContentWrapper] },
                         country === Country.NL && (React.createElement(View, { style: style.paymentSelectorNL },
                             React.createElement(PaymentInstrument, { useRedirect: useRedirect }))),
                         React.createElement(Text, { level: 3, style: style.title, heading: true }, titleText),
@@ -93,10 +95,10 @@ const Checkout = ({ layout: Layout, order, subscription, getAuthToken, useRedire
                                     : checkoutItem.productVariant.size })))),
                         country !== Country.NL && (React.createElement(View, { style: style.paymentSelector },
                             React.createElement(PaymentInstrument, { useRedirect: useRedirect }))))),
-                React.createElement(Box, { size: { L: "1/3" }, style: [style.resume, screen.L && style.desktopResume] }, pricing ? (React.createElement(View, { style: [style.princingWrapper, !screen.L && style.princingWrapperSmall] },
+                React.createElement(Box, { size: { L: "1/3" }, style: [style.resume, isDektopScreen && style.desktopResume] }, pricing ? (React.createElement(View, { style: [style.princingWrapper, !isDektopScreen && style.princingWrapperSmall] },
                     React.createElement(Pricing, { pricing: pricing, totalCheckoutItemsKept: checkoutItemsKept?.length || 0 }),
-                    screen.L ? (React.createElement(Button, { busy: checkoutFlowStatus === "loading", testID: "confirm-checkout-button", onPress: handleOnSubmit }, submitButtonText)) : null)) : null))),
-        pricing && !screen.L ? (React.createElement(Sticky, { style: style.sticky, onLayout: Platform.OS !== "web" ? handleOnPricingLayout : undefined },
+                    isDektopScreen ? (React.createElement(Button, { busy: checkoutFlowStatus === "loading", testID: "confirm-checkout-button", onPress: handleOnSubmit }, submitButtonText)) : null)) : null))),
+        pricing && !isDektopScreen ? (React.createElement(Sticky, { style: style.sticky, onLayout: Platform.OS !== "web" ? handleOnPricingLayout : undefined },
             React.createElement(Body, null,
                 React.createElement(Button, { busy: checkoutFlowStatus === "loading", testID: "confirm-checkout-button", small: true, onPress: handleOnSubmit }, submitButtonText)))) : null,
         paymentFlowComponent));

package/dist/src/infrastructure/ui/views/checkout/Checkout.style.d.ts

@@ -1,4 +1,4 @@
-declare const style: {
+declare const style: () => {
     contentWrapper: {
         backgroundColor: string;
         flexGrow: number;

package/dist/src/infrastructure/ui/views/checkout/Checkout.style.js

@@ -1,65 +1,67 @@
 import { StyleSheet, Platform } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 import { HEADER_HEIGHT } from "../../components/templates/header/Header.style";
-const { borderRadius4, colorBgPrimaryLight, colorBgBase, space2, space3, space4, space6, space12, space16 } = theme();
-const style = StyleSheet.create({
-    contentWrapper: {
-        backgroundColor: colorBgBase,
-        flexGrow: 0,
-        paddingHorizontal: space6,
-        paddingVertical: space6,
-    },
-    desktopContentWrapper: {
-        borderRadius: borderRadius4,
-        paddingVertical: space12,
-    },
-    desktopLayoutSpacing: {
-        paddingVertical: space12,
-    },
-    desktopListSpacing: {
-        paddingRight: space16,
-    },
-    desktopResume: {
-        borderRadius: borderRadius4,
-    },
-    header: {
-        height: HEADER_HEIGHT,
-    },
-    paymentSelector: {
-        marginTop: space6,
-    },
-    paymentSelectorNL: {
-        marginBottom: space6,
-    },
-    princingWrapper: {
-        padding: space6,
-    },
-    princingWrapperSmall: {
-        backgroundColor: colorBgPrimaryLight,
-        paddingBottom: space2,
-    },
-    resume: {
-        overflow: "hidden",
-        backgroundColor: colorBgBase,
-        ...Platform.select({
-            web: {
-                position: "sticky",
-                top: space12,
-                alignSelf: "flex-start",
-            },
-        }),
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    },
-    scrollView: {
-        backgroundColor: colorBgPrimaryLight,
-        flex: 1,
-    },
-    sticky: {
-        paddingBottom: space4,
-        paddingTop: space3,
-    },
-    title: {
-        marginBottom: space4,
-    },
-});
+const style = () => {
+    const { borderRadius4, colorBgPrimaryLight, colorBgBase, space2, space3, space4, space6, space12, space16 } = theme();
+    return StyleSheet.create({
+        contentWrapper: {
+            backgroundColor: colorBgBase,
+            flexGrow: 0,
+            paddingHorizontal: space6,
+            paddingVertical: space6,
+        },
+        desktopContentWrapper: {
+            borderRadius: borderRadius4,
+            paddingVertical: space12,
+        },
+        desktopLayoutSpacing: {
+            paddingVertical: space12,
+        },
+        desktopListSpacing: {
+            paddingRight: space16,
+        },
+        desktopResume: {
+            borderRadius: borderRadius4,
+        },
+        header: {
+            height: HEADER_HEIGHT,
+        },
+        paymentSelector: {
+            marginTop: space6,
+        },
+        paymentSelectorNL: {
+            marginBottom: space6,
+        },
+        princingWrapper: {
+            padding: space6,
+        },
+        princingWrapperSmall: {
+            backgroundColor: colorBgPrimaryLight,
+            paddingBottom: space2,
+        },
+        resume: {
+            overflow: "hidden",
+            backgroundColor: colorBgBase,
+            ...Platform.select({
+                web: {
+                    position: "sticky",
+                    top: space12,
+                    alignSelf: "flex-start",
+                },
+            }),
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        },
+        scrollView: {
+            backgroundColor: colorBgPrimaryLight,
+            flex: 1,
+        },
+        sticky: {
+            paddingBottom: space4,
+            paddingTop: space3,
+        },
+        title: {
+            marginBottom: space4,
+        },
+    });
+};
 export { style };

package/dist/src/infrastructure/ui/views/checkout/components/deliveryBanner/DeliveryBanner.js

@@ -1,9 +1,10 @@
 import React from "react";
-import { ALIGN, InfoBox, INFOBOX_TYPE, useDevice } from "@lookiero/aurora";
+import { ALIGN, InfoBox, INFOBOX_TYPE } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
+import { useScreenSize } from "@lookiero/sty-psp-ui";
 import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 const DeliveryBanner = () => {
-    const { screen } = useDevice();
-    return (React.createElement(InfoBox, { contentAlign: screen.L ? ALIGN.CENTER : undefined, testID: "delivery-banner", text: useI18nMessage({ domain: DOMAIN, id: I18nMessages.CHECKOUT_DELIVERY_BANNER }), type: INFOBOX_TYPE.SQUARED }));
+    const screenSize = useScreenSize();
+    return (React.createElement(InfoBox, { contentAlign: screenSize === "L" ? ALIGN.CENTER : undefined, testID: "delivery-banner", text: useI18nMessage({ domain: DOMAIN, id: I18nMessages.CHECKOUT_DELIVERY_BANNER }), type: INFOBOX_TYPE.SQUARED }));
 };
 export { DeliveryBanner };

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef } from "react";
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import { Spinner } from "@lookiero/aurora";
 import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
 import { useLogger } from "@lookiero/sty-psp-logging";
@@ -14,13 +14,14 @@ import { useTrackPressContinue } from "../../../tracking/useTrackPressContinue";
 import { Body } from "../../components/layouts/body/Body";
 import { CheckoutQuestionFeedbackProvider } from "../../components/organisms/checkoutQuestions/behaviors/useCheckoutQuestionFeedback";
 import { useStaticInfo } from "../../hooks/useStaticInfo";
-import { style } from "./Feedback.style";
+import { style as feedbackStyle } from "./Feedback.style";
 import { CheckoutQuestionsForm } from "./components/checkoutQuestionsForm/CheckoutQuestionsForm";
 const Feedback = ({ layout: Layout }) => {
     const logger = useLogger();
     const screenSize = useScreenSize();
     const isDesktop = screenSize === "L";
     const { customer: { customerId, country, segment }, } = useStaticInfo();
+    const style = useMemo(() => feedbackStyle(), []);
     const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
     const [checkoutQuestions, checkoutQuestionsStatus] = useListCheckoutQuestionsByCheckoutId({
         checkoutId: checkout?.id,

package/dist/src/infrastructure/ui/views/feedback/Feedback.style.d.ts

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