@lookiero/checkout 11.0.0 → 11.2.0

package/dist/src/infrastructure/ui/views/return/components/productVariantPreview/ProductVariantPreview.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { Image } from "react-native";
 import { COLOR, Text, View, useDevice } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
@@ -7,7 +7,7 @@ import { size } from "../../../../../../projection/size/size";
 import { useMediaImage } from "../../../../hooks/useMediaImage";
 import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { Price } from "../price/Price";
-import { IMAGE_SIZE, style } from "./ProductVariantPreview.style";
+import { IMAGE_SIZE, style as productVariantPreviewStyle } from "./ProductVariantPreview.style";
 const ProductVariantPreview = ({ item, country }) => {
     const cdnImageUrl = useMediaImage();
     const { screen } = useDevice();
@@ -15,6 +15,7 @@ const ProductVariantPreview = ({ item, country }) => {
     const uniqueText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.ITEM_UNIQUE });
     const { productVariant: { media, brand, name, size: sizeProjection }, price, } = item;
     const mainImage = media.find((mediaElement) => mediaElement.perspective === "MAIN");
+    const style = useMemo(() => productVariantPreviewStyle(), []);
     return (React.createElement(View, { style: [style.wrapper, !screen.S && style.mobileWrapper], testID: "product-variant-preview" },
         React.createElement(Row, { style: style.row },
             React.createElement(Column, { size: { M: "2/3", L: "2/3" }, style: style.content },

package/dist/src/infrastructure/ui/views/return/components/productVariantPreview/ProductVariantPreview.style.d.ts

@@ -1,5 +1,5 @@
 declare const IMAGE_SIZE = 35;
-declare const style: {
+declare const style: () => {
     content: {
         flexDirection: "row";
     };

package/dist/src/infrastructure/ui/views/return/components/productVariantPreview/ProductVariantPreview.style.js

@@ -1,34 +1,36 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-const { borderRadius2, borderWidth1, colorBgBase, colorBorderInput, space2, space4 } = theme();
 const IMAGE_SIZE = 35;
-const style = StyleSheet.create({
-    content: {
-        flexDirection: "row",
-    },
-    image: {
-        borderRadius: borderRadius2,
-        width: IMAGE_SIZE,
-    },
-    info: {
-        flex: 1,
-        marginLeft: space2,
-    },
-    mobileWrapper: {
-        borderBottomWidth: borderWidth1,
-        borderColor: colorBorderInput,
-    },
-    price: {
-        justifyContent: "flex-end",
-    },
-    row: {
-        flex: 1,
-        justifyContent: "center",
-    },
-    wrapper: {
-        backgroundColor: colorBgBase,
-        flexDirection: "row",
-        padding: space4,
-    },
-});
+const style = () => {
+    const { borderRadius2, borderWidth1, colorBgBase, colorBorderInput, space2, space4 } = theme();
+    return StyleSheet.create({
+        content: {
+            flexDirection: "row",
+        },
+        image: {
+            borderRadius: borderRadius2,
+            width: IMAGE_SIZE,
+        },
+        info: {
+            flex: 1,
+            marginLeft: space2,
+        },
+        mobileWrapper: {
+            borderBottomWidth: borderWidth1,
+            borderColor: colorBorderInput,
+        },
+        price: {
+            justifyContent: "flex-end",
+        },
+        row: {
+            flex: 1,
+            justifyContent: "center",
+        },
+        wrapper: {
+            backgroundColor: colorBgBase,
+            flexDirection: "row",
+            padding: space4,
+        },
+    });
+};
 export { style, IMAGE_SIZE };

package/dist/src/infrastructure/ui/views/return/components/returnQuestionsForm/ReturnQuestionsForm.js

@@ -28,7 +28,7 @@ import { useStaticInfo } from "../../../../hooks/useStaticInfo";
 import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { Routes } from "../../../../routing/routes";
 import { ProductVariantPreview } from "../productVariantPreview/ProductVariantPreview";
-import { style } from "./ReturnQuestionsForm.style";
+import { style as returnQuestionsFormStyle } from "./ReturnQuestionsForm.style";
 const RETURN_QUESTION_FORM_PORTAL_HOST_NAME = "return-question-form-portal";
 const returnQuestionItems = {
     [ReturnQuestionType.HOST_DEFAULT]: HostDefaultReturnQuestionItem,
@@ -43,6 +43,7 @@ const ReturnQuestionsForm = ({ checkout, checkoutItem, country, layout: Layout,
     const { basePath } = useStaticInfo();
     const logger = useLogger();
     const { screen } = useDevice();
+    const style = useMemo(() => returnQuestionsFormStyle(), []);
     const titleText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.RETURN_QUESTIONS_TITLE });
     const descriptionText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.RETURN_QUESTIONS_DESCRIPTION });
     const submitButtonText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.RETURN_QUESTIONS_SUBMIT_BUTTON });
@@ -88,7 +89,7 @@ const ReturnQuestionsForm = ({ checkout, checkoutItem, country, layout: Layout,
         navigate(generatePath(`${basePath}/${Routes.ITEM}`, { id: nextItem.id }));
     }, [basePath, checkout.items, checkoutItem, feedback, navigate, returnCheckoutItem, trackPressNext, trackReturnItem]);
     const header = useMemo(() => (React.createElement(Box, { style: style.headerWrapper },
-        React.createElement(ItemDetailHeader, { onBack: handleOnBack }))), [handleOnBack]);
+        React.createElement(ItemDetailHeader, { onBack: handleOnBack }))), [handleOnBack, style.headerWrapper]);
     const dependenciesLoaded = checkoutItem && returnQuestions && returnCheckoutItemStatus !== CommandStatus.LOADING;
     if (!dependenciesLoaded) {
         return React.createElement(Spinner, null);

package/dist/src/infrastructure/ui/views/return/components/returnQuestionsForm/ReturnQuestionsForm.style.d.ts

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

package/dist/src/infrastructure/ui/views/return/components/returnQuestionsForm/ReturnQuestionsForm.style.js

@@ -1,52 +1,54 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 import { HEADER_HEIGHT } from "../../../../components/templates/header/Header.style";
-const { borderRadius5, colorBgPrimaryLight, colorBgBase, colorTextMedium, space1, space4, space6, space8 } = theme();
-const style = StyleSheet.create({
-    background: {
-        backgroundColor: colorBgPrimaryLight,
-    },
-    description: {
-        color: colorTextMedium,
-    },
-    desktopInfo: {
-        borderTopLeftRadius: borderRadius5,
-        borderTopRightRadius: borderRadius5,
-    },
-    desktopLayoutSpacing: {
-        paddingVertical: space8,
-    },
-    header: {
-        height: HEADER_HEIGHT,
-    },
-    headerWrapper: {
-        display: "flex",
-        flexDirection: "column",
-    },
-    info: {
-        backgroundColor: colorBgBase,
-        gap: space1,
-        paddingBottom: space4,
-        paddingHorizontal: space6,
-        paddingTop: space8,
-    },
-    layout: {
-        flex: 1,
-        justifyContent: "center",
-    },
-    safeAreaView: {
-        flex: 1,
-    },
-    scrollView: {
-        flex: 1,
-    },
-    submit: {
-        backgroundColor: colorBgBase,
-        padding: space6,
-    },
-    submitDesktop: {
-        borderBottomLeftRadius: borderRadius5,
-        borderBottomRightRadius: borderRadius5,
-    },
-});
+const style = () => {
+    const { borderRadius5, colorBgPrimaryLight, colorBgBase, colorTextMedium, space1, space4, space6, space8 } = theme();
+    return StyleSheet.create({
+        background: {
+            backgroundColor: colorBgPrimaryLight,
+        },
+        description: {
+            color: colorTextMedium,
+        },
+        desktopInfo: {
+            borderTopLeftRadius: borderRadius5,
+            borderTopRightRadius: borderRadius5,
+        },
+        desktopLayoutSpacing: {
+            paddingVertical: space8,
+        },
+        header: {
+            height: HEADER_HEIGHT,
+        },
+        headerWrapper: {
+            display: "flex",
+            flexDirection: "column",
+        },
+        info: {
+            backgroundColor: colorBgBase,
+            gap: space1,
+            paddingBottom: space4,
+            paddingHorizontal: space6,
+            paddingTop: space8,
+        },
+        layout: {
+            flex: 1,
+            justifyContent: "center",
+        },
+        safeAreaView: {
+            flex: 1,
+        },
+        scrollView: {
+            flex: 1,
+        },
+        submit: {
+            backgroundColor: colorBgBase,
+            padding: space6,
+        },
+        submitDesktop: {
+            borderBottomLeftRadius: borderRadius5,
+            borderBottomRightRadius: borderRadius5,
+        },
+    });
+};
 export { style };

package/dist/src/infrastructure/ui/views/shared/components/productVariant/ProductVariant.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { Pressable, View } from "react-native";
 import { COLOR, Icon, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
@@ -8,12 +8,13 @@ import { size } from "../../../../../../projection/size/size";
 import { Price } from "../../../../components/atoms/price/Price";
 import { useMediaImage } from "../../../../hooks/useMediaImage";
 import { COLOR_I18N_PREFIX, DOMAIN, I18nMessages } from "../../../../i18n/i18n";
-import { IMAGE_WIDTH, style } from "./ProductVariant.style";
+import { IMAGE_WIDTH, style as productVariantStyle } from "./ProductVariant.style";
 const ProductVariant = ({ media, brand, name, price, size: sizeProjection, color, status, country, style: customStyle, onPress, }) => {
     const uniqueText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.ITEM_UNIQUE });
     const colorLabel = useI18nMessage({ domain: DOMAIN, id: color.name, prefix: COLOR_I18N_PREFIX });
     const sizeChangeText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.PRODUCT_VARIANT_SIZE_CHANGE });
     const cdnImageUrl = useMediaImage();
