sapo-components-ui-rn 1.0.68 → 1.0.69

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

@@ -14,5 +14,5 @@ interface SearchInputProps {
     onChangeText?: (text: string) => void;
     height?: number;
 }
-declare const SearchInput: ({ value, disabled, rightIcon, clearButton, placeholder, onFocus, onBlur, onChangeText, style, height, textStyle, }: SearchInputProps) => React.JSX.Element;
+declare const SearchInput: ({ value, disabled, rightIcon, clearButton, placeholder, onFocus, onBlur, onChangeText, style, height, }: SearchInputProps) => React.JSX.Element;
 export default SearchInput;

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

@@ -8,6 +8,7 @@ export type Props = React.ComponentPropsWithRef<typeof NativeTextInput> & {
     left?: React.ReactNode;
     right?: React.ReactNode;
     prefix?: string;
+    suffix?: string;
     textError?: string;
     maxValue?: number;
     type?: "integer" | "float";

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

@@ -1,4 +1,4 @@
 import * as React from "react";
 import type { ChildTextInputProps } from "./types";
-declare const TextInputDefault: ({ disabled, editable, label, error, selectionColor: customSelectionColor, cursorColor, outlineColor: customOutlineColor, activeOutlineColor, outlineStyle, textColor, dense, style, theme, render, multiline, parentState, innerRef, onFocus, forceFocus, onBlur, onChangeText, onLayout, left, right, placeholderTextColor, clearButton, contentStyle, value, textError, required, ...rest }: ChildTextInputProps) => React.JSX.Element;
+declare const TextInputDefault: ({ disabled, editable, label, error, selectionColor: customSelectionColor, cursorColor, outlineColor: customOutlineColor, activeOutlineColor, outlineStyle, textColor, dense, style, theme, render, multiline, parentState, innerRef, onFocus, forceFocus, onBlur, onChangeText, onLayout, left, right, prefix, suffix, placeholderTextColor, clearButton, contentStyle, value, textError, required, ...rest }: ChildTextInputProps) => React.JSX.Element;
 export default TextInputDefault;

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, prefix, placeholderTextColor, clearButton, contentStyle, scaledLabel, outlineStyle, outlineColor, value, textError, required, ...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, suffix, placeholderTextColor, clearButton, contentStyle, scaledLabel, outlineStyle, outlineColor, value, textError, required, ...rest }: ChildTextInputProps) => React.JSX.Element;
 export default TextInputFlat;

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

@@ -10,6 +10,7 @@ export interface TextInputNumberProps extends TouchableOpacityProps {
     right?: React.ReactNode;
     disabled?: boolean;
     prefix?: string;
+    suffix?: string;
     onChangeText?: (value: string) => void;
     clearButton?: boolean;
     theme?: ThemeProp;
@@ -18,5 +19,5 @@ export interface TextInputNumberProps extends TouchableOpacityProps {
     formatDecimal?: 1 | 2 | 3;
     required?: boolean;
 }
-declare const _default: React.MemoExoticComponent<({ style, value, label, textError, left, right, onChangeText, disabled, theme: themeOverrides, prefix, clearButton, maxValue, type, formatDecimal, required, ...props }: TextInputNumberProps) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ style, value, label, textError, left, right, onChangeText, disabled, theme: themeOverrides, prefix, suffix, clearButton, maxValue, type, formatDecimal, required, ...props }: TextInputNumberProps) => React.JSX.Element>;
 export default _default;

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

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

package/dist/index.d.ts

@@ -6,7 +6,6 @@ export * from "./styles/themes";
 export { default as shadow } from "./styles/shadow";
 export { default as overlay } from "./styles/overlay";
 export { default as configureFonts } from "./styles/fonts";
-export { default as ActivityIndicator } from "./components/ActivityIndicator";
 export { default as ProgressBar } from "./components/ProgressBar";
 export { default as Switch } from "./components/Switch/Switch";
 export { default as TextInput } from "./components/TextInput/TextInput";
@@ -27,7 +26,6 @@ export { default as SelectionField } from "./components/SelectionField";
 export { default as SearchInput } from "./components/SearchInput";
 export { default as Tag } from "./components/Tag";
 export { default as NumberKeyboard } from "./components/NumberKeyboard";
-export type { Props as ActivityIndicatorProps } from "./components/ActivityIndicator";
 export type { Props as SwitchProps } from "./components/Switch/Switch";
 export type { Props as TextInputProps } from "./components/TextInput/TextInput";
 export type { Props as TextInputAffixProps } from "./components/TextInput/Adornment/TextInputAffix";

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import { Platform, Dimensions, StyleSheet, useColorScheme, Animated, Easing, View as View$1, I18nManager, TouchableOpacity, Text as Text$2, Pressable, useWindowDimensions, TextInput as TextInput$1, Modal, ActivityIndicator as ActivityIndicator$1, ImageBackground, Image as Image$2 } from 'react-native';
+import { Platform, Dimensions, StyleSheet, useColorScheme, Animated, I18nManager, View as View$1, TouchableOpacity, Text as Text$2, Pressable, useWindowDimensions, TextInput as TextInput$1, Modal, ActivityIndicator, ImageBackground, Image as Image$2 } from 'react-native';
 import * as React$3 from 'react';
 import React__default, { memo, useCallback, forwardRef as forwardRef$1, useMemo, useState, useEffect, useRef, useImperativeHandle } from 'react';
 import require$$1 from 'deepmerge';
