@lookiero/checkout 0.2.24 → 0.2.26

package/README.md

@@ -5,7 +5,7 @@
 
 ## 💡 Prerequisites
 
-- Node.js ^14.20.0 || ^18.9.0
+- Node.js ^14.20.0 || ^16.13.0 || ^18.9.0
 - NPM >= 8
 
 ## 🚀 Getting Started

package/dist/infrastructure/ui/Root.js

@@ -8,6 +8,6 @@ const root = ({ Messaging, I18n, development }) =>
     const handleOnI18nError = useCallback(() => void 0, []);
     return (React.createElement(Messaging, { includeReactQueryDevTools: Platform.OS === "web" },
         React.createElement(Router, null,
-            React.createElement(Routing, { onNotAccessible: onNotAccessible, customerId: customerId, locale: locale, I18n: I18n, onI18nError: development ? undefined : handleOnI18nError }))));
+            React.createElement(Routing, { I18n: I18n, customerId: customerId, locale: locale, onI18nError: development ? undefined : handleOnI18nError, onNotAccessible: onNotAccessible }))));
 };
 export { root };

package/dist/infrastructure/ui/components/atoms/modal/Modal.style.d.ts

@@ -1,12 +1,13 @@
 declare const style: {
     centeredView: {
+        backgroundColor: string;
         flex: number;
         justifyContent: "center";
-        backgroundColor: string;
         paddingHorizontal: number;
     };
     modalView: {
         backgroundColor: string;
+        elevation: number;
         padding: number;
         shadowColor: string;
         shadowOffset: {
@@ -15,7 +16,6 @@ declare const style: {
         };
         shadowOpacity: number;
         shadowRadius: number;
-        elevation: number;
     };
 };
 export { style };

package/dist/infrastructure/ui/components/atoms/modal/Modal.style.js

@@ -3,13 +3,14 @@ import { theme } from "../../../theme/theme";
 const { colorBase, colorContent, colorOverlay, spaceXL } = theme();
 const style = StyleSheet.create({
     centeredView: {
+        backgroundColor: colorOverlay,
         flex: 1,
         justifyContent: "center",
-        backgroundColor: colorOverlay,
         paddingHorizontal: spaceXL,
     },
     modalView: {
         backgroundColor: colorBase,
+        elevation: 5,
         padding: spaceXL,
         shadowColor: colorContent,
         shadowOffset: {
@@ -18,7 +19,6 @@ const style = StyleSheet.create({
         },
         shadowOpacity: 0.25,
         shadowRadius: 4,
-        elevation: 5,
     },
 });
 export { style };

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

@@ -16,7 +16,7 @@ const Price = ({ price }) => {
         currency: price.currency,
     });
     return (React.createElement(View, { style: style.price, testID: "price" },
-        React.createElement(Text, { body: true, level: 3, style: isDiscounted && style.priceTextDiscounted, testID: "price-text" }, productPrice),
-        isDiscounted && (React.createElement(Text, { body: true, level: 3, style: style.discountedPriceText, testID: "discounted-price-text" }, productDiscountedPrice))));
+        React.createElement(Text, { level: 3, style: isDiscounted && style.priceTextDiscounted, testID: "price-text", body: true }, productPrice),
+        isDiscounted && (React.createElement(Text, { level: 3, style: style.discountedPriceText, testID: "discounted-price-text", body: true }, productDiscountedPrice))));
 };
 export { Price };

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

@@ -1,13 +1,13 @@
 declare const style: {
+    discountedPriceText: {
+        color: string;
+        marginLeft: number;
+    };
     price: {
         flexDirection: "row";
     };
     priceTextDiscounted: {
         textDecorationLine: "line-through";
     };
-    discountedPriceText: {
-        marginLeft: number;
-        color: string;
-    };
 };
 export { style };

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

@@ -2,15 +2,15 @@ import { StyleSheet } from "react-native";
 import { theme } from "../../../theme/theme";
 const { colorPrimary, spaceS } = theme();
 const style = StyleSheet.create({
+    discountedPriceText: {
+        color: colorPrimary,
+        marginLeft: spaceS,
+    },
     price: {
         flexDirection: "row",
     },
     priceTextDiscounted: {
         textDecorationLine: "line-through",
     },
-    discountedPriceText: {
-        marginLeft: spaceS,
-        color: colorPrimary,
-    },
 });
 export { style };

