@hoddy-ui/next 2.0.46 → 2.0.48

package/dist/index.js

@@ -228,7 +228,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)
@@ -259,6 +259,7 @@ var import_react_native_safe_area_context2 = require("react-native-safe-area-con
 // ../src/Components/FlashMessage.tsx
 var import_react2 = __toESM(require("react"));
 var import_react_native2 = require("react-native");
+var import_react_native_reanimated = __toESM(require("react-native-reanimated"));
 var import_react_native_safe_area_context = require("react-native-safe-area-context");
 var import_react_native_size_matters2 = require("react-native-size-matters");
 
@@ -266,24 +267,31 @@ 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");
+
+// ../src/utility.ts
+var getFontFamily = (fontWeight) => {
+  return getConfig().TYPOGRAPHY?.fontWeights?.[fontWeight] || getConfig().TYPOGRAPHY?.fontFamily || void 0;
+};
+
+// ../src/Components/Typography.tsx
 var Typography = (0, import_react.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: (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),
@@ -296,15 +304,14 @@ var Typography = (0, import_react.forwardRef)(
     };
     const styles2 = import_react_native.StyleSheet.create({
       text: {
-        fontSize: fontSize[variant],
-        marginBottom: (0, import_react_native_size_matters.verticalScale)(gutterBottom) || 0,
+        fontSize: fontSize || _fontSize[variant],
+        marginBottom: (0, import_react_native_size_matters.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__ */ import_react.default.createElement(
@@ -327,28 +334,53 @@ var showFlashMessage = () => {
 var FlashMessage = () => {
   const { top } = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
   const [message, setMessage] = (0, import_react2.useState)(null);
-  const [show, setShow] = (0, import_react2.useState)(false);
   const colors2 = useColors();
   const type = message?.type || "success";
+  const timeoutRef = (0, import_react2.useRef)(null);
+  const translateY = (0, import_react_native_reanimated.useSharedValue)(-200);
+  const opacity = (0, import_react_native_reanimated.useSharedValue)(0);
+  const hideMessage = () => {
+    setMessage(null);
+  };
+  const closeMessage = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    translateY.value = (0, import_react_native_reanimated.withTiming)(-200, { duration: 300 });
+    opacity.value = (0, import_react_native_reanimated.withTiming)(0, { duration: 300 }, () => {
+      (0, import_react_native_reanimated.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 = (0, import_react_native_reanimated.withTiming)(0, { duration: 300 });
+    opacity.value = (0, import_react_native_reanimated.withTiming)(1, { duration: 300 });
+    const duration = msg.duration || 3e3;
+    timeoutRef.current = setTimeout(() => {
+      translateY.value = (0, import_react_native_reanimated.withTiming)(-200, { duration: 300 });
+      opacity.value = (0, import_react_native_reanimated.withTiming)(0, { duration: 300 }, () => {
+        (0, import_react_native_reanimated.runOnJS)(hideMessage)();
+      });
+      timeoutRef.current = null;
+    }, duration);
   };
-  (0, import_react2.useEffect)(() => {
-    import_react_native2.LayoutAnimation.configureNext(import_react_native2.LayoutAnimation.Presets.easeInEaseOut);
-  }, [show]);
+  const animatedStyle = (0, import_react_native_reanimated.useAnimatedStyle)(() => {
+    return {
+      transform: [{ translateY: translateY.value }],
+      opacity: opacity.value
+    };
+  });
   const styles2 = import_react_native_size_matters2.ScaledSheet.create({
     root: {
       position: "absolute",
-      top: show ? 0 : -200,
+      top: 0,
       zIndex: 1e3,
       left: 0,
       paddingTop: top + 10,
@@ -369,7 +401,9 @@ var FlashMessage = () => {
       backgroundColor: "#fff3"
     }
   });
-  return /* @__PURE__ */ import_react2.default.createElement(import_react_native2.View, { style: styles2.root }, /* @__PURE__ */ import_react2.default.createElement(import_react_native2.View, { style: { flexDirection: "row" } }, /* @__PURE__ */ import_react2.default.createElement(import_react_native2.View, { style: { flex: 1, marginRight: 10 } }, message?.title && /* @__PURE__ */ import_react2.default.createElement(
+  if (!message)
+    return null;
+  return /* @__PURE__ */ import_react2.default.createElement(import_react_native_reanimated.default.View, { style: [styles2.root, animatedStyle] }, /* @__PURE__ */ import_react2.default.createElement(import_react_native2.TouchableOpacity, { onPress: closeMessage, activeOpacity: 0.9 }, /* @__PURE__ */ import_react2.default.createElement(import_react_native2.View, { style: { flexDirection: "row" } }, /* @__PURE__ */ import_react2.default.createElement(import_react_native2.View, { style: { flex: 1, marginRight: 10 } }, message?.title && /* @__PURE__ */ import_react2.default.createElement(
     Typography_default,
     {
       variant: "h6",
@@ -378,7 +412,18 @@ var FlashMessage = () => {
       style: { color: "#fff" }
     },
     message?.title
-  ), /* @__PURE__ */ import_react2.default.createElement(Typography_default, { style: { color: "#fff" } }, message?.message))), message?.actions?.map((cur, i) => /* @__PURE__ */ import_react2.default.createElement(import_react_native2.TouchableOpacity, { key: i, style: styles2.action, onPress: cur.onPress }, /* @__PURE__ */ import_react2.default.createElement(Typography_default, { fontWeight: 700, style: { color: "#fff" } }, cur.title))));
+  ), /* @__PURE__ */ import_react2.default.createElement(Typography_default, { style: { color: "#fff" } }, message?.message)))), message?.actions?.map((cur, i) => /* @__PURE__ */ import_react2.default.createElement(
+    import_react_native2.TouchableOpacity,
+    {
+      key: i,
+      style: styles2.action,
+      onPress: () => {
+        cur.onPress?.();
+        closeMessage();
+      }
+    },
+    /* @__PURE__ */ import_react2.default.createElement(Typography_default, { fontWeight: 700, style: { color: "#fff" } }, cur.title)
+  )));
 };
 var FlashMessage_default = FlashMessage;
 
@@ -575,7 +620,7 @@ var AlertX = ({
       borderRadius: 8,
       alignItems: "center",
       flexDirection: "row",
-      marginBottom: gutterBottom + "@ms",
+      marginBottom: (0, import_react_native_size_matters4.ms)(gutterBottom),
       backgroundColor: colors2[type].main + (variant === "contained" ? "" : "3")
     },
     title: {
@@ -585,7 +630,7 @@ var AlertX = ({
       color: variant === "contained" ? "#fff" : colors2[type].main
     }
   });
-  return /* @__PURE__ */ import_react6.default.createElement(import_react_native6.View, { style: { ...styles2.container, ...style } }, /* @__PURE__ */ import_react6.default.createElement(import_react_native6.View, { style: { width: "80%" } }, /* @__PURE__ */ import_react6.default.createElement(Typography_default, { style: styles2.title, gutterBottom: 3, fontWeight: 700 }, title), body && /* @__PURE__ */ import_react6.default.createElement(Typography_default, { fontWeight: 700, variant: "body2", style: styles2.body }, body)), /* @__PURE__ */ import_react6.default.createElement(import_react_native6.View, { style: { marginLeft: "auto" } }, /* @__PURE__ */ import_react6.default.createElement(
+  return /* @__PURE__ */ import_react6.default.createElement(import_react_native6.View, { style: [styles2.container, style] }, /* @__PURE__ */ import_react6.default.createElement(import_react_native6.View, { style: { width: "80%" } }, /* @__PURE__ */ import_react6.default.createElement(Typography_default, { style: styles2.title, gutterBottom: 3, fontWeight: 700 }, title), body && /* @__PURE__ */ import_react6.default.createElement(Typography_default, { fontWeight: 700, variant: "body2", style: styles2.body }, body)), /* @__PURE__ */ import_react6.default.createElement(import_react_native6.View, { style: { marginLeft: "auto" } }, /* @__PURE__ */ import_react6.default.createElement(
     import_vector_icons.MaterialIcons,
     {
       color: variant === "contained" ? "#fff" : colors2[type].main,
@@ -613,14 +658,14 @@ var Avatar = ({
   const styles2 = import_react_native_size_matters5.ScaledSheet.create({
     root: {
       borderRadius: 150,
-      height: size + "@ms",
-      width: size + "@ms",
+      height: (0, import_react_native_size_matters5.ms)(size),
+      width: (0, import_react_native_size_matters5.ms)(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: {
@@ -642,7 +687,7 @@ var LinkButton = ({
   style = {},
   color = "blue",
   fontSize = 12,
-  fontWeight = "400",
+  fontWeight = 400,
   disabled,
   onPress = () => {
   }
@@ -651,8 +696,8 @@ var LinkButton = ({
   const styles2 = import_react_native_size_matters6.ScaledSheet.create({
     text: {
       fontSize: (0, import_react_native_size_matters6.moderateScale)(fontSize),
-      fontWeight,
-      fontFamily: getConfig().DEFAULT_FONT_FAMILY || "System",
+      fontWeight: fontWeight.toString(),
+      fontFamily: getFontFamily(fontWeight),
       color: disabled ? "#777" : colors2[color].main
     }
   });
@@ -678,7 +723,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,
@@ -686,8 +731,8 @@ var IconButton = ({
         height: 1,
         width: 0
       },
-      height: bg ? size + 20 + "@ms" : void 0,
-      width: bg ? size + 20 + "@ms" : void 0,
+      height: bg ? (0, import_react_native_size_matters6.ms)(size + 20) : void 0,
+      width: bg ? (0, import_react_native_size_matters6.ms)(size + 20) : void 0,
       alignItems: "center",
       justifyContent: "center",
       shadowRadius: elevation,
@@ -738,10 +783,10 @@ var Button = (0, import_react8.forwardRef)(
         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,
@@ -753,14 +798,14 @@ var Button = (0, import_react8.forwardRef)(
           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__ */ import_react8.default.createElement(
@@ -880,6 +925,7 @@ var import_react_native_size_matters10 = require("react-native-size-matters");
 // ../src/Components/Popup.tsx
 var import_react_native11 = require("react-native");
 var import_react11 = __toESM(require("react"));
+var import_react_native_reanimated2 = __toESM(require("react-native-reanimated"));
 var import_react_native_size_matters9 = require("react-native-size-matters");
 var Popup = ({
   title,
@@ -890,12 +936,40 @@ var Popup = ({
   open,
   onClose = () => {
   },
-  style
+  style,
+  onModalShow,
+  onModalHide
 }) => {
   const theme = useTheme();
   const colors2 = useColors();
-  const [show, setShow] = (0, import_react11.useState)(open);
-  const [showSecondary, setShowSecondary] = (0, import_react11.useState)(false);
+  const [modalVisible, setModalVisible] = (0, import_react11.useState)(false);
+  const backdropOpacity = (0, import_react_native_reanimated2.useSharedValue)(0);
+  const contentTranslateY = (0, import_react_native_reanimated2.useSharedValue)(1e3);
+  (0, import_react11.useEffect)(() => {
+    if (open) {
+      setModalVisible(true);
+      backdropOpacity.value = (0, import_react_native_reanimated2.withTiming)(1, { duration: 300 });
+      contentTranslateY.value = (0, import_react_native_reanimated2.withTiming)(0, { duration: 300 }, () => {
+        if (onModalShow) {
+          (0, import_react_native_reanimated2.runOnJS)(onModalShow)();
+        }
+      });
+    } else {
+      backdropOpacity.value = (0, import_react_native_reanimated2.withTiming)(0, { duration: 200 });
+      contentTranslateY.value = (0, import_react_native_reanimated2.withTiming)(1e3, { duration: 200 }, () => {
+        (0, import_react_native_reanimated2.runOnJS)(setModalVisible)(false);
+        if (onModalHide) {
+          (0, import_react_native_reanimated2.runOnJS)(onModalHide)();
+        }
+      });
+    }
+  }, [open]);
+  const backdropAnimatedStyle = (0, import_react_native_reanimated2.useAnimatedStyle)(() => ({
+    opacity: backdropOpacity.value
+  }));
+  const contentAnimatedStyle = (0, import_react_native_reanimated2.useAnimatedStyle)(() => ({
+    transform: [{ translateY: contentTranslateY.value }]
+  }));
   const styles2 = import_react_native_size_matters9.ScaledSheet.create({
     root: {
       height: "100%",
@@ -911,7 +985,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,
@@ -922,7 +996,6 @@ var Popup = ({
     },
     content: {
       paddingHorizontal: bare ? void 0 : "15@ms"
-      // flex: 1,
     },
     title: {
       flexDirection: "row",
@@ -937,71 +1010,53 @@ var Popup = ({
     backdrop: {
       position: "absolute",
       height: "100%",
-      zIndex: -1,
+      zIndex: 1,
       width: "100%",
       backgroundColor: "#000b"
     }
   });
-  import_react11.default.useEffect(() => {
-    if (open) {
-      setShow(open);
-      setTimeout(() => {
-        setShowSecondary(open);
-      }, 500);
-    } else {
-      closeAction();
-    }
-  }, [open]);
   const closeAction = () => {
-    setShowSecondary(false);
-    setTimeout(() => {
-      setShow(false);
-      onClose();
-    }, 300);
+    onClose();
   };
-  return /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, /* @__PURE__ */ import_react11.default.createElement(
+  return /* @__PURE__ */ import_react11.default.createElement(
     import_react_native11.Modal,
     {
       transparent: true,
-      animationType: "fade",
+      animationType: "none",
       statusBarTranslucent: true,
-      visible: show,
+      visible: modalVisible,
       onRequestClose: closeAction
     },
-    /* @__PURE__ */ import_react11.default.createElement(import_react_native11.View, { style: styles2.backdrop }),
-    /* @__PURE__ */ import_react11.default.createElement(UIThemeProvider, null, /* @__PURE__ */ import_react11.default.createElement(
-      import_react_native11.Modal,
+    /* @__PURE__ */ import_react11.default.createElement(UIThemeProvider, null, /* @__PURE__ */ import_react11.default.createElement(import_react_native11.TouchableWithoutFeedback, { onPress: import_react_native11.Keyboard.dismiss }, /* @__PURE__ */ import_react11.default.createElement(import_react_native11.View, { style: styles2.root }, /* @__PURE__ */ import_react11.default.createElement(import_react_native_reanimated2.default.View, { style: [styles2.backdrop, backdropAnimatedStyle] }), open && /* @__PURE__ */ import_react11.default.createElement(
+      import_react_native11.Pressable,
       {
-        transparent: true,
-        animationType: "slide",
-        statusBarTranslucent: true,
-        visible: showSecondary,
-        onRequestClose: closeAction
+        style: [import_react_native11.StyleSheet.absoluteFill, { zIndex: 2 }],
+        onPress: closeAction
+      }
+    ), /* @__PURE__ */ import_react11.default.createElement(import_react_native_reanimated2.default.View, { style: [styles2.avoidingView, contentAnimatedStyle] }, /* @__PURE__ */ import_react11.default.createElement(
+      import_react_native11.KeyboardAvoidingView,
+      {
+        keyboardVerticalOffset,
+        behavior: import_react_native11.Platform.OS === "ios" ? "padding" : "padding"
       },
-      /* @__PURE__ */ import_react11.default.createElement(import_react_native11.TouchableWithoutFeedback, { onPress: import_react_native11.Keyboard.dismiss }, /* @__PURE__ */ import_react11.default.createElement(import_react_native11.View, { style: styles2.root }, open && /* @__PURE__ */ import_react11.default.createElement(
-        import_react_native11.Pressable,
-        {
-          style: import_react_native11.StyleSheet.absoluteFill,
-          onPress: closeAction
-        }
-      ), /* @__PURE__ */ import_react11.default.createElement(
-        import_react_native11.KeyboardAvoidingView,
+      /* @__PURE__ */ import_react11.default.createElement(
+        import_react_native_reanimated2.default.View,
         {
-          style: styles2.avoidingView,
-          keyboardVerticalOffset,
-          behavior: import_react_native11.Platform.OS === "ios" ? "position" : "padding"
+          layout: import_react_native_reanimated2.LinearTransition,
+          style: styles2.container
         },
-        /* @__PURE__ */ import_react11.default.createElement(import_react_native11.View, { style: styles2.container }, !bare && /* @__PURE__ */ import_react11.default.createElement(import_react_native11.View, { style: styles2.title }, /* @__PURE__ */ import_react11.default.createElement(import_react_native11.View, { style: styles2.titleIcon }, /* @__PURE__ */ import_react11.default.createElement(
+        !bare && /* @__PURE__ */ import_react11.default.createElement(import_react_native11.View, { style: styles2.title }, /* @__PURE__ */ import_react11.default.createElement(import_react_native11.View, { style: styles2.titleIcon }, /* @__PURE__ */ import_react11.default.createElement(
           IconButton,
           {
             size: 20,
             icon: "close",
             onPress: closeAction
           }
-        )), /* @__PURE__ */ import_react11.default.createElement(Typography_default, { align: "center", fontWeight: 500 }, title)), /* @__PURE__ */ import_react11.default.createElement(import_react_native11.View, { style: styles2.content }, children))
-      )))
-    ))
-  ));
+        )), /* @__PURE__ */ import_react11.default.createElement(Typography_default, { align: "center", fontWeight: 500 }, title)),
+        /* @__PURE__ */ import_react11.default.createElement(import_react_native11.View, { style: styles2.content }, children)
+      )
+    )))))
+  );
 };
 
 // ../src/Components/StarRating.tsx
@@ -1142,8 +1197,8 @@ var RatingInput = ({
 };
 
 // ../src/Components/Grid.tsx
-var import_react_native13 = require("react-native");
 var import_react13 = __toESM(require("react"));
+var import_react_native13 = require("react-native");
 var import_react_native_size_matters11 = require("react-native-size-matters");
 var GridItem = ({
   children,
@@ -1154,8 +1209,8 @@ var GridItem = ({
 }) => {
   const styles2 = import_react_native_size_matters11.ScaledSheet.create({
     gridItem: {
-      width: 100 / col + "%",
-      padding: spacing * 10 + "@ms",
+      width: `${100 / col}%`,
+      padding: (0, import_react_native_size_matters11.ms)(spacing * 10),
       alignItems
     }
   });
@@ -1169,7 +1224,7 @@ var Grid = ({
   const styles2 = import_react_native_size_matters11.ScaledSheet.create({
     grid: {
       flexWrap: "wrap",
-      margin: -spacing * 10 + "@ms",
+      margin: `${-spacing * 10}@ms`,
       flexDirection: "row"
     }
   });
@@ -1403,7 +1458,7 @@ var TextField = ({
   }, [focused, value]);
   const styles2 = import_react_native_size_matters14.ScaledSheet.create({
     root: {
-      marginBottom: gutterBottom + "@vs",
+      marginBottom: (0, import_react_native_size_matters14.ms)(gutterBottom),
       width: "100%",
       ...style
     },
@@ -1427,7 +1482,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",
+      fontFamily: getFontFamily(400),
       color: colors2.black[1],
       zIndex: 10
       // backgroundColor: "#284",
@@ -1439,7 +1494,7 @@ var TextField = ({
       paddingTop: "13@ms"
     },
     label: {
-      fontFamily: getConfig().DEFAULT_FONT_FAMILY || "System",
+      fontFamily: getFontFamily(400),
       position: "absolute",
       left: variant === "text" ? 0 : (0, import_react_native_size_matters14.moderateScale)(15),
       fontSize: focused || value ? "10@s" : "13@s",
@@ -1581,6 +1636,7 @@ var TextField = ({
 var TextField2 = import_react16.default.forwardRef(
   ({
     label,
+    labelProps,
     keyboardType,
     color = "primary",
     value,
@@ -1617,7 +1673,7 @@ var TextField2 = import_react16.default.forwardRef(
     };
     const styles2 = import_react_native_size_matters14.ScaledSheet.create({
       root: {
-        marginBottom: gutterBottom + "@vs",
+        marginBottom: (0, import_react_native_size_matters14.ms)(gutterBottom),
         ...style
       },
       container: {
@@ -1690,7 +1746,16 @@ var TextField2 = import_react16.default.forwardRef(
       autoCapitalize: "none",
       textContentType: "password"
     } : {};
-    return /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, /* @__PURE__ */ import_react16.default.createElement(import_react_native16.View, { style: styles2.root }, label && /* @__PURE__ */ import_react16.default.createElement(Typography_default, { variant: "body1", color: "textSecondary", gutterBottom: 7 }, label), /* @__PURE__ */ import_react16.default.createElement(
+    return /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, /* @__PURE__ */ import_react16.default.createElement(import_react_native16.View, { style: styles2.root }, label && /* @__PURE__ */ import_react16.default.createElement(
+      Typography_default,
+      {
+        variant: "body1",
+        color: "textSecondary",
+        gutterBottom: 7,
+        ...labelProps
+      },
+      label
+    ), /* @__PURE__ */ import_react16.default.createElement(
       import_react_native16.TouchableOpacity,
       {
         onPress: () => setFocused(true),
@@ -1727,7 +1792,7 @@ var TextField2 = import_react16.default.forwardRef(
           selectTextOnFocus: !disabled,
           onSubmitEditing,
           multiline,
-          textAlignVertical: multiline ? "top" : "center",
+          extAlignVertical: multiline ? "top" : "center",
           ...formProps,
           ...props,
           style: styles2.input
@@ -1845,7 +1910,8 @@ var Locator = ({
       shadowOpacity: 0.1,
       shadowRadius: float ? 15 : 0,
       shadowOffset: {
-        height: 10
+        height: 10,
+        width: 0
       },
       borderRadius: 10,
       marginBottom: 10,
@@ -2071,12 +2137,10 @@ 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) {