sapo-components-ui-rn 1.0.24 → 1.0.25

package/dist/index.d.ts

@@ -26,6 +26,7 @@ export { default as RadioButton } from "./components/RadioButton";
 export { default as Avatar } from "./components/Avatar";
 export { default as SelectionField } from "./components/SelectionField";
 export { default as SearchInput } from "./components/SearchInput";
+export { default as Tag } from "./components/Tag";
 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";

package/dist/index.esm.js

@@ -1699,7 +1699,7 @@ var ActivityIndicator = function (_a) {
         height: size / 2,
         overflow: "hidden",
     };
-    return (React$3.createElement(View$1, __assign({ style: [styles$h.container, style] }, rest, { accessible: true, accessibilityRole: "progressbar", accessibilityState: { busy: animating } }),
+    return (React$3.createElement(View$1, __assign({ style: [styles$i.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); });
@@ -1744,7 +1744,7 @@ var ActivityIndicator = function (_a) {
                 borderWidth: size / 10,
                 borderRadius: size / 2,
             };
-            return (React$3.createElement(Animated.View, { key: index, style: [styles$h.layer] },
+            return (React$3.createElement(Animated.View, { key: index, style: [styles$i.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 },
@@ -1752,7 +1752,7 @@ var ActivityIndicator = function (_a) {
                                 React$3.createElement(Animated.View, { style: lineStyle })))))));
         }))));
 };
