@retray-dev/ui-kit 2.5.1 → 2.6.0

package/dist/index.mjs

@@ -1,9 +1,15 @@
-import React23, { createContext, useMemo, useContext, useRef, useState, useEffect, useCallback } from 'react';
-import { Platform, StyleSheet, useColorScheme, Animated, TouchableOpacity, ActivityIndicator, Text, View, TextInput, Image, Easing, Modal } from 'react-native';
-import * as Haptics12 from 'expo-haptics';
-import { AntDesign, Entypo, FontAwesome5, MaterialIcons } from '@expo/vector-icons';
+import React24, { createContext, useMemo, useContext, useRef, useState, useEffect, useCallback } from 'react';
+import { Platform, StyleSheet, useColorScheme, Animated, TouchableOpacity, ActivityIndicator, Text, View, TextInput, Image, Easing, Modal, Pressable } from 'react-native';
+import { verticalScale, scale, moderateScale, moderateVerticalScale } from 'react-native-size-matters';
+import AntDesign from '@expo/vector-icons/AntDesign';
+import Entypo from '@expo/vector-icons/Entypo';
+import Feather from '@expo/vector-icons/Feather';
+import FontAwesome5 from '@expo/vector-icons/FontAwesome5';
+import MaterialIcons from '@expo/vector-icons/MaterialIcons';
+import Ionicons from '@expo/vector-icons/Ionicons';
+import { AntDesign as AntDesign$1, Entypo as Entypo$1, FontAwesome5 as FontAwesome5$1, MaterialIcons as MaterialIcons$1 } from '@expo/vector-icons';
 import { LinearGradient } from 'expo-linear-gradient';
-import ReanimatedAnimated, { useSharedValue, useAnimatedStyle, withTiming, Easing as Easing$1, withSpring } from 'react-native-reanimated';
+import Animated10, { useSharedValue, useDerivedValue, withTiming, Easing as Easing$1, useAnimatedStyle, withSpring } from 'react-native-reanimated';
 import RNSlider from '@react-native-community/slider';
 import { BottomSheetModal, BottomSheetView, BottomSheetBackdrop } from '@gorhom/bottom-sheet';
 export { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
@@ -12,7 +18,12 @@ import { scheduleOnRN } from 'react-native-worklets';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-// src/theme/ThemeProvider.tsx
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
 
 // src/theme/colors.ts
 var defaultLight = {
@@ -71,7 +82,7 @@ function ThemeProvider({ children, theme, colorScheme = "system" }) {
     const override = resolvedScheme === "dark" ? theme?.dark : theme?.light;
     return override ? { ...base, ...override } : base;
   }, [resolvedScheme, theme]);
-  return /* @__PURE__ */ React23.createElement(ThemeContext.Provider, { value: { colors, colorScheme: resolvedScheme } }, children);
+  return /* @__PURE__ */ React24.createElement(ThemeContext.Provider, { value: { colors, colorScheme: resolvedScheme } }, children);
 }
 function useTheme() {
   const context = useContext(ThemeContext);
@@ -80,17 +91,80 @@ function useTheme() {
   }
   return context;
 }
+var Haptics = null;
+if (Platform.OS !== "web") {
+  Haptics = __require("expo-haptics");
+}
+function selectionAsync() {
+  Haptics?.selectionAsync();
+}
+function impactLight() {
+  Haptics?.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+}
+function notificationSuccess() {
+  Haptics?.notificationAsync(Haptics.NotificationFeedbackType.Success);
+}
+function notificationError() {
+  Haptics?.notificationAsync(Haptics.NotificationFeedbackType.Error);
+}
+var isWeb = Platform.OS === "web";
+var s = isWeb ? (n) => n : scale;
+var vs = isWeb ? (n) => n : verticalScale;
+var ms = isWeb ? (n, _factor) => n : moderateScale;
+var mvs = isWeb ? (n, _factor) => n : moderateVerticalScale;
+var ICON_FAMILIES = [
+  { name: "Ionicons", component: Ionicons, glyphMap: Ionicons.glyphMap },
+  { name: "MaterialIcons", component: MaterialIcons, glyphMap: MaterialIcons.glyphMap },
+  { name: "FontAwesome5", component: FontAwesome5, glyphMap: FontAwesome5.glyphMap },
+  { name: "Entypo", component: Entypo, glyphMap: Entypo.glyphMap },
+  { name: "AntDesign", component: AntDesign, glyphMap: AntDesign.glyphMap },
+  { name: "Feather", component: Feather, glyphMap: Feather.glyphMap }
+];
+var resolvedCache = null;
+function buildCache() {
+  const cache = /* @__PURE__ */ new Map();
+  for (const family of ICON_FAMILIES) {
+    if (!family.glyphMap) continue;
+    for (const iconName of Object.keys(family.glyphMap)) {
+      cache.set(iconName, family);
+    }
+  }
+  return cache;
+}
+function resolveFamily(name) {
+  if (!resolvedCache) {
+    resolvedCache = buildCache();
+  }
+  return resolvedCache.get(name) ?? null;
+}
+function Icon({ name, size, color, family }) {
+  let resolved = null;
+  if (family) {
+    resolved = ICON_FAMILIES.find((f) => f.name === family) ?? null;
+  } else {
+    resolved = resolveFamily(name);
+  }
+  if (!resolved) return null;
+  const Component = resolved.component;
+  return React24.createElement(Component, { name, size, color });
+}
+function renderIcon(name, size, color) {
+  return React24.createElement(Icon, { name, size, color });
+}
+
+// src/components/Button/Button.tsx
 var nativeDriver = Platform.OS !== "web";
 var containerSizeStyles = {
-  sm: { paddingHorizontal: 20, paddingVertical: 10 },
-  md: { paddingHorizontal: 24, paddingVertical: 14 },
-  lg: { paddingHorizontal: 32, paddingVertical: 18 }
+  sm: { paddingHorizontal: s(20), paddingVertical: vs(10) },
+  md: { paddingHorizontal: s(24), paddingVertical: vs(14) },
+  lg: { paddingHorizontal: s(32), paddingVertical: vs(18) }
 };
 var labelSizeStyles = {
-  sm: { fontSize: 15 },
-  md: { fontSize: 17 },
-  lg: { fontSize: 18 }
+  sm: { fontSize: ms(15) },
+  md: { fontSize: ms(17) },
+  lg: { fontSize: ms(18) }
 };
