@platform-blocks/ui 0.1.1 → 0.2.0

package/lib/esm/index.js

@@ -4,11 +4,9 @@ import React__default, { createContext, useContext, useMemo, useEffect, useState
 import { Platform, Modal, StyleSheet, View, Pressable, I18nManager, Dimensions, Text as Text$1, AccessibilityInfo, findNodeHandle, Animated as Animated$1, Easing, AppState, useWindowDimensions, PanResponder, BackHandler, TextInput, ScrollView, ImageBackground, TouchableOpacity, Image as Image$1, FlatList, Keyboard, InteractionManager, Linking, StatusBar as StatusBar$1, UIManager, NativeModules } from 'react-native';
 import Animated, { useSharedValue, withRepeat, withTiming, cancelAnimation, useAnimatedStyle, interpolate, Extrapolation, withSpring, Easing as Easing$1, runOnJS, withSequence, withDelay, interpolateColor, useDerivedValue, ReduceMotion } from 'react-native-reanimated';
 import { useSafeAreaInsets, SafeAreaView, SafeAreaProvider } from 'react-native-safe-area-context';
-import { LinearGradient as LinearGradient$1 } from 'expo-linear-gradient';
-import Svg, { Path, Defs, LinearGradient as LinearGradient$2, Stop, Circle, Line, G, Text as Text$2, Rect, RadialGradient, ClipPath } from 'react-native-svg';
+import Svg, { Path, Defs, LinearGradient, Stop, Circle, Line, G, Text as Text$2, Rect, RadialGradient, ClipPath } from 'react-native-svg';
 import { FlashList } from '@shopify/flash-list';
 import MaskedView from '@react-native-masked-view/masked-view';
-import * as DocumentPicker from 'expo-document-picker';
 import ReanimatedCarousel from 'react-native-reanimated-carousel';
 
 /**
@@ -658,7 +656,7 @@ const DARK_THEME = {
             '#8E8E93',
             '#AEAEB2',
             '#C7C7CC',
-            '#D1D16',
+            '#D1D1D6',
             '#E5E5EA'
         ],
         success: [
@@ -3149,6 +3147,21 @@ const convertToWebStyles = (rnStyles) => {
     });
     return webStyles;
 };
+const containsPlatformText = (node) => {
+    return React__default.Children.toArray(node).some(child => {
+        if (React__default.isValidElement(child)) {
+            const childType = child.type;
+            if ((childType === null || childType === void 0 ? void 0 : childType.__PLATFORM_BLOCKS_TEXT__) === true) {
+                return true;
+            }
+            const childProps = child.props;
+            if (childProps === null || childProps === void 0 ? void 0 : childProps.children) {
+                return containsPlatformText(childProps.children);
+            }
+        }
+        return false;
+    });
+};
 const Text = (allProps) => {
     const { spacingProps, otherProps } = extractSpacingProps(allProps);
     const { children, tx, txParams, variant = 'p', size, weight, align = 'left', color, colorVariant, lineHeight, tracking, uppercase, style, fontFamily, as, selectable = true, onPress, onLayout, value, numberOfLines, ellipsizeMode } = otherProps;
@@ -3189,6 +3202,10 @@ const Text = (allProps) => {
             // Switch to div to prevent <h*> inside <p> DOM nesting warning / hydration error
             htmlTag = 'div';
         }
+        if (htmlTag === 'p' && containsPlatformText(children)) {
+            // Avoid nested paragraphs when Text components are nested
+            htmlTag = 'div';
+        }
     }
     // Platform-specific rendering
     if (Platform.OS === 'web' && isHTMLVariant(htmlTag)) {
@@ -3226,6 +3243,7 @@ const Text = (allProps) => {
     // Fallback to React Native Text for mobile or non-HTML variants
     return (jsx(Text$1, { style: [textStyles, spacingStyles, style], selectable: selectable, onPress: onPress, onLayout: onLayout, numberOfLines: numberOfLines, ellipsizeMode: ellipsizeMode, children: content }));
 };
+Text.__PLATFORM_BLOCKS_TEXT__ = true;
 // Helper function to check if variant is a valid HTML tag
 const isHTMLVariant = (variant) => {
     const htmlTags = [
@@ -4155,6 +4173,12 @@ const actionIcons = {
         variant: 'outlined',
         description: 'Magnifying glass and highlight circle to represent spotlight search.',
     },
+    highlight: {
+        content: 'm15.728 3.514 4.758 4.758-7.071 7.071-2.474.353a1 1 0 0 1-1.118-1.118l.353-2.474 7.552-7.03Zm-9.95 8.486 3.222 3.222-3 3H3a1 1 0 0 1-1-1v-2.999l3.778-3.223Z',
+        viewBox: '0 0 24 24',
+        variant: 'outlined',
+        description: 'Highlighter marker illustrating text emphasis.',
+    },
     minus: {
         content: 'M5 12h14',
         viewBox: '0 0 24 24',
@@ -4641,6 +4665,12 @@ const uiIcons = {
         variant: 'outlined',
         description: 'Tooltip badge with question mark for contextual hints.',
     },
+    popover: {
+        content: 'M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-5.17L12 19.17 9.17 16H6a2 2 0 0 1-2-2V6z',
+        viewBox: '0 0 24 24',
+        variant: 'outlined',
+        description: 'Popover surface with speech arrow for contextual overlays.',
+    },
     'layer-mask': {
         content: 'M5 4h4 M4 5v4 M19 4h-4 M20 5v4 M19 20h-4 M20 19v-4 M5 20h4 M4 19v-4 M9 9h12v10H9z M13 13h4v4h-4z',
         viewBox: '0 0 24 24',
@@ -4648,10 +4678,22 @@ const uiIcons = {
         description: 'Layered frame with inset window representing an overlay mask.',
     },
     slider: {
-        content: 'M7 14H5v5h5v-2H7v-3zM5 10h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z',
+        content: 'M12 3a1 1 0 0 1 .993 .883l.007 .117v9.171a3.001 3.001 0 0 1 0 5.658v1.171a1 1 0 0 1 -1.993 .117l-.007 -.117v-1.17a3.002 3.002 0 0 1 -1.995 -2.654l-.005 -.176l.005 -.176a3.002 3.002 0 0 1 1.995 -2.654v-9.17a1 1 0 0 1 1 -1z',
         viewBox: '0 0 24 24',
         variant: 'outlined',
-        description: 'Slider control handles for adjustable inputs.',
+        description: 'Horizontal slider track with centered thumb knob.',
+    },
+    hook: {
+        content: 'M6 3v7a6 6 0 1 0 12 0v-2M6 6h6M10 13c0 2 1.5 3 3 3s3-1 3-3',
+        viewBox: '0 0 24 24',
+        variant: 'outlined',
+        description: 'Fishing hook silhouette for representing hooks utilities.',
+    },
+    support: {
+        content: 'M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 4a6 6 0 1 1 0 12 6 6 0 0 1 0-12Zm-4.95-.95 2.12 2.12-1.06 1.06-2.12-2.12 1.06-1.06Zm9.9 0 1.06 1.06-2.12 2.12-1.06-1.06 2.12-2.12ZM7.05 16.95l-1.06-1.06 2.12-2.12 1.06 1.06-2.12 2.12Zm9.9 0-2.12-2.12 1.06-1.06 2.12 2.12-1.06 1.06Z',
+        viewBox: '0 0 24 24',
+        variant: 'outlined',
+        description: 'Life preserver style icon to represent support resources.',
     },
     input: {
         content: 'M4 6h16v2H4zM4 12h16v6H4z',
@@ -5597,6 +5639,65 @@ const createAccessibilityProps = (options) => {
     return accessibilityProps;
 };
 
+let linearGradientCache;
+let linearGradientAvailable = false;
+let warnedLinearGradient = false;
+const LinearGradientFallback = ({ children, style, colors }) => {
+    if (__DEV__ && !warnedLinearGradient) {
+        console.warn('expo-linear-gradient not installed; gradient-based components fall back to solid colors.');
+        warnedLinearGradient = true;
+    }
+    const styles = [
+        (colors === null || colors === void 0 ? void 0 : colors[0]) ? { backgroundColor: colors[0] } : undefined,
+        ...(Array.isArray(style) ? style : style ? [style] : []),
+    ].filter(Boolean);
+    return React__default.createElement(View, { style: styles }, children);
+};
+function resolveLinearGradient() {
+    var _a, _b;
+    if (linearGradientCache === undefined) {
+        try {
+            const mod = require('expo-linear-gradient');
+            linearGradientCache = (_b = (_a = mod === null || mod === void 0 ? void 0 : mod.LinearGradient) !== null && _a !== void 0 ? _a : mod === null || mod === void 0 ? void 0 : mod.default) !== null && _b !== void 0 ? _b : mod;
+            linearGradientAvailable = !!linearGradientCache;
+        }
+        catch (_c) {
+            linearGradientCache = LinearGradientFallback;
+            linearGradientAvailable = false;
+        }
+    }
+    if (!linearGradientCache) {
+        linearGradientCache = LinearGradientFallback;
+        linearGradientAvailable = false;
+    }
+    return {
+        LinearGradient: linearGradientCache,
+        hasLinearGradient: linearGradientAvailable,
+    };
+}
+let documentPickerCache;
+let warnedDocumentPicker = false;
+function resolveDocumentPicker() {
+    if (documentPickerCache === undefined) {
+        try {
+            documentPickerCache = require('expo-document-picker');
+        }
+        catch (_a) {
+            documentPickerCache = null;
+        }
+    }
+    const hasDocumentPicker = !!(documentPickerCache === null || documentPickerCache === void 0 ? void 0 : documentPickerCache.getDocumentAsync);
+    if (!hasDocumentPicker && __DEV__ && !warnedDocumentPicker) {
+        console.warn('expo-document-picker not installed; native file picker support is disabled.');
+        warnedDocumentPicker = true;
+    }
+    return {
+        DocumentPicker: documentPickerCache,
+        hasDocumentPicker,
+    };
+}
+
+const { LinearGradient: OptionalLinearGradient$4, hasLinearGradient: hasLinearGradient$3 } = resolveLinearGradient();
 const getButtonStyles = (theme, variant = 'filled', size = 'md', disabled = false, loading = false, height, radiusStyles, shadowStyles, customColor, isIconButton = false, fullWidth = false) => {
     const sizeConfig = getComponentSize(size);
     const horizontalSpacing = isIconButton ? 0 : sizeConfig.padding;
@@ -5720,6 +5821,7 @@ const Button = (allProps) => {
     const { title, children, onPress, onPressIn, onPressOut, onHoverIn, onHoverOut, onLongPress, onLayout, variant = 'filled', size = 'md', disabled = false, loading = false, loadingTitle, colorVariant, textColor: textColorProp, icon, startIcon, endIcon, tooltip, tooltipPosition = 'top', radius, style, testID, accessibilityLabel: accessibilityLabelProp, accessibilityHint: accessibilityHintProp, } = otherProps;
     // Theme
     const theme = useTheme();
+    const effectiveVariant = variant === 'gradient' && !hasLinearGradient$3 ? 'filled' : variant;
     // Accessibility hooks
     const { getDuration } = useReducedMotion$1();
     const { announce } = useAnnouncer();
@@ -5783,7 +5885,7 @@ const Button = (allProps) => {
     const height = getHeight(size);
     const radiusStyles = createRadiusStyles(radius, height, 'button');
     // Handle shadow prop - use default 'sm' for primary/filled/secondary/gradient variants if no shadow specified
-    const effectiveShadow = (_a = shadowProps.shadow) !== null && _a !== void 0 ? _a : ((variant === 'filled' || variant === 'secondary' || variant === 'gradient') ? 'sm' : 'none');
+    const effectiveShadow = (_a = shadowProps.shadow) !== null && _a !== void 0 ? _a : ((effectiveVariant === 'filled' || effectiveVariant === 'secondary' || effectiveVariant === 'gradient') ? 'sm' : 'none');
     const shadowStyles = getShadowStyles({ shadow: effectiveShadow }, theme, 'button');
     const spacingStyles = getSpacingStyles(spacingProps);
     const baseLayoutStyles = getLayoutStyles(layoutProps);
@@ -5818,7 +5920,7 @@ const Button = (allProps) => {
         return token; // raw css color
     };
     const resolvedCustomColor = resolveTokenColor(colorVariant);
-    const buttonStyles = getButtonStyles(theme, variant, size, disabled, loading, height, radiusStyles, shadowStyles, resolvedCustomColor, isIconButton, layoutProps.fullWidth || false);
+    const buttonStyles = getButtonStyles(theme, effectiveVariant, size, disabled, loading, height, radiusStyles, shadowStyles, resolvedCustomColor, isIconButton, layoutProps.fullWidth || false);
     // derive contrasted text color if filled/filled background
     const pickContrast = (bg) => {
         if (!bg)
@@ -5837,12 +5939,12 @@ const Button = (allProps) => {
         if (textColorProp)
             return resolveTokenColor(textColorProp) || textColorProp;
         if (resolvedCustomColor) {
-            if (variant === 'filled' || variant === 'gradient')
+            if (effectiveVariant === 'filled' || effectiveVariant === 'gradient')
                 return pickContrast(resolvedCustomColor);
-            if (variant === 'outline' || variant === 'ghost' || variant === 'none' || variant === 'secondary')
+            if (effectiveVariant === 'outline' || effectiveVariant === 'ghost' || effectiveVariant === 'none' || effectiveVariant === 'secondary')
                 return resolvedCustomColor;
         }
-        switch (variant) {
+        switch (effectiveVariant) {
             case 'filled': return '#FFFFFF';
             case 'gradient': return '#FFFFFF';
             case 'secondary': return theme.colors.gray[7];
@@ -5852,7 +5954,7 @@ const Button = (allProps) => {
             case 'none': return 'currentColor';
             default: return '#FFFFFF';
         }
-    }, [textColorProp, resolvedCustomColor, variant, theme.colors.gray, theme.colors.primary]);
+    }, [textColorProp, resolvedCustomColor, effectiveVariant, theme.colors.gray, theme.colors.primary]);
     // Memoize text props
     const textProps = useMemo(() => ({
         size,
@@ -5868,11 +5970,11 @@ const Button = (allProps) => {
     // Memoize loader color calculation
     const loaderColor = useMemo(() => {
         if (resolvedCustomColor) {
-            if (variant === 'filled')
+            if (effectiveVariant === 'filled')
                 return pickContrast(resolvedCustomColor);
             return resolvedCustomColor;
         }
-        switch (variant) {
+        switch (effectiveVariant) {
             case 'filled': return '#FFFFFF';
             case 'secondary': return theme.colors.gray[7];
             case 'outline': return theme.colors.primary[5];
@@ -5882,7 +5984,7 @@ const Button = (allProps) => {
             case 'none': return 'currentColor';
             default: return '#FFFFFF';
         }
-    }, [resolvedCustomColor, variant, theme.colors.gray, theme.colors.primary]);
+    }, [resolvedCustomColor, effectiveVariant, theme.colors.gray, theme.colors.primary]);
     // Helper function to inject color into icon components
     const renderIconWithColor = (iconElement) => {
         if (!iconElement)
@@ -5983,14 +6085,14 @@ const Button = (allProps) => {
                     },
                     // subtle visual feedback beyond scale on supported platforms
                     pressed && !isInteractionDisabled ? {
-                        opacity: variant === 'ghost' || variant === 'none' ? 0.6 : 0.9,
+                        opacity: effectiveVariant === 'ghost' || effectiveVariant === 'none' ? 0.6 : 0.9,
                         ...(Platform.OS !== 'web' ? { transform: [{ translateY: 1 }] } : {})
                     } : null,
                     style,
                     { minWidth: calculatedMinWidth }
-                ], onPress: handleInternalPress, onLayout: onLayout, onPressIn: handlePressIn, onPressOut: handlePressOut, onHoverIn: onHoverIn, onHoverOut: onHoverOut, onLongPress: onLongPress, disabled: isInteractionDisabled, children: [variant === 'gradient' && jsx(LinearGradient$1, { colors: variant === 'gradient'
-                            ? (resolvedCustomColor ? [resolvedCustomColor, theme.colors.primary[7]] : [theme.colors.primary[5], theme.colors.primary[7]])
-                            : ['transparent', 'transparent'], style: { position: 'absolute', zIndex: -1, top: 0, left: 0, right: 0, bottom: 0, borderRadius: radiusStyles.borderRadius }, start: { x: 0, y: 0 }, end: { x: 1, y: 0 } }), loading ? (jsxs(Fragment, { children: [jsx(Loader, { size: size, color: getLoaderColor(), style: !isIconButton ? { marginRight: iconSpacing } : undefined }), !isIconButton && renderButtonContent(displayContent)] })) : isIconButton ? (
+                ], onPress: handleInternalPress, onLayout: onLayout, onPressIn: handlePressIn, onPressOut: handlePressOut, onHoverIn: onHoverIn, onHoverOut: onHoverOut, onLongPress: onLongPress, disabled: isInteractionDisabled, children: [variant === 'gradient' && hasLinearGradient$3 && (jsx(OptionalLinearGradient$4, { colors: resolvedCustomColor
+                            ? [resolvedCustomColor, theme.colors.primary[7]]
+                            : [theme.colors.primary[5], theme.colors.primary[7]], style: { position: 'absolute', zIndex: -1, top: 0, left: 0, right: 0, bottom: 0, borderRadius: radiusStyles.borderRadius }, start: { x: 0, y: 0 }, end: { x: 1, y: 0 } })), loading ? (jsxs(Fragment, { children: [jsx(Loader, { size: size, color: getLoaderColor(), style: !isIconButton ? { marginRight: iconSpacing } : undefined }), !isIconButton && renderButtonContent(displayContent)] })) : isIconButton ? (
                     // Icon-only button
                     renderIconWithColor(icon)) : (
                     // Regular button with text and optional side icons
@@ -6865,7 +6967,6 @@ const Flex = factory((props, ref) => {
  * Automatically mirrors to row-reverse in RTL
  */
 const Row$1 = React__default.forwardRef((props, ref) => {
-    // @ts-expect-error - factory components handle refs differently
     return jsx(Flex, { ...props, direction: "row", ref: ref });
 });
 Row$1.displayName = 'Row';
@@ -6874,7 +6975,6 @@ Row$1.displayName = 'Row';
  * Not affected by RTL (columns are vertical)
  */
 const Column$1 = React__default.forwardRef((props, ref) => {
-    // @ts-expect-error - factory components handle refs differently
     return jsx(Flex, { ...props, direction: "column", ref: ref });
 });
 Column$1.displayName = 'Column';
@@ -6931,6 +7031,280 @@ function useSimpleDialog() {
     };
 }
 
