@lookiero/checkout 14.1.0 → 14.2.1

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

@@ -1,7 +1,7 @@
 import React, { useMemo } from "react";
 import { Pressable, View } from "react-native";
-import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
+import { Text } 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";
@@ -21,14 +21,14 @@ 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, { 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 },
+                    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" },
                         sizeProjection.unique ? uniqueText : size({ size: sizeProjection, country }),
                         " / ",
                         colorLabel),
                     status === CheckoutItemStatus.REPLACED && (React.createElement(View, { style: style.sizeChange },
-                        React.createElement(Text, { level: 2, detail: true }, sizeChangeText)))),
+                        React.createElement(Text, { level: 2, variant: "detail" }, sizeChangeText)))),
                 React.createElement(Price, { price: price, variant: "detail" }))),
         onPress && React.createElement(Icon, { name: "arrow_right" })));
 };

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, Spinner } 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 { 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 { useViewFiveItemsDiscountByCustomerId } from "../../../projection/checkout/react/useViewFiveItemsDiscountByCustomerId";
@@ -92,7 +92,7 @@ const Summary = ({ layout: Layout, children }) => {
                 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.title, variant: "heading" }, titleText),
                             React.createElement(Text, { level: 3, style: style.description }, descriptionText)),
                         children)),
                 pricing && isDesktopScreen ? (React.createElement(Box, { size: { L: "1/3" }, style: [style.resume, isDesktopScreen ? style.desktopResume : style.mobileResume] },

package/dist/src/infrastructure/ui/views/summary/components/collapsiblePricing/CollapsiblePricing.js

@@ -1,9 +1,9 @@
 import React, { useMemo } from "react";
 import { Pressable, View } from "react-native";
 import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
-import { Button, Text } from "@lookiero/aurora";
+import { Button } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
-import { Icon } from "@lookiero/sty-psp-ui";
+import { Icon, Text } from "@lookiero/sty-psp-ui";
 import { Price } from "../../../../components/atoms/price/Price";
 import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { Pricing } from "../pricing/Pricing";
@@ -27,7 +27,7 @@ const CollapsiblePricing = ({ migrated, tradename, pricing, totalCheckoutItemsKe
         collapsible && (React.createElement(Pressable, { style: style.iconContainer, testID: "pricing-collapsed", onPress: onPress }, collapsed ? (React.createElement(Icon, { name: "arrow_up_small", testID: "arrow-up" })) : (React.createElement(Icon, { name: "arrow_down_small", testID: "arrow-down" })))),
         collapsed && collapsible ? (React.createElement(Animated.View, { key: "collapsed", style: [style.collapsed, collapsedAnimatedStyle] },
             React.createElement(View, { style: style.collapsedContent },
-                React.createElement(Text, { level: 1, style: style.totalCollapsed, detail: true },
+                React.createElement(Text, { level: 1, style: style.totalCollapsed, variant: "detail" },
                     totalText,
                     " ",
                     totalCheckoutItemsKeptText),

package/dist/src/infrastructure/ui/views/summary/components/pricing/Pricing.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 { Tradename } from "@lookiero/sty-sp-tradename";
 import { Price } from "../../../../components/atoms/price/Price";
 import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
@@ -9,7 +9,7 @@ import { style as pricingStyle } from "./Pricing.style";
 const Row = ({ action = false, text, level = 3, children }) => {
     const style = useMemo(() => pricingStyle(), []);
     return (React.createElement(View, { style: style.row },
-        React.createElement(Text, { action: action, level: level }, text),
+        React.createElement(Text, { level: level, variant: action ? "action" : "body" }, text),
         children));
 };
 const Pricing = ({ pricing, totalCheckoutItemsKept, tradename, migrated }) => {

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

@@ -1,7 +1,7 @@
 import React, { useCallback, 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 { Tabs, useScreenSize } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
 import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";

package/dist/src/version.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "14.1.0";
-export declare const RELEASE = "checkout@14.1.0";
+export declare const VERSION = "14.2.1";
+export declare const RELEASE = "checkout@14.2.1";

package/dist/src/version.js

@@ -1,2 +1,2 @@
-export const VERSION = "14.1.0";
-export const RELEASE = "checkout@14.1.0";
+export const VERSION = "14.2.1";
+export const RELEASE = "checkout@14.2.1";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "14.1.0",
+  "version": "14.2.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": "false",
@@ -28,13 +28,13 @@
     "@lookiero/sty-psp-i18n": "^2.0",
     "@lookiero/sty-psp-locale": "^2.1",
     "@lookiero/sty-psp-logging": "^2.2",
-    "@lookiero/sty-psp-notifications": "^2.15",
+    "@lookiero/sty-psp-notifications": "^2.16",
     "@lookiero/sty-psp-react-native": "^2.0",
     "@lookiero/sty-psp-segment": "^0.1",
     "@lookiero/sty-psp-storage": "^1.1",
     "@lookiero/sty-psp-tracking": "^2.4",
-    "@lookiero/sty-psp-ui": "^3.4",
-    "@lookiero/sty-psp-ui-settings": "^1.5",
+    "@lookiero/sty-psp-ui": "^3.5",
+    "@lookiero/sty-psp-ui-settings": "^1.6",
     "@lookiero/sty-psp-units": "^0.1",
     "@lookiero/sty-psp-uuid": "^0.2",
     "@lookiero/sty-sp-tradename": "^1.0",

package/src/ExpoRoot.tsx

@@ -3,13 +3,14 @@ import { useFonts } from "expo-font";
 import React, { FC, 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 { FeatureFlags, PaymentsQueryProvider, setPaymentsBridge } from "@lookiero/payments-front";
 import { Country, Locale } from "@lookiero/sty-psp-locale";
 import { SentryEnvironment } from "@lookiero/sty-psp-logging";
 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 { KameleoonEnvironment } from "./infrastructure/ab-testing/kameleoonEnvironment";
 import { bootstrap as checkoutBootstrap } from "./infrastructure/delivery/bootstrap";
@@ -117,7 +118,7 @@ const ExpoRoot: FC = () => {
       <PaymentsQueryProvider>
         <EventProvider>
           <Aurora theme={theme}>
-            {isAccessible === false && <Text heading={true}>Checkout is not accessible!</Text>}
+            {isAccessible === false && <Text variant="heading">Checkout is not accessible!</Text>}
 
             <Router>
               <Routes>

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

@@ -1,6 +1,7 @@
 import React, { FC, ReactNode, 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";
 
@@ -16,7 +17,7 @@ const FiveItemsDiscountBanner: FC<FiveItemsDiscountBannerProps> = ({ fiveItemsDi
     values: {
       discount: fiveItemsDiscount.toString(),
       b: (chunks: ReactNode[]) => (
-        <Text as="span" display={DISPLAY.INLINE} level={2} style={style.textBold}>
+        <Text level={2} style={style.textBold}>
           {chunks}
         </Text>
       ),

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

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

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

@@ -1,7 +1,7 @@
 import React, { FC, 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 { PriceProjection } from "../../../../../projection/price/price";
 import { DOMAIN } from "../../../i18n/i18n";
 import { style as priceStyle } from "./Price.style";
@@ -53,12 +53,7 @@ const Price: FC<PriceProps> = ({ price, variant = "default", withPercentage = fa
       </Text>
       {isDiscounted && (
         <View style={style.discountedPriceInfo}>
-          <Text
-            {...PRICE_VARIANT[variant]}
-            style={style.discountedPriceText}
-            testID="discounted-price-text"
-            lineThrough
-          >
+          <Text {...PRICE_VARIANT[variant]} style={style.discountedPriceText} testID="discounted-price-text">
             {productPrice}
           </Text>
           {withPercentage ? (

package/src/infrastructure/ui/components/atoms/price/__snapshots__/Price.test.tsx.snap

@@ -38,21 +38,19 @@ exports[`Price atom matches the snapshot for a discounted price: discounted pric
     testID="price"
   >
     <Text
-      allowFontScaling={false}
-      selectable={false}
+      detail={true}
       style={
         [
           {
             "color": "#0C0A0A",
             "fontFamily": "AreaNormal-Semibold",
-            "fontSize": 13,
-            "letterSpacing": 0.1,
-            "lineHeight": 17,
-            "paddingBottom": 0,
-            "paddingLeft": 0,
-            "paddingRight": 0,
-            "paddingTop": 0,
+            "fontSize": 22,
+            "fontStyle": "normal",
+            "fontWeight": "300",
+            "letterSpacing": -0.2,
+            "lineHeight": 26,
           },
+          undefined,
         ]
       }
       testID="price-text"
@@ -68,20 +66,20 @@ exports[`Price atom matches the snapshot for a discounted price: discounted pric
       }
     >
       <Text
-        allowFontScaling={false}
-        selectable={false}
+        detail={true}
         style={
           [
             {
-              "color": "#837C7C",
+              "color": "#0C0A0A",
               "fontFamily": "AreaNormal-Semibold",
-              "fontSize": 13,
-              "letterSpacing": 0.1,
-              "lineHeight": 17,
-              "paddingBottom": 0,
-              "paddingLeft": 0,
-              "paddingRight": 0,
-              "paddingTop": 0,
+              "fontSize": 22,
+              "fontStyle": "normal",
+              "fontWeight": "300",
+              "letterSpacing": -0.2,
+              "lineHeight": 26,
+            },
+            {
+              "color": "#837C7C",
               "textDecorationLine": "line-through",
             },
           ]
@@ -133,21 +131,19 @@ exports[`Price atom matches the snapshot for a non-discounted price: non-discoun
     testID="price"
   >
     <Text
-      allowFontScaling={false}
-      selectable={false}
+      detail={true}
       style={
         [
           {
             "color": "#0C0A0A",
             "fontFamily": "AreaNormal-Semibold",
-            "fontSize": 13,
-            "letterSpacing": 0.1,
-            "lineHeight": 17,
-            "paddingBottom": 0,
-            "paddingLeft": 0,
-            "paddingRight": 0,
-            "paddingTop": 0,
+            "fontSize": 22,
+            "fontStyle": "normal",
+            "fontWeight": "300",
+            "letterSpacing": -0.2,
+            "lineHeight": 26,
           },
+          undefined,
         ]
       }
       testID="price-text"

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

@@ -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 { CheckoutFeedbackQuestionType } from "../../../../../../../projection/checkoutFeedback/checkoutFeedback.constants";
 import { DOMAIN } from "../../../../../i18n/i18n";
 import { useCheckoutQuestionFeedbackForId } from "../../behaviors/useCheckoutQuestionFeedback";
@@ -36,7 +36,7 @@ const ButtonCheckoutQuestionItem: CheckoutQuestionItem<CheckoutFeedbackQuestionT
       testID={testID}
       onPress={handleOnPress}
     >
-      <Text level={3} style={[style.text, checked && style.textActive]} action>
+      <Text level={3} style={[style.text, checked && style.textActive]} variant="action">
         {optionText}
       </Text>
     </TouchableOpacity>

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

@@ -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 { CheckoutFeedbackQuestionType } from "../../../../../../../projection/checkoutFeedback/checkoutFeedback.constants";
 import { DOMAIN } from "../../../../../i18n/i18n";
 import { CheckoutQuestionItem } from "../CheckoutQuestionItem";

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

@@ -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 { CheckoutFeedbackQuestionType } from "../../../../../../../projection/checkoutFeedback/checkoutFeedback.constants";
 import { DOMAIN } from "../../../../../i18n/i18n";
 import { CheckoutQuestionItem } from "../CheckoutQuestionItem";

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

@@ -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 { ReturnQuestionType } from "../../../../../../../projection/returnQuestion/returnQuestion.constants";
 import { DOMAIN, I18nMessages } from "../../../../../i18n/i18n";
 import { ReturnQuestionItem } from "../ReturnQuestionItem";
@@ -21,7 +21,7 @@ const HostDefaultReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.HOST_
     <>
       {returnQuestion.translationKey && returnQuestion.translationKey !== " " && !isAllOptions ? (
         <View style={style.title}>
-          <Text level={3} action>
+          <Text level={3} variant="action">
             {formatMessage({ id: returnQuestion.translationKey })}
           </Text>
         </View>

package/src/infrastructure/ui/components/organisms/returnQuestions/components/hostLegacyRadioGroupReturnQuestionItem/HostLegacyRadioGroupReturnQuestionItem.tsx

@@ -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 { ReturnQuestionType } from "../../../../../../../projection/returnQuestion/returnQuestion.constants";
 import { DOMAIN } from "../../../../../i18n/i18n";
 import { ReturnQuestionItem } from "../ReturnQuestionItem";
@@ -24,7 +24,7 @@ const HostLegacyRadioGroupReturnQuestionItem: ReturnQuestionItem<ReturnQuestionT
   return (
     <>
       <View style={style.wrapper} testID={testID}>
-        <Text level={3} style={style.title} action>
+        <Text level={3} style={style.title} variant="action">
           {placeholderText}
         </Text>
         {children}

package/src/infrastructure/ui/components/organisms/returnQuestions/components/hostRadioGroupReturnQuestionItem/HostRadioGroupReturnQuestionItem.tsx

@@ -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 { ReturnQuestionType } from "../../../../../../../projection/returnQuestion/returnQuestion.constants";
 import { DOMAIN } from "../../../../../i18n/i18n";
 import { ReturnQuestionItem } from "../ReturnQuestionItem";
@@ -19,7 +19,7 @@ const HostRadioGroupReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.HO
   return (
     <View style={style.wrapper} testID={testID}>
       {returnQuestion.translationKey && (
-        <Text level={3} style={style.title} action>
+        <Text level={3} style={style.title} variant="action">
           {formatMessage({ id: returnQuestion.translationKey })}
         </Text>
       )}

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

@@ -2,8 +2,8 @@
 import React, { useCallback, useMemo } from "react";
 import { LayoutChangeEvent, 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 { ReturnQuestionType } from "../../../../../../../../projection/returnQuestion/returnQuestion.constants";
 import { returnQuestionHasChildren } from "../../../../../../../../projection/returnQuestion/returnQuestion.typeguard";
 import { DOMAIN } from "../../../../../../i18n/i18n";
@@ -52,7 +52,7 @@ const HostStackReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.HOST_ST
     <Animated.View style={stackAnimatedStyle}>
       <View onLayout={handleOnLayout}>
         {titleText && (
-          <Text level={3} style={style.title} heading>
+          <Text level={3} style={style.title} variant="heading">
             {titleText}
           </Text>
         )}

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

@@ -1,7 +1,7 @@
 import React, { FC, 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 { ReturnQuestionProjection } from "../../../../../../../projection/returnQuestion/returnQuestion";
 import { returnQuestionHasChildren } from "../../../../../../../projection/returnQuestion/returnQuestion.typeguard";

package/src/infrastructure/ui/components/organisms/returnQuestions/components/optionReturnQuestionItem/OptionReturnQuestionItem.tsx

@@ -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 { ReturnQuestionType } from "../../../../../../../projection/returnQuestion/returnQuestion.constants";
 import { DOMAIN } from "../../../../../i18n/i18n";
 import { useReturnQuestionFeedbackForReturnQuestion } from "../../behaviors/useReturnQuestionFeedback";

package/src/infrastructure/ui/components/organisms/returnQuestions/components/radioReturnQuestionItem/RadioReturnQuestionItem.tsx

@@ -1,9 +1,8 @@
 /* eslint-disable react/prop-types */
 import React, { FC, useCallback, useEffect, useMemo, useState } from "react";
-import { Pressable } from "react-native";
-import { Text as AuroraText, TextProperties } from "@lookiero/aurora";
+import { Pressable, TextProps as RNTextProps } from "react-native";
 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 { ReturnQuestionType } from "../../../../../../../projection/returnQuestion/returnQuestion.constants";
 import { useStaticInfo } from "../../../../../hooks/useStaticInfo";
@@ -20,9 +19,9 @@ import { ReturnQuestionItem } from "../ReturnQuestionItem";
 import { ModalOptionReturnQuestionItems } from "../modalOptionReturnQuestionItems/ModalOptionReturnQuestionItems";
 import { style as radioReturnQuestionItemStyle } from "./RadioReturnQuestionItem.style";
 
-const TEXT: Record<Tradename, FC<TextProperties>> = {
-  [Tradename.LOOKIERO]: (props) => <AuroraText level={1} detail {...props} />,
-  [Tradename.OUTFITTERY]: (props) => <AuroraText level={3} {...props} />,
+const TEXT: Record<Tradename, FC<RNTextProps>> = {
+  [Tradename.LOOKIERO]: (props) => <Text level={1} variant="detail" {...props} />,
+  [Tradename.OUTFITTERY]: (props) => <Text level={3} {...props} />,
 };
 
 const RadioReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.OPTION> = ({

package/src/infrastructure/ui/components/organisms/returnQuestions/components/returnQuestionFeedbackItem/ReturnQuestionFeedbackItem.tsx

@@ -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 { ReturnQuestionType } from "../../../../../../../projection/returnQuestion/returnQuestion.constants";
 import { DOMAIN, I18nMessages } from "../../../../../i18n/i18n";
 import { useReturnQuestionFeedback } from "../../behaviors/useReturnQuestionFeedback";
@@ -29,11 +29,11 @@ const ReturnQuestionFeedbackItem: ReturnQuestionItem<ReturnQuestionType.HOST_DEF
   return (
     <View style={style.container}>
       {returnQuestion.translationKey && (
-        <Text level={2} style={style.title} detailBold>
+        <Text level={2} style={style.title} variant="detailBold">
           {formatMessage({ id: returnQuestion.translationKey })}
         </Text>
       )}
-      <Text level={1} detail>
+      <Text level={1} variant="detail">
         {feedback || unansweredText}
       </Text>
     </View>

package/src/infrastructure/ui/components/templates/header/checkoutHeader/CheckoutHeader.tsx

@@ -1,6 +1,6 @@
 import React, { FC, 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";
@@ -19,7 +19,7 @@ const CheckoutHeader: FC<CheckoutHeaderProps> = ({ onBack }) => {
   return (
     <Header testID="checkout-header">
       <ButtonIcon name="arrow_left" style={{ button: style.button }} testID="arrow-left-button-icon" onPress={onBack} />
-      <Text level={3} action>
+      <Text level={3} variant="action">
         {title}
       </Text>
       <ButtonIconPlaceholder />

package/src/infrastructure/ui/components/templates/header/checkoutHeader/__snapshots__/CheckoutHeader.test.tsx.snap

@@ -98,21 +98,27 @@ exports[`CheckoutHeader template matches the snapshot 1`] = `
           [
             {
               "color": "#0C0A0A",
-              "fontFamily": "auroraicons",
-              "fontSize": 24,
+              "fontFamily": "AreaNormal-Semibold",
+              "fontSize": 15,
               "fontStyle": "normal",
-              "fontWeight": "normal",
-              "height": 24,
+              "fontWeight": "300",
               "letterSpacing": -0.2,
-              "lineHeight": 24,
-              "minHeight": 24,
-              "minWidth": 24,
-              "paddingBottom": 0,
-              "paddingLeft": 0,
-              "paddingRight": 0,
-              "paddingTop": 0,
-              "width": 24,
+              "lineHeight": 20,
             },
+            [
+              {
+                "fontFamily": "auroraicons",
+                "fontSize": 24,
+                "fontStyle": "normal",
+                "fontWeight": "normal",
+                "height": 24,
+                "lineHeight": 24,
+                "minHeight": 24,
+                "minWidth": 24,
+                "width": 24,
+              },
+              undefined,
+            ],
           ]
         }
         testID="icon"
@@ -121,21 +127,18 @@ exports[`CheckoutHeader template matches the snapshot 1`] = `
       </Text>
     </View>
     <Text
-      allowFontScaling={false}
-      selectable={false}
       style={
         [
           {
             "color": "#0C0A0A",
             "fontFamily": "AreaNormal-Extrabold",
             "fontSize": 15,
+            "fontStyle": "normal",
+            "fontWeight": "normal",
             "letterSpacing": -0.2,
             "lineHeight": 20,
-            "paddingBottom": 0,
-            "paddingLeft": 0,
-            "paddingRight": 0,
-            "paddingTop": 0,
           },
+          undefined,
         ]
       }
     >

package/src/infrastructure/ui/components/templates/header/itemDetailHeader/ItemDetailHeader.tsx

@@ -1,6 +1,6 @@
 import React, { FC, 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";
@@ -18,7 +18,7 @@ const ItemDetailHeader: FC<ItemDetailHeaderProps> = ({ onBack }) => {
   return (
     <Header testID="item-detail-header">
       <ButtonIconPlaceholder />
-      <Text level={3} action>
+      <Text level={3} variant="action">
         {title}
       </Text>
       <ButtonIcon name="close" style={{ button: style.button }} testID="close-button-icon" onPress={onBack} />