sapo-components-ui-rn 1.0.47 → 1.0.49

package/dist/index.js

@@ -389,6 +389,8 @@ var ref = {
                 borderPrimaryFocused: blue.BLUE100,
                 borderWarningInverseDefault: yellow.YELLOW40,
                 borderSuccessInverseDefault: green.GREEN40,
+                toggleBackgroundDefault: ink.INK10,
+                toggleBackgroundActive: green.GREEN80,
             },
         },
         light: {
@@ -531,6 +533,8 @@ var ref = {
                 borderPrimaryFocused: blue.BLUE100,
                 borderWarningInverseDefault: yellow.YELLOW40,
                 borderSuccessInverseDefault: green.GREEN40,
+                toggleBackgroundDefault: ink.INK10,
+                toggleBackgroundActive: green.GREEN80,
             },
         },
     },
@@ -1298,6 +1302,8 @@ var LightTheme = {
         borderPrimaryFocused: blue.BLUE100,
         borderWarningInverseDefault: yellow.YELLOW40,
         borderSuccessInverseDefault: green.GREEN40,
+        toggleBackgroundDefault: ink.INK10,
+        toggleBackgroundActive: green.GREEN80,
     },
     fonts: configureFonts(),
     animation: {
@@ -1444,6 +1450,8 @@ var DarkTheme = __assign(__assign({}, LightTheme), { dark: true, mode: "adaptive
         borderPrimaryFocused: blue.BLUE100,
         borderWarningInverseDefault: yellow.YELLOW40,
         borderSuccessInverseDefault: green.GREEN40,
+        toggleBackgroundDefault: ink.INK10,
+        toggleBackgroundActive: green.GREEN80,
     } });
 
 var DefaultTheme = LightTheme;
@@ -2060,7 +2068,7 @@ var getCheckedColor = function (_a) {
     if (color) {
         return color;
     }
-    return theme.colors.surfaceBrandDefault;
+    return theme.colors.toggleBackgroundActive;
 };
 var getThumbTintColor = function (_a) {
     var theme = _a.theme, disabled = _a.disabled, value = _a.value, checkedColor = _a.checkedColor;
@@ -2070,17 +2078,17 @@ var getThumbTintColor = function (_a) {
     }
     if (disabled) {
         if (theme.dark) {
-            return theme.colors.backgroundPrimary;
+            return theme.colors.toggleBackgroundDefault;
         }
-        return theme.colors.backgroundPrimary;
+        return theme.colors.toggleBackgroundDefault;
     }
     if (value) {
         return checkedColor;
     }
     if (theme.dark) {
-        return theme.colors.backgroundPrimary;
+        return theme.colors.toggleBackgroundDefault;
     }
-    return theme.colors.backgroundPrimary;
+    return theme.colors.toggleBackgroundDefault;
 };
 var getOnTintColor = function (_a) {
     var theme = _a.theme, disabled = _a.disabled, value = _a.value, checkedColor = _a.checkedColor;
@@ -2090,17 +2098,17 @@ var getOnTintColor = function (_a) {
     }
     if (disabled) {
         if (theme.dark) {
-            return theme.colors.backgroundPrimary;
+            return theme.colors.toggleBackgroundDefault;
         }
-        return theme.colors.backgroundPrimary;
+        return theme.colors.toggleBackgroundDefault;
     }
     if (value) {
         return checkedColor;
     }
     if (theme.dark) {
-        return theme.colors.backgroundPrimary;
+        return theme.colors.toggleBackgroundDefault;
     }
-    return theme.colors.backgroundPrimary;
+    return theme.colors.toggleBackgroundDefault;
 };
 var getSwitchColor = function (_a) {
     var theme = _a.theme, disabled = _a.disabled, value = _a.value, color = _a.color;
@@ -2142,25 +2150,19 @@ var Switch = function (_a) {
         disabled: disabled,
         value: value,
         color: color,
-    }), checkedColor = _b.checkedColor, onTintColor = _b.onTintColor, thumbTintColor = _b.thumbTintColor;
+    }), onTintColor = _b.onTintColor, thumbTintColor = _b.thumbTintColor;
     var props = version && version.major === 0 && version.minor <= 56
         ? {
             onTintColor: onTintColor,
             thumbTintColor: thumbTintColor,
         }
-        : reactNative.Platform.OS === "web"
-            ? {
-                activeTrackColor: onTintColor,
-                thumbColor: thumbTintColor,
-                activeThumbColor: checkedColor,
-            }
-            : {
-                thumbColor: thumbTintColor,
-                trackColor: {
-                    true: onTintColor,
-                    false: onTintColor,
-                },
-            };
+        : {
+            thumbColor: thumbTintColor,
+            trackColor: {
+                true: onTintColor,
+                false: onTintColor,
+            },
+        };
     return (React__namespace.createElement(View, { row: true },
         React__namespace.createElement(reactNative.Switch, __assign({ value: value, disabled: disabled, onValueChange: disabled ? undefined : onValueChange }, props, rest))));
 };
@@ -2805,6 +2807,24 @@ var IconSearch = function (props) { return (React__namespace.createElement(Svg__
 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.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.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.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.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.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.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.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.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.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.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.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 getIconComponent = function (type) {
     switch (type) {
         case "MaterialIcons":
@@ -2841,6 +2861,14 @@ var Icon = function (_a) {
                 return IconSearch;
             case "IconClose":
                 return IconClose;
+            case "IconSuccess":
+                return IconSuccess;
+            case "IconError":
+                return IconError;
+            case "IconInfo":
+                return IconInfo;
+            case "IconWarning":
+                return IconWarning;
             default:
                 return IconCheckbox;
         }
@@ -6352,15 +6380,15 @@ var Toast = memoWithRef(function (_props, ref) {
     var getSourceIcon = function () {
         switch (options.type) {
             case "success":
-                return require("./assets/images/success.png");
+                return "IconSuccess";
             case "error":
-                return require("./assets/images/error.png");
+                return "IconError";
             case "info":
-                return require("./assets/images/info.png");
+                return "IconInfo";
             case "warning":
-                return require("./assets/images/warning.png");
+                return "IconWarning";
             default:
-                return require("./assets/images/success.png");
+                return "IconSuccess";
         }
     };
     var handleToastBottomHeight = function () {
@@ -6405,7 +6433,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(reactNative.Image, { source: getSourceIcon(), style: styles$7.img })),
+                    React__default["default"].createElement(Icon$1, { name: getSourceIcon(), type: "Svg", size: 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$7.wrapMess }, message)))))));