+const escapeRegExp$1 = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+const toHighlightArray = (value, trim) => {
+    if (value === undefined || value === null) {
+        return [];
+    }
+    const rawValues = Array.isArray(value) ? value : [value];
+    return rawValues
+        .filter((item) => item !== undefined && item !== null)
+        .map((item) => String(item))
+        .map((item) => (trim ? item.trim() : item))
+        .filter((item) => item.length > 0);
+};
+const flattenStyleArray = (style) => {
+    if (!Array.isArray(style)) {
+        return style ? [style] : [];
+    }
+    return style.reduce((acc, item) => {
+        acc.push(...flattenStyleArray(item));
+        return acc;
+    }, []);
+};
+const extractColorFromStyle = (style) => {
+    for (const entry of flattenStyleArray(style)) {
+        if (entry && typeof entry === 'object' && typeof entry.color === 'string') {
+            return entry.color;
+        }
+    }
+    return undefined;
+};
+const parseColor = (value) => {
+    if (!value || typeof value !== 'string') {
+        return undefined;
+    }
+    const trimmed = value.trim();
+    if (trimmed.startsWith('#')) {
+        let hex = trimmed.slice(1);
+        if (hex.length === 3) {
+            hex = hex.split('').map(char => char + char).join('');
+        }
+        if (hex.length === 6) {
+            const r = parseInt(hex.slice(0, 2), 16);
+            const g = parseInt(hex.slice(2, 4), 16);
+            const b = parseInt(hex.slice(4, 6), 16);
+            if ([r, g, b].every(component => !Number.isNaN(component))) {
+                return { r, g, b };
+            }
+        }
+        if (hex.length === 8) {
+            const r = parseInt(hex.slice(0, 2), 16);
+            const g = parseInt(hex.slice(2, 4), 16);
+            const b = parseInt(hex.slice(4, 6), 16);
+            if ([r, g, b].every(component => !Number.isNaN(component))) {
+                return { r, g, b };
+            }
+        }
+    }
+    const rgbMatch = trimmed.match(/^rgba?\(([^)]+)\)$/i);
+    if (rgbMatch) {
+        const parts = rgbMatch[1].split(',').map(part => part.trim()).slice(0, 3);
+        if (parts.length === 3) {
+            const [r, g, b] = parts.map(part => parseFloat(part));
+            if ([r, g, b].every(component => !Number.isNaN(component))) {
+                return { r: Math.round(r), g: Math.round(g), b: Math.round(b) };
+            }
+        }
+    }
+    return undefined;
+};
+const getRelativeLuminance = ({ r, g, b }) => {
+    const srgb = [r, g, b].map(channel => {
+        const normalized = channel / 255;
+        return normalized <= 0.03928 ? normalized / 12.92 : Math.pow((normalized + 0.055) / 1.055, 2.4);
+    });
+    return 0.2126 * srgb[0] + 0.7152 * srgb[1] + 0.0722 * srgb[2];
+};
+const mixRgb = (color, target, weight) => ({
+    r: Math.round(color.r * (1 - weight) + target.r * weight),
+    g: Math.round(color.g * (1 - weight) + target.g * weight),
+    b: Math.round(color.b * (1 - weight) + target.b * weight),
+});
+const toRgba$1 = ({ r, g, b }, alpha) => `rgba(${r}, ${g}, ${b}, ${alpha})`;
+const resolvePaletteShade = (palette, preferredIndex, fallbackIndex) => {
+    if (!palette || palette.length === 0) {
+        return undefined;
+    }
+    const safePreferred = palette[Math.min(Math.max(preferredIndex, 0), palette.length - 1)];
+    if (safePreferred) {
+        return safePreferred;
+    }
+    return palette[Math.min(Math.max(fallbackIndex, 0), palette.length - 1)];
+};
+const createAdaptiveBackground = (baseColor, isTextLight, colorScheme) => {
+    const rgb = parseColor(baseColor);
+    if (!rgb) {
+        return baseColor;
+    }
+    const target = isTextLight ? { r: 0, g: 0, b: 0 } : { r: 255, g: 255, b: 255 };
+    const mixAmount = isTextLight ? (colorScheme === 'dark' ? 0.4 : 0.3) : (colorScheme === 'dark' ? 0.25 : 0.15);
+    const alpha = isTextLight ? (colorScheme === 'dark' ? 0.7 : 0.8) : (colorScheme === 'dark' ? 0.55 : 0.88);
+    const mixed = mixRgb(rgb, target, mixAmount);
+    return toRgba$1(mixed, alpha);
+};
+const resolveHighlightBackground = (theme, highlightColor, isTextLight) => {
+    var _a;
+    const themeColors = theme.colors;
+    const paletteFromProp = highlightColor ? themeColors[highlightColor] : undefined;
+    const defaultPalette = theme.colors.highlight || theme.colors.amber || theme.colors.primary;
+    const preferredPalette = paletteFromProp || defaultPalette;
+    const highlightStateColor = (_a = theme.states) === null || _a === void 0 ? void 0 : _a.highlightBackground;
+    let baseColor = paletteFromProp
+        ? resolvePaletteShade(paletteFromProp, isTextLight ? 8 : 2, isTextLight ? 7 : 3)
+        : undefined;
+    if (!baseColor && highlightColor && !paletteFromProp) {
+        baseColor = highlightColor;
+    }
+    if (!baseColor && highlightStateColor) {
+        baseColor = highlightStateColor;
+    }
+    if (!baseColor && preferredPalette) {
+        baseColor = resolvePaletteShade(preferredPalette, isTextLight ? 8 : 2, isTextLight ? 7 : 3);
+    }
+    if (!baseColor) {
+        baseColor = isTextLight ? '#92400E' : '#FDE68A';
+    }
+    return createAdaptiveBackground(baseColor, isTextLight, theme.colorScheme);
+};
+const createBaseHighlightStyle = (theme, backgroundColor, textColor, includeColor) => ({
+    backgroundColor,
+    ...(includeColor ? { color: textColor } : {}),
+    borderRadius: 4,
+    paddingHorizontal: 4,
+    paddingVertical: Platform.OS === 'web' ? 0 : 2,
+});
+const Highlight = ({ children, highlight, highlightStyles, highlightColor, caseSensitive = false, trim = true, highlightProps, variant, ...rest }) => {
+    var _a, _b;
+    const theme = useTheme();
+    const outerVariant = variant !== null && variant !== void 0 ? variant : 'span';
+    const textContent = useMemo(() => {
+        if (typeof children === 'string' || typeof children === 'number') {
+            return String(children);
+        }
+        const parts = React__default.Children.toArray(children);
+        if (parts.length === 0) {
+            return '';
+        }
+        if (parts.every((part) => typeof part === 'string' || typeof part === 'number')) {
+            return parts.map((part) => String(part)).join('');
+        }
+        return null;
+    }, [children]);
+    const highlightValues = useMemo(() => toHighlightArray(highlight, trim), [highlight, trim]);
+    const highlightPropsValue = useMemo(() => highlightProps !== null && highlightProps !== void 0 ? highlightProps : {}, [highlightProps]);
+    const highlightDerived = useMemo(() => {
+        var _a, _b;
+        const { style, as, variant: innerVariant, color: colorProp, ...restProps } = highlightPropsValue;
+        return {
+            style,
+            color: colorProp,
+            as: (_a = as) !== null && _a !== void 0 ? _a : (Platform.OS === 'web' ? 'mark' : 'span'),
+            variant: (_b = innerVariant) !== null && _b !== void 0 ? _b : 'span',
+            rest: restProps,
+        };
+    }, [highlightPropsValue]);
+    const outerColor = useMemo(() => {
+        const restProps = rest;
+        if ((restProps === null || restProps === void 0 ? void 0 : restProps.color) && typeof restProps.color === 'string') {
+            return restProps.color;
+        }
+        const colorVariantKey = restProps === null || restProps === void 0 ? void 0 : restProps.colorVariant;
+        if (typeof colorVariantKey === 'string') {
+            const fromText = theme.text[colorVariantKey];
+            if (fromText) {
+                return fromText;
+            }
+            const palette = theme.colors[colorVariantKey];
+            const paletteColor = resolvePaletteShade(palette, 6, palette ? palette.length - 1 : 6);
+            if (paletteColor) {
+                return paletteColor;
+            }
+        }
+        return extractColorFromStyle(restProps === null || restProps === void 0 ? void 0 : restProps.style);
+    }, [rest, theme]);
+    const fallbackTextColor = (_b = (_a = theme.states) === null || _a === void 0 ? void 0 : _a.highlightText) !== null && _b !== void 0 ? _b : theme.text.primary;
+    const { resolvedTextColor, isTextColorLight } = useMemo(() => {
+        var _a, _b;
+        const candidate = (_b = (_a = highlightDerived.color) !== null && _a !== void 0 ? _a : outerColor) !== null && _b !== void 0 ? _b : fallbackTextColor;
+        const parsedCandidate = parseColor(candidate);
+        if (parsedCandidate) {
+            return {
+                resolvedTextColor: candidate,
+                isTextColorLight: getRelativeLuminance(parsedCandidate) > 0.6,
+            };
+        }
+        const parsedFallback = parseColor(fallbackTextColor);
+        if (parsedFallback) {
+            return {
+                resolvedTextColor: fallbackTextColor,
+                isTextColorLight: getRelativeLuminance(parsedFallback) > 0.6,
+            };
+        }
+        return {
+            resolvedTextColor: candidate !== null && candidate !== void 0 ? candidate : fallbackTextColor,
+            isTextColorLight: theme.colorScheme === 'dark',
+        };
+    }, [highlightDerived.color, outerColor, fallbackTextColor, theme.colorScheme]);
+    const highlightBackground = useMemo(() => resolveHighlightBackground(theme, highlightColor, isTextColorLight), [theme, highlightColor, isTextColorLight]);
+    const highlightColorProp = highlightDerived.color;
+    const baseHighlightStyle = useMemo(() => createBaseHighlightStyle(theme, highlightBackground, resolvedTextColor, !highlightColorProp), [theme, highlightBackground, resolvedTextColor, highlightColorProp]);
+    const overrideHighlightStyle = useMemo(() => (typeof highlightStyles === 'function' ? highlightStyles(theme) : highlightStyles), [highlightStyles, theme]);
+    const highlightNodeStyle = useMemo(() => StyleSheet.flatten([
+        baseHighlightStyle,
+        overrideHighlightStyle,
+        highlightDerived.style,
+    ]), [baseHighlightStyle, overrideHighlightStyle, highlightDerived.style]);
+    const highlightVariant = highlightDerived.variant;
+    const highlightAs = highlightDerived.as;
+    const highlightRest = highlightDerived.rest;
+    const highlightRegex = useMemo(() => {
+        if (textContent === null || highlightValues.length === 0) {
+            return null;
+        }
+        const escaped = highlightValues
+            .map((value) => escapeRegExp$1(value))
+            .filter((value) => value.length > 0)
+            .sort((a, b) => b.length - a.length);
+        if (escaped.length === 0) {
+            return null;
+        }
+        return new RegExp(`(${escaped.join('|')})`, caseSensitive ? 'g' : 'gi');
+    }, [textContent, highlightValues, caseSensitive]);
+    const highlightNormalizedSet = useMemo(() => {
+        if (caseSensitive) {
+            return new Set(highlightValues);
+        }
+        return new Set(highlightValues.map((value) => value.toLowerCase()));
+    }, [highlightValues, caseSensitive]);
+    const renderedChildren = useMemo(() => {
+        if (textContent === null) {
+            return children;
+        }
+        if (!highlightRegex || highlightValues.length === 0) {
+            return textContent;
+        }
+        const segments = textContent.split(highlightRegex);
+        if (segments.length <= 1) {
+            return textContent;
+        }
+        return segments.map((segment, index) => {
+            if (!segment) {
+                return null;
+            }
+            const normalizedSegment = caseSensitive ? segment : segment.toLowerCase();
+            if (highlightNormalizedSet.has(normalizedSegment)) {
+                return (jsx(Text, { variant: highlightVariant, as: highlightAs, color: highlightColorProp, ...highlightRest, style: highlightNodeStyle, children: segment }, `highlight-${index}`));
+            }
+            return (jsx(React__default.Fragment, { children: segment }, `text-${index}`));
+        }).filter((item) => item !== null);
+    }, [
+        children,
+        textContent,
+        highlightRegex,
+        highlightValues,
+        caseSensitive,
+        highlightNormalizedSet,
+        highlightVariant,
+        highlightAs,
+        highlightRest,
+        highlightNodeStyle,
+        highlightColorProp,
+    ]);
+    return (jsx(Text, { variant: outerVariant, ...rest, children: renderedChildren }));
+};
+Highlight.displayName = 'Highlight';
+
 function isAction(item) {
     return 'id' in item && 'label' in item;
 }