package/dist/infrastructure/ui/components/layouts/body/Body.style.d.ts

@@ -1,10 +1,10 @@
 declare const style: {
+    column: {
+        paddingHorizontal: number;
+    };
     row: {
         flex: number;
         justifyContent: "center";
     };
-    column: {
-        paddingHorizontal: number;
-    };
 };
 export { style };

package/dist/infrastructure/ui/components/layouts/body/Body.style.js

@@ -2,12 +2,12 @@ import { StyleSheet } from "react-native";
 import { theme } from "../../../theme/theme";
 const { spaceXL } = theme();
 const style = StyleSheet.create({
+    column: {
+        paddingHorizontal: spaceXL,
+    },
     row: {
         flex: 1,
         justifyContent: "center",
     },
-    column: {
-        paddingHorizontal: spaceXL,
-    },
 });
 export { style };

package/dist/infrastructure/ui/components/organisms/returnQuestions/ReturnQuestion.js

@@ -2,7 +2,7 @@ import React, { memo } from "react";
 import { useReturnQuestionItem } from "./behaviors/useReturnQuestionItem";
 const ReturnQuestion = ({ returnQuestion, returnQuestionParentId, portalHostName, }) => {
     const Item = useReturnQuestionItem({ type: returnQuestion.type });
-    return (React.createElement(Item, { returnQuestion: returnQuestion, returnQuestionParentId: returnQuestionParentId, portalHostName: portalHostName },
-        React.createElement(React.Fragment, null, returnQuestion.children?.map((childReturnQuestion) => (React.createElement(ReturnQuestion, { key: childReturnQuestion.id, returnQuestion: childReturnQuestion, returnQuestionParentId: returnQuestion.id, portalHostName: portalHostName }))))));
+    return (React.createElement(Item, { portalHostName: portalHostName, returnQuestion: returnQuestion, returnQuestionParentId: returnQuestionParentId },
+        React.createElement(React.Fragment, null, returnQuestion.children?.map((childReturnQuestion) => (React.createElement(ReturnQuestion, { key: childReturnQuestion.id, portalHostName: portalHostName, returnQuestion: childReturnQuestion, returnQuestionParentId: returnQuestion.id }))))));
 };
 export default memo(ReturnQuestion);

package/dist/infrastructure/ui/components/organisms/returnQuestions/ReturnQuestions.js

@@ -1,4 +1,4 @@
 import React from "react";
 import ReturnQuestion from "./ReturnQuestion";
-const ReturnQuestions = ({ returnQuestions, portalHostName }) => (React.createElement(React.Fragment, null, returnQuestions.map((returnQuestion) => (React.createElement(ReturnQuestion, { key: returnQuestion.id, returnQuestion: returnQuestion, returnQuestionParentId: "", portalHostName: portalHostName })))));
+const ReturnQuestions = ({ returnQuestions, portalHostName }) => (React.createElement(React.Fragment, null, returnQuestions.map((returnQuestion) => (React.createElement(ReturnQuestion, { key: returnQuestion.id, portalHostName: portalHostName, returnQuestion: returnQuestion, returnQuestionParentId: "" })))));
 export { ReturnQuestions };

package/dist/infrastructure/ui/components/organisms/returnQuestions/components/hostDefaultReturnQuestionItem/HostDefaultReturnQuestionItem.style.d.ts

@@ -1,7 +1,7 @@
 declare const style: {
     title: {
-        marginTop: number;
         marginBottom: number;
+        marginTop: number;
         textAlign: "center";
     };
 };

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

@@ -3,8 +3,8 @@ import { theme } from "../../../../../theme/theme";
 const { spaceL, spaceXXXL } = theme();
 const style = StyleSheet.create({
     title: {
-        marginTop: spaceXXXL,
         marginBottom: spaceL,
+        marginTop: spaceXXXL,
         textAlign: "center",
     },
 });

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

