@lookiero/checkout 5.3.0-beta.2 → 6.0.0-beta.0

package/dist/shared/tracking/tracking.d.ts

@@ -1,112 +0,0 @@
-import { CheckoutItemStatus } from "../../domain/checkoutItem/model/checkoutItem";
-import { Currency } from "../../domain/checkoutItem/model/currency";
-import { MediaPerspective } from "../../projection/checkoutItem/checkoutItem";
-import { Country } from "../../projection/shared/country";
-import { Subscription } from "../../projection/shared/subscription";
-declare enum TrackingEvent {
-    PAGEVIEW = "pageview",
-    KEEP_ITEM = "keep_item",
-    RETURN_ITEM = "return_item",
-    REPLACE_ITEM = "replace_item",
-    RESET_ITEM = "reset_item",
-    IMAGE_VIEW = "image_view",
-    PRESS_PRICING = "press_pricing",
-    PRESS_ITEM = "press_item",
-    PRESS_CONTINUE = "press_continue",
-    TAB_VIEW = "tab_view",
-    CHANGE_FEEDBACK = "change_feedback",
-    PRESS_MENU = "press_menu",
-    PRESS_BACK = "press_back",
-    PRESS_NEXT = "press_next",
-    PRESS_PREVIOUS = "press_previous",
-    CHECKOUT = "checkout",
-    AB_TEST = "abtest"
-}
-declare enum TrackingEventCategory {
-    NAVIGATION = "navigation",
-    ECOMMERCE = "ecommerce"
-}
-interface BaseTrackingEvent {
-    readonly event: TrackingEvent;
-    readonly eventCategory: TrackingEventCategory;
-    readonly section: string;
-    readonly store: Country;
-    readonly checkoutId: string;
-}
-type PageViewTrackingEvent = BaseTrackingEvent;
-interface ItemPageViewTrackingEvent extends BaseTrackingEvent {
-    readonly checkoutItemId: string;
-    readonly status: CheckoutItemStatus;
-    readonly productVariantId: string;
-    readonly replaceableFor: string;
-    readonly unique: boolean;
-}
-interface KeepItemTrackingEvent extends BaseTrackingEvent {
-    readonly checkoutItemId: string;
-}
-interface ReturnItemTrackingEvent extends BaseTrackingEvent {
-    readonly checkoutItemId: string;
-}
-interface ReplaceItemTrackingEvent extends BaseTrackingEvent {
-    readonly checkoutItemId: string;
-    readonly productVariantId: string;
-    readonly replaceFor: string;
-}
-interface ResetItemTrackingEvent extends BaseTrackingEvent {
-    readonly checkoutItemId: string;
-}
-interface ImageViewTrackingEvent extends BaseTrackingEvent {
-    readonly checkoutItemId: string;
-    readonly productVariantId: string;
-    readonly perspective: MediaPerspective;
-}
-interface PressPricingTrackingEvent extends BaseTrackingEvent {
-    readonly collapse: boolean;
-}
-interface PressItemTrackingEvent extends BaseTrackingEvent {
-    readonly checkoutItemId: string;
-}
-type PressContinueTrackingEvent = BaseTrackingEvent;
-interface TabViewTrackingEvent<T> extends BaseTrackingEvent {
-    readonly tab: T;
-}
-interface ChangeFeedbackTrackingEvent extends BaseTrackingEvent {
-    readonly questionId: string;
-    readonly questionName: string;
-    readonly feedback: string | undefined;
-}
-interface PressMenuTrackingEvent extends BaseTrackingEvent {
-    readonly collapse: boolean;
-}
-type PressBackTrackingEvent = BaseTrackingEvent;
-interface PressNextTrackingEvent extends BaseTrackingEvent {
-    readonly from: string;
-    readonly to: string;
-}
-interface PressPreviousTrackingEvent extends BaseTrackingEvent {
-    readonly from: string;
-    readonly to: string;
-}
-interface CheckoutTrackingEvent extends BaseTrackingEvent {
-    readonly userId: string;
-    readonly sizeChanges: number;
-    readonly isFirstOrder: boolean;
-    readonly ecommerce: {
-        readonly checkout: {
-            readonly actionField: {
-                readonly items: number;
-                readonly currencyCode: Currency;
-                readonly subscription: Subscription;
-                readonly coupon: string | null;
-                readonly orderId: number;
-                readonly value: number;
-            };
-        };
-    };
-}
-interface ABTestTrackingEvent extends BaseTrackingEvent {
-    readonly experiment: string;
-    readonly variation: string;
-}
-export type { BaseTrackingEvent, ChangeFeedbackTrackingEvent, CheckoutTrackingEvent, ImageViewTrackingEvent, ItemPageViewTrackingEvent, KeepItemTrackingEvent, PageViewTrackingEvent, PressContinueTrackingEvent, PressItemTrackingEvent, PressPricingTrackingEvent, ReplaceItemTrackingEvent, ResetItemTrackingEvent, ReturnItemTrackingEvent, TabViewTrackingEvent, PressMenuTrackingEvent, PressBackTrackingEvent, PressNextTrackingEvent, PressPreviousTrackingEvent, ABTestTrackingEvent, };
-export { TrackingEvent, TrackingEventCategory };

