@artsy/palette-mobile 23.14.0 → 24.0.0

package/dist/elements/Image/index.js

@@ -1 +1,17 @@
-export * from "./Image";
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Image"), exports);

package/dist/elements/Input/Input.js

@@ -1,151 +1,211 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { EventEmitter } from "events";
-import { CloseFillIcon, HideIcon, ShowIcon, TriangleDownIcon } from "@artsy/icons/native";
-import { THEME } from "@artsy/palette-tokens";
-import themeGet from "@styled-system/theme-get";
-import { isArray, isString } from "lodash";
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, 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 { getInputState, getInputVariant, getInputVariants, } from "./helpers";
-import { maskValue, unmaskText } from "./maskValue";
-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");
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
 };
-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,
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var events_1 = require("events");
+var native_1 = require("@artsy/icons/native");
+var palette_tokens_1 = require("@artsy/palette-tokens");
+var theme_get_1 = __importDefault(require("@styled-system/theme-get"));
+var lodash_1 = require("lodash");
+var react_1 = require("react");
+var react_native_1 = require("react-native");
+var react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var helpers_1 = require("./helpers");
+var maskValue_1 = require("./maskValue");
+var hooks_1 = require("../../utils/hooks");
+var useMeasure_1 = require("../../utils/hooks/useMeasure");
+var Flex_1 = require("../Flex");
+var Spinner_1 = require("../Spinner");
+var Text_1 = require("../Text");
+var Touchable_1 = require("../Touchable");
+exports.inputEvents = new events_1.EventEmitter();
+var emitInputClearEvent = function () {
+    exports.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)(function (_a, ref) {
+    var _b = _a.addClearListener, addClearListener = _b === void 0 ? false : _b, defaultValue = _a.defaultValue, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.enableClearButton, enableClearButton = _d === void 0 ? false : _d, fixedRightPlaceholder = _a.fixedRightPlaceholder, _e = _a.hintText, hintText = _e === void 0 ? "What's this?" : _e, icon = _a.icon, _f = _a.leftComponentWidth, leftComponentWidth = _f === void 0 ? exports.LEFT_COMPONENT_WIDTH : _f, mask = _a.mask, _g = _a.selectComponentWidth, selectComponentWidth = _g === void 0 ? exports.SELECT_COMPONENT_WIDTH : _g, _h = _a.loading, loading = _h === void 0 ? false : _h, onBlur = _a.onBlur, onChangeText = _a.onChangeText, onClear = _a.onClear, onFocus = _a.onFocus, onSelectTap = _a.onSelectTap, placeholder = _a.placeholder, _j = _a.secureTextEntry, secureTextEntry = _j === void 0 ? false : _j, _k = _a.style, styleProp = _k === void 0 ? {} : _k, unit = _a.unit, propValue = _a.value, selectDisplayLabel = _a.selectDisplayLabel, props = __rest(_a, ["addClearListener", "defaultValue", "disabled", "enableClearButton", "fixedRightPlaceholder", "hintText", "icon", "leftComponentWidth", "mask", "selectComponentWidth", "loading", "onBlur", "onChangeText", "onClear", "onFocus", "onSelectTap", "placeholder", "secureTextEntry", "style", "unit", "value", "selectDisplayLabel"]);
+    var _l = (0, hooks_1.useTheme)(), color = _l.color, theme = _l.theme, space = _l.space;
+    var _m = (0, react_1.useState)(false), focused = _m[0], setIsFocused = _m[1];
+    var _o = (0, react_1.useState)(false), delayedFocused = _o[0], setDelayedFocused = _o[1];
+    var _p = (0, react_1.useState)((0, maskValue_1.maskValue)({
+        currentValue: propValue !== null && propValue !== void 0 ? propValue : defaultValue,
         mask: mask,
-    }));
-    const [showPassword, setShowPassword] = useState(!secureTextEntry);
-    const [inputWidth, setInputWidth] = useState(0);
-    const placeholderWidths = useRef([]);
-    const rightComponentRef = useRef(null);
-    const inputRef = useRef(null);
-    const variant = getInputVariant({
+    })), value = _p[0], setValue = _p[1];
+    var _q = (0, react_1.useState)(!secureTextEntry), showPassword = _q[0], setShowPassword = _q[1];
+    var _r = (0, react_1.useState)(0), inputWidth = _r[0], setInputWidth = _r[1];
+    var placeholderWidths = (0, react_1.useRef)([]);
+    var rightComponentRef = (0, react_1.useRef)(null);
+    var inputRef = (0, react_1.useRef)(null);
+    var variant = (0, helpers_1.getInputVariant)({
         hasError: !!props.error,
         disabled: disabled,
     });
-    const hasLeftComponent = useMemo(() => !!unit || !!icon || !!onSelectTap, [unit, icon, onSelectTap]);
-    const animatedState = useSharedValue(getInputState({
+    var hasLeftComponent = (0, react_1.useMemo)(function () { return !!unit || !!icon || !!onSelectTap; }, [unit, icon, onSelectTap]);
+    var animatedState = (0, react_native_reanimated_1.useSharedValue)((0, helpers_1.getInputState)({
         isFocused: !!focused,
         value: value,
     }));
-    useImperativeHandle(ref, () => inputRef.current);
-    useEffect(() => {
+    (0, react_1.useImperativeHandle)(ref, function () { return inputRef.current; });
+    (0, react_1.useEffect)(function () {
         // 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 }));
+            setValue((0, maskValue_1.maskValue)({ currentValue: propValue || "", mask: mask }));
         }
     }, [propValue, value, mask]);
-    useEffect(() => {
+    (0, react_1.useEffect)(function () {
         // If the mask value changes, update the value state to be formatted again
-        setValue(maskValue({ currentValue: value, mask }));
+        setValue((0, maskValue_1.maskValue)({ currentValue: value, mask: mask }));
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [mask]);
-    const fontFamily = theme.fonts.sans.regular;
-    useEffect(() => {
+    var fontFamily = theme.fonts.sans.regular;
+    (0, react_1.useEffect)(function () {
+        var _a;
         /* 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 },
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setNativeProps({
+            style: { fontFamily: fontFamily },
         });
     }, [fontFamily]);
-    useEffect(() => {
+    (0, react_1.useEffect)(function () {
         // We don't need to delay hiding the placeholder
         if (!focused && delayedFocused) {
             setDelayedFocused(false);
         }
-        let delayFocusedTimeout;
+        var delayFocusedTimeout;
         // We only want to show the placeholder after we're sure the title animation has finished
         if (!delayedFocused && focused) {
-            delayFocusedTimeout = setTimeout(() => {
+            delayFocusedTimeout = setTimeout(function () {
                 setDelayedFocused(focused);
             }, 200);
         }
-        return () => {
+        return function () {
             if (delayFocusedTimeout) {
                 clearTimeout(delayFocusedTimeout);
             }
         };
     }, [focused, delayedFocused]);
-    const handleChangeText = useCallback((text) => {
+    var handleChangeText = (0, react_1.useCallback)(function (text) {
         if (mask) {
-            const newText = maskValue({ currentValue: text, mask: mask, previousValue: value }) || "";
+            var newText = (0, maskValue_1.maskValue)({ currentValue: text, mask: mask, previousValue: value }) || "";
             setValue(newText);
-            onChangeText?.(newText, unmaskText(text));
+            onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(newText, (0, maskValue_1.unmaskText)(text));
         }
         else {
             setValue(text);
-            onChangeText?.(text);
+            onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(text);
         }
     }, [onChangeText, value, mask]);
-    const handleClear = useCallback(() => {
-        LayoutAnimation.configureNext({ ...LayoutAnimation.Presets.easeInEaseOut, duration: 200 });
-        inputRef.current?.clear();
+    var handleClear = (0, react_1.useCallback)(function () {
+        var _a;
+        react_native_1.LayoutAnimation.configureNext(__assign(__assign({}, react_native_1.LayoutAnimation.Presets.easeInEaseOut), { duration: 200 }));
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.clear();
         handleChangeText("");
-        onClear?.();
+        onClear === null || onClear === void 0 ? void 0 : onClear();
     }, [onClear, handleChangeText]);
-    useEffect(() => {
+    (0, react_1.useEffect)(function () {
         if (!addClearListener) {
             return;
         }
-        inputEvents.addListener("clear", handleClear);
-        return () => {
-            inputEvents.removeListener("clear", handleClear);
+        exports.inputEvents.addListener("clear", handleClear);
+        return function () {
+            exports.inputEvents.removeListener("clear", handleClear);
         };
     }, [addClearListener, handleClear]);
-    const { width: rightComponentWidth = 0 } = useMeasure({ ref: rightComponentRef });
-    useLayoutEffect(() => {
-        inputRef.current?.measureInWindow((_x, _y, width) => {
+    var _s = (0, useMeasure_1.useMeasure)({ ref: rightComponentRef }).width, rightComponentWidth = _s === void 0 ? 0 : _s;
+    (0, react_1.useLayoutEffect)(function () {
+        var _a;
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.measureInWindow(function (_x, _y, width) {
             if (width > 0 && width !== inputWidth) {
                 setInputWidth(width);
             }
         });
     }, []);
-    const textInputPaddingLeft = useMemo(() => {
+    var textInputPaddingLeft = (0, react_1.useMemo)(function () {
         if (!hasLeftComponent) {
-            return HORIZONTAL_PADDING;
+            return exports.HORIZONTAL_PADDING;
         }
         if (onSelectTap) {
-            return selectComponentWidth + HORIZONTAL_PADDING;
+            return selectComponentWidth + exports.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,
-        };
+    var styles = (0, react_1.useMemo)(function () {
+        return __assign({ 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, borderWidth: 1, paddingRight: rightComponentWidth + exports.HORIZONTAL_PADDING, paddingLeft: textInputPaddingLeft }, styleProp);
     }, [fontFamily, styleProp, props.multiline, rightComponentWidth, textInputPaddingLeft]);
-    const labelStyles = useMemo(() => {
+    var labelStyles = (0, react_1.useMemo)(function () {
         return {
             // this is neeeded too make sure the label is on top of the input
             backgroundColor: color("background"),
@@ -154,73 +214,69 @@ export const Input = forwardRef(({ addClearListener = false, defaultValue, disab
             fontFamily: fontFamily,
         };
     }, [fontFamily, space, color]);
-    const inputVariants = useMemo(() => getInputVariants(theme), [theme]);
-    useEffect(() => {
-        const inputState = getInputState({
+    var inputVariants = (0, react_1.useMemo)(function () { return (0, helpers_1.getInputVariants)(theme); }, [theme]);
+    (0, react_1.useEffect)(function () {
+        var inputState = (0, helpers_1.getInputState)({
             isFocused: !!focused,
             value: value,
         });
-        animatedState.set(() => inputState);
+        animatedState.set(function () { return inputState; });
     }, [value, focused, animatedState]);
-    const textInputAnimatedStyles = useAnimatedStyle(() => {
+    var textInputAnimatedStyles = (0, react_native_reanimated_1.useAnimatedStyle)(function () {
         return {
-            borderColor: withTiming(inputVariants[variant][animatedState.get()].inputBorderColor),
-            color: withTiming(inputVariants[variant][animatedState.get()].inputTextColor),
+            borderColor: (0, react_native_reanimated_1.withTiming)(inputVariants[variant][animatedState.get()].inputBorderColor),
+            color: (0, react_native_reanimated_1.withTiming)(inputVariants[variant][animatedState.get()].inputTextColor),
         };
     });
-    const labelAnimatedStyles = useAnimatedStyle(() => {
-        const hasValue = !!value;
+    var labelAnimatedStyles = (0, react_native_reanimated_1.useAnimatedStyle)(function () {
+        var 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
+        var marginLeft = textInputPaddingLeft && !focused && !hasValue
             ? textInputPaddingLeft - 3
-            : HORIZONTAL_PADDING;
+            : exports.HORIZONTAL_PADDING;
         return {
-            color: withTiming(inputVariants[variant][animatedState.get()].labelColor),
-            top: withTiming(inputVariants[variant][animatedState.get()].labelTop),
-            fontSize: withTiming(inputVariants[variant][animatedState.get()].labelFontSize),
-            marginLeft: withTiming(marginLeft),
+            color: (0, react_native_reanimated_1.withTiming)(inputVariants[variant][animatedState.get()].labelColor),
+            top: (0, react_native_reanimated_1.withTiming)(inputVariants[variant][animatedState.get()].labelTop),
+            fontSize: (0, react_native_reanimated_1.withTiming)(inputVariants[variant][animatedState.get()].labelFontSize),
+            marginLeft: (0, react_native_reanimated_1.withTiming)(marginLeft),
         };
     });
-    const selectComponentStyles = useAnimatedStyle(() => {
+    var selectComponentStyles = (0, react_native_reanimated_1.useAnimatedStyle)(function () {
         return {
-            borderColor: withTiming(inputVariants[variant][animatedState.get()].inputBorderColor),
+            borderColor: (0, react_native_reanimated_1.withTiming)(inputVariants[variant][animatedState.get()].inputBorderColor),
         };
     });
-    const handleFocus = (e) => {
+    var handleFocus = function (e) {
         setIsFocused(true);
-        onFocus?.(e);
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
     };
-    const handleBlur = (e) => {
+    var handleBlur = function (e) {
         setIsFocused(false);
-        onBlur?.(e);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
     };
-    const hasTitle = !!props.title;
-    const renderLeftComponent = useCallback(() => {
-        const leftComponentSharedStyles = {
+    var hasTitle = !!props.title;
+    var renderLeftComponent = (0, react_1.useCallback)(function () {
+        var leftComponentSharedStyles = {
             position: "absolute",
-            paddingHorizontal: HORIZONTAL_PADDING,
-            height: INPUT_MIN_HEIGHT,
-            top: hasTitle ? LABEL_HEIGHT : 0,
+            paddingHorizontal: exports.HORIZONTAL_PADDING,
+            height: exports.INPUT_MIN_HEIGHT,
+            top: hasTitle ? exports.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 ? "mono30" : "mono60", variant: "sm-display", children: unit })), icon] }));
+            return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { style: __assign(__assign({}, leftComponentSharedStyles), { justifyContent: "center", width: leftComponentWidth }), children: [unit && ((0, jsx_runtime_1.jsx)(Text_1.Text, { color: disabled ? "mono30" : "mono60", variant: "sm-display", children: unit })), icon] }));
         }
         if (onSelectTap) {
-            return (_jsx(TouchableOpacity, { accessibilityRole: "button", onPress: onSelectTap, style: [
+            return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { accessibilityRole: "button", onPress: onSelectTap, style: [
                     leftComponentSharedStyles,
                     {
                         width: selectComponentWidth,
                     },
-                ], hitSlop: { top: 10, right: 10, bottom: 10, left: 10 }, children: _jsxs(AnimatedFlex, { style: [
+                ], hitSlop: { top: 10, right: 10, bottom: 10, left: 10 }, children: (0, jsx_runtime_1.jsxs)(AnimatedFlex, { style: [
                         {
-                            paddingHorizontal: HORIZONTAL_PADDING,
-                            height: INPUT_MIN_HEIGHT,
+                            paddingHorizontal: exports.HORIZONTAL_PADDING,
+                            height: exports.INPUT_MIN_HEIGHT,
                             alignItems: "center",
                             width: selectComponentWidth,
                             flexDirection: "row",
@@ -228,7 +284,7 @@ export const Input = forwardRef(({ addClearListener = false, defaultValue, disab
                             justifyContent: "space-between",
                         },
                         selectComponentStyles,
-                    ], children: [_jsx(Text, { color: disabled ? "mono30" : "mono100", children: selectDisplayLabel }), _jsx(TriangleDownIcon, { fill: "mono60", width: 10 })] }) }));
+                    ], children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { color: disabled ? "mono30" : "mono100", children: selectDisplayLabel }), (0, jsx_runtime_1.jsx)(native_1.TriangleDownIcon, { fill: "mono60", width: 10 })] }) }));
         }
         return null;
     }, [
@@ -242,28 +298,25 @@ export const Input = forwardRef(({ addClearListener = false, defaultValue, disab
         selectComponentStyles,
         selectDisplayLabel,
     ]);
-    const renderRightComponent = useCallback(() => {
+    var renderRightComponent = (0, react_1.useCallback)(function () {
         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 ? "mono30" : "mono60", children: fixedRightPlaceholder }) }));
+            return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { justifyContent: "center", position: "absolute", right: "".concat(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 ? "mono30" : "mono60", 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: {
+            return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { justifyContent: "center", position: "absolute", right: "".concat(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: {
                         right: 0,
                         width: 15,
                         backgroundColor: color("mono60"),
                     } }) }));
         }
         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 }, accessibilityRole: "button", accessibilityHint: "Clears the input", accessibilityLabel: "Clear", testID: "clear-input-button", children: _jsx(CloseFillIcon, { fill: "mono30" }) }) }));
+            return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { justifyContent: "center", position: "absolute", right: "".concat(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 }, accessibilityRole: "button", accessibilityHint: "Clears the input", accessibilityLabel: "Clear", testID: "clear-input-button", children: (0, jsx_runtime_1.jsx)(native_1.CloseFillIcon, { fill: "mono30" }) }) }));
         }
         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,
-                        });
+            return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { justifyContent: "center", position: "absolute", right: "".concat(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: function () {
+                        react_native_1.LayoutAnimation.configureNext(__assign(__assign({}, react_native_1.LayoutAnimation.Presets.easeInEaseOut), { duration: 200 }));
                         setShowPassword(!showPassword);
-                    }, accessibilityRole: "button", accessibilityLabel: showPassword ? "hide password icon" : "show password icon", accessibilityHint: showPassword ? "Hides the password" : "Shows the password", hitSlop: { bottom: 40, right: 40, left: 0, top: 40 }, children: !showPassword ? _jsx(HideIcon, { fill: "mono30" }) : _jsx(ShowIcon, { fill: "mono60" }) }) }));
+                    }, accessibilityRole: "button", accessibilityLabel: showPassword ? "hide password icon" : "show password icon", accessibilityHint: showPassword ? "Hides the password" : "Shows the password", hitSlop: { bottom: 40, right: 40, left: 0, top: 40 }, children: !showPassword ? (0, jsx_runtime_1.jsx)(native_1.HideIcon, { fill: "mono30" }) : (0, jsx_runtime_1.jsx)(native_1.ShowIcon, { fill: "mono60" }) }) }));
         }
         return null;
     }, [
@@ -278,41 +331,41 @@ export const Input = forwardRef(({ addClearListener = false, defaultValue, disab
         handleClear,
         showPassword,
     ]);
-    const renderBottomComponent = useCallback(() => {
+    var renderBottomComponent = (0, react_1.useCallback)(function () {
         if (!!props.error) {
-            return (_jsx(Text, { color: "red100", variant: "xs", px: `${HORIZONTAL_PADDING}px`, mt: 0.5, children: props.error }));
+            return ((0, jsx_runtime_1.jsx)(Text_1.Text, { color: "red100", variant: "xs", px: "".concat(exports.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: "mono60", variant: "xs", pl: `${HORIZONTAL_PADDING}px`, mt: 0.5, children: [!!props.required && "* Required", !!props.optional && "* Optional"] })) : (
+        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: "mono60", variant: "xs", pl: "".concat(exports.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: "mono60", variant: "xs", pr: `${HORIZONTAL_PADDING}px`, mt: 0.5, children: [(value || "").length, " / ", props.maxLength] }))] }));
+                (0, jsx_runtime_1.jsx)(Flex_1.Flex, {})), !!props.maxLength && !!props.showLimit && ((0, jsx_runtime_1.jsxs)(Text_1.Text, { color: "mono60", variant: "xs", pr: "".concat(exports.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(() => {
+    var renderHint = (0, react_1.useCallback)(function () {
         if (!props.onHintPress) {
             return null;
         }
-        return (_jsx(Flex, { style: {
+        return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { style: {
                 alignItems: "flex-end",
                 top: space(2),
-            }, children: _jsx(Touchable, { accessibilityRole: "button", accessibilityHint: "hint", onPress: props.onHintPress, haptic: "impactLight", hitSlop: {
+            }, children: (0, jsx_runtime_1.jsx)(Touchable_1.Touchable, { accessibilityRole: "button", accessibilityHint: "hint", onPress: props.onHintPress, haptic: "impactLight", hitSlop: {
                     top: 5,
                     right: 10,
                     bottom: 5,
                     left: 10,
-                }, children: _jsx(Text, { underline: true, variant: "xs", color: "mono60", children: hintText }) }) }));
+                }, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { underline: true, variant: "xs", color: "mono60", children: hintText }) }) }));
     }, [hintText, props.onHintPress, space]);
-    const getPlatformSpecificPlaceholder = useCallback(() => {
+    var getPlatformSpecificPlaceholder = (0, react_1.useCallback)(function () {
         if (!placeholder) {
             return "";
         }
-        if (Platform.OS === "ios") {
-            return isArray(placeholder) ? placeholder[0] : placeholder;
+        if (react_native_1.Platform.OS === "ios") {
+            return (0, lodash_1.isArray)(placeholder) ? placeholder[0] : placeholder;
         }
         // if it's android and we only have one string, return that string
-        if (isString(placeholder)) {
+        if ((0, lodash_1.isString)(placeholder)) {
             return placeholder;
         }
         // otherwise, find a placeholder that has longest width that fits in the inputtext
-        const longestFittingStringIndex = placeholderWidths.current.findIndex((placeholderWidth) => {
+        var longestFittingStringIndex = placeholderWidths.current.findIndex(function (placeholderWidth) {
             return placeholderWidth <= inputWidth;
         });
         if (longestFittingStringIndex > -1) {
@@ -321,7 +374,7 @@ export const Input = forwardRef(({ addClearListener = false, defaultValue, disab
         // otherwise just return the shortest placeholder
         return placeholder[placeholder.length - 1];
     }, [inputWidth, placeholder]);
-    const getPlaceholder = useCallback(() => {
+    var getPlaceholder = (0, react_1.useCallback)(function () {
         // Show placeholder always if there is no title
         // This is because we won't have a title animation
         if (!props.title) {
@@ -338,40 +391,35 @@ export const Input = forwardRef(({ addClearListener = false, defaultValue, disab
         // On focus, we want to show the placeholder after the title animation has finished
         return "";
     }, [delayedFocused, getPlatformSpecificPlaceholder, props.title, props.multiline]);
-    const renderAnimatedTitle = useCallback(() => {
+    var renderAnimatedTitle = (0, react_1.useCallback)(function () {
         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, accessibilityLabel: "input label", children: [" ", props.title, " "] }) }));
+        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, accessibilityLabel: "input label", children: [" ", props.title, " "] }) }));
     }, [labelStyles, labelAnimatedStyles, props.title]);
-    const renderAndroidPlaceholderMeasuringHack = useCallback(() => {
-        if (Platform.OS === "ios" || !isArray(placeholder)) {
+    var renderAndroidPlaceholderMeasuringHack = (0, react_1.useCallback)(function () {
+        if (react_native_1.Platform.OS === "ios" || !(0, lodash_1.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: {
+        return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { style: {
                 position: "absolute",
                 top: -10000, // make sure its off the screen
                 width: 10000, // make sure Texts can take as much space as they need
                 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) => {
+            }, children: placeholder.map(function (placeholderString, index) { return ((0, jsx_runtime_1.jsx)(Text_1.Text, { onLayout: function (event) {
                     placeholderWidths.current[index] = event.nativeEvent.layout.width;
-                }, numberOfLines: 1, style: {
-                    ...styles,
-                }, children: placeholderString }, `${placeholderString.replaceAll(" ", "-")}-${index}`))) }));
+                }, numberOfLines: 1, style: __assign({}, styles), children: placeholderString }, "".concat(placeholderString.replaceAll(" ", "-"), "-").concat(index))); }) }));
     }, [placeholder, styles]);
-    return (_jsxs(Flex, { flexGrow: 1, children: [renderAndroidPlaceholderMeasuringHack(), renderHint(), renderAnimatedTitle(), _jsx(AnimatedStyledInput
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexGrow: 1, children: [renderAndroidPlaceholderMeasuringHack(), renderHint(), renderAnimatedTitle(), (0, jsx_runtime_1.jsx)(AnimatedStyledInput
             // Only use a controlled input if specified
-            , { ...((propValue !== undefined && propValue !== null) || mask ? { value } : {}), onChangeText: handleChangeText, style: [styles, textInputAnimatedStyles], onFocus: handleFocus, onBlur: handleBlur, scrollEnabled: props.multiline, editable: !disabled, textAlignVertical: props.multiline ? "top" : "center", ref: inputRef, placeholderTextColor: delayedFocused ? color("mono60") : "transparent", placeholder: getPlaceholder(), defaultValue: defaultValue, secureTextEntry: !showPassword, ...props }), renderRightComponent(), renderLeftComponent(), renderBottomComponent()] }));
+            , __assign({}, ((propValue !== undefined && propValue !== null) || mask ? { value: value } : {}), { onChangeText: handleChangeText, style: [styles, textInputAnimatedStyles], onFocus: handleFocus, onBlur: handleBlur, scrollEnabled: props.multiline, editable: !disabled, textAlignVertical: props.multiline ? "top" : "center", ref: inputRef, placeholderTextColor: delayedFocused ? color("mono60") : "transparent", placeholder: getPlaceholder(), defaultValue: defaultValue, 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);
+var StyledInput = (0, styled_components_1.default)(react_native_1.TextInput)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: ", "px;\n  font-family: ", ";\n  border-radius: ", "px;\n"], ["\n  padding: ", "px;\n  font-family: ", ";\n  border-radius: ", "px;\n"])), exports.HORIZONTAL_PADDING, (0, theme_get_1.default)("fonts.sans.regular"), exports.INPUT_BORDER_RADIUS);
+var AnimatedStyledInput = react_native_reanimated_1.default.createAnimatedComponent(StyledInput);
+var AnimatedText = react_native_reanimated_1.default.createAnimatedComponent(Text_1.Text);
+var AnimatedFlex = react_native_reanimated_1.default.createAnimatedComponent(Flex_1.Flex);
+var templateObject_1;