@lookiero/checkout 0.2.21 → 0.2.23

package/dist/infrastructure/ui/{components → shared/components}/atoms/input/Input.d.ts

@@ -6,5 +6,5 @@ interface InputProps extends TextInputProps {
     readonly style?: InputStyle;
 }
 declare const Input: FC<InputProps>;
-export type { InputStyle };
+export type { InputProps, InputStyle };
 export { Input };

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

@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from "react";
 import { Platform, TextInput, } from "react-native";
-import { theme } from "../../../theme/theme";
+import { theme } from "../../../../theme/theme";
 import { style } from "./Input.style";
 const DEFAULT_HEIGHT = 56;
 const { colorGrayscaleL } = theme();

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

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

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

@@ -1,5 +1,5 @@
-import { StyleSheet } from "react-native";
-import { theme } from "../../../theme/theme";
+import { Platform, StyleSheet } from "react-native";
+import { theme } from "../../../../theme/theme";
 const { borderSize, colorContent, fontBodySize3, fontBodyHeight3, fontBodyLetterSpacing3, fontMap, spaceM } = theme();
 const style = StyleSheet.create({
     input: {
@@ -11,9 +11,16 @@ const style = StyleSheet.create({
         color: colorContent,
         fontFamily: fontMap.Body,
         fontSize: fontBodySize3,
-        lineHeight: fontBodyHeight3,
         letterSpacing: fontBodyLetterSpacing3,
         outlineStyle: "none",
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        ...Platform.select({
+            web: {
+                lineHeight: fontBodyHeight3,
+            },
+        }),
     },
 });
 export { style };

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { ActivityIndicator, View } from "react-native";
-import { theme } from "../../../theme/theme";
+import { theme } from "../../../../theme/theme";
 import { style } from "./Spinner.style";
 const { colorPrimary } = theme();
 const Spinner = () => (React.createElement(View, { style: style.container },

package/dist/infrastructure/ui/shared/components/layouts/column/Column.d.ts

@@ -0,0 +1,10 @@
+import { FC } from "react";
+import { ViewProps } from "react-native";
+import { ScreenSize } from "../../../hooks/useScreenSize";
+declare type ColumnSize = "1/4" | "1/3" | "1/2" | "2/3";
+interface ColumnProps extends ViewProps {
+    readonly size?: Partial<Record<ScreenSize, ColumnSize>>;
+}
+declare const Column: FC<ColumnProps>;
+export type { ColumnSize };
+export { Column };

package/dist/infrastructure/ui/shared/components/layouts/column/Column.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { View } from "react-native";
+import { useScreenSize } from "../../../hooks/useScreenSize";
+import { style } from "./Column.style";
+const Column = ({ children, style: customStyle, size = { M: "2/3", L: "1/3" } }) => {
+    const screenSize = useScreenSize();
+    const columnSizeForScreenSize = size[screenSize];
+    return (React.createElement(View, { style: [style.column, columnSizeForScreenSize && style.column[columnSizeForScreenSize], customStyle] }, children));
+};
+export { Column };

package/dist/infrastructure/ui/shared/components/layouts/column/Column.style.d.ts

@@ -0,0 +1,12 @@
+import { ViewStyle } from "react-native";
+declare const style: {
+    column: {
+        "1/4": ViewStyle;
+        "1/3": ViewStyle;
+        "1/2": ViewStyle;
+        "2/3": ViewStyle;
+        flex: number;
+        width: string;
+    };
+};
+export { style };

package/dist/infrastructure/ui/shared/components/layouts/column/Column.style.js

@@ -0,0 +1,23 @@
+import { StyleSheet } from "react-native";
+const stylesForColumSize = {
+    ["1/4"]: {
+        maxWidth: `${100 * (1 / 4)}%`,
+    },
+    ["1/3"]: {
+        maxWidth: `${100 * (1 / 3)}%`,
+    },
+    ["1/2"]: {
+        maxWidth: `${100 * (1 / 2)}%`,
+    },
+    ["2/3"]: {
+        maxWidth: `${100 * (2 / 3)}%`,
+    },
+};
+const style = StyleSheet.create({
+    column: {
+        flex: 1,
+        width: "100%",
+        ...stylesForColumSize,
+    },
+});
+export { style };

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

@@ -0,0 +1,17 @@
+import { FC, ReactNode } from "react";
+import { ViewProps } from "react-native";
+import { ScreenSize } from "../../../hooks/useScreenSize";
+declare type ColumnSize = "1/4" | "1/3" | "1/2" | "2/3";
+declare type ModalStyle = "overlay" | "row" | "modal" | "header" | "closeButton";
+interface ModalProps {
+    readonly children: ReactNode;
+    readonly visible: boolean;
+    readonly onClose?: () => void;
+    readonly header?: ReactNode;
+    readonly portalHostName?: string;
+    readonly size?: Partial<Record<ScreenSize, ColumnSize>>;
+    readonly style?: Partial<Record<ModalStyle, ViewProps>>;
+}
+declare const Modal: FC<ModalProps>;
+export type { ColumnSize };
+export { Modal };

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

@@ -0,0 +1,60 @@
+import { Portal } from "@gorhom/portal";
+import { animated, useTransition } from "@react-spring/native";
+import React, { useCallback, useState } from "react";
+import { Dimensions, Platform, TouchableWithoutFeedback, View } from "react-native";
+import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
+import { useScreenSize } from "../../../hooks/useScreenSize";
+import { ButtonIcon } from "../../molecules/buttonIcon/ButtonIcon";
+import { Row } from "../row/Row";
+import { style } from "./Modal.style";
+const TRANSITION_MODAL_SCALE = 0.9;
+const Modal = ({ children, visible, header, portalHostName, onClose, size = { M: "2/3", L: "1/3" }, style: customStyle, }) => {
+    const { height: screenHeight } = Dimensions.get("screen");
+    const { top: safeAreaInsetTop, bottom: safeAreaInsetBottom } = useSafeAreaInsets();
+    const screenSizeWithoutInsets = screenHeight - safeAreaInsetTop;
+    const screenSize = useScreenSize();
+    const isSmallDevice = screenSize === "S" || Platform.OS !== "web";
+    const columnSizeForScreenSize = size[screenSize];
+    const [modalHeight, setModalHeight] = useState();
+    const handleOnModalLayout = useCallback(({ nativeEvent: { layout: { height }, }, }) => setModalHeight(height), []);
+    const transitions = useTransition(visible, {
+        from: isSmallDevice
+            ? {
+                modalOpacity: 1,
+                overlayOpacity: 0,
+                modalTranslateY: (modalHeight || screenHeight) + safeAreaInsetBottom,
+                modalScale: 1,
+            }
+            : { modalOpacity: 0, overlayOpacity: 0, modalTranslateY: 0, modalScale: TRANSITION_MODAL_SCALE },
+        enter: { modalOpacity: 1, overlayOpacity: 1, modalTranslateY: 0, modalScale: 1 },
+        leave: isSmallDevice
+            ? {
+                modalOpacity: 1,
+                overlayOpacity: 0,
+                modalTranslateY: (modalHeight || screenHeight) + safeAreaInsetBottom,
+                modalScale: 1,
+            }
+            : { modalOpacity: 0, overlayOpacity: 0, modalTranslateY: 0, modalScale: TRANSITION_MODAL_SCALE },
+        unique: true,
+    });
+    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" },
+        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: [
+                        style.modal,
+                        columnSizeForScreenSize && style.modal[columnSizeForScreenSize],
+                        {
+                            opacity: modalOpacity,
+                            transform: [{ translateY: modalTranslateY }, { scale: modalScale }],
+                            maxHeight: screenSizeWithoutInsets,
+                        },
+                        customStyle?.modal,
+                    ], onLayout: handleOnModalLayout, pointerEvents: visible ? "auto" : "none" },
+                    (header || onClose) && (React.createElement(View, { style: [style.header, customStyle?.header] },
+                        React.createElement(View, null, header),
+                        onClose && (React.createElement(ButtonIcon, { style: { button: [style.closeButton, customStyle?.closeButton] }, name: "close", onPress: onClose })))),
+                    children))))))));
+};
+export { Modal };

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