package/dist/shared/tracking/tracking.js

@@ -1,26 +0,0 @@
-var TrackingEvent;
-(function (TrackingEvent) {
-    TrackingEvent["PAGEVIEW"] = "pageview";
-    TrackingEvent["KEEP_ITEM"] = "keep_item";
-    TrackingEvent["RETURN_ITEM"] = "return_item";
-    TrackingEvent["REPLACE_ITEM"] = "replace_item";
-    TrackingEvent["RESET_ITEM"] = "reset_item";
-    TrackingEvent["IMAGE_VIEW"] = "image_view";
-    TrackingEvent["PRESS_PRICING"] = "press_pricing";
-    TrackingEvent["PRESS_ITEM"] = "press_item";
-    TrackingEvent["PRESS_CONTINUE"] = "press_continue";
-    TrackingEvent["TAB_VIEW"] = "tab_view";
-    TrackingEvent["CHANGE_FEEDBACK"] = "change_feedback";
-    TrackingEvent["PRESS_MENU"] = "press_menu";
-    TrackingEvent["PRESS_BACK"] = "press_back";
-    TrackingEvent["PRESS_NEXT"] = "press_next";
-    TrackingEvent["PRESS_PREVIOUS"] = "press_previous";
-    TrackingEvent["CHECKOUT"] = "checkout";
-    TrackingEvent["AB_TEST"] = "abtest";
-})(TrackingEvent || (TrackingEvent = {}));
-var TrackingEventCategory;
-(function (TrackingEventCategory) {
-    TrackingEventCategory["NAVIGATION"] = "navigation";
-    TrackingEventCategory["ECOMMERCE"] = "ecommerce";
-})(TrackingEventCategory || (TrackingEventCategory = {}));
-export { TrackingEvent, TrackingEventCategory };

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

@@ -1,4 +0,0 @@
-import { COLOR, Text } from "@lookiero/aurora";
-import React from "react";
-const Error = ({ error, style: customStyle }) => (React.createElement(Text, { color: COLOR.TEXT_ERROR, level: 2, style: customStyle, detail: true }, error));
-export { Error };

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

@@ -1,25 +0,0 @@
-import { Text, Theme } from "@lookiero/aurora";
-import { animated, useSpring } from "@react-spring/native";
-import React, { useCallback, useState } from "react";
-import { View } from "react-native";
-import { style } from "./Field.style";
-const SCALE = 0.75;
-const { space1, space4 } = Theme.get();
-const Field = ({ label, isFocused = false, style: customStyle }) => {
-    const [width, setWidth] = useState(0);
-    const handleOnLayout = useCallback(({ nativeEvent: { layout } }) => setWidth(layout.width), []);
-    const springs = useSpring(isFocused
-        ? { scale: SCALE, translateY: -14, translateX: -(((1 - SCALE) * width) / 2 + space1) }
-        : { scale: 1, translateY: space4, translateX: 0 });
-    return (React.createElement(animated.View, { pointerEvents: "none", style: [
-            {
-                transform: [{ scale: springs.scale }, { translateY: springs.translateY }, { translateX: springs.translateX }],
-            },
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            customStyle?.field,
-        ], onLayout: handleOnLayout },
-        React.createElement(Text, { level: 1, numberOfLines: 1, style: [style.fieldText, customStyle?.fieldText], detail: true }, label),
-        React.createElement(View, { style: [style.fieldBackground, { opacity: isFocused ? 1 : 0 }] })));
-};
-export { Field };

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

