@lookiero/checkout 1.1.0 → 1.1.1-beta.1

package/dist/shared/logging/reactRouterV6Instrumentation.native.js

@@ -0,0 +1,115 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { RoutingInstrumentation } from "@sentry/react-native";
+import { logger } from "@sentry/utils";
+import React from "react";
+class ReactRouterV6Instrumentation extends RoutingInstrumentation {
+    static instrumentationName = "react-router-v6";
+    useEffect;
+    useLocation;
+    useNavigationType;
+    matchRoutes;
+    // @ts-ignore
+    prevRoute;
+    recentRouteKeys = [];
+    // @ts-ignore
+    latestTransaction;
+    // @ts-ignore
+    shouldUpdateLatestTransaction = false;
+    constructor(useEffect, useLocation, useNavigationType, matchRoutes) {
+        super();
+        this.useEffect = useEffect;
+        this.useLocation = useLocation;
+        this.useNavigationType = useNavigationType;
+        this.matchRoutes = matchRoutes;
+    }
+    /**
+     * Extends by calling _handleInitialState at the end.
+     */
+    registerRoutingInstrumentation(listener, beforeNavigate, onConfirmRoute) {
+        super.registerRoutingInstrumentation(listener, beforeNavigate, onConfirmRoute);
+        // Need to handle the initial state as the router patch will only attach transactions on subsequent route changes.
+        this.handleInitialState();
+    }
+    /**
+     * Starts an idle transaction for the initial state which won't get called by the router listener.
+     */
+    handleInitialState() {
+        this.latestTransaction = this.onRouteWillChange(INITIAL_TRANSACTION_CONTEXT);
+        // We set this to true so when registerAppContainer is called, the transaction gets updated with the actual route data
+        this.shouldUpdateLatestTransaction = true;
+    }
+    // @ts-ignore
+    getTransactionContext(route, previousRoute) {
+        return {
+            name: route.name,
+            op: "navigation",
+            tags: {
+                ["routing.instrumentation"]: ReactRouterV6Instrumentation.instrumentationName,
+                ["routing.route.name"]: route.name,
+            },
+            data: {
+                route: {
+                    name: route.name,
+                    key: route.key,
+                    params: route.params ?? {},
+                    hasBeenSeen: this.recentRouteKeys.includes(route.key),
+                },
+                previousRoute: previousRoute
+                    ? {
+                        name: previousRoute.name,
+                        key: previousRoute.key,
+                        params: previousRoute.params ?? {},
+                    }
+                    : null,
+            },
+        };
+    }
+    wrapUseRoutes = (origUseRoutes) => {
+        if (!this.useEffect ||
+            !this.useLocation ||
+            !this.useNavigationType ||
+            !this.matchRoutes
+        // !this._customStartTransaction
+        ) {
+            __DEBUG_BUILD__ &&
+                logger.warn("reactRouterV6Instrumentation was unable to wrap `useRoutes` because of one or more missing parameters.");
+            return origUseRoutes;
+        }
+        let isMountRenderPass = true;
+        // eslint-disable-next-line react/display-name
+        return (routes, locationArg) => {
+            const SentryRoutes = () => {
+                const Routes = origUseRoutes(routes, locationArg);
+                const location = this.useLocation();
+                const navigationType = this.useNavigationType();
+                // A value with stable identity to either pick `locationArg` if available or `location` if not
+                const stableLocationParam = typeof locationArg === "string" || (locationArg && locationArg.pathname)
+                    ? locationArg
+                    : location;
+                this.useEffect(() => {
+                    const normalizedLocation = typeof stableLocationParam === "string" ? { pathname: stableLocationParam } : stableLocationParam;
+                    if (isMountRenderPass) {
+                        console.log("updatePageloadTransaction", normalizedLocation, routes);
+                        // updatePageloadTransaction(normalizedLocation, routes);
+                        isMountRenderPass = false;
+                    }
+                    else {
+                        console.log("normalizedLocation", normalizedLocation, routes, navigationType);
+                        // handleNavigation(normalizedLocation, routes, navigationType);
+                    }
+                }, [navigationType, stableLocationParam]);
+                return Routes;
+            };
+            return React.createElement(SentryRoutes, null);
+        };
+    };
+}
+const INITIAL_TRANSACTION_CONTEXT = {
+    name: "App Launch",
+    op: "navigation",
+    tags: {
+        ["routing.instrumentation"]: ReactRouterV6Instrumentation.instrumentationName,
+    },
+    data: {},
+};
+export { ReactRouterV6Instrumentation };

