@lookiero/checkout 11.0.0 → 11.2.0

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 };

package/dist/src/infrastructure/ui/views/summaryTabs/components/checkoutItemsTabs/CheckoutItemsTabs.js

@@ -6,11 +6,12 @@ import { Tabs } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
 import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { ProductVariant } from "../../../shared/components/productVariant/ProductVariant";
-import { style } from "./CheckoutItemsTabs.style";
+import { style as checkoutItemsTabsStyle } from "./CheckoutItemsTabs.style";
 const CheckoutItem = ({ checkoutItemStatus, checkoutItemProductVariant, checkoutItemPrice, country, testID, style: customStyle, onPress, }) => (React.createElement(View, { testID: testID },
     React.createElement(ProductVariant, { brand: checkoutItemProductVariant.brand, color: checkoutItemProductVariant.color, country: country, media: checkoutItemProductVariant.media, name: checkoutItemProductVariant.name, price: checkoutItemPrice, size: checkoutItemProductVariant.size, status: checkoutItemStatus, style: customStyle, onPress: onPress })));
 const CheckoutItemsTabs = ({ tabIndex, checkoutItemsKept, checkoutItemsReturned, country, onPressItem, onChanged, }) => {
     const { screen } = useDevice();
+    const style = useMemo(() => checkoutItemsTabsStyle(), []);
     const keepTabText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_KEEP_TAB });
     const returnTabText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_RETURN_TAB });
     const keepEmptyText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_KEEP_EMPTY });