@@ -26,10 +26,10 @@ const HostSelectReturnQuestionItem = ({ returnQuestion, children, portalHostName
     const handleOnBackButtonPress = useCallback(() => deepestReturnQuestionWithFeedback &&
         onChange({ returnQuestionId: deepestReturnQuestionWithFeedback.id, returnQuestionFeedback: undefined }), [deepestReturnQuestionWithFeedback, onChange]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(TouchableHighlight, { style: style.container, onPress: handleOnPress, underlayColor: containerUnderlayColor },
+        React.createElement(TouchableHighlight, { style: style.container, underlayColor: containerUnderlayColor, onPress: handleOnPress },
             React.createElement(View, { pointerEvents: "none" },
-                React.createElement(InputField, { label: placeholderText || "", value: inputValue, icon: "arrow-down", editable: false }))),
-        React.createElement(Modal, { visible: modalVisible, onClose: handleOnModalClose, portalHostName: portalHostName, header: deepestReturnQuestionWithFeedback && (React.createElement(ButtonIcon, { name: "arrow-left", onPress: handleOnBackButtonPress, testID: "modal-back-button" })), scroll: true },
+                React.createElement(InputField, { editable: false, icon: "arrow-down", label: placeholderText || "", value: inputValue }))),
+        React.createElement(Modal, { portalHostName: portalHostName, visible: modalVisible, header: deepestReturnQuestionWithFeedback && (React.createElement(ButtonIcon, { name: "arrow-left", testID: "modal-back-button", onPress: handleOnBackButtonPress })), scroll: true, onClose: handleOnModalClose },
             React.createElement(View, { style: style.modalContent }, children))));
 };
 export { HostSelectReturnQuestionItem };

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

@@ -22,6 +22,6 @@ const HostStackReturnQuestionItem = ({ returnQuestion, children, portalHostName,
             titleText && (React.createElement(Text, { level: 2, style: style.title }, titleText)),
             feedbackReturnQuestion ? (React.createElement(React.Fragment, null,
                 React.createElement(Text, { level: 3, style: style.feedback }, feedbackText),
-                feedbackReturnQuestion.children?.map((childReturnQuestion) => (React.createElement(ReturnQuestion, { key: childReturnQuestion.id, returnQuestion: childReturnQuestion, returnQuestionParentId: feedbackReturnQuestion.id, portalHostName: portalHostName }))))) : (children))));
+                feedbackReturnQuestion.children?.map((childReturnQuestion) => (React.createElement(ReturnQuestion, { key: childReturnQuestion.id, portalHostName: portalHostName, returnQuestion: childReturnQuestion, returnQuestionParentId: feedbackReturnQuestion.id }))))) : (children))));
 };
 export { HostStackReturnQuestionItem };

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

@@ -1,12 +1,12 @@
 declare const style: {
-    title: {
-        marginVertical: number;
-        textAlign: "center";
-    };
     feedback: {
         color: string;
-        marginVertical: number;
         lineHeight: number;
+        marginVertical: number;
+    };
+    title: {
+        marginVertical: number;
+        textAlign: "center";
     };
 };
 export { style };

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

@@ -2,14 +2,14 @@ import { StyleSheet } from "react-native";
 import { theme } from "../../../../../theme/theme";
 const { colorGrayscaleL, spaceM, spaceL } = theme();
 const style = StyleSheet.create({
-    title: {
-        marginVertical: spaceL,
-        textAlign: "center",
-    },
     feedback: {
         color: colorGrayscaleL,
-        marginVertical: spaceM,
         lineHeight: 24,
+        marginVertical: spaceM,
+    },
+    title: {
+        marginVertical: spaceL,
+        textAlign: "center",
     },
 });
 export { style };

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

@@ -9,7 +9,7 @@ const OptionReturnQuestionItem = ({ returnQuestion, returnQuestionParentId, }) =
     const { onChange } = useReturnQuestionFeedbackForId({ id: returnQuestionParentId });
     const optionText = useI18nMessage({ id: returnQuestion.name, prefix: RETURN_QUESTIONS_PREFIX });
     const handleOnPress = useCallback(() => onChange({ returnQuestionId: returnQuestionParentId, returnQuestionFeedback: returnQuestion.id }), [onChange, returnQuestion.id, returnQuestionParentId]);