@@ -0,0 +1,49 @@
+import { ViewStyle } from "react-native";
+declare const style: {
+    container: {
+        position: "absolute";
+        width: string;
+        height: string;
+        overflow: "hidden";
+    };
+    overlay: {
+        zIndex: number;
+        backgroundColor: string;
+        position: "absolute";
+        width: string;
+        height: string;
+        cursor: string;
+    };
+    safeArea: {
+        flex: number;
+        zIndex: number;
+    };
+    row: {
+        flex: number;
+        alignContent: "center";
+        justifyContent: "center";
+    };
+    rowSmall: {
+        justifyContent: "flex-end";
+    };
+    modal: {
+        "1/4": ViewStyle;
+        "1/3": ViewStyle;
+        "1/2": ViewStyle;
+        "2/3": ViewStyle;
+        backgroundColor: string;
+        position: "absolute";
+        width: string;
+        zIndex: number;
+    };
+    header: {
+        alignItems: "center";
+        justifyContent: "space-between";
+        padding: number;
+        flexDirection: "row";
+    };
+    closeButton: {
+        alignSelf: "flex-end";
+    };
+};
+export { style };

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

@@ -0,0 +1,62 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../../theme/theme";
+const { spaceM, colorBase, colorOverlay } = theme();
+const modalStylesForColumSize = {
+    ["1/4"]: {
+        maxWidth: `${100 * (1 / 4)}%`,
+    },
+    ["1/3"]: {
+        maxWidth: `${100 * (1 / 3)}%`,
+    },
+    ["1/2"]: {
+        maxWidth: `${100 * (1 / 2)}%`,
+    },
+    ["2/3"]: {
+        maxWidth: `${100 * (2 / 3)}%`,
+    },
+};
+const style = StyleSheet.create({
+    container: {
+        position: "absolute",
+        width: "100%",
+        height: "100%",
+        overflow: "hidden",
+    },
+    overlay: {
+        zIndex: 1,
+        backgroundColor: colorOverlay,
+        position: "absolute",
+        width: "100%",
+        height: "100%",
+        cursor: "pointer",
+    },
+    safeArea: {
+        flex: 1,
+        zIndex: 2,
+    },
+    row: {
+        flex: 1,
+        alignContent: "center",
+        justifyContent: "center",
+    },
+    rowSmall: {
+        justifyContent: "flex-end",
+    },
+    modal: {
+        backgroundColor: colorBase,
+        position: "absolute",
+        width: "100%",
+        zIndex: 3,
+        ...modalStylesForColumSize,
+    },
+    header: {
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: spaceM,
+        flexDirection: "row",
+    },
+    closeButton: {
+        alignSelf: "flex-end",
+    },
+});
+export { style };

