sapo-components-ui-rn 1.1.21 → 1.1.23

package/dist/index.js

@@ -7,12 +7,19 @@ var React$3 = require('react');
 var require$$1 = require('deepmerge');
 var Animated = require('react-native-reanimated');
 var color = require('color');
-var IconClose$1 = require('./assets/svg/icon-close.svg');
-var IconCheckbox$1 = require('./assets/svg/icon-checkbox.svg');
-var IconCheckboxActive$1 = require('./assets/svg/icon-checkbox-active.svg');
-var IconRadio$1 = require('./assets/svg/icon-radio.svg');
-var IconRadioActive$1 = require('./assets/svg/icon-radio-active.svg');
-var Svg$1 = require('react-native-svg');
+var IconClose = require('./assets/svg/icon-close.svg');
+var IconCheckbox = require('./assets/svg/icon-checkbox.svg');
+var IconCheckboxActive = require('./assets/svg/icon-checkbox-active.svg');
+var IconRadio = require('./assets/svg/icon-radio.svg');
+var IconRadioActive = require('./assets/svg/icon-radio-active.svg');
+var IconSearch = require('./assets/svg/icons/IconSearch.svg');
+var IconInfo = require('./assets/svg/icons/IconInfo.svg');
+var IconSuccess = require('./assets/svg/icons/IconSuccess.svg');
+var IconWarning = require('./assets/svg/icons/IconWarning.svg');
+var IconArrowDown = require('./assets/svg/icons/IconArrowDown.svg');
+var IconError = require('./assets/svg/icons/IconError.svg');
+var IconClearText = require('./assets/svg/icons/IconClearText.svg');
+var IconDelNumber = require('./assets/svg/icon-del-number.svg');
 var reactNativeSafeAreaContext = require('react-native-safe-area-context');
 var useDebounce = require('use-debounce');
 
@@ -41,12 +48,19 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React$3);
 var require$$1__default = /*#__PURE__*/_interopDefaultLegacy(require$$1);
 var Animated__default = /*#__PURE__*/_interopDefaultLegacy(Animated);
 var color__default = /*#__PURE__*/_interopDefaultLegacy(color);