-    return (React.createElement(TouchableHighlight, { style: style.container, onPress: handleOnPress, underlayColor: containerUnderlayColor },
+    return (React.createElement(TouchableHighlight, { style: style.container, underlayColor: containerUnderlayColor, onPress: handleOnPress },
         React.createElement(Text, { level: 3, style: style.text }, optionText)));
 };
 export { OptionReturnQuestionItem };

package/dist/infrastructure/ui/components/organisms/returnQuestions/components/optionReturnQuestionItem/OptionReturnQuestionItem.style.d.ts

@@ -1,9 +1,9 @@
 declare const containerUnderlayColor: string;
 declare const style: {
     container: {
-        paddingVertical: number;
-        borderBottomWidth: number;
         borderBottomColor: string;
+        borderBottomWidth: number;
+        paddingVertical: number;
     };
     text: {
         lineHeight: number;

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

@@ -4,9 +4,9 @@ const { spaceM, colorGrayscaleS } = theme();
 const containerUnderlayColor = colorGrayscaleS;
 const style = StyleSheet.create({
     container: {
-        paddingVertical: spaceM,
-        borderBottomWidth: 1,
         borderBottomColor: colorGrayscaleS,
+        borderBottomWidth: 1,
+        paddingVertical: spaceM,
     },
     text: {
         lineHeight: 24,

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

@@ -21,7 +21,7 @@ const ReturnQuestionFeedbackItem = ({ returnQuestion }) => {
     }), [intl]);
     const feedback = feedbackForReturnQuestion({ feedback: returnQuestionFeedback, returnQuestion, translate }).join(" / ");
     return (React.createElement(View, { style: style.container },
-        React.createElement(Text, { detail: true, level: 2, style: style.title }, titleText),
+        React.createElement(Text, { level: 2, style: style.title, detail: true }, titleText),
         React.createElement(Text, { level: 3 }, feedback || unansweredText)));
 };
 export { ReturnQuestionFeedbackItem };

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

@@ -8,6 +8,6 @@ const TextareaReturnQuestionItem = ({ returnQuestion, returnQuestionParentId, })
     const placeholderText = useI18nMessage({ id: returnQuestion.placeholder, prefix: RETURN_QUESTIONS_PREFIX });
     const { feedback, onChange } = useReturnQuestionFeedbackForId({ id: returnQuestionParentId });
     const handleOnChange = useCallback((value) => onChange({ returnQuestionId: returnQuestionParentId, returnQuestionFeedback: value }), [onChange, returnQuestionParentId]);
-    return (React.createElement(InputField, { multiline: true, label: placeholderText, placeholder: placeholderText, minHeight: TEXTAREA_MIN_HEIGHT, value: feedback, onChange: handleOnChange }));
+    return (React.createElement(InputField, { label: placeholderText, minHeight: TEXTAREA_MIN_HEIGHT, placeholder: placeholderText, value: feedback, multiline: true, onChange: handleOnChange }));
 };
 export { TextareaReturnQuestionItem };

package/dist/infrastructure/ui/routing/CheckoutMiddleware.js

@@ -21,21 +21,21 @@ const CheckoutMiddleware = ({ customerId, loader = React.createElement(Spinner,
     }
     if (!checkoutIntroShown) {
         if (!introRouteMatch) {
-            return React.createElement(Navigate, { replace: true, to: Routes.INTRO });
+            return React.createElement(Navigate, { to: Routes.INTRO, replace: true });
         }
     }
     else {
         if (itemRouteMatch) {
             const checkoutItem = checkout?.items.find((item) => item.id === itemRouteMatch.params.id);
             if (!checkoutItem) {
-                return React.createElement(Navigate, { replace: true, to: Routes.CHECKOUT });
+                return React.createElement(Navigate, { to: Routes.CHECKOUT, replace: true });
             }
         }
         if (firstItemWithoutCustomerDecision && !itemRouteMatch) {
-            return React.createElement(Navigate, { replace: true, to: generatePath(Routes.ITEM, { id: firstItemWithoutCustomerDecision.id }) });
+            return React.createElement(Navigate, { to: generatePath(Routes.ITEM, { id: firstItemWithoutCustomerDecision.id }), replace: true });
         }
         if (firstItemWithoutCustomerDecision === undefined && !summaryRouteMatch) {
-            return React.createElement(Navigate, { replace: true, to: Routes.SUMMARY });
+            return React.createElement(Navigate, { to: Routes.SUMMARY, replace: true });
         }
     }
     return React.createElement(Outlet, null);

package/dist/infrastructure/ui/routing/Routing.js

@@ -16,7 +16,7 @@ const Routing = ({ onNotAccessible, customerId, locale, I18n, onI18nError }) =>
             children: [
                 {
                     path: "",
-                    element: (React.createElement(I18n, { locale: locale, loader: React.createElement(Spinner, null), onError: onI18nError },
+                    element: (React.createElement(I18n, { loader: React.createElement(Spinner, null), locale: locale, onError: onI18nError },
                         React.createElement(Outlet, null))),
                     children: [
                         {
@@ -52,7 +52,7 @@ const Routing = ({ onNotAccessible, customerId, locale, I18n, onI18nError }) =>
         },
         {
             path: "*",
-            element: React.createElement(Navigate, { replace: true, to: Routes.CHECKOUT }),
+            element: React.createElement(Navigate, { to: Routes.CHECKOUT, replace: true }),
         },
     ]);
     return routes;

package/dist/infrastructure/ui/shared/components/atoms/error/Error.js

@@ -1,5 +1,5 @@
 import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
 import React from "react";
 import { style } from "./Error.style";
-const Error = ({ error, style: customStyle }) => (React.createElement(Text, { detail: true, level: 2, style: [style.error, customStyle] }, error));
+const Error = ({ error, style: customStyle }) => (React.createElement(Text, { level: 2, style: [style.error, customStyle], detail: true }, error));
 export { Error };

package/dist/infrastructure/ui/shared/components/atoms/field/Field.js

@@ -1,13 +1,13 @@
 import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
 import { animated, useSpring } from "@react-spring/native";
 import React from "react";
+import { View } from "react-native";
 import { theme } from "../../../../theme/theme";
 import { style } from "./Field.style";
 const { spaceM } = theme();
 const Field = ({ label, isFocused = false, style: customStyle }) => {
     const springs = useSpring(isFocused ? { scale: 0.75, translateY: -14, translateX: 0 } : { scale: 1, translateY: spaceM, translateX: spaceM });
     return (React.createElement(animated.View, { pointerEvents: "none", style: [
-            style.field,
             customStyle?.field,
             {
                 transform: [
@@ -23,6 +23,7 @@ const Field = ({ label, isFocused = false, style: customStyle }) => {
                 ],
             },
         ] },
-        React.createElement(Text, { detail: true, level: 1, style: customStyle?.fieldText }, label)));
+        React.createElement(Text, { level: 1, style: [style.fieldText, customStyle?.fieldText], detail: true }, label),
+        React.createElement(View, { style: [style.fieldBackground, { opacity: isFocused ? 1 : 0 }] })));
 };
 export { Field };

package/dist/infrastructure/ui/shared/components/atoms/field/Field.style.d.ts

@@ -1,7 +1,14 @@
 declare const style: {
-    field: {
-        paddingHorizontal: number;
+    fieldBackground: {
         backgroundColor: string;
+        height: string;
+        position: "absolute";
+        width: string;
+        zIndex: number;
+    };
+    fieldText: {
+        paddingHorizontal: number;
+        zIndex: number;
     };
 };
 export { style };

package/dist/infrastructure/ui/shared/components/atoms/field/Field.style.js

@@ -2,9 +2,16 @@ import { StyleSheet } from "react-native";
 import { theme } from "../../../../theme/theme";
 const { colorBase, spaceS } = theme();
 const style = StyleSheet.create({
-    field: {
-        paddingHorizontal: spaceS,
+    fieldBackground: {
         backgroundColor: colorBase,
+        height: "100%",
+        position: "absolute",
+        width: "100%",
+        zIndex: 0,
+    },
+    fieldText: {
+        paddingHorizontal: spaceS,
+        zIndex: 1,
     },
 });
 export { style };

package/dist/infrastructure/ui/shared/components/atoms/icon/Icon.style.d.ts

@@ -1,13 +1,13 @@
 declare const style: {
     icon: {
         fontFamily: string;
+        fontSize: number;
         fontStyle: "normal";
         fontWeight: "normal";
+        height: number;
+        minHeight: number;
         minWidth: number;
         width: number;
-        minHeight: number;
-        height: number;
-        fontSize: number;
     };
 };
 export { style };

package/dist/infrastructure/ui/shared/components/atoms/icon/Icon.style.js

@@ -4,13 +4,13 @@ const { iconFamily, iconSize } = theme();
 const style = StyleSheet.create({
     icon: {
         fontFamily: iconFamily,
+        fontSize: iconSize,
         fontStyle: "normal",
         fontWeight: "normal",
+        height: iconSize,
+        minHeight: iconSize,
         minWidth: iconSize,
         width: iconSize,
-        minHeight: iconSize,
-        height: iconSize,
-        fontSize: iconSize,
     },
 });
 export { style };

package/dist/infrastructure/ui/shared/components/atoms/input/Input.js

@@ -4,7 +4,7 @@ import { theme } from "../../../../theme/theme";
 import { style } from "./Input.style";
 const DEFAULT_HEIGHT = 56;
 const { colorGrayscaleL } = theme();
-const Input = ({ minHeight = DEFAULT_HEIGHT, style: customStyle, onChange, onContentSizeChange, ...restOfProps }) => {
+const Input = ({ minHeight = DEFAULT_HEIGHT, style: customStyle, placeholderTextColor = colorGrayscaleL, onChange, onContentSizeChange, ...restOfProps }) => {
     const [height, setHeight] = useState(minHeight);
     // When content height has became smaller the onContentSizeChange does in fact triggered but the internal height is incorrect.
     const handleOnContentSizeChange = useCallback((event) => {
@@ -24,6 +24,6 @@ const Input = ({ minHeight = DEFAULT_HEIGHT, style: customStyle, onChange, onCon
             element.style.height = `${Math.max(minHeight, element.scrollHeight)}px`;
         });
     }, [minHeight, onChange]);
-    return (React.createElement(TextInput, { ...restOfProps, style: [style.input, customStyle, { height }], placeholderTextColor: colorGrayscaleL, textAlignVertical: "top", onContentSizeChange: handleOnContentSizeChange, onChange: handleOnChange, testID: "input" }));
+    return (React.createElement(TextInput, { ...restOfProps, placeholderTextColor: placeholderTextColor, style: [style.input, customStyle, { height }], testID: "input", textAlignVertical: "top", onChange: handleOnChange, onContentSizeChange: handleOnContentSizeChange }));
 };
 export { Input };

package/dist/infrastructure/ui/shared/components/atoms/input/Input.style.d.ts

@@ -1,18 +1,18 @@
 declare const style: {
     input: {
         lineHeight?: number | undefined;
-        paddingHorizontal: number;
-        paddingTop: number;
-        paddingBottom: number;
         borderWidth: number;
         color: string;
         fontFamily: string;
         fontSize: number;
         letterSpacing: number;
         outlineStyle: string;
-        whiteSpace: string;
         overflow: "hidden";
+        paddingBottom: number;
+        paddingHorizontal: number;
+        paddingTop: number;
         textOverflow: string;
+        whiteSpace: string;
     };
 };
 export { style };

package/dist/infrastructure/ui/shared/components/atoms/input/Input.style.js

@@ -1,21 +1,21 @@
 import { Platform, StyleSheet } from "react-native";
 import { theme } from "../../../../theme/theme";
 const { borderSize, colorContent, fontBodySize3, fontBodyHeight3, fontBodyLetterSpacing3, fontMap, spaceM } = theme();
+// paddingVertical not working in multiline mode
 const style = StyleSheet.create({
     input: {
-        // paddingVertical not working in multiline mode
-        paddingHorizontal: spaceM,
-        paddingTop: spaceM,
-        paddingBottom: spaceM,
         borderWidth: borderSize,
         color: colorContent,
         fontFamily: fontMap.Body,
         fontSize: fontBodySize3,
         letterSpacing: fontBodyLetterSpacing3,
         outlineStyle: "none",
-        whiteSpace: "nowrap",
         overflow: "hidden",
+        paddingBottom: spaceM,
+        paddingHorizontal: spaceM,
+        paddingTop: spaceM,
         textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
         ...Platform.select({
             web: {
                 lineHeight: fontBodyHeight3,

package/dist/infrastructure/ui/shared/components/atoms/spinner/Spinner.js

@@ -4,5 +4,5 @@ import { theme } from "../../../../theme/theme";
 import { style } from "./Spinner.style";
 const { colorPrimary } = theme();
 const Spinner = () => (React.createElement(View, { style: style.container },
-    React.createElement(ActivityIndicator, { size: "large", color: colorPrimary })));
+    React.createElement(ActivityIndicator, { color: colorPrimary, size: "large" })));
 export { Spinner };

package/dist/infrastructure/ui/shared/components/atoms/spinner/Spinner.style.d.ts

@@ -1,8 +1,8 @@
 declare const style: {
     container: {
+        alignItems: "center";
         display: "flex";
         flex: number;
-        alignItems: "center";
         justifyContent: "center";
     };
 };

package/dist/infrastructure/ui/shared/components/atoms/spinner/Spinner.style.js

@@ -1,9 +1,9 @@
 import { StyleSheet } from "react-native";
 const style = StyleSheet.create({
     container: {
+        alignItems: "center",
         display: "flex",
         flex: 1,
-        alignItems: "center",
         justifyContent: "center",
     },
 });

package/dist/infrastructure/ui/shared/components/layouts/modal/Modal.js

@@ -38,12 +38,12 @@ const Modal = ({ children, visible, header, portalHostName, onClose, size = { M:
         unique: true,
     });
     const ModalContentView = useMemo(() => (scroll ? ScrollView : View), [scroll]);
-    return (React.createElement(Portal, { hostName: portalHostName }, transitions(({ modalOpacity, overlayOpacity, modalTranslateY, modalScale }, item) => item && (React.createElement(View, { style: style.container, pointerEvents: visible ? "auto" : "none", testID: "modal" },
+    return (React.createElement(Portal, { hostName: portalHostName }, transitions(({ modalOpacity, overlayOpacity, modalTranslateY, modalScale }, item) => item && (React.createElement(View, { pointerEvents: visible ? "auto" : "none", style: style.container, testID: "modal" },
         React.createElement(TouchableWithoutFeedback, { onPress: visible ? onClose : undefined },
             React.createElement(animated.View, { style: [style.overlay, { opacity: overlayOpacity }, customStyle?.overlay] })),
-        React.createElement(SafeAreaView, { edges: ["right", "top", "left"], style: style.safeArea, pointerEvents: "box-none" },
-            React.createElement(Row, { style: [style.row, isSmallDevice && style.rowSmall, customStyle?.row], pointerEvents: "box-none" },
-                React.createElement(animated.View, { style: [
+        React.createElement(SafeAreaView, { edges: ["right", "top", "left"], pointerEvents: "box-none", style: style.safeArea },
+            React.createElement(Row, { pointerEvents: "box-none", style: [style.row, isSmallDevice && style.rowSmall, customStyle?.row] },
+                React.createElement(animated.View, { pointerEvents: visible ? "auto" : "none", style: [
                         style.modal,
                         columnSizeForScreenSize && style.modal[columnSizeForScreenSize],
                         {
@@ -52,10 +52,10 @@ const Modal = ({ children, visible, header, portalHostName, onClose, size = { M:
                             maxHeight: screenSizeWithoutInsets,
                         },
                         customStyle?.modal,
-                    ], onLayout: handleOnModalLayout, pointerEvents: visible ? "auto" : "none" },
+                    ], onLayout: handleOnModalLayout },
                     (header || onClose) && (React.createElement(View, { style: [style.header, customStyle?.header] },
                         React.createElement(View, null, header),
-                        onClose && (React.createElement(ButtonIcon, { style: { button: customStyle?.closeButton }, name: "close", onPress: onClose })))),
+                        onClose && (React.createElement(ButtonIcon, { name: "close", style: { button: customStyle?.closeButton }, onPress: onClose })))),
                     React.createElement(ModalContentView, null,
                         React.createElement(View, { style: { paddingBottom: safeAreaInsetBottom } }, children))))))))));
 };