@retray-dev/ui-kit 2.5.0 → 2.5.2

package/dist/index.mjs

@@ -1,9 +1,9 @@
 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 { 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, Entypo, FontAwesome5, MaterialIcons } 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 +12,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 = {
@@ -80,16 +85,39 @@ 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;
+
+// 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) }
 };
 function Button({
   label,
@@ -106,10 +134,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 +145,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 = {
@@ -138,7 +166,7 @@ function Button({
     destructive: { color: colors.destructiveForeground }
   }[variant];
   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__ */ React23.createElement(Animated.View, { style: [fullWidth && styles.fullWidth, { transform: [{ scale: scale2 }] }] }, /* @__PURE__ */ React23.createElement(
     TouchableOpacity,
     {
       style: [
@@ -177,16 +205,16 @@ 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();
@@ -251,60 +279,60 @@ function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, t
 }
 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 }) {
   const { colors } = useTheme();
@@ -325,7 +353,7 @@ function Badge({ label, children, variant = "default", size = "md", icon, style
 }
 var styles3 = StyleSheet.create({
   container: {
-    borderRadius: 6,
+    borderRadius: ms(6),
     alignSelf: "flex-start",
     flexDirection: "row",
     alignItems: "center"
@@ -341,10 +369,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 +381,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 +390,7 @@ function Card({ children, variant = "elevated", onPress, style }) {
   };
   const handlePress = () => {
     if (!onPress) return;
-    Haptics12.impactAsync(Haptics12.ImpactFeedbackStyle.Light);
+    impactLight();
     onPress();
   };
   const variantStyle = {
@@ -390,7 +418,7 @@ function Card({ children, variant = "elevated", onPress, style }) {
   }[variant];
   const cardContent = /* @__PURE__ */ React23.createElement(View, { style: [styles4.card, variantStyle, style] }, children);
   if (onPress) {
-    return /* @__PURE__ */ React23.createElement(Animated.View, { style: { transform: [{ scale }] } }, /* @__PURE__ */ React23.createElement(
+    return /* @__PURE__ */ React23.createElement(Animated.View, { style: { transform: [{ scale: scale2 }] } }, /* @__PURE__ */ React23.createElement(
       TouchableOpacity,
       {
         onPress: handlePress,
@@ -423,28 +451,28 @@ function CardFooter({ children, style }) {
 }
 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"
@@ -529,16 +557,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();
@@ -589,9 +617,9 @@ 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 +631,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 }) {
@@ -645,7 +673,7 @@ function Progress({ value = 0, max = 100, style }) {
 }
 var styles9 = StyleSheet.create({
   track: {
-    height: 8,
+    height: vs(8),
     borderRadius: 999,
     overflow: "hidden",
     width: "100%"
@@ -696,46 +724,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" } : {};
@@ -764,7 +792,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
@@ -785,23 +813,24 @@ function Textarea({
 }
 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 +839,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__ */ React23.createElement(Animated.View, { style: { transform: [{ scale: scale2 }] } }, /* @__PURE__ */ React23.createElement(
     TouchableOpacity,
     {
       style: [styles12.row, style],
       onPress: () => {
-        Haptics12.selectionAsync();
+        selectionAsync();
         onCheckedChange?.(!checked);
       },
       onPressIn: handlePressIn,
@@ -859,33 +888,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 +924,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, {
@@ -913,7 +942,7 @@ function Switch({ checked = false, onCheckedChange, disabled, style }) {
     TouchableOpacity,
     {
       onPress: () => {
-        Haptics12.selectionAsync();
+        selectionAsync();
         onCheckedChange?.(!checked);
       },
       disabled,
@@ -956,9 +985,9 @@ 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) }
 };
 function Toggle({
   pressed = false,
@@ -973,7 +1002,7 @@ function Toggle({
   ...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 +1014,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],
@@ -1017,11 +1046,11 @@ function Toggle({
     if (custom) return /* @__PURE__ */ React23.createElement(React23.Fragment, null, custom);
     return /* @__PURE__ */ React23.createElement(FontAwesome5, { name: "circle", size: 20, color: colors.mutedForeground });
   };
-  return /* @__PURE__ */ React23.createElement(Animated.View, { style: [{ transform: [{ scale }] }, disabled && styles14.disabled, style] }, /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React23.createElement(Animated.View, { style: [{ transform: [{ scale: scale2 }] }, disabled && styles14.disabled, style] }, /* @__PURE__ */ React23.createElement(
     TouchableOpacity,
     {
       onPress: () => {
-        Haptics12.selectionAsync();
+        selectionAsync();
         onPressedChange?.(!pressed);
       },
       onPressIn: handlePressIn,
@@ -1046,43 +1075,44 @@ function Toggle({
 }
 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__ */ React23.createElement(Animated.View, { style: { transform: [{ scale: scale2 }] } }, /* @__PURE__ */ React23.createElement(
     TouchableOpacity,
     {
       style: styles15.row,
       onPress: () => {
         if (!option.disabled) {
-          Haptics12.selectionAsync();
+          selectionAsync();
           onSelect();
         }
       },
@@ -1136,7 +1166,7 @@ function RadioGroup({
 }
 var styles15 = StyleSheet.create({
   container: {
-    gap: 12
+    gap: vs(12)
   },
   horizontal: {
     flexDirection: "row",
@@ -1145,26 +1175,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,12 +1203,12 @@ 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(
     TouchableOpacity,
@@ -1190,7 +1221,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__ */ React23.createElement(Animated.View, { style: { transform: [{ scale: scale2 }] } }, /* @__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(
       Text,
       {
         style: [
@@ -1240,7 +1271,7 @@ function Tabs({ tabs, value, onValueChange, children, style }) {
     }
   }, [active]);
   const handlePress = (v) => {
-    Haptics12.selectionAsync();
+    selectionAsync();
     if (!value) setInternal(v);
     onValueChange?.(v);
   };
@@ -1290,16 +1321,16 @@ function TabsContent({ value, activeValue, children, style }) {
 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 +1339,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 +1360,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 });
-  };
+  const isExpanded = useSharedValue(isOpen);
+  const height = useSharedValue(0);
   React23.useEffect(() => {
-    toggle(isOpen);
+    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__ */ React23.createElement(View, { style: [styles17.item, { borderBottomColor: colors.border }] }, /* @__PURE__ */ React23.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__ */ React23.createElement(Animated10.View, { style: [styles17.chevron, rotationStyle] }, /* @__PURE__ */ React23.createElement(Entypo, { name: "chevron-down", size: 20, color: colors.foreground }))
+  ), /* @__PURE__ */ React23.createElement(Animated10.View, { style: bodyStyle }, /* @__PURE__ */ React23.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(() => {
@@ -1409,18 +1438,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,7 +1475,7 @@ function Slider({
   const handleValueChange = (v) => {
     if (step && v !== lastSteppedValue.current) {
       lastSteppedValue.current = v;
-      Haptics12.selectionAsync();
+      selectionAsync();
     }
     onValueChange?.(v);
   };
@@ -1468,7 +1499,7 @@ function Slider({
 }
 var styles18 = StyleSheet.create({
   wrapper: {
-    gap: 8
+    gap: vs(8)
   },
   header: {
     flexDirection: "row",
@@ -1476,16 +1507,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,7 +1535,7 @@ function Sheet({
   const ref = useRef(null);
   useEffect(() => {
     if (open) {
-      Haptics12.impactAsync(Haptics12.ImpactFeedbackStyle.Light);
+      impactLight();
       ref.current?.present();
     } else {
       ref.current?.dismiss();
@@ -1535,34 +1566,34 @@ function Sheet({
 }
 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 +1605,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 +1632,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__ */ React23.createElement(View, { style: [styles20.container, style] }, label ? /* @__PURE__ */ React23.createElement(Text, { style: [styles20.label, { color: colors.foreground }] }, label) : null, !isWeb2 ? /* @__PURE__ */ React23.createElement(Animated.View, { style: { transform: [{ scale: scale2 }], opacity: disabled ? 0.45 : 1 } }, /* @__PURE__ */ React23.createElement(
     TouchableOpacity,
     {
       style: [
@@ -1670,7 +1701,7 @@ function Select({
       selectedValue: value ?? "",
       onValueChange: (val) => {
         if (val !== "") {
-          Haptics12.selectionAsync();
+          selectionAsync();
           onValueChange?.(val);
         }
       },
@@ -1689,7 +1720,7 @@ function Select({
         enabled: !o.disabled
       }
     ))
-  ) : null, isWeb ? /* @__PURE__ */ React23.createElement(
+  ) : null, isWeb2 ? /* @__PURE__ */ React23.createElement(
     Picker,
     {
       selectedValue: value ?? "",
@@ -1723,10 +1754,10 @@ function Select({
 }
 var styles20 = StyleSheet.create({
   container: {
-    gap: 8
+    gap: vs(8)
   },
   label: {
-    fontSize: 15,
+    fontSize: ms(15),
     fontWeight: "500"
   },
   trigger: {
@@ -1734,9 +1765,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 +1775,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 +1819,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({
@@ -1851,7 +1882,7 @@ function ToastNotification({ item, onDismiss }) {
   }[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 }))));
+  return /* @__PURE__ */ React23.createElement(GestureDetector, { gesture: panGesture }, /* @__PURE__ */ React23.createElement(Animated10.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 }))));
 }
 function ToastProvider({ children }) {
   const [toasts, setToasts] = useState([]);
@@ -1859,11 +1890,11 @@ 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));
   }, []);
@@ -1875,23 +1906,23 @@ function ToastProvider({ children }) {
 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 +1931,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,7 +1980,7 @@ function CurrencyInput({
     const raw = parseFloat(formatted.replace(separatorRegex, "") || "0");
     onChangeValue?.(isNaN(raw) ? 0 : raw);
   };
-  const inputStyle = size === "large" ? { fontSize: 36 } : {};
+  const inputStyle = size === "large" ? { fontSize: ms(36) } : {};
   return /* @__PURE__ */ React23.createElement(
     Input,
     {
@@ -1986,11 +2017,11 @@ function CurrencyDisplay({ value, prefix = "$", showDecimals = false, textColor,
 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,
@@ -2010,26 +2041,26 @@ 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;
@@ -2045,7 +2076,7 @@ function ListItem({
     shadowRadius: 6,
     elevation: 2
   } : {};
-  return /* @__PURE__ */ React23.createElement(Animated.View, { style: [{ transform: [{ scale }] }, disabled && styles23.disabled] }, /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React23.createElement(Animated.View, { style: [{ transform: [{ scale: scale2 }] }, disabled && styles23.disabled] }, /* @__PURE__ */ React23.createElement(
     TouchableOpacity,
     {
       style: [styles23.container, cardStyle, style],
@@ -2095,7 +2126,7 @@ function ListItem({
     {
       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 +2135,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 +2200,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 +2231,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__ */ React23.createElement(Animated.View, { style: [styles24.wrapper, { transform: [{ scale: scale2 }] }, style] }, /* @__PURE__ */ React23.createElement(
     TouchableOpacity,
     {
       onPress: handlePress,
@@ -2248,21 +2279,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({
@@ -2293,14 +2324,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,17 +2339,17 @@ 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 }) {
@@ -2330,16 +2361,16 @@ var styles26 = StyleSheet.create({
     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 +2391,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,7 +2399,7 @@ function MonthPicker({ value, onChange, style }) {
     }
   };
   const handleNext = () => {
-    Haptics12.selectionAsync();
+    selectionAsync();
     if (value.month === 12) {
       onChange({ month: 1, year: value.year + 1 });
     } else {
@@ -2402,17 +2433,17 @@ 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)
   }
 });