@artsy/palette-mobile 13.2.34 → 13.2.35

package/dist/elements/Flex/Flex.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Box } from "../Box";
+export const Flex = forwardRef(({ backgroundColor, ...restProps }, ref) => (_jsx(Box, { backgroundColor: backgroundColor ?? "transparent", ...restProps, ref: ref })));

package/dist/elements/Flex/index.d.ts

@@ -0,0 +1 @@
+export * from "./Flex";

package/dist/elements/Flex/index.js

@@ -0,0 +1 @@
+export * from "./Flex";

package/dist/elements/Header/ArtsyLogoHeader.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface Props {
+    shadow?: boolean;
+}
+export declare const ArtsyLogoHeader: ({ shadow }: Props) => JSX.Element;
+export {};

package/dist/elements/Header/ArtsyLogoHeader.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { StyleSheet } from "react-native";
+import { ArtsyLogoBlackIcon } from "../../svgs";
+import { Box } from "../Box";
+import { Flex } from "../Flex";
+import { Spacer } from "../Spacer";
+export const ArtsyLogoHeader = ({ shadow = false }) => (_jsxs(_Fragment, { children: [_jsxs(Box, { mt: 2, mb: 1, style: shadow ? styles.boxShadowStyle : {}, children: [_jsx(Flex, { alignItems: "center", children: _jsx(ArtsyLogoBlackIcon, { scale: 0.75 }) }), _jsx(Spacer, { x: 1 })] }), _jsx(Spacer, { x: 2 })] }));
+const styles = StyleSheet.create({
+    boxShadowStyle: {
+        shadowColor: "black",
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.04,
+        shadowRadius: 2.0,
+        backgroundColor: "white",
+        height: 40,
+    },
+});

package/dist/elements/Header/index.d.ts

@@ -0,0 +1 @@
+export * from "./ArtsyLogoHeader";

package/dist/elements/Header/index.js

@@ -0,0 +1 @@
+export * from "./ArtsyLogoHeader";

package/dist/elements/Histogram/Histogram.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+type Range = [number, number];
+export interface HistogramBarEntity {
+    count: number;
+    value: number;
+}
+interface HistogramProps {
+    selectedRange: Range;
+    bars: HistogramBarEntity[];
+}
+export declare const Histogram: ({ bars, selectedRange }: HistogramProps) => JSX.Element;
+export {};

package/dist/elements/Histogram/Histogram.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from "../Box";
+import { Flex } from "../Flex";
+const BAR_WIDTH = 2;
+const BAR_ROUNDNESS = 10;
+const isSelected = (value, min, max) => {
+    return value >= min && value <= max;
+};
+const getPercentByEntity = (maxValue, entityCount) => {
+    if (maxValue === 0) {
+        return 100;
+    }
+    return (100 / maxValue) * entityCount;
+};
+export const Histogram = ({ bars, selectedRange }) => {
+    const maxValue = Math.max(...bars.map((bar) => bar.count));
+    const [min, max] = selectedRange;
+    return (_jsx(Flex, { height: 110, flexDirection: "row", justifyContent: "space-between", alignItems: "flex-end", children: bars.map((entity, index) => {
+            const percent = getPercentByEntity(maxValue, entity.count);
+            const selected = isSelected(entity.value, min, max);
+            return (_jsx(Box, { height: `${percent}%`, bg: selected ? "blue100" : "black15", width: BAR_WIDTH, borderTopLeftRadius: BAR_ROUNDNESS, borderTopRightRadius: BAR_ROUNDNESS }, `bar-${index}`));
+        }) }));
+};

package/dist/elements/Histogram/index.d.ts

@@ -0,0 +1 @@
+export * from "./Histogram";

package/dist/elements/Histogram/index.js

@@ -0,0 +1 @@
+export * from "./Histogram";