+    const style = useMemo(() => productVariantStyle(), []);
     return (React.createElement(Pressable, { pointerEvents: onPress ? "auto" : "none", style: style.container, testID: "product-variant", onPress: onPress },
         React.createElement(View, { style: style.row },
             React.createElement(View, null,

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

@@ -1,5 +1,5 @@
 declare const IMAGE_WIDTH = 104;
-declare const style: {
+declare const style: () => {
     container: {
         alignItems: "flex-end";
         borderBottomColor: string;

package/dist/src/infrastructure/ui/views/shared/components/productVariant/ProductVariant.style.js

@@ -1,43 +1,45 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-const { colorBgSurface, borderRadius3, borderRadiusFull, borderWidth2, colorBorderInput, colorBgPrimaryLight, space05, space1, space2, space4, } = theme();
 const IMAGE_WIDTH = 104;
 const IMAGE_HEIGHT = 132;
-const style = StyleSheet.create({
-    container: {
-        alignItems: "flex-end",
-        borderBottomColor: colorBgPrimaryLight,
-        borderBottomWidth: 1,
-        flexDirection: "row",
-        justifyContent: "space-between",
-        paddingVertical: space4,
-    },
-    descriptionContainer: {
-        alignSelf: "stretch",
-        justifyContent: "space-between",
-        marginLeft: space2,
-    },
-    infoProductVariant: {
-        alignItems: "flex-start",
-    },
-    media: {
-        borderColor: colorBorderInput,
-        borderRadius: borderRadius3,
-        borderWidth: borderWidth2,
-        height: IMAGE_HEIGHT,
-        width: IMAGE_WIDTH,
-    },
-    row: {
-        alignItems: "flex-end",
-        flexDirection: "row",
-    },
-    sizeChange: {
-        backgroundColor: colorBgSurface,
-        borderRadius: borderRadiusFull,
-        marginTop: space4,
-        paddingBottom: space05,
-        paddingHorizontal: space2,
-        paddingTop: space1,
-    },
-});
+const style = () => {
+    const { colorBgSurface, borderRadius3, borderRadiusFull, borderWidth2, colorBorderInput, colorBgPrimaryLight, space05, space1, space2, space4, } = theme();
+    return StyleSheet.create({
+        container: {
+            alignItems: "flex-end",
+            borderBottomColor: colorBgPrimaryLight,
+            borderBottomWidth: 1,
+            flexDirection: "row",
+            justifyContent: "space-between",
+            paddingVertical: space4,
+        },
+        descriptionContainer: {
+            alignSelf: "stretch",
+            justifyContent: "space-between",
+            marginLeft: space2,
+        },
+        infoProductVariant: {
+            alignItems: "flex-start",
+        },
+        media: {
+            borderColor: colorBorderInput,
+            borderRadius: borderRadius3,
+            borderWidth: borderWidth2,
+            height: IMAGE_HEIGHT,
+            width: IMAGE_WIDTH,
+        },
+        row: {
+            alignItems: "flex-end",
+            flexDirection: "row",
+        },
+        sizeChange: {
+            backgroundColor: colorBgSurface,
+            borderRadius: borderRadiusFull,
+            marginTop: space4,
+            paddingBottom: space05,
+            paddingHorizontal: space2,
+            paddingTop: space1,
+        },
+    });
+};
 export { style, IMAGE_WIDTH };

package/dist/src/infrastructure/ui/views/summary/Summary.js

@@ -18,16 +18,17 @@ import { Body } from "../../components/layouts/body/Body";
 import { useStaticInfo } from "../../hooks/useStaticInfo";
 import { DOMAIN, I18nMessages } from "../../i18n/i18n";
 import { Routes } from "../../routing/routes";
-import { style } from "./Summary.style";
+import { style as summaryStyle } from "./Summary.style";
 import { CollapsiblePricing } from "./components/collapsiblePricing/CollapsiblePricing";
 const Summary = ({ layout: Layout, children }) => {
     const { customer: { customerId, country, segment }, basePath, } = useStaticInfo();
+    const { screen } = useDevice();
+    const style = useMemo(() => summaryStyle(), []);
     const [pricingCollapsed, setPricingCollapsed] = useState(true);
     const [pricingHeight, setPricingHeight] = useState(0);
     const titleText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_TITLE });
     const descriptionText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_DESCRIPTION });
     const submitButtonText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_SUBMIT_BUTTON });
-    const { screen } = useDevice();
     const [checkout] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
     const [pricing, pricingStatus] = useViewPricingByCheckoutId({ checkoutId: checkout?.id });
     const [fiveItemsDiscount = 0, fiveItemsDiscountStatus] = useViewFiveItemsDiscountByCustomerId({ customerId });

package/dist/src/infrastructure/ui/views/summary/Summary.style.d.ts

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

package/dist/src/infrastructure/ui/views/summary/Summary.style.js

@@ -1,74 +1,76 @@
 import { Platform, StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 import { HEADER_HEIGHT } from "../../components/templates/header/Header.style";
-const { colorTextMedium, colorText, colorBgPrimaryLight, space2, space3, space4, space6, space12, space16, borderRadius4, colorBgBase, } = theme();
-const style = StyleSheet.create({
-    contentWrapper: {
-        backgroundColor: colorBgBase,
-        flexGrow: 0,
-    },
-    description: {
-        color: colorTextMedium,
-        marginBottom: space6,
-    },
-    desktopContentWrapper: {
-        borderRadius: borderRadius4,
-        paddingHorizontal: space6,
-        paddingVertical: space12,
-    },
-    desktopLayoutSpacing: {
-        paddingVertical: space12,
-    },
-    desktopListSpacing: {
-        paddingRight: space16,
-    },
-    desktopResume: {
-        borderRadius: borderRadius4,
-    },
-    header: {
-        height: HEADER_HEIGHT,
-    },
-    mobileInfo: {
-        paddingHorizontal: space6,
-        paddingTop: space6,
-    },
-    mobileResume: {
-        shadowColor: colorText,
-        shadowOpacity: 0.15,
-        ...Platform.select({
-            web: {
-                shadowOffset: { width: 0, height: 8 },
-                shadowRadius: 18,
-                elevation: 0.5,
-            },
-        }),
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    },
-    princingWrapper: {
-        padding: space6,
-    },
-    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: space2,
-    },
-});
+const style = () => {
+    const { colorTextMedium, colorText, colorBgPrimaryLight, space2, space3, space4, space6, space12, space16, borderRadius4, colorBgBase, } = theme();
+    return StyleSheet.create({
+        contentWrapper: {
+            backgroundColor: colorBgBase,
+            flexGrow: 0,
+        },
+        description: {
+            color: colorTextMedium,
+            marginBottom: space6,
+        },
+        desktopContentWrapper: {
+            borderRadius: borderRadius4,
+            paddingHorizontal: space6,
+            paddingVertical: space12,
+        },
+        desktopLayoutSpacing: {
+            paddingVertical: space12,
+        },
+        desktopListSpacing: {
+            paddingRight: space16,
+        },
+        desktopResume: {
+            borderRadius: borderRadius4,
+        },
+        header: {
+            height: HEADER_HEIGHT,
+        },
+        mobileInfo: {
+            paddingHorizontal: space6,
+            paddingTop: space6,
+        },
+        mobileResume: {
+            shadowColor: colorText,
+            shadowOpacity: 0.15,
+            ...Platform.select({
+                web: {
+                    shadowOffset: { width: 0, height: 8 },
+                    shadowRadius: 18,
+                    elevation: 0.5,
+                },
+            }),
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        },
+        princingWrapper: {
+            padding: space6,
+        },
+        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: space2,
+        },
+    });
+};
 export { style };

package/dist/src/infrastructure/ui/views/summary/components/collapsiblePricing/CollapsiblePricing.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { Pressable, View } from "react-native";
 import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
 import { Button, Icon, Text } from "@lookiero/aurora";
@@ -6,7 +6,7 @@ import { useI18nMessage } from "@lookiero/i18n-react";
 import { Price } from "../../../../components/atoms/price/Price";
 import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { Pricing } from "../pricing/Pricing";
-import { style } from "./CollapsiblePricing.style";
+import { style as collapsiblePricingStyle } from "./CollapsiblePricing.style";
 const CollapsiblePricing = ({ pricing, totalCheckoutItemsKept, collapsible = true, collapsed = false, submitButtonText, onPress = () => void 0, onSubmit, }) => {
     const { pendingToPay } = pricing;
     const totalText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_TOTAL });
