@lookiero/checkout 11.1.0 → 11.3.0

package/dist/src/Expo.js

@@ -1,12 +1,6 @@
 import { registerRootComponent } from "expo";
-import React from "react";
 import { enableLegacyWebImplementation } from "react-native-gesture-handler";
 import "react-native-get-random-values";
-import { setTheme } from "@lookiero/sty-psp-ui";
-import { Tradename } from "@lookiero/sty-sp-tradename";
+import { ExpoRoot } from "./ExpoRoot";
 enableLegacyWebImplementation(true);
-const tradename = Tradename.LOOKIERO;
-setTheme({ tradename });
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const { ExpoRoot } = require("./ExpoRoot");
-registerRootComponent(() => React.createElement(ExpoRoot, { tradename: tradename }));
+registerRootComponent(ExpoRoot);

package/dist/src/ExpoRoot.d.ts

@@ -1,8 +1,4 @@
 import "expo/build/Expo.fx";
 import { FC } from "react";
-import { Tradename } from "@lookiero/sty-sp-tradename";
-interface ExpoRootProps {
-    readonly tradename: Tradename;
-}
-declare const ExpoRoot: FC<ExpoRootProps>;
+declare const ExpoRoot: FC;
 export { ExpoRoot };

package/dist/src/ExpoRoot.js