package/dist/shared/notifications/domain/notification/command/createNotification.d.ts

@@ -0,0 +1,17 @@
+import { Command } from "@lookiero/messaging";
+import { NotificationLevel } from "../model/notification";
+declare const CREATE_NOTIFICATION = "create_notification";
+interface CreateNotificationPayload {
+    readonly aggregateId: string;
+    readonly level: NotificationLevel;
+    readonly bodyI18nKey: string;
+    readonly titleI18nKey: string | undefined;
+}
+interface CreateNotification extends Command<typeof CREATE_NOTIFICATION>, CreateNotificationPayload {
+}
+interface CreateNotificationFunction {
+    (payload: CreateNotificationPayload): CreateNotification;
+}
+declare const createNotification: CreateNotificationFunction;
+export type { CreateNotification };
+export { CREATE_NOTIFICATION, createNotification };

package/dist/shared/notifications/domain/notification/command/createNotification.js

@@ -0,0 +1,7 @@
+import { command } from "@lookiero/messaging";
+const CREATE_NOTIFICATION = "create_notification";
+const createNotification = ({ aggregateId, ...payload }) => ({
+    ...command({ aggregateId, name: CREATE_NOTIFICATION }),
+    ...payload,
+});
+export { CREATE_NOTIFICATION, createNotification };

package/dist/shared/notifications/domain/notification/command/removeNotification.tes.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/shared/notifications/domain/notification/command/removeNotification.tes.js

@@ -0,0 +1,9 @@
+import { removeNotification as sut, REMOVE_NOTIFICATION } from "./removeNotification";
+describe("removeNotification", () => {
+    it("returns a RemoveNotification command", () => {
+        const aggregateId = "67ac1d5c-6d24-4b19-bc01-8f61c266670c";
+        const command = sut({ aggregateId });
+        expect(command.aggregateId).toBe(aggregateId);
+        expect(command.name).toBe(REMOVE_NOTIFICATION);
+    });
+});

package/dist/shared/notifications/infrastructure/domain/notification/react/useCreateNotification.d.ts

@@ -0,0 +1,21 @@
+import { CommandStatus } from "@lookiero/messaging-react";
+import { Logger } from "../../../../../logging/Logger";
+import { NotificationLevel } from "../../../../domain/notification/model/notification";
+interface CreateNotificationFunctionArgs {
+    readonly aggregateId?: string;
+    readonly level: NotificationLevel;
+    readonly bodyI18nKey: string;
+    readonly titleI18nKey?: string;
+}
+interface CreateNotificationFunction {
+    (args: CreateNotificationFunctionArgs): Promise<void>;
+}
+interface UseCreateNotificationFunctionArgs {
+    readonly contextId: string;
+    readonly logger: Logger;
+}
+interface UseCreateNotificationFunction {
+    (args: UseCreateNotificationFunctionArgs): [create: CreateNotificationFunction, status: CommandStatus];
+}
+declare const useCreateNotification: UseCreateNotificationFunction;
+export { useCreateNotification };

package/dist/shared/notifications/infrastructure/domain/notification/react/useCreateNotification.js

@@ -0,0 +1,22 @@
+import { useCommand } from "@lookiero/messaging-react";
+import { useCallback } from "react";
+import { v4 as uuid } from "uuid";
+import { createNotification } from "../../../../domain/notification/command/createNotification";
+const useCreateNotification = ({ contextId, logger }) => {
+    const [commandBus, status] = useCommand({ contextId });
+    const create = useCallback(async ({ aggregateId, level, titleI18nKey, bodyI18nKey }) => {
+        try {
+            await commandBus(createNotification({
+                aggregateId: aggregateId || uuid(),
+                level,
+                titleI18nKey,
+                bodyI18nKey,
+            }));
+        }
+        catch (error) {
+            logger.captureException(error);
+        }
+    }, [commandBus, logger]);
+    return [create, status];
+};
+export { useCreateNotification };

package/dist/shared/notifications/infrastructure/ui/components/NotificationItem.d.ts

