@lookiero/checkout 11.2.0 → 11.3.1

package/dist/src/infrastructure/ui/views/item/components/productVariantDescription/ProductVariantDescription.style.js

@@ -1,15 +1,18 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 const style = () => {
-    const { space1, space4, space6 } = theme();
+    const { colorTextMedium, space1, space4, space6 } = theme();
     return StyleSheet.create({
         brand: {
-            flex: 1,
-            gap: space1,
+            color: colorTextMedium,
         },
         container: {
             width: "100%",
         },
+        content: {
+            flex: 1,
+            gap: space1,
+        },
         info: {
             display: "flex",
             flexDirection: "row",

package/dist/src/infrastructure/ui/views/item/components/returnQuestionsFeedback/ReturnQuestionsFeedback.js

@@ -1,7 +1,8 @@
 import React, { useMemo } from "react";
 import { View } from "react-native";
-import { ButtonIcon, Text } from "@lookiero/aurora";
+import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
+import { ButtonIcon } from "@lookiero/sty-psp-ui";
 import { ReturnQuestionType } from "../../../../../../projection/returnQuestion/returnQuestion.constants";
 import { ReturnQuestions } from "../../../../components/organisms/returnQuestions/ReturnQuestions";
 import { ReturnQuestionItemProvider, } from "../../../../components/organisms/returnQuestions/behaviors/useReturnQuestionItem";

package/dist/src/infrastructure/ui/views/item/components/selectModal/SelectModal.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo } from "react";
 import { TouchableHighlight, View } from "react-native";
-import { COLOR, Text } from "@lookiero/aurora";
+import { Text } from "@lookiero/aurora";
 import { Modal } from "@lookiero/sty-psp-ui";
 import { style as modalStyle } from "./SelectModal.style";
 const SelectModal = ({ modalVisible, options, style: customStyle, testID, title, value, portalHostName, onChange = () => void 0, onClose = () => void 0, }) => {
@@ -13,6 +13,6 @@ const SelectModal = ({ modalVisible, options, style: customStyle, testID, title,
         React.createElement(View, { style: [style.modalContent, customStyle?.modalContent] },
             title && (React.createElement(Text, { level: 3, style: style.modalTitle, heading: true }, title)),
             options.map(({ label, value: optionValue }) => (React.createElement(TouchableHighlight, { key: optionValue, accessibilityLabel: optionValue, disabled: value === optionValue, style: [style.option, customStyle?.option], testID: optionValue, underlayColor: style.underlayColor, accessible: true, onPress: value !== optionValue ? () => handleOnPressOption(optionValue) : undefined },
-                React.createElement(Text, { color: value === optionValue ? COLOR.TEXT_MEDIUM : COLOR.TEXT, level: 3, style: [style.optionText, customStyle?.optionText] }, label)))))));
+                React.createElement(Text, { level: 3, style: [style.optionText, value === optionValue && style.textActive, customStyle?.optionText] }, label)))))));
 };
 export { SelectModal };

package/dist/src/infrastructure/ui/views/item/components/selectModal/SelectModal.style.d.ts

@@ -15,5 +15,8 @@ declare const style: () => {
     optionText: {
         lineHeight: number;
     };
+    textActive: {
+        color: string;
+    };
 };
 export { style };

package/dist/src/infrastructure/ui/views/item/components/selectModal/SelectModal.style.js

