@hoddy-ui/next 1.0.3 → 1.0.29

package/dist/index.js

@@ -69,61 +69,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
     }
@@ -132,73 +136,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
@@ -206,24 +210,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);
   }
@@ -245,6 +250,7 @@ var NavigationBar = __toESM(require("expo-navigation-bar"));
 var SystemUI = __toESM(require("expo-system-ui"));
 var import_react3 = __toESM(require("react"));
 var import_react_native3 = require("react-native");
+var import_react_native_safe_area_context2 = require("react-native-safe-area-context");
 
 // ../src/Components/FlashMessage.tsx
 var import_react2 = __toESM(require("react"));
@@ -256,51 +262,60 @@ var import_react_native_size_matters2 = require("react-native-size-matters");
 var import_react = __toESM(require("react"));
 var import_react_native = require("react-native");
 var import_react_native_size_matters = require("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: (0, import_react_native_size_matters.moderateScale)(42),
-    h2: (0, import_react_native_size_matters.moderateScale)(37),
-    h3: (0, import_react_native_size_matters.moderateScale)(32),
-    h4: (0, import_react_native_size_matters.moderateScale)(27),
-    h5: (0, import_react_native_size_matters.moderateScale)(22),
-    h6: (0, import_react_native_size_matters.moderateScale)(17),
-    body1: (0, import_react_native_size_matters.moderateScale)(15),
-    body2: (0, import_react_native_size_matters.moderateScale)(12),
-    caption: (0, import_react_native_size_matters.moderateScale)(10)
-  };
-  const styles2 = import_react_native.StyleSheet.create({
-    text: {
-      fontSize: fontSize[variant],
-      marginBottom: (0, import_react_native_size_matters.verticalScale)(gutterBottom) || 0,
-      color: colors2[color]?.main || color,
-      textTransform: textCase,
-      alignItems: "center",
-      textAlign: align,
-      fontWeight: fontWeight.toString()
-    }
-  });
-  return /* @__PURE__ */ import_react.default.createElement(
-    import_react_native.Text,
-    {
-      numberOfLines,
-      adjustsFontSizeToFit,
-      style: { ...styles2.text, ...style }
-    },
-    children
-  );
-};
+var Typography = (0, import_react.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: (0, import_react_native_size_matters.moderateScale)(42),
+      h2: (0, import_react_native_size_matters.moderateScale)(37),
+      h3: (0, import_react_native_size_matters.moderateScale)(32),
+      h4: (0, import_react_native_size_matters.moderateScale)(27),
+      h5: (0, import_react_native_size_matters.moderateScale)(22),
+      h6: (0, import_react_native_size_matters.moderateScale)(17),
+      body1: (0, import_react_native_size_matters.moderateScale)(15),
+      body2: (0, import_react_native_size_matters.moderateScale)(12),
+      caption: (0, import_react_native_size_matters.moderateScale)(10)
+    };
+    const styles2 = import_react_native.StyleSheet.create({
+      text: {
+        fontSize: fontSize[variant],
+        marginBottom: (0, import_react_native_size_matters.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__ */ import_react.default.createElement(
+      import_react_native.Text,
+      {
+        ref,
+        numberOfLines,
+        adjustsFontSizeToFit,
+        style: [styles2.text, style],
+        ...props
+      },
+      children
+    );
+  }
+);
 var Typography_default = Typography;
 
 // ../src/Components/FlashMessage.tsx
@@ -365,24 +380,10 @@ var FlashMessage = () => {
 var FlashMessage_default = FlashMessage;
 
 // ../src/theme/index.tsx
-var import_react_native_safe_area_context2 = require("react-native-safe-area-context");
 var UIThemeContext = (0, import_react3.createContext)({
   themeState: { mode: "default", value: "light" }
 });
 function themeReducer(state, { type, payload }) {
-  if (payload === "dark" || type === "dark") {
-    SystemUI.setBackgroundColorAsync("#000000");
-    if (import_react_native3.Platform.OS === "android") {
-      NavigationBar.setButtonStyleAsync("light");
-      NavigationBar.setBackgroundColorAsync("#000000");
-    }
-  } else {
-    SystemUI.setBackgroundColorAsync("#ffffff");
-    if (import_react_native3.Platform.OS === "android") {
-      NavigationBar.setButtonStyleAsync("dark");
-      NavigationBar.setBackgroundColorAsync("#fff");
-    }
-  }
   switch (type) {
     case "dark":
       return { mode: "dark", value: "dark" };
@@ -394,6 +395,24 @@ function themeReducer(state, { type, payload }) {
       return state;
   }
 }
+var ConfigureSystemUI = () => {
+  const theme = useTheme();
+  const colors2 = useColors();
+  (0, import_react3.useEffect)(() => {
+    if (colors2) {
+      SystemUI.setBackgroundColorAsync(colors2.white[1]);
+      if (import_react_native3.Platform.OS === "android") {
+        NavigationBar.setBackgroundColorAsync(colors2.white[1]);
+        if (theme === "dark") {
+          NavigationBar.setButtonStyleAsync("light");
+        } else {
+          NavigationBar.setButtonStyleAsync("dark");
+        }
+      }
+    }
+  }, [colors2, theme]);
+  return /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null);
+};
 var UIThemeProvider = ({ children }) => {
   const [themeState, themeDispatch] = (0, import_react3.useReducer)(themeReducer, {
     mode: "default",
@@ -429,7 +448,8 @@ var UIThemeProvider = ({ children }) => {
       }
     },
     children,
-    /* @__PURE__ */ import_react3.default.createElement(FlashMessage_default, null)
+    /* @__PURE__ */ import_react3.default.createElement(FlashMessage_default, null),
+    /* @__PURE__ */ import_react3.default.createElement(ConfigureSystemUI, null)
   ));
 };
 
@@ -444,6 +464,7 @@ var useTheme = () => {
 };
 var useNavScreenOptions = (type) => {
   const colors2 = useColors();
+  const theme = useTheme();
   const options = {
     stack: {
       headerShown: false,
@@ -463,7 +484,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 },
@@ -630,6 +651,7 @@ var LinkButton = ({
     text: {
       fontSize: (0, import_react_native_size_matters6.moderateScale)(fontSize),
       fontWeight,
+      fontFamily: getConfig().DEFAULT_FONT_FAMILY || "System",
       color: disabled ? "#777" : colors2[color].main
     }
   });
@@ -689,64 +711,79 @@ var IconButton = ({
     /* @__PURE__ */ import_react8.default.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 = import_react_native_size_matters6.ScaledSheet.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 = (0, import_react8.forwardRef)(
+  ({
+    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 = import_react_native_size_matters6.ScaledSheet.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__ */ import_react8.default.createElement(import_react_native8.TouchableOpacity, { onPress, disabled, style: styles2.con }, start, loading && /* @__PURE__ */ import_react8.default.createElement(
-    import_react_native8.ActivityIndicator,
-    {
-      size: "small",
-      color: colors2[color].text,
-      style: { marginRight: 10 }
-    }
-  ), /* @__PURE__ */ import_react8.default.createElement(import_react_native8.Text, { 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__ */ import_react8.default.createElement(
+      import_react_native8.TouchableOpacity,
+      {
+        ref,
+        onPress,
+        disabled,
+        style: styles2.con
+      },
+      start,
+      loading && /* @__PURE__ */ import_react8.default.createElement(
+        import_react_native8.ActivityIndicator,
+        {
+          size: "small",
+          color: colors2[color].text,
+          style: { marginRight: 10 }
+        }
+      ),
+      /* @__PURE__ */ import_react8.default.createElement(import_react_native8.Text, { style: styles2.text }, title),
+      end
+    );
+  }
+);
 var Button_default = Button;
 
 // ../src/Components/Checkbox.tsx
@@ -851,8 +888,10 @@ var Popup = ({
   children,
   open,
   onClose = () => {
-  }
+  },
+  style
 }) => {
+  const theme = useTheme();
   const colors2 = useColors();
   const [show, setShow] = (0, import_react11.useState)(open);
   const [showSecondary, setShowSecondary] = (0, import_react11.useState)(false);
@@ -872,12 +911,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"
@@ -899,14 +939,21 @@ var Popup = ({
     }
   });
   import_react11.default.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__ */ import_react11.default.createElement(import_react11.default.Fragment, null, /* @__PURE__ */ import_react11.default.createElement(
     import_react_native11.Modal,
@@ -1149,7 +1196,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"
     }
@@ -1228,7 +1275,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);
@@ -1331,8 +1378,10 @@ var TextField = ({
 }) => {
   const colors2 = useColors();
   const [focused, setFocused] = (0, import_react16.useState)(false);
-  const labelAnim = (0, import_react16.useRef)(new import_react_native16.Animated.Value(0)).current;
   const height = (0, import_react_native_size_matters14.moderateScale)(variant === "text" ? 50 : 45) * (size === "large" ? 1.2 : size === "small" ? 0.8 : 1);
+  const labelAnim = (0, import_react16.useRef)(
+    new import_react_native16.Animated.Value(height / (0, import_react_native_size_matters14.moderateScale)(variant === "text" ? 2.5 : 3.2))
+  ).current;
   import_react16.default.useEffect(() => {
     if (focused || value) {
       import_react_native16.Animated.timing(labelAnim, {
@@ -1374,6 +1423,7 @@ var TextField = ({
       paddingLeft: variant === "text" ? 0 : (0, import_react_native_size_matters14.moderateScale)(15),
       paddingRight: (0, import_react_native_size_matters14.moderateScale)(10),
       paddingTop: "11@vs",
+      fontFamily: getConfig().DEFAULT_FONT_FAMILY || "System",
       color: colors2.black[1],
       zIndex: 10
       // backgroundColor: "#284",
@@ -1385,6 +1435,7 @@ var TextField = ({
       paddingTop: "13@ms"
     },
     label: {
+      fontFamily: getConfig().DEFAULT_FONT_FAMILY || "System",
       position: "absolute",
       left: variant === "text" ? 0 : (0, import_react_native_size_matters14.moderateScale)(15),
       fontSize: focused || value ? "10@s" : "13@s",
@@ -1475,15 +1526,33 @@ var TextField = ({
         style: styles2.input
       }
     ),
-    end && /* @__PURE__ */ import_react16.default.createElement(import_react_native16.View, { style: { marginRight: 20 } }, end),
-    options && /* @__PURE__ */ import_react16.default.createElement(import_react_native16.View, { style: { marginRight: 20 } }, /* @__PURE__ */ import_react16.default.createElement(
-      import_vector_icons8.Ionicons,
+    end && /* @__PURE__ */ import_react16.default.createElement(
+      import_react_native16.View,
       {
-        name: "chevron-down",
-        color: colors2.textSecondary.main,
-        size: 24
-      }
-    ))
+        style: {
+          marginRight: 20,
+          paddingTop: variant === "text" ? (0, import_react_native_size_matters14.ms)(13) : 0
+        }
+      },
+      end
+    ),
+    options && /* @__PURE__ */ import_react16.default.createElement(
+      import_react_native16.View,
+      {
+        style: {
+          marginRight: variant === "text" ? 0 : 20,
+          paddingTop: variant === "text" ? (0, import_react_native_size_matters14.ms)(13) : 0
+        }
+      },
+      /* @__PURE__ */ import_react16.default.createElement(
+        import_vector_icons8.Ionicons,
+        {
+          name: "chevron-down",
+          color: colors2.textSecondary.main,
+          size: 24
+        }
+      )
+    )
   ), helperText && /* @__PURE__ */ import_react16.default.createElement(
     Typography_default,
     {
@@ -1508,7 +1577,6 @@ var TextField = ({
 var TextField2 = ({
   label,
   keyboardType,
-  variant,
   color = "primary",
   value,
   type,
@@ -1535,30 +1603,12 @@ var TextField2 = ({
   const colors2 = useColors();
   const [focused, _setFocused] = (0, import_react16.useState)(false);
   const [showPassword, setShowPassword] = (0, import_react16.useState)(false);
-  const labelAnim = (0, import_react16.useRef)(new import_react_native16.Animated.Value(0)).current;
   const height = (0, import_react_native_size_matters14.moderateScale)(
     props.multiline ? 50 + (props.numberOfLines || 1) * 18 : 50
   );
   const setFocused = (value2) => {
-    (0, import_react16.startTransition)(() => {
-      _setFocused(value2);
-    });
+    _setFocused(value2);
   };
-  import_react16.default.useEffect(() => {
-    if (focused || value) {
-      import_react_native16.Animated.timing(labelAnim, {
-        toValue: (0, import_react_native_size_matters14.verticalScale)(5),
-        duration: 300,
-        useNativeDriver: false
-      }).start();
-    } else {
-      import_react_native16.Animated.timing(labelAnim, {
-        toValue: height / (0, import_react_native_size_matters14.moderateScale)(3),
-        duration: 300,
-        useNativeDriver: false
-      }).start();
-    }
-  }, [focused, value]);
   const styles2 = import_react_native_size_matters14.ScaledSheet.create({
     root: {
       marginBottom: gutterBottom + "@vs",
@@ -1581,13 +1631,13 @@ var TextField2 = ({
       alignSelf: "stretch",
       paddingLeft: (0, import_react_native_size_matters14.moderateScale)(10),
       paddingRight: (0, import_react_native_size_matters14.moderateScale)(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: (0, import_react_native_size_matters14.moderateScale)(10)
     },
     placeholder: {
@@ -1714,13 +1764,8 @@ var TextField_default = TextField;
 // ../src/Components/Locator.tsx
 var Location = __toESM(require("expo-location"));
 var import_react_native_size_matters15 = require("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"
@@ -1755,7 +1800,7 @@ var Locator = ({
   float = true,
   country = "ng"
 }) => {
-  const { GOOGLE_MAP_API_KEY } = getApiKey();
+  const { GOOGLE_MAP_API_KEY } = getConfig();
   const [changed, setChanged] = (0, import_react17.useState)(false);
   const [value, setValue] = (0, import_react17.useState)("");
   const [prediction, setPrediction] = (0, import_react17.useState)([]);
@@ -1968,7 +2013,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: {
@@ -2005,6 +2050,36 @@ var OTPInput = ({
     () => Array(length).fill(0).map((_) => import_react20.default.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 = import_react_native_size_matters19.ScaledSheet.create({
     root: {},
@@ -2027,27 +2102,7 @@ var OTPInput = ({
     import_react_native22.TextInput,
     {
       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",