sapo-components-ui-rn 1.1.84 → 1.1.87

package/README.md

@@ -19,21 +19,22 @@ Thư viện này yêu cầu các peer dependencies sau:
   "react": ">=18.0.0",
   "react-native": ">=0.70.0",
   "@react-native-community/masked-view": "*",
-  "react-native-gesture-handler": "*",
-  "react-native-reanimated": "*",
   "react-native-safe-area-context": "*",
-  "react-native-screens": "*"
+  "react-native-screens": "*",
+  "react-native-svg": "*"
 }
 ```
 
 ## Sử dụng
 
 ```tsx
-import { Button } from '@sapo/components-ui-rn';
+import { Button, ToastProvider } from 'sapo-components-ui-rn';
 
-function MyComponent() {
+function App() {
   return (
-    <Button disabled textStyle={{...}}  title="My Button" onPress={()=> {}}/>
+    <ToastProvider>
+      <Button title="My Button" onPress={() => {}} />
+    </ToastProvider>
   );
 }
 ```

package/dist/components/Toast/ToastProvider.d.ts

@@ -14,7 +14,7 @@ interface ToastProviderProps {
     children: React.ReactNode;
     /**
      * Nếu ứng dụng đã có SafeAreaProvider, set wrapSafeArea = false
-     * @default true
+     * @default false
      */
     wrapSafeArea?: boolean;
 }

package/dist/core/theming.d.ts

@@ -7,7 +7,7 @@ export declare const ThemeProvider: ({ children }: {
     children: React.ReactNode;
 }) => React.JSX.Element;
 export declare function useTheme<T = AppTheme>(overrides?: $DeepPartial<T>): T;
-export declare const useInternalTheme: () => AppTheme;
+export declare const useInternalTheme: () => InternalTheme;
 export declare const withInternalTheme: <Props extends {
     theme: InternalTheme;
 }, C>(WrappedComponent: ComponentType<Props & {

package/dist/index.d.ts

@@ -2,7 +2,6 @@ export { ThemeColors } from "./styles/themes/tokens";
 export { CONSTANTS } from "./styles/themes/tokens";
 export { ThemeColors as ThemeColorsProps } from "./types";
 export { default as containerStyles } from "./theme/container-styles";
-export { useTheme, ThemeProvider, DefaultTheme, adaptNavigationTheme, } from "./core/theming";
 export * from "./styles/themes";
 export { default as Switch } from "./components/Switch/Switch";
 export { default as TextInput } from "./components/TextInput/TextInput";

package/dist/index.esm.js

@@ -1,8 +1,7 @@
-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 { Platform, StyleSheet, Dimensions, TouchableOpacity, View as View$1, Animated, Text as Text$2, 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, { forwardRef as forwardRef$1, memo, useCallback, useState, useEffect, useMemo, useRef, useImperativeHandle } from 'react';
+import React__default, { forwardRef as forwardRef$1, memo, useRef, useEffect, useCallback, useState, useMemo, 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 IconClose from './assets/svg/icon-close.svg';
 import IconCheckbox from './assets/svg/icon-checkbox.svg';
@@ -224,8 +223,7 @@ var yellow = {
     YELLOW_STATUS: YELLOW_STATUS,
 };
 
-var DEVICE_HEIGHT = Dimensions.get("window").height;
-var DEVICE_WIDTH = Dimensions.get("window").width;
+var getWindowDimensions = function () { return Dimensions.get("window"); };
 var ref = {
     palette: {
         dark: {
@@ -604,8 +602,12 @@ var typescale = {
 };
 var ThemeColors = ref.palette;
 var CONSTANTS = {
-    DEVICE_HEIGHT: DEVICE_HEIGHT,
-    DEVICE_WIDTH: DEVICE_WIDTH,
+    get DEVICE_HEIGHT() {
+        return getWindowDimensions().height;
+    },
+    get DEVICE_WIDTH() {
+        return getWindowDimensions().width;
+    },
     HEADER_HEIGHT: 50,
     BUTTON_HEIGHT: 48,
     BUTTON_HEIGHT_SMALL: 36,
@@ -723,6 +725,48 @@ var containerStyles = StyleSheet.create({
     },
 });
 
+function configureV3Fonts(config) {
+    if (!config) {
+        return typescale;
+    }
+    var isFlatConfig = Object.keys(config).every(function (key) { return typeof config[key] !== "object"; });
+    if (isFlatConfig) {
+        return Object.fromEntries(Object.entries(typescale).map(function (_a) {
+            var variantName = _a[0], variantProperties = _a[1];
+            return [
+                variantName,
+                __assign(__assign({}, variantProperties), config),
+            ];
+        }));
+    }
+    return Object.assign.apply(Object, __spreadArray([{},
+        typescale], Object.entries(config).map(function (_a) {
+        var _b;
+        var variantName = _a[0], variantProperties = _a[1];
+        return (_b = {},
+            _b[variantName] = __assign(__assign({}, typescale[variantName]), variantProperties),
+            _b);
+    }), false));
+}
+// eslint-disable-next-line no-redeclare
+function configureFonts(params) {
+    var config = (params || {}).config;
+    return configureV3Fonts(config);
+}
+
+var LightTheme = {
+    dark: false,
+    roundness: 8,
+    version: 3,
+    colors: ThemeColors.light.colors,
+    fonts: configureFonts(),
+    animation: {
+        scale: 1.0,
+    },
+};
+
+var DarkTheme = __assign(__assign({}, LightTheme), { dark: true, mode: "adaptive", version: 3, colors: ThemeColors.light.colors });
+
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 var createTheming$2 = {};
@@ -1215,112 +1259,10 @@ var createTheming = _createTheming.default;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function configureV3Fonts(config) {
-    if (!config) {
-        return typescale;
-    }
-    var isFlatConfig = Object.keys(config).every(function (key) { return typeof config[key] !== "object"; });
-    if (isFlatConfig) {
-        return Object.fromEntries(Object.entries(typescale).map(function (_a) {
-            var variantName = _a[0], variantProperties = _a[1];
-            return [
-                variantName,
-                __assign(__assign({}, variantProperties), config),
-            ];
-        }));
-    }
-    return Object.assign.apply(Object, __spreadArray([{},
-        typescale], Object.entries(config).map(function (_a) {
-        var _b;
-        var variantName = _a[0], variantProperties = _a[1];
-        return (_b = {},
-            _b[variantName] = __assign(__assign({}, typescale[variantName]), variantProperties),
-            _b);
-    }), false));
-}
-// eslint-disable-next-line no-redeclare
-function configureFonts(params) {
-    var config = (params || {}).config;
-    return configureV3Fonts(config);
-}
-
-var LightTheme = {
-    dark: false,
-    roundness: 8,
-    version: 3,
-    colors: ThemeColors.light.colors,
-    fonts: configureFonts(),
-    animation: {
-        scale: 1.0,
-    },
-};
-
-var DarkTheme = __assign(__assign({}, LightTheme), { dark: true, mode: "adaptive", version: 3, colors: ThemeColors.light.colors });
-
-var DefaultTheme = LightTheme;
-var _a = createTheming(LightTheme), BaseThemeProvider = _a.ThemeProvider; _a.withTheme; var useAppTheme = _a.useTheme;
-var ThemeProvider = function (_a) {
-    var children = _a.children;
-    var colorScheme = useColorScheme();
-    var isDark = colorScheme === "dark";
-    var theme = isDark ? DarkTheme : LightTheme;
-    return React__default.createElement(BaseThemeProvider, { theme: theme }, children);
-};
-function useTheme(overrides) {
-    return useAppTheme(overrides);
-}
+var _a = createTheming(LightTheme); _a.ThemeProvider; _a.withTheme; var useAppTheme = _a.useTheme;
 var useInternalTheme = function () {
-    var colorScheme = useColorScheme();
-    var isDark = colorScheme === "dark";
-    var theme = getTheme(isDark);
-    return theme;
-};
-var defaultThemesByVersion = {
-    light: LightTheme,
-    dark: DarkTheme,
+    return useAppTheme();
 };
-var getTheme = function (isDark) {
-    if (isDark === void 0) { isDark = false; }
-    var scheme = isDark ? "dark" : "light";
-    return defaultThemesByVersion[scheme];
-};
-// eslint-disable-next-line no-redeclare
-function adaptNavigationTheme(themes) {
-    var reactNavigationLight = themes.reactNavigationLight, reactNavigationDark = themes.reactNavigationDark, materialLight = themes.materialLight, materialDark = themes.materialDark;
-    var getAdaptedTheme = function (navigationTheme, AppTheme) {
-        return __assign(__assign({}, navigationTheme), { colors: __assign(__assign({}, navigationTheme.colors), { primary: AppTheme.colors.surfaceBrandDefault, background: AppTheme.colors.backgroundPrimary, card: AppTheme.colors.card, text: AppTheme.colors.backgroundPrimary, border: AppTheme.colors.borderPrimaryDefault, notification: AppTheme.colors.surfaceErrorDefault }) });
-    };
-    var AppThemes = {
-        light: materialLight || LightTheme,
-        dark: materialDark || DarkTheme,
-    };
-    if (reactNavigationLight && reactNavigationDark) {
-        var modes = ["light", "dark"];
-        var NavigationThemes_1 = {
-            light: reactNavigationLight,
-            dark: reactNavigationDark,
-        };
-        var _a = modes.reduce(function (prev, curr) {
-            var _a;
-            return __assign(__assign({}, prev), (_a = {}, _a[curr] = getAdaptedTheme(NavigationThemes_1[curr], AppThemes[curr]), _a));
-        }, {
-            light: reactNavigationLight,
-            dark: reactNavigationDark,
-        }), adaptedLight = _a.light, adaptedDark = _a.dark;
-        return {
-            LightTheme: adaptedLight,
-            DarkTheme: adaptedDark,
-        };
-    }
-    if (reactNavigationDark) {
-        return {
-            DarkTheme: getAdaptedTheme(reactNavigationDark, AppThemes.dark),
-        };
-    }
-    return {
-        LightTheme: getAdaptedTheme(reactNavigationLight, AppThemes.light),
-    };
-}
 
 var ViewCustom = forwardRef$1(function (_a, ref) {
     var row = _a.row, full = _a.full, justifyCenter = _a.justifyCenter, justifyBetween = _a.justifyBetween, alignCenter = _a.alignCenter, center = _a.center, color = _a.color, backgroundColor = _a.backgroundColor, width = _a.width, height = _a.height, padding = _a.padding, paddingHorizontal = _a.paddingHorizontal, paddingVertical = _a.paddingVertical, marginHorizontal = _a.marginHorizontal, marginVertical = _a.marginVertical, paddingLeft = _a.paddingLeft, paddingRight = _a.paddingRight, paddingTop = _a.paddingTop, alignEnd = _a.alignEnd, wrap = _a.wrap, borderBottomWidth = _a.borderBottomWidth, borderBottomColor = _a.borderBottomColor, borderRadius = _a.borderRadius, borderWidth = _a.borderWidth, borderColor = _a.borderColor, style = _a.style, onPress = _a.onPress, _b = _a.activeOpacity, activeOpacity = _b === void 0 ? 0.8 : _b, children = _a.children, disabled = _a.disabled, paddingBottom = _a.paddingBottom, marginTop = _a.marginTop, marginBottom = _a.marginBottom, marginLeft = _a.marginLeft, marginRight = _a.marginRight, margin = _a.margin, borderTopWidth = _a.borderTopWidth, borderTopColor = _a.borderTopColor, borderLeftWidth = _a.borderLeftWidth, borderLeftColor = _a.borderLeftColor, borderRightWidth = _a.borderRightWidth, borderRightColor = _a.borderRightColor, pointerEvents = _a.pointerEvents, gap = _a.gap, 
@@ -1530,47 +1472,51 @@ var ViewCustom = forwardRef$1(function (_a, ref) {
 });
 var View = React__default.memo(ViewCustom);
 
+var animateProgress = function (progress, toValue) {
+    Animated.sequence([
+        Animated.timing(progress, {
+            toValue: toValue,
+            duration: 150,
+            useNativeDriver: false,
+        }),
+        Animated.spring(progress, {
+            toValue: toValue,
+            damping: 20,
+            stiffness: 200,
+            mass: 0.5,
+            velocity: 0.5,
+            useNativeDriver: false,
+        }),
+    ]).start();
+};
 var Switch = memo(function (_a) {
     var value = _a.value, disabled = _a.disabled, onValueChange = _a.onValueChange, _b = _a.size, size = _b === void 0 ? "normal" : _b;
     var theme = useInternalTheme();
     var colors = theme.colors;
-    var progress = useSharedValue(value ? 1 : 0);
+    var progress = useRef(new Animated.Value(value ? 1 : 0)).current;
+    useEffect(function () {
+        if (value !== undefined) {
+            animateProgress(progress, value ? 1 : 0);
+        }
+    }, [value, progress]);
     var handleSwitch = useCallback(function () {
         if (disabled)
             return;
         var newValue = !value;
-        progress.value = withSequence(withTiming(newValue ? 1 : 0, {
-            duration: 150,
-        }), withSpring(newValue ? 1 : 0, {
-            damping: 20,
-            stiffness: 200,
-            mass: 0.5,
-            velocity: 0.5,
-        }));
+        animateProgress(progress, newValue ? 1 : 0);
         onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue);
-    }, [disabled, value, onValueChange]);
-    var animatedStyle = useAnimatedStyle(function () {
-        return {
-            transform: [{ translateX: progress.value * 20 }],
-        };
+    }, [disabled, value, onValueChange, progress]);
+    var translateX = progress.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, 20],
     });
-    var backgroundColor = useAnimatedStyle(function () {
-        return {
-            backgroundColor: interpolateColor(progress.value, [0, 1], [colors.toggleBackgroundDefault, colors.toggleBackgroundActive]),
-        };
+    var backgroundColor = progress.interpolate({
+        inputRange: [0, 1],
+        outputRange: [
+            colors.toggleBackgroundDefault,
+            colors.toggleBackgroundActive,
+        ],
     });
-    useAnimatedReaction(function () { return value; }, function (currentValue) {
-        if (currentValue !== undefined) {
-            progress.value = withSequence(withTiming(currentValue ? 1 : 0, {
-                duration: 150,
-            }), withSpring(currentValue ? 1 : 0, {
-                damping: 20,
-                stiffness: 200,
-                mass: 0.5,
-                velocity: 0.5,
-            }));
-        }
-    }, [value]);
     var getSizeSwitch = useCallback(function () {
         switch (size) {
             case "small":
@@ -1605,8 +1551,12 @@ var Switch = memo(function (_a) {
     }, [size, colors]);
     return (React$3.createElement(View, { row: true },
         React$3.createElement(TouchableOpacity, { activeOpacity: 1, onPress: handleSwitch, disabled: disabled, style: disabled ? { opacity: 0.6 } : {} },
-            React$3.createElement(Animated.View, { style: [styles$j.vSegment, backgroundColor, getSizeSwitch()] },
-                React$3.createElement(Animated.View, { style: [styles$j.animated, animatedStyle, getSizeCircle()] })))));
+            React$3.createElement(Animated.View, { style: [styles$j.vSegment, { backgroundColor: backgroundColor }, getSizeSwitch()] },
+                React$3.createElement(Animated.View, { style: [
+                        styles$j.animated,
+                        { transform: [{ translateX: translateX }] },
+                        getSizeCircle(),
+                    ] })))));
 });
 var styles$j = StyleSheet.create({
     vSegment: {
@@ -1617,11 +1567,6 @@ var styles$j = StyleSheet.create({
     },
     animated: {
         position: "absolute",
-        // shadowColor: "#000000",
-        // shadowOffset: { width: 0, height: 0 },
-        // shadowOpacity: 0.15,
-        // shadowRadius: BORDER_RADIUS_6,
-        // elevation: 5,
         marginHorizontal: 2,
     },
 });
@@ -1983,7 +1928,7 @@ var TextInputAffix = function (_a) {
         _b);
     var textColor = getTextColor({ theme: theme, disabled: disabled });
     var content = (React__default.createElement(Text$2, { maxFontSizeMultiplier: maxFontSizeMultiplier, style: [{ color: textColor }, textStyle, labelStyle], onLayout: onTextLayout, testID: "".concat(testID, "-text") }, text));
-    return (React__default.createElement(Animated$1.View, { style: [
+    return (React__default.createElement(Animated.View, { style: [
             styles$i.container,
             style,
             {
@@ -2051,7 +1996,7 @@ var AnimatedText = forwardRef(function AnimatedText(_a, ref) {
         if (typeof font !== "object") {
             throw new Error("Variant ".concat(variant, " was not provided properly. Valid variants are ").concat(Object.keys(theme.fonts).join(", "), "."));
         }
-        return (React$3.createElement(Animated$1.Text, __assign({ ref: ref }, rest, { style: [
+        return (React$3.createElement(Animated.Text, __assign({ ref: ref }, rest, { style: [
                 font,
                 styles$h.text,
                 { writingDirection: writingDirection, color: theme.colors.backgroundPrimary },
@@ -4648,7 +4593,7 @@ var InputLabel = function (props) {
     // 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$g.overflow, styles$g.labelContainer] },
-        React__default.createElement(Animated$1.View, { pointerEvents: "none", style: [
+        React__default.createElement(Animated.View, { pointerEvents: "none", style: [
                 StyleSheet.absoluteFill,
                 Platform.OS !== "web" && { width: width },
                 { opacity: opacity },
@@ -4732,8 +4677,6 @@ var Spacer = function (_a) {
     return (React__default.createElement(View, { backgroundColor: backgroundColor || "transparent", width: width, height: height, style: [style] }));
 };
 
-Dimensions.get("window").height;
-Dimensions.get("window").width;
 var BUTTON_HEIGHT = 48;
 var BUTTON_HEIGHT_SMALL = 40;
 var SPACE_4 = 4;
@@ -4910,8 +4853,8 @@ var TextInputFlat = function (_a) {
     adjustPaddingFlat(__assign(__assign({}, paddingSettings), { pad: pad }));
     var baseLabelTranslateY = -labelHalfHeight - (topPosition + MINIMIZED_LABEL_Y_OFFSET);
     var placeholderOpacityAnims = React$3.useRef([
-        new Animated$1.Value(0),
-        new Animated$1.Value(1),
+        new Animated.Value(0),
+        new Animated.Value(1),
     ]).current;
     var placeholderOpacity = hasActiveOutline
         ? parentState.labeled
@@ -5980,8 +5923,8 @@ var TextInput = forwardRef(function (_a, ref) {
     var theme = useInternalTheme();
     var isControlled = rest.value !== undefined;
     var validInputValue = isControlled ? rest.value : rest.defaultValue;
-    var labeled = React__default.useRef(new Animated$1.Value(validInputValue ? 0 : 1)).current;
-    var error = React__default.useRef(new Animated$1.Value(errorProp ? 1 : 0)).current;
+    var labeled = React__default.useRef(new Animated.Value(validInputValue ? 0 : 1)).current;
+    var error = React__default.useRef(new Animated.Value(errorProp ? 1 : 0)).current;
     var _k = React__default.useState(false), focused = _k[0], setFocused = _k[1];
     var _l = React__default.useState(false), displayPlaceholder = _l[0], setDisplayPlaceholder = _l[1];
     var _m = React__default.useState(validInputValue), uncontrolledValue = _m[0], setUncontrolledValue = _m[1];
@@ -6021,7 +5964,7 @@ var TextInput = forwardRef(function (_a, ref) {
         // When the input has an error, we wiggle the label and apply error styles
         if (errorProp) {
             // show error
-            Animated$1.timing(error, {
+            Animated.timing(error, {
                 toValue: 1,
                 duration: FOCUS_ANIMATION_DURATION * scale,
                 // To prevent this - https://github.com/callstack/react-native-paper/issues/941
@@ -6031,7 +5974,7 @@ var TextInput = forwardRef(function (_a, ref) {
         else {
             // hide error
             {
-                Animated$1.timing(error, {
+                Animated.timing(error, {
                     toValue: 0,
                     duration: BLUR_ANIMATION_DURATION * scale,
                     // To prevent this - https://github.com/callstack/react-native-paper/issues/941
@@ -6071,7 +6014,7 @@ var TextInput = forwardRef(function (_a, ref) {
         // https://github.com/callstack/react-native-paper/pull/1440
         if (value || focused) {
             // minimize label
-            Animated$1.timing(labeled, {
+            Animated.timing(labeled, {
                 toValue: 0,
                 duration: BLUR_ANIMATION_DURATION * scale,
                 // To prevent this - https://github.com/callstack/react-native-paper/issues/941
@@ -6080,7 +6023,7 @@ var TextInput = forwardRef(function (_a, ref) {
         }
         else {
             // restore label
-            Animated$1.timing(labeled, {
+            Animated.timing(labeled, {
                 toValue: 1,
                 duration: FOCUS_ANIMATION_DURATION * scale,
                 // To prevent this - https://github.com/callstack/react-native-paper/issues/941
@@ -6395,9 +6338,9 @@ var ViewVisibleAnimated = React__default.memo(React__default.forwardRef(function
         hide: hide,
         show: show,
     }); });
-    var visibleAnimation = useRef(new Animated$1.Value(0)).current;
-    var translateAnimation = useRef(new Animated$1.Value(0)).current;
-    var scaleAnimation = useRef(new Animated$1.Value(scaleType === "in" ? 0 : 3)).current;
+    var visibleAnimation = useRef(new Animated.Value(0)).current;
+    var translateAnimation = useRef(new Animated.Value(0)).current;
+    var scaleAnimation = useRef(new Animated.Value(scaleType === "in" ? 0 : 3)).current;
     var _o = useState(false), visible = _o[0], setVisible = _o[1];
     var TIME_OUT = null;
     useEffect(function () {
@@ -6428,18 +6371,18 @@ var ViewVisibleAnimated = React__default.memo(React__default.forwardRef(function
         if (position === void 0) { position = "bottom"; }
         setVisible(true);
         translateAnimation.setValue(position === "bottom" ? 100 : -100);
-        Animated$1.parallel([
-            Animated$1.timing(scaleAnimation, {
+        Animated.parallel([
+            Animated.timing(scaleAnimation, {
                 toValue: 1,
                 duration: duration,
                 useNativeDriver: true,
             }),
-            Animated$1.timing(visibleAnimation, {
+            Animated.timing(visibleAnimation, {
                 toValue: 1,
                 duration: duration,
                 useNativeDriver: true,
             }),
-            Animated$1.timing(translateAnimation, {
+            Animated.timing(translateAnimation, {
                 toValue: 0,
                 duration: duration,
                 useNativeDriver: true,
@@ -6460,18 +6403,18 @@ var ViewVisibleAnimated = React__default.memo(React__default.forwardRef(function
     };
     var handleHide = function (_a) {
         var durationHide = _a.durationHide, callback = _a.callback, _b = _a.position, position = _b === void 0 ? "bottom" : _b;
-        Animated$1.parallel([
-            Animated$1.timing(scaleAnimation, {
+        Animated.parallel([
+            Animated.timing(scaleAnimation, {
                 toValue: scaleType === "in" ? 0 : 3,
                 duration: durationHide,
                 useNativeDriver: true,
             }),
-            Animated$1.timing(visibleAnimation, {
+            Animated.timing(visibleAnimation, {
                 toValue: 0,
                 duration: durationHide,
                 useNativeDriver: true,
             }),
-            Animated$1.timing(translateAnimation, {
+            Animated.timing(translateAnimation, {
                 toValue: position === "bottom" ? 300 : -300,
                 duration: durationHide,
                 useNativeDriver: true,
@@ -6481,7 +6424,7 @@ var ViewVisibleAnimated = React__default.memo(React__default.forwardRef(function
             callback === null || callback === void 0 ? void 0 : callback();
         });
     };
-    return (React__default.createElement(Animated$1.View, { style: [
+    return (React__default.createElement(Animated.View, { style: [
             style,
             {
                 opacity: visibleAnimation,
@@ -7705,7 +7648,7 @@ var showToast = function (_a) {
 };
 
 var ToastProvider = forwardRef$1(function (_a, ref) {
-    var children = _a.children, _b = _a.wrapSafeArea, wrapSafeArea = _b === void 0 ? true : _b;
+    var children = _a.children, _b = _a.wrapSafeArea, wrapSafeArea = _b === void 0 ? false : _b;
     var toastComponentRef = React__default.useRef(null);
     // Expose the show method through the ref
     useImperativeHandle(ref, function () { return ({
@@ -7736,5 +7679,5 @@ var ToastProvider = forwardRef$1(function (_a, ref) {
         renderToast()));
 });
 
-export { Avatar, Badge, index$3 as Button, CONSTANTS, Checkbox, ChipBar, CountingDot, DarkTheme, DefaultTheme, index$2 as FloatingButton, Image$1 as Image, LightTheme, index as NumberKeyboard, RadioButton, SearchInput, index$1 as SelectionField, Spacer, Switch, Tag, Text$1 as Text, TextInput, ThemeColors, ThemeProvider, Toast, ToastProvider, View, adaptNavigationTheme, containerStyles, showToast, toastRef, useTheme };
+export { Avatar, Badge, index$3 as Button, CONSTANTS, Checkbox, ChipBar, CountingDot, DarkTheme, index$2 as FloatingButton, Image$1 as Image, LightTheme, index as NumberKeyboard, RadioButton, SearchInput, index$1 as SelectionField, Spacer, Switch, Tag, Text$1 as Text, TextInput, ThemeColors, Toast, ToastProvider, View, containerStyles, showToast, toastRef };
 //# sourceMappingURL=index.esm.js.map