@lookiero/checkout 11.2.0 → 11.3.1

package/dist/src/ExpoRoot.js

@@ -56,7 +56,7 @@ const externalTranslationsUrl = Platform.OS !== "web"
 const translations = [
     (locale) => translationExternalEndpoint({
         translationsUrl: externalTranslationsUrl,
-        projects: [["checkout"]],
+        projects: [["checkout"], ["inventory-catalog"]],
     })(locale),
 ];
 const useRedirect = () => ({

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

@@ -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";
@@ -11,7 +11,8 @@ const ButtonCheckoutQuestionItem = ({ checkoutQuestion, 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)));
+    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

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

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

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

@@ -22,6 +22,6 @@ const IconCheckoutQuestionItem = ({ checkoutQuestion, checkoutQuestionParentId,
     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 ? style.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,5 +1,6 @@
 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,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: {
             marginHorizontal: 12,
@@ -10,6 +10,7 @@ const style = () => {
     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/returnQuestions/components/hostDefaultReturnQuestionItem/HostDefaultReturnQuestionItem.js

@@ -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 { returnQuestionWithTranslationKey } from "../../../../../../../projection/returnQuestion/returnQuestion.typeguard";
 import { DOMAIN, I18nMessages } from "../../../../../i18n/i18n";

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/hostSelectReturnQuestionItem/HostSelectReturnQuestionItem.js

@@ -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 { DOMAIN } from "../../../../../i18n/i18n";
 import { useReturnQuestionFeedback, useReturnQuestionFeedbackForReturnQuestion, } from "../../behaviors/useReturnQuestionFeedback";
 import { deepestReturnQuestionWithFeedbackForReturnQuestion, feedbackForReturnQuestion, } from "../../util/returnQuestionFeedback";
@@ -35,7 +34,7 @@ const HostSelectReturnQuestionItem = ({ returnQuestion, children, portalHostName
         React.createElement(TouchableHighlight, { accessibilityLabel: testID, style: style.container, testID: testID, underlayColor: style.containerUnderlayColor, accessible: true, onPress: handleOnPress },
             React.createElement(View, { pointerEvents: "none" },
                 React.createElement(InputField, { icon: "arrow_down", label: placeholderText, value: inputValue, input: ({ onBlur, onFocus, style }) => (React.createElement(TextInput, { editable: false, placeholder: placeholderText, style: style, value: inputValue, onBlur: onBlur, onChange: () => void 0, onFocus: onFocus })) }))),
-        React.createElement(Modal, { portalHostName: portalHostName, style: deepestReturnQuestionWithFeedback && { header: style.header }, visible: modalVisible, header: deepestReturnQuestionWithFeedback && (React.createElement(ButtonIcon, { name: "arrow_left", style: style.backButton, testID: "modal-back-button", onPress: handleOnBackButtonPress })), scroll: true, showCloseButton: true, onClose: handleOnModalClose },
+        React.createElement(Modal, { portalHostName: portalHostName, style: deepestReturnQuestionWithFeedback && { header: style.header }, visible: modalVisible, header: deepestReturnQuestionWithFeedback && (React.createElement(ButtonIcon, { name: "arrow_left", style: { button: style.backButton }, testID: "modal-back-button", onPress: handleOnBackButtonPress })), scroll: true, showCloseButton: true, onClose: handleOnModalClose },
             React.createElement(View, { style: style.modalContent }, children))));
 };
 export { HostSelectReturnQuestionItem };

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

@@ -2,7 +2,7 @@
 import React, { useCallback, useMemo } from "react";
 import { 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 { returnQuestionHasChildren } from "../../../../../../../../projection/returnQuestion/returnQuestion.typeguard";
 import { DOMAIN } from "../../../../../../i18n/i18n";
@@ -27,7 +27,7 @@ const HostStackReturnQuestionItem = ({ returnQuestion, children, portalHostName,
         React.createElement(View, { onLayout: handleOnLayout },
             titleText && (React.createElement(Text, { level: 3, style: style.title, heading: true }, titleText)),
             feedbackReturnQuestion && returnQuestionHasChildren(feedbackReturnQuestion) ? (React.createElement(React.Fragment, null,
-                React.createElement(Text, { color: COLOR.TEXT_MEDIUM, level: 3 }, feedbackText),
+                React.createElement(Text, { level: 3, style: style.text }, feedbackText),
                 feedbackReturnQuestion.children?.map((childReturnQuestion) => (React.createElement(ReturnQuestion, { key: childReturnQuestion.id, portalHostName: portalHostName, returnQuestion: childReturnQuestion, returnQuestionParent: feedbackReturnQuestion }))))) : (children))));
 };
 export { HostStackReturnQuestionItem };

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

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

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

@@ -1,8 +1,11 @@
 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/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/modalOptionReturnQuestionItems/ModalOptionReturnQuestionItems.js

@@ -1,6 +1,6 @@
 import React, { 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 { returnQuestionHasChildren } from "../../../../../../../projection/returnQuestion/returnQuestion.typeguard";
@@ -13,7 +13,7 @@ const ModalOptionReturnQuestionItems = ({ portalHostName, returnQuestion, visibl
     const style = useMemo(() => modalOptionReturnQuestionItemsStyle(), []);
     return (React.createElement(Modal, { portalHostName: portalHostName, visible: visible, scroll: true, showCloseButton: true, onClose: onClose },
         React.createElement(View, { style: style.modalContent },
-            React.createElement(Text, { color: COLOR.TEXT_MEDIUM, level: 2, style: style.optionText }, title),
+            React.createElement(Text, { level: 2, style: style.optionText }, title),
             React.createElement(React.Fragment, null, returnQuestionHasChildren(returnQuestion) &&
                 returnQuestion.children?.map((childReturnQuestion) => (React.createElement(ReturnQuestion, { key: childReturnQuestion.id, portalHostName: "", returnQuestion: childReturnQuestion, returnQuestionParent: returnQuestion })))))));
 };

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

@@ -3,6 +3,7 @@ declare const style: () => {
         paddingHorizontal: number;
     };
     optionText: {
+        color: string;
         marginBottom: number;
     };
     wrapper: {

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

@@ -1,12 +1,13 @@
 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/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/radioReturnQuestionItem/RadioReturnQuestionItem.js

@@ -1,13 +1,22 @@
 /* eslint-disable react/prop-types */
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { View, Option, OPTION_VARIANT, SIZE } from "@lookiero/aurora";
+import { Pressable } from "react-native";
+import { Text as AuroraText } from "@lookiero/aurora";
 import { useI18n } from "@lookiero/i18n-react";
+import { Checkbox } from "@lookiero/sty-psp-ui";
+import { Tradename } from "@lookiero/sty-sp-tradename";
+import { useStaticInfo } from "../../../../../hooks/useStaticInfo";
 import { DOMAIN } from "../../../../../i18n/i18n";
 import { useReturnQuestionFeedback, useReturnQuestionFeedbackForReturnQuestion, } from "../../behaviors/useReturnQuestionFeedback";
 import { deepestReturnQuestionWithFeedbackForReturnQuestion, feedbackForReturnQuestion, } from "../../util/returnQuestionFeedback";
 import { ModalOptionReturnQuestionItems } from "../modalOptionReturnQuestionItems/ModalOptionReturnQuestionItems";
 import { style as radioReturnQuestionItemStyle } from "./RadioReturnQuestionItem.style";
+const TEXT = {
+    [Tradename.LOOKIERO]: (props) => React.createElement(AuroraText, { level: 1, detail: true, ...props }),
+    [Tradename.OUTFITTERY]: (props) => React.createElement(AuroraText, { level: 3, ...props }),
+};
 const RadioReturnQuestionItem = ({ returnQuestion, returnQuestionParent, testID, portalHostName, }) => {
+    const { tradename } = useStaticInfo();
     const style = useMemo(() => radioReturnQuestionItemStyle(), []);
     const { formatMessage } = useI18n({ domain: DOMAIN });
     const [modalVisible, setModalVisible] = useState(false);
@@ -44,9 +53,16 @@ const RadioReturnQuestionItem = ({ returnQuestion, returnQuestionParent, testID,
     /**
      * This logic is for closing the Modal when its children has been answered.
      */
+    const checked = returnQuestion.id === feedbackId;
+    const Text = useMemo(() => TEXT[tradename], [tradename]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(View, { style: style.wrapper, testID: testID },
-            React.createElement(Option, { checked: returnQuestion.id === feedbackId, flex: SIZE.XS, name: returnQuestion.id, title: inputValue ? `${optionText} / ${inputValue}` : `${optionText}`, value: returnQuestion.id, variant: OPTION_VARIANT.BUTTON, onChange: handleOnPress })),
+        React.createElement(Pressable, { accessibilityLabel: "radio-return-question-item", accessibilityState: { checked }, testID: testID, style: [
+                style.wrapper,
+                tradename === Tradename.LOOKIERO && style.wrapperLookiero,
+                tradename === Tradename.LOOKIERO && checked && style.wrapperLookieroChecked,
+            ], accessible: true, onPress: handleOnPress },
+            React.createElement(Checkbox, { checked: checked }),
+            React.createElement(Text, { style: style.text }, inputValue ? `${optionText} / ${inputValue}` : `${optionText}`)),
         hasChildren ? (React.createElement(ModalOptionReturnQuestionItems, { portalHostName: portalHostName, returnQuestion: returnQuestion, returnQuestionParent: returnQuestion, visible: modalVisible, onClose: handleOnModalClose })) : null));
 };
 export { RadioReturnQuestionItem };

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/radioReturnQuestionItem/RadioReturnQuestionItem.style.d.ts

@@ -1,6 +1,26 @@
 declare const style: () => {
+    text: {
+        color: string;
+        flex: number;
+        marginLeft: number;
+    };
     wrapper: {
-        marginBottom: number;
+        alignItems: "center";
+        flex: number;
+        flexDirection: "row";
+        marginVertical: number;
+    };
+    wrapperLookiero: {
+        borderColor: string;
+        borderRadius: number;
+        borderWidth: number;
+        marginVertical: number;
+        padding: number;
+    };
+    wrapperLookieroChecked: {
+        borderColor: string;
+        borderWidth: number;
+        padding: number;
     };
 };
 export { style };

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/radioReturnQuestionItem/RadioReturnQuestionItem.style.js

@@ -1,10 +1,30 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 const style = () => {
-    const { space2 } = theme();
+    const { borderWidth1, borderWidth2, borderRadius3, colorBorderInteractive, colorBorderInputFocus, colorText, space025, space1, space3, space4, } = theme();
     return StyleSheet.create({
+        text: {
+            color: colorText,
+            flex: 1,
+            marginLeft: space4,
+        },
         wrapper: {
-            marginBottom: space2,
+            alignItems: "center",
+            flex: 1,
+            flexDirection: "row",
+            marginVertical: space3,
+        },
+        wrapperLookiero: {
+            borderColor: colorBorderInteractive,
+            borderRadius: borderRadius3,
+            borderWidth: borderWidth1,
+            marginVertical: space1,
+            padding: space4,
+        },
+        wrapperLookieroChecked: {
+            borderColor: colorBorderInputFocus,
+            borderWidth: borderWidth2,
+            padding: space4 - space025,
         },
     });
 };

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem.js

@@ -1,6 +1,6 @@
 /* eslint-disable react/prop-types */
 import React, { useCallback, useMemo } from "react";
-import { View } from "@lookiero/aurora";
+import { View } from "react-native";
 import { useI18n } from "@lookiero/i18n-react";
 import { InputField, TextInput } from "@lookiero/sty-psp-ui";
 import { DOMAIN } from "../../../../../i18n/i18n";

package/dist/src/infrastructure/ui/components/templates/header/checkoutHeader/CheckoutHeader.js

@@ -1,6 +1,7 @@
 import React, { useMemo } from "react";
-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 { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { Header } from "../Header";
 import { ButtonIconPlaceholder } from "../buttonIconPlaceholder/ButtonIconPlaceholder";
@@ -9,7 +10,7 @@ const CheckoutHeader = ({ onBack }) => {
     const title = useI18nMessage({ domain: DOMAIN, id: I18nMessages.HEADER_COMPLETE_CHECKOUT_TITLE });
     const style = useMemo(() => checkoutHeader(), []);
     return (React.createElement(Header, { testID: "checkout-header" },
-        React.createElement(ButtonIcon, { name: "arrow_left", style: style.button, testID: "arrow-left-button-icon", onPress: onBack }),
+        React.createElement(ButtonIcon, { name: "arrow_left", style: { button: style.button }, testID: "arrow-left-button-icon", onPress: onBack }),
         React.createElement(Text, { level: 3, action: true }, title),
         React.createElement(ButtonIconPlaceholder, null)));
 };

package/dist/src/infrastructure/ui/components/templates/header/itemDetailHeader/ItemDetailHeader.js

@@ -1,6 +1,7 @@
 import React, { useMemo } from "react";
-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 { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { Header } from "../Header";
 import { ButtonIconPlaceholder } from "../buttonIconPlaceholder/ButtonIconPlaceholder";
@@ -11,6 +12,6 @@ const ItemDetailHeader = ({ onBack }) => {
     return (React.createElement(Header, { testID: "item-detail-header" },
         React.createElement(ButtonIconPlaceholder, null),
         React.createElement(Text, { level: 3, action: true }, title),
-        React.createElement(ButtonIcon, { name: "close", style: style.button, testID: "close-button-icon", onPress: onBack })));
+        React.createElement(ButtonIcon, { name: "close", style: { button: style.button }, testID: "close-button-icon", onPress: onBack })));
 };
 export { ItemDetailHeader };

package/dist/src/infrastructure/ui/components/templates/header/itemHeader/ItemHeader.js

@@ -1,7 +1,8 @@
 import React, { useCallback, useMemo } from "react";
 import { generatePath, useNavigate } from "react-router-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 { useStaticInfo } from "../../../../hooks/useStaticInfo";
 import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { Routes } from "../../../../routing/routes";
@@ -29,8 +30,8 @@ const ItemHeader = ({ items, item, onNext, onPrevious }) => {
         navigate(generatePath(`${basePath}/${Routes.ITEM}`, { id: nextItem.id }));
     }, [basePath, item.id, itemIndex, items, navigate, onNext]);
     return (React.createElement(Header, { testID: "item-header" },
-        !isFirstItem ? (React.createElement(ButtonIcon, { name: "arrow_left", style: style.button, testID: "arrow-left-button-icon", onPress: navigateToPreviousItem })) : (React.createElement(ButtonIconPlaceholder, null)),
+        !isFirstItem ? (React.createElement(ButtonIcon, { name: "arrow_left", style: { button: style.button }, testID: "arrow-left-button-icon", onPress: navigateToPreviousItem })) : (React.createElement(ButtonIconPlaceholder, null)),
         React.createElement(Text, { level: 3, action: true }, title),
-        !isLastItem ? (React.createElement(ButtonIcon, { name: "arrow_right", style: style.button, testID: "arrow-right-button-icon", onPress: navigateToNextItem })) : (React.createElement(ButtonIconPlaceholder, null))));
+        !isLastItem ? (React.createElement(ButtonIcon, { name: "arrow_right", style: { button: style.button }, testID: "arrow-right-button-icon", onPress: navigateToNextItem })) : (React.createElement(ButtonIconPlaceholder, null))));
 };
 export { ItemHeader };

package/dist/src/infrastructure/ui/views/checkout/Checkout.js

@@ -1,11 +1,11 @@
 import React, { useCallback, useMemo, useState } from "react";
 import { Platform, ScrollView, View } from "react-native";
 import { useNavigate } from "react-router-native";
-import { Box, Button, Layout as AuroraLayout, Spinner, Text, useDevice } from "@lookiero/aurora";
+import { Box, Button, Layout as AuroraLayout, Spinner, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { QueryStatus } from "@lookiero/messaging-react";
 import { Country } from "@lookiero/sty-psp-locale";
-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 { useViewPricingByCheckoutId } from "../../../projection/pricing/react/useViewPricingByCheckoutId";
@@ -26,10 +26,11 @@ import { DeliveryBanner } from "./components/deliveryBanner/DeliveryBanner";
 import { PaymentInstrument } from "./components/paymentInstrument/PaymentInstrument";
 const Checkout = ({ layout: Layout, order, subscription, getAuthToken, useRedirect, onCheckoutFlowSuccess, }) => {
     const { customer: { customerId, country, segment }, basePath, } = useStaticInfo();
+    const screenSize = useScreenSize();
+    const isDektopScreen = screenSize === "L";
     const style = useMemo(() => checkoutStyle(), []);
     const titleText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.CHECKOUT_TITLE });
     const submitButtonText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.CHECKOUT_PAY_BUTTON });
-    const { screen } = useDevice();
     const [pricingHeight, setPricingHeight] = useState(0);
     const handleOnPricingLayout = useCallback(({ height }) => setPricingHeight(height), []);
     const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
@@ -82,9 +83,9 @@ const Checkout = ({ layout: Layout, order, subscription, getAuthToken, useRedire
         } },
         React.createElement(ScrollView, { showsVerticalScrollIndicator: false, testID: "checkout-view" },
             hasReplacedCheckoutItem && React.createElement(DeliveryBanner, null),
-            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(AuroraLayout, { fullWidth: !isDektopScreen, style: [isDektopScreen && style.desktopLayoutSpacing, !isDektopScreen && { paddingBottom: pricingHeight }] },
+                React.createElement(Box, { size: { L: "2/3" }, style: isDektopScreen && style.desktopListSpacing },
+                    React.createElement(View, { style: [style.contentWrapper, isDektopScreen && style.desktopContentWrapper] },
                         country === Country.NL && (React.createElement(View, { style: style.paymentSelectorNL },
                             React.createElement(PaymentInstrument, { useRedirect: useRedirect }))),
                         React.createElement(Text, { level: 3, style: style.title, heading: true }, titleText),
@@ -94,10 +95,10 @@ const Checkout = ({ layout: Layout, order, subscription, getAuthToken, useRedire
                                     : checkoutItem.productVariant.size })))),
                         country !== Country.NL && (React.createElement(View, { style: style.paymentSelector },
                             React.createElement(PaymentInstrument, { useRedirect: useRedirect }))))),
-                React.createElement(Box, { size: { L: "1/3" }, style: [style.resume, screen.L && style.desktopResume] }, pricing ? (React.createElement(View, { style: [style.princingWrapper, !screen.L && style.princingWrapperSmall] },
+                React.createElement(Box, { size: { L: "1/3" }, style: [style.resume, isDektopScreen && style.desktopResume] }, pricing ? (React.createElement(View, { style: [style.princingWrapper, !isDektopScreen && style.princingWrapperSmall] },
                     React.createElement(Pricing, { pricing: pricing, totalCheckoutItemsKept: checkoutItemsKept?.length || 0 }),
-                    screen.L ? (React.createElement(Button, { busy: checkoutFlowStatus === "loading", testID: "confirm-checkout-button", onPress: handleOnSubmit }, submitButtonText)) : null)) : null))),
-        pricing && !screen.L ? (React.createElement(Sticky, { style: style.sticky, onLayout: Platform.OS !== "web" ? handleOnPricingLayout : undefined },
+                    isDektopScreen ? (React.createElement(Button, { busy: checkoutFlowStatus === "loading", testID: "confirm-checkout-button", onPress: handleOnSubmit }, submitButtonText)) : null)) : null))),
+        pricing && !isDektopScreen ? (React.createElement(Sticky, { style: style.sticky, onLayout: Platform.OS !== "web" ? handleOnPricingLayout : undefined },
             React.createElement(Body, null,
                 React.createElement(Button, { busy: checkoutFlowStatus === "loading", testID: "confirm-checkout-button", small: true, onPress: handleOnSubmit }, submitButtonText)))) : null,
         paymentFlowComponent));

