@lookiero/checkout 11.0.0 → 11.2.0

package/dist/src/ExpoRoot.js

@@ -11,7 +11,7 @@ import { PaymentsQueryProvider, setPaymentsBridge } from "@lookiero/payments-fro
 import { fetchTranslations, translationExternalEndpoint } from "@lookiero/sty-psp-i18n";
 import { Country, Locale } from "@lookiero/sty-psp-locale";
 import { Segment } from "@lookiero/sty-psp-segment";
-import { DummyLayout } from "@lookiero/sty-psp-ui";
+import { DummyLayout, themeByTradename } from "@lookiero/sty-psp-ui";
 import { Tradename } from "@lookiero/sty-sp-tradename";
 import { bootstrap as checkoutBootstrap } from "./infrastructure/delivery/bootstrap";
 import { bootstrap as checkoutMockBootstrap } from "./infrastructure/delivery/bootstrap.mock";
@@ -19,6 +19,8 @@ import { root } from "./infrastructure/ui/Root";
 import { DOMAIN } from "./infrastructure/ui/i18n/i18n";
 import { Router } from "./infrastructure/ui/routing/router/Router";
 import { VERSION } from "./version";
+const tradename = Tradename.LOOKIERO;
+const theme = themeByTradename({ tradename });
 const locale = Locale.es_ES;
 const subscription = "b";
 const order = {
@@ -27,7 +29,7 @@ const order = {
     coupon: "MYLOOKIERO",
 };
 const customer = {
-    customerId: "9cfb056e-6008-44b1-9075-320479bf92ac",
+    customerId: "dd186ec9-109f-418d-a770-c6721aa2a97e",
     country: Country.NL,
     segment: Segment.WOMEN,
     email: "email@example.com",
@@ -44,7 +46,7 @@ const apiUrl = Platform.OS !== "web"
     : __DEV__
         ? "/local-to-dev"
         : "/checkout/api";
-const authToken = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjU2NDk0NjYsImV4cCI6MTc0MjQ3MDI5OSwiZGlzcGxheU5hbWUiOiJNaWtlbCIsImNvdW50cnlfY29kZSI6IkVTIiwiYWNjZXNzVmlhIjoiZW1haWwiLCJzdWJzY3JpcHRpb25TdGFydGluZ0RhdGUiOiIyMDI0LTExLTExIiwiaW1wZXJzb25hdGVkIjpmYWxzZSwidXVpZCI6ImQzYzIzNTRiLTk4MTEtNDZkNC1iMmJhLTVmYmEwMTJlZDk0ZCIsImlhdCI6MTc0MDA1MTA5OX0.AkuUZTsn9mgplQwatg0dPKyv1Hsc6r267UMahxMH19g";
+const authToken = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjU2OTUxOTEsImV4cCI6MTc0ODA3NzU5NSwiZGlzcGxheU5hbWUiOiJUZXN0aW5nIiwiY291bnRyeV9jb2RlIjoiRVMiLCJhY2Nlc3NWaWEiOiJlbWFpbCIsInN1YnNjcmlwdGlvblN0YXJ0aW5nRGF0ZSI6IjIwMjUtMDQtMjQiLCJpbXBlcnNvbmF0ZWQiOmZhbHNlLCJ1dWlkIjoiZGQxODZlYzktMTA5Zi00MThkLWE3NzAtYzY3MjFhYTJhOTdlIiwidHJhZGVuYW1lIjoiTE9PS0lFUk8iLCJpYXQiOjE3NDU0ODU1OTV9.MHdtbMWX4lUU98ARiGALsUNkoqu1wKN7Qd-fCv6oqi4";
 const getAuthToken = () => Promise.resolve(authToken);
 const externalTranslationsUrl = Platform.OS !== "web"
     ? "https://backend-for-user.dev.envs.lookiero.tech/api/v2/translations"
@@ -103,9 +105,12 @@ const Root = root({
 })({ customerId: customer.customerId });
 const ExpoRoot = () => {
     const [fontsLoaded] = useFonts({
-        ["AreaInktrap-Semibold"]: require("@lookiero/aurora-fonts/AreaInktrap-Semibold.otf"),
-        ["AreaNormal-Semibold"]: require("@lookiero/aurora-fonts/AreaNormal-Semibold.otf"),
-        ["AreaNormal-Extrabold"]: require("@lookiero/aurora-fonts/AreaNormal-Extrabold.otf"),
+        ["AreaInktrap-Semibold"]: require("@lookiero/aurora/build/assets/fonts/AreaInktrap-Semibold.otf"),
+        ["AreaNormal-Semibold"]: require("@lookiero/aurora/build/assets/fonts/AreaNormal-Semibold.otf"),
+        ["AreaNormal-Extrabold"]: require("@lookiero/aurora/build/assets/fonts/AreaNormal-Extrabold.otf"),
+        ["OpenSans-Regular"]: require("@lookiero/aurora/build/assets/fonts/OpenSans-Regular.ttf"),
+        ["OpenSans-Bold"]: require("@lookiero/aurora/build/assets/fonts/OpenSans-Bold.ttf"),
+        ["DalaFloda-Bold"]: require("@lookiero/aurora/build/assets/fonts/DalaFloda-Bold.otf"),
         auroraicons: require("@lookiero/aurora-iconfont/dist/auroraicons.ttf"),
     });
     const [isAccessible, setIsAccessible] = useState();
@@ -113,11 +118,11 @@ const ExpoRoot = () => {
     return fontsLoaded ? (React.createElement(PortalProvider, null,
         React.createElement(PaymentsQueryProvider, null,
             React.createElement(EventProvider, null,
-                React.createElement(Aurora, null,
+                React.createElement(Aurora, { theme: theme },
                     isAccessible === false && React.createElement(Text, { heading: true }, "Checkout is not accessible!"),
                     React.createElement(Router, null,
                         React.createElement(Routes, null,
-                            React.createElement(Route, { path: "/checkout/*", element: React.createElement(Root, { basePath: "/checkout", customer: customer, layout: DummyLayout, locale: locale, order: order, subscription: subscription, tradename: Tradename.LOOKIERO, useRedirect: useRedirect, onCheckoutFlowSuccess: () => console.log("Checkout flow success!"), onNotAccessible: onNotAccessible }) }),
+                            React.createElement(Route, { path: "/checkout/*", element: React.createElement(Root, { basePath: "/checkout", customer: customer, layout: DummyLayout, locale: locale, order: order, subscription: subscription, tradename: tradename, useRedirect: useRedirect, onCheckoutFlowSuccess: () => console.log("Checkout flow success!"), onNotAccessible: onNotAccessible }) }),
                             React.createElement(Route, { element: React.createElement(Navigate, { to: "/checkout", replace: true }), path: "*" })))))))) : null;
 };
 export { ExpoRoot };

package/dist/src/infrastructure/ui/components/atoms/fiveItemsDiscountBanner/FiveItemsDiscountBanner.js

@@ -1,9 +1,10 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { ALIGN, DISPLAY, InfoBox, INFOBOX_TYPE, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { DOMAIN, I18nMessages } from "../../../i18n/i18n";
-import { style } from "./FiveItemsDiscountBanner.style";
+import { style as fiveItemsDiscountBannerStyle } from "./FiveItemsDiscountBanner.style";
 const FiveItemsDiscountBanner = ({ fiveItemsDiscount }) => {
+    const style = useMemo(() => fiveItemsDiscountBannerStyle(), []);
     const bannerText = useI18nMessage({
         domain: DOMAIN,
         id: I18nMessages.BANNER_DISCOUNT_TEXT,

package/dist/src/infrastructure/ui/components/atoms/fiveItemsDiscountBanner/FiveItemsDiscountBanner.style.d.ts

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

package/dist/src/infrastructure/ui/components/atoms/fiveItemsDiscountBanner/FiveItemsDiscountBanner.style.js

@@ -1,9 +1,11 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-const { fontMap } = theme();
-const style = StyleSheet.create({
-    textBold: {
-        fontFamily: fontMap.Action,
-    },
-});
+const style = () => {
+    const { fontMap } = theme();
+    return StyleSheet.create({
+        textBold: {
+            fontFamily: fontMap.Action,
+        },
+    });
+};
 export { style };

package/dist/src/infrastructure/ui/components/atoms/price/Price.js

@@ -1,9 +1,9 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { View } from "react-native";
 import { Text } from "@lookiero/aurora";
 import { useI18nNumber } from "@lookiero/i18n-react";
 import { DOMAIN } from "../../../i18n/i18n";
-import { style } from "./Price.style";
+import { style as priceStyle } from "./Price.style";
 const PRICE_VARIANT = {
     default: { detail: true, level: 1 },
     detail: { detail: true, level: 2 },
@@ -25,6 +25,7 @@ const Price = ({ price, variant = "default", withPercentage = false }) => {
         currency: price.currency,
     });
     const priceValue = isDiscounted ? productDiscountedPrice : productPrice;
+    const style = useMemo(() => priceStyle(), []);
     return (React.createElement(View, { style: style.price, testID: "price" },
         React.createElement(Text, { ...PRICE_VARIANT[variant], testID: "price-text" }, priceValue),
         isDiscounted && (React.createElement(View, { style: style.discountedPriceInfo },

package/dist/src/infrastructure/ui/components/atoms/price/Price.style.d.ts

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

package/dist/src/infrastructure/ui/components/atoms/price/Price.style.js

@@ -1,19 +1,21 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-const { colorTextError, colorTextMedium, space2 } = theme();
-const style = StyleSheet.create({
-    discountedPercentage: {
-        color: colorTextError,
-    },
-    discountedPriceInfo: {
-        alignItems: "flex-end",
-        marginLeft: space2,
-    },
-    discountedPriceText: {
-        color: colorTextMedium,
-    },
-    price: {
-        flexDirection: "row",
-    },
-});
+const style = () => {
+    const { colorTextError, colorTextMedium, space2 } = theme();
+    return StyleSheet.create({
+        discountedPercentage: {
+            color: colorTextError,
+        },
+        discountedPriceInfo: {
+            alignItems: "flex-end",
+            marginLeft: space2,
+        },
+        discountedPriceText: {
+            color: colorTextMedium,
+        },
+        price: {
+            flexDirection: "row",
+        },
+    });
+};
 export { style };

package/dist/src/infrastructure/ui/components/organisms/checkoutQuestions/components/buttonCheckoutQuestionItem/ButtonCheckoutQuestionItem.js

@@ -1,15 +1,16 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useMemo } from "react";
 import { TouchableOpacity } from "react-native";
 import { ALIGN, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { DOMAIN } from "../../../../../i18n/i18n";
 import { useCheckoutQuestionFeedbackForId } from "../../behaviors/useCheckoutQuestionFeedback";
-import { style } from "./ButtonCheckoutQuestionItem.style";
+import { style as buttonCheckoutQuestionItemStyle } from "./ButtonCheckoutQuestionItem.style";
 const ACTIVE_OPACITY = 0.6;
 const ButtonCheckoutQuestionItem = ({ checkoutQuestion, checkoutQuestionParentId, testID, }) => {
     const { feedback, onChange } = useCheckoutQuestionFeedbackForId({ id: checkoutQuestionParentId });
     const optionText = useI18nMessage({ domain: DOMAIN, id: checkoutQuestion.name });
     const handleOnPress = useCallback(() => onChange({ checkoutQuestionId: checkoutQuestionParentId, checkoutQuestionFeedback: checkoutQuestion.id }), [onChange, checkoutQuestion.id, checkoutQuestionParentId]);
+    const style = useMemo(() => buttonCheckoutQuestionItemStyle(), []);
     return (React.createElement(TouchableOpacity, { accessibilityLabel: testID, activeOpacity: ACTIVE_OPACITY, style: [style.button, feedback === checkoutQuestion.id && style.buttonActive], testID: testID, onPress: handleOnPress },
         React.createElement(Text, { align: ALIGN.CENTER, level: 3, style: feedback === checkoutQuestion.id && style.textActive, action: true }, optionText)));
 };

package/dist/src/infrastructure/ui/components/organisms/checkoutQuestions/components/buttonCheckoutQuestionItem/ButtonCheckoutQuestionItem.style.d.ts

@@ -1,4 +1,4 @@
-declare const style: {
+declare const style: () => {
     button: {
         alignContent: "center";
         borderColor: string;

package/dist/src/infrastructure/ui/components/organisms/checkoutQuestions/components/buttonCheckoutQuestionItem/ButtonCheckoutQuestionItem.style.js

@@ -1,25 +1,26 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-const { colorBorderActionSecondary, colorBgActionPrimaryActive, colorTextActionPrimary, borderWidth2, borderRadiusFull, space6, space16, } = theme();
-const HEIGHT = space16;
-const style = StyleSheet.create({
-    button: {
-        alignContent: "center",
-        borderColor: colorBorderActionSecondary,
-        borderRadius: borderRadiusFull,
-        borderWidth: borderWidth2,
-        flex: 1,
-        height: HEIGHT,
-        justifyContent: "center",
-        marginHorizontal: 12,
-        paddingLeft: space6,
-        paddingRight: space6,
-    },
-    buttonActive: {
-        backgroundColor: colorBgActionPrimaryActive,
-    },
-    textActive: {
-        color: colorTextActionPrimary,
-    },
-});
+const style = () => {
+    const { colorBorderActionSecondary, colorBgActionPrimaryActive, colorTextActionPrimary, borderWidth2, borderRadiusFull, space6, space16, } = theme();
+    return StyleSheet.create({
+        button: {
+            alignContent: "center",
+            borderColor: colorBorderActionSecondary,
+            borderRadius: borderRadiusFull,
+            borderWidth: borderWidth2,
+            flex: 1,
+            height: space16,
+            justifyContent: "center",
+            marginHorizontal: 12,
+            paddingLeft: space6,
+            paddingRight: space6,
+        },
+        buttonActive: {
+            backgroundColor: colorBgActionPrimaryActive,
+        },
+        textActive: {
+            color: colorTextActionPrimary,
+        },
+    });
+};
 export { style };

package/dist/src/infrastructure/ui/components/organisms/checkoutQuestions/components/hostDefaultCheckoutQuestionItem/HostDefaultCheckoutQuestionItem.js

@@ -1,11 +1,12 @@
-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 { DOMAIN } from "../../../../../i18n/i18n";
-import { style } from "./HostDefaultCheckoutQuestionItem.style";
+import { style as hostDefaultCheckoutQuestionItemStyle } from "./HostDefaultCheckoutQuestionItem.style";
 const HostDefaultCheckoutQuestionItem = ({ checkoutQuestion, children, }) => {
     const titleText = useI18nMessage({ domain: DOMAIN, id: checkoutQuestion.name });
+    const style = useMemo(() => hostDefaultCheckoutQuestionItemStyle(), []);
     return (React.createElement(React.Fragment, null,
         React.createElement(Text, { level: 3, style: style.title }, titleText),
         React.createElement(View, { style: style.content }, children)));

package/dist/src/infrastructure/ui/components/organisms/checkoutQuestions/components/hostDefaultCheckoutQuestionItem/HostDefaultCheckoutQuestionItem.style.d.ts

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

package/dist/src/infrastructure/ui/components/organisms/checkoutQuestions/components/hostDefaultCheckoutQuestionItem/HostDefaultCheckoutQuestionItem.style.js

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

package/dist/src/infrastructure/ui/components/organisms/checkoutQuestions/components/hostSelectCheckoutQuestionItem/HostSelectCheckoutQuestionItem.js

@@ -1,11 +1,12 @@
-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 { DOMAIN } from "../../../../../i18n/i18n";
-import { style } from "./HostSelectCheckoutQuestionItem.style";
+import { style as hostSelectCheckoutQuestionItemStyle } from "./HostSelectCheckoutQuestionItem.style";
 const HostSelectCheckoutQuestionItem = ({ checkoutQuestion, children, }) => {
     const titleText = useI18nMessage({ domain: DOMAIN, id: checkoutQuestion.name });
+    const style = useMemo(() => hostSelectCheckoutQuestionItemStyle(), []);
     return (React.createElement(React.Fragment, null,
         React.createElement(Text, { level: 3, style: style.title }, titleText),
         React.createElement(View, { style: style.content }, children)));

package/dist/src/infrastructure/ui/components/organisms/checkoutQuestions/components/hostSelectCheckoutQuestionItem/HostSelectCheckoutQuestionItem.style.d.ts

@@ -1,5 +1,5 @@
-declare const containerUnderlayColor: string;
-declare const style: {
+declare const style: () => {
+    containerUnderlayColor: string;
     content: {
         flexDirection: "row";
         justifyContent: "center";
@@ -9,4 +9,4 @@ declare const style: {
         marginBottom: number;
     };
 };
-export { style, containerUnderlayColor };
+export { style };

package/dist/src/infrastructure/ui/components/organisms/checkoutQuestions/components/hostSelectCheckoutQuestionItem/HostSelectCheckoutQuestionItem.style.js

@@ -1,15 +1,20 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-const { colorBgPrimaryLight, space6, space8 } = theme();
-const containerUnderlayColor = colorBgPrimaryLight;
-const style = StyleSheet.create({
-    content: {
-        flexDirection: "row",
-        justifyContent: "center",
-        marginBottom: space8,
-    },
-    title: {
-        marginBottom: space6,
-    },
-});
-export { style, containerUnderlayColor };
+const style = () => {
+    const { colorBgPrimaryLight, space6, space8 } = theme();
+    const styles = StyleSheet.create({
+        content: {
+            flexDirection: "row",
+            justifyContent: "center",
+            marginBottom: space8,
+        },
+        title: {
+            marginBottom: space6,
+        },
+    });
+    return {
+        ...styles,
+        containerUnderlayColor: colorBgPrimaryLight,
+    };
+};
+export { style };

package/dist/src/infrastructure/ui/components/organisms/checkoutQuestions/components/iconCheckoutQuestionItem/IconCheckoutQuestionItem.js

@@ -1,13 +1,11 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useMemo } from "react";
 import { Pressable } from "react-native";
 import invariant from "tiny-invariant";
-import { theme } from "@lookiero/sty-psp-ui";
 import { useCheckoutQuestionFeedbackForId } from "../../behaviors/useCheckoutQuestionFeedback";
-import { style } from "./IconCheckoutQuestionItem.style";
+import { style as iconCheckoutQuestionItemStyle } from "./IconCheckoutQuestionItem.style";
 import { Happy } from "./icons/Happy";
 import { Normal } from "./icons/Normal";
 import { Sad } from "./icons/Sad";
-const { colorBgPrimaryMediumLight } = theme();
 const ICON = {
     // eslint-disable-next-line @typescript-eslint/naming-convention
     "checkout_question.icon.bad": Sad,
@@ -18,11 +16,12 @@ const ICON = {
 };
 const IconCheckoutQuestionItem = ({ checkoutQuestion, checkoutQuestionParentId, testID, }) => {
     const Icon = ICON[checkoutQuestion.name];
+    const style = useMemo(() => iconCheckoutQuestionItemStyle(), []);
     const { feedback, onChange } = useCheckoutQuestionFeedbackForId({ id: checkoutQuestionParentId });
     const isSelected = feedback === checkoutQuestion.id;
     const handleOnPress = useCallback(() => onChange({ checkoutQuestionId: checkoutQuestionParentId, checkoutQuestionFeedback: checkoutQuestion.id }), [onChange, checkoutQuestion.id, checkoutQuestionParentId]);
     invariant(Icon, "CheckoutQuestion icon does not exist");
     return (React.createElement(Pressable, { accessibilityLabel: testID, testID: testID, onPress: handleOnPress },
-        React.createElement(Icon, { fill: isSelected ? colorBgPrimaryMediumLight : "none", strokeWidth: isSelected ? 2 : 1, style: style.icon })));
+        React.createElement(Icon, { fill: isSelected ? style.colorBgPrimaryMediumLight : "none", strokeWidth: isSelected ? 2 : 1, style: style.icon })));
 };
 export { IconCheckoutQuestionItem };

package/dist/src/infrastructure/ui/components/organisms/checkoutQuestions/components/iconCheckoutQuestionItem/IconCheckoutQuestionItem.style.d.ts

@@ -1,4 +1,5 @@
-declare const style: {
+declare const style: () => {
+    colorBgPrimaryMediumLight: string;
     icon: {
         marginHorizontal: number;
     };

package/dist/src/infrastructure/ui/components/organisms/checkoutQuestions/components/iconCheckoutQuestionItem/IconCheckoutQuestionItem.style.js

@@ -1,7 +1,15 @@
 import { StyleSheet } from "react-native";
-const style = StyleSheet.create({
-    icon: {
-        marginHorizontal: 12,
-    },
-});
+import { theme } from "@lookiero/sty-psp-ui";
+const style = () => {
+    const { colorBgPrimaryMediumLight } = theme();
+    const styles = StyleSheet.create({
+        icon: {
+            marginHorizontal: 12,
+        },
+    });
+    return {
+        ...styles,
+        colorBgPrimaryMediumLight,
+    };
+};
 export { style };

package/dist/src/infrastructure/ui/components/organisms/checkoutQuestions/components/textareaCheckoutQuestionItem/TextareaCheckoutQuestionItem.js

@@ -3,12 +3,13 @@ import { useI18n } from "@lookiero/i18n-react";
 import { InputField, TextInput } from "@lookiero/sty-psp-ui";
 import { DOMAIN } from "../../../../../i18n/i18n";
 import { useCheckoutQuestionFeedbackForId } from "../../behaviors/useCheckoutQuestionFeedback";
-import { style } from "./TextareaCheckoutQuestionItem.style";
+import { style as textareaCheckoutQuestionItemStyle } from "./TextareaCheckoutQuestionItem.style";
 const TextareaCheckoutQuestionItem = ({ checkoutQuestion, checkoutQuestionParentId, testID, }) => {
     const { formatMessage } = useI18n({ domain: DOMAIN });
     const placeholderText = useMemo(() => (checkoutQuestion.placeholder ? formatMessage({ id: checkoutQuestion.placeholder }) : ""), [formatMessage, checkoutQuestion.placeholder]);
     const { feedback, onChange } = useCheckoutQuestionFeedbackForId({ id: checkoutQuestionParentId });
     const handleOnChange = useCallback((value) => onChange({ checkoutQuestionId: checkoutQuestionParentId, checkoutQuestionFeedback: value }), [onChange, checkoutQuestionParentId]);
+    const style = useMemo(() => textareaCheckoutQuestionItemStyle(), []);
     return (React.createElement(InputField, { label: placeholderText, value: feedback, input: ({ onBlur, onFocus, style }) => (React.createElement(TextInput, { placeholder: placeholderText, style: style, testID: testID, textAlignVertical: "top", value: feedback, multiline: true, onBlur: onBlur, onChange: handleOnChange, onFocus: onFocus })), style: {
             inputField: style.inputField,
             input: { container: style.inputContainer, input: style.input },

package/dist/src/infrastructure/ui/components/organisms/checkoutQuestions/components/textareaCheckoutQuestionItem/TextareaCheckoutQuestionItem.style.d.ts

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

package/dist/src/infrastructure/ui/components/organisms/checkoutQuestions/components/textareaCheckoutQuestionItem/TextareaCheckoutQuestionItem.style.js

@@ -1,27 +1,29 @@
 import { Platform, StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-const { fontInputPaddingLeft, space2, space4 } = 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,
-    },
-});
+const style = () => {
+    const { fontInputPaddingLeft, space2, space4 } = 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,
+        },
+    });
+};
 export { style };

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/hostDefaultReturnQuestionItem/HostDefaultReturnQuestionItem.js

@@ -1,13 +1,14 @@
 /* eslint-disable react/prop-types */
-import React from "react";
+import React, { useMemo } from "react";
 import { Text, View } from "@lookiero/aurora";
 import { useI18n } from "@lookiero/i18n-react";
 import { returnQuestionWithTranslationKey } from "../../../../../../../projection/returnQuestion/returnQuestion.typeguard";
 import { DOMAIN, I18nMessages } from "../../../../../i18n/i18n";
-import { style } from "./HostDefaultReturnQuestionItem.style";
+import { style as hostDefaultReturnQuestionItemStyle } from "./HostDefaultReturnQuestionItem.style";
 const HostDefaultReturnQuestionItem = ({ returnQuestion, children, }) => {
     const { formatMessage } = useI18n({ domain: DOMAIN });
     const isAllOptions = returnQuestion.translationKey === I18nMessages.RETURN_QUESTION_MAIN_ALL_OPINION;
+    const style = useMemo(() => hostDefaultReturnQuestionItemStyle(), []);
     return (React.createElement(React.Fragment, null,
         returnQuestionWithTranslationKey(returnQuestion) && returnQuestion.translationKey !== " " && !isAllOptions ? (React.createElement(View, { style: style.title },
             React.createElement(Text, { level: 3, action: true }, formatMessage({ id: returnQuestion.translationKey })))) : null,

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/hostDefaultReturnQuestionItem/HostDefaultReturnQuestionItem.style.d.ts

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

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/hostDefaultReturnQuestionItem/HostDefaultReturnQuestionItem.style.js

@@ -1,12 +1,14 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-const { colorBgBase, space4, space6 } = theme();
-const style = StyleSheet.create({
-    title: {
-        backgroundColor: colorBgBase,
-        paddingBottom: space4,
-        paddingHorizontal: space6,
-        paddingTop: space6,
-    },
-});
+const style = () => {
+    const { colorBgBase, space4, space6 } = theme();
+    return StyleSheet.create({
+        title: {
+            backgroundColor: colorBgBase,
+            paddingBottom: space4,
+            paddingHorizontal: space6,
+            paddingTop: space6,
+        },
+    });
+};
 export { style };

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/hostRadioGroupReturnQuestionItem/HostRadioGroupReturnQuestionItem.d.ts

@@ -1,5 +1,4 @@
 import { ReturnQuestionType } from "../../../../../../../projection/returnQuestion/returnQuestion.constants";
 import { ReturnQuestionItem } from "../ReturnQuestionItem";
-import { style } from "./HostRadioGroupReturnQuestionItem.style";
 declare const HostRadioGroupReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.HOST_SELECT>;
-export { HostRadioGroupReturnQuestionItem, style };
+export { HostRadioGroupReturnQuestionItem };

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/hostRadioGroupReturnQuestionItem/HostRadioGroupReturnQuestionItem.js

@@ -4,13 +4,14 @@ import { View } from "react-native";
 import { Text } from "@lookiero/aurora";
 import { useI18n } from "@lookiero/i18n-react";
 import { DOMAIN } from "../../../../../i18n/i18n";
-import { style } from "./HostRadioGroupReturnQuestionItem.style";
+import { style as hostRadioGroupReturnQuestionItemStyle } from "./HostRadioGroupReturnQuestionItem.style";
 const HostRadioGroupReturnQuestionItem = ({ returnQuestion, children, testID, }) => {
     const { formatMessage } = useI18n({ domain: DOMAIN });
     const placeholderText = useMemo(() => (returnQuestion.metadata.placeholder ? formatMessage({ id: returnQuestion.metadata.placeholder }) : ""), [formatMessage, returnQuestion.metadata.placeholder]);
+    const style = useMemo(() => hostRadioGroupReturnQuestionItemStyle(), []);
     return (React.createElement(React.Fragment, null,
         React.createElement(View, { style: style.wrapper, testID: testID },
             React.createElement(Text, { level: 3, style: style.title, action: true }, placeholderText),
             children)));
 };
-export { HostRadioGroupReturnQuestionItem, style };
+export { HostRadioGroupReturnQuestionItem };

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/hostRadioGroupReturnQuestionItem/HostRadioGroupReturnQuestionItem.style.d.ts

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

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/hostRadioGroupReturnQuestionItem/HostRadioGroupReturnQuestionItem.style.js

@@ -1,14 +1,16 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-const { colorBgBase, space2, space6 } = theme();
-const style = StyleSheet.create({
-    title: {
-        marginBottom: space2,
-    },
-    wrapper: {
-        backgroundColor: colorBgBase,
-        marginBottom: space2,
-        padding: space6,
-    },
-});
+const style = () => {
+    const { colorBgBase, space2, space6 } = theme();
+    return StyleSheet.create({
+        title: {
+            marginBottom: space2,
+        },
+        wrapper: {
+            backgroundColor: colorBgBase,
+            marginBottom: space2,
+            padding: space6,
+        },
+    });
+};
 export { style };