sapo-components-ui-rn 1.1.20 → 1.1.22

package/dist/assets/icon-radio-active.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12Z" fill="#0088FF"/>
+<circle cx="12" cy="12" r="6" fill="white"/>
+<circle cx="12" cy="12" r="4" fill="#0088FF"/>
+</svg>

package/dist/assets/icon-radio.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12Z" fill="#A3A8AF"/>
+<path d="M6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12C18 15.3137 15.3137 18 12 18C8.68629 18 6 15.3137 6 12Z" fill="white"/>
+</svg>

package/dist/assets/index.ts

@@ -0,0 +1,13 @@
+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";
+
+export const Svg = {
+  IconClose,
+  IconCheckbox,
+  IconCheckboxActive,
+  IconRadio,
+  IconRadioActive,
+};

package/dist/assets/svg/icon-radio-active.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12Z" fill="#0088FF"/>
+<circle cx="12" cy="12" r="6" fill="white"/>
+<circle cx="12" cy="12" r="4" fill="#0088FF"/>
+</svg>

package/dist/assets/svg/icon-radio.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12Z" fill="#A3A8AF"/>
+<path d="M6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12C18 15.3137 15.3137 18 12 18C8.68629 18 6 15.3137 6 12Z" fill="white"/>
+</svg>

package/dist/assets/svg/index.d.ts

@@ -0,0 +1,7 @@
+export declare const Svg: {
+    IconClose: import("react").FC<import("react-native-svg").SvgProps>;
+    IconCheckbox: import("react").FC<import("react-native-svg").SvgProps>;
+    IconCheckboxActive: import("react").FC<import("react-native-svg").SvgProps>;
+    IconRadio: import("react").FC<import("react-native-svg").SvgProps>;
+    IconRadioActive: import("react").FC<import("react-native-svg").SvgProps>;
+};

package/dist/assets/svg/index.ts

@@ -0,0 +1,13 @@
+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";
+
+export const Svg = {
+  IconClose,
+  IconCheckbox,
+  IconCheckboxActive,
+  IconRadio,
+  IconRadioActive,
+};

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

@@ -1,6 +1,5 @@
 import React from "react";
 import { StyleProp, TextStyle } from "react-native";