@@ -19,7 +20,15 @@ const CheckoutItemsTabs = ({ tabIndex, checkoutItemsKept, checkoutItemsReturned,
     const data = useMemo(() => [{ id: "0" }, { id: "1" }], []);
     const renderItem = useCallback(({ index }) => index === 0 ? (checkoutItemsKept.length === 0 ? (React.createElement(Text, { style: style.emptyText }, keepEmptyText)) : (React.createElement(React.Fragment, null, checkoutItemsKept.map((checkoutItem) => (React.createElement(CheckoutItem, { key: checkoutItem.id, checkoutItemPrice: checkoutItem.price, checkoutItemStatus: checkoutItem.status, country: country, testID: "keep-checkout-item", checkoutItemProductVariant: checkoutItem.status === CheckoutItemStatus.REPLACED && checkoutItem.replacedFor
             ? checkoutItem.replacedFor
-            : checkoutItem.productVariant, onPress: () => handleOnPressItem(checkoutItem.id) })))))) : checkoutItemsReturned.length === 0 ? (React.createElement(Text, { style: style.emptyText }, returnEmptyText)) : (React.createElement(React.Fragment, null, checkoutItemsReturned.map((checkoutItem) => (React.createElement(CheckoutItem, { key: checkoutItem.id, checkoutItemPrice: checkoutItem.price, checkoutItemProductVariant: checkoutItem.productVariant, checkoutItemStatus: checkoutItem.status, country: country, testID: "return-checkout-item", onPress: () => handleOnPressItem(checkoutItem.id) }))))), [checkoutItemsKept, checkoutItemsReturned, country, handleOnPressItem, keepEmptyText, returnEmptyText]);
+            : checkoutItem.productVariant, onPress: () => handleOnPressItem(checkoutItem.id) })))))) : checkoutItemsReturned.length === 0 ? (React.createElement(Text, { style: style.emptyText }, returnEmptyText)) : (React.createElement(React.Fragment, null, checkoutItemsReturned.map((checkoutItem) => (React.createElement(CheckoutItem, { key: checkoutItem.id, checkoutItemPrice: checkoutItem.price, checkoutItemProductVariant: checkoutItem.productVariant, checkoutItemStatus: checkoutItem.status, country: country, testID: "return-checkout-item", onPress: () => handleOnPressItem(checkoutItem.id) }))))), [
+        checkoutItemsKept,
+        checkoutItemsReturned,
+        country,
+        handleOnPressItem,
+        keepEmptyText,
+        returnEmptyText,
+        style.emptyText,
+    ]);
     return (React.createElement(Tabs, { data: data, defaultIndex: tabIndex, tabLabels: [`${keepTabText} (${checkoutItemsKept.length})`, `${returnTabText} (${checkoutItemsReturned.length})`], style: {
             carousel: [style.carousel, screen.L && style.carouselDesktop],
             tabList: { tabList: [style.tabList, screen.L && style.tabListDesktop], tab: { tabText: style.tabText } },

package/dist/src/infrastructure/ui/views/summaryTabs/components/checkoutItemsTabs/CheckoutItemsTabs.style.d.ts

@@ -1,4 +1,4 @@
-declare const style: {
+declare const style: () => {
     carousel: {
         paddingBottom: number;
         paddingHorizontal: number;

package/dist/src/infrastructure/ui/views/summaryTabs/components/checkoutItemsTabs/CheckoutItemsTabs.style.js

@@ -1,30 +1,32 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-const { space2, space4, space6, colorBorderInput, fontDetailSize1, fontDetailHeight1 } = theme();
-const style = StyleSheet.create({
-    carousel: {
-        paddingBottom: space6,
-        paddingHorizontal: space6,
-        paddingTop: space2,
-    },
-    carouselDesktop: {
-        paddingHorizontal: 0,
-    },
-    emptyText: {
-        paddingTop: space4,
-    },
-    tabList: {
-        borderBottomColor: colorBorderInput,
-        borderBottomWidth: 1,
-        justifyContent: "flex-start",
-        paddingHorizontal: space4,
-    },
-    tabListDesktop: {
-        paddingHorizontal: 0,
-    },
-    tabText: {
-        fontSize: fontDetailSize1,
-        lineHeight: fontDetailHeight1,
-    },
-});
+const style = () => {
+    const { space2, space4, space6, colorBorderInput, fontDetailSize1, fontDetailHeight1 } = theme();
+    return StyleSheet.create({
+        carousel: {
+            paddingBottom: space6,
+            paddingHorizontal: space6,
+            paddingTop: space2,
+        },
+        carouselDesktop: {
+            paddingHorizontal: 0,
+        },
+        emptyText: {
+            paddingTop: space4,
+        },
+        tabList: {
+            borderBottomColor: colorBorderInput,
+            borderBottomWidth: 1,
+            justifyContent: "flex-start",
+            paddingHorizontal: space4,
+        },
+        tabListDesktop: {
+            paddingHorizontal: 0,
+        },
+        tabText: {
+            fontSize: fontDetailSize1,
+            lineHeight: fontDetailHeight1,
+        },
+    });
+};
 export { style };

package/dist/src/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "11.0.0";
+export declare const VERSION = "11.2.0";

package/dist/src/version.js

@@ -1 +1 @@
-export const VERSION = "11.0.0";
+export const VERSION = "11.2.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "11.0.0",
+  "version": "11.2.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": "false",
@@ -27,13 +27,13 @@
     "@lookiero/sty-psp-i18n": "^0.4",
     "@lookiero/sty-psp-locale": "^0.4",
     "@lookiero/sty-psp-logging": "^0.5",
-    "@lookiero/sty-psp-notifications": "^0.8",
+    "@lookiero/sty-psp-notifications": "^1.0",
     "@lookiero/sty-psp-react-native": "^0.3",
     "@lookiero/sty-psp-segment": "^0.1",
     "@lookiero/sty-psp-storage": "^0.2",
     "@lookiero/sty-psp-tracking": "^0.2",
     "@lookiero/sty-sp-tradename": "^1.0",
-    "@lookiero/sty-psp-ui": "^0.7",
+    "@lookiero/sty-psp-ui": "^1.0",
     "@lookiero/sty-psp-ui-settings": "^0.2",
     "@lookiero/sty-psp-units": "^0.1",
     "@lookiero/sty-psp-uuid": "^0.2",
@@ -71,7 +71,6 @@
   "peerDependencies": {
     "@gorhom/portal": ">=1.0",
     "@lookiero/aurora": ">=6",
-    "@lookiero/aurora-fonts": ">=2",
     "@lookiero/aurora-iconfont": ">=3",
     "@lookiero/event": "^0.3",
     "@lookiero/i18n": ">=2",

package/src/ExpoRoot.tsx

@@ -13,7 +13,7 @@ import { fetchTranslations, translationExternalEndpoint } from "@lookiero/sty-ps
 import { Country, Locale } from "@lookiero/sty-psp-locale";
 import { SentryEnvironment } from "@lookiero/sty-psp-logging";
 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 { KameleoonEnvironment } from "./infrastructure/ab-testing/kameleoonEnvironment";
 import { bootstrap as checkoutBootstrap } from "./infrastructure/delivery/bootstrap";
@@ -26,6 +26,8 @@ import { OrderProjection } from "./projection/order/order";
 import { SubscriptionProjection } from "./projection/subscription/subscription";
 import { VERSION } from "./version";
 
+const tradename = Tradename.LOOKIERO;
+const theme = themeByTradename({ tradename });
 const locale: Locale = Locale.es_ES;
 const subscription: SubscriptionProjection = "b";
 const order: OrderProjection = {
@@ -35,7 +37,7 @@ const order: OrderProjection = {
 };
 
 const customer: Customer = {
-  customerId: "9cfb056e-6008-44b1-9075-320479bf92ac",
+  customerId: "dd186ec9-109f-418d-a770-c6721aa2a97e",
   country: Country.NL,
   segment: Segment.WOMEN,
   email: "email@example.com",
@@ -56,7 +58,7 @@ const apiUrl =
       ? "/local-to-dev"
       : "/checkout/api";
 const authToken =
-  "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjU2NDk0NjYsImV4cCI6MTc0MjQ3MDI5OSwiZGlzcGxheU5hbWUiOiJNaWtlbCIsImNvdW50cnlfY29kZSI6IkVTIiwiYWNjZXNzVmlhIjoiZW1haWwiLCJzdWJzY3JpcHRpb25TdGFydGluZ0RhdGUiOiIyMDI0LTExLTExIiwiaW1wZXJzb25hdGVkIjpmYWxzZSwidXVpZCI6ImQzYzIzNTRiLTk4MTEtNDZkNC1iMmJhLTVmYmEwMTJlZDk0ZCIsImlhdCI6MTc0MDA1MTA5OX0.AkuUZTsn9mgplQwatg0dPKyv1Hsc6r267UMahxMH19g";
+  "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjU2OTUxOTEsImV4cCI6MTc0ODA3NzU5NSwiZGlzcGxheU5hbWUiOiJUZXN0aW5nIiwiY291bnRyeV9jb2RlIjoiRVMiLCJhY2Nlc3NWaWEiOiJlbWFpbCIsInN1YnNjcmlwdGlvblN0YXJ0aW5nRGF0ZSI6IjIwMjUtMDQtMjQiLCJpbXBlcnNvbmF0ZWQiOmZhbHNlLCJ1dWlkIjoiZGQxODZlYzktMTA5Zi00MThkLWE3NzAtYzY3MjFhYTJhOTdlIiwidHJhZGVuYW1lIjoiTE9PS0lFUk8iLCJpYXQiOjE3NDU0ODU1OTV9.MHdtbMWX4lUU98ARiGALsUNkoqu1wKN7Qd-fCv6oqi4";
 const getAuthToken = () => Promise.resolve(authToken);
 
 const externalTranslationsUrl =
@@ -125,9 +127,12 @@ const Root = root({
 
 const ExpoRoot: FC = () => {
   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"),
   });
 
@@ -138,7 +143,7 @@ const ExpoRoot: FC = () => {
     <PortalProvider>
       <PaymentsQueryProvider>
         <EventProvider>
-          <Aurora>
+          <Aurora theme={theme}>
             {isAccessible === false && <Text heading={true}>Checkout is not accessible!</Text>}
 
             <Router>
@@ -153,7 +158,7 @@ const ExpoRoot: FC = () => {
                       locale={locale}
                       order={order}
                       subscription={subscription}
-                      tradename={Tradename.LOOKIERO}
+                      tradename={tradename}
                       useRedirect={useRedirect}
                       onCheckoutFlowSuccess={() => console.log("Checkout flow success!")}
                       onNotAccessible={onNotAccessible}

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

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

package/src/infrastructure/ui/components/atoms/fiveItemsDiscountBanner/FiveItemsDiscountBanner.tsx

@@ -1,13 +1,15 @@
-import React, { FC } from "react";
+import React, { FC, 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";
 
 interface FiveItemsDiscountBannerProps {
   readonly fiveItemsDiscount: number;
 }
 const FiveItemsDiscountBanner: FC<FiveItemsDiscountBannerProps> = ({ fiveItemsDiscount }) => {
+  const style = useMemo(() => fiveItemsDiscountBannerStyle(), []);
+
   const bannerText = useI18nMessage({
     domain: DOMAIN,
     id: I18nMessages.BANNER_DISCOUNT_TEXT,

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

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

package/src/infrastructure/ui/components/atoms/price/Price.tsx

@@ -1,10 +1,10 @@
-import React, { FC } from "react";
+import React, { FC, useMemo } from "react";
 import { View } from "react-native";
 import { Text } from "@lookiero/aurora";
 import { useI18nNumber } from "@lookiero/i18n-react";
 import { PriceProjection } from "../../../../../projection/price/price";
 import { DOMAIN } from "../../../i18n/i18n";
-import { style } from "./Price.style";
+import { style as priceStyle } from "./Price.style";
 
 type PriceVariant = "default" | "detail" | "subtotal" | "total";
 
@@ -44,6 +44,8 @@ const Price: FC<PriceProps> = ({ price, variant = "default", withPercentage = fa
 
   const priceValue = isDiscounted ? productDiscountedPrice : productPrice;
 
+  const style = useMemo(() => priceStyle(), []);
+
   return (
     <View style={style.price} testID="price">
       <Text {...PRICE_VARIANT[variant]} testID="price-text">

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

@@ -1,37 +1,37 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
-const {
-  colorBorderActionSecondary,
-  colorBgActionPrimaryActive,
-  colorTextActionPrimary,
-  borderWidth2,
-  borderRadiusFull,
-  space6,
-  space16,
-} = theme();
+const style = () => {
+  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,
-  },
-});
+  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/src/infrastructure/ui/components/organisms/checkoutQuestions/components/buttonCheckoutQuestionItem/ButtonCheckoutQuestionItem.tsx

@@ -1,11 +1,11 @@
-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 { CheckoutQuestionItem, CheckoutQuestionItemProps } from "../CheckoutQuestionItem";
-import { style } from "./ButtonCheckoutQuestionItem.style";
+import { style as buttonCheckoutQuestionItemStyle } from "./ButtonCheckoutQuestionItem.style";
 
 const ACTIVE_OPACITY = 0.6;
 
@@ -22,6 +22,8 @@ const ButtonCheckoutQuestionItem: CheckoutQuestionItem = ({
     [onChange, checkoutQuestion.id, checkoutQuestionParentId],
   );
 
+  const style = useMemo(() => buttonCheckoutQuestionItemStyle(), []);
+
   return (
     <TouchableOpacity
       accessibilityLabel={testID}

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

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

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/hostDefaultCheckoutQuestionItem/HostDefaultCheckoutQuestionItem.tsx

@@ -1,10 +1,10 @@
-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 { CheckoutQuestionItem, CheckoutQuestionItemProps } from "../CheckoutQuestionItem";
-import { style } from "./HostDefaultCheckoutQuestionItem.style";
+import { style as hostDefaultCheckoutQuestionItemStyle } from "./HostDefaultCheckoutQuestionItem.style";
 
 const HostDefaultCheckoutQuestionItem: CheckoutQuestionItem = ({
   checkoutQuestion,
@@ -12,6 +12,8 @@ const HostDefaultCheckoutQuestionItem: CheckoutQuestionItem = ({
 }: CheckoutQuestionItemProps) => {
   const titleText = useI18nMessage({ domain: DOMAIN, id: checkoutQuestion.name });
 
+  const style = useMemo(() => hostDefaultCheckoutQuestionItemStyle(), []);
+
   return (
     <>
       <Text level={3} style={style.title}>

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

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

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/hostSelectCheckoutQuestionItem/HostSelectCheckoutQuestionItem.tsx

@@ -1,10 +1,10 @@
-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 { CheckoutQuestionItem, CheckoutQuestionItemProps } from "../CheckoutQuestionItem";
-import { style } from "./HostSelectCheckoutQuestionItem.style";
+import { style as hostSelectCheckoutQuestionItemStyle } from "./HostSelectCheckoutQuestionItem.style";
 
 const HostSelectCheckoutQuestionItem: CheckoutQuestionItem = ({
   checkoutQuestion,
@@ -12,6 +12,8 @@ const HostSelectCheckoutQuestionItem: CheckoutQuestionItem = ({
 }: CheckoutQuestionItemProps) => {
   const titleText = useI18nMessage({ domain: DOMAIN, id: checkoutQuestion.name });
 
+  const style = useMemo(() => hostSelectCheckoutQuestionItemStyle(), []);
+
   return (
     <>
       <Text level={3} style={style.title}>

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

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

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/iconCheckoutQuestionItem/IconCheckoutQuestionItem.tsx

@@ -1,17 +1,14 @@
-import React, { FC, useCallback } from "react";
+import React, { FC, useCallback, useMemo } from "react";
 import { Pressable } from "react-native";
 import { SvgProps } from "react-native-svg";
 import invariant from "tiny-invariant";
-import { theme } from "@lookiero/sty-psp-ui";
 import { useCheckoutQuestionFeedbackForId } from "../../behaviors/useCheckoutQuestionFeedback";
 import { CheckoutQuestionItem, CheckoutQuestionItemProps } from "../CheckoutQuestionItem";
-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();
-
 type IconName = "checkout_question.icon.bad" | "checkout_question.icon.regular" | "checkout_question.icon.good";
 
 const ICON: Record<IconName, FC<SvgProps>> = {
@@ -30,6 +27,8 @@ const IconCheckoutQuestionItem: CheckoutQuestionItem = ({
 }: CheckoutQuestionItemProps) => {
   const Icon = ICON[checkoutQuestion.name as IconName];
 
+  const style = useMemo(() => iconCheckoutQuestionItemStyle(), []);
+
   const { feedback, onChange } = useCheckoutQuestionFeedbackForId({ id: checkoutQuestionParentId });
   const isSelected = feedback === checkoutQuestion.id;
 
@@ -43,7 +42,7 @@ const IconCheckoutQuestionItem: CheckoutQuestionItem = ({
   return (
     <Pressable accessibilityLabel={testID} testID={testID} onPress={handleOnPress}>
       <Icon
-        fill={isSelected ? colorBgPrimaryMediumLight : "none"}
+        fill={isSelected ? style.colorBgPrimaryMediumLight : "none"}
         strokeWidth={isSelected ? 2 : 1}
         style={style.icon}
       />