package/dist/infrastructure/ui/shared/components/layouts/row/Row.d.ts

@@ -0,0 +1,6 @@
+import { FC } from "react";
+import { ViewProps } from "react-native";
+interface RowProps extends ViewProps {
+}
+declare const Row: FC<RowProps>;
+export { Row };

package/dist/infrastructure/ui/shared/components/layouts/row/Row.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { View } from "react-native";
+import { useScreenSize } from "../../../hooks/useScreenSize";
+import { style } from "./Row.style";
+const Row = ({ children, style: customStyle, ...restProps }) => {
+    const screenSize = useScreenSize();
+    const largeStyle = screenSize !== "S" && style.rowLarge;
+    return (React.createElement(View, { style: [style.row, largeStyle, customStyle], ...restProps }, children));
+};
+export { Row };

package/dist/infrastructure/ui/shared/components/layouts/row/Row.style.d.ts

@@ -0,0 +1,13 @@
+declare const style: {
+    row: {
+        flexWrap: "wrap";
+        maxWidth: number;
+        width: string;
+        alignItems: "center";
+        marginHorizontal: string;
+    };
+    rowLarge: {
+        maxWidth: number;
+    };
+};
+export { style };

package/dist/infrastructure/ui/shared/components/layouts/row/Row.style.js

@@ -0,0 +1,17 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../../theme/theme";
+const { spaceXXL, layoutMaxWidth } = theme();
+const rowLargeMaxWidth = layoutMaxWidth - 2 * spaceXXL;
+const style = StyleSheet.create({
+    row: {
+        flexWrap: "wrap",
+        maxWidth: layoutMaxWidth,
+        width: "100%",
+        alignItems: "center",
+        marginHorizontal: "auto",
+    },
+    rowLarge: {
+        maxWidth: rowLargeMaxWidth,
+    },
+});
+export { style };

package/dist/infrastructure/ui/{components → shared/components}/layouts/slider/Pagination.d.ts

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import { FC, ReactNode } from "react";
 import { StyleProp, ViewStyle } from "react-native";
 interface PaginationProps {
     readonly touchable?: boolean;
@@ -8,7 +8,7 @@ interface PaginationProps {
     readonly count?: number;
     readonly activeIndex?: number;
     readonly onChange: (index: number) => void;
-    readonly renderItem?: (index: number) => JSX.Element;
+    readonly renderItem?: (index: number) => ReactNode;
 }
 declare const Pagination: FC<PaginationProps>;
 export { Pagination };

package/dist/infrastructure/ui/{components → shared/components}/layouts/slider/Pagination.style.js

@@ -1,5 +1,5 @@
 import { StyleSheet } from "react-native";
-import { theme } from "../../../theme/theme";
+import { theme } from "../../../../theme/theme";
 const { colorGrayscaleS, colorGrayscaleXL } = theme();
 const DOT_SIZE = 8;
 const style = StyleSheet.create({

package/dist/infrastructure/ui/{components → shared/components}/layouts/slider/Slider.d.ts

@@ -14,7 +14,7 @@ interface SliderProps {
     readonly onSliderStart?: () => void;
     readonly onSliderEnd?: () => void;
     readonly onChanged?: (index: number) => void;
-    readonly paginationRenderItem?: (index: number) => JSX.Element;
+    readonly paginationRenderItem?: (index: number) => ReactNode;
 }
 declare const Slider: FC<SliderProps>;
 export { Slider };

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

@@ -0,0 +1,14 @@
+import { FC } from "react";
+import { StyleProp, ViewStyle } from "react-native";
+import { IconName, IconStyle } from "../../atoms/icon/Icon";
+interface ButtonIconStyle {
+    readonly button: StyleProp<ViewStyle>;
+    readonly icon: IconStyle;
+}
+interface ButtonIconProps {
+    readonly name: IconName;
+    readonly style?: Partial<ButtonIconStyle>;
+    readonly onPress: () => void;
+}
+declare const ButtonIcon: FC<ButtonIconProps>;
+export { ButtonIcon };

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

@@ -0,0 +1,7 @@
+import React from "react";
+import { TouchableHighlight } from "react-native";
+import { Icon } from "../../atoms/icon/Icon";
+import { buttonIconUnderlayColor, style } from "./ButtonIcon.style";
+const ButtonIcon = ({ name, style: customStyle, onPress }) => (React.createElement(TouchableHighlight, { style: [style.buttonIcon, customStyle?.button], onPress: onPress, underlayColor: buttonIconUnderlayColor, testID: "button-icon" },
+    React.createElement(Icon, { name: name, style: customStyle?.icon })));
+export { ButtonIcon };

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

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

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

@@ -0,0 +1,10 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../../theme/theme";
+const { spaceS, colorGrayscaleS } = theme();
+const buttonIconUnderlayColor = colorGrayscaleS;
+const style = StyleSheet.create({
+    buttonIcon: {
+        padding: spaceS,
+    },
+});
+export { style, buttonIconUnderlayColor };

package/dist/infrastructure/ui/{components → shared/components}/molecules/inputField/InputField.d.ts

@@ -2,21 +2,23 @@ import { FC } from "react";
 import { StyleProp, ViewStyle } from "react-native";
 import { ErrorStyle } from "../../atoms/error/Error";
 import { FieldStyle } from "../../atoms/field/Field";
-import { InputStyle } from "../../atoms/input/Input";
+import { IconName, IconStyle } from "../../atoms/icon/Icon";
+import { InputProps, InputStyle } from "../../atoms/input/Input";
 declare type InputFieldStyle = FieldStyle & {
     readonly inputField: StyleProp<ViewStyle>;
     readonly input: InputStyle;
     readonly error: ErrorStyle;
+    readonly icon: IconStyle;
 };
-interface InputFieldProps {
+interface InputFieldBaseProps {
     readonly label: string;
-    readonly placeholder?: string;
-    readonly value: string | undefined;
     readonly multiline?: boolean;
-    readonly minHeight?: number;
     readonly error?: string | null;
     readonly style?: Partial<InputFieldStyle>;
-    readonly onChange: (value: string) => void;
+    readonly onChange?: (value: string) => void;
+    readonly icon?: IconName;
+}
+interface InputFieldProps extends Omit<InputProps, keyof InputFieldBaseProps>, InputFieldBaseProps {
 }
 declare const InputField: FC<InputFieldProps>;
 export { InputField };

package/dist/infrastructure/ui/{components → shared/components}/molecules/inputField/InputField.js

@@ -1,18 +1,20 @@
 import React, { useCallback, useState } from "react";
 import { View } from "react-native";
-import { theme } from "../../../theme/theme";
+import { theme } from "../../../../theme/theme";
 import { Error } from "../../atoms/error/Error";
 import { Field } from "../../atoms/field/Field";
+import { Icon } from "../../atoms/icon/Icon";
 import { Input } from "../../atoms/input/Input";
 import { style } from "./InputField.style";
-const { colorContent, colorGrayscaleL, colorPrimary } = theme();
-const InputField = ({ label, placeholder, value, multiline = false, minHeight, error, style: customStyle, onChange, }) => {
+const { colorContent, colorGrayscaleL, colorPrimary, spaceM, iconSize } = theme();
+const inputPaddingRightWithIcon = iconSize + spaceM * 2;
+const InputField = ({ label, placeholder, value, multiline = false, minHeight, error, style: customStyle, onChange = () => void 0, icon, ...inputRestProps }) => {
     const [isFocused, setIsFocused] = useState(false);
     const handleOnChange = useCallback((text) => onChange(text), [onChange]);
     const handleOnBlur = useCallback(() => setIsFocused(false), []);
     const handleOnFocus = useCallback(() => setIsFocused(true), []);
     const color = error ? colorPrimary : isFocused ? colorContent : colorGrayscaleL;
-    return (React.createElement(View, { style: customStyle?.inputField },
+    return (React.createElement(View, { style: customStyle?.inputField, testID: "input-field" },
         React.createElement(Field, { label: label, isFocused: isFocused || !!value, style: {
                 field: { ...style.field, ...customStyle?.field },
                 fieldText: {
@@ -20,7 +22,8 @@ const InputField = ({ label, placeholder, value, multiline = false, minHeight, e
                     ...customStyle?.fieldText,
                 },
             } }),
-        React.createElement(Input, { value: value, placeholder: placeholder, multiline: multiline, minHeight: minHeight, onChangeText: handleOnChange, onBlur: handleOnBlur, onFocus: handleOnFocus, style: [{ borderColor: color }, customStyle?.input] }),
+        React.createElement(Input, { value: value, placeholder: placeholder, multiline: multiline, minHeight: minHeight, onChangeText: handleOnChange, onBlur: handleOnBlur, onFocus: handleOnFocus, style: [!!icon ? { paddingRight: inputPaddingRightWithIcon } : {}, { borderColor: color }, customStyle?.input], ...inputRestProps }),
+        !!icon && React.createElement(Icon, { name: icon, style: [style.icon, { color }, customStyle?.icon] }),
         !!error && React.createElement(Error, { error: error, style: [style.error, customStyle?.error] })));
 };
 export { InputField };

package/dist/infrastructure/ui/{components → shared/components}/molecules/inputField/InputField.style.d.ts

@@ -7,5 +7,11 @@ declare const style: {
         marginTop: number;
         marginLeft: number;
     };
+    icon: {
+        position: "absolute";
+        right: number;
+        top: number;
+        zIndex: number;
+    };
 };
 export { style };

package/dist/infrastructure/ui/{components → shared/components}/molecules/inputField/InputField.style.js

@@ -1,6 +1,6 @@
 import { StyleSheet } from "react-native";
-import { theme } from "../../../theme/theme";
-const { spaceXS, spaceL } = theme();
+import { theme } from "../../../../theme/theme";
+const { spaceXS, spaceM, spaceL } = theme();
 const style = StyleSheet.create({
     field: {
         position: "absolute",
@@ -10,5 +10,11 @@ const style = StyleSheet.create({
         marginTop: spaceXS,
         marginLeft: spaceL,
     },
+    icon: {
+        position: "absolute",
+        right: spaceM,
+        top: spaceM,
+        zIndex: 4,
+    },
 });
 export { style };

package/dist/infrastructure/ui/shared/hooks/useScreenSize.d.ts

@@ -0,0 +1,4 @@
+declare type ScreenSize = "S" | "M" | "L";
+declare const useScreenSize: () => ScreenSize;
+export type { ScreenSize };
+export { useScreenSize };

package/dist/infrastructure/ui/shared/hooks/useScreenSize.js

@@ -0,0 +1,9 @@
+import { useDevice } from "@lookiero/aurora-next/build/contexts/Device/Device";
+const useScreenSize = () => {
+    const { screen } = useDevice();
+    const screenSize = Object.entries(screen)
+        .filter(([key]) => ["S", "M", "L"].includes(key))
+        .find(([, value]) => value);
+    return screenSize?.[0];
+};
+export { useScreenSize };

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

@@ -0,0 +1,3 @@
+import { FC } from "react";
+declare const App: FC;
+export { App };

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

@@ -0,0 +1,8 @@
+import { PortalProvider } from "@gorhom/portal";
+import React from "react";
+import { SafeAreaProvider } from "react-native-safe-area-context";
+import { Outlet } from "react-router-native";
+const App = () => (React.createElement(SafeAreaProvider, null,
+    React.createElement(PortalProvider, null,
+        React.createElement(Outlet, null))));
+export { App };

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

@@ -7,10 +7,10 @@ import React, { useCallback } from "react";
 import { View } from "react-native";
 import { useSetCheckoutIntroShown } from "../../../domain/uiSetting/react/useSetCheckoutIntroShown";
 import { useViewFiveItemsDiscountByCustomerId } from "../../../projection/checkout/react/useViewFiveItemsDiscountByCustomerId";
-import { Spinner } from "../../components/atoms/spinner/Spinner";
 import { Body } from "../../components/layouts/body/Body";
 import { SafeAreaScrollView } from "../../components/templates/SafeAreaScrollView";
 import { I18nMessages } from "../../i18n/i18n";
+import { Spinner } from "../../shared/components/atoms/spinner/Spinner";
 import { style } from "./Intro.style";
 const Bullet = ({ text }) => (React.createElement(View, { style: style.bullet },
     React.createElement(Icon, { name: "rounded-tick", style: style.tickIcon }),