@@ -0,0 +1,12 @@
+import { FC } from "react";
+import { ToastStyle } from "../../../../ui/components/molecules/toast/Toast";
+import { NotificationProjection } from "../../../projection/notification/notification";
+interface NotificationItemProps {
+    readonly notification: NotificationProjection;
+    readonly onRemove: (notificationId: string) => void;
+    readonly autoHideTimeout?: number;
+    readonly testID?: string;
+    readonly style?: ToastStyle;
+}
+declare const NotificationItem: FC<NotificationItemProps>;
+export { NotificationItem };

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

@@ -0,0 +1,24 @@
+import { useI18nMessage } from "@lookiero/i18n-react";
+import React from "react";
+import { useCallback, useEffect } from "react";
+import { Toast, ToastVariant } from "../../../../ui/components/molecules/toast/Toast";
+import { NotificationLevel } from "../../../domain/notification/model/notification";
+const toastVariantForNotificationLevel = {
+    [NotificationLevel.INFO]: ToastVariant.INFO,
+    [NotificationLevel.ERROR]: ToastVariant.ERROR,
+    [NotificationLevel.SUCCESS]: ToastVariant.SUCCESS,
+};
+const NotificationItem = ({ notification, onRemove, autoHideTimeout, testID = "notification-item", style: customStyle, }) => {
+    const title = useI18nMessage({ id: notification.titleI18nKey }) || undefined;
+    const body = useI18nMessage({ id: notification.bodyI18nKey || "" });
+    const handleOnClose = useCallback(() => onRemove(notification.id), [notification.id, onRemove]);
+    useEffect(() => {
+        if (!autoHideTimeout) {
+            return;
+        }
+        const hideTimeout = setTimeout(handleOnClose, autoHideTimeout);
+        return () => clearTimeout(hideTimeout);
+    }, [autoHideTimeout, handleOnClose]);
+    return (React.createElement(Toast, { body: body, style: customStyle, testID: testID, title: title, variant: toastVariantForNotificationLevel[notification.level], onClose: handleOnClose }));
+};
+export { NotificationItem };

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

@@ -0,0 +1,9 @@
+import { FC } from "react";
+import { NotificationProjection } from "../../../projection/notification/notification";
+interface NotificationsProps {
+    readonly notifications?: NotificationProjection[];
+    readonly onRemove: (notificationId: string) => void;
+    readonly autoHideTimeout?: number;
+}
+declare const Notifications: FC<NotificationsProps>;
+export { Notifications };

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

@@ -0,0 +1,20 @@
+import React from "react";
+import { View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+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, }) => {
+    const { top: safeAreaInsetTop } = useSafeAreaInsets();
+    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, { paddingTop: safeAreaInsetTop }] },
+            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