@@ -1,19 +0,0 @@
-import { Theme } from "@lookiero/aurora";
-import { StyleSheet } from "react-native";
-const { colorBgBase, space1 } = Theme.get();
-const style = StyleSheet.create({
-    fieldBackground: {
-        backgroundColor: colorBgBase,
-        height: "100%",
-        position: "absolute",
-        width: "100%",
-        zIndex: 0,
-    },
-    fieldText: {
-        flexWrap: "nowrap",
-        overflow: "hidden",
-        paddingHorizontal: space1,
-        zIndex: 1,
-    },
-});
-export { style };

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

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

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

@@ -1,7 +0,0 @@
-import { Spinner as AuroraSpinner } from "@lookiero/aurora";
-import React from "react";
-import { View } from "react-native";
-import { style } from "./Spinner.style";
-const Spinner = () => (React.createElement(View, { style: style.container },
-    React.createElement(AuroraSpinner, { testID: "spinner" })));
-export { Spinner };

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

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

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

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

package/dist/shared/ui/components/layouts/carousel/Bullets.d.ts

@@ -1,10 +0,0 @@
-import { FC } from "react";
-interface BulletsProps {
-    readonly activeIndex: number;
-    readonly onChange: (index: number) => void;
-    readonly count: number;
-    readonly maxBullets?: number;
-    readonly testID?: string;
-}
-declare const Bullets: FC<BulletsProps>;
-export { Bullets };

package/dist/shared/ui/components/layouts/carousel/Bullets.js

@@ -1,28 +0,0 @@
-import { Theme } from "@lookiero/aurora";
-import { animated, useSpring } from "@react-spring/native";
-import React from "react";
-import { View, Pressable } from "react-native";
-import { style } from "./Bullets.style";
-const { colorBgActionPrimaryActive, colorBgPrimaryMedium } = Theme.get();
-const MAX = 5;
-const DIAMETER_MAX = 8;
-const DIAMETER_MIN = 2;
-const Bullet = ({ index, activeIndex, maxBullets, onChange }) => {
-    const pivot = Math.floor(maxBullets / 2) + 1;
-    const delta = Math.abs(index - activeIndex);
-    const diameter = delta > 1 ? DIAMETER_MAX - delta * DIAMETER_MIN : DIAMETER_MAX;
-    const color = delta === 0 ? colorBgActionPrimaryActive : colorBgPrimaryMedium;
-    const springs = useSpring({ diameter, color });
-    return delta >= pivot ? null : (React.createElement(Pressable, { onPress: () => onChange(index) },
-        React.createElement(animated.View, { accessibilityState: { selected: delta === 0 }, testID: "bullet", style: [
-                style.bullet,
-                {
-                    width: springs.diameter,
-                    height: springs.diameter,
-                    backgroundColor: springs.color,
-                    borderRadius: springs.diameter,
-                },
-            ] })));
-};
-const Bullets = ({ activeIndex, count, maxBullets = MAX, onChange, testID = "bullets" }) => (React.createElement(View, { style: style.bullets, testID: testID }, [...Array(count).keys()].map((index) => (React.createElement(Bullet, { key: index, activeIndex: activeIndex, index: index, maxBullets: maxBullets, onChange: onChange })))));
-export { Bullets };

package/dist/shared/ui/components/layouts/carousel/Bullets.style.d.ts

@@ -1,12 +0,0 @@
-declare const style: {
-    bullet: {
-        marginHorizontal: number;
-    };
-    bullets: {
-        alignItems: "center";
-        flexDirection: "row";
-        justifyContent: "center";
-        paddingVertical: number;
-    };
-};
-export { style };

package/dist/shared/ui/components/layouts/carousel/Bullets.style.js

