@retray-dev/ui-kit 6.2.0 → 7.0.1

package/dist/index.js

@@ -87,19 +87,21 @@ function darken(hex, amount) {
 // src/theme/colors.ts
 var defaultLight = {
   background: "#ffffff",
-  foreground: "#222222",
-  // Airbnb ink — deep near-black, never pure black
+  foreground: "#1a1a1a",
   card: "#ffffff",
   primary: "#1a1a1a",
-  // Near-black primary — clean, premium default
   primaryForeground: "#ffffff",
+  // AUDIT FIX: brand accent — was undefined; falls back to primary when omitted
+  accent: "#d4561d",
+  accentForeground: "#ffffff",
   border: "#dddddd",
-  // Airbnb hairline — light, airy
-  destructive: "#e53935",
+  // AUDIT FIX: was #e53935 (4.22:1 on white — fails AA); #c72828 = 5.59:1 ✓
+  destructive: "#c72828",
   destructiveForeground: "#ffffff",
   success: "#1a7a45",
   successForeground: "#ffffff",
-  warning: "#e67e00",
+  // AUDIT FIX: was #e67e00 (2.86:1 — severe fail); #9a5200 = 5.86:1 ✓ AAA-near
+  warning: "#9a5200",
   warningForeground: "#ffffff"
 };
 var defaultDark = {
@@ -108,19 +110,24 @@ var defaultDark = {
   card: "#1c1c1c",
   primary: "#fafafa",
   primaryForeground: "#0f0f0f",
+  // AUDIT FIX: lighter accent for dark surfaces (warm amber-orange)
+  accent: "#e87645",
+  accentForeground: "#ffffff",
   border: "#303030",
   destructive: "#ef5350",
   destructiveForeground: "#ffffff",
   success: "#2e7d52",
   successForeground: "#ffffff",
-  warning: "#f57c00",
-  warningForeground: "#ffffff"
+  // AUDIT FIX: brighter amber for dark-bg visibility; dark text for contrast
+  // #f5a623 on #0f0f0f = 8.6:1 ✓ as indicator; #0f0f0f text on #f5a623 = 8.6:1 ✓
+  warning: "#f5a623",
+  warningForeground: "#0f0f0f"
 };
 function deriveColors(t, scheme) {
   const dark = scheme === "dark";
   const bg = t.background;
-  const foregroundSubtle = mixWithBackground(t.foreground, bg, 0.55);
-  const foregroundMuted = mixWithBackground(t.foreground, bg, 0.38);
+  const foregroundSubtle = mixWithBackground(t.foreground, bg, 0.7);
+  const foregroundMuted = mixWithBackground(t.foreground, bg, 0.62);
   const surface = dark ? lighten(bg, -0.06) : darken(bg, 0.04);
   const surfaceStrong = dark ? lighten(bg, -0.12) : darken(bg, 0.08);
   const destructiveTint = dark ? withAlphaOnDark(t.destructive, 0.15, bg) : withAlphaOnWhite(t.destructive, 0.08);
@@ -144,10 +151,9 @@ function deriveColors(t, scheme) {
     overlay: t.overlay ?? "rgba(0,0,0,0.45)",
     accentResolved: t.accent ?? t.primary,
     accentForegroundResolved: t.accentForeground ?? t.primaryForeground,
-    ring: t.primary,
-    // focus ring always = primary
-    input: t.border
-    // input border always = border
+    ring: t.accent ?? t.primary,
+    input: t.border,
+    separator: dark ? lighten(t.border, 0.22) : darken(t.border, 0.16)
   };
 }
 
@@ -203,20 +209,27 @@ var s = isWeb ? (n) => n : reactNativeSizeMatters.scale;
 var vs = isWeb ? (n) => n : reactNativeSizeMatters.verticalScale;
 var ms = isWeb ? (n, _factor) => n : reactNativeSizeMatters.moderateScale;
 var mvs = isWeb ? (n, _factor) => n : reactNativeSizeMatters.moderateVerticalScale;
-var ICON_FAMILIES = [
-  { name: "Ionicons", component: Ionicons__default.default, glyphMap: Ionicons__default.default.glyphMap },
-  { name: "MaterialIcons", component: MaterialIcons__default.default, glyphMap: MaterialIcons__default.default.glyphMap },
-  { name: "FontAwesome5", component: FontAwesome5__default.default, glyphMap: FontAwesome5__default.default.glyphMap },
-  { name: "Entypo", component: Entypo__default.default, glyphMap: Entypo__default.default.glyphMap },
-  { name: "AntDesign", component: AntDesign__default.default, glyphMap: AntDesign__default.default.glyphMap },
-  { name: "Feather", component: Feather__default.default, glyphMap: Feather__default.default.glyphMap }
+var glyphMapOf = (mod) => mod.glyphMap ?? {};
+var ALL_FAMILIES = [
+  { name: "Ionicons", component: Ionicons__default.default, getGlyphMap: () => glyphMapOf(Ionicons__default.default) },
+  { name: "MaterialIcons", component: MaterialIcons__default.default, getGlyphMap: () => glyphMapOf(MaterialIcons__default.default) },
+  { name: "FontAwesome5", component: FontAwesome5__default.default, getGlyphMap: () => glyphMapOf(FontAwesome5__default.default) },
+  { name: "Entypo", component: Entypo__default.default, getGlyphMap: () => glyphMapOf(Entypo__default.default) },
+  { name: "AntDesign", component: AntDesign__default.default, getGlyphMap: () => glyphMapOf(AntDesign__default.default) },
+  { name: "Feather", component: Feather__default.default, getGlyphMap: () => glyphMapOf(Feather__default.default) }
 ];
+var activeFamilies = ALL_FAMILIES;
 var resolvedCache = null;
+function configureIconFamilies(families) {
+  const order = families.map((n) => ALL_FAMILIES.find((f) => f.name === n)).filter((f) => f !== void 0);
+  activeFamilies = order.length > 0 ? order : ALL_FAMILIES;
+  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)) {
+  for (const family of activeFamilies) {
+    const glyphMap = family.getGlyphMap();
+    for (const iconName of Object.keys(glyphMap)) {
       cache.set(iconName, family);
     }
   }
@@ -231,7 +244,7 @@ function resolveFamily(name) {
 function Icon({ name, size, color, family }) {
   let resolved = null;
   if (family) {
-    resolved = ICON_FAMILIES.find((f) => f.name === family) ?? null;
+    resolved = ALL_FAMILIES.find((f) => f.name === family) ?? null;
   } else {
     resolved = resolveFamily(name);
   }
@@ -306,113 +319,126 @@ var BREAKPOINTS = {
 };
 var TYPOGRAPHY = {
   "display-hero": {
-    fontFamily: "Poppins-Bold",
+    fontFamily: "Sohne-Bold",
     fontSize: 64,
     fontWeight: "700",
     lineHeight: 70,
     letterSpacing: -1
   },
   "display-xl": {
-    fontFamily: "Poppins-Bold",
+    fontFamily: "Sohne-Bold",
     fontSize: 28,
     fontWeight: "700",
     lineHeight: 40,
     letterSpacing: 0
   },
+  // AUDIT FIX: was 22px/500 — raised to 24px/600; removes weight inversion vs display-md
   "display-lg": {
-    fontFamily: "Poppins-Medium",
-    fontSize: 22,
-    fontWeight: "500",
-    lineHeight: 26,
-    letterSpacing: -0.44
+    fontFamily: "Sohne-SemiBold",
+    fontSize: 24,
+    fontWeight: "600",
+    lineHeight: 32,
+    letterSpacing: -0.3
   },
+  // AUDIT FIX: was 21px/700 — lowered to 20px/600; weight normalised, 4px gap preserved
   "display-md": {
-    fontFamily: "Poppins-Bold",
-    fontSize: 21,
-    fontWeight: "700",
-    lineHeight: 30,
+    fontFamily: "Sohne-SemiBold",
+    fontSize: 20,
+    fontWeight: "600",
+    lineHeight: 28,
     letterSpacing: 0
   },
   "display-sm": {
-    fontFamily: "Poppins-SemiBold",
-    fontSize: 20,
+    fontFamily: "Sohne-SemiBold",
+    fontSize: 18,
     fontWeight: "600",
     lineHeight: 24,
     letterSpacing: -0.18
   },
+  // AUDIT FIX: was 16px — raised to 17px so title-md > title-sm is size-visible
   "title-md": {
-    fontFamily: "Poppins-SemiBold",
-    fontSize: 16,
+    fontFamily: "Sohne-SemiBold",
+    fontSize: 17,
     fontWeight: "600",
-    lineHeight: 20,
+    lineHeight: 22,
     letterSpacing: 0
   },
+  // AUDIT FIX: was 16px — lowered to 15px; now distinct from title-md
   "title-sm": {
-    fontFamily: "Poppins-Medium",
-    fontSize: 16,
+    fontFamily: "Sohne-Medium",
+    fontSize: 15,
     fontWeight: "500",
     lineHeight: 20,
     letterSpacing: 0
   },
   "body-md": {
-    fontFamily: "Poppins-Regular",
+    fontFamily: "Sohne-Regular",
     fontSize: 16,
     fontWeight: "400",
     lineHeight: 24,
     letterSpacing: 0
   },
   "body-sm": {
-    fontFamily: "Poppins-Regular",
+    fontFamily: "Sohne-Regular",
     fontSize: 14,
     fontWeight: "400",
     lineHeight: 20,
     letterSpacing: 0
   },
-  caption: {
-    fontFamily: "Poppins-Medium",
+  "caption": {
+    fontFamily: "Sohne-Medium",
     fontSize: 14,
     fontWeight: "500",
     lineHeight: 18,
     letterSpacing: 0
   },
   "caption-sm": {
-    fontFamily: "Poppins-Regular",
+    fontFamily: "Sohne-Regular",
     fontSize: 13,
     fontWeight: "400",
     lineHeight: 16,
     letterSpacing: 0
   },
   "badge-text": {
-    fontFamily: "Poppins-SemiBold",
+    fontFamily: "Sohne-SemiBold",
     fontSize: 11,
     fontWeight: "600",
-    lineHeight: 13,
+    lineHeight: 14,
+    letterSpacing: 0
+  },
+  // AUDIT FIX: added badge-text-md so Badge md size has a canonical token
+  "badge-text-md": {
+    fontFamily: "Sohne-SemiBold",
+    fontSize: 13,
+    fontWeight: "600",
+    lineHeight: 16,
     letterSpacing: 0
   },
   "micro-label": {
-    fontFamily: "Poppins-Bold",
+    fontFamily: "Sohne-Bold",
     fontSize: 12,
     fontWeight: "700",
     lineHeight: 16,
     letterSpacing: 0
   },
+  // AUDIT FIX: was 10px/0.8 letterSpacing — raised to 11px/0.6; minimum mobile readability
   "uppercase-tag": {
-    fontFamily: "Poppins-Bold",
-    fontSize: 10,
+    fontFamily: "Sohne-Bold",
+    fontSize: 11,
     fontWeight: "700",
-    lineHeight: 13,
-    letterSpacing: 0.8,
+    lineHeight: 14,
+    letterSpacing: 0.6,
     textTransform: "uppercase"
   },
   "button-lg": {
-    fontFamily: "Poppins-Medium",
+    fontFamily: "Sohne-Medium",
     fontSize: 16,
     fontWeight: "500",
     lineHeight: 22,
     letterSpacing: 0
   },
   "button-sm": {
-    fontFamily: "Poppins-Medium",
+    fontFamily: "Sohne-Medium",
     fontSize: 14,
     fontWeight: "500",
     lineHeight: 18,
@@ -511,7 +537,7 @@ var labelSizeStyles = {
   lg: { ...TYPOGRAPHY["button-lg"], fontSize: ms(TYPOGRAPHY["button-lg"].fontSize + 1), lineHeight: mvs(24) }
 };
 var iconSizeMap = { sm: 16, md: 18, lg: 20 };
-function Button({
+function ButtonBase({
   label,
   variant = "primary",
   size = "md",
@@ -547,12 +573,15 @@ function Button({
   const labelVariantStyle = {
     primary: { color: colors.primaryForeground },
     secondary: { color: colors.primary },
-    text: { color: colors.foreground },
+    // AUDIT FIX: was colors.foreground — visually indistinguishable from plain text,
+    // no affordance that it's a CTA. Now uses accentResolved so text-only buttons
+    // carry the brand voltage. Falls back to primary when no accent is defined.
+    text: { color: colors.accentResolved },
     destructive: { color: colors.destructiveForeground }
   }[variant];
   const textColor = iconColor ?? labelVariantStyle.color;
   const effectiveIcon = iconName ? renderIcon(iconName, iconSizeMap[size], textColor) : typeof icon === "function" ? icon({ label, size, variant, color: textColor }) : icon;
-  const spinnerColor = variant === "destructive" ? colors.destructiveForeground : variant === "primary" ? colors.primaryForeground : colors.foreground;
+  const spinnerColor = variant === "destructive" ? colors.destructiveForeground : variant === "primary" ? colors.primaryForeground : colors.accentResolved;
   const styleArray = Array.isArray(style) ? style : style ? [style] : [];
   const flatStyle = reactNative.StyleSheet.flatten(styleArray);
   const { flex, ...restStyle } = flatStyle || {};
@@ -605,10 +634,10 @@ function Button({
     )
   );
 }
+var Button = React26__default.default.memo(ButtonBase);
 var styles = reactNative.StyleSheet.create({
   base: {
     borderRadius: RADIUS.md,
-    // 14px — Airbnb-aligned rounded rect (not pill)
     alignItems: "center",
     justifyContent: "center",
     flexDirection: "row"
@@ -620,7 +649,7 @@ var styles = reactNative.StyleSheet.create({
     opacity: 0.45
   },
   label: {
-    fontFamily: "Poppins-Medium",
+    fontFamily: "Sohne-Medium",
     flexShrink: 1
   },
   labelWithIcon: {
@@ -641,15 +670,17 @@ function ButtonGroup({ children, gap = 12, vertical = false, style }) {
         style
       ]
     },
-    React26__default.default.Children.map(
-      children,
-      (child) => React26__default.default.isValidElement(child) ? React26__default.default.cloneElement(child, {
-        style: [
-          child.props.style,
-          { flex: 1 }
-        ]
-      }) : child
-    )
+    React26__default.default.Children.map(children, (child) => {
+      if (!React26__default.default.isValidElement(child)) return child;
+      const childProps = child.props;
+      const extraProps = {
+        style: [child.props.style, { flex: 1 }]
+      };
+      if (!vertical && "label" in childProps && childProps["size"] === void 0) {
+        extraProps["size"] = "sm";
+      }
+      return React26__default.default.cloneElement(child, extraProps);
+    })
   );
 }
 var styles2 = reactNative.StyleSheet.create({
@@ -668,7 +699,7 @@ var sizeMap = {
   md: { container: s(44), icon: 20 },
   lg: { container: s(52), icon: 24 }
 };
-function IconButton({
+function IconButtonBase({
   iconName,
   icon,
   iconColor,
@@ -750,6 +781,7 @@ function IconButton({
     ] }, showCount && /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles3.badgeText, { color: colors.primaryForeground }] }, badgeCount))
   );
 }
+var IconButton = React26__default.default.memo(IconButtonBase);
 var styles3 = reactNative.StyleSheet.create({
   wrapper: {
     alignSelf: "flex-start"
@@ -781,7 +813,7 @@ var styles3 = reactNative.StyleSheet.create({
     paddingHorizontal: 3
   },
   badgeText: {
-    fontFamily: "Poppins-Bold",
+    fontFamily: "Sohne-Bold",
     fontSize: ms(9),
     lineHeight: 14
   }
@@ -823,7 +855,7 @@ var defaultColorVariant = {
   "button-lg": "foreground",
   "button-sm": "foreground"
 };
-function Text3({ variant = "body-md", color, style, children, ...props }) {
+function TextBase({ variant = "body-md", color, style, children, ...props }) {
   const { colors } = useTheme();
   const colorKey = defaultColorVariant[variant] ?? "foreground";
   const resolvedColor = color ?? colors[colorKey];
@@ -837,6 +869,7 @@ function Text3({ variant = "body-md", color, style, children, ...props }) {
     children
   );
 }
+var Text3 = React26__default.default.memo(TextBase);
 function useColorTransition(active, options = {}) {
   const { duration = TIMINGS.state.duration } = options;
   const progress = Animated9.useSharedValue(active ? 1 : 0);
@@ -870,8 +903,9 @@ function Input({ label, error, hint, disabled, prefix, suffix, prefixStyle, suff
     },
     /* @__PURE__ */ React26__default.default.createElement(vectorIcons.AntDesign, { name: showPassword ? "eye" : "eye-invisible", size: 20, color: colors.foregroundMuted })
   ) : suffixIcon ? renderIcon(suffixIcon, 20, suffixIconColor ?? colors.foregroundMuted) : suffix;
-  const borderColorStyle = Animated9.useAnimatedStyle(() => ({
-    borderColor: error ? colors.destructive : Animated9.interpolateColor(focusProgress.value, [0, 1], [colors.border, colors.primary])
+  const borderAnimStyle = Animated9.useAnimatedStyle(() => ({
+    borderColor: error ? colors.destructive : Animated9.interpolateColor(focusProgress.value, [0, 1], [colors.border, colors.primary]),
+    borderWidth: error ? 2 : Animated9.interpolate(focusProgress.value, [0, 1], [1, 2])
   }));
   return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles4.container, isDisabled && styles4.containerDisabled, containerStyle] }, label ? /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles4.label, { color: colors.foreground }], allowFontScaling: true }, label) : null, /* @__PURE__ */ React26__default.default.createElement(
     Animated9__default.default.View,
@@ -879,10 +913,10 @@ function Input({ label, error, hint, disabled, prefix, suffix, prefixStyle, suff
       style: [
         styles4.inputWrapper,
         { backgroundColor: isDisabled ? colors.surface : colors.background },
-        borderColorStyle,
         inputWrapperStyle
       ]
     },
+    /* @__PURE__ */ React26__default.default.createElement(Animated9__default.default.View, { style: [styles4.borderOverlay, borderAnimStyle], pointerEvents: "none" }),
     effectivePrefix ? typeof effectivePrefix === "string" ? /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles4.prefixText, { color: colors.foregroundMuted }, prefixStyle], allowFontScaling: true }, effectivePrefix) : /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles4.prefixContainer }, effectivePrefix) : null,
     /* @__PURE__ */ React26__default.default.createElement(
       reactNative.TextInput,
@@ -928,20 +962,25 @@ var styles4 = reactNative.StyleSheet.create({
     opacity: 0.6
   },
   label: {
-    fontFamily: "Poppins-Medium",
+    fontFamily: "Sohne-Medium",
     fontSize: ms(14)
   },
   inputWrapper: {
     flexDirection: "row",
     alignItems: "center",
-    borderWidth: 2,
+    // Border lives on borderOverlay (absolute) so its 1px→2px focus change
+    // never resizes this box. Wrapper itself carries no border.
     borderRadius: 8,
     paddingHorizontal: s(14),
     paddingVertical: vs(11),
     minHeight: 48
   },
+  borderOverlay: {
+    ...reactNative.StyleSheet.absoluteFillObject,
+    borderRadius: 8
+  },
   input: {
-    fontFamily: "Poppins-Regular",
+    fontFamily: "Sohne-Regular",
     flex: 1,
     fontSize: ms(16),
     paddingVertical: vs(2),
@@ -951,7 +990,7 @@ var styles4 = reactNative.StyleSheet.create({
     marginRight: s(8)
   },
   prefixText: {
-    fontFamily: "Poppins-Regular",
+    fontFamily: "Sohne-Regular",
     fontSize: ms(15),
     marginRight: s(8)
   },
@@ -959,15 +998,18 @@ var styles4 = reactNative.StyleSheet.create({
     marginLeft: s(8)
   },
   suffixText: {
-    fontFamily: "Poppins-Regular",
+    fontFamily: "Sohne-Regular",
     fontSize: ms(15),
     marginLeft: s(8)
   },
+  // AUDIT FIX: was padding: s(4) → ~28px tap target. Now 12px padding → ~44px.
+  // Negative margin compensates so the visual icon position is unchanged.
   passwordToggle: {
-    padding: s(4)
+    padding: s(12),
+    margin: -s(8)
   },
   helperText: {
-    fontFamily: "Poppins-Regular",
+    fontFamily: "Sohne-Regular",
     fontSize: ms(13)
   }
 });
@@ -987,7 +1029,7 @@ var sizeIconGap = {
   lg: s(6)
 };
 var sizeIconSize = { sm: 10, md: 12, lg: 14 };
-function Badge({ label, children, variant = "default", size = "md", icon, iconName, iconColor, style }) {
+function BadgeBase({ label, children, variant = "default", size = "md", icon, iconName, iconColor, style }) {
   const { colors } = useTheme();
   const containerStyle = {
     default: { backgroundColor: colors.primary },
@@ -1015,6 +1057,7 @@ function Badge({ label, children, variant = "default", size = "md", icon, iconNa
   const content = children ?? label;
   return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles5.container, containerStyle, sizePadding[size], { gap: sizeIconGap[size] }, style] }, effectiveIcon, typeof content === "string" ? /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles5.label, { color: textColor }, sizeFontSize[size]], allowFontScaling: true }, content) : content);
 }
+var Badge = React26__default.default.memo(BadgeBase);
 var styles5 = reactNative.StyleSheet.create({
   container: {
     borderRadius: 9999,
@@ -1023,7 +1066,7 @@ var styles5 = reactNative.StyleSheet.create({
     alignItems: "center"
   },
   label: {
-    fontFamily: "Poppins-Medium"
+    fontFamily: "Sohne-Medium"
   }
 });
 function Card({ children, variant = "elevated", onPress, style, accessibilityLabel }) {
@@ -1042,11 +1085,14 @@ function Card({ children, variant = "elevated", onPress, style, accessibilityLab
   const variantStyle = {
     elevated: {
       backgroundColor: colors.card,
-      borderColor: colors.border,
+      // AUDIT FIX: removed borderColor — shadow is the depth signal; a border on
+      // top of a shadow creates redundant double-framing that reads as "heavy"
+      // rather than "elevated". borderWidth: 0 overrides the base style's borderWidth: 1.
+      borderWidth: 0,
       shadowColor: "#000",
-      shadowOffset: { width: 0, height: 6 },
-      shadowOpacity: 0.1,
-      shadowRadius: 16,
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.09,
+      shadowRadius: 14,
       elevation: 4
     },
     outlined: {
@@ -1089,7 +1135,7 @@ function CardTitle({ children, style }) {
 }
 function CardDescription({ children, style }) {
   const { colors } = useTheme();
-  return /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles6.description, { color: colors.foregroundMuted }, style], allowFontScaling: true }, children);
+  return /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles6.description, { color: colors.foregroundSubtle }, style], allowFontScaling: true }, children);
 }
 function CardContent({ children, style }) {
   return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles6.content, style] }, children);
@@ -1108,12 +1154,14 @@ var styles6 = reactNative.StyleSheet.create({
     gap: vs(4)
   },
   title: {
-    fontFamily: "Poppins-SemiBold",
+    fontFamily: "Sohne-SemiBold",
     fontSize: ms(16),
     lineHeight: mvs(22)
   },
+  // AUDIT FIX: was foregroundMuted (2.2:1 fail) — description text now uses
+  // foregroundSubtle (5.9:1 ✓) which is readable while still visually secondary.
   description: {
-    fontFamily: "Poppins-Regular",
+    fontFamily: "Sohne-Regular",
     fontSize: ms(13),
     lineHeight: mvs(18)
   },
@@ -1136,7 +1184,7 @@ function Separator({ orientation = "horizontal", style }) {
     {
       style: [
         orientation === "horizontal" ? styles7.horizontal : styles7.vertical,
-        { backgroundColor: colors.border },
+        { backgroundColor: colors.separator },
         style
       ]
     }
@@ -1145,13 +1193,11 @@ function Separator({ orientation = "horizontal", style }) {
 var styles7 = reactNative.StyleSheet.create({
   horizontal: {
     height: 1,
-    width: "100%",
-    opacity: 0.7
+    width: "100%"
   },
   vertical: {
     width: 1,
-    height: "100%",
-    opacity: 0.7
+    height: "100%"
   }
 });
 var sizeMap2 = {
@@ -1184,7 +1230,7 @@ var styles8 = reactNative.StyleSheet.create({
     gap: vs(6)
   },
   label: {
-    fontFamily: "Poppins-Regular",
+    fontFamily: "Sohne-Regular",
     lineHeight: mvs(18)
   }
 });
@@ -1269,7 +1315,7 @@ function getInitials(fallback, fallbackText) {
   }
   return "?";
 }
-function Avatar({ src, fallback, fallbackText, size = "md", status, style }) {
+function AvatarBase({ src, fallback, fallbackText, size = "md", status, style }) {
   const { colors } = useTheme();
   const [imageError, setImageError] = React26.useState(false);
   const dimension = typeof size === "number" ? size : sizeMap3[size];
@@ -1320,6 +1366,7 @@ function Avatar({ src, fallback, fallbackText, size = "md", status, style }) {
     }
   ));
 }
+var Avatar = React26__default.default.memo(AvatarBase);
 var styles10 = reactNative.StyleSheet.create({
   wrapper: {
     alignSelf: "flex-start",
@@ -1330,7 +1377,7 @@ var styles10 = reactNative.StyleSheet.create({
     justifyContent: "center"
   },
   fallback: {
-    fontFamily: "Poppins-Medium"
+    fontFamily: "Sohne-Medium"
   },
   statusDot: {
     position: "absolute",
@@ -1339,11 +1386,30 @@ var styles10 = reactNative.StyleSheet.create({
   }
 });
 function AlertBanner({ title, description, variant = "default", icon, iconName, iconColor, style }) {
-  const { colors } = useTheme();
-  const accentColor = variant === "destructive" ? colors.destructive : variant === "success" ? colors.success : variant === "warning" ? colors.warning : colors.primary;
-  const defaultIcon = variant === "success" ? /* @__PURE__ */ React26__default.default.createElement(vectorIcons.FontAwesome5, { name: "check-circle", size: ms(16), color: accentColor }) : variant === "destructive" ? /* @__PURE__ */ React26__default.default.createElement(vectorIcons.MaterialIcons, { name: "error-outline", size: ms(17), color: accentColor }) : variant === "warning" ? /* @__PURE__ */ React26__default.default.createElement(vectorIcons.MaterialIcons, { name: "warning-amber", size: ms(17), color: accentColor }) : /* @__PURE__ */ React26__default.default.createElement(vectorIcons.Entypo, { name: "info-with-circle", size: ms(16), color: accentColor });
+  const { colors, colorScheme } = useTheme();
+  const isDark = colorScheme === "dark";
+  const accentColor = variant === "destructive" ? colors.destructive : variant === "success" ? colors.success : variant === "warning" ? colors.warning : colors.foreground;
+  const bgColor = variant === "destructive" ? isDark ? "rgba(239, 83, 80, 0.15)" : "rgba(199, 40, 40, 0.10)" : variant === "success" ? isDark ? "rgba(46, 125, 82, 0.15)" : "rgba(26, 122, 69, 0.10)" : variant === "warning" ? isDark ? "rgba(245, 166, 35, 0.15)" : "rgba(154, 82, 0, 0.10)" : colors.surface;
+  const borderColor = variant === "destructive" ? isDark ? "rgba(239, 83, 80, 0.30)" : "rgba(199, 40, 40, 0.25)" : variant === "success" ? isDark ? "rgba(46, 125, 82, 0.30)" : "rgba(26, 122, 69, 0.25)" : variant === "warning" ? isDark ? "rgba(245, 166, 35, 0.30)" : "rgba(154, 82, 0, 0.25)" : colors.border;
+  const defaultIcon = variant === "success" ? /* @__PURE__ */ React26__default.default.createElement(vectorIcons.FontAwesome5, { name: "check-circle", size: ms(16), color: accentColor }) : variant === "destructive" ? /* @__PURE__ */ React26__default.default.createElement(vectorIcons.MaterialIcons, { name: "error-outline", size: ms(17), color: accentColor }) : variant === "warning" ? /* @__PURE__ */ React26__default.default.createElement(vectorIcons.MaterialIcons, { name: "warning-amber", size: ms(17), color: accentColor }) : (
+    // AUDIT FIX: default variant previously used colors.primary (near-black)
+    // as the info icon tint — ambiguous and heavy. accentResolved gives it
+    // a meaningful chromatic signal when an accent is defined.
+    /* @__PURE__ */ React26__default.default.createElement(vectorIcons.Entypo, { name: "info-with-circle", size: ms(16), color: accentColor })
+  );
   const effectiveIcon = iconName ? renderIcon(iconName, ms(16), iconColor ?? accentColor) : icon ?? defaultIcon;
-  return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles11.container, { backgroundColor: colors.card }, style] }, /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles11.iconSlot }, effectiveIcon), /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles11.content }, /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles11.title, { color: colors.foreground }], allowFontScaling: true }, title), description ? /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles11.description, { color: colors.foregroundMuted }], allowFontScaling: true }, description) : null));
+  return /* @__PURE__ */ React26__default.default.createElement(
+    reactNative.View,
+    {
+      style: [
+        styles11.container,
+        { backgroundColor: bgColor, borderWidth: 1, borderColor },
+        style
+      ]
+    },
+    /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles11.iconSlot }, effectiveIcon),
+    /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles11.content }, /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles11.title, { color: colors.foreground }], allowFontScaling: true }, title), description ? /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles11.description, { color: colors.foreground, opacity: 0.85 }], allowFontScaling: true }, description) : null)
+  );
 }
 var styles11 = reactNative.StyleSheet.create({
   container: {
@@ -1351,8 +1417,8 @@ var styles11 = reactNative.StyleSheet.create({
     alignItems: "flex-start",
     borderRadius: RADIUS.lg,
     gap: s(8),
-    paddingVertical: vs(8),
-    paddingHorizontal: s(10)
+    paddingVertical: vs(10),
+    paddingHorizontal: s(12)
   },
   iconSlot: {
     marginTop: vs(1)
@@ -1362,14 +1428,12 @@ var styles11 = reactNative.StyleSheet.create({
     gap: vs(2)
   },
   title: {
-    fontFamily: "Poppins-Medium",
-    fontSize: ms(13),
-    lineHeight: ms(19)
+    fontFamily: "Sohne-Medium",
+    fontSize: ms(13)
   },
   description: {
-    fontFamily: "Poppins-Regular",
-    fontSize: ms(12),
-    lineHeight: ms(17)
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(12)
   }
 });
 function Progress({ value = 0, max = 100, variant = "default", style, accessibilityLabel }) {
@@ -1481,7 +1545,7 @@ var styles13 = reactNative.StyleSheet.create({
     marginTop: vs(16)
   },
   title: {
-    fontFamily: "Poppins-Medium",
+    fontFamily: "Sohne-Medium",
     fontSize: ms(18),
     textAlign: "center"
   },
@@ -1490,7 +1554,7 @@ var styles13 = reactNative.StyleSheet.create({
     marginTop: vs(10)
   },
   description: {
-    fontFamily: "Poppins-Regular",
+    fontFamily: "Sohne-Regular",
     fontSize: ms(14),
     lineHeight: mvs(20),
     textAlign: "center"
@@ -1523,18 +1587,19 @@ function Textarea({
     duration: focused ? TIMINGS.focusIn.duration : TIMINGS.focusOut.duration
   });
   const resolvedPrefixIcon = prefixIcon ? renderIcon(prefixIcon, ms(16), prefixIconColor ?? colors.foregroundMuted) : prefixIconNode;
-  const borderColorStyle = Animated9.useAnimatedStyle(() => ({
-    borderColor: error ? colors.destructive : Animated9.interpolateColor(focusProgress.value, [0, 1], [colors.border, colors.primary])
+  const borderAnimStyle = Animated9.useAnimatedStyle(() => ({
+    borderColor: error ? colors.destructive : Animated9.interpolateColor(focusProgress.value, [0, 1], [colors.border, colors.primary]),
+    borderWidth: error ? 2 : Animated9.interpolate(focusProgress.value, [0, 1], [1, 2])
   }));
   return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles14.container, containerStyle] }, label ? /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles14.label, { color: colors.foreground }], allowFontScaling: true }, label) : null, /* @__PURE__ */ React26__default.default.createElement(
     Animated9__default.default.View,
     {
       style: [
         styles14.inputWrapper,
-        { backgroundColor: colors.background },
-        borderColorStyle
+        { backgroundColor: colors.background }
       ]
     },
+    /* @__PURE__ */ React26__default.default.createElement(Animated9__default.default.View, { style: [styles14.borderOverlay, borderAnimStyle], pointerEvents: "none" }),
     resolvedPrefixIcon ? /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles14.prefixIcon }, resolvedPrefixIcon) : null,
     /* @__PURE__ */ React26__default.default.createElement(
       reactNative.TextInput,
@@ -1580,32 +1645,37 @@ var styles14 = reactNative.StyleSheet.create({
     gap: vs(4)
   },
   label: {
-    fontFamily: "Poppins-Medium",
+    fontFamily: "Sohne-Medium",
     fontSize: ms(13),
     lineHeight: vs(18),
     marginBottom: vs(2)
   },
   inputWrapper: {
-    borderWidth: 2,
+    // Border lives on borderOverlay (absolute); wrapper carries none so the
+    // focus weight change never reflows content.
     borderRadius: 8,
     paddingHorizontal: s(14),
     paddingVertical: vs(11),
     gap: s(8)
   },
+  borderOverlay: {
+    ...reactNative.StyleSheet.absoluteFillObject,
+    borderRadius: 8
+  },
   prefixIcon: {
     alignItems: "flex-start",
     justifyContent: "flex-start",
     paddingTop: vs(2)
   },
   input: {
-    fontFamily: "Poppins-Regular",
+    fontFamily: "Sohne-Regular",
     fontSize: ms(14),
     lineHeight: vs(22),
     padding: 0,
     margin: 0
   },
   helperText: {
-    fontFamily: "Poppins-Regular",
+    fontFamily: "Sohne-Regular",
     fontSize: ms(12),
     lineHeight: vs(16),
     marginTop: vs(4)
@@ -1632,38 +1702,37 @@ function Checkbox({
   const checkStyle = Animated9.useAnimatedStyle(() => ({
     opacity: Animated9.withTiming(checked ? 1 : 0, { duration: TIMINGS.state.duration, easing: EASINGS.standard })
   }));
-  return /* @__PURE__ */ React26__default.default.createElement(
-    reactNative.TouchableOpacity,
-    {
-      style: [styles15.row, style],
-      onPress: () => {
-        selectionAsync();
-        onCheckedChange?.(!checked);
-      },
-      onPressIn,
-      onPressOut,
-      disabled,
-      activeOpacity: 1,
-      touchSoundDisabled: true,
-      accessibilityRole: "checkbox",
-      accessibilityLabel: accessibilityLabel ?? label,
-      accessibilityState: { checked, disabled: !!disabled }
-    },
-    /* @__PURE__ */ React26__default.default.createElement(Animated9__default.default.View, { style: scaleStyle }, /* @__PURE__ */ React26__default.default.createElement(
-      Animated9__default.default.View,
-      {
-        style: [styles15.box, { opacity: disabled ? 0.45 : 1 }, boxStyle]
-      },
-      /* @__PURE__ */ React26__default.default.createElement(Animated9__default.default.View, { style: checkStyle }, /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles15.checkmark, { borderColor: colors.primaryForeground }] }))
-    )),
-    label ? /* @__PURE__ */ React26__default.default.createElement(
-      reactNative.Text,
+  return (
+    // AUDIT FIX: opacity was applied only to the box, leaving the label at full
+    // opacity when disabled — a contradictory visual signal. Now the entire row
+    // dims uniformly so label and control communicate the same disabled state.
+    /* @__PURE__ */ React26__default.default.createElement(
+      reactNative.TouchableOpacity,
       {
-        style: [styles15.label, { color: disabled ? colors.foregroundMuted : colors.foreground }],
-        allowFontScaling: true
+        style: [styles15.row, disabled && styles15.rowDisabled, style],
+        onPress: () => {
+          selectionAsync();
+          onCheckedChange?.(!checked);
+        },
+        onPressIn,
+        onPressOut,
+        disabled,
+        activeOpacity: 1,
+        touchSoundDisabled: true,
+        accessibilityRole: "checkbox",
+        accessibilityLabel: accessibilityLabel ?? label,
+        accessibilityState: { checked, disabled: !!disabled }
       },
-      label
-    ) : null
+      /* @__PURE__ */ React26__default.default.createElement(Animated9__default.default.View, { style: scaleStyle }, /* @__PURE__ */ React26__default.default.createElement(Animated9__default.default.View, { style: [styles15.box, boxStyle] }, /* @__PURE__ */ React26__default.default.createElement(Animated9__default.default.View, { style: checkStyle }, /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles15.checkmark, { borderColor: colors.primaryForeground }] })))),
+      label ? /* @__PURE__ */ React26__default.default.createElement(
+        reactNative.Text,
+        {
+          style: [styles15.label, { color: colors.foreground }],
+          allowFontScaling: true
+        },
+        label
+      ) : null
+    )
   );
 }
 var styles15 = reactNative.StyleSheet.create({
@@ -1672,6 +1741,10 @@ var styles15 = reactNative.StyleSheet.create({
     alignItems: "center",
     gap: s(12)
   },
+  // AUDIT FIX: was inline opacity on the box only
+  rowDisabled: {
+    opacity: 0.45
+  },
   box: {
     width: s(24),
     height: s(24),
@@ -1688,7 +1761,7 @@ var styles15 = reactNative.StyleSheet.create({
     transform: [{ rotate: "-45deg" }, { translateY: -1 }]
   },
   label: {
-    fontFamily: "Poppins-Regular",
+    fontFamily: "Sohne-Regular",
     fontSize: ms(14),
     lineHeight: mvs(20)
   }
@@ -1715,13 +1788,21 @@ function Switch({ checked = false, onCheckedChange, disabled, style, accessibili
       [colors.surfaceStrong, colors.primary]
     )
   }));
+  const trackBorderStyle = Animated9.useAnimatedStyle(() => ({
+    borderWidth: 1.5,
+    borderColor: Animated9.interpolateColor(
+      progress.value,
+      [0, 1],
+      [colors.border, "transparent"]
+    )
+  }));
   const checkIconStyle = Animated9.useAnimatedStyle(() => ({
     opacity: Animated9.withTiming(checked ? 1 : 0, { duration: TIMINGS.state.duration, easing: EASINGS.standard })
   }));
   const crossIconStyle = Animated9.useAnimatedStyle(() => ({
     opacity: Animated9.withTiming(checked ? 0 : 1, { duration: TIMINGS.state.duration, easing: EASINGS.standard })
   }));
-  return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [{ opacity: disabled ? 0.45 : 1 }, style] }, /* @__PURE__ */ React26__default.default.createElement(
+  return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [{ opacity: disabled ? 0.45 : 1, alignSelf: "flex-start" }, style] }, /* @__PURE__ */ React26__default.default.createElement(
     reactNative.TouchableOpacity,
     {
       onPress: () => {
@@ -1733,9 +1814,10 @@ function Switch({ checked = false, onCheckedChange, disabled, style, accessibili
       touchSoundDisabled: true,
       accessibilityRole: "switch",
       accessibilityLabel,
-      accessibilityState: { checked, disabled: !!disabled }
+      accessibilityState: { checked, disabled: !!disabled },
+      style: styles16.touchable
     },
-    /* @__PURE__ */ React26__default.default.createElement(Animated9__default.default.View, { style: [styles16.track, trackStyle] }, /* @__PURE__ */ React26__default.default.createElement(
+    /* @__PURE__ */ React26__default.default.createElement(Animated9__default.default.View, { style: [styles16.track, trackStyle] }, /* @__PURE__ */ React26__default.default.createElement(Animated9__default.default.View, { style: [styles16.trackBorder, trackBorderStyle], pointerEvents: "none" }), /* @__PURE__ */ React26__default.default.createElement(
       Animated9__default.default.View,
       {
         style: [styles16.thumb, { backgroundColor: colors.primaryForeground }, thumbStyle]
@@ -1746,11 +1828,18 @@ function Switch({ checked = false, onCheckedChange, disabled, style, accessibili
   ));
 }
 var styles16 = reactNative.StyleSheet.create({
+  touchable: {
+    alignSelf: "flex-start"
+  },
   track: {
     width: TRACK_WIDTH,
     height: TRACK_HEIGHT,
     borderRadius: TRACK_HEIGHT / 2
   },
+  trackBorder: {
+    ...reactNative.StyleSheet.absoluteFillObject,
+    borderRadius: TRACK_HEIGHT / 2
+  },
   thumb: {
     position: "absolute",
     top: THUMB_OFFSET,
@@ -1767,9 +1856,28 @@ var styles16 = reactNative.StyleSheet.create({
     justifyContent: "center"
   },
   iconWrapper: {
-    position: "absolute"
+    position: "absolute",
+    alignItems: "center",
+    justifyContent: "center"
   }
 });
+function ToggleIcon({ pressed, iconName, activeIconName, icon, activeIcon, iconColor, activeIconColor, iconSize, primaryColor, mutedColor }) {
+  const renderProp = (prop) => {
+    if (!prop) return null;
+    if (typeof prop === "function") return prop(pressed);
+    return prop;
+  };
+  if (pressed) {
+    if (activeIconName) return /* @__PURE__ */ React26__default.default.createElement(React26__default.default.Fragment, null, renderIcon(activeIconName, iconSize, activeIconColor ?? primaryColor));
+    const active = renderProp(activeIcon);
+    if (active) return /* @__PURE__ */ React26__default.default.createElement(React26__default.default.Fragment, null, active);
+    return /* @__PURE__ */ React26__default.default.createElement(vectorIcons.FontAwesome5, { name: "check-circle", size: iconSize, color: primaryColor });
+  }
+  if (iconName) return /* @__PURE__ */ React26__default.default.createElement(React26__default.default.Fragment, null, renderIcon(iconName, iconSize, iconColor ?? mutedColor));
+  const custom = renderProp(icon);
+  if (custom) return /* @__PURE__ */ React26__default.default.createElement(React26__default.default.Fragment, null, custom);
+  return /* @__PURE__ */ React26__default.default.createElement(vectorIcons.FontAwesome5, { name: "circle", size: iconSize, color: mutedColor });
+}
 var sizeStyles = {
   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) },
@@ -1808,23 +1916,6 @@ function Toggle({
     color: Animated9.interpolateColor(progress.value, [0, 1], [colors.foreground, colors.primary])
   }));
   const iconSize = iconSizeMap2[size];
-  const LeftIcon = () => {
-    const renderProp = (prop) => {
-      if (!prop) return null;
-      if (typeof prop === "function") return prop(pressed);
-      return prop;
-    };
-    if (pressed) {
-      if (activeIconName) return /* @__PURE__ */ React26__default.default.createElement(React26__default.default.Fragment, null, renderIcon(activeIconName, iconSize, activeIconColor ?? colors.primary));
-      const active = renderProp(activeIcon);
-      if (active) return /* @__PURE__ */ React26__default.default.createElement(React26__default.default.Fragment, null, active);
-      return /* @__PURE__ */ React26__default.default.createElement(vectorIcons.FontAwesome5, { name: "check-circle", size: iconSize, color: colors.primary });
-    }
-    if (iconName) return /* @__PURE__ */ React26__default.default.createElement(React26__default.default.Fragment, null, renderIcon(iconName, iconSize, iconColor ?? colors.foregroundMuted));
-    const custom = renderProp(icon);
-    if (custom) return /* @__PURE__ */ React26__default.default.createElement(React26__default.default.Fragment, null, custom);
-    return /* @__PURE__ */ React26__default.default.createElement(vectorIcons.FontAwesome5, { name: "circle", size: iconSize, color: colors.foregroundMuted });
-  };
   return /* @__PURE__ */ React26__default.default.createElement(
     Animated9__default.default.View,
     {
@@ -1858,7 +1949,21 @@ function Toggle({
             surfaceStyle
           ]
         },
-        /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles17.inner }, /* @__PURE__ */ React26__default.default.createElement(LeftIcon, null), label ? /* @__PURE__ */ React26__default.default.createElement(Animated9__default.default.Text, { style: [styles17.label, textStyle], allowFontScaling: true }, label) : null)
+        /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles17.inner }, /* @__PURE__ */ React26__default.default.createElement(
+          ToggleIcon,
+          {
+            pressed,
+            iconName,
+            activeIconName,
+            icon,
+            activeIcon,
+            iconColor,
+            activeIconColor,
+            iconSize,
+            primaryColor: colors.primary,
+            mutedColor: colors.foregroundMuted
+          }
+        ), label ? /* @__PURE__ */ React26__default.default.createElement(Animated9__default.default.Text, { style: [styles17.label, textStyle], allowFontScaling: true }, label) : null)
       )
     )
   );
@@ -1877,7 +1982,7 @@ var styles17 = reactNative.StyleSheet.create({
     opacity: 0.45
   },
   label: {
-    fontFamily: "Poppins-Medium",
+    fontFamily: "Sohne-Medium",
     fontSize: ms(14)
   }
 });
@@ -1903,46 +2008,38 @@ function RadioItem({
     transform: [{ scale: dotScale.value }],
     opacity: dotScale.value
   }));
-  return /* @__PURE__ */ React26__default.default.createElement(
-    reactNative.TouchableOpacity,
-    {
-      style: styles18.row,
-      onPress: () => {
-        if (!option.disabled) {
-          selectionAsync();
-          onSelect();
-        }
-      },
-      onPressIn,
-      onPressOut,
-      activeOpacity: 1,
-      touchSoundDisabled: true,
-      disabled: option.disabled,
-      accessibilityRole: "radio",
-      accessibilityLabel: option.label,
-      accessibilityState: { checked: selected, disabled: !!option.disabled }
-    },
-    /* @__PURE__ */ React26__default.default.createElement(Animated9__default.default.View, { style: scaleStyle }, /* @__PURE__ */ React26__default.default.createElement(
-      Animated9__default.default.View,
-      {
-        style: [
-          styles18.radio,
-          { opacity: option.disabled ? 0.45 : 1 },
-          radioStyle
-        ]
-      },
-      /* @__PURE__ */ React26__default.default.createElement(Animated9__default.default.View, { style: [styles18.dot, { backgroundColor: colors.primary }, dotStyle] })
-    )),
+  return (
+    // AUDIT FIX: opacity was applied only to the radio circle, leaving the label
+    // at full opacity when disabled. The whole row now dims uniformly so users
+    // get a single, consistent disabled signal across the entire item.
     /* @__PURE__ */ React26__default.default.createElement(
-      reactNative.Text,
+      reactNative.TouchableOpacity,
       {
-        style: [
-          styles18.label,
-          { color: option.disabled ? colors.foregroundMuted : colors.foreground }
-        ],
-        allowFontScaling: true
+        style: [styles18.row, option.disabled && styles18.rowDisabled],
+        onPress: () => {
+          if (!option.disabled) {
+            selectionAsync();
+            onSelect();
+          }
+        },
+        onPressIn,
+        onPressOut,
+        activeOpacity: 1,
+        touchSoundDisabled: true,
+        disabled: option.disabled,
+        accessibilityRole: "radio",
+        accessibilityLabel: option.label,
+        accessibilityState: { checked: selected, disabled: !!option.disabled }
       },
-      option.label
+      /* @__PURE__ */ React26__default.default.createElement(Animated9__default.default.View, { style: scaleStyle }, /* @__PURE__ */ React26__default.default.createElement(Animated9__default.default.View, { style: [styles18.radio, radioStyle] }, /* @__PURE__ */ React26__default.default.createElement(Animated9__default.default.View, { style: [styles18.dot, { backgroundColor: colors.primary }, dotStyle] }))),
+      /* @__PURE__ */ React26__default.default.createElement(
+        reactNative.Text,
+        {
+          style: [styles18.label, { color: colors.foreground }],
+          allowFontScaling: true
+        },
+        option.label
+      )
     )
   );
 }
@@ -1985,6 +2082,10 @@ var styles18 = reactNative.StyleSheet.create({
     alignItems: "center",
     gap: s(12)
   },
+  // AUDIT FIX: was opacity on the inner circle only
+  rowDisabled: {
+    opacity: 0.45
+  },
   radio: {
     width: s(24),
     height: s(24),
@@ -1999,7 +2100,7 @@ var styles18 = reactNative.StyleSheet.create({
     borderRadius: s(5)
   },
   label: {
-    fontFamily: "Poppins-Regular",
+    fontFamily: "Sohne-Regular",
     fontSize: ms(14),
     lineHeight: mvs(20)
   }
@@ -2039,8 +2140,11 @@ function TabTrigger({
       {
         style: [
           styles19.triggerLabel,
-          { color: isActive ? colors.foreground : colors.foregroundMuted },
-          isActive && (isUnderline ? styles19.activeTriggerLabelUnderline : styles19.activeTriggerLabel)
+          // AUDIT FIX: active state now only changes color, never font metrics.
+          // Previously: inactive=Regular, active=Medium (pill) or SemiBold+fontSize14 (underline)
+          // The weight/size change caused measurable layout reflow every tab switch.
+          // Solution: all labels render at SemiBold always; active = foreground, inactive = foregroundMuted.
+          { color: isActive ? colors.foreground : colors.foregroundMuted }
         ],
         allowFontScaling: true
       },
@@ -2056,7 +2160,7 @@ function Tabs({ tabs, variant = "pill", value, onValueChange, children, style })
   const pillX = Animated9.useSharedValue(0);
   const pillWidth = Animated9.useSharedValue(0);
   const initialised = React26.useRef(false);
-  const animatePill = (tabValue, animate) => {
+  const animatePill = React26.useCallback((tabValue, animate) => {
     const layout = tabLayouts.current[tabValue];
     if (!layout) return;
     if (animate) {
@@ -2066,10 +2170,10 @@ function Tabs({ tabs, variant = "pill", value, onValueChange, children, style })
       pillX.value = layout.x;
       pillWidth.value = layout.width;
     }
-  };
+  }, [pillX, pillWidth]);
   React26.useEffect(() => {
     if (initialised.current) animatePill(active, true);
-  }, [active]);
+  }, [active, animatePill]);
   const handlePress = (v) => {
     selectionAsync();
     if (!value) setInternal(v);
@@ -2142,6 +2246,8 @@ var styles19 = reactNative.StyleSheet.create({
   },
   listUnderline: {
     flexDirection: "row",
+    // AUDIT FIX: was missing borderBottomColor — the 1px hairline would render
+    // as transparent on some platforms. Explicit token reference ensures visibility.
     borderBottomWidth: 1
   },
   pill: {},
@@ -2168,16 +2274,14 @@ var styles19 = reactNative.StyleSheet.create({
     justifyContent: "center",
     gap: s(4)
   },
+  // AUDIT FIX: was Sohne-Regular at rest, Sohne-Medium/SemiBold when active.
+  // Font-weight changes at runtime cause advance-width shifts → the tab bar would
+  // visibly jump/reflow on every selection. Now always SemiBold; active state
+  // is communicated by color alone (foreground vs foregroundMuted). The pill
+  // indicator provides additional active signal without text layout side-effects.
   triggerLabel: {
-    fontFamily: "Poppins-Regular",
+    fontFamily: "Sohne-SemiBold",
     fontSize: ms(13)
-  },
-  activeTriggerLabel: {
-    fontFamily: "Poppins-Medium"
-  },
-  activeTriggerLabelUnderline: {
-    fontFamily: "Poppins-SemiBold",
-    fontSize: ms(14)
   }
 });
 function AccordionItemComponent({
@@ -2191,7 +2295,7 @@ function AccordionItemComponent({
   const height = Animated9.useSharedValue(0);
   React26__default.default.useEffect(() => {
     isExpanded.value = isOpen;
-  }, [isOpen]);
+  }, [isOpen, isExpanded]);
   const derivedHeight = Animated9.useDerivedValue(
     () => Animated9.withTiming(height.value * Number(isExpanded.value), {
       duration: isExpanded.value ? TIMINGS.expand.duration : TIMINGS.collapse.duration,
@@ -2287,7 +2391,7 @@ var styles20 = reactNative.StyleSheet.create({
     justifyContent: "center"
   },
   triggerText: {
-    fontFamily: "Poppins-Medium",
+    fontFamily: "Sohne-Medium",
     fontSize: ms(14)
   },
   chevron: {
@@ -2296,7 +2400,7 @@ var styles20 = reactNative.StyleSheet.create({
   // position:'absolute' is the key — the inner View escapes the animated wrapper's
   // clipped height so onLayout always reports the true content height.
   content: {
-    paddingHorizontal: s(14),
+    paddingHorizontal: s(8),
     paddingBottom: vs(12),
     position: "absolute",
     width: "100%"
@@ -2368,11 +2472,11 @@ var styles21 = reactNative.StyleSheet.create({
     alignItems: "center"
   },
   label: {
-    fontFamily: "Poppins-Medium",
+    fontFamily: "Sohne-Medium",
     fontSize: ms(15)
   },
   valueText: {
-    fontFamily: "Poppins-Medium",
+    fontFamily: "Sohne-Medium",
     fontSize: ms(14)
   },
   slider: {
@@ -2386,6 +2490,16 @@ var styles21 = reactNative.StyleSheet.create({
 var SCREEN_HEIGHT = reactNative.Dimensions.get("window").height;
 var DEFAULT_MAX_HEIGHT = SCREEN_HEIGHT * 0.85;
 var isAndroid = reactNative.Platform.OS === "android";
+function SheetHeader({ children, style }) {
+  return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles22.header, style] }, children);
+}
+function SheetContent({ children, style }) {
+  return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles22.sheetContent, style] }, children);
+}
+function SheetFooter({ children, style }) {
+  const { colors } = useTheme();
+  return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles22.sheetFooter, { backgroundColor: colors.card, borderTopColor: colors.border }, style] }, children);
+}
 function Sheet({
   open,
   onClose,
@@ -2426,13 +2540,16 @@ function Sheet({
       pressBehavior: "close"
     }
   ), []);
-  const renderFooter = React26.useCallback((props) => {
-    if (!footer) return null;
-    return /* @__PURE__ */ React26__default.default.createElement(bottomSheet.BottomSheetFooter, { ...props }, footer);
-  }, [footer]);
+  const childArray = React26__default.default.Children.toArray(children);
+  const customHeader = childArray.find((child) => React26__default.default.isValidElement(child) && child.type === SheetHeader);
+  const customContent = childArray.find((child) => React26__default.default.isValidElement(child) && child.type === SheetContent);
+  const customFooter = childArray.find((child) => React26__default.default.isValidElement(child) && child.type === SheetFooter);
+  const filteredChildren = customHeader || customContent || customFooter ? childArray.filter(
+    (child) => !React26__default.default.isValidElement(child) || child.type !== SheetHeader && child.type !== SheetContent && child.type !== SheetFooter
+  ) : children;
   const effectiveSubtitle = subtitle ?? description;
-  const showHeader = !!(title || effectiveSubtitle || showCloseButton);
-  const headerNode = showHeader ? /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles22.header, accessibilityRole: "header" }, /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles22.headerRow }, title ? /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles22.title, { color: colors.foreground }], allowFontScaling: true }, title) : /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: { flex: 1 } }), showCloseButton ? /* @__PURE__ */ React26__default.default.createElement(
+  const showHeader = !!(title || effectiveSubtitle || showCloseButton) && !customHeader;
+  const headerNode = customHeader ? customHeader : showHeader ? /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles22.header, accessibilityRole: "header" }, /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles22.headerRow }, title ? /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles22.title, { color: colors.foreground }], allowFontScaling: true }, title) : /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: { flex: 1 } }), showCloseButton ? /* @__PURE__ */ React26__default.default.createElement(
     reactNative.TouchableOpacity,
     {
       onPress: onClose,
@@ -2445,6 +2562,12 @@ function Sheet({
     },
     /* @__PURE__ */ React26__default.default.createElement(vectorIcons.AntDesign, { name: "close", size: ms(18), color: colors.foregroundMuted })
   ) : null), effectiveSubtitle ? /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles22.subtitle, { color: colors.foregroundMuted }], allowFontScaling: true }, effectiveSubtitle) : null) : null;
+  const contentNode = customContent ? customContent : filteredChildren;
+  const effectiveFooter = customFooter ? customFooter : footer;
+  const renderFooter = React26.useCallback((props) => {
+    if (!effectiveFooter) return null;
+    return /* @__PURE__ */ React26__default.default.createElement(bottomSheet.BottomSheetFooter, { ...props }, effectiveFooter);
+  }, [effectiveFooter]);
   const useScroll = scrollable || !!maxHeight;
   const effectiveMaxHeight = maxHeight ?? DEFAULT_MAX_HEIGHT;
   const useDynamicSizing = !snapPoints;
@@ -2457,7 +2580,7 @@ function Sheet({
       maxDynamicContentSize: useDynamicSizing ? effectiveMaxHeight : void 0,
       onDismiss: onClose,
       backdropComponent: renderBackdrop,
-      footerComponent: footer ? renderFooter : void 0,
+      footerComponent: effectiveFooter ? renderFooter : void 0,
       backgroundStyle: [styles22.background, { backgroundColor: colors.card }],
       handleIndicatorStyle: [styles22.handle, { backgroundColor: colors.border }],
       enablePanDownToClose: true,
@@ -2480,10 +2603,13 @@ function Sheet({
         persistentScrollbar: isAndroid
       },
       headerNode,
-      children
-    ) : /* @__PURE__ */ React26__default.default.createElement(bottomSheet.BottomSheetView, { style: [styles22.content, contentStyle, style] }, headerNode, children)
+      contentNode
+    ) : /* @__PURE__ */ React26__default.default.createElement(bottomSheet.BottomSheetView, { style: [styles22.content, contentStyle, style] }, headerNode, contentNode)
   );
 }
+Sheet.Header = SheetHeader;
+Sheet.Content = SheetContent;
+Sheet.Footer = SheetFooter;
 var styles22 = reactNative.StyleSheet.create({
   background: {
     borderTopLeftRadius: ms(16),
@@ -2506,12 +2632,12 @@ var styles22 = reactNative.StyleSheet.create({
     justifyContent: "space-between"
   },
   title: {
-    fontFamily: "Poppins-SemiBold",
+    fontFamily: "Sohne-SemiBold",
     fontSize: ms(18),
     flex: 1
   },
   subtitle: {
-    fontFamily: "Poppins-Regular",
+    fontFamily: "Sohne-Regular",
     fontSize: ms(14),
     lineHeight: mvs(20)
   },
@@ -2527,6 +2653,16 @@ var styles22 = reactNative.StyleSheet.create({
     paddingHorizontal: s(16),
     paddingBottom: vs(32),
     paddingRight: s(16)
+  },
+  sheetContent: {
+    gap: vs(16)
+  },
+  sheetFooter: {
+    paddingHorizontal: s(16),
+    paddingVertical: vs(16),
+    borderTopWidth: 1,
+    flexDirection: "row",
+    gap: s(12)
   }
 });
 var isIOS = reactNative.Platform.OS === "ios";
@@ -2559,7 +2695,7 @@ function Select({
       setPendingValue(value);
       setPickerVisible(true);
     } else if (isAndroid2) {
-      pickerRef.current?.focus();
+      pickerRef.current?.focus?.();
     }
   };
   const handleDismiss = () => {
@@ -2696,7 +2832,7 @@ var styles23 = reactNative.StyleSheet.create({
     gap: vs(8)
   },
   label: {
-    fontFamily: "Poppins-Medium",
+    fontFamily: "Sohne-Medium",
     fontSize: ms(13)
   },
   trigger: {
@@ -2709,7 +2845,7 @@ var styles23 = reactNative.StyleSheet.create({
     paddingVertical: vs(11)
   },
   triggerText: {
-    fontFamily: "Poppins-Regular",
+    fontFamily: "Sohne-Regular",
     fontSize: ms(15),
     flex: 1
   },
@@ -2717,7 +2853,7 @@ var styles23 = reactNative.StyleSheet.create({
     marginLeft: s(8)
   },
   helperText: {
-    fontFamily: "Poppins-Regular",
+    fontFamily: "Sohne-Regular",
     fontSize: ms(13)
   },
   iosBackdrop: {
@@ -2738,14 +2874,14 @@ var styles23 = reactNative.StyleSheet.create({
     borderBottomWidth: 1
   },
   iosToolbarTitle: {
-    fontFamily: "Poppins-SemiBold",
+    fontFamily: "Sohne-SemiBold",
     fontSize: ms(17)
   },
   iosDoneBtn: {
     padding: s(4)
   },
   iosDoneBtnText: {
-    fontFamily: "Poppins-SemiBold",
+    fontFamily: "Sohne-SemiBold",
     fontSize: ms(17)
   },
   androidHiddenPicker: {
@@ -2775,7 +2911,7 @@ function ToastProvider({ children }) {
     {
       theme: colorScheme,
       position: "top-center",
-      richColors: false,
+      richColors: true,
       gap: vs(8),
       offset: insets.top + vs(8),
       visibleToasts: 3,
@@ -2789,11 +2925,11 @@ function ToastProvider({ children }) {
           paddingVertical: vs(10)
         },
         titleStyle: {
-          fontFamily: "Poppins-Medium",
+          fontFamily: "Sohne-Medium",
           fontSize: ms(13)
         },
         descriptionStyle: {
-          fontFamily: "Poppins-Regular",
+          fontFamily: "Sohne-Regular",
           fontSize: ms(12),
           opacity: 0.85
         }
@@ -2831,7 +2967,7 @@ function CurrencyInput({
     const raw = parseFloat(formatted.replace(separatorRegex, "") || "0");
     onChangeValue?.(isNaN(raw) ? 0 : raw);
   };
-  const inputStyle = size === "large" ? { fontFamily: "Poppins-Regular", fontSize: ms(36) } : { fontFamily: "Poppins-Regular" };
+  const inputStyle = size === "large" ? { fontFamily: "Sohne-Regular", fontSize: ms(36) } : { fontFamily: "Sohne-Regular" };
   const dollarIcon = renderIcon("dollar-sign", size === "large" ? 24 : 16, colors.foregroundMuted);
   const displayValue = value && prefix && value.startsWith(prefix) ? value.slice(prefix.length) : value;
   return /* @__PURE__ */ React26__default.default.createElement(
@@ -2876,7 +3012,7 @@ function formatValue(value, prefix, showDecimals) {
   }
   return `${sign}${prefix}${intPart}`;
 }
-function CurrencyDisplay({ value, prefix = "$", showDecimals = false, textColor, variant, autoScale, maxFontSize, style }) {
+function CurrencyDisplayBase({ value, prefix = "$", showDecimals = false, textColor, variant, autoScale, maxFontSize, style }) {
   const { colors } = useTheme();
   const formatted = formatValue(value, prefix, showDecimals);
   const baseFontSize = variant ? variantFontSize[variant] : ms(56);
@@ -2894,17 +3030,18 @@ function CurrencyDisplay({ value, prefix = "$", showDecimals = false, textColor,
     formatted
   ));
 }
+var CurrencyDisplay = React26__default.default.memo(CurrencyDisplayBase);
 var styles24 = reactNative.StyleSheet.create({
   container: {
     alignSelf: "flex-start"
   },
   amount: {
-    fontFamily: "Poppins-Bold",
+    fontFamily: "Sohne-Bold",
     includeFontPadding: false,
     textAlignVertical: "top"
   }
 });
-function ListItem({
+function ListItemBase({
   leftRender,
   rightRender,
   trailing,
@@ -3005,19 +3142,17 @@ function ListItem({
     {
       style: [
         styles25.separator,
-        {
-          backgroundColor: colors.border,
-          marginLeft: effectiveLeft ? s(44) + s(12) : 0
-        }
+        { backgroundColor: colors.separator }
       ]
     }
   ) : null);
 }
+var ListItem = React26__default.default.memo(ListItemBase);
 var styles25 = reactNative.StyleSheet.create({
   container: {
     flexDirection: "row",
     alignItems: "center",
-    paddingHorizontal: 0,
+    paddingHorizontal: s(16),
     paddingVertical: vs(10),
     gap: s(12)
   },
@@ -3033,17 +3168,17 @@ var styles25 = reactNative.StyleSheet.create({
     gap: vs(4)
   },
   title: {
-    fontFamily: "Poppins-Medium",
+    fontFamily: "Sohne-Medium",
     fontSize: ms(15),
     lineHeight: mvs(22)
   },
   subtitle: {
-    fontFamily: "Poppins-Regular",
+    fontFamily: "Sohne-Regular",
     fontSize: ms(13),
     lineHeight: mvs(18)
   },
   caption: {
-    fontFamily: "Poppins-Regular",
+    fontFamily: "Sohne-Regular",
     fontSize: ms(12),
     lineHeight: mvs(16),
     opacity: 0.7
@@ -3055,7 +3190,7 @@ var styles25 = reactNative.StyleSheet.create({
     maxWidth: s(160)
   },
   rightText: {
-    fontFamily: "Poppins-Regular",
+    fontFamily: "Sohne-Regular",
     fontSize: ms(14)
   },
   separator: {
@@ -3066,7 +3201,81 @@ var styles25 = reactNative.StyleSheet.create({
     opacity: 0.45
   }
 });
-function MenuItem({
+function ListGroup({ children, variant = "plain", style }) {
+  const { colors } = useTheme();
+  const processedChildren = React26__default.default.Children.map(children, (child, index) => {
+    if (!React26__default.default.isValidElement(child)) return child;
+    if (child.type === ListGroupHeader || child.type === ListGroupFooter) {
+      return child;
+    }
+    const childProps = child.props;
+    const isListItem = "title" in childProps;
+    if (!isListItem) return child;
+    const isLast = index === React26__default.default.Children.count(children) - 1;
+    if (childProps["showSeparator"] === void 0 && !isLast) {
+      return React26__default.default.cloneElement(child, {
+        showSeparator: true
+      });
+    }
+    return child;
+  });
+  const cardStyle = variant === "card" ? {
+    backgroundColor: colors.card,
+    borderRadius: RADIUS.md,
+    borderWidth: 1,
+    borderColor: colors.border,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.06,
+    shadowRadius: 6,
+    elevation: 2,
+    paddingVertical: vs(4)
+  } : {};
+  return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles26.container, cardStyle, style] }, processedChildren);
+}
+function ListGroupHeader({ children, style }) {
+  const { colors } = useTheme();
+  if (typeof children === "string") {
+    return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles26.header, { borderBottomColor: colors.separator }, style] }, /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles26.headerText, { color: colors.foregroundMuted }], allowFontScaling: true }, children));
+  }
+  return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles26.header, { borderBottomColor: colors.separator }, style] }, children);
+}
+function ListGroupFooter({ children, style }) {
+  const { colors } = useTheme();
+  if (typeof children === "string") {
+    return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles26.footer, style] }, /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles26.footerText, { color: colors.foregroundMuted }], allowFontScaling: true }, children));
+  }
+  return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles26.footer, style] }, children);
+}
+ListGroup.Header = ListGroupHeader;
+ListGroup.Footer = ListGroupFooter;
+var styles26 = reactNative.StyleSheet.create({
+  container: {
+    overflow: "hidden"
+  },
+  header: {
+    paddingHorizontal: s(16),
+    paddingTop: vs(12),
+    paddingBottom: vs(8),
+    borderBottomWidth: reactNative.StyleSheet.hairlineWidth
+  },
+  headerText: {
+    fontFamily: "Sohne-SemiBold",
+    fontSize: 13,
+    letterSpacing: 0.32,
+    textTransform: "uppercase"
+  },
+  footer: {
+    paddingHorizontal: s(16),
+    paddingTop: vs(8),
+    paddingBottom: vs(12)
+  },
+  footerText: {
+    fontFamily: "Sohne-Regular",
+    fontSize: 12
+  }
+});
+function MenuItemBase({
   label,
   subtitle,
   iconName,
@@ -3106,10 +3315,10 @@ function MenuItem({
     elevation: 2
   } : {};
   const a11yLabel = accessibilityLabel ?? (subtitle ? `${label}. ${subtitle}` : label);
-  return /* @__PURE__ */ React26__default.default.createElement(Animated9__default.default.View, { style: [animatedStyle, disabled && styles26.disabled], ...hoverHandlers }, /* @__PURE__ */ React26__default.default.createElement(
+  return /* @__PURE__ */ React26__default.default.createElement(Animated9__default.default.View, { style: [animatedStyle, disabled && styles27.disabled], ...hoverHandlers }, /* @__PURE__ */ React26__default.default.createElement(
     reactNative.TouchableOpacity,
     {
-      style: [styles26.container, cardStyle, style],
+      style: [styles27.container, cardStyle, style],
       onPress: handlePress,
       onPressIn,
       onPressOut,
@@ -3120,11 +3329,11 @@ function MenuItem({
       accessibilityLabel: a11yLabel,
       accessibilityState: { disabled }
     },
-    resolvedIcon ? /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles26.iconContainer }, resolvedIcon) : null,
-    /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles26.labelContainer }, /* @__PURE__ */ React26__default.default.createElement(
+    resolvedIcon ? /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles27.iconContainer }, resolvedIcon) : null,
+    /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles27.labelContainer }, /* @__PURE__ */ React26__default.default.createElement(
       reactNative.Text,
       {
-        style: [styles26.label, { color: colors.foreground }, labelStyle],
+        style: [styles27.label, { color: colors.foreground }, labelStyle],
         numberOfLines: 1,
         allowFontScaling: true
       },
@@ -3132,7 +3341,7 @@ function MenuItem({
     ), subtitle ? /* @__PURE__ */ React26__default.default.createElement(
       reactNative.Text,
       {
-        style: [styles26.subtitle, { color: colors.foregroundMuted }],
+        style: [styles27.subtitle, { color: colors.foregroundMuted }],
         numberOfLines: 1,
         allowFontScaling: true
       },
@@ -3141,7 +3350,7 @@ function MenuItem({
     rightRender !== void 0 ? /* @__PURE__ */ React26__default.default.createElement(
       reactNative.View,
       {
-        style: styles26.rightContainer,
+        style: styles27.rightContainer,
         onStartShouldSetResponder: () => true,
         onResponderRelease: () => {
         }
@@ -3152,21 +3361,18 @@ function MenuItem({
     reactNative.View,
     {
       style: [
-        styles26.separator,
-        {
-          backgroundColor: colors.border,
-          marginLeft: resolvedIcon ? s(22) + s(12) : 0,
-          opacity: 0.6
-        }
+        styles27.separator,
+        { backgroundColor: colors.separator }
       ]
     }
   ) : null);
 }
-var styles26 = reactNative.StyleSheet.create({
+var MenuItem = React26__default.default.memo(MenuItemBase);
+var styles27 = reactNative.StyleSheet.create({
   container: {
     flexDirection: "row",
     alignItems: "center",
-    paddingHorizontal: 0,
+    paddingHorizontal: s(16),
     paddingVertical: vs(16),
     minHeight: vs(54),
     gap: s(12)
@@ -3182,11 +3388,11 @@ var styles26 = reactNative.StyleSheet.create({
     justifyContent: "center"
   },
   label: {
-    fontFamily: "Poppins-Medium",
+    fontFamily: "Sohne-Medium",
     fontSize: ms(15)
   },
   subtitle: {
-    fontFamily: "Poppins-Regular",
+    fontFamily: "Sohne-Regular",
     fontSize: ms(12),
     marginTop: vs(1)
   },
@@ -3203,7 +3409,81 @@ var styles26 = reactNative.StyleSheet.create({
     opacity: 0.45
   }
 });
-function Chip({ label, selected = false, onPress, icon, iconName, style, accessibilityLabel }) {
+function MenuGroup({ children, variant = "plain", style }) {
+  const { colors } = useTheme();
+  const processedChildren = React26__default.default.Children.map(children, (child, index) => {
+    if (!React26__default.default.isValidElement(child)) return child;
+    if (child.type === MenuGroupHeader || child.type === MenuGroupFooter) {
+      return child;
+    }
+    const childProps = child.props;
+    const isMenuItem = "onPress" in childProps;
+    if (!isMenuItem) return child;
+    const isLast = index === React26__default.default.Children.count(children) - 1;
+    if (childProps["showSeparator"] === void 0 && !isLast) {
+      return React26__default.default.cloneElement(child, {
+        showSeparator: true
+      });
+    }
+    return child;
+  });
+  const cardStyle = variant === "card" ? {
+    backgroundColor: colors.card,
+    borderRadius: RADIUS.md,
+    borderWidth: 1,
+    borderColor: colors.border,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.06,
+    shadowRadius: 6,
+    elevation: 2,
+    paddingVertical: vs(4)
+  } : {};
+  return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles28.container, cardStyle, style] }, processedChildren);
+}
+function MenuGroupHeader({ children, style }) {
+  const { colors } = useTheme();
+  if (typeof children === "string") {
+    return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles28.header, { borderBottomColor: colors.separator }, style] }, /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles28.headerText, { color: colors.foregroundMuted }], allowFontScaling: true }, children));
+  }
+  return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles28.header, { borderBottomColor: colors.separator }, style] }, children);
+}
+function MenuGroupFooter({ children, style }) {
+  const { colors } = useTheme();
+  if (typeof children === "string") {
+    return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles28.footer, style] }, /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles28.footerText, { color: colors.foregroundMuted }], allowFontScaling: true }, children));
+  }
+  return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles28.footer, style] }, children);
+}
+MenuGroup.Header = MenuGroupHeader;
+MenuGroup.Footer = MenuGroupFooter;
+var styles28 = reactNative.StyleSheet.create({
+  container: {
+    overflow: "hidden"
+  },
+  header: {
+    paddingHorizontal: s(16),
+    paddingTop: vs(12),
+    paddingBottom: vs(8),
+    borderBottomWidth: reactNative.StyleSheet.hairlineWidth
+  },
+  headerText: {
+    fontFamily: "Sohne-SemiBold",
+    fontSize: 13,
+    letterSpacing: 0.32,
+    textTransform: "uppercase"
+  },
+  footer: {
+    paddingHorizontal: s(16),
+    paddingTop: vs(8),
+    paddingBottom: vs(12)
+  },
+  footerText: {
+    fontFamily: "Sohne-Regular",
+    fontSize: 12
+  }
+});
+function ChipBase({ label, selected = false, onPress, icon, iconName, style, accessibilityLabel }) {
   const { colors } = useTheme();
   const { animatedStyle: scaleStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
     pressScale: PRESS_SCALE.chip
@@ -3221,7 +3501,7 @@ function Chip({ label, selected = false, onPress, icon, iconName, style, accessi
     onPress?.();
   };
   const resolvedIcon = iconName ? renderIcon(iconName, ms(13), selected ? colors.primaryForeground : colors.foreground) : icon;
-  return /* @__PURE__ */ React26__default.default.createElement(Animated9__default.default.View, { style: [styles27.wrapper, scaleStyle, style], ...hoverHandlers }, /* @__PURE__ */ React26__default.default.createElement(
+  return /* @__PURE__ */ React26__default.default.createElement(Animated9__default.default.View, { style: [styles29.wrapper, scaleStyle, style], ...hoverHandlers }, /* @__PURE__ */ React26__default.default.createElement(
     reactNative.TouchableOpacity,
     {
       onPress: handlePress,
@@ -3233,9 +3513,10 @@ function Chip({ label, selected = false, onPress, icon, iconName, style, accessi
       accessibilityLabel: accessibilityLabel ?? label,
       accessibilityState: { selected }
     },
-    /* @__PURE__ */ React26__default.default.createElement(Animated9__default.default.View, { style: [styles27.chip, surfaceStyle] }, resolvedIcon ? /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles27.chipIcon }, resolvedIcon) : null, /* @__PURE__ */ React26__default.default.createElement(Animated9__default.default.Text, { style: [styles27.label, textStyle], allowFontScaling: true }, label))
+    /* @__PURE__ */ React26__default.default.createElement(Animated9__default.default.View, { style: [styles29.chip, surfaceStyle] }, resolvedIcon ? /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles29.chipIcon }, resolvedIcon) : null, /* @__PURE__ */ React26__default.default.createElement(Animated9__default.default.Text, { style: [styles29.label, textStyle], allowFontScaling: true }, label))
   ));
 }
+var Chip = React26__default.default.memo(ChipBase);
 function ChipGroup({ options, value, onValueChange, multiSelect = false, style }) {
   const handlePress = (optionValue) => {
     if (!multiSelect) {
@@ -3248,12 +3529,10 @@ function ChipGroup({ options, value, onValueChange, multiSelect = false, style }
     onValueChange?.(newArray);
   };
   const isSelected = (optionValue) => {
-    if (Array.isArray(value)) {
-      return value.includes(optionValue);
-    }
+    if (Array.isArray(value)) return value.includes(optionValue);
     return optionValue === value;
   };
-  return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles27.group, style] }, options.map((opt) => /* @__PURE__ */ React26__default.default.createElement(
+  return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles29.group, style] }, options.map((opt) => /* @__PURE__ */ React26__default.default.createElement(
     Chip,
     {
       key: opt.value,
@@ -3261,28 +3540,35 @@ function ChipGroup({ options, value, onValueChange, multiSelect = false, style }
       selected: isSelected(opt.value),
       onPress: opt.disabled ? void 0 : () => handlePress(opt.value),
       iconName: opt.iconName,
-      style: opt.disabled ? { opacity: 0.4 } : void 0
+      style: opt.disabled ? styles29.chipDisabled : void 0,
+      accessibilityLabel: opt.disabled ? `${opt.label}, unavailable` : opt.label
     }
   )));
 }
-var styles27 = reactNative.StyleSheet.create({
+var styles29 = reactNative.StyleSheet.create({
   wrapper: {},
   chip: {
     borderRadius: 999,
     paddingHorizontal: s(14),
-    paddingVertical: vs(5),
+    // AUDIT FIX: was vs(5) → ~28px total height — below WCAG 44px tap target.
+    // vs(10) → ~44px total height meets WCAG 2.5.5 (AAA) minimum.
+    paddingVertical: vs(10),
+    minHeight: 44,
     borderWidth: 1,
     alignItems: "center",
     justifyContent: "center",
     flexDirection: "row",
     gap: s(5)
   },
+  chipDisabled: {
+    opacity: 0.4
+  },
   chipIcon: {
     alignItems: "center",
     justifyContent: "center"
   },
   label: {
-    fontFamily: "Poppins-Medium",
+    fontFamily: "Sohne-Medium",
     fontSize: ms(13),
     lineHeight: mvs(18)
   },
@@ -3328,11 +3614,11 @@ function ConfirmDialog({
       enableDynamicSizing: true,
       onDismiss: onCancel,
       backdropComponent: renderBackdrop,
-      backgroundStyle: [styles28.background, { backgroundColor: colors.card }],
-      handleIndicatorStyle: [styles28.handle, { backgroundColor: colors.border }],
+      backgroundStyle: [styles30.background, { backgroundColor: colors.card }],
+      handleIndicatorStyle: [styles30.handle, { backgroundColor: colors.border }],
       enablePanDownToClose: true
     },
-    /* @__PURE__ */ React26__default.default.createElement(bottomSheet.BottomSheetView, { style: styles28.content }, /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles28.title, { color: colors.foreground }], allowFontScaling: true }, title), description ? /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles28.description, { color: colors.foregroundMuted }], allowFontScaling: true }, description) : null, /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles28.actions }, /* @__PURE__ */ React26__default.default.createElement(
+    /* @__PURE__ */ React26__default.default.createElement(bottomSheet.BottomSheetView, { style: styles30.content }, /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles30.title, { color: colors.foreground }], allowFontScaling: true }, title), description ? /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles30.description, { color: colors.foregroundMuted }], allowFontScaling: true }, description) : null, /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles30.actions }, /* @__PURE__ */ React26__default.default.createElement(
       Button,
       {
         label: confirmLabel,
@@ -3366,7 +3652,7 @@ function ConfirmDialog({
     )))
   );
 }
-var styles28 = reactNative.StyleSheet.create({
+var styles30 = reactNative.StyleSheet.create({
   background: {
     borderTopLeftRadius: ms(16),
     borderTopRightRadius: ms(16)
@@ -3382,12 +3668,12 @@ var styles28 = reactNative.StyleSheet.create({
     gap: vs(12)
   },
   title: {
-    fontFamily: "Poppins-SemiBold",
+    fontFamily: "Sohne-SemiBold",
     fontSize: ms(18),
     lineHeight: mvs(26)
   },
   description: {
-    fontFamily: "Poppins-Regular",
+    fontFamily: "Sohne-Regular",
     fontSize: ms(15),
     lineHeight: mvs(22)
   },
@@ -3396,12 +3682,13 @@ var styles28 = reactNative.StyleSheet.create({
     marginTop: vs(8)
   }
 });
-function LabelValue({ label, value, iconName, iconColor, style }) {
+function LabelValueBase({ label, value, iconName, iconColor, style }) {
   const { colors } = useTheme();
   const resolvedIcon = iconName ? renderIcon(iconName, ms(14), iconColor ?? colors.foregroundMuted) : null;
-  return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles29.container, style] }, /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles29.labelSide }, resolvedIcon ? /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles29.icon }, resolvedIcon) : null, /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles29.label, { color: colors.foregroundMuted }], allowFontScaling: true }, label)), typeof value === "string" ? /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles29.value, { color: colors.foreground }], allowFontScaling: true }, value) : value);
+  return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles31.container, style] }, /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles31.labelSide }, resolvedIcon ? /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles31.icon }, resolvedIcon) : null, /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles31.label, { color: colors.foregroundMuted }], allowFontScaling: true }, label)), typeof value === "string" ? /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles31.value, { color: colors.foreground }], allowFontScaling: true }, value) : value);
 }
-var styles29 = reactNative.StyleSheet.create({
+var LabelValue = React26__default.default.memo(LabelValueBase);
+var styles31 = reactNative.StyleSheet.create({
   container: {
     flexDirection: "row",
     justifyContent: "space-between",
@@ -3418,12 +3705,12 @@ var styles29 = reactNative.StyleSheet.create({
     justifyContent: "center"
   },
   label: {
-    fontFamily: "Poppins-Regular",
+    fontFamily: "Sohne-Regular",
     fontSize: ms(13),
     lineHeight: mvs(18)
   },
   value: {
-    fontFamily: "Poppins-Medium",
+    fontFamily: "Sohne-Medium",
     fontSize: ms(14),
     lineHeight: mvs(20),
     textAlign: "right"
@@ -3458,10 +3745,10 @@ function MonthPicker({ value, onChange, locale = "en", formatLabel, style }) {
       onChange({ month: value.month + 1, year: value.year });
     }
   };
-  return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles30.container, style], accessibilityRole: "adjustable", accessibilityLabel: getLabel() }, /* @__PURE__ */ React26__default.default.createElement(
+  return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles32.container, style], accessibilityRole: "adjustable", accessibilityLabel: getLabel() }, /* @__PURE__ */ React26__default.default.createElement(
     reactNative.TouchableOpacity,
     {
-      style: styles30.arrow,
+      style: styles32.arrow,
       onPress: handlePrev,
       activeOpacity: 0.6,
       touchSoundDisabled: true,
@@ -3473,7 +3760,7 @@ function MonthPicker({ value, onChange, locale = "en", formatLabel, style }) {
   ), /* @__PURE__ */ React26__default.default.createElement(
     reactNative.Text,
     {
-      style: [styles30.label, { color: colors.foreground }],
+      style: [styles32.label, { color: colors.foreground }],
       allowFontScaling: true,
       accessibilityLiveRegion: "polite"
     },
@@ -3481,7 +3768,7 @@ function MonthPicker({ value, onChange, locale = "en", formatLabel, style }) {
   ), /* @__PURE__ */ React26__default.default.createElement(
     reactNative.TouchableOpacity,
     {
-      style: styles30.arrow,
+      style: styles32.arrow,
       onPress: handleNext,
       activeOpacity: 0.6,
       touchSoundDisabled: true,
@@ -3492,7 +3779,7 @@ function MonthPicker({ value, onChange, locale = "en", formatLabel, style }) {
     /* @__PURE__ */ React26__default.default.createElement(vectorIcons.Entypo, { name: "chevron-right", size: 22, color: colors.foreground })
   ));
 }
-var styles30 = reactNative.StyleSheet.create({
+var styles32 = reactNative.StyleSheet.create({
   container: {
     flexDirection: "row",
     alignItems: "center",
@@ -3505,7 +3792,7 @@ var styles30 = reactNative.StyleSheet.create({
     justifyContent: "center"
   },
   label: {
-    fontFamily: "Poppins-Medium",
+    fontFamily: "Sohne-Medium",
     fontSize: ms(17),
     lineHeight: mvs(24),
     textAlign: "center",
@@ -3519,7 +3806,7 @@ var aspectRatioMap = {
   "4:5": 5 / 4,
   "3:2": 2 / 3
 };
-function MediaCard({
+function MediaCardBase({
   imageSource,
   aspectRatio = "4:3",
   badge,
@@ -3556,23 +3843,23 @@ function MediaCard({
     reactNative.View,
     {
       style: [
-        styles31.card,
-        hovered && styles31.cardHovered,
+        styles33.card,
+        hovered && styles33.cardHovered,
         style
       ],
       ...reactNative.Platform.OS === "web" ? hoverHandlers : {}
     },
-    /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles31.imageContainer, imageStyle] }, /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: { paddingTop: `${ratio * 100}%` } }, /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: reactNative.StyleSheet.absoluteFill }, imageSource ? /* @__PURE__ */ React26__default.default.createElement(
+    /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles33.imageContainer, imageStyle] }, /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: { paddingTop: `${ratio * 100}%` } }, /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: reactNative.StyleSheet.absoluteFill }, imageSource ? /* @__PURE__ */ React26__default.default.createElement(
       reactNative.Image,
       {
         source: imageSource,
-        style: styles31.image,
+        style: styles33.image,
         resizeMode: "cover"
       }
-    ) : /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles31.imagePlaceholder, { backgroundColor: colors.surface }] }))), badge && /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles31.badgeContainer }, badge), (onActionPress || actionIcon || actionIconName) && /* @__PURE__ */ React26__default.default.createElement(
+    ) : /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles33.imagePlaceholder, { backgroundColor: colors.surface }] }))), badge && /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles33.badgeContainer }, badge), (onActionPress || actionIcon || actionIconName) && /* @__PURE__ */ React26__default.default.createElement(
       reactNative.TouchableOpacity,
       {
-        style: [styles31.actionButton, { backgroundColor: "rgba(0,0,0,0.24)" }],
+        style: [styles33.actionButton, { backgroundColor: "rgba(0,0,0,0.24)" }],
         onPress: () => {
           impactLight();
           onActionPress?.();
@@ -3585,7 +3872,7 @@ function MediaCard({
       },
       resolvedActionIcon
     )),
-    (title || subtitle || caption || footer) && /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles31.meta }, title ? /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles31.title, { color: colors.foreground }], numberOfLines: 2, allowFontScaling: true }, title) : null, subtitle ? /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles31.subtitle, { color: colors.foregroundSubtle }], numberOfLines: 1, allowFontScaling: true }, subtitle) : null, caption ? /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles31.caption, { color: colors.foregroundMuted }], numberOfLines: 1, allowFontScaling: true }, caption) : null, footer)
+    (title || subtitle || caption || footer) && /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles33.meta }, title ? /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles33.title, { color: colors.foreground }], numberOfLines: 2, allowFontScaling: true }, title) : null, subtitle ? /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles33.subtitle, { color: colors.foregroundSubtle }], numberOfLines: 1, allowFontScaling: true }, subtitle) : null, caption ? /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles33.caption, { color: colors.foregroundMuted }], numberOfLines: 1, allowFontScaling: true }, caption) : null, footer)
   );
   if (onPress) {
     return /* @__PURE__ */ React26__default.default.createElement(Animated9__default.default.View, { style: animatedStyle }, /* @__PURE__ */ React26__default.default.createElement(
@@ -3604,7 +3891,8 @@ function MediaCard({
   }
   return cardContent;
 }
-var styles31 = reactNative.StyleSheet.create({
+var MediaCard = React26__default.default.memo(MediaCardBase);
+var styles33 = reactNative.StyleSheet.create({
   card: {
     borderRadius: RADIUS.md,
     overflow: "hidden",
@@ -3646,25 +3934,25 @@ var styles31 = reactNative.StyleSheet.create({
     gap: vs(2)
   },
   title: {
-    fontFamily: "Poppins-SemiBold",
+    fontFamily: "Sohne-SemiBold",
     fontSize: ms(14),
     lineHeight: mvs(20)
   },
   subtitle: {
-    fontFamily: "Poppins-Regular",
+    fontFamily: "Sohne-Regular",
     fontSize: ms(13),
     lineHeight: mvs(18)
   },
   caption: {
-    fontFamily: "Poppins-Regular",
+    fontFamily: "Sohne-Regular",
     fontSize: ms(12),
     lineHeight: mvs(16)
   }
 });
-function CategoryChip({
+var CategoryChip = React26__default.default.memo(function CategoryChip2({
   item,
   selected,
-  onPress
+  onSelect
 }) {
   const { colors } = useTheme();
   const { animatedStyle: scaleStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
@@ -3683,7 +3971,7 @@ function CategoryChip({
   return /* @__PURE__ */ React26__default.default.createElement(Animated9__default.default.View, { style: scaleStyle, ...hoverHandlers }, /* @__PURE__ */ React26__default.default.createElement(
     reactNative.TouchableOpacity,
     {
-      onPress,
+      onPress: () => onSelect(item.value),
       onPressIn,
       onPressOut,
       activeOpacity: 1,
@@ -3692,9 +3980,9 @@ function CategoryChip({
       accessibilityLabel: item.label,
       accessibilityState: { selected }
     },
-    /* @__PURE__ */ React26__default.default.createElement(Animated9__default.default.View, { style: [styles32.chip, surfaceStyle] }, resolvedIcon && /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles32.chipIcon }, resolvedIcon), /* @__PURE__ */ React26__default.default.createElement(Animated9__default.default.Text, { style: [styles32.chipLabel, textColorStyle], allowFontScaling: true }, item.label), item.badge !== void 0 && item.badge > 0 && /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles32.chipBadge, { backgroundColor: colors.primary }] }, /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles32.chipBadgeText, { color: colors.primaryForeground }] }, Math.min(item.badge, 99))))
+    /* @__PURE__ */ React26__default.default.createElement(Animated9__default.default.View, { style: [styles34.chip, surfaceStyle] }, resolvedIcon && /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles34.chipIcon }, resolvedIcon), /* @__PURE__ */ React26__default.default.createElement(Animated9__default.default.Text, { style: [styles34.chipLabel, textColorStyle], allowFontScaling: true }, item.label), item.badge !== void 0 && item.badge > 0 && /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles34.chipBadge, { backgroundColor: colors.primary }] }, /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles34.chipBadgeText, { color: colors.primaryForeground }] }, Math.min(item.badge, 99))))
   ));
-}
+});
 function CategoryStrip({
   categories,
   value,
@@ -3705,23 +3993,26 @@ function CategoryStrip({
   accessibilityLabel
 }) {
   const selected = Array.isArray(value) ? value : value ? [value] : [];
-  const handlePress = (v) => {
-    selectionAsync();
-    if (multiSelect) {
-      const current = Array.isArray(value) ? value : value ? [value] : [];
-      const next = current.includes(v) ? current.filter((x) => x !== v) : [...current, v];
-      onValueChange?.(next);
-    } else {
-      onValueChange?.(v === value ? "" : v);
-    }
-  };
+  const handlePress = React26.useCallback(
+    (v) => {
+      selectionAsync();
+      if (multiSelect) {
+        const current = Array.isArray(value) ? value : value ? [value] : [];
+        const next = current.includes(v) ? current.filter((x) => x !== v) : [...current, v];
+        onValueChange?.(next);
+      } else {
+        onValueChange?.(v === value ? "" : v);
+      }
+    },
+    [multiSelect, value, onValueChange]
+  );
   return /* @__PURE__ */ React26__default.default.createElement(
     reactNative.ScrollView,
     {
       horizontal: true,
       showsHorizontalScrollIndicator: false,
-      contentContainerStyle: [styles32.container, style],
-      style: styles32.scroll,
+      contentContainerStyle: [styles34.container, style],
+      style: styles34.scroll,
       accessibilityRole: multiSelect ? void 0 : "radiogroup",
       accessibilityLabel
     },
@@ -3730,12 +4021,12 @@ function CategoryStrip({
       {
         item: cat,
         selected: selected.includes(cat.value),
-        onPress: () => handlePress(cat.value)
+        onSelect: handlePress
       }
     )))
   );
 }
-var styles32 = reactNative.StyleSheet.create({
+var styles34 = reactNative.StyleSheet.create({
   scroll: {
     flexGrow: 0
   },
@@ -3759,7 +4050,7 @@ var styles32 = reactNative.StyleSheet.create({
     justifyContent: "center"
   },
   chipLabel: {
-    fontFamily: "Poppins-Medium",
+    fontFamily: "Sohne-Medium",
     fontSize: ms(13)
   },
   chipBadge: {
@@ -3771,7 +4062,7 @@ var styles32 = reactNative.StyleSheet.create({
     justifyContent: "center"
   },
   chipBadgeText: {
-    fontFamily: "Poppins-Bold",
+    fontFamily: "Sohne-Bold",
     fontSize: ms(9),
     lineHeight: 14
   }
@@ -3822,12 +4113,12 @@ function Pressable2({
   );
 }
 var weightMap = {
-  normal: "Poppins-Regular",
-  medium: "Poppins-Medium",
-  semibold: "Poppins-SemiBold",
-  bold: "Poppins-Bold"
+  normal: "Sohne-Regular",
+  medium: "Sohne-Medium",
+  semibold: "Sohne-SemiBold",
+  bold: "Sohne-Bold"
 };
-function DetailRow({
+function DetailRowBase({
   label,
   value,
   separator = "dotted",
@@ -3853,23 +4144,24 @@ function DetailRow({
     borderColor: "rgba(128,128,128,0.3)",
     marginHorizontal: s(4)
   };
-  return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles33.row, style] }, /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles33.labelSide }, resolvedLeftIcon ? /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles33.icon }, resolvedLeftIcon) : null, typeof label === "string" ? /* @__PURE__ */ React26__default.default.createElement(
+  return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles35.row, style] }, /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles35.labelSide }, resolvedLeftIcon ? /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles35.icon }, resolvedLeftIcon) : null, typeof label === "string" ? /* @__PURE__ */ React26__default.default.createElement(
     reactNative.Text,
     {
-      style: [styles33.labelText, { color: colors.foregroundMuted, fontFamily: weightMap[labelWeight] }, labelStyle],
+      style: [styles35.labelText, { color: colors.foregroundMuted, fontFamily: weightMap[labelWeight] }, labelStyle],
       allowFontScaling: true
     },
     label
-  ) : label), separatorStyle ? /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: separatorStyle }) : /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles33.spacer }), /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles33.valueSide }, typeof value === "string" ? /* @__PURE__ */ React26__default.default.createElement(
+  ) : label), separatorStyle ? /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: separatorStyle }) : /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles35.spacer }), /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles35.valueSide }, typeof value === "string" ? /* @__PURE__ */ React26__default.default.createElement(
     reactNative.Text,
     {
-      style: [styles33.valueText, { color: valueColor ?? colors.foreground }, valueStyle],
+      style: [styles35.valueText, { color: valueColor ?? colors.foreground }, valueStyle],
       allowFontScaling: true
     },
     value
-  ) : value, resolvedRightIcon ? /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles33.icon }, resolvedRightIcon) : null));
+  ) : value, resolvedRightIcon ? /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles35.icon }, resolvedRightIcon) : null));
 }
-var styles33 = reactNative.StyleSheet.create({
+var DetailRow = React26__default.default.memo(DetailRowBase);
+var styles35 = reactNative.StyleSheet.create({
   row: {
     flexDirection: "row",
     alignItems: "center",
@@ -3899,11 +4191,101 @@ var styles33 = reactNative.StyleSheet.create({
     flexShrink: 0
   },
   valueText: {
-    fontFamily: "Poppins-SemiBold",
+    fontFamily: "Sohne-SemiBold",
     fontSize: ms(13),
     lineHeight: mvs(18)
   }
 });
+function Form({ children, style }) {
+  return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles36.form, style] }, children);
+}
+function FormField({
+  children,
+  label,
+  error,
+  required,
+  style,
+  labelStyle,
+  errorStyle
+}) {
+  const { colors } = useTheme();
+  return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles36.field, style] }, label ? /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles36.label, { color: colors.foreground }, labelStyle], allowFontScaling: true }, label, required ? /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: { color: colors.destructive } }, " *") : null) : null, children, error ? /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles36.error, { color: colors.destructive }, errorStyle], allowFontScaling: true }, error) : null);
+}
+function FormSection({ children, title, description, style }) {
+  const { colors } = useTheme();
+  return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles36.section, style] }, title ? /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles36.sectionHeader }, /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles36.sectionTitle, { color: colors.foreground }], allowFontScaling: true }, title), description ? /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles36.sectionDescription, { color: colors.foregroundMuted }], allowFontScaling: true }, description) : null) : null, children);
+}
+function FormFooter({ children, style }) {
+  return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles36.footer, style] }, children);
+}
+Form.Field = FormField;
+Form.Section = FormSection;
+Form.Footer = FormFooter;
+var styles36 = reactNative.StyleSheet.create({
+  form: {
+    gap: vs(16)
+  },
+  field: {
+    gap: vs(6)
+  },
+  label: {
+    fontFamily: "Sohne-Medium",
+    fontSize: 14,
+    lineHeight: 20
+  },
+  error: {
+    fontFamily: "Sohne-Regular",
+    fontSize: 12,
+    lineHeight: 16
+  },
+  section: {
+    gap: vs(16)
+  },
+  sectionHeader: {
+    gap: vs(4)
+  },
+  sectionTitle: {
+    fontFamily: "Sohne-SemiBold",
+    fontSize: 16,
+    lineHeight: 24
+  },
+  sectionDescription: {
+    fontFamily: "Sohne-Regular",
+    fontSize: 14,
+    lineHeight: 20
+  },
+  footer: {
+    flexDirection: "row",
+    gap: s(12),
+    paddingTop: vs(8)
+  }
+});
+var defaultKeyExtractor = (item, index) => {
+  const id = item?.id;
+  return id !== void 0 ? String(id) : String(index);
+};
+function VirtualListInner({ itemHeight, keyExtractor, renderItem, ...props }, ref) {
+  const getItemLayout = React26.useCallback(
+    (_data, index) => ({
+      length: itemHeight ?? 0,
+      offset: (itemHeight ?? 0) * index,
+      index
+    }),
+    [itemHeight]
+  );
+  return /* @__PURE__ */ React26__default.default.createElement(
+    reactNative.FlatList,
+    {
+      ref,
+      keyExtractor: keyExtractor ?? defaultKeyExtractor,
+      renderItem,
+      getItemLayout: itemHeight !== void 0 ? getItemLayout : void 0,
+      removeClippedSubviews: true,
+      ...props
+    }
+  );
+}
+var VirtualList = React26__default.default.forwardRef(VirtualListInner);
 
 // src/utils/typography.ts
 function getResponsiveFontSize(text, maxSize, steps = [
@@ -3954,13 +4336,23 @@ exports.CurrencyInput = CurrencyInput;
 exports.CurrencyInputLarge = CurrencyInput;
 exports.DetailRow = DetailRow;
 exports.EmptyState = EmptyState;
+exports.Form = Form;
+exports.FormField = FormField;
+exports.FormFooter = FormFooter;
+exports.FormSection = FormSection;
 exports.ICON_SIZES = ICON_SIZES;
 exports.Icon = Icon;
 exports.IconButton = IconButton;
 exports.Input = Input;
 exports.LabelValue = LabelValue;
+exports.ListGroup = ListGroup;
+exports.ListGroupFooter = ListGroupFooter;
+exports.ListGroupHeader = ListGroupHeader;
 exports.ListItem = ListItem;
 exports.MediaCard = MediaCard;
+exports.MenuGroup = MenuGroup;
+exports.MenuGroupFooter = MenuGroupFooter;
+exports.MenuGroupHeader = MenuGroupHeader;
 exports.MenuItem = MenuItem;
 exports.MonthPicker = MonthPicker;
 exports.Pressable = Pressable2;
@@ -3984,6 +4376,8 @@ exports.Textarea = Textarea;
 exports.ThemeProvider = ThemeProvider;
 exports.ToastProvider = ToastProvider;
 exports.Toggle = Toggle;
+exports.VirtualList = VirtualList;
+exports.configureIconFamilies = configureIconFamilies;
 exports.defaultDark = defaultDark;
 exports.defaultLight = defaultLight;
 exports.deriveColors = deriveColors;