sapo-components-ui-rn 1.1.89 → 1.1.90

package/dist/assets/index.ts

@@ -1,9 +1,29 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-let imageDefault: number | undefined;
+import IconClose from "./icon-close.svg";
+import IconCheckbox from "./icon-checkbox.svg";
+import IconCheckboxActive from "./icon-checkbox-active.svg";
+import IconRadio from "./icon-radio.svg";
+import IconRadioActive from "./icon-radio-active.svg";
+import IconSearch from "./icon-search.svg";
+import IconInfo from "./icon-info.svg";
+import IconSuccess from "./icon-success.svg";
+import IconWarning from "./icon-warning.svg";
+import IconArrowDown from "./icon-arrow-down.svg";
+import IconError from "./icon-error.svg";
+import IconClearText from "./icon-clear-text.svg";
+import IconDelNumber from './icon-del-number.svg'
 
-export const getImageDefault = (): number => {
-  if (imageDefault === undefined) {
-    imageDefault = require("./image_default.png");
-  }
-  return imageDefault;
+export const Svg = {
+  IconClose,
+  IconCheckbox,
+  IconCheckboxActive,
+  IconRadio,
+  IconRadioActive,
+  IconSearch,
+  IconInfo,
+  IconSuccess,
+  IconWarning,
+  IconArrowDown,
+  IconError,
+  IconClearText,
+  IconDelNumber,
 };

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

@@ -1,6 +1,7 @@
 import React from "react";
 import { StyleProp, ViewStyle, TextStyle, ImageStyle } from "react-native";
 interface AvatarProps {
+    testID?: string;
     children?: React.ReactNode;
     name?: string;
     borderColor?: string;
@@ -13,5 +14,5 @@ interface AvatarProps {
     textStyle?: StyleProp<TextStyle>;
     imageStyle?: StyleProp<ImageStyle>;
 }
-declare const Avatar: ({ children, name, backgroundColor, style, textColor, size, source, onPress, textStyle, imageStyle, }: AvatarProps) => React.JSX.Element;
+declare const Avatar: ({ testID, children, name, backgroundColor, style, textColor, size, source, onPress, textStyle, imageStyle, }: AvatarProps) => React.JSX.Element;
 export default Avatar;

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

@@ -5,6 +5,7 @@ export type BadgeSize = 'large' | 'medium' | 'small';
 export type BadgeMode = 'default' | 'outline';
 export type ProgressType = 'full' | 'half' | 'empty' | 'none';
 interface BadgeProps {
+    testID?: string;
     value?: string;
     borderColor?: string;
     backgroundColor?: string;

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

@@ -13,6 +13,7 @@ export interface ButtonIconProps {
     backgroundColor?: string;
     borderColor?: string;
     mode?: "normal" | "small";
+    testID?: string;
 }
 declare const _default: React.MemoExoticComponent<React.ComponentType<ButtonIconProps>>;
 export default _default;

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

@@ -1,6 +1,7 @@
 import React from "react";
 import { StyleProp, ViewStyle, TextStyle } from "react-native";
 interface CheckboxProps {
+    testID?: string;
     style?: StyleProp<ViewStyle>;
     content: string;
     onPress?: () => void;
@@ -10,5 +11,5 @@ interface CheckboxProps {
     checked?: boolean;
     iconSize?: number;
 }
-declare const Checkbox: ({ style, content, textStyle, onPress, disabled, leftIcon, checked, iconSize, }: CheckboxProps) => React.JSX.Element;
+declare const Checkbox: ({ testID, style, content, textStyle, onPress, disabled, leftIcon, checked, iconSize, }: CheckboxProps) => React.JSX.Element;
 export default Checkbox;

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

@@ -1,6 +1,7 @@
 import React from "react";
 import { StyleProp, ViewStyle, TextStyle } from "react-native";
 interface ChipBarProps {
+    testID?: string;
     style?: StyleProp<ViewStyle>;
     title: string;
     borderRadius?: number;
@@ -14,5 +15,5 @@ interface ChipBarProps {
     ellipsizeMode?: "head" | "middle" | "tail" | "clip";
     numberOfLines?: number;
 }
-declare const ChipBar: ({ style, borderRadius, title, textStyle, onPress, disabled, leftIcon, rightIcon, badge, checked, ellipsizeMode, numberOfLines, }: ChipBarProps) => React.JSX.Element;
+declare const ChipBar: ({ testID, style, borderRadius, title, textStyle, onPress, disabled, leftIcon, rightIcon, badge, checked, ellipsizeMode, numberOfLines, }: ChipBarProps) => React.JSX.Element;
 export default ChipBar;

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

@@ -1,6 +1,7 @@
 import React from "react";
 import { StyleProp, ViewStyle, TextStyle } from "react-native";
 interface CountingDotProps {
+    testID?: string;
     children?: React.ReactNode;
     value: string | number;
     borderColor?: string;
@@ -9,5 +10,5 @@ interface CountingDotProps {
     textColor?: string;
     textStyle?: StyleProp<TextStyle>;
 }
-declare const CountingDot: ({ children, value, backgroundColor, style, textColor, textStyle, }: CountingDotProps) => React.JSX.Element;
+declare const CountingDot: ({ testID, children, value, backgroundColor, style, textColor, textStyle, }: CountingDotProps) => React.JSX.Element;
 export default CountingDot;

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

@@ -14,6 +14,7 @@ export interface FloatingButtonProps {
     right?: number;
     left?: number;
     bottom?: number;
+    testID?: string;
 }
 declare const _default: React.MemoExoticComponent<React.ComponentType<FloatingButtonProps>>;
 export default _default;

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

@@ -10,6 +10,7 @@ export interface IconProps {
     onPress?: () => void;
     tintColor?: string;
     animatedProps?: Record<string, unknown>;
+    testID?: string;
 }
 declare const _default: React.NamedExoticComponent<IconProps>;
 export default _default;

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

@@ -8,6 +8,7 @@ interface SvgIconProps {
     style?: any;
     onPress?: () => void;
     disabled?: boolean;
+    testID?: string;
 }
 declare const SvgIcon: React.FC<SvgIconProps>;
 export default SvgIcon;

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

@@ -1,6 +1,7 @@
 import React from "react";
 import { StyleProp, ViewStyle, TextStyle } from "react-native";
 interface RadioButtonProps {
+    testID?: string;
     style?: StyleProp<ViewStyle>;
     content: string;
     onPress?: (value: boolean) => void;
@@ -9,5 +10,5 @@ interface RadioButtonProps {
     leftIcon?: React.ReactNode;
     checked?: boolean;
 }
-declare const RadioButton: ({ style, content, textStyle, onPress, disabled, leftIcon, checked, }: RadioButtonProps) => React.JSX.Element;
+declare const RadioButton: ({ testID, style, content, textStyle, onPress, disabled, leftIcon, checked, }: RadioButtonProps) => React.JSX.Element;
 export default RadioButton;

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

@@ -16,6 +16,7 @@ interface SearchInputProps {
     debounceTime?: number;
     autoFocus?: boolean;
     ref?: React.RefObject<TextInputNative | null>;
+    testID?: string;
 }
-declare const SearchInput: ({ value, disabled, rightIcon, clearButton, placeholder, onFocus, onBlur, onChangeText, style, height, debounceTime, autoFocus, textStyle, ref, }: SearchInputProps) => React.JSX.Element;
+declare const SearchInput: ({ value, disabled, rightIcon, clearButton, placeholder, onFocus, onBlur, onChangeText, style, height, debounceTime, autoFocus, textStyle, ref, testID, }: SearchInputProps) => React.JSX.Element;
 export default SearchInput;

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

@@ -21,5 +21,5 @@ export interface SelectionFieldProps extends TouchableOpacityProps {
     required?: boolean;
     height?: number;
 }
-declare const _default: React.MemoExoticComponent<({ style, content, label, error, borderColor, left, right, textStyle, labelStyle, textProps, onPress, disabled, textColor, labelColor, theme: themeOverrides, required, height, ...props }: SelectionFieldProps) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ style, content, label, error, borderColor, left, right, textStyle, labelStyle, textProps, onPress, disabled, textColor, labelColor, theme: themeOverrides, required, height, testID, ...props }: SelectionFieldProps) => React.JSX.Element>;
 export default _default;

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

@@ -5,6 +5,7 @@ interface SpacerProps {
     height?: number;
     style?: StyleProp<ViewStyle>;
     backgroundColor?: string;
+    testID?: string;
 }
-declare const Spacer: ({ style, width, height, backgroundColor, }: SpacerProps) => React.JSX.Element;
+declare const Spacer: ({ style, width, height, backgroundColor, testID, }: SpacerProps) => React.JSX.Element;
 export default Spacer;

package/dist/components/Switch/Switch.d.ts

@@ -13,6 +13,7 @@ export type Props = {
      * Callback called with the new value when it changes.
      */
     onValueChange?: (value: boolean) => void;
+    testID?: string;
 };
-declare const Switch: React.MemoExoticComponent<({ value, disabled, onValueChange, size }: Props) => React.JSX.Element>;
+declare const Switch: React.MemoExoticComponent<({ testID, value, disabled, onValueChange, size }: Props) => React.JSX.Element>;
 export default Switch;

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

@@ -14,6 +14,7 @@ interface TagProps {
     numberOfLines?: number;
     hideRightIcon?: boolean;
     height?: number;
+    testID?: string;
 }
-declare const Tag: ({ style, borderRadius, title, textStyle, onPress, disabled, leftIcon, rightIcon, checked, ellipsizeMode, numberOfLines, hideRightIcon, height, }: TagProps) => React.JSX.Element;
+declare const Tag: ({ style, borderRadius, title, textStyle, onPress, disabled, leftIcon, rightIcon, checked, ellipsizeMode, numberOfLines, hideRightIcon, height, testID, }: TagProps) => React.JSX.Element;
 export default Tag;

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

@@ -17,6 +17,7 @@ export type ViewVisibleAnimatedProps = {
     renderHiddenContent?: React.ReactNode;
     children?: React.ReactNode;
     disableHiddenContent?: boolean;
+    testID?: string;
 };
 declare const ViewVisibleAnimated: React.NamedExoticComponent<ViewVisibleAnimatedProps & React.RefAttributes<{
     show: () => void;

package/dist/index.esm.js

@@ -1526,12 +1526,12 @@ var ViewCustom = forwardRef$1(function (_a, ref) {
     };
     var defaultStyle = getStyle();
     var Component = onPress ? TouchableOpacity : View$1;
-    return (React__default.createElement(Component, __assign({ ref: ref, activeOpacity: activeOpacity, onPress: onPress, disabled: disabled, style: [defaultStyle, style], onLayout: onLayout, onMagicTap: onMagicTap, onMoveShouldSetResponder: onMoveShouldSetResponder, onMoveShouldSetResponderCapture: onMoveShouldSetResponderCapture, onResponderGrant: onResponderGrant, onResponderMove: onResponderMove, onResponderReject: onResponderReject, onResponderRelease: onResponderRelease, onResponderTerminate: onResponderTerminate, onResponderTerminationRequest: onResponderTerminationRequest, onStartShouldSetResponder: onStartShouldSetResponder, onStartShouldSetResponderCapture: onStartShouldSetResponderCapture, testID: testID, nativeID: nativeID, collapsable: collapsable, needsOffscreenAlphaCompositing: needsOffscreenAlphaCompositing, renderToHardwareTextureAndroid: renderToHardwareTextureAndroid, shouldRasterizeIOS: shouldRasterizeIOS }, restProps), children));
+    return (React__default.createElement(Component, __assign({ ref: ref, activeOpacity: activeOpacity, onPress: onPress, disabled: disabled, style: [defaultStyle, style], onLayout: onLayout, onMagicTap: onMagicTap, onMoveShouldSetResponder: onMoveShouldSetResponder, onMoveShouldSetResponderCapture: onMoveShouldSetResponderCapture, onResponderGrant: onResponderGrant, onResponderMove: onResponderMove, onResponderReject: onResponderReject, onResponderRelease: onResponderRelease, onResponderTerminate: onResponderTerminate, onResponderTerminationRequest: onResponderTerminationRequest, onStartShouldSetResponder: onStartShouldSetResponder, onStartShouldSetResponderCapture: onStartShouldSetResponderCapture, testID: testID, nativeID: nativeID, collapsable: collapsable !== null && collapsable !== void 0 ? collapsable : (testID ? false : undefined), needsOffscreenAlphaCompositing: needsOffscreenAlphaCompositing, renderToHardwareTextureAndroid: renderToHardwareTextureAndroid, shouldRasterizeIOS: shouldRasterizeIOS }, restProps), children));
 });
 var View = React__default.memo(ViewCustom);
 
 var Switch = memo(function (_a) {
-    var value = _a.value, disabled = _a.disabled, onValueChange = _a.onValueChange, _b = _a.size, size = _b === void 0 ? "normal" : _b;
+    var testID = _a.testID, value = _a.value, disabled = _a.disabled, onValueChange = _a.onValueChange, _b = _a.size, size = _b === void 0 ? "normal" : _b;
     var theme = useInternalTheme();
     var colors = theme.colors;
     var progress = useSharedValue(value ? 1 : 0);
@@ -1604,7 +1604,7 @@ var Switch = memo(function (_a) {
         }
     }, [size, colors]);
     return (React$3.createElement(View, { row: true },
-        React$3.createElement(TouchableOpacity, { activeOpacity: 1, onPress: handleSwitch, disabled: disabled, style: disabled ? { opacity: 0.6 } : {} },
+        React$3.createElement(TouchableOpacity, { testID: testID, activeOpacity: 1, onPress: handleSwitch, disabled: disabled, style: disabled ? { opacity: 0.6 } : {} },
             React$3.createElement(Animated.View, { style: [styles$j.vSegment, backgroundColor, getSizeSwitch()] },
                 React$3.createElement(Animated.View, { style: [styles$j.animated, animatedStyle, getSizeCircle()] })))));
 });
@@ -4577,7 +4577,7 @@ var Text = function (props) {
     };
     var defaultStyle = _getStyle();
     var Component = Text$2;
-    return (React__default.createElement(Component, __assign({ onPress: onPress, style: [defaultStyle, props.style], allowFontScaling: false }, rest), children));
+    return (React__default.createElement(Component, __assign({ onPress: onPress, style: [defaultStyle, props.style], allowFontScaling: false, accessible: true }, rest), children));
 };
 var Text$1 = memoDeepEqual(Text);
 
@@ -4728,8 +4728,8 @@ var styles$f = StyleSheet.create({
 });
 
 var Spacer = function (_a) {
-    var style = _a.style, _b = _a.width, width = _b === void 0 ? CONSTANTS.SPACE_16 : _b, _c = _a.height, height = _c === void 0 ? CONSTANTS.SPACE_12 : _c, backgroundColor = _a.backgroundColor;
-    return (React__default.createElement(View, { backgroundColor: backgroundColor || "transparent", width: width, height: height, style: [style] }));
+    var style = _a.style, _b = _a.width, width = _b === void 0 ? CONSTANTS.SPACE_16 : _b, _c = _a.height, height = _c === void 0 ? CONSTANTS.SPACE_12 : _c, backgroundColor = _a.backgroundColor, testID = _a.testID;
+    return (React__default.createElement(View, { testID: testID, backgroundColor: backgroundColor || "transparent", width: width, height: height, style: [style] }));
 };
 
 Dimensions.get("window").height;
@@ -4809,13 +4809,13 @@ var Svg = {
 };
 
 var SvgIcon = function (_a) {
-    var name = _a.name, _b = _a.width, width = _b === void 0 ? 24 : _b, _c = _a.height, height = _c === void 0 ? 24 : _c, _d = _a.color, color = _d === void 0 ? colors.ink.INK40 : _d, style = _a.style, onPress = _a.onPress, _e = _a.disabled, disabled = _e === void 0 ? false : _e;
+    var name = _a.name, _b = _a.width, width = _b === void 0 ? 24 : _b, _c = _a.height, height = _c === void 0 ? 24 : _c, _d = _a.color, color = _d === void 0 ? colors.ink.INK40 : _d, style = _a.style, onPress = _a.onPress, _e = _a.disabled, disabled = _e === void 0 ? false : _e, testID = _a.testID;
     var IconComponent = Svg[name];
     if (!IconComponent) {
         console.warn("Icon \"".concat(name, "\" kh\u00F4ng t\u1ED3n t\u1EA1i trong Svg."));
         return null;
     }
-    return (React__default.createElement(IconComponent, { width: width, height: height, color: disabled ? colors.ink.INK20 : color, style: style, onPress: disabled ? undefined : onPress }));
+    return (React__default.createElement(IconComponent, { testID: testID, width: width, height: height, color: disabled ? colors.ink.INK20 : color, style: style, onPress: disabled ? undefined : onPress }));
 };
 
 var TextInputFlat = function (_a) {
@@ -6353,9 +6353,9 @@ var styles$b = StyleSheet.create(__assign(__assign({}, containerStyles), { disab
 var index$3 = React__default.memo(Button);
 
 var FloatingButton = function (_a) {
-    var isLoading = _a.isLoading, disabled = _a.disabled, onPress = _a.onPress, style = _a.style, _b = _a.hiddenBackground, hiddenBackground = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? BUTTON_HEIGHT : _c, children = _a.children, backgroundColor = _a.backgroundColor, props = _a.props, _d = _a.top, top = _d === void 0 ? 0 : _d, _e = _a.right, right = _e === void 0 ? 0 : _e, _f = _a.left, left = _f === void 0 ? 0 : _f, _g = _a.bottom, bottom = _g === void 0 ? 0 : _g;
+    var isLoading = _a.isLoading, disabled = _a.disabled, onPress = _a.onPress, style = _a.style, _b = _a.hiddenBackground, hiddenBackground = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? BUTTON_HEIGHT : _c, children = _a.children, backgroundColor = _a.backgroundColor, props = _a.props, _d = _a.top, top = _d === void 0 ? 0 : _d, _e = _a.right, right = _e === void 0 ? 0 : _e, _f = _a.left, left = _f === void 0 ? 0 : _f, _g = _a.bottom, bottom = _g === void 0 ? 0 : _g, testID = _a.testID;
     var colors = useInternalTheme().colors;
-    return (React__default.createElement(TouchableOpacity, __assign({ activeOpacity: 0.8, onPress: onPress }, props, { disabled: disabled || isLoading, style: [
+    return (React__default.createElement(TouchableOpacity, __assign({ testID: testID, activeOpacity: 0.8, onPress: onPress }, props, { disabled: disabled || isLoading, style: [
             styles$a.btn,
             top > 0 && { top: top },
             right > 0 && { right: right },
@@ -6390,7 +6390,7 @@ var styles$a = StyleSheet.create({
 var index$2 = memoDeepEqual(FloatingButton);
 
 var ViewVisibleAnimated = React__default.memo(React__default.forwardRef(function (_a, ref) {
-    var onShowStart = _a.onShowStart, onShowDone = _a.onShowDone, onDone = _a.onDone, style = _a.style, children = _a.children, _b = _a.autoHide, autoHide = _b === void 0 ? false : _b, _c = _a.scaleEnable, scaleEnable = _c === void 0 ? true : _c, _d = _a.translateEnable, translateEnable = _d === void 0 ? true : _d, _e = _a.delay, delay = _e === void 0 ? 100 : _e, _f = _a.duration, duration = _f === void 0 ? 250 : _f, _g = _a.timeout, timeout = _g === void 0 ? 1000 : _g, _h = _a.autoShow, autoShow = _h === void 0 ? true : _h, _j = _a.pointerEvents, pointerEvents = _j === void 0 ? "auto" : _j, _k = _a.scaleType, scaleType = _k === void 0 ? "in" : _k, _l = _a.renderHiddenContent, renderHiddenContent = _l === void 0 ? null : _l, _m = _a.disableHiddenContent, disableHiddenContent = _m === void 0 ? false : _m;
+    var onShowStart = _a.onShowStart, onShowDone = _a.onShowDone, onDone = _a.onDone, style = _a.style, children = _a.children, _b = _a.autoHide, autoHide = _b === void 0 ? false : _b, _c = _a.scaleEnable, scaleEnable = _c === void 0 ? true : _c, _d = _a.translateEnable, translateEnable = _d === void 0 ? true : _d, _e = _a.delay, delay = _e === void 0 ? 100 : _e, _f = _a.duration, duration = _f === void 0 ? 250 : _f, _g = _a.timeout, timeout = _g === void 0 ? 1000 : _g, _h = _a.autoShow, autoShow = _h === void 0 ? true : _h, _j = _a.pointerEvents, pointerEvents = _j === void 0 ? "auto" : _j, _k = _a.scaleType, scaleType = _k === void 0 ? "in" : _k, _l = _a.renderHiddenContent, renderHiddenContent = _l === void 0 ? null : _l, _m = _a.disableHiddenContent, disableHiddenContent = _m === void 0 ? false : _m, testID = _a.testID;
     useImperativeHandle(ref, function () { return ({
         hide: hide,
         show: show,
@@ -6481,7 +6481,7 @@ var ViewVisibleAnimated = React__default.memo(React__default.forwardRef(function
             callback === null || callback === void 0 ? void 0 : callback();
         });
     };
-    return (React__default.createElement(Animated$1.View, { style: [
+    return (React__default.createElement(Animated$1.View, { testID: testID, style: [
             style,
             {
                 opacity: visibleAnimation,
@@ -6509,7 +6509,8 @@ var SPACER = {
     MEDIUM: 'medium',
     LARGE: 'large',
 };
-var Toast = memoWithRef(function (_props, ref) {
+var Toast = memoWithRef(function (props, ref) {
+    var testID = props.testID;
     var _a = useState('Thông báo'), message = _a[0], setMessage = _a[1];
     var viewVisibleAnimatedRef = useRef(null);
     var _b = useSafeAreaInsets(), bottom = _b.bottom, top = _b.top;
@@ -6621,7 +6622,7 @@ var Toast = memoWithRef(function (_props, ref) {
                 return 0;
         }
     };
-    return (React__default.createElement(ViewVisibleAnimated, { ref: viewVisibleAnimatedRef, autoShow: false, scaleEnable: true, style: [
+    return (React__default.createElement(ViewVisibleAnimated, { testID: testID, ref: viewVisibleAnimatedRef, autoShow: false, scaleEnable: true, style: [
             styles$9.container,
             options.position === POSITION.BOTTOM && {
                 bottom: bottom
@@ -6820,7 +6821,7 @@ var ProgressCircle = function (_a) {
         } }));
 };
 var Badge = React__default.memo(function (_a) {
-    var _b = _a.value, value = _b === void 0 ? '1' : _b, style = _a.style, textColor = _a.textColor, textStyle = _a.textStyle, _c = _a.type, type = _c === void 0 ? 'default' : _c, _d = _a.badgeSize, badgeSize = _d === void 0 ? 'large' : _d, _e = _a.mode, mode = _e === void 0 ? 'default' : _e, textSize = _a.textSize, borderColor = _a.borderColor, backgroundColor = _a.backgroundColor, _f = _a.progressType, progressType = _f === void 0 ? 'none' : _f, leftIcon = _a.leftIcon;
+    var testID = _a.testID, _b = _a.value, value = _b === void 0 ? '1' : _b, style = _a.style, textColor = _a.textColor, textStyle = _a.textStyle, _c = _a.type, type = _c === void 0 ? 'default' : _c, _d = _a.badgeSize, badgeSize = _d === void 0 ? 'large' : _d, _e = _a.mode, mode = _e === void 0 ? 'default' : _e, textSize = _a.textSize, borderColor = _a.borderColor, backgroundColor = _a.backgroundColor, _f = _a.progressType, progressType = _f === void 0 ? 'none' : _f, leftIcon = _a.leftIcon;
     var theme = useInternalTheme();
     var colors = theme.colors;
     var sizeStyles = useMemo(function () {
@@ -6940,10 +6941,10 @@ var Badge = React__default.memo(function (_a) {
         return textSize || ((_a = BADGE_CONFIGS.sizes[badgeSize]) === null || _a === void 0 ? void 0 : _a.textSize) || 12;
     }, [textSize, badgeSize]);
     if (badgeSize === 'small') {
-        return (React__default.createElement(View, { row: true, style: style },
+        return (React__default.createElement(View, { testID: testID, row: true, style: style },
             React__default.createElement(ProgressCircle, { progress: progressType, color: typeStyles.backgroundColor })));
     }
-    return (React__default.createElement(View, { row: true },
+    return (React__default.createElement(View, { testID: testID, row: true },
         React__default.createElement(View, { row: true, center: true, borderRadius: 999, borderWidth: CONSTANTS.BORDER_WIDTH_1, style: [sizeStyles, typeStyles, style] },
             leftIcon && React__default.createElement(View, { paddingRight: CONSTANTS.SPACE_4 }, leftIcon),
             progressType !== 'none' && (React__default.createElement(ProgressCircle, { progress: progressType, color: getColorProgress.color })),
@@ -6954,13 +6955,13 @@ Badge.displayName = 'Badge';
 var styles$8 = StyleSheet.create(__assign({}, containerStyles));
 
 var CountingDot = function (_a) {
-    var children = _a.children, _b = _a.value, value = _b === void 0 ? "1" : _b, backgroundColor = _a.backgroundColor, style = _a.style, textColor = _a.textColor, textStyle = _a.textStyle;
+    var testID = _a.testID, children = _a.children, _b = _a.value, value = _b === void 0 ? "1" : _b, backgroundColor = _a.backgroundColor, style = _a.style, textColor = _a.textColor, textStyle = _a.textStyle;
     var theme = useInternalTheme();
     var colors = theme.colors;
     if (children) {
-        return React__default.createElement(View, { style: style }, children);
+        return React__default.createElement(View, { testID: testID, style: style }, children);
     }
-    return (React__default.createElement(View, { row: true },
+    return (React__default.createElement(View, { testID: testID, row: true },
         React__default.createElement(View, { center: true, borderRadius: CONSTANTS.BORDER_RADIUS_12, backgroundColor: backgroundColor || colors.surfaceCriticalDefault, paddingHorizontal: CONSTANTS.SPACE_4, paddingVertical: CONSTANTS.SPACE_2, style: [styles$7.container, style] },
             React__default.createElement(Text$1, { size: 10, style: [styles$7.textMedium, textStyle], color: textColor || colors.textOnFillDefault }, value))));
 };
@@ -6970,7 +6971,7 @@ var styles$7 = StyleSheet.create(__assign(__assign({}, containerStyles), { conta
     } }));
 
 var ChipBar = 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.badge, badge = _e === void 0 ? 0 : _e, _f = _a.checked, checked = _f === void 0 ? false : _f, _g = _a.ellipsizeMode, ellipsizeMode = _g === void 0 ? "tail" : _g, _h = _a.numberOfLines, numberOfLines = _h === void 0 ? 1 : _h;
+    var testID = _a.testID, 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.badge, badge = _e === void 0 ? 0 : _e, _f = _a.checked, checked = _f === void 0 ? false : _f, _g = _a.ellipsizeMode, ellipsizeMode = _g === void 0 ? "tail" : _g, _h = _a.numberOfLines, numberOfLines = _h === void 0 ? 1 : _h;
     var theme = useInternalTheme();
     var colors = theme.colors;
     var handlePressChipBar = function () {
@@ -6978,7 +6979,7 @@ var ChipBar = function (_a) {
             onPress === null || onPress === void 0 ? void 0 : onPress(!checked);
         }
     };
-    return (React__default.createElement(View, { row: true },
+    return (React__default.createElement(View, { testID: testID, row: true },
         React__default.createElement(View, { row: true, disabled: disabled, paddingHorizontal: CONSTANTS.SPACE_12, paddingVertical: CONSTANTS.SPACE_8, borderRadius: borderRadius, borderWidth: 1, alignCenter: true, style: [
                 disabled && {
                     backgroundColor: colors.surfaceSecondaryDefault,
@@ -7023,7 +7024,7 @@ var useCheckboxColor = function (isActive, disabled) {
     }, [isActive, disabled, colors]);
 };
 var Checkbox = function (_a) {
-    var style = _a.style, _b = _a.content, content = _b === void 0 ? "content" : _b, textStyle = _a.textStyle, onPress = _a.onPress, _c = _a.disabled, disabled = _c === void 0 ? false : _c, leftIcon = _a.leftIcon, _d = _a.checked, checked = _d === void 0 ? false : _d, _e = _a.iconSize, iconSize = _e === void 0 ? 24 : _e;
+    var testID = _a.testID, style = _a.style, _b = _a.content, content = _b === void 0 ? "content" : _b, textStyle = _a.textStyle, onPress = _a.onPress, _c = _a.disabled, disabled = _c === void 0 ? false : _c, leftIcon = _a.leftIcon, _d = _a.checked, checked = _d === void 0 ? false : _d, _e = _a.iconSize, iconSize = _e === void 0 ? 24 : _e;
     var theme = useInternalTheme();
     var colors = theme.colors;
     var _f = useState(checked), isActive = _f[0], setActive = _f[1];
@@ -7034,7 +7035,7 @@ var Checkbox = function (_a) {
     useEffect(function () {
         setActive(checked);
     }, [checked]);
-    return (React__default.createElement(View, { row: true, disabled: disabled, alignCenter: true, style: [style], onPress: handlePress },
+    return (React__default.createElement(View, { testID: testID, row: true, disabled: disabled, alignCenter: true, style: [style], onPress: handlePress },
         leftIcon ? (React__default.createElement(View, { paddingRight: CONSTANTS.SPACE_8 }, leftIcon)) : (React__default.createElement(View, { paddingRight: CONSTANTS.SPACE_8 },
             React__default.createElement(SvgIcon, { name: isActive ? "IconCheckboxActive" : "IconCheckbox", width: iconSize, height: iconSize, color: checkboxColor }))),
         React__default.createElement(View, { full: true },
@@ -7052,7 +7053,7 @@ var styles$5 = StyleSheet.create(__assign(__assign({}, containerStyles), { icon:
     } }));
 
 var RadioButton = function (_a) {
-    var style = _a.style, _b = _a.content, content = _b === void 0 ? "content" : _b, textStyle = _a.textStyle, onPress = _a.onPress, _c = _a.disabled, disabled = _c === void 0 ? false : _c, leftIcon = _a.leftIcon, _d = _a.checked, checked = _d === void 0 ? false : _d;
+    var testID = _a.testID, style = _a.style, _b = _a.content, content = _b === void 0 ? "content" : _b, textStyle = _a.textStyle, onPress = _a.onPress, _c = _a.disabled, disabled = _c === void 0 ? false : _c, leftIcon = _a.leftIcon, _d = _a.checked, checked = _d === void 0 ? false : _d;
     var theme = useInternalTheme();
     var colors = theme.colors;
     var handlePress = useCallback(function () {
@@ -7067,7 +7068,7 @@ var RadioButton = function (_a) {
         }
         return colors.surfacePrimaryDefault;
     }, [checked, disabled]);
-    return (React__default.createElement(View, { row: true, disabled: disabled, alignCenter: true, style: [style], onPress: handlePress },
+    return (React__default.createElement(View, { testID: testID, row: true, disabled: disabled, alignCenter: true, style: [style], onPress: handlePress },
         leftIcon ? (React__default.createElement(View, { paddingRight: CONSTANTS.SPACE_8 }, leftIcon)) : (React__default.createElement(View, { paddingRight: CONSTANTS.SPACE_8 },
             React__default.createElement(SvgIcon, { name: checked ? "IconRadioActive" : "IconRadio", width: 24, height: 24, color: getColorCheckbox }))),
         React__default.createElement(View, { full: true },
@@ -7085,7 +7086,7 @@ var styles$4 = StyleSheet.create(__assign(__assign({}, containerStyles), { icon:
     } }));
 
 var Avatar = function (_a) {
-    var children = _a.children, _b = _a.name, name = _b === void 0 ? "N A" : _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 testID = _a.testID, children = _a.children, _b = _a.name, name = _b === void 0 ? "N A" : _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) {
@@ -7096,7 +7097,7 @@ var Avatar = function (_a) {
         return (words[0][0] + words[words.length - 1][0]).toUpperCase();
     };
     if (children) {
-        return React__default.createElement(View, { style: style }, children);
+        return React__default.createElement(View, { testID: testID, style: style }, children);
     }
     var getSize = function (size) {
         switch (size) {
@@ -7122,7 +7123,7 @@ var Avatar = function (_a) {
                 return 24;
         }
     };
-    return (React__default.createElement(View, { onPress: onPress, width: size, height: size, borderRadius: size / 2, center: true, backgroundColor: backgroundColor || colors.surfaceSecondaryDefault, style: [styles$3.container, style] }, source ? (React__default.createElement(Image$1, { resizeMode: "cover", source: source, style: [{ width: size, height: size }, imageStyle] })) : (React__default.createElement(Text$1, { size: getSize(size), lineHeight: getLineHeight(size), color: textColor || colors.textSecondary, style: textStyle || { fontWeight: "500" } }, getInitials(name)))));
+    return (React__default.createElement(View, { testID: testID, onPress: onPress, width: size, height: size, borderRadius: size / 2, center: true, backgroundColor: backgroundColor || colors.surfaceSecondaryDefault, style: [styles$3.container, style] }, source ? (React__default.createElement(Image$1, { resizeMode: "cover", source: source, style: [{ width: size, height: size }, imageStyle] })) : (React__default.createElement(Text$1, { size: getSize(size), lineHeight: getLineHeight(size), color: textColor || colors.textSecondary, style: textStyle || { fontWeight: "500" } }, getInitials(name)))));
 };
 var styles$3 = StyleSheet.create({
     container: {
@@ -7131,7 +7132,7 @@ var styles$3 = StyleSheet.create({
 });
 
 var SelectionField = function (_a) {
-    var style = _a.style, _b = _a.content, content = _b === void 0 ? '' : _b, _c = _a.label, label = _c === void 0 ? '' : _c, _d = _a.error, error = _d === void 0 ? '' : _d, borderColor = _a.borderColor; _a.left; var right = _a.right, textStyle = _a.textStyle, labelStyle = _a.labelStyle, textProps = _a.textProps, onPress = _a.onPress, _e = _a.disabled, disabled = _e === void 0 ? false : _e, textColor = _a.textColor, labelColor = _a.labelColor; _a.theme; var _f = _a.required, required = _f === void 0 ? false : _f, _g = _a.height, height = _g === void 0 ? 48 : _g, props = __rest(_a, ["style", "content", "label", "error", "borderColor", "left", "right", "textStyle", "labelStyle", "textProps", "onPress", "disabled", "textColor", "labelColor", "theme", "required", "height"]);
+    var style = _a.style, _b = _a.content, content = _b === void 0 ? '' : _b, _c = _a.label, label = _c === void 0 ? '' : _c, _d = _a.error, error = _d === void 0 ? '' : _d, borderColor = _a.borderColor; _a.left; var right = _a.right, textStyle = _a.textStyle, labelStyle = _a.labelStyle, textProps = _a.textProps, onPress = _a.onPress, _e = _a.disabled, disabled = _e === void 0 ? false : _e, textColor = _a.textColor, labelColor = _a.labelColor; _a.theme; var _f = _a.required, required = _f === void 0 ? false : _f, _g = _a.height, height = _g === void 0 ? 48 : _g, testID = _a.testID, props = __rest(_a, ["style", "content", "label", "error", "borderColor", "left", "right", "textStyle", "labelStyle", "textProps", "onPress", "disabled", "textColor", "labelColor", "theme", "required", "height", "testID"]);
     var theme = useInternalTheme();
     var colors = theme.colors;
     var disabledTextStyle = {
@@ -7147,7 +7148,7 @@ var SelectionField = function (_a) {
         }
         return textColor || colors.textDefault;
     };
-    return (React__default.createElement(View, null,
+    return (React__default.createElement(View, { testID: testID },
         React__default.createElement(ScaleButton$1, __assign({ activeOpacity: 0.8, onPress: onPress }, props, { disabled: disabled || false }),
             React__default.createElement(View, { style: [
                     styles$2.container,
@@ -7212,13 +7213,13 @@ 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, _f = _a.debounceTime, debounceTime = _f === void 0 ? 500 : _f, _g = _a.autoFocus, autoFocus = _g === void 0 ? false : _g, textStyle = _a.textStyle, ref = _a.ref;
+    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, _f = _a.debounceTime, debounceTime = _f === void 0 ? 500 : _f, _g = _a.autoFocus, autoFocus = _g === void 0 ? false : _g, textStyle = _a.textStyle, ref = _a.ref, testID = _a.testID;
     var theme = useInternalTheme();
     var colors = theme.colors;
     var debouncedOnChangeText = useDebouncedCallback(function (text) {
         onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(text);
     }, debounceTime);
-    return (React__default.createElement(TextInput, { left: React__default.createElement(View, null,
+    return (React__default.createElement(TextInput, { testID: testID, left: React__default.createElement(View, null,
             React__default.createElement(SvgIcon, { name: "IconSearch", width: 24, height: 24 })), ref: ref, disabled: disabled, value: value, clearButton: clearButton, mode: "default", numberOfLines: 1, textBreakStrategy: "simple", multiline: false, placeholder: placeholder, placeholderTextColor: colors.textPlaceholder, right: rightIcon, onFocus: onFocus, autoFocus: autoFocus, onBlur: onBlur, allowFontScaling: false, onChangeText: debouncedOnChangeText, style: [
             {
                 height: height || 36,
@@ -7236,13 +7237,13 @@ var SearchInput = function (_a) {
 };
 
 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.checked, checked = _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;
+    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.checked, checked = _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, testID = _a.testID;
     var theme = useInternalTheme();
     var colors = theme.colors;
     var handlePressTag = useCallback(function () {
         onPress === null || onPress === void 0 ? void 0 : onPress(!checked);
     }, [checked]);
-    return (React__default.createElement(View, { row: true, height: height, disabled: disabled, paddingHorizontal: CONSTANTS.SPACE_12, paddingVertical: CONSTANTS.SPACE_8, borderRadius: borderRadius, center: true, style: [
+    return (React__default.createElement(View, { testID: testID, row: true, height: height, disabled: disabled, paddingHorizontal: CONSTANTS.SPACE_12, paddingVertical: CONSTANTS.SPACE_8, borderRadius: borderRadius, center: true, style: [
             disabled && {
                 backgroundColor: colors.surfaceSecondaryDefault,
                 borderColor: colors.surfaceSecondaryDefault,