@@ -1,15 +0,0 @@
-import { Theme } from "@lookiero/aurora";
-import { StyleSheet } from "react-native";
-const { space4 } = Theme.get();
-const style = StyleSheet.create({
-    bullet: {
-        marginHorizontal: 3,
-    },
-    bullets: {
-        alignItems: "center",
-        flexDirection: "row",
-        justifyContent: "center",
-        paddingVertical: space4,
-    },
-});
-export { style };

package/dist/shared/ui/components/layouts/carousel/Carousel.d.ts

@@ -1,33 +0,0 @@
-/// <reference types="react" />
-import { StyleProp, ViewStyle } from "react-native";
-interface RenderItemFunctionArgs<T> {
-    readonly item: T;
-    readonly index: number;
-    readonly isLastItem: boolean;
-}
-interface RenderItemFunction<T> {
-    (args: RenderItemFunctionArgs<T>): JSX.Element;
-}
-interface RenderBulletsFunctionArgs {
-    readonly activeIndex: number;
-    readonly count: number;
-    readonly onChange: (index: number) => void;
-}
-interface RenderBulletsFunction {
-    (args: RenderBulletsFunctionArgs): JSX.Element;
-}
-interface CarouselStyle {
-    readonly container?: StyleProp<ViewStyle>;
-}
-interface CarouselProps<T> {
-    readonly activeIndex?: number;
-    readonly data: T[];
-    readonly enabled?: boolean;
-    readonly children: RenderItemFunction<T>;
-    readonly bullets?: RenderBulletsFunction;
-    readonly onActiveIndexChanged?: (index: number) => void;
-    readonly style?: CarouselStyle;
-}
-declare const Carousel: <T>({ activeIndex, data, enabled, children, bullets, onActiveIndexChanged, style: customStyle, }: CarouselProps<T>) => JSX.Element;
-export type { RenderItemFunction, RenderBulletsFunction };
-export { Carousel };

package/dist/shared/ui/components/layouts/carousel/Carousel.js