@@ -1,7 +1,7 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 const style = () => {
-    const { borderWidth1, colorBgPrimaryLight, colorBorderInteractive, space1, space5, space6 } = theme();
+    const { borderWidth1, colorBgPrimaryLight, colorBorderInteractive, colorTextMedium, space1, space5, space6 } = theme();
     const styles = StyleSheet.create({
         modalContent: {
             paddingBottom: space6,
@@ -18,6 +18,9 @@ const style = () => {
         optionText: {
             lineHeight: space6,
         },
+        textActive: {
+            color: colorTextMedium,
+        },
     });
     return {
         ...styles,

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

@@ -1,8 +1,8 @@
 import React, { useMemo } from "react";
-import { Image } from "react-native";
-import { COLOR, Text, View, useDevice } from "@lookiero/aurora";
+import { Image, View } from "react-native";
+import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
-import { Column, Row } from "@lookiero/sty-psp-ui";
+import { Column, Row, useScreenSize } from "@lookiero/sty-psp-ui";
 import { size } from "../../../../../../projection/size/size";
 import { useMediaImage } from "../../../../hooks/useMediaImage";
 import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
@@ -10,13 +10,13 @@ import { Price } from "../price/Price";
 import { IMAGE_SIZE, style as productVariantPreviewStyle } from "./ProductVariantPreview.style";
 const ProductVariantPreview = ({ item, country }) => {
     const cdnImageUrl = useMediaImage();
-    const { screen } = useDevice();
+    const screenSize = useScreenSize();
     const sizeText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.ITEM_SIZE });
     const uniqueText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.ITEM_UNIQUE });
     const { productVariant: { media, brand, name, size: sizeProjection }, price, } = item;
     const mainImage = media.find((mediaElement) => mediaElement.perspective === "MAIN");
     const style = useMemo(() => productVariantPreviewStyle(), []);
-    return (React.createElement(View, { style: [style.wrapper, !screen.S && style.mobileWrapper], testID: "product-variant-preview" },
+    return (React.createElement(View, { style: [style.wrapper, screenSize === "S" && style.mobileWrapper], testID: "product-variant-preview" },
         React.createElement(Row, { style: style.row },
             React.createElement(Column, { size: { M: "2/3", L: "2/3" }, style: style.content },
                 mainImage && (React.createElement(Image, { resizeMode: "stretch", style: style.image, testID: "product-variant-image", source: {
@@ -26,9 +26,9 @@ const ProductVariantPreview = ({ item, country }) => {
                         }),
                     } })),
                 React.createElement(View, { style: style.info },
-                    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 }, `${sizeText} ${sizeProjection.unique ? uniqueText : size({ size: sizeProjection, country })}`)),
+                    React.createElement(Text, { level: 2, style: style.text, detail: true }, `${sizeText} ${sizeProjection.unique ? uniqueText : size({ size: sizeProjection, country })}`)),
                 React.createElement(View, { style: style.price },
                     React.createElement(Price, { price: price, withPercentage: true }))))));
 };

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

@@ -22,6 +22,9 @@ declare const style: () => {
         flex: number;
         justifyContent: "center";
     };
