@lookiero/checkout 11.1.0 → 11.3.0

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,28 +1,29 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { Pressable, View } from "react-native";
-import { COLOR, Icon, Text } from "@lookiero/aurora";
+import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
-import { LazyImage } from "@lookiero/sty-psp-ui";
+import { Icon, LazyImage } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
 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,
                 React.createElement(LazyImage, { hiResSrc: cdnImageUrl({ url: media[0]?.url, width: IMAGE_WIDTH }), resizeMode: "contain", src: cdnImageUrl({ url: media[0]?.url, width: IMAGE_WIDTH, dpi: 1 }), style: { view: [style.media, customStyle?.image] }, testID: "product-variant-media" })),
             React.createElement(View, { style: style.descriptionContainer },
                 React.createElement(View, { style: style.infoProductVariant },
-                    React.createElement(Text, { color: COLOR.TEXT_MEDIUM, level: 2, detail: true }, brand),
+                    React.createElement(Text, { level: 2, style: style.text, detail: true }, brand),
                     React.createElement(Text, { level: 2, detail: true }, name),
-                    React.createElement(Text, { color: COLOR.TEXT_MEDIUM, level: 2, detail: true },
+                    React.createElement(Text, { level: 2, style: style.text, detail: true },
                         sizeProjection.unique ? uniqueText : size({ size: sizeProjection, country }),
                         " / ",
                         colorLabel),

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;
@@ -35,5 +35,8 @@ declare const style: {
         paddingHorizontal: number;
         paddingTop: number;
     };
+    text: {
+        color: string;
+    };
 };
 export { style, IMAGE_WIDTH };

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

@@ -1,43 +1,48 @@
 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 { borderRadius3, borderRadiusFull, borderWidth2, colorBgPrimaryLight, colorBgSurface, colorBorderInput, colorTextMedium, 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,
+        },
+        text: {
+            color: colorTextMedium,
+        },
+    });
+};
 export { style, IMAGE_WIDTH };

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

@@ -1,10 +1,10 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { Platform, ScrollView, View } from "react-native";
 import { generatePath, useMatch, useNavigate } from "react-router-native";
-import { Box, Text, Layout as AuroraLayout, useDevice, Spinner } from "@lookiero/aurora";
+import { Box, Text, Layout as AuroraLayout, Spinner } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { QueryStatus } from "@lookiero/messaging-react";
-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 { useViewFiveItemsDiscountByCustomerId } from "../../../projection/checkout/react/useViewFiveItemsDiscountByCustomerId";
@@ -18,16 +18,18 @@ 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 screenSize = useScreenSize();
+    const isDesktopScreen = screenSize === "L";
+    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 });
@@ -83,17 +85,17 @@ const Summary = ({ layout: Layout, children }) => {
         } },
         React.createElement(ScrollView, { showsVerticalScrollIndicator: false, testID: "summary-view" },
             fiveItemsDiscount !== 0 && React.createElement(FiveItemsDiscountBanner, { fiveItemsDiscount: fiveItemsDiscount }),
-            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(View, { style: !screen.L && style.mobileInfo },
+            React.createElement(AuroraLayout, { fullWidth: !isDesktopScreen, style: [isDesktopScreen && style.desktopLayoutSpacing, !isDesktopScreen && { paddingBottom: pricingHeight }] },
+                React.createElement(Box, { size: { L: "2/3" }, style: isDesktopScreen && style.desktopListSpacing },
+                    React.createElement(View, { style: [style.contentWrapper, isDesktopScreen && style.desktopContentWrapper] },
+                        React.createElement(View, { style: !isDesktopScreen && style.mobileInfo },
                             React.createElement(Text, { level: 3, style: style.title, heading: true }, titleText),
                             React.createElement(Text, { level: 3, style: style.description }, descriptionText)),
                         children)),
-                pricing && screen.L ? (React.createElement(Box, { size: { L: "1/3" }, style: [style.resume, screen.L ? style.desktopResume : style.mobileResume] },
+                pricing && isDesktopScreen ? (React.createElement(Box, { size: { L: "1/3" }, style: [style.resume, isDesktopScreen ? style.desktopResume : style.mobileResume] },
                     React.createElement(View, { style: style.princingWrapper },
                         React.createElement(CollapsiblePricing, { collapsed: false, collapsible: false, pricing: pricing, submitButtonText: submitButtonText, totalCheckoutItemsKept: totalCheckoutItemsKept, onSubmit: handleOnSubmit })))) : null)),
-        pricing && !screen.L ? (React.createElement(Sticky, { style: style.sticky, onLayout: Platform.OS !== "web" ? handleOnPricingLayout : undefined },
+        pricing && !isDesktopScreen ? (React.createElement(Sticky, { style: style.sticky, onLayout: Platform.OS !== "web" ? handleOnPricingLayout : undefined },
             React.createElement(Body, null,
                 React.createElement(CollapsiblePricing, { collapsed: pricingCollapsed, pricing: pricing, submitButtonText: submitButtonText, totalCheckoutItemsKept: totalCheckoutItemsKept, onPress: handleOnPressPricing, onSubmit: handleOnSubmit })))) : null));
 };

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,12 +1,13 @@
-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";
+import { Button, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
+import { Icon } from "@lookiero/sty-psp-ui";
 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 +22,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;

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

@@ -1,16 +1,18 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-const { space4, colorBgPrimary } = theme();
-const style = StyleSheet.create({
-    divider: {
-        backgroundColor: colorBgPrimary,
-        height: 1,
-        marginBottom: space4,
-    },
-    row: {
-        flexDirection: "row",
-        justifyContent: "space-between",
-        marginBottom: space4,
-    },
-});
+const style = () => {
+    const { space4, colorBgPrimary } = theme();
+    return StyleSheet.create({
+        divider: {
+            backgroundColor: colorBgPrimary,
+            height: 1,
+            marginBottom: space4,
+        },
+        row: {
+            flexDirection: "row",
+            justifyContent: "space-between",
+            marginBottom: space4,
+        },
+    });
+};
 export { style };