@@ -1,87 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { View } from "react-native";
-import { Gesture, GestureDetector, GestureHandlerRootView } from "react-native-gesture-handler";
-import Animated, { useSharedValue, withSpring, useAnimatedStyle, runOnJS } from "react-native-reanimated";
-import { style } from "./Carousel.style";
-const SPRING_CONFIG = {
-    damping: 25,
-    mass: 1,
-    stiffness: 300,
-};
-const clamp = (min, max, value) => {
-    "worklet";
-    return Math.min(max, Math.max(min, value));
-};
-const Carousel = ({ activeIndex = 0, data, enabled = true, children, bullets, onActiveIndexChanged, style: customStyle, }) => {
-    const [carouselDimensions, setCarouselDimensions] = useState();
-    const handleOnLayout = useCallback(({ nativeEvent: { layout } }) => setCarouselDimensions({ width: layout.width, height: layout.height }), []);
-    const carouselWidth = carouselDimensions?.width;
-    const panTranslationX = useSharedValue(0);
-    const panInitialTranslationX = useSharedValue(undefined);
-    const [panActive, setPanActive] = useState(false);
-    const activeIndexRef = useRef(activeIndex);
-    activeIndexRef.current = activeIndex;
-    useEffect(() => {
-        if (panActive || !carouselWidth) {
-            return;
-        }
-        panTranslationX.value = -activeIndex * carouselWidth;
-    }, [activeIndex, carouselWidth, panActive, panTranslationX]);
-    const updateActiveIndex = useCallback((index) => {
-        if (activeIndexRef.current === index) {
-            return;
-        }
-        onActiveIndexChanged?.(index);
-    }, [onActiveIndexChanged]);
-    const handleOnActiveIndexChanged = useCallback((index) => {
-        if (!carouselWidth) {
-            return;
-        }
-        updateActiveIndex(index);
-        panTranslationX.value = withSpring(-index * carouselWidth, SPRING_CONFIG);
-    }, [carouselWidth, panTranslationX, updateActiveIndex]);
-    const panGesture = useMemo(() => Gesture.Pan()
-        .withTestId("carousel-pan-gesture")
-        .enabled(enabled)
-        .maxPointers(1)
-        .activeOffsetX([-20, 20])
-        // This method does not work if legacy implementation is enabled
-        // Expo.tsx => enableLegacyWebImplementation(true)
-        // .onStart(() => {
-        //   panInitialTranslationX.value = panTranslationX.value;
-        // })
-        // This method is defined as legacy implementation is enabled
-        .onBegin(() => {
-        runOnJS(setPanActive)(true);
-        panInitialTranslationX.value = panTranslationX.value;
-    })
-        .onUpdate(({ translationX }) => {
-        if (panInitialTranslationX.value === undefined || !carouselWidth) {
-            return;
-        }
-        const tX = panInitialTranslationX.value + translationX;
-        const index = clamp(0, data.length - 1, Math.round(-tX / carouselWidth));
-        panTranslationX.value = tX;
-        runOnJS(updateActiveIndex)(index);
-    })
-        .onEnd(({ translationX, velocityX }) => {
-        if (panInitialTranslationX.value === undefined || !carouselWidth) {
-            return;
-        }
-        const tX = panInitialTranslationX.value + translationX;
-        const indexDelta = Math.round(translationX / carouselWidth);
-        const velocityIndex = Math.abs(indexDelta) > 0 ? 0 : clamp(-1, 1, Math.abs(velocityX) > 2 ? -velocityX : 0);
-        const index = clamp(0, data.length - 1, Math.round(-tX / carouselWidth) + velocityIndex);
-        panTranslationX.value = withSpring(-index * carouselWidth, SPRING_CONFIG);
-        panInitialTranslationX.value = undefined;
-        runOnJS(updateActiveIndex)(index);
-        runOnJS(setPanActive)(true);
-    }), [carouselWidth, data.length, enabled, panInitialTranslationX, panTranslationX, updateActiveIndex]);
-    const animatedStyle = useAnimatedStyle(() => ({ transform: [{ translateX: panTranslationX.value }] }), [panTranslationX]);
-    return (React.createElement(View, { style: [style.container, customStyle?.container], testID: "carousel" },
-        React.createElement(View, { style: style.carousel, testID: "carousel-layout", onLayout: handleOnLayout }, carouselWidth && (React.createElement(GestureHandlerRootView, { style: { flex: 1 } },
-            React.createElement(GestureDetector, { gesture: panGesture },
-                React.createElement(Animated.View, { style: [style.carouselTrack, { width: carouselWidth * data.length }, animatedStyle], testID: "carousel-track" }, data.map((item, index) => (React.createElement(View, { key: index, style: [style.carouselItem, { width: carouselWidth }], testID: "carousel-item" }, children({ index, item, isLastItem: index === data.length - 1 }))))))))),
-        bullets && (React.createElement(View, { style: style.bullets, testID: "carousel-bullets" }, bullets({ activeIndex, count: data.length, onChange: handleOnActiveIndexChanged })))));
-};
-export { Carousel };

package/dist/shared/ui/components/layouts/carousel/Carousel.style.d.ts

@@ -1,24 +0,0 @@
-declare const style: {
-    bullets: {
-        bottom: number;
-        justifyContent: "center";
-        position: "absolute";
-        width: "100%";
-    };
-    carousel: {
-        flex: number;
-    };
-    carouselItem: {
-        flex: number;
-    };
-    carouselTrack: {
-        flex: number;
-        flexDirection: "row";
-        height: "100%";
-    };
-    container: {
-        flex: number;
-        overflow: "hidden";
-    };
-};
-export { style };

package/dist/shared/ui/components/layouts/carousel/Carousel.style.js

@@ -1,25 +0,0 @@
-import { StyleSheet } from "react-native";
-const style = StyleSheet.create({
-    bullets: {
-        bottom: 0,
-        justifyContent: "center",
-        position: "absolute",
-        width: "100%",
-    },
-    carousel: {
-        flex: 1,
-    },
-    carouselItem: {
-        flex: 1,
-    },
-    carouselTrack: {
-        flex: 1,
-        flexDirection: "row",
-        height: "100%",
-    },
-    container: {
-        flex: 1,
-        overflow: "hidden",
-    },
-});
-export { style };

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

@@ -1,10 +0,0 @@
-import { FC } from "react";
-import { ViewProps } from "react-native";
-import { ScreenSize } from "../../../hooks/useScreenSize";
-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/shared/ui/components/layouts/column/Column.js

@@ -1,10 +0,0 @@
-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[columnSizeForScreenSize], customStyle] }, children));
-};
-export { Column };

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

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

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

@@ -1,23 +0,0 @@
-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/shared/ui/components/layouts/modal/Modal.d.ts

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

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

@@ -1,95 +0,0 @@
-import { Portal } from "@gorhom/portal";
-import { ButtonIcon, Theme, useBack } from "@lookiero/aurora";
-import { animated, useTransition } from "@react-spring/native";
-import React, { useCallback, useMemo, useState } from "react";
-import { Dimensions, Platform, TouchableWithoutFeedback, View, } from "react-native";
-import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
-import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
-import { useScreenSize } from "../../../hooks/useScreenSize";
-import { Row } from "../row/Row";
-import { Sticky } from "../sticky/Sticky";
-import { style } from "./Modal.style";
-const { space8, space10 } = Theme.get();
-const TRANSITION_MODAL_SCALE = 0.9;
-const DEFAULT_SAFEAREA_INSET_TOP = space10;
-const MODAL_DESKTOP_VERTICAL_PADDING = space10;
-const Modal = ({ children, visible, header, footer, portalHostName, onClose, showCloseButton = false, size = { M: "2/3", L: "1/3" }, style: customStyle, scroll = false, testID = "modal", }) => {
-    const { height: screenHeight } = Dimensions.get(Platform.OS === "web" ? "window" : "screen");
-    const { top: safeAreaInsetTop, bottom: safeAreaInsetBottom } = useSafeAreaInsets();
-    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;
-        }
-        onClose();
-        return true; // The event will not be bubbled up
-    }, [onClose, visible]);
-    useBack(handleHardwareBackPress);
-    const [modalHeight, setModalHeight] = useState();
-    const handleOnModalLayout = useCallback(({ nativeEvent: { layout: { height }, }, }) => setModalHeight(height), []);
-    const [footerHeight, setFooterHeight] = useState(0);
-    const handleOnFooterLayout = useCallback(({ height }) => setFooterHeight(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,
-    });
-    const ModalContentView = useMemo(() => (scroll ? KeyboardAwareScrollView : View), [scroll]);
-    return (React.createElement(Portal, { hostName: portalHostName }, transitions(({ modalOpacity, overlayOpacity, modalTranslateY, modalScale }, item) => item && (React.createElement(View, { pointerEvents: visible ? "auto" : "none", style: style.container, testID: testID },
-        React.createElement(TouchableWithoutFeedback, { onPress: visible ? onClose : undefined },
-            React.createElement(animated.View, { style: [
-                    style.overlay,
-                    { opacity: overlayOpacity },
-                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                    // @ts-ignore
-                    customStyle?.overlay,
-                ] })),
-        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,
-                        !isSmallDevice ? style.modalLarge : undefined,
-                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                        // @ts-ignore
-                        columnSizeForScreenSize && style[columnSizeForScreenSize],
-                        {
-                            opacity: modalOpacity,
-                            transform: [{ translateY: modalTranslateY }, { scale: modalScale }],
-                            maxHeight: modalMaxHeight,
-                        },
-                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                        // @ts-ignore
-                        customStyle?.modal,
-                    ], onLayout: handleOnModalLayout },
-                    (header || showCloseButton) && (React.createElement(View, { style: [style.header, customStyle?.header] },
-                        showCloseButton && (React.createElement(ButtonIcon, { name: "close", style: style.closeButton, testID: "button-icon", onPress: onClose })),
-                        React.createElement(View, null, header))),
-                    React.createElement(ModalContentView, { keyboardShouldPersistTaps: "handled" },
-                        React.createElement(View, { style: {
-                                paddingBottom: safeAreaInsetBottom +
-                                    (Platform.OS !== "ios" ? space8 : 0) +
-                                    (Platform.OS !== "web" ? footerHeight : 0),
-                            } }, children)),
-                    footer && (React.createElement(Sticky, { style: style.stickyFooter, onLayout: handleOnFooterLayout }, footer))))))))));
-};
-export { Modal };