@hoddy-ui/next 2.0.46 → 2.0.48

package/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)
@@ -185,42 +185,51 @@ 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, useEffect as useEffect2, useReducer } from "react";
+import React4, { createContext, useEffect, 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";
-import {
-  LayoutAnimation,
-  TouchableOpacity,
-  View
-} from "react-native";
+import React3, { 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 { moderateScale, 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,
-    numberOfLines,
     adjustsFontSizeToFit,
     fontWeight = 400,
     fontFamily,
     // NEW PROP ADDED
+    fontSize,
     ...props
   }, ref) => {
     const colors2 = useColors();
-    const fontSize = {
+    const _fontSize = {
       h1: moderateScale(42),
       h2: moderateScale(37),
       h3: moderateScale(32),
@@ -233,15 +242,14 @@ var Typography = forwardRef(
     };
     const styles2 = StyleSheet.create({
       text: {
-        fontSize: fontSize[variant],
-        marginBottom: verticalScale(gutterBottom) || 0,
+        fontSize: fontSize || _fontSize[variant],
+        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(
@@ -264,28 +272,53 @@ var showFlashMessage = () => {
 var FlashMessage = () => {
   const { top } = useSafeAreaInsets();
   const [message, setMessage] = useState(null);
-  const [show, setShow] = useState(false);
   const colors2 = useColors();
   const type = message?.type || "success";
+  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)();
+    });
+  };
   showFlashMessage = (msg) => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    translateY.value = -200;
+    opacity.value = 0;
     setMessage(msg);
-    setTimeout(() => {
-      setShow(true);
-    }, 50);
-    setTimeout(() => {
-      setShow(false);
-      setTimeout(() => {
-        setMessage(null);
-      }, 500);
-    }, msg.duration || 3e3);
+    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);
   };
-  useEffect(() => {
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
-  }, [show]);
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{ translateY: translateY.value }],
+      opacity: opacity.value
+    };
+  });
   const styles2 = ScaledSheet.create({
     root: {
       position: "absolute",
-      top: show ? 0 : -200,
+      top: 0,
       zIndex: 1e3,
       left: 0,
       paddingTop: top + 10,
@@ -306,7 +339,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: [styles2.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",
@@ -315,7 +350,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: styles2.action,
+      onPress: () => {
+        cur.onPress?.();
+        closeMessage();
+      }
+    },
+    /* @__PURE__ */ React3.createElement(Typography_default, { fontWeight: 700, style: { color: "#fff" } }, cur.title)
+  )));
 };
 var FlashMessage_default = FlashMessage;
 