-export type IconType = "FontAwesome" | "Image" | "MaterialIcons" | "Feather" | "MaterialCommunityIcons" | "Svg";
 export interface IconProps {
     name: "IconCheckboxActive" | "IconCheckbox" | "IconRadio" | "IconRadioActive" | "IconRadioDisable" | "IconArrowDown" | "IconClearText" | "IconSearch" | "IconClose" | "IconSuccess" | "IconError" | "IconInfo" | "IconWarning" | "IconDelNumber";
     backgroundColor?: string;
@@ -9,7 +8,6 @@ export interface IconProps {
     style?: StyleProp<TextStyle>;
     showBackground?: boolean;
     onPress?: () => void;
-    type?: IconType;
     tintColor?: string;
     animatedProps?: Record<string, unknown>;
 }

package/dist/index.esm.js

@@ -1,13 +1,15 @@
 import { Dimensions, Platform, StyleSheet, useColorScheme, TouchableOpacity, View as View$1, Text as Text$2, Animated as Animated$1, Pressable, I18nManager, useWindowDimensions, TextInput as TextInput$1, Modal, Keyboard, ActivityIndicator, ImageBackground, Image as Image$2 } from 'react-native';
 import * as React$3 from 'react';
-import React__default, { memo, useCallback, forwardRef as forwardRef$1, useMemo, useState, useEffect, useRef, useImperativeHandle } from 'react';
+import React__default, { memo, useCallback, forwardRef as forwardRef$1, useState, useEffect, useMemo, useRef, useImperativeHandle } from 'react';
 import require$$1 from 'deepmerge';
 import Animated, { useSharedValue, withSequence, withTiming, withSpring, useAnimatedStyle, interpolateColor, useAnimatedReaction } from 'react-native-reanimated';
 import color from 'color';
-import FontAwesome from 'react-native-vector-icons/FontAwesome';
-import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
-import Svg, { Rect, Path, Circle } from 'react-native-svg';
+import IconClose$1 from './assets/svg/icon-close.svg';
+import IconCheckbox$1 from './assets/svg/icon-checkbox.svg';
+import IconCheckboxActive$1 from './assets/svg/icon-checkbox-active.svg';
+import IconRadio$1 from './assets/svg/icon-radio.svg';
+import IconRadioActive$1 from './assets/svg/icon-radio-active.svg';
+import Svg$1, { Rect, Path, Circle } from 'react-native-svg';
 import { useSafeAreaInsets, SafeAreaProvider } from 'react-native-safe-area-context';
 import { useDebouncedCallback } from 'use-debounce';
 
@@ -5013,85 +5015,80 @@ var colors = {
     icon: icon,
 };
 
+var Svg = {
+    IconClose: IconClose$1,
+    IconCheckbox: IconCheckbox$1,
+    IconCheckboxActive: IconCheckboxActive$1,
+    IconRadio: IconRadio$1,
+    IconRadioActive: IconRadioActive$1,
+};
+
 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;
-    // Kiểm tra kỹ hơn
-    if (!name || typeof name !== "function") {
-        console.warn("Icon is not a valid React component:", name);
-        return React__default.createElement(View$1, { style: { width: width, height: height } });
+    var IconComponent = Svg[name];
+    if (!IconComponent) {
+        console.warn("Icon \"".concat(name, "\" kh\u00F4ng t\u1ED3n t\u1EA1i trong Svg."));
+        return null;
     }
-    var IconComponent = name;
     return (React__default.createElement(IconComponent, { width: width, height: height, color: disabled ? colors.ink.INK20 : color, style: style, onPress: disabled ? undefined : onPress }));
 };
 
-var IconCheckboxActive = function (props) { return (React$3.createElement(Svg, __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none" }, props),
+var IconCheckboxActive = function (props) { return (React$3.createElement(Svg$1, __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none" }, props),
     React$3.createElement(Rect, { x: 2, y: 2, width: 20, height: 20, rx: 6, fill: "currentColor" }),
     React$3.createElement(Path, { d: "M17.7745 8.32544L10.4245 15.6751L6.74951 12.0004", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }))); };
 
-var IconCheckbox = function (props) { return (React$3.createElement(Svg, __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none" }, props),
+var IconCheckbox = function (props) { return (React$3.createElement(Svg$1, __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none" }, props),
     React$3.createElement(Rect, { x: 2.75, y: 2.75, width: 18.5, height: 18.5, rx: 5.25, fill: "currentColor", stroke: "#A1A5AB", strokeWidth: 1.5 }))); };
 
-var IconRadio = function (props) { return (React$3.createElement(Svg, __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none" }, props),
+var IconRadio = function (props) { return (React$3.createElement(Svg$1, __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none" }, props),
     React$3.createElement(Circle, { cx: 12, cy: 12, r: 9.25, stroke: "#A1A5AB", strokeWidth: 1.5 }))); };
 
-var IconRadioActive = function (props) { return (React$3.createElement(Svg, __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none" }, props),
+var IconRadioActive = function (props) { return (React$3.createElement(Svg$1, __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none" }, props),
     React$3.createElement(Circle, { cx: 12, cy: 12, r: 9.25, stroke: "currentColor", strokeWidth: 1.5 }),
     React$3.createElement(Circle, { cx: 12, cy: 12, r: 6, fill: "currentColor" }))); };
 
-var IconRadioDisable = function (props) { return (React$3.createElement(Svg, __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none" }, props),
+var IconRadioDisable = function (props) { return (React$3.createElement(Svg$1, __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none" }, props),
     React$3.createElement(Circle, { cx: 12, cy: 12, r: 9.25, stroke: "#E5E7EB", strokeWidth: 1.5 }),
     React$3.createElement(Circle, { cx: 12, cy: 12, r: 6, fill: "#F3F4F6" }))); };
 
-var IconArrowDown = function (props) { return (React$3.createElement(Svg, __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none" }, props),
+var IconArrowDown = function (props) { return (React$3.createElement(Svg$1, __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none" }, props),
     React$3.createElement(Path, { d: "M18.0107 9.70166L12 15.7124L5.98926 9.70166L7.40332 8.2876L12 12.8843L16.5967 8.2876L18.0107 9.70166Z", fill: "currentColor" }))); };
 
-var IconClearText = function (props) { return (React$3.createElement(Svg, __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none" }, props),
+var IconClearText = function (props) { return (React$3.createElement(Svg$1, __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none" }, props),
     React$3.createElement(Path, { d: "M12 2.00043C17.53 2.00043 22 6.47046 22 12.0004C21.9997 17.5302 17.5298 22.0004 12 22.0004C6.47016 22.0004 2.00026 17.5302 2 12.0004C2.00004 6.47046 6.47003 2.00043 12 2.00043ZM12 10.5903L9.41016 8.00043L8 9.40961L10.5898 12.0004L8 14.5903L9.41016 16.0004L12 13.4096L14.5898 16.0004L16 14.5903L13.4102 12.0004L16 9.40961L14.5898 8.00043L12 10.5903Z", fill: "currentColor" }))); };
 
-var IconSearch = function (props) { return (React$3.createElement(Svg, __assign({ width: 16, height: 16, viewBox: "0 0 16 16", fill: "none" }, props),
+var IconSearch = function (props) { return (React$3.createElement(Svg$1, __assign({ width: 16, height: 16, viewBox: "0 0 16 16", fill: "none" }, props),
     React$3.createElement(Path, { d: "M15.7 14.3L11.5 10.1C11.3 9.9 11 9.8 10.7 9.8C11.5 8.8 12 7.4 12 6C12 2.7 9.3 0 6 0C2.7 0 0 2.7 0 6C0 9.3 2.7 12 6 12C7.4 12 8.8 11.5 9.8 10.6C9.8 10.9 9.8 11.2 10.1 11.4L14.3 15.6C14.5 15.8 14.8 15.9 15 15.9C15.2 15.9 15.5 15.8 15.7 15.6C16.1 15.3 16.1 14.7 15.7 14.3ZM6 10.5C3.5 10.5 1.5 8.5 1.5 6C1.5 3.5 3.5 1.5 6 1.5C8.5 1.5 10.5 3.5 10.5 6C10.5 8.5 8.5 10.5 6 10.5Z", fill: "currentColor" }))); };
 
-var IconClose = function (props) { return (React$3.createElement(Svg, __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none" }, props),
+var IconClose = function (props) { return (React$3.createElement(Svg$1, __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none" }, props),
     React$3.createElement(Path, { d: "M19 6.40958L13.4102 12.0004L19 17.5902L17.5898 19.0004L12 13.4096L6.41016 19.0004L5 17.5902L10.5898 12.0004L5 6.40958L6.41016 5.0004L12 10.5902L17.5898 5.0004L19 6.40958Z", fill: "currentColor" }))); };
 
-var IconSuccess = function (props) { return (React__default.createElement(Svg, __assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, props),
+var IconSuccess = function (props) { return (React__default.createElement(Svg$1, __assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, props),
     React__default.createElement(Path, { fillRule: "evenodd", clipRule: "evenodd", d: "M10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5ZM3.86364 10C3.86364 6.61098 6.61098 3.86364 10 3.86364C13.389 3.86364 16.1364 6.61098 16.1364 10C16.1364 13.389 13.389 16.1364 10 16.1364C6.61098 16.1364 3.86364 13.389 3.86364 10Z", fill: "white" }),
     React__default.createElement(Path, { fillRule: "evenodd", clipRule: "evenodd", d: "M8.875 10.9242L12.8447 6.9545L13.9053 8.01516L8.875 13.0455L6.09467 10.2652L7.15533 9.2045L8.875 10.9242Z", fill: "white" }))); };
 
-var IconError = function (props) { return (React__default.createElement(Svg, __assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, props),
+var IconError = function (props) { return (React__default.createElement(Svg$1, __assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, props),
     React__default.createElement(Path, { fillRule: "evenodd", clipRule: "evenodd", d: "M10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5ZM3.86364 10C3.86364 6.61098 6.61098 3.86364 10 3.86364C13.389 3.86364 16.1364 6.61098 16.1364 10C16.1364 13.389 13.389 16.1364 10 16.1364C6.61098 16.1364 3.86364 13.389 3.86364 10Z", fill: "white" }),
     React__default.createElement(Path, { fillRule: "evenodd", clipRule: "evenodd", d: "M13.3333 6.66667L10 10L6.66667 6.66667L5.83333 7.5L9.16667 10.8333L5.83333 14.1667L6.66667 15L10 11.6667L13.3333 15L14.1667 14.1667L10.8333 10.8333L14.1667 7.5L13.3333 6.66667Z", fill: "white" }))); };
 
-var IconInfo = function (props) { return (React__default.createElement(Svg, __assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, props),
+var IconInfo = function (props) { return (React__default.createElement(Svg$1, __assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, props),
     React__default.createElement(Path, { fillRule: "evenodd", clipRule: "evenodd", d: "M10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5ZM3.86364 10C3.86364 6.61098 6.61098 3.86364 10 3.86364C13.389 3.86364 16.1364 6.61098 16.1364 10C16.1364 13.389 13.389 16.1364 10 16.1364C6.61098 16.1364 3.86364 13.389 3.86364 10Z", fill: "white" }),
     React__default.createElement(Path, { fillRule: "evenodd", clipRule: "evenodd", d: "M10 6.66667C10.4602 6.66667 10.8333 7.03976 10.8333 7.5V10.8333C10.8333 11.2936 10.4602 11.6667 10 11.6667C9.53976 11.6667 9.16667 11.2936 9.16667 10.8333V7.5C9.16667 7.03976 9.53976 6.66667 10 6.66667Z", fill: "white" }),
     React__default.createElement(Path, { fillRule: "evenodd", clipRule: "evenodd", d: "M10 12.5C10.4602 12.5 10.8333 12.8731 10.8333 13.3333C10.8333 13.7936 10.4602 14.1667 10 14.1667C9.53976 14.1667 9.16667 13.7936 9.16667 13.3333C9.16667 12.8731 9.53976 12.5 10 12.5Z", fill: "white" }))); };
 
-var IconWarning = function (props) { return (React__default.createElement(Svg, __assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, props),
+var IconWarning = function (props) { return (React__default.createElement(Svg$1, __assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, props),
     React__default.createElement(Path, { fillRule: "evenodd", clipRule: "evenodd", d: "M10 2.5L17.5 17.5H2.5L10 2.5ZM10 5.83333L4.16667 15.8333H15.8333L10 5.83333Z", fill: "white" }),
     React__default.createElement(Path, { fillRule: "evenodd", clipRule: "evenodd", d: "M10 7.5C10.4602 7.5 10.8333 7.8731 10.8333 8.33333V11.6667C10.8333 12.1269 10.4602 12.5 10 12.5C9.53976 12.5 9.16667 12.1269 9.16667 11.6667V8.33333C9.16667 7.8731 9.53976 7.5 10 7.5Z", fill: "white" }),
     React__default.createElement(Path, { fillRule: "evenodd", clipRule: "evenodd", d: "M10 13.3333C10.4602 13.3333 10.8333 13.7064 10.8333 14.1667C10.8333 14.6269 10.4602 15 10 15C9.53976 15 9.16667 14.6269 9.16667 14.1667C9.16667 13.7064 9.53976 13.3333 10 13.3333Z", fill: "white" }))); };
 
-var IconDelNumber = function (props) { return (React$3.createElement(Svg, __assign({ width: 28, height: 20, viewBox: "0 0 28 20", fill: "none" }, props),
+var IconDelNumber = function (props) { return (React$3.createElement(Svg$1, __assign({ width: 28, height: 20, viewBox: "0 0 28 20", fill: "none" }, props),
     React$3.createElement(Path, { d: "M25.1705 0H11.5404C10.9189 0.000239015 10.3202 0.240624 9.8659 0.6725L1.0149 9.08617C0.766199 9.32258 0.625 9.65352 0.625 10C0.625 10.3465 0.766199 10.6774 1.0149 10.9138L9.86599 19.3276C10.3203 19.7595 10.9189 19.9998 11.5404 20H25.1705C25.8214 20 26.4458 19.7366 26.9061 19.2678C27.3664 18.7989 27.625 18.163 27.625 17.5V2.5C27.625 1.83696 27.3664 1.20108 26.9061 0.732233C26.4458 0.263392 25.8214 0 25.1705 0Z", fill: "currentColor" }),
     React$3.createElement(Path, { fillRule: "evenodd", clipRule: "evenodd", d: "M13.8326 5.95343C14.2267 5.5665 14.8598 5.57231 15.2468 5.9664L17.8059 8.57296L20.3651 5.9664C20.752 5.57231 21.3852 5.5665 21.7792 5.95343C22.1733 6.34035 22.1791 6.97349 21.7922 7.36758L19.2073 10.0003L21.7922 12.6331C22.1791 13.0272 22.1733 13.6603 21.7792 14.0472C21.3852 14.4341 20.752 14.4283 20.3651 14.0342L17.8059 11.4277L15.2468 14.0342C14.8598 14.4283 14.2267 14.4341 13.8326 14.0472C13.4385 13.6603 13.4327 13.0272 13.8196 12.6331L16.4045 10.0003L13.8196 7.36758C13.4327 6.97349 13.4385 6.34035 13.8326 5.95343Z", fill: "white" }))); };
 
-var getIconComponent = function (type) {
-    switch (type) {
-        case "MaterialIcons":
-            return MaterialIcons;
-        case "MaterialCommunityIcons":
-            return MaterialCommunityIcons;
-        case "FontAwesome":
-        default:
-            return FontAwesome;
-    }
-};
 var Icon = function (_a) {
-    var name = _a.name, _b = _a.size, size = _b === void 0 ? 14 : _b, color = _a.color, style = _a.style; _a.showBackground; _a.backgroundColor; var onPress = _a.onPress, _c = _a.type, type = _c === void 0 ? "FontAwesome" : _c; _a.tintColor; var rest = __rest(_a, ["name", "size", "color", "style", "showBackground", "backgroundColor", "onPress", "type", "tintColor"]);
+    var name = _a.name, _b = _a.size, size = _b === void 0 ? 14 : _b, color = _a.color, style = _a.style, onPress = _a.onPress;
     var theme = useInternalTheme();
     var colors = theme.colors;
-    var IconComponent = useMemo(function () { return getIconComponent(type); }, [type]);
     var renderName = function () {
         switch (name) {
             case "IconCheckboxActive":
@@ -5127,10 +5124,7 @@ var Icon = function (_a) {
         }
     };
     var renderIcon = function () {
-        if (type === "Svg") {
-            return (React__default.createElement(SvgIcon, { name: renderName(), width: size, height: size, color: color || colors.iconPrimaryDefault }));
-        }
-        return (React__default.createElement(IconComponent, __assign({ name: name, size: size, color: color || colors.iconPrimaryDefault }, rest)));
+        return (React__default.createElement(SvgIcon, { name: renderName(), width: size, height: size, color: color || colors.iconPrimaryDefault }));
     };
     return (React__default.createElement(TouchableOpacity, { disabled: !onPress, onPress: onPress },
         React__default.createElement(View$1, { style: [
@@ -5394,7 +5388,7 @@ var TextInputFlat = function (_a) {
                         ] })),
                     renderSuffix())),
             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 })),
+                React$3.createElement(Icon$1, { name: "IconClearText", 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,
                 } })),
@@ -5644,7 +5638,7 @@ var TextInputDefault = function (_a) {
                         ] })),
                     !multiline && renderSuffix()))),
             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 })),
+                React$3.createElement(Icon$1, { name: "IconClearText", 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,
                 } })),
@@ -5916,7 +5910,7 @@ var TextInputNumber = function (_a) {
                         !checkValueEmpty() && suffix.toString() !== "" && (React__default.createElement(Text$1, { numberOfLines: 1, color: colors.textSecondary, style: [disabled && disabledTextStyle] }, " ",
                             suffix)))),
                 clearButton && !checkValueEmpty() && (React__default.createElement(TouchableOpacity, { activeOpacity: 0.8, onPress: handleClearInput },
-                    React__default.createElement(Icon$1, { name: "IconClearText", type: "Svg", size: 24 }))),
+                    React__default.createElement(Icon$1, { name: "IconClearText", size: 24 }))),
                 right && numberValue && (React__default.createElement(Spacer, { width: 1, height: 24, backgroundColor: theme.colors.borderPrimaryDefault, style: {
                         marginLeft: SPACE_4,
                     } })),
@@ -5932,7 +5926,7 @@ var TextInputNumber = function (_a) {
                         React__default.createElement(View, { paddingHorizontal: SPACE_40 },
                             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(Icon$1, { name: "IconClearText", size: 24, color: colors.textSecondary }))),
                     React__default.createElement(View, { style: styles$c.keyboardGrid }, [
                         ["1", "2", "3"],
                         ["4", "5", "6"],
@@ -5945,7 +5939,7 @@ var TextInputNumber = function (_a) {
                                 inputValue.includes(".") &&
                                 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: [
+                            (key === "." && inputValue.includes(".")) }, key === "del" ? (React__default.createElement(Icon$1, { name: "IconDelNumber", size: 24 })) : (React__default.createElement(Text$1, { style: [
                             styles$c.keyText,
                             styles$c.text22,
                             key === "000" &&
@@ -6715,7 +6709,7 @@ var Toast = memoWithRef(function (_props, ref) {
             ] },
             React__default.createElement(View, { row: true, style: { alignItems: "flex-start" } },
                 React__default.createElement(View, null,
-                    React__default.createElement(Icon$1, { name: getSourceIcon(), type: "Svg", size: 20 })),
+                    React__default.createElement(Icon$1, { name: getSourceIcon(), 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$9.wrapMess }, message)))))));
@@ -7095,7 +7089,7 @@ var Checkbox = function (_a) {
     }, [checked]);
     return (React__default.createElement(View, { 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(Icon$1, { name: isActive ? "IconCheckboxActive" : "IconCheckbox", type: "Svg", size: iconSize, color: checkboxColor }))),
+            React__default.createElement(SvgIcon, { name: isActive ? "IconCheckboxActive" : "IconCheckbox", width: iconSize, height: iconSize, color: checkboxColor }))),
         React__default.createElement(View, null,
             React__default.createElement(Text$1, { color: colors.textDefault, style: [
                     styles$5.text14,
@@ -7128,11 +7122,7 @@ var RadioButton = function (_a) {
     }, [checked, disabled]);
     return (React__default.createElement(View, { 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(Icon$1, { name: disabled
-                    ? "IconRadioDisable"
-                    : checked
-                        ? "IconRadioActive"
-                        : "IconRadio", type: "Svg", size: 24, color: getColorCheckbox }))),
+            React__default.createElement(SvgIcon, { name: checked ? "IconRadioActive" : "IconRadio", width: 24, height: 24, color: getColorCheckbox }))),
         React__default.createElement(View, null,
             React__default.createElement(Text$1, { color: colors.textDefault, style: [
                     styles$4.text14,
@@ -7238,7 +7228,7 @@ var SelectionField = function (_a) {
                     React__default.createElement(Text$1, __assign({ numberOfLines: 1, color: getColor(), style: [disabled && disabledTextStyle, textStyle] }, textProps),
                         content.toString() === "" ? label : content,
                         required && content.toString() === "" && (React__default.createElement(Text$1, { color: colors.textErrorDefault }, " *")))),
-                right || React__default.createElement(Icon$1, { name: "IconArrowDown", type: "Svg", size: 24 }),
+                right || React__default.createElement(Icon$1, { name: "IconArrowDown", 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$2.text12, color: colors.textErrorDefault }, error)))));
@@ -7264,7 +7254,7 @@ var SearchInput = function (_a) {
         onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(text);
     }, debounceTime);
     return (React__default.createElement(TextInput, { left: React__default.createElement(View, null,
-            React__default.createElement(Icon$1, { name: "IconSearch", type: "Svg", size: 18 })), disabled: disabled, value: value, clearButton: clearButton, mode: "default", label: placeholder, placeholder: placeholder, placeholderTextColor: colors.textPlaceholder, right: rightIcon, onFocus: onFocus, autoFocus: autoFocus, onBlur: onBlur, allowFontScaling: false, onChangeText: debouncedOnChangeText, style: [
+            React__default.createElement(Icon$1, { name: "IconSearch", size: 18 })), disabled: disabled, value: value, clearButton: clearButton, mode: "default", label: placeholder, placeholder: placeholder, placeholderTextColor: colors.textPlaceholder, right: rightIcon, onFocus: onFocus, autoFocus: autoFocus, onBlur: onBlur, allowFontScaling: false, onChangeText: debouncedOnChangeText, style: [
             {
                 height: height || 36,
             },
@@ -7308,7 +7298,7 @@ var Tag = function (_a) {
                         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: 20, color: colors.iconBrandDefault }))))));
+                React__default.createElement(Icon$1, { name: "IconClose", size: 20, color: colors.iconBrandDefault }))))));
 };
 var styles$1 = StyleSheet.create(__assign({}, containerStyles));
 
@@ -7447,7 +7437,7 @@ var NumberKeyboard = function (_a) {
                     React__default.createElement(View, { paddingHorizontal: SPACE_40 },
                         React__default.createElement(Text$1, { numberOfLines: 1, style: [styles.text30, styles.valueText] }, formatNumberInput(inputValue, formatDecimal) || "0")),
                     React__default.createElement(TouchableOpacity, { onPress: handleClear, style: styles.clearButton },
-                        React__default.createElement(Icon$1, { name: "IconClearText", type: "Svg", size: 24, color: colors.textSecondary }))),
+                        React__default.createElement(Icon$1, { name: "IconClearText", size: 24, color: colors.textSecondary }))),
                 React__default.createElement(View, { style: styles.keyboardGrid }, [
                     ["1", "2", "3"],
                     ["4", "5", "6"],
@@ -7460,7 +7450,7 @@ var NumberKeyboard = function (_a) {
                             inputValue.includes(".") &&
                             styles.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: [
+                        (key === "." && inputValue.includes(".")) }, key === "del" ? (React__default.createElement(Icon$1, { name: "IconDelNumber", size: 24 })) : (React__default.createElement(Text$1, { style: [
                         styles.keyText,
                         styles.text22,
                         key === "000" &&