@@ -1637,139 +1637,6 @@ var elevationOverlayTransparency = {
     24: 16,
 };
 
-var DURATION = 2400;
-var ActivityIndicator = function (_a) {
-    var _b;
-    var _c = _a.animating, animating = _c === void 0 ? true : _c, indicatorColor = _a.color, _d = _a.hidesWhenStopped, hidesWhenStopped = _d === void 0 ? true : _d, _e = _a.size, indicatorSize = _e === void 0 ? "small" : _e, style = _a.style; _a.theme; var rest = __rest(_a, ["animating", "color", "hidesWhenStopped", "size", "style", "theme"]);
-    var theme = useInternalTheme();
-    var timer = React$3.useRef(new Animated.Value(0)).current;
-    var fade = React$3.useRef(new Animated.Value(!animating && hidesWhenStopped ? 0 : 1)).current;
-    var rotation = React$3.useRef(undefined);
-    var scale = theme.animation.scale;
-    var startRotation = React$3.useCallback(function () {
-        // Show indicator
-        Animated.timing(fade, {
-            duration: 200 * scale,
-            toValue: 1,
-            isInteraction: false,
-            useNativeDriver: true,
-        }).start();
-        // Circular animation in loop
-        if (rotation.current) {
-            timer.setValue(0);
-            // $FlowFixMe
-            Animated.loop(rotation.current).start();
-        }
-    }, [scale, fade, timer]);
-    var stopRotation = function () {
-        if (rotation.current) {
-            rotation.current.stop();
-        }
-    };
-    React$3.useEffect(function () {
-        if (rotation.current === undefined) {
-            // Circular animation in loop
-            rotation.current = Animated.timing(timer, {
-                duration: DURATION,
-                easing: Easing.linear,
-                // Animated.loop does not work if useNativeDriver is true on web
-                useNativeDriver: Platform.OS !== "web",
-                toValue: 1,
-                isInteraction: false,
-            });
-        }
-        if (animating) {
-            startRotation();
-        }
-        else if (hidesWhenStopped) {
-            // Hide indicator first and then stop rotation
-            Animated.timing(fade, {
-                duration: 200 * scale,
-                toValue: 0,
-                useNativeDriver: true,
-                isInteraction: false,
-            }).start(stopRotation);
-        }
-        else {
-            stopRotation();
-        }
-    }, [animating, fade, hidesWhenStopped, startRotation, scale, timer]);
-    var color = indicatorColor || ((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.surfaceBrandDefault);
-    var size = typeof indicatorSize === "string"
-        ? indicatorSize === "small"
-            ? 24
-            : 48
-        : indicatorSize
-            ? indicatorSize
-            : 24;
-    var frames = (60 * DURATION) / 1000;
-    var easing = Easing.bezier(0.4, 0.0, 0.7, 1.0);
-    var containerStyle = {
-        width: size,
-        height: size / 2,
-        overflow: "hidden",
-    };
-    return (React$3.createElement(View$1, __assign({ style: [styles$k.container, style] }, rest, { accessible: true, accessibilityRole: "progressbar", accessibilityState: { busy: animating } }),
-        React$3.createElement(Animated.View, { style: [{ width: size, height: size, opacity: fade }], collapsable: false }, [0, 1].map(function (index) {
-            // Thanks to https://github.com/n4kz/react-native-indicators for the great work
-            var inputRange = Array.from(new Array(frames), function (_, frameIndex) { return frameIndex / (frames - 1); });
-            var outputRange = Array.from(new Array(frames), function (_, frameIndex) {
-                var progress = (2 * frameIndex) / (frames - 1);
-                var rotation = index ? +(360 - 15) : -(180 - 15);
-                if (progress > 1.0) {
-                    progress = 2.0 - progress;
-                }
-                var direction = index ? -1 : +1;
-                return "".concat(direction * (180 - 30) * easing(progress) + rotation, "deg");
-            });
-            var layerStyle = {
-                width: size,
-                height: size,
-                transform: [
-                    {
-                        rotate: timer.interpolate({
-                            inputRange: [0, 1],
-                            outputRange: ["".concat(0 + 30 + 15, "deg"), "".concat(2 * 360 + 30 + 15, "deg")],
-                        }),
-                    },
-                ],
-            };
-            var viewportStyle = {
-                width: size,
-                height: size,
-                transform: [
-                    {
-                        translateY: index ? -size / 2 : 0,
-                    },
-                    {
-                        rotate: timer.interpolate({ inputRange: inputRange, outputRange: outputRange }),
-                    },
-                ],
-            };
-            var offsetStyle = index ? { top: size / 2 } : null;
-            var lineStyle = {
-                width: size,
-                height: size,
-                borderColor: color,
-                borderWidth: size / 10,
-                borderRadius: size / 2,
-            };
-            return (React$3.createElement(Animated.View, { key: index, style: [styles$k.layer] },
-                React$3.createElement(Animated.View, { style: layerStyle },
-                    React$3.createElement(Animated.View, { style: [containerStyle, offsetStyle], collapsable: false },
-                        React$3.createElement(Animated.View, { style: viewportStyle },
-                            React$3.createElement(Animated.View, { style: containerStyle, collapsable: false },
-                                React$3.createElement(Animated.View, { style: lineStyle })))))));
-        }))));
-};
-var styles$k = StyleSheet.create({
-    container: {
-        justifyContent: "center",
-        alignItems: "center",
-    },
-    layer: __assign(__assign({}, StyleSheet.absoluteFillObject), { justifyContent: "center", alignItems: "center" }),
-});
-
 var INDETERMINATE_DURATION = 2000;
 var INDETERMINATE_MAX_WIDTH = 0.6;
 var isRTL = I18nManager.isRTL;
@@ -5379,7 +5246,7 @@ 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, prefix = _a.prefix, placeholderTextColor = _a.placeholderTextColor, clearButton = _a.clearButton, contentStyle = _a.contentStyle, scaledLabel = _a.scaledLabel, outlineStyle = _a.outlineStyle, outlineColor = _a.outlineColor, value = _a.value, textError = _a.textError, required = _a.required, 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", "textError", "required"]);
+    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, suffix = _a.suffix, placeholderTextColor = _a.placeholderTextColor, clearButton = _a.clearButton, contentStyle = _a.contentStyle, scaledLabel = _a.scaledLabel, outlineStyle = _a.outlineStyle, outlineColor = _a.outlineColor, value = _a.value, textError = _a.textError, required = _a.required, 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", "suffix", "placeholderTextColor", "clearButton", "contentStyle", "scaledLabel", "outlineStyle", "outlineColor", "value", "textError", "required"]);
     var _g = React$3.useState(value || ""), inputValue = _g[0], setInputValue = _g[1];
     React$3.useEffect(function () {
         setInputValue(value || "");
@@ -5533,6 +5400,25 @@ var TextInputFlat = function (_a) {
             return theme.colors.borderPrimaryDefault;
         }
     };
+    var renderSuffix = function () {
+        var _a;
+        if (parentState.focused) {
+            return (React$3.createElement(View$1, { style: {
+                    paddingBottom: Platform.OS === "ios" ? 9 : 14,
+                } },
+                React$3.createElement(Text$1, { color: theme.colors.textSecondary }, " ",
+                    suffix)));
+        }
+        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 : 14,
+                } },
+                React$3.createElement(Text$1, { color: theme.colors.textSecondary }, " ",
+                    suffix)));
+        }
+        return React$3.createElement(View$1, null);
+    };
     var renderPrefix = function () {
         var _a;
         if (parentState.focused) {
@@ -5565,7 +5451,12 @@ var TextInputFlat = function (_a) {
                     ? theme.colors.surfacePrimaryDisabled
                     : theme.colors.surfacePrimaryDefault,
             } },
-            React$3.createElement(View$1, { style: { flexDirection: "row", height: "100%" } },
+            React$3.createElement(View$1, { style: {
+                    flexDirection: "row",
+                    height: "100%",
+                    alignItems: "center",
+                    justifyContent: "center",
+                } },
                 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 }),
@@ -5578,7 +5469,10 @@ var TextInputFlat = function (_a) {
                 ] },
                 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, required: required }, labelProps))) : null,
                 React$3.createElement(View$1, { style: { flexDirection: "row", alignItems: "flex-end" } },
-                    renderPrefix(), render === null || render === void 0 ? void 0 :
+                    !multiline &&
+                        prefix &&
+                        (prefix === null || prefix === void 0 ? void 0 : prefix.toString()) !== "" &&
+                        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$d.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
@@ -5587,13 +5481,18 @@ var TextInputFlat = function (_a) {
                                         ? "right"
                                         : "left", marginTop: Platform.OS === "android" ? SPACE_8 : SPACE_2 }),
                             contentStyle,
