sapo-components-ui-rn 1.0.51 → 1.0.53

package/dist/components/Avatar/index.d.ts

@@ -7,7 +7,7 @@ interface AvatarProps {
     backgroundColor?: string;
     style?: StyleProp<ViewStyle>;
     textColor?: string;
-    size: 64 | 48 | 24;
+    size?: 64 | 48 | 32;
     source?: string;
     onPress?: () => void;
     textStyle?: StyleProp<TextStyle>;

package/dist/components/TextInput/TextInput.d.ts

@@ -7,6 +7,7 @@ export type Props = React.ComponentPropsWithRef<typeof NativeTextInput> & {
     mode?: "flat" | "default";
     left?: React.ReactNode;
     right?: React.ReactNode;
+    prefix?: string;
     /**
      * If true, user won't be able to interact with the component.
      */

package/dist/components/TextInput/TextInputFlat.d.ts

@@ -1,4 +1,4 @@
 import * as React from "react";
 import type { ChildTextInputProps } from "./types";
-declare const TextInputFlat: ({ disabled, editable, label, error, selectionColor: customSelectionColor, cursorColor, underlineColor, underlineStyle, activeUnderlineColor, textColor, dense, style, theme, render, multiline, parentState, innerRef, onFocus, forceFocus, onBlur, onChangeText, onLayoutAnimatedText, onLabelTextLayout, onLeftAffixLayoutChange, onRightAffixLayoutChange, onInputLayout, left, right, placeholderTextColor, clearButton, contentStyle, scaledLabel, outlineStyle, outlineColor, value, ...rest }: ChildTextInputProps) => React.JSX.Element;
+declare const TextInputFlat: ({ disabled, editable, label, error, selectionColor: customSelectionColor, cursorColor, underlineColor, underlineStyle, activeUnderlineColor, textColor, dense, style, theme, render, multiline, parentState, innerRef, onFocus, forceFocus, onBlur, onChangeText, onLayoutAnimatedText, onLabelTextLayout, onLeftAffixLayoutChange, onRightAffixLayoutChange, onInputLayout, left, right, prefix, placeholderTextColor, clearButton, contentStyle, scaledLabel, outlineStyle, outlineColor, value, ...rest }: ChildTextInputProps) => React.JSX.Element;
 export default TextInputFlat;

package/dist/components/TextInput/types.d.ts

@@ -93,6 +93,7 @@ export type ChildTextInputProps = {
     onLeftAffixLayoutChange: (event: LayoutChangeEvent) => void;
     onRightAffixLayoutChange: (event: LayoutChangeEvent) => void;
     clearButton?: boolean;
+    prefix?: string;
 } & $Omit<TextInputTypesWithoutMode, "theme"> & {
     theme: InternalTheme;
 };

package/dist/index.esm.js

@@ -563,6 +563,7 @@ var CONSTANTS = {
     BUTTON_HEIGHT_SMALL: 36,
     RADIO_BUTTON_HEIGHT: 20,
     BUTTON_ICON: 36,
+    BUTTON_ICON_SMALL: 36,
     SPACE_0: 0,
     SPACE_2: 2,
     SPACE_4: 4,
@@ -2876,233 +2877,6 @@ var Icon = function (_a) {
 };
 var Icon$1 = React__default.memo(Icon);
 
-var TextInputFlat = 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, underlineColor = _a.underlineColor; _a.underlineStyle; var activeUnderlineColor = _a.activeUnderlineColor, textColor = _a.textColor, dense = _a.dense, 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, onLayoutAnimatedText = _a.onLayoutAnimatedText, onLabelTextLayout = _a.onLabelTextLayout; _a.onLeftAffixLayoutChange; _a.onRightAffixLayoutChange; var onInputLayout = _a.onInputLayout, left = _a.left, right = _a.right, placeholderTextColor = _a.placeholderTextColor, clearButton = _a.clearButton, contentStyle = _a.contentStyle, scaledLabel = _a.scaledLabel, outlineStyle = _a.outlineStyle, outlineColor = _a.outlineColor, value = _a.value, rest = __rest(_a, ["disabled", "editable", "label", "error", "selectionColor", "cursorColor", "underlineColor", "underlineStyle", "activeUnderlineColor", "textColor", "dense", "style", "theme", "render", "multiline", "parentState", "innerRef", "onFocus", "forceFocus", "onBlur", "onChangeText", "onLayoutAnimatedText", "onLabelTextLayout", "onLeftAffixLayoutChange", "onRightAffixLayoutChange", "onInputLayout", "left", "right", "placeholderTextColor", "clearButton", "contentStyle", "scaledLabel", "outlineStyle", "outlineColor", "value"]);
-    var _g = React$3.useState(value || ""), inputValue = _g[0], setInputValue = _g[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("");
-    };
-    var isAndroid = Platform.OS === "android";
-    var roundness = theme.roundness;
-    var font = theme.fonts.bodyLarge;
-    var hasActiveOutline = parentState.focused || error;
-    var _h = getConstants(), LABEL_PADDING_TOP = _h.LABEL_PADDING_TOP, FLAT_INPUT_OFFSET = _h.FLAT_INPUT_OFFSET, MIN_HEIGHT = _h.MIN_HEIGHT;
-    var _j = (StyleSheet.flatten(style) || {}), fontSizeStyle = _j.fontSize, lineHeightStyle = _j.lineHeight, fontWeight = _j.fontWeight, height = _j.height, paddingHorizontal = _j.paddingHorizontal, textAlign = _j.textAlign; __rest(_j, ["fontSize", "lineHeight", "fontWeight", "height", "paddingHorizontal", "textAlign"]);
-    var fontSize = fontSizeStyle || MAXIMIZED_LABEL_FONT_SIZE;
-    var lineHeight = lineHeightStyle || (Platform.OS === "web" ? fontSize * 1.2 : undefined);
-    var isPaddingHorizontalPassed = paddingHorizontal !== undefined && typeof paddingHorizontal === "number";
-    var adornmentConfig = getAdornmentConfig({
-        left: left,
-        right: right,
-    });
-    var _k = calculateFlatInputHorizontalPadding({
-        adornmentConfig: adornmentConfig,
-    }), paddingLeft = _k.paddingLeft, paddingRight = _k.paddingRight;
-    if (isPaddingHorizontalPassed) {
-        paddingLeft = paddingHorizontal;
-        paddingRight = paddingHorizontal;
-    }
-    var _l = getFlatInputColors({
-        underlineColor: underlineColor,
-        activeUnderlineColor: activeUnderlineColor,
-        customSelectionColor: customSelectionColor,
-        textColor: textColor,
-        disabled: disabled,
-        error: error,
-        theme: theme,
-    }), inputTextColor = _l.inputTextColor, activeColor = _l.activeColor, placeholderColor = _l.placeholderColor, errorColor = _l.errorColor, backgroundColor = _l.backgroundColor, selectionColor = _l.selectionColor;
-    ({
-        backgroundColor: backgroundColor,
-        borderTopLeftRadius: theme.roundness,
-        borderTopRightRadius: theme.roundness,
-    });
-    var labelScale = MINIMIZED_LABEL_FONT_SIZE / fontSize;
-    var fontScale = MAXIMIZED_LABEL_FONT_SIZE / fontSize;
-    var labelWidth = parentState.labelLayout.width;
-    var labelHeight = parentState.labelLayout.height;
-    var labelHalfWidth = labelWidth / 2;
-    var labelHalfHeight = labelHeight / 2;
-    var baseLabelTranslateX = (I18nManager.getConstants().isRTL ? 1 : -1) *
-        (labelHalfWidth - (labelScale * labelWidth) / 2) +
-        (1 - labelScale) *
-            (I18nManager.getConstants().isRTL ? -1 : 1) *
-            paddingLeft;
-    var minInputHeight = dense
-        ? (label ? MIN_DENSE_HEIGHT_WL : MIN_DENSE_HEIGHT) - LABEL_PADDING_TOP_DENSE
-        : MIN_HEIGHT - LABEL_PADDING_TOP;
-    var inputHeight = calculateInputHeight(labelHeight, height, minInputHeight);
-    var topPosition = calculateLabelTopPosition(labelHeight, inputHeight, multiline && height ? 0 : !height ? minInputHeight / 2 : 0);
-    if (height && typeof height !== "number") {
-        // eslint-disable-next-line
-        console.warn("Currently we support only numbers in height prop");
-    }
-    var paddingSettings = {
-        height: height ? +height : null,
-        labelHalfHeight: labelHalfHeight,
-        offset: FLAT_INPUT_OFFSET,
-        multiline: multiline ? multiline : null,
-        dense: dense ? dense : null,
-        topPosition: topPosition,
-        fontSize: fontSize,
-        lineHeight: lineHeight,
-        label: label,
-        scale: fontScale,
-        isAndroid: isAndroid,
-        styles: StyleSheet.flatten(dense ? styles$b.inputFlatDense : styles$b.inputFlat),
-    };
-    var pad = calculatePadding(paddingSettings);
-    adjustPaddingFlat(__assign(__assign({}, paddingSettings), { pad: pad }));
-    var baseLabelTranslateY = -labelHalfHeight - (topPosition + MINIMIZED_LABEL_Y_OFFSET);
-    var placeholderOpacityAnims = React$3.useRef([
-        new Animated.Value(0),
-        new Animated.Value(1),
-    ]).current;
-    var placeholderOpacity = hasActiveOutline
-        ? parentState.labeled
-        : placeholderOpacityAnims[parentState.labelLayout.measured ? 1 : 0];
-    // We don't want to show placeholder if label is displayed, because they overlap.
-    // Before it was done by setting placeholder's value to " ", but inputs have the same props
-    // what causes broken styles due to: https://github.com/facebook/react-native/issues/48249
-    var placeholderTextColorBasedOnState = parentState.displayPlaceholder
-        ? placeholderTextColor !== null && placeholderTextColor !== void 0 ? placeholderTextColor : placeholderColor
-        : "transparent";
-    var minHeight = height ||
-        (dense ? (label ? MIN_DENSE_HEIGHT_WL : MIN_DENSE_HEIGHT) : MIN_HEIGHT);
-    var labelProps = {
-        label: label,
-        onLayoutAnimatedText: onLayoutAnimatedText,
-        onLabelTextLayout: onLabelTextLayout,
-        placeholderOpacity: placeholderOpacity,
-        labelError: error,
-        placeholderStyle: styles$b.placeholder,
-        baseLabelTranslateY: baseLabelTranslateY,
-        baseLabelTranslateX: baseLabelTranslateX,
-        font: font,
-        fontSize: fontSize,
-        lineHeight: lineHeight,
-        fontWeight: fontWeight,
-        labelScale: labelScale,
-        wiggleOffsetX: LABEL_WIGGLE_X_OFFSET,
-        topPosition: topPosition,
-        paddingLeft: isAndroid
-            ? I18nManager.isRTL
-                ? paddingRight
-                : paddingLeft
-            : paddingLeft,
-        paddingRight: isAndroid
-            ? I18nManager.isRTL
-                ? paddingLeft
-                : paddingRight
-            : paddingRight,
-        hasActiveOutline: hasActiveOutline,
-        activeColor: activeColor,
-        placeholderColor: placeholderColor,
-        errorColor: errorColor,
-        roundness: roundness,
-        maxFontSizeMultiplier: rest.maxFontSizeMultiplier,
-        contentStyle: contentStyle,
-        inputContainerLayout: parentState.inputContainerLayout,
-        labelTextLayout: parentState.labelTextLayout,
-        opacity: parentState.value || parentState.focused
-            ? parentState.labelLayout.measured
-                ? 1
-                : 0
-            : 1,
-    };
-    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$1, { style: {
-            flexDirection: "row",
-            alignItems: "center",
-            borderRadius: BORDER_RADIUS_6,
-            borderWidth: 1,
-            borderColor: getBorderColor(),
-            height: 44,
-            overflow: "hidden",
-            backgroundColor: disabled
-                ? theme.colors.surfacePrimaryDisabled
-                : theme.colors.surfacePrimaryDefault,
-        } },
-        React$3.createElement(View$1, { style: { flexDirection: "row" } },
-            left && React$3.createElement(View$1, { style: { paddingLeft: SPACE_12 } }, left),
-            left ? React$3.createElement(Spacer, { width: SPACE_8 }) : React$3.createElement(Spacer, { width: SPACE_12 })),
-        React$3.createElement(Outline, { style: outlineStyle, label: label, roundness: roundness, hasActiveOutline: hasActiveOutline, focused: parentState.focused, activeColor: activeColor, outlineColor: outlineColor, backgroundColor: backgroundColor }),
-        React$3.createElement(View$1, { onLayout: onInputLayout, style: [
-                styles$b.labelContainer,
-                {
-                    minHeight: minHeight,
-                    flex: 1,
-                },
-            ] },
-            label ? (React$3.createElement(InputLabel$1, __assign({ labeled: parentState.labeled, error: parentState.error, focused: parentState.focused, scaledLabel: scaledLabel, wiggle: Boolean(parentState.value && labelProps.labelError), labelLayoutMeasured: parentState.labelLayout.measured, labelLayoutWidth: parentState.labelLayout.width, labelLayoutHeight: parentState.labelLayout.height }, labelProps))) : null, 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$b.input,
-                    __assign(__assign({ paddingLeft: paddingLeft, paddingRight: paddingRight, paddingTop: parentState.focused || parentState.value ? SPACE_12 : 0 }, font), { fontSize: fontSize, lineHeight: lineHeight, fontWeight: fontWeight, color: inputTextColor, textAlignVertical: multiline ? "top" : "center", textAlign: textAlign
-                            ? textAlign
-                            : I18nManager.getConstants().isRTL
-                                ? "right"
-                                : "left", marginTop: Platform.OS === "android" ? SPACE_8 : 0 }),
-                    contentStyle,
-                ] }))),
-        !disabled && clearButton && inputValue ? (React$3.createElement(TouchableOpacity, { onPress: handleClear, style: styles$b.clearButton },
-            React$3.createElement(Icon$1, { name: "IconClearText", type: "Svg", size: 24 }))) : (React$3.createElement(Spacer, { width: SPACE_12 })),
-        React$3.createElement(View$1, { style: { flexDirection: "row" } },
-            right && React$3.createElement(Spacer, { width: SPACE_8 }),
-            right && React$3.createElement(View$1, { style: { paddingRight: SPACE_12 } }, right))));
-};
-var styles$b = StyleSheet.create({
-    placeholder: {
-        position: "absolute",
-        left: 0,
-    },
-    labelContainer: {
-        paddingTop: 0,
-        paddingBottom: 0,
-        // flex: 1,
-    },
-    input: {
-        // margin: 0,
-        flex: 1,
-        height: 44,
-    },
-    inputFlat: {
-        paddingTop: 24,
-        paddingBottom: 4,
-    },
-    inputFlatDense: {
-        paddingTop: 22,
-        paddingBottom: 2,
-    },
-    patchContainer: {
-        height: 24,
-        zIndex: 2,
-    },
-    densePatchContainer: {
-        height: 22,
-        zIndex: 2,
-    },
-    clearButton: {
-        padding: SPACE_8,
-    },
-});
-
 /**
  * Removes all key-value entries from the list cache.
  *
@@ -5607,6 +5381,256 @@ var Text = function (props) {
 };
 var Text$1 = memoDeepEqual(Text);
 
+var TextInputFlat = 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, underlineColor = _a.underlineColor; _a.underlineStyle; var activeUnderlineColor = _a.activeUnderlineColor, textColor = _a.textColor, dense = _a.dense, 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, onLayoutAnimatedText = _a.onLayoutAnimatedText, onLabelTextLayout = _a.onLabelTextLayout; _a.onLeftAffixLayoutChange; _a.onRightAffixLayoutChange; var onInputLayout = _a.onInputLayout, left = _a.left, right = _a.right, prefix = _a.prefix, placeholderTextColor = _a.placeholderTextColor, clearButton = _a.clearButton, contentStyle = _a.contentStyle, scaledLabel = _a.scaledLabel, outlineStyle = _a.outlineStyle, outlineColor = _a.outlineColor, value = _a.value, rest = __rest(_a, ["disabled", "editable", "label", "error", "selectionColor", "cursorColor", "underlineColor", "underlineStyle", "activeUnderlineColor", "textColor", "dense", "style", "theme", "render", "multiline", "parentState", "innerRef", "onFocus", "forceFocus", "onBlur", "onChangeText", "onLayoutAnimatedText", "onLabelTextLayout", "onLeftAffixLayoutChange", "onRightAffixLayoutChange", "onInputLayout", "left", "right", "prefix", "placeholderTextColor", "clearButton", "contentStyle", "scaledLabel", "outlineStyle", "outlineColor", "value"]);
+    var _g = React$3.useState(value || ""), inputValue = _g[0], setInputValue = _g[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("");
+    };
+    var isAndroid = Platform.OS === "android";
+    var roundness = theme.roundness;
+    var font = theme.fonts.bodyLarge;
+    var hasActiveOutline = parentState.focused || error;
+    var _h = getConstants(), LABEL_PADDING_TOP = _h.LABEL_PADDING_TOP, FLAT_INPUT_OFFSET = _h.FLAT_INPUT_OFFSET, MIN_HEIGHT = _h.MIN_HEIGHT;
+    var _j = (StyleSheet.flatten(style) || {}), fontSizeStyle = _j.fontSize, lineHeightStyle = _j.lineHeight, fontWeight = _j.fontWeight, height = _j.height, paddingHorizontal = _j.paddingHorizontal, textAlign = _j.textAlign; __rest(_j, ["fontSize", "lineHeight", "fontWeight", "height", "paddingHorizontal", "textAlign"]);
+    var fontSize = fontSizeStyle || MAXIMIZED_LABEL_FONT_SIZE;
+    var lineHeight = lineHeightStyle || (Platform.OS === "web" ? fontSize * 1.2 : undefined);
+    var isPaddingHorizontalPassed = paddingHorizontal !== undefined && typeof paddingHorizontal === "number";
+    var adornmentConfig = getAdornmentConfig({
+        left: left,
+        right: right,
+    });
+    var _k = calculateFlatInputHorizontalPadding({
+        adornmentConfig: adornmentConfig,
+    }), paddingLeft = _k.paddingLeft, paddingRight = _k.paddingRight;
+    if (isPaddingHorizontalPassed) {
+        paddingLeft = paddingHorizontal;
+        paddingRight = paddingHorizontal;
+    }
+    var _l = getFlatInputColors({
+        underlineColor: underlineColor,
+        activeUnderlineColor: activeUnderlineColor,
+        customSelectionColor: customSelectionColor,
+        textColor: textColor,
+        disabled: disabled,
+        error: error,
+        theme: theme,
+    }), inputTextColor = _l.inputTextColor, activeColor = _l.activeColor, placeholderColor = _l.placeholderColor, errorColor = _l.errorColor, backgroundColor = _l.backgroundColor, selectionColor = _l.selectionColor;
+    ({
+        backgroundColor: backgroundColor,
+        borderTopLeftRadius: theme.roundness,
+        borderTopRightRadius: theme.roundness,
+    });
+    var labelScale = MINIMIZED_LABEL_FONT_SIZE / fontSize;
+    var fontScale = MAXIMIZED_LABEL_FONT_SIZE / fontSize;
+    var labelWidth = parentState.labelLayout.width;
+    var labelHeight = parentState.labelLayout.height;
+    var labelHalfWidth = labelWidth / 2;
+    var labelHalfHeight = labelHeight / 2;
+    var baseLabelTranslateX = (I18nManager.getConstants().isRTL ? 1 : -1) *
+        (labelHalfWidth - (labelScale * labelWidth) / 2) +
+        (1 - labelScale) *
+            (I18nManager.getConstants().isRTL ? -1 : 1) *
+            paddingLeft;
+    var minInputHeight = dense
+        ? (label ? MIN_DENSE_HEIGHT_WL : MIN_DENSE_HEIGHT) - LABEL_PADDING_TOP_DENSE
+        : MIN_HEIGHT - LABEL_PADDING_TOP;
+    var inputHeight = calculateInputHeight(labelHeight, height, minInputHeight);
+    var topPosition = calculateLabelTopPosition(labelHeight, inputHeight, multiline && height ? 0 : !height ? minInputHeight / 2 : 0);
+    if (height && typeof height !== "number") {
+        // eslint-disable-next-line
+        console.warn("Currently we support only numbers in height prop");
+    }
+    var paddingSettings = {
+        height: height ? +height : null,
+        labelHalfHeight: labelHalfHeight,
+        offset: FLAT_INPUT_OFFSET,
+        multiline: multiline ? multiline : null,
+        dense: dense ? dense : null,
+        topPosition: topPosition,
+        fontSize: fontSize,
+        lineHeight: lineHeight,
+        label: label,
+        scale: fontScale,
+        isAndroid: isAndroid,
+        styles: StyleSheet.flatten(dense ? styles$b.inputFlatDense : styles$b.inputFlat),
+    };
+    var pad = calculatePadding(paddingSettings);
+    adjustPaddingFlat(__assign(__assign({}, paddingSettings), { pad: pad }));
+    var baseLabelTranslateY = -labelHalfHeight - (topPosition + MINIMIZED_LABEL_Y_OFFSET);
+    var placeholderOpacityAnims = React$3.useRef([
+        new Animated.Value(0),
+        new Animated.Value(1),
+    ]).current;
+    var placeholderOpacity = hasActiveOutline
+        ? parentState.labeled
+        : placeholderOpacityAnims[parentState.labelLayout.measured ? 1 : 0];
+    // We don't want to show placeholder if label is displayed, because they overlap.
+    // Before it was done by setting placeholder's value to " ", but inputs have the same props
+    // what causes broken styles due to: https://github.com/facebook/react-native/issues/48249
+    var placeholderTextColorBasedOnState = parentState.displayPlaceholder
+        ? placeholderTextColor !== null && placeholderTextColor !== void 0 ? placeholderTextColor : placeholderColor
+        : "transparent";
+    var minHeight = height ||
+        (dense ? (label ? MIN_DENSE_HEIGHT_WL : MIN_DENSE_HEIGHT) : MIN_HEIGHT);
+    var labelProps = {
+        label: label,
+        onLayoutAnimatedText: onLayoutAnimatedText,
+        onLabelTextLayout: onLabelTextLayout,
+        placeholderOpacity: placeholderOpacity,
+        labelError: error,
+        placeholderStyle: styles$b.placeholder,
+        baseLabelTranslateY: baseLabelTranslateY,
+        baseLabelTranslateX: baseLabelTranslateX,
+        font: font,
+        fontSize: fontSize,
+        lineHeight: lineHeight,
+        fontWeight: fontWeight,
+        labelScale: labelScale,
+        wiggleOffsetX: LABEL_WIGGLE_X_OFFSET,
+        topPosition: topPosition,
+        paddingLeft: isAndroid
+            ? I18nManager.isRTL
+                ? paddingRight
+                : paddingLeft
+            : paddingLeft,
+        paddingRight: isAndroid
+            ? I18nManager.isRTL
+                ? paddingLeft
+                : paddingRight
+            : paddingRight,
+        hasActiveOutline: hasActiveOutline,
+        activeColor: activeColor,
+        placeholderColor: placeholderColor,
+        errorColor: errorColor,
+        roundness: roundness,
+        maxFontSizeMultiplier: rest.maxFontSizeMultiplier,
+        contentStyle: contentStyle,
+        inputContainerLayout: parentState.inputContainerLayout,
+        labelTextLayout: parentState.labelTextLayout,
+        opacity: parentState.value || parentState.focused
+            ? parentState.labelLayout.measured
+                ? 1
+                : 0
+            : 1,
+    };
+    var getBorderColor = function () {
+        if (disabled) {
+            return theme.colors.surfacePrimaryDisabled;
+        }
+        else if (parentState.focused) {
+            return activeColor;
+        }
+        else {
+            return theme.colors.borderPrimaryDefault;
+        }
+    };
+    var renderPrefix = function () {
+        var _a;
+        if (parentState.focused) {
+            return (React$3.createElement(View$1, { style: {
+                    paddingBottom: Platform.OS === "ios" ? 9 : 13,
+                } },
+                React$3.createElement(Text$1, { color: theme.colors.textSecondary },
+                    prefix, " ")));
+        }
+        else if (parentState.value !== undefined &&
+            ((_a = parentState.value) === null || _a === void 0 ? void 0 : _a.toString()) !== "") {
+            return (React$3.createElement(View$1, { style: {
+                    paddingBottom: Platform.OS === "ios" ? 9 : 13,
+                } },
+                React$3.createElement(Text$1, { color: theme.colors.textSecondary },
+                    prefix, " ")));
+        }
+        return React$3.createElement(View$1, null);
+    };
+    return (React$3.createElement(View$1, { style: {
+            flexDirection: "row",
+            alignItems: "center",
+            borderRadius: BORDER_RADIUS_6,
+            borderWidth: 1,
+            borderColor: getBorderColor(),
+            height: 48,
+            overflow: "hidden",
+            backgroundColor: disabled
+                ? theme.colors.surfacePrimaryDisabled
+                : theme.colors.surfacePrimaryDefault,
+        } },
+        React$3.createElement(View$1, { style: { flexDirection: "row", height: "100%" } },
+            left && React$3.createElement(View$1, { style: { paddingLeft: SPACE_12 } }, left),
+            left ? React$3.createElement(Spacer, { width: SPACE_8 }) : React$3.createElement(Spacer, { width: SPACE_12 })),
+        React$3.createElement(Outline, { style: outlineStyle, label: label, roundness: roundness, hasActiveOutline: hasActiveOutline, focused: parentState.focused, activeColor: activeColor, outlineColor: outlineColor, backgroundColor: backgroundColor }),
+        React$3.createElement(View$1, { onLayout: onInputLayout, style: [
+                styles$b.labelContainer,
+                {
+                    minHeight: minHeight,
+                    flex: 1,
+                },
+            ] },
+            label ? (React$3.createElement(InputLabel$1, __assign({ labeled: parentState.labeled, error: parentState.error, focused: parentState.focused, scaledLabel: scaledLabel, wiggle: Boolean(parentState.value && labelProps.labelError), labelLayoutMeasured: parentState.labelLayout.measured, labelLayoutWidth: parentState.labelLayout.width, labelLayoutHeight: parentState.labelLayout.height }, labelProps))) : null,
+            React$3.createElement(View$1, { style: { flexDirection: "row", alignItems: "flex-end" } },
+                renderPrefix(), 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$b.input,
+                        __assign(__assign({ paddingLeft: paddingLeft, paddingRight: paddingRight, paddingTop: parentState.focused || parentState.value ? SPACE_12 : 0 }, font), { fontSize: fontSize, lineHeight: lineHeight, fontWeight: fontWeight, color: inputTextColor, textAlignVertical: multiline ? "top" : "center", textAlign: textAlign
+                                ? textAlign
+                                : I18nManager.getConstants().isRTL
+                                    ? "right"
+                                    : "left", marginTop: Platform.OS === "android" ? SPACE_8 : 0 }),
+                        contentStyle,
+                    ] })))),
+        !disabled && clearButton && inputValue ? (React$3.createElement(TouchableOpacity, { onPress: handleClear, style: styles$b.clearButton },
+            React$3.createElement(Icon$1, { name: "IconClearText", type: "Svg", size: 24 }))) : (React$3.createElement(Spacer, { width: SPACE_12 })),
+        React$3.createElement(View$1, { style: { flexDirection: "row", height: "100%", paddingBottom: SPACE_6 } },
+            right && !clearButton && React$3.createElement(Spacer, { width: SPACE_8 }),
+            right && (React$3.createElement(View$1, { style: {
+                    paddingRight: SPACE_12,
+                } }, right)))));
+};
+var styles$b = StyleSheet.create({
+    placeholder: {
+        position: "absolute",
+        left: 0,
+    },
+    labelContainer: {
+        paddingTop: 0,
+        paddingBottom: 0,
+        // flex: 1,
+    },
+    input: {
+        // margin: 0,
+        flex: 1,
+        height: 48,
+    },
+    inputFlat: {
+        paddingTop: 24,
+        paddingBottom: 4,
+    },
+    inputFlatDense: {
+        paddingTop: 22,
+        paddingBottom: 2,
+    },
+    patchContainer: {
+        height: 24,
+        zIndex: 2,
+    },
+    densePatchContainer: {
+        height: 22,
+        zIndex: 2,
+    },
+    clearButton: {
+        padding: SPACE_8,
+    },
+});
+
 var TextInputDefault = function (_a) {
     var _b;
     var _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.editable, editable = _d === void 0 ? true : _d, label = _a.label, _e = _a.error, error = _e === void 0 ? false : _e, 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, _f = _a.render, render = _f === void 0 ? function (props) { return React$3.createElement(TextInput$1, __assign({}, props)); } : _f, _g = _a.multiline, multiline = _g === void 0 ? false : _g, 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, _h = _a.clearButton, clearButton = _h === void 0 ? false : _h, contentStyle = _a.contentStyle, _j = _a.value, value = _j === void 0 ? "" : _j, 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"]);
@@ -5700,7 +5724,7 @@ var TextInputDefault = function (_a) {
             left && React$3.createElement(Spacer, { width: CONSTANTS.SPACE_8 }),
             React$3.createElement(View, { full: true, style: [
                     {
-                        height: height || 44,
+                        height: height || 48,
                     },
                 ] },
                 multiline && renderLabel(), render === null || render === void 0 ? void 0 :
@@ -5714,19 +5738,23 @@ var TextInputDefault = function (_a) {
                                 ? textAlign
                                 : I18nManager.getConstants().isRTL
                                     ? "right"
-                                    : "left", height: height ? height : 44, paddingTop: getPaddingTopValue(), paddingBottom: multiline ? CONSTANTS.SPACE_4 : 0 }),
+                                    : "left", height: height ? height : 48, paddingTop: getPaddingTopValue(), paddingBottom: multiline ? CONSTANTS.SPACE_4 : 0 }),
                         contentStyle,
                     ] }))),
             !disabled && clearButton && inputValue ? (React$3.createElement(TouchableOpacity, { onPress: handleClear, style: multiline ? styles$a.clearButtonMultiline : 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, { center: true, paddingRight: CONSTANTS.SPACE_12 }, right)))));
+            right && !clearButton && React$3.createElement(Spacer, { width: CONSTANTS.SPACE_2 }),
+            right && (React$3.createElement(View, { style: {
+                    height: "100%",
+                    paddingBottom: CONSTANTS.SPACE_12,
+                    paddingRight: CONSTANTS.SPACE_12,
+                } }, right)))));
 };
 var styles$a = StyleSheet.create({
     input: {
         margin: 0,
         flex: 1,
-        height: 44,
+        height: 48,
         paddingLeft: 0,
         // paddingTop: Platform.OS === "ios" ? CONSTANTS.SPACE_4 : CONSTANTS.SPACE_2,
     },
@@ -6738,7 +6766,7 @@ var styles$3 = StyleSheet.create(__assign(__assign({}, containerStyles), { icon:
     } }));
 
 var Avatar = function (_a) {
-    var children = _a.children, _b = _a.name, name = _b === void 0 ? "Sapo" : _b, backgroundColor = _a.backgroundColor, style = _a.style, textColor = _a.textColor, _c = _a.size, size = _c === void 0 ? 64 : _c, source = _a.source, onPress = _a.onPress, textStyle = _a.textStyle, imageStyle = _a.imageStyle;
+    var children = _a.children, _b = _a.name, name = _b === void 0 ? "Sapo" : _b, backgroundColor = _a.backgroundColor, style = _a.style, textColor = _a.textColor, _c = _a.size, size = _c === void 0 ? 32 : _c, source = _a.source, onPress = _a.onPress, textStyle = _a.textStyle, imageStyle = _a.imageStyle;
     var theme = useInternalTheme();
     var colors = theme.colors;
     var getInitials = function (name) {
@@ -6757,7 +6785,7 @@ var Avatar = function (_a) {
                 return 28;
             case 48:
                 return 20;
-            case 24:
+            case 32:
                 return 16;
             default:
                 return 16;