@hoddy-ui/core 1.1.4 → 2.0.35

package/next/dist/index.mjs

@@ -161,7 +161,7 @@ function initialize(config2) {
   try {
     setConfig({
       GOOGLE_MAP_API_KEY: config2.googleMapApiKey,
-      DEFAULT_FONT_FAMILY: config2.fontFamily,
+      TYPOGRAPHY: config2.typography,
       EDGE_TO_EDGE: config2.edgeToEdge ?? false
     });
     if (config2.colors)
@@ -178,8 +178,7 @@ import { Platform as Platform3, StatusBar } from "react-native";
 
 // ../src/hooks.ts
 import { useContext } from "react";
-import { Dimensions, Platform as Platform2 } from "react-native";
-import { vs } from "react-native-size-matters";
+import { Platform as Platform2, useColorScheme as useColorScheme2 } from "react-native";
 
 // ../src/theme/index.tsx
 import AsyncStorage from "@react-native-async-storage/async-storage";
@@ -190,25 +189,34 @@ import { Platform, useColorScheme } from "react-native";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 
 // ../src/Components/FlashMessage.tsx
-import React3, { useEffect, useState } from "react";
-import {
-  LayoutAnimation,
-  TouchableOpacity,
-  View
-} from "react-native";
+import React3, { useEffect, useRef, useState } from "react";
+import { TouchableOpacity, View } from "react-native";
+import Animated, {
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming
+} from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { ScaledSheet } from "react-native-size-matters";
 
 // ../src/Components/Typography.tsx
 import React2, { forwardRef } from "react";
 import { StyleSheet, Text } from "react-native";
-import { moderateScale, verticalScale } from "react-native-size-matters";
+import { ms } from "react-native-size-matters";
+
+// ../src/utility.ts
+var getFontFamily = (fontWeight) => {
+  return getConfig().TYPOGRAPHY?.fontWeights?.[fontWeight] || getConfig().TYPOGRAPHY?.fontFamily || void 0;
+};
+
+// ../src/Components/Typography.tsx
 var Typography = forwardRef(
   ({
     children,
     color = "dark",
     style = {},
-    textCase = null,
+    textCase,
     variant = "body1",
     align = "left",
     gutterBottom = 0,
@@ -216,31 +224,33 @@ var Typography = forwardRef(
     fontWeight = 400,
     fontFamily,
     // NEW PROP ADDED
+    fontSize,
     ...props
   }, ref) => {
     const colors2 = useColors();
-    const fontSize = {
-      h1: moderateScale(42),
-      h2: moderateScale(37),
-      h3: moderateScale(32),
-      h4: moderateScale(27),
-      h5: moderateScale(22),
-      h6: moderateScale(17),
-      body1: moderateScale(15),
-      body2: moderateScale(12),
-      caption: moderateScale(10)
+    const _fontSize = {
+      h1: ms(42),
+      h2: ms(37),
+      h3: ms(32),
+      h4: ms(27),
+      h5: ms(22),
+      h6: ms(17),
+      body1: ms(15),
+      body2: ms(12),
+      caption: ms(10)
     };
-    const styles2 = StyleSheet.create({
+    const f = fontSize || _fontSize[variant];
+    const styles = StyleSheet.create({
       text: {
-        fontSize: fontSize[variant],
-        marginBottom: verticalScale(gutterBottom) || 0,
+        lineHeight: f * 1.2,
+        fontSize: f,
+        marginBottom: ms(gutterBottom) || 0,
         color: colors2[color]?.main || color,
         textTransform: textCase,
         alignItems: "center",
         textAlign: align,
         fontWeight,
-        fontFamily: fontFamily || getConfig().DEFAULT_FONT_FAMILY || void 0
-        // Use custom font if provided, else default
+        fontFamily: fontFamily || getFontFamily(fontWeight)
       }
     });
     return /* @__PURE__ */ React2.createElement(
@@ -248,7 +258,7 @@ var Typography = forwardRef(
       {
         ref,
         adjustsFontSizeToFit,
-        style: [styles2.text, style],
+        style: [styles.text, style],
         ...props
       },
       children
@@ -258,33 +268,76 @@ var Typography = forwardRef(
 var Typography_default = Typography;
 
 // ../src/Components/FlashMessage.tsx
-var showFlashMessage = () => {
+var flashListeners = /* @__PURE__ */ new Set();
+var showFlashMessage = (msg) => {
+  flashListeners.forEach((listener) => listener(msg));
+};
+var subscribeToFlashMessages = (listener) => {
+  flashListeners.add(listener);
+  return () => {
+    flashListeners.delete(listener);
+  };
 };
 var FlashMessage = () => {
   const { top } = useSafeAreaInsets();
   const [message, setMessage] = useState(null);
-  const [show, setShow] = useState(false);
   const colors2 = useColors();
   const type = message?.type || "success";
-  showFlashMessage = (msg) => {
-    setMessage(msg);
-    setTimeout(() => {
-      setShow(true);
-    }, 50);
-    setTimeout(() => {
-      setShow(false);
-      setTimeout(() => {
-        setMessage(null);
-      }, 500);
-    }, msg.duration || 3e3);
+  const timeoutRef = useRef(null);
+  const translateY = useSharedValue(-200);
+  const opacity = useSharedValue(0);
+  const hideMessage = () => {
+    setMessage(null);
+  };
+  const closeMessage = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    translateY.value = withTiming(-200, { duration: 300 });
+    opacity.value = withTiming(0, { duration: 300 }, () => {
+      runOnJS(hideMessage)();
+    });
   };
   useEffect(() => {
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
-  }, [show]);
-  const styles2 = ScaledSheet.create({
+    const listener = (msg) => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+      translateY.value = -200;
+      opacity.value = 0;
+      setMessage(msg);
+      translateY.value = withTiming(0, { duration: 300 });
+      opacity.value = withTiming(1, { duration: 300 });
+      const duration = msg.duration || 3e3;
+      timeoutRef.current = setTimeout(() => {
+        translateY.value = withTiming(-200, { duration: 300 });
+        opacity.value = withTiming(0, { duration: 300 }, () => {
+          runOnJS(hideMessage)();
+        });
+        timeoutRef.current = null;
+      }, duration);
+    };
+    const unsubscribe = subscribeToFlashMessages(listener);
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+      unsubscribe();
+    };
+  }, []);
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{ translateY: translateY.value }],
+      opacity: opacity.value
+    };
+  });
+  const styles = ScaledSheet.create({
     root: {
       position: "absolute",
-      top: show ? 0 : -200,
+      top: 0,
       zIndex: 1e3,
       left: 0,
       paddingTop: top + 10,
@@ -305,7 +358,9 @@ var FlashMessage = () => {
       backgroundColor: "#fff3"
     }
   });
-  return /* @__PURE__ */ React3.createElement(View, { style: styles2.root }, /* @__PURE__ */ React3.createElement(View, { style: { flexDirection: "row" } }, /* @__PURE__ */ React3.createElement(View, { style: { flex: 1, marginRight: 10 } }, message?.title && /* @__PURE__ */ React3.createElement(
+  if (!message)
+    return null;
+  return /* @__PURE__ */ React3.createElement(Animated.View, { style: [styles.root, animatedStyle] }, /* @__PURE__ */ React3.createElement(TouchableOpacity, { onPress: closeMessage, activeOpacity: 0.9 }, /* @__PURE__ */ React3.createElement(View, { style: { flexDirection: "row" } }, /* @__PURE__ */ React3.createElement(View, { style: { flex: 1, marginRight: 10 } }, message?.title && /* @__PURE__ */ React3.createElement(
     Typography_default,
     {
       variant: "h6",
@@ -314,7 +369,18 @@ var FlashMessage = () => {
       style: { color: "#fff" }
     },
     message?.title
-  ), /* @__PURE__ */ React3.createElement(Typography_default, { style: { color: "#fff" } }, message?.message))), message?.actions?.map((cur, i) => /* @__PURE__ */ React3.createElement(TouchableOpacity, { key: i, style: styles2.action, onPress: cur.onPress }, /* @__PURE__ */ React3.createElement(Typography_default, { fontWeight: 700, style: { color: "#fff" } }, cur.title))));
+  ), /* @__PURE__ */ React3.createElement(Typography_default, { style: { color: "#fff" } }, message?.message)))), message?.actions?.map((cur, i) => /* @__PURE__ */ React3.createElement(
+    TouchableOpacity,
+    {
+      key: i,
+      style: styles.action,
+      onPress: () => {
+        cur.onPress?.();
+        closeMessage();
+      }
+    },
+    /* @__PURE__ */ React3.createElement(Typography_default, { fontWeight: 700, style: { color: "#fff" } }, cur.title)
+  )));
 };
 var FlashMessage_default = FlashMessage;
 
@@ -323,6 +389,7 @@ var UIThemeContext = createContext({
   themeState: { mode: "default", value: "light" }
 });
 function themeReducer(state, { type, payload }) {
+  AsyncStorage.setItem("theme", type);
   switch (type) {
     case "dark":
       return { mode: "dark", value: "dark" };
@@ -341,12 +408,20 @@ var ConfigureSystemUI = () => {
     const config2 = getConfig();
     if (colors2) {
       SystemUI.setBackgroundColorAsync(colors2.white[1]);
-      if (Platform.OS === "android" && !config2.EDGE_TO_EDGE) {
-        NavigationBar.setBackgroundColorAsync(colors2.white[1]);
-        if (theme === "dark") {
-          NavigationBar.setButtonStyleAsync("light");
+      if (Platform.OS === "android") {
+        if (config2.EDGE_TO_EDGE) {
+          if (theme === "dark") {
+            NavigationBar.setStyle("light");
+          } else {
+            NavigationBar.setStyle("dark");
+          }
         } else {
-          NavigationBar.setButtonStyleAsync("dark");
+          NavigationBar.setBackgroundColorAsync(colors2.white[1]);
+          if (theme === "dark") {
+            NavigationBar.setButtonStyleAsync("light");
+          } else {
+            NavigationBar.setButtonStyleAsync("dark");
+          }
         }
       }
     }
@@ -402,9 +477,20 @@ var useTheme = () => {
   const { themeState } = useContext(UIThemeContext);
   return themeState.value;
 };
+var useThemeContext = () => {
+  const { themeState: theme, themeDispatch } = useContext(UIThemeContext);
+  const colorScheme = useColorScheme2();
+  const setTheme = (theme2) => {
+    if (theme2 === "default") {
+      themeDispatch?.({ type: "default", payload: colorScheme });
+    } else {
+      themeDispatch?.({ type: theme2 });
+    }
+  };
+  return { theme, setTheme };
+};
 var useNavScreenOptions = (type) => {
   const colors2 = useColors();
-  const theme = useTheme();
   const options = {
     stack: {
       headerShown: false,
@@ -424,15 +510,12 @@ var useNavScreenOptions = (type) => {
       headerShown: false,
       headerTintColor: colors2.dark.main,
       tabBarStyle: {
-        borderTopColor: theme === "dark" ? colors2.light.main : colors2.white[2],
+        borderTopColor: colors2.white[2],
+        borderColor: colors2.white[2],
         borderTopWidth: 1,
-        // shadowColor: "#000",
-        // shadowOffset: { height: -3, width: 0 },
-        // shadowRadius: 7,
-        // shadowOpacity: 0.1,
         backgroundColor: colors2.white[1]
       },
-      tabBarActiveTintColor: colors2.blue.main,
+      tabBarActiveTintColor: colors2.primary.main,
       tabBarInactiveTintColor: colors2.textSecondary.main,
       tabBarLabelStyle: {
         // fontSize: ms(12),
@@ -456,10 +539,6 @@ var useNavScreenOptions = (type) => {
       }
     }
   };
-  if (Platform2.OS === "android") {
-    options.tab.tabBarStyle.height = Dimensions.get("screen").height * 0.08;
-    options.tab.tabBarStyle.paddingBottom = vs(15);
-  }
   return options[type];
 };
 
@@ -493,7 +572,7 @@ var AdaptiveStatusBarNext_default = AdaptiveStatusBar;
 import { MaterialIcons } from "@expo/vector-icons";
 import React6 from "react";
 import { View as View2 } from "react-native";
-import { ScaledSheet as ScaledSheet2 } from "react-native-size-matters";
+import { ms as ms2, ScaledSheet as ScaledSheet2 } from "react-native-size-matters";
 var AlertX = ({
   type = "info",
   variant = "contained",
@@ -503,7 +582,7 @@ var AlertX = ({
   style = {}
 }) => {
   const colors2 = useColors();
-  const styles2 = ScaledSheet2.create({
+  const styles = ScaledSheet2.create({
     container: {
       padding: 20,
       paddingTop: 10,
@@ -511,7 +590,7 @@ var AlertX = ({
       borderRadius: 8,
       alignItems: "center",
       flexDirection: "row",
-      marginBottom: gutterBottom + "@ms",
+      marginBottom: ms2(gutterBottom),
       backgroundColor: colors2[type].main + (variant === "contained" ? "" : "3")
     },
     title: {
@@ -521,7 +600,7 @@ var AlertX = ({
       color: variant === "contained" ? "#fff" : colors2[type].main
     }
   });
-  return /* @__PURE__ */ React6.createElement(View2, { style: { ...styles2.container, ...style } }, /* @__PURE__ */ React6.createElement(View2, { style: { width: "80%" } }, /* @__PURE__ */ React6.createElement(Typography_default, { style: styles2.title, gutterBottom: 3, fontWeight: 700 }, title), body && /* @__PURE__ */ React6.createElement(Typography_default, { fontWeight: 700, variant: "body2", style: styles2.body }, body)), /* @__PURE__ */ React6.createElement(View2, { style: { marginLeft: "auto" } }, /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React6.createElement(View2, { style: [styles.container, style] }, /* @__PURE__ */ React6.createElement(View2, { style: { width: "80%" } }, /* @__PURE__ */ React6.createElement(Typography_default, { style: styles.title, gutterBottom: 3, fontWeight: 700 }, title), body && /* @__PURE__ */ React6.createElement(Typography_default, { fontWeight: 700, variant: "body2", style: styles.body }, body)), /* @__PURE__ */ React6.createElement(View2, { style: { marginLeft: "auto" } }, /* @__PURE__ */ React6.createElement(
     MaterialIcons,
     {
       color: variant === "contained" ? "#fff" : colors2[type].main,
@@ -534,9 +613,9 @@ var AlertX_default = AlertX;
 
 // ../src/Components/Avatar.tsx
 import { AntDesign } from "@expo/vector-icons";
-import React7 from "react";
+import React7, { useState as useState3 } from "react";
 import { Image, View as View3 } from "react-native";
-import { ScaledSheet as ScaledSheet3 } from "react-native-size-matters";
+import { ms as ms3, ScaledSheet as ScaledSheet3 } from "react-native-size-matters";
 var Avatar = ({
   color = "dark",
   label,
@@ -546,17 +625,18 @@ var Avatar = ({
   style = {}
 }) => {
   const colors2 = useColors();
-  const styles2 = ScaledSheet3.create({
+  const [imageError, setImageError] = useState3(false);
+  const styles = ScaledSheet3.create({
     root: {
       borderRadius: 150,
-      height: size + "@ms",
-      width: size + "@ms",
+      height: ms3(size),
+      width: ms3(size),
       alignItems: "center",
       justifyContent: "center",
       overflow: "hidden",
       borderWidth: variant === "outlined" ? 5 : 0,
       borderColor: variant === "outlined" ? "#fff" : "#0000",
-      backgroundColor: variant === "outlined" ? null : label ? colors2[color].main : colors2.white[4],
+      backgroundColor: variant === "outlined" ? void 0 : label ? colors2[color].main : colors2.white[4],
       ...style
     },
     image: {
@@ -564,7 +644,15 @@ var Avatar = ({
       width: "110%"
     }
   });
-  return /* @__PURE__ */ React7.createElement(View3, { style: styles2.root }, source ? /* @__PURE__ */ React7.createElement(Image, { resizeMode: "cover", style: styles2.image, source }) : label ? /* @__PURE__ */ React7.createElement(Typography_default, { style: { color: colors2[color].text } }, label[0]) : /* @__PURE__ */ React7.createElement(AntDesign, { name: "user", color: "#fff", size: Math.round(size / 1.5) }));
+  return /* @__PURE__ */ React7.createElement(View3, { style: styles.root }, source && !imageError ? /* @__PURE__ */ React7.createElement(
+    Image,
+    {
+      resizeMode: "cover",
+      style: styles.image,
+      source,
+      onError: () => setImageError(true)
+    }
+  ) : label ? /* @__PURE__ */ React7.createElement(Typography_default, { style: { color: colors2[color].text } }, label[0]) : /* @__PURE__ */ React7.createElement(AntDesign, { name: "user", color: "#fff", size: Math.round(size / 1.5) }));
 };
 var Avatar_default = Avatar;
 
@@ -572,27 +660,27 @@ var Avatar_default = Avatar;
 import { Ionicons, MaterialIcons as MaterialIcons2 } from "@expo/vector-icons";
 import React8, { forwardRef as forwardRef2 } from "react";
 import { ActivityIndicator, Text as Text2, TouchableOpacity as TouchableOpacity2 } from "react-native";
-import { ScaledSheet as ScaledSheet4, moderateScale as moderateScale2 } from "react-native-size-matters";
+import { ScaledSheet as ScaledSheet4, moderateScale as moderateScale2, ms as ms4 } from "react-native-size-matters";
 var LinkButton = ({
   title,
   style = {},
   color = "blue",
   fontSize = 12,
-  fontWeight = "400",
+  fontWeight = 400,
   disabled,
   onPress = () => {
   }
 }) => {
   const colors2 = useColors();
-  const styles2 = ScaledSheet4.create({
+  const styles = ScaledSheet4.create({
     text: {
       fontSize: moderateScale2(fontSize),
-      fontWeight,
-      fontFamily: getConfig().DEFAULT_FONT_FAMILY || "System",
+      fontWeight: fontWeight.toString(),
+      fontFamily: getFontFamily(fontWeight),
       color: disabled ? "#777" : colors2[color].main
     }
   });
-  return /* @__PURE__ */ React8.createElement(TouchableOpacity2, { onPress, disabled }, /* @__PURE__ */ React8.createElement(Text2, { style: { ...styles2.text, ...style } }, title));
+  return /* @__PURE__ */ React8.createElement(TouchableOpacity2, { onPress, disabled }, /* @__PURE__ */ React8.createElement(Text2, { style: { ...styles.text, ...style } }, title));
 };
 var IconButton = ({
   style = {},
@@ -610,11 +698,11 @@ var IconButton = ({
   const colors2 = useColors();
   const theme = useTheme();
   const bgColor = theme === "light" ? "#fff" : "#222";
-  const styles2 = ScaledSheet4.create({
+  const styles = ScaledSheet4.create({
     container: {
       alignSelf: "flex-start",
       flexGrow: 0,
-      backgroundColor: bg ? bgColor : elevation > 0 ? bgColor : null,
+      backgroundColor: bg ? bgColor : elevation > 0 ? bgColor : void 0,
       padding: "5@ms",
       shadowColor: "#000",
       shadowOpacity: 0.1,
@@ -622,8 +710,8 @@ var IconButton = ({
         height: 1,
         width: 0
       },
-      height: bg ? size + 20 + "@ms" : void 0,
-      width: bg ? size + 20 + "@ms" : void 0,
+      height: bg ? ms4(size + 20) : void 0,
+      width: bg ? ms4(size + 20) : void 0,
       alignItems: "center",
       justifyContent: "center",
       shadowRadius: elevation,
@@ -643,9 +731,9 @@ var IconButton = ({
     {
       onPress,
       activeOpacity: 0.3,
-      style: { ...styles2.container, ...containerStyles }
+      style: { ...styles.container, ...containerStyles }
     },
-    /* @__PURE__ */ React8.createElement(IconComp, { style: { ...styles2.text, ...style }, name: icon, size })
+    /* @__PURE__ */ React8.createElement(IconComp, { style: { ...styles.text, ...style }, name: icon, size })
   );
 };
 var Button = forwardRef2(
@@ -668,16 +756,16 @@ var Button = forwardRef2(
     end
   }, ref) => {
     const colors2 = useColors();
-    const styles2 = ScaledSheet4.create({
+    const styles = ScaledSheet4.create({
       con: {
         flexDirection: "row",
         alignItems: "center",
         alignSelf: "flex-start",
         justifyContent: "center",
-        backgroundColor: variant === "text" || variant === "outlined" ? null : translucent ? translucent === "dark" ? colors2.white[3] + "22" : colors2.black[3] + "22" : loading ? colors2[color].light : disabled ? colors2.white[4] : colors2[color].main,
+        backgroundColor: variant === "text" || variant === "outlined" ? void 0 : translucent ? translucent === "dark" ? colors2.white[3] + "22" : colors2.black[3] + "22" : loading ? colors2[color].light : disabled ? colors2.white[4] : colors2[color].main,
         borderRadius: rounded ? 30 : 10,
         elevation: variant === "text" ? 0 : elevation,
-        paddingVertical: size === "small" ? 8 : size === "large" ? "15@ms" : "13@ms",
+        paddingVertical: size === "small" ? 8 : size === "large" ? "15@mvs" : "13@mvs",
         paddingHorizontal: size === "small" ? "10@ms" : "18@ms",
         borderColor: colors2[color].main,
         borderWidth: variant === "outlined" ? 1 : 0,
@@ -689,14 +777,14 @@ var Button = forwardRef2(
           width: 0
         },
         shadowOpacity: variant === "text" ? 0 : 0.3,
-        width: fullWidth ? "100%" : null,
+        width: fullWidth ? "100%" : void 0,
         ...style
       },
       text: {
         color: disabled ? variant === "text" || variant === "outlined" ? colors2.black[1] : colors2[color].text : colors2[color][variant === "text" || variant === "outlined" ? "main" : "text"],
         fontWeight: variant === "outlined" ? "700" : "500",
-        fontSize: size === "small" ? "12@ms" : "16@ms",
-        fontFamily: getConfig().DEFAULT_FONT_FAMILY || "System"
+        fontSize: size === "small" ? "12@ms" : "13@ms",
+        fontFamily: getFontFamily(variant === "outlined" ? 700 : 500)
       }
     });
     return /* @__PURE__ */ React8.createElement(
@@ -705,7 +793,7 @@ var Button = forwardRef2(
         ref,
         onPress,
         disabled,
-        style: styles2.con
+        style: styles.con
       },
       start,
       loading && /* @__PURE__ */ React8.createElement(
@@ -716,7 +804,7 @@ var Button = forwardRef2(
           style: { marginRight: 10 }
         }
       ),
-      /* @__PURE__ */ React8.createElement(Text2, { style: styles2.text }, title),
+      /* @__PURE__ */ React8.createElement(Text2, { style: styles.text }, title),
       end
     );
   }
@@ -738,14 +826,14 @@ var CheckBox = ({
 }) => {
   const iconName = checked ? "checkbox-marked" : "checkbox-blank-outline";
   const colors2 = useColors();
-  const styles2 = ScaledSheet5.create({
+  const styles = ScaledSheet5.create({
     container: {
       alignItems: "center",
       flexDirection: "row",
       ...style
     }
   });
-  return /* @__PURE__ */ React9.createElement(View4, { style: styles2.container }, /* @__PURE__ */ React9.createElement(TouchableOpacity3, { onPress: onChange }, /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React9.createElement(View4, { style: styles.container }, /* @__PURE__ */ React9.createElement(TouchableOpacity3, { onPress: onChange }, /* @__PURE__ */ React9.createElement(
     MaterialCommunityIcons,
     {
       name: iconName,
@@ -765,6 +853,7 @@ import {
   TouchableWithoutFeedback
 } from "react-native";
 import { ScaledSheet as ScaledSheet6 } from "react-native-size-matters";
+import { useSafeAreaInsets as useSafeAreaInsets2 } from "react-native-safe-area-context";
 var FormWrapper = ({
   children,
   behavior = Platform4.OS === "ios" ? "padding" : "height",
@@ -774,7 +863,9 @@ var FormWrapper = ({
   style = {},
   onScroll
 }) => {
-  const styles2 = ScaledSheet6.create({
+  const { bottom } = useSafeAreaInsets2();
+  const defaultOffset = Platform4.OS === "ios" ? -bottom : -bottom * 2;
+  const styles = ScaledSheet6.create({
     root: {
       width: "100%",
       flex: 1,
@@ -784,18 +875,18 @@ var FormWrapper = ({
   return mode === "static" ? /* @__PURE__ */ React10.createElement(TouchableWithoutFeedback, { onPress: Keyboard.dismiss, accessible: false }, /* @__PURE__ */ React10.createElement(
     KeyboardAvoidingView,
     {
-      style: styles2.root,
+      style: styles.root,
       behavior,
-      contentContainerStyle: styles2.root,
-      keyboardVerticalOffset
+      contentContainerStyle: styles.root,
+      keyboardVerticalOffset: keyboardVerticalOffset || defaultOffset
     },
     children
   )) : /* @__PURE__ */ React10.createElement(
     KeyboardAvoidingView,
     {
       behavior,
-      style: styles2.root,
-      keyboardVerticalOffset
+      style: styles.root,
+      keyboardVerticalOffset: keyboardVerticalOffset || defaultOffset
     },
     /* @__PURE__ */ React10.createElement(
       ScrollView,
@@ -815,7 +906,7 @@ var FormWrapper = ({
 // ../src/Components/StarRating.tsx
 import { Ionicons as Ionicons2 } from "@expo/vector-icons";
 import * as Haptics from "expo-haptics";
-import { useEffect as useEffect3, useState as useState4 } from "react";
+import { useEffect as useEffect4, useState as useState5 } from "react";
 import {
   ActivityIndicator as ActivityIndicator2,
   TextInput,
@@ -835,50 +926,118 @@ import {
   TouchableWithoutFeedback as TouchableWithoutFeedback2,
   View as View5
 } from "react-native";
-import React11, { useState as useState3 } from "react";
-import { ScaledSheet as ScaledSheet7 } from "react-native-size-matters";
+import React11, { useEffect as useEffect3, useState as useState4 } from "react";
+import Animated2, {
+  LinearTransition,
+  runOnJS as runOnJS2,
+  useAnimatedStyle as useAnimatedStyle2,
+  useSharedValue as useSharedValue2,
+  withTiming as withTiming2
+} from "react-native-reanimated";
+import { useSafeAreaInsets as useSafeAreaInsets3 } from "react-native-safe-area-context";
+import { ms as ms5, ScaledSheet as ScaledSheet7 } from "react-native-size-matters";
 var Popup = ({
   title,
-  sheet,
+  sheet = true,
   bare = false,
   keyboardVerticalOffset,
   children,
   open,
   onClose = () => {
   },
-  style
+  style,
+  onModalShow,
+  onModalHide,
+  disableAutoKeyboardManagement = false
 }) => {
   const theme = useTheme();
   const colors2 = useColors();
-  const [show, setShow] = useState3(open);
-  const [showSecondary, setShowSecondary] = useState3(false);
-  const styles2 = ScaledSheet7.create({
+  const [modalVisible, setModalVisible] = useState4(false);
+  const [modalOpen, setModalOpen] = useState4(false);
+  const [keyboardVisible, setKeyboardVisible] = useState4(false);
+  const { bottom } = useSafeAreaInsets3();
+  const backdropOpacity = useSharedValue2(0);
+  const contentTranslateY = useSharedValue2(1e3);
+  const keyboardVerticalOffsetValue = Platform5.OS === "ios" ? -bottom : -bottom * 2;
+  useEffect3(() => {
+    const keyboardDidShowListener = Keyboard2.addListener(
+      "keyboardDidShow",
+      () => {
+        setKeyboardVisible(true);
+      }
+    );
+    const keyboardDidHideListener = Keyboard2.addListener(
+      "keyboardDidHide",
+      () => {
+        setKeyboardVisible(false);
+      }
+    );
+    return () => {
+      keyboardDidHideListener?.remove();
+      keyboardDidShowListener?.remove();
+    };
+  }, []);
+  const _onModalShow = () => {
+    setModalVisible(true);
+    onModalShow?.();
+  };
+  const _onModalHide = () => {
+    onModalHide?.();
+    setModalOpen(false);
+  };
+  useEffect3(() => {
+    if (open) {
+      setModalOpen(true);
+      backdropOpacity.value = withTiming2(1, { duration: 300 });
+      contentTranslateY.value = withTiming2(0, { duration: 300 }, () => {
+        runOnJS2(_onModalShow)();
+      });
+    } else {
+      setModalVisible(false);
+      backdropOpacity.value = withTiming2(0, { duration: 200 });
+      contentTranslateY.value = withTiming2(1e3, { duration: 200 }, () => {
+        runOnJS2(_onModalHide)();
+      });
+    }
+  }, [open]);
+  const backdropAnimatedStyle = useAnimatedStyle2(() => ({
+    opacity: backdropOpacity.value
+  }));
+  const contentAnimatedStyle = useAnimatedStyle2(() => ({
+    transform: [{ translateY: contentTranslateY.value }]
+  }));
+  const styles = ScaledSheet7.create({
     root: {
       height: "100%",
       width: "100%",
       justifyContent: sheet ? "flex-end" : "center"
     },
+    keyboardView: {
+      flex: 1,
+      zIndex: 1e3
+    },
     avoidingView: {
+      zIndex: 2,
       minHeight: typeof sheet === "number" ? sheet : void 0,
-      maxHeight: "80%",
-      zIndex: 1e3,
+      maxHeight: "90%",
       alignSelf: "center",
       maxWidth: sheet ? void 0 : "90%",
-      width: sheet ? "100%" : void 0
+      width: sheet ? "100%" : void 0,
+      marginBottom: Platform5.OS === "android" && keyboardVisible ? bottom : 0
     },
     container: {
-      paddingBottom: sheet ? "30@ms" : 0,
-      backgroundColor: theme === "dark" ? "#111" : colors2.white[2],
+      paddingBottom: sheet && !bare ? bottom + ms5(10) : void 0,
+      backgroundColor: theme === "dark" ? "#111" : colors2.white[1],
       borderTopLeftRadius: 20,
       borderTopRightRadius: 20,
       borderBottomRightRadius: sheet ? 0 : 20,
       borderBottomLeftRadius: sheet ? 0 : 20,
       width: "100%",
+      overflow: "hidden",
       ...style
     },
     content: {
       paddingHorizontal: bare ? void 0 : "15@ms"
-      // flex: 1,
     },
     title: {
       flexDirection: "row",
@@ -893,71 +1052,60 @@ var Popup = ({
     backdrop: {
       position: "absolute",
       height: "100%",
-      zIndex: -1,
+      zIndex: 1,
       width: "100%",
       backgroundColor: "#000b"
     }
   });
-  React11.useEffect(() => {
-    if (open) {
-      setShow(open);
-      setTimeout(() => {
-        setShowSecondary(open);
-      }, 500);
-    } else {
-      closeAction();
-    }
-  }, [open]);
   const closeAction = () => {
-    setShowSecondary(false);
-    setTimeout(() => {
-      setShow(false);
-      onClose();
-    }, 300);
+    onClose();
   };
-  return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React11.createElement(
     Modal,
     {
       transparent: true,
-      animationType: "fade",
+      animationType: "none",
       statusBarTranslucent: true,
-      visible: show,
+      visible: modalOpen,
       onRequestClose: closeAction
     },
-    /* @__PURE__ */ React11.createElement(View5, { style: styles2.backdrop }),
-    /* @__PURE__ */ React11.createElement(UIThemeProvider, null, /* @__PURE__ */ React11.createElement(
-      Modal,
+    /* @__PURE__ */ React11.createElement(UIThemeProvider, null, /* @__PURE__ */ React11.createElement(Animated2.View, { style: [styles.backdrop, backdropAnimatedStyle] }), /* @__PURE__ */ React11.createElement(
+      KeyboardAvoidingView2,
       {
-        transparent: true,
-        animationType: "slide",
-        statusBarTranslucent: true,
-        visible: showSecondary,
-        onRequestClose: closeAction
+        style: styles.keyboardView,
+        behavior: Platform5.OS === "ios" ? "padding" : "height",
+        keyboardVerticalOffset: keyboardVerticalOffset || keyboardVerticalOffsetValue
       },
-      /* @__PURE__ */ React11.createElement(TouchableWithoutFeedback2, { onPress: Keyboard2.dismiss }, /* @__PURE__ */ React11.createElement(View5, { style: styles2.root }, open && /* @__PURE__ */ React11.createElement(
-        Pressable,
+      /* @__PURE__ */ React11.createElement(
+        TouchableWithoutFeedback2,
         {
-          style: StyleSheet2.absoluteFill,
-          onPress: closeAction
-        }
-      ), /* @__PURE__ */ React11.createElement(
-        KeyboardAvoidingView2,
-        {
-          style: styles2.avoidingView,
-          keyboardVerticalOffset,
-          behavior: Platform5.OS === "ios" ? "position" : "padding"
+          onPress: Keyboard2.dismiss,
+          disabled: disableAutoKeyboardManagement
         },
-        /* @__PURE__ */ React11.createElement(View5, { style: styles2.container }, !bare && /* @__PURE__ */ React11.createElement(View5, { style: styles2.title }, /* @__PURE__ */ React11.createElement(View5, { style: styles2.titleIcon }, /* @__PURE__ */ React11.createElement(
-          IconButton,
+        /* @__PURE__ */ React11.createElement(View5, { style: styles.root }, modalOpen && /* @__PURE__ */ React11.createElement(
+          Pressable,
           {
-            size: 20,
-            icon: "close",
+            style: [StyleSheet2.absoluteFill, { zIndex: 1 }],
             onPress: closeAction
           }
-        )), /* @__PURE__ */ React11.createElement(Typography_default, { align: "center", fontWeight: 500 }, title)), /* @__PURE__ */ React11.createElement(View5, { style: styles2.content }, children))
-      )))
+        ), /* @__PURE__ */ React11.createElement(
+          Animated2.View,
+          {
+            style: [styles.avoidingView, contentAnimatedStyle],
+            layout: modalVisible ? LinearTransition.springify().stiffness(200).mass(0.5).damping(100) : void 0
+          },
+          /* @__PURE__ */ React11.createElement(View5, { style: styles.container }, !bare && /* @__PURE__ */ React11.createElement(View5, { style: styles.title }, /* @__PURE__ */ React11.createElement(View5, { style: styles.titleIcon }, /* @__PURE__ */ React11.createElement(
+            IconButton,
+            {
+              size: 20,
+              icon: "close",
+              onPress: closeAction
+            }
+          )), /* @__PURE__ */ React11.createElement(Typography_default, { align: "center", fontWeight: 500 }, title)), /* @__PURE__ */ React11.createElement(View5, { style: styles.content }, children))
+        ))
+      )
     ))
-  ));
+  );
 };
 
 // ../src/Components/StarRating.tsx
@@ -966,13 +1114,13 @@ var RatingStars = ({
   size = 16
 }) => {
   const colors2 = useColors();
-  const styles2 = ScaledSheet8.create({
+  const styles = ScaledSheet8.create({
     root: {
       flexDirection: "row",
       alignItems: "center"
     }
   });
-  return /* @__PURE__ */ React.createElement(View6, { style: styles2.root }, [...Array(Math.floor(rating))].map((_, index) => /* @__PURE__ */ React.createElement(Ionicons2, { key: index, name: "star", size, color: "#FFD700" })), [...Array(5 - Math.floor(rating))].map((_, index) => /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(View6, { style: styles.root }, [...Array(Math.floor(rating))].map((_, index) => /* @__PURE__ */ React.createElement(Ionicons2, { key: index, name: "star", size, color: "#FFD700" })), [...Array(5 - Math.floor(rating))].map((_, index) => /* @__PURE__ */ React.createElement(
     Ionicons2,
     {
       key: index,
@@ -987,12 +1135,12 @@ var RatingInput = ({
   rating = 0,
   size = 16
 }) => {
-  const [showReviewsModal, setShowReviewsModal] = useState4(false);
-  const [rate, setRate] = useState4(0);
+  const [showReviewsModal, setShowReviewsModal] = useState5(false);
+  const [rate, setRate] = useState5(0);
   const colors2 = useColors();
-  const [loading, setLoading] = useState4(false);
-  const [review, setReview] = useState4("");
-  const styles2 = ScaledSheet8.create({
+  const [loading, setLoading] = useState5(false);
+  const [review, setReview] = useState5("");
+  const styles = ScaledSheet8.create({
     root: {
       flexDirection: "row",
       alignItems: "center"
@@ -1009,7 +1157,7 @@ var RatingInput = ({
       height: "100@vs"
     }
   });
-  useEffect3(() => {
+  useEffect4(() => {
     setRate(rating);
   }, [rating]);
   const onRate = (index) => {
@@ -1025,7 +1173,7 @@ var RatingInput = ({
     _onSubmit && await _onSubmit({ rating: rate, review });
     setLoading(false);
   };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View6, { style: styles2.root }, loading ? /* @__PURE__ */ React.createElement(ActivityIndicator2, null) : [...Array(5)].map((_, index) => /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View6, { style: styles.root }, loading ? /* @__PURE__ */ React.createElement(ActivityIndicator2, null) : [...Array(5)].map((_, index) => /* @__PURE__ */ React.createElement(
     TouchableOpacity4,
     {
       key: index,
@@ -1072,10 +1220,10 @@ var RatingInput = ({
       },
       "Add to your review"
     ),
-    /* @__PURE__ */ React.createElement(View6, { style: styles2.inputCon }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(View6, { style: styles.inputCon }, /* @__PURE__ */ React.createElement(
       TextInput,
       {
-        style: styles2.input,
+        style: styles.input,
         multiline: true,
         value: review,
         onChangeText: (text) => setReview(text),
@@ -1098,9 +1246,9 @@ var RatingInput = ({
 };
 
 // ../src/Components/Grid.tsx
-import { View as View7 } from "react-native";
 import React12 from "react";
-import { ScaledSheet as ScaledSheet9 } from "react-native-size-matters";
+import { View as View7 } from "react-native";
+import { ms as ms6, ScaledSheet as ScaledSheet9 } from "react-native-size-matters";
 var GridItem = ({
   children,
   col = 2,
@@ -1108,33 +1256,33 @@ var GridItem = ({
   spacing = 1,
   style = {}
 }) => {
-  const styles2 = ScaledSheet9.create({
+  const styles = ScaledSheet9.create({
     gridItem: {
-      width: 100 / col + "%",
-      padding: spacing * 10 + "@ms",
+      width: `${100 / col}%`,
+      padding: ms6(spacing * 10),
       alignItems
     }
   });
-  return /* @__PURE__ */ React12.createElement(View7, { children, style: [styles2.gridItem, style] });
+  return /* @__PURE__ */ React12.createElement(View7, { children, style: [styles.gridItem, style] });
 };
 var Grid = ({
   children,
   spacing = 1,
   style = {}
 }) => {
-  const styles2 = ScaledSheet9.create({
+  const styles = ScaledSheet9.create({
     grid: {
       flexWrap: "wrap",
-      margin: -spacing * 10 + "@ms",
+      margin: `${-spacing * 10}@ms`,
       flexDirection: "row"
     }
   });
-  return /* @__PURE__ */ React12.createElement(View7, { children, style: [styles2.grid, style] });
+  return /* @__PURE__ */ React12.createElement(View7, { children, style: [styles.grid, style] });
 };
 
 // ../src/Components/Locator.tsx
 import { Ionicons as Ionicons4 } from "@expo/vector-icons";
-import React16, { useEffect as useEffect4, useState as useState7 } from "react";
+import React16, { useEffect as useEffect5, useState as useState8 } from "react";
 import { Alert, TouchableOpacity as TouchableOpacity8, View as View11 } from "react-native";
 
 // ../src/Components/List.tsx
@@ -1151,7 +1299,7 @@ var ListItem = ({
   children
 }) => {
   const colors2 = useColors();
-  const styles2 = ScaledSheet10.create({
+  const styles = ScaledSheet10.create({
     root: {
       flexDirection: "row",
       alignItems: "center",
@@ -1164,7 +1312,7 @@ var ListItem = ({
   return /* @__PURE__ */ React13.createElement(
     View8,
     null,
-    /* @__PURE__ */ React13.createElement(TouchableOpacity5, { disabled: Boolean(!onPress), onPress }, /* @__PURE__ */ React13.createElement(View8, { style: { ...styles2.root, ...style } }, children, link && /* @__PURE__ */ React13.createElement(
+    /* @__PURE__ */ React13.createElement(TouchableOpacity5, { disabled: Boolean(!onPress), onPress }, /* @__PURE__ */ React13.createElement(View8, { style: { ...styles.root, ...style } }, children, link && /* @__PURE__ */ React13.createElement(
       MaterialIcons3,
       {
         color: colors2.white[5],
@@ -1178,20 +1326,20 @@ var ListItem = ({
 
 // ../src/Components/TextField.tsx
 import { Ionicons as Ionicons3, MaterialIcons as MaterialIcons5 } from "@expo/vector-icons";
-import React15, { useRef, useState as useState6 } from "react";
-import { Animated, TextInput as TextInput2, TouchableOpacity as TouchableOpacity7, View as View10 } from "react-native";
+import React15, { useRef as useRef2, useState as useState7 } from "react";
+import { Animated as Animated3, TextInput as TextInput2, TouchableOpacity as TouchableOpacity7, View as View10 } from "react-native";
 import {
   ScaledSheet as ScaledSheet12,
   moderateScale as moderateScale3,
-  ms,
+  ms as ms7,
   verticalScale as verticalScale2
 } from "react-native-size-matters";
 
 // ../src/Components/SelectMenu.tsx
 import { MaterialIcons as MaterialIcons4 } from "@expo/vector-icons";
-import React14, { useCallback, useState as useState5 } from "react";
-import { FlatList, Modal as Modal2, TouchableOpacity as TouchableOpacity6, View as View9 } from "react-native";
-import { useSafeAreaInsets as useSafeAreaInsets2 } from "react-native-safe-area-context";
+import React14, { useCallback, useState as useState6 } from "react";
+import { FlatList, TouchableOpacity as TouchableOpacity6, View as View9 } from "react-native";
+import { useSafeAreaInsets as useSafeAreaInsets4 } from "react-native-safe-area-context";
 import { ScaledSheet as ScaledSheet11 } from "react-native-size-matters";
 var SelectMenu = ({
   open = false,
@@ -1202,22 +1350,15 @@ var SelectMenu = ({
   disableAutoClose = false,
   label,
   secondary,
-  helperText
+  helperText,
+  searchEnabled = false,
+  searchPlaceholder = "Search"
 }) => {
   const colors2 = useColors();
-  const { bottom } = useSafeAreaInsets2();
-  const [search, setSearch] = useState5("");
-  const styles2 = ScaledSheet11.create({
-    root: {
-      backgroundColor: colors2.white[1],
-      flex: 1
-    },
-    content: {
-      flex: 1,
-      paddingHorizontal: "10@ms"
-    },
+  const { bottom } = useSafeAreaInsets4();
+  const [search, setSearch] = useState6("");
+  const styles = ScaledSheet11.create({
     header: {
-      paddingTop: "80@ms",
       marginBottom: "20@vs"
     },
     option: {
@@ -1227,11 +1368,6 @@ var SelectMenu = ({
       flexDirection: "row",
       alignItems: "center",
       marginBottom: "10@vs"
-    },
-    footer: {
-      paddingBottom: bottom,
-      paddingHorizontal: "15@ms",
-      paddingTop: "15@ms"
     }
   });
   const renderItem = useCallback(
@@ -1239,7 +1375,7 @@ var SelectMenu = ({
       TouchableOpacity6,
       {
         style: {
-          ...styles2.option,
+          ...styles.option,
           backgroundColor: item.value === value ? colors2.blue.light + "22" : colors2.white[2]
         },
         onPress: () => {
@@ -1253,6 +1389,7 @@ var SelectMenu = ({
       /* @__PURE__ */ React14.createElement(View9, { style: { flex: 1 } }, /* @__PURE__ */ React14.createElement(
         Typography_default,
         {
+          variant: "body2",
           style: {
             color: item.value === value ? colors2.blue.light : colors2.black[2]
           }
@@ -1281,35 +1418,36 @@ var SelectMenu = ({
     ),
     [value, colors2]
   );
-  return /* @__PURE__ */ React14.createElement(Modal2, { visible: open, animationType: "slide", onRequestClose: onClose }, /* @__PURE__ */ React14.createElement(View9, { style: styles2.root }, /* @__PURE__ */ React14.createElement(View9, { style: styles2.content }, /* @__PURE__ */ React14.createElement(View9, { style: styles2.header }, /* @__PURE__ */ React14.createElement(Typography_default, { variant: "h5", gutterBottom: 5, fontWeight: 700 }, label), helperText ? /* @__PURE__ */ React14.createElement(Typography_default, { variant: "body2", color: "textSecondary" }, helperText) : null, /* @__PURE__ */ React14.createElement(
-    TextField_default,
-    {
-      label: "Search",
-      value: search,
-      type: "search",
-      onChangeText: setSearch,
-      variant: "outlined"
-    }
-  )), /* @__PURE__ */ React14.createElement(
-    FlatList,
-    {
-      removeClippedSubviews: true,
-      keyExtractor: (item) => item.value,
-      renderItem,
-      data: options.filter(
-        (item) => search.length > 1 ? item.label.toLowerCase().indexOf(search.toLowerCase()) > -1 : item
-      ).sort((a, b) => a.label.localeCompare(b.label))
-    }
-  )), /* @__PURE__ */ React14.createElement(View9, { style: styles2.footer }, /* @__PURE__ */ React14.createElement(
-    Button_default,
+  return /* @__PURE__ */ React14.createElement(
+    Popup,
     {
-      color: "error",
-      variant: "outlined",
-      fullWidth: true,
-      title: "Close",
-      onPress: onClose
-    }
-  ))));
+      open,
+      onClose,
+      title: label,
+      disableAutoKeyboardManagement: true
+    },
+    /* @__PURE__ */ React14.createElement(View9, { style: styles.content }, /* @__PURE__ */ React14.createElement(View9, { style: styles.header }, helperText && /* @__PURE__ */ React14.createElement(Typography_default, { variant: "body2", color: "textSecondary", gutterBottom: 5 }, helperText), searchEnabled && /* @__PURE__ */ React14.createElement(
+      TextField_default,
+      {
+        label: searchPlaceholder,
+        value: search,
+        type: "search",
+        onChangeText: setSearch,
+        variant: "outlined"
+      }
+    )), /* @__PURE__ */ React14.createElement(
+      FlatList,
+      {
+        removeClippedSubviews: true,
+        keyExtractor: (item) => item.value,
+        bounces: false,
+        renderItem,
+        data: options.filter(
+          (item) => search.length > 1 ? item.label.toLowerCase().indexOf(search.toLowerCase()) > -1 : item
+        ).sort((a, b) => a.label.localeCompare(b.label))
+      }
+    ))
+  );
 };
 var SelectMenu_default = SelectMenu;
 
@@ -1339,32 +1477,33 @@ var TextField = ({
   gutterBottom = 0,
   end,
   options,
+  selectMenuProps,
   ...props
 }) => {
   const colors2 = useColors();
-  const [focused, setFocused] = useState6(false);
+  const [focused, setFocused] = useState7(false);
   const height = moderateScale3(variant === "text" ? 50 : 45) * (size === "large" ? 1.2 : size === "small" ? 0.8 : 1);
-  const labelAnim = useRef(
-    new Animated.Value(height / moderateScale3(variant === "text" ? 2.5 : 3.2))
+  const labelAnim = useRef2(
+    new Animated3.Value(height / moderateScale3(variant === "text" ? 2.5 : 3.2))
   ).current;
   React15.useEffect(() => {
     if (focused || value) {
-      Animated.timing(labelAnim, {
+      Animated3.timing(labelAnim, {
         toValue: verticalScale2(variant === "text" ? 2 : 4),
         duration: 300,
         useNativeDriver: false
       }).start();
     } else {
-      Animated.timing(labelAnim, {
+      Animated3.timing(labelAnim, {
         toValue: height / moderateScale3(variant === "text" ? 2.5 : 3.2),
         duration: 300,
         useNativeDriver: false
       }).start();
     }
   }, [focused, value]);
-  const styles2 = ScaledSheet12.create({
+  const styles = ScaledSheet12.create({
     root: {
-      marginBottom: gutterBottom + "@vs",
+      marginBottom: ms7(gutterBottom),
       width: "100%",
       ...style
     },
@@ -1388,7 +1527,7 @@ var TextField = ({
       paddingLeft: variant === "text" ? 0 : moderateScale3(15),
       paddingRight: moderateScale3(10),
       paddingTop: "11@vs",
-      fontFamily: getConfig().DEFAULT_FONT_FAMILY || "System",
+      fontFamily: getFontFamily(400),
       color: colors2.black[1],
       zIndex: 10
       // backgroundColor: "#284",
@@ -1400,7 +1539,7 @@ var TextField = ({
       paddingTop: "13@ms"
     },
     label: {
-      fontFamily: getConfig().DEFAULT_FONT_FAMILY || "System",
+      fontFamily: getFontFamily(400),
       position: "absolute",
       left: variant === "text" ? 0 : moderateScale3(15),
       fontSize: focused || value ? "10@s" : "13@s",
@@ -1444,13 +1583,13 @@ var TextField = ({
     autoCapitalize: "none",
     textContentType: "password"
   } : {};
-  return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(View10, { style: styles2.root }, /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(View10, { style: styles.root }, /* @__PURE__ */ React15.createElement(
     TouchableOpacity7,
     {
       onPress: () => setFocused(true),
-      style: styles2.container
+      style: styles.container
     },
-    /* @__PURE__ */ React15.createElement(Animated.Text, { style: { ...styles2.label, top: labelAnim } }, label),
+    /* @__PURE__ */ React15.createElement(Animated3.Text, { style: { ...styles.label, top: labelAnim } }, label),
     start,
     options ? /* @__PURE__ */ React15.createElement(
       View10,
@@ -1461,13 +1600,13 @@ var TextField = ({
         View10,
         {
           style: {
-            paddingTop: variant !== "outlined" ? ms(13) : 0,
+            paddingTop: variant !== "outlined" ? ms7(13) : 0,
             paddingRight: 10
           }
         },
         options.find((cur) => cur.value === value)?.start
       ),
-      /* @__PURE__ */ React15.createElement(Typography_default, { style: styles2.inputText }, options.find((cur) => cur.value === value)?.label)
+      /* @__PURE__ */ React15.createElement(Typography_default, { style: styles.inputText }, options.find((cur) => cur.value === value)?.label)
     ) : /* @__PURE__ */ React15.createElement(
       TextInput2,
       {
@@ -1488,7 +1627,7 @@ var TextField = ({
         placeholderTextColor: colors2.textSecondary.main,
         ...formProps,
         ...props,
-        style: styles2.input
+        style: styles.input
       }
     ),
     end && /* @__PURE__ */ React15.createElement(
@@ -1496,7 +1635,7 @@ var TextField = ({
       {
         style: {
           marginRight: 20,
-          paddingTop: variant === "text" ? ms(13) : 0
+          paddingTop: variant === "text" ? ms7(13) : 0
         }
       },
       end
@@ -1506,7 +1645,7 @@ var TextField = ({
       {
         style: {
           marginRight: variant === "text" ? 0 : 20,
-          paddingTop: variant === "text" ? ms(13) : 0
+          paddingTop: variant === "text" ? ms7(13) : 0
         }
       },
       /* @__PURE__ */ React15.createElement(
@@ -1522,11 +1661,11 @@ var TextField = ({
     Typography_default,
     {
       color: "textSecondary",
-      style: styles2.helperText,
+      style: styles.helperText,
       variant: "caption"
     },
     helperText
-  ), error && /* @__PURE__ */ React15.createElement(View10, { style: styles2.error }, /* @__PURE__ */ React15.createElement(MaterialIcons5, { name: "error", color: colors2.error.main, size: 16 }), /* @__PURE__ */ React15.createElement(Typography_default, { style: styles2.errorText, color: "error" }, error))), options && /* @__PURE__ */ React15.createElement(
+  ), error && /* @__PURE__ */ React15.createElement(View10, { style: styles.error }, /* @__PURE__ */ React15.createElement(MaterialIcons5, { name: "error", color: colors2.error.main, size: 16 }), /* @__PURE__ */ React15.createElement(Typography_default, { style: styles.errorText, color: "error" }, error))), options && /* @__PURE__ */ React15.createElement(
     SelectMenu_default,
     {
       options,
@@ -1535,13 +1674,15 @@ var TextField = ({
       onClose: () => setFocused(false),
       label,
       helperText,
-      onChange: onChangeText
+      onChange: onChangeText,
+      ...selectMenuProps
     }
   ));
 };
 var TextField2 = React15.forwardRef(
   ({
     label,
+    labelProps,
     keyboardType,
     color = "primary",
     value,
@@ -1565,20 +1706,21 @@ var TextField2 = React15.forwardRef(
     end,
     options,
     multiline,
+    selectMenuProps,
     ...props
   }, ref) => {
     const colors2 = useColors();
-    const [focused, _setFocused] = useState6(false);
-    const [showPassword, setShowPassword] = useState6(false);
+    const [focused, _setFocused] = useState7(false);
+    const [showPassword, setShowPassword] = useState7(false);
     const height = moderateScale3(
       multiline ? 50 + (props.numberOfLines || 1) * 18 : 50
     );
     const setFocused = (value2) => {
       _setFocused(value2);
     };
-    const styles2 = ScaledSheet12.create({
+    const styles = ScaledSheet12.create({
       root: {
-        marginBottom: gutterBottom + "@vs",
+        marginBottom: ms7(gutterBottom),
         ...style
       },
       container: {
@@ -1651,14 +1793,23 @@ var TextField2 = React15.forwardRef(
       autoCapitalize: "none",
       textContentType: "password"
     } : {};
-    return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(View10, { style: styles2.root }, label && /* @__PURE__ */ React15.createElement(Typography_default, { variant: "body1", color: "textSecondary", gutterBottom: 7 }, label), /* @__PURE__ */ React15.createElement(
+    return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(View10, { style: styles.root }, label && /* @__PURE__ */ React15.createElement(
+      Typography_default,
+      {
+        variant: "body2",
+        color: "textSecondary",
+        gutterBottom: 7,
+        ...labelProps
+      },
+      label
+    ), /* @__PURE__ */ React15.createElement(
       TouchableOpacity7,
       {
         onPress: () => setFocused(true),
-        style: styles2.container
+        style: styles.container
       },
       /* @__PURE__ */ React15.createElement(View10, { style: { marginTop: multiline ? 5 : 0 } }, start),
-      options ? /* @__PURE__ */ React15.createElement(React15.Fragment, null, value ? /* @__PURE__ */ React15.createElement(Typography_default, { style: styles2.inputText }, options.find((cur) => cur.value === value)?.label) : /* @__PURE__ */ React15.createElement(Typography_default, { style: styles2.placeholder }, placeholder), /* @__PURE__ */ React15.createElement(
+      options ? /* @__PURE__ */ React15.createElement(React15.Fragment, null, value ? /* @__PURE__ */ React15.createElement(Typography_default, { style: styles.inputText }, options.find((cur) => cur.value === value)?.label) : /* @__PURE__ */ React15.createElement(Typography_default, { style: styles.placeholder }, placeholder), /* @__PURE__ */ React15.createElement(
         Ionicons3,
         {
           name: "chevron-down",
@@ -1688,10 +1839,10 @@ var TextField2 = React15.forwardRef(
           selectTextOnFocus: !disabled,
           onSubmitEditing,
           multiline,
-          textAlignVertical: multiline ? "top" : "center",
+          extAlignVertical: multiline ? "top" : "center",
           ...formProps,
           ...props,
-          style: styles2.input
+          style: styles.input
         }
       ),
       end ? /* @__PURE__ */ React15.createElement(View10, { style: { marginRight: 20 } }, end) : type === "password" && /* @__PURE__ */ React15.createElement(
@@ -1713,11 +1864,11 @@ var TextField2 = React15.forwardRef(
       Typography_default,
       {
         color: "textSecondary",
-        style: styles2.helperText,
+        style: styles.helperText,
         variant: "caption"
       },
       helperText
-    ), error && /* @__PURE__ */ React15.createElement(View10, { style: styles2.error }, /* @__PURE__ */ React15.createElement(MaterialIcons5, { name: "error", color: colors2.error.main, size: 16 }), /* @__PURE__ */ React15.createElement(Typography_default, { style: styles2.errorText, color: "error" }, error))), options && /* @__PURE__ */ React15.createElement(
+    ), error && /* @__PURE__ */ React15.createElement(View10, { style: styles.error }, /* @__PURE__ */ React15.createElement(MaterialIcons5, { name: "error", color: colors2.error.main, size: 16 }), /* @__PURE__ */ React15.createElement(Typography_default, { style: styles.errorText, color: "error" }, error))), options && /* @__PURE__ */ React15.createElement(
       SelectMenu_default,
       {
         options,
@@ -1726,7 +1877,8 @@ var TextField2 = React15.forwardRef(
         onClose: () => setFocused(false),
         label,
         helperText,
-        onChange: onChangeText
+        onChange: onChangeText,
+        ...selectMenuProps
       }
     ));
   }
@@ -1794,11 +1946,11 @@ var Locator = ({
   country = "ng"
 }) => {
   const { GOOGLE_MAP_API_KEY } = getConfig();
-  const [changed, setChanged] = useState7(false);
-  const [value, setValue] = useState7("");
-  const [prediction, setPrediction] = useState7([]);
+  const [changed, setChanged] = useState8(false);
+  const [value, setValue] = useState8("");
+  const [prediction, setPrediction] = useState8([]);
   const colors2 = useColors();
-  const styles2 = ScaledSheet13.create({
+  const styles = ScaledSheet13.create({
     list: {
       backgroundColor: colors2.white[2],
       elevation: 10,
@@ -1806,7 +1958,8 @@ var Locator = ({
       shadowOpacity: 0.1,
       shadowRadius: float ? 15 : 0,
       shadowOffset: {
-        height: 10
+        height: 10,
+        width: 0
       },
       borderRadius: 10,
       marginBottom: 10,
@@ -1865,7 +2018,7 @@ var Locator = ({
     setChanged(false);
     setPrediction([]);
   };
-  useEffect4(() => {
+  useEffect5(() => {
     if (!GOOGLE_MAP_API_KEY)
       console.error(
         "Google map api key needs to be set to use this component \nMake sure to run initialize() with a valid google map api key"
@@ -1911,7 +2064,7 @@ var Locator = ({
         }
       )), /* @__PURE__ */ React16.createElement(TouchableOpacity8, { onPress: clear }, /* @__PURE__ */ React16.createElement(Ionicons4, { color: colors2.dark.main, size: 18, name: "close" })))
     }
-  ), prediction.length > 0 && /* @__PURE__ */ React16.createElement(View11, { style: styles2.list }, prediction.map(
+  ), prediction.length > 0 && /* @__PURE__ */ React16.createElement(View11, { style: styles.list }, prediction.map(
     (cur, i) => i < 5 && /* @__PURE__ */ React16.createElement(
       ListItem,
       {
@@ -1935,26 +2088,27 @@ var Locator = ({
 };
 
 // ../src/Components/SafeAreaView.tsx
-import { SafeAreaView as Safe } from "react-native";
 import React17 from "react";
-import { Platform as Platform6, StyleSheet as StyleSheet3 } from "react-native";
-import { moderateScale as moderateScale4 } from "react-native-size-matters";
-var styles = StyleSheet3.create({
-  droidSafeArea: {
-    flex: 1,
-    paddingTop: Platform6.OS === "android" ? moderateScale4(35) : 0
-  }
-});
+import { useSafeAreaInsets as useSafeAreaInsets5 } from "react-native-safe-area-context";
+import { StyleSheet as StyleSheet3, View as View12 } from "react-native";
 var SafeAreaView = ({
   children,
   style
 }) => {
-  return /* @__PURE__ */ React17.createElement(Safe, { style: { ...styles.droidSafeArea, ...style } }, children);
+  const { top, bottom } = useSafeAreaInsets5();
+  const styles = StyleSheet3.create({
+    root: {
+      paddingTop: top,
+      paddingBottom: bottom,
+      flex: 1
+    }
+  });
+  return /* @__PURE__ */ React17.createElement(View12, { style: [styles.root, style] }, children);
 };
 
 // ../src/Components/Divider.tsx
-import { View as View12 } from "react-native";
-import { ScaledSheet as ScaledSheet14, ms as ms2 } from "react-native-size-matters";
+import { View as View13 } from "react-native";
+import { ScaledSheet as ScaledSheet14, ms as ms8 } from "react-native-size-matters";
 var Divider = ({
   height = 1,
   color = "textSecondary",
@@ -1962,20 +2116,20 @@ var Divider = ({
   style
 }) => {
   const colors2 = useColors();
-  const styles2 = ScaledSheet14.create({
+  const styles = ScaledSheet14.create({
     root: {
       height,
       backgroundColor: colors2[color].main,
-      marginBottom: ms2(gutterBottom),
+      marginBottom: ms8(gutterBottom),
       ...style
     }
   });
-  return /* @__PURE__ */ React.createElement(View12, { style: styles2.root });
+  return /* @__PURE__ */ React.createElement(View13, { style: styles.root });
 };
 
 // ../src/Components/Spinner.tsx
 import React18 from "react";
-import { ActivityIndicator as ActivityIndicator3, Dimensions as Dimensions2, View as View13 } from "react-native";
+import { ActivityIndicator as ActivityIndicator3, Dimensions, View as View14 } from "react-native";
 import { ScaledSheet as ScaledSheet15 } from "react-native-size-matters";
 var Spinner = ({
   label,
@@ -1985,10 +2139,10 @@ var Spinner = ({
   style = {}
 }) => {
   const colors2 = useColors();
-  const styles2 = ScaledSheet15.create({
+  const styles = ScaledSheet15.create({
     root: {
-      width: fullscreen ? Dimensions2.get("screen").width : "100%",
-      height: fullscreen ? Dimensions2.get("screen").height : "100%",
+      width: fullscreen ? Dimensions.get("screen").width : "100%",
+      height: fullscreen ? Dimensions.get("screen").height : "100%",
       left: 0,
       bottom: 0,
       zIndex: 100,
@@ -2011,7 +2165,7 @@ var Spinner = ({
       color: color === "light" ? colors2.white[2] : colors2.black[4]
     }
   });
-  return /* @__PURE__ */ React18.createElement(View13, { style: styles2.root }, /* @__PURE__ */ React18.createElement(View13, { style: styles2.content }, /* @__PURE__ */ React18.createElement(ActivityIndicator3, { color: colors2[color].dark, size }), label && /* @__PURE__ */ React18.createElement(Typography_default, { style: styles2.label }, label)));
+  return /* @__PURE__ */ React18.createElement(View14, { style: styles.root }, /* @__PURE__ */ React18.createElement(View14, { style: styles.content }, /* @__PURE__ */ React18.createElement(ActivityIndicator3, { color: colors2[color].dark, size }), label && /* @__PURE__ */ React18.createElement(Typography_default, { style: styles.label }, label)));
 };
 var Spinner_default = Spinner;
 
@@ -2019,9 +2173,9 @@ var Spinner_default = Spinner;
 import React19, { useMemo } from "react";
 import {
   TextInput as TextInput3,
-  View as View14
+  View as View15
 } from "react-native";
-import { ScaledSheet as ScaledSheet16, ms as ms3 } from "react-native-size-matters";
+import { ScaledSheet as ScaledSheet16, ms as ms9 } from "react-native-size-matters";
 var OTPInput = ({
   length = 6,
   onChange = () => {
@@ -2035,12 +2189,10 @@ var OTPInput = ({
     () => Array(length).fill(0).map((_) => React19.createRef()),
     [length]
   );
-  console.log("v", value);
   const onChangeHandler = (val, index) => {
     if (value.length >= length && val.length > 0)
       return;
     if (val.length > 1) {
-      console.log("reached", val);
       const digits = val.replace(/\D/g, "").slice(0, length);
       onChange(digits);
       if (digits.length === length) {
@@ -2066,24 +2218,24 @@ var OTPInput = ({
     }
   };
   const colors2 = useColors();
-  const styles2 = ScaledSheet16.create({
+  const styles = ScaledSheet16.create({
     root: {},
     container: { flexDirection: "row" },
     input: {
-      height: ms3(size),
-      width: ms3(size),
+      height: ms9(size),
+      width: ms9(size),
       borderColor: colors2.white[5],
       backgroundColor: variant === "contained" ? colors2.white[3] : void 0,
       borderWidth: variant === "outlined" ? 1 : 0,
       borderBottomWidth: variant === "contained" ? 0 : 1,
-      marginHorizontal: ms3(spacing * 5),
+      marginHorizontal: ms9(spacing * 5),
       textAlign: "center",
       borderRadius: variant === "text" ? 0 : 10,
       color: colors2.dark.main,
-      fontSize: ms3(size * 0.5)
+      fontSize: ms9(size * 0.5)
     }
   });
-  return /* @__PURE__ */ React19.createElement(View14, { style: styles2.root }, /* @__PURE__ */ React19.createElement(View14, { style: styles2.container }, [...Array(length)].map((_, index) => /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React19.createElement(View15, { style: styles.root }, /* @__PURE__ */ React19.createElement(View15, { style: styles.container }, [...Array(length)].map((_, index) => /* @__PURE__ */ React19.createElement(
     TextInput3,
     {
       ref: inputRefs[index],
@@ -2092,7 +2244,7 @@ var OTPInput = ({
       blurOnSubmit: false,
       keyboardType: "number-pad",
       key: index,
-      style: [styles2.input]
+      style: [styles.input]
     }
   ))));
 };
@@ -2134,6 +2286,7 @@ export {
   showFlashMessage,
   useColors,
   useNavScreenOptions,
-  useTheme
+  useTheme,
+  useThemeContext
 };
 //# sourceMappingURL=index.mjs.map