+    text: {
+        color: string;
+    };
     wrapper: {
         backgroundColor: string;
         flexDirection: "row";

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

@@ -2,7 +2,7 @@ import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 const IMAGE_SIZE = 35;
 const style = () => {
-    const { borderRadius2, borderWidth1, colorBgBase, colorBorderInput, space2, space4 } = theme();
+    const { borderRadius2, borderWidth1, colorBgBase, colorBorderInput, colorTextMedium, space2, space4 } = theme();
     return StyleSheet.create({
         content: {
             flexDirection: "row",
@@ -26,6 +26,9 @@ const style = () => {
             flex: 1,
             justifyContent: "center",
         },
+        text: {
+            color: colorTextMedium,
+        },
         wrapper: {
             backgroundColor: colorBgBase,
             flexDirection: "row",

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

@@ -1,12 +1,13 @@
 import { PortalHost } from "@gorhom/portal";
 import React, { useCallback, useMemo } from "react";
-import { Platform } from "react-native";
+import { Platform, View } from "react-native";
 import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import { generatePath, useNavigate } from "react-router-native";
-import { Box, Button, Layout as AuroraLayout, Spinner, Text, View, useDevice } from "@lookiero/aurora";
+import { Box, Button, Layout as AuroraLayout, Spinner, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { CommandStatus } from "@lookiero/messaging-react";
 import { useLogger } from "@lookiero/sty-psp-logging";
+import { useScreenSize } from "@lookiero/sty-psp-ui";
 import { ReturnQuestionType } from "../../../../../../projection/returnQuestion/returnQuestion.constants";
 import { useReturnCheckoutItem } from "../../../../../domain/checkoutItem/react/useReturnCheckoutItem";
 import { useListReturnQuestionsByCheckoutItemId } from "../../../../../projection/returnQuestion/react/useListReturnQuestionsByCheckoutItemId";
@@ -42,7 +43,9 @@ const ReturnQuestionsForm = ({ checkout, checkoutItem, country, layout: Layout,
     const navigate = useNavigate();
     const { basePath } = useStaticInfo();
     const logger = useLogger();
-    const { screen } = useDevice();
+    const screenSize = useScreenSize();
+    const isDektopScreen = screenSize === "L";
+    const isMobileScreen = screenSize === "S";
     const style = useMemo(() => returnQuestionsFormStyle(), []);
     const titleText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.RETURN_QUESTIONS_TITLE });
     const descriptionText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.RETURN_QUESTIONS_DESCRIPTION });
@@ -104,13 +107,13 @@ const ReturnQuestionsForm = ({ checkout, checkoutItem, country, layout: Layout,
             React.createElement(ProductVariantPreview, { country: country, item: checkoutItem }),
             React.createElement(KeyboardAwareScrollView, { extraScrollHeight: Platform.OS === "android" ? 10 : 120, keyboardShouldPersistTaps: "handled", showsVerticalScrollIndicator: false, testID: "return-questions-form" },
                 React.createElement(View, { style: style.background },
-                    React.createElement(AuroraLayout, { fullWidth: !screen.L, style: [style.layout, screen.L ? style.desktopLayoutSpacing : undefined] },
+                    React.createElement(AuroraLayout, { fullWidth: !isDektopScreen, style: [style.layout, isDektopScreen ? style.desktopLayoutSpacing : undefined] },
                         React.createElement(Box, { size: { L: "2/3" } },
-                            React.createElement(View, { style: [style.info, !screen.S && style.desktopInfo] },
+                            React.createElement(View, { style: [style.info, !isMobileScreen && style.desktopInfo] },
                                 React.createElement(Text, { level: 3, heading: true }, titleText),
                                 React.createElement(Text, { level: 1, style: style.description, detail: true }, descriptionText)),
                             React.createElement(ReturnQuestions, { portalHostName: RETURN_QUESTION_FORM_PORTAL_HOST_NAME, returnQuestions: returnQuestions }),
-                            React.createElement(View, { style: [style.submit, !screen.S && style.submitDesktop] },
+                            React.createElement(View, { style: [style.submit, !isMobileScreen && style.submitDesktop] },
                                 React.createElement(Button, { testID: "return-questions-button", onPress: handleOnSubmit }, submitButtonText)))))))));
 };
 export { ReturnQuestionsForm };

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

@@ -1,8 +1,8 @@
 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";
@@ -21,9 +21,9 @@ const ProductVariant = ({ media, brand, name, price, size: sizeProjection, color
                 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

@@ -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

@@ -3,7 +3,7 @@ import { theme } from "@lookiero/sty-psp-ui";
 const IMAGE_WIDTH = 104;
 const IMAGE_HEIGHT = 132;
 const style = () => {
-    const { colorBgSurface, borderRadius3, borderRadiusFull, borderWidth2, colorBorderInput, colorBgPrimaryLight, space05, space1, space2, space4, } = theme();
+    const { borderRadius3, borderRadiusFull, borderWidth2, colorBgPrimaryLight, colorBgSurface, colorBorderInput, colorTextMedium, space05, space1, space2, space4, } = theme();
     return StyleSheet.create({
         container: {
             alignItems: "flex-end",
@@ -40,6 +40,9 @@ const style = () => {
             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";
@@ -22,7 +22,8 @@ import { style as summaryStyle } from "./Summary.style";
 import { CollapsiblePricing } from "./components/collapsiblePricing/CollapsiblePricing";
 const Summary = ({ layout: Layout, children }) => {
     const { customer: { customerId, country, segment }, basePath, } = useStaticInfo();
-    const { screen } = useDevice();
+    const screenSize = useScreenSize();
+    const isDesktopScreen = screenSize === "L";
     const style = useMemo(() => summaryStyle(), []);
     const [pricingCollapsed, setPricingCollapsed] = useState(true);
     const [pricingHeight, setPricingHeight] = useState(0);
@@ -84,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/components/collapsiblePricing/CollapsiblePricing.js

@@ -1,8 +1,9 @@
 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";

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

@@ -1,8 +1,8 @@
 import React, { useCallback, useMemo } from "react";
 import { View } from "react-native";
-import { Text, useDevice } from "@lookiero/aurora";
+import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
-import { Tabs } from "@lookiero/sty-psp-ui";
+import { Tabs, useScreenSize } 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";
@@ -10,7 +10,7 @@ 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 screenSize = useScreenSize();
     const style = useMemo(() => checkoutItemsTabsStyle(), []);
     const keepTabText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_KEEP_TAB });
     const returnTabText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_RETURN_TAB });
@@ -30,8 +30,11 @@ const CheckoutItemsTabs = ({ tabIndex, checkoutItemsKept, checkoutItemsReturned,
         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 } },
+            carousel: [style.carousel, screenSize === "L" && style.carouselDesktop],
+            tabList: {
+                tabList: [style.tabList, screenSize === "L" && style.tabListDesktop],
+                tab: { tabText: style.tabText },
+            },
         }, onChanged: onChanged }, renderItem));
 };
 export { CheckoutItemsTabs };

package/dist/src/version.d.ts

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

package/dist/src/version.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "11.2.0",
+  "version": "11.3.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": "false",

package/src/ExpoRoot.tsx

@@ -29,6 +29,7 @@ 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 = {
   isFirstOrder: false,
@@ -71,7 +72,7 @@ const translations: EndpointFunction[] = [
   (locale) =>
     translationExternalEndpoint({
       translationsUrl: externalTranslationsUrl,
-      projects: [["checkout"]],
+      projects: [["checkout"], ["inventory-catalog"]],
     })(locale),
 ];
 

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

@@ -28,6 +28,9 @@ const style = () => {
     buttonActive: {
       backgroundColor: colorBgActionPrimaryActive,
     },
+    text: {
+      textAlign: "center",
+    },
     textActive: {
       color: colorTextActionPrimary,
     },

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/buttonCheckoutQuestionItem/ButtonCheckoutQuestionItem.tsx

@@ -1,6 +1,6 @@
 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";
@@ -24,15 +24,17 @@ const ButtonCheckoutQuestionItem: CheckoutQuestionItem = ({
 
   const style = useMemo(() => buttonCheckoutQuestionItemStyle(), []);
 
+  const checked = feedback === checkoutQuestion.id;
+
   return (
     <TouchableOpacity
       accessibilityLabel={testID}
       activeOpacity={ACTIVE_OPACITY}
-      style={[style.button, feedback === checkoutQuestion.id && style.buttonActive]}
+      style={[style.button, checked && style.buttonActive]}
       testID={testID}
       onPress={handleOnPress}
     >
-      <Text align={ALIGN.CENTER} level={3} style={feedback === checkoutQuestion.id && style.textActive} action>
+      <Text level={3} style={[style.text, checked && style.textActive]} action>
         {optionText}
       </Text>
     </TouchableOpacity>

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

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

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

@@ -42,6 +42,7 @@ const IconCheckoutQuestionItem: CheckoutQuestionItem = ({
   return (
     <Pressable accessibilityLabel={testID} testID={testID} onPress={handleOnPress}>
       <Icon
+        color={style.colorIcon}
         fill={isSelected ? style.colorBgPrimaryMediumLight : "none"}
         strokeWidth={isSelected ? 2 : 1}
         style={style.icon}

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

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

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

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

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

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

package/src/infrastructure/ui/components/organisms/returnQuestions/components/hostDefaultReturnQuestionItem/HostDefaultReturnQuestionItem.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable react/prop-types */
 import React, { useMemo } from "react";
-import { Text, View } from "@lookiero/aurora";
+import { View } from "react-native";
+import { Text } from "@lookiero/aurora";
 import { useI18n } from "@lookiero/i18n-react";
 import { ReturnQuestionType } from "../../../../../../../projection/returnQuestion/returnQuestion.constants";
 import { returnQuestionWithTranslationKey } from "../../../../../../../projection/returnQuestion/returnQuestion.typeguard";

package/src/infrastructure/ui/components/organisms/returnQuestions/components/hostSelectReturnQuestionItem/HostSelectReturnQuestionItem.tsx

@@ -1,9 +1,8 @@
 /* eslint-disable react/prop-types */
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { TouchableHighlight, View } from "react-native";
-import { ButtonIcon } from "@lookiero/aurora";
 import { useI18n } from "@lookiero/i18n-react";
-import { InputField, Modal, TextInput } from "@lookiero/sty-psp-ui";
+import { ButtonIcon, InputField, Modal, TextInput } from "@lookiero/sty-psp-ui";
 import { ReturnQuestionType } from "../../../../../../../projection/returnQuestion/returnQuestion.constants";
 import { DOMAIN } from "../../../../../i18n/i18n";
 import {
@@ -98,7 +97,7 @@ const HostSelectReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.HOST_S
           deepestReturnQuestionWithFeedback && (
             <ButtonIcon
               name="arrow_left"
-              style={style.backButton}
+              style={{ button: style.backButton }}
               testID="modal-back-button"
               onPress={handleOnBackButtonPress}
             />

package/src/infrastructure/ui/components/organisms/returnQuestions/components/hostStackReturnQuestionItem/modal/HostStackReturnQuestionItem.style.ts

@@ -2,9 +2,12 @@ import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
 const style = () => {
-  const { space1 } = theme();
+  const { colorTextMedium, space1 } = theme();
 
   return StyleSheet.create({
+    text: {
+      color: colorTextMedium,
+    },
     title: {
       marginBottom: space1,
     },

package/src/infrastructure/ui/components/organisms/returnQuestions/components/hostStackReturnQuestionItem/modal/HostStackReturnQuestionItem.tsx

@@ -2,7 +2,7 @@
 import React, { useCallback, useMemo } from "react";
 import { LayoutChangeEvent, View } from "react-native";
 import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
-import { COLOR, Text } from "@lookiero/aurora";
+import { Text } from "@lookiero/aurora";
 import { useI18n } from "@lookiero/i18n-react";
 import { ReturnQuestionType } from "../../../../../../../../projection/returnQuestion/returnQuestion.constants";
 import { returnQuestionHasChildren } from "../../../../../../../../projection/returnQuestion/returnQuestion.typeguard";
@@ -58,7 +58,7 @@ const HostStackReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.HOST_ST
         )}
         {feedbackReturnQuestion && returnQuestionHasChildren(feedbackReturnQuestion) ? (
           <>
-            <Text color={COLOR.TEXT_MEDIUM} level={3}>
+            <Text level={3} style={style.text}>
               {feedbackText}
             </Text>
             {feedbackReturnQuestion.children?.map((childReturnQuestion) => (

package/src/infrastructure/ui/components/organisms/returnQuestions/components/modalOptionReturnQuestionItems/ModalOptionReturnQuestionItems.style.ts

@@ -2,13 +2,14 @@ import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
 const style = () => {
-  const { space2, space6 } = theme();
+  const { colorTextMedium, space2, space6 } = theme();
 
   return StyleSheet.create({
     modalContent: {
       paddingHorizontal: space6,
     },
     optionText: {
+      color: colorTextMedium,
       marginBottom: space6,
     },
     wrapper: {

package/src/infrastructure/ui/components/organisms/returnQuestions/components/modalOptionReturnQuestionItems/ModalOptionReturnQuestionItems.tsx

@@ -1,6 +1,6 @@
 import React, { FC, useMemo } from "react";
 import { View } from "react-native";
-import { COLOR, Text } from "@lookiero/aurora";
+import { Text } from "@lookiero/aurora";
 import { useI18n } from "@lookiero/i18n-react";
 import { Modal } from "@lookiero/sty-psp-ui";
 import { ReturnQuestionProjection } from "../../../../../../../projection/returnQuestion/returnQuestion";
@@ -31,7 +31,7 @@ const ModalOptionReturnQuestionItems: FC<ModalOptionReturnQuestionItemsProps> =
   return (
     <Modal portalHostName={portalHostName} visible={visible} scroll showCloseButton onClose={onClose}>
       <View style={style.modalContent}>
-        <Text color={COLOR.TEXT_MEDIUM} level={2} style={style.optionText}>
+        <Text level={2} style={style.optionText}>
           {title}
         </Text>
         <>