-var styles$h = StyleSheet.create({
+var styles$i = StyleSheet.create({
     container: {
         justifyContent: "center",
         alignItems: "center",
@@ -1860,11 +1860,11 @@ var ProgressBar = function (_a) {
             ? {}
             : { min: 0, max: 100, now: Math.round(progress * 100) }, testID: testID }),
         React$3.createElement(Animated.View, { style: [
-                styles$g.container,
+                styles$h.container,
                 { backgroundColor: trackTintColor, opacity: fade },
                 style,
             ] }, width ? (React$3.createElement(Animated.View, { testID: "".concat(testID, "-fill"), style: [
-                styles$g.progressBar,
+                styles$h.progressBar,
                 {
                     width: width,
                     backgroundColor: tintColor,
@@ -1908,7 +1908,7 @@ var ProgressBar = function (_a) {
                 fillStyle,
             ] })) : null)));
 };
-var styles$g = StyleSheet.create({
+var styles$h = StyleSheet.create({
     container: {
         height: 4,
         overflow: "hidden",
@@ -2483,7 +2483,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.View, { style: [
-            styles$f.container,
+            styles$g.container,
             style,
             {
                 opacity: (visible === null || visible === void 0 ? void 0 : visible.interpolate({
@@ -2494,7 +2494,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$f = StyleSheet.create({
+var styles$g = StyleSheet.create({
     container: {
         position: "absolute",
         justifyContent: "center",
@@ -2552,13 +2552,13 @@ var AnimatedText = forwardRef(function AnimatedText(_a, ref) {
         }
         return (React$3.createElement(Animated.Text, __assign({ ref: ref }, rest, { style: [
                 font,
-                styles$e.text,
+                styles$f.text,
                 { writingDirection: writingDirection, color: theme.colors.backgroundPrimary },
                 style,
             ] })));
     }
 });
-var styles$e = StyleSheet.create({
+var styles$f = StyleSheet.create({
     text: {
         textAlign: "left",
     },
@@ -2629,7 +2629,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$d.overflow, styles$d.labelContainer] },
+    React__default.createElement(View$1, { pointerEvents: "none", style: [StyleSheet.absoluteFill, styles$e.overflow, styles$e.labelContainer] },
         React__default.createElement(Animated.View, { pointerEvents: "none", style: [
                 StyleSheet.absoluteFill,
                 Platform.OS !== "web" && { width: width },
@@ -2667,7 +2667,7 @@ var InputLabel = function (props) {
                         },
                     ], numberOfLines: 1, maxFontSizeMultiplier: maxFontSizeMultiplier, testID: "".concat(testID, "-label-inactive") }, label)))));
 };
-var styles$d = StyleSheet.create({
+var styles$e = StyleSheet.create({
     overflow: {
         overflow: "hidden",
     },
@@ -2680,8 +2680,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$c.outline,
-            !label && styles$c.noLabelOutline,
+            styles$d.outline,
+            !label && styles$d.noLabelOutline,
             // eslint-disable-next-line react-native/no-inline-styles
             {
             // backgroundColor,
@@ -2692,7 +2692,7 @@ var Outline = function (_a) {
             style,
         ] }));
 };
-var styles$c = StyleSheet.create({
+var styles$d = StyleSheet.create({
     outline: {
         position: "absolute",
         left: 0,
@@ -2889,7 +2889,7 @@ var TextInputFlat = function (_a) {
         label: label,
         scale: fontScale,
         isAndroid: isAndroid,
-        styles: StyleSheet.flatten(dense ? styles$b.inputFlatDense : styles$b.inputFlat),
+        styles: StyleSheet.flatten(dense ? styles$c.inputFlatDense : styles$c.inputFlat),
     };
     var pad = calculatePadding(paddingSettings);
     adjustPaddingFlat(__assign(__assign({}, paddingSettings), { pad: pad }));
@@ -2915,7 +2915,7 @@ var TextInputFlat = function (_a) {
         onLabelTextLayout: onLabelTextLayout,
         placeholderOpacity: placeholderOpacity,
         labelError: error,
-        placeholderStyle: styles$b.placeholder,
+        placeholderStyle: styles$c.placeholder,
         baseLabelTranslateY: baseLabelTranslateY,
         baseLabelTranslateX: baseLabelTranslateX,
         font: font,
@@ -2978,7 +2978,7 @@ var TextInputFlat = function (_a) {
             left ? (React$3.createElement(Spacer, { width: CONSTANTS.SPACE_8 })) : (React$3.createElement(Spacer, { width: CONSTANTS.SPACE_12 }))),
         React$3.createElement(Outline, { style: outlineStyle, label: label, roundness: roundness, hasActiveOutline: hasActiveOutline, focused: parentState.focused, activeColor: activeColor, outlineColor: outlineColor, backgroundColor: backgroundColor }),
         React$3.createElement(View$1, { onLayout: onInputLayout, style: [
-                styles$b.labelContainer,
+                styles$c.labelContainer,
                 {
                     minHeight: minHeight,
                     flex: 1,
@@ -2986,7 +2986,7 @@ var TextInputFlat = function (_a) {
             ] },
             !isAndroid && multiline && !!label && !disabled && (React$3.createElement(View$1, { pointerEvents: "none", style: [
                     StyleSheet.absoluteFill,
-                    dense ? styles$b.densePatchContainer : styles$b.patchContainer,
+                    dense ? styles$c.densePatchContainer : styles$c.patchContainer,
                     {
                         backgroundColor: viewStyle.backgroundColor || containerStyle.backgroundColor,
                         left: paddingLeft,
@@ -2995,7 +2995,7 @@ 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 }, labelProps))) : null, render === null || render === void 0 ? void 0 :
             render(__assign(__assign({}, rest), { ref: innerRef, onChangeText: handleChangeText, value: inputValue, placeholder: rest.placeholder, editable: !disabled && editable, selectionColor: selectionColor, cursorColor: typeof cursorColor === "undefined" ? activeColor : cursorColor, placeholderTextColor: placeholderTextColorBasedOnState, onFocus: onFocus, onBlur: onBlur, underlineColorAndroid: "transparent", multiline: multiline, style: [
-                    styles$b.input,
+                    styles$c.input,
                     __assign(__assign({ paddingLeft: paddingLeft, paddingRight: paddingRight, paddingTop: CONSTANTS.SPACE_12 }, font), { fontSize: fontSize, lineHeight: lineHeight, fontWeight: fontWeight, color: inputTextColor, textAlignVertical: multiline ? "top" : "center", textAlign: textAlign
                             ? textAlign
                             : I18nManager.getConstants().isRTL
@@ -3004,13 +3004,13 @@ var TextInputFlat = function (_a) {
                     Platform.OS === "web" && { outline: "none" },
                     contentStyle,
                 ] }))),
-        !disabled && clearButton && inputValue ? (React$3.createElement(TouchableOpacity, { onPress: handleClear, style: styles$b.clearButton },
+        !disabled && clearButton && inputValue ? (React$3.createElement(TouchableOpacity, { onPress: handleClear, style: styles$c.clearButton },
             React$3.createElement(Icon$1, { name: "IconClearText", type: "Svg", size: 24 }))) : (React$3.createElement(Spacer, { width: CONSTANTS.SPACE_12 })),
         React$3.createElement(View$1, { style: { flexDirection: "row" } },
             right && React$3.createElement(Spacer, { width: CONSTANTS.SPACE_8 }),
             right && (React$3.createElement(View$1, { style: { paddingRight: CONSTANTS.SPACE_12 } }, right)))));
 };
-var styles$b = StyleSheet.create({
+var styles$c = StyleSheet.create({
     placeholder: {
         position: "absolute",
         left: 0,
@@ -5637,7 +5637,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$a.input,
+                        styles$b.input,
                         __assign(__assign({}, font), { fontSize: fontSize, lineHeight: lineHeight, fontWeight: fontWeight, color: inputTextColor, textAlignVertical: multiline ? "top" : "center", textAlign: textAlign
                                 ? textAlign
                                 : I18nManager.getConstants().isRTL
@@ -5649,12 +5649,12 @@ var TextInputDefault = function (_a) {
                                 : CONSTANTS.SPACE_4 }),
                         contentStyle,
                     ] }))),
-            !disabled && clearButton && inputValue ? (React$3.createElement(TouchableOpacity, { onPress: handleClear, style: multiline ? styles$a.clearButtonMultiline : styles$a.clearButton },
+            !disabled && clearButton && inputValue ? (React$3.createElement(TouchableOpacity, { onPress: handleClear, style: multiline ? styles$b.clearButtonMultiline : styles$b.clearButton },
                 React$3.createElement(Icon$1, { name: "IconClearText", type: "Svg", size: 24 }))) : (React$3.createElement(Spacer, { width: CONSTANTS.SPACE_12 })),
             right && React$3.createElement(Spacer, { width: CONSTANTS.SPACE_8 }),
             right && React$3.createElement(View, { paddingRight: CONSTANTS.SPACE_12 }, right))));
 };
-var styles$a = StyleSheet.create({
+var styles$b = StyleSheet.create({
     input: {
         margin: 0,
         flex: 1,
@@ -5943,7 +5943,7 @@ var Button = function (_a) {
     var renderButtonStyle = function () {
         switch (mode) {
             case "outlined":
-                return [styles$9.border, { borderColor: colors.borderBrandDefault }];
+                return [styles$a.border, { borderColor: colors.borderBrandDefault }];
             case "contained":
                 return [{ backgroundColor: colors.surfaceBrandDefault }];
             case "transparent":
@@ -5966,7 +5966,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 || false }),
             React__default.createElement(View, { style: [
-                    styles$9.button,
+                    styles$a.button,
                     {
                         borderRadius: CONSTANTS.BORDER_RADIUS_6,
                     },
@@ -5976,9 +5976,9 @@ var Button = function (_a) {
                     borderColor && { borderColor: borderColor },
                     backgroundColor && { backgroundColor: backgroundColor },
                     renderButtonStyle(),
-                    small && styles$9.small,
+                    small && styles$a.small,
                     disabled && [
-                        styles$9.disabled,
+                        styles$a.disabled,
                         {
                             borderColor: colors.borderPrimaryDisabled,
                             backgroundColor: colors.surfacePrimaryDisabled,
@@ -5995,7 +5995,7 @@ var Button = function (_a) {
                 !isLoading && right,
                 React__default.createElement(Spacer, { width: right ? CONSTANTS.SPACE_12 : CONSTANTS.SPACE_16 })))));
 };
-var styles$9 = StyleSheet.create({
+var styles$a = StyleSheet.create({
     disabled: { opacity: 0.6 },
     button: {
         height: CONSTANTS.BUTTON_HEIGHT,
@@ -6019,7 +6019,7 @@ var ButtonIcon = function (_a) {
     var colors = useInternalTheme().colors;
     return (React__default.createElement(ScaleButton$1, __assign({ activeOpacity: 0.8, onPress: onPress }, props, { disabled: disabled || false }),
         React__default.createElement(View, __assign({ style: [
-                styles$8.btn,
+                styles$9.btn,
                 !hiddenBackground
                     ? {
                         backgroundColor: backgroundColor || colors.surfaceBrandDefault,
@@ -6046,7 +6046,7 @@ var ButtonIcon = function (_a) {
                 style,
             ] }, props), isLoading ? React__default.createElement(ActivityIndicator$1, { size: "small" }) : children)));
 };
-var styles$8 = StyleSheet.create({
+var styles$9 = StyleSheet.create({
     btn: {
         justifyContent: "center",
         alignItems: "center",
@@ -6074,7 +6074,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(ScaleButton$1, __assign({ activeOpacity: 0.8, onPress: onPress }, props, { disabled: disabled || isLoading, style: [
-            styles$7.btn,
+            styles$8.btn,
             top > 0 && { top: top },
             right > 0 && { right: right },
             left > 0 && { left: left },
@@ -6100,7 +6100,7 @@ var FloatingButton = function (_a) {
                 style,
             ] }, props), isLoading ? React__default.createElement(ActivityIndicator$1, { size: "small" }) : children)));
 };
-var styles$7 = StyleSheet.create({
+var styles$8 = StyleSheet.create({
     btn: {
         position: "absolute",
     },
@@ -6340,7 +6340,7 @@ var Toast = memoWithRef(function (_props, ref) {
         }
     };
     return (React__default.createElement(ViewVisibleAnimated, { ref: viewVisibleAnimatedRef, autoShow: false, scaleEnable: true, style: [
-            styles$6.container,
+            styles$7.container,
             options.position === POSITION.BOTTOM && {
                 bottom: bottom
                     ? bottom + handleToastBottomHeight()
@@ -6351,7 +6351,7 @@ var Toast = memoWithRef(function (_props, ref) {
             },
         ] },
         React__default.createElement(View, { row: !options.title, center: !options.title, full: true, onPress: onPressToast, style: [
-                styles$6.wrapContent,
+                styles$7.wrapContent,
                 {
                     shadowColor: "black",
                     shadowOffset: {
@@ -6365,12 +6365,12 @@ var Toast = memoWithRef(function (_props, ref) {
             ] },
             React__default.createElement(View, { row: true, style: { alignItems: "flex-start" } },
                 React__default.createElement(View, null,
-                    React__default.createElement(Image$2, { source: getSourceIcon(), style: styles$6.img })),
+                    React__default.createElement(Image$2, { source: getSourceIcon(), style: styles$7.img })),
                 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$6.wrapMess }, message)))))));
+                    message.toString().length > 0 && (React__default.createElement(Text$1, { color: colors.textOnFillDefault, numberOfLines: 4, style: !options.title && styles$7.wrapMess }, message)))))));
 });
-var styles$6 = StyleSheet.create({
+var styles$7 = StyleSheet.create({
     wrapMess: { marginLeft: CONSTANTS.SPACE_8, flex: 1 },
     wrapContent: {
         borderRadius: CONSTANTS.BORDER_RADIUS_12,
@@ -6589,10 +6589,10 @@ var CountingDot = function (_a) {
         return React__default.createElement(View, { style: style }, children);
     }
     return (React__default.createElement(View, { 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$5.container, style] },
-            React__default.createElement(Text$1, { size: 10, style: [styles$5.textMedium, textStyle], color: textColor || colors.textOnFillDefault }, value))));
+        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$6.container, style] },
+            React__default.createElement(Text$1, { size: 10, style: [styles$6.textMedium, textStyle], color: textColor || colors.textOnFillDefault }, value))));
 };
-var styles$5 = StyleSheet.create(__assign(__assign({}, containerStyles), { container: {
+var styles$6 = StyleSheet.create(__assign(__assign({}, containerStyles), { container: {
         minWidth: 16,
         minHeight: 16,
     } }));
@@ -6622,18 +6622,18 @@ var ChipBar = function (_a) {
             leftIcon && React__default.createElement(View, { paddingRight: CONSTANTS.SPACE_4 }, leftIcon),
             React__default.createElement(View, null,
                 React__default.createElement(Text$1, { numberOfLines: numberOfLines, ellipsizeMode: ellipsizeMode, color: active ? colors.textBrandDefault : colors.textDefault, style: [
-                        styles$4.text14,
-                        styles$4.textMedium,
+                        styles$5.text14,
+                        styles$5.textMedium,
                         disabled && {
                             color: colors.textSecondary,
                         },
                         textStyle,
                     ] }, title)),
             rightIcon && React__default.createElement(View, { paddingLeft: CONSTANTS.SPACE_4 }, rightIcon)),
-        badge > 0 && (React__default.createElement(View, { style: styles$4.badgeContainer },
+        badge > 0 && (React__default.createElement(View, { style: styles$5.badgeContainer },
             React__default.createElement(CountingDot, { value: badge })))));
 };
-var styles$4 = StyleSheet.create(__assign(__assign({}, containerStyles), { badgeContainer: {
+var styles$5 = StyleSheet.create(__assign(__assign({}, containerStyles), { badgeContainer: {
         position: "absolute",
         right: 0,
         top: -4,
@@ -6671,14 +6671,14 @@ var Checkbox = function (_a) {
             React__default.createElement(Icon$1, { name: isActive ? "IconCheckboxActive" : "IconCheckbox", type: "Svg", size: iconSize, color: checkboxColor }))),
         React__default.createElement(View, null,
             React__default.createElement(Text$1, { color: colors.textDefault, style: [
-                    styles$3.text14,
+                    styles$4.text14,
                     disabled && {
                         color: colors.textSecondary,
                     },
                     textStyle,
                 ] }, content))));
 };
-var styles$3 = StyleSheet.create(__assign(__assign({}, containerStyles), { icon: {
+var styles$4 = StyleSheet.create(__assign(__assign({}, containerStyles), { icon: {
         width: 24,
         height: 24,
     } }));
@@ -6713,14 +6713,14 @@ var RadioButton = function (_a) {
                         : "IconRadio", type: "Svg", size: 24, color: getColorCheckbox }))),
         React__default.createElement(View, null,
             React__default.createElement(Text$1, { color: colors.textDefault, style: [
-                    styles$2.text14,
+                    styles$3.text14,
                     disabled && {
                         color: colors.textSecondary,
                     },
                     textStyle,
                 ] }, content))));
 };
-var styles$2 = StyleSheet.create(__assign(__assign({}, containerStyles), { icon: {
+var styles$3 = StyleSheet.create(__assign(__assign({}, containerStyles), { icon: {
         width: 24,
         height: 24,
     } }));
@@ -6751,9 +6751,9 @@ var Avatar = function (_a) {
                 return 16;
         }
     };
-    return (React__default.createElement(View, { onPress: onPress, width: size, height: size, borderRadius: size / 2, center: true, backgroundColor: backgroundColor || colors.surfaceSecondaryDefault, style: [styles$1.container, style] }, source ? (React__default.createElement(Image$1, { useFastImage: true, resizeMode: "cover", source: source, style: [{ width: size, height: size }, imageStyle] })) : (React__default.createElement(Text$1, { size: getSize(size), color: textColor || colors.textSecondary, style: textStyle || { fontWeight: "500" } }, getInitials(name)))));
+    return (React__default.createElement(View, { onPress: onPress, width: size, height: size, borderRadius: size / 2, center: true, backgroundColor: backgroundColor || colors.surfaceSecondaryDefault, style: [styles$2.container, style] }, source ? (React__default.createElement(Image$1, { useFastImage: true, resizeMode: "cover", source: source, style: [{ width: size, height: size }, imageStyle] })) : (React__default.createElement(Text$1, { size: getSize(size), color: textColor || colors.textSecondary, style: textStyle || { fontWeight: "500" } }, getInitials(name)))));
 };
-var styles$1 = StyleSheet.create({
+var styles$2 = StyleSheet.create({
     container: {
         overflow: "hidden",
     },
@@ -6779,14 +6779,14 @@ var SelectionField = function (_a) {
     return (React__default.createElement(View, null,
         React__default.createElement(ScaleButton$1, __assign({ activeOpacity: 0.8, onPress: onPress }, props, { disabled: disabled || false }),
             React__default.createElement(View, { style: [
-                    styles.container,
+                    styles$1.container,
                     {
                         borderRadius: BORDER_RADIUS_6,
                     },
-                    [styles.border, { borderColor: colors.borderPrimaryDefault }],
+                    [styles$1.border, { borderColor: colors.borderPrimaryDefault }],
                     borderColor && { borderColor: borderColor },
                     disabled && [
-                        styles.disabled,
+                        styles$1.disabled,
                         {
                             borderColor: colors.borderPrimaryDisabled,
                             backgroundColor: colors.surfacePrimaryDisabled,
@@ -6803,7 +6803,7 @@ var SelectionField = function (_a) {
                 React__default.createElement(Spacer, { width: SPACE_12 }),
                 React__default.createElement(View, { full: true },
                     content.toString() !== "" && label.toString() !== "" && (React__default.createElement(Text$1, { color: labelColor || colors.textSecondary, style: [
-                            styles.text12,
+                            styles$1.text12,
                             disabled && {
                                 color: colors.textPlaceholder,
                             },
@@ -6819,9 +6819,9 @@ var SelectionField = function (_a) {
                 right || React__default.createElement(Icon$1, { name: "IconArrowDown", type: "Svg", size: 24 }),
                 React__default.createElement(Spacer, { width: SPACE_12 }))),
         error.length > 0 && (React__default.createElement(View, { paddingHorizontal: SPACE_12, paddingVertical: SPACE_4 },
-            React__default.createElement(Text$1, { style: styles.text12, color: colors.textErrorDefault }, error)))));
+            React__default.createElement(Text$1, { style: styles$1.text12, color: colors.textErrorDefault }, error)))));
 };
-var styles = StyleSheet.create(__assign(__assign({}, containerStyles), { disabled: { opacity: 0.6 }, container: {
+var styles$1 = StyleSheet.create(__assign(__assign({}, containerStyles), { disabled: { opacity: 0.6 }, container: {
         minHeight: BUTTON_HEIGHT,
         flexDirection: "row",
         alignItems: "center",
@@ -6846,6 +6846,48 @@ var SearchInput = function (_a) {
 };
 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;
+    var theme = useInternalTheme();
+    var colors = theme.colors;
+    var _j = useState(isActive), active = _j[0], setActive = _j[1];
+    var handlePressTag = useCallback(function () {
+        setActive(!active);
+        onPress === null || onPress === void 0 ? void 0 : onPress();
+    }, [active]);
+    useEffect(function () {
+        setActive(isActive);
+    }, [isActive]);
+    return (React__default.createElement(View, { row: true },
+        React__default.createElement(View, { row: true, disabled: disabled, paddingHorizontal: CONSTANTS.SPACE_12, paddingVertical: CONSTANTS.SPACE_8, borderRadius: borderRadius, alignCenter: true, style: [
+                disabled && {
+                    backgroundColor: colors.surfaceSecondaryDefault,
+                    borderColor: colors.surfaceSecondaryDefault,
+                },
+                style,
+            ], onPress: handlePressTag, backgroundColor: active
+                ? colors.surfaceBrandInversePressed
+                : colors.surfaceBrandInverseDefault },
+            leftIcon && React__default.createElement(View, { paddingRight: CONSTANTS.SPACE_4 }, leftIcon),
+            React__default.createElement(View, null,
+                React__default.createElement(Text$1, { numberOfLines: numberOfLines, ellipsizeMode: ellipsizeMode, style: [
+                        styles.text14,
+                        styles.textMedium,
+                        disabled && {
+                            color: colors.textSecondary,
+                        },
+                        textStyle,
+                    ] }, title)),
+            rightIcon ? (React__default.createElement(View, { paddingLeft: CONSTANTS.SPACE_4 }, rightIcon)) : hideRightIcon ? (React__default.createElement(View, null)) : (React__default.createElement(View, { paddingLeft: CONSTANTS.SPACE_4 },
+                React__default.createElement(Icon$1, { name: "IconClose", type: "Svg", size: 24, color: colors.iconBrandDefault }))))));
+};
+var styles = StyleSheet.create(__assign(__assign({}, containerStyles), { badgeContainer: {
+        position: "absolute",
+        right: 0,
+        top: -4,
+        zIndex: 999,
+    } }));
+
 var toastRef = React__default.createRef();
 var showToast = function (_a) {
     var message = _a.message, _b = _a.duration, duration = _b === void 0 ? 5000 : _b, _c = _a.position, position = _c === void 0 ? "top" : _c, _d = _a.type, type = _d === void 0 ? "success" : _d, _e = _a.onPress, onPress = _e === void 0 ? function () { } : _e, title = _a.title, _f = _a.spacer, spacer = _f === void 0 ? "normal" : _f;
@@ -6896,5 +6938,5 @@ var ToastProvider = forwardRef$1(function (_a, ref) {
         renderToast()));
 });
 
-export { ActivityIndicator, Avatar, Badge, index$3 as Button, index$2 as ButtonIcon, CONSTANTS, Checkbox, ChipBar, CountingDot, DarkTheme, DefaultTheme, index$1 as FloatingButton, Image$1 as Image, LightTheme, ProgressBar, RadioButton, SearchInput, index as SelectionField, Spacer, Switch, Text$1 as Text, TextInput, ThemeColors, ThemeProvider, Toast, ToastProvider, View, adaptNavigationTheme, configureFonts, overlay, shadow, showToast, toastRef, useTheme };
+export { ActivityIndicator, Avatar, Badge, index$3 as Button, index$2 as ButtonIcon, CONSTANTS, Checkbox, ChipBar, CountingDot, DarkTheme, DefaultTheme, index$1 as FloatingButton, Image$1 as Image, LightTheme, ProgressBar, RadioButton, SearchInput, index 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