@hoddy-ui/next 1.0.3 → 1.0.29

package/dist/index.mjs

@@ -4,61 +4,65 @@ var setExtraColors = (c) => extraColors = c;
 function colors(theme) {
   const lightColors = {
     white: {
-      1: "#fff",
+      1: "#ffffff",
       2: "#f7f7f7",
-      3: "#eee",
-      4: "#ddd",
-      5: "#bbb"
+      3: "#eeeeee",
+      4: "#dddddd",
+      5: "#bbbbbb",
+      ...extraColors?.light?.white
     },
     black: {
-      1: "#888",
-      2: "#777",
-      3: "#555",
-      4: "#333",
-      5: "#000"
+      1: "#888888",
+      2: "#777777",
+      3: "#555555",
+      4: "#333333",
+      5: "#000000",
+      ...extraColors?.light?.black
     }
   };
   const darkColors = {
     black: {
-      1: "#fff",
+      1: "#ffffff",
       2: "#f7f7f7",
-      3: "#eee",
-      4: "#ddd",
-      5: "#aaa"
+      3: "#eeeeee",
+      4: "#dddddd",
+      5: "#aaaaaa",
+      ...extraColors?.dark?.black
     },
     white: {
-      1: "#000",
-      2: "#222",
-      3: "#333",
-      4: "#444",
-      5: "#555"
+      1: "#060606",
+      2: "#222222",
+      3: "#333333",
+      4: "#444444",
+      5: "#555555",
+      ...extraColors?.dark?.white
     },
     dark: {
       main: "#f2f3f4",
-      light: "#fff",
-      dark: "#ddd",
-      text: "#000",
+      light: "#ffffff",
+      dark: "#dddddd",
+      text: "#000000",
       ...extraColors?.dark?.dark
     },
     light: {
-      main: "#111",
-      light: "#555",
-      dark: "#333",
-      text: "#fff",
+      main: "#111111",
+      light: "#555555",
+      dark: "#333333",
+      text: "#ffffff",
       ...extraColors?.dark?.light
     },
     textSecondary: {
-      main: "#666",
-      light: "#777",
-      dark: "#444",
-      text: "#fff",
+      main: "#666666",
+      light: "#777777",
+      dark: "#444444",
+      text: "#ffffff",
       ...extraColors?.dark?.textSecondary
     },
     primary: {
-      main: "#f80",
-      light: "#FEFFD3",
-      dark: "#fa0",
-      text: "#fff",
+      main: "#ff8800",
+      light: "#feffd3",
+      dark: "#ffaa00",
+      text: "#ffffff",
       ...extraColors?.light?.primary,
       ...extraColors?.dark?.primary
     }
@@ -67,73 +71,73 @@ function colors(theme) {
   return {
     ...extraColors[theme],
     primary: {
-      main: "#f80",
-      light: "#FEFFD3",
-      dark: "#fa0",
-      text: "#fff",
+      main: "#ff8800",
+      light: "#feffd3",
+      dark: "#ffaa00",
+      text: "#ffffff",
       ...extraColors?.light?.primary
     },
     secondary: {
-      main: "#f11",
-      light: "#f43",
-      dark: "#d00",
-      text: "#fff",
+      main: "#ff1111",
+      light: "#ff4433",
+      dark: "#dd0000",
+      text: "#ffffff",
       ...extraColors?.light?.secondary
     },
     light: {
-      main: "#fff",
-      light: "#fff",
-      dark: "#ddd",
-      text: "#000",
+      main: "#ffffff",
+      light: "#ffffff",
+      dark: "#dddddd",
+      text: "#000000",
       ...extraColors?.light?.light
     },
     dark: {
-      main: "#000",
-      light: "#777",
-      dark: "#111",
-      text: "#fff",
+      main: "#000000",
+      light: "#777777",
+      dark: "#111111",
+      text: "#ffffff",
       ...extraColors?.light?.dark
     },
     textSecondary: {
-      main: "#aaa",
-      light: "#bbb",
-      dark: "#777",
-      text: "#123",
+      main: "#aaaaaa",
+      light: "#bbbbbb",
+      dark: "#777777",
+      text: "#112233",
       ...extraColors?.light?.textSecondary
     },
     blue: {
-      main: "#09F",
-      light: "#39f",
-      dark: "#028",
-      text: "#fff",
+      main: "#0099ff",
+      light: "#3399ff",
+      dark: "#002288",
+      text: "#ffffff",
       ...extraColors?.light?.blue
     },
     info: {
-      main: "#09f",
-      light: "#3af",
-      dark: "#08a",
-      text: "#fff",
+      main: "#0099ff",
+      light: "#33aaff",
+      dark: "#0088aa",
+      text: "#ffffff",
       ...extraColors?.light?.info
     },
     success: {
-      main: "#0a4",
-      text: "#fff",
-      light: "#5c3",
-      dark: "#062",
+      main: "#00aa44",
+      text: "#ffffff",
+      light: "#55cc33",
+      dark: "#006622",
       ...extraColors?.light?.success
     },
     warning: {
-      main: "#fa2",
-      light: "#fc7",
-      dark: "#f90",
-      text: "#fff",
+      main: "#ffaa22",
+      light: "#ffcc77",
+      dark: "#ff9900",
+      text: "#ffffff",
       ...extraColors?.light?.warning
     },
     error: {
-      main: "#D22",
-      text: "#fff",
-      light: "#f43",
-      dark: "#a20",
+      main: "#dd2222",
+      text: "#ffffff",
+      light: "#ff4433",
+      dark: "#aa2200",
       ...extraColors?.light?.error
     },
     ...dynamicColors
@@ -141,24 +145,25 @@ function colors(theme) {
 }
 
 // ../src/config/KeyManager.ts
-var apiKey = {
+var config = {
   GOOGLE_MAP_API_KEY: ""
 };
-function setApiKey(key) {
-  apiKey = key;
+function setConfig(key) {
+  config = key;
 }
-function getApiKey() {
-  return apiKey;
+function getConfig() {
+  return config;
 }
 
 // ../src/config/index.ts
-function initialize(config) {
+function initialize(config2) {
   try {
-    setApiKey({
-      GOOGLE_MAP_API_KEY: config.googleMapApiKey
+    setConfig({
+      GOOGLE_MAP_API_KEY: config2.googleMapApiKey,
+      DEFAULT_FONT_FAMILY: config2.fontFamily
     });
-    if (config.colors)
-      setExtraColors(config.colors);
+    if (config2.colors)
+      setExtraColors(config2.colors);
   } catch (error) {
     console.error("Error reading the config file:", error);
   }
@@ -166,7 +171,7 @@ function initialize(config) {
 
 // components/AdaptiveStatusBarNext.tsx
 import { useFocusEffect } from "expo-router";
-import React5, { useState as useState3 } from "react";
+import React5, { useState as useState2 } from "react";
 import { Platform as Platform3, StatusBar } from "react-native";
 
 // ../src/hooks.ts
@@ -178,8 +183,9 @@ import { vs } from "react-native-size-matters";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import * as NavigationBar from "expo-navigation-bar";
 import * as SystemUI from "expo-system-ui";
-import React4, { createContext, useReducer } from "react";
+import React4, { createContext, useEffect as useEffect2, useReducer } from "react";
 import { Platform, useColorScheme } from "react-native";
+import { SafeAreaProvider } from "react-native-safe-area-context";
 
 // ../src/Components/FlashMessage.tsx
 import React3, { useEffect, useState } from "react";
@@ -192,54 +198,63 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { ScaledSheet } from "react-native-size-matters";
 
 // ../src/Components/Typography.tsx
-import React2 from "react";
-import { Text, StyleSheet } from "react-native";
+import React2, { forwardRef } from "react";
+import { StyleSheet, Text } from "react-native";
 import { moderateScale, verticalScale } from "react-native-size-matters";
-var Typography = ({
-  children,
-  color = "dark",
-  style = {},
-  textCase = null,
-  variant = "body1",
-  align = "left",
-  gutterBottom = 0,
-  numberOfLines,
-  adjustsFontSizeToFit,
-  fontWeight = 400
-}) => {
-  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 styles2 = StyleSheet.create({
-    text: {
-      fontSize: fontSize[variant],
-      marginBottom: verticalScale(gutterBottom) || 0,
-      color: colors2[color]?.main || color,
-      textTransform: textCase,
-      alignItems: "center",
-      textAlign: align,
-      fontWeight: fontWeight.toString()
-    }
-  });
-  return /* @__PURE__ */ React2.createElement(
-    Text,
-    {
-      numberOfLines,
-      adjustsFontSizeToFit,
-      style: { ...styles2.text, ...style }
-    },
-    children
-  );
-};
+var Typography = forwardRef(
+  ({
+    children,
+    color = "dark",
+    style = {},
+    textCase = null,
+    variant = "body1",
+    align = "left",
+    gutterBottom = 0,
+    numberOfLines,
+    adjustsFontSizeToFit,
+    fontWeight = 400,
+    fontFamily,
+    // NEW PROP ADDED
+    ...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 styles2 = StyleSheet.create({
+      text: {
+        fontSize: fontSize[variant],
+        marginBottom: verticalScale(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
+      }
+    });
+    return /* @__PURE__ */ React2.createElement(
+      Text,
+      {
+        ref,
+        numberOfLines,
+        adjustsFontSizeToFit,
+        style: [styles2.text, style],
+        ...props
+      },
+      children
+    );
+  }
+);
 var Typography_default = Typography;
 
 // ../src/Components/FlashMessage.tsx
@@ -304,24 +319,10 @@ var FlashMessage = () => {
 var FlashMessage_default = FlashMessage;
 
 // ../src/theme/index.tsx
-import { SafeAreaProvider } from "react-native-safe-area-context";
 var UIThemeContext = createContext({
   themeState: { mode: "default", value: "light" }
 });
 function themeReducer(state, { type, payload }) {
-  if (payload === "dark" || type === "dark") {
-    SystemUI.setBackgroundColorAsync("#000000");
-    if (Platform.OS === "android") {
-      NavigationBar.setButtonStyleAsync("light");
-      NavigationBar.setBackgroundColorAsync("#000000");
-    }
-  } else {
-    SystemUI.setBackgroundColorAsync("#ffffff");
-    if (Platform.OS === "android") {
-      NavigationBar.setButtonStyleAsync("dark");
-      NavigationBar.setBackgroundColorAsync("#fff");
-    }
-  }
   switch (type) {
     case "dark":
       return { mode: "dark", value: "dark" };
@@ -333,6 +334,24 @@ function themeReducer(state, { type, payload }) {
       return state;
   }
 }
+var ConfigureSystemUI = () => {
+  const theme = useTheme();
+  const colors2 = useColors();
+  useEffect2(() => {
+    if (colors2) {
+      SystemUI.setBackgroundColorAsync(colors2.white[1]);
+      if (Platform.OS === "android") {
+        NavigationBar.setBackgroundColorAsync(colors2.white[1]);
+        if (theme === "dark") {
+          NavigationBar.setButtonStyleAsync("light");
+        } else {
+          NavigationBar.setButtonStyleAsync("dark");
+        }
+      }
+    }
+  }, [colors2, theme]);
+  return /* @__PURE__ */ React4.createElement(React4.Fragment, null);
+};
 var UIThemeProvider = ({ children }) => {
   const [themeState, themeDispatch] = useReducer(themeReducer, {
     mode: "default",
@@ -368,7 +387,8 @@ var UIThemeProvider = ({ children }) => {
       }
     },
     children,
-    /* @__PURE__ */ React4.createElement(FlashMessage_default, null)
+    /* @__PURE__ */ React4.createElement(FlashMessage_default, null),
+    /* @__PURE__ */ React4.createElement(ConfigureSystemUI, null)
   ));
 };
 
@@ -383,6 +403,7 @@ var useTheme = () => {
 };
 var useNavScreenOptions = (type) => {
   const colors2 = useColors();
+  const theme = useTheme();
   const options = {
     stack: {
       headerShown: false,
@@ -402,7 +423,7 @@ var useNavScreenOptions = (type) => {
       headerShown: false,
       headerTintColor: colors2.dark.main,
       tabBarStyle: {
-        borderTopColor: colors2.white[3],
+        borderTopColor: theme === "dark" ? colors2.light.main : colors2.white[2],
         borderTopWidth: 1,
         // shadowColor: "#000",
         // shadowOffset: { height: -3, width: 0 },
@@ -443,7 +464,7 @@ var useNavScreenOptions = (type) => {
 
 // components/AdaptiveStatusBarNext.tsx
 var AdaptiveStatusBar = ({ translucent = false }) => {
-  const [focused, setFocused] = useState3(false);
+  const [focused, setFocused] = useState2(false);
   const colors2 = useColors();
   const theme = useTheme();
   useFocusEffect(
@@ -551,7 +572,7 @@ var Avatar_default = Avatar;
 
 // ../src/Components/Button.tsx
 import { Ionicons, MaterialIcons as MaterialIcons2 } from "@expo/vector-icons";
-import React8 from "react";
+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";
 var LinkButton = ({
@@ -569,6 +590,7 @@ var LinkButton = ({
     text: {
       fontSize: moderateScale2(fontSize),
       fontWeight,
+      fontFamily: getConfig().DEFAULT_FONT_FAMILY || "System",
       color: disabled ? "#777" : colors2[color].main
     }
   });
@@ -628,64 +650,79 @@ var IconButton = ({
     /* @__PURE__ */ React8.createElement(IconComp, { style: { ...styles2.text, ...style }, name: icon, size })
   );
 };
-var Button = ({
-  elevation = 0,
-  onPress = () => {
-  },
-  disabled = false,
-  title,
-  loading,
-  size = "normal",
-  rounded = false,
-  gutterBottom,
-  style = {},
-  fullWidth = false,
-  translucent = false,
-  color = "primary",
-  variant = "contained",
-  start,
-  end
-}) => {
-  const colors2 = useColors();
-  const styles2 = ScaledSheet4.create({
-    con: {
-      flexDirection: "row",
-      alignItems: "center",
-      alignSelf: "flex-start",
-      justifyContent: "center",
-      backgroundColor: variant === "text" || variant === "outlined" ? null : translucent ? translucent === "dark" ? colors2.white[3] + "2" : colors2.black[3] + "2" : 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",
-      paddingHorizontal: size === "small" ? "10@ms" : "18@ms",
-      borderColor: colors2[color].main,
-      borderWidth: variant === "outlined" ? 1 : 0,
-      shadowColor: "#000",
-      shadowRadius: elevation,
-      marginBottom: gutterBottom,
-      shadowOffset: {
-        height: elevation / 2,
-        width: 0
+var Button = forwardRef2(
+  ({
+    elevation = 0,
+    onPress = () => {
+    },
+    disabled = false,
+    title,
+    loading,
+    size = "normal",
+    rounded = false,
+    gutterBottom,
+    style = {},
+    fullWidth = false,
+    translucent = false,
+    color = "primary",
+    variant = "contained",
+    start,
+    end
+  }, ref) => {
+    const colors2 = useColors();
+    const styles2 = 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,
+        borderRadius: rounded ? 30 : 10,
+        elevation: variant === "text" ? 0 : elevation,
+        paddingVertical: size === "small" ? 8 : size === "large" ? "15@ms" : "13@ms",
+        paddingHorizontal: size === "small" ? "10@ms" : "18@ms",
+        borderColor: colors2[color].main,
+        borderWidth: variant === "outlined" ? 1 : 0,
+        shadowColor: "#000",
+        shadowRadius: elevation,
+        marginBottom: gutterBottom,
+        shadowOffset: {
+          height: elevation / 2,
+          width: 0
+        },
+        shadowOpacity: variant === "text" ? 0 : 0.3,
+        width: fullWidth ? "100%" : null,
+        ...style
       },
-      shadowOpacity: variant === "text" ? 0 : 0.3,
-      width: fullWidth ? "100%" : null,
-      ...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"
-    }
-  });
-  return /* @__PURE__ */ React8.createElement(TouchableOpacity2, { onPress, disabled, style: styles2.con }, start, loading && /* @__PURE__ */ React8.createElement(
-    ActivityIndicator,
-    {
-      size: "small",
-      color: colors2[color].text,
-      style: { marginRight: 10 }
-    }
-  ), /* @__PURE__ */ React8.createElement(Text2, { style: styles2.text }, title), end);
-};
+      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"
+      }
+    });
+    return /* @__PURE__ */ React8.createElement(
+      TouchableOpacity2,
+      {
+        ref,
+        onPress,
+        disabled,
+        style: styles2.con
+      },
+      start,
+      loading && /* @__PURE__ */ React8.createElement(
+        ActivityIndicator,
+        {
+          size: "small",
+          color: colors2[color].text,
+          style: { marginRight: 10 }
+        }
+      ),
+      /* @__PURE__ */ React8.createElement(Text2, { style: styles2.text }, title),
+      end
+    );
+  }
+);
 var Button_default = Button;
 
 // ../src/Components/Checkbox.tsx
@@ -780,7 +817,7 @@ var FormWrapper = ({
 // ../src/Components/StarRating.tsx
 import { Ionicons as Ionicons2 } from "@expo/vector-icons";
 import * as Haptics from "expo-haptics";
-import { useEffect as useEffect2, useState as useState5 } from "react";
+import { useEffect as useEffect3, useState as useState4 } from "react";
 import {
   ActivityIndicator as ActivityIndicator2,
   TextInput,
@@ -800,7 +837,7 @@ import {
   TouchableWithoutFeedback as TouchableWithoutFeedback2,
   View as View5
 } from "react-native";
-import React11, { useState as useState4 } from "react";
+import React11, { useState as useState3 } from "react";
 import { ScaledSheet as ScaledSheet7 } from "react-native-size-matters";
 var Popup = ({
   title,
@@ -810,11 +847,13 @@ var Popup = ({
   children,
   open,
   onClose = () => {
-  }
+  },
+  style
 }) => {
+  const theme = useTheme();
   const colors2 = useColors();
-  const [show, setShow] = useState4(open);
-  const [showSecondary, setShowSecondary] = useState4(false);
+  const [show, setShow] = useState3(open);
+  const [showSecondary, setShowSecondary] = useState3(false);
   const styles2 = ScaledSheet7.create({
     root: {
       height: "100%",
@@ -831,12 +870,13 @@ var Popup = ({
     },
     container: {
       paddingBottom: sheet ? "30@ms" : 0,
-      backgroundColor: colors2.white[2],
+      backgroundColor: theme === "dark" ? "#111" : colors2.white[2],
       borderTopLeftRadius: 20,
       borderTopRightRadius: 20,
       borderBottomRightRadius: sheet ? 0 : 20,
       borderBottomLeftRadius: sheet ? 0 : 20,
-      width: "100%"
+      width: "100%",
+      ...style
     },
     content: {
       paddingHorizontal: bare ? void 0 : "10@ms"
@@ -858,14 +898,21 @@ var Popup = ({
     }
   });
   React11.useEffect(() => {
-    setShow(open);
-    setTimeout(() => {
-      setShowSecondary(open);
-    }, 500);
+    if (open) {
+      setShow(open);
+      setTimeout(() => {
+        setShowSecondary(open);
+      }, 500);
+    } else {
+      closeAction();
+    }
   }, [open]);
   const closeAction = () => {
-    setShow(false);
-    onClose();
+    setShowSecondary(false);
+    setTimeout(() => {
+      setShow(false);
+      onClose();
+    }, 300);
   };
   return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(
     Modal,
@@ -939,11 +986,11 @@ var RatingInput = ({
   rating = 0,
   size = 16
 }) => {
-  const [showReviewsModal, setShowReviewsModal] = useState5(false);
-  const [rate, setRate] = useState5(0);
+  const [showReviewsModal, setShowReviewsModal] = useState4(false);
+  const [rate, setRate] = useState4(0);
   const colors2 = useColors();
-  const [loading, setLoading] = useState5(false);
-  const [review, setReview] = useState5("");
+  const [loading, setLoading] = useState4(false);
+  const [review, setReview] = useState4("");
   const styles2 = ScaledSheet8.create({
     root: {
       flexDirection: "row",
@@ -961,7 +1008,7 @@ var RatingInput = ({
       height: "100@vs"
     }
   });
-  useEffect2(() => {
+  useEffect3(() => {
     setRate(rating);
   }, [rating]);
   const onRate = (index) => {
@@ -1086,7 +1133,7 @@ var Grid = ({
 
 // ../src/Components/Locator.tsx
 import { Ionicons as Ionicons4 } from "@expo/vector-icons";
-import React16, { useEffect as useEffect3, useState as useState8 } from "react";
+import React16, { useEffect as useEffect4, useState as useState7 } from "react";
 import { Alert, TouchableOpacity as TouchableOpacity8, View as View11 } from "react-native";
 
 // ../src/Components/List.tsx
@@ -1108,7 +1155,7 @@ var ListItem = ({
       flexDirection: "row",
       alignItems: "center",
       paddingHorizontal: "10@s",
-      borderBottomColor: colors2.white[4],
+      borderBottomColor: colors2.white[2],
       borderBottomWidth: divider ? 1 : 0,
       paddingVertical: "10@vs"
     }
@@ -1130,7 +1177,7 @@ var ListItem = ({
 
 // ../src/Components/TextField.tsx
 import { Ionicons as Ionicons3, MaterialIcons as MaterialIcons5 } from "@expo/vector-icons";
-import React15, { startTransition, useRef, useState as useState7 } from "react";
+import React15, { useRef, useState as useState6 } from "react";
 import { Animated, TextInput as TextInput2, TouchableOpacity as TouchableOpacity7, View as View10 } from "react-native";
 import {
   ScaledSheet as ScaledSheet12,
@@ -1141,7 +1188,7 @@ import {
 
 // ../src/Components/SelectMenu.tsx
 import { MaterialIcons as MaterialIcons4 } from "@expo/vector-icons";
-import React14, { useCallback, useState as useState6 } from "react";
+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 { ScaledSheet as ScaledSheet11 } from "react-native-size-matters";
@@ -1158,7 +1205,7 @@ var SelectMenu = ({
 }) => {
   const colors2 = useColors();
   const { bottom } = useSafeAreaInsets2();
-  const [search, setSearch] = useState6("");
+  const [search, setSearch] = useState5("");
   const styles2 = ScaledSheet11.create({
     root: {
       backgroundColor: colors2.white[1],
@@ -1192,7 +1239,7 @@ var SelectMenu = ({
       {
         style: {
           ...styles2.option,
-          backgroundColor: item.value === value ? colors2.blue.light + "2" : colors2.white[2]
+          backgroundColor: item.value === value ? colors2.blue.light + "22" : colors2.white[2]
         },
         onPress: () => {
           onChange(item.value);
@@ -1294,9 +1341,11 @@ var TextField = ({
   ...props
 }) => {
   const colors2 = useColors();
-  const [focused, setFocused] = useState7(false);
-  const labelAnim = useRef(new Animated.Value(0)).current;
+  const [focused, setFocused] = useState6(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))
+  ).current;
   React15.useEffect(() => {
     if (focused || value) {
       Animated.timing(labelAnim, {
@@ -1338,6 +1387,7 @@ var TextField = ({
       paddingLeft: variant === "text" ? 0 : moderateScale3(15),
       paddingRight: moderateScale3(10),
       paddingTop: "11@vs",
+      fontFamily: getConfig().DEFAULT_FONT_FAMILY || "System",
       color: colors2.black[1],
       zIndex: 10
       // backgroundColor: "#284",
@@ -1349,6 +1399,7 @@ var TextField = ({
       paddingTop: "13@ms"
     },
     label: {
+      fontFamily: getConfig().DEFAULT_FONT_FAMILY || "System",
       position: "absolute",
       left: variant === "text" ? 0 : moderateScale3(15),
       fontSize: focused || value ? "10@s" : "13@s",
@@ -1439,15 +1490,33 @@ var TextField = ({
         style: styles2.input
       }
     ),
-    end && /* @__PURE__ */ React15.createElement(View10, { style: { marginRight: 20 } }, end),
-    options && /* @__PURE__ */ React15.createElement(View10, { style: { marginRight: 20 } }, /* @__PURE__ */ React15.createElement(
-      Ionicons3,
+    end && /* @__PURE__ */ React15.createElement(
+      View10,
       {
-        name: "chevron-down",
-        color: colors2.textSecondary.main,
-        size: 24
-      }
-    ))
+        style: {
+          marginRight: 20,
+          paddingTop: variant === "text" ? ms(13) : 0
+        }
+      },
+      end
+    ),
+    options && /* @__PURE__ */ React15.createElement(
+      View10,
+      {
+        style: {
+          marginRight: variant === "text" ? 0 : 20,
+          paddingTop: variant === "text" ? ms(13) : 0
+        }
+      },
+      /* @__PURE__ */ React15.createElement(
+        Ionicons3,
+        {
+          name: "chevron-down",
+          color: colors2.textSecondary.main,
+          size: 24
+        }
+      )
+    )
   ), helperText && /* @__PURE__ */ React15.createElement(
     Typography_default,
     {
@@ -1472,7 +1541,6 @@ var TextField = ({
 var TextField2 = ({
   label,
   keyboardType,
-  variant,
   color = "primary",
   value,
   type,
@@ -1497,32 +1565,14 @@ var TextField2 = ({
   ...props
 }) => {
   const colors2 = useColors();
-  const [focused, _setFocused] = useState7(false);
-  const [showPassword, setShowPassword] = useState7(false);
-  const labelAnim = useRef(new Animated.Value(0)).current;
+  const [focused, _setFocused] = useState6(false);
+  const [showPassword, setShowPassword] = useState6(false);
   const height = moderateScale3(
     props.multiline ? 50 + (props.numberOfLines || 1) * 18 : 50
   );
   const setFocused = (value2) => {
-    startTransition(() => {
-      _setFocused(value2);
-    });
+    _setFocused(value2);
   };
-  React15.useEffect(() => {
-    if (focused || value) {
-      Animated.timing(labelAnim, {
-        toValue: verticalScale2(5),
-        duration: 300,
-        useNativeDriver: false
-      }).start();
-    } else {
-      Animated.timing(labelAnim, {
-        toValue: height / moderateScale3(3),
-        duration: 300,
-        useNativeDriver: false
-      }).start();
-    }
-  }, [focused, value]);
   const styles2 = ScaledSheet12.create({
     root: {
       marginBottom: gutterBottom + "@vs",
@@ -1545,13 +1595,13 @@ var TextField2 = ({
       alignSelf: "stretch",
       paddingLeft: moderateScale3(10),
       paddingRight: moderateScale3(10),
-      color: colors2.dark.light,
+      color: colors2.dark.main,
       zIndex: 10
       // backgroundColor: "#284",
     },
     inputText: {
       fontSize: "14@ms",
-      color: colors2.dark.light,
+      color: colors2.dark.main,
       paddingLeft: moderateScale3(10)
     },
     placeholder: {
@@ -1678,13 +1728,8 @@ var TextField_default = TextField;
 // ../src/Components/Locator.tsx
 import * as Location from "expo-location";
 import { ScaledSheet as ScaledSheet13 } from "react-native-size-matters";
-setTimeout(() => {
-  const { GOOGLE_MAP_API_KEY } = getApiKey();
-  if (GOOGLE_MAP_API_KEY)
-    Location.setGoogleApiKey(GOOGLE_MAP_API_KEY);
-}, 500);
 var getPredictionsFromCoords = async (coords) => {
-  const { GOOGLE_MAP_API_KEY } = getApiKey();
+  const { GOOGLE_MAP_API_KEY } = getConfig();
   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"
@@ -1719,10 +1764,10 @@ var Locator = ({
   float = true,
   country = "ng"
 }) => {
-  const { GOOGLE_MAP_API_KEY } = getApiKey();
-  const [changed, setChanged] = useState8(false);
-  const [value, setValue] = useState8("");
-  const [prediction, setPrediction] = useState8([]);
+  const { GOOGLE_MAP_API_KEY } = getConfig();
+  const [changed, setChanged] = useState7(false);
+  const [value, setValue] = useState7("");
+  const [prediction, setPrediction] = useState7([]);
   const colors2 = useColors();
   const styles2 = ScaledSheet13.create({
     list: {
@@ -1802,7 +1847,7 @@ var Locator = ({
     setChanged(false);
     setPrediction([]);
   };
-  useEffect3(() => {
+  useEffect4(() => {
     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"
@@ -1932,7 +1977,7 @@ var Spinner = ({
       alignItems: "center",
       justifyContent: "center",
       position: fullscreen ? "absolute" : "relative",
-      backgroundColor: fullscreen ? colors2.white[1] + "d" : void 0,
+      backgroundColor: fullscreen ? colors2.white[1] + "dd" : void 0,
       ...style
     },
     content: {
@@ -1954,7 +1999,10 @@ var Spinner_default = Spinner;
 
 // ../src/Components/OTPInput.tsx
 import React19, { useMemo } from "react";
-import { TextInput as TextInput3, View as View14 } from "react-native";
+import {
+  TextInput as TextInput3,
+  View as View14
+} from "react-native";
 import { ScaledSheet as ScaledSheet16, ms as ms3 } from "react-native-size-matters";
 var OTPInput = ({
   length = 6,
@@ -1969,6 +2017,36 @@ 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) {
+        inputRefs[length - 1].current?.focus();
+      }
+      return;
+    }
+    if (val.length === 0) {
+      const newValue2 = value.slice(0, index) + value.slice(index + 1);
+      onChange(newValue2);
+      if (index > 0) {
+        inputRefs[index - 1].current?.focus();
+      }
+      return;
+    }
+    const digit = val.replace(/\D/g, "").slice(0, 1);
+    if (!digit)
+      return;
+    const newValue = value.slice(0, index) + digit + value.slice(index + 1);
+    onChange(newValue);
+    if (index < length - 1) {
+      inputRefs[index + 1].current?.focus();
+    }
+  };
   const colors2 = useColors();
   const styles2 = ScaledSheet16.create({
     root: {},
@@ -1991,27 +2069,7 @@ var OTPInput = ({
     TextInput3,
     {
       ref: inputRefs[index],
-      onChangeText: (val) => {
-        if (val.length === 1) {
-          if (index !== length - 1)
-            inputRefs[index + 1].current?.focus();
-          let text = value;
-          text = text.slice(0, index) + val + text.slice(index + 1);
-          onChange(text);
-        } else if (val.length === 0) {
-          if (index !== 0) {
-            inputRefs[index - 1].current?.focus();
-            let text = value;
-            text = text.slice(0, index);
-            onChange(text);
-          } else
-            onChange("");
-        } else {
-          let text = val.replace(/\D/g, "").slice(0, length);
-          onChange(text);
-          inputRefs[text.length < length - 1 ? text.length : length - 1]?.current?.focus();
-        }
-      },
+      onChangeText: (val) => onChangeHandler(val, index),
       value: value[index] || "",
       blurOnSubmit: false,
       keyboardType: "number-pad",