@lookiero/checkout 0.4.0 → 0.4.2

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

@@ -2,14 +2,13 @@ import { Button } from "@lookiero/aurora-next/build/components/atoms/Button/Butt
 import { BUTTON_VARIANT } from "@lookiero/aurora-next/build/components/atoms/Button/Button.definition";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import React, { useCallback } from "react";
-import { CHECKOUT_QUESTIONS_PREFIX } from "../../../../../i18n/i18n";
 import { theme } from "../../../../../theme/theme";
 import { useCheckoutQuestionFeedbackForId } from "../../behaviors/useCheckoutQuestionFeedback";
 import { style } from "./ButtonCheckoutQuestionItem.style";
 const { colorAccent, colorBase } = theme();
 const ButtonCheckoutQuestionItem = ({ checkoutQuestion, checkoutQuestionParentId, }) => {
     const { feedback, onChange } = useCheckoutQuestionFeedbackForId({ id: checkoutQuestionParentId });
-    const optionText = useI18nMessage({ id: checkoutQuestion.name, prefix: CHECKOUT_QUESTIONS_PREFIX });
+    const optionText = useI18nMessage({ id: checkoutQuestion.name });
     const handleOnPress = useCallback(() => onChange({ checkoutQuestionId: checkoutQuestionParentId, checkoutQuestionFeedback: checkoutQuestion.id }), [onChange, checkoutQuestion.id, checkoutQuestionParentId]);
     return (React.createElement(Button
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment

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

@@ -1,10 +1,9 @@
 import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import React from "react";
-import { RETURN_QUESTIONS_PREFIX } from "../../../../../i18n/i18n";
 import { style } from "./HostDefaultCheckoutQuestionItem.style";
 const HostDefaultCheckoutQuestionItem = ({ checkoutQuestion, children, }) => {
-    const titleText = useI18nMessage({ id: checkoutQuestion.name, prefix: RETURN_QUESTIONS_PREFIX });
+    const titleText = useI18nMessage({ id: checkoutQuestion.name });
     return (React.createElement(React.Fragment, null,
         React.createElement(Text, { level: 3, style: style.title }, titleText),
         children));

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

@@ -2,10 +2,9 @@ import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Tex
 import { useI18nMessage } from "@lookiero/i18n-react";
 import React from "react";
 import { View } from "react-native";
-import { CHECKOUT_QUESTIONS_PREFIX } from "../../../../../i18n/i18n";
 import { style } from "./HostSelectCheckoutQuestionItem.style";
 const HostSelectCheckoutQuestionItem = ({ checkoutQuestion, children, }) => {
-    const titleText = useI18nMessage({ id: checkoutQuestion.name, prefix: CHECKOUT_QUESTIONS_PREFIX });
+    const titleText = useI18nMessage({ id: checkoutQuestion.name });
     return (React.createElement(React.Fragment, null,
         React.createElement(Text, { level: 3, style: style.title }, titleText),
         React.createElement(View, { style: style.content }, children)));

package/dist/infrastructure/ui/components/organisms/checkoutQuestions/components/iconCheckoutQuestionItem/IconCheckoutQuestionItem.d.ts

@@ -1,5 +1,5 @@
 import { CheckoutQuestionItem } from "../CheckoutQuestionItem";
-type IconName = "checkout.checkout_question.icon.bad" | "checkout.checkout_question.icon.regular" | "checkout.checkout_question.icon.good";
+type IconName = "checkout_question.icon.bad" | "checkout_question.icon.regular" | "checkout_question.icon.good";
 declare const IconCheckoutQuestionItem: CheckoutQuestionItem;
 export type { IconName };
 export { IconCheckoutQuestionItem };

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

@@ -10,11 +10,11 @@ import { Sad } from "./icons/Sad";
 const { colorAccent } = theme();
 const ICON = {
     // eslint-disable-next-line @typescript-eslint/naming-convention
-    "checkout.checkout_question.icon.bad": Sad,
+    "checkout_question.icon.bad": Sad,
     // eslint-disable-next-line @typescript-eslint/naming-convention
-    "checkout.checkout_question.icon.regular": Normal,
+    "checkout_question.icon.regular": Normal,
     // eslint-disable-next-line @typescript-eslint/naming-convention
-    "checkout.checkout_question.icon.good": Happy,
+    "checkout_question.icon.good": Happy,
 };
 const IconCheckoutQuestionItem = ({ checkoutQuestion, checkoutQuestionParentId, }) => {
     const Icon = ICON[checkoutQuestion.name];

package/dist/infrastructure/ui/components/organisms/checkoutQuestions/components/textareaCheckoutQuestionItem/TextareaCheckoutQuestionItem.js

@@ -1,14 +1,10 @@
 import { useI18nMessage } from "@lookiero/i18n-react";
 import React, { useCallback } from "react";
 import { InputField } from "../../../../../../../shared/ui/components/molecules/inputField/InputField";
-import { RETURN_QUESTIONS_PREFIX } from "../../../../../i18n/i18n";
 import { useCheckoutQuestionFeedbackForId } from "../../behaviors/useCheckoutQuestionFeedback";
 const TEXTAREA_MIN_HEIGHT = 96;
 const TextareaCheckoutQuestionItem = ({ checkoutQuestion, checkoutQuestionParentId, }) => {
-    const placeholderText = useI18nMessage({
-        id: checkoutQuestion.placeholder,
-        prefix: RETURN_QUESTIONS_PREFIX,
-    });
+    const placeholderText = useI18nMessage({ id: checkoutQuestion.placeholder });
     const { feedback, onChange } = useCheckoutQuestionFeedbackForId({ id: checkoutQuestionParentId });
     const handleOnChange = useCallback((value) => onChange({ checkoutQuestionId: checkoutQuestionParentId, checkoutQuestionFeedback: value }), [onChange, checkoutQuestionParentId]);
     return (React.createElement(InputField, { label: placeholderText, minHeight: TEXTAREA_MIN_HEIGHT, placeholder: placeholderText, value: feedback, multiline: true, onChange: handleOnChange }));

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

@@ -1,10 +1,9 @@
 import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import React from "react";
-import { RETURN_QUESTIONS_PREFIX } from "../../../../../i18n/i18n";
 import { style } from "./HostDefaultReturnQuestionItem.style";
 const HostDefaultReturnQuestionItem = ({ returnQuestion, children }) => {
-    const titleText = useI18nMessage({ id: returnQuestion.name, prefix: RETURN_QUESTIONS_PREFIX });
+    const titleText = useI18nMessage({ id: returnQuestion.name });
     return (React.createElement(React.Fragment, null,
         React.createElement(Text, { level: 3, style: style.title }, titleText),
         children));

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

@@ -4,19 +4,18 @@ import { TouchableHighlight, View } from "react-native";
 import { Modal } from "../../../../../../../shared/ui/components/layouts/modal/Modal";
 import { ButtonIcon } from "../../../../../../../shared/ui/components/molecules/buttonIcon/ButtonIcon";
 import { InputField } from "../../../../../../../shared/ui/components/molecules/inputField/InputField";
-import { RETURN_QUESTIONS_PREFIX } from "../../../../../i18n/i18n";
 import { useReturnQuestionFeedback, useReturnQuestionFeedbackForId } from "../../behaviors/useReturnQuestionFeedback";
 import { deepestReturnQuestionWithFeedbackForReturnQuestion, feedbackForReturnQuestion, } from "../../util/returnQuestionFeedback";
 import { style, containerUnderlayColor } from "./HostSelectReturnQuestionItem.style";
 const HostSelectReturnQuestionItem = ({ returnQuestion, children, portalHostName, }) => {
-    const placeholderText = useI18nMessage({ id: returnQuestion.placeholder, prefix: RETURN_QUESTIONS_PREFIX });
+    const placeholderText = useI18nMessage({ id: returnQuestion.placeholder });
     const [modalVisible, setModalVisible] = useState(false);
     const handleOnPress = useCallback(() => setModalVisible(true), []);
     const handleOnModalClose = useCallback(() => setModalVisible(false), []);
     const feedback = useReturnQuestionFeedback();
     const { onChange } = useReturnQuestionFeedbackForId({ id: returnQuestion.id });
     const intl = useIntl();
-    const translate = useCallback((returnQuestionName) => intl.formatMessage({ id: `${RETURN_QUESTIONS_PREFIX}${returnQuestionName}`, defaultMessage: returnQuestionName }), [intl]);
+    const translate = useCallback((returnQuestionName) => intl.formatMessage({ id: returnQuestionName, defaultMessage: returnQuestionName }), [intl]);
     const inputValue = feedbackForReturnQuestion({ feedback, returnQuestion, translate }).join(" / ");
     const deepestReturnQuestionWithFeedback = deepestReturnQuestionWithFeedbackForReturnQuestion({
         feedback,

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

@@ -3,17 +3,16 @@ import { useI18nMessage } from "@lookiero/i18n-react";
 import { animated, useSpring } from "@react-spring/native";
 import React, { useCallback, useState } from "react";
 import { View } from "react-native";
-import { RETURN_QUESTIONS_PREFIX } from "../../../../../i18n/i18n";
 import ReturnQuestion from "../../ReturnQuestion";
 import { useReturnQuestionFeedbackForId } from "../../behaviors/useReturnQuestionFeedback";
 import { style } from "./HostStackReturnQuestionItem.style";
 const HostStackReturnQuestionItem = ({ returnQuestion, children, portalHostName, }) => {
-    const titleText = useI18nMessage({ id: returnQuestion.name, prefix: RETURN_QUESTIONS_PREFIX });
+    const titleText = useI18nMessage({ id: returnQuestion.name });
     const { feedback } = useReturnQuestionFeedbackForId({ id: returnQuestion.id });
     const feedbackReturnQuestion = feedback
         ? returnQuestion.children?.find((returnQuestion) => returnQuestion.id === feedback)
         : undefined;
-    const feedbackText = useI18nMessage({ id: feedbackReturnQuestion?.name, prefix: RETURN_QUESTIONS_PREFIX });
+    const feedbackText = useI18nMessage({ id: feedbackReturnQuestion?.name });
     const [stackHeight, setStackHeight] = useState();
     const handleOnLayout = useCallback(({ nativeEvent: { layout: { height }, }, }) => setStackHeight(height), []);
     const stackSyle = useSpring({ height: stackHeight });

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

@@ -2,12 +2,11 @@ import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Tex
 import { useI18nMessage } from "@lookiero/i18n-react";
 import React, { useCallback } from "react";
 import { TouchableHighlight } from "react-native";
-import { RETURN_QUESTIONS_PREFIX } from "../../../../../i18n/i18n";
 import { useReturnQuestionFeedbackForId } from "../../behaviors/useReturnQuestionFeedback";
 import { containerUnderlayColor, style } from "./OptionReturnQuestionItem.style";
 const OptionReturnQuestionItem = ({ returnQuestion, returnQuestionParentId, }) => {
     const { onChange } = useReturnQuestionFeedbackForId({ id: returnQuestionParentId });
-    const optionText = useI18nMessage({ id: returnQuestion.name, prefix: RETURN_QUESTIONS_PREFIX });
+    const optionText = useI18nMessage({ id: returnQuestion.name });
     const handleOnPress = useCallback(() => onChange({ returnQuestionId: returnQuestionParentId, returnQuestionFeedback: returnQuestion.id }), [onChange, returnQuestion.id, returnQuestionParentId]);
     return (React.createElement(TouchableHighlight, { style: style.container, underlayColor: containerUnderlayColor, onPress: handleOnPress },
         React.createElement(Text, { level: 3, style: style.text }, optionText)));

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

@@ -2,22 +2,16 @@ import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Tex
 import { useI18nMessage, useIntl } from "@lookiero/i18n-react";
 import React, { useCallback } from "react";
 import { View } from "react-native";
-import { I18nMessages, RETURN_QUESTIONS_FEEDBACK_PREFIX, RETURN_QUESTIONS_PREFIX } from "../../../../../i18n/i18n";
+import { I18nMessages } from "../../../../../i18n/i18n";
 import { useReturnQuestionFeedback } from "../../behaviors/useReturnQuestionFeedback";
 import { feedbackForReturnQuestion } from "../../util/returnQuestionFeedback";
 import { style } from "./ReturnQuestionFeedbackItem.style";
 const ReturnQuestionFeedbackItem = ({ returnQuestion }) => {
-    const titleText = useI18nMessage({ id: returnQuestion.name, prefix: RETURN_QUESTIONS_FEEDBACK_PREFIX });
-    const unansweredText = useI18nMessage({
-        id: I18nMessages.FEEDBACK_UNANSWERED,
-        prefix: RETURN_QUESTIONS_FEEDBACK_PREFIX,
-    });
+    const titleText = useI18nMessage({ id: returnQuestion.name });
+    const unansweredText = useI18nMessage({ id: I18nMessages.FEEDBACK_UNANSWERED });
     const returnQuestionFeedback = useReturnQuestionFeedback();
     const intl = useIntl();
-    const translate = useCallback((returnQuestionName) => intl.formatMessage({
-        id: `${RETURN_QUESTIONS_PREFIX}${returnQuestionName}`,
-        defaultMessage: returnQuestionName,
-    }), [intl]);
+    const translate = useCallback((returnQuestionName) => intl.formatMessage({ id: returnQuestionName, defaultMessage: returnQuestionName }), [intl]);
     const feedback = feedbackForReturnQuestion({ feedback: returnQuestionFeedback, returnQuestion, translate }).join(" / ");
     return (React.createElement(View, { style: style.container },
         React.createElement(Text, { level: 2, style: style.title, detail: true }, titleText),

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

@@ -1,11 +1,10 @@
 import { useI18nMessage } from "@lookiero/i18n-react";
 import React, { useCallback } from "react";
 import { InputField } from "../../../../../../../shared/ui/components/molecules/inputField/InputField";
-import { RETURN_QUESTIONS_PREFIX } from "../../../../../i18n/i18n";
 import { useReturnQuestionFeedbackForId } from "../../behaviors/useReturnQuestionFeedback";
 const TEXTAREA_MIN_HEIGHT = 96;
 const TextareaReturnQuestionItem = ({ returnQuestion, returnQuestionParentId, }) => {
-    const placeholderText = useI18nMessage({ id: returnQuestion.placeholder, prefix: RETURN_QUESTIONS_PREFIX });
+    const placeholderText = useI18nMessage({ id: returnQuestion.placeholder });
     const { feedback, onChange } = useReturnQuestionFeedbackForId({ id: returnQuestionParentId });
     const handleOnChange = useCallback((value) => onChange({ returnQuestionId: returnQuestionParentId, returnQuestionFeedback: value }), [onChange, returnQuestionParentId]);
     return (React.createElement(InputField, { label: placeholderText, minHeight: TEXTAREA_MIN_HEIGHT, placeholder: placeholderText, value: feedback, multiline: true, onChange: handleOnChange }));

package/dist/infrastructure/ui/components/templates/SafeAreaScrollView.d.ts

@@ -4,6 +4,7 @@ import { Edge } from "react-native-safe-area-context";
 type SafeAreaScrollViewStyle = "safeAreaView" | "scrollView";
 interface SafeAreaScrollViewProps {
     readonly children: ReactNode;
+    readonly scrollerPaddingTop?: number;
     readonly edges?: Edge[];
     readonly style?: Partial<Record<SafeAreaScrollViewStyle, StyleProp<ViewStyle>>>;
 }

package/dist/infrastructure/ui/components/templates/SafeAreaScrollView.js

@@ -1,16 +1,14 @@
 import React from "react";
 import { ScrollView } from "react-native";
 import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
-import { theme } from "../../theme/theme";
-const { spaceXL } = theme();
-const SafeAreaScrollView = ({ children, edges = ["top", "bottom", "left", "right"], style: customStyle, }) => {
+const SafeAreaScrollView = ({ children, edges = ["top", "bottom", "left", "right"], style: customStyle, scrollerPaddingTop = 0, }) => {
     const { top: safeAreaInsetTop, bottom: safeAreaInsetBottom } = useSafeAreaInsets();
     return (React.createElement(SafeAreaView, { edges: edges, style: customStyle?.safeAreaView },
         React.createElement(ScrollView, { contentContainerStyle: [
                 {
                     // Why did we set this??
-                    paddingTop: !safeAreaInsetTop ? spaceXL : 0,
-                    paddingBottom: !safeAreaInsetBottom ? spaceXL : 0,
+                    paddingTop: safeAreaInsetTop + scrollerPaddingTop,
+                    paddingBottom: safeAreaInsetBottom,
                 },
                 customStyle?.scrollView,
             ] }, children)));

package/dist/infrastructure/ui/i18n/i18n.d.ts

@@ -1,7 +1,4 @@
 declare const COLOR_I18N_PREFIX = "color.";
-declare const RETURN_QUESTIONS_PREFIX = "return_questions.";
-declare const RETURN_QUESTIONS_FEEDBACK_PREFIX = "return_questions_feedback.";
-declare const CHECKOUT_QUESTIONS_PREFIX = "checkout_questions.";
 declare enum I18nMessages {
     INTRO_TITLE = "intro.title",
     INTRO_SUBTITLE = "intro.subtitle",
@@ -30,8 +27,8 @@ declare enum I18nMessages {
     GET_OUT_OF_CHECKOUT_MODAL_DESCRIPTION = "get_out_of_checkout_modal.description",
     GET_OUT_OF_CHECKOUT_MODAL_DISMISS_BUTTON = "get_out_of_checkout_modal.dismiss_button",
     GET_OUT_OF_CHECKOUT_MODAL_CONFIRM_BUTTON = "get_out_of_checkout_modal.confirm_button",
-    FEEDBACK_TITLE = "feedback.title",
-    FEEDBACK_UNANSWERED = "feedback.unanswered",
+    FEEDBACK_TITLE = "return_questions_feedback.feedback.title",
+    FEEDBACK_UNANSWERED = "return_questions_feedback.feedback.unanswered",
     RETURN_QUESTIONS_TITLE = "return_questions.title",
     RETURN_QUESTIONS_SUBMIT_BUTTON = "return_questions.submit_button",
     SUMMARY_TITLE = "summary.title",
@@ -62,4 +59,4 @@ declare enum I18nMessages {
     HEADER_COMPLETE_CHECKOUT_TITLE = "header.complete_checkout_title",
     FEEDBACK_BUTTON = "feedback.button"
 }
-export { I18nMessages, COLOR_I18N_PREFIX, RETURN_QUESTIONS_PREFIX, RETURN_QUESTIONS_FEEDBACK_PREFIX, CHECKOUT_QUESTIONS_PREFIX, };
+export { I18nMessages, COLOR_I18N_PREFIX };

package/dist/infrastructure/ui/i18n/i18n.js

@@ -1,7 +1,4 @@
 const COLOR_I18N_PREFIX = "color.";
-const RETURN_QUESTIONS_PREFIX = "return_questions.";
-const RETURN_QUESTIONS_FEEDBACK_PREFIX = "return_questions_feedback.";
-const CHECKOUT_QUESTIONS_PREFIX = "checkout_questions.";
 var I18nMessages;
 (function (I18nMessages) {
     I18nMessages["INTRO_TITLE"] = "intro.title";
@@ -31,8 +28,8 @@ var I18nMessages;
     I18nMessages["GET_OUT_OF_CHECKOUT_MODAL_DESCRIPTION"] = "get_out_of_checkout_modal.description";
     I18nMessages["GET_OUT_OF_CHECKOUT_MODAL_DISMISS_BUTTON"] = "get_out_of_checkout_modal.dismiss_button";
     I18nMessages["GET_OUT_OF_CHECKOUT_MODAL_CONFIRM_BUTTON"] = "get_out_of_checkout_modal.confirm_button";
-    I18nMessages["FEEDBACK_TITLE"] = "feedback.title";
-    I18nMessages["FEEDBACK_UNANSWERED"] = "feedback.unanswered";
+    I18nMessages["FEEDBACK_TITLE"] = "return_questions_feedback.feedback.title";
+    I18nMessages["FEEDBACK_UNANSWERED"] = "return_questions_feedback.feedback.unanswered";
     I18nMessages["RETURN_QUESTIONS_TITLE"] = "return_questions.title";
     I18nMessages["RETURN_QUESTIONS_SUBMIT_BUTTON"] = "return_questions.submit_button";
     I18nMessages["SUMMARY_TITLE"] = "summary.title";
@@ -63,4 +60,4 @@ var I18nMessages;
     I18nMessages["HEADER_COMPLETE_CHECKOUT_TITLE"] = "header.complete_checkout_title";
     I18nMessages["FEEDBACK_BUTTON"] = "feedback.button";
 })(I18nMessages || (I18nMessages = {}));
-export { I18nMessages, COLOR_I18N_PREFIX, RETURN_QUESTIONS_PREFIX, RETURN_QUESTIONS_FEEDBACK_PREFIX, CHECKOUT_QUESTIONS_PREFIX, };
+export { I18nMessages, COLOR_I18N_PREFIX };

package/dist/infrastructure/ui/views/App.js

@@ -1,6 +1,5 @@
 import { PortalProvider } from "@gorhom/portal";
 import React from "react";
-import { View } from "react-native";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 import { Notifications } from "../../../shared/notifications/infrastructure/ui/views/Notifications";
 import { style } from "./App.style";
@@ -8,6 +7,5 @@ import { Header } from "./header/Header";
 const App = ({ customerId, menu, children }) => (React.createElement(SafeAreaProvider, null,
     React.createElement(Header, { customerId: customerId, menu: menu, style: style.header }),
     React.createElement(Notifications, null),
-    React.createElement(PortalProvider, null,
-        React.createElement(View, { style: style.body }, children))));
+    React.createElement(PortalProvider, null, children)));
 export { App };

package/dist/infrastructure/ui/views/App.style.d.ts

@@ -1,9 +1,4 @@
 declare const style: {
-    body: {
-        minHeight: string;
-        paddingTop: number;
-        zIndex: number;
-    };
     header: {};
 };
 export { style };

package/dist/infrastructure/ui/views/App.style.js

@@ -1,12 +1,5 @@
 import { Platform, StyleSheet } from "react-native";
-import { theme } from "../theme/theme";
-const { spaceXXXL } = theme();
 const style = StyleSheet.create({
-    body: {
-        minHeight: "100%",
-        paddingTop: spaceXXXL,
-        zIndex: 0,
-    },
     header: {
         ...Platform.select({
             web: {

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

@@ -19,6 +19,7 @@ import { SafeAreaScrollView } from "../../components/templates/SafeAreaScrollVie
 import { I18nMessages } from "../../i18n/i18n";
 import { Routes } from "../../routing/routes";
 import { useBasePath } from "../../routing/useBasePath";
+import { HEADER_HEIGHT } from "../header/Header.style";
 import { ProductVariant } from "../item/components/productVariant/ProductVariant";
 import { Pricing } from "../summary/components/pricing/Pricing";
 import { style } from "./Checkout.style";
@@ -86,7 +87,7 @@ const Checkout = ({ customerId, getAuthToken, useRedirect }) => {
         return React.createElement(Spinner, null);
     return (React.createElement(React.Fragment, null,
         React.createElement(CheckoutSuccessModal, { visible: success, onDismiss: handleOnSuccessModalDismiss }),
-        React.createElement(SafeAreaScrollView, null,
+        React.createElement(SafeAreaScrollView, { scrollerPaddingTop: HEADER_HEIGHT },
             React.createElement(Body, { style: { column: style.bodyColumn } },
                 hasReplacedCheckoutItem && (React.createElement(View, { style: style.deliveryBannerContainer },
                     React.createElement(DeliveryBanner, null))),

package/dist/infrastructure/ui/views/checkout/Checkout.style.d.ts

@@ -10,6 +10,7 @@ declare const style: {
     };
     pricingContainer: {
         marginTop: number;
+        paddingBottom: number;
     };
     title: {
         marginBottom: number;

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

@@ -13,6 +13,7 @@ const style = StyleSheet.create({
     },
     pricingContainer: {
         marginTop: spaceXL,
+        paddingBottom: spaceXL,
     },
     title: {
         marginBottom: spaceM,

package/dist/infrastructure/ui/views/feedback/Feedback.js

@@ -7,6 +7,7 @@ import { useListCheckoutQuestionsByCheckoutId } from "../../../projection/checko
 import { Body } from "../../components/layouts/body/Body";
 import { CheckoutQuestionFeedbackProvider } from "../../components/organisms/checkoutQuestions/behaviors/useCheckoutQuestionFeedback";
 import { SafeAreaScrollView } from "../../components/templates/SafeAreaScrollView";
+import { HEADER_HEIGHT } from "../header/Header.style";
 import { style } from "./Feedback.style";
 import { CheckoutQuestionsForm } from "./components/checkoutQuestionsForm/CheckoutQuestionsForm";
 const Feedback = ({ customerId }) => {
@@ -28,7 +29,7 @@ const Feedback = ({ customerId }) => {
     if (!dependenciesLoaded)
         return React.createElement(Spinner, null);
     return (React.createElement(CheckoutQuestionFeedbackProvider, { feedback: {} },
-        React.createElement(SafeAreaScrollView, null,
+        React.createElement(SafeAreaScrollView, { scrollerPaddingTop: HEADER_HEIGHT },
             React.createElement(Body, { style: { column: style.bodyColumn } },
                 React.createElement(CheckoutQuestionsForm, { checkoutQuestions: checkoutQuestions || [], submitButtonDisabled: giveCheckoutFeedbackStatus === CommandStatus.LOADING, onSubmit: handleOnSubmit })))));
 };

package/dist/infrastructure/ui/views/header/Header.style.d.ts

@@ -1,3 +1,4 @@
+declare const HEADER_HEIGHT: number;
 declare const style: {
     buttonIconPlaceholder: {
         height: number;
@@ -25,4 +26,4 @@ declare const style: {
         textTransform: "uppercase";
     };
 };
-export { style };
+export { style, HEADER_HEIGHT };

package/dist/infrastructure/ui/views/header/Header.style.js

@@ -1,6 +1,7 @@
 import { StyleSheet } from "react-native";
 import { theme } from "../../theme/theme";
 const { colorBase, spaceXXL, spaceXXXL, spaceS } = theme();
+const HEADER_HEIGHT = spaceXXXL;
 const style = StyleSheet.create({
     buttonIconPlaceholder: {
         height: spaceXXL,
@@ -9,7 +10,7 @@ const style = StyleSheet.create({
     container: {
         backgroundColor: colorBase,
         flex: 1,
-        height: spaceXXXL,
+        height: HEADER_HEIGHT,
         paddingHorizontal: spaceS,
         width: "100%",
     },
@@ -28,4 +29,4 @@ const style = StyleSheet.create({
         textTransform: "uppercase",
     },
 });
-export { style };
+export { style, HEADER_HEIGHT };

package/dist/infrastructure/ui/views/intro/Intro.js

@@ -11,6 +11,7 @@ import { useViewFiveItemsDiscountByCustomerId } from "../../../projection/checko
 import { Body } from "../../components/layouts/body/Body";
 import { SafeAreaScrollView } from "../../components/templates/SafeAreaScrollView";
 import { I18nMessages } from "../../i18n/i18n";
+import { HEADER_HEIGHT } from "../header/Header.style";
 import { style } from "./Intro.style";
 const Bullet = ({ text }) => (React.createElement(View, { style: style.bullet },
     React.createElement(Icon, { name: "rounded-tick", style: style.tickIcon }),
@@ -29,7 +30,7 @@ const Intro = ({ customerId }) => {
     const [incrementIntroShownCount, incrementIntroShownCountStatus] = useIncrementIntroShownCount();
     if (fiveItemsDiscountStatus === QueryStatus.LOADING)
         return React.createElement(Spinner, null);
-    return (React.createElement(SafeAreaScrollView, null,
+    return (React.createElement(SafeAreaScrollView, { scrollerPaddingTop: HEADER_HEIGHT },
         React.createElement(Body, { style: { column: style.bodyColumn } },
             React.createElement(View, { style: style.container },
                 React.createElement(View, { style: style.content },

package/dist/infrastructure/ui/views/item/Item.js

@@ -1,6 +1,6 @@
 import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { View } from "react-native";
+import { Platform, View } from "react-native";
 import { generatePath, useMatch, useNavigate, useParams } from "react-router-native";
 import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
 import "../../../../projection/checkout/viewFirstAvailableCheckoutByCustomerId";
@@ -17,6 +17,8 @@ import { ReturnQuestionFeedbackProvider } from "../../components/organisms/retur
 import { SafeAreaScrollView } from "../../components/templates/SafeAreaScrollView";
 import { Routes } from "../../routing/routes";
 import { useBasePath } from "../../routing/useBasePath";
+import { theme } from "../../theme/theme";
+import { HEADER_HEIGHT } from "../header/Header.style";
 import { style } from "./Item.style";
 import { CustomerDecissionBanner } from "./components/banner/CustomerDecissionBanner";
 import { ItemActions } from "./components/itemActions/ItemActions";
@@ -26,6 +28,7 @@ import { ReturnQuestionsFeedback } from "./components/returnQuestionsFeedback/Re
 import { ReturnQuestionsForm } from "./components/returnQuestionsForm/ReturnQuestionsForm";
 import { SizeChangeModal } from "./components/sizeChangeModal/SizeChangeModal";
 import { SizeWithoutStockModal } from "./components/sizeWithoutStockModal/SizeWithoutStockModal";
+const { spaceXL } = theme();
 const Item = ({ customerId }) => {
     const { id } = useParams();
     const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
@@ -133,10 +136,10 @@ const Item = ({ customerId }) => {
     return (React.createElement(ReturnQuestionFeedbackProvider, { feedback: checkoutItem.feedbacks || {} },
         React.createElement(SizeWithoutStockModal, { visible: sizeWithoutStockModalVisible, onDismiss: handleOnHideSizeWithoutStockModal }),
         React.createElement(SizeChangeModal, { visible: sizeChangeModalVisible, onDismiss: handleOnHideSizeChangeModal }),
-        React.createElement(SafeAreaScrollView, null,
+        React.createElement(SafeAreaScrollView, { scrollerPaddingTop: HEADER_HEIGHT },
             React.createElement(Body, null,
                 customerDecissionMade && (React.createElement(CustomerDecissionBanner, { checkoutItemStatus: checkoutItem.status, onPress: handleOnBannerPress })),
-                React.createElement(View, { style: [style.container, { paddingBottom: stickyHeight }] },
+                React.createElement(View, { style: [style.container, { paddingBottom: Platform.OS === "web" ? spaceXL : stickyHeight }] },
                     React.createElement(View, { style: style.sliderContainer },
                         React.createElement(ProductVariantSlider, { producVariantMedia: media })),
                     React.createElement(ProductVariantDescription, { brand: brand, color: color, name: name, price: price, size: productVariantSelected.size }),

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

@@ -8,7 +8,7 @@ import { ReturnQuestions } from "../../../../components/organisms/returnQuestion
 import { ReturnQuestionItemProvider, } from "../../../../components/organisms/returnQuestions/behaviors/useReturnQuestionItem";
 import { HostDefaultReturnQuestionFeedbackItem } from "../../../../components/organisms/returnQuestions/components/hostDefaultReturnQuestionFeedbackItem/HostDefaultReturnQuestionFeedbackItem";
 import { ReturnQuestionFeedbackItem } from "../../../../components/organisms/returnQuestions/components/returnQuestionFeedbackItem/ReturnQuestionFeedbackItem";
-import { I18nMessages, RETURN_QUESTIONS_FEEDBACK_PREFIX } from "../../../../i18n/i18n";
+import { I18nMessages } from "../../../../i18n/i18n";
 import { style } from "./ReturnQuestionsFeedback.style";
 const returnQuestionItems = {
     [ReturnQuestionType.HOST_DEFAULT]: HostDefaultReturnQuestionFeedbackItem,
@@ -19,7 +19,7 @@ const returnQuestionItems = {
     [ReturnQuestionType.OPTION]: ReturnQuestionFeedbackItem,
 };
 const ReturnQuestionsFeedback = ({ returnQuestions, onEditFeedback }) => {
-    const titleText = useI18nMessage({ id: I18nMessages.FEEDBACK_TITLE, prefix: RETURN_QUESTIONS_FEEDBACK_PREFIX });
+    const titleText = useI18nMessage({ id: I18nMessages.FEEDBACK_TITLE });
     return (React.createElement(View, null,
         React.createElement(View, { style: style.titleContainer },
             React.createElement(Text, { level: 2, style: style.title }, titleText),

package/dist/infrastructure/ui/views/item/components/returnQuestionsForm/ReturnQuestionsForm.js

@@ -14,7 +14,7 @@ import { HostSelectReturnQuestionItem } from "../../../../components/organisms/r
 import { HostStackReturnQuestionItem } from "../../../../components/organisms/returnQuestions/components/hostStackReturnQuestionItem/HostStackReturnQuestionItem";
 import { OptionReturnQuestionItem } from "../../../../components/organisms/returnQuestions/components/optionReturnQuestionItem/OptionReturnQuestionItem";
 import { TextareaReturnQuestionItem } from "../../../../components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem";
-import { I18nMessages, RETURN_QUESTIONS_PREFIX } from "../../../../i18n/i18n";
+import { I18nMessages } from "../../../../i18n/i18n";
 import { ProductVariant } from "../productVariant/ProductVariant";
 import { style } from "./ReturnQuestionsForm.style";
 const RETURN_QUESTION_FORM_PORTAL_HOST_NAME = "return-question-form-portal";
@@ -27,11 +27,8 @@ const returnQuestionItems = {
     [ReturnQuestionType.OPTION]: OptionReturnQuestionItem,
 };
 const ReturnQuestionsForm = ({ returnQuestions, checkoutItemPrice, productVariant, visible, onSubmit, onClose, }) => {
-    const titleText = useI18nMessage({ id: I18nMessages.RETURN_QUESTIONS_TITLE, prefix: RETURN_QUESTIONS_PREFIX });
-    const submitButtonText = useI18nMessage({
-        id: I18nMessages.RETURN_QUESTIONS_SUBMIT_BUTTON,
-        prefix: RETURN_QUESTIONS_PREFIX,
-    });
+    const titleText = useI18nMessage({ id: I18nMessages.RETURN_QUESTIONS_TITLE });
+    const submitButtonText = useI18nMessage({ id: I18nMessages.RETURN_QUESTIONS_SUBMIT_BUTTON });
     const { media, brand, name, size, color } = productVariant;
     const feedback = useReturnQuestionFeedback();
     const handleOnSubmit = useCallback(() => onSubmit(feedback), [feedback, onSubmit]);

package/dist/infrastructure/ui/views/summary/Summary.js

@@ -14,10 +14,13 @@ import { SafeAreaScrollView } from "../../components/templates/SafeAreaScrollVie
 import { I18nMessages } from "../../i18n/i18n";
 import { Routes } from "../../routing/routes";
 import { useBasePath } from "../../routing/useBasePath";
+import { theme } from "../../theme/theme";
+import { HEADER_HEIGHT } from "../header/Header.style";
 import { style } from "./Summary.style";
 import { CheckoutItemsTabs } from "./components/checkoutItemsTabs/CheckoutItemsTabs";
 import { FiveItemsDiscountBanner } from "./components/fiveItemsDiscountBanner/FiveItemsDiscountBanner";
 import { StickyPricing } from "./components/stickyPricing/StickyPricing";
+const { spaceXL } = theme();
 const Summary = ({ customerId }) => {
     const titleText = useI18nMessage({ id: I18nMessages.SUMMARY_TITLE });
     const descriptionText = useI18nMessage({ id: I18nMessages.SUMMARY_DESCRIPTION });
@@ -39,8 +42,8 @@ const Summary = ({ customerId }) => {
     if (!dependenciesLoaded)
         return React.createElement(Spinner, null);
     return (React.createElement(React.Fragment, null,
-        React.createElement(SafeAreaScrollView, { style: { safeAreaView: style.container } },
-            React.createElement(Body, null,
+        React.createElement(SafeAreaScrollView, { scrollerPaddingTop: HEADER_HEIGHT, style: { safeAreaView: style.container } },
+            React.createElement(Body, { style: { row: { paddingBottom: spaceXL } } },
                 fiveItemsDiscount !== 0 && React.createElement(FiveItemsDiscountBanner, { fiveItemsDiscount: fiveItemsDiscount }),
                 React.createElement(View, { style: style.content },
                     React.createElement(Text, { level: 3, style: style.title, heading: true }, titleText),

package/dist/infrastructure/ui/views/summary/components/checkoutItemsTabs/CheckoutItemsTabs.js

@@ -16,9 +16,9 @@ const CheckoutItemsTabs = ({ checkoutItemsKept, checkoutItemsReturned, onPressIt
     const returnEmptyText = useI18nMessage({ id: I18nMessages.SUMMARY_RETURN_EMPTY });
     const handleOnPressItem = useCallback((checkoutItemId) => onPressItem(checkoutItemId), [onPressItem]);
     return (React.createElement(Tabs, { style: { sliderContainer: style.sliderContainer }, tabLabels: [`${keepTabText} (${checkoutItemsKept.length})`, `${returnTabText} (${checkoutItemsReturned.length})`] },
-        React.createElement(React.Fragment, null, checkoutItemsKept.length === 0 ? (React.createElement(Text, null, keepEmptyText)) : (checkoutItemsKept.map((checkoutItem) => (React.createElement(CheckoutItem, { key: checkoutItem.id, checkoutItemPrice: checkoutItem.price, checkoutItemStatus: checkoutItem.status, testID: "keep-checkout-item", checkoutItemProductVariant: checkoutItem.status === CheckoutItemStatus.REPLACED && checkoutItem.replacedFor
+        React.createElement(React.Fragment, null, checkoutItemsKept.length === 0 ? (React.createElement(Text, { style: style.emptyText }, keepEmptyText)) : (checkoutItemsKept.map((checkoutItem) => (React.createElement(CheckoutItem, { key: checkoutItem.id, checkoutItemPrice: checkoutItem.price, checkoutItemStatus: checkoutItem.status, testID: "keep-checkout-item", checkoutItemProductVariant: checkoutItem.status === CheckoutItemStatus.REPLACED && checkoutItem.replacedFor
                 ? checkoutItem.replacedFor
                 : checkoutItem.productVariant, onPress: () => handleOnPressItem(checkoutItem.id) }))))),
-        React.createElement(React.Fragment, null, checkoutItemsReturned.length === 0 ? (React.createElement(Text, null, returnEmptyText)) : (checkoutItemsReturned.map((checkoutItem) => (React.createElement(CheckoutItem, { key: checkoutItem.id, checkoutItemPrice: checkoutItem.price, checkoutItemProductVariant: checkoutItem.productVariant, checkoutItemStatus: checkoutItem.status, style: { image: style.returnCheckoutItem }, testID: "return-checkout-item", discarded: true, onPress: () => handleOnPressItem(checkoutItem.id) })))))));
+        React.createElement(React.Fragment, null, checkoutItemsReturned.length === 0 ? (React.createElement(Text, { style: style.emptyText }, returnEmptyText)) : (checkoutItemsReturned.map((checkoutItem) => (React.createElement(CheckoutItem, { key: checkoutItem.id, checkoutItemPrice: checkoutItem.price, checkoutItemProductVariant: checkoutItem.productVariant, checkoutItemStatus: checkoutItem.status, style: { image: style.returnCheckoutItem }, testID: "return-checkout-item", discarded: true, onPress: () => handleOnPressItem(checkoutItem.id) })))))));
 };
 export { CheckoutItemsTabs };

package/dist/infrastructure/ui/views/summary/components/checkoutItemsTabs/CheckoutItemsTabs.style.d.ts

@@ -2,6 +2,9 @@ declare const style: {
     checkoutItem: {
         paddingVertical: number;
     };
+    emptyText: {
+        paddingTop: number;
+    };
     returnCheckoutItem: {
         borderColor: string;
     };

package/dist/infrastructure/ui/views/summary/components/checkoutItemsTabs/CheckoutItemsTabs.style.js

@@ -5,6 +5,9 @@ const style = StyleSheet.create({
     checkoutItem: {
         paddingVertical: spaceM,
     },
+    emptyText: {
+        paddingTop: spaceM,
+    },
     returnCheckoutItem: {
         borderColor: colorContent,
     },

package/dist/shared/notifications/infrastructure/ui/components/Notifications.js

@@ -3,11 +3,16 @@ import { View } from "react-native";
 import { Column } from "../../../../ui/components/layouts/column/Column";
 import { Row } from "../../../../ui/components/layouts/row/Row";
 import { Stack } from "../../../../ui/components/layouts/stack/Stack";
+import { useScreenSize } from "../../../../ui/hooks/useScreenSize";
 import { NotificationItem } from "./NotificationItem";
 import { style } from "./Notifications.style";
 const NOTIFICATIONS_AUTOHIDE_TIMEOUT = 10000;
-const Notifications = ({ notifications = [], onRemove, autoHideTimeout = NOTIFICATIONS_AUTOHIDE_TIMEOUT, }) => (React.createElement(View, { pointerEvents: "box-none", style: style.notifications, testID: "notifications" },
-    React.createElement(Row, { style: style.row },
-        React.createElement(Column, null,
-            React.createElement(Stack, null, notifications.map((notification) => (React.createElement(NotificationItem, { key: notification.id, autoHideTimeout: autoHideTimeout, notification: notification, style: { toast: style.toast }, testID: notification.id, onRemove: onRemove }))))))));
+const Notifications = ({ notifications = [], onRemove, autoHideTimeout = NOTIFICATIONS_AUTOHIDE_TIMEOUT, }) => {
+    const screenSize = useScreenSize();
+    const isSmallDevice = screenSize === "S";
+    return (React.createElement(View, { pointerEvents: "box-none", style: style.notifications, testID: "notifications" },
+        React.createElement(Row, { style: [style.row, isSmallDevice && style.rowSmall] },
+            React.createElement(Column, null,
+                React.createElement(Stack, null, notifications.map((notification) => (React.createElement(NotificationItem, { key: notification.id, autoHideTimeout: autoHideTimeout, notification: notification, style: { toast: style.toast }, testID: notification.id, onRemove: onRemove }))))))));
+};
 export { Notifications };

package/dist/shared/notifications/infrastructure/ui/components/Notifications.style.d.ts

@@ -1,25 +1,33 @@
-declare const style: {
-    layoutLarge: {
-        paddingLeft: number;
-        paddingRight: number;
-    };
-    layoutSmall: {
-        paddingLeft: string;
-        paddingRight: string;
-    };
+import { StyleSheet } from "react-native";
+declare const style: StyleSheet.NamedStyles<any> | StyleSheet.NamedStyles<{
     notifications: {
+        top: number;
+        width: string;
+        zIndex: number;
         left: number;
-        position: "absolute";
+    } | {
         top: number;
         width: string;
         zIndex: number;
+        position: "sticky";
+        left: number;
+    } | {
+        top: number;
+        width: string;
+        zIndex: number;
+        position: "absolute";
+        left: number;
     };
     row: {
         flex: number;
         justifyContent: "center";
     };
+    rowSmall: {
+        paddingLeft: number;
+        paddingRight: number;
+    };
     toast: {
         marginTop: number;
     };
-};
+}>;
 export { style };

package/dist/shared/notifications/infrastructure/ui/components/Notifications.style.js

@@ -1,18 +1,16 @@
-import { StyleSheet } from "react-native";
+import { Platform, StyleSheet } from "react-native";
 import { theme } from "../../../../../infrastructure/ui/theme/theme";
 const { spaceM } = theme();
 const style = StyleSheet.create({
-    layoutLarge: {
-        paddingLeft: 0,
-        paddingRight: 0,
-    },
-    layoutSmall: {
-        paddingLeft: "$spaceM",
-        paddingRight: "$spaceM",
-    },
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     notifications: {
         left: 0,
-        position: "absolute",
+        ...Platform.select({
+            web: { position: "sticky" },
+            ios: { position: "absolute" },
+            android: { position: "absolute" },
+        }),
         top: 0,
         width: "100%",
         zIndex: 20,
@@ -21,6 +19,10 @@ const style = StyleSheet.create({
         flex: 1,
         justifyContent: "center",
     },
+    rowSmall: {
+        paddingLeft: spaceM,
+        paddingRight: spaceM,
+    },
     toast: {
         marginTop: spaceM,
     },

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

@@ -10,17 +10,19 @@ import { ButtonIcon } from "../../molecules/buttonIcon/ButtonIcon";
 import { Row } from "../row/Row";
 import { Sticky } from "../sticky/Sticky";
 import { style } from "./Modal.style";
-const { spaceXXL } = theme();
+const { spaceXL, spaceXXL } = theme();
 const TRANSITION_MODAL_SCALE = 0.9;
 const DEFAULT_SAFEAREA_INSET_TOP = spaceXXL;
+const MODAL_DESKTOP_VERTICAL_PADDING = spaceXXL;
 const Modal = ({ children, visible, header, footer, portalHostName, onClose, showCloseButton = false, size = { M: "2/3", L: "1/3" }, style: customStyle, scroll = false, }) => {
     const { height: screenHeight } = Dimensions.get(Platform.OS === "web" ? "window" : "screen");
     const { top: safeAreaInsetTop, bottom: safeAreaInsetBottom } = useSafeAreaInsets();
-    // On Android safeAreaInsetTop won't return the actual value.
-    const screenSizeWithoutInsets = screenHeight - (Platform.OS === "android" ? DEFAULT_SAFEAREA_INSET_TOP : safeAreaInsetTop);
     const screenSize = useScreenSize();
     const isSmallDevice = screenSize === "S";
     const columnSizeForScreenSize = size[screenSize];
+    // On Android safeAreaInsetTop won't return the actual value.
+    const screenSizeWithoutInsets = screenHeight - (Platform.OS === "android" ? DEFAULT_SAFEAREA_INSET_TOP : safeAreaInsetTop);
+    const modalMaxHeight = screenSizeWithoutInsets - (!isSmallDevice ? MODAL_DESKTOP_VERTICAL_PADDING : 0);
     const handleHardwareBackPress = useCallback(() => {
         if (!visible) {
             return;
@@ -65,7 +67,7 @@ const Modal = ({ children, visible, header, footer, portalHostName, onClose, sho
                         {
                             opacity: modalOpacity,
                             transform: [{ translateY: modalTranslateY }, { scale: modalScale }],
-                            maxHeight: screenSizeWithoutInsets,
+                            maxHeight: modalMaxHeight,
                         },
                         customStyle?.modal,
                     ], onLayout: handleOnModalLayout },
@@ -73,7 +75,9 @@ const Modal = ({ children, visible, header, footer, portalHostName, onClose, sho
                         React.createElement(View, null, header),
                         showCloseButton && (React.createElement(ButtonIcon, { name: "close", style: { button: customStyle?.closeButton }, onPress: onClose })))),
                     React.createElement(ModalContentView, null,
-                        React.createElement(View, { style: { paddingBottom: safeAreaInsetBottom + footerHeight } }, children)),
+                        React.createElement(View, { style: {
+                                paddingBottom: safeAreaInsetBottom + (Platform.OS === "web" ? spaceXL : footerHeight),
+                            } }, children)),
                     footer && (React.createElement(Sticky, { style: style.stickyFooter, onLayout: handleOnFooterLayout }, footer))))))))));
 };
 export { Modal };

package/dist/shared/ui/components/layouts/modal/Modal.style.d.ts

@@ -29,15 +29,18 @@ declare const style: StyleSheet.NamedStyles<any> | StyleSheet.NamedStyles<{
     "2/3": ViewStyle;
     container: {
         width: string;
+        zIndex: number;
         height: string;
         overflow: "hidden";
     } | {
         width: string;
+        zIndex: number;
         position: "fixed";
         height: string;
         overflow: "hidden";
     } | {
         width: string;
+        zIndex: number;
         position: "absolute";
         height: string;
         overflow: "hidden";

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

@@ -27,6 +27,7 @@ const style = StyleSheet.create({
             ios: { position: "absolute" },
         }),
         width: "100%",
+        zIndex: 100,
     },
     header: {
         alignItems: "center",

package/dist/shared/ui/components/layouts/sticky/Sticky.style.js

@@ -11,7 +11,7 @@ const style = StyleSheet.create({
         paddingTop: spaceXL,
         shadowColor: colorBase,
         shadowOffset: {
-            height: -40,
+            height: -spaceXL,
             width: 0,
         },
         shadowOpacity: 1,

package/dist/shared/ui/components/molecules/buttonIcon/ButtonIcon.style.d.ts

@@ -1,6 +1,7 @@
 declare const buttonIconUnderlayColor: string;
 declare const style: {
     buttonIcon: {
+        flexGrow: number;
         padding: number;
     };
 };

package/dist/shared/ui/components/molecules/buttonIcon/ButtonIcon.style.js

@@ -4,6 +4,7 @@ const { spaceS, colorGrayscaleS } = theme();
 const buttonIconUnderlayColor = colorGrayscaleS;
 const style = StyleSheet.create({
     buttonIcon: {
+        flexGrow: 0,
         padding: spaceS,
     },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
@@ -35,7 +35,7 @@
     "@react-spring/native": "^9.5.5",
     "inline-style-prefixer": "6.0.1",
     "react-native-safe-area-context": "^4.4.1",
-    "react-native-svg": "12.3.0",
+    "react-native-svg": "^12.1.1",
     "tiny-invariant": "^1.3.1",
     "uuid": "^9.0.0"
   },