+var iconSizeMap = { sm: 16, md: 18, lg: 20 };
 function Button({
   label,
   variant = "primary",
@@ -98,6 +172,8 @@ function Button({
   loading = false,
   fullWidth = false,
   icon,
+  iconName,
+  iconColor,
   iconPosition = "left",
   disabled,
   style,
@@ -106,10 +182,10 @@ function Button({
 }) {
   const { colors } = useTheme();
   const isDisabled = disabled || loading;
-  const scale = useRef(new Animated.Value(1)).current;
+  const scale2 = useRef(new Animated.Value(1)).current;
   const handlePressIn = () => {
     if (isDisabled) return;
-    Animated.spring(scale, {
+    Animated.spring(scale2, {
       toValue: 0.95,
       useNativeDriver: nativeDriver,
       speed: 40,
@@ -117,10 +193,10 @@ function Button({
     }).start();
   };
   const handlePressOut = () => {
-    Animated.spring(scale, { toValue: 1, useNativeDriver: nativeDriver, speed: 40, bounciness: 4 }).start();
+    Animated.spring(scale2, { toValue: 1, useNativeDriver: nativeDriver, speed: 40, bounciness: 4 }).start();
   };
   const handlePress = (e) => {
-    Haptics12.impactAsync(Haptics12.ImpactFeedbackStyle.Light);
+    impactLight();
     onPress?.(e);
   };
   const containerVariantStyle = {
@@ -137,8 +213,9 @@ function Button({
     ghost: { color: colors.foreground },
     destructive: { color: colors.destructiveForeground }
   }[variant];
+  const effectiveIcon = iconName ? renderIcon(iconName, iconSizeMap[size], iconColor ?? labelVariantStyle.color) : typeof icon === "function" ? icon({ label, size, variant }) : icon;
   const spinnerColor = variant === "destructive" ? colors.destructiveForeground : variant === "primary" || variant === "secondary" ? colors.primaryForeground : colors.foreground;
-  return /* @__PURE__ */ React23.createElement(Animated.View, { style: [fullWidth && styles.fullWidth, { transform: [{ scale }] }] }, /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React24.createElement(Animated.View, { style: [fullWidth && styles.fullWidth, { transform: [{ scale: scale2 }] }] }, /* @__PURE__ */ React24.createElement(
     TouchableOpacity,
     {
       style: [
@@ -157,7 +234,7 @@ function Button({
       onPressOut: handlePressOut,
       ...props
     },
-    loading ? /* @__PURE__ */ React23.createElement(ActivityIndicator, { size: "small", color: spinnerColor }) : /* @__PURE__ */ React23.createElement(React23.Fragment, null, icon && iconPosition === "left" && /* @__PURE__ */ React23.createElement(React23.Fragment, null, typeof icon === "function" ? icon({ label, size, variant }) : icon), /* @__PURE__ */ React23.createElement(Text, { style: [styles.label, labelVariantStyle, labelSizeStyles[size], icon ? styles.labelWithIcon : void 0] }, label), icon && iconPosition === "right" && /* @__PURE__ */ React23.createElement(React23.Fragment, null, typeof icon === "function" ? icon({ label, size, variant }) : icon))
+    loading ? /* @__PURE__ */ React24.createElement(ActivityIndicator, { size: "small", color: spinnerColor }) : /* @__PURE__ */ React24.createElement(React24.Fragment, null, effectiveIcon && iconPosition === "left" && /* @__PURE__ */ React24.createElement(React24.Fragment, null, effectiveIcon), /* @__PURE__ */ React24.createElement(Text, { style: [styles.label, labelVariantStyle, labelSizeStyles[size], effectiveIcon ? styles.labelWithIcon : void 0] }, label), effectiveIcon && iconPosition === "right" && /* @__PURE__ */ React24.createElement(React24.Fragment, null, effectiveIcon))
   ));
 }
 var styles = StyleSheet.create({
@@ -177,21 +254,21 @@ var styles = StyleSheet.create({
     fontWeight: "600"
   },
   labelWithIcon: {
-    marginHorizontal: 8
+    marginHorizontal: s(8)
   }
 });
 var variantStyles = {
-  h1: { fontSize: 40, fontWeight: "700", lineHeight: 52 },
-  h2: { fontSize: 28, fontWeight: "700", lineHeight: 36 },
-  h3: { fontSize: 22, fontWeight: "600", lineHeight: 30 },
-  body: { fontSize: 17, fontWeight: "400", lineHeight: 26 },
-  caption: { fontSize: 13, fontWeight: "400", lineHeight: 20 },
-  label: { fontSize: 15, fontWeight: "500", lineHeight: 22 }
+  h1: { fontSize: ms(40), fontWeight: "700", lineHeight: mvs(52) },
+  h2: { fontSize: ms(28), fontWeight: "700", lineHeight: mvs(36) },
+  h3: { fontSize: ms(22), fontWeight: "600", lineHeight: mvs(30) },
+  body: { fontSize: ms(17), fontWeight: "400", lineHeight: mvs(26) },
+  caption: { fontSize: ms(13), fontWeight: "400", lineHeight: mvs(20) },
+  label: { fontSize: ms(15), fontWeight: "500", lineHeight: mvs(22) }
 };
 function Text2({ variant = "body", color, style, children, ...props }) {
   const { colors } = useTheme();
   const defaultColor = variant === "caption" ? colors.mutedForeground : colors.foreground;
-  return /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React24.createElement(
     Text,
     {
       style: [variantStyles[variant], { color: color ?? defaultColor }, style],
@@ -202,14 +279,15 @@ function Text2({ variant = "body", color, style, children, ...props }) {
   );
 }
 var webInputResetStyle = Platform.OS === "web" ? { outlineStyle: "none", outlineWidth: 0, outlineColor: "transparent", boxShadow: "none" } : {};
-function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, type = "text", containerStyle, style, onFocus, onBlur, secureTextEntry, ...props }) {
+function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type = "text", containerStyle, style, onFocus, onBlur, secureTextEntry, ...props }) {
   const { colors } = useTheme();
   const [focused, setFocused] = useState(false);
   const [showPassword, setShowPassword] = useState(false);
   const isPassword = type === "password";
   const effectiveSecure = isPassword ? !showPassword : secureTextEntry;
-  const effectiveSuffix = isPassword && !suffix ? /* @__PURE__ */ React23.createElement(TouchableOpacity, { onPress: () => setShowPassword(!showPassword), style: styles2.passwordToggle, activeOpacity: 0.6 }, /* @__PURE__ */ React23.createElement(AntDesign, { name: showPassword ? "eye" : "eye-invisible", size: 20, color: colors.mutedForeground })) : suffix;
-  return /* @__PURE__ */ React23.createElement(View, { style: [styles2.container, containerStyle] }, label ? /* @__PURE__ */ React23.createElement(Text, { style: [styles2.label, { color: colors.foreground }], allowFontScaling: true }, label) : null, /* @__PURE__ */ React23.createElement(
+  const effectivePrefix = prefixIcon ? renderIcon(prefixIcon, 20, prefixIconColor ?? colors.mutedForeground) : prefix;
+  const effectiveSuffix = isPassword && !suffix && !suffixIcon ? /* @__PURE__ */ React24.createElement(TouchableOpacity, { onPress: () => setShowPassword(!showPassword), style: styles2.passwordToggle, activeOpacity: 0.6 }, /* @__PURE__ */ React24.createElement(AntDesign$1, { name: showPassword ? "eye" : "eye-invisible", size: 20, color: colors.mutedForeground })) : suffixIcon ? renderIcon(suffixIcon, 20, suffixIconColor ?? colors.mutedForeground) : suffix;
+  return /* @__PURE__ */ React24.createElement(View, { style: [styles2.container, containerStyle] }, label ? /* @__PURE__ */ React24.createElement(Text, { style: [styles2.label, { color: colors.foreground }], allowFontScaling: true }, label) : null, /* @__PURE__ */ React24.createElement(
     View,
     {
       style: [
@@ -220,8 +298,8 @@ function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, t
         }
       ]
     },
-    prefix ? typeof prefix === "string" ? /* @__PURE__ */ React23.createElement(Text, { style: [styles2.prefixText, { color: colors.mutedForeground }, prefixStyle], allowFontScaling: true }, prefix) : /* @__PURE__ */ React23.createElement(View, { style: styles2.prefixContainer }, prefix) : null,
-    /* @__PURE__ */ React23.createElement(
+    effectivePrefix ? typeof effectivePrefix === "string" ? /* @__PURE__ */ React24.createElement(Text, { style: [styles2.prefixText, { color: colors.mutedForeground }, prefixStyle], allowFontScaling: true }, effectivePrefix) : /* @__PURE__ */ React24.createElement(View, { style: styles2.prefixContainer }, effectivePrefix) : null,
+    /* @__PURE__ */ React24.createElement(
       TextInput,
       {
         style: [
@@ -246,67 +324,68 @@ function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, t
         ...props
       }
     ),
-    effectiveSuffix ? typeof effectiveSuffix === "string" ? /* @__PURE__ */ React23.createElement(Text, { style: [styles2.suffixText, { color: colors.mutedForeground }, suffixStyle], allowFontScaling: true }, effectiveSuffix) : /* @__PURE__ */ React23.createElement(View, { style: styles2.suffixContainer }, effectiveSuffix) : null
-  ), error ? /* @__PURE__ */ React23.createElement(Text, { style: [styles2.helperText, { color: colors.destructive }], allowFontScaling: true }, error) : null, !error && hint ? /* @__PURE__ */ React23.createElement(Text, { style: [styles2.helperText, { color: colors.mutedForeground }], allowFontScaling: true }, hint) : null);
+    effectiveSuffix ? typeof effectiveSuffix === "string" ? /* @__PURE__ */ React24.createElement(Text, { style: [styles2.suffixText, { color: colors.mutedForeground }, suffixStyle], allowFontScaling: true }, effectiveSuffix) : /* @__PURE__ */ React24.createElement(View, { style: styles2.suffixContainer }, effectiveSuffix) : null
+  ), error ? /* @__PURE__ */ React24.createElement(Text, { style: [styles2.helperText, { color: colors.destructive }], allowFontScaling: true }, error) : null, !error && hint ? /* @__PURE__ */ React24.createElement(Text, { style: [styles2.helperText, { color: colors.mutedForeground }], allowFontScaling: true }, hint) : null);
 }
 var styles2 = StyleSheet.create({
   container: {
-    gap: 8
+    gap: vs(8)
   },
   label: {
-    fontSize: 15,
+    fontSize: ms(15),
     fontWeight: "500"
   },
   inputWrapper: {
     flexDirection: "row",
     alignItems: "center",
     borderWidth: 1.5,
-    borderRadius: 8,
-    paddingHorizontal: 16,
-    paddingVertical: 14
+    borderRadius: ms(8),
+    paddingHorizontal: s(16),
+    paddingVertical: vs(14)
   },
   input: {
     flex: 1,
-    fontSize: 17,
+    fontSize: ms(17),
     paddingVertical: 0
   },
   prefixContainer: {
-    marginRight: 8
+    marginRight: s(8)
   },
   prefixText: {
-    fontSize: 17,
-    marginRight: 8
+    fontSize: ms(17),
+    marginRight: s(8)
   },
   suffixContainer: {
-    marginLeft: 8
+    marginLeft: s(8)
   },
   suffixText: {
-    fontSize: 17,
-    marginLeft: 8
+    fontSize: ms(17),
+    marginLeft: s(8)
   },
   passwordToggle: {
-    padding: 4
+    padding: s(4)
   },
   helperText: {
-    fontSize: 13
+    fontSize: ms(13)
   }
 });
 var sizePadding = {
-  sm: { paddingHorizontal: 8, paddingVertical: 2 },
-  md: { paddingHorizontal: 10, paddingVertical: 4 },
-  lg: { paddingHorizontal: 12, paddingVertical: 6 }
+  sm: { paddingHorizontal: s(8), paddingVertical: vs(2) },
+  md: { paddingHorizontal: s(10), paddingVertical: vs(4) },
+  lg: { paddingHorizontal: s(12), paddingVertical: vs(6) }
 };
 var sizeFontSize = {
-  sm: { fontSize: 11 },
-  md: { fontSize: 13 },
-  lg: { fontSize: 15 }
+  sm: { fontSize: ms(11) },
+  md: { fontSize: ms(13) },
+  lg: { fontSize: ms(15) }
 };
 var sizeIconGap = {
-  sm: 4,
-  md: 6,
-  lg: 6
+  sm: s(4),
+  md: s(6),
+  lg: s(6)
 };
-function Badge({ label, children, variant = "default", size = "md", icon, style }) {
+var sizeIconSize = { sm: 10, md: 12, lg: 14 };
+function Badge({ label, children, variant = "default", size = "md", icon, iconName, iconColor, style }) {
   const { colors } = useTheme();
   const containerStyle = {
     default: { backgroundColor: colors.primary },
@@ -320,12 +399,13 @@ function Badge({ label, children, variant = "default", size = "md", icon, style
     destructive: colors.destructiveForeground,
     outline: colors.foreground
   }[variant];
+  const effectiveIcon = iconName ? renderIcon(iconName, sizeIconSize[size], iconColor ?? textColor) : icon;
   const content = children ?? label;
-  return /* @__PURE__ */ React23.createElement(View, { style: [styles3.container, containerStyle, sizePadding[size], { gap: sizeIconGap[size] }, style] }, icon ? /* @__PURE__ */ React23.createElement(View, { style: styles3.iconContainer }, icon) : null, typeof content === "string" ? /* @__PURE__ */ React23.createElement(Text, { style: [styles3.label, { color: textColor }, sizeFontSize[size]], allowFontScaling: true }, content) : content);
+  return /* @__PURE__ */ React24.createElement(View, { style: [styles3.container, containerStyle, sizePadding[size], { gap: sizeIconGap[size] }, style] }, effectiveIcon ? /* @__PURE__ */ React24.createElement(View, { style: styles3.iconContainer }, effectiveIcon) : null, typeof content === "string" ? /* @__PURE__ */ React24.createElement(Text, { style: [styles3.label, { color: textColor }, sizeFontSize[size]], allowFontScaling: true }, content) : content);
 }
 var styles3 = StyleSheet.create({
   container: {
-    borderRadius: 6,
+    borderRadius: ms(6),
     alignSelf: "flex-start",
     flexDirection: "row",
     alignItems: "center"
@@ -341,10 +421,10 @@ var styles3 = StyleSheet.create({
 var nativeDriver2 = Platform.OS !== "web";
 function Card({ children, variant = "elevated", onPress, style }) {
   const { colors } = useTheme();
-  const scale = useRef(new Animated.Value(1)).current;
+  const scale2 = useRef(new Animated.Value(1)).current;
   const handlePressIn = () => {
     if (!onPress) return;
-    Animated.spring(scale, {
+    Animated.spring(scale2, {
       toValue: 0.98,
       useNativeDriver: nativeDriver2,
       speed: 40,
@@ -353,7 +433,7 @@ function Card({ children, variant = "elevated", onPress, style }) {
   };
   const handlePressOut = () => {
     if (!onPress) return;
-    Animated.spring(scale, {
+    Animated.spring(scale2, {
       toValue: 1,
       useNativeDriver: nativeDriver2,
       speed: 40,
@@ -362,7 +442,7 @@ function Card({ children, variant = "elevated", onPress, style }) {
   };
   const handlePress = () => {
     if (!onPress) return;
-    Haptics12.impactAsync(Haptics12.ImpactFeedbackStyle.Light);
+    impactLight();
     onPress();
   };
   const variantStyle = {
@@ -388,9 +468,9 @@ function Card({ children, variant = "elevated", onPress, style }) {
       elevation: 0
     }
   }[variant];
-  const cardContent = /* @__PURE__ */ React23.createElement(View, { style: [styles4.card, variantStyle, style] }, children);
+  const cardContent = /* @__PURE__ */ React24.createElement(View, { style: [styles4.card, variantStyle, style] }, children);
   if (onPress) {
-    return /* @__PURE__ */ React23.createElement(Animated.View, { style: { transform: [{ scale }] } }, /* @__PURE__ */ React23.createElement(
+    return /* @__PURE__ */ React24.createElement(Animated.View, { style: { transform: [{ scale: scale2 }] } }, /* @__PURE__ */ React24.createElement(
       TouchableOpacity,
       {
         onPress: handlePress,
@@ -405,46 +485,46 @@ function Card({ children, variant = "elevated", onPress, style }) {
   return cardContent;
 }
 function CardHeader({ children, style }) {
-  return /* @__PURE__ */ React23.createElement(View, { style: [styles4.header, style] }, children);
+  return /* @__PURE__ */ React24.createElement(View, { style: [styles4.header, style] }, children);
 }
 function CardTitle({ children, style }) {
   const { colors } = useTheme();
-  return /* @__PURE__ */ React23.createElement(Text, { style: [styles4.title, { color: colors.cardForeground }, style], allowFontScaling: true }, children);
+  return /* @__PURE__ */ React24.createElement(Text, { style: [styles4.title, { color: colors.cardForeground }, style], allowFontScaling: true }, children);
 }
 function CardDescription({ children, style }) {
   const { colors } = useTheme();
-  return /* @__PURE__ */ React23.createElement(Text, { style: [styles4.description, { color: colors.mutedForeground }, style], allowFontScaling: true }, children);
+  return /* @__PURE__ */ React24.createElement(Text, { style: [styles4.description, { color: colors.mutedForeground }, style], allowFontScaling: true }, children);
 }
 function CardContent({ children, style }) {
-  return /* @__PURE__ */ React23.createElement(View, { style: [styles4.content, style] }, children);
+  return /* @__PURE__ */ React24.createElement(View, { style: [styles4.content, style] }, children);
 }
 function CardFooter({ children, style }) {
-  return /* @__PURE__ */ React23.createElement(View, { style: [styles4.footer, style] }, children);
+  return /* @__PURE__ */ React24.createElement(View, { style: [styles4.footer, style] }, children);
 }
 var styles4 = StyleSheet.create({
   card: {
-    borderRadius: 12,
+    borderRadius: ms(12),
     borderWidth: 1
   },
   header: {
-    padding: 24,
+    padding: s(24),
     paddingBottom: 0,
-    gap: 8
+    gap: vs(8)
   },
   title: {
-    fontSize: 20,
+    fontSize: ms(20),
     fontWeight: "600",
-    lineHeight: 28
+    lineHeight: mvs(28)
   },
   description: {
-    fontSize: 15,
-    lineHeight: 22
+    fontSize: ms(15),
+    lineHeight: mvs(22)
   },
   content: {
-    padding: 24
+    padding: s(24)
   },
   footer: {
-    padding: 24,
+    padding: s(24),
     paddingTop: 0,
     flexDirection: "row",
     alignItems: "center"
@@ -452,7 +532,7 @@ var styles4 = StyleSheet.create({
 });
 function Separator({ orientation = "horizontal", style }) {
   const { colors } = useTheme();
-  return /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React24.createElement(
     View,
     {
       style: [
@@ -480,7 +560,7 @@ var sizeMap = {
 };
 function Spinner({ size = "md", color, ...props }) {
   const { colors } = useTheme();
-  return /* @__PURE__ */ React23.createElement(ActivityIndicator, { size: sizeMap[size], color: color ?? colors.primary, ...props });
+  return /* @__PURE__ */ React24.createElement(ActivityIndicator, { size: sizeMap[size], color: color ?? colors.primary, ...props });
 }
 function Skeleton({ width = "100%", height = 16, borderRadius = 6, style }) {
   const { colors, colorScheme } = useTheme();
@@ -502,7 +582,7 @@ function Skeleton({ width = "100%", height = 16, borderRadius = 6, style }) {
     inputRange: [0, 1],
     outputRange: [-containerWidth, containerWidth]
   });
-  return /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React24.createElement(
     View,
     {
       style: [
@@ -512,7 +592,7 @@ function Skeleton({ width = "100%", height = 16, borderRadius = 6, style }) {
       ],
       onLayout: (e) => setContainerWidth(e.nativeEvent.layout.width)
     },
-    /* @__PURE__ */ React23.createElement(Animated.View, { style: [StyleSheet.absoluteFill, { transform: [{ translateX }] }] }, /* @__PURE__ */ React23.createElement(
+    /* @__PURE__ */ React24.createElement(Animated.View, { style: [StyleSheet.absoluteFill, { transform: [{ translateX }] }] }, /* @__PURE__ */ React24.createElement(
       LinearGradient,
       {
         colors: ["transparent", shimmerHighlight, "transparent"],
@@ -529,16 +609,16 @@ var styles6 = StyleSheet.create({
   }
 });
 var sizeMap2 = {
-  sm: 28,
-  md: 40,
-  lg: 56,
-  xl: 72
+  sm: s(28),
+  md: s(40),
+  lg: s(56),
+  xl: s(72)
 };
 var fontSizeMap = {
-  sm: 12,
-  md: 16,
-  lg: 22,
-  xl: 28
+  sm: ms(12),
+  md: ms(16),
+  lg: ms(22),
+  xl: ms(28)
 };
 function Avatar({ src, fallback, size = "md", style }) {
   const { colors } = useTheme();
@@ -552,14 +632,14 @@ function Avatar({ src, fallback, size = "md", style }) {
     backgroundColor: colors.muted,
     overflow: "hidden"
   };
-  return /* @__PURE__ */ React23.createElement(View, { style: [styles7.base, containerStyle, style] }, !showFallback ? /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React24.createElement(View, { style: [styles7.base, containerStyle, style] }, !showFallback ? /* @__PURE__ */ React24.createElement(
     Image,
     {
       source: { uri: src },
       style: { width: dimension, height: dimension },
       onError: () => setImageError(true)
     }
-  ) : /* @__PURE__ */ React23.createElement(
+  ) : /* @__PURE__ */ React24.createElement(
     Text,
     {
       style: [styles7.fallback, { color: colors.mutedForeground, fontSize: fontSizeMap[size] }],
@@ -577,21 +657,22 @@ var styles7 = StyleSheet.create({
     fontWeight: "500"
   }
 });
-function AlertBanner({ title, description, variant = "default", icon, style }) {
+function AlertBanner({ title, description, variant = "default", icon, iconName, iconColor, style }) {
   const { colors } = useTheme();
   const borderColor = variant === "destructive" ? colors.destructive : variant === "success" ? colors.success : colors.border;
   const titleColor = variant === "destructive" ? colors.destructive : variant === "success" ? colors.success : colors.foreground;
   const descColor = variant === "destructive" ? colors.destructive : variant === "success" ? colors.success : colors.mutedForeground;
-  const defaultIcon = variant === "success" ? /* @__PURE__ */ React23.createElement(FontAwesome5, { name: "check-circle", size: 18, color: titleColor }) : variant === "destructive" ? /* @__PURE__ */ React23.createElement(MaterialIcons, { name: "error-outline", size: 20, color: titleColor }) : /* @__PURE__ */ React23.createElement(Entypo, { name: "info-with-circle", size: 18, color: titleColor });
-  return /* @__PURE__ */ React23.createElement(View, { style: [styles8.container, { backgroundColor: colors.card, borderColor }, style] }, /* @__PURE__ */ React23.createElement(View, { style: styles8.icon }, icon ?? defaultIcon), /* @__PURE__ */ React23.createElement(View, { style: styles8.content }, title ? /* @__PURE__ */ React23.createElement(Text, { style: [styles8.title, { color: titleColor }], allowFontScaling: true }, title) : null, description ? /* @__PURE__ */ React23.createElement(Text, { style: [styles8.description, { color: descColor }], allowFontScaling: true }, description) : null));
+  const defaultIcon = variant === "success" ? /* @__PURE__ */ React24.createElement(FontAwesome5$1, { name: "check-circle", size: 18, color: titleColor }) : variant === "destructive" ? /* @__PURE__ */ React24.createElement(MaterialIcons$1, { name: "error-outline", size: 20, color: titleColor }) : /* @__PURE__ */ React24.createElement(Entypo$1, { name: "info-with-circle", size: 18, color: titleColor });
+  const effectiveIcon = iconName ? renderIcon(iconName, 18, iconColor ?? titleColor) : icon ?? defaultIcon;
+  return /* @__PURE__ */ React24.createElement(View, { style: [styles8.container, { backgroundColor: colors.card, borderColor }, style] }, /* @__PURE__ */ React24.createElement(View, { style: styles8.icon }, effectiveIcon), /* @__PURE__ */ React24.createElement(View, { style: styles8.content }, title ? /* @__PURE__ */ React24.createElement(Text, { style: [styles8.title, { color: titleColor }], allowFontScaling: true }, title) : null, description ? /* @__PURE__ */ React24.createElement(Text, { style: [styles8.description, { color: descColor }], allowFontScaling: true }, description) : null));
 }
 var styles8 = StyleSheet.create({
   container: {
     flexDirection: "row",
     borderWidth: 1,
-    borderRadius: 12,
-    padding: 16,
-    gap: 12,
+    borderRadius: ms(12),
+    padding: s(16),
+    gap: s(12),
     shadowColor: "#000",
     shadowOffset: { width: 0, height: 4 },
     shadowOpacity: 0.06,
@@ -603,16 +684,16 @@ var styles8 = StyleSheet.create({
   },
   content: {
     flex: 1,
-    gap: 4
+    gap: vs(4)
   },
   title: {
-    fontSize: 14,
+    fontSize: ms(14),
     fontWeight: "500",
-    lineHeight: 20
+    lineHeight: mvs(20)
   },
   description: {
-    fontSize: 14,
-    lineHeight: 20
+    fontSize: ms(14),
+    lineHeight: mvs(20)
   }
 });
 function Progress({ value = 0, max = 100, style }) {
@@ -629,13 +710,13 @@ function Progress({ value = 0, max = 100, style }) {
       bounciness: 0
     }).start();
   }, [percent, trackWidth]);
-  return /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React24.createElement(
     View,
     {
       style: [styles9.track, { backgroundColor: colors.muted }, style],
       onLayout: (e) => setTrackWidth(e.nativeEvent.layout.width)
     },
-    /* @__PURE__ */ React23.createElement(
+    /* @__PURE__ */ React24.createElement(
       Animated.View,
       {
         style: [styles9.indicator, { width: animatedWidth, backgroundColor: colors.primary }]
@@ -645,7 +726,7 @@ function Progress({ value = 0, max = 100, style }) {
 }
 var styles9 = StyleSheet.create({
   track: {
-    height: 8,
+    height: vs(8),
     borderRadius: 999,
     overflow: "hidden",
     width: "100%"
@@ -655,10 +736,11 @@ var styles9 = StyleSheet.create({
     borderRadius: 999
   }
 });
-function EmptyState({ icon, title, description, action, size = "default", style }) {
+function EmptyState({ icon, iconName, iconColor, title, description, action, size = "default", style }) {
   const { colors } = useTheme();
   const isCompact = size === "compact";
-  return /* @__PURE__ */ React23.createElement(
+  const effectiveIcon = iconName ? renderIcon(iconName, isCompact ? 32 : 48, iconColor ?? colors.mutedForeground) : icon;
+  return /* @__PURE__ */ React24.createElement(
     View,
     {
       style: [
@@ -668,7 +750,7 @@ function EmptyState({ icon, title, description, action, size = "default", style
         style
       ]
     },
-    icon ? /* @__PURE__ */ React23.createElement(
+    effectiveIcon ? /* @__PURE__ */ React24.createElement(
       View,
       {
         style: [
@@ -677,17 +759,17 @@ function EmptyState({ icon, title, description, action, size = "default", style
           { backgroundColor: colors.muted }
         ]
       },
-      icon
+      effectiveIcon
     ) : null,
-    /* @__PURE__ */ React23.createElement(View, { style: styles10.textWrapper }, /* @__PURE__ */ React23.createElement(
+    /* @__PURE__ */ React24.createElement(View, { style: styles10.textWrapper }, /* @__PURE__ */ React24.createElement(
       Text,
       {
         style: [styles10.title, isCompact && styles10.titleCompact, { color: colors.foreground }],
         allowFontScaling: true
       },
       title
-    ), description && !isCompact ? /* @__PURE__ */ React23.createElement(Text, { style: [styles10.description, { color: colors.mutedForeground }], allowFontScaling: true }, description) : null),
-    action && !isCompact ? /* @__PURE__ */ React23.createElement(View, { style: styles10.action }, action) : null
+    ), description && !isCompact ? /* @__PURE__ */ React24.createElement(Text, { style: [styles10.description, { color: colors.mutedForeground }], allowFontScaling: true }, description) : null),
+    action && !isCompact ? /* @__PURE__ */ React24.createElement(View, { style: styles10.action }, action) : null
   );
 }
 var styles10 = StyleSheet.create({
@@ -696,46 +778,46 @@ var styles10 = StyleSheet.create({
     justifyContent: "center",
     borderWidth: 1,
     borderStyle: "dashed",
-    borderRadius: 12,
-    padding: 32,
-    gap: 16
+    borderRadius: ms(12),
+    padding: s(32),
+    gap: vs(16)
   },
   containerCompact: {
-    padding: 20,
-    gap: 10
+    padding: s(20),
+    gap: vs(10)
   },
   iconWrapper: {
-    width: 48,
-    height: 48,
-    borderRadius: 12,
+    width: s(48),
+    height: s(48),
+    borderRadius: ms(12),
     alignItems: "center",
     justifyContent: "center"
   },
   iconWrapperCompact: {
-    width: 36,
-    height: 36,
-    borderRadius: 8
+    width: s(36),
+    height: s(36),
+    borderRadius: ms(8)
   },
   textWrapper: {
     alignItems: "center",
-    gap: 8,
-    maxWidth: 320
+    gap: vs(8),
+    maxWidth: s(320)
   },
   title: {
-    fontSize: 18,
+    fontSize: ms(18),
     fontWeight: "500",
     textAlign: "center"
   },
   titleCompact: {
-    fontSize: 15
+    fontSize: ms(15)
   },
   description: {
-    fontSize: 14,
-    lineHeight: 20,
+    fontSize: ms(14),
+    lineHeight: mvs(20),
     textAlign: "center"
   },
   action: {
-    marginTop: 8
+    marginTop: vs(8)
   }
 });
 var webInputResetStyle2 = Platform.OS === "web" ? { outlineStyle: "none", outlineWidth: 0, outlineColor: "transparent", boxShadow: "none" } : {};
@@ -752,7 +834,7 @@ function Textarea({
 }) {
   const { colors } = useTheme();
   const [focused, setFocused] = useState(false);
-  return /* @__PURE__ */ React23.createElement(View, { style: [styles11.container, containerStyle] }, label ? /* @__PURE__ */ React23.createElement(Text, { style: [styles11.label, { color: colors.foreground }], allowFontScaling: true }, label) : null, /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React24.createElement(View, { style: [styles11.container, containerStyle] }, label ? /* @__PURE__ */ React24.createElement(Text, { style: [styles11.label, { color: colors.foreground }], allowFontScaling: true }, label) : null, /* @__PURE__ */ React24.createElement(
     TextInput,
     {
       multiline: true,
@@ -764,7 +846,7 @@ function Textarea({
           borderColor: error ? colors.destructive : focused ? colors.ring ?? colors.primary : colors.border,
           color: colors.foreground,
           backgroundColor: colors.background,
-          minHeight: rows * 30
+          minHeight: rows * vs(30)
         },
         webInputResetStyle2,
         style
@@ -781,27 +863,28 @@ function Textarea({
       allowFontScaling: true,
       ...props
     }
-  ), error ? /* @__PURE__ */ React23.createElement(Text, { style: [styles11.helperText, { color: colors.destructive }], allowFontScaling: true }, error) : null, !error && hint ? /* @__PURE__ */ React23.createElement(Text, { style: [styles11.helperText, { color: colors.mutedForeground }], allowFontScaling: true }, hint) : null);
+  ), error ? /* @__PURE__ */ React24.createElement(Text, { style: [styles11.helperText, { color: colors.destructive }], allowFontScaling: true }, error) : null, !error && hint ? /* @__PURE__ */ React24.createElement(Text, { style: [styles11.helperText, { color: colors.mutedForeground }], allowFontScaling: true }, hint) : null);
 }
 var styles11 = StyleSheet.create({
   container: {
-    gap: 8
+    gap: vs(8)
   },
   label: {
-    fontSize: 15,
+    fontSize: ms(15),
     fontWeight: "500"
   },
   input: {
     borderWidth: 1.5,
-    borderRadius: 8,
-    paddingHorizontal: 16,
-    paddingVertical: 14,
-    fontSize: 17
+    borderRadius: ms(8),
+    paddingHorizontal: s(16),
+    paddingVertical: vs(14),
+    fontSize: ms(17)
   },
   helperText: {
-    fontSize: 13
+    fontSize: ms(13)
   }
 });
+var nativeDriver3 = Platform.OS !== "web";
 function Checkbox({
   checked = false,
   onCheckedChange,
@@ -810,20 +893,20 @@ function Checkbox({
   style
 }) {
   const { colors } = useTheme();
-  const scale = useRef(new Animated.Value(1)).current;
+  const scale2 = useRef(new Animated.Value(1)).current;
   const handlePressIn = () => {
     if (disabled) return;
-    Animated.spring(scale, { toValue: 0.95, useNativeDriver: true, speed: 40, bounciness: 0 }).start();
+    Animated.spring(scale2, { toValue: 0.95, useNativeDriver: nativeDriver3, speed: 40, bounciness: 0 }).start();
   };
   const handlePressOut = () => {
-    Animated.spring(scale, { toValue: 1, useNativeDriver: true, speed: 40, bounciness: 4 }).start();
+    Animated.spring(scale2, { toValue: 1, useNativeDriver: nativeDriver3, speed: 40, bounciness: 4 }).start();
   };
-  return /* @__PURE__ */ React23.createElement(Animated.View, { style: { transform: [{ scale }] } }, /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React24.createElement(Animated.View, { style: { transform: [{ scale: scale2 }] } }, /* @__PURE__ */ React24.createElement(
     TouchableOpacity,
     {
       style: [styles12.row, style],
       onPress: () => {
-        Haptics12.selectionAsync();
+        selectionAsync();
         onCheckedChange?.(!checked);
       },
       onPressIn: handlePressIn,
@@ -832,7 +915,7 @@ function Checkbox({
       activeOpacity: 1,
       touchSoundDisabled: true
     },
-    /* @__PURE__ */ React23.createElement(
+    /* @__PURE__ */ React24.createElement(
       View,
       {
         style: [
@@ -844,9 +927,9 @@ function Checkbox({
           }
         ]
       },
-      checked ? /* @__PURE__ */ React23.createElement(View, { style: [styles12.checkmark, { borderColor: colors.primaryForeground }] }) : null
+      checked ? /* @__PURE__ */ React24.createElement(View, { style: [styles12.checkmark, { borderColor: colors.primaryForeground }] }) : null
     ),
-    label ? /* @__PURE__ */ React23.createElement(
+    label ? /* @__PURE__ */ React24.createElement(
       Text,
       {
         style: [styles12.label, { color: disabled ? colors.mutedForeground : colors.foreground }]
@@ -859,33 +942,33 @@ var styles12 = StyleSheet.create({
   row: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 12
+    gap: s(12)
   },
   box: {
-    width: 24,
-    height: 24,
-    borderRadius: 8,
+    width: s(24),
+    height: s(24),
+    borderRadius: ms(8),
     borderWidth: 1.5,
     alignItems: "center",
     justifyContent: "center"
   },
   checkmark: {
-    width: 12,
-    height: 7,
+    width: s(12),
+    height: vs(7),
     borderLeftWidth: 2,
     borderBottomWidth: 2,
     transform: [{ rotate: "-45deg" }, { translateY: -1 }]
   },
   label: {
-    fontSize: 15,
-    lineHeight: 22
+    fontSize: ms(15),
+    lineHeight: mvs(22)
   }
 });
-var nativeDriver3 = Platform.OS !== "web";
-var TRACK_WIDTH = 60;
-var TRACK_HEIGHT = 36;
-var THUMB_SIZE = 28;
-var THUMB_OFFSET = 4;
+var nativeDriver4 = Platform.OS !== "web";
+var TRACK_WIDTH = s(60);
+var TRACK_HEIGHT = vs(36);
+var THUMB_SIZE = s(28);
+var THUMB_OFFSET = s(4);
 var THUMB_TRAVEL = TRACK_WIDTH - THUMB_SIZE - THUMB_OFFSET * 2;
 function Switch({ checked = false, onCheckedChange, disabled, style }) {
   const { colors } = useTheme();
@@ -895,7 +978,7 @@ function Switch({ checked = false, onCheckedChange, disabled, style }) {
     Animated.parallel([
       Animated.spring(translateX, {
         toValue: checked ? THUMB_TRAVEL : 0,
-        useNativeDriver: nativeDriver3,
+        useNativeDriver: nativeDriver4,
         bounciness: 4
       }),
       Animated.timing(trackOpacity, {
@@ -909,11 +992,11 @@ function Switch({ checked = false, onCheckedChange, disabled, style }) {
     inputRange: [0, 1],
     outputRange: [colors.muted, colors.primary]
   });
-  return /* @__PURE__ */ React23.createElement(View, { style: [{ opacity: disabled ? 0.45 : 1 }, style] }, /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React24.createElement(View, { style: [{ opacity: disabled ? 0.45 : 1 }, style] }, /* @__PURE__ */ React24.createElement(
     TouchableOpacity,
     {
       onPress: () => {
-        Haptics12.selectionAsync();
+        selectionAsync();
         onCheckedChange?.(!checked);
       },
       disabled,
@@ -921,7 +1004,7 @@ function Switch({ checked = false, onCheckedChange, disabled, style }) {
       touchSoundDisabled: true,
       style: styles13.wrapper
     },
-    /* @__PURE__ */ React23.createElement(Animated.View, { style: [styles13.track, { backgroundColor: trackColor }] }, /* @__PURE__ */ React23.createElement(
+    /* @__PURE__ */ React24.createElement(Animated.View, { style: [styles13.track, { backgroundColor: trackColor }] }, /* @__PURE__ */ React24.createElement(
       Animated.View,
       {
         style: [
@@ -956,10 +1039,11 @@ var styles13 = StyleSheet.create({
   }
 });
 var sizeStyles = {
-  sm: { paddingHorizontal: 12, paddingVertical: 8, minWidth: 40, minHeight: 40 },
-  md: { paddingHorizontal: 16, paddingVertical: 12, minWidth: 44, minHeight: 44 },
-  lg: { paddingHorizontal: 20, paddingVertical: 14, minWidth: 48, minHeight: 48 }
+  sm: { paddingHorizontal: s(12), paddingVertical: vs(8), minWidth: s(40), minHeight: vs(40) },
+  md: { paddingHorizontal: s(16), paddingVertical: vs(12), minWidth: s(44), minHeight: vs(44) },
+  lg: { paddingHorizontal: s(20), paddingVertical: vs(14), minWidth: s(48), minHeight: vs(48) }
 };
+var iconSizeMap2 = { sm: 16, md: 18, lg: 20 };
 function Toggle({
   pressed = false,
   onPressedChange,
@@ -968,12 +1052,16 @@ function Toggle({
   label,
   icon,
   activeIcon,
+  iconName,
+  activeIconName,
+  iconColor,
+  activeIconColor,
   disabled,
   style,
   ...props
 }) {
   const { colors } = useTheme();
-  const scale = useRef(new Animated.Value(1)).current;
+  const scale2 = useRef(new Animated.Value(1)).current;
   const pressAnim = useRef(new Animated.Value(pressed ? 1 : 0)).current;
   useEffect(() => {
     Animated.timing(pressAnim, {
@@ -985,10 +1073,10 @@ function Toggle({
   }, [pressed, pressAnim]);
   const handlePressIn = () => {
     if (disabled) return;
-    Animated.spring(scale, { toValue: 0.95, useNativeDriver: true, speed: 40, bounciness: 0 }).start();
+    Animated.spring(scale2, { toValue: 0.95, useNativeDriver: true, speed: 40, bounciness: 0 }).start();
   };
   const handlePressOut = () => {
-    Animated.spring(scale, { toValue: 1, useNativeDriver: true, speed: 40, bounciness: 4 }).start();
+    Animated.spring(scale2, { toValue: 1, useNativeDriver: true, speed: 40, bounciness: 4 }).start();
   };
   const borderColor = pressAnim.interpolate({
     inputRange: [0, 1],
@@ -1002,6 +1090,7 @@ function Toggle({
     inputRange: [0, 1],
     outputRange: [colors.foreground, colors.primary]
   });
+  const iconSize = iconSizeMap2[size];
   const LeftIcon = () => {
     const renderProp = (prop) => {
       if (!prop) return null;
@@ -1009,19 +1098,21 @@ function Toggle({
       return prop;
     };
     if (pressed) {
+      if (activeIconName) return /* @__PURE__ */ React24.createElement(React24.Fragment, null, renderIcon(activeIconName, iconSize, activeIconColor ?? colors.primary));
       const active = renderProp(activeIcon);
-      if (active) return /* @__PURE__ */ React23.createElement(React23.Fragment, null, active);
-      return /* @__PURE__ */ React23.createElement(FontAwesome5, { name: "check-circle", size: 20, color: colors.primary });
+      if (active) return /* @__PURE__ */ React24.createElement(React24.Fragment, null, active);
+      return /* @__PURE__ */ React24.createElement(FontAwesome5$1, { name: "check-circle", size: iconSize, color: colors.primary });
     }
+    if (iconName) return /* @__PURE__ */ React24.createElement(React24.Fragment, null, renderIcon(iconName, iconSize, iconColor ?? colors.mutedForeground));
     const custom = renderProp(icon);
-    if (custom) return /* @__PURE__ */ React23.createElement(React23.Fragment, null, custom);
-    return /* @__PURE__ */ React23.createElement(FontAwesome5, { name: "circle", size: 20, color: colors.mutedForeground });
+    if (custom) return /* @__PURE__ */ React24.createElement(React24.Fragment, null, custom);
+    return /* @__PURE__ */ React24.createElement(FontAwesome5$1, { name: "circle", size: iconSize, color: colors.mutedForeground });
   };
-  return /* @__PURE__ */ React23.createElement(Animated.View, { style: [{ transform: [{ scale }] }, disabled && styles14.disabled, style] }, /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React24.createElement(Animated.View, { style: [{ transform: [{ scale: scale2 }] }, disabled && styles14.disabled, style] }, /* @__PURE__ */ React24.createElement(
     TouchableOpacity,
     {
       onPress: () => {
-        Haptics12.selectionAsync();
+        selectionAsync();
         onPressedChange?.(!pressed);
       },
       onPressIn: handlePressIn,
@@ -1031,7 +1122,7 @@ function Toggle({
       touchSoundDisabled: true,
       ...props
     },
-    /* @__PURE__ */ React23.createElement(
+    /* @__PURE__ */ React24.createElement(
       Animated.View,
       {
         style: [
@@ -1040,49 +1131,50 @@ function Toggle({
           { borderColor, backgroundColor, borderWidth: 2 }
         ]
       },
-      /* @__PURE__ */ React23.createElement(View, { style: styles14.inner }, /* @__PURE__ */ React23.createElement(LeftIcon, null), label ? /* @__PURE__ */ React23.createElement(Animated.Text, { style: [styles14.label, { color: textColor }] }, label) : null)
+      /* @__PURE__ */ React24.createElement(View, { style: styles14.inner }, /* @__PURE__ */ React24.createElement(LeftIcon, null), label ? /* @__PURE__ */ React24.createElement(Animated.Text, { style: [styles14.label, { color: textColor }] }, label) : null)
     )
   ));
 }
 var styles14 = StyleSheet.create({
   base: {
-    borderRadius: 8
+    borderRadius: ms(8)
   },
   inner: {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
-    gap: 8
+    gap: s(8)
   },
   disabled: {
     opacity: 0.45
   },
   label: {
-    fontSize: 14,
+    fontSize: ms(14),
     fontWeight: "500"
   }
 });
+var nativeDriver5 = Platform.OS !== "web";
 function RadioItem({
   option,
   selected,
   onSelect
 }) {
   const { colors } = useTheme();
-  const scale = useRef(new Animated.Value(1)).current;
+  const scale2 = useRef(new Animated.Value(1)).current;
   const handlePressIn = () => {
     if (option.disabled) return;
-    Animated.spring(scale, { toValue: 0.95, useNativeDriver: true, speed: 40, bounciness: 0 }).start();
+    Animated.spring(scale2, { toValue: 0.95, useNativeDriver: nativeDriver5, speed: 40, bounciness: 0 }).start();
   };
   const handlePressOut = () => {
-    Animated.spring(scale, { toValue: 1, useNativeDriver: true, speed: 40, bounciness: 4 }).start();
+    Animated.spring(scale2, { toValue: 1, useNativeDriver: nativeDriver5, speed: 40, bounciness: 4 }).start();
   };
-  return /* @__PURE__ */ React23.createElement(Animated.View, { style: { transform: [{ scale }] } }, /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React24.createElement(Animated.View, { style: { transform: [{ scale: scale2 }] } }, /* @__PURE__ */ React24.createElement(
     TouchableOpacity,
     {
       style: styles15.row,
       onPress: () => {
         if (!option.disabled) {
-          Haptics12.selectionAsync();
+          selectionAsync();
           onSelect();
         }
       },
@@ -1092,7 +1184,7 @@ function RadioItem({
       touchSoundDisabled: true,
       disabled: option.disabled
     },
-    /* @__PURE__ */ React23.createElement(
+    /* @__PURE__ */ React24.createElement(
       View,
       {
         style: [
@@ -1103,9 +1195,9 @@ function RadioItem({
           }
         ]
       },
-      selected ? /* @__PURE__ */ React23.createElement(View, { style: [styles15.dot, { backgroundColor: colors.primary }] }) : null
+      selected ? /* @__PURE__ */ React24.createElement(View, { style: [styles15.dot, { backgroundColor: colors.primary }] }) : null
     ),
-    /* @__PURE__ */ React23.createElement(
+    /* @__PURE__ */ React24.createElement(
       Text,
       {
         style: [
@@ -1124,7 +1216,7 @@ function RadioGroup({
   orientation = "vertical",
   style
 }) {
-  return /* @__PURE__ */ React23.createElement(View, { style: [styles15.container, orientation === "horizontal" && styles15.horizontal, style] }, options.map((option) => /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React24.createElement(View, { style: [styles15.container, orientation === "horizontal" && styles15.horizontal, style] }, options.map((option) => /* @__PURE__ */ React24.createElement(
     RadioItem,
     {
       key: option.value,
@@ -1136,7 +1228,7 @@ function RadioGroup({
 }
 var styles15 = StyleSheet.create({
   container: {
-    gap: 12
+    gap: vs(12)
   },
   horizontal: {
     flexDirection: "row",
@@ -1145,26 +1237,27 @@ var styles15 = StyleSheet.create({
   row: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 12
+    gap: s(12)
   },
   radio: {
-    width: 24,
-    height: 24,
-    borderRadius: 12,
+    width: s(24),
+    height: s(24),
+    borderRadius: s(12),
     borderWidth: 1.5,
     alignItems: "center",
     justifyContent: "center"
   },
   dot: {
-    width: 10,
-    height: 10,
-    borderRadius: 5
+    width: s(10),
+    height: s(10),
+    borderRadius: s(5)
   },
   label: {
-    fontSize: 14,
-    lineHeight: 20
+    fontSize: ms(14),
+    lineHeight: mvs(20)
   }
 });
+var nativeDriver6 = Platform.OS !== "web";
 function TabTrigger({
   tab,
   isActive,
@@ -1172,14 +1265,14 @@ function TabTrigger({
   onLayout
 }) {
   const { colors } = useTheme();
-  const scale = useRef(new Animated.Value(1)).current;
+  const scale2 = useRef(new Animated.Value(1)).current;
   const handlePressIn = () => {
-    Animated.spring(scale, { toValue: 0.95, useNativeDriver: true, speed: 40, bounciness: 0 }).start();
+    Animated.spring(scale2, { toValue: 0.95, useNativeDriver: nativeDriver6, speed: 40, bounciness: 0 }).start();
   };
   const handlePressOut = () => {
-    Animated.spring(scale, { toValue: 1, useNativeDriver: true, speed: 40, bounciness: 4 }).start();
+    Animated.spring(scale2, { toValue: 1, useNativeDriver: nativeDriver6, speed: 40, bounciness: 4 }).start();
   };
-  return /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React24.createElement(
     TouchableOpacity,
     {
       style: styles16.trigger,
@@ -1190,7 +1283,7 @@ function TabTrigger({
       activeOpacity: 1,
       touchSoundDisabled: true
     },
-    /* @__PURE__ */ React23.createElement(Animated.View, { style: { transform: [{ scale }] } }, /* @__PURE__ */ React23.createElement(View, { style: styles16.triggerInner }, tab.icon ? /* @__PURE__ */ React23.createElement(View, { style: styles16.triggerIcon }, typeof tab.icon === "function" ? tab.icon(isActive) : tab.icon) : null, /* @__PURE__ */ React23.createElement(
+    /* @__PURE__ */ React24.createElement(Animated.View, { style: { transform: [{ scale: scale2 }] } }, /* @__PURE__ */ React24.createElement(View, { style: styles16.triggerInner }, tab.icon ? /* @__PURE__ */ React24.createElement(View, { style: styles16.triggerIcon }, typeof tab.icon === "function" ? tab.icon(isActive) : tab.icon) : null, /* @__PURE__ */ React24.createElement(
       Text,
       {
         style: [
@@ -1240,11 +1333,11 @@ function Tabs({ tabs, value, onValueChange, children, style }) {
     }
   }, [active]);
   const handlePress = (v) => {
-    Haptics12.selectionAsync();
+    selectionAsync();
     if (!value) setInternal(v);
     onValueChange?.(v);
   };
-  return /* @__PURE__ */ React23.createElement(View, { style }, /* @__PURE__ */ React23.createElement(View, { style: [styles16.list, { backgroundColor: colors.muted }] }, /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React24.createElement(View, { style }, /* @__PURE__ */ React24.createElement(View, { style: [styles16.list, { backgroundColor: colors.muted }] }, /* @__PURE__ */ React24.createElement(
     Animated.View,
     {
       style: [
@@ -1265,7 +1358,7 @@ function Tabs({ tabs, value, onValueChange, children, style }) {
         }
       ]
     }
-  ), tabs.map((tab) => /* @__PURE__ */ React23.createElement(
+  ), tabs.map((tab) => /* @__PURE__ */ React24.createElement(
     TabTrigger,
     {
       key: tab.value,
@@ -1285,21 +1378,21 @@ function Tabs({ tabs, value, onValueChange, children, style }) {
 }
 function TabsContent({ value, activeValue, children, style }) {
   if (value !== activeValue) return null;
-  return /* @__PURE__ */ React23.createElement(View, { style }, children);
+  return /* @__PURE__ */ React24.createElement(View, { style }, children);
 }
 var styles16 = StyleSheet.create({
   list: {
     flexDirection: "row",
-    borderRadius: 12,
-    padding: 4,
-    gap: 4
+    borderRadius: ms(12),
+    padding: s(4),
+    gap: s(4)
   },
   pill: {},
   trigger: {
     flex: 1,
-    paddingVertical: 12,
-    paddingHorizontal: 16,
-    borderRadius: 8,
+    paddingVertical: vs(12),
+    paddingHorizontal: s(16),
+    borderRadius: ms(8),
     alignItems: "center",
     justifyContent: "center",
     zIndex: 1
@@ -1308,15 +1401,15 @@ var styles16 = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
-    gap: 8
+    gap: s(8)
   },
   triggerIcon: {
-    marginRight: 6,
+    marginRight: s(6),
     alignItems: "center",
     justifyContent: "center"
   },
   triggerLabel: {
-    fontSize: 15,
+    fontSize: ms(15),
     fontWeight: "400"
   },
   activeTriggerLabel: {
@@ -1329,53 +1422,51 @@ function AccordionItemComponent({
   onToggle
 }) {
   const { colors } = useTheme();
-  const animatedHeight = useSharedValue(0);
-  const animatedRotation = useSharedValue(0);
-  const contentHeight = useRef(0);
-  const scale = useRef(new Animated.Value(1)).current;
-  const toggle = (open) => {
-    const easing = open ? Easing$1.out(Easing$1.ease) : Easing$1.in(Easing$1.ease);
-    animatedHeight.value = withTiming(open ? contentHeight.current : 0, { duration: 220, easing });
-    animatedRotation.value = withTiming(open ? 1 : 0, { duration: 220, easing });
-  };
-  React23.useEffect(() => {
-    toggle(isOpen);
+  const isExpanded = useSharedValue(isOpen);
+  const height = useSharedValue(0);
+  React24.useEffect(() => {
+    isExpanded.value = isOpen;
   }, [isOpen]);
-  const onLayout = (e) => {
-    if (contentHeight.current === 0) {
-      contentHeight.current = e.nativeEvent.layout.height;
-      if (isOpen) animatedHeight.value = contentHeight.current;
-    }
-  };
-  const heightStyle = useAnimatedStyle(() => ({
-    height: animatedHeight.value,
+  const derivedHeight = useDerivedValue(
+    () => withTiming(height.value * Number(isExpanded.value), {
+      duration: 220,
+      easing: isExpanded.value ? Easing$1.out(Easing$1.ease) : Easing$1.in(Easing$1.ease)
+    })
+  );
+  const derivedRotation = useDerivedValue(
+    () => withTiming(isExpanded.value ? 1 : 0, {
+      duration: 220,
+      easing: isExpanded.value ? Easing$1.out(Easing$1.ease) : Easing$1.in(Easing$1.ease)
+    })
+  );
+  const bodyStyle = useAnimatedStyle(() => ({
+    height: derivedHeight.value,
     overflow: "hidden"
   }));
   const rotationStyle = useAnimatedStyle(() => ({
-    transform: [{ rotate: `${animatedRotation.value * 180}deg` }]
+    transform: [{ rotate: `${derivedRotation.value * 180}deg` }]
   }));
-  const handlePressIn = () => {
-    Animated.spring(scale, { toValue: 0.95, useNativeDriver: true, speed: 40, bounciness: 0 }).start();
-  };
-  const handlePressOut = () => {
-    Animated.spring(scale, { toValue: 1, useNativeDriver: true, speed: 40, bounciness: 4 }).start();
-  };
-  return /* @__PURE__ */ React23.createElement(View, { style: [styles17.item, { borderBottomColor: colors.border }] }, /* @__PURE__ */ React23.createElement(Animated.View, { style: { transform: [{ scale }] } }, /* @__PURE__ */ React23.createElement(
-    TouchableOpacity,
+  return /* @__PURE__ */ React24.createElement(View, { style: [styles17.item, { borderBottomColor: colors.border }] }, /* @__PURE__ */ React24.createElement(
+    Pressable,
     {
-      style: styles17.trigger,
+      style: ({ pressed }) => [styles17.trigger, { opacity: pressed ? 0.6 : 1 }],
       onPress: () => {
-        Haptics12.selectionAsync();
+        selectionAsync();
         onToggle();
-      },
-      onPressIn: handlePressIn,
-      onPressOut: handlePressOut,
-      activeOpacity: 1,
-      touchSoundDisabled: true
+      }
     },
-    /* @__PURE__ */ React23.createElement(Text, { style: [styles17.triggerText, { color: colors.foreground }] }, item.trigger),
-    /* @__PURE__ */ React23.createElement(ReanimatedAnimated.View, { style: [styles17.chevron, rotationStyle] }, /* @__PURE__ */ React23.createElement(Entypo, { name: "chevron-down", size: 20, color: colors.foreground }))
-  )), /* @__PURE__ */ React23.createElement(ReanimatedAnimated.View, { style: heightStyle }, /* @__PURE__ */ React23.createElement(View, { style: styles17.content, onLayout }, item.content)));
+    /* @__PURE__ */ React24.createElement(Text, { style: [styles17.triggerText, { color: colors.foreground }] }, item.trigger),
+    /* @__PURE__ */ React24.createElement(Animated10.View, { style: [styles17.chevron, rotationStyle] }, /* @__PURE__ */ React24.createElement(Entypo$1, { name: "chevron-down", size: 20, color: colors.foreground }))
+  ), /* @__PURE__ */ React24.createElement(Animated10.View, { style: bodyStyle }, /* @__PURE__ */ React24.createElement(
+    View,
+    {
+      style: styles17.content,
+      onLayout: (e) => {
+        height.value = e.nativeEvent.layout.height;
+      }
+    },
+    item.content
+  )));
 }
 function Accordion({ items, type = "single", defaultValue, style }) {
   const [openValues, setOpenValues] = useState(() => {
@@ -1391,7 +1482,7 @@ function Accordion({ items, type = "single", defaultValue, style }) {
       );
     }
   };
-  return /* @__PURE__ */ React23.createElement(View, { style }, items.map((item) => /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React24.createElement(View, { style }, items.map((item) => /* @__PURE__ */ React24.createElement(
     AccordionItemComponent,
     {
       key: item.value,
@@ -1409,18 +1500,20 @@ var styles17 = StyleSheet.create({
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
-    paddingVertical: 20
+    paddingVertical: vs(20)
   },
   triggerText: {
-    fontSize: 17,
+    fontSize: ms(17),
     fontWeight: "500",
     flex: 1
   },
   chevron: {
-    marginLeft: 8
+    marginLeft: s(8)
   },
+  // position:'absolute' is the key — the inner View escapes the animated wrapper's
+  // clipped height so onLayout always reports the true content height.
   content: {
-    paddingBottom: 20,
+    paddingBottom: vs(20),
     position: "absolute",
     width: "100%"
   }
@@ -1444,11 +1537,11 @@ function Slider({
   const handleValueChange = (v) => {
     if (step && v !== lastSteppedValue.current) {
       lastSteppedValue.current = v;
-      Haptics12.selectionAsync();
+      selectionAsync();
     }
     onValueChange?.(v);
   };
-  return /* @__PURE__ */ React23.createElement(View, { style: [styles18.wrapper, style], accessibilityLabel }, label || showValue ? /* @__PURE__ */ React23.createElement(View, { style: styles18.header }, label ? /* @__PURE__ */ React23.createElement(Text, { style: [styles18.label, { color: colors.foreground }], allowFontScaling: true }, label) : null, showValue ? /* @__PURE__ */ React23.createElement(Text, { style: [styles18.valueText, { color: colors.mutedForeground }], allowFontScaling: true }, formatValue2(value)) : null) : null, /* @__PURE__ */ React23.createElement(View, { style: disabled ? styles18.disabled : void 0 }, /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React24.createElement(View, { style: [styles18.wrapper, style], accessibilityLabel }, label || showValue ? /* @__PURE__ */ React24.createElement(View, { style: styles18.header }, label ? /* @__PURE__ */ React24.createElement(Text, { style: [styles18.label, { color: colors.foreground }], allowFontScaling: true }, label) : null, showValue ? /* @__PURE__ */ React24.createElement(Text, { style: [styles18.valueText, { color: colors.mutedForeground }], allowFontScaling: true }, formatValue2(value)) : null) : null, /* @__PURE__ */ React24.createElement(View, { style: disabled ? styles18.disabled : void 0 }, /* @__PURE__ */ React24.createElement(
     RNSlider,
     {
       value,
@@ -1468,7 +1561,7 @@ function Slider({
 }
 var styles18 = StyleSheet.create({
   wrapper: {
-    gap: 8
+    gap: vs(8)
   },
   header: {
     flexDirection: "row",
@@ -1476,16 +1569,16 @@ var styles18 = StyleSheet.create({
     alignItems: "center"
   },
   label: {
-    fontSize: 15,
+    fontSize: ms(15),
     fontWeight: "500"
   },
   valueText: {
-    fontSize: 14,
+    fontSize: ms(14),
     fontWeight: "500"
   },
   slider: {
     width: "100%",
-    height: 40
+    height: vs(40)
   },
   disabled: {
     opacity: 0.45
@@ -1504,13 +1597,13 @@ function Sheet({
   const ref = useRef(null);
   useEffect(() => {
     if (open) {
-      Haptics12.impactAsync(Haptics12.ImpactFeedbackStyle.Light);
+      impactLight();
       ref.current?.present();
     } else {
       ref.current?.dismiss();
     }
   }, [open]);
-  const renderBackdrop = (props) => /* @__PURE__ */ React23.createElement(
+  const renderBackdrop = (props) => /* @__PURE__ */ React24.createElement(
     BottomSheetBackdrop,
     {
       ...props,
@@ -1519,7 +1612,7 @@ function Sheet({
       pressBehavior: "close"
     }
   );
-  return /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React24.createElement(
     BottomSheetModal,
     {
       ref,
@@ -1530,39 +1623,39 @@ function Sheet({
       handleIndicatorStyle: [styles19.handle, { backgroundColor: colors.border }],
       enablePanDownToClose: true
     },
-    /* @__PURE__ */ React23.createElement(BottomSheetView, { style: [styles19.content, style] }, title || description ? /* @__PURE__ */ React23.createElement(View, { style: styles19.header }, title ? /* @__PURE__ */ React23.createElement(Text, { style: [styles19.title, { color: colors.cardForeground }] }, title) : null, description ? /* @__PURE__ */ React23.createElement(Text, { style: [styles19.description, { color: colors.mutedForeground }] }, description) : null) : null, children)
+    /* @__PURE__ */ React24.createElement(BottomSheetView, { style: [styles19.content, style] }, title || description ? /* @__PURE__ */ React24.createElement(View, { style: styles19.header }, title ? /* @__PURE__ */ React24.createElement(Text, { style: [styles19.title, { color: colors.cardForeground }] }, title) : null, description ? /* @__PURE__ */ React24.createElement(Text, { style: [styles19.description, { color: colors.mutedForeground }] }, description) : null) : null, children)
   );
 }
 var styles19 = StyleSheet.create({
   background: {
-    borderTopLeftRadius: 16,
-    borderTopRightRadius: 16
+    borderTopLeftRadius: ms(16),
+    borderTopRightRadius: ms(16)
   },
   handle: {
-    width: 36,
-    height: 4,
-    borderRadius: 2
+    width: s(36),
+    height: vs(4),
+    borderRadius: ms(2)
   },
   content: {
-    paddingHorizontal: 24,
-    paddingBottom: 32
+    paddingHorizontal: s(24),
+    paddingBottom: vs(32)
   },
   header: {
-    gap: 8,
-    marginBottom: 16
+    gap: vs(8),
+    marginBottom: vs(16)
   },
   title: {
-    fontSize: 18,
+    fontSize: ms(18),
     fontWeight: "600"
   },
   description: {
-    fontSize: 14,
-    lineHeight: 20
+    fontSize: ms(14),
+    lineHeight: mvs(20)
   }
 });
 var isIOS = Platform.OS === "ios";
 var isAndroid = Platform.OS === "android";
-var isWeb = Platform.OS === "web";
+var isWeb2 = Platform.OS === "web";
 function Select({
   options,
   value,
@@ -1574,21 +1667,21 @@ function Select({
   style
 }) {
   const { colors } = useTheme();
-  const scale = useRef(new Animated.Value(1)).current;
+  const scale2 = useRef(new Animated.Value(1)).current;
   const [pickerVisible, setPickerVisible] = useState(false);
   const [pendingValue, setPendingValue] = useState(value);
   const pickerRef = useRef(null);
   const selected = options.find((o) => o.value === value);
   const handlePressIn = () => {
     if (disabled) return;
-    Animated.spring(scale, { toValue: 0.95, useNativeDriver: true, speed: 40, bounciness: 0 }).start();
+    Animated.spring(scale2, { toValue: 0.95, useNativeDriver: true, speed: 40, bounciness: 0 }).start();
   };
   const handlePressOut = () => {
-    Animated.spring(scale, { toValue: 1, useNativeDriver: true, speed: 40, bounciness: 4 }).start();
+    Animated.spring(scale2, { toValue: 1, useNativeDriver: true, speed: 40, bounciness: 4 }).start();
   };
   const handleOpen = () => {
     if (disabled) return;
-    Haptics12.selectionAsync();
+    selectionAsync();
     if (isIOS) {
       setPendingValue(value);
       setPickerVisible(true);
@@ -1601,12 +1694,12 @@ function Select({
   };
   const handleConfirm = () => {
     if (pendingValue !== void 0 && pendingValue !== "") {
-      Haptics12.selectionAsync();
+      selectionAsync();
       onValueChange?.(pendingValue);
     }
     setPickerVisible(false);
   };
-  return /* @__PURE__ */ React23.createElement(View, { style: [styles20.container, style] }, label ? /* @__PURE__ */ React23.createElement(Text, { style: [styles20.label, { color: colors.foreground }] }, label) : null, !isWeb ? /* @__PURE__ */ React23.createElement(Animated.View, { style: { transform: [{ scale }], opacity: disabled ? 0.45 : 1 } }, /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React24.createElement(View, { style: [styles20.container, style] }, label ? /* @__PURE__ */ React24.createElement(Text, { style: [styles20.label, { color: colors.foreground }] }, label) : null, !isWeb2 ? /* @__PURE__ */ React24.createElement(Animated.View, { style: { transform: [{ scale: scale2 }], opacity: disabled ? 0.45 : 1 } }, /* @__PURE__ */ React24.createElement(
     TouchableOpacity,
     {
       style: [
@@ -1622,7 +1715,7 @@ function Select({
       activeOpacity: 1,
       touchSoundDisabled: true
     },
-    /* @__PURE__ */ React23.createElement(
+    /* @__PURE__ */ React24.createElement(
       Text,
       {
         style: [
@@ -1634,8 +1727,8 @@ function Select({
       },
       selected?.label ?? placeholder
     ),
-    /* @__PURE__ */ React23.createElement(Entypo, { name: "chevron-with-circle-down", size: 20, color: colors.mutedForeground })
-  )) : null, isIOS ? /* @__PURE__ */ React23.createElement(
+    /* @__PURE__ */ React24.createElement(Entypo$1, { name: "chevron-with-circle-down", size: 20, color: colors.mutedForeground })
+  )) : null, isIOS ? /* @__PURE__ */ React24.createElement(
     Modal,
     {
       visible: pickerVisible,
@@ -1643,16 +1736,16 @@ function Select({
       animationType: "slide",
       onRequestClose: handleDismiss
     },
-    /* @__PURE__ */ React23.createElement(TouchableOpacity, { style: styles20.iosBackdrop, activeOpacity: 1, onPress: handleDismiss }),
-    /* @__PURE__ */ React23.createElement(View, { style: [styles20.iosSheet, { backgroundColor: colors.card }] }, /* @__PURE__ */ React23.createElement(View, { style: [styles20.iosToolbar, { borderBottomColor: colors.border }] }, label ? /* @__PURE__ */ React23.createElement(Text, { style: [styles20.iosToolbarTitle, { color: colors.foreground }], allowFontScaling: true }, label) : /* @__PURE__ */ React23.createElement(View, null), /* @__PURE__ */ React23.createElement(TouchableOpacity, { onPress: handleConfirm, style: styles20.iosDoneBtn, hitSlop: { top: 8, bottom: 8, left: 8, right: 8 } }, /* @__PURE__ */ React23.createElement(Text, { style: [styles20.iosDoneBtnText, { color: colors.primary }], allowFontScaling: true }, "Done"))), /* @__PURE__ */ React23.createElement(
+    /* @__PURE__ */ React24.createElement(TouchableOpacity, { style: styles20.iosBackdrop, activeOpacity: 1, onPress: handleDismiss }),
+    /* @__PURE__ */ React24.createElement(View, { style: [styles20.iosSheet, { backgroundColor: colors.card }] }, /* @__PURE__ */ React24.createElement(View, { style: [styles20.iosToolbar, { borderBottomColor: colors.border }] }, label ? /* @__PURE__ */ React24.createElement(Text, { style: [styles20.iosToolbarTitle, { color: colors.foreground }], allowFontScaling: true }, label) : /* @__PURE__ */ React24.createElement(View, null), /* @__PURE__ */ React24.createElement(TouchableOpacity, { onPress: handleConfirm, style: styles20.iosDoneBtn, hitSlop: { top: 8, bottom: 8, left: 8, right: 8 } }, /* @__PURE__ */ React24.createElement(Text, { style: [styles20.iosDoneBtnText, { color: colors.primary }], allowFontScaling: true }, "Done"))), /* @__PURE__ */ React24.createElement(
       Picker,
       {
         selectedValue: pendingValue ?? "",
         onValueChange: (val) => setPendingValue(val),
         itemStyle: { color: colors.foreground }
       },
-      !value ? /* @__PURE__ */ React23.createElement(Picker.Item, { label: placeholder, value: "", color: colors.mutedForeground, enabled: false }) : null,
-      options.map((o) => /* @__PURE__ */ React23.createElement(
+      !value ? /* @__PURE__ */ React24.createElement(Picker.Item, { label: placeholder, value: "", color: colors.mutedForeground, enabled: false }) : null,
+      options.map((o) => /* @__PURE__ */ React24.createElement(
         Picker.Item,
         {
           key: o.value,
@@ -1663,14 +1756,14 @@ function Select({
         }
       ))
     ))
-  ) : null, isAndroid ? /* @__PURE__ */ React23.createElement(
+  ) : null, isAndroid ? /* @__PURE__ */ React24.createElement(
     Picker,
     {
       ref: pickerRef,
       selectedValue: value ?? "",
       onValueChange: (val) => {
         if (val !== "") {
-          Haptics12.selectionAsync();
+          selectionAsync();
           onValueChange?.(val);
         }
       },
@@ -1679,8 +1772,8 @@ function Select({
       prompt: label,
       style: styles20.androidHiddenPicker
     },
-    !value ? /* @__PURE__ */ React23.createElement(Picker.Item, { label: placeholder, value: "", enabled: false }) : null,
-    options.map((o) => /* @__PURE__ */ React23.createElement(
+    !value ? /* @__PURE__ */ React24.createElement(Picker.Item, { label: placeholder, value: "", enabled: false }) : null,
+    options.map((o) => /* @__PURE__ */ React24.createElement(
       Picker.Item,
       {
         key: o.value,
@@ -1689,7 +1782,7 @@ function Select({
         enabled: !o.disabled
       }
     ))
-  ) : null, isWeb ? /* @__PURE__ */ React23.createElement(
+  ) : null, isWeb2 ? /* @__PURE__ */ React24.createElement(
     Picker,
     {
       selectedValue: value ?? "",
@@ -1709,8 +1802,8 @@ function Select({
         }
       ]
     },
-    /* @__PURE__ */ React23.createElement(Picker.Item, { label: placeholder, value: "", enabled: false }),
-    options.map((o) => /* @__PURE__ */ React23.createElement(
+    /* @__PURE__ */ React24.createElement(Picker.Item, { label: placeholder, value: "", enabled: false }),
+    options.map((o) => /* @__PURE__ */ React24.createElement(
       Picker.Item,
       {
         key: o.value,
@@ -1719,14 +1812,14 @@ function Select({
         enabled: !o.disabled
       }
     ))
-  ) : null, error ? /* @__PURE__ */ React23.createElement(Text, { style: [styles20.helperText, { color: colors.destructive }] }, error) : null);
+  ) : null, error ? /* @__PURE__ */ React24.createElement(Text, { style: [styles20.helperText, { color: colors.destructive }] }, error) : null);
 }
 var styles20 = StyleSheet.create({
   container: {
-    gap: 8
+    gap: vs(8)
   },
   label: {
-    fontSize: 15,
+    fontSize: ms(15),
     fontWeight: "500"
   },
   trigger: {
@@ -1734,9 +1827,9 @@ var styles20 = StyleSheet.create({
     alignItems: "center",
     justifyContent: "space-between",
     borderWidth: 1.5,
-    borderRadius: 8,
-    paddingHorizontal: 16,
-    paddingVertical: 14,
+    borderRadius: ms(8),
+    paddingHorizontal: s(16),
+    paddingVertical: vs(14),
     shadowColor: "#000",
     shadowOffset: { width: 0, height: 1 },
     shadowOpacity: 0.04,
@@ -1744,41 +1837,41 @@ var styles20 = StyleSheet.create({
     elevation: 1
   },
   triggerText: {
-    fontSize: 17,
+    fontSize: ms(17),
     flex: 1
   },
   chevron: {
-    marginLeft: 8
+    marginLeft: s(8)
   },
   helperText: {
-    fontSize: 13
+    fontSize: ms(13)
   },
   iosBackdrop: {
     flex: 1,
     backgroundColor: "rgba(0,0,0,0.4)"
   },
   iosSheet: {
-    borderTopLeftRadius: 16,
-    borderTopRightRadius: 16,
-    paddingBottom: 32
+    borderTopLeftRadius: ms(16),
+    borderTopRightRadius: ms(16),
+    paddingBottom: vs(32)
   },
   iosToolbar: {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
-    paddingHorizontal: 16,
-    paddingVertical: 12,
+    paddingHorizontal: s(16),
+    paddingVertical: vs(12),
     borderBottomWidth: 1
   },
   iosToolbarTitle: {
-    fontSize: 17,
+    fontSize: ms(17),
     fontWeight: "600"
   },
   iosDoneBtn: {
-    padding: 4
+    padding: s(4)
   },
   iosDoneBtnText: {
-    fontSize: 17,
+    fontSize: ms(17),
     fontWeight: "600"
   },
   androidHiddenPicker: {
@@ -1788,10 +1881,10 @@ var styles20 = StyleSheet.create({
   },
   webPicker: {
     borderWidth: 1.5,
-    borderRadius: 8,
-    paddingHorizontal: 16,
-    paddingVertical: 14,
-    fontSize: 17
+    borderRadius: ms(8),
+    paddingHorizontal: s(16),
+    paddingVertical: vs(14),
+    fontSize: ms(17)
   }
 });
 var ToastContext = createContext({
@@ -1849,9 +1942,9 @@ function ToastNotification({ item, onDismiss }) {
     destructive: colors.destructiveForeground,
     success: colors.successForeground
   }[item.variant ?? "default"];
-  const defaultIcon = item.variant === "success" ? /* @__PURE__ */ React23.createElement(FontAwesome5, { name: "check-circle", size: 22, color: textColor }) : item.variant === "destructive" ? /* @__PURE__ */ React23.createElement(MaterialIcons, { name: "error-outline", size: 24, color: textColor }) : /* @__PURE__ */ React23.createElement(Entypo, { name: "info-with-circle", size: 22, color: textColor });
-  const leftIcon = item.icon ?? defaultIcon;
-  return /* @__PURE__ */ React23.createElement(GestureDetector, { gesture: panGesture }, /* @__PURE__ */ React23.createElement(ReanimatedAnimated.View, { style: [styles21.toast, { backgroundColor: bgColor }, animatedStyle] }, /* @__PURE__ */ React23.createElement(View, { style: styles21.leftIconContainer }, leftIcon), /* @__PURE__ */ React23.createElement(View, { style: styles21.toastContent }, item.title ? /* @__PURE__ */ React23.createElement(Text, { style: [styles21.toastTitle, { color: textColor }] }, item.title) : null, item.description ? /* @__PURE__ */ React23.createElement(Text, { style: [styles21.toastDescription, { color: textColor, opacity: 0.85 }] }, item.description) : null), /* @__PURE__ */ React23.createElement(TouchableOpacity, { onPress: onDismiss, style: styles21.dismissButton, touchSoundDisabled: true }, /* @__PURE__ */ React23.createElement(AntDesign, { name: "close-circle", size: 18, color: textColor }))));
+  const defaultIcon = item.variant === "success" ? /* @__PURE__ */ React24.createElement(FontAwesome5$1, { name: "check-circle", size: 22, color: textColor }) : item.variant === "destructive" ? /* @__PURE__ */ React24.createElement(MaterialIcons$1, { name: "error-outline", size: 24, color: textColor }) : /* @__PURE__ */ React24.createElement(Entypo$1, { name: "info-with-circle", size: 22, color: textColor });
+  const leftIcon = item.iconName ? renderIcon(item.iconName, 22, item.iconColor ?? textColor) : item.icon ?? defaultIcon;
+  return /* @__PURE__ */ React24.createElement(GestureDetector, { gesture: panGesture }, /* @__PURE__ */ React24.createElement(Animated10.View, { style: [styles21.toast, { backgroundColor: bgColor }, animatedStyle] }, /* @__PURE__ */ React24.createElement(View, { style: styles21.leftIconContainer }, leftIcon), /* @__PURE__ */ React24.createElement(View, { style: styles21.toastContent }, item.title ? /* @__PURE__ */ React24.createElement(Text, { style: [styles21.toastTitle, { color: textColor }] }, item.title) : null, item.description ? /* @__PURE__ */ React24.createElement(Text, { style: [styles21.toastDescription, { color: textColor, opacity: 0.85 }] }, item.description) : null), /* @__PURE__ */ React24.createElement(TouchableOpacity, { onPress: onDismiss, style: styles21.dismissButton, touchSoundDisabled: true }, /* @__PURE__ */ React24.createElement(AntDesign$1, { name: "close-circle", size: 18, color: textColor }))));
 }
 function ToastProvider({ children }) {
   const [toasts, setToasts] = useState([]);
@@ -1859,39 +1952,39 @@ function ToastProvider({ children }) {
   const toast = useCallback((item) => {
     const id = Math.random().toString(36).slice(2);
     if (item.variant === "success") {
-      Haptics12.notificationAsync(Haptics12.NotificationFeedbackType.Success);
+      notificationSuccess();
     } else if (item.variant === "destructive") {
-      Haptics12.notificationAsync(Haptics12.NotificationFeedbackType.Error);
+      notificationError();
     } else {
-      Haptics12.impactAsync(Haptics12.ImpactFeedbackStyle.Light);
+      impactLight();
     }
     setToasts((prev) => [{ ...item, id }, ...prev].slice(0, 3));
   }, []);
   const dismiss = useCallback((id) => {
     setToasts((prev) => prev.filter((t) => t.id !== id));
   }, []);
-  return /* @__PURE__ */ React23.createElement(ToastContext.Provider, { value: { toast, dismiss } }, children, /* @__PURE__ */ React23.createElement(View, { style: [styles21.container, Platform.OS === "web" && styles21.containerWeb, { top: insets.top + 8 }], pointerEvents: "box-none" }, toasts.map((item) => /* @__PURE__ */ React23.createElement(ToastNotification, { key: item.id, item, onDismiss: () => dismiss(item.id) }))));
+  return /* @__PURE__ */ React24.createElement(ToastContext.Provider, { value: { toast, dismiss } }, children, /* @__PURE__ */ React24.createElement(View, { style: [styles21.container, Platform.OS === "web" && styles21.containerWeb, { top: insets.top + 8 }], pointerEvents: "box-none" }, toasts.map((item) => /* @__PURE__ */ React24.createElement(ToastNotification, { key: item.id, item, onDismiss: () => dismiss(item.id) }))));
 }
 var styles21 = StyleSheet.create({
   container: {
     position: "absolute",
-    left: 16,
-    right: 16,
-    gap: 8,
+    left: s(16),
+    right: s(16),
+    gap: vs(8),
     zIndex: 9999
   },
   containerWeb: {
     left: void 0,
     right: void 0,
     alignSelf: "center",
-    width: 400
+    width: s(400)
   },
   toast: {
     flexDirection: "row",
     alignItems: "center",
-    borderRadius: 16,
-    paddingHorizontal: 20,
-    paddingVertical: 14,
+    borderRadius: ms(16),
+    paddingHorizontal: s(20),
+    paddingVertical: vs(14),
     shadowColor: "#000",
     shadowOffset: { width: 0, height: 4 },
     shadowOpacity: 0.15,
@@ -1900,24 +1993,24 @@ var styles21 = StyleSheet.create({
   },
   toastContent: {
     flex: 1,
-    gap: 4
+    gap: vs(4)
   },
   leftIconContainer: {
-    width: 40,
+    width: s(40),
     alignItems: "center",
     justifyContent: "center",
-    marginRight: 8
+    marginRight: s(8)
   },
   toastTitle: {
-    fontSize: 15,
+    fontSize: ms(15),
     fontWeight: "600"
   },
   toastDescription: {
-    fontSize: 14
+    fontSize: ms(14)
   },
   dismissButton: {
-    padding: 8,
-    marginLeft: 4
+    padding: s(8),
+    marginLeft: s(4)
   }
 });
 function formatCurrency(raw, separator) {
@@ -1949,8 +2042,8 @@ function CurrencyInput({
     const raw = parseFloat(formatted.replace(separatorRegex, "") || "0");
     onChangeValue?.(isNaN(raw) ? 0 : raw);
   };
-  const inputStyle = size === "large" ? { fontSize: 36 } : {};
-  return /* @__PURE__ */ React23.createElement(
+  const inputStyle = size === "large" ? { fontSize: ms(36) } : {};
+  return /* @__PURE__ */ React24.createElement(
     Input,
     {
       value,
@@ -1981,21 +2074,25 @@ function formatValue(value, prefix, showDecimals) {
 function CurrencyDisplay({ value, prefix = "$", showDecimals = false, textColor, style }) {
   const { colors } = useTheme();
   const formatted = formatValue(value, prefix, showDecimals);
-  return /* @__PURE__ */ React23.createElement(View, { style: [styles22.container, style] }, /* @__PURE__ */ React23.createElement(Text, { style: [styles22.amount, { color: textColor ?? colors.foreground }], allowFontScaling: true }, formatted));
+  return /* @__PURE__ */ React24.createElement(View, { style: [styles22.container, style] }, /* @__PURE__ */ React24.createElement(Text, { style: [styles22.amount, { color: textColor ?? colors.foreground }], allowFontScaling: true }, formatted));
 }
 var styles22 = StyleSheet.create({
   container: {},
   amount: {
-    fontSize: 56,
+    fontSize: ms(56),
     fontWeight: "700"
   }
 });
-var nativeDriver4 = Platform.OS !== "web";
+var nativeDriver7 = Platform.OS !== "web";
 function ListItem({
   leftRender,
   rightRender,
   trailing,
   icon,
+  leftIcon,
+  rightIcon,
+  leftIconColor,
+  rightIconColor,
   title,
   subtitle,
   caption,
@@ -2010,30 +2107,30 @@ function ListItem({
   captionStyle
 }) {
   const { colors } = useTheme();
-  const scale = useRef(new Animated.Value(1)).current;
+  const scale2 = useRef(new Animated.Value(1)).current;
   const handlePressIn = () => {
     if (!onPress || disabled) return;
-    Animated.spring(scale, {
+    Animated.spring(scale2, {
       toValue: 0.97,
-      useNativeDriver: nativeDriver4,
+      useNativeDriver: nativeDriver7,
       speed: 40,
       bounciness: 0
     }).start();
   };
   const handlePressOut = () => {
-    Animated.spring(scale, {
+    Animated.spring(scale2, {
       toValue: 1,
-      useNativeDriver: nativeDriver4,
+      useNativeDriver: nativeDriver7,
       speed: 40,
       bounciness: 4
     }).start();
   };
   const handlePress = () => {
-    Haptics12.selectionAsync();
+    selectionAsync();
     onPress?.();
   };
-  const effectiveLeft = leftRender ?? icon;
-  const effectiveRight = rightRender ?? trailing;
+  const effectiveLeft = leftIcon ? renderIcon(leftIcon, 24, leftIconColor ?? colors.foreground) : leftRender ?? icon;
+  const effectiveRight = rightIcon ? renderIcon(rightIcon, 24, rightIconColor ?? colors.mutedForeground) : rightRender ?? trailing;
   const cardStyle = variant === "card" ? {
     backgroundColor: colors.card,
     borderRadius: 12,
@@ -2045,7 +2142,7 @@ function ListItem({
     shadowRadius: 6,
     elevation: 2
   } : {};
-  return /* @__PURE__ */ React23.createElement(Animated.View, { style: [{ transform: [{ scale }] }, disabled && styles23.disabled] }, /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React24.createElement(Animated.View, { style: [{ transform: [{ scale: scale2 }] }, disabled && styles23.disabled] }, /* @__PURE__ */ React24.createElement(
     TouchableOpacity,
     {
       style: [styles23.container, cardStyle, style],
@@ -2056,8 +2153,8 @@ function ListItem({
       activeOpacity: 1,
       touchSoundDisabled: true
     },
-    effectiveLeft ? /* @__PURE__ */ React23.createElement(View, { style: styles23.leftContainer }, effectiveLeft) : null,
-    /* @__PURE__ */ React23.createElement(View, { style: styles23.content }, /* @__PURE__ */ React23.createElement(
+    effectiveLeft ? /* @__PURE__ */ React24.createElement(View, { style: styles23.leftContainer }, effectiveLeft) : null,
+    /* @__PURE__ */ React24.createElement(View, { style: styles23.content }, /* @__PURE__ */ React24.createElement(
       Text,
       {
         style: [styles23.title, { color: colors.foreground }, titleStyle],
@@ -2065,7 +2162,7 @@ function ListItem({
         allowFontScaling: true
       },
       title
-    ), subtitle ? /* @__PURE__ */ React23.createElement(
+    ), subtitle ? /* @__PURE__ */ React24.createElement(
       Text,
       {
         style: [styles23.subtitle, { color: colors.mutedForeground }, subtitleStyle],
@@ -2073,7 +2170,7 @@ function ListItem({
         allowFontScaling: true
       },
       subtitle
-    ) : null, caption ? /* @__PURE__ */ React23.createElement(
+    ) : null, caption ? /* @__PURE__ */ React24.createElement(
       Text,
       {
         style: [styles23.caption, { color: colors.mutedForeground }, captionStyle],
@@ -2082,20 +2179,20 @@ function ListItem({
       },
       caption
     ) : null),
-    effectiveRight !== void 0 ? /* @__PURE__ */ React23.createElement(View, { style: styles23.rightContainer }, typeof effectiveRight === "string" ? /* @__PURE__ */ React23.createElement(
+    effectiveRight !== void 0 ? /* @__PURE__ */ React24.createElement(View, { style: styles23.rightContainer }, typeof effectiveRight === "string" ? /* @__PURE__ */ React24.createElement(
       Text,
       {
         style: [styles23.rightText, { color: colors.mutedForeground }],
         allowFontScaling: true
       },
       effectiveRight
-    ) : effectiveRight) : showChevron ? /* @__PURE__ */ React23.createElement(Entypo, { name: "chevron-with-circle-right", size: 20, color: colors.mutedForeground }) : null
-  ), showSeparator ? /* @__PURE__ */ React23.createElement(
+    ) : effectiveRight) : showChevron ? /* @__PURE__ */ React24.createElement(Entypo$1, { name: "chevron-with-circle-right", size: 20, color: colors.mutedForeground }) : null
+  ), showSeparator ? /* @__PURE__ */ React24.createElement(
     View,
     {
       style: [
         styles23.separator,
-        { backgroundColor: colors.border, marginLeft: effectiveLeft ? 16 + 44 + 12 : 16 }
+        { backgroundColor: colors.border, marginLeft: effectiveLeft ? s(16) + s(44) + s(12) : s(16) }
       ]
     }
   ) : null);
@@ -2104,61 +2201,61 @@ var styles23 = StyleSheet.create({
   container: {
     flexDirection: "row",
     alignItems: "center",
-    paddingHorizontal: 16,
-    paddingVertical: 14,
-    gap: 12
+    paddingHorizontal: s(16),
+    paddingVertical: vs(14),
+    gap: s(12)
   },
   leftContainer: {
-    width: 44,
-    height: 44,
+    width: s(44),
+    height: s(44),
     alignItems: "center",
     justifyContent: "center",
     flexShrink: 0
   },
   content: {
     flex: 1,
-    gap: 4
+    gap: vs(4)
   },
   title: {
-    fontSize: 17,
+    fontSize: ms(17),
     fontWeight: "500",
-    lineHeight: 24
+    lineHeight: mvs(24)
   },
   subtitle: {
-    fontSize: 14,
+    fontSize: ms(14),
     fontWeight: "400",
-    lineHeight: 20
+    lineHeight: mvs(20)
   },
   caption: {
-    fontSize: 12,
+    fontSize: ms(12),
     fontWeight: "400",
-    lineHeight: 16,
+    lineHeight: mvs(16),
     opacity: 0.7
   },
   rightContainer: {
     alignItems: "flex-end",
     justifyContent: "center",
     flexShrink: 0,
-    maxWidth: 160
+    maxWidth: s(160)
   },
   rightText: {
-    fontSize: 15
+    fontSize: ms(15)
   },
   chevron: {
-    marginLeft: 4
+    marginLeft: s(4)
   },
   separator: {
     height: StyleSheet.hairlineWidth,
-    marginRight: 16
+    marginRight: s(16)
   },
   disabled: {
     opacity: 0.45
   }
 });
-var nativeDriver5 = Platform.OS !== "web";
+var nativeDriver8 = Platform.OS !== "web";
 function Chip({ label, selected = false, onPress, style }) {
   const { colors } = useTheme();
-  const scale = useRef(new Animated.Value(1)).current;
+  const scale2 = useRef(new Animated.Value(1)).current;
   const pressAnim = useRef(new Animated.Value(selected ? 1 : 0)).current;
   useEffect(() => {
     Animated.timing(pressAnim, {
@@ -2169,23 +2266,23 @@ function Chip({ label, selected = false, onPress, style }) {
     }).start();
   }, [selected, pressAnim]);
   const handlePressIn = () => {
-    Animated.spring(scale, {
+    Animated.spring(scale2, {
       toValue: 0.95,
-      useNativeDriver: nativeDriver5,
+      useNativeDriver: nativeDriver8,
       speed: 40,
       bounciness: 0
     }).start();
   };
   const handlePressOut = () => {
-    Animated.spring(scale, {
+    Animated.spring(scale2, {
       toValue: 1,
-      useNativeDriver: nativeDriver5,
+      useNativeDriver: nativeDriver8,
       speed: 40,
       bounciness: 4
     }).start();
   };
   const handlePress = () => {
-    Haptics12.selectionAsync();
+    selectionAsync();
     onPress?.();
   };
   const backgroundColor = pressAnim.interpolate({
@@ -2200,7 +2297,7 @@ function Chip({ label, selected = false, onPress, style }) {
     inputRange: [0, 1],
     outputRange: [colors.border, colors.primary]
   });
-  return /* @__PURE__ */ React23.createElement(Animated.View, { style: [styles24.wrapper, { transform: [{ scale }] }, style] }, /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React24.createElement(Animated.View, { style: [styles24.wrapper, { transform: [{ scale: scale2 }] }, style] }, /* @__PURE__ */ React24.createElement(
     TouchableOpacity,
     {
       onPress: handlePress,
@@ -2209,7 +2306,7 @@ function Chip({ label, selected = false, onPress, style }) {
       activeOpacity: 1,
       touchSoundDisabled: true
     },
-    /* @__PURE__ */ React23.createElement(Animated.View, { style: [styles24.chip, { backgroundColor, borderColor }] }, /* @__PURE__ */ React23.createElement(Animated.Text, { style: [styles24.label, { color: textColor }], allowFontScaling: true }, label))
+    /* @__PURE__ */ React24.createElement(Animated.View, { style: [styles24.chip, { backgroundColor, borderColor }] }, /* @__PURE__ */ React24.createElement(Animated.Text, { style: [styles24.label, { color: textColor }], allowFontScaling: true }, label))
   ));
 }
 function ChipGroup({ options, value, onValueChange, multiSelect = false, style }) {
@@ -2234,7 +2331,7 @@ function ChipGroup({ options, value, onValueChange, multiSelect = false, style }
     }
     return optionValue === value;
   };
-  return /* @__PURE__ */ React23.createElement(View, { style: [styles24.group, style] }, options.map((opt) => /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React24.createElement(View, { style: [styles24.group, style] }, options.map((opt) => /* @__PURE__ */ React24.createElement(
     Chip,
     {
       key: opt.value,
@@ -2248,21 +2345,21 @@ var styles24 = StyleSheet.create({
   wrapper: {},
   chip: {
     borderRadius: 999,
-    paddingHorizontal: 14,
-    paddingVertical: 8,
+    paddingHorizontal: s(14),
+    paddingVertical: vs(8),
     borderWidth: 1.5,
     alignItems: "center",
     justifyContent: "center"
   },
   label: {
-    fontSize: 14,
+    fontSize: ms(14),
     fontWeight: "500",
-    lineHeight: 20
+    lineHeight: mvs(20)
   },
   group: {
     flexDirection: "row",
     flexWrap: "wrap",
-    gap: 8
+    gap: s(8)
   }
 });
 function ConfirmDialog({
@@ -2276,15 +2373,15 @@ function ConfirmDialog({
   onCancel
 }) {
   const { colors } = useTheme();
-  return /* @__PURE__ */ React23.createElement(Modal, { visible, transparent: true, animationType: "fade", onRequestClose: onCancel }, /* @__PURE__ */ React23.createElement(TouchableOpacity, { style: styles25.overlay, activeOpacity: 1, onPress: onCancel }, /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React24.createElement(Modal, { visible, transparent: true, animationType: "fade", onRequestClose: onCancel }, /* @__PURE__ */ React24.createElement(TouchableOpacity, { style: styles25.overlay, activeOpacity: 1, onPress: onCancel }, /* @__PURE__ */ React24.createElement(
     View,
     {
       style: [styles25.dialog, { backgroundColor: colors.card }],
       onStartShouldSetResponder: () => true
     },
-    /* @__PURE__ */ React23.createElement(Text, { style: [styles25.title, { color: colors.cardForeground }], allowFontScaling: true }, title),
-    description ? /* @__PURE__ */ React23.createElement(Text, { style: [styles25.description, { color: colors.mutedForeground }], allowFontScaling: true }, description) : null,
-    /* @__PURE__ */ React23.createElement(View, { style: styles25.actions }, /* @__PURE__ */ React23.createElement(Button, { label: cancelLabel, variant: "outline", fullWidth: true, onPress: onCancel }), /* @__PURE__ */ React23.createElement(Button, { label: confirmLabel, variant: confirmVariant, fullWidth: true, onPress: onConfirm }))
+    /* @__PURE__ */ React24.createElement(Text, { style: [styles25.title, { color: colors.cardForeground }], allowFontScaling: true }, title),
+    description ? /* @__PURE__ */ React24.createElement(Text, { style: [styles25.description, { color: colors.mutedForeground }], allowFontScaling: true }, description) : null,
+    /* @__PURE__ */ React24.createElement(View, { style: styles25.actions }, /* @__PURE__ */ React24.createElement(Button, { label: cancelLabel, variant: "outline", fullWidth: true, onPress: onCancel }), /* @__PURE__ */ React24.createElement(Button, { label: confirmLabel, variant: confirmVariant, fullWidth: true, onPress: onConfirm }))
   )));
 }
 var styles25 = StyleSheet.create({
@@ -2293,14 +2390,14 @@ var styles25 = StyleSheet.create({
     backgroundColor: "rgba(0,0,0,0.5)",
     justifyContent: "center",
     alignItems: "center",
-    padding: 24
+    padding: s(24)
   },
   dialog: {
     width: "100%",
-    maxWidth: 400,
-    borderRadius: 16,
-    padding: 24,
-    gap: 12,
+    maxWidth: s(400),
+    borderRadius: ms(16),
+    padding: s(24),
+    gap: vs(12),
     shadowColor: "#000",
     shadowOffset: { width: 0, height: 8 },
     shadowOpacity: 0.15,
@@ -2308,38 +2405,38 @@ var styles25 = StyleSheet.create({
     elevation: 8
   },
   title: {
-    fontSize: 18,
+    fontSize: ms(18),
     fontWeight: "600",
-    lineHeight: 26
+    lineHeight: mvs(26)
   },
   description: {
-    fontSize: 15,
-    lineHeight: 22
+    fontSize: ms(15),
+    lineHeight: mvs(22)
   },
   actions: {
-    gap: 10,
-    marginTop: 8
+    gap: vs(10),
+    marginTop: vs(8)
   }
 });
 function LabelValue({ label, value, style }) {
   const { colors } = useTheme();
-  return /* @__PURE__ */ React23.createElement(View, { style: [styles26.container, style] }, /* @__PURE__ */ React23.createElement(Text, { style: [styles26.label, { color: colors.mutedForeground }], allowFontScaling: true }, label), typeof value === "string" ? /* @__PURE__ */ React23.createElement(Text, { style: [styles26.value, { color: colors.foreground }], allowFontScaling: true }, value) : value);
+  return /* @__PURE__ */ React24.createElement(View, { style: [styles26.container, style] }, /* @__PURE__ */ React24.createElement(Text, { style: [styles26.label, { color: colors.mutedForeground }], allowFontScaling: true }, label), typeof value === "string" ? /* @__PURE__ */ React24.createElement(Text, { style: [styles26.value, { color: colors.foreground }], allowFontScaling: true }, value) : value);
 }
 var styles26 = StyleSheet.create({
   container: {
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
-    gap: 12
+    gap: s(12)
   },
   label: {
-    fontSize: 13,
-    lineHeight: 18
+    fontSize: ms(13),
+    lineHeight: mvs(18)
   },
   value: {
-    fontSize: 15,
+    fontSize: ms(15),
     fontWeight: "500",
-    lineHeight: 22,
+    lineHeight: mvs(22),
     textAlign: "right"
   }
 });
@@ -2360,7 +2457,7 @@ var MONTH_NAMES = [
 function MonthPicker({ value, onChange, style }) {
   const { colors } = useTheme();
   const handlePrev = () => {
-    Haptics12.selectionAsync();
+    selectionAsync();
     if (value.month === 1) {
       onChange({ month: 12, year: value.year - 1 });
     } else {
@@ -2368,14 +2465,14 @@ function MonthPicker({ value, onChange, style }) {
     }
   };
   const handleNext = () => {
-    Haptics12.selectionAsync();
+    selectionAsync();
     if (value.month === 12) {
       onChange({ month: 1, year: value.year + 1 });
     } else {
       onChange({ month: value.month + 1, year: value.year });
     }
   };
-  return /* @__PURE__ */ React23.createElement(View, { style: [styles27.container, style] }, /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React24.createElement(View, { style: [styles27.container, style] }, /* @__PURE__ */ React24.createElement(
     TouchableOpacity,
     {
       style: styles27.arrow,
@@ -2383,8 +2480,8 @@ function MonthPicker({ value, onChange, style }) {
       activeOpacity: 0.6,
       touchSoundDisabled: true
     },
-    /* @__PURE__ */ React23.createElement(Entypo, { name: "chevron-left", size: 22, color: colors.foreground })
-  ), /* @__PURE__ */ React23.createElement(Text, { style: [styles27.label, { color: colors.foreground }], allowFontScaling: true }, MONTH_NAMES[value.month - 1], " ", value.year), /* @__PURE__ */ React23.createElement(
+    /* @__PURE__ */ React24.createElement(Entypo$1, { name: "chevron-left", size: 22, color: colors.foreground })
+  ), /* @__PURE__ */ React24.createElement(Text, { style: [styles27.label, { color: colors.foreground }], allowFontScaling: true }, MONTH_NAMES[value.month - 1], " ", value.year), /* @__PURE__ */ React24.createElement(
     TouchableOpacity,
     {
       style: styles27.arrow,
@@ -2392,7 +2489,7 @@ function MonthPicker({ value, onChange, style }) {
       activeOpacity: 0.6,
       touchSoundDisabled: true
     },
-    /* @__PURE__ */ React23.createElement(Entypo, { name: "chevron-right", size: 22, color: colors.foreground })
+    /* @__PURE__ */ React24.createElement(Entypo$1, { name: "chevron-right", size: 22, color: colors.foreground })
   ));
 }
 var styles27 = StyleSheet.create({
@@ -2402,18 +2499,18 @@ var styles27 = StyleSheet.create({
     justifyContent: "space-between"
   },
   arrow: {
-    width: 44,
-    height: 44,
+    width: s(44),
+    height: s(44),
     alignItems: "center",
     justifyContent: "center"
   },
   label: {
-    fontSize: 17,
+    fontSize: ms(17),
     fontWeight: "500",
-    lineHeight: 24,
+    lineHeight: mvs(24),
     textAlign: "center",
-    minWidth: 160
+    minWidth: s(160)
   }
 });
 
-export { Accordion, AlertBanner, Avatar, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Chip, ChipGroup, ConfirmDialog, CurrencyDisplay, CurrencyInput, CurrencyInput as CurrencyInputLarge, EmptyState, Input, LabelValue, ListItem, MonthPicker, Progress, RadioGroup, Select, Separator, Sheet, Skeleton, Slider, Spinner, Switch, Tabs, TabsContent, Text2 as Text, Textarea, ThemeProvider, ToastProvider, Toggle, defaultDark, defaultLight, useTheme, useToast };
+export { Accordion, AlertBanner, Avatar, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Chip, ChipGroup, ConfirmDialog, CurrencyDisplay, CurrencyInput, CurrencyInput as CurrencyInputLarge, EmptyState, Icon, Input, LabelValue, ListItem, MonthPicker, Progress, RadioGroup, Select, Separator, Sheet, Skeleton, Slider, Spinner, Switch, Tabs, TabsContent, Text2 as Text, Textarea, ThemeProvider, ToastProvider, Toggle, defaultDark, defaultLight, renderIcon, useTheme, useToast };