@artsy/palette-mobile 13.2.33 → 13.2.35

package/dist/elements/Input/Input.js

@@ -1,108 +1,78 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Input = exports.SELECT_COMPONENT_WIDTH = exports.LEFT_COMPONENT_WIDTH = exports.LABEL_HEIGHT = exports.MULTILINE_INPUT_MAX_HEIGHT = exports.MULTILINE_INPUT_MIN_HEIGHT = exports.INPUT_MIN_HEIGHT = exports.INPUT_BORDER_RADIUS = exports.HORIZONTAL_PADDING = exports.emitInputClearEvent = exports.inputEvents = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const events_1 = require("events");
-const palette_tokens_1 = require("@artsy/palette-tokens");
-const theme_get_1 = __importDefault(require("@styled-system/theme-get"));
-const isArray_1 = __importDefault(require("lodash/isArray"));
-const isString_1 = __importDefault(require("lodash/isString"));
-const react_1 = require("react");
-const react_native_1 = require("react-native");
-const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const helpers_1 = require("./helpers");
-const maskValue_1 = require("./maskValue");
-const svgs_1 = require("../../svgs");
-const hooks_1 = require("../../utils/hooks");
-const useMeasure_1 = require("../../utils/hooks/useMeasure");
-const Flex_1 = require("../Flex");
-const Spinner_1 = require("../Spinner");
-const Text_1 = require("../Text");
-const Touchable_1 = require("../Touchable");
-exports.inputEvents = new events_1.EventEmitter();
-const emitInputClearEvent = () => {
-    exports.inputEvents.emit("clear");
+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");
 };