-                        ] })))),
+                        ] })),
+                    renderSuffix())),
             !disabled && clearButton && inputValue ? (React$3.createElement(TouchableOpacity, { onPress: handleClear, style: styles$d.clearButton },
                 React$3.createElement(Icon$1, { name: "IconClearText", type: "Svg", size: 24 }))) : (React$3.createElement(Spacer, { width: SPACE_12 })),
+            !multiline && right && (React$3.createElement(Spacer, { width: 1, height: 30, backgroundColor: theme.colors.borderPrimaryDefault, style: {
+                    marginRight: SPACE_8,
+                } })),
             React$3.createElement(View$1, { style: {
                     flexDirection: "row",
                     height: "100%",
-                    paddingBottom: SPACE_6,
+                    alignItems: "center",
+                    justifyContent: "center",
                 } },
                 right && !clearButton && React$3.createElement(Spacer, { width: SPACE_8 }),
                 right && (React$3.createElement(View$1, { style: {
@@ -5634,7 +5533,7 @@ var styles$d = StyleSheet.create({
         zIndex: 2,
     },
     clearButton: {
-        padding: SPACE_8,
+        padding: SPACE_6,
     },
     vError: {
         paddingTop: SPACE_4,
@@ -5643,14 +5542,14 @@ var styles$d = StyleSheet.create({
 });
 
 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, textError = _a.textError, required = _a.required, 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", "textError", "required"]);
+    var _b, _c;
+    var _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.editable, editable = _e === void 0 ? true : _e, label = _a.label, _f = _a.error, error = _f === void 0 ? false : _f, 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, _g = _a.render, render = _g === void 0 ? function (props) { return React$3.createElement(TextInput$1, __assign({}, props)); } : _g, _h = _a.multiline, multiline = _h === void 0 ? false : _h, 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, prefix = _a.prefix, suffix = _a.suffix, placeholderTextColor = _a.placeholderTextColor, _j = _a.clearButton, clearButton = _j === void 0 ? false : _j, contentStyle = _a.contentStyle, _k = _a.value, value = _k === void 0 ? "" : _k, textError = _a.textError, required = _a.required, 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", "prefix", "suffix", "placeholderTextColor", "clearButton", "contentStyle", "value", "textError", "required"]);
     var colors = theme.colors;
     var font = theme.fonts.bodyLarge;
-    var _k = (StyleSheet.flatten(style) || {}), fontSizeStyle = _k.fontSize, fontWeight = _k.fontWeight, lineHeightStyle = _k.lineHeight, height = _k.height, _l = _k.backgroundColor; _l === void 0 ? colors === null || colors === void 0 ? void 0 : colors.backgroundPrimary : _l; var textAlign = _k.textAlign; _k.minHeight; var viewStyle = __rest(_k, ["fontSize", "fontWeight", "lineHeight", "height", "backgroundColor", "textAlign", "minHeight"]);
+    var _l = (StyleSheet.flatten(style) || {}), fontSizeStyle = _l.fontSize, fontWeight = _l.fontWeight, lineHeightStyle = _l.lineHeight, height = _l.height, _m = _l.backgroundColor; _m === void 0 ? colors === null || colors === void 0 ? void 0 : colors.backgroundPrimary : _m; var textAlign = _l.textAlign; _l.minHeight; var viewStyle = __rest(_l, ["fontSize", "fontWeight", "lineHeight", "height", "backgroundColor", "textAlign", "minHeight"]);
     var fontSize = fontSizeStyle || MAXIMIZED_LABEL_FONT_SIZE;
     var lineHeight = lineHeightStyle || (Platform.OS === "web" ? fontSize * 1.2 : undefined);
-    var _m = getOutlinedInputColors({
+    var _o = getOutlinedInputColors({
         activeOutlineColor: activeOutlineColor,
         customOutlineColor: customOutlineColor,
         customSelectionColor: customSelectionColor,
@@ -5658,8 +5557,8 @@ var TextInputDefault = function (_a) {
         disabled: disabled,
         error: error,
         theme: theme,
-    }), inputTextColor = _m.inputTextColor, activeColor = _m.activeColor, selectionColor = _m.selectionColor;
-    var _o = React$3.useState(value || ""), inputValue = _o[0], setInputValue = _o[1];
+    }), inputTextColor = _o.inputTextColor, activeColor = _o.activeColor, selectionColor = _o.selectionColor;
+    var _p = React$3.useState(value || ""), inputValue = _p[0], setInputValue = _p[1];
     React$3.useEffect(function () {
         setInputValue(value || "");
     }, [value]);
@@ -5729,11 +5628,46 @@ var TextInputDefault = function (_a) {
         }
         return 0;
     };
+    var renderPrefix = function () {
+        var _a;
+        if (parentState.focused) {
+            return (React$3.createElement(View, { center: true, style: {
+                    height: "100%",
+                } },
+                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, { center: true, style: {
+                    height: "100%",
+                } },
+                React$3.createElement(Text$1, { color: theme.colors.textSecondary },
+                    prefix, " ")));
+        }
+        return React$3.createElement(View, null);
+    };
+    var renderSuffix = function () {
+        var _a;
+        if (parentState.focused) {
+            return (React$3.createElement(View, { center: true, style: {
+                    height: "100%",
+                } },
+                React$3.createElement(Text$1, { color: theme.colors.textSecondary }, " ",
+                    suffix)));
+        }
+        else if (parentState.value !== undefined &&
+            ((_a = parentState.value) === null || _a === void 0 ? void 0 : _a.toString()) !== "") {
+            return (React$3.createElement(View, { center: true, style: {
+                    height: "100%",
+                } },
+                React$3.createElement(Text$1, { color: theme.colors.textSecondary }, " ",
+                    suffix)));
+        }
+        return React$3.createElement(View, null);
+    };
     return (React$3.createElement(View, { style: viewStyle },
-        React$3.createElement(View, { row: true, 
-            // full
-            // alignCenter
-            justifyCenter: true, style: [
+        React$3.createElement(View, { row: true, alignCenter: !multiline, justifyCenter: true, style: [
                 {
                     borderRadius: CONSTANTS.BORDER_RADIUS_6,
                     borderWidth: 1,
@@ -5745,15 +5679,15 @@ var TextInputDefault = function (_a) {
                 },
                 contentStyle,
             ] },
-            React$3.createElement(View, { center: true, paddingLeft: CONSTANTS.SPACE_12 }, left),
+            React$3.createElement(View, { center: !multiline, paddingLeft: CONSTANTS.SPACE_12, paddingTop: multiline ? CONSTANTS.SPACE_12 : 0 }, left),
             left && React$3.createElement(Spacer, { width: CONSTANTS.SPACE_8 }),
             React$3.createElement(View, { full: true, style: [
                     {
                         height: height || 48,
                     },
                 ] },
-                multiline && renderLabel(), render === null || render === void 0 ? void 0 :
-                render(__assign(__assign({}, rest), { ref: innerRef, onChangeText: handleChangeText, value: inputValue, placeholder: ((_b = parentState.value) === null || _b === void 0 ? void 0 : _b.toString()) == ""
+                multiline && renderLabel(),
+                multiline ? (render === null || render === void 0 ? void 0 : render(__assign(__assign({}, rest), { ref: innerRef, onChangeText: handleChangeText, value: inputValue, placeholder: ((_b = parentState.value) === null || _b === void 0 ? void 0 : _b.toString()) == ""
                         ? parentState.focused
                             ? rest.placeholder
                             : label
@@ -5765,13 +5699,38 @@ var TextInputDefault = function (_a) {
                                     ? "right"
                                     : "left", height: height ? height : 48, paddingTop: getPaddingTopValue(), paddingBottom: multiline ? CONSTANTS.SPACE_4 : 0 }),
                         contentStyle,
-                    ] }))),
+                    ] }))) : (React$3.createElement(View, { style: {
+                        flexDirection: "row",
+                    } },
+                    !multiline &&
+                        prefix &&
+                        (prefix === null || prefix === void 0 ? void 0 : prefix.toString()) !== "" &&
+                        renderPrefix(), render === null || render === void 0 ? void 0 :
+                    render(__assign(__assign({}, rest), { ref: innerRef, onChangeText: handleChangeText, value: inputValue, placeholder: ((_c = parentState.value) === null || _c === void 0 ? void 0 : _c.toString()) == ""
+                            ? parentState.focused
+                                ? rest.placeholder
+                                : label
+                            : 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$c.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, paddingTop: getPaddingTopValue(), paddingBottom: multiline ? CONSTANTS.SPACE_4 : 0 }),
+                            contentStyle,
+                        ] })),
+                    !multiline && renderSuffix()))),
             !disabled && clearButton && inputValue ? (React$3.createElement(TouchableOpacity, { onPress: handleClear, style: multiline ? styles$c.clearButtonMultiline : styles$c.clearButton },
                 React$3.createElement(Icon$1, { name: "IconClearText", type: "Svg", size: 24 }))) : (React$3.createElement(Spacer, { width: CONSTANTS.SPACE_12 })),
+            !multiline && right && (React$3.createElement(Spacer, { width: 1, height: 30, backgroundColor: colors.borderPrimaryDefault, style: {
+                    marginRight: CONSTANTS.SPACE_8,
+                } })),
             right && !clearButton && React$3.createElement(Spacer, { width: CONSTANTS.SPACE_2 }),
-            right && (React$3.createElement(View, { style: {
-                    height: "100%",
+            right && (React$3.createElement(View, { center: !multiline, style: {
                     paddingRight: CONSTANTS.SPACE_12,
+                    paddingTop: multiline ? CONSTANTS.SPACE_12 : 0,
                 } }, right))),
         error && (textError === null || textError === void 0 ? void 0 : textError.toString()) !== "" && (React$3.createElement(View, { style: styles$c.vError },
             React$3.createElement(Text$1, { size: 12, numberOfLines: 1, color: theme.colors.textErrorDefault }, textError)))));
@@ -5782,7 +5741,6 @@ var styles$c = StyleSheet.create({
         flex: 1,
         height: 48,
         paddingLeft: 0,
-        // paddingTop: Platform.OS === "ios" ? CONSTANTS.SPACE_4 : CONSTANTS.SPACE_2,
     },
     clearButtonMultiline: {
         paddingRight: CONSTANTS.SPACE_12,
@@ -5947,12 +5905,12 @@ function formatNumberInput$1(value, formatDecimal) {
     return result;
 }
 var TextInputNumber = function (_a) {
-    var style = _a.style, _b = _a.value, value = _b === void 0 ? "" : _b, _c = _a.label, label = _c === void 0 ? "" : _c, _d = _a.textError, textError = _d === void 0 ? "" : _d, left = _a.left, right = _a.right, onChangeText = _a.onChangeText, _e = _a.disabled, disabled = _e === void 0 ? false : _e; _a.theme; var _f = _a.prefix, prefix = _f === void 0 ? "" : _f, _g = _a.clearButton, clearButton = _g === void 0 ? false : _g, _h = _a.maxValue, maxValue = _h === void 0 ? 999999999 : _h, _j = _a.type, type = _j === void 0 ? "integer" : _j, _k = _a.formatDecimal, formatDecimal = _k === void 0 ? 3 : _k, _l = _a.required, required = _l === void 0 ? false : _l, props = __rest(_a, ["style", "value", "label", "textError", "left", "right", "onChangeText", "disabled", "theme", "prefix", "clearButton", "maxValue", "type", "formatDecimal", "required"]);
+    var style = _a.style, _b = _a.value, value = _b === void 0 ? "" : _b, _c = _a.label, label = _c === void 0 ? "" : _c, _d = _a.textError, textError = _d === void 0 ? "" : _d, left = _a.left, right = _a.right, onChangeText = _a.onChangeText, _e = _a.disabled, disabled = _e === void 0 ? false : _e; _a.theme; var _f = _a.prefix, prefix = _f === void 0 ? "" : _f, _g = _a.suffix, suffix = _g === void 0 ? "" : _g, _h = _a.clearButton, clearButton = _h === void 0 ? false : _h, _j = _a.maxValue, maxValue = _j === void 0 ? 999999999 : _j, _k = _a.type, type = _k === void 0 ? "integer" : _k, _l = _a.formatDecimal, formatDecimal = _l === void 0 ? 3 : _l, _m = _a.required, required = _m === void 0 ? false : _m, props = __rest(_a, ["style", "value", "label", "textError", "left", "right", "onChangeText", "disabled", "theme", "prefix", "suffix", "clearButton", "maxValue", "type", "formatDecimal", "required"]);
     var theme = useInternalTheme();
     var colors = theme.colors;
-    var _m = useState(false), isShowModalKeyboard = _m[0], setIsShowModalKeyboard = _m[1];
-    var _o = useState((value === null || value === void 0 ? void 0 : value.toString()) || ""), inputValue = _o[0], setInputValue = _o[1];
-    var _p = useState((value === null || value === void 0 ? void 0 : value.toString()) || ""), numberValue = _p[0], setNumberValue = _p[1];
+    var _o = useState(false), isShowModalKeyboard = _o[0], setIsShowModalKeyboard = _o[1];
+    var _p = useState((value === null || value === void 0 ? void 0 : value.toString()) || ""), inputValue = _p[0], setInputValue = _p[1];
+    var _q = useState((value === null || value === void 0 ? void 0 : value.toString()) || ""), numberValue = _q[0], setNumberValue = _q[1];
     var disabledTextStyle = {
         color: colors.textSecondary,
     };
@@ -6068,8 +6026,8 @@ var TextInputNumber = function (_a) {
                     style,
                 ] },
                 React__default.createElement(Spacer, { width: SPACE_12 }),
-                left && (React__default.createElement(View, { paddingRight: SPACE_8, height: "100%" }, left)),
-                React__default.createElement(View, { full: true },
+                left && (React__default.createElement(View, { center: true, paddingRight: SPACE_8, height: "100%" }, left)),
+                React__default.createElement(View, { full: true, paddingRight: SPACE_4 },
                     !checkValueEmpty() && !checkLabelEmpty() && (React__default.createElement(Text$1, { size: 12, color: colors.textSecondary, style: [
                             disabled && {
                                 color: colors.textPlaceholder,
@@ -6088,10 +6046,15 @@ var TextInputNumber = function (_a) {
                                 checkValueEmpty()
                                     ? label
                                     : formatNumberInput$1(numberValue, formatDecimal),
-                                checkValueEmpty() && required && (React__default.createElement(Text$1, { color: colors.textErrorDefault }, " *")))))),
+                                checkValueEmpty() && required && (React__default.createElement(Text$1, { color: colors.textErrorDefault }, " *")))),
+                        !checkValueEmpty() && suffix.toString() !== "" && (React__default.createElement(Text$1, { numberOfLines: 1, color: colors.textSecondary, style: [disabled && disabledTextStyle] }, " ",
+                            suffix)))),
                 clearButton && !checkValueEmpty() && (React__default.createElement(TouchableOpacity, { activeOpacity: 0.8, onPress: handleClearInput },
                     React__default.createElement(Icon$1, { name: "IconClearText", type: "Svg", size: 24 }))),
-                right && (React__default.createElement(View, { paddingLeft: SPACE_8, height: "100%" }, right)),
+                right && (React__default.createElement(Spacer, { width: 1, height: 30, backgroundColor: theme.colors.borderPrimaryDefault, style: {
+                        marginLeft: SPACE_4,
+                    } })),
+                right && (React__default.createElement(View, { center: true, paddingLeft: SPACE_8, height: "100%" }, right)),
                 React__default.createElement(Spacer, { width: SPACE_12 }))),
         !disabled && textError.length > 0 && (React__default.createElement(View, { paddingHorizontal: SPACE_12, paddingVertical: SPACE_4 },
             React__default.createElement(Text$1, { size: 12, numberOfLines: 1, color: theme.colors.textErrorDefault }, textError))),
@@ -6229,7 +6192,7 @@ var DefaultRenderer = function (props) { return React__default.createElement(Tex
  * @extends TextInput props https://reactnative.dev/docs/textinput#props
  */
 var TextInput = forwardRef(function (_a, ref) {
-    var _b = _a.mode, mode = _b === void 0 ? "flat" : _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, textError = _a.textError, prefix = _a.prefix, maxValue = _a.maxValue, type = _a.type, _j = _a.required, required = _j === void 0 ? false : _j, rest = __rest(_a, ["mode", "dense", "disabled", "error", "multiline", "editable", "contentStyle", "render", "theme", "placeholderTextColor", "clearButton", "textError", "prefix", "maxValue", "type", "required"]);
+    var _b = _a.mode, mode = _b === void 0 ? "flat" : _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, textError = _a.textError, prefix = _a.prefix, suffix = _a.suffix, maxValue = _a.maxValue, type = _a.type, _j = _a.required, required = _j === void 0 ? false : _j, rest = __rest(_a, ["mode", "dense", "disabled", "error", "multiline", "editable", "contentStyle", "render", "theme", "placeholderTextColor", "clearButton", "textError", "prefix", "suffix", "maxValue", "type", "required"]);
     var theme = useInternalTheme();
     var isControlled = rest.value !== undefined;
     var validInputValue = isControlled ? rest.value : rest.defaultValue;
@@ -6415,7 +6378,7 @@ var TextInput = forwardRef(function (_a, ref) {
     var _t = rest.maxFontSizeMultiplier, maxFontSizeMultiplier = _t === void 0 ? 1.5 : _t;
     var scaledLabel = !!(value || focused);
     if (mode === "default") {
-        return (React__default.createElement(TextInputDefault, __assign({ dense: dense, disabled: disabled, error: errorProp, textError: textError, required: required, multiline: multiline, editable: editable, render: render }, rest, { theme: theme, value: value, placeholderTextColor: placeholderTextColor, clearButton: clearButton, parentState: {
+        return (React__default.createElement(TextInputDefault, __assign({ dense: dense, disabled: disabled, error: errorProp, textError: textError, required: required, multiline: multiline, editable: editable, prefix: prefix, suffix: suffix, render: render }, rest, { theme: theme, value: value, placeholderTextColor: placeholderTextColor, clearButton: clearButton, parentState: {
                 labeled: labeled,
                 error: error,
                 focused: focused,
@@ -6431,9 +6394,9 @@ var TextInput = forwardRef(function (_a, 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 })));
     }
     if (mode === "number") {
-        return (React__default.createElement(TextInputNumber$1, { textError: textError, disabled: disabled, prefix: prefix, value: value, right: rest.right, left: rest.left, required: required, label: rest.label, clearButton: clearButton, onChangeText: handleChangeText, maxValue: maxValue, formatDecimal: rest.formatDecimal, type: type }));
+        return (React__default.createElement(TextInputNumber$1, { textError: textError, disabled: disabled, prefix: prefix, suffix: suffix, value: value, right: rest.right, left: rest.left, required: required, label: rest.label, clearButton: clearButton, onChangeText: handleChangeText, maxValue: maxValue, formatDecimal: rest.formatDecimal, type: type }));
     }
-    return (React__default.createElement(TextInputFlat, __assign({ dense: dense, disabled: disabled, error: errorProp, textError: textError, editable: editable, clearButton: clearButton, required: required, render: render }, rest, { theme: theme, value: value, parentState: {
+    return (React__default.createElement(TextInputFlat, __assign({ dense: dense, disabled: disabled, error: errorProp, textError: textError, editable: editable, prefix: prefix, suffix: suffix, clearButton: clearButton, required: required, render: render }, rest, { theme: theme, value: value, parentState: {
             labeled: labeled,
             error: error,
             focused: focused,
@@ -6530,7 +6493,7 @@ var Button = function (_a) {
                 React__default.createElement(Spacer, { width: left ? CONSTANTS.SPACE_12 : CONSTANTS.SPACE_16 }),
                 !isLoading && left,
                 left && React__default.createElement(Spacer, { width: CONSTANTS.SPACE_8 }),
-                isLoading ? (React__default.createElement(ActivityIndicator$1, { color: (textStyle === null || textStyle === void 0 ? void 0 : textStyle.color) || renderTextColor() })) : (React__default.createElement(Text$1, __assign({ numberOfLines: 1, color: textColor || renderTextColor(), size: size, bold: bold, medium: medium, style: [disabled && disabledTextStyle, textStyle] }, textProps), title)),
+                isLoading ? (React__default.createElement(ActivityIndicator, { color: (textStyle === null || textStyle === void 0 ? void 0 : textStyle.color) || renderTextColor() })) : (React__default.createElement(Text$1, __assign({ numberOfLines: 1, color: textColor || renderTextColor(), size: size, bold: bold, medium: medium, style: [disabled && disabledTextStyle, textStyle] }, textProps), title)),
                 right && React__default.createElement(Spacer, { width: CONSTANTS.SPACE_8 }),
                 !isLoading && right,
                 React__default.createElement(Spacer, { width: right ? CONSTANTS.SPACE_12 : CONSTANTS.SPACE_16 })))));
@@ -6582,7 +6545,7 @@ var FloatingButton = function (_a) {
                     backgroundColor: colors.surfaceBrandDisabled,
                 },
                 style,
-            ] }, props), isLoading ? React__default.createElement(ActivityIndicator$1, { size: "small" }) : children)));
+            ] }, props), isLoading ? React__default.createElement(ActivityIndicator, { size: "small" }) : children)));
 };
 var styles$9 = StyleSheet.create({
     btn: {
@@ -7201,11 +7164,11 @@ var styles$2 = StyleSheet.create(__assign(__assign({}, containerStyles), { disab
 var index$1 = React__default.memo(SelectionField);
 
 var SearchInput = function (_a) {
-    var _b = _a.value, value = _b === void 0 ? "" : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, rightIcon = _a.rightIcon, _d = _a.clearButton, clearButton = _d === void 0 ? false : _d, _e = _a.placeholder, placeholder = _e === void 0 ? "Tìm kiếm" : _e, onFocus = _a.onFocus, onBlur = _a.onBlur, onChangeText = _a.onChangeText, style = _a.style, height = _a.height, textStyle = _a.textStyle;
+    var _b = _a.value, value = _b === void 0 ? "" : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, rightIcon = _a.rightIcon, _d = _a.clearButton, clearButton = _d === void 0 ? false : _d, _e = _a.placeholder, placeholder = _e === void 0 ? "Tìm kiếm" : _e, onFocus = _a.onFocus, onBlur = _a.onBlur, onChangeText = _a.onChangeText, style = _a.style, height = _a.height;
     var theme = useInternalTheme();
     var colors = theme.colors;
-    return (React__default.createElement(TextInput, { left: React__default.createElement(View, { center: true },
-            React__default.createElement(Icon$1, { name: "IconSearch", type: "Svg", size: 18 })), disabled: disabled, value: value, clearButton: clearButton, mode: "default", label: placeholder, placeholder: placeholder, right: rightIcon, onFocus: onFocus, onBlur: onBlur, allowFontScaling: false, onChangeText: onChangeText, textStyle: textStyle, style: [
+    return (React__default.createElement(TextInput, { left: React__default.createElement(View, null,
+            React__default.createElement(Icon$1, { name: "IconSearch", type: "Svg", size: 18 })), disabled: disabled, value: value, clearButton: clearButton, mode: "default", label: placeholder, placeholder: placeholder, right: rightIcon, onFocus: onFocus, onBlur: onBlur, allowFontScaling: false, onChangeText: onChangeText, style: [
             {
                 height: height || 36,
             },
@@ -7218,6 +7181,7 @@ var SearchInput = function (_a) {
             style,
         ] }));
 };
+StyleSheet.create(__assign({}, containerStyles));
 
 var Tag = function (_a) {
     var style = _a.style, _b = _a.borderRadius, borderRadius = _b === void 0 ? CONSTANTS.BORDER_RADIUS_ROUNDED : _b, _c = _a.title, title = _c === void 0 ? "content" : _c, textStyle = _a.textStyle, onPress = _a.onPress, _d = _a.disabled, disabled = _d === void 0 ? false : _d, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, _e = _a.isActive, isActive = _e === void 0 ? false : _e, _f = _a.ellipsizeMode, ellipsizeMode = _f === void 0 ? "tail" : _f, _g = _a.numberOfLines, numberOfLines = _g === void 0 ? 1 : _g, _h = _a.hideRightIcon, hideRightIcon = _h === void 0 ? false : _h, _j = _a.height, height = _j === void 0 ? 32 : _j;
@@ -7489,5 +7453,5 @@ var ToastProvider = forwardRef$1(function (_a, ref) {
         renderToast()));
 });
 
-export { ActivityIndicator, Avatar, Badge, index$3 as Button, CONSTANTS, Checkbox, ChipBar, CountingDot, DarkTheme, DefaultTheme, index$2 as FloatingButton, Image$1 as Image, LightTheme, index as NumberKeyboard, ProgressBar, RadioButton, SearchInput, index$1 as SelectionField, Spacer, Switch, Tag, Text$1 as Text, TextInput, ThemeColors, ThemeProvider, Toast, ToastProvider, View, adaptNavigationTheme, configureFonts, overlay, shadow, showToast, toastRef, useTheme };
+export { Avatar, Badge, index$3 as Button, CONSTANTS, Checkbox, ChipBar, CountingDot, DarkTheme, DefaultTheme, index$2 as FloatingButton, Image$1 as Image, LightTheme, index as NumberKeyboard, ProgressBar, RadioButton, SearchInput, index$1 as SelectionField, Spacer, Switch, Tag, Text$1 as Text, TextInput, ThemeColors, ThemeProvider, Toast, ToastProvider, View, adaptNavigationTheme, configureFonts, overlay, shadow, showToast, toastRef, useTheme };
 //# sourceMappingURL=index.esm.js.map