@@ -21,6 +21,7 @@ const CollapsiblePricing = ({ pricing, totalCheckoutItemsKept, collapsible = tru
     const notCollapsedOpacity = useSharedValue(collapsed ? 0 : 1);
     notCollapsedOpacity.value = collapsed ? 0 : 1;
     const notCollapsedAnimatedStyle = useAnimatedStyle(() => ({ opacity: withTiming(notCollapsedOpacity.value) }), [notCollapsedOpacity.value]);
+    const style = useMemo(() => collapsiblePricingStyle(), []);
     return (React.createElement(React.Fragment, null,
         collapsible && (React.createElement(Pressable, { style: style.iconContainer, testID: "pricing-collapsed", onPress: onPress }, collapsed ? (React.createElement(Icon, { name: "arrow_up_small", testID: "arrow-up" })) : (React.createElement(Icon, { name: "arrow_down_small", testID: "arrow-down" })))),
         collapsed && collapsible ? (React.createElement(Animated.View, { key: "collapsed", style: [style.collapsed, collapsedAnimatedStyle] },

package/dist/src/infrastructure/ui/views/summary/components/collapsiblePricing/CollapsiblePricing.style.d.ts

@@ -1,4 +1,4 @@
-declare const style: {
+declare const style: () => {
     collapsed: {
         flexDirection: "row";
         justifyContent: "space-between";

package/dist/src/infrastructure/ui/views/summary/components/collapsiblePricing/CollapsiblePricing.style.js

@@ -1,21 +1,23 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-const { space1, space3 } = theme();
-const style = StyleSheet.create({
-    collapsed: {
-        flexDirection: "row",
-        justifyContent: "space-between",
-    },
-    collapsedContent: {
-        flex: 1,
-        marginBottom: space1,
-    },
-    iconContainer: {
-        alignItems: "center",
-        marginBottom: space3,
-    },
-    totalCollapsed: {
-        marginBottom: space1,
-    },
-});
+const style = () => {
+    const { space1, space3 } = theme();
+    return StyleSheet.create({
+        collapsed: {
+            flexDirection: "row",
+            justifyContent: "space-between",
+        },
+        collapsedContent: {
+            flex: 1,
+            marginBottom: space1,
+        },
+        iconContainer: {
+            alignItems: "center",
+            marginBottom: space3,
+        },
+        totalCollapsed: {
+            marginBottom: space1,
+        },
+    });
+};
 export { style };

package/dist/src/infrastructure/ui/views/summary/components/pricing/Pricing.js

@@ -1,15 +1,19 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { View } from "react-native";
 import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { Price } from "../../../../components/atoms/price/Price";
 import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
-import { style } from "./Pricing.style";
-const Row = ({ action = false, text, level = 3, children }) => (React.createElement(View, { style: style.row },
-    React.createElement(Text, { action: action, level: level }, text),
-    children));
+import { style as pricingStyle } from "./Pricing.style";
+const Row = ({ action = false, text, level = 3, children }) => {
+    const style = useMemo(() => pricingStyle(), []);
+    return (React.createElement(View, { style: style.row },
+        React.createElement(Text, { action: action, level: level }, text),
+        children));
+};
 const Pricing = ({ pricing, totalCheckoutItemsKept }) => {
     const { pendingToPay, subtotal, balanceDiscount, discount, discountPercentage = 0, service } = pricing;
+    const style = useMemo(() => pricingStyle(), []);
     const totalText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_TOTAL });
     const totalCheckoutItemsKeptText = useI18nMessage({
         domain: DOMAIN,

package/dist/src/infrastructure/ui/views/summary/components/pricing/Pricing.style.d.ts

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