package/dist/elements/Image/Image.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { FastImageProps } from "react-native-fast-image";
+import { GeminiResizeMode } from "../../utils/createGeminiUrl";
+type CustomFastImageProps = Omit<FastImageProps, "onLoadStart" | "onLoadEnd" | "source">;
+export interface ImageProps extends CustomFastImageProps {
+    /** Supplied aspect ratio of image. If none provided, defaults to 1 */
+    aspectRatio?: number;
+    /** BlurHash code */
+    blurhash?: string | null | undefined;
+    /** Gemini resize_to param  */
+    geminiResizeMode?: GeminiResizeMode;
+    /** Resize on the fly using Gemini. Defaults to true */
+    performResize?: boolean;
+    /** Supplied height of image. If none provided, defaults to width / aspectRatio */
+    height?: number;
+    /** Supplied width of image. If none provided, defaults to screen width */
+    width?: number;
+    /** Show loading state  */
+    showLoadingState?: boolean;
+    /** Source url to the image  */
+    src: string;
+}
+export declare const Image: React.FC<ImageProps>;
+export {};

package/dist/elements/Image/Image.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback } from "react";
+import { PixelRatio, View } from "react-native";
+import { Blurhash } from "react-native-blurhash";
+import FastImage from "react-native-fast-image";
+import Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming, } from "react-native-reanimated";
+import { createGeminiUrl } from "../../utils/createGeminiUrl";
+import { useColor } from "../../utils/hooks";
+import { useScreenDimensions } from "../../utils/hooks/useScreenDimensions";
+import { Flex } from "../Flex";
+import { Skeleton, SkeletonBox } from "../Skeleton";
+export const Image = memo(({ aspectRatio, width, height, performResize = true, src, style, resizeMode, geminiResizeMode, showLoadingState = false, blurhash, ...flexProps }) => {
+    const loading = useSharedValue(true);
+    const dimensions = useImageDimensions({ aspectRatio, width, height });
+    const color = useColor();
+    const animatedStyles = useAnimatedStyle(() => {
+        return {
+            opacity: withTiming(loading.value ? 0 : 1, { duration: 200, easing: Easing.sin }),
+        };
+    }, []);
+    const onAnimationEnd = useCallback(() => {
+        "worklet";
+        loading.value = false;
+        // No need to get the js thread involved here
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    if (showLoadingState) {
+        return _jsx(ImageSkeleton, { dimensions: dimensions, blurhash: blurhash });
+    }
+    let uri = src;
+    if (performResize) {
+        uri = createGeminiUrl({
+            imageURL: src,
+            width: PixelRatio.getPixelSizeForLayoutSize(dimensions.width),
+            height: PixelRatio.getPixelSizeForLayoutSize(dimensions.height),
+            resizeMode: geminiResizeMode,
+        });
+    }
+    return (_jsxs(Flex, { position: "relative", ...flexProps, style: { ...dimensions }, children: [_jsx(View, { style: [dimensions, { position: "absolute" }], children: _jsx(ImageSkeleton, { dimensions: dimensions, blurhash: blurhash }) }), _jsx(Animated.View, { style: animatedStyles, children: _jsx(FastImage, { style: [
+                        dimensions,
+                        style,
+                        // If we have a blurhash, we don't want to show a background color
+                        // That might flash before the image loads
+                        { backgroundColor: blurhash ? "transparent" : color("black30") },
+                    ], resizeMode: resizeMode, onLoadEnd: onAnimationEnd, source: {
+                        priority: FastImage.priority.normal,
+                        uri,
+                    } }) })] }));
+});
+const useImageDimensions = (props) => {
+    const screenDimensions = useScreenDimensions();
+    const imageWidth = props.width ?? screenDimensions.width;
+    let imageHeight;
+    if (props.height) {
+        imageHeight = props.height;
+    }
+    else {
+        if (!props.aspectRatio) {
+            console.error("[Image] Error: `aspectRatio` is required if `height` is not provided.");
+        }
+        const aspectRatio = props.aspectRatio ?? 1;
+        imageHeight = imageWidth / aspectRatio;
+    }
+    const dimensions = {
+        width: imageWidth,
+        height: imageHeight,
+    };
+    return dimensions;
+};
+const ImageSkeleton = ({ dimensions, blurhash }) => {
+    if (!!blurhash) {
+        return (_jsx(Flex, { position: "absolute", backgroundColor: "black10", ...dimensions, children: _jsx(Blurhash, { blurhash: blurhash, style: { flex: 1 }, decodeWidth: 16, decodeHeight: 16 }) }));
+    }
+    return (_jsx(Flex, { position: "absolute", children: _jsx(Skeleton, { children: _jsx(SkeletonBox, { ...dimensions }) }) }));
+};

package/dist/elements/Image/Image.stories.d.ts

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

package/dist/elements/Image/Image.stories.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { storiesOf } from "@storybook/react-native";
+import { Image } from "./Image";
+import { Flex } from "../Flex";
+storiesOf("Image", module)
+    .add("With default fallback screen width", () => (_jsx(Image, { aspectRatio: 0.62, src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" })))
+    .add("With width and height", () => (_jsx(Image, { width: 250, height: 400, src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" })))
+    .add("With aspect ratio", () => (_jsx(Image, { width: 250, aspectRatio: 0.62, src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" })))
+    .add("Without automatic resizing", () => (_jsx(Image, { aspectRatio: 0.62, performResize: false, src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" })))
+    .add("With percentage width and height", () => {
+    return (_jsxs(Flex, { flexDirection: "row", flex: 1, children: [_jsx(Flex, { flex: 1, style: { aspectRatio: 0.69 }, children: _jsx(Image, { src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg", height: 260, width: 180, style: { width: "100%", height: "100%" } }) }), _jsx(Flex, { flex: 1, style: { aspectRatio: 1 }, children: _jsx(Image, { src: "https://i.imgur.com/b9IZinu.gif", width: 200, height: 200, style: { width: "100%", height: "100%" } }) }), _jsx(Flex, { flex: 1, style: { aspectRatio: 1.2 }, children: _jsx(Image, { width: 200, height: 240, src: "https://i.imgur.com/non-existing-image.gif", style: { width: "100%", height: "100%" } }) })] }));
+})
+    .add("With default fallback screen width + blurhash", () => (_jsx(Image, { aspectRatio: 0.62, blurhash: "LXK,+3H#yArKH~bGx:tM.atxM*k9", src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" })))
+    .add("With width and height + blurhash", () => (_jsx(Image, { blurhash: "LXK,+3H#yArKH~bGx:tM.atxM*k9", width: 250, height: 400, src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" })))
+    .add("With aspect ratio + blurhash", () => (_jsx(Image, { blurhash: "LXK,+3H#yArKH~bGx:tM.atxM*k9", width: 250, aspectRatio: 0.62, src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" })))
+    .add("Without automatic resizing + blurhash", () => (_jsx(Image, { blurhash: "LXK,+3H#yArKH~bGx:tM.atxM*k9", aspectRatio: 0.62, performResize: false, src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" })));

package/dist/elements/Image/index.d.ts

@@ -0,0 +1 @@
+export * from "./Image";

package/dist/elements/Image/index.js

@@ -0,0 +1 @@
+export * from "./Image";

package/dist/elements/Input/Input.d.ts

@@ -0,0 +1,78 @@
+/// <reference types="node" />
+/// <reference types="react" />
+import { EventEmitter } from "events";
+import { TextInput, TextInputProps } from "react-native";
+export declare const inputEvents: EventEmitter;
+export declare const emitInputClearEvent: () => void;
+export interface InputProps extends Omit<TextInputProps, "placeholder" | "onChangeText"> {
+    addClearListener?: boolean;
+    /**
+     * We are applying some optimisations to make sure the UX is smooth
+     * These lead to some issues when the parent component wants further control of the value
+     */
+    disabled?: boolean;
+    enableClearButton?: boolean;
+    error?: string;
+    fixedRightPlaceholder?: string;
+    hintText?: string;
+    icon?: JSX.Element;
+    leftComponentWidth?: number;
+    loading?: boolean;
+    onClear?(): void;
+    onHintPress?: () => void;
+    onSelectTap?: () => void;
+    optional?: boolean;
+    onChangeText?: (text: string, unmaskedText?: string) => void;
+    /**
+     * The placeholder can be an array of string, specifically for android, because of a bug.
+     * On ios, the longest string will always be picked, as ios can add ellipsis.
+     * On android, the longest string **that fits** will be picked, as android doesn't use ellipsis.
+     * The way to use it is to put the longest string first, and the shortest string last.
+     *
+     * Check `HACKS.md` for more info.
+     *
+     * @example
+     * const placeholders = [
+     *   "Wow this is a great and very long placeholder",
+     *   "Wow this is a great and long placeholder",
+     *   "Wow this is a great placeholder",
+     *   "Wow",
+     * ]
+     * ...
+     * <Input
+     *   placeholder={placeholders}
+     * />
+     */
+    placeholder?: string | string[];
+    required?: boolean;
+    selectComponentWidth?: number;
+    selectDisplayLabel?: string | undefined | null;
+    showLimit?: boolean;
+    title?: string;
+    unit?: string | undefined | null;
+    /**
+     * A mask to apply to the input value.
+     * Make sure to use mask values using only the digit 9 and non-digit characters.
+     *
+     * @example
+     * <Input mask="999-99-9999" />
+     * <Input mask="(999)-99-9999 999-99-9999" />
+     * <Input mask="999-99-9999 999-99-9999 999-99-9999" />
+     */
+    mask?: string | string[] | undefined;
+}
+export declare const HORIZONTAL_PADDING = 15;
+export declare const INPUT_BORDER_RADIUS = 4;
+export declare const INPUT_MIN_HEIGHT = 56;
+export declare const MULTILINE_INPUT_MIN_HEIGHT = 110;
+export declare const MULTILINE_INPUT_MAX_HEIGHT = 300;
+export declare const LABEL_HEIGHT = 25;
+export declare const LEFT_COMPONENT_WIDTH = 40;
+export declare const SELECT_COMPONENT_WIDTH = 120;
+export interface InputRef {
+    focus: () => void;
+    blur: () => void;
+    clear: () => void;
+}
+export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<InputRef>>;
+export type Input = TextInput;

package/dist/elements/Input/Input.js

@@ -0,0 +1,363 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { EventEmitter } from "events";
+import { THEME } from "@artsy/palette-tokens";
+import themeGet from "@styled-system/theme-get";
+import isArray from "lodash/isArray";
+import isString from "lodash/isString";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, } from "react";
+import { LayoutAnimation, Platform, TextInput, TouchableOpacity, } from "react-native";
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
+import styled from "styled-components";
+import { INPUT_VARIANTS, getInputState, getInputVariant } from "./helpers";
+import { maskValue, unmaskText } from "./maskValue";
+import { EyeClosedIcon, EyeOpenedIcon, TriangleDown, XCircleIcon } from "../../svgs";
+import { useTheme } from "../../utils/hooks";
+import { useMeasure } from "../../utils/hooks/useMeasure";
+import { Flex } from "../Flex";
+import { Spinner } from "../Spinner";
+import { Text } from "../Text";
+import { Touchable } from "../Touchable";
+export const inputEvents = new EventEmitter();
+export const emitInputClearEvent = () => {
+    inputEvents.emit("clear");
+};
+export const HORIZONTAL_PADDING = 15;
+export const INPUT_BORDER_RADIUS = 4;
+export const INPUT_MIN_HEIGHT = 56;
+export const MULTILINE_INPUT_MIN_HEIGHT = 110;
+export const MULTILINE_INPUT_MAX_HEIGHT = 300;
+export const LABEL_HEIGHT = 25;
+export const LEFT_COMPONENT_WIDTH = 40;
+export const SELECT_COMPONENT_WIDTH = 120;
+export const Input = forwardRef(({ addClearListener = false, defaultValue, disabled = false, enableClearButton = false, fixedRightPlaceholder, hintText = "What's this?", icon, leftComponentWidth = LEFT_COMPONENT_WIDTH, mask, selectComponentWidth = SELECT_COMPONENT_WIDTH, loading = false, onBlur, onChangeText, onClear, onFocus, onSelectTap, placeholder, secureTextEntry = false, style: styleProp = {}, unit, value: propValue, selectDisplayLabel, ...props }, ref) => {
+    const { color, theme, space } = useTheme();
+    const [focused, setIsFocused] = useState(false);
+    const [delayedFocused, setDelayedFocused] = useState(false);
+    const [value, setValue] = useState(maskValue({
+        currentValue: propValue ?? defaultValue,
+        mask: mask,
+    }));
+    const [showPassword, setShowPassword] = useState(!secureTextEntry);
+    const [inputWidth, setInputWidth] = useState(0);
+    const placeholderWidths = useRef([]);
+    const rightComponentRef = useRef(null);
+    const inputRef = useRef();
+    const variant = getInputVariant({
+        hasError: !!props.error,
+        disabled: disabled,
+    });
+    const hasLeftComponent = useMemo(() => !!unit || !!icon || !!onSelectTap, [unit, icon, onSelectTap]);
+    const animatedState = useSharedValue(getInputState({
+        isFocused: !!focused,
+        value: value,
+    }));
+    useImperativeHandle(ref, () => inputRef.current);
+    useEffect(() => {
+        // If the prop value changes, update the local state
+        // This optimisation is not needed if no propValue has been specified
+        if (propValue !== undefined && propValue !== value) {
+            setValue(maskValue({ currentValue: propValue || "", mask }));
+        }
+    }, [propValue, value, mask]);
+    useEffect(() => {
+        // If the mask value changes, update the value state to be formatted again
+        setValue(maskValue({ currentValue: value, mask }));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [mask]);
+    const fontFamily = theme.fonts.sans.regular;
+    useEffect(() => {
+        /* to make the font work for secure text inputs,
+        see https://github.com/facebook/react-native/issues/30123#issuecomment-711076098 */
+        inputRef.current?.setNativeProps({
+            style: { fontFamily },
+        });
+    }, [fontFamily]);
+    useEffect(() => {
+        // We don't need to delay hiding the placeholder
+        if (!focused && delayedFocused) {
+            setDelayedFocused(false);
+        }
+        let delayFocusedTimeout;
+        // We only want to show the placeholder after we're sure the title animation has finished
+        if (!delayedFocused && focused) {
+            delayFocusedTimeout = setTimeout(() => {
+                setDelayedFocused(focused);
+            }, 200);
+        }
+        return () => {
+            if (delayFocusedTimeout) {
+                clearTimeout(delayFocusedTimeout);
+            }
+        };
+    }, [focused, delayedFocused]);
+    const handleChangeText = useCallback((text) => {
+        if (mask) {
+            const newText = maskValue({ currentValue: text, mask: mask, previousValue: value }) || "";
+            setValue(newText);
+            onChangeText?.(newText, unmaskText(text));
+        }
+        else {
+            setValue(text);
+            onChangeText?.(text);
+        }
+    }, [onChangeText, value, mask]);
+    const handleClear = useCallback(() => {
+        LayoutAnimation.configureNext({ ...LayoutAnimation.Presets.easeInEaseOut, duration: 200 });
+        inputRef.current?.clear();
+        handleChangeText("");
+        onClear?.();
+    }, [onClear, handleChangeText]);
+    useEffect(() => {
+        if (!addClearListener) {
+            return;
+        }
+        inputEvents.addListener("clear", handleClear);
+        return () => {
+            inputEvents.removeListener("clear", handleClear);
+        };
+    }, [addClearListener, handleClear]);
+    const { width: rightComponentWidth = 0 } = useMeasure({ ref: rightComponentRef });
+    const textInputPaddingLeft = useMemo(() => {
+        if (!hasLeftComponent) {
+            return HORIZONTAL_PADDING;
+        }
+        if (onSelectTap) {
+            return selectComponentWidth + HORIZONTAL_PADDING;
+        }
+        return leftComponentWidth;
+    }, [hasLeftComponent, leftComponentWidth, onSelectTap, selectComponentWidth]);
+    const styles = useMemo(() => {
+        return {
+            fontFamily: fontFamily,
+            fontSize: parseInt(THEME.textVariants["sm-display"].fontSize, 10),
+            minHeight: props.multiline ? MULTILINE_INPUT_MIN_HEIGHT : INPUT_MIN_HEIGHT,
+            maxHeight: props.multiline ? MULTILINE_INPUT_MAX_HEIGHT : undefined,
+            height: props.multiline ? MULTILINE_INPUT_MIN_HEIGHT : undefined,
+            borderWidth: 1,
+            paddingRight: rightComponentWidth + HORIZONTAL_PADDING,
+            paddingLeft: textInputPaddingLeft,
+            ...styleProp,
+        };
+    }, [fontFamily, styleProp, props.multiline, rightComponentWidth, textInputPaddingLeft]);
+    const labelStyles = useMemo(() => {
+        return {
+            // this is neeeded too make sure the label is on top of the input
+            backgroundColor: "white",
+            marginRight: space(0.5),
+            zIndex: 100,
+            fontFamily: fontFamily,
+        };
+    }, [fontFamily, space]);
+    animatedState.value = getInputState({
+        isFocused: !!focused,
+        value: value,
+    });
+    const textInputAnimatedStyles = useAnimatedStyle(() => {
+        return {
+            borderColor: withTiming(INPUT_VARIANTS[variant][animatedState.value].inputBorderColor),
+            color: withTiming(INPUT_VARIANTS[variant][animatedState.value].inputTextColor),
+        };
+    });
+    const labelAnimatedStyles = useAnimatedStyle(() => {
+        const hasValue = !!value;
+        // Only add a margin if the input has a left component and it is not focused and has no value
+        const marginLeft = textInputPaddingLeft && !focused && !hasValue
+            ? textInputPaddingLeft - 3
+            : HORIZONTAL_PADDING;
+        return {
+            color: withTiming(INPUT_VARIANTS[variant][animatedState.value].labelColor),
+            top: withTiming(INPUT_VARIANTS[variant][animatedState.value].labelTop),
+            fontSize: withTiming(INPUT_VARIANTS[variant][animatedState.value].labelFontSize),
+            marginLeft: withTiming(marginLeft),
+        };
+    });
+    const selectComponentStyles = useAnimatedStyle(() => {
+        return {
+            borderColor: withTiming(INPUT_VARIANTS[variant][animatedState.value].inputBorderColor),
+        };
+    });
+    const handleFocus = (e) => {
+        setIsFocused(true);
+        onFocus?.(e);
+    };
+    const handleBlur = (e) => {
+        setIsFocused(false);
+        onBlur?.(e);
+    };
+    const hasTitle = !!props.title;
+    const renderLeftComponent = useCallback(() => {
+        const leftComponentSharedStyles = {
+            position: "absolute",
+            paddingHorizontal: HORIZONTAL_PADDING,
+            height: INPUT_MIN_HEIGHT,
+            top: hasTitle ? LABEL_HEIGHT : 0,
+            alignItems: "center",
+            zIndex: 100,
+        };
+        if (unit || icon) {
+            return (_jsxs(Flex, { style: {
+                    ...leftComponentSharedStyles,
+                    justifyContent: "center",
+                    width: leftComponentWidth,
+                }, children: [unit && (_jsx(Text, { color: disabled ? "black30" : "black60", variant: "sm-display", children: unit })), icon] }));
+        }
+        if (onSelectTap) {
+            return (_jsx(TouchableOpacity, { onPress: onSelectTap, style: [
+                    leftComponentSharedStyles,
+                    {
+                        width: selectComponentWidth,
+                    },
+                ], hitSlop: { top: 10, right: 10, bottom: 10, left: 10 }, children: _jsxs(AnimatedFlex, { style: [
+                        {
+                            paddingHorizontal: HORIZONTAL_PADDING,
+                            height: INPUT_MIN_HEIGHT,
+                            alignItems: "center",
+                            width: selectComponentWidth,
+                            flexDirection: "row",
+                            borderRightWidth: 1,
+                            justifyContent: "space-between",
+                        },
+                        selectComponentStyles,
+                    ], children: [_jsx(Text, { color: disabled ? "black30" : "black100", children: selectDisplayLabel }), _jsx(TriangleDown, { fill: "black60", width: 10 })] }) }));
+        }
+        return null;
+    }, [
+        hasTitle,
+        unit,
+        icon,
+        onSelectTap,
+        leftComponentWidth,
+        disabled,
+        selectComponentWidth,
+        selectComponentStyles,
+        selectDisplayLabel,
+    ]);
+    const renderRightComponent = useCallback(() => {
+        if (fixedRightPlaceholder) {
+            return (_jsx(Flex, { justifyContent: "center", position: "absolute", right: `${HORIZONTAL_PADDING}px`, top: hasTitle ? LABEL_HEIGHT : 0, height: INPUT_MIN_HEIGHT, ref: rightComponentRef, children: _jsx(Text, { color: disabled ? "black30" : "black60", children: fixedRightPlaceholder }) }));
+        }
+        if (loading) {
+            return (_jsx(Flex, { justifyContent: "center", position: "absolute", right: `${HORIZONTAL_PADDING}px`, top: hasTitle ? LABEL_HEIGHT : 0, height: INPUT_MIN_HEIGHT, ref: rightComponentRef, children: _jsx(Spinner, { size: "medium", style: {
+                        right: 0,
+                        width: 15,
+                        backgroundColor: color("black60"),
+                    } }) }));
+        }
+        if (enableClearButton && value) {
+            return (_jsx(Flex, { justifyContent: "center", position: "absolute", right: `${HORIZONTAL_PADDING}px`, top: hasTitle ? LABEL_HEIGHT : 0, height: INPUT_MIN_HEIGHT, zIndex: 100, ref: rightComponentRef, children: _jsx(Touchable, { haptic: "impactMedium", onPress: handleClear, hitSlop: { bottom: 40, right: 40, left: 0, top: 40 }, accessibilityLabel: "Clear input button", testID: "clear-input-button", children: _jsx(XCircleIcon, { fill: "black30" }) }) }));
+        }
+        if (secureTextEntry) {
+            return (_jsx(Flex, { justifyContent: "center", position: "absolute", right: `${HORIZONTAL_PADDING}px`, top: hasTitle ? LABEL_HEIGHT : 0, height: INPUT_MIN_HEIGHT, zIndex: 100, ref: rightComponentRef, children: _jsx(Touchable, { haptic: true, onPress: () => {
+                        LayoutAnimation.configureNext({
+                            ...LayoutAnimation.Presets.easeInEaseOut,
+                            duration: 200,
+                        });
+                        setShowPassword(!showPassword);
+                    }, accessibilityLabel: showPassword ? "hide password button" : "show password button", hitSlop: { bottom: 40, right: 40, left: 0, top: 40 }, children: !showPassword ? _jsx(EyeClosedIcon, { fill: "black30" }) : _jsx(EyeOpenedIcon, { fill: "black60" }) }) }));
+        }
+        return null;
+    }, [
+        fixedRightPlaceholder,
+        loading,
+        enableClearButton,
+        value,
+        secureTextEntry,
+        hasTitle,
+        disabled,
+        color,
+        handleClear,
+        showPassword,
+    ]);
+    const renderBottomComponent = useCallback(() => {
+        if (!!props.error) {
+            return (_jsx(Text, { color: "red100", variant: "xs", px: `${HORIZONTAL_PADDING}px`, mt: 0.5, children: props.error }));
+        }
+        return (_jsxs(Flex, { flexDirection: "row", justifyContent: "space-between", children: [!!props.required || !!props.optional ? (_jsxs(Text, { color: "black60", variant: "xs", pl: `${HORIZONTAL_PADDING}px`, mt: 0.5, children: [!!props.required && "* Required", !!props.optional && "* Optional"] })) : (
+                // Adding this empty flex to make sure that the maxLength text is always on the right
+                _jsx(Flex, {})), !!props.maxLength && !!props.showLimit && (_jsxs(Text, { color: "black60", variant: "xs", pr: `${HORIZONTAL_PADDING}px`, mt: 0.5, children: [(value || "").length, " / ", props.maxLength] }))] }));
+    }, [props.error, props.maxLength, props.optional, props.required, props.showLimit, value]);
+    const renderHint = useCallback(() => {
+        if (!props.onHintPress) {
+            return null;
+        }
+        return (_jsx(Flex, { style: {
+                alignItems: "flex-end",
+                top: space(2),
+            }, children: _jsx(Touchable, { onPress: props.onHintPress, haptic: "impactLight", hitSlop: {
+                    top: 5,
+                    right: 10,
+                    bottom: 5,
+                    left: 10,
+                }, children: _jsx(Text, { underline: true, variant: "xs", color: "black60", children: hintText }) }) }));
+    }, [hintText, props.onHintPress, space]);
+    const getPlatformSpecificPlaceholder = useCallback(() => {
+        if (!placeholder) {
+            return "";
+        }
+        if (Platform.OS === "ios") {
+            return isArray(placeholder) ? placeholder[0] : placeholder;
+        }
+        // if it's android and we only have one string, return that string
+        if (isString(placeholder)) {
+            return placeholder;
+        }
+        // otherwise, find a placeholder that has longest width that fits in the inputtext
+        const longestFittingStringIndex = placeholderWidths.current.findIndex((placeholderWidth) => {
+            return placeholderWidth <= inputWidth;
+        });
+        if (longestFittingStringIndex > -1) {
+            return placeholder[longestFittingStringIndex];
+        }
+        // otherwise just return the shortest placeholder
+        return placeholder[placeholder.length - 1];
+    }, [inputWidth, placeholder]);
+    const getPlaceholder = useCallback(() => {
+        // Show placeholder always if there is no title
+        // This is because we won't have a title animation
+        if (!props.title) {
+            return getPlatformSpecificPlaceholder();
+        }
+        // On blur, we want to show the placeholder immediately
+        if (delayedFocused) {
+            return getPlatformSpecificPlaceholder();
+        }
+        // On focus, we want to show the placeholder after the title animation has finished
+        return "";
+    }, [delayedFocused, getPlatformSpecificPlaceholder, props.title]);
+    const renderAnimatedTitle = useCallback(() => {
+        if (!props.title) {
+            return null;
+        }
+        return (_jsx(Flex, { flexDirection: "row", zIndex: 100, pointerEvents: "none", height: LABEL_HEIGHT, children: _jsxs(AnimatedText, { style: [labelStyles, labelAnimatedStyles], numberOfLines: 1, children: [" ", props.title, " "] }) }));
+    }, [labelStyles, labelAnimatedStyles, props.title]);
+    const renderAndroidPlaceholderMeasuringHack = useCallback(() => {
+        if (Platform.OS === "ios" || !isArray(placeholder)) {
+            return null;
+        }
+        // Do not render the hack if we have already measured the placeholder
+        if (placeholderWidths.current.length > 0) {
+            return null;
+        }
+        return (_jsx(Flex, { style: {
+                position: "absolute",
+                top: -10000,
+                width: 10000,
+                alignItems: "baseline", // this is to make Texts get the smallest width they can get to fit the text
+            }, children: placeholder.map((placeholderString, index) => (_jsx(Text, { onLayout: (event) => {
+                    placeholderWidths.current[index] = event.nativeEvent.layout.width;
+                }, numberOfLines: 1, style: {
+                    ...styles,
+                }, children: placeholderString }))) }));
+    }, [placeholder, styles]);
+    return (_jsxs(Flex, { flexGrow: 1, children: [renderAndroidPlaceholderMeasuringHack(), renderHint(), renderAnimatedTitle(), _jsx(AnimatedStyledInput, { value: value, onChangeText: handleChangeText, style: [styles, textInputAnimatedStyles], onFocus: handleFocus, onBlur: handleBlur, onLayout: (event) => {
+                    setInputWidth(event.nativeEvent.layout.width);
+                }, scrollEnabled: props.multiline, editable: !disabled, textAlignVertical: props.multiline ? "top" : "center", ref: inputRef, placeholderTextColor: color("black60"), placeholder: getPlaceholder(), secureTextEntry: !showPassword, ...props }), renderRightComponent(), renderLeftComponent(), renderBottomComponent()] }));
+});
+const StyledInput = styled(TextInput) `
+  padding: ${HORIZONTAL_PADDING}px;
+  font-family: ${themeGet("fonts.sans.regular")};
+  border-radius: ${INPUT_BORDER_RADIUS}px;
+`;
+const AnimatedStyledInput = Animated.createAnimatedComponent(StyledInput);
+const AnimatedText = Animated.createAnimatedComponent(Text);
+const AnimatedFlex = Animated.createAnimatedComponent(Flex);