package/dist/src/infrastructure/ui/views/checkout/components/deliveryBanner/DeliveryBanner.js

@@ -1,9 +1,10 @@
 import React from "react";
-import { ALIGN, InfoBox, INFOBOX_TYPE, useDevice } from "@lookiero/aurora";
+import { ALIGN, InfoBox, INFOBOX_TYPE } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
+import { useScreenSize } from "@lookiero/sty-psp-ui";
 import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 const DeliveryBanner = () => {
-    const { screen } = useDevice();
-    return (React.createElement(InfoBox, { contentAlign: screen.L ? ALIGN.CENTER : undefined, testID: "delivery-banner", text: useI18nMessage({ domain: DOMAIN, id: I18nMessages.CHECKOUT_DELIVERY_BANNER }), type: INFOBOX_TYPE.SQUARED }));
+    const screenSize = useScreenSize();
+    return (React.createElement(InfoBox, { contentAlign: screenSize === "L" ? ALIGN.CENTER : undefined, testID: "delivery-banner", text: useI18nMessage({ domain: DOMAIN, id: I18nMessages.CHECKOUT_DELIVERY_BANNER }), type: INFOBOX_TYPE.SQUARED }));
 };
 export { DeliveryBanner };

package/dist/src/infrastructure/ui/views/item/components/getOutOfCheckoutModal/GetOutOfCheckoutModal.js

@@ -1,6 +1,6 @@
 import React, { useMemo } from "react";
 import { View } from "react-native";
-import { ALIGN, Button, BUTTON_VARIANT, Text } from "@lookiero/aurora";
+import { Button, BUTTON_VARIANT, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { Modal } from "@lookiero/sty-psp-ui";
 import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
@@ -19,11 +19,11 @@ const GetOutOfCheckoutModal = ({ visible, onDismiss, onConfirm }) => {
     const style = useMemo(() => getOutOfCheckoutModalStyle(), []);
     return (React.createElement(Modal, { portalHostName: "Checkout", visible: visible, onClose: onDismiss },
         React.createElement(View, { style: style.modalContent },
-            React.createElement(Text, { align: ALIGN.CENTER, level: 1, style: style.title }, titleText),
+            React.createElement(Text, { level: 1, style: style.title }, titleText),
             React.createElement(Text, { level: 3, style: style.description }, descriptionText),
             React.createElement(Button, { style: style.button, onPress: onDismiss },
-                React.createElement(Text, { align: ALIGN.CENTER, level: 3, selectable: false, style: style.buttonText, action: true, upperCase: true }, dismissButtonText)),
+                React.createElement(Text, { level: 3, selectable: false, style: style.buttonText, action: true, upperCase: true }, dismissButtonText)),
             React.createElement(Button, { style: [style.button, style.confirmButton], variant: BUTTON_VARIANT.SECONDARY, onPress: onConfirm },
-                React.createElement(Text, { align: ALIGN.CENTER, level: 3, selectable: false, style: style.buttonText, action: true, upperCase: true }, confirmButtonText)))));
+                React.createElement(Text, { level: 3, selectable: false, style: style.buttonText, action: true, upperCase: true }, confirmButtonText)))));
 };
 export { GetOutOfCheckoutModal };