@@ -7349,7 +7723,7 @@ function SpotlightActionsList({ children, scrollable = true, maxHeight, style, s
     // Always use ScrollView for consistent behavior
     return (jsx(ScrollView, { ref: scrollRef, style: [containerStyle, { maxHeight: calculatedMaxHeight }], showsVerticalScrollIndicator: true, onScroll: onScrollChange ? (e) => onScrollChange(e.nativeEvent.contentOffset.y) : undefined, scrollEventThrottle: 16, contentContainerStyle: undefined, children: children }));
 }
-function SpotlightAction({ label, description, leftSection, rightSection, onPress, disabled = false, selected = false, children, style, innerRef, }) {
+function SpotlightAction({ label, description, leftSection, rightSection, onPress, disabled = false, selected = false, children, style, innerRef, highlightQuery, }) {
     const theme = useTheme();
     const [isHovered, setIsHovered] = React__default.useState(false);
     // Truncate long descriptions for cleaner list appearance
@@ -7402,7 +7776,7 @@ function SpotlightAction({ label, description, leftSection, rightSection, onPres
             !selected && pressed && pressedStyle,
             !selected && !pressed && isHovered && hoverStyle,
             style,
-        ], ...webHoverProps, children: jsxs(Block, { direction: "row", align: "center", style: styles$c.actionContent, children: [leftSection && (jsx(View, { style: styles$c.actionLeftSection, children: leftSection })), jsxs(Block, { direction: "column", style: { flex: 1 }, children: [jsx(Text, { weight: "500", children: label }), truncatedDescription ? (jsx(Text, { variant: "small", children: truncatedDescription })) : null, children] }), rightSection ? (jsx(View, { style: styles$c.actionRightSection, children: rightSection })) : null] }) }));
+        ], ...webHoverProps, children: jsxs(Block, { direction: "row", align: "center", style: styles$c.actionContent, children: [leftSection && (jsx(View, { style: styles$c.actionLeftSection, children: leftSection })), jsxs(Block, { direction: "column", style: { flex: 1 }, children: [jsx(Highlight, { highlight: highlightQuery, style: styles$c.actionLabel, highlightProps: { style: styles$c.actionLabel }, children: label }), truncatedDescription ? (jsx(Highlight, { highlight: highlightQuery, style: styles$c.actionDescription, highlightProps: { style: styles$c.actionDescription }, children: truncatedDescription })) : null, children] }), rightSection ? (jsx(View, { style: styles$c.actionRightSection, children: rightSection })) : null] }) }));
 }
 function SpotlightActionsGroup({ label, children, style, }) {
     const theme = useTheme();
@@ -7420,7 +7794,7 @@ function SpotlightEmpty({ children, style }) {
     return (jsx(View, { style: [styles$c.empty, style], children: jsx(Text, { size: "md", color: theme.text.secondary, style: styles$c.emptyText, children: children }) }));
 }
 // Main Spotlight component
-function Spotlight({ actions, nothingFound = 'Nothing found...', highlightQuery = false, limit, scrollable = false, maxHeight, // Remove default - let it be calculated dynamically
+function Spotlight({ actions, nothingFound = 'Nothing found...', highlightQuery = true, limit, scrollable = false, maxHeight, // Remove default - let it be calculated dynamically
 shortcut = ['cmd+k', 'ctrl+k'], searchProps = {}, store, variant = 'modal', width = 600, height, }) {
     const spotlightStore = useSpotlightStore();
     // Set as default store if no custom store provided
@@ -7441,6 +7815,23 @@ shortcut = ['cmd+k', 'ctrl+k'], searchProps = {}, store, variant = 'modal', widt
     }, [shouldHandleToggleHotkey, currentStore]);
     useGlobalHotkeys('spotlight-toggle', ['mod+k', handleToggleHotkey]);
     const filteredActions = filterActions(actions, query, limit);
+    const highlightValue = React__default.useMemo(() => {
+        if (!highlightQuery) {
+            return undefined;
+        }
+        if (highlightQuery !== true) {
+            return highlightQuery;
+        }
+        const trimmed = query.trim();
+        if (!trimmed) {
+            return undefined;
+        }
+        const parts = trimmed.split(/\s+/).filter(Boolean);
+        if (parts.length === 0) {
+            return undefined;
+        }
+        return parts.length === 1 ? parts[0] : parts;
+    }, [highlightQuery, query]);
     // Flatten all actions for keyboard navigation
     const flatActions = React__default.useMemo(() => {
         const flat = [];
@@ -7568,7 +7959,7 @@ shortcut = ['cmd+k', 'ctrl+k'], searchProps = {}, store, variant = 'modal', widt
             if (isAction(item)) {
                 const isSelected = flatIndex === selectedIndex;
                 flatIndex++; // Increment after checking
-                return (jsx(SpotlightAction, { label: item.label, description: item.description, selected: isSelected, innerRef: (el) => { itemRefs.current[flatIndex - 1] = el; }, onLayout: (e) => { itemLayouts.current[flatIndex - 1] = { y: e.nativeEvent.layout.y, height: e.nativeEvent.layout.height }; setLayoutVersion(v => v + 1); }, leftSection: typeof item.icon === 'string' ? (jsx(Icon, { name: item.icon, size: "md", color: "pink" })) : (item.icon), onPress: () => {
+                return (jsx(SpotlightAction, { label: item.label, description: item.description, selected: isSelected, innerRef: (el) => { itemRefs.current[flatIndex - 1] = el; }, onLayout: (e) => { itemLayouts.current[flatIndex - 1] = { y: e.nativeEvent.layout.y, height: e.nativeEvent.layout.height }; setLayoutVersion(v => v + 1); }, highlightQuery: highlightValue, leftSection: typeof item.icon === 'string' ? (jsx(Icon, { name: item.icon, size: "md", color: "pink" })) : (item.icon), onPress: () => {
                         var _a;
                         (_a = item.onPress) === null || _a === void 0 ? void 0 : _a.call(item);
                         currentStore.close();
@@ -7578,7 +7969,7 @@ shortcut = ['cmd+k', 'ctrl+k'], searchProps = {}, store, variant = 'modal', widt
                 return (jsx(SpotlightActionsGroup, { label: item.group, children: item.actions.map((action) => {
                         const isSelected = flatIndex === selectedIndex;
                         flatIndex++; // Increment after checking
-                        return (jsx(SpotlightAction, { label: action.label, description: action.description, selected: isSelected, innerRef: (el) => { itemRefs.current[flatIndex - 1] = el; }, onLayout: (e) => { itemLayouts.current[flatIndex - 1] = { y: e.nativeEvent.layout.y, height: e.nativeEvent.layout.height }; setLayoutVersion(v => v + 1); }, leftSection: typeof action.icon === 'string' ? (jsx(Icon, { name: action.icon, size: "md" })) : (action.icon), onPress: () => {
+                        return (jsx(SpotlightAction, { label: action.label, description: action.description, selected: isSelected, innerRef: (el) => { itemRefs.current[flatIndex - 1] = el; }, onLayout: (e) => { itemLayouts.current[flatIndex - 1] = { y: e.nativeEvent.layout.y, height: e.nativeEvent.layout.height }; setLayoutVersion(v => v + 1); }, highlightQuery: highlightValue, leftSection: typeof action.icon === 'string' ? (jsx(Icon, { name: action.icon, size: "md" })) : (action.icon), onPress: () => {
                                 var _a;
                                 (_a = action.onPress) === null || _a === void 0 ? void 0 : _a.call(action);
                                 currentStore.close();
@@ -7728,27 +8119,27 @@ class DirectSpotlightStateManager {
         return { ...this.state };
     }
     setState(updates) {
-        console.log('[DirectSpotlightStateManager] Setting state:', updates, 'from:', this.state);
+        // console.log('[DirectSpotlightStateManager] Setting state:', updates, 'from:', this.state);
         this.state = { ...this.state, ...updates };
         this.notifyListeners();
     }
     open(query) {
-        console.log('[DirectSpotlightStateManager] Opening spotlight');
+        // console.log('[DirectSpotlightStateManager] Opening spotlight');
         this.setState({
             opened: true,
             ...(query !== undefined && { query })
         });
     }
     close() {
-        console.log('[DirectSpotlightStateManager] Closing spotlight');
+        // console.log('[DirectSpotlightStateManager] Closing spotlight');
         this.setState({ opened: false, query: '', selectedIndex: -1 });
     }
     setQuery(query) {
-        console.log('[DirectSpotlightStateManager] Setting query:', query);
+        // console.log('[DirectSpotlightStateManager] Setting query:', query);
         this.setState({ query });
     }
     toggle() {
-        console.log('[DirectSpotlightStateManager] Toggling spotlight');
+        // console.log('[DirectSpotlightStateManager] Toggling spotlight');
         this.setState({ opened: !this.state.opened });
     }
     subscribe(listener) {
@@ -7774,7 +8165,7 @@ const directSpotlightStateManager = new DirectSpotlightStateManager();
 function useDirectSpotlightState() {
     const [state, setState] = useState(() => {
         const globalState = directSpotlightStateManager.getState();
-        console.log('[useDirectSpotlightState] Initializing with:', globalState);
+        // console.log('[useDirectSpotlightState] Initializing with:', globalState);
         return {
             opened: globalState.opened,
             query: globalState.query,
@@ -7782,9 +8173,9 @@ function useDirectSpotlightState() {
         };
     });
     useEffect(() => {
-        console.log('[useDirectSpotlightState] Setting up subscription');
+        // console.log('[useDirectSpotlightState] Setting up subscription');
         const unsubscribe = directSpotlightStateManager.subscribe((globalState) => {
-            console.log('[useDirectSpotlightState] Global state changed:', globalState);
+            // console.log('[useDirectSpotlightState] Global state changed:', globalState);
             setState({
                 opened: globalState.opened,
                 query: globalState.query,
@@ -7793,14 +8184,14 @@ function useDirectSpotlightState() {
         });
         // Sync with current state
         const currentState = directSpotlightStateManager.getState();
-        console.log('[useDirectSpotlightState] Syncing with current state:', currentState);
+        // console.log('[useDirectSpotlightState] Syncing with current state:', currentState);
         setState({
             opened: currentState.opened,
             query: currentState.query,
             selectedIndex: currentState.selectedIndex
         });
         return () => {
-            console.log('[useDirectSpotlightState] Cleaning up subscription');
+            // console.log('[useDirectSpotlightState] Cleaning up subscription');
             unsubscribe();
         };
     }, []);
@@ -9325,10 +9716,9 @@ const useTitleRegistration = (options) => {
     return { elementRef, id };
 };
 
-// Mock LinearGradient for now - in a real app you'd use expo-linear-gradient or react-native-linear-gradient
-const LinearGradient = ({ children, style, ...props }) => (jsx(View, { style: [style, { backgroundColor: props.colors[0] }], children: children }));
+const { LinearGradient: OptionalLinearGradient$3, hasLinearGradient: hasLinearGradient$2 } = resolveLinearGradient();
 function Container(props) {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const theme = useTheme();
     // Extract spacing props and other props
     const { spacingProps, otherProps } = extractSpacingProps(props);
@@ -9359,7 +9749,10 @@ function Container(props) {
             opacity: (_b = backgroundImage.overlay.opacity) !== null && _b !== void 0 ? _b : 0.3,
         }
         : {};
-    return (jsxs(ImageBackground, { source: { uri: backgroundImage.uri }, style: containerStyle, imageStyle: imageStyle, resizeMode: "cover", children: [backgroundImage.overlay && jsx(View, { style: overlayStyle }), backgroundImage.gradient && (jsx(LinearGradient, { colors: backgroundImage.gradient.colors, locations: backgroundImage.gradient.locations, start: backgroundImage.gradient.start || { x: 0, y: 0 }, end: backgroundImage.gradient.end || { x: 0, y: 1 }, style: StyleSheet.absoluteFillObject })), children] }));
+    return (jsxs(ImageBackground, { source: { uri: backgroundImage.uri }, style: containerStyle, imageStyle: imageStyle, resizeMode: "cover", children: [backgroundImage.overlay && jsx(View, { style: overlayStyle }), backgroundImage.gradient && (hasLinearGradient$2 ? (jsx(OptionalLinearGradient$3, { colors: backgroundImage.gradient.colors, locations: backgroundImage.gradient.locations, start: backgroundImage.gradient.start || { x: 0, y: 0 }, end: backgroundImage.gradient.end || { x: 0, y: 1 }, style: StyleSheet.absoluteFillObject })) : (jsx(View, { style: [
+                    StyleSheet.absoluteFillObject,
+                    { backgroundColor: (_d = (_c = backgroundImage.gradient.colors) === null || _c === void 0 ? void 0 : _c[0]) !== null && _d !== void 0 ? _d : 'transparent' },
+                ] }))), children] }));
 }
 
 const Grid = factory((props, ref) => {
@@ -10491,6 +10884,7 @@ const Column = ({ direction = 'column', gap = 'sm', ...props }) => {
 };
 Row.displayName = 'Row';
 
+const { LinearGradient: OptionalLinearGradient$2, hasLinearGradient: hasLinearGradient$1 } = resolveLinearGradient();
 /**
  * GradientText Component
  *
@@ -10680,6 +11074,9 @@ const GradientText = React__default.forwardRef(({ children, colors, locations, a
         return (jsx(Text, { ...textProps, children: children }));
     }
     // Web-specific gradient implementation with animation
+    if (!hasLinearGradient$1) {
+        return (jsx(View, { ref: ref, testID: testID, style: styles$b.container, children: jsx(Text, { ...textProps, children: children }) }));
+    }
     if (isWeb) {
         return (jsx(View, { ref: containerRef, "data-testid": testID, style: { display: 'inline-block' }, children: jsx(Text, { ...textProps, "data-text-inner": "true", children: children }) }));
     }
@@ -10693,7 +11090,7 @@ const GradientText = React__default.forwardRef(({ children, colors, locations, a
     const gradientLocations = colorLocations.length >= 2
         ? colorLocations
         : [0, 1];
-    return (jsx(MaskedView, { ref: ref, testID: testID, style: styles$b.container, maskElement: jsx(View, { style: styles$b.maskContainer, children: jsx(Text, { ...textProps, style: [textProps.style, styles$b.maskText], children: children }) }), children: jsx(LinearGradient$1, { colors: gradientColors, locations: gradientLocations, start: gradientStart, end: gradientEnd, style: styles$b.gradient, children: jsx(Text, { ...textProps, style: [textProps.style, styles$b.transparentText], children: children }) }) }));
+    return (jsx(MaskedView, { ref: ref, testID: testID, style: styles$b.container, maskElement: jsx(View, { style: styles$b.maskContainer, children: jsx(Text, { ...textProps, style: [textProps.style, styles$b.maskText], children: children }) }), children: jsx(OptionalLinearGradient$2, { colors: gradientColors, locations: gradientLocations, start: gradientStart, end: gradientEnd, style: styles$b.gradient, children: jsx(Text, { ...textProps, style: [textProps.style, styles$b.transparentText], children: children }) }) }));
 });
 GradientText.displayName = 'GradientText';
 const styles$b = StyleSheet.create({
@@ -10739,6 +11136,7 @@ const styles$a = StyleSheet.create({
         height: '100%',
     },
 });
+const { LinearGradient: OptionalLinearGradient$1} = resolveLinearGradient();
 const stripColorFromStyle = (styleValue) => {
     if (!styleValue) {
         return styleValue;
@@ -10808,10 +11206,13 @@ function ShimmerText(props) {
     const { spacingProps, otherProps } = extractSpacingProps(props);
     const spacingStyles = getSpacingStyles(spacingProps);
     const { children, text, color: baseColor = '#999999', colors, shimmerColor, duration = 1.8, delay = 0, repeatDelay = 0, repeat = true, once = false, direction = 'ltr', spread = 2, debug = false, onLayout: externalOnLayout, style, ...textProps } = otherProps;
+    const isWeb = Platform.OS === 'web';
+    const gradientModuleAvailable = Boolean(OptionalLinearGradient$1);
     const content = (_a = children !== null && children !== void 0 ? children : text) !== null && _a !== void 0 ? _a : null;
     const normalizedSpread = Math.max(spread, MIN_SPREAD);
     const shouldRepeat = repeat && !once;
-    const shouldAnimate = once || shouldRepeat;
+    const supportsShimmer = isWeb || gradientModuleAvailable;
+    const shouldAnimate = supportsShimmer && (once || shouldRepeat);
     const extraDistance = normalizedSpread - 1;
     const minPosition = -extraDistance;
     const maxPosition = 1 + extraDistance;
@@ -10822,7 +11223,6 @@ function ShimmerText(props) {
     const debugFlag = useSharedValue(debug ? 1 : 0);
     const startX = useSharedValue(0);
     const endX = useSharedValue(0);
-    const isWeb = Platform.OS === 'web';
     const [layout, setLayout] = useState({ width: 0, height: 0 });
     const [gradientWidth, setGradientWidth] = useState(0);
     const mountCountRef = useRef(0);
@@ -10855,7 +11255,7 @@ function ShimmerText(props) {
         console.log(`[ShimmerText] ${message}`);
     }, [debug]);
     useEffect(() => {
-        if (isWeb) {
+        if (isWeb || !gradientModuleAvailable) {
             return;
         }
         mountCountRef.current += 1;
@@ -10898,7 +11298,7 @@ function ShimmerText(props) {
             logEvent('cleanup -> cancel animation');
             cancelAnimation(progress);
         };
-    }, [delay, duration, repeat, once, repeatDelay, progress, logEvent, debugFlag, isWeb, shouldAnimate, shouldRepeat]);
+    }, [delay, duration, repeat, once, repeatDelay, progress, logEvent, debugFlag, isWeb, shouldAnimate, shouldRepeat, gradientModuleAvailable]);
     const handleLayout = useCallback((event) => {
         const { width, height } = event.nativeEvent.layout;
         setLayout((prev) => (prev.width === width && prev.height === height ? prev : { width, height }));
@@ -10984,6 +11384,9 @@ function ShimmerText(props) {
         };
     }, [isWeb, shouldAnimate, shouldRepeat, duration, delay, repeatDelay, direction, initialWebPosition, finalWebPosition, maxPosition, positionRange, minPosition]);
     const renderNative = () => {
+        if (!gradientModuleAvailable || !OptionalLinearGradient$1) {
+            return (jsx(Text, { ...textProps, color: baseColor, onLayout: externalOnLayout, style: style, children: content }));
+        }
         if (layout.width === 0 || layout.height === 0) {
             return (jsx(Text, { ...textProps, color: baseColor, onLayout: handleLayout, style: style, children: content }));
         }
@@ -10996,7 +11399,7 @@ function ShimmerText(props) {
                                     height: layout.height,
                                 },
                                 gradientAnimatedStyle,
-                            ], children: jsx(LinearGradient$1, { colors: resolvedColors, locations: gradientLocations, start: { x: direction === 'rtl' ? 1 : 0, y: 0.5 }, end: { x: direction === 'rtl' ? 0 : 1, y: 0.5 }, style: styles$a.linearGradient }) }) }) })] }));
+                            ], children: jsx(OptionalLinearGradient$1, { colors: resolvedColors, locations: gradientLocations, start: { x: direction === 'rtl' ? 1 : 0, y: 0.5 }, end: { x: direction === 'rtl' ? 0 : 1, y: 0.5 }, style: styles$a.linearGradient }) }) }) })] }));
     };
     const renderWeb = () => {
         var _a;
@@ -11117,6 +11520,7 @@ const Heading4 = (props) => jsx(Title, { order: 4, ...props });
 const Heading5 = (props) => jsx(Title, { order: 5, ...props });
 const Heading6 = (props) => jsx(Title, { order: 6, ...props });
 
+const { LinearGradient: OptionalLinearGradient, hasLinearGradient } = resolveLinearGradient();
 const getIconButtonStyles = (theme, variant = 'filled', size = 'md', disabled = false, loading = false, height, radiusStyles, shadowStyles, customColor) => {
     const baseStyles = {
         flexDirection: 'row',
@@ -11281,6 +11685,7 @@ const IconButton = (allProps) => {
     ...restProps } = otherProps;
     const theme = useTheme();
     const { impactPressIn, impactPressOut } = useHaptics$1();
+    const effectiveVariant = variant === 'gradient' && !hasLinearGradient ? 'filled' : variant;
     // Animation values
     const scaleAnim = useRef(new Animated$1.Value(1)).current;
     const [isPressed, setIsPressed] = useState(false);
@@ -11291,9 +11696,9 @@ const IconButton = (allProps) => {
     // Create shadow styles
     const shadowStyles = getShadowStyles(shadowProps, theme);
     // Get button styles
-    const buttonStyles = useMemo(() => getIconButtonStyles(theme, variant, size, disabled, loading, height, radiusStyles, shadowStyles, colorVariant), [theme, variant, size, disabled, loading, height, radiusStyles, shadowStyles, colorVariant]);
+    const buttonStyles = useMemo(() => getIconButtonStyles(theme, effectiveVariant, size, disabled, loading, height, radiusStyles, shadowStyles, colorVariant), [theme, effectiveVariant, size, disabled, loading, height, radiusStyles, shadowStyles, colorVariant]);
     // Get icon color
-    const resolvedIconColor = useMemo(() => getIconColor(theme, variant, colorVariant, iconColor), [theme, variant, colorVariant, iconColor]);
+    const resolvedIconColor = useMemo(() => getIconColor(theme, effectiveVariant, colorVariant, iconColor), [theme, effectiveVariant, colorVariant, iconColor]);
     // Get icon size
     const resolvedIconSize = iconSize || getDefaultIconSize(size);
     const handlePressIn = () => {
@@ -11334,7 +11739,7 @@ const IconButton = (allProps) => {
             getLayoutStyles(layoutProps),
             { transform: [{ scale: scaleAnim }] },
             style,
-        ], children: variant === 'gradient' ? (jsx(LinearGradient$1, { colors: [theme.colors.primary[4], theme.colors.primary[6]], start: { x: 0, y: 0 }, end: { x: 1, y: 1 }, style: [buttonStyles, { borderWidth: 0 }], children: jsx(Pressable, { onPress: handlePress, onPressIn: handlePressIn, onPressOut: handlePressOut, onLayout: onLayout, disabled: disabled || loading, style: {
+        ], children: variant === 'gradient' && hasLinearGradient ? (jsx(OptionalLinearGradient, { colors: [theme.colors.primary[4], theme.colors.primary[6]], start: { x: 0, y: 0 }, end: { x: 1, y: 1 }, style: [buttonStyles, { borderWidth: 0 }], children: jsx(Pressable, { onPress: handlePress, onPressIn: handlePressIn, onPressOut: handlePressOut, onLayout: onLayout, disabled: disabled || loading, style: {
                     width: '100%',
                     height: '100%',
                     alignItems: 'center',
@@ -11345,9 +11750,9 @@ const IconButton = (allProps) => {
                 }, testID: testID, ...restProps, children: renderContent() }) })) : (jsx(Pressable, { onPress: handlePress, onPressIn: handlePressIn, onPressOut: handlePressOut, onLayout: onLayout, disabled: disabled || loading, style: [
                 buttonStyles,
                 isPressed && !disabled && !loading && {
-                    backgroundColor: variant === 'filled'
+                    backgroundColor: effectiveVariant === 'filled'
                         ? theme.colors.primary[6]
-                        : variant === 'secondary'
+                        : effectiveVariant === 'secondary'
                             ? theme.colors.gray[2]
                             : buttonStyles.backgroundColor,
                 },
@@ -11393,7 +11798,8 @@ const getSeverityColor$1 = (severity) => {
     }
 };
 function ToastBase(props, ref) {
-    const { variant = 'filled', color = 'gray', sev, title, children, icon, withCloseButton = true, loading = false, closeButtonLabel = 'Close notification', onClose, visible = false, animationDuration = 300, autoHide = 4000, position = 'top', style, testID, radius, actions, dismissOnTap = false, maxWidth, persistent = false, animationConfig, swipeConfig, onSwipeDismiss, ...rest } = props;
+    var _a, _b, _c;
+    const { variant = 'filled', color = 'gray', sev, title, children, icon, withCloseButton = true, loading = false, closeButtonLabel = 'Close notification', onClose, visible = false, animationDuration = 300, autoHide = 4000, position = 'top', style, testID, radius, actions, dismissOnTap = false, maxWidth, persistent = false, animationConfig, swipeConfig, onSwipeDismiss, keepMounted = true, ...rest } = props;
     const { spacingProps, otherProps } = extractSpacingProps(rest);
     const spacingStyles = getSpacingStyles(spacingProps);
     const theme = useTheme();
@@ -11456,7 +11862,13 @@ function ToastBase(props, ref) {
         return { finalColor, isThemeColor, colorConfig };
     }, [sev, color, theme.colors]);
     const { finalColor, isThemeColor, colorConfig } = memoizedColors;
-    const [shouldRender, setShouldRender] = React__default.useState(visible);
+    const shouldUnmountOnHide = !keepMounted;
+    const [shouldRender, setShouldRender] = React__default.useState(shouldUnmountOnHide ? visible : true);
+    useEffect(() => {
+        if (!shouldUnmountOnHide) {
+            setShouldRender(true);
+        }
+    }, [shouldUnmountOnHide]);
     const transformProperty = React__default.useMemo(() => (position === 'left' || position === 'right' ? 'translateX' : 'translateY'), [position]);
     // Animation styles
     const animatedStyle = useAnimatedStyle(() => {
@@ -11485,7 +11897,10 @@ function ToastBase(props, ref) {
             opacity: fadeAnimation.value,
         };
     }, [transformProperty, screenWidth, finalSwipeConfig, finalAnimationConfig]);
-    const { notifySuccess, notifyWarning, notifyError } = useHaptics$1();
+    const haptics = useHaptics$1();
+    const notifySuccess = (_a = haptics.notifySuccess) !== null && _a !== void 0 ? _a : (() => { });
+    const notifyWarning = (_b = haptics.notifyWarning) !== null && _b !== void 0 ? _b : (() => { });
+    const notifyError = (_c = haptics.notifyError) !== null && _c !== void 0 ? _c : (() => { });
     // Improved haptic feedback with error handling
     const triggerHapticFeedback = React__default.useCallback((severity) => {
         try {
@@ -11572,7 +11987,9 @@ function ToastBase(props, ref) {
     }, []);
     useEffect(() => {
         if (visible) {
-            setShouldRender(true);
+            if (shouldUnmountOnHide) {
+                setShouldRender(true);
+            }
             // Reset swipe positions
             swipeX.value = 0;
             swipeY.value = 0;
@@ -11617,7 +12034,7 @@ function ToastBase(props, ref) {
                 easing: Easing$1.in(Easing$1.back(1.1))
             }, (finished) => {
                 'worklet';
-                if (finished) {
+                if (finished && shouldUnmountOnHide) {
                     runOnJS(handleShouldRenderUpdate)(false);
                 }
             });
@@ -11631,7 +12048,7 @@ function ToastBase(props, ref) {
                 clearTimeout(autoHideTimeoutRef.current);
             }
         };
-    }, [visible, finalAnimationConfig, autoHide, onClose, slideAnimation, fadeAnimation, swipeX, swipeY, position, persistent, triggerHapticFeedback, sev, getHiddenPosition, handleShouldRenderUpdate]);
+    }, [visible, finalAnimationConfig, autoHide, onClose, slideAnimation, fadeAnimation, swipeX, swipeY, position, persistent, triggerHapticFeedback, sev, getHiddenPosition, handleShouldRenderUpdate, shouldUnmountOnHide]);
     const getToastStyles = () => {
         const baseStyles = {
             ...radiusStyles,
@@ -11756,7 +12173,7 @@ function ToastBase(props, ref) {
     const toastStyles = getToastStyles();
     const textColor = getTextColor();
     const iconColor = getIconColor();
-    if (!shouldRender) {
+    if (shouldUnmountOnHide && !shouldRender) {
         return null;
     }
     // Check if swipe is enabled and gesture handler is available
@@ -13933,7 +14350,7 @@ const BrandIcon = ({ brand, size = 'md', color, variant, style, label, decorativ
                 const defs = brandIconDef.defs;
                 if (!defs)
                     return null;
-                return (jsx(Defs, { children: (_a = defs.linearGradients) === null || _a === void 0 ? void 0 : _a.map((g, idx) => (jsx(LinearGradient$2, { id: g.id, x1: g.x1, y1: g.y1, x2: g.x2, y2: g.y2, gradientUnits: g.gradientUnits, gradientTransform: g.gradientTransform, children: g.stops.map((s, sidx) => (jsx(Stop, { offset: s.offset, stopColor: color || transformColorForDarkMode(s.stopColor, isDarkMode, shouldInvert), stopOpacity: s.stopOpacity }, `stop-${sidx}`))) }, `lg-${g.id || idx}`))) }));
+                return (jsx(Defs, { children: (_a = defs.linearGradients) === null || _a === void 0 ? void 0 : _a.map((g, idx) => (jsx(LinearGradient, { id: g.id, x1: g.x1, y1: g.y1, x2: g.x2, y2: g.y2, gradientUnits: g.gradientUnits, gradientTransform: g.gradientTransform, children: g.stops.map((s, sidx) => (jsx(Stop, { offset: s.offset, stopColor: color || transformColorForDarkMode(s.stopColor, isDarkMode, shouldInvert), stopOpacity: s.stopOpacity }, `stop-${sidx}`))) }, `lg-${g.id || idx}`))) }));
             })(), Array.isArray(iconContent) ? (
             // Multi-shape brand icon (paths, circles, etc.)
             iconContent.map((item, index) => {
@@ -14665,7 +15082,7 @@ const createInputStyles = (theme, isRTL = false) => {
                 color: props.disabled ? theme.text.disabled : theme.text.primary,
                 fontSize: px(theme.fontSizes.sm),
                 fontWeight: '600',
-                marginBottom: 4
+                marginBottom: 0
             },
             leftSection: {
                 ...(isRTL ? { paddingLeft: px(theme.spacing.xs) } : { paddingRight: px(theme.spacing.xs) })
@@ -14693,8 +15110,15 @@ const FieldHeader = ({ label, description, required, withAsterisk, disabled, err
     const styles = getInputStyles({ size, disabled, error });
     if (!label && !description)
         return null;
-    const mb = marginBottom !== undefined ? marginBottom : (description ? 4 : 4);
-    return (jsxs(View, { style: { marginBottom: mb }, testID: testID, children: [label && (jsxs(Text$1, { style: styles.label, children: [label, required && withAsterisk && (jsx(Text$1, { style: styles.required, accessibilityLabel: "required", children: ' *' }))] })), description && (jsx(Text$1, { style: { fontSize: 12, color: theme.text.muted }, children: description }))] }));
+    const hasDescription = Boolean(description);
+    const resolvedMarginBottom = (() => {
+        if (marginBottom !== undefined)
+            return marginBottom;
+        if (!hasDescription && !error)
+            return 0;
+        return 4;
+    })();
+    return (jsxs(View, { style: { marginBottom: resolvedMarginBottom }, testID: testID, children: [label && (jsxs(Text$1, { style: styles.label, children: [label, required && withAsterisk && (jsx(Text$1, { style: styles.required, accessibilityLabel: "required", children: ' *' }))] })), description && (jsx(Text$1, { style: { fontSize: 12, color: theme.text.muted }, children: description }))] }));
 };
 
 const TextInputBase = factory((props, ref) => {
@@ -17668,7 +18092,7 @@ const getCardStyles = (theme, variant = 'filled', padding, radiusStyles, shadowS
         ...(variant !== 'outline' && {
             ...DESIGN_TOKENS.shadow.sm && { boxShadow: DESIGN_TOKENS.shadow.sm },
             elevation: 1,
-        })
+        }),
     };
     const variantStyles = {
         outline: {
@@ -18584,11 +19008,7 @@ const Search = factory((props, ref) => {
                         fontSize: size === 'xs' ? 12 : size === 'sm' ? 14 : 16,
                     }, children: placeholder }), jsx(Space, { w: 64 }), rightComponent || finalRight] }));
     }
-    return jsx(Input
-    // @ts-expect-error factory handles ref injection
-    , { 
-        // @ts-expect-error factory handles ref injection
-        ref: ref, type: "search", value: internal.value, onChangeText: handleChange, onEnter: handleSubmit, placeholder: placeholder, size: size, radius: radius, leftSection: left, rightSection: finalRight, accessibilityLabel: accessibilityLabel, style: style });
+    return jsx(Input, { ref: ref, type: "search", value: internal.value, onChangeText: handleChange, onEnter: handleSubmit, placeholder: placeholder, size: size, radius: radius, leftSection: left, rightSection: finalRight, accessibilityLabel: accessibilityLabel, style: style });
 });
 Search.displayName = 'Search';
 
@@ -18692,71 +19112,217 @@ const SIZE_CONFIG = {
     md: { fontSize: 'sm', padY: 8, padX: 12, gap: 10, radius: 8, minHeight: 38 },
     lg: { fontSize: 'md', padY: 10, padX: 14, gap: 12, radius: 10, minHeight: 44 },
 };
-const MenuItemButton = (allProps) => {
+const MenuItemButton = forwardRef((allProps, ref) => {
     var _a;
     const { spacingProps, otherProps } = extractSpacingProps(allProps);
-    const { title, children, startIcon, endIcon, onPress, disabled = false, active = false, danger = false, fullWidth = true, size = 'sm', compact = false, rounded = false, style, onPressIn, onPressOut, onMouseDown, ...restProps } = otherProps;
+    const { title, children, startIcon, endIcon, onPress, disabled = false, active = false, danger = false, fullWidth = true, size = 'sm', compact = false, rounded = false, style, onPressIn, onPressOut, onMouseDown, onMouseEnter, onMouseLeave, onHoverIn, onHoverOut, onFocus, onBlur, tone, hoverTone, activeTone, textColor: textColorOverride, hoverTextColor: hoverTextColorOverride, activeTextColor: activeTextColorOverride, testID, ...restProps } = otherProps;
     const theme = useTheme();
     const { isRTL } = useDirection();
     const spacingStyles = getSpacingStyles(spacingProps);
     const cfg = (_a = SIZE_CONFIG[size]) !== null && _a !== void 0 ? _a : SIZE_CONFIG.sm;
     const content = children || title;
-    const colors = useMemo(() => {
-        const base = {
-            text: theme.text.primary,
-            bg: 'transparent',
-            hoverBg: theme.colors.gray[1],
-            activeBg: theme.colors.primary[0],
-            activeText: theme.colors.primary[6],
-            dangerText: theme.colors.error[6],
-            dangerHoverBg: theme.colors.error[0],
-            dangerActiveBg: theme.colors.error[1],
-        };
-        if (danger) {
-            return {
-                ...base,
-                text: base.dangerText,
-                hoverBg: base.dangerHoverBg,
-                activeBg: base.dangerActiveBg,
-                activeText: base.dangerText,
-            };
-        }
-        if (active) {
-            return {
-                ...base,
-                bg: base.activeBg,
-                text: base.activeText,
-            };
+    const [isHovered, setIsHovered] = useState(false);
+    const [isPressed, setIsPressed] = useState(false);
+    const resolveTone = useCallback((toneKey) => {
+        if (danger)
+            return 'danger';
+        return toneKey !== null && toneKey !== void 0 ? toneKey : 'default';
+    }, [danger]);
+    const getPalette = useCallback((toneKey) => {
+        var _a;
+        const isDark = theme.colorScheme === 'dark';
+        switch (toneKey) {
+            case 'danger':
+                return {
+                    text: theme.colors.error[6],
+                    bg: 'transparent',
+                    hoverBg: isDark ? theme.colors.error[3] : theme.colors.error[0],
+                    activeBg: isDark ? theme.colors.error[4] : theme.colors.error[1],
+                    activeText: theme.colors.error[6],
+                };
+            case 'success':
+                return {
+                    text: isDark ? theme.colors.success[2] : theme.colors.success[6],
+                    bg: 'transparent',
+                    hoverBg: isDark ? theme.colors.success[4] : theme.colors.success[0],
+                    activeBg: isDark ? theme.colors.success[5] : theme.colors.success[1],
+                    activeText: isDark ? theme.colors.success[2] : theme.colors.success[6],
+                };
+            case 'warning':
+                return {
+                    text: isDark ? theme.colors.warning[2] : theme.colors.warning[6],
+                    bg: 'transparent',
+                    hoverBg: isDark ? theme.colors.warning[4] : theme.colors.warning[0],
+                    activeBg: isDark ? theme.colors.warning[5] : theme.colors.warning[1],
+                    activeText: isDark ? theme.colors.warning[2] : theme.colors.warning[6],
+                };
+            default:
+                return {
+                    text: theme.text.primary,
+                    bg: 'transparent',
+                    hoverBg: isDark ? theme.colors.gray[3] : theme.colors.gray[1],
+                    activeBg: isDark ? theme.colors.primary[4] : theme.colors.primary[0],
+                    activeText: isDark ? ((_a = theme.text.onPrimary) !== null && _a !== void 0 ? _a : theme.text.primary) : theme.colors.primary[6],
+                };
         }
-        return base;
-    }, [theme, active, danger]);
-    const horizontalPad = cfg.padX;
-    const verticalPad = compact ? Math.max(2, cfg.padY - 4) : cfg.padY;
-    return (jsx(View, { style: [fullWidth && { width: '100%' }, spacingStyles], children: jsxs(Pressable, { disabled: disabled, onPress: disabled ? undefined : onPress, onPressIn: disabled ? undefined : onPressIn, onPressOut: disabled ? undefined : onPressOut, ...(Platform.OS === 'web' && onMouseDown ? { onMouseDown } : {}), style: ({ pressed }) => [
-                {
-                    flexDirection: isRTL ? 'row-reverse' : 'row',
-                    alignItems: 'center',
-                    minHeight: cfg.minHeight,
-                    paddingHorizontal: horizontalPad,
-                    paddingVertical: verticalPad,
-                    width: fullWidth ? '100%' : undefined,
-                    borderRadius: rounded ? 999 : cfg.radius,
-                    backgroundColor: pressed ? colors.activeBg : colors.bg,
-                    opacity: disabled ? 0.45 : 1,
-                    gap: cfg.gap,
-                },
-                active && !danger && !pressed && { backgroundColor: colors.activeBg },
-                style
-            ], ...restProps, children: [startIcon && (jsx(View, { style: { opacity: disabled ? 0.6 : 1 }, children: startIcon })), content && (typeof content === 'string' ? (jsx(Text, { size: cfg.fontSize, weight: active ? '600' : '500', color: danger ? colors.text : active ? colors.text : theme.text.primary, style: { flex: 1, overflow: 'hidden' }, children: content })) : content), endIcon && (jsx(View, { style: isRTL ? { marginRight: cfg.gap, opacity: disabled ? 0.6 : 1 } : { marginLeft: cfg.gap, opacity: disabled ? 0.6 : 1 }, children: endIcon }))] }) }));
-};
+    }, [theme]);
+    const baseTone = resolveTone(tone);
+    const hoverToneResolved = resolveTone(hoverTone);
+    const activeToneResolved = resolveTone(activeTone !== null && activeTone !== void 0 ? activeTone : tone);
+    const basePalette = useMemo(() => getPalette(baseTone), [baseTone, getPalette]);
+    const hoverPalette = useMemo(() => getPalette(hoverToneResolved), [hoverToneResolved, getPalette]);
+    const activePalette = useMemo(() => getPalette(activeToneResolved), [activeToneResolved, getPalette]);
+    const buttonBaseStyle = useMemo(() => ({
+        flexDirection: isRTL ? 'row-reverse' : 'row',
+        alignItems: 'center',
+        minHeight: cfg.minHeight,
+        paddingHorizontal: cfg.padX,
+        paddingVertical: compact ? Math.max(2, cfg.padY - 4) : cfg.padY,
+        width: fullWidth ? '100%' : undefined,
+        borderRadius: rounded ? 999 : cfg.radius,
+        opacity: disabled ? 0.45 : 1,
+        gap: cfg.gap,
+        backgroundColor: basePalette.bg,
+    }), [isRTL, cfg, compact, fullWidth, rounded, disabled, basePalette.bg]);
+    const handlePressIn = useCallback((event) => {
+        if (!disabled)
+            setIsPressed(true);
+        onPressIn === null || onPressIn === void 0 ? void 0 : onPressIn(event);
+    }, [disabled, onPressIn]);
+    const handlePressOut = useCallback((event) => {
+        if (!disabled)
+            setIsPressed(false);
+        onPressOut === null || onPressOut === void 0 ? void 0 : onPressOut(event);
+    }, [disabled, onPressOut]);
+    const handleHoverIn = useCallback((event) => {
+        if (!disabled)
+            setIsHovered(true);
+        onHoverIn === null || onHoverIn === void 0 ? void 0 : onHoverIn(event);
+    }, [disabled, onHoverIn]);
+    const handleHoverOut = useCallback((event) => {
+        if (!disabled)
+            setIsHovered(false);
+        onHoverOut === null || onHoverOut === void 0 ? void 0 : onHoverOut(event);
+    }, [disabled, onHoverOut]);
+    const handleMouseEnter = useCallback((event) => {
+        if (!disabled)
+            setIsHovered(true);
+        onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(event);
+    }, [disabled, onMouseEnter]);
+    const handleMouseLeave = useCallback((event) => {
+        if (!disabled)
+            setIsHovered(false);
+        onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(event);
+    }, [disabled, onMouseLeave]);
+    const isActive = active || isPressed;
+    const baseText = textColorOverride !== null && textColorOverride !== void 0 ? textColorOverride : basePalette.text;
+    const hoverText = hoverTextColorOverride !== null && hoverTextColorOverride !== void 0 ? hoverTextColorOverride : hoverPalette.text;
+    const activeText = activeTextColorOverride !== null && activeTextColorOverride !== void 0 ? activeTextColorOverride : activePalette.activeText;
+    const textColor = disabled
+        ? theme.text.disabled
+        : isActive
+            ? activeText
+            : isHovered
+                ? hoverText
+                : baseText;
+    return (jsx(View, { ref: ref, style: [fullWidth && { width: '100%' }, spacingStyles], children: jsxs(Pressable, { disabled: disabled, onPress: disabled ? undefined : onPress, onPressIn: disabled ? undefined : handlePressIn, onPressOut: disabled ? undefined : handlePressOut, ...(Platform.OS === 'web' && onMouseDown ? { onMouseDown } : {}), ...(Platform.OS === 'web' ? { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave } : {}), onHoverIn: handleHoverIn, onHoverOut: handleHoverOut, onFocus: onFocus, onBlur: onBlur, testID: testID, style: (pressableState) => {
+                const { pressed } = pressableState;
+                const hovered = pressableState.hovered || isHovered;
+                const effectiveActive = isActive || pressed;
+                return [
+                    buttonBaseStyle,
+                    !disabled && effectiveActive && { backgroundColor: activePalette.activeBg },
+                    !disabled && !effectiveActive && hovered && { backgroundColor: hoverPalette.hoverBg },
+                    style
+                ];
+            }, ...restProps, children: [startIcon && (jsx(View, { style: { opacity: disabled ? 0.6 : 1 }, children: startIcon })), content && (typeof content === 'string' ? (jsx(Text, { size: cfg.fontSize, weight: active ? '600' : '500', color: textColor, style: { flex: 1, overflow: 'hidden' }, children: content })) : content), endIcon && (jsx(View, { style: isRTL ? { marginRight: cfg.gap, opacity: disabled ? 0.6 : 1 } : { marginLeft: cfg.gap, opacity: disabled ? 0.6 : 1 }, children: endIcon }))] }) }));
+});
 MenuItemButton.displayName = 'MenuItemButton';
 
+function useMenuStyles() {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    const theme = useTheme();
+    const getPaletteColor = (palette, index) => {
+        if (Array.isArray(palette)) {
+            return palette[index];
+        }
+        return undefined;
+    };
+    const surfacePalette = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.surface;
+    const grayPalette = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray;
+    const lightSurfaceColor = (_h = (_g = (_e = (_c = getPaletteColor(surfacePalette, 4)) !== null && _c !== void 0 ? _c : (typeof ((_d = theme.backgrounds) === null || _d === void 0 ? void 0 : _d.surface) === 'string' ? theme.backgrounds.surface : undefined)) !== null && _e !== void 0 ? _e : (typeof ((_f = theme.backgrounds) === null || _f === void 0 ? void 0 : _f.base) === 'string' ? theme.backgrounds.base : undefined)) !== null && _g !== void 0 ? _g : getPaletteColor(grayPalette, 0)) !== null && _h !== void 0 ? _h : '#ffffff';
+    const darkSurfaceColor = (_l = (_j = getPaletteColor(surfacePalette, 3)) !== null && _j !== void 0 ? _j : (typeof ((_k = theme.backgrounds) === null || _k === void 0 ? void 0 : _k.elevated) === 'string' ? theme.backgrounds.elevated : undefined)) !== null && _l !== void 0 ? _l : lightSurfaceColor;
+    const fallbackRadius = (_q = (_o = (_m = theme.radii) === null || _m === void 0 ? void 0 : _m.md) !== null && _o !== void 0 ? _o : (_p = theme.radii) === null || _p === void 0 ? void 0 : _p.sm) !== null && _q !== void 0 ? _q : '8';
+    const parsedRadius = typeof fallbackRadius === 'number'
+        ? fallbackRadius
+        : parseInt(`${fallbackRadius}`, 10) || 8;
+    const dropdown = {
+        backgroundColor: theme.colorScheme === 'dark' ? darkSurfaceColor : lightSurfaceColor,
+        borderRadius: parsedRadius,
+        // borderWidth: 3, // Temporarily increased for debugging
+        // borderColor: '#ff0000', // Temporarily red for debugging
+        boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
+        elevation: 8,
+        minWidth: 180,
+        maxWidth: 320,
+        overflow: 'hidden',
+    };
+    const item = {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: 8,
+        paddingHorizontal: 12,
+        minHeight: 36,
+    };
+    const itemPressed = {
+        backgroundColor: theme.colors.gray[1],
+    };
+    const itemDisabled = {
+        opacity: 0.5,
+    };
+    const itemDanger = {
+        backgroundColor: theme.colors.error[0],
+    };
+    const itemDangerPressed = {
+        backgroundColor: theme.colors.error[1],
+    };
+    const label = {
+        paddingVertical: 6,
+        paddingHorizontal: 12,
+    };
+    const divider = {
+        height: 1,
+        // backgroundColor: theme.colors.gray[2],
+        // marginVertical: 4,
+    };
+    const leftSection = {
+        marginRight: 8,
+    };
+    const rightSection = {
+        marginLeft: 'auto',
+        paddingLeft: 12,
+    };
+    return {
+        dropdown,
+        item,
+        itemPressed,
+        itemDisabled,
+        itemDanger,
+        itemDangerPressed,
+        label,
+        divider,
+        leftSection,
+        rightSection,
+    };
+}
+
 const Select = factory((allProps, ref) => {
     var _a;
     const { spacingProps, otherProps: propsAfterSpacing } = extractSpacingProps(allProps);
     const { layoutProps, otherProps } = extractLayoutProps(propsAfterSpacing);
     const { value: valueProp, defaultValue, onChange, options, placeholder = 'Select…', size = 'md', radius = 'md', disabled, label, helperText, description, error, renderOption, fullWidth, maxHeight = 260, closeOnSelect = true, clearable, clearButtonLabel, onClear } = otherProps;
     const theme = useTheme();
+    const menuStyles = useMenuStyles();
     const { isRTL } = useDirection();
     const [open, setOpen] = useState(false);
     const [value, setValue] = useState((_a = valueProp !== null && valueProp !== void 0 ? valueProp : defaultValue) !== null && _a !== void 0 ? _a : null);
@@ -18764,6 +19330,8 @@ const Select = factory((allProps, ref) => {
     const triggerRef = useRef(null);
     const { openOverlay, closeOverlay, updateOverlay } = useOverlay();
     const overlayIdRef = useRef(null);
+    const menuSignatureRef = useRef('');
+    const menuLayoutRef = useRef(null);
     // keep controlled
     useEffect(() => { if (valueProp !== undefined)
         setValue(valueProp); }, [valueProp]);
@@ -18781,34 +19349,28 @@ const Select = factory((allProps, ref) => {
     const selectedOption = options.find((o) => o.value === value) || null;
     const showClearButton = !!(clearable && selectedOption && !disabled);
     const clearLabel = clearButtonLabel || 'Clear selection';
+    const optionRowHeight = useMemo(() => {
+        switch (size) {
+            case 'xs':
+                return 30;
+            case 'sm':
+                return 34;
+            case 'lg':
+                return 44;
+            case 'xl':
+                return 48;
+            default:
+                return 38;
+        }
+    }, [size]);
     const close = useCallback(() => {
         setOpen(false);
         if (overlayIdRef.current) {
             closeOverlay(overlayIdRef.current);
             overlayIdRef.current = null;
         }
+        menuLayoutRef.current = null;
     }, [closeOverlay]);
-    const computeAnchor = useCallback(() => {
-        var _a;
-        if (Platform.OS !== 'web')
-            return undefined;
-        if (!triggerRef.current)
-            return undefined;
-        try {
-            const node = triggerRef.current._node || triggerRef.current;
-            const rect = (_a = node === null || node === void 0 ? void 0 : node.getBoundingClientRect) === null || _a === void 0 ? void 0 : _a.call(node);
-            if (rect) {
-                setTriggerWidth(rect.width);
-                // In RTL, use rect.right instead of rect.left to align the dropdown
-                const xPos = isRTL ? rect.right - rect.width : rect.left;
-                return { x: xPos, y: rect.bottom + 4, width: rect.width, height: rect.height };
-            }
-        }
-        catch (_e) {
-            /* measurement failures are non-fatal on web */
-        }
-        return undefined;
-    }, [isRTL]);
     const measureTrigger = useCallback(() => {
         var _a, _b;
         if (Platform.OS === 'web')
@@ -18824,29 +19386,167 @@ const Select = factory((allProps, ref) => {
             /* native measurement failures can be ignored safely */
         }
     }, []);
-    const getMenuContent = useCallback(() => menu, [ /* menu recomputed below */]);
-    const openPortal = useCallback(() => {
+    const resolveDropdownPosition = useCallback(async (preferredSize) => {
+        if (Platform.OS !== 'web')
+            return null;
+        if (!triggerRef.current)
+            return null;
+        try {
+            const anchorRect = await measureElement(triggerRef);
+            if (!anchorRect || anchorRect.height === 0) {
+                return null;
+            }
+            const optionCount = options.length || 1;
+            const estimatedHeight = Math.min(maxHeight, Math.max(optionRowHeight * optionCount, optionRowHeight));
+            const estimatedWidth = (anchorRect.width && anchorRect.width > 0) ? anchorRect.width : (triggerWidth || 200);
+            const overlayWidth = (preferredSize === null || preferredSize === void 0 ? void 0 : preferredSize.width) && preferredSize.width > 0
+                ? preferredSize.width
+                : estimatedWidth;
+            const overlayHeight = (preferredSize === null || preferredSize === void 0 ? void 0 : preferredSize.height) && preferredSize.height > 0
+                ? Math.min(preferredSize.height, maxHeight)
+                : estimatedHeight;
+            const overlaySize = {
+                width: overlayWidth,
+                height: overlayHeight,
+            };
+            const position = calculateOverlayPositionEnhanced(anchorRect, overlaySize, {
+                placement: 'auto',
+                offset: 6,
+                strategy: 'fixed',
+                flip: true,
+                shift: true,
+                boundary: 8,
+            });
+            const finalWidth = position.finalWidth || overlaySize.width;
+            const finalHeight = position.finalHeight || overlaySize.height;
+            setTriggerWidth(prev => {
+                if (prev !== null && Math.abs(prev - finalWidth) < 1) {
+                    return prev;
+                }
+                return finalWidth;
+            });
+            return {
+                position,
+                overlaySize: {
+                    width: finalWidth,
+                    height: finalHeight,
+                },
+            };
+        }
+        catch (error) {
+            console.warn('Select: failed to resolve dropdown position', error);
+            return null;
+        }
+    }, [options, maxHeight, optionRowHeight, triggerWidth]);
+    const handleMenuLayoutChange = useCallback(async (layout) => {
+        const previous = menuLayoutRef.current;
+        if (previous) {
+            const widthDiff = Math.abs(previous.width - (layout.width || 0));
+            const heightDiff = Math.abs(previous.height - (layout.height || 0));
+            if (widthDiff < 1 && heightDiff < 1) {
+                return;
+            }
+        }
+        menuLayoutRef.current = layout;
+        if (!open || Platform.OS !== 'web' || !overlayIdRef.current)
+            return;
+        const resolved = await resolveDropdownPosition({ width: layout.width, height: layout.height });
+        if (!resolved)
+            return;
+        const { position, overlaySize } = resolved;
+        updateOverlay(overlayIdRef.current, {
+            anchor: {
+                x: position.x,
+                y: position.y,
+                width: overlaySize.width,
+                height: overlaySize.height,
+            },
+        });
+    }, [open, resolveDropdownPosition, updateOverlay]);
+    const handleMenuLayoutEvent = useCallback((event) => {
+        const { width, height } = event.nativeEvent.layout || {};
+        if (width === undefined || height === undefined)
+            return;
+        handleMenuLayoutChange({ width, height });
+    }, [handleMenuLayoutChange]);
+    const handleSelect = useCallback((opt) => {
+        if (opt.disabled)
+            return;
+        if (valueProp === undefined)
+            setValue(opt.value);
+        onChange === null || onChange === void 0 ? void 0 : onChange(opt.value, opt);
+        if (closeOnSelect)
+            close();
+    }, [onChange, valueProp, close, closeOnSelect]);
+    const menu = useMemo(() => {
+        const resolvedWidth = triggerWidth && triggerWidth > 0 ? triggerWidth : undefined;
+        return (jsx(View, { style: resolvedWidth ? { width: resolvedWidth, minWidth: resolvedWidth } : undefined, onLayout: Platform.OS === 'web' ? handleMenuLayoutEvent : undefined, children: jsx(ListGroup, { variant: "default", size: "sm", style: {
+                    ...menuStyles.dropdown,
+                    maxHeight,
+                    ...(resolvedWidth ? { width: resolvedWidth, minWidth: resolvedWidth } : {}),
+                }, children: jsx(FlatList, { data: options, keyExtractor: o => String(o.value), renderItem: ({ item }) => {
+                        const selected = item.value === value;
+                        if (renderOption) {
+                            return jsx(View, { children: renderOption(item, false, selected) });
+                        }
+                        const successPalette = theme.colors.success || [];
+                        const highlightColor = theme.colorScheme === 'dark'
+                            ? successPalette[4] || successPalette[5] || '#30D158'
+                            : successPalette[6] || successPalette[5] || '#2f9e44';
+                        const baseTextColor = item.disabled ? theme.text.disabled : theme.text.primary;
+                        const accentTextColor = item.disabled ? theme.text.disabled : highlightColor;
+                        return (jsx(MenuItemButton, { onPress: () => handleSelect(item), disabled: !!item.disabled, active: selected, tone: selected ? 'success' : 'default', hoverTone: "success", textColor: baseTextColor, hoverTextColor: accentTextColor, activeTextColor: accentTextColor, compact: true, rounded: false, style: { borderRadius: 0 }, children: item.label }));
+                    }, ItemSeparatorComponent: renderOption ? undefined : ListGroupDivider, style: { maxHeight }, bounces: false }) }) }));
+    }, [menuStyles.dropdown, maxHeight, triggerWidth, options, value, renderOption, handleSelect, handleMenuLayoutEvent]);
+    const getMenuContent = useCallback(() => menu, [menu]);
+    const menuSignature = useMemo(() => {
+        const optionSignature = options
+            .map(opt => `${String(opt.value)}-${opt.label}-${opt.disabled ? '1' : '0'}`)
+            .join('|');
+        const valueSignature = typeof value === 'object' && value !== null
+            ? JSON.stringify(value)
+            : String(value !== null && value !== void 0 ? value : '');
+        const triggerSig = triggerWidth != null ? `tw:${Math.round(triggerWidth)}` : 'tw:auto';
+        return `${optionSignature}|value:${valueSignature}|${triggerSig}|render:${renderOption ? 'custom' : 'default'}`;
+    }, [options, value, triggerWidth, renderOption]);
+    const openPortal = useCallback(async () => {
         if (disabled || Platform.OS !== 'web')
             return;
-        const anchor = computeAnchor();
+        const resolved = await resolveDropdownPosition();
+        if (!resolved) {
+            close();
+            return;
+        }
+        const { position, overlaySize } = resolved;
         const id = openOverlay({
             content: getMenuContent(),
-            anchor,
-            width: anchor === null || anchor === void 0 ? void 0 : anchor.width,
+            anchor: {
+                x: position.x,
+                y: position.y,
+                width: overlaySize.width,
+                height: overlaySize.height,
+            },
             strategy: 'fixed',
             zIndex: 1300,
             closeOnClickOutside: true,
-            onClose: () => { setOpen(false); }
+            closeOnEscape: true,
+            onClose: () => {
+                setOpen(false);
+            }
         });
         overlayIdRef.current = id;
-    }, [disabled, computeAnchor, openOverlay, getMenuContent]);
+        menuSignatureRef.current = menuSignature;
+    }, [disabled, resolveDropdownPosition, openOverlay, getMenuContent, close, menuSignature]);
     const toggle = useCallback(() => {
         if (disabled)
             return;
         setOpen(o => {
             const next = !o;
-            if (next && Platform.OS === 'web')
-                openPortal();
+            if (next && Platform.OS === 'web') {
+                openPortal().catch(() => {
+                    close();
+                });
+            }
             if (next && Platform.OS !== 'web')
                 measureTrigger();
             if (!next)
@@ -18855,21 +19555,37 @@ const Select = factory((allProps, ref) => {
         });
     }, [disabled, openPortal, close, measureTrigger]);
     useLayoutEffect(() => {
-        if (open && Platform.OS === 'web' && overlayIdRef.current) {
-            const anchor = computeAnchor();
-            if (anchor)
-                updateOverlay(overlayIdRef.current, { anchor });
-        }
-    }, [open, value, options, computeAnchor, updateOverlay]);
-    const handleSelect = useCallback((opt) => {
-        if (opt.disabled)
+        if (!open || Platform.OS !== 'web' || !overlayIdRef.current)
             return;
-        if (valueProp === undefined)
-            setValue(opt.value);
-        onChange === null || onChange === void 0 ? void 0 : onChange(opt.value, opt);
-        if (closeOnSelect)
-            close();
-    }, [onChange, valueProp, close, closeOnSelect]);
+        let cancelled = false;
+        (async () => {
+            const resolved = await resolveDropdownPosition();
+            if (!resolved || cancelled)
+                return;
+            const { position, overlaySize } = resolved;
+            updateOverlay(overlayIdRef.current, {
+                anchor: {
+                    x: position.x,
+                    y: position.y,
+                    width: overlaySize.width,
+                    height: overlaySize.height,
+                },
+            });
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [open, value, options, resolveDropdownPosition, updateOverlay]);
+    useEffect(() => {
+        if (!open || Platform.OS !== 'web' || !overlayIdRef.current)
+            return;
+        if (menuSignatureRef.current === menuSignature)
+            return;
+        menuSignatureRef.current = menuSignature;
+        updateOverlay(overlayIdRef.current, {
+            content: getMenuContent(),
+        });
+    }, [open, menuSignature, getMenuContent, updateOverlay]);
     const handleClear = useCallback((event) => {
         var _a;
         (_a = event === null || event === void 0 ? void 0 : event.stopPropagation) === null || _a === void 0 ? void 0 : _a.call(event);
@@ -18882,22 +19598,6 @@ const Select = factory((allProps, ref) => {
         onClear === null || onClear === void 0 ? void 0 : onClear();
         close();
     }, [disabled, valueProp, onChange, onClear, close]);
-    const menu = (jsx(ListGroup, { variant: "default", size: "sm", style: {
-            maxHeight,
-            width: triggerWidth || undefined,
-            minWidth: triggerWidth || undefined,
-        }, children: jsx(FlatList, { data: options, keyExtractor: o => String(o.value), renderItem: ({ item, index }) => {
-                const selected = item.value === value;
-                if (renderOption) {
-                    return jsx(View, { children: renderOption(item, false, selected) });
-                }
-                const isLast = index === options.length - 1;
-                return (jsx(MenuItemButton, { onPress: () => handleSelect(item), disabled: !!item.disabled, active: selected, compact: true, rounded: false, style: {
-                        borderRadius: 0,
-                        borderBottomWidth: isLast ? 0 : StyleSheet.hairlineWidth,
-                        borderBottomColor: theme.colorScheme === 'dark' ? theme.colors.gray[4] : theme.colors.gray[2],
-                    }, children: item.label }));
-            }, style: { maxHeight }, bounces: false }) }));
     const fieldContent = selectedOption ? (jsx(Text$1, { style: { color: disabled ? theme.text.disabled : theme.text.primary }, children: selectedOption.label })) : (jsx(Text$1, { style: { color: disabled ? theme.text.disabled : theme.text.muted }, children: placeholder }));
     return (jsxs(View, { style: [defaultMinWidthStyle, fullWidthStyle, spacingStyles, layoutStyles,], children: [jsx(FieldHeader, { label: label, description: description, disabled: disabled, error: !!error, size: size }), jsxs(Pressable, { ref: (node) => { triggerRef.current = node; if (typeof ref === 'function')
                     ref(node);
@@ -18915,36 +19615,6 @@ const Select = factory((allProps, ref) => {
 });
 
 const debounce = require('lodash.debounce');
-const HighlightedText = ({ text, query, highlight = false }) => {
-    const theme = useTheme();
-    const baseStyle = {
-        color: theme.text.primary,
-        fontSize: 15,
-        fontFamily: theme.fontFamily,
-    };
-    if (!highlight || !query) {
-        return (jsx(Text, { as: "span", variant: "span", style: baseStyle, children: text }));
-    }
-    const safeQuery = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-    const regex = new RegExp(`(${safeQuery})`, 'gi');
-    const parts = text.split(regex);
-    const normalizedQuery = query.toLowerCase();
-    return (jsx(Text, { as: "span", variant: "span", style: baseStyle, children: parts.map((part, index) => {
-            var _a, _b, _c, _d;
-            if (!part) {
-                return null;
-            }
-            if (part.toLowerCase() === normalizedQuery) {
-                return (jsx(Text, { as: "span", variant: "span", style: {
-                        backgroundColor: ((_a = theme.states) === null || _a === void 0 ? void 0 : _a.highlightBackground) || ((_b = theme.colors.highlight) === null || _b === void 0 ? void 0 : _b[2]) || theme.colors.primary[1],
-                        fontWeight: '600',
-                        color: ((_c = theme.states) === null || _c === void 0 ? void 0 : _c.highlightText) || ((_d = theme.colors.highlight) === null || _d === void 0 ? void 0 : _d[8]) || theme.colors.primary[7],
-                        fontFamily: theme.fontFamily,
-                    }, children: part }, `match-${index}`));
-            }
-            return (jsx(React__default.Fragment, { children: part }, `text-${index}`));
-        }) }));
-};
 const DEFAULT_FALLBACK_PLACEMENTS$1 = ['top-start', 'top-end', 'top', 'bottom-start', 'bottom-end', 'bottom'];
 const defaultFilter = (item, query) => {
     return item.label.toLowerCase().includes(query.toLowerCase()) ||
@@ -19301,6 +19971,7 @@ const AutoComplete = factory((props, ref) => {
     }, [multiSelect, onSelect, useModal, displayProperty, onChangeText]);
     // Default item renderer - use stable reference to prevent loops
     const defaultRenderItem = useCallback((item, index, isSelected = false) => {
+        const highlightQuery = highlightMatches ? currentQueryRef.current : undefined;
         return (jsx(MenuItemButton, { onPress: () => handleSelectSuggestion(item), disabled: item.disabled, active: isSelected, compact: true, rounded: false, style: [styles.menuItemButton, suggestionItemStyle], ...(Platform.OS === 'web' ? {
                 onMouseDown: (event) => {
                     if (event === null || event === void 0 ? void 0 : event.preventDefault) {
@@ -19310,7 +19981,7 @@ const AutoComplete = factory((props, ref) => {
                         event.stopPropagation();
                     }
                 },
-            } : {}), children: jsx(HighlightedText, { text: item.label, query: currentQueryRef.current, highlight: highlightMatches }) }));
+            } : {}), children: jsx(Highlight, { highlight: highlightQuery, children: item.label }) }));
     }, [handleSelectSuggestion, highlightMatches, suggestionItemStyle]);
     // Render item with enhanced parameters - use refs to prevent infinite loops
     const renderSuggestionItem = useCallback((item, index) => {
@@ -19711,6 +20382,7 @@ const AutoComplete = factory((props, ref) => {
 });
 AutoComplete.displayName = 'AutoComplete';
 
+const { DocumentPicker: DocumentPickerModule, hasDocumentPicker } = resolveDocumentPicker();
 const isDocumentPickerAsset = (file) => typeof (file === null || file === void 0 ? void 0 : file.uri) === 'string';
 const getFileMetadata = (file) => {
     var _a, _b, _c, _d, _e;
@@ -19833,7 +20505,7 @@ maxFiles = 10, onUpload, onProgress, onFilesChange, onFileRemove, PreviewCompone
         });
     }, [imagePreview]);
     const processFiles = useCallback(async (fileList) => {
-        var _a;
+        var _a, _b, _c;
         const filesToProcess = Array.isArray(fileList)
             ? [...fileList]
             : Array.from(fileList !== null && fileList !== void 0 ? fileList : []);
@@ -19852,7 +20524,7 @@ maxFiles = 10, onUpload, onProgress, onFilesChange, onFileRemove, PreviewCompone
             let previewUrl = await createFilePreview(file);
             const metadata = getFileMetadata(file);
             if (!previewUrl && Platform.OS !== 'web' && isDocumentPickerAsset(file) && ((_a = metadata.type) === null || _a === void 0 ? void 0 : _a.startsWith('image/'))) {
-                previewUrl = metadata.uri;
+                previewUrl = (_b = metadata.uri) !== null && _b !== void 0 ? _b : undefined;
             }
             const fileInput = {
                 file,
@@ -19860,7 +20532,7 @@ maxFiles = 10, onUpload, onProgress, onFilesChange, onFileRemove, PreviewCompone
                 name: metadata.name,
                 size: metadata.size,
                 type: metadata.type,
-                uri: metadata.uri,
+                uri: (_c = metadata.uri) !== null && _c !== void 0 ? _c : undefined,
                 previewUrl,
                 status: validationError ? 'error' : 'pending',
                 error: validationError || undefined,
@@ -19916,9 +20588,14 @@ maxFiles = 10, onUpload, onProgress, onFilesChange, onFileRemove, PreviewCompone
             }
             return;
         }
+        const picker = DocumentPickerModule;
+        if (!hasDocumentPicker || !(picker === null || picker === void 0 ? void 0 : picker.getDocumentAsync)) {
+            console.warn('FileInput: expo-document-picker not installed, native file picker is disabled.');
+            return;
+        }
         try {
             const pickerTypes = accept.filter(type => !type.startsWith('.'));
-            const result = await DocumentPicker.getDocumentAsync({
+            const result = await picker.getDocumentAsync({
                 multiple,
                 copyToCacheDirectory: true,
                 type: pickerTypes.length > 0 ? pickerTypes : undefined,
@@ -22133,14 +22810,12 @@ const TimePicker = ({ value, defaultValue, onChange, format = 24, withSeconds =
                                                 marginBottom: 12,
                                                 textAlign: 'center',
                                             }, children: "Minute" }), jsx(FlatList, { data: minuteOptions, keyExtractor: (item) => 'm-' + item, renderItem: ({ item }) => renderNumber(item, internal.minutes === item, () => commit({ minutes: item }, autoClose && !withSeconds)), style: [listCommon, { borderRadius: 12, backgroundColor: theme.colors.gray[1] }], contentContainerStyle: { paddingVertical: 8 }, showsVerticalScrollIndicator: false })] }), withSeconds && (jsxs(View, { style: { width: columnWidth, alignItems: 'center' }, children: [jsx(Text, { size: "sm", weight: "medium", style: {
-                                                color: theme.colors.gray[6],
                                                 marginBottom: 12,
                                                 textAlign: 'center',
                                             }, children: "Second" }), jsx(FlatList, { data: secondOptions, keyExtractor: (item) => 's-' + item, renderItem: ({ item }) => {
                                                 var _a;
                                                 return renderNumber(item, ((_a = internal.seconds) !== null && _a !== void 0 ? _a : 0) === item, () => commit({ seconds: item }, autoClose));
                                             }, style: [listCommon, { borderRadius: 12, backgroundColor: theme.colors.gray[1] }], contentContainerStyle: { paddingVertical: 8 }, showsVerticalScrollIndicator: false })] })), is12h && (jsxs(View, { style: { alignItems: 'center' }, children: [jsx(Text, { size: "sm", weight: "medium", style: {
-                                                color: theme.colors.gray[6],
                                                 marginBottom: 12,
                                                 textAlign: 'center',
                                             }, children: "Period" }), jsx(Flex, { align: "center", justify: "center", style: {
@@ -23844,68 +24519,6 @@ const Breadcrumbs = factory((props, ref) => {
 });
 Breadcrumbs.displayName = 'Breadcrumbs';
 
-function useMenuStyles() {
-    const theme = useTheme();
-    const dropdown = {
-        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.surface[3] : theme.colors.surface[4],
-        borderRadius: parseInt(theme.radii.md),
-        // borderWidth: 3, // Temporarily increased for debugging
-        // borderColor: '#ff0000', // Temporarily red for debugging
-        boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
-        elevation: 8,
-        minWidth: 180,
-        maxWidth: 320,
-        overflow: 'hidden',
-    };
-    const item = {
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingVertical: 8,
-        paddingHorizontal: 12,
-        minHeight: 36,
-    };
-    const itemPressed = {
-        backgroundColor: theme.colors.gray[1],
-    };
-    const itemDisabled = {
-        opacity: 0.5,
-    };
-    const itemDanger = {
-        backgroundColor: theme.colors.error[0],
-    };
-    const itemDangerPressed = {
-        backgroundColor: theme.colors.error[1],
-    };
-    const label = {
-        paddingVertical: 6,
-        paddingHorizontal: 12,
-    };
-    const divider = {
-        height: 1,
-        // backgroundColor: theme.colors.gray[2],
-        // marginVertical: 4,
-    };
-    const leftSection = {
-        marginRight: 8,
-    };
-    const rightSection = {
-        marginLeft: 'auto',
-        paddingLeft: 12,
-    };
-    return {
-        dropdown,
-        item,
-        itemPressed,
-        itemDisabled,
-        itemDanger,
-        itemDangerPressed,
-        label,
-        divider,
-        leftSection,
-        rightSection,
-    };
-}
-
 const MenuContext = createContext(null);
 function useMenuContext() {
     const context = useContext(MenuContext);
@@ -24134,7 +24747,7 @@ function MenuBase(props, ref) {
     // Create a callback ref that works better with React Native Web
     const triggerCallbackRef = useCallback((node) => {
         triggerRef.current = node;
-        console.log('Trigger ref set to:', node);
+        // console.log('Trigger ref set to:', node);
     }, []);
     const enhancedTrigger = isValidElement(triggerElement)
         ? cloneElement(triggerElement, {
@@ -24164,7 +24777,7 @@ function MenuBase(props, ref) {
         else if (ref) {
             ref.current = node;
         }
-        console.log('Combined ref set to:', node);
+        // console.log('Combined ref set to:', node);
     }, [ref]);
     return (jsx(MenuContext.Provider, { value: { closeMenu: handleClose, opened: isOpened }, children: jsx(View, { ref: combinedRef, style: getSpacingStyles(extractSpacingProps(spacingProps).spacingProps), testID: testID, ...(trigger === 'contextmenu' && Platform.OS === 'web'
                 ? {
@@ -24181,16 +24794,14 @@ function MenuBase(props, ref) {
                 }
                 : {}), onLayout: () => {
                 // Force a re-render to ensure ref is available
-                if (containerRef.current) {
-                    console.log('Menu container onLayout - container ref available:', containerRef.current);
-                }
+                if (containerRef.current) ;
             }, children: enhancedTrigger }) }));
 }
 // Menu.Item component
 function MenuItemBase(props, ref) {
-    const { children, onPress, disabled = false, leftSection, rightSection, color = 'default', closeMenuOnClick = true, testID, ...spacingProps } = props;
+    const { spacingProps, otherProps } = extractSpacingProps(props);
+    const { children, onPress, disabled = false, leftSection, rightSection, color = 'default', closeMenuOnClick = true, testID, ...restProps } = otherProps;
     const { closeMenu } = useMenuContext();
-    const theme = useTheme();
     const handlePress = useCallback(() => {
         if (disabled)
             return;
@@ -24198,7 +24809,14 @@ function MenuItemBase(props, ref) {
         if (closeMenuOnClick)
             closeMenu();
     }, [disabled, onPress, closeMenuOnClick, closeMenu]);
-    return (jsx(ListGroupItem, { ref: ref, onPress: handlePress, disabled: disabled, danger: color === 'danger', leftSection: leftSection, rightSection: rightSection, textStyle: { color: color === 'danger' ? theme.colors.error[6] : theme.text.primary }, style: {}, ...spacingProps, testID: testID, children: children }));
+    const tone = color === 'danger'
+        ? 'danger'
+        : color === 'success'
+            ? 'success'
+            : color === 'warning'
+                ? 'warning'
+                : 'default';
+    return (jsx(MenuItemButton, { ref: ref, onPress: handlePress, disabled: disabled, startIcon: leftSection, endIcon: rightSection, tone: tone, testID: testID, ...spacingProps, ...restProps, children: children }));
 }
 // Menu.Label component
 function MenuLabelBase(props, ref) {
@@ -25743,6 +26361,467 @@ function Blockquote({ children, variant = 'default', size = 'md', color, quoteIc
     return content;
 }
 
+const createPopoverStyles = (theme) => (params) => {
+    const radiusStyles = createRadiusStyles(params.radius);
+    const shadowStyles = createShadowStyles(params.shadow, theme, 'popover');
+    return StyleSheet.create({
+        wrapper: {
+            position: 'relative',
+            alignSelf: 'flex-start',
+            overflow: 'visible',
+            ...shadowStyles,
+        },
+        dropdown: {
+            backgroundColor: theme.backgrounds.surface,
+            borderColor: theme.backgrounds.border,
+            borderWidth: 1,
+            ...radiusStyles,
+            overflow: 'hidden',
+            minWidth: 0,
+        },
+        arrow: {
+            position: 'absolute',
+            width: params.arrowSize * 2,
+            height: params.arrowSize * 2,
+            backgroundColor: theme.backgrounds.surface,
+            transform: [{ rotate: '45deg' }],
+        },
+    });
+};
+
+const PopoverContext = createContext(null);
+function usePopoverContext(component) {
+    const context = useContext(PopoverContext);
+    if (!context) {
+        throw new Error(`${component} must be used within Popover`);
+    }
+    return context;
+}
+const DEFAULT_ARROW_SIZE = 7;
+const PopoverBase = (props, ref) => {
+    var _a;
+    const { children, opened: controlledOpened, defaultOpened = false, onChange, onOpen, onClose, onDismiss, disabled = false, closeOnClickOutside = true, closeOnEscape = true, clickOutsideEvents, // currently not implemented
+    trapFocus = false, keepMounted = false, returnFocus = false, withinPortal = true, withOverlay = false, overlayProps, width, minWidth, minHeight, maxWidth, maxHeight, radius, shadow, zIndex = 300, position = 'bottom', offset = 8, floatingStrategy = 'fixed', middlewares, preventPositionChangeWhenVisible = false, hideDetached = true, viewport, fallbackPlacements, boundary, withRoles = true, id, withArrow = false, arrowSize = DEFAULT_ARROW_SIZE, arrowRadius = 0, arrowOffset = 5, arrowPosition = 'center', onPositionChange, testID, ...rest } = props;
+    const theme = useTheme();
+    const { spacingProps } = extractSpacingProps(rest);
+    const spacingStyles = getSpacingStyles(spacingProps);
+    const isControlled = controlledOpened !== undefined;
+    const [internalOpened, setInternalOpened] = useState(defaultOpened);
+    const [dropdownState, setDropdownState] = useState(null);
+    const opened = isControlled ? !!controlledOpened : internalOpened;
+    const openedRef = useRef(opened);
+    const closingReasonRef = useRef(null);
+    const anchorMeasurementsRef = useRef(null);
+    useEffect(() => {
+        openedRef.current = opened;
+    }, [opened]);
+    const resolvedOffset = typeof offset === 'number' ? offset : (_a = offset === null || offset === void 0 ? void 0 : offset.mainAxis) !== null && _a !== void 0 ? _a : 8;
+    const resolvedFlip = preventPositionChangeWhenVisible
+        ? false
+        : (middlewares === null || middlewares === void 0 ? void 0 : middlewares.flip) === false
+            ? false
+            : true;
+    const resolvedShift = preventPositionChangeWhenVisible
+        ? false
+        : (middlewares === null || middlewares === void 0 ? void 0 : middlewares.shift) === false
+            ? false
+            : true;
+    const resolvedStrategy = floatingStrategy !== null && floatingStrategy !== void 0 ? floatingStrategy : 'fixed';
+    const { position: positioningResult, anchorRef, popoverRef, showOverlay, hideOverlay, updatePosition } = useDropdownPositioning({
+        isOpen: opened && !disabled && !!dropdownState,
+        placement: position,
+        offset: resolvedOffset,
+        strategy: resolvedStrategy,
+        flip: resolvedFlip,
+        shift: resolvedShift,
+        boundary,
+        fallbackPlacements,
+        viewport,
+        onClose: () => handleOverlayClose('dismiss'),
+        closeOnClickOutside,
+        closeOnEscape,
+    });
+    const popoverStyles = useMemo(() => createPopoverStyles(theme)({
+        radius,
+        shadow,
+        arrowSize,
+    }), [theme, radius, shadow, arrowSize]);
+    const layoutUpdateTimeoutRef = useRef(null);
+    const hasMeasuredLayoutRef = useRef(false);
+    // Defer re-measuring to the next frame so overlay position uses final layout metrics
+    const schedulePositionUpdate = useCallback(() => {
+        if (layoutUpdateTimeoutRef.current) {
+            clearTimeout(layoutUpdateTimeoutRef.current);
+        }
+        layoutUpdateTimeoutRef.current = setTimeout(() => {
+            updatePosition();
+        }, 16);
+    }, [updatePosition]);
+    useEffect(() => {
+        return () => {
+            if (layoutUpdateTimeoutRef.current) {
+                clearTimeout(layoutUpdateTimeoutRef.current);
+                layoutUpdateTimeoutRef.current = null;
+            }
+        };
+    }, []);
+    useEffect(() => {
+        if (!opened) {
+            hasMeasuredLayoutRef.current = false;
+            if (layoutUpdateTimeoutRef.current) {
+                clearTimeout(layoutUpdateTimeoutRef.current);
+                layoutUpdateTimeoutRef.current = null;
+            }
+        }
+    }, [opened]);
+    useEffect(() => {
+        hasMeasuredLayoutRef.current = false;
+    }, [dropdownState]);
+    const handleDropdownLayout = useCallback(() => {
+        if (hasMeasuredLayoutRef.current) {
+            return;
+        }
+        hasMeasuredLayoutRef.current = true;
+        schedulePositionUpdate();
+    }, [schedulePositionUpdate]);
+    const updateAnchorMeasurements = useCallback(async () => {
+        if (!anchorRef.current)
+            return;
+        try {
+            const rect = await measureElement(anchorRef);
+            anchorMeasurementsRef.current = { width: rect.width, height: rect.height };
+        }
+        catch (_a) {
+            // noop – measurement failed (likely not mounted yet)
+        }
+    }, [anchorRef]);
+    const commitOpen = useCallback(() => {
+        if (openedRef.current || disabled)
+            return;
+        if (!isControlled) {
+            setInternalOpened(true);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(true);
+        onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+        openedRef.current = true;
+    }, [disabled, isControlled, onChange, onOpen]);
+    const commitClose = useCallback((reason) => {
+        if (!openedRef.current)
+            return;
+        if (!isControlled) {
+            setInternalOpened(false);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(false);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+        if (reason === 'dismiss') {
+            onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+        }
+        openedRef.current = false;
+    }, [isControlled, onChange, onClose, onDismiss]);
+    const handleOverlayClose = useCallback((reason) => {
+        var _a;
+        const closingReason = (_a = closingReasonRef.current) !== null && _a !== void 0 ? _a : reason;
+        closingReasonRef.current = null;
+        commitClose(closingReason);
+    }, [commitClose]);
+    const openPopover = useCallback(() => {
+        if (disabled)
+            return;
+        closingReasonRef.current = null;
+        commitOpen();
+    }, [commitOpen, disabled]);
+    const closePopover = useCallback((reason = 'programmatic') => {
+        if (!openedRef.current)
+            return;
+        closingReasonRef.current = reason;
+        hideOverlay();
+    }, [hideOverlay]);
+    const togglePopover = useCallback(() => {
+        if (openedRef.current) {
+            closePopover('programmatic');
+        }
+        else {
+            openPopover();
+        }
+    }, [closePopover, openPopover]);
+    useEffect(() => {
+        if (opened) {
+            updateAnchorMeasurements();
+        }
+    }, [opened, updateAnchorMeasurements]);
+    useEffect(() => {
+        if (!opened) {
+            closingReasonRef.current = null;
+            hideOverlay();
+            if (returnFocus && anchorRef.current && typeof anchorRef.current.focus === 'function') {
+                anchorRef.current.focus();
+            }
+            return;
+        }
+        if (!dropdownState)
+            return;
+        updatePosition();
+    }, [opened, dropdownState, updatePosition, hideOverlay, anchorRef, returnFocus]);
+    useEffect(() => {
+        var _a;
+        if (!opened || !dropdownState) {
+            hideOverlay();
+            return;
+        }
+        if (!positioningResult) {
+            return;
+        }
+        const computedFinalWidth = positioningResult.finalWidth && positioningResult.finalWidth > 0
+            ? positioningResult.finalWidth
+            : undefined;
+        const widthOverride = (() => {
+            var _a, _b;
+            if (typeof width === 'number')
+                return width;
+            if (width === 'target') {
+                return (_b = (_a = anchorMeasurementsRef.current) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : computedFinalWidth;
+            }
+            return computedFinalWidth;
+        })();
+        const sizeStyles = {};
+        if (typeof minWidth === 'number')
+            sizeStyles.minWidth = minWidth;
+        if (typeof minHeight === 'number')
+            sizeStyles.minHeight = minHeight;
+        if (typeof maxWidth === 'number')
+            sizeStyles.maxWidth = maxWidth;
+        const resolvedMaxHeight = typeof maxHeight === 'number' ? maxHeight : (_a = positioningResult.maxHeight) !== null && _a !== void 0 ? _a : maxHeight;
+        if (typeof resolvedMaxHeight === 'number')
+            sizeStyles.maxHeight = resolvedMaxHeight;
+        const dropdownStyle = [popoverStyles.dropdown, dropdownState.style, sizeStyles];
+        const content = (jsxs(View, { ref: popoverRef, style: [popoverStyles.wrapper, widthOverride ? { width: widthOverride } : null], pointerEvents: dropdownState.trapFocus ? 'auto' : 'box-none', testID: dropdownState.testID, onLayout: handleDropdownLayout, ...dropdownState.containerProps, children: [jsx(View, { style: dropdownStyle, children: dropdownState.content }), withArrow && (jsx(View, { style: getArrowStyle(positioningResult.placement, arrowSize, arrowRadius, arrowOffset, arrowPosition, theme) }))] }));
+        showOverlay(content, {
+            width: widthOverride,
+            maxHeight: resolvedMaxHeight,
+            zIndex,
+        });
+        onPositionChange === null || onPositionChange === void 0 ? void 0 : onPositionChange(positioningResult.placement);
+    }, [opened, dropdownState, positioningResult, popoverRef, showOverlay, hideOverlay, popoverStyles.dropdown, popoverStyles.wrapper, width, maxHeight, minWidth, minHeight, maxWidth, withArrow, arrowSize, arrowRadius, arrowOffset, arrowPosition, theme, zIndex, onPositionChange, schedulePositionUpdate]);
+    useEffect(() => {
+        return () => {
+            hideOverlay();
+        };
+    }, [hideOverlay]);
+    const registerDropdown = useCallback((dropdown) => {
+        setDropdownState(dropdown);
+    }, []);
+    const unregisterDropdown = useCallback(() => {
+        if (!keepMounted) {
+            setDropdownState(null);
+        }
+    }, [keepMounted]);
+    const targetId = useMemo(() => id ? `${id}-target` : `popover-target-${Math.random().toString(36).slice(2)}`, [id]);
+    const dropdownId = useMemo(() => id ? `${id}-dropdown` : `popover-dropdown-${Math.random().toString(36).slice(2)}`, [id]);
+    const contextValue = useMemo(() => ({
+        opened,
+        open: openPopover,
+        close: () => closePopover('programmatic'),
+        toggle: togglePopover,
+        registerDropdown,
+        unregisterDropdown,
+        anchorRef,
+        targetId,
+        dropdownId,
+        withRoles,
+        disabled,
+        returnFocus,
+    }), [opened, openPopover, closePopover, togglePopover, registerDropdown, unregisterDropdown, anchorRef, targetId, dropdownId, withRoles, disabled, returnFocus]);
+    const setContainerRef = useCallback((node) => {
+        if (typeof ref === 'function') {
+            ref(node);
+        }
+        else if (ref && 'current' in ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    return (jsx(PopoverContext.Provider, { value: contextValue, children: jsx(View, { ref: setContainerRef, style: spacingStyles, testID: testID, children: children }) }));
+};
+function mergeRefs(...refs) {
+    return (value) => {
+        refs.forEach(ref => {
+            if (!ref)
+                return;
+            if (typeof ref === 'function') {
+                ref(value);
+            }
+            else if ('current' in ref) {
+                ref.current = value;
+            }
+        });
+    };
+}
+const PopoverTargetBase = (props, ref) => {
+    var _a;
+    const { children, popupType = 'dialog', refProp = 'ref', targetProps } = props;
+    const context = usePopoverContext('Popover.Target');
+    if (!isValidElement(children)) {
+        throw new Error('Popover.Target expects a single React element child');
+    }
+    const childProps = children.props;
+    const sanitizedTargetProps = { ...(targetProps !== null && targetProps !== void 0 ? targetProps : {}) };
+    let externalTargetRef;
+    if (refProp && Object.prototype.hasOwnProperty.call(sanitizedTargetProps, refProp)) {
+        externalTargetRef = sanitizedTargetProps[refProp];
+        delete sanitizedTargetProps[refProp];
+    }
+    const accessibilityProps = context.withRoles && Platform.OS === 'web'
+        ? {
+            role: (_a = childProps.role) !== null && _a !== void 0 ? _a : 'button',
+            'aria-haspopup': popupType,
+            'aria-expanded': context.opened,
+            'aria-controls': context.opened ? context.dropdownId : undefined,
+            id: context.targetId,
+        }
+        : { id: context.targetId };
+    const composedRef = mergeRefs(children.ref, externalTargetRef);
+    const triggerHandlers = {};
+    triggerHandlers.onPress = (...args) => {
+        const tgt = targetProps;
+        if (tgt && typeof tgt.onPress === 'function') {
+            tgt.onPress(...args);
+        }
+        if (typeof childProps.onPress === 'function') {
+            childProps.onPress(...args);
+        }
+        context.toggle();
+    };
+    if (Platform.OS === 'web') {
+        triggerHandlers.onKeyDown = (event) => {
+            const tgt = targetProps;
+            if (tgt && typeof tgt.onKeyDown === 'function') {
+                tgt.onKeyDown(event);
+            }
+            if (typeof childProps.onKeyDown === 'function') {
+                childProps.onKeyDown(event);
+            }
+            if (event.defaultPrevented)
+                return;
+            if (event.key === 'Escape' && context.opened) {
+                context.close();
+            }
+            if ((event.key === 'Enter' || event.key === ' ') && !context.opened) {
+                event.preventDefault();
+                context.open();
+            }
+        };
+    }
+    const dynamicRefProp = { [refProp]: composedRef };
+    delete sanitizedTargetProps.onPress;
+    delete sanitizedTargetProps.onKeyDown;
+    const mergedProps = {
+        ...sanitizedTargetProps,
+        ...triggerHandlers,
+        ...accessibilityProps,
+        ...dynamicRefProp,
+    };
+    if (context.disabled) {
+        mergedProps.disabled = true;
+    }
+    const anchorWrapperRef = mergeRefs(context.anchorRef, ref);
+    return (jsx(View, { ref: anchorWrapperRef, collapsable: false, children: cloneElement(children, mergedProps) }));
+};
+const PopoverDropdownBase = (props, _ref) => {
+    const { children, trapFocus = false, keepMounted, style, testID, ...rest } = props;
+    const context = usePopoverContext('Popover.Dropdown');
+    const dropdownValue = useMemo(() => ({
+        content: children,
+        style,
+        trapFocus,
+        keepMounted,
+        testID,
+        containerProps: rest,
+    }), [children, rest, style, trapFocus, keepMounted, testID]);
+    useEffect(() => {
+        context.registerDropdown(dropdownValue);
+        return () => context.unregisterDropdown();
+    }, [context, dropdownValue]);
+    if (keepMounted) {
+        return (jsx(View, { style: { display: 'none' }, children: children }));
+    }
+    return null;
+};
+function getArrowStyle(placement, arrowSize, arrowRadius, arrowOffset, arrowPosition, theme) {
+    if (Platform.OS !== 'web') {
+        return {
+            width: 0,
+            height: 0,
+            opacity: 0,
+        };
+    }
+    const base = {
+        position: 'absolute',
+        width: arrowSize * 2,
+        height: arrowSize * 2,
+        backgroundColor: theme.backgrounds.surface,
+        transform: [{ rotate: '45deg' }],
+        borderRadius: arrowRadius,
+        borderColor: theme.backgrounds.border,
+        borderWidth: 1,
+    };
+    const [side, alignment] = placement.split('-');
+    switch (side) {
+        case 'top':
+            return {
+                ...base,
+                bottom: -arrowSize,
+                left: alignment === 'end'
+                    ? `calc(100% - ${(arrowPosition === 'side' ? arrowOffset : arrowSize)}px)`
+                    : alignment === 'start'
+                        ? (arrowPosition === 'side' ? arrowOffset : arrowSize)
+                        : '50%',
+                marginLeft: alignment || arrowPosition === 'side' ? 0 : -arrowSize,
+            };
+        case 'bottom':
+            return {
+                ...base,
+                top: -arrowSize,
+                left: alignment === 'end'
+                    ? `calc(100% - ${(arrowPosition === 'side' ? arrowOffset : arrowSize)}px)`
+                    : alignment === 'start'
+                        ? (arrowPosition === 'side' ? arrowOffset : arrowSize)
+                        : '50%',
+                marginLeft: alignment || arrowPosition === 'side' ? 0 : -arrowSize,
+            };
+        case 'left':
+            return {
+                ...base,
+                right: -arrowSize,
+                top: alignment === 'end'
+                    ? `calc(100% - ${(arrowPosition === 'side' ? arrowOffset : arrowSize)}px)`
+                    : alignment === 'start'
+                        ? (arrowPosition === 'side' ? arrowOffset : arrowSize)
+                        : '50%',
+                marginTop: alignment || arrowPosition === 'side' ? 0 : -arrowSize,
+            };
+        case 'right':
+            return {
+                ...base,
+                left: -arrowSize,
+                top: alignment === 'end'
+                    ? `calc(100% - ${(arrowPosition === 'side' ? arrowOffset : arrowSize)}px)`
+                    : alignment === 'start'
+                        ? (arrowPosition === 'side' ? arrowOffset : arrowSize)
+                        : '50%',
+                marginTop: alignment || arrowPosition === 'side' ? 0 : -arrowSize,
+            };
+        default:
+            return base;
+    }
+}
+const Popover = factory(PopoverBase);
+const PopoverTarget = factory(PopoverTargetBase);
+const PopoverDropdown = factory(PopoverDropdownBase);
+Popover.Target = PopoverTarget;
+Popover.Dropdown = PopoverDropdown;
+Popover.displayName = 'Popover';
+PopoverTarget.displayName = 'Popover.Target';
+PopoverDropdown.displayName = 'Popover.Dropdown';
+
 const getSpacingValue = (spacing, theme) => {
     if (typeof spacing === 'number')
         return spacing;
@@ -26837,7 +27916,6 @@ expandableRowRender, initialExpandedRows = [], expandedRows: controlledExpandedR
         else {
             setInternalSearchValue(value);
         }
-        setForceUpdateCounter(c => c + 1);
     }, [onSearchChange]);
     const handleSort = useCallback((columnKey) => {
         if (!onSortChange)
@@ -26975,43 +28053,44 @@ expandableRowRender, initialExpandedRows = [], expandedRows: controlledExpandedR
             alignItems: 'center',
             marginBottom: DESIGN_TOKENS.spacing.md,
             paddingHorizontal: DESIGN_TOKENS.spacing.xs
-        }, children: [jsx(Flex, { gap: DESIGN_TOKENS.spacing.md, align: "center", children: selectedRows.length > 0 && bulkActions.length > 0 && (jsxs(Flex, { gap: 8, children: [jsxs(Text, { variant: "caption", colorVariant: "muted", children: [selectedRows.length, " selected"] }), bulkActions.map(action => (jsx(Button, { variant: "outline", size: "sm", startIcon: action.icon, onPress: () => action.action(selectedRows, data), children: action.label }, action.key)))] })) }), jsxs(Flex, { gap: 8, children: [(searchable || columns.some(c => c.filterable)) && (jsxs(Menu, { position: "bottom-end", offset: 4, children: [jsxs(MenuDropdown, { children: [jsx(MenuLabel, { children: "Search & Filter" }), searchable && (jsxs(View, { style: { borderBottomWidth: 1, borderBottomColor: theme.colors.gray[2] }, children: [jsx(Text, { variant: "caption", weight: "semibold", style: { marginBottom: 8 }, children: "Search" }), jsx(Input, { placeholder: searchPlaceholder, value: searchValue, onChangeText: handleSearchChange, leftSection: jsx(Icon, { name: "menu", size: 16 }), size: "sm" }, `search-input-${searchValue}`)] })), columns.some(c => c.filterable) && (jsxs(View, { style: { padding: 12 }, children: [jsxs(Flex, { direction: "row", justify: "space-between", align: "center", style: { marginBottom: 8 }, children: [jsx(Text, { variant: "caption", weight: "semibold", children: "Filters" }), activeFilters.length > 0 && (jsx(Button, { variant: "ghost", size: "xs", onPress: () => {
-                                                            setInternalFilters([]);
-                                                            setForceUpdateCounter(c => c + 1);
-                                                        }, children: "Clear all" }))] }), activeFilters.length > 0 && (jsx(View, { style: { marginBottom: DESIGN_TOKENS.spacing.md, gap: DESIGN_TOKENS.spacing.xs }, children: activeFilters.map((filter, idx) => {
-                                                    const column = columns.find(c => c.key === filter.column);
-                                                    return (jsxs(View, { style: {
-                                                            flexDirection: 'row',
-                                                            alignItems: 'center',
-                                                            backgroundColor: theme.colors.primary[1],
-                                                            paddingHorizontal: DESIGN_TOKENS.spacing.sm,
-                                                            paddingVertical: DESIGN_TOKENS.spacing.xs,
-                                                            borderRadius: DESIGN_TOKENS.radius.sm,
-                                                            gap: DESIGN_TOKENS.spacing.xs
-                                                        }, children: [jsxs(Text, { variant: "caption", style: { color: theme.colors.primary[7] }, children: [(column === null || column === void 0 ? void 0 : column.header) || filter.column, ": ", filter.operator, " \"", filter.value, "\""] }), jsx(Pressable, { onPress: () => {
-                                                                    setInternalFilters(filters => filters.filter((_, i) => i !== idx));
-                                                                    setForceUpdateCounter(c => c + 1);
-                                                                }, children: jsx(Icon, { name: "x", size: 12, color: theme.colors.primary[6] }) })] }, idx));
-                                                }) })), jsx(View, { style: { gap: DESIGN_TOKENS.spacing.sm }, children: columns.filter(c => c.filterable).map(column => {
-                                                    const currentFilter = getColumnFilter(column.key);
-                                                    return (jsx(View, { children: renderFilterControl(column) }, `${column.key}-${(currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.value) || 'no-filter'}`));
-                                                }) })] }))] }), jsxs(Button, { variant: "outline", size: "sm", startIcon: jsx(Icon, { name: "search", size: 14 }), children: ["Search", (searchValue || activeFilters.length > 0) && (jsx(View, { style: {
-                                            width: 6,
-                                            height: 6,
-                                            borderRadius: 3,
-                                            backgroundColor: theme.colors.primary[5],
-                                            marginLeft: 4
-                                        } }))] })] }, `search-filter-${forceUpdateCounter}`)), onEditModeChange && (jsx(Button, { variant: editMode ? 'filled' : 'outline', size: "sm", onPress: () => onEditModeChange(!editMode), children: editMode ? 'Exit Edit' : 'Edit' })), showColumnVisibilityManager && (jsxs(Menu, { position: "bottom-end", offset: 4, children: [jsxs(MenuDropdown, { children: [jsx(MenuLabel, { children: "Column Visibility" }), jsxs(View, { style: { padding: 8, maxHeight: 300 }, children: [jsx(ComponentWithDisclaimer, { disclaimer: "Selected view determines the layout style", disclaimerProps: { colorVariant: 'muted', size: 'sm' }, children: jsxs(Row, { children: [jsx(Button, { size: "xs", title: "Deselect All", variant: hiddenColumns.length === columns.length ? 'filled' : 'outline', onPress: () => setHiddenColumns(columns.map(c => c.key)), style: { marginBottom: 8 } }), jsx(Button, { size: "xs", title: "Select All", variant: hiddenColumns.length === 0 ? 'filled' : 'outline', onPress: () => setHiddenColumns([]), style: { marginBottom: 8 } })] }) }), jsx(ScrollView, { style: { maxHeight: 200 }, children: columns.map(col => (jsx(Checkbox, { label: tempHeaderEdits[col.key] || col.header, 
-                                                    // checked={!hiddenColumns.includes(col.key)}
-                                                    // disabled={col.disableHiding}
-                                                    onChange: () => {
-                                                        if (hiddenColumns.includes(col.key)) {
-                                                            setHiddenColumns(prev => prev.filter(h => h !== col.key));
-                                                        }
-                                                        else {
-                                                            setHiddenColumns(prev => [...prev, col.key]);
-                                                        }
-                                                    }, style: { marginBottom: 4 } }, col.key))) })] })] }), jsx(Button, { variant: "outline", size: "sm", startIcon: jsx(Icon, { name: "eye", size: 14 }), children: "Columns" })] }, `col-vis-${forceUpdateCounter}`))] })] }));
+        }, children: [jsx(Flex, { gap: DESIGN_TOKENS.spacing.md, align: "center", children: selectedRows.length > 0 && bulkActions.length > 0 && (jsxs(Flex, { gap: 8, children: [jsxs(Text, { variant: "caption", colorVariant: "muted", children: [selectedRows.length, " selected"] }), bulkActions.map(action => (jsx(Button, { variant: "outline", size: "sm", startIcon: action.icon, onPress: () => action.action(selectedRows, data), children: action.label }, action.key)))] })) }), jsxs(Flex, { gap: 8, children: [(searchable || columns.some(c => c.filterable)) && (jsxs(Popover, { position: "bottom-end", offset: { mainAxis: 12 }, width: 320, trapFocus: true, children: [jsx(PopoverTarget, { children: jsxs(Button, { variant: "outline", size: "sm", startIcon: jsx(Icon, { name: "search", size: 14 }), children: ["Search", (searchValue || activeFilters.length > 0) && (jsx(View, { style: {
+                                                width: 6,
+                                                height: 6,
+                                                borderRadius: 3,
+                                                backgroundColor: theme.colors.primary[5],
+                                                marginLeft: 4
+                                            } }))] }) }), jsx(PopoverDropdown, { children: jsxs(Flex, { direction: "column", gap: DESIGN_TOKENS.spacing.md, style: { width: 320 }, children: [jsx(Text, { variant: "caption", weight: "semibold", children: "Search & Filter" }), searchable && (jsx(View, { style: {
+                                                borderBottomWidth: 1,
+                                                borderBottomColor: theme.colors.gray[2],
+                                                paddingBottom: DESIGN_TOKENS.spacing.sm,
+                                            }, children: jsxs(Flex, { direction: "column", gap: DESIGN_TOKENS.spacing.xs, children: [jsx(Text, { variant: "caption", weight: "semibold", children: "Search" }), jsx(Input, { placeholder: searchPlaceholder, value: searchValue, onChangeText: handleSearchChange, leftSection: jsx(Icon, { name: "menu", size: 16 }), size: "sm" })] }) })), columns.some(c => c.filterable) && (jsxs(Flex, { direction: "column", gap: DESIGN_TOKENS.spacing.sm, children: [jsxs(Flex, { direction: "row", justify: "space-between", align: "center", children: [jsx(Text, { variant: "caption", weight: "semibold", children: "Filters" }), activeFilters.length > 0 && (jsx(Button, { variant: "ghost", size: "xs", onPress: () => {
+                                                                setInternalFilters([]);
+                                                                setForceUpdateCounter(c => c + 1);
+                                                            }, children: "Clear all" }))] }), activeFilters.length > 0 && (jsx(Flex, { direction: "column", gap: DESIGN_TOKENS.spacing.xs, style: { marginBottom: DESIGN_TOKENS.spacing.sm }, children: activeFilters.map((filter, idx) => {
+                                                        const column = columns.find(c => c.key === filter.column);
+                                                        return (jsxs(View, { style: {
+                                                                flexDirection: 'row',
+                                                                alignItems: 'center',
+                                                                backgroundColor: theme.colors.primary[1],
+                                                                paddingHorizontal: DESIGN_TOKENS.spacing.sm,
+                                                                paddingVertical: DESIGN_TOKENS.spacing.xs,
+                                                                borderRadius: DESIGN_TOKENS.radius.sm,
+                                                                gap: DESIGN_TOKENS.spacing.xs
+                                                            }, children: [jsxs(Text, { variant: "caption", style: { color: theme.colors.primary[7] }, children: [(column === null || column === void 0 ? void 0 : column.header) || filter.column, ": ", filter.operator, " \"", filter.value, "\""] }), jsx(Pressable, { onPress: () => {
+                                                                        setInternalFilters(filters => filters.filter((_, i) => i !== idx));
+                                                                        setForceUpdateCounter(c => c + 1);
+                                                                    }, children: jsx(Icon, { name: "x", size: 12, color: theme.colors.primary[6] }) })] }, idx));
+                                                    }) })), jsx(Flex, { direction: "column", gap: DESIGN_TOKENS.spacing.sm, children: columns.filter(c => c.filterable).map(column => {
+                                                        const currentFilter = getColumnFilter(column.key);
+                                                        return (jsx(View, { children: renderFilterControl(column) }, `${column.key}-${(currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.value) || 'no-filter'}`));
+                                                    }) })] }))] }) })] })), onEditModeChange && (jsx(Button, { variant: editMode ? 'filled' : 'outline', size: "sm", onPress: () => onEditModeChange(!editMode), children: editMode ? 'Exit Edit' : 'Edit' })), showColumnVisibilityManager && (jsxs(Popover, { position: "bottom-end", offset: { mainAxis: 12 }, width: 280, trapFocus: true, children: [jsx(PopoverTarget, { children: jsx(Button, { variant: "outline", size: "sm", startIcon: jsx(Icon, { name: "eye", size: 14 }), children: "Columns" }) }), jsx(PopoverDropdown, { children: jsxs(View, { style: { padding: 8, maxHeight: 300, width: 260 }, children: [jsx(ComponentWithDisclaimer, { disclaimer: "Selected view determines the layout style", disclaimerProps: { colorVariant: 'muted', size: 'sm' }, children: jsxs(Row, { children: [jsx(Button, { size: "xs", title: "Deselect All", variant: hiddenColumns.length === columns.length ? 'filled' : 'outline', onPress: () => setHiddenColumns(columns.map(c => c.key)), style: { marginBottom: 8 } }), jsx(Button, { size: "xs", title: "Select All", variant: hiddenColumns.length === 0 ? 'filled' : 'outline', onPress: () => setHiddenColumns([]), style: { marginBottom: 8 } })] }) }), jsx(ScrollView, { style: { maxHeight: 200 }, children: columns.map(col => (jsx(Checkbox, { label: tempHeaderEdits[col.key] || col.header, onChange: () => {
+                                                    if (hiddenColumns.includes(col.key)) {
+                                                        setHiddenColumns(prev => prev.filter(h => h !== col.key));
+                                                    }
+                                                    else {
+                                                        setHiddenColumns(prev => [...prev, col.key]);
+                                                    }
+                                                }, style: { marginBottom: 4 } }, col.key))) })] }) })] }))] })] }));
     const renderCell = useCallback((column, row, rowIndex) => {
         const value = getValue(row, column.accessor);
         const isEditing = (editingCell === null || editingCell === void 0 ? void 0 : editingCell.row) === rowIndex && (editingCell === null || editingCell === void 0 ? void 0 : editingCell.column) === column.key;
@@ -30455,7 +31534,7 @@ loading = false, error, loadingProgress, selection, onSelectionChange, zoomLevel
     };
     const gradientId = useMemo(() => `waveform-gradient-${Math.random().toString(36).substr(2, 9)}`, []);
     const renderGradient = () => {
-        return (jsxs(Fragment, { children: [jsx(Defs, { children: jsx(LinearGradient$2, { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: resolvedGradientColors.map((color, index) => (jsx(Stop, { offset: `${(index / (resolvedGradientColors.length - 1 || 1)) * 100}%`, stopColor: color }, index))) }) }), normalizedPeaks.map((peak, index) => {
+        return (jsxs(Fragment, { children: [jsx(Defs, { children: jsx(LinearGradient, { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: resolvedGradientColors.map((color, index) => (jsx(Stop, { offset: `${(index / (resolvedGradientColors.length - 1 || 1)) * 100}%`, stopColor: color }, index))) }) }), normalizedPeaks.map((peak, index) => {
                     const x = index * (barWidth + barGap);
                     const barHeight = Math.max(minBarHeight, Math.abs(peak) * height * 0.8);
                     const y = (height - barHeight) / 2;
@@ -33063,7 +34142,7 @@ function QRCodeSVG(props) {
     const logoSize = (_a = logo === null || logo === void 0 ? void 0 : logo.size) !== null && _a !== void 0 ? _a : 40;
     const logoX = (size - logoSize) / 2;
     const logoY = (size - logoSize) / 2;
-    return (jsxs(View, { style: containerStyle, testID: testID, ...rest, children: [jsxs(Svg, { width: size, height: size, viewBox: `0 0 ${size} ${size}`, accessibilityLabel: accessibilityLabel || `QR Code containing: ${value}`, children: [jsxs(Defs, { children: [gradient && gradient.type !== 'radial' && (jsxs(LinearGradient$2, { id: "qrGradient", x1: "0%", y1: "0%", x2: gradient.rotation ? '100%' : '100%', y2: gradient.rotation ? '0%' : '100%', children: [jsx(Stop, { offset: "0%", stopColor: gradient.from }), jsx(Stop, { offset: "100%", stopColor: gradient.to })] })), gradient && gradient.type === 'radial' && (jsxs(RadialGradient, { id: "qrGradient", cx: "50%", cy: "50%", r: "50%", children: [jsx(Stop, { offset: "0%", stopColor: gradient.from }), jsx(Stop, { offset: "100%", stopColor: gradient.to })] })), logo && (jsx(ClipPath, { id: "logoClip", children: jsx(Rect, { x: logoX, y: logoY, width: logoSize, height: logoSize, rx: logo.borderRadius || 8, ry: logo.borderRadius || 8 }) }))] }), jsx(Rect, { x: 0, y: 0, width: size, height: size, fill: backgroundColor }), jsx(Path, { d: qrPath, fill: gradient ? 'url(#qrGradient)' : color, fillRule: "evenodd" }), moduleShape === 'rounded' && roundedRects.length > 0 && (roundedRects.map((d, i) => jsx(Path, { d: d, fill: gradient ? 'url(#qrGradient)' : color }, `rounded-${i}`))), moduleShape === 'diamond' && diamondPaths.length > 0 && (diamondPaths.map((d, i) => jsx(Path, { d: d, fill: gradient ? 'url(#qrGradient)' : color }, `diamond-${i}`))), logo && (jsx(Rect
+    return (jsxs(View, { style: containerStyle, testID: testID, ...rest, children: [jsxs(Svg, { width: size, height: size, viewBox: `0 0 ${size} ${size}`, accessibilityLabel: accessibilityLabel || `QR Code containing: ${value}`, children: [jsxs(Defs, { children: [gradient && gradient.type !== 'radial' && (jsxs(LinearGradient, { id: "qrGradient", x1: "0%", y1: "0%", x2: gradient.rotation ? '100%' : '100%', y2: gradient.rotation ? '0%' : '100%', children: [jsx(Stop, { offset: "0%", stopColor: gradient.from }), jsx(Stop, { offset: "100%", stopColor: gradient.to })] })), gradient && gradient.type === 'radial' && (jsxs(RadialGradient, { id: "qrGradient", cx: "50%", cy: "50%", r: "50%", children: [jsx(Stop, { offset: "0%", stopColor: gradient.from }), jsx(Stop, { offset: "100%", stopColor: gradient.to })] })), logo && (jsx(ClipPath, { id: "logoClip", children: jsx(Rect, { x: logoX, y: logoY, width: logoSize, height: logoSize, rx: logo.borderRadius || 8, ry: logo.borderRadius || 8 }) }))] }), jsx(Rect, { x: 0, y: 0, width: size, height: size, fill: backgroundColor }), jsx(Path, { d: qrPath, fill: gradient ? 'url(#qrGradient)' : color, fillRule: "evenodd" }), moduleShape === 'rounded' && roundedRects.length > 0 && (roundedRects.map((d, i) => jsx(Path, { d: d, fill: gradient ? 'url(#qrGradient)' : color }, `rounded-${i}`))), moduleShape === 'diamond' && diamondPaths.length > 0 && (diamondPaths.map((d, i) => jsx(Path, { d: d, fill: gradient ? 'url(#qrGradient)' : color }, `diamond-${i}`))), logo && (jsx(Rect
                     // Clear area under logo (white rect) for better scan reliability
                     , { 
                         // Clear area under logo (white rect) for better scan reliability
@@ -35205,5 +36284,5 @@ function withPressAnimation(Component, animationProps) {
  */
 const AnimatedPressable = PressAnimation;
 
-export { AbilityCore, AccessibilityProvider, Accordion, Alert, AmazonAppstoreBadge, AmazonAppstoreButton, AmazonMusicListenBadge, AmazonPrimeVideoBadge, AmazonStoreBadge, AnimatedPressable, AppLayoutProvider, AppLayoutRenderer, AppShell, AppShellAside, AppShellBottomNav, AppShellFooter, AppShellHeader, AppShellMain, AppShellNavbar, AppShellSection, AppStoreBadge, AppStoreButton, AppStoreDownloadBadge, AppleAppStoreButton, AppleMusicListenBadge, ApplePodcastsListenBadge, AutoComplete, Avatar, AvatarGroup, Badge, Block, Blockquote, Bold, BottomAppBar, BrandButton, BrandIcon, Breadcrumbs, Button, COMPONENT_SIZES$1 as COMPONENT_SIZES, Calendar, Can, CanWithConditions, Cannot, Card, Carousel, Checkbox, Chip, ChromeWebStoreBadge, Cite, Code, CodeBlock, ColorPicker, ColorSwatch, Column, ComponentWithDisclaimer, Container, ContextMenu, CopyButton, DARK_THEME, DEFAULT_BREAKPOINTS, DEFAULT_SOUND_IDS, DEFAULT_THEME, DataTable, DatePicker, DatePickerInput, Day, Dialog, DialogProvider, DialogRenderer, DirectionProvider, Disclaimer, DiscordJoinBadge, Divider, EmojiPicker, Emphasis, FDroidButton, FileInput, Flex, FloatingActions, Form, GalaxyStoreDownloadBadge, Gallery, Gauge, GitHubViewBadge, GooglePlayButton, GooglePlayDownloadBadge, Grid, GridItem, H1, H2, H3, H4, H5, H6, HapticsProvider, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, HoverCard, HuaweiAppGalleryBadge, I18nProvider, Icon, IconButton, Image, Indicator, Input, Italic, Kbd, KeyCap, Link, ListGroup, ListGroupBody, ListGroupDivider, ListGroupItem, Loader, LoadingOverlay, Lottie, MacAppStoreButton, Mark, Markdown, Masonry, Menu, MenuDivider, MenuDropdown, MenuItem, MenuItemButton, MenuLabel, MicrosoftStoreButton, MicrosoftStoreDownloadBadge, MiniCalendar, Month, MonthPicker, MonthPickerInput, NavigationProgress, NumberInput, Overlay, OverlayProvider, P, Pagination, PasswordInput, PermissionBuilder, PermissionGate, PermissionPatterns, PermissionProvider, PhoneInput, PinInput, PlatformBlocksProvider, PressAnimation, Progress, QRCode, Radio, RadioGroup, RangeSlider, Rating, RedditJoinBadge, RichTextEditor, RoleBuilder, Row, SIZE_SCALES, Search, SegmentedControl, Select, ShimmerText, Skeleton, Slider, Small, SoundCloudListenBadge, SoundProvider, Space, Spoiler, SpotifyListenBadge, Spotlight, SpotlightProvider, StatusBarManager, StepperWithSubComponents as Stepper, Strong, Sub, Sup, Switch, Table, TableOfContents, Tabs, Text, TextArea, TextInputBase, ThemeModeProvider, TikTokWatchBadge, TimePicker, TimePicker as TimePickerInput, TimelineWithItems as Timeline, Title, TitleRegistryProvider, Toast, ToastProvider, ToggleBar, ToggleButton, ToggleGroup, Tooltip, Tree, TwitchWatchBadge, Underline, Video, Waveform, YearPicker, YearPickerInput, YouTubeMusicListenBadge, YouTubeWatchBadge, calculateOverlayPosition, calculateOverlayPositionEnhanced, clearOverlayPositionCache, createSound, createSpotlightStore, createTheme, debounce$1 as debounce, defineAbility, defineAppLayout, defineRoleAbility, directSpotlight, extractDisclaimerProps, factory, getAllSounds, getColor, getFontSize, getHeight, getIconSize$1 as getIconSize, getLineHeight, getRadius$1 as getRadius, getScrollPosition, getShadow$1 as getShadow, getSize, getSoundsByCategory, getSpacing, getViewport, globalHotkeys, measureAsyncPerformance, measureElement, measurePerformance, navigationProgress, onDialogsRequested, onSpotlightRequested, onToastsRequested, permissions, pointInRect, polymorphicFactory, px, rem, resolveResponsiveProp, resolveResponsiveValue, resolveSize, spotlight, throttle, toast, useAbility, useAccessibility, useAppLayoutContext, useAppShell, useAppShellApi, useAppShellLayout, useBreakpoint, useColorScheme, useDialog, useDialogApi, useDialogs, useDirectSpotlightState, useDirection, useDirectionSafe, useDisclaimer, useDropdownPositioning, useEscapeKey, useFormContext, useGlobalHotkeys, useHaptics, useHapticsSettings, useHotkeys, useI18n, useNavbarHover, useOptionalFormContext, useOverlay, useOverlayApi, useOverlays, usePermissions, usePopoverPositioning, useSimpleDialog, useSound, useSpotlightStore, useSpotlightStoreInstance, useSpotlightToggle, useTheme, useThemeMode, useTitleRegistry, useTitleRegistryOptional, useToast, useToastApi, useToggleColorScheme, useTooltipPositioning, withCan, withCannot, withDisclaimer, withPressAnimation };
+export { AbilityCore, AccessibilityProvider, Accordion, Alert, AmazonAppstoreBadge, AmazonAppstoreButton, AmazonMusicListenBadge, AmazonPrimeVideoBadge, AmazonStoreBadge, AnimatedPressable, AppLayoutProvider, AppLayoutRenderer, AppShell, AppShellAside, AppShellBottomNav, AppShellFooter, AppShellHeader, AppShellMain, AppShellNavbar, AppShellSection, AppStoreBadge, AppStoreButton, AppStoreDownloadBadge, AppleAppStoreButton, AppleMusicListenBadge, ApplePodcastsListenBadge, AutoComplete, Avatar, AvatarGroup, Badge, Block, Blockquote, Bold, BottomAppBar, BrandButton, BrandIcon, Breadcrumbs, Button, COMPONENT_SIZES$1 as COMPONENT_SIZES, Calendar, Can, CanWithConditions, Cannot, Card, Carousel, Checkbox, Chip, ChromeWebStoreBadge, Cite, Code, CodeBlock, ColorPicker, ColorSwatch, Column, ComponentWithDisclaimer, Container, ContextMenu, CopyButton, DARK_THEME, DEFAULT_BREAKPOINTS, DEFAULT_SOUND_IDS, DEFAULT_THEME, DataTable, DatePicker, DatePickerInput, Day, Dialog, DialogProvider, DialogRenderer, DirectionProvider, Disclaimer, DiscordJoinBadge, Divider, EmojiPicker, Emphasis, FDroidButton, FileInput, Flex, FloatingActions, Form, GalaxyStoreDownloadBadge, Gallery, Gauge, GitHubViewBadge, GooglePlayButton, GooglePlayDownloadBadge, Grid, GridItem, H1, H2, H3, H4, H5, H6, HapticsProvider, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, Highlight, HoverCard, HuaweiAppGalleryBadge, I18nProvider, Icon, IconButton, Image, Indicator, Input, Italic, Kbd, KeyCap, Link, ListGroup, ListGroupBody, ListGroupDivider, ListGroupItem, Loader, LoadingOverlay, Lottie, MacAppStoreButton, Mark, Markdown, Masonry, Menu, MenuDivider, MenuDropdown, MenuItem, MenuItemButton, MenuLabel, MicrosoftStoreButton, MicrosoftStoreDownloadBadge, MiniCalendar, Month, MonthPicker, MonthPickerInput, NavigationProgress, NumberInput, Overlay, OverlayProvider, P, Pagination, PasswordInput, PermissionBuilder, PermissionGate, PermissionPatterns, PermissionProvider, PhoneInput, PinInput, PlatformBlocksProvider, Popover, PopoverDropdown, PopoverTarget, PressAnimation, Progress, QRCode, Radio, RadioGroup, RangeSlider, Rating, RedditJoinBadge, RichTextEditor, RoleBuilder, Row, SIZE_SCALES, Search, SegmentedControl, Select, ShimmerText, Skeleton, Slider, Small, SoundCloudListenBadge, SoundProvider, Space, Spoiler, SpotifyListenBadge, Spotlight, SpotlightProvider, StatusBarManager, StepperWithSubComponents as Stepper, Strong, Sub, Sup, Switch, Table, TableOfContents, Tabs, Text, TextArea, TextInputBase, ThemeModeProvider, TikTokWatchBadge, TimePicker, TimePicker as TimePickerInput, TimelineWithItems as Timeline, Title, TitleRegistryProvider, Toast, ToastProvider, ToggleBar, ToggleButton, ToggleGroup, Tooltip, Tree, TwitchWatchBadge, Underline, Video, Waveform, YearPicker, YearPickerInput, YouTubeMusicListenBadge, YouTubeWatchBadge, calculateOverlayPosition, calculateOverlayPositionEnhanced, clearOverlayPositionCache, createSound, createSpotlightStore, createTheme, debounce$1 as debounce, defineAbility, defineAppLayout, defineRoleAbility, directSpotlight, extractDisclaimerProps, factory, getAllSounds, getColor, getFontSize, getHeight, getIconSize$1 as getIconSize, getLineHeight, getRadius$1 as getRadius, getScrollPosition, getShadow$1 as getShadow, getSize, getSoundsByCategory, getSpacing, getViewport, globalHotkeys, measureAsyncPerformance, measureElement, measurePerformance, navigationProgress, onDialogsRequested, onSpotlightRequested, onToastsRequested, permissions, pointInRect, polymorphicFactory, px, rem, resolveResponsiveProp, resolveResponsiveValue, resolveSize, spotlight, throttle, toast, useAbility, useAccessibility, useAppLayoutContext, useAppShell, useAppShellApi, useAppShellLayout, useBreakpoint, useColorScheme, useDialog, useDialogApi, useDialogs, useDirectSpotlightState, useDirection, useDirectionSafe, useDisclaimer, useDropdownPositioning, useEscapeKey, useFormContext, useGlobalHotkeys, useHaptics, useHapticsSettings, useHotkeys, useI18n, useNavbarHover, useOptionalFormContext, useOverlay, useOverlayApi, useOverlays, usePermissions, usePopoverPositioning, useSimpleDialog, useSound, useSpotlightStore, useSpotlightStoreInstance, useSpotlightToggle, useTheme, useThemeMode, useTitleRegistry, useTitleRegistryOptional, useToast, useToastApi, useToggleColorScheme, useTooltipPositioning, withCan, withCannot, withDisclaimer, withPressAnimation };
 //# sourceMappingURL=index.js.map