sapo-components-ui-rn 1.0.2 → 1.0.3

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import { Platform, Dimensions, StyleSheet, useColorScheme, Animated, Easing, View as View$1, I18nManager, TouchableOpacity, NativeModules, Switch as Switch$1, Text as Text$2, Pressable, useWindowDimensions, TextInput as TextInput$1, ActivityIndicator as ActivityIndicator$1, Image as Image$2, ImageBackground } from 'react-native';
 import * as React$3 from 'react';
-import React__default, { useMemo, useRef, memo, forwardRef as forwardRef$1, useImperativeHandle, useState, useEffect, useCallback } from 'react';
+import React__default, { useMemo, memo, forwardRef as forwardRef$1, useRef, useImperativeHandle, useState, useEffect, useCallback } from 'react';
 import require$$1 from 'deepmerge';
 import color from 'color';
 import FontAwesome from 'react-native-vector-icons/FontAwesome';
@@ -3019,348 +3019,6 @@ var styles$b = StyleSheet.create({
     },
 });
 
-var TextInputDefault = function (_a) {
-    var _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.editable, editable = _c === void 0 ? true : _c; _a.label; var _d = _a.error, error = _d === void 0 ? false : _d, customSelectionColor = _a.selectionColor, cursorColor = _a.cursorColor, customOutlineColor = _a.outlineColor, activeOutlineColor = _a.activeOutlineColor; _a.outlineStyle; var textColor = _a.textColor; _a.dense; var style = _a.style, theme = _a.theme, _e = _a.render, render = _e === void 0 ? function (props) { return React$3.createElement(TextInput$1, __assign({}, props)); } : _e, _f = _a.multiline, multiline = _f === void 0 ? false : _f, parentState = _a.parentState, innerRef = _a.innerRef, onFocus = _a.onFocus; _a.forceFocus; var onBlur = _a.onBlur, onChangeText = _a.onChangeText; _a.onLayout; var left = _a.left, right = _a.right, placeholderTextColor = _a.placeholderTextColor, _g = _a.clearButton, clearButton = _g === void 0 ? false : _g, contentStyle = _a.contentStyle, value = _a.value, rest = __rest(_a, ["disabled", "editable", "label", "error", "selectionColor", "cursorColor", "outlineColor", "activeOutlineColor", "outlineStyle", "textColor", "dense", "style", "theme", "render", "multiline", "parentState", "innerRef", "onFocus", "forceFocus", "onBlur", "onChangeText", "onLayout", "left", "right", "placeholderTextColor", "clearButton", "contentStyle", "value"]);
-    var colors = theme.colors;
-    var font = theme.fonts.bodyLarge;
-    var _h = (StyleSheet.flatten(style) || {}), fontSizeStyle = _h.fontSize, fontWeight = _h.fontWeight, lineHeightStyle = _h.lineHeight, height = _h.height, _j = _h.backgroundColor; _j === void 0 ? colors === null || colors === void 0 ? void 0 : colors.backgroundPrimary : _j; var textAlign = _h.textAlign, viewStyle = __rest(_h, ["fontSize", "fontWeight", "lineHeight", "height", "backgroundColor", "textAlign"]);
-    var fontSize = fontSizeStyle || MAXIMIZED_LABEL_FONT_SIZE;
-    var lineHeight = lineHeightStyle || (Platform.OS === "web" ? fontSize * 1.2 : undefined);
-    var _k = getOutlinedInputColors({
-        activeOutlineColor: activeOutlineColor,
-        customOutlineColor: customOutlineColor,
-        customSelectionColor: customSelectionColor,
-        textColor: textColor,
-        disabled: disabled,
-        error: error,
-        theme: theme,
-    }), inputTextColor = _k.inputTextColor, activeColor = _k.activeColor, selectionColor = _k.selectionColor;
-    var _l = React$3.useState(value || ""), inputValue = _l[0], setInputValue = _l[1];
-    React$3.useEffect(function () {
-        setInputValue(value || "");
-    }, [value]);
-    var handleChangeText = function (text) {
-        setInputValue(text);
-        onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(text);
-    };
-    var handleClear = function () {
-        setInputValue("");
-        onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText("");
-    };
-    if (height && typeof height !== "number") {
-        console.warn("Currently we support only numbers in height prop");
-    }
-    var placeholderTextColorBasedOnState = placeholderTextColor || colors.textSecondary;
-    var getBorderColor = function () {
-        if (disabled) {
-            return theme.colors.surfacePrimaryDisabled;
-        }
-        else if (parentState.focused) {
-            return activeColor;
-        }
-        else {
-            return theme.colors.borderPrimaryDefault;
-        }
-    };
-    return (React$3.createElement(View, { style: viewStyle },
-        React$3.createElement(View, { row: true, alignCenter: true, style: [
-                {
-                    borderRadius: CONSTANTS.BORDER_RADIUS_6,
-                    borderWidth: 1,
-                    borderColor: getBorderColor(),
-                    overflow: "hidden",
-                    backgroundColor: disabled
-                        ? theme.colors.surfacePrimaryDisabled
-                        : theme.colors.surfacePrimaryDefault,
-                },
-            ] },
-            React$3.createElement(View, { paddingLeft: CONSTANTS.SPACE_12 }, left),
-            left && React$3.createElement(Spacer, { width: CONSTANTS.SPACE_8 }), render === null || render === void 0 ? void 0 :
-            render(__assign(__assign({}, rest), { ref: innerRef, onChangeText: handleChangeText, value: inputValue, placeholder: rest.placeholder, editable: !disabled && editable, selectionColor: selectionColor, cursorColor: typeof cursorColor === "undefined" ? activeColor : cursorColor, placeholderTextColor: placeholderTextColorBasedOnState, onFocus: onFocus, onBlur: onBlur, underlineColorAndroid: "transparent", multiline: multiline, style: [
-                    styles$a.input,
-                    __assign(__assign({}, font), { fontSize: fontSize, lineHeight: lineHeight, fontWeight: fontWeight, color: inputTextColor, textAlignVertical: multiline ? "top" : "center", textAlign: textAlign
-                            ? textAlign
-                            : I18nManager.getConstants().isRTL
-                                ? "right"
-                                : "left", height: height ? height : 48 }),
-                    contentStyle,
-                ] })),
-            !disabled && clearButton && inputValue ? (React$3.createElement(TouchableOpacity, { onPress: handleClear, style: styles$a.clearButton },
-                React$3.createElement(Icon$1, { name: "IconClearText", type: "Svg", size: 24 }))) : (React$3.createElement(Spacer, { width: CONSTANTS.SPACE_12 })),
-            right && React$3.createElement(Spacer, { width: CONSTANTS.SPACE_8 }),
-            right && React$3.createElement(View, { paddingRight: CONSTANTS.SPACE_12 }, right))));
-};
-var styles$a = StyleSheet.create({
-    input: {
-        margin: 0,
-        flex: 1,
-        height: 48,
-    },
-    clearButton: {
-        padding: CONSTANTS.SPACE_8,
-    },
-});
-
-var roundLayoutSize = function (size) {
-    return Math.round(size * 1000) / 1000;
-};
-
-var BLUR_ANIMATION_DURATION = 180;
-var FOCUS_ANIMATION_DURATION = 150;
-var DefaultRenderer = function (props) { return React__default.createElement(TextInput$1, __assign({}, props)); };
-/**
- * A component to allow users to input text.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { TextInput } from 'react-native-paper';
- *
- * const MyComponent = () => {
- *   const [text, setText] = React.useState("");
- *
- *   return (
- *     <TextInput
- *       label="Email"
- *       value={text}
- *       onChangeText={text => setText(text)}
- *     />
- *   );
- * };
- *
- * export default MyComponent;
- * ```
- *
- * @extends TextInput props https://reactnative.dev/docs/textinput#props
- */
-var TextInput = forwardRef(function (_a, ref) {
-    var _b = _a.mode, mode = _b === void 0 ? "default" : _b, _c = _a.dense, dense = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.error, errorProp = _e === void 0 ? false : _e, _f = _a.multiline, multiline = _f === void 0 ? false : _f, _g = _a.editable, editable = _g === void 0 ? true : _g, contentStyle = _a.contentStyle, _h = _a.render, render = _h === void 0 ? DefaultRenderer : _h; _a.theme; var placeholderTextColor = _a.placeholderTextColor, clearButton = _a.clearButton, rest = __rest(_a, ["mode", "dense", "disabled", "error", "multiline", "editable", "contentStyle", "render", "theme", "placeholderTextColor", "clearButton"]);
-    var theme = useInternalTheme();
-    var isControlled = rest.value !== undefined;
-    var validInputValue = isControlled ? rest.value : rest.defaultValue;
-    var labeled = React__default.useRef(new Animated.Value(validInputValue ? 0 : 1)).current;
-    var error = React__default.useRef(new Animated.Value(errorProp ? 1 : 0)).current;
-    var _j = React__default.useState(false), focused = _j[0], setFocused = _j[1];
-    var _k = React__default.useState(false), displayPlaceholder = _k[0], setDisplayPlaceholder = _k[1];
-    var _l = React__default.useState(validInputValue), uncontrolledValue = _l[0], setUncontrolledValue = _l[1];
-    // Use value from props instead of local state when input is controlled
-    var value = isControlled ? rest.value : uncontrolledValue;
-    var _m = React__default.useState({
-        width: 33,
-    }), labelTextLayout = _m[0], setLabelTextLayout = _m[1];
-    var _o = React__default.useState({
-        width: 65,
-    }), inputContainerLayout = _o[0], setInputContainerLayout = _o[1];
-    var _p = React__default.useState({
-        measured: false,
-        width: 0,
-        height: 0,
-    }), labelLayout = _p[0], setLabelLayout = _p[1];
-    var _q = React__default.useState({
-        width: null,
-        height: null,
-    }), leftLayout = _q[0], setLeftLayout = _q[1];
-    var _r = React__default.useState({
-        width: null,
-        height: null,
-    }), rightLayout = _r[0], setRightLayout = _r[1];
-    var timer = useRef(undefined);
-    var root = useRef(null);
-    var scale = theme.animation.scale;
-    React__default.useImperativeHandle(ref, function () { return ({
-        focus: function () { var _a; return (_a = root.current) === null || _a === void 0 ? void 0 : _a.focus(); },
-        clear: function () { var _a; return (_a = root.current) === null || _a === void 0 ? void 0 : _a.clear(); },
-        setNativeProps: function (args) { var _a; return (_a = root.current) === null || _a === void 0 ? void 0 : _a.setNativeProps(args); },
-        isFocused: function () { var _a; return ((_a = root.current) === null || _a === void 0 ? void 0 : _a.isFocused()) || false; },
-        blur: function () { var _a; return (_a = root.current) === null || _a === void 0 ? void 0 : _a.blur(); },
-        forceFocus: function () { var _a; return (_a = root.current) === null || _a === void 0 ? void 0 : _a.focus(); },
-    }); });
-    React__default.useEffect(function () {
-        // When the input has an error, we wiggle the label and apply error styles
-        if (errorProp) {
-            // show error
-            Animated.timing(error, {
-                toValue: 1,
-                duration: FOCUS_ANIMATION_DURATION * scale,
-                // To prevent this - https://github.com/callstack/react-native-paper/issues/941
-                useNativeDriver: true,
-            }).start();
-        }
-        else {
-            // hide error
-            {
-                Animated.timing(error, {
-                    toValue: 0,
-                    duration: BLUR_ANIMATION_DURATION * scale,
-                    // To prevent this - https://github.com/callstack/react-native-paper/issues/941
-                    useNativeDriver: true,
-                }).start();
-            }
-        }
-    }, [errorProp, scale, error]);
-    React__default.useEffect(function () {
-        // Show placeholder text only if the input is focused, or there's no label
-        // We don't show placeholder if there's a label because the label acts as placeholder
-        // When focused, the label moves up, so we can show a placeholder
-        if (focused || !rest.label) {
-            // If the user wants to use the contextMenu, when changing the placeholder, the contextMenu is closed
-            // This is a workaround to mitigate this behavior in scenarios where the placeholder is not specified.
-            if (rest.placeholder) {
-                // Display placeholder in a delay to offset the label animation
-                // If we show it immediately, they'll overlap and look ugly
-                timer.current = setTimeout(function () { return setDisplayPlaceholder(true); }, 50);
-            }
-        }
-        else {
-            // hidePlaceholder
-            setDisplayPlaceholder(false);
-        }
-        return function () {
-            if (timer.current) {
-                clearTimeout(timer.current);
-            }
-        };
-    }, [focused, rest.label, rest.placeholder]);
-    React__default.useEffect(function () {
-        labeled.stopAnimation();
-        // The label should be minimized if the text input is focused, or has text
-        // In minimized mode, the label moves up and becomes small
-        // workaround for animated regression for react native > 0.61
-        // https://github.com/callstack/react-native-paper/pull/1440
-        if (value || focused) {
-            // minimize label
-            Animated.timing(labeled, {
-                toValue: 0,
-                duration: BLUR_ANIMATION_DURATION * scale,
-                // To prevent this - https://github.com/callstack/react-native-paper/issues/941
-                useNativeDriver: true,
-            }).start();
-        }
-        else {
-            // restore label
-            Animated.timing(labeled, {
-                toValue: 1,
-                duration: FOCUS_ANIMATION_DURATION * scale,
-                // To prevent this - https://github.com/callstack/react-native-paper/issues/941
-                useNativeDriver: true,
-            }).start();
-        }
-    }, [focused, value, labeled, scale]);
-    var onLeftAffixLayoutChange = React__default.useCallback(function (event) {
-        var height = roundLayoutSize(event.nativeEvent.layout.height);
-        var width = roundLayoutSize(event.nativeEvent.layout.width);
-        if (width !== leftLayout.width || height !== leftLayout.height) {
-            setLeftLayout({
-                width: width,
-                height: height,
-            });
-        }
-    }, [leftLayout.height, leftLayout.width]);
-    var onRightAffixLayoutChange = React__default.useCallback(function (event) {
-        var width = roundLayoutSize(event.nativeEvent.layout.width);
-        var height = roundLayoutSize(event.nativeEvent.layout.height);
-        if (width !== rightLayout.width || height !== rightLayout.height) {
-            setRightLayout({
-                width: width,
-                height: height,
-            });
-        }
-    }, [rightLayout.height, rightLayout.width]);
-    var handleFocus = function (args) {
-        var _a;
-        if (disabled || !editable) {
-            return;
-        }
-        setFocused(true);
-        (_a = rest.onFocus) === null || _a === void 0 ? void 0 : _a.call(rest, args);
-    };
-    var handleBlur = function (args) {
-        var _a;
-        if (!editable) {
-            return;
-        }
-        setFocused(false);
-        (_a = rest.onBlur) === null || _a === void 0 ? void 0 : _a.call(rest, args);
-    };
-    var handleChangeText = function (value) {
-        var _a;
-        if (!editable || disabled) {
-            return;
-        }
-        if (!isControlled) {
-            // Keep track of value in local state when input is not controlled
-            setUncontrolledValue(value);
-        }
-        (_a = rest.onChangeText) === null || _a === void 0 ? void 0 : _a.call(rest, value);
-    };
-    var handleLayoutAnimatedText = React__default.useCallback(function (e) {
-        var width = roundLayoutSize(e.nativeEvent.layout.width);
-        var height = roundLayoutSize(e.nativeEvent.layout.height);
-        if (width !== labelLayout.width || height !== labelLayout.height) {
-            setLabelLayout({
-                width: width,
-                height: height,
-                measured: true,
-            });
-        }
-    }, [labelLayout.height, labelLayout.width]);
-    var handleLabelTextLayout = React__default.useCallback(function (_a) {
-        var nativeEvent = _a.nativeEvent;
-        setLabelTextLayout({
-            width: nativeEvent.lines.reduce(function (acc, line) { return acc + Math.ceil(line.width); }, 0),
-        });
-    }, []);
-    var handleInputContainerLayout = React__default.useCallback(function (_a) {
-        var layout = _a.nativeEvent.layout;
-        setInputContainerLayout({
-            width: layout.width,
-        });
-    }, []);
-    var forceFocus = React__default.useCallback(function () { var _a; return (_a = root.current) === null || _a === void 0 ? void 0 : _a.focus(); }, []);
-    var _s = rest.maxFontSizeMultiplier, maxFontSizeMultiplier = _s === void 0 ? 1.5 : _s;
-    var scaledLabel = !!(value || focused);
-    if (mode === "default") {
-        return (React__default.createElement(TextInputDefault, __assign({ dense: dense, disabled: disabled, error: errorProp, multiline: multiline, editable: editable, render: render }, rest, { theme: theme, value: value, placeholderTextColor: placeholderTextColor, clearButton: clearButton, parentState: {
-                labeled: labeled,
-                error: error,
-                focused: focused,
-                displayPlaceholder: displayPlaceholder,
-                value: value,
-                labelTextLayout: labelTextLayout,
-                labelLayout: labelLayout,
-                leftLayout: leftLayout,
-                rightLayout: rightLayout,
-                inputContainerLayout: inputContainerLayout,
-            }, innerRef: function (ref) {
-                root.current = ref;
-            }, onFocus: handleFocus, forceFocus: forceFocus, onBlur: handleBlur, allowFontScaling: false, onChangeText: handleChangeText, onLayoutAnimatedText: handleLayoutAnimatedText, onInputLayout: handleInputContainerLayout, onLabelTextLayout: handleLabelTextLayout, onLeftAffixLayoutChange: onLeftAffixLayoutChange, onRightAffixLayoutChange: onRightAffixLayoutChange, maxFontSizeMultiplier: maxFontSizeMultiplier, contentStyle: contentStyle, scaledLabel: scaledLabel })));
-    }
-    return (React__default.createElement(TextInputFlat, __assign({ dense: dense, disabled: disabled, error: errorProp, multiline: false, editable: editable, clearButton: clearButton, render: render }, rest, { theme: theme, value: value, parentState: {
-            labeled: labeled,
-            error: error,
-            focused: focused,
-            displayPlaceholder: displayPlaceholder,
-            value: value,
-            labelTextLayout: labelTextLayout,
-            labelLayout: labelLayout,
-            leftLayout: leftLayout,
-            rightLayout: rightLayout,
-            inputContainerLayout: inputContainerLayout,
-        }, innerRef: function (ref) {
-            root.current = ref;
-        }, onFocus: handleFocus, forceFocus: forceFocus, onBlur: handleBlur, onInputLayout: handleInputContainerLayout, allowFontScaling: false, onChangeText: handleChangeText, onLayoutAnimatedText: handleLayoutAnimatedText, onLabelTextLayout: handleLabelTextLayout, onLeftAffixLayoutChange: onLeftAffixLayoutChange, onRightAffixLayoutChange: onRightAffixLayoutChange, maxFontSizeMultiplier: maxFontSizeMultiplier, contentStyle: contentStyle, scaledLabel: scaledLabel })));
-});
-// @component ./Adornment/TextInputIcon.tsx
-// @component ./Adornment/TextInputAffix.tsx
-// @ts-ignore Types of property 'theme' are incompatible.
-TextInput.Affix = TextInputAffix;
-
-var ScaleButton = function (_a) {
-    var children = _a.children; _a.style; var _b = _a.onPress, onPress = _b === void 0 ? function () { } : _b, rest = __rest(_a, ["children", "style", "onPress"]);
-    return (React__default.createElement(TouchableOpacity, __assign({}, rest, { onPress: onPress }), children));
-};
-var ScaleButton$1 = React__default.memo(ScaleButton);
-
 /**
  * Removes all key-value entries from the list cache.
  *
@@ -5827,43 +5485,406 @@ var memoWithRef = function (component) {
 var Text = function (props) {
     var children = props.children, onPress = props.onPress; props.theme; var rest = __rest(props, ["children", "onPress", "theme"]);
     var theme = useInternalTheme();
-    delete rest.style;
-    var _getStyle = function () {
-        var style = {
-            fontWeight: "normal",
-            color: colors.ink.INK100,
-            fontFamily: "Inter-Regular",
-        };
-        var _a = props.size, size = _a === void 0 ? 14 : _a, center = props.center, color = props.color, bold = props.bold, medium = props.medium;
-        style.color = theme.colors.textDefault || "black";
-        if (size) {
-            style.fontSize = size;
-        }
-        if (color) {
-            style.color = color;
+    delete rest.style;
+    var _getStyle = function () {
+        var style = {
+            fontWeight: "normal",
+            color: colors.ink.INK100,
+            fontFamily: "Inter-Regular",
+        };
+        var _a = props.size, size = _a === void 0 ? 14 : _a, center = props.center, color = props.color, bold = props.bold, medium = props.medium;
+        style.color = theme.colors.textDefault || "black";
+        if (size) {
+            style.fontSize = size;
+        }
+        if (color) {
+            style.color = color;
+        }
+        if (center) {
+            style.textAlign = "center";
+        }
+        if (bold) {
+            style.fontFamily = "Inter-Bold";
+            if (Platform.OS === "ios") {
+                style.fontWeight = "bold";
+            }
+        }
+        if (medium) {
+            style.fontFamily = "Inter-SemiBold";
+            if (Platform.OS === "ios") {
+                style.fontWeight = "600";
+            }
+        }
+        return StyleSheet.create({ style: style }).style;
+    };
+    var defaultStyle = _getStyle();
+    var Component = Text$2;
+    return (React__default.createElement(Component, __assign({ onPress: onPress, style: [defaultStyle, props.style], allowFontScaling: false }, rest), children));
+};
+var Text$1 = memoDeepEqual(Text);
+
+var TextInputDefault = function (_a) {
+    var _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.editable, editable = _c === void 0 ? true : _c, label = _a.label, _d = _a.error, error = _d === void 0 ? false : _d, customSelectionColor = _a.selectionColor, cursorColor = _a.cursorColor, customOutlineColor = _a.outlineColor, activeOutlineColor = _a.activeOutlineColor; _a.outlineStyle; var textColor = _a.textColor; _a.dense; var style = _a.style, theme = _a.theme, _e = _a.render, render = _e === void 0 ? function (props) { return React$3.createElement(TextInput$1, __assign({}, props)); } : _e, _f = _a.multiline, multiline = _f === void 0 ? false : _f, parentState = _a.parentState, innerRef = _a.innerRef, onFocus = _a.onFocus; _a.forceFocus; var onBlur = _a.onBlur, onChangeText = _a.onChangeText; _a.onLayout; var left = _a.left, right = _a.right, placeholderTextColor = _a.placeholderTextColor, _g = _a.clearButton, clearButton = _g === void 0 ? false : _g, contentStyle = _a.contentStyle, value = _a.value, rest = __rest(_a, ["disabled", "editable", "label", "error", "selectionColor", "cursorColor", "outlineColor", "activeOutlineColor", "outlineStyle", "textColor", "dense", "style", "theme", "render", "multiline", "parentState", "innerRef", "onFocus", "forceFocus", "onBlur", "onChangeText", "onLayout", "left", "right", "placeholderTextColor", "clearButton", "contentStyle", "value"]);
+    var colors = theme.colors;
+    var font = theme.fonts.bodyLarge;
+    var _h = (StyleSheet.flatten(style) || {}), fontSizeStyle = _h.fontSize, fontWeight = _h.fontWeight, lineHeightStyle = _h.lineHeight, height = _h.height, _j = _h.backgroundColor; _j === void 0 ? colors === null || colors === void 0 ? void 0 : colors.backgroundPrimary : _j; var textAlign = _h.textAlign, viewStyle = __rest(_h, ["fontSize", "fontWeight", "lineHeight", "height", "backgroundColor", "textAlign"]);
+    var fontSize = fontSizeStyle || MAXIMIZED_LABEL_FONT_SIZE;
+    var lineHeight = lineHeightStyle || (Platform.OS === "web" ? fontSize * 1.2 : undefined);
+    var _k = getOutlinedInputColors({
+        activeOutlineColor: activeOutlineColor,
+        customOutlineColor: customOutlineColor,
+        customSelectionColor: customSelectionColor,
+        textColor: textColor,
+        disabled: disabled,
+        error: error,
+        theme: theme,
+    }), inputTextColor = _k.inputTextColor, activeColor = _k.activeColor, selectionColor = _k.selectionColor;
+    var _l = React$3.useState(value || ""), inputValue = _l[0], setInputValue = _l[1];
+    React$3.useEffect(function () {
+        setInputValue(value || "");
+    }, [value]);
+    var handleChangeText = function (text) {
+        setInputValue(text);
+        onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(text);
+    };
+    var handleClear = function () {
+        setInputValue("");
+        onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText("");
+    };
+    if (height && typeof height !== "number") {
+        console.warn("Currently we support only numbers in height prop");
+    }
+    var placeholderTextColorBasedOnState = placeholderTextColor || colors.textSecondary;
+    var getBorderColor = function () {
+        if (disabled) {
+            return theme.colors.surfacePrimaryDisabled;
+        }
+        else if (parentState.focused) {
+            return activeColor;
+        }
+        else {
+            return theme.colors.borderPrimaryDefault;
+        }
+    };
+    var getLabelColor = function () {
+        if (disabled) {
+            return theme.colors.textSecondary;
+        }
+        else if (parentState.focused) {
+            return activeColor;
+        }
+        else {
+            return theme.colors.textSecondary;
+        }
+    };
+    var renderLabel = function () {
+        var _a;
+        if (parentState.focused || ((_a = parentState.value) === null || _a === void 0 ? void 0 : _a.toString()) !== "") {
+            return (React$3.createElement(View, { paddingTop: CONSTANTS.SPACE_4 },
+                React$3.createElement(Text$1, { color: getLabelColor(), size: MINIMIZED_LABEL_FONT_SIZE }, label)));
+        }
+        return React$3.createElement(View, null);
+    };
+    return (React$3.createElement(View, { style: viewStyle },
+        React$3.createElement(View, { row: true, alignCenter: true, style: [
+                {
+                    borderRadius: CONSTANTS.BORDER_RADIUS_6,
+                    borderWidth: 1,
+                    borderColor: getBorderColor(),
+                    overflow: "hidden",
+                    backgroundColor: disabled
+                        ? theme.colors.surfacePrimaryDisabled
+                        : theme.colors.surfacePrimaryDefault,
+                },
+            ] },
+            React$3.createElement(View, { paddingLeft: CONSTANTS.SPACE_12 }, left),
+            left && React$3.createElement(Spacer, { width: CONSTANTS.SPACE_8 }),
+            React$3.createElement(View, { full: true },
+                renderLabel(), render === null || render === void 0 ? void 0 :
+                render(__assign(__assign({}, rest), { ref: innerRef, onChangeText: handleChangeText, value: inputValue, placeholder: rest.placeholder, editable: !disabled && editable, selectionColor: selectionColor, cursorColor: typeof cursorColor === "undefined" ? activeColor : cursorColor, placeholderTextColor: placeholderTextColorBasedOnState, onFocus: onFocus, onBlur: onBlur, underlineColorAndroid: "transparent", multiline: multiline, style: [
+                        styles$a.input,
+                        __assign(__assign({}, font), { fontSize: fontSize, lineHeight: lineHeight, fontWeight: fontWeight, color: inputTextColor, textAlignVertical: multiline ? "top" : "center", textAlign: textAlign
+                                ? textAlign
+                                : I18nManager.getConstants().isRTL
+                                    ? "right"
+                                    : "left", height: height ? height : 48 }),
+                        contentStyle,
+                    ] }))),
+            !disabled && clearButton && inputValue ? (React$3.createElement(TouchableOpacity, { onPress: handleClear, style: styles$a.clearButton },
+                React$3.createElement(Icon$1, { name: "IconClearText", type: "Svg", size: 24 }))) : (React$3.createElement(Spacer, { width: CONSTANTS.SPACE_12 })),
+            right && React$3.createElement(Spacer, { width: CONSTANTS.SPACE_8 }),
+            right && React$3.createElement(View, { paddingRight: CONSTANTS.SPACE_12 }, right))));
+};
+var styles$a = StyleSheet.create({
+    input: {
+        margin: 0,
+        flex: 1,
+        height: 48,
+    },
+    clearButton: {
+        padding: CONSTANTS.SPACE_8,
+    },
+});
+
+var roundLayoutSize = function (size) {
+    return Math.round(size * 1000) / 1000;
+};
+
+var BLUR_ANIMATION_DURATION = 180;
+var FOCUS_ANIMATION_DURATION = 150;
+var DefaultRenderer = function (props) { return React__default.createElement(TextInput$1, __assign({}, props)); };
+/**
+ * A component to allow users to input text.
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { TextInput } from 'react-native-paper';
+ *
+ * const MyComponent = () => {
+ *   const [text, setText] = React.useState("");
+ *
+ *   return (
+ *     <TextInput
+ *       label="Email"
+ *       value={text}
+ *       onChangeText={text => setText(text)}
+ *     />
+ *   );
+ * };
+ *
+ * export default MyComponent;
+ * ```
+ *
+ * @extends TextInput props https://reactnative.dev/docs/textinput#props
+ */
+var TextInput = forwardRef(function (_a, ref) {
+    var _b = _a.mode, mode = _b === void 0 ? "default" : _b, _c = _a.dense, dense = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.error, errorProp = _e === void 0 ? false : _e, _f = _a.multiline, multiline = _f === void 0 ? false : _f, _g = _a.editable, editable = _g === void 0 ? true : _g, contentStyle = _a.contentStyle, _h = _a.render, render = _h === void 0 ? DefaultRenderer : _h; _a.theme; var placeholderTextColor = _a.placeholderTextColor, clearButton = _a.clearButton, rest = __rest(_a, ["mode", "dense", "disabled", "error", "multiline", "editable", "contentStyle", "render", "theme", "placeholderTextColor", "clearButton"]);
+    var theme = useInternalTheme();
+    var isControlled = rest.value !== undefined;
+    var validInputValue = isControlled ? rest.value : rest.defaultValue;
+    var labeled = React__default.useRef(new Animated.Value(validInputValue ? 0 : 1)).current;
+    var error = React__default.useRef(new Animated.Value(errorProp ? 1 : 0)).current;
+    var _j = React__default.useState(false), focused = _j[0], setFocused = _j[1];
+    var _k = React__default.useState(false), displayPlaceholder = _k[0], setDisplayPlaceholder = _k[1];
+    var _l = React__default.useState(validInputValue), uncontrolledValue = _l[0], setUncontrolledValue = _l[1];
+    // Use value from props instead of local state when input is controlled
+    var value = isControlled ? rest.value : uncontrolledValue;
+    var _m = React__default.useState({
+        width: 33,
+    }), labelTextLayout = _m[0], setLabelTextLayout = _m[1];
+    var _o = React__default.useState({
+        width: 65,
+    }), inputContainerLayout = _o[0], setInputContainerLayout = _o[1];
+    var _p = React__default.useState({
+        measured: false,
+        width: 0,
+        height: 0,
+    }), labelLayout = _p[0], setLabelLayout = _p[1];
+    var _q = React__default.useState({
+        width: null,
+        height: null,
+    }), leftLayout = _q[0], setLeftLayout = _q[1];
+    var _r = React__default.useState({
+        width: null,
+        height: null,
+    }), rightLayout = _r[0], setRightLayout = _r[1];
+    var timer = useRef(undefined);
+    var root = useRef(null);
+    var scale = theme.animation.scale;
+    React__default.useImperativeHandle(ref, function () { return ({
+        focus: function () { var _a; return (_a = root.current) === null || _a === void 0 ? void 0 : _a.focus(); },
+        clear: function () { var _a; return (_a = root.current) === null || _a === void 0 ? void 0 : _a.clear(); },
+        setNativeProps: function (args) { var _a; return (_a = root.current) === null || _a === void 0 ? void 0 : _a.setNativeProps(args); },
+        isFocused: function () { var _a; return ((_a = root.current) === null || _a === void 0 ? void 0 : _a.isFocused()) || false; },
+        blur: function () { var _a; return (_a = root.current) === null || _a === void 0 ? void 0 : _a.blur(); },
+        forceFocus: function () { var _a; return (_a = root.current) === null || _a === void 0 ? void 0 : _a.focus(); },
+    }); });
+    React__default.useEffect(function () {
+        // When the input has an error, we wiggle the label and apply error styles
+        if (errorProp) {
+            // show error
+            Animated.timing(error, {
+                toValue: 1,
+                duration: FOCUS_ANIMATION_DURATION * scale,
+                // To prevent this - https://github.com/callstack/react-native-paper/issues/941
+                useNativeDriver: true,
+            }).start();
         }
-        if (center) {
-            style.textAlign = "center";
+        else {
+            // hide error
+            {
+                Animated.timing(error, {
+                    toValue: 0,
+                    duration: BLUR_ANIMATION_DURATION * scale,
+                    // To prevent this - https://github.com/callstack/react-native-paper/issues/941
+                    useNativeDriver: true,
+                }).start();
+            }
         }
-        if (bold) {
-            style.fontFamily = "Inter-Bold";
-            if (Platform.OS === "ios") {
-                style.fontWeight = "bold";
+    }, [errorProp, scale, error]);
+    React__default.useEffect(function () {
+        // Show placeholder text only if the input is focused, or there's no label
+        // We don't show placeholder if there's a label because the label acts as placeholder
+        // When focused, the label moves up, so we can show a placeholder
+        if (focused || !rest.label) {
+            // If the user wants to use the contextMenu, when changing the placeholder, the contextMenu is closed
+            // This is a workaround to mitigate this behavior in scenarios where the placeholder is not specified.
+            if (rest.placeholder) {
+                // Display placeholder in a delay to offset the label animation
+                // If we show it immediately, they'll overlap and look ugly
+                timer.current = setTimeout(function () { return setDisplayPlaceholder(true); }, 50);
             }
         }
-        if (medium) {
-            style.fontFamily = "Inter-SemiBold";
-            if (Platform.OS === "ios") {
-                style.fontWeight = "600";
+        else {
+            // hidePlaceholder
+            setDisplayPlaceholder(false);
+        }
+        return function () {
+            if (timer.current) {
+                clearTimeout(timer.current);
             }
+        };
+    }, [focused, rest.label, rest.placeholder]);
+    React__default.useEffect(function () {
+        labeled.stopAnimation();
+        // The label should be minimized if the text input is focused, or has text
+        // In minimized mode, the label moves up and becomes small
+        // workaround for animated regression for react native > 0.61
+        // https://github.com/callstack/react-native-paper/pull/1440
+        if (value || focused) {
+            // minimize label
+            Animated.timing(labeled, {
+                toValue: 0,
+                duration: BLUR_ANIMATION_DURATION * scale,
+                // To prevent this - https://github.com/callstack/react-native-paper/issues/941
+                useNativeDriver: true,
+            }).start();
         }
-        return StyleSheet.create({ style: style }).style;
+        else {
+            // restore label
+            Animated.timing(labeled, {
+                toValue: 1,
+                duration: FOCUS_ANIMATION_DURATION * scale,
+                // To prevent this - https://github.com/callstack/react-native-paper/issues/941
+                useNativeDriver: true,
+            }).start();
+        }
+    }, [focused, value, labeled, scale]);
+    var onLeftAffixLayoutChange = React__default.useCallback(function (event) {
+        var height = roundLayoutSize(event.nativeEvent.layout.height);
+        var width = roundLayoutSize(event.nativeEvent.layout.width);
+        if (width !== leftLayout.width || height !== leftLayout.height) {
+            setLeftLayout({
+                width: width,
+                height: height,
+            });
+        }
+    }, [leftLayout.height, leftLayout.width]);
+    var onRightAffixLayoutChange = React__default.useCallback(function (event) {
+        var width = roundLayoutSize(event.nativeEvent.layout.width);
+        var height = roundLayoutSize(event.nativeEvent.layout.height);
+        if (width !== rightLayout.width || height !== rightLayout.height) {
+            setRightLayout({
+                width: width,
+                height: height,
+            });
+        }
+    }, [rightLayout.height, rightLayout.width]);
+    var handleFocus = function (args) {
+        var _a;
+        if (disabled || !editable) {
+            return;
+        }
+        setFocused(true);
+        (_a = rest.onFocus) === null || _a === void 0 ? void 0 : _a.call(rest, args);
     };
-    var defaultStyle = _getStyle();
-    var Component = Text$2;
-    return (React__default.createElement(Component, __assign({ onPress: onPress, style: [defaultStyle, props.style], allowFontScaling: false }, rest), children));
+    var handleBlur = function (args) {
+        var _a;
+        if (!editable) {
+            return;
+        }
+        setFocused(false);
+        (_a = rest.onBlur) === null || _a === void 0 ? void 0 : _a.call(rest, args);
+    };
+    var handleChangeText = function (value) {
+        var _a;
+        if (!editable || disabled) {
+            return;
+        }
+        if (!isControlled) {
+            // Keep track of value in local state when input is not controlled
+            setUncontrolledValue(value);
+        }
+        (_a = rest.onChangeText) === null || _a === void 0 ? void 0 : _a.call(rest, value);
+    };
+    var handleLayoutAnimatedText = React__default.useCallback(function (e) {
+        var width = roundLayoutSize(e.nativeEvent.layout.width);
+        var height = roundLayoutSize(e.nativeEvent.layout.height);
+        if (width !== labelLayout.width || height !== labelLayout.height) {
+            setLabelLayout({
+                width: width,
+                height: height,
+                measured: true,
+            });
+        }
+    }, [labelLayout.height, labelLayout.width]);
+    var handleLabelTextLayout = React__default.useCallback(function (_a) {
+        var nativeEvent = _a.nativeEvent;
+        setLabelTextLayout({
+            width: nativeEvent.lines.reduce(function (acc, line) { return acc + Math.ceil(line.width); }, 0),
+        });
+    }, []);
+    var handleInputContainerLayout = React__default.useCallback(function (_a) {
+        var layout = _a.nativeEvent.layout;
+        setInputContainerLayout({
+            width: layout.width,
+        });
+    }, []);
+    var forceFocus = React__default.useCallback(function () { var _a; return (_a = root.current) === null || _a === void 0 ? void 0 : _a.focus(); }, []);
+    var _s = rest.maxFontSizeMultiplier, maxFontSizeMultiplier = _s === void 0 ? 1.5 : _s;
+    var scaledLabel = !!(value || focused);
+    if (mode === "default") {
+        return (React__default.createElement(TextInputDefault, __assign({ dense: dense, disabled: disabled, error: errorProp, multiline: multiline, editable: editable, render: render }, rest, { theme: theme, value: value, placeholderTextColor: placeholderTextColor, clearButton: clearButton, parentState: {
+                labeled: labeled,
+                error: error,
+                focused: focused,
+                displayPlaceholder: displayPlaceholder,
+                value: value,
+                labelTextLayout: labelTextLayout,
+                labelLayout: labelLayout,
+                leftLayout: leftLayout,
+                rightLayout: rightLayout,
+                inputContainerLayout: inputContainerLayout,
+            }, innerRef: function (ref) {
+                root.current = ref;
+            }, onFocus: handleFocus, forceFocus: forceFocus, onBlur: handleBlur, allowFontScaling: false, onChangeText: handleChangeText, onLayoutAnimatedText: handleLayoutAnimatedText, onInputLayout: handleInputContainerLayout, onLabelTextLayout: handleLabelTextLayout, onLeftAffixLayoutChange: onLeftAffixLayoutChange, onRightAffixLayoutChange: onRightAffixLayoutChange, maxFontSizeMultiplier: maxFontSizeMultiplier, contentStyle: contentStyle, scaledLabel: scaledLabel })));
+    }
+    return (React__default.createElement(TextInputFlat, __assign({ dense: dense, disabled: disabled, error: errorProp, multiline: false, editable: editable, clearButton: clearButton, render: render }, rest, { theme: theme, value: value, parentState: {
+            labeled: labeled,
+            error: error,
+            focused: focused,
+            displayPlaceholder: displayPlaceholder,
+            value: value,
+            labelTextLayout: labelTextLayout,
+            labelLayout: labelLayout,
+            leftLayout: leftLayout,
+            rightLayout: rightLayout,
+            inputContainerLayout: inputContainerLayout,
+        }, innerRef: function (ref) {
+            root.current = ref;
+        }, onFocus: handleFocus, forceFocus: forceFocus, onBlur: handleBlur, onInputLayout: handleInputContainerLayout, allowFontScaling: false, onChangeText: handleChangeText, onLayoutAnimatedText: handleLayoutAnimatedText, onLabelTextLayout: handleLabelTextLayout, onLeftAffixLayoutChange: onLeftAffixLayoutChange, onRightAffixLayoutChange: onRightAffixLayoutChange, maxFontSizeMultiplier: maxFontSizeMultiplier, contentStyle: contentStyle, scaledLabel: scaledLabel })));
+});
+// @component ./Adornment/TextInputIcon.tsx
+// @component ./Adornment/TextInputAffix.tsx
+// @ts-ignore Types of property 'theme' are incompatible.
+TextInput.Affix = TextInputAffix;
+
+var ScaleButton = function (_a) {
+    var children = _a.children; _a.style; var _b = _a.onPress, onPress = _b === void 0 ? function () { } : _b, rest = __rest(_a, ["children", "style", "onPress"]);
+    return (React__default.createElement(TouchableOpacity, __assign({}, rest, { onPress: onPress }), children));
 };
-var Text$1 = memoDeepEqual(Text);
+var ScaleButton$1 = React__default.memo(ScaleButton);
 
 var Button = function (_a) {
     var style = _a.style, title = _a.title, borderColor = _a.borderColor, isLoading = _a.isLoading, left = _a.left, right = _a.right, small = _a.small, textStyle = _a.textStyle, onPress = _a.onPress, disabled = _a.disabled, backgroundColor = _a.backgroundColor, textColor = _a.textColor, _b = _a.bold, bold = _b === void 0 ? true : _b, _c = _a.size, size = _c === void 0 ? 16 : _c, _d = _a.medium, medium = _d === void 0 ? false : _d, _e = _a.mode, mode = _e === void 0 ? "contained" : _e; _a.theme; var props = __rest(_a, ["style", "title", "borderColor", "isLoading", "left", "right", "small", "textStyle", "onPress", "disabled", "backgroundColor", "textColor", "bold", "size", "medium", "mode", "theme"]);