package/dist/src/infrastructure/ui/views/item/components/getOutOfCheckoutModal/GetOutOfCheckoutModal.style.d.ts

@@ -3,6 +3,7 @@ declare const style: () => {
         flex: number;
     };
     buttonText: {
+        textAlign: "center";
         width: "100%";
     };
     confirmButton: {
@@ -16,6 +17,7 @@ declare const style: () => {
         paddingHorizontal: number;
     };
     title: {
+        textAlign: "center";
         width: "100%";
     };
 };

package/dist/src/infrastructure/ui/views/item/components/getOutOfCheckoutModal/GetOutOfCheckoutModal.style.js

@@ -7,6 +7,7 @@ const style = () => {
             flex: 0,
         },
         buttonText: {
+            textAlign: "center",
             width: "100%",
         },
         confirmButton: {
@@ -20,6 +21,7 @@ const style = () => {
             paddingHorizontal: space6,
         },
         title: {
+            textAlign: "center",
             width: "100%",
         },
     });

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

@@ -1,6 +1,6 @@
 import React, { useMemo } from "react";
 import { View } from "react-native";
-import { COLOR, Text } from "@lookiero/aurora";
+import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { useScreenSize } from "@lookiero/sty-psp-ui";
 import { size } from "../../../../../../projection/size/size";