-exports.emitInputClearEvent = emitInputClearEvent;
-exports.HORIZONTAL_PADDING = 15;
-exports.INPUT_BORDER_RADIUS = 4;
-exports.INPUT_MIN_HEIGHT = 56;
-exports.MULTILINE_INPUT_MIN_HEIGHT = 110;
-exports.MULTILINE_INPUT_MAX_HEIGHT = 300;
-exports.LABEL_HEIGHT = 25;
-exports.LEFT_COMPONENT_WIDTH = 40;
-exports.SELECT_COMPONENT_WIDTH = 120;
-exports.Input = (0, react_1.forwardRef)(({ addClearListener = false, defaultValue, disabled = false, enableClearButton = false, fixedRightPlaceholder, hintText = "What's this?", icon, leftComponentWidth = exports.LEFT_COMPONENT_WIDTH, mask, selectComponentWidth = exports.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 } = (0, hooks_1.useTheme)();
-    const [focused, setIsFocused] = (0, react_1.useState)(false);
-    const [delayedFocused, setDelayedFocused] = (0, react_1.useState)(false);
-    const [value, setValue] = (0, react_1.useState)((0, maskValue_1.maskValue)({
+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] = (0, react_1.useState)(!secureTextEntry);
-    const [inputWidth, setInputWidth] = (0, react_1.useState)(0);
-    const placeholderWidths = (0, react_1.useRef)([]);
-    const rightComponentRef = (0, react_1.useRef)(null);
-    const inputRef = (0, react_1.useRef)();
-    const variant = (0, helpers_1.getInputVariant)({
+    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 = (0, react_1.useMemo)(() => !!unit || !!icon || !!onSelectTap, [unit, icon, onSelectTap]);
-    const animatedState = (0, react_native_reanimated_1.useSharedValue)((0, helpers_1.getInputState)({
+    const hasLeftComponent = useMemo(() => !!unit || !!icon || !!onSelectTap, [unit, icon, onSelectTap]);
+    const animatedState = useSharedValue(getInputState({
         isFocused: !!focused,
         value: value,
     }));
-    (0, react_1.useImperativeHandle)(ref, () => inputRef.current);
-    (0, react_1.useEffect)(() => {
+    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((0, maskValue_1.maskValue)({ currentValue: propValue || "", mask }));
+            setValue(maskValue({ currentValue: propValue || "", mask }));
         }
     }, [propValue, value, mask]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         // If the mask value changes, update the value state to be formatted again
-        setValue((0, maskValue_1.maskValue)({ currentValue: value, mask }));
+        setValue(maskValue({ currentValue: value, mask }));
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [mask]);
     const fontFamily = theme.fonts.sans.regular;
-    (0, react_1.useEffect)(() => {
+    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]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         // We don't need to delay hiding the placeholder
         if (!focused && delayedFocused) {
             setDelayedFocused(false);
@@ -120,56 +90,56 @@ exports.Input = (0, react_1.forwardRef)(({ addClearListener = false, defaultValu
             }
         };
     }, [focused, delayedFocused]);
-    const handleChangeText = (0, react_1.useCallback)((text) => {
+    const handleChangeText = useCallback((text) => {
         if (mask) {
-            const newText = (0, maskValue_1.maskValue)({ currentValue: text, mask: mask, previousValue: value }) || "";
+            const newText = maskValue({ currentValue: text, mask: mask, previousValue: value }) || "";
             setValue(newText);
-            onChangeText?.(newText, (0, maskValue_1.unmaskText)(text));
+            onChangeText?.(newText, unmaskText(text));
         }
         else {
             setValue(text);
             onChangeText?.(text);
         }
     }, [onChangeText, value, mask]);
-    const handleClear = (0, react_1.useCallback)(() => {
-        react_native_1.LayoutAnimation.configureNext({ ...react_native_1.LayoutAnimation.Presets.easeInEaseOut, duration: 200 });
+    const handleClear = useCallback(() => {
+        LayoutAnimation.configureNext({ ...LayoutAnimation.Presets.easeInEaseOut, duration: 200 });
         inputRef.current?.clear();
         handleChangeText("");
         onClear?.();
     }, [onClear, handleChangeText]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (!addClearListener) {
             return;
         }
-        exports.inputEvents.addListener("clear", handleClear);
+        inputEvents.addListener("clear", handleClear);
         return () => {
-            exports.inputEvents.removeListener("clear", handleClear);
+            inputEvents.removeListener("clear", handleClear);
         };
     }, [addClearListener, handleClear]);
-    const { width: rightComponentWidth = 0 } = (0, useMeasure_1.useMeasure)({ ref: rightComponentRef });
-    const textInputPaddingLeft = (0, react_1.useMemo)(() => {
+    const { width: rightComponentWidth = 0 } = useMeasure({ ref: rightComponentRef });
+    const textInputPaddingLeft = useMemo(() => {
         if (!hasLeftComponent) {
-            return exports.HORIZONTAL_PADDING;
+            return HORIZONTAL_PADDING;
         }
         if (onSelectTap) {
-            return selectComponentWidth + exports.HORIZONTAL_PADDING;
+            return selectComponentWidth + HORIZONTAL_PADDING;
         }
         return leftComponentWidth;
     }, [hasLeftComponent, leftComponentWidth, onSelectTap, selectComponentWidth]);
-    const styles = (0, react_1.useMemo)(() => {
+    const styles = useMemo(() => {
         return {
             fontFamily: fontFamily,
-            fontSize: parseInt(palette_tokens_1.THEME.textVariants["sm-display"].fontSize, 10),
-            minHeight: props.multiline ? exports.MULTILINE_INPUT_MIN_HEIGHT : exports.INPUT_MIN_HEIGHT,
-            maxHeight: props.multiline ? exports.MULTILINE_INPUT_MAX_HEIGHT : undefined,
-            height: props.multiline ? exports.MULTILINE_INPUT_MIN_HEIGHT : undefined,
+            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 + exports.HORIZONTAL_PADDING,
+            paddingRight: rightComponentWidth + HORIZONTAL_PADDING,
             paddingLeft: textInputPaddingLeft,
             ...styleProp,
         };
     }, [fontFamily, styleProp, props.multiline, rightComponentWidth, textInputPaddingLeft]);
-    const labelStyles = (0, react_1.useMemo)(() => {
+    const labelStyles = useMemo(() => {
         return {
             // this is neeeded too make sure the label is on top of the input
             backgroundColor: "white",
@@ -178,32 +148,32 @@ exports.Input = (0, react_1.forwardRef)(({ addClearListener = false, defaultValu
             fontFamily: fontFamily,
         };
     }, [fontFamily, space]);
-    animatedState.value = (0, helpers_1.getInputState)({
+    animatedState.value = getInputState({
         isFocused: !!focused,
         value: value,
     });
-    const textInputAnimatedStyles = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+    const textInputAnimatedStyles = useAnimatedStyle(() => {
         return {
-            borderColor: (0, react_native_reanimated_1.withTiming)(helpers_1.INPUT_VARIANTS[variant][animatedState.value].inputBorderColor),
-            color: (0, react_native_reanimated_1.withTiming)(helpers_1.INPUT_VARIANTS[variant][animatedState.value].inputTextColor),
+            borderColor: withTiming(INPUT_VARIANTS[variant][animatedState.value].inputBorderColor),
+            color: withTiming(INPUT_VARIANTS[variant][animatedState.value].inputTextColor),
         };
     });
-    const labelAnimatedStyles = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+    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
-            : exports.HORIZONTAL_PADDING;
+            : HORIZONTAL_PADDING;
         return {
-            color: (0, react_native_reanimated_1.withTiming)(helpers_1.INPUT_VARIANTS[variant][animatedState.value].labelColor),
-            top: (0, react_native_reanimated_1.withTiming)(helpers_1.INPUT_VARIANTS[variant][animatedState.value].labelTop),
-            fontSize: (0, react_native_reanimated_1.withTiming)(helpers_1.INPUT_VARIANTS[variant][animatedState.value].labelFontSize),
-            marginLeft: (0, react_native_reanimated_1.withTiming)(marginLeft),
+            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 = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+    const selectComponentStyles = useAnimatedStyle(() => {
         return {
-            borderColor: (0, react_native_reanimated_1.withTiming)(helpers_1.INPUT_VARIANTS[variant][animatedState.value].inputBorderColor),
+            borderColor: withTiming(INPUT_VARIANTS[variant][animatedState.value].inputBorderColor),
         };
     });
     const handleFocus = (e) => {
@@ -215,32 +185,32 @@ exports.Input = (0, react_1.forwardRef)(({ addClearListener = false, defaultValu
         onBlur?.(e);
     };
     const hasTitle = !!props.title;
-    const renderLeftComponent = (0, react_1.useCallback)(() => {
+    const renderLeftComponent = useCallback(() => {
         const leftComponentSharedStyles = {
             position: "absolute",
-            paddingHorizontal: exports.HORIZONTAL_PADDING,
-            height: exports.INPUT_MIN_HEIGHT,
-            top: hasTitle ? exports.LABEL_HEIGHT : 0,
+            paddingHorizontal: HORIZONTAL_PADDING,
+            height: INPUT_MIN_HEIGHT,
+            top: hasTitle ? LABEL_HEIGHT : 0,
             alignItems: "center",
             zIndex: 100,
         };
         if (unit || icon) {
-            return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { style: {
+            return (_jsxs(Flex, { style: {
                     ...leftComponentSharedStyles,
                     justifyContent: "center",
                     width: leftComponentWidth,
-                }, children: [unit && ((0, jsx_runtime_1.jsx)(Text_1.Text, { color: disabled ? "black30" : "black60", variant: "sm-display", children: unit })), icon] }));
+                }, children: [unit && (_jsx(Text, { color: disabled ? "black30" : "black60", variant: "sm-display", children: unit })), icon] }));
         }
         if (onSelectTap) {
-            return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: onSelectTap, style: [
+            return (_jsx(TouchableOpacity, { onPress: onSelectTap, style: [
                     leftComponentSharedStyles,
                     {
                         width: selectComponentWidth,
                     },
-                ], hitSlop: { top: 10, right: 10, bottom: 10, left: 10 }, children: (0, jsx_runtime_1.jsxs)(AnimatedFlex, { style: [
+                ], hitSlop: { top: 10, right: 10, bottom: 10, left: 10 }, children: _jsxs(AnimatedFlex, { style: [
                         {
-                            paddingHorizontal: exports.HORIZONTAL_PADDING,
-                            height: exports.INPUT_MIN_HEIGHT,
+                            paddingHorizontal: HORIZONTAL_PADDING,
+                            height: INPUT_MIN_HEIGHT,
                             alignItems: "center",
                             width: selectComponentWidth,
                             flexDirection: "row",
@@ -248,7 +218,7 @@ exports.Input = (0, react_1.forwardRef)(({ addClearListener = false, defaultValu
                             justifyContent: "space-between",
                         },
                         selectComponentStyles,
-                    ], children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { color: disabled ? "black30" : "black100", children: selectDisplayLabel }), (0, jsx_runtime_1.jsx)(svgs_1.TriangleDown, { fill: "black60", width: 10 })] }) }));
+                    ], children: [_jsx(Text, { color: disabled ? "black30" : "black100", children: selectDisplayLabel }), _jsx(TriangleDown, { fill: "black60", width: 10 })] }) }));
         }
         return null;
     }, [
@@ -262,28 +232,28 @@ exports.Input = (0, react_1.forwardRef)(({ addClearListener = false, defaultValu
         selectComponentStyles,
         selectDisplayLabel,
     ]);
-    const renderRightComponent = (0, react_1.useCallback)(() => {
+    const renderRightComponent = useCallback(() => {
         if (fixedRightPlaceholder) {
-            return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { justifyContent: "center", position: "absolute", right: `${exports.HORIZONTAL_PADDING}px`, top: hasTitle ? exports.LABEL_HEIGHT : 0, height: exports.INPUT_MIN_HEIGHT, ref: rightComponentRef, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { color: disabled ? "black30" : "black60", children: 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 ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { justifyContent: "center", position: "absolute", right: `${exports.HORIZONTAL_PADDING}px`, top: hasTitle ? exports.LABEL_HEIGHT : 0, height: exports.INPUT_MIN_HEIGHT, ref: rightComponentRef, children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { size: "medium", style: {
+            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 ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { justifyContent: "center", position: "absolute", right: `${exports.HORIZONTAL_PADDING}px`, top: hasTitle ? exports.LABEL_HEIGHT : 0, height: exports.INPUT_MIN_HEIGHT, zIndex: 100, ref: rightComponentRef, children: (0, jsx_runtime_1.jsx)(Touchable_1.Touchable, { haptic: "impactMedium", onPress: handleClear, hitSlop: { bottom: 40, right: 40, left: 0, top: 40 }, accessibilityLabel: "Clear input button", testID: "clear-input-button", children: (0, jsx_runtime_1.jsx)(svgs_1.XCircleIcon, { fill: "black30" }) }) }));
+            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 ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { justifyContent: "center", position: "absolute", right: `${exports.HORIZONTAL_PADDING}px`, top: hasTitle ? exports.LABEL_HEIGHT : 0, height: exports.INPUT_MIN_HEIGHT, zIndex: 100, ref: rightComponentRef, children: (0, jsx_runtime_1.jsx)(Touchable_1.Touchable, { haptic: true, onPress: () => {
-                        react_native_1.LayoutAnimation.configureNext({
-                            ...react_native_1.LayoutAnimation.Presets.easeInEaseOut,
+            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 ? (0, jsx_runtime_1.jsx)(svgs_1.EyeClosedIcon, { fill: "black30" }) : (0, jsx_runtime_1.jsx)(svgs_1.EyeOpenedIcon, { fill: "black60" }) }) }));
+                    }, 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;
     }, [
@@ -298,37 +268,37 @@ exports.Input = (0, react_1.forwardRef)(({ addClearListener = false, defaultValu
         handleClear,
         showPassword,
     ]);
-    const renderBottomComponent = (0, react_1.useCallback)(() => {
+    const renderBottomComponent = useCallback(() => {
         if (!!props.error) {
-            return ((0, jsx_runtime_1.jsx)(Text_1.Text, { color: "red100", variant: "xs", px: `${exports.HORIZONTAL_PADDING}px`, mt: 0.5, children: props.error }));
+            return (_jsx(Text, { color: "red100", variant: "xs", px: `${HORIZONTAL_PADDING}px`, mt: 0.5, children: props.error }));
         }
-        return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", justifyContent: "space-between", children: [!!props.required || !!props.optional ? ((0, jsx_runtime_1.jsxs)(Text_1.Text, { color: "black60", variant: "xs", pl: `${exports.HORIZONTAL_PADDING}px`, mt: 0.5, children: [!!props.required && "* Required", !!props.optional && "* Optional"] })) : (
+        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
-                (0, jsx_runtime_1.jsx)(Flex_1.Flex, {})), !!props.maxLength && !!props.showLimit && ((0, jsx_runtime_1.jsxs)(Text_1.Text, { color: "black60", variant: "xs", pr: `${exports.HORIZONTAL_PADDING}px`, mt: 0.5, children: [(value || "").length, " / ", props.maxLength] }))] }));
+                _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 = (0, react_1.useCallback)(() => {
+    const renderHint = useCallback(() => {
         if (!props.onHintPress) {
             return null;
         }
-        return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { style: {
+        return (_jsx(Flex, { style: {
                 alignItems: "flex-end",
                 top: space(2),
-            }, children: (0, jsx_runtime_1.jsx)(Touchable_1.Touchable, { onPress: props.onHintPress, haptic: "impactLight", hitSlop: {
+            }, children: _jsx(Touchable, { onPress: props.onHintPress, haptic: "impactLight", hitSlop: {
                     top: 5,
                     right: 10,
                     bottom: 5,
                     left: 10,
-                }, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { underline: true, variant: "xs", color: "black60", children: hintText }) }) }));
+                }, children: _jsx(Text, { underline: true, variant: "xs", color: "black60", children: hintText }) }) }));
     }, [hintText, props.onHintPress, space]);
-    const getPlatformSpecificPlaceholder = (0, react_1.useCallback)(() => {
+    const getPlatformSpecificPlaceholder = useCallback(() => {
         if (!placeholder) {
             return "";
         }
-        if (react_native_1.Platform.OS === "ios") {
-            return (0, isArray_1.default)(placeholder) ? placeholder[0] : placeholder;
+        if (Platform.OS === "ios") {
+            return isArray(placeholder) ? placeholder[0] : placeholder;
         }
         // if it's android and we only have one string, return that string
-        if ((0, isString_1.default)(placeholder)) {
+        if (isString(placeholder)) {
             return placeholder;
         }
         // otherwise, find a placeholder that has longest width that fits in the inputtext
@@ -341,7 +311,7 @@ exports.Input = (0, react_1.forwardRef)(({ addClearListener = false, defaultValu
         // otherwise just return the shortest placeholder
         return placeholder[placeholder.length - 1];
     }, [inputWidth, placeholder]);
-    const getPlaceholder = (0, react_1.useCallback)(() => {
+    const getPlaceholder = useCallback(() => {
         // Show placeholder always if there is no title
         // This is because we won't have a title animation
         if (!props.title) {
@@ -354,40 +324,40 @@ exports.Input = (0, react_1.forwardRef)(({ addClearListener = false, defaultValu
         // On focus, we want to show the placeholder after the title animation has finished
         return "";
     }, [delayedFocused, getPlatformSpecificPlaceholder, props.title]);
-    const renderAnimatedTitle = (0, react_1.useCallback)(() => {
+    const renderAnimatedTitle = useCallback(() => {
         if (!props.title) {
             return null;
         }
-        return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", zIndex: 100, pointerEvents: "none", height: exports.LABEL_HEIGHT, children: (0, jsx_runtime_1.jsxs)(AnimatedText, { style: [labelStyles, labelAnimatedStyles], numberOfLines: 1, children: [" ", props.title, " "] }) }));
+        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 = (0, react_1.useCallback)(() => {
-        if (react_native_1.Platform.OS === "ios" || !(0, isArray_1.default)(placeholder)) {
+    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 ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { style: {
+        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) => ((0, jsx_runtime_1.jsx)(Text_1.Text, { onLayout: (event) => {
+            }, 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 ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexGrow: 1, children: [renderAndroidPlaceholderMeasuringHack(), renderHint(), renderAnimatedTitle(), (0, jsx_runtime_1.jsx)(AnimatedStyledInput, { value: value, onChangeText: handleChangeText, style: [styles, textInputAnimatedStyles], onFocus: handleFocus, onBlur: handleBlur, onLayout: (event) => {
+    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 = (0, styled_components_1.default)(react_native_1.TextInput) `
-  padding: ${exports.HORIZONTAL_PADDING}px;
-  font-family: ${(0, theme_get_1.default)("fonts.sans.regular")};
-  border-radius: ${exports.INPUT_BORDER_RADIUS}px;
+const StyledInput = styled(TextInput) `
+  padding: ${HORIZONTAL_PADDING}px;
+  font-family: ${themeGet("fonts.sans.regular")};
+  border-radius: ${INPUT_BORDER_RADIUS}px;
 `;
-const AnimatedStyledInput = react_native_reanimated_1.default.createAnimatedComponent(StyledInput);
-const AnimatedText = react_native_reanimated_1.default.createAnimatedComponent(Text_1.Text);
-const AnimatedFlex = react_native_reanimated_1.default.createAnimatedComponent(Flex_1.Flex);
+const AnimatedStyledInput = Animated.createAnimatedComponent(StyledInput);
+const AnimatedText = Animated.createAnimatedComponent(Text);
+const AnimatedFlex = Animated.createAnimatedComponent(Flex);

package/dist/elements/Input/Input.stories.js

@@ -1,11 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_native_1 = require("@storybook/react-native");
-const Input_1 = require("./Input");
-const helpers_1 = require("../../storybook/helpers");
-const svgs_1 = require("../../svgs");
-const Join_1 = require("../Join");
-const Separator_1 = require("../Separator");
-const Text_1 = require("../Text");
-(0, react_native_1.storiesOf)("Input", module).add("Variants", () => ((0, jsx_runtime_1.jsx)(helpers_1.List, { contentContainerStyle: { marginHorizontal: 20, alignItems: "stretch" }, children: (0, jsx_runtime_1.jsxs)(Join_1.Join, { separator: (0, jsx_runtime_1.jsx)(Separator_1.Separator, { my: 2 }), children: [(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "Default" }), (0, jsx_runtime_1.jsx)(Input_1.Input, {})] }), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { title: "Title" })] }), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and required" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { title: "Title", required: true })] }), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and optional" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { title: "Title", optional: true })] }), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and clear button" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { title: "Title", enableClearButton: true })] }), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and loading" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { title: "Title", loading: true })] }), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and icon" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { title: "Title", icon: (0, jsx_runtime_1.jsx)(svgs_1.MagnifyingGlassIcon, {}) })] }), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and error" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { title: "Title", error: "this is an error" })] }), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and disabled" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { title: "Disabled", disabled: true })] }), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Input_1.Input, { placeholder: "I'm a placeholder" }) }), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title, clear button and value" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { value: "5", enableClearButton: true })] }), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With fixed right placeholder" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { fixedRightPlaceholder: "cm" })] }), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With placeholder" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { placeholder: "I'm a placeholder" })] }), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and placeholder" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { title: "full text", value: "Wow this is a long text, I wonder if I can read the whole thing!" })] }), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With text limit" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { title: "Text with limit", maxLength: 100, showLimit: true })] }), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "multine Without limit" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { title: "Text area", multiline: true })] }), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "multine With limit" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { title: "Text area with limit", multiline: true, maxLength: 150, showLimit: true })] })] }) })));
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { storiesOf } from "@storybook/react-native";
+import { Input } from "./Input";
+import { List } from "../../storybook/helpers";
+import { MagnifyingGlassIcon } from "../../svgs";
+import { Join } from "../Join";
+import { Separator } from "../Separator";
+import { Text } from "../Text";
+storiesOf("Input", module).add("Variants", () => (_jsx(List, { contentContainerStyle: { marginHorizontal: 20, alignItems: "stretch" }, children: _jsxs(Join, { separator: _jsx(Separator, { my: 2 }), children: [_jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "Default" }), _jsx(Input, {})] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title" }), _jsx(Input, { title: "Title" })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and required" }), _jsx(Input, { title: "Title", required: true })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and optional" }), _jsx(Input, { title: "Title", optional: true })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and clear button" }), _jsx(Input, { title: "Title", enableClearButton: true })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and loading" }), _jsx(Input, { title: "Title", loading: true })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and icon" }), _jsx(Input, { title: "Title", icon: _jsx(MagnifyingGlassIcon, {}) })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and error" }), _jsx(Input, { title: "Title", error: "this is an error" })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and disabled" }), _jsx(Input, { title: "Disabled", disabled: true })] }), _jsx(_Fragment, { children: _jsx(Input, { placeholder: "I'm a placeholder" }) }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title, clear button and value" }), _jsx(Input, { value: "5", enableClearButton: true })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With fixed right placeholder" }), _jsx(Input, { fixedRightPlaceholder: "cm" })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With placeholder" }), _jsx(Input, { placeholder: "I'm a placeholder" })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and placeholder" }), _jsx(Input, { title: "full text", value: "Wow this is a long text, I wonder if I can read the whole thing!" })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With text limit" }), _jsx(Input, { title: "Text with limit", maxLength: 100, showLimit: true })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "multine Without limit" }), _jsx(Input, { title: "Text area", multiline: true })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "multine With limit" }), _jsx(Input, { title: "Text area with limit", multiline: true, maxLength: 150, showLimit: true })] })] }) })));

package/dist/elements/Input/Input.tests.js

@@ -1,52 +1,50 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_native_1 = require("@testing-library/react-native");
-const Input_1 = require("./Input");
-const renderWithWrappers_1 = require("../../utils/tests/renderWithWrappers");
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fireEvent } from "@testing-library/react-native";
+import { Input } from "./Input";
+import { renderWithWrappers } from "../../utils/tests/renderWithWrappers";
 describe("Input", () => {
     const testID = "input";
     it("renders an instance of native TextInput", () => {
-        const { getByTestId } = (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Input_1.Input, { testID: testID }));
+        const { getByTestId } = renderWithWrappers(_jsx(Input, { testID: testID }));
         expect(getByTestId(testID).type).toEqual("TextInput");
     });
     it("uses correct font family", () => {
-        const { getByTestId } = (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Input_1.Input, { testID: testID }));
+        const { getByTestId } = renderWithWrappers(_jsx(Input, { testID: testID }));
         expect(getByTestId(testID).props.style[0].fontFamily).toEqual("Unica77LL-Regular");
     });
     it("mutates given text as value", () => {
-        const { getByTestId, getByDisplayValue } = (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Input_1.Input, { testID: testID }));
-        react_native_1.fireEvent.changeText(getByTestId(testID), "mockStr");
+        const { getByTestId, getByDisplayValue } = renderWithWrappers(_jsx(Input, { testID: testID }));
+        fireEvent.changeText(getByTestId(testID), "mockStr");
         getByDisplayValue("mockStr");
     });
     it("Shows an error message when input has an error", () => {
-        const { getByText } = (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Input_1.Input, { value: "", error: "input has an error" }));
+        const { getByText } = renderWithWrappers(_jsx(Input, { value: "", error: "input has an error" }));
         getByText("input has an error");
     });
     it("should render the clear button when input is not empty and pressing it should clear the input", () => {
-        const { getByDisplayValue, queryByDisplayValue, getByPlaceholderText, getByLabelText } = (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Input_1.Input, { placeholder: "USD", enableClearButton: true }));
+        const { getByDisplayValue, queryByDisplayValue, getByPlaceholderText, getByLabelText } = renderWithWrappers(_jsx(Input, { placeholder: "USD", enableClearButton: true }));
         // placeholder is rendered
         getByPlaceholderText("USD");
-        (0, react_native_1.fireEvent)(getByPlaceholderText("USD"), "onChangeText", "Banksy");
+        fireEvent(getByPlaceholderText("USD"), "onChangeText", "Banksy");
         getByDisplayValue("Banksy");
         getByLabelText("Clear input button");
-        react_native_1.fireEvent.press(getByLabelText("Clear input button"));
+        fireEvent.press(getByLabelText("Clear input button"));
         expect(queryByDisplayValue("Banksy")).toBeFalsy();
     });
     it("should show the correct show/hide password icon", () => {
-        const { getByPlaceholderText, queryByLabelText, getByLabelText } = (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Input_1.Input, { placeholder: "password", secureTextEntry: true }));
+        const { getByPlaceholderText, queryByLabelText, getByLabelText } = renderWithWrappers(_jsx(Input, { placeholder: "password", secureTextEntry: true }));
         getByPlaceholderText("password");
         getByLabelText("show password button");
-        (0, react_native_1.fireEvent)(getByPlaceholderText("password"), "onChangeText", "123456");
-        react_native_1.fireEvent.press(getByLabelText("show password button"));
+        fireEvent(getByPlaceholderText("password"), "onChangeText", "123456");
+        fireEvent.press(getByLabelText("show password button"));
         expect(queryByLabelText("show password button")).toBeFalsy();
         getByLabelText("hide password button");
-        react_native_1.fireEvent.press(getByLabelText("hide password button"));
+        fireEvent.press(getByLabelText("hide password button"));
         expect(queryByLabelText("hide password button")).toBeFalsy();
         getByLabelText("show password button");
     });
     it("enables scrolling when multiline is true", () => {
-        const { getByTestId } = (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Input_1.Input, { testID: testID, multiline: true }));
+        const { getByTestId } = renderWithWrappers(_jsx(Input, { testID: testID, multiline: true }));
         expect(getByTestId(testID).props.scrollEnabled).toBe(true);
     });
 });