-var IconClose__default = /*#__PURE__*/_interopDefaultLegacy(IconClose$1);
-var IconCheckbox__default = /*#__PURE__*/_interopDefaultLegacy(IconCheckbox$1);
-var IconCheckboxActive__default = /*#__PURE__*/_interopDefaultLegacy(IconCheckboxActive$1);
-var IconRadio__default = /*#__PURE__*/_interopDefaultLegacy(IconRadio$1);
-var IconRadioActive__default = /*#__PURE__*/_interopDefaultLegacy(IconRadioActive$1);
-var Svg__default = /*#__PURE__*/_interopDefaultLegacy(Svg$1);
+var IconClose__default = /*#__PURE__*/_interopDefaultLegacy(IconClose);
+var IconCheckbox__default = /*#__PURE__*/_interopDefaultLegacy(IconCheckbox);
+var IconCheckboxActive__default = /*#__PURE__*/_interopDefaultLegacy(IconCheckboxActive);
+var IconRadio__default = /*#__PURE__*/_interopDefaultLegacy(IconRadio);
+var IconRadioActive__default = /*#__PURE__*/_interopDefaultLegacy(IconRadioActive);
+var IconSearch__default = /*#__PURE__*/_interopDefaultLegacy(IconSearch);
+var IconInfo__default = /*#__PURE__*/_interopDefaultLegacy(IconInfo);
+var IconSuccess__default = /*#__PURE__*/_interopDefaultLegacy(IconSuccess);
+var IconWarning__default = /*#__PURE__*/_interopDefaultLegacy(IconWarning);
+var IconArrowDown__default = /*#__PURE__*/_interopDefaultLegacy(IconArrowDown);
+var IconError__default = /*#__PURE__*/_interopDefaultLegacy(IconError);
+var IconClearText__default = /*#__PURE__*/_interopDefaultLegacy(IconClearText);
+var IconDelNumber__default = /*#__PURE__*/_interopDefaultLegacy(IconDelNumber);
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -5056,6 +5070,14 @@ var Svg = {
     IconCheckboxActive: IconCheckboxActive__default["default"],
     IconRadio: IconRadio__default["default"],
     IconRadioActive: IconRadioActive__default["default"],
+    IconSearch: IconSearch__default["default"],
+    IconInfo: IconInfo__default["default"],
+    IconSuccess: IconSuccess__default["default"],
+    IconWarning: IconWarning__default["default"],
+    IconArrowDown: IconArrowDown__default["default"],
+    IconError: IconError__default["default"],
+    IconClearText: IconClearText__default["default"],
+    IconDelNumber: IconDelNumber__default["default"],
 };
 
 var SvgIcon = function (_a) {
@@ -5068,111 +5090,6 @@ var SvgIcon = function (_a) {
     return (React__default["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__namespace.createElement(Svg__default["default"], __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none" }, props),
-    React__namespace.createElement(Svg$1.Rect, { x: 2, y: 2, width: 20, height: 20, rx: 6, fill: "currentColor" }),
-    React__namespace.createElement(Svg$1.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__namespace.createElement(Svg__default["default"], __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none" }, props),
-    React__namespace.createElement(Svg$1.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__namespace.createElement(Svg__default["default"], __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none" }, props),
-    React__namespace.createElement(Svg$1.Circle, { cx: 12, cy: 12, r: 9.25, stroke: "#A1A5AB", strokeWidth: 1.5 }))); };
-
-var IconRadioActive = function (props) { return (React__namespace.createElement(Svg__default["default"], __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none" }, props),
-    React__namespace.createElement(Svg$1.Circle, { cx: 12, cy: 12, r: 9.25, stroke: "currentColor", strokeWidth: 1.5 }),
-    React__namespace.createElement(Svg$1.Circle, { cx: 12, cy: 12, r: 6, fill: "currentColor" }))); };
-
-var IconRadioDisable = function (props) { return (React__namespace.createElement(Svg__default["default"], __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none" }, props),
-    React__namespace.createElement(Svg$1.Circle, { cx: 12, cy: 12, r: 9.25, stroke: "#E5E7EB", strokeWidth: 1.5 }),
-    React__namespace.createElement(Svg$1.Circle, { cx: 12, cy: 12, r: 6, fill: "#F3F4F6" }))); };
-
-var IconArrowDown = function (props) { return (React__namespace.createElement(Svg__default["default"], __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none" }, props),
-    React__namespace.createElement(Svg$1.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__namespace.createElement(Svg__default["default"], __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none" }, props),
-    React__namespace.createElement(Svg$1.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__namespace.createElement(Svg__default["default"], __assign({ width: 16, height: 16, viewBox: "0 0 16 16", fill: "none" }, props),
-    React__namespace.createElement(Svg$1.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__namespace.createElement(Svg__default["default"], __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none" }, props),
-    React__namespace.createElement(Svg$1.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["default"].createElement(Svg__default["default"], __assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, props),
-    React__default["default"].createElement(Svg$1.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["default"].createElement(Svg$1.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["default"].createElement(Svg__default["default"], __assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, props),
-    React__default["default"].createElement(Svg$1.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["default"].createElement(Svg$1.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["default"].createElement(Svg__default["default"], __assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, props),
-    React__default["default"].createElement(Svg$1.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["default"].createElement(Svg$1.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["default"].createElement(Svg$1.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["default"].createElement(Svg__default["default"], __assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, props),
-    React__default["default"].createElement(Svg$1.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["default"].createElement(Svg$1.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["default"].createElement(Svg$1.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__namespace.createElement(Svg__default["default"], __assign({ width: 28, height: 20, viewBox: "0 0 28 20", fill: "none" }, props),
-    React__namespace.createElement(Svg$1.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__namespace.createElement(Svg$1.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 Icon = function (_a) {
-    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 renderName = function () {
-        switch (name) {
-            case "IconCheckboxActive":
-                return IconCheckboxActive;
-            case "IconCheckbox":
-                return IconCheckbox;
-            case "IconRadio":
-                return IconRadio;
-            case "IconRadioActive":
-                return IconRadioActive;
-            case "IconRadioDisable":
-                return IconRadioDisable;
-            case "IconArrowDown":
-                return IconArrowDown;
-            case "IconClearText":
-                return IconClearText;
-            case "IconSearch":
-                return IconSearch;
-            case "IconClose":
-                return IconClose;
-            case "IconSuccess":
-                return IconSuccess;
-            case "IconError":
-                return IconError;
-            case "IconInfo":
-                return IconInfo;
-            case "IconWarning":
-                return IconWarning;
-            case "IconDelNumber":
-                return IconDelNumber;
-            default:
-                return IconCheckbox;
-        }
-    };
-    var renderIcon = function () {
-        return (React__default["default"].createElement(SvgIcon, { name: renderName(), width: size, height: size, color: color || colors.iconPrimaryDefault }));
-    };
-    return (React__default["default"].createElement(reactNative.TouchableOpacity, { disabled: !onPress, onPress: onPress },
-        React__default["default"].createElement(reactNative.View, { style: [
-                {
-                    width: size,
-                    height: size,
-                    borderRadius: CONSTANTS.BORDER_RADIUS_8,
-                },
-                style,
-            ] }, renderIcon())));
-};
-var Icon$1 = React__default["default"].memo(Icon);
-
 var TextInputFlat = function (_a) {
     var _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.editable, editable = _c === void 0 ? true : _c, label = _a.label, _d = _a.error, error = _d === void 0 ? false : _d, customSelectionColor = _a.selectionColor, cursorColor = _a.cursorColor, underlineColor = _a.underlineColor; _a.underlineStyle; var activeUnderlineColor = _a.activeUnderlineColor, textColor = _a.textColor, dense = _a.dense, style = _a.style, theme = _a.theme, _e = _a.render, render = _e === void 0 ? function (props) { return React__namespace.createElement(reactNative.TextInput, __assign({}, props)); } : _e, _f = _a.multiline, multiline = _f === void 0 ? false : _f, parentState = _a.parentState, innerRef = _a.innerRef, onFocus = _a.onFocus; _a.forceFocus; var onBlur = _a.onBlur, onChangeText = _a.onChangeText, onLayoutAnimatedText = _a.onLayoutAnimatedText, onLabelTextLayout = _a.onLabelTextLayout; _a.onLeftAffixLayoutChange; _a.onRightAffixLayoutChange; var onInputLayout = _a.onInputLayout, left = _a.left, right = _a.right, prefix = _a.prefix, suffix = _a.suffix, placeholderTextColor = _a.placeholderTextColor, clearButton = _a.clearButton, contentStyle = _a.contentStyle, scaledLabel = _a.scaledLabel, outlineStyle = _a.outlineStyle, outlineColor = _a.outlineColor, value = _a.value, textError = _a.textError, required = _a.required, rest = __rest(_a, ["disabled", "editable", "label", "error", "selectionColor", "cursorColor", "underlineColor", "underlineStyle", "activeUnderlineColor", "textColor", "dense", "style", "theme", "render", "multiline", "parentState", "innerRef", "onFocus", "forceFocus", "onBlur", "onChangeText", "onLayoutAnimatedText", "onLabelTextLayout", "onLeftAffixLayoutChange", "onRightAffixLayoutChange", "onInputLayout", "left", "right", "prefix", "suffix", "placeholderTextColor", "clearButton", "contentStyle", "scaledLabel", "outlineStyle", "outlineColor", "value", "textError", "required"]);
     var _g = React__namespace.useState(value || ""), inputValue = _g[0], setInputValue = _g[1];
@@ -5423,7 +5340,7 @@ var TextInputFlat = function (_a) {
                         ] })),
                     renderSuffix())),
             parentState.focused && !disabled && clearButton && inputValue ? (React__namespace.createElement(reactNative.TouchableOpacity, { onPress: handleClear, style: styles$e.clearButton },
-                React__namespace.createElement(Icon$1, { name: "IconClearText", size: 24 }))) : (React__namespace.createElement(Spacer, { width: SPACE_12 })),
+                React__namespace.createElement(SvgIcon, { name: "IconClearText", width: 24, height: 24 }))) : (React__namespace.createElement(Spacer, { width: SPACE_12 })),
             checkLineRightAction() && (React__namespace.createElement(Spacer, { width: 1, height: 24, backgroundColor: theme.colors.borderPrimaryDefault, style: {
                     marginRight: SPACE_8,
                 } })),
@@ -5673,7 +5590,7 @@ var TextInputDefault = function (_a) {
                         ] })),
                     !multiline && renderSuffix()))),
             parentState.focused && !disabled && clearButton && inputValue ? (React__namespace.createElement(reactNative.TouchableOpacity, { onPress: handleClear, style: multiline ? styles$d.clearButtonMultiline : styles$d.clearButton },
-                React__namespace.createElement(Icon$1, { name: "IconClearText", size: 24 }))) : (React__namespace.createElement(Spacer, { width: CONSTANTS.SPACE_12 })),
+                React__namespace.createElement(SvgIcon, { name: "IconClearText", width: 24, height: 24 }))) : (React__namespace.createElement(Spacer, { width: CONSTANTS.SPACE_12 })),
             checkLineRightAction() && (React__namespace.createElement(Spacer, { width: 1, height: 24, backgroundColor: colors.borderPrimaryDefault, style: {
                     marginRight: CONSTANTS.SPACE_8,
                 } })),
@@ -5945,7 +5862,7 @@ var TextInputNumber = function (_a) {
                         !checkValueEmpty() && suffix.toString() !== "" && (React__default["default"].createElement(Text$1, { numberOfLines: 1, color: colors.textSecondary, style: [disabled && disabledTextStyle] }, " ",
                             suffix)))),
                 clearButton && !checkValueEmpty() && (React__default["default"].createElement(reactNative.TouchableOpacity, { activeOpacity: 0.8, onPress: handleClearInput },
-                    React__default["default"].createElement(Icon$1, { name: "IconClearText", size: 24 }))),
+                    React__default["default"].createElement(SvgIcon, { name: "IconClearText", width: 24, height: 24 }))),
                 right && numberValue && (React__default["default"].createElement(Spacer, { width: 1, height: 24, backgroundColor: theme.colors.borderPrimaryDefault, style: {
                         marginLeft: SPACE_4,
                     } })),
@@ -5961,7 +5878,7 @@ var TextInputNumber = function (_a) {
                         React__default["default"].createElement(View, { paddingHorizontal: SPACE_40 },
                             React__default["default"].createElement(Text$1, { numberOfLines: 1, style: [styles$c.text30, styles$c.valueText] }, formatNumberInput$1(inputValue, formatDecimal) || "0")),
                         React__default["default"].createElement(reactNative.TouchableOpacity, { onPress: handleClear, style: styles$c.clearButton },
-                            React__default["default"].createElement(Icon$1, { name: "IconClearText", size: 24, color: colors.textSecondary }))),
+                            React__default["default"].createElement(SvgIcon, { name: "IconClearText", width: 24, height: 24, color: colors.textSecondary }))),
                     React__default["default"].createElement(View, { style: styles$c.keyboardGrid }, [
                         ["1", "2", "3"],
                         ["4", "5", "6"],
@@ -5974,7 +5891,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["default"].createElement(Icon$1, { name: "IconDelNumber", size: 24 })) : (React__default["default"].createElement(Text$1, { style: [
+                            (key === "." && inputValue.includes(".")) }, key === "del" ? (React__default["default"].createElement(SvgIcon, { name: "IconDelNumber", width: 24, height: 24, color: colors.textSecondary })) : (React__default["default"].createElement(Text$1, { style: [
                             styles$c.keyText,
                             styles$c.text22,
                             key === "000" &&
@@ -6744,7 +6661,7 @@ var Toast = memoWithRef(function (_props, ref) {
             ] },
             React__default["default"].createElement(View, { row: true, style: { alignItems: "flex-start" } },
                 React__default["default"].createElement(View, null,
-                    React__default["default"].createElement(Icon$1, { name: getSourceIcon(), size: 20 })),
+                    React__default["default"].createElement(SvgIcon, { name: getSourceIcon(), width: 20, height: 20 })),
                 React__default["default"].createElement(View, { full: true, paddingLeft: CONSTANTS.SPACE_8 },
                     React__default["default"].createElement(Text$1, { bold: true, color: colors.textOnFillDefault }, options.title),
                     message.toString().length > 0 && (React__default["default"].createElement(Text$1, { color: colors.textOnFillDefault, numberOfLines: 4, style: !options.title && styles$9.wrapMess }, message)))))));
@@ -7124,7 +7041,7 @@ var Checkbox = function (_a) {
     }, [checked]);
     return (React__default["default"].createElement(View, { row: true, disabled: disabled, alignCenter: true, style: [style], onPress: handlePress },
         leftIcon ? (React__default["default"].createElement(View, { paddingRight: CONSTANTS.SPACE_8 }, leftIcon)) : (React__default["default"].createElement(View, { paddingRight: CONSTANTS.SPACE_8 },
-            React__default["default"].createElement(Icon$1, { name: isActive ? "IconCheckboxActive" : "IconCheckbox", size: iconSize, color: checkboxColor }))),
+            React__default["default"].createElement(SvgIcon, { name: isActive ? "IconCheckboxActive" : "IconCheckbox", width: iconSize, height: iconSize, color: checkboxColor }))),
         React__default["default"].createElement(View, null,
             React__default["default"].createElement(Text$1, { color: colors.textDefault, style: [
                     styles$5.text14,
@@ -7157,11 +7074,7 @@ var RadioButton = function (_a) {
     }, [checked, disabled]);
     return (React__default["default"].createElement(View, { row: true, disabled: disabled, alignCenter: true, style: [style], onPress: handlePress },
         leftIcon ? (React__default["default"].createElement(View, { paddingRight: CONSTANTS.SPACE_8 }, leftIcon)) : (React__default["default"].createElement(View, { paddingRight: CONSTANTS.SPACE_8 },
-            React__default["default"].createElement(Icon$1, { name: disabled
-                    ? "IconRadioDisable"
-                    : checked
-                        ? "IconRadioActive"
-                        : "IconRadio", size: 24, color: getColorCheckbox }))),
+            React__default["default"].createElement(SvgIcon, { name: checked ? "IconRadioActive" : "IconRadio", width: 24, height: 24, color: getColorCheckbox }))),
         React__default["default"].createElement(View, null,
             React__default["default"].createElement(Text$1, { color: colors.textDefault, style: [
                     styles$4.text14,
@@ -7267,7 +7180,7 @@ var SelectionField = function (_a) {
                     React__default["default"].createElement(Text$1, __assign({ numberOfLines: 1, color: getColor(), style: [disabled && disabledTextStyle, textStyle] }, textProps),
                         content.toString() === "" ? label : content,
                         required && content.toString() === "" && (React__default["default"].createElement(Text$1, { color: colors.textErrorDefault }, " *")))),
-                right || React__default["default"].createElement(Icon$1, { name: "IconArrowDown", size: 24 }),
+                right || React__default["default"].createElement(SvgIcon, { name: "IconArrowDown", height: 24, width: 24 }),
                 React__default["default"].createElement(Spacer, { width: SPACE_12 }))),
         error.length > 0 && (React__default["default"].createElement(View, { paddingHorizontal: SPACE_12, paddingVertical: SPACE_4 },
             React__default["default"].createElement(Text$1, { style: styles$2.text12, color: colors.textErrorDefault }, error)))));
@@ -7293,7 +7206,7 @@ var SearchInput = function (_a) {
         onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(text);
     }, debounceTime);
     return (React__default["default"].createElement(TextInput, { left: React__default["default"].createElement(View, null,
-            React__default["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: [
+            React__default["default"].createElement(SvgIcon, { name: "IconSearch", width: 18, height: 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,
             },
@@ -7337,7 +7250,7 @@ var Tag = function (_a) {
                         textStyle,
                     ] }, title)),
             rightIcon ? (React__default["default"].createElement(View, { paddingLeft: CONSTANTS.SPACE_4 }, rightIcon)) : hideRightIcon ? (React__default["default"].createElement(View, null)) : (React__default["default"].createElement(View, { paddingLeft: CONSTANTS.SPACE_4 },
-                React__default["default"].createElement(Icon$1, { name: "IconClose", size: 20, color: colors.iconBrandDefault }))))));
+                React__default["default"].createElement(SvgIcon, { name: "IconClose", width: 20, height: 20, color: colors.iconBrandDefault }))))));
 };
 var styles$1 = reactNative.StyleSheet.create(__assign({}, containerStyles));
 
@@ -7476,7 +7389,7 @@ var NumberKeyboard = function (_a) {
                     React__default["default"].createElement(View, { paddingHorizontal: SPACE_40 },
                         React__default["default"].createElement(Text$1, { numberOfLines: 1, style: [styles.text30, styles.valueText] }, formatNumberInput(inputValue, formatDecimal) || "0")),
                     React__default["default"].createElement(reactNative.TouchableOpacity, { onPress: handleClear, style: styles.clearButton },
-                        React__default["default"].createElement(Icon$1, { name: "IconClearText", size: 24, color: colors.textSecondary }))),
+                        React__default["default"].createElement(SvgIcon, { name: "IconClearText", width: 24, height: 24, color: colors.textSecondary }))),
                 React__default["default"].createElement(View, { style: styles.keyboardGrid }, [
                     ["1", "2", "3"],
                     ["4", "5", "6"],
@@ -7489,7 +7402,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["default"].createElement(Icon$1, { name: "IconDelNumber", size: 24 })) : (React__default["default"].createElement(Text$1, { style: [
+                        (key === "." && inputValue.includes(".")) }, key === "del" ? (React__default["default"].createElement(Icon, { name: "IconDelNumber", size: 24 })) : (React__default["default"].createElement(Text$1, { style: [
                         styles.keyText,
                         styles.text22,
                         key === "000" &&