sapo-components-ui-rn 1.1.2 → 1.1.3

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

@@ -1,13 +1,20 @@
 import React from "react";
 import { StyleProp, ViewStyle, TextStyle } from "react-native";
+type BadgeType = "success" | "error" | "info" | "warning" | "default";
+type BadgeSize = "default" | "small" | "tiny";
+type BadgeMode = "default" | "outline";
 interface BadgeProps {
     children?: React.ReactNode;
-    value: string;
+    value?: string;
     borderColor?: string;
     backgroundColor?: string;
     style?: StyleProp<ViewStyle>;
     textColor?: string;
     textStyle?: StyleProp<TextStyle>;
+    type?: BadgeType;
+    badgeSize?: BadgeSize;
+    mode?: BadgeMode;
+    textSize?: number;
 }
-declare const Badge: ({ children, value, borderColor, backgroundColor, style, textColor, textStyle, }: BadgeProps) => React.JSX.Element;
+declare const Badge: React.NamedExoticComponent<BadgeProps>;
 export default Badge;

package/dist/index.esm.js

@@ -1801,7 +1801,7 @@ var Switch = memo(function (_a) {
     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(Animated.View, { style: [
-                    styles$i.vSegment,
+                    styles$j.vSegment,
                     backgroundColor,
                     {
                         width: 52,
@@ -1809,7 +1809,7 @@ var Switch = memo(function (_a) {
                     },
                 ] },
                 React$3.createElement(Animated.View, { style: [
-                        styles$i.animated,
+                        styles$j.animated,
                         animatedStyle,
                         {
                             width: 28,
@@ -1819,7 +1819,7 @@ var Switch = memo(function (_a) {
                         },
                     ] })))));
 });
-var styles$i = StyleSheet.create({
+var styles$j = StyleSheet.create({
     vSegment: {
         overflow: "hidden",
         borderRadius: 100,
@@ -2195,7 +2195,7 @@ var TextInputAffix = function (_a) {
     var textColor = getTextColor({ theme: theme, disabled: disabled });
     var content = (React__default.createElement(Text$2, { maxFontSizeMultiplier: maxFontSizeMultiplier, style: [{ color: textColor }, textStyle, labelStyle], onLayout: onTextLayout, testID: "".concat(testID, "-text") }, text));
     return (React__default.createElement(Animated$1.View, { style: [
-            styles$h.container,
+            styles$i.container,
             style,
             {
                 opacity: (visible === null || visible === void 0 ? void 0 : visible.interpolate({
@@ -2206,7 +2206,7 @@ var TextInputAffix = function (_a) {
         ], onLayout: onLayout, testID: testID }, onPress ? (React__default.createElement(Pressable, { onPress: onPress, accessibilityRole: "button", accessibilityLabel: accessibilityLabel }, content)) : (content)));
 };
 TextInputAffix.displayName = "TextInput.Affix";
-var styles$h = StyleSheet.create({
+var styles$i = StyleSheet.create({
     container: {
         position: "absolute",
         justifyContent: "center",
@@ -2264,13 +2264,13 @@ var AnimatedText = forwardRef(function AnimatedText(_a, ref) {
         }
         return (React$3.createElement(Animated$1.Text, __assign({ ref: ref }, rest, { style: [
                 font,
-                styles$g.text,
+                styles$h.text,
                 { writingDirection: writingDirection, color: theme.colors.backgroundPrimary },
                 style,
             ] })));
     }
 });
-var styles$g = StyleSheet.create({
+var styles$h = StyleSheet.create({
     text: {
         textAlign: "left",
     },
@@ -4852,7 +4852,7 @@ var InputLabel = function (props) {
     return (
     // Position colored placeholder and gray placeholder on top of each other and crossfade them
     // This gives the effect of animating the color, but allows us to use native driver
-    React__default.createElement(View$1, { pointerEvents: "none", style: [StyleSheet.absoluteFill, styles$f.overflow, styles$f.labelContainer] },
+    React__default.createElement(View$1, { pointerEvents: "none", style: [StyleSheet.absoluteFill, styles$g.overflow, styles$g.labelContainer] },
         React__default.createElement(Animated$1.View, { pointerEvents: "none", style: [
                 StyleSheet.absoluteFill,
                 Platform.OS !== "web" && { width: width },
@@ -4894,7 +4894,7 @@ var InputLabel = function (props) {
                     label,
                     required && React__default.createElement(Text$1, { color: theme.colors.textErrorDefault }, " *"))))));
 };
-var styles$f = StyleSheet.create({
+var styles$g = StyleSheet.create({
     overflow: {
         overflow: "hidden",
     },
@@ -4907,8 +4907,8 @@ var InputLabel$1 = React__default.memo(InputLabel);
 var Outline = function (_a) {
     var label = _a.label; _a.activeColor; _a.backgroundColor; _a.hasActiveOutline; _a.focused; _a.outlineColor; _a.roundness; var style = _a.style;
     return (React$3.createElement(View$1, { testID: "text-input-outline", pointerEvents: "none", style: [
-            styles$e.outline,
-            !label && styles$e.noLabelOutline,
+            styles$f.outline,
+            !label && styles$f.noLabelOutline,
             // eslint-disable-next-line react-native/no-inline-styles
             {
             // backgroundColor,
@@ -4919,7 +4919,7 @@ var Outline = function (_a) {
             style,
         ] }));
 };
-var styles$e = StyleSheet.create({
+var styles$f = StyleSheet.create({
     outline: {
         position: "absolute",
         left: 0,
@@ -5198,7 +5198,7 @@ var TextInputFlat = function (_a) {
         label: label,
         scale: fontScale,
         isAndroid: isAndroid,
-        styles: StyleSheet.flatten(dense ? styles$d.inputFlatDense : styles$d.inputFlat),
+        styles: StyleSheet.flatten(dense ? styles$e.inputFlatDense : styles$e.inputFlat),
     };
     var pad = calculatePadding(paddingSettings);
     adjustPaddingFlat(__assign(__assign({}, paddingSettings), { pad: pad }));
@@ -5224,7 +5224,7 @@ var TextInputFlat = function (_a) {
         onLabelTextLayout: onLabelTextLayout,
         placeholderOpacity: placeholderOpacity,
         labelError: error,
-        placeholderStyle: styles$d.placeholder,
+        placeholderStyle: styles$e.placeholder,
         baseLabelTranslateY: baseLabelTranslateY,
         baseLabelTranslateX: baseLabelTranslateX,
         font: font,
@@ -5343,7 +5343,7 @@ var TextInputFlat = function (_a) {
                 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$d.labelContainer,
+                    styles$e.labelContainer,
                     {
                         minHeight: minHeight,
                         flex: 1,
@@ -5356,12 +5356,12 @@ var TextInputFlat = function (_a) {
                         (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,
+                            styles$e.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", marginTop: Platform.OS === "android" ? SPACE_8 : SPACE_2 }),
                             contentStyle,
                         ] })),
                     renderSuffix())),
-            parentState.focused && !disabled && clearButton && inputValue ? (React$3.createElement(TouchableOpacity, { onPress: handleClear, style: styles$d.clearButton },
+            parentState.focused && !disabled && clearButton && inputValue ? (React$3.createElement(TouchableOpacity, { onPress: handleClear, style: styles$e.clearButton },
                 React$3.createElement(Icon$1, { name: "IconClearText", type: "Svg", size: 24 }))) : (React$3.createElement(Spacer, { width: SPACE_12 })),
             checkLineRightAction() && (React$3.createElement(Spacer, { width: 1, height: 24, backgroundColor: theme.colors.borderPrimaryDefault, style: {
                     marginRight: SPACE_8,
@@ -5376,10 +5376,10 @@ var TextInputFlat = function (_a) {
                 right && (React$3.createElement(View$1, { style: {
                         paddingRight: SPACE_12,
                     } }, right)))),
-        error && (textError === null || textError === void 0 ? void 0 : textError.toString()) !== "" && (React$3.createElement(View$1, { style: styles$d.vError },
+        error && (textError === null || textError === void 0 ? void 0 : textError.toString()) !== "" && (React$3.createElement(View$1, { style: styles$e.vError },
             React$3.createElement(Text$1, { size: 12, numberOfLines: 1, color: theme.colors.textErrorDefault }, textError)))));
 };
-var styles$d = StyleSheet.create({
+var styles$e = StyleSheet.create({
     placeholder: {
         position: "absolute",
         left: 0,
@@ -5585,7 +5585,7 @@ var TextInputDefault = function (_a) {
                             ? 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,
+                        styles$d.input,
                         __assign(__assign({}, font), { fontSize: fontSize, lineHeight: lineHeight, fontWeight: fontWeight, color: inputTextColor, textAlignVertical: multiline ? "top" : "center", textAlign: textAlign
                                 ? textAlign
                                 : I18nManager.getConstants().isRTL
@@ -5606,12 +5606,12 @@ var TextInputDefault = function (_a) {
                             : 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,
+                            styles$d.input,
                             __assign(__assign({}, font), { fontSize: fontSize, lineHeight: lineHeight, fontWeight: fontWeight, color: inputTextColor, textAlignVertical: multiline ? "top" : "center", height: height ? height : 48, paddingTop: getPaddingTopValue(), paddingBottom: multiline ? CONSTANTS.SPACE_4 : 0 }),
                             contentStyle,
                         ] })),
                     !multiline && renderSuffix()))),
-            parentState.focused && !disabled && clearButton && inputValue ? (React$3.createElement(TouchableOpacity, { onPress: handleClear, style: multiline ? styles$c.clearButtonMultiline : styles$c.clearButton },
+            parentState.focused && !disabled && clearButton && inputValue ? (React$3.createElement(TouchableOpacity, { onPress: handleClear, style: multiline ? styles$d.clearButtonMultiline : styles$d.clearButton },
                 React$3.createElement(Icon$1, { name: "IconClearText", type: "Svg", size: 24 }))) : (React$3.createElement(Spacer, { width: CONSTANTS.SPACE_12 })),
             checkLineRightAction() && (React$3.createElement(Spacer, { width: 1, height: 24, backgroundColor: colors.borderPrimaryDefault, style: {
                     marginRight: CONSTANTS.SPACE_8,
@@ -5621,10 +5621,10 @@ var TextInputDefault = function (_a) {
                     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 },
+        error && (textError === null || textError === void 0 ? void 0 : textError.toString()) !== "" && (React$3.createElement(View, { style: styles$d.vError },
             React$3.createElement(Text$1, { size: 12, numberOfLines: 1, color: theme.colors.textErrorDefault }, textError)))));
 };
-var styles$c = StyleSheet.create({
+var styles$d = StyleSheet.create({
     input: {
         margin: 0,
         flex: 1,
@@ -5826,12 +5826,12 @@ var TextInputNumber = function (_a) {
     return (React__default.createElement(View, null,
         React__default.createElement(ScaleButton$1, __assign({ activeOpacity: 0.8, onPress: onShowModalKeyboard }, props, { disabled: disabled || false }),
             React__default.createElement(View, { style: [
-                    styles$b.container,
+                    styles$c.container,
                     {
                         borderRadius: BORDER_RADIUS_6,
                     },
                     [
-                        styles$b.border,
+                        styles$c.border,
                         {
                             borderColor: isShowModalKeyboard
                                 ? colors.borderBrandDefault
@@ -5845,7 +5845,7 @@ var TextInputNumber = function (_a) {
                         },
                     ],
                     disabled && [
-                        styles$b.disabled,
+                        styles$c.disabled,
                         {
                             borderColor: colors.borderPrimaryDisabled,
                             backgroundColor: colors.surfacePrimaryDisabled,
@@ -5887,51 +5887,51 @@ var TextInputNumber = function (_a) {
         !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))),
         React__default.createElement(Modal, { visible: isShowModalKeyboard, transparent: true, animationType: "fade", onRequestClose: onCloseModalKeyboard },
-            React__default.createElement(TouchableOpacity, { style: styles$b.modalOverlay, activeOpacity: 1, onPress: onCloseModalKeyboard },
-                React__default.createElement(View, { onPress: function () { }, activeOpacity: 1, backgroundColor: colors.surfacePrimaryDefault, style: styles$b.modalContent },
-                    React__default.createElement(Text$1, { style: [styles$b.modalTitle, styles$b.text18] }, label),
+            React__default.createElement(TouchableOpacity, { style: styles$c.modalOverlay, activeOpacity: 1, onPress: onCloseModalKeyboard },
+                React__default.createElement(View, { onPress: function () { }, activeOpacity: 1, backgroundColor: colors.surfacePrimaryDefault, style: styles$c.modalContent },
+                    React__default.createElement(Text$1, { style: [styles$c.modalTitle, styles$c.text18] }, label),
                     React__default.createElement(View, { width: "100%" },
                         React__default.createElement(View, { paddingHorizontal: SPACE_40 },
-                            React__default.createElement(Text$1, { numberOfLines: 1, style: [styles$b.text30, styles$b.valueText] }, formatNumberInput$1(inputValue, formatDecimal) || "0")),
-                        React__default.createElement(TouchableOpacity, { onPress: handleClear, style: styles$b.clearButton },
+                            React__default.createElement(Text$1, { numberOfLines: 1, style: [styles$c.text30, styles$c.valueText] }, formatNumberInput$1(inputValue, formatDecimal) || "0")),
+                        React__default.createElement(TouchableOpacity, { onPress: handleClear, style: styles$c.clearButton },
                             React__default.createElement(Icon$1, { name: "IconClearText", type: "Svg", size: 24, color: colors.textSecondary }))),
-                    React__default.createElement(View, { style: styles$b.keyboardGrid }, [
+                    React__default.createElement(View, { style: styles$c.keyboardGrid }, [
                         ["1", "2", "3"],
                         ["4", "5", "6"],
                         ["7", "8", "9"],
                         [type === "integer" ? "000" : ".", "0", "del"],
-                    ].map(function (row, rowIndex) { return (React__default.createElement(View, { key: rowIndex, style: styles$b.keyboardRow }, row.map(function (key) { return (React__default.createElement(TouchableOpacity, { activeOpacity: 0.8, key: key, style: [
-                            styles$b.keyButton,
-                            key === "000" && type === "float" && styles$b.disabledKey,
+                    ].map(function (row, rowIndex) { return (React__default.createElement(View, { key: rowIndex, style: styles$c.keyboardRow }, row.map(function (key) { return (React__default.createElement(TouchableOpacity, { activeOpacity: 0.8, key: key, style: [
+                            styles$c.keyButton,
+                            key === "000" && type === "float" && styles$c.disabledKey,
                             key === "." &&
                                 inputValue.includes(".") &&
-                                styles$b.disabledKey,
+                                styles$c.disabledKey,
                         ], onPress: function () { return handleKeyPress(key); }, disabled: (key === "000" && type === "float") ||
                             (key === "." && inputValue.includes(".")) }, key === "del" ? (React__default.createElement(Icon$1, { name: "IconDelNumber", type: "Svg", size: 24 })) : (React__default.createElement(Text$1, { style: [
-                            styles$b.keyText,
-                            styles$b.text22,
+                            styles$c.keyText,
+                            styles$c.text22,
                             key === "000" &&
                                 type === "float" &&
-                                styles$b.disabledKeyText,
+                                styles$c.disabledKeyText,
                             key === "." &&
                                 inputValue.includes(".") &&
-                                styles$b.disabledKeyText,
+                                styles$c.disabledKeyText,
                         ] }, key)))); }))); })),
-                    React__default.createElement(View, { style: styles$b.actionRow },
-                        React__default.createElement(TouchableOpacity, { activeOpacity: 0.8, style: styles$b.actionButton, onPress: onCloseModalKeyboard },
-                            React__default.createElement(Text$1, { style: [styles$b.actionText, styles$b.text16] }, "\u0110\u00F3ng")),
+                    React__default.createElement(View, { style: styles$c.actionRow },
+                        React__default.createElement(TouchableOpacity, { activeOpacity: 0.8, style: styles$c.actionButton, onPress: onCloseModalKeyboard },
+                            React__default.createElement(Text$1, { style: [styles$c.actionText, styles$c.text16] }, "\u0110\u00F3ng")),
                         React__default.createElement(Spacer, { style: {
                                 height: "100%",
                             }, width: 1, backgroundColor: colors.borderPrimaryDefault }),
-                        React__default.createElement(TouchableOpacity, { activeOpacity: 0.8, style: [styles$b.actionButton, !canSave && { opacity: 0.5 }], onPress: handleSave, disabled: !canSave },
+                        React__default.createElement(TouchableOpacity, { activeOpacity: 0.8, style: [styles$c.actionButton, !canSave && { opacity: 0.5 }], onPress: handleSave, disabled: !canSave },
                             React__default.createElement(Text$1, { style: [
-                                    styles$b.actionText,
-                                    styles$b.text16,
+                                    styles$c.actionText,
+                                    styles$c.text16,
                                     { color: colors.textBrandDefault },
                                     !canSave && { color: colors.textSecondary },
                                 ] }, "L\u01B0u"))))))));
 };
-var styles$b = StyleSheet.create(__assign(__assign({}, containerStyles), { disabled: { opacity: 0.6 }, container: {
+var styles$c = StyleSheet.create(__assign(__assign({}, containerStyles), { disabled: { opacity: 0.6 }, container: {
         height: 48,
         flexDirection: "row",
         alignItems: "center",
@@ -6261,7 +6261,7 @@ var Button = function (_a) {
         switch (mode) {
             case "outlined":
                 return [
-                    styles$a.border,
+                    styles$b.border,
                     { borderColor: colors.borderBrandDefault },
                     critical && {
                         backgroundColor: colors.surfacePrimaryDefault,
@@ -6312,8 +6312,8 @@ var Button = function (_a) {
                         borderRadius: CONSTANTS.BORDER_RADIUS_6,
                         paddingHorizontal: 0,
                     },
-                    styles$a.small,
-                    disabled && !isLoading && [styles$a.disabled],
+                    styles$b.small,
+                    disabled && !isLoading && [styles$b.disabled],
                     isLoading && { justifyContent: "center" },
                     style,
                 ], disabled: isLoading }, isLoading ? (React__default.createElement(ActivityIndicator, { color: (textStyle === null || textStyle === void 0 ? void 0 : textStyle.color) || colors.textBrandDefault })) : (React__default.createElement(View, { row: true },
@@ -6326,7 +6326,7 @@ var Button = function (_a) {
     return (React__default.createElement(View, { row: !full },
         React__default.createElement(ScaleButton$1, __assign({ activeOpacity: 0.8, onPress: onPress }, props, { disabled: disabled || isLoading }),
             React__default.createElement(View, { width: width, margin: margin, style: [
-                    styles$a.button,
+                    styles$b.button,
                     {
                         borderRadius: CONSTANTS.BORDER_RADIUS_6,
                     },
@@ -6336,10 +6336,10 @@ var Button = function (_a) {
                     borderColor && { borderColor: borderColor },
                     backgroundColor && { backgroundColor: backgroundColor },
                     renderButtonStyle(),
-                    buttonSize === "small" && styles$a.small,
+                    buttonSize === "small" && styles$b.small,
                     disabled &&
                         !isLoading && [
-                        styles$a.disabled,
+                        styles$b.disabled,
                         {
                             borderColor: colors.borderPrimaryDisabled,
                             backgroundColor: colors.surfacePrimaryDisabled,
@@ -6361,7 +6361,7 @@ var Button = function (_a) {
                 !isLoading && right,
                 React__default.createElement(Spacer, { width: right ? CONSTANTS.SPACE_12 : CONSTANTS.SPACE_16 })))))));
 };
-var styles$a = StyleSheet.create({
+var styles$b = StyleSheet.create({
     disabled: { opacity: 0.6 },
     button: {
         height: CONSTANTS.BUTTON_HEIGHT,
@@ -6383,7 +6383,7 @@ 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 colors = useInternalTheme().colors;
     return (React__default.createElement(TouchableOpacity, __assign({ activeOpacity: 0.8, onPress: onPress }, props, { disabled: disabled || isLoading, style: [
-            styles$9.btn,
+            styles$a.btn,
             top > 0 && { top: top },
             right > 0 && { right: right },
             left > 0 && { left: left },
@@ -6409,7 +6409,7 @@ var FloatingButton = function (_a) {
                 style,
             ] }, props), isLoading ? React__default.createElement(ActivityIndicator, { size: "small" }) : children)));
 };
-var styles$9 = StyleSheet.create({
+var styles$a = StyleSheet.create({
     btn: {
         position: "absolute",
     },
@@ -6649,7 +6649,7 @@ var Toast = memoWithRef(function (_props, ref) {
         }
     };
     return (React__default.createElement(ViewVisibleAnimated, { ref: viewVisibleAnimatedRef, autoShow: false, scaleEnable: true, style: [
-            styles$8.container,
+            styles$9.container,
             options.position === POSITION.BOTTOM && {
                 bottom: bottom
                     ? bottom + handleToastBottomHeight()
@@ -6660,7 +6660,7 @@ var Toast = memoWithRef(function (_props, ref) {
             },
         ] },
         React__default.createElement(View, { row: !options.title, center: !options.title, full: true, activeOpacity: 0.8, onPress: onPressToast, style: [
-                styles$8.wrapContent,
+                styles$9.wrapContent,
                 {
                     shadowColor: "black",
                     shadowOffset: {
@@ -6677,9 +6677,9 @@ var Toast = memoWithRef(function (_props, ref) {
                     React__default.createElement(Icon$1, { name: getSourceIcon(), type: "Svg", size: 20 })),
                 React__default.createElement(View, { full: true, paddingLeft: CONSTANTS.SPACE_8 },
                     React__default.createElement(Text$1, { bold: true, color: colors.textOnFillDefault }, options.title),
-                    message.toString().length > 0 && (React__default.createElement(Text$1, { color: colors.textOnFillDefault, numberOfLines: 4, style: !options.title && styles$8.wrapMess }, message)))))));
+                    message.toString().length > 0 && (React__default.createElement(Text$1, { color: colors.textOnFillDefault, numberOfLines: 4, style: !options.title && styles$9.wrapMess }, message)))))));
 });
-var styles$8 = StyleSheet.create({
+var styles$9 = StyleSheet.create({
     wrapMess: { marginLeft: CONSTANTS.SPACE_8, flex: 1 },
     wrapContent: {
         borderRadius: CONSTANTS.BORDER_RADIUS_12,
@@ -6779,17 +6779,133 @@ var Image = function (props) {
 };
 var Image$1 = memoDeepEqual(Image);
 
-var Badge = function (_a) {
-    var children = _a.children, _b = _a.value, value = _b === void 0 ? "1" : _b, borderColor = _a.borderColor, backgroundColor = _a.backgroundColor, style = _a.style, textColor = _a.textColor, textStyle = _a.textStyle;
+var BADGE_CONFIGS = {
+    sizes: {
+        small: {
+            paddingHorizontal: CONSTANTS.SPACE_4,
+            minWidth: 16,
+            minHeight: 16,
+            textSize: 10,
+        },
+        default: {
+            paddingHorizontal: CONSTANTS.SPACE_8,
+            minWidth: 16,
+            textSize: 12,
+        },
+    },
+    tiny: {
+        width: 8,
+        height: 8,
+        borderRadius: 4,
+    },
+};
+var Badge = React__default.memo(function (_a) {
+    var children = _a.children, _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 ? "success" : _c, _d = _a.badgeSize, badgeSize = _d === void 0 ? "default" : _d, _e = _a.mode, mode = _e === void 0 ? "default" : _e, textSize = _a.textSize, borderColor = _a.borderColor, backgroundColor = _a.backgroundColor;
     var theme = useInternalTheme();
     var colors = theme.colors;
     if (children) {
         return React__default.createElement(View, { style: style }, children);
     }
+    var sizeStyles = useMemo(function () {
+        if (badgeSize === "tiny")
+            return null;
+        return BADGE_CONFIGS.sizes[badgeSize];
+    }, [badgeSize]);
+    var typeStyles = useMemo(function () {
+        var configs = {
+            success: {
+                default: {
+                    borderWidth: 0,
+                    backgroundColor: backgroundColor || colors.surfaceSuccessDefault,
+                },
+                outline: {
+                    borderColor: borderColor || colors.borderSuccessDefault,
+                    backgroundColor: backgroundColor || colors.surfaceSuccessInverseDefault,
+                },
+            },
+            error: {
+                default: {
+                    borderWidth: 0,
+                    backgroundColor: backgroundColor || colors.surfaceCriticalDefault,
+                },
+                outline: {
+                    borderColor: borderColor || colors.borderErrorDefault,
+                    backgroundColor: backgroundColor || colors.surfaceCriticalInverseDefault,
+                },
+            },
+            info: {
+                default: {
+                    borderWidth: 0,
+                    backgroundColor: backgroundColor || colors.surfacePrimaryInverseDefault,
+                },
+                outline: {
+                    borderColor: borderColor || colors.borderInfoDefault,
+                    backgroundColor: backgroundColor || colors.surfaceInfoInverseDefault,
+                },
+            },
+            warning: {
+                default: {
+                    borderWidth: 0,
+                    backgroundColor: backgroundColor || colors.surfaceWarningDefault,
+                },
+                outline: {
+                    borderColor: borderColor || colors.borderWarningDefault,
+                    backgroundColor: backgroundColor || colors.surfaceWarningInverseDefault,
+                },
+            },
+            default: {
+                default: {
+                    borderWidth: 0,
+                    backgroundColor: backgroundColor || colors.surfaceInfoDefault,
+                },
+                outline: {
+                    borderColor: borderColor || colors.borderInfoDefault,
+                    backgroundColor: backgroundColor || colors.surfaceInfoInverseDefault,
+                },
+            },
+        };
+        return configs[type][mode];
+    }, [colors, type, mode, borderColor, backgroundColor]);
+    var textColorStyle = useMemo(function () {
+        var textConfigs = {
+            success: {
+                default: colors.textOnFillDefault,
+                outline: colors.textSuccessDefault,
+            },
+            error: {
+                default: colors.textOnFillDefault,
+                outline: colors.textCriticalDefault,
+            },
+            info: {
+                default: colors.textOnFillDefault,
+                outline: colors.textInfoDefault,
+            },
+            warning: {
+                default: colors.textOnFillDefault,
+                outline: colors.textWarningDefault,
+            },
+            default: {
+                default: colors.textOnFillDefault,
+                outline: colors.textInfoDefault,
+            },
+        };
+        return textConfigs[type][mode];
+    }, [colors, type, mode]);
+    var finalTextSize = useMemo(function () {
+        var _a;
+        if (badgeSize === "tiny")
+            return 0;
+        return textSize || ((_a = BADGE_CONFIGS.sizes[badgeSize]) === null || _a === void 0 ? void 0 : _a.textSize) || 12;
+    }, [textSize, badgeSize]);
+    if (badgeSize === "tiny") {
+        return (React__default.createElement(View, { row: true, width: BADGE_CONFIGS.tiny.width, height: BADGE_CONFIGS.tiny.height, borderRadius: BADGE_CONFIGS.tiny.borderRadius, backgroundColor: typeStyles.backgroundColor }));
+    }
     return (React__default.createElement(View, { row: true },
-        React__default.createElement(View, { borderRadius: CONSTANTS.BORDER_RADIUS_12, borderWidth: CONSTANTS.BORDER_WIDTH_1, borderColor: borderColor || colors.borderPrimaryDefault, backgroundColor: backgroundColor || colors.surfaceSecondaryDefault, paddingHorizontal: CONSTANTS.SPACE_8, paddingVertical: CONSTANTS.SPACE_4, style: style },
-            React__default.createElement(Text$1, { size: 12, color: textColor || colors.textSecondary, style: textStyle }, value))));
-};
+        React__default.createElement(View, { center: true, borderRadius: 999, borderWidth: CONSTANTS.BORDER_WIDTH_1, style: [sizeStyles, typeStyles, style] },
+            React__default.createElement(Text$1, { size: finalTextSize, color: textColor || textColorStyle, style: [styles$8.textMedium, textStyle] }, value))));
+});
+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;