@@ -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"
@@ -54,7 +56,7 @@ const externalTranslationsUrl = Platform.OS !== "web"
 const translations = [
     (locale) => translationExternalEndpoint({
         translationsUrl: externalTranslationsUrl,
-        projects: [["checkout"]],
+        projects: [["checkout"], ["inventory-catalog"]],
     })(locale),
 ];
 const useRedirect = () => ({
@@ -101,7 +103,7 @@ const Root = root({
     sentry: () => (process.env.EXPO_PUBLIC_APP_VARIANT === "test" ? {} : sentryConfig),
     kameleoon: () => kameleoonConfig,
 })({ customerId: customer.customerId });
-const ExpoRoot = ({ tradename }) => {
+const ExpoRoot = () => {
     const [fontsLoaded] = useFonts({
         ["AreaInktrap-Semibold"]: require("@lookiero/aurora/build/assets/fonts/AreaInktrap-Semibold.otf"),
         ["AreaNormal-Semibold"]: require("@lookiero/aurora/build/assets/fonts/AreaNormal-Semibold.otf"),
@@ -113,7 +115,6 @@ const ExpoRoot = ({ tradename }) => {
     });
     const [isAccessible, setIsAccessible] = useState();
     const onNotAccessible = useCallback(() => setIsAccessible(false), []);
-    const theme = themeByTradename({ tradename });
     return fontsLoaded ? (React.createElement(PortalProvider, null,
         React.createElement(PaymentsQueryProvider, null,
             React.createElement(EventProvider, null,
@@ -121,7 +122,7 @@ const ExpoRoot = ({ tradename }) => {
                     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,16 +1,18 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useMemo } from "react";
 import { TouchableOpacity } from "react-native";
-import { ALIGN, Text } from "@lookiero/aurora";
+import { 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]);
-    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)));
+    const style = useMemo(() => buttonCheckoutQuestionItemStyle(), []);
+    const checked = feedback === checkoutQuestion.id;
+    return (React.createElement(TouchableOpacity, { accessibilityLabel: testID, activeOpacity: ACTIVE_OPACITY, style: [style.button, checked && style.buttonActive], testID: testID, onPress: handleOnPress },
+        React.createElement(Text, { level: 3, style: [style.text, checked && style.textActive], action: true }, optionText)));
 };
 export { ButtonCheckoutQuestionItem };

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;
@@ -14,6 +14,9 @@ declare const style: {
     buttonActive: {
         backgroundColor: string;
     };
+    text: {
+        textAlign: "center";
+    };
     textActive: {
         color: string;
     };

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

@@ -1,25 +1,29 @@
 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,
+        },
+        text: {
+            textAlign: "center",
+        },
+        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, { color: style.colorIcon, 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,6 @@
-declare const style: {
+declare const style: () => {
+    colorBgPrimaryMediumLight: string;
+    colorIcon: string;
     icon: {
         marginHorizontal: number;
     };

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

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

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

@@ -1,8 +1,8 @@
 import React from "react";
 import Svg, { Circle, Path } from "react-native-svg";
-const Happy = ({ strokeWidth = 1, ...props }) => (React.createElement(Svg, { fill: "none", height: 48, width: 48, ...props },
-    React.createElement(Circle, { cx: 24, cy: 24, r: 23, stroke: "#000", strokeWidth: strokeWidth }),
-    React.createElement(Circle, { cx: 16, cy: 17, fill: "#000", r: 2 }),
-    React.createElement(Circle, { cx: 32, cy: 17, fill: "#000", r: 2 }),
-    React.createElement(Path, { d: "M14 28.5s3 6 10 6 10-6 10-6", stroke: "#000", strokeWidth: strokeWidth })));
+const Happy = ({ strokeWidth = 1, color, ...props }) => (React.createElement(Svg, { fill: "none", height: 48, width: 48, ...props },
+    React.createElement(Circle, { cx: 24, cy: 24, r: 23, stroke: color, strokeWidth: strokeWidth }),
+    React.createElement(Circle, { cx: 16, cy: 17, fill: color, r: 2 }),
+    React.createElement(Circle, { cx: 32, cy: 17, fill: color, r: 2 }),
+    React.createElement(Path, { d: "M14 28.5s3 6 10 6 10-6 10-6", stroke: color, strokeWidth: strokeWidth })));
 export { Happy };

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

@@ -1,8 +1,8 @@
 import React from "react";
 import Svg, { Circle, Path } from "react-native-svg";
-const Normal = ({ strokeWidth = 1, ...props }) => (React.createElement(Svg, { fill: "none", height: 48, width: 48, ...props },
-    React.createElement(Circle, { cx: 24, cy: 24, r: 23, stroke: "#000", strokeWidth: strokeWidth }),
-    React.createElement(Circle, { cx: 16, cy: 17, fill: "#000", r: 2 }),
-    React.createElement(Circle, { cx: 32, cy: 17, fill: "#000", r: 2 }),
-    React.createElement(Path, { d: "M15 31h19v1H15z", fill: "#000", strokeWidth: strokeWidth })));
+const Normal = ({ strokeWidth = 1, color, ...props }) => (React.createElement(Svg, { fill: "none", height: 48, width: 48, ...props },
+    React.createElement(Circle, { cx: 24, cy: 24, r: 23, stroke: color, strokeWidth: strokeWidth }),
+    React.createElement(Circle, { cx: 16, cy: 17, fill: color, r: 2 }),
+    React.createElement(Circle, { cx: 32, cy: 17, fill: color, r: 2 }),
+    React.createElement(Path, { d: "M15 31.5H34", stroke: color, strokeWidth: strokeWidth })));
 export { Normal };

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

@@ -1,8 +1,8 @@
 import React from "react";
 import Svg, { Circle, Path } from "react-native-svg";
-const Sad = ({ strokeWidth = 1, ...props }) => (React.createElement(Svg, { fill: "none", height: 48, width: 48, ...props },
-    React.createElement(Circle, { cx: 24, cy: 24, r: 23, stroke: "#000", strokeWidth: strokeWidth }),
-    React.createElement(Circle, { cx: 16, cy: 17, fill: "#000", r: 2 }),
-    React.createElement(Circle, { cx: 32, cy: 17, fill: "#000", r: 2 }),
-    React.createElement(Path, { d: "M14 33.5s3-6 10-6 10 6 10 6", stroke: "#000", strokeWidth: strokeWidth })));
+const Sad = ({ strokeWidth = 1, color, ...props }) => (React.createElement(Svg, { fill: "none", height: 48, width: 48, ...props },
+    React.createElement(Circle, { cx: 24, cy: 24, r: 23, stroke: color, strokeWidth: strokeWidth }),
+    React.createElement(Circle, { cx: 16, cy: 17, fill: color, r: 2 }),
+    React.createElement(Circle, { cx: 32, cy: 17, fill: color, r: 2 }),
+    React.createElement(Path, { d: "M14 33.5s3-6 10-6 10 6 10 6", stroke: color, strokeWidth: strokeWidth })));
 export { Sad };

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,15 @@
 /* eslint-disable react/prop-types */
-import React from "react";
-import { Text, View } from "@lookiero/aurora";
+import React, { useMemo } from "react";
+import { View } from "react-native";
+import { Text } 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;