@@ -338,7 +384,7 @@ function themeReducer(state, { type, payload }) {
 var ConfigureSystemUI = () => {
   const theme = useTheme();
   const colors2 = useColors();
-  useEffect2(() => {
+  useEffect(() => {
     const config2 = getConfig();
     if (colors2) {
       SystemUI.setBackgroundColorAsync(colors2.white[1]);
@@ -494,7 +540,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",
@@ -512,7 +558,7 @@ var AlertX = ({
       borderRadius: 8,
       alignItems: "center",
       flexDirection: "row",
-      marginBottom: gutterBottom + "@ms",
+      marginBottom: ms2(gutterBottom),
       backgroundColor: colors2[type].main + (variant === "contained" ? "" : "3")
     },
     title: {
@@ -522,7 +568,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: [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(
     MaterialIcons,
     {
       color: variant === "contained" ? "#fff" : colors2[type].main,
@@ -537,7 +583,7 @@ var AlertX_default = AlertX;
 import { AntDesign } from "@expo/vector-icons";
 import React7 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,
@@ -550,14 +596,14 @@ var Avatar = ({
   const styles2 = 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: {
@@ -573,13 +619,13 @@ 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 = () => {
   }
@@ -588,8 +634,8 @@ var LinkButton = ({
   const styles2 = 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
     }
   });
@@ -615,7 +661,7 @@ var IconButton = ({
     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,
@@ -623,8 +669,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,
@@ -675,10 +721,10 @@ var Button = forwardRef2(
         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,
@@ -690,14 +736,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(
@@ -836,7 +882,14 @@ import {
   TouchableWithoutFeedback as TouchableWithoutFeedback2,
   View as View5
 } from "react-native";
-import React11, { useState as useState3 } from "react";
+import React11, { useEffect as useEffect2, useState as useState3 } from "react";
+import Animated2, {
+  LinearTransition,
+  runOnJS as runOnJS2,
+  useAnimatedStyle as useAnimatedStyle2,
+  useSharedValue as useSharedValue2,
+  withTiming as withTiming2
+} from "react-native-reanimated";
 import { ScaledSheet as ScaledSheet7 } from "react-native-size-matters";
 var Popup = ({
   title,
@@ -847,12 +900,40 @@ var Popup = ({
   open,
   onClose = () => {
   },
-  style
+  style,
+  onModalShow,
+  onModalHide
 }) => {
   const theme = useTheme();
   const colors2 = useColors();
-  const [show, setShow] = useState3(open);
-  const [showSecondary, setShowSecondary] = useState3(false);
+  const [modalVisible, setModalVisible] = useState3(false);
+  const backdropOpacity = useSharedValue2(0);
+  const contentTranslateY = useSharedValue2(1e3);
+  useEffect2(() => {
+    if (open) {
+      setModalVisible(true);
+      backdropOpacity.value = withTiming2(1, { duration: 300 });
+      contentTranslateY.value = withTiming2(0, { duration: 300 }, () => {
+        if (onModalShow) {
+          runOnJS2(onModalShow)();
+        }
+      });
+    } else {
+      backdropOpacity.value = withTiming2(0, { duration: 200 });
+      contentTranslateY.value = withTiming2(1e3, { duration: 200 }, () => {
+        runOnJS2(setModalVisible)(false);
+        if (onModalHide) {
+          runOnJS2(onModalHide)();
+        }
+      });
+    }
+  }, [open]);
+  const backdropAnimatedStyle = useAnimatedStyle2(() => ({
+    opacity: backdropOpacity.value
+  }));
+  const contentAnimatedStyle = useAnimatedStyle2(() => ({
+    transform: [{ translateY: contentTranslateY.value }]
+  }));
   const styles2 = ScaledSheet7.create({
     root: {
       height: "100%",
@@ -868,7 +949,7 @@ var Popup = ({
       width: sheet ? "100%" : void 0
     },
     container: {
-      paddingBottom: sheet ? "30@ms" : 0,
+      paddingBottom: sheet ? "30@ms" : void 0,
       backgroundColor: theme === "dark" ? "#111" : colors2.white[2],
       borderTopLeftRadius: 20,
       borderTopRightRadius: 20,
@@ -879,7 +960,6 @@ var Popup = ({
     },
     content: {
       paddingHorizontal: bare ? void 0 : "15@ms"
-      // flex: 1,
     },
     title: {
       flexDirection: "row",
@@ -894,71 +974,53 @@ 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: modalVisible,
       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(TouchableWithoutFeedback2, { onPress: Keyboard2.dismiss }, /* @__PURE__ */ React11.createElement(View5, { style: styles2.root }, /* @__PURE__ */ React11.createElement(Animated2.View, { style: [styles2.backdrop, backdropAnimatedStyle] }), open && /* @__PURE__ */ React11.createElement(
+      Pressable,
       {
-        transparent: true,
-        animationType: "slide",
-        statusBarTranslucent: true,
-        visible: showSecondary,
-        onRequestClose: closeAction
+        style: [StyleSheet2.absoluteFill, { zIndex: 2 }],
+        onPress: closeAction
+      }
+    ), /* @__PURE__ */ React11.createElement(Animated2.View, { style: [styles2.avoidingView, contentAnimatedStyle] }, /* @__PURE__ */ React11.createElement(
+      KeyboardAvoidingView2,
+      {
+        keyboardVerticalOffset,
+        behavior: Platform5.OS === "ios" ? "padding" : "padding"
       },
-      /* @__PURE__ */ React11.createElement(TouchableWithoutFeedback2, { onPress: Keyboard2.dismiss }, /* @__PURE__ */ React11.createElement(View5, { style: styles2.root }, open && /* @__PURE__ */ React11.createElement(
-        Pressable,
-        {
-          style: StyleSheet2.absoluteFill,
-          onPress: closeAction
-        }
-      ), /* @__PURE__ */ React11.createElement(
-        KeyboardAvoidingView2,
+      /* @__PURE__ */ React11.createElement(
+        Animated2.View,
         {
-          style: styles2.avoidingView,
-          keyboardVerticalOffset,
-          behavior: Platform5.OS === "ios" ? "position" : "padding"
+          layout: LinearTransition,
+          style: styles2.container
         },
-        /* @__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(
+        !bare && /* @__PURE__ */ React11.createElement(View5, { style: styles2.title }, /* @__PURE__ */ React11.createElement(View5, { style: styles2.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: styles2.content }, children))
-      )))
-    ))
-  ));
+        )), /* @__PURE__ */ React11.createElement(Typography_default, { align: "center", fontWeight: 500 }, title)),
+        /* @__PURE__ */ React11.createElement(View5, { style: styles2.content }, children)
+      )
+    )))))
+  );
 };
 
 // ../src/Components/StarRating.tsx
@@ -1099,9 +1161,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 ms5, ScaledSheet as ScaledSheet9 } from "react-native-size-matters";
 var GridItem = ({
   children,
   col = 2,
@@ -1111,8 +1173,8 @@ var GridItem = ({
 }) => {
   const styles2 = ScaledSheet9.create({
     gridItem: {
-      width: 100 / col + "%",
-      padding: spacing * 10 + "@ms",
+      width: `${100 / col}%`,
+      padding: ms5(spacing * 10),
       alignItems
     }
   });
@@ -1126,7 +1188,7 @@ var Grid = ({
   const styles2 = ScaledSheet9.create({
     grid: {
       flexWrap: "wrap",
-      margin: -spacing * 10 + "@ms",
+      margin: `${-spacing * 10}@ms`,
       flexDirection: "row"
     }
   });
@@ -1179,12 +1241,12 @@ 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 useState6 } 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 ms6,
   verticalScale as verticalScale2
 } from "react-native-size-matters";
 
@@ -1345,18 +1407,18 @@ var TextField = ({
   const colors2 = useColors();
   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))
+  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
@@ -1365,7 +1427,7 @@ var TextField = ({
   }, [focused, value]);
   const styles2 = ScaledSheet12.create({
     root: {
-      marginBottom: gutterBottom + "@vs",
+      marginBottom: ms6(gutterBottom),
       width: "100%",
       ...style
     },
@@ -1389,7 +1451,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",
@@ -1401,7 +1463,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",
@@ -1451,7 +1513,7 @@ var TextField = ({
       onPress: () => setFocused(true),
       style: styles2.container
     },
-    /* @__PURE__ */ React15.createElement(Animated.Text, { style: { ...styles2.label, top: labelAnim } }, label),
+    /* @__PURE__ */ React15.createElement(Animated3.Text, { style: { ...styles2.label, top: labelAnim } }, label),
     start,
     options ? /* @__PURE__ */ React15.createElement(
       View10,
@@ -1462,7 +1524,7 @@ var TextField = ({
         View10,
         {
           style: {
-            paddingTop: variant !== "outlined" ? ms(13) : 0,
+            paddingTop: variant !== "outlined" ? ms6(13) : 0,
             paddingRight: 10
           }
         },
@@ -1497,7 +1559,7 @@ var TextField = ({
       {
         style: {
           marginRight: 20,
-          paddingTop: variant === "text" ? ms(13) : 0
+          paddingTop: variant === "text" ? ms6(13) : 0
         }
       },
       end
@@ -1507,7 +1569,7 @@ var TextField = ({
       {
         style: {
           marginRight: variant === "text" ? 0 : 20,
-          paddingTop: variant === "text" ? ms(13) : 0
+          paddingTop: variant === "text" ? ms6(13) : 0
         }
       },
       /* @__PURE__ */ React15.createElement(
@@ -1543,6 +1605,7 @@ var TextField = ({
 var TextField2 = React15.forwardRef(
   ({
     label,
+    labelProps,
     keyboardType,
     color = "primary",
     value,
@@ -1579,7 +1642,7 @@ var TextField2 = React15.forwardRef(
     };
     const styles2 = ScaledSheet12.create({
       root: {
-        marginBottom: gutterBottom + "@vs",
+        marginBottom: ms6(gutterBottom),
         ...style
       },
       container: {
@@ -1652,7 +1715,16 @@ 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: styles2.root }, label && /* @__PURE__ */ React15.createElement(
+      Typography_default,
+      {
+        variant: "body1",
+        color: "textSecondary",
+        gutterBottom: 7,
+        ...labelProps
+      },
+      label
+    ), /* @__PURE__ */ React15.createElement(
       TouchableOpacity7,
       {
         onPress: () => setFocused(true),
@@ -1689,7 +1761,7 @@ var TextField2 = React15.forwardRef(
           selectTextOnFocus: !disabled,
           onSubmitEditing,
           multiline,
-          textAlignVertical: multiline ? "top" : "center",
+          extAlignVertical: multiline ? "top" : "center",
           ...formProps,
           ...props,
           style: styles2.input
@@ -1807,7 +1879,8 @@ var Locator = ({
       shadowOpacity: 0.1,
       shadowRadius: float ? 15 : 0,
       shadowOffset: {
-        height: 10
+        height: 10,
+        width: 0
       },
       borderRadius: 10,
       marginBottom: 10,
@@ -1955,7 +2028,7 @@ var SafeAreaView = ({
 
 // ../src/Components/Divider.tsx
 import { View as View12 } from "react-native";
-import { ScaledSheet as ScaledSheet14, ms as ms2 } from "react-native-size-matters";
+import { ScaledSheet as ScaledSheet14, ms as ms7 } from "react-native-size-matters";
 var Divider = ({
   height = 1,
   color = "textSecondary",
@@ -1967,7 +2040,7 @@ var Divider = ({
     root: {
       height,
       backgroundColor: colors2[color].main,
-      marginBottom: ms2(gutterBottom),
+      marginBottom: ms7(gutterBottom),
       ...style
     }
   });
@@ -2022,7 +2095,7 @@ import {
   TextInput as TextInput3,
   View as View14
 } from "react-native";
-import { ScaledSheet as ScaledSheet16, ms as ms3 } from "react-native-size-matters";
+import { ScaledSheet as ScaledSheet16, ms as ms8 } from "react-native-size-matters";
 var OTPInput = ({
   length = 6,
   onChange = () => {
@@ -2036,12 +2109,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) {
@@ -2071,17 +2142,17 @@ var OTPInput = ({
     root: {},
     container: { flexDirection: "row" },
     input: {
-      height: ms3(size),
-      width: ms3(size),
+      height: ms8(size),
+      width: ms8(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: ms8(spacing * 5),
       textAlign: "center",
       borderRadius: variant === "text" ? 0 : 10,
       color: colors2.dark.main,
-      fontSize: ms3(size * 0.5)
+      fontSize: ms8(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(