@@ -0,0 +1,36 @@
+import { StyleSheet } from "react-native";
+declare const style: StyleSheet.NamedStyles<any> | StyleSheet.NamedStyles<{
+    notifications: {
+        flexDirection: "column";
+        top: number;
+        width: string;
+        zIndex: number;
+        left: number;
+    } | {
+        flexDirection: "column";
+        top: number;
+        width: string;
+        zIndex: number;
+        position: "fixed";
+        left: number;
+    } | {
+        flexDirection: "column";
+        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

@@ -0,0 +1,31 @@
+import { Platform, StyleSheet } from "react-native";
+import { theme } from "../../../../../infrastructure/ui/theme/theme";
+const { spaceM } = theme();
+const style = StyleSheet.create({
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    notifications: {
+        left: 0,
+        ...Platform.select({
+            web: { position: "fixed" },
+            ios: { position: "absolute" },
+            android: { position: "absolute" },
+        }),
+        flexDirection: "column",
+        top: 0,
+        width: "100%",
+        zIndex: 20,
+    },
+    row: {
+        flex: 1,
+        justifyContent: "center",
+    },
+    rowSmall: {
+        paddingLeft: spaceM,
+        paddingRight: spaceM,
+    },
+    toast: {
+        marginTop: spaceM,
+    },
+});
+export { style };

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

@@ -0,0 +1,13 @@
+import { TrackingPage } from "../../../infrastructure/tracking/tracking";
+import { Country } from "../../../projection/shared/country";
+interface UsePageViewFunctionArgs {
+    readonly page: TrackingPage;
+    readonly country: Country;
+    readonly checkoutId?: string;
+    readonly checkoutItemId?: string;
+}
+interface UsePageViewFunction {
+    (agrs: UsePageViewFunctionArgs): void;
+}
+declare const usePageView: UsePageViewFunction;
+export { usePageView };

package/dist/shared/tracking/infrastructure/usePageView.js

@@ -0,0 +1,27 @@
+import { useLayoutEffect } from "react";
+import { PROJECT } from "../../../infrastructure/tracking/tracking";
+import { TrackingEvent, TrackingEventCategory } from "../tracking";
+import { useEmitUserEvent } from "./useEmitUserEvent";
+const usePageView = ({ page, country, checkoutId, checkoutItemId }) => {
+    const emitUserEvent = useEmitUserEvent();
+    useLayoutEffect(() => {
+        if (!checkoutId) {
+            return;
+        }
+        const baseTrackingEvent = {
+            event: TrackingEvent.PAGEVIEW,
+            eventCategory: TrackingEventCategory.NAVIGATION,
+            section: `${PROJECT}_${page}`,
+            store: country,
+            checkoutId,
+        };
+        const pageViewTrackingEvent = checkoutItemId
+            ? {
+                ...baseTrackingEvent,
+                checkoutItemId,
+            }
+            : baseTrackingEvent;
+        emitUserEvent(pageViewTrackingEvent);
+    }, [checkoutId, checkoutItemId, country, emitUserEvent, page]);
+};
+export { usePageView };

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

@@ -2,20 +2,20 @@ import { MediaPerspective } from "../../projection/checkoutItem/checkoutItem";
 import { Country } from "../../projection/shared/country";
 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"
+    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"
 }
 declare enum TrackingEventCategory {
     NAVIGATION = "navigation"

package/dist/shared/tracking/tracking.js

@@ -1,20 +1,20 @@
 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["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 || (TrackingEvent = {}));
 var TrackingEventCategory;
 (function (TrackingEventCategory) {

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

@@ -1,20 +1,23 @@
 import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
 import { animated, useSpring } from "@react-spring/native";
-import React from "react";
+import React, { useCallback, useState } from "react";
 import { View } from "react-native";
 import { theme } from "../../../../../infrastructure/ui/theme/theme";
 import { style } from "./Field.style";
-const { spaceM, spaceXL } = theme();
+const SCALE = 0.75;
+const { spaceXS, spaceM } = theme();
 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: 0.75, translateY: -14, translateX: -spaceXL }
+        ? { scale: SCALE, translateY: -14, translateX: -(((1 - SCALE) * width) / 2 + spaceXS) }
         : { scale: 1, translateY: spaceM, translateX: 0 });
     return (React.createElement(animated.View, { pointerEvents: "none", style: [
             {
                 transform: [{ scale: springs.scale }, { translateY: springs.translateY }, { translateX: springs.translateX }],
             },
             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 }] })));
 };

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

@@ -1,6 +1,6 @@
 import { StyleSheet } from "react-native";
 import { theme } from "../../../../../infrastructure/ui/theme/theme";
