@lookiero/checkout 14.1.0 → 14.2.1

package/dist/src/ExpoRoot.d.ts

@@ -1,3 +1,4 @@
 import { FC } from "react";
+import "@lookiero/sty-psp-ui";
 declare const ExpoRoot: FC;
 export { ExpoRoot };

package/dist/src/ExpoRoot.js

@@ -3,12 +3,13 @@ import { useFonts } from "expo-font";
 import React, { useCallback, useState } from "react";
 import { Platform, ScrollView } from "react-native";
 import { Navigate, Route, Routes } from "react-router-native";
-import { Aurora, Text } from "@lookiero/aurora";
+import { Aurora } from "@lookiero/aurora";
 import { EventProvider } from "@lookiero/event";
 import { PaymentsQueryProvider, setPaymentsBridge } from "@lookiero/payments-front";
 import { Country, Locale } from "@lookiero/sty-psp-locale";
 import { Segment } from "@lookiero/sty-psp-segment";
-import { DummyLayout, themeByTradename } from "@lookiero/sty-psp-ui";
+import "@lookiero/sty-psp-ui";
+import { DummyLayout, themeByTradename, Text } from "@lookiero/sty-psp-ui";
 import { Tradename } from "@lookiero/sty-sp-tradename";
 import { bootstrap as checkoutBootstrap } from "./infrastructure/delivery/bootstrap";
 import { bootstrap as checkoutMockBootstrap } from "./infrastructure/delivery/bootstrap.mock";
@@ -97,7 +98,7 @@ const ExpoRoot = () => {
         React.createElement(PaymentsQueryProvider, null,
             React.createElement(EventProvider, null,
                 React.createElement(Aurora, { theme: theme },
-                    isAccessible === false && React.createElement(Text, { heading: true }, "Checkout is not accessible!"),
+                    isAccessible === false && React.createElement(Text, { variant: "heading" }, "Checkout is not accessible!"),
                     React.createElement(Router, null,
                         React.createElement(Routes, null,
                             React.createElement(Route, { path: "/checkout/*", element: React.createElement(Root, { basePath: "/checkout", customer: customer, layout: DummyLayout, locale: locale, tradename: tradename, useRedirect: useRedirect, onCheckoutFlowSuccess: () => console.log("Checkout flow success!"), onNotAccessible: onNotAccessible }) }),

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

@@ -1,6 +1,7 @@
 import React, { useMemo } from "react";
-import { ALIGN, DISPLAY, InfoBox, INFOBOX_TYPE, Text } from "@lookiero/aurora";
+import { ALIGN, InfoBox, INFOBOX_TYPE } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
+import { Text } from "@lookiero/sty-psp-ui";
 import { DOMAIN, I18nMessages } from "../../../i18n/i18n";
 import { style as fiveItemsDiscountBannerStyle } from "./FiveItemsDiscountBanner.style";
 const FiveItemsDiscountBanner = ({ fiveItemsDiscount }) => {
@@ -10,7 +11,7 @@ const FiveItemsDiscountBanner = ({ fiveItemsDiscount }) => {
         id: I18nMessages.BANNER_DISCOUNT_TEXT,
         values: {
             discount: fiveItemsDiscount.toString(),
-            b: (chunks) => (React.createElement(Text, { as: "span", display: DISPLAY.INLINE, level: 2, style: style.textBold }, chunks)),
+            b: (chunks) => (React.createElement(Text, { level: 2, style: style.textBold }, chunks)),
         },
     });
     return (React.createElement(InfoBox, { contentAlign: ALIGN.CENTER, icon: "info", testID: "five-items-discount-banner", text: bannerText, type: INFOBOX_TYPE.SQUARED }));

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

@@ -1,7 +1,7 @@
 import React, { useMemo } from "react";
 import { View } from "react-native";
-import { Text } from "@lookiero/aurora";
 import { useI18nNumber } from "@lookiero/i18n-react";
+import { Text } from "@lookiero/sty-psp-ui";
 import { DOMAIN } from "../../../i18n/i18n";
 import { style as priceStyle } from "./Price.style";
 const PRICE_VARIANT = {
@@ -29,7 +29,7 @@ const Price = ({ price, variant = "default", withPercentage = false }) => {
     return (React.createElement(View, { style: style.price, testID: "price" },
         React.createElement(Text, { ...PRICE_VARIANT[variant], testID: "price-text" }, priceValue),
         isDiscounted && (React.createElement(View, { style: style.discountedPriceInfo },
-            React.createElement(Text, { ...PRICE_VARIANT[variant], style: style.discountedPriceText, testID: "discounted-price-text", lineThrough: true }, productPrice),
+            React.createElement(Text, { ...PRICE_VARIANT[variant], style: style.discountedPriceText, testID: "discounted-price-text" }, productPrice),
             withPercentage ? (React.createElement(Text, { ...PRICE_VARIANT[variant], style: style.discountedPercentage, testID: "discounted-percentage-text" }, `-${price.discountedPrice.percentage}%`)) : null))));
 };
 export { Price };

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

@@ -8,6 +8,7 @@ declare const style: () => {
     };
     discountedPriceText: {
         color: string;
+        textDecorationLine: "line-through";
     };
     price: {
         flexDirection: "row";

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

@@ -12,6 +12,7 @@ const style = () => {
         },
         discountedPriceText: {
             color: colorTextMedium,
+            textDecorationLine: "line-through",
         },
         price: {
             flexDirection: "row",

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

@@ -1,8 +1,8 @@
 /* eslint-disable react/prop-types */
 import React, { useCallback, useMemo } from "react";
 import { TouchableOpacity } from "react-native";
-import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
+import { Text } from "@lookiero/sty-psp-ui";
 import { DOMAIN } from "../../../../../i18n/i18n";
 import { useCheckoutQuestionFeedbackForId } from "../../behaviors/useCheckoutQuestionFeedback";
 import { style as buttonCheckoutQuestionItemStyle } from "./ButtonCheckoutQuestionItem.style";
@@ -14,6 +14,6 @@ const ButtonCheckoutQuestionItem = ({ checkoutQuestion, checkoutQuestionParentId
     const style = useMemo(() => buttonCheckoutQuestionItemStyle(), []);
     const checked = feedback === checkoutQuestion.id;
     return (React.createElement(TouchableOpacity, { accessibilityLabel: testID, activeOpacity: ACTIVE_OPACITY, style: [style.button, checked && style.buttonActive], testID: testID, onPress: handleOnPress },
-        React.createElement(Text, { level: 3, style: [style.text, checked && style.textActive], action: true }, optionText)));
+        React.createElement(Text, { level: 3, style: [style.text, checked && style.textActive], variant: "action" }, optionText)));
 };
 export { ButtonCheckoutQuestionItem };

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

@@ -1,8 +1,8 @@
 /* eslint-disable react/prop-types */
 import React, { useMemo } from "react";
 import { View } from "react-native";
-import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
+import { Text } from "@lookiero/sty-psp-ui";
 import { DOMAIN } from "../../../../../i18n/i18n";
 import { style as hostDefaultCheckoutQuestionItemStyle } from "./HostDefaultCheckoutQuestionItem.style";
 const HostDefaultCheckoutQuestionItem = ({ checkoutQuestion, children, }) => {

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

@@ -1,8 +1,8 @@
 /* eslint-disable react/prop-types */
 import React, { useMemo } from "react";
 import { View } from "react-native";
-import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
+import { Text } from "@lookiero/sty-psp-ui";
 import { DOMAIN } from "../../../../../i18n/i18n";
 import { style as hostSelectCheckoutQuestionItemStyle } from "./HostSelectCheckoutQuestionItem.style";
 const HostSelectCheckoutQuestionItem = ({ checkoutQuestion, children, }) => {

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

@@ -1,8 +1,8 @@
 /* eslint-disable react/prop-types */
 import React, { useMemo } from "react";
 import { View } from "react-native";
-import { Text } from "@lookiero/aurora";
 import { useI18n } from "@lookiero/i18n-react";
+import { Text } from "@lookiero/sty-psp-ui";
 import { DOMAIN, I18nMessages } from "../../../../../i18n/i18n";
 import { style as hostDefaultReturnQuestionItemStyle } from "./HostDefaultReturnQuestionItem.style";
 const HostDefaultReturnQuestionItem = ({ returnQuestion, children, }) => {
@@ -11,7 +11,7 @@ const HostDefaultReturnQuestionItem = ({ returnQuestion, children, }) => {
     const style = useMemo(() => hostDefaultReturnQuestionItemStyle(), []);
     return (React.createElement(React.Fragment, null,
         returnQuestion.translationKey && returnQuestion.translationKey !== " " && !isAllOptions ? (React.createElement(View, { style: style.title },
-            React.createElement(Text, { level: 3, action: true }, formatMessage({ id: returnQuestion.translationKey })))) : null,
+            React.createElement(Text, { level: 3, variant: "action" }, formatMessage({ id: returnQuestion.translationKey })))) : null,
         children));
 };
 export { HostDefaultReturnQuestionItem };

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/hostLegacyRadioGroupReturnQuestionItem/HostLegacyRadioGroupReturnQuestionItem.js

@@ -1,8 +1,8 @@
 /* eslint-disable react/prop-types */
 import React, { useMemo } from "react";
 import { View } from "react-native";
-import { Text } from "@lookiero/aurora";
 import { useI18n } from "@lookiero/i18n-react";
+import { Text } from "@lookiero/sty-psp-ui";
 import { DOMAIN } from "../../../../../i18n/i18n";
 import { style as hostLegacyRadioGroupReturnQuestionItemStyle } from "./HostLegacyRadioGroupReturnQuestionItem.style";
 const HostLegacyRadioGroupReturnQuestionItem = ({ returnQuestion, children, testID, }) => {
@@ -11,7 +11,7 @@ const HostLegacyRadioGroupReturnQuestionItem = ({ returnQuestion, children, test
     const style = useMemo(() => hostLegacyRadioGroupReturnQuestionItemStyle(), []);
     return (React.createElement(React.Fragment, null,
         React.createElement(View, { style: style.wrapper, testID: testID },
-            React.createElement(Text, { level: 3, style: style.title, action: true }, placeholderText),
+            React.createElement(Text, { level: 3, style: style.title, variant: "action" }, placeholderText),
             children)));
 };
 export { HostLegacyRadioGroupReturnQuestionItem };

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

@@ -1,15 +1,15 @@
 /* eslint-disable react/prop-types */
 import React, { useMemo } from "react";
 import { View } from "react-native";
-import { Text } from "@lookiero/aurora";
 import { useI18n } from "@lookiero/i18n-react";
+import { Text } from "@lookiero/sty-psp-ui";
 import { DOMAIN } from "../../../../../i18n/i18n";
 import { style as hostRadioGroupReturnQuestionItemStyle } from "./HostRadioGroupReturnQuestionItem.style";
 const HostRadioGroupReturnQuestionItem = ({ returnQuestion, children, testID, }) => {
     const { formatMessage } = useI18n({ domain: DOMAIN });
     const style = useMemo(() => hostRadioGroupReturnQuestionItemStyle(), []);
     return (React.createElement(View, { style: style.wrapper, testID: testID },
-        returnQuestion.translationKey && (React.createElement(Text, { level: 3, style: style.title, action: true }, formatMessage({ id: returnQuestion.translationKey }))),
+        returnQuestion.translationKey && (React.createElement(Text, { level: 3, style: style.title, variant: "action" }, formatMessage({ id: returnQuestion.translationKey }))),
         children));
 };
 export { HostRadioGroupReturnQuestionItem };

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

@@ -2,8 +2,8 @@
 import React, { useCallback, useMemo } from "react";
 import { View } from "react-native";
 import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
-import { Text } from "@lookiero/aurora";
 import { useI18n } from "@lookiero/i18n-react";
+import { Text } from "@lookiero/sty-psp-ui";
 import { returnQuestionHasChildren } from "../../../../../../../../projection/returnQuestion/returnQuestion.typeguard";
 import { DOMAIN } from "../../../../../../i18n/i18n";
 import ReturnQuestion from "../../../ReturnQuestion";
@@ -25,7 +25,7 @@ const HostStackReturnQuestionItem = ({ returnQuestion, children, portalHostName,
     const style = useMemo(() => hostStackReturnQuestionItemStyle(), []);
     return (React.createElement(Animated.View, { style: stackAnimatedStyle },
         React.createElement(View, { onLayout: handleOnLayout },
-            titleText && (React.createElement(Text, { level: 3, style: style.title, heading: true }, titleText)),
+            titleText && (React.createElement(Text, { level: 3, style: style.title, variant: "heading" }, titleText)),
             feedbackReturnQuestion && returnQuestionHasChildren(feedbackReturnQuestion) ? (React.createElement(React.Fragment, null,
                 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))));

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

@@ -1,7 +1,7 @@
 import React, { useMemo } from "react";
 import { View } from "react-native";
-import { Text } from "@lookiero/aurora";
 import { useI18n } from "@lookiero/i18n-react";
+import { Text } from "@lookiero/sty-psp-ui";
 import { Modal } from "@lookiero/sty-psp-ui";
 import { returnQuestionHasChildren } from "../../../../../../../projection/returnQuestion/returnQuestion.typeguard";
 import { DOMAIN } from "../../../../../i18n/i18n";

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/optionReturnQuestionItem/OptionReturnQuestionItem.js

@@ -1,8 +1,8 @@
 /* eslint-disable react/prop-types */
 import React, { useCallback, useMemo } from "react";
 import { TouchableHighlight } from "react-native";
-import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
+import { Text } from "@lookiero/sty-psp-ui";
 import { DOMAIN } from "../../../../../i18n/i18n";
 import { useReturnQuestionFeedbackForReturnQuestion } from "../../behaviors/useReturnQuestionFeedback";
 import { style as optionReturnQuestionItemStyle } from "./OptionReturnQuestionItem.style";

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

@@ -1,9 +1,8 @@
 /* eslint-disable react/prop-types */
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 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 { Checkbox, Text } from "@lookiero/sty-psp-ui";
 import { Tradename } from "@lookiero/sty-sp-tradename";
 import { useStaticInfo } from "../../../../../hooks/useStaticInfo";
 import { DOMAIN } from "../../../../../i18n/i18n";
@@ -12,8 +11,8 @@ import { deepestReturnQuestionWithFeedbackForReturnQuestion, feedbackForReturnQu
 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 }),
+    [Tradename.LOOKIERO]: (props) => React.createElement(Text, { level: 1, variant: "detail", ...props }),
+    [Tradename.OUTFITTERY]: (props) => React.createElement(Text, { level: 3, ...props }),
 };
 const RadioReturnQuestionItem = ({ returnQuestion, returnQuestionParent, testID, portalHostName, }) => {
     const { tradename } = useStaticInfo();

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/returnQuestionFeedbackItem/ReturnQuestionFeedbackItem.js

@@ -1,8 +1,8 @@
 /* eslint-disable react/prop-types */
 import React, { useCallback, useMemo } from "react";
 import { View } from "react-native";
-import { Text } from "@lookiero/aurora";
 import { useI18nMessage, useI18n } from "@lookiero/i18n-react";
+import { Text } from "@lookiero/sty-psp-ui";
 import { DOMAIN, I18nMessages } from "../../../../../i18n/i18n";
 import { useReturnQuestionFeedback } from "../../behaviors/useReturnQuestionFeedback";
 import { feedbackForReturnQuestion } from "../../util/returnQuestionFeedback";
@@ -15,7 +15,7 @@ const ReturnQuestionFeedbackItem = ({ returnQuestion }) => {
     const feedback = feedbackForReturnQuestion({ feedback: returnQuestionFeedback, returnQuestion, translate }).join(" / ");
     const style = useMemo(() => returnQuestionFeedbackItemStyle(), []);
     return (React.createElement(View, { style: style.container },
-        returnQuestion.translationKey && (React.createElement(Text, { level: 2, style: style.title, detailBold: true }, formatMessage({ id: returnQuestion.translationKey }))),
-        React.createElement(Text, { level: 1, detail: true }, feedback || unansweredText)));
+        returnQuestion.translationKey && (React.createElement(Text, { level: 2, style: style.title, variant: "detailBold" }, formatMessage({ id: returnQuestion.translationKey }))),
+        React.createElement(Text, { level: 1, variant: "detail" }, feedback || unansweredText)));
 };
 export { ReturnQuestionFeedbackItem };

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

@@ -1,6 +1,6 @@
 import React, { useMemo } from "react";
-import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
+import { Text } from "@lookiero/sty-psp-ui";
 import { ButtonIcon } from "@lookiero/sty-psp-ui";
 import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { Header } from "../Header";
@@ -11,7 +11,7 @@ const CheckoutHeader = ({ onBack }) => {
     const style = useMemo(() => checkoutHeader(), []);
     return (React.createElement(Header, { testID: "checkout-header" },
         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(Text, { level: 3, variant: "action" }, title),
         React.createElement(ButtonIconPlaceholder, null)));
 };
 export { CheckoutHeader };

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

@@ -1,6 +1,6 @@
 import React, { useMemo } from "react";
-import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
+import { Text } from "@lookiero/sty-psp-ui";
 import { ButtonIcon } from "@lookiero/sty-psp-ui";
 import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { Header } from "../Header";
@@ -11,7 +11,7 @@ const ItemDetailHeader = ({ onBack }) => {
     const style = useMemo(() => itemDetailHeaderStyle(), []);
     return (React.createElement(Header, { testID: "item-detail-header" },
         React.createElement(ButtonIconPlaceholder, null),
-        React.createElement(Text, { level: 3, action: true }, title),
+        React.createElement(Text, { level: 3, variant: "action" }, title),
         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,7 @@
 import React, { useCallback, useMemo } from "react";
 import { generatePath, useNavigate } from "react-router-native";
-import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
+import { Text } from "@lookiero/sty-psp-ui";
 import { ButtonIcon } from "@lookiero/sty-psp-ui";
 import { useStaticInfo } from "../../../../hooks/useStaticInfo";
 import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
@@ -31,7 +31,7 @@ const ItemHeader = ({ items, item, onNext, onPrevious }) => {
     }, [basePath, item.id, itemIndex, items, navigate, onNext]);
     return (React.createElement(Header, { testID: "item-header" },
         !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),
+        React.createElement(Text, { level: 3, variant: "action" }, title),
         !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,12 +1,12 @@
 import React, { useCallback, useMemo, useState } from "react";
 import { Platform, ScrollView, View } from "react-native";
 import { useNavigate } from "react-router-native";
-import { Box, Layout as AuroraLayout, Spinner, Text } from "@lookiero/aurora";
+import { Box, Layout as AuroraLayout, Spinner } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { QueryStatus } from "@lookiero/messaging-react";
 import { PayButton, Section } from "@lookiero/payments-front";
 import { Country } from "@lookiero/sty-psp-locale";
-import { Sticky, useScreenSize } from "@lookiero/sty-psp-ui";
+import { Sticky, Text, 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";
@@ -90,7 +90,7 @@ const Checkout = ({ layout: Layout, getAuthToken, useRedirect, onCheckoutFlowSuc
                     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),
+                        React.createElement(Text, { level: 3, style: style.title, variant: "heading" }, titleText),
                         checkoutItemsKept?.map((checkoutItem) => (React.createElement(View, { key: checkoutItem.id, testID: "checkout-items-kept" },
                             React.createElement(ProductVariant, { brand: checkoutItem.productVariant.brand, color: checkoutItem.productVariant.color, country: country, media: checkoutItem.productVariant.media, name: checkoutItem.productVariant.name, price: checkoutItem.price, status: checkoutItem.status, size: checkoutItem.status === CheckoutItemStatus.REPLACED && checkoutItem.replacedFor
                                     ? checkoutItem.replacedFor.size

package/dist/src/infrastructure/ui/views/item/components/banner/CustomerDecissionBanner.d.ts

@@ -1,4 +1,5 @@
 import { FC } from "react";
+import "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
 type CustomerDecissionBannerStatus = Exclude<CheckoutItemStatus, CheckoutItemStatus.INITIAL>;
 interface CustomerDecissionBannerProps {

package/dist/src/infrastructure/ui/views/item/components/banner/CustomerDecissionBanner.js

@@ -1,8 +1,9 @@
 import React, { useMemo } from "react";
 import { Pressable, View } from "react-native";
-import { InfoBox, Text } from "@lookiero/aurora";
+import { InfoBox } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
-import { useScreenSize } from "@lookiero/sty-psp-ui";
+import "@lookiero/sty-psp-ui";
+import { useScreenSize, Text } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
 import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { style as customerDecissionBannerStyle } from "./CustomerDecissionBanner.style";
@@ -20,6 +21,6 @@ const CustomerDecissionBanner = ({ checkoutItemStatus, onPress }) => {
     return (React.createElement(View, { style: [style.container, isSmallScreen ? style.smallContainer : null] },
         React.createElement(InfoBox, { text: decissionText },
             React.createElement(Pressable, { testID: "customer-decission-banner", onPress: onPress },
-                React.createElement(Text, { level: isSmallScreen ? 2 : 1, detail: true, underlined: true }, bannerButtonText)))));
+                React.createElement(Text, { level: isSmallScreen ? 2 : 1, style: style.underlinedText, variant: "detail" }, bannerButtonText)))));
 };
 export { CustomerDecissionBanner };

package/dist/src/infrastructure/ui/views/item/components/banner/CustomerDecissionBanner.style.d.ts

@@ -5,5 +5,8 @@ declare const style: () => {
     smallContainer: {
         marginHorizontal: number;
     };
+    underlinedText: {
+        textDecorationLine: "underline";
+    };
 };
 export { style };

package/dist/src/infrastructure/ui/views/item/components/banner/CustomerDecissionBanner.style.js

@@ -9,6 +9,9 @@ const style = () => {
         smallContainer: {
             marginHorizontal: space6,
         },
+        underlinedText: {
+            textDecorationLine: "underline",
+        },
     });
 };
 export { style };

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

@@ -1,8 +1,8 @@
 import React, { useMemo } from "react";
 import { View } from "react-native";
-import { Button, BUTTON_VARIANT, Text } from "@lookiero/aurora";
+import { Button, BUTTON_VARIANT } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
-import { Modal } from "@lookiero/sty-psp-ui";
+import { Modal, Text } from "@lookiero/sty-psp-ui";
 import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { style as getOutOfCheckoutModalStyle } from "./GetOutOfCheckoutModal.style";
 const GetOutOfCheckoutModal = ({ visible, onDismiss, onConfirm }) => {
@@ -22,8 +22,8 @@ const GetOutOfCheckoutModal = ({ visible, onDismiss, onConfirm }) => {
             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, { level: 3, selectable: false, style: style.buttonText, action: true, upperCase: true }, dismissButtonText)),
+                React.createElement(Text, { level: 3, selectable: false, style: [style.buttonText, { textTransform: "uppercase" }], variant: "action" }, dismissButtonText)),
             React.createElement(Button, { style: [style.button, style.confirmButton], variant: BUTTON_VARIANT.SECONDARY, onPress: onConfirm },
-                React.createElement(Text, { level: 3, selectable: false, style: style.buttonText, action: true, upperCase: true }, confirmButtonText)))));
+                React.createElement(Text, { level: 3, selectable: false, style: [style.buttonText, { textTransform: "uppercase" }], variant: "action" }, confirmButtonText)))));
 };
 export { GetOutOfCheckoutModal };

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

@@ -1,7 +1,7 @@
 import React, { useMemo } from "react";
 import { View } from "react-native";
-import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
+import { Text } from "@lookiero/sty-psp-ui";
 import { useScreenSize } from "@lookiero/sty-psp-ui";
 import { size } from "../../../../../../projection/size/size";
 import { Price } from "../../../../components/atoms/price/Price";
@@ -16,9 +16,9 @@ const ProductVariantDescription = ({ brand, name, price, size: sizeProjection, c
     return (React.createElement(View, { style: [style.container, !isDesktopScreen && style.smallContainer] },
         React.createElement(View, { style: style.info },
             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(Text, { level: 1, style: style.brand, variant: "detail" }, brand),
+                React.createElement(Text, { level: 1, variant: "detailBold" }, name)),
             React.createElement(Price, { price: price, withPercentage: true })),
-        React.createElement(Text, { level: 1, detail: true }, `${sizeText} ${sizeProjection.unique ? uniqueText : size({ size: sizeProjection, country })}`)));
+        React.createElement(Text, { level: 1, variant: "detail" }, `${sizeText} ${sizeProjection.unique ? uniqueText : size({ size: sizeProjection, country })}`)));
 };
 export { ProductVariantDescription };

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

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

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 { Text } from "@lookiero/aurora";
+import { Text } from "@lookiero/sty-psp-ui";
 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, }) => {
@@ -11,7 +11,7 @@ const SelectModal = ({ modalVisible, options, style: customStyle, testID, title,
     const style = useMemo(() => modalStyle(), []);
     return (React.createElement(Modal, { portalHostName: portalHostName, testID: testID, visible: modalVisible, scroll: true, showCloseButton: true, onClose: onClose },
         React.createElement(View, { style: [style.modalContent, customStyle?.modalContent] },
-            title && (React.createElement(Text, { level: 3, style: style.modalTitle, heading: true }, title)),
+            title && (React.createElement(Text, { level: 3, style: style.modalTitle, variant: "heading" }, 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, { level: 3, style: [style.optionText, value === optionValue && style.textActive, customStyle?.optionText] }, label)))))));
 };

package/dist/src/infrastructure/ui/views/item/components/sizeWithoutStockModal/SizeWithoutStockModal.js

@@ -1,8 +1,8 @@
 import React, { useMemo } from "react";
 import { View } from "react-native";
-import { Button, Text } from "@lookiero/aurora";
+import { Button } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
-import { Modal } from "@lookiero/sty-psp-ui";
+import { Modal, Text } from "@lookiero/sty-psp-ui";
 import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { style as sizeWithoutStockModalStyle } from "./SizeWithoutStockModal.style";
 const SizeWithoutStockModal = ({ visible, onDismiss }) => {
@@ -12,7 +12,7 @@ const SizeWithoutStockModal = ({ visible, onDismiss }) => {
     const style = useMemo(() => sizeWithoutStockModalStyle(), []);
     return (React.createElement(Modal, { portalHostName: "Checkout", visible: visible, showCloseButton: true, onClose: onDismiss },
         React.createElement(View, { style: style.modalContent },
-            React.createElement(Text, { level: 3, style: style.title, heading: true }, titleText),
+            React.createElement(Text, { level: 3, style: style.title, variant: "heading" }, titleText),
             React.createElement(Text, { level: 3, style: style.description }, descriptionText),
             React.createElement(Button, { onPress: onDismiss }, buttonText))));
 };

package/dist/src/infrastructure/ui/views/return/components/price/Price.js

@@ -1,7 +1,7 @@
 import React, { useMemo } from "react";
 import { View } from "react-native";
-import { Text } from "@lookiero/aurora";
 import { useI18nNumber } from "@lookiero/i18n-react";
+import { Text } from "@lookiero/sty-psp-ui";
 import { DOMAIN } from "../../../../i18n/i18n";
 import { style as priceStyle } from "./Price.style";
 const Price = ({ price, withPercentage = false }) => {
@@ -21,9 +21,9 @@ const Price = ({ price, withPercentage = false }) => {
     const priceValue = isDiscounted ? productDiscountedPrice : productPrice;
     const style = useMemo(() => priceStyle(), []);
     return (React.createElement(View, { style: style.price, testID: "price" },
-        isDiscounted && (React.createElement(Text, { level: 1, style: style.discountedPriceText, testID: "discounted-price-text", detail: true, lineThrough: true }, productPrice)),
+        isDiscounted && (React.createElement(Text, { level: 1, style: style.discountedPriceText, testID: "discounted-price-text", variant: "detail" }, productPrice)),
         React.createElement(View, { style: style.discountedPriceInfo },
-            React.createElement(Text, { level: 1, testID: "price-text", detail: true }, priceValue),
-            isDiscounted && withPercentage ? (React.createElement(Text, { level: 1, style: style.discountedPercentage, testID: "discounted-percentage-text", detail: true }, `-${price.discountedPrice.percentage}%`)) : null)));
+            React.createElement(Text, { level: 1, testID: "price-text", variant: "detail" }, priceValue),
+            isDiscounted && withPercentage ? (React.createElement(Text, { level: 1, style: style.discountedPercentage, testID: "discounted-percentage-text", variant: "detail" }, `-${price.discountedPrice.percentage}%`)) : null)));
 };
 export { Price };

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

@@ -8,6 +8,7 @@ declare const style: () => {
     };
     discountedPriceText: {
         color: string;
+        textDecorationLine: "line-through";
     };
     price: {
         flexDirection: "row";

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

@@ -12,6 +12,7 @@ const style = () => {
         },
         discountedPriceText: {
             color: colorTextMedium,
+            textDecorationLine: "line-through",
         },
         price: {
             flexDirection: "row",

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

@@ -1,7 +1,7 @@
 import React, { useMemo } from "react";
 import { Image, View } from "react-native";
-import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
+import { Text } 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";
@@ -26,9 +26,9 @@ const ProductVariantPreview = ({ item, country }) => {
                         }),
                     } })),
                 React.createElement(View, { style: style.info },
-                    React.createElement(Text, { level: 2, style: style.text, detail: true }, brand),
-                    React.createElement(Text, { level: 2, detail: true }, name),
-                    React.createElement(Text, { level: 2, style: style.text, detail: true }, `${sizeText} ${sizeProjection.unique ? uniqueText : size({ size: sizeProjection, country })}`)),
+                    React.createElement(Text, { level: 2, style: style.text, variant: "detail" }, brand),
+                    React.createElement(Text, { level: 2, variant: "detail" }, name),
+                    React.createElement(Text, { level: 2, style: style.text, variant: "detail" }, `${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/returnQuestionsForm/ReturnQuestionsForm.js

@@ -3,10 +3,11 @@ import React, { useCallback, useMemo } from "react";
 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 } from "@lookiero/aurora";
+import { Box, Button, Layout as AuroraLayout, Spinner } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { CommandStatus } from "@lookiero/messaging-react";
 import { useLogger } from "@lookiero/sty-psp-logging";
+import { Text } from "@lookiero/sty-psp-ui";
 import { useScreenSize } from "@lookiero/sty-psp-ui";
 import { Tradename } from "@lookiero/sty-sp-tradename";
 import { ReturnQuestionType } from "../../../../../../projection/returnQuestion/returnQuestion.constants";
@@ -120,8 +121,8 @@ const ReturnQuestionsForm = ({ checkout, checkoutItem, country, layout: Layout,
                                     !isMobileScreen && style.infoDesktop,
                                     tradename === Tradename.OUTFITTERY && style.infoOutfittery,
                                 ] },
-                                React.createElement(Text, { level: 3, heading: true }, titleText),
-                                React.createElement(Text, { level: 1, style: style.description, detail: true }, descriptionText)),
+                                React.createElement(Text, { level: 3, variant: "heading" }, titleText),
+                                React.createElement(Text, { level: 1, style: style.description, variant: "detail" }, descriptionText)),
                             React.createElement(ReturnQuestions, { portalHostName: RETURN_QUESTION_FORM_PORTAL_HOST_NAME, returnQuestions: returnQuestions }),
                             React.createElement(View, { style: [style.submit, !isMobileScreen && style.submitDesktop] },
                                 React.createElement(Button, { testID: "return-questions-button", onPress: handleOnSubmit }, submitButtonText)))))))));