@@ -13,10 +13,10 @@ const ProductVariantDescription = ({ brand, name, price, size: sizeProjection, c
     const screenDevice = useScreenSize();
     const isDesktopScreen = screenDevice !== "S";
     const style = useMemo(() => productVariantDescriptionStyle(), []);
-    return (React.createElement(View, { style: [style.container, isDesktopScreen ? null : style.smallContainer] },
+    return (React.createElement(View, { style: [style.container, !isDesktopScreen && style.smallContainer] },
         React.createElement(View, { style: style.info },
-            React.createElement(View, { style: style.brand },
-                React.createElement(Text, { color: COLOR.TEXT_MEDIUM, level: 1, detail: true }, brand),
+            React.createElement(View, { style: style.content },
+                React.createElement(Text, { level: 1, style: style.brand, detail: true }, brand),
                 React.createElement(Text, { level: 1, detailBold: true }, name)),
             React.createElement(Price, { price: price, withPercentage: true })),
         React.createElement(Text, { level: 1, detail: true }, `${sizeText} ${sizeProjection.unique ? uniqueText : size({ size: sizeProjection, country })}`)));

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

@@ -1,11 +1,14 @@
 declare const style: () => {
     brand: {
-        flex: number;
-        gap: number;
+        color: string;
     };
     container: {
         width: "100%";
     };
+    content: {
+        flex: number;
+        gap: number;
+    };
     info: {
         display: "flex";
         flexDirection: "row";