-const { colorBase, spaceM } = theme();
+const { colorBase, spaceXS } = theme();
 const style = StyleSheet.create({
     fieldBackground: {
         backgroundColor: colorBase,
@@ -12,7 +12,7 @@ const style = StyleSheet.create({
     fieldText: {
         flexWrap: "nowrap",
         overflow: "hidden",
-        paddingHorizontal: spaceM,
+        paddingHorizontal: spaceXS,
         zIndex: 1,
     },
 });

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

@@ -32,6 +32,6 @@ const Input = ({ minHeight = MIN_HEIGHT, maxHeight = MAX_HEIGHT, style: customSt
     }, [maxHeight, minHeight, multiline]);
     useLayoutEffect(handleOnContentSizeChangeWeb, [handleOnContentSizeChangeWeb, value]);
     const textInputRef = useRef(null);
-    return (React.createElement(TextInput, { ...restOfProps, ref: textInputRef, multiline: multiline, numberOfLines: !!multiline ? undefined : 1, placeholderTextColor: placeholderTextColor, style: [style.input, customStyle, { height }], testID: "input", textAlignVertical: "top", value: value, onChange: onChange, onContentSizeChange: handleOnContentSizeChange }));
+    return (React.createElement(TextInput, { ...restOfProps, ref: textInputRef, multiline: multiline, numberOfLines: !!multiline ? undefined : 1, placeholderTextColor: placeholderTextColor, style: [style.input, customStyle, !multiline && style.singleLine, { height }], testID: "input", textAlignVertical: "top", value: value, onChange: onChange, onContentSizeChange: handleOnContentSizeChange }));
 };
 export { Input };

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

@@ -3,8 +3,12 @@ declare const paddingVertical: number;
 declare const style: {
     input: {
         lineHeight?: number | undefined;
+        textOverflow?: string | undefined;
+        appearance?: string | undefined;
+        outlineWidth?: number | undefined;
         borderWidth: number;
         color: string;
+        display: "flex";
         fontFamily: string;
         fontSize: number;
         letterSpacing: number;
@@ -12,5 +16,6 @@ declare const style: {
         paddingHorizontal: number;
         paddingTop: number;
     };
+    singleLine: {};
 };
 export { style, borderSize, paddingVertical };

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

@@ -7,6 +7,7 @@ const style = StyleSheet.create({
     input: {
         borderWidth: borderSize,
         color: colorContent,
+        display: "flex",
         fontFamily: fontMap.Body,
         fontSize: fontBodySize3,
         letterSpacing: fontBodyLetterSpacing3,
@@ -16,8 +17,16 @@ const style = StyleSheet.create({
         ...Platform.select({
             web: {
                 lineHeight: fontBodyHeight3,
+                textOverflow: "ellipsis",
+                appearance: "none",
+                outlineWidth: 0,
             },
         }),
     },
+    singleLine: {
+    // flexWrap: "nowrap",
+    // flex: 1,
+    // flexShrink: 1,
+    },
 });
 export { style, borderSize, paddingVertical };

package/dist/shared/ui/components/molecules/inputField/InputField.js

@@ -6,9 +6,8 @@ import { Field } from "../../atoms/field/Field";
 import { Icon } from "../../atoms/icon/Icon";
 import { Input } from "../../atoms/input/Input";
 import { style } from "./InputField.style";
-const { colorBase, colorContent, colorGrayscaleL, colorPrimary, spaceM, iconSize } = theme();
-const inputPaddingRightWithIcon = iconSize + spaceM;
-const inputPaddingRightWithoutIcon = spaceM;
+const { colorBase, colorContent, colorGrayscaleL, colorPrimary, spaceL, iconSize } = theme();
+const inputPaddingRightWithIcon = iconSize + spaceL;
 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]);
@@ -18,11 +17,7 @@ const InputField = ({ label, placeholder, value, multiline = false, minHeight, e
     return (React.createElement(View, { style: customStyle?.inputField, testID: "input-field" },
         React.createElement(Field, { isFocused: isFocused || !!value, label: label, style: {
                 field: [style.field, customStyle?.field],
-                fieldText: [
-                    { color },
-                    { paddingRight: !!icon ? inputPaddingRightWithIcon : inputPaddingRightWithoutIcon },
-                    customStyle?.fieldText,
-                ],
+                fieldText: [{ color }, customStyle?.fieldText],
             } }),
         React.createElement(Input, { minHeight: minHeight, multiline: multiline, placeholder: placeholder, placeholderTextColor: isFocused ? colorGrayscaleL : colorBase, style: [!!icon && { paddingRight: inputPaddingRightWithIcon }, { borderColor: color }, customStyle?.input], value: value, onBlur: handleOnBlur, onChangeText: handleOnChange, onFocus: handleOnFocus, ...inputRestProps }),
         !!icon && React.createElement(Icon, { name: icon, style: [style.icon, { color }, customStyle?.icon] }),

package/dist/shared/ui/components/molecules/inputField/InputField.style.d.ts

@@ -4,8 +4,9 @@ declare const style: {
         marginTop: number;
     };
     field: {
+        left: number;
+        maxWidth: string;
         position: "absolute";
-        width: string;
         zIndex: number;
     };
     icon: {

package/dist/shared/ui/components/molecules/inputField/InputField.style.js

@@ -1,19 +1,20 @@
 import { StyleSheet } from "react-native";
 import { theme } from "../../../../../infrastructure/ui/theme/theme";
-const { spaceXS, spaceS, spaceM, spaceL } = theme();
+const { spaceXS, spaceM, spaceL } = theme();
 const style = StyleSheet.create({
     error: {
         marginLeft: spaceL,
         marginTop: spaceXS,
     },
     field: {
+        left: spaceM,
+        maxWidth: "100%",
         position: "absolute",
-        width: "100%",
         zIndex: 4,
     },
     icon: {
         position: "absolute",
-        right: spaceS,
+        right: spaceM,
         top: spaceM,
         zIndex: 4,
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "1.1.0",
+  "version": "1.1.1-beta.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [