@platform-blocks/ui 0.1.2 → 0.2.0

package/lib/cjs/index.js

@@ -5,11 +5,9 @@ var React = require('react');
 var reactNative = require('react-native');
 var Animated = require('react-native-reanimated');
 var reactNativeSafeAreaContext = require('react-native-safe-area-context');
-var expoLinearGradient = require('expo-linear-gradient');
 var Svg = require('react-native-svg');
 var flashList = require('@shopify/flash-list');
 var MaskedView = require('@react-native-masked-view/masked-view');
-var DocumentPicker = require('expo-document-picker');
 var ReanimatedCarousel = require('react-native-reanimated-carousel');
 
 function _interopNamespaceDefault(e) {
@@ -30,7 +28,6 @@ function _interopNamespaceDefault(e) {
 }
 
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-var DocumentPicker__namespace = /*#__PURE__*/_interopNamespaceDefault(DocumentPicker);
 
 /**
  * Design tokens for consistent styling across the UI library
@@ -679,7 +676,7 @@ const DARK_THEME = {
             '#8E8E93',
             '#AEAEB2',
             '#C7C7CC',
-            '#D1D16',
+            '#D1D1D6',
             '#E5E5EA'
         ],
         success: [
@@ -3170,6 +3167,21 @@ const convertToWebStyles = (rnStyles) => {
     });
     return webStyles;
 };
+const containsPlatformText = (node) => {
+    return React.Children.toArray(node).some(child => {
+        if (React.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;
@@ -3210,6 +3222,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 (reactNative.Platform.OS === 'web' && isHTMLVariant(htmlTag)) {
@@ -3247,6 +3263,7 @@ const Text = (allProps) => {
     // Fallback to React Native Text for mobile or non-HTML variants
     return (jsxRuntime.jsx(reactNative.Text, { 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 = [
@@ -4176,6 +4193,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',
@@ -4662,6 +4685,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',
@@ -4669,10 +4698,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',
@@ -5618,6 +5659,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.createElement(reactNative.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;
@@ -5741,6 +5841,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();
@@ -5804,7 +5905,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);
@@ -5839,7 +5940,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)
@@ -5858,12 +5959,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];
@@ -5873,7 +5974,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 = React.useMemo(() => ({
         size,
@@ -5889,11 +5990,11 @@ const Button = (allProps) => {
     // Memoize loader color calculation
     const loaderColor = React.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];
@@ -5903,7 +6004,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)
@@ -6004,14 +6105,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,
                         ...(reactNative.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' && jsxRuntime.jsx(expoLinearGradient.LinearGradient, { 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 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.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 && (jsxRuntime.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 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.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
@@ -6886,7 +6987,6 @@ const Flex = factory((props, ref) => {
  * Automatically mirrors to row-reverse in RTL
  */
 const Row$1 = React.forwardRef((props, ref) => {
-    // @ts-expect-error - factory components handle refs differently
     return jsxRuntime.jsx(Flex, { ...props, direction: "row", ref: ref });
 });
 Row$1.displayName = 'Row';
@@ -6895,7 +6995,6 @@ Row$1.displayName = 'Row';
  * Not affected by RTL (columns are vertical)
  */
 const Column$1 = React.forwardRef((props, ref) => {
-    // @ts-expect-error - factory components handle refs differently
     return jsxRuntime.jsx(Flex, { ...props, direction: "column", ref: ref });
 });
 Column$1.displayName = 'Column';
@@ -6952,6 +7051,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: reactNative.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 = React.useMemo(() => {
+        if (typeof children === 'string' || typeof children === 'number') {
+            return String(children);
+        }
+        const parts = React.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 = React.useMemo(() => toHighlightArray(highlight, trim), [highlight, trim]);
+    const highlightPropsValue = React.useMemo(() => highlightProps !== null && highlightProps !== void 0 ? highlightProps : {}, [highlightProps]);
+    const highlightDerived = React.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 : (reactNative.Platform.OS === 'web' ? 'mark' : 'span'),
+            variant: (_b = innerVariant) !== null && _b !== void 0 ? _b : 'span',
+            rest: restProps,
+        };
+    }, [highlightPropsValue]);
+    const outerColor = React.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 } = React.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 = React.useMemo(() => resolveHighlightBackground(theme, highlightColor, isTextColorLight), [theme, highlightColor, isTextColorLight]);
+    const highlightColorProp = highlightDerived.color;
+    const baseHighlightStyle = React.useMemo(() => createBaseHighlightStyle(theme, highlightBackground, resolvedTextColor, !highlightColorProp), [theme, highlightBackground, resolvedTextColor, highlightColorProp]);
+    const overrideHighlightStyle = React.useMemo(() => (typeof highlightStyles === 'function' ? highlightStyles(theme) : highlightStyles), [highlightStyles, theme]);
+    const highlightNodeStyle = React.useMemo(() => reactNative.StyleSheet.flatten([
+        baseHighlightStyle,
+        overrideHighlightStyle,
+        highlightDerived.style,
+    ]), [baseHighlightStyle, overrideHighlightStyle, highlightDerived.style]);
+    const highlightVariant = highlightDerived.variant;
+    const highlightAs = highlightDerived.as;
+    const highlightRest = highlightDerived.rest;
+    const highlightRegex = React.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 = React.useMemo(() => {
+        if (caseSensitive) {
+            return new Set(highlightValues);
+        }
+        return new Set(highlightValues.map((value) => value.toLowerCase()));
+    }, [highlightValues, caseSensitive]);
+    const renderedChildren = React.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 (jsxRuntime.jsx(Text, { variant: highlightVariant, as: highlightAs, color: highlightColorProp, ...highlightRest, style: highlightNodeStyle, children: segment }, `highlight-${index}`));
+            }
+            return (jsxRuntime.jsx(React.Fragment, { children: segment }, `text-${index}`));
+        }).filter((item) => item !== null);
+    }, [
+        children,
+        textContent,
+        highlightRegex,
+        highlightValues,
+        caseSensitive,
+        highlightNormalizedSet,
+        highlightVariant,
+        highlightAs,
+        highlightRest,
+        highlightNodeStyle,
+        highlightColorProp,
+    ]);
+    return (jsxRuntime.jsx(Text, { variant: outerVariant, ...rest, children: renderedChildren }));
+};
+Highlight.displayName = 'Highlight';
+
 function isAction(item) {
     return 'id' in item && 'label' in item;
 }
@@ -7370,7 +7743,7 @@ function SpotlightActionsList({ children, scrollable = true, maxHeight, style, s
     // Always use ScrollView for consistent behavior
     return (jsxRuntime.jsx(reactNative.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.useState(false);
     // Truncate long descriptions for cleaner list appearance
@@ -7423,7 +7796,7 @@ function SpotlightAction({ label, description, leftSection, rightSection, onPres
             !selected && pressed && pressedStyle,
             !selected && !pressed && isHovered && hoverStyle,
             style,
-        ], ...webHoverProps, children: jsxRuntime.jsxs(Block, { direction: "row", align: "center", style: styles$c.actionContent, children: [leftSection && (jsxRuntime.jsx(reactNative.View, { style: styles$c.actionLeftSection, children: leftSection })), jsxRuntime.jsxs(Block, { direction: "column", style: { flex: 1 }, children: [jsxRuntime.jsx(Text, { weight: "500", children: label }), truncatedDescription ? (jsxRuntime.jsx(Text, { variant: "small", children: truncatedDescription })) : null, children] }), rightSection ? (jsxRuntime.jsx(reactNative.View, { style: styles$c.actionRightSection, children: rightSection })) : null] }) }));
+        ], ...webHoverProps, children: jsxRuntime.jsxs(Block, { direction: "row", align: "center", style: styles$c.actionContent, children: [leftSection && (jsxRuntime.jsx(reactNative.View, { style: styles$c.actionLeftSection, children: leftSection })), jsxRuntime.jsxs(Block, { direction: "column", style: { flex: 1 }, children: [jsxRuntime.jsx(Highlight, { highlight: highlightQuery, style: styles$c.actionLabel, highlightProps: { style: styles$c.actionLabel }, children: label }), truncatedDescription ? (jsxRuntime.jsx(Highlight, { highlight: highlightQuery, style: styles$c.actionDescription, highlightProps: { style: styles$c.actionDescription }, children: truncatedDescription })) : null, children] }), rightSection ? (jsxRuntime.jsx(reactNative.View, { style: styles$c.actionRightSection, children: rightSection })) : null] }) }));
 }
 function SpotlightActionsGroup({ label, children, style, }) {
     const theme = useTheme();
@@ -7441,7 +7814,7 @@ function SpotlightEmpty({ children, style }) {
     return (jsxRuntime.jsx(reactNative.View, { style: [styles$c.empty, style], children: jsxRuntime.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
@@ -7462,6 +7835,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.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.useMemo(() => {
         const flat = [];
@@ -7589,7 +7979,7 @@ shortcut = ['cmd+k', 'ctrl+k'], searchProps = {}, store, variant = 'modal', widt
             if (isAction(item)) {
                 const isSelected = flatIndex === selectedIndex;
                 flatIndex++; // Increment after checking
-                return (jsxRuntime.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' ? (jsxRuntime.jsx(Icon, { name: item.icon, size: "md", color: "pink" })) : (item.icon), onPress: () => {
+                return (jsxRuntime.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' ? (jsxRuntime.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();
@@ -7599,7 +7989,7 @@ shortcut = ['cmd+k', 'ctrl+k'], searchProps = {}, store, variant = 'modal', widt
                 return (jsxRuntime.jsx(SpotlightActionsGroup, { label: item.group, children: item.actions.map((action) => {
                         const isSelected = flatIndex === selectedIndex;
                         flatIndex++; // Increment after checking
-                        return (jsxRuntime.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' ? (jsxRuntime.jsx(Icon, { name: action.icon, size: "md" })) : (action.icon), onPress: () => {
+                        return (jsxRuntime.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' ? (jsxRuntime.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();
@@ -7749,27 +8139,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) {
@@ -7795,7 +8185,7 @@ const directSpotlightStateManager = new DirectSpotlightStateManager();
 function useDirectSpotlightState() {
     const [state, setState] = React.useState(() => {
         const globalState = directSpotlightStateManager.getState();
-        console.log('[useDirectSpotlightState] Initializing with:', globalState);
+        // console.log('[useDirectSpotlightState] Initializing with:', globalState);
         return {
             opened: globalState.opened,
             query: globalState.query,
@@ -7803,9 +8193,9 @@ function useDirectSpotlightState() {
         };
     });
     React.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,
@@ -7814,14 +8204,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();
         };
     }, []);
@@ -9346,10 +9736,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 }) => (jsxRuntime.jsx(reactNative.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);
@@ -9380,7 +9769,10 @@ function Container(props) {
             opacity: (_b = backgroundImage.overlay.opacity) !== null && _b !== void 0 ? _b : 0.3,
         }
         : {};
-    return (jsxRuntime.jsxs(reactNative.ImageBackground, { source: { uri: backgroundImage.uri }, style: containerStyle, imageStyle: imageStyle, resizeMode: "cover", children: [backgroundImage.overlay && jsxRuntime.jsx(reactNative.View, { style: overlayStyle }), backgroundImage.gradient && (jsxRuntime.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: reactNative.StyleSheet.absoluteFillObject })), children] }));
+    return (jsxRuntime.jsxs(reactNative.ImageBackground, { source: { uri: backgroundImage.uri }, style: containerStyle, imageStyle: imageStyle, resizeMode: "cover", children: [backgroundImage.overlay && jsxRuntime.jsx(reactNative.View, { style: overlayStyle }), backgroundImage.gradient && (hasLinearGradient$2 ? (jsxRuntime.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: reactNative.StyleSheet.absoluteFillObject })) : (jsxRuntime.jsx(reactNative.View, { style: [
+                    reactNative.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) => {
@@ -10512,6 +10904,7 @@ const Column = ({ direction = 'column', gap = 'sm', ...props }) => {
 };
 Row.displayName = 'Row';
 
+const { LinearGradient: OptionalLinearGradient$2, hasLinearGradient: hasLinearGradient$1 } = resolveLinearGradient();
 /**
  * GradientText Component
  *
@@ -10701,6 +11094,9 @@ const GradientText = React.forwardRef(({ children, colors, locations, angle = 0,
         return (jsxRuntime.jsx(Text, { ...textProps, children: children }));
     }
     // Web-specific gradient implementation with animation
+    if (!hasLinearGradient$1) {
+        return (jsxRuntime.jsx(reactNative.View, { ref: ref, testID: testID, style: styles$b.container, children: jsxRuntime.jsx(Text, { ...textProps, children: children }) }));
+    }
     if (isWeb) {
         return (jsxRuntime.jsx(reactNative.View, { ref: containerRef, "data-testid": testID, style: { display: 'inline-block' }, children: jsxRuntime.jsx(Text, { ...textProps, "data-text-inner": "true", children: children }) }));
     }
@@ -10714,7 +11110,7 @@ const GradientText = React.forwardRef(({ children, colors, locations, angle = 0,
     const gradientLocations = colorLocations.length >= 2
         ? colorLocations
         : [0, 1];
-    return (jsxRuntime.jsx(MaskedView, { ref: ref, testID: testID, style: styles$b.container, maskElement: jsxRuntime.jsx(reactNative.View, { style: styles$b.maskContainer, children: jsxRuntime.jsx(Text, { ...textProps, style: [textProps.style, styles$b.maskText], children: children }) }), children: jsxRuntime.jsx(expoLinearGradient.LinearGradient, { colors: gradientColors, locations: gradientLocations, start: gradientStart, end: gradientEnd, style: styles$b.gradient, children: jsxRuntime.jsx(Text, { ...textProps, style: [textProps.style, styles$b.transparentText], children: children }) }) }));
+    return (jsxRuntime.jsx(MaskedView, { ref: ref, testID: testID, style: styles$b.container, maskElement: jsxRuntime.jsx(reactNative.View, { style: styles$b.maskContainer, children: jsxRuntime.jsx(Text, { ...textProps, style: [textProps.style, styles$b.maskText], children: children }) }), children: jsxRuntime.jsx(OptionalLinearGradient$2, { colors: gradientColors, locations: gradientLocations, start: gradientStart, end: gradientEnd, style: styles$b.gradient, children: jsxRuntime.jsx(Text, { ...textProps, style: [textProps.style, styles$b.transparentText], children: children }) }) }));
 });
 GradientText.displayName = 'GradientText';
 const styles$b = reactNative.StyleSheet.create({
@@ -10760,6 +11156,7 @@ const styles$a = reactNative.StyleSheet.create({
         height: '100%',
     },
 });
+const { LinearGradient: OptionalLinearGradient$1} = resolveLinearGradient();
 const stripColorFromStyle = (styleValue) => {
     if (!styleValue) {
         return styleValue;
@@ -10829,10 +11226,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 = reactNative.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;
@@ -10843,7 +11243,6 @@ function ShimmerText(props) {
     const debugFlag = Animated.useSharedValue(debug ? 1 : 0);
     const startX = Animated.useSharedValue(0);
     const endX = Animated.useSharedValue(0);
-    const isWeb = reactNative.Platform.OS === 'web';
     const [layout, setLayout] = React.useState({ width: 0, height: 0 });
     const [gradientWidth, setGradientWidth] = React.useState(0);
     const mountCountRef = React.useRef(0);
@@ -10876,7 +11275,7 @@ function ShimmerText(props) {
         console.log(`[ShimmerText] ${message}`);
     }, [debug]);
     React.useEffect(() => {
-        if (isWeb) {
+        if (isWeb || !gradientModuleAvailable) {
             return;
         }
         mountCountRef.current += 1;
@@ -10919,7 +11318,7 @@ function ShimmerText(props) {
             logEvent('cleanup -> cancel animation');
             Animated.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 = React.useCallback((event) => {
         const { width, height } = event.nativeEvent.layout;
         setLayout((prev) => (prev.width === width && prev.height === height ? prev : { width, height }));
@@ -11005,6 +11404,9 @@ function ShimmerText(props) {
         };
     }, [isWeb, shouldAnimate, shouldRepeat, duration, delay, repeatDelay, direction, initialWebPosition, finalWebPosition, maxPosition, positionRange, minPosition]);
     const renderNative = () => {
+        if (!gradientModuleAvailable || !OptionalLinearGradient$1) {
+            return (jsxRuntime.jsx(Text, { ...textProps, color: baseColor, onLayout: externalOnLayout, style: style, children: content }));
+        }
         if (layout.width === 0 || layout.height === 0) {
             return (jsxRuntime.jsx(Text, { ...textProps, color: baseColor, onLayout: handleLayout, style: style, children: content }));
         }
@@ -11017,7 +11419,7 @@ function ShimmerText(props) {
                                     height: layout.height,
                                 },
                                 gradientAnimatedStyle,
-                            ], children: jsxRuntime.jsx(expoLinearGradient.LinearGradient, { 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: jsxRuntime.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;
@@ -11138,6 +11540,7 @@ const Heading4 = (props) => jsxRuntime.jsx(Title, { order: 4, ...props });
 const Heading5 = (props) => jsxRuntime.jsx(Title, { order: 5, ...props });
 const Heading6 = (props) => jsxRuntime.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',
@@ -11302,6 +11705,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 = React.useRef(new reactNative.Animated.Value(1)).current;
     const [isPressed, setIsPressed] = React.useState(false);
@@ -11312,9 +11716,9 @@ const IconButton = (allProps) => {
     // Create shadow styles
     const shadowStyles = getShadowStyles(shadowProps, theme);
     // Get button styles
-    const buttonStyles = React.useMemo(() => getIconButtonStyles(theme, variant, size, disabled, loading, height, radiusStyles, shadowStyles, colorVariant), [theme, variant, size, disabled, loading, height, radiusStyles, shadowStyles, colorVariant]);
+    const buttonStyles = React.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 = React.useMemo(() => getIconColor(theme, variant, colorVariant, iconColor), [theme, variant, colorVariant, iconColor]);
+    const resolvedIconColor = React.useMemo(() => getIconColor(theme, effectiveVariant, colorVariant, iconColor), [theme, effectiveVariant, colorVariant, iconColor]);
     // Get icon size
     const resolvedIconSize = iconSize || getDefaultIconSize(size);
     const handlePressIn = () => {
@@ -11355,7 +11759,7 @@ const IconButton = (allProps) => {
             getLayoutStyles(layoutProps),
             { transform: [{ scale: scaleAnim }] },
             style,
-        ], children: variant === 'gradient' ? (jsxRuntime.jsx(expoLinearGradient.LinearGradient, { colors: [theme.colors.primary[4], theme.colors.primary[6]], start: { x: 0, y: 0 }, end: { x: 1, y: 1 }, style: [buttonStyles, { borderWidth: 0 }], children: jsxRuntime.jsx(reactNative.Pressable, { onPress: handlePress, onPressIn: handlePressIn, onPressOut: handlePressOut, onLayout: onLayout, disabled: disabled || loading, style: {
+        ], children: variant === 'gradient' && hasLinearGradient ? (jsxRuntime.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: jsxRuntime.jsx(reactNative.Pressable, { onPress: handlePress, onPressIn: handlePressIn, onPressOut: handlePressOut, onLayout: onLayout, disabled: disabled || loading, style: {
                     width: '100%',
                     height: '100%',
                     alignItems: 'center',
@@ -11366,9 +11770,9 @@ const IconButton = (allProps) => {
                 }, testID: testID, ...restProps, children: renderContent() }) })) : (jsxRuntime.jsx(reactNative.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,
                 },
@@ -11414,7 +11818,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();
@@ -11477,7 +11882,13 @@ function ToastBase(props, ref) {
         return { finalColor, isThemeColor, colorConfig };
     }, [sev, color, theme.colors]);
     const { finalColor, isThemeColor, colorConfig } = memoizedColors;
-    const [shouldRender, setShouldRender] = React.useState(visible);
+    const shouldUnmountOnHide = !keepMounted;
+    const [shouldRender, setShouldRender] = React.useState(shouldUnmountOnHide ? visible : true);
+    React.useEffect(() => {
+        if (!shouldUnmountOnHide) {
+            setShouldRender(true);
+        }
+    }, [shouldUnmountOnHide]);
     const transformProperty = React.useMemo(() => (position === 'left' || position === 'right' ? 'translateX' : 'translateY'), [position]);
     // Animation styles
     const animatedStyle = Animated.useAnimatedStyle(() => {
@@ -11506,7 +11917,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.useCallback((severity) => {
         try {
@@ -11593,7 +12007,9 @@ function ToastBase(props, ref) {
     }, []);
     React.useEffect(() => {
         if (visible) {
-            setShouldRender(true);
+            if (shouldUnmountOnHide) {
+                setShouldRender(true);
+            }
             // Reset swipe positions
             swipeX.value = 0;
             swipeY.value = 0;
@@ -11638,7 +12054,7 @@ function ToastBase(props, ref) {
                 easing: Animated.Easing.in(Animated.Easing.back(1.1))
             }, (finished) => {
                 'worklet';
-                if (finished) {
+                if (finished && shouldUnmountOnHide) {
                     Animated.runOnJS(handleShouldRenderUpdate)(false);
                 }
             });
@@ -11652,7 +12068,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,
@@ -11777,7 +12193,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
@@ -14686,7 +15102,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) })
@@ -14714,8 +15130,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 (jsxRuntime.jsxs(reactNative.View, { style: { marginBottom: mb }, testID: testID, children: [label && (jsxRuntime.jsxs(reactNative.Text, { style: styles.label, children: [label, required && withAsterisk && (jsxRuntime.jsx(reactNative.Text, { style: styles.required, accessibilityLabel: "required", children: ' *' }))] })), description && (jsxRuntime.jsx(reactNative.Text, { 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 (jsxRuntime.jsxs(reactNative.View, { style: { marginBottom: resolvedMarginBottom }, testID: testID, children: [label && (jsxRuntime.jsxs(reactNative.Text, { style: styles.label, children: [label, required && withAsterisk && (jsxRuntime.jsx(reactNative.Text, { style: styles.required, accessibilityLabel: "required", children: ' *' }))] })), description && (jsxRuntime.jsx(reactNative.Text, { style: { fontSize: 12, color: theme.text.muted }, children: description }))] }));
 };
 
 const TextInputBase = factory((props, ref) => {
@@ -17689,7 +18112,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: {
@@ -18605,11 +19028,7 @@ const Search = factory((props, ref) => {
                         fontSize: size === 'xs' ? 12 : size === 'sm' ? 14 : 16,
                     }, children: placeholder }), jsxRuntime.jsx(Space, { w: 64 }), rightComponent || finalRight] }));
     }
-    return jsxRuntime.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 jsxRuntime.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';
 
@@ -18713,71 +19132,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 = React.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 = React.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] = React.useState(false);
+    const [isPressed, setIsPressed] = React.useState(false);
+    const resolveTone = React.useCallback((toneKey) => {
+        if (danger)
+            return 'danger';
+        return toneKey !== null && toneKey !== void 0 ? toneKey : 'default';
+    }, [danger]);
+    const getPalette = React.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 (jsxRuntime.jsx(reactNative.View, { style: [fullWidth && { width: '100%' }, spacingStyles], children: jsxRuntime.jsxs(reactNative.Pressable, { disabled: disabled, onPress: disabled ? undefined : onPress, onPressIn: disabled ? undefined : onPressIn, onPressOut: disabled ? undefined : onPressOut, ...(reactNative.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 && (jsxRuntime.jsx(reactNative.View, { style: { opacity: disabled ? 0.6 : 1 }, children: startIcon })), content && (typeof content === 'string' ? (jsxRuntime.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 && (jsxRuntime.jsx(reactNative.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 = React.useMemo(() => getPalette(baseTone), [baseTone, getPalette]);
+    const hoverPalette = React.useMemo(() => getPalette(hoverToneResolved), [hoverToneResolved, getPalette]);
+    const activePalette = React.useMemo(() => getPalette(activeToneResolved), [activeToneResolved, getPalette]);
+    const buttonBaseStyle = React.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 = React.useCallback((event) => {
+        if (!disabled)
+            setIsPressed(true);
+        onPressIn === null || onPressIn === void 0 ? void 0 : onPressIn(event);
+    }, [disabled, onPressIn]);
+    const handlePressOut = React.useCallback((event) => {
+        if (!disabled)
+            setIsPressed(false);
+        onPressOut === null || onPressOut === void 0 ? void 0 : onPressOut(event);
+    }, [disabled, onPressOut]);
+    const handleHoverIn = React.useCallback((event) => {
+        if (!disabled)
+            setIsHovered(true);
+        onHoverIn === null || onHoverIn === void 0 ? void 0 : onHoverIn(event);
+    }, [disabled, onHoverIn]);
+    const handleHoverOut = React.useCallback((event) => {
+        if (!disabled)
+            setIsHovered(false);
+        onHoverOut === null || onHoverOut === void 0 ? void 0 : onHoverOut(event);
+    }, [disabled, onHoverOut]);
+    const handleMouseEnter = React.useCallback((event) => {
+        if (!disabled)
+            setIsHovered(true);
+        onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(event);
+    }, [disabled, onMouseEnter]);
+    const handleMouseLeave = React.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 (jsxRuntime.jsx(reactNative.View, { ref: ref, style: [fullWidth && { width: '100%' }, spacingStyles], children: jsxRuntime.jsxs(reactNative.Pressable, { disabled: disabled, onPress: disabled ? undefined : onPress, onPressIn: disabled ? undefined : handlePressIn, onPressOut: disabled ? undefined : handlePressOut, ...(reactNative.Platform.OS === 'web' && onMouseDown ? { onMouseDown } : {}), ...(reactNative.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 && (jsxRuntime.jsx(reactNative.View, { style: { opacity: disabled ? 0.6 : 1 }, children: startIcon })), content && (typeof content === 'string' ? (jsxRuntime.jsx(Text, { size: cfg.fontSize, weight: active ? '600' : '500', color: textColor, style: { flex: 1, overflow: 'hidden' }, children: content })) : content), endIcon && (jsxRuntime.jsx(reactNative.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] = React.useState(false);
     const [value, setValue] = React.useState((_a = valueProp !== null && valueProp !== void 0 ? valueProp : defaultValue) !== null && _a !== void 0 ? _a : null);
@@ -18785,6 +19350,8 @@ const Select = factory((allProps, ref) => {
     const triggerRef = React.useRef(null);
     const { openOverlay, closeOverlay, updateOverlay } = useOverlay();
     const overlayIdRef = React.useRef(null);
+    const menuSignatureRef = React.useRef('');
+    const menuLayoutRef = React.useRef(null);
     // keep controlled
     React.useEffect(() => { if (valueProp !== undefined)
         setValue(valueProp); }, [valueProp]);
@@ -18802,34 +19369,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 = React.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 = React.useCallback(() => {
         setOpen(false);
         if (overlayIdRef.current) {
             closeOverlay(overlayIdRef.current);
             overlayIdRef.current = null;
         }
+        menuLayoutRef.current = null;
     }, [closeOverlay]);
-    const computeAnchor = React.useCallback(() => {
-        var _a;
-        if (reactNative.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 = React.useCallback(() => {
         var _a, _b;
         if (reactNative.Platform.OS === 'web')
@@ -18845,29 +19406,167 @@ const Select = factory((allProps, ref) => {
             /* native measurement failures can be ignored safely */
         }
     }, []);
-    const getMenuContent = React.useCallback(() => menu, [ /* menu recomputed below */]);
-    const openPortal = React.useCallback(() => {
+    const resolveDropdownPosition = React.useCallback(async (preferredSize) => {
+        if (reactNative.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 = React.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 || reactNative.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 = React.useCallback((event) => {
+        const { width, height } = event.nativeEvent.layout || {};
+        if (width === undefined || height === undefined)
+            return;
+        handleMenuLayoutChange({ width, height });
+    }, [handleMenuLayoutChange]);
+    const handleSelect = React.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 = React.useMemo(() => {
+        const resolvedWidth = triggerWidth && triggerWidth > 0 ? triggerWidth : undefined;
+        return (jsxRuntime.jsx(reactNative.View, { style: resolvedWidth ? { width: resolvedWidth, minWidth: resolvedWidth } : undefined, onLayout: reactNative.Platform.OS === 'web' ? handleMenuLayoutEvent : undefined, children: jsxRuntime.jsx(ListGroup, { variant: "default", size: "sm", style: {
+                    ...menuStyles.dropdown,
+                    maxHeight,
+                    ...(resolvedWidth ? { width: resolvedWidth, minWidth: resolvedWidth } : {}),
+                }, children: jsxRuntime.jsx(reactNative.FlatList, { data: options, keyExtractor: o => String(o.value), renderItem: ({ item }) => {
+                        const selected = item.value === value;
+                        if (renderOption) {
+                            return jsxRuntime.jsx(reactNative.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 (jsxRuntime.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 = React.useCallback(() => menu, [menu]);
+    const menuSignature = React.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 = React.useCallback(async () => {
         if (disabled || reactNative.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 = React.useCallback(() => {
         if (disabled)
             return;
         setOpen(o => {
             const next = !o;
-            if (next && reactNative.Platform.OS === 'web')
-                openPortal();
+            if (next && reactNative.Platform.OS === 'web') {
+                openPortal().catch(() => {
+                    close();
+                });
+            }
             if (next && reactNative.Platform.OS !== 'web')
                 measureTrigger();
             if (!next)
@@ -18876,21 +19575,37 @@ const Select = factory((allProps, ref) => {
         });
     }, [disabled, openPortal, close, measureTrigger]);
     React.useLayoutEffect(() => {
-        if (open && reactNative.Platform.OS === 'web' && overlayIdRef.current) {
-            const anchor = computeAnchor();
-            if (anchor)
-                updateOverlay(overlayIdRef.current, { anchor });
-        }
-    }, [open, value, options, computeAnchor, updateOverlay]);
-    const handleSelect = React.useCallback((opt) => {
-        if (opt.disabled)
+        if (!open || reactNative.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]);
+    React.useEffect(() => {
+        if (!open || reactNative.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 = React.useCallback((event) => {
         var _a;
         (_a = event === null || event === void 0 ? void 0 : event.stopPropagation) === null || _a === void 0 ? void 0 : _a.call(event);
@@ -18903,22 +19618,6 @@ const Select = factory((allProps, ref) => {
         onClear === null || onClear === void 0 ? void 0 : onClear();
         close();
     }, [disabled, valueProp, onChange, onClear, close]);
-    const menu = (jsxRuntime.jsx(ListGroup, { variant: "default", size: "sm", style: {
-            maxHeight,
-            width: triggerWidth || undefined,
-            minWidth: triggerWidth || undefined,
-        }, children: jsxRuntime.jsx(reactNative.FlatList, { data: options, keyExtractor: o => String(o.value), renderItem: ({ item, index }) => {
-                const selected = item.value === value;
-                if (renderOption) {
-                    return jsxRuntime.jsx(reactNative.View, { children: renderOption(item, false, selected) });
-                }
-                const isLast = index === options.length - 1;
-                return (jsxRuntime.jsx(MenuItemButton, { onPress: () => handleSelect(item), disabled: !!item.disabled, active: selected, compact: true, rounded: false, style: {
-                        borderRadius: 0,
-                        borderBottomWidth: isLast ? 0 : reactNative.StyleSheet.hairlineWidth,
-                        borderBottomColor: theme.colorScheme === 'dark' ? theme.colors.gray[4] : theme.colors.gray[2],
-                    }, children: item.label }));
-            }, style: { maxHeight }, bounces: false }) }));
     const fieldContent = selectedOption ? (jsxRuntime.jsx(reactNative.Text, { style: { color: disabled ? theme.text.disabled : theme.text.primary }, children: selectedOption.label })) : (jsxRuntime.jsx(reactNative.Text, { style: { color: disabled ? theme.text.disabled : theme.text.muted }, children: placeholder }));
     return (jsxRuntime.jsxs(reactNative.View, { style: [defaultMinWidthStyle, fullWidthStyle, spacingStyles, layoutStyles,], children: [jsxRuntime.jsx(FieldHeader, { label: label, description: description, disabled: disabled, error: !!error, size: size }), jsxRuntime.jsxs(reactNative.Pressable, { ref: (node) => { triggerRef.current = node; if (typeof ref === 'function')
                     ref(node);
@@ -18936,36 +19635,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 (jsxRuntime.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 (jsxRuntime.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 (jsxRuntime.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 (jsxRuntime.jsx(React.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()) ||
@@ -19322,6 +19991,7 @@ const AutoComplete = factory((props, ref) => {
     }, [multiSelect, onSelect, useModal, displayProperty, onChangeText]);
     // Default item renderer - use stable reference to prevent loops
     const defaultRenderItem = React.useCallback((item, index, isSelected = false) => {
+        const highlightQuery = highlightMatches ? currentQueryRef.current : undefined;
         return (jsxRuntime.jsx(MenuItemButton, { onPress: () => handleSelectSuggestion(item), disabled: item.disabled, active: isSelected, compact: true, rounded: false, style: [styles.menuItemButton, suggestionItemStyle], ...(reactNative.Platform.OS === 'web' ? {
                 onMouseDown: (event) => {
                     if (event === null || event === void 0 ? void 0 : event.preventDefault) {
@@ -19331,7 +20001,7 @@ const AutoComplete = factory((props, ref) => {
                         event.stopPropagation();
                     }
                 },
-            } : {}), children: jsxRuntime.jsx(HighlightedText, { text: item.label, query: currentQueryRef.current, highlight: highlightMatches }) }));
+            } : {}), children: jsxRuntime.jsx(Highlight, { highlight: highlightQuery, children: item.label }) }));
     }, [handleSelectSuggestion, highlightMatches, suggestionItemStyle]);
     // Render item with enhanced parameters - use refs to prevent infinite loops
     const renderSuggestionItem = React.useCallback((item, index) => {
@@ -19732,6 +20402,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;
@@ -19854,7 +20525,7 @@ maxFiles = 10, onUpload, onProgress, onFilesChange, onFileRemove, PreviewCompone
         });
     }, [imagePreview]);
     const processFiles = React.useCallback(async (fileList) => {
-        var _a;
+        var _a, _b, _c;
         const filesToProcess = Array.isArray(fileList)
             ? [...fileList]
             : Array.from(fileList !== null && fileList !== void 0 ? fileList : []);
@@ -19873,7 +20544,7 @@ maxFiles = 10, onUpload, onProgress, onFilesChange, onFileRemove, PreviewCompone
             let previewUrl = await createFilePreview(file);
             const metadata = getFileMetadata(file);
             if (!previewUrl && reactNative.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,
@@ -19881,7 +20552,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,
@@ -19937,9 +20608,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__namespace.getDocumentAsync({
+            const result = await picker.getDocumentAsync({
                 multiple,
                 copyToCacheDirectory: true,
                 type: pickerTypes.length > 0 ? pickerTypes : undefined,
@@ -22154,14 +22830,12 @@ const TimePicker = ({ value, defaultValue, onChange, format = 24, withSeconds =
                                                 marginBottom: 12,
                                                 textAlign: 'center',
                                             }, children: "Minute" }), jsxRuntime.jsx(reactNative.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 && (jsxRuntime.jsxs(reactNative.View, { style: { width: columnWidth, alignItems: 'center' }, children: [jsxRuntime.jsx(Text, { size: "sm", weight: "medium", style: {
-                                                color: theme.colors.gray[6],
                                                 marginBottom: 12,
                                                 textAlign: 'center',
                                             }, children: "Second" }), jsxRuntime.jsx(reactNative.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 && (jsxRuntime.jsxs(reactNative.View, { style: { alignItems: 'center' }, children: [jsxRuntime.jsx(Text, { size: "sm", weight: "medium", style: {
-                                                color: theme.colors.gray[6],
                                                 marginBottom: 12,
                                                 textAlign: 'center',
                                             }, children: "Period" }), jsxRuntime.jsx(Flex, { align: "center", justify: "center", style: {
@@ -23865,68 +24539,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 = React.createContext(null);
 function useMenuContext() {
     const context = React.useContext(MenuContext);
@@ -24155,7 +24767,7 @@ function MenuBase(props, ref) {
     // Create a callback ref that works better with React Native Web
     const triggerCallbackRef = React.useCallback((node) => {
         triggerRef.current = node;
-        console.log('Trigger ref set to:', node);
+        // console.log('Trigger ref set to:', node);
     }, []);
     const enhancedTrigger = React.isValidElement(triggerElement)
         ? React.cloneElement(triggerElement, {
@@ -24185,7 +24797,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 (jsxRuntime.jsx(MenuContext.Provider, { value: { closeMenu: handleClose, opened: isOpened }, children: jsxRuntime.jsx(reactNative.View, { ref: combinedRef, style: getSpacingStyles(extractSpacingProps(spacingProps).spacingProps), testID: testID, ...(trigger === 'contextmenu' && reactNative.Platform.OS === 'web'
                 ? {
@@ -24202,16 +24814,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 = React.useCallback(() => {
         if (disabled)
             return;
@@ -24219,7 +24829,14 @@ function MenuItemBase(props, ref) {
         if (closeMenuOnClick)
             closeMenu();
     }, [disabled, onPress, closeMenuOnClick, closeMenu]);
-    return (jsxRuntime.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 (jsxRuntime.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) {
@@ -25764,6 +26381,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 reactNative.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 = React.createContext(null);
+function usePopoverContext(component) {
+    const context = React.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] = React.useState(defaultOpened);
+    const [dropdownState, setDropdownState] = React.useState(null);
+    const opened = isControlled ? !!controlledOpened : internalOpened;
+    const openedRef = React.useRef(opened);
+    const closingReasonRef = React.useRef(null);
+    const anchorMeasurementsRef = React.useRef(null);
+    React.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 = React.useMemo(() => createPopoverStyles(theme)({
+        radius,
+        shadow,
+        arrowSize,
+    }), [theme, radius, shadow, arrowSize]);
+    const layoutUpdateTimeoutRef = React.useRef(null);
+    const hasMeasuredLayoutRef = React.useRef(false);
+    // Defer re-measuring to the next frame so overlay position uses final layout metrics
+    const schedulePositionUpdate = React.useCallback(() => {
+        if (layoutUpdateTimeoutRef.current) {
+            clearTimeout(layoutUpdateTimeoutRef.current);
+        }
+        layoutUpdateTimeoutRef.current = setTimeout(() => {
+            updatePosition();
+        }, 16);
+    }, [updatePosition]);
+    React.useEffect(() => {
+        return () => {
+            if (layoutUpdateTimeoutRef.current) {
+                clearTimeout(layoutUpdateTimeoutRef.current);
+                layoutUpdateTimeoutRef.current = null;
+            }
+        };
+    }, []);
+    React.useEffect(() => {
+        if (!opened) {
+            hasMeasuredLayoutRef.current = false;
+            if (layoutUpdateTimeoutRef.current) {
+                clearTimeout(layoutUpdateTimeoutRef.current);
+                layoutUpdateTimeoutRef.current = null;
+            }
+        }
+    }, [opened]);
+    React.useEffect(() => {
+        hasMeasuredLayoutRef.current = false;
+    }, [dropdownState]);
+    const handleDropdownLayout = React.useCallback(() => {
+        if (hasMeasuredLayoutRef.current) {
+            return;
+        }
+        hasMeasuredLayoutRef.current = true;
+        schedulePositionUpdate();
+    }, [schedulePositionUpdate]);
+    const updateAnchorMeasurements = React.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 = React.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 = React.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 = React.useCallback((reason) => {
+        var _a;
+        const closingReason = (_a = closingReasonRef.current) !== null && _a !== void 0 ? _a : reason;
+        closingReasonRef.current = null;
+        commitClose(closingReason);
+    }, [commitClose]);
+    const openPopover = React.useCallback(() => {
+        if (disabled)
+            return;
+        closingReasonRef.current = null;
+        commitOpen();
+    }, [commitOpen, disabled]);
+    const closePopover = React.useCallback((reason = 'programmatic') => {
+        if (!openedRef.current)
+            return;
+        closingReasonRef.current = reason;
+        hideOverlay();
+    }, [hideOverlay]);
+    const togglePopover = React.useCallback(() => {
+        if (openedRef.current) {
+            closePopover('programmatic');
+        }
+        else {
+            openPopover();
+        }
+    }, [closePopover, openPopover]);
+    React.useEffect(() => {
+        if (opened) {
+            updateAnchorMeasurements();
+        }
+    }, [opened, updateAnchorMeasurements]);
+    React.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]);
+    React.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 = (jsxRuntime.jsxs(reactNative.View, { ref: popoverRef, style: [popoverStyles.wrapper, widthOverride ? { width: widthOverride } : null], pointerEvents: dropdownState.trapFocus ? 'auto' : 'box-none', testID: dropdownState.testID, onLayout: handleDropdownLayout, ...dropdownState.containerProps, children: [jsxRuntime.jsx(reactNative.View, { style: dropdownStyle, children: dropdownState.content }), withArrow && (jsxRuntime.jsx(reactNative.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]);
+    React.useEffect(() => {
+        return () => {
+            hideOverlay();
+        };
+    }, [hideOverlay]);
+    const registerDropdown = React.useCallback((dropdown) => {
+        setDropdownState(dropdown);
+    }, []);
+    const unregisterDropdown = React.useCallback(() => {
+        if (!keepMounted) {
+            setDropdownState(null);
+        }
+    }, [keepMounted]);
+    const targetId = React.useMemo(() => id ? `${id}-target` : `popover-target-${Math.random().toString(36).slice(2)}`, [id]);
+    const dropdownId = React.useMemo(() => id ? `${id}-dropdown` : `popover-dropdown-${Math.random().toString(36).slice(2)}`, [id]);
+    const contextValue = React.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 = React.useCallback((node) => {
+        if (typeof ref === 'function') {
+            ref(node);
+        }
+        else if (ref && 'current' in ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    return (jsxRuntime.jsx(PopoverContext.Provider, { value: contextValue, children: jsxRuntime.jsx(reactNative.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 (!React.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 && reactNative.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 (reactNative.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 (jsxRuntime.jsx(reactNative.View, { ref: anchorWrapperRef, collapsable: false, children: React.cloneElement(children, mergedProps) }));
+};
+const PopoverDropdownBase = (props, _ref) => {
+    const { children, trapFocus = false, keepMounted, style, testID, ...rest } = props;
+    const context = usePopoverContext('Popover.Dropdown');
+    const dropdownValue = React.useMemo(() => ({
+        content: children,
+        style,
+        trapFocus,
+        keepMounted,
+        testID,
+        containerProps: rest,
+    }), [children, rest, style, trapFocus, keepMounted, testID]);
+    React.useEffect(() => {
+        context.registerDropdown(dropdownValue);
+        return () => context.unregisterDropdown();
+    }, [context, dropdownValue]);
+    if (keepMounted) {
+        return (jsxRuntime.jsx(reactNative.View, { style: { display: 'none' }, children: children }));
+    }
+    return null;
+};
+function getArrowStyle(placement, arrowSize, arrowRadius, arrowOffset, arrowPosition, theme) {
+    if (reactNative.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;
@@ -26858,7 +27936,6 @@ expandableRowRender, initialExpandedRows = [], expandedRows: controlledExpandedR
         else {
             setInternalSearchValue(value);
         }
-        setForceUpdateCounter(c => c + 1);
     }, [onSearchChange]);
     const handleSort = React.useCallback((columnKey) => {
         if (!onSortChange)
@@ -26996,43 +28073,44 @@ expandableRowRender, initialExpandedRows = [], expandedRows: controlledExpandedR
             alignItems: 'center',
             marginBottom: DESIGN_TOKENS.spacing.md,
             paddingHorizontal: DESIGN_TOKENS.spacing.xs
-        }, children: [jsxRuntime.jsx(Flex, { gap: DESIGN_TOKENS.spacing.md, align: "center", children: selectedRows.length > 0 && bulkActions.length > 0 && (jsxRuntime.jsxs(Flex, { gap: 8, children: [jsxRuntime.jsxs(Text, { variant: "caption", colorVariant: "muted", children: [selectedRows.length, " selected"] }), bulkActions.map(action => (jsxRuntime.jsx(Button, { variant: "outline", size: "sm", startIcon: action.icon, onPress: () => action.action(selectedRows, data), children: action.label }, action.key)))] })) }), jsxRuntime.jsxs(Flex, { gap: 8, children: [(searchable || columns.some(c => c.filterable)) && (jsxRuntime.jsxs(Menu, { position: "bottom-end", offset: 4, children: [jsxRuntime.jsxs(MenuDropdown, { children: [jsxRuntime.jsx(MenuLabel, { children: "Search & Filter" }), searchable && (jsxRuntime.jsxs(reactNative.View, { style: { borderBottomWidth: 1, borderBottomColor: theme.colors.gray[2] }, children: [jsxRuntime.jsx(Text, { variant: "caption", weight: "semibold", style: { marginBottom: 8 }, children: "Search" }), jsxRuntime.jsx(Input, { placeholder: searchPlaceholder, value: searchValue, onChangeText: handleSearchChange, leftSection: jsxRuntime.jsx(Icon, { name: "menu", size: 16 }), size: "sm" }, `search-input-${searchValue}`)] })), columns.some(c => c.filterable) && (jsxRuntime.jsxs(reactNative.View, { style: { padding: 12 }, children: [jsxRuntime.jsxs(Flex, { direction: "row", justify: "space-between", align: "center", style: { marginBottom: 8 }, children: [jsxRuntime.jsx(Text, { variant: "caption", weight: "semibold", children: "Filters" }), activeFilters.length > 0 && (jsxRuntime.jsx(Button, { variant: "ghost", size: "xs", onPress: () => {
-                                                            setInternalFilters([]);
-                                                            setForceUpdateCounter(c => c + 1);
-                                                        }, children: "Clear all" }))] }), activeFilters.length > 0 && (jsxRuntime.jsx(reactNative.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 (jsxRuntime.jsxs(reactNative.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: [jsxRuntime.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, "\""] }), jsxRuntime.jsx(reactNative.Pressable, { onPress: () => {
-                                                                    setInternalFilters(filters => filters.filter((_, i) => i !== idx));
-                                                                    setForceUpdateCounter(c => c + 1);
-                                                                }, children: jsxRuntime.jsx(Icon, { name: "x", size: 12, color: theme.colors.primary[6] }) })] }, idx));
-                                                }) })), jsxRuntime.jsx(reactNative.View, { style: { gap: DESIGN_TOKENS.spacing.sm }, children: columns.filter(c => c.filterable).map(column => {
-                                                    const currentFilter = getColumnFilter(column.key);
-                                                    return (jsxRuntime.jsx(reactNative.View, { children: renderFilterControl(column) }, `${column.key}-${(currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.value) || 'no-filter'}`));
-                                                }) })] }))] }), jsxRuntime.jsxs(Button, { variant: "outline", size: "sm", startIcon: jsxRuntime.jsx(Icon, { name: "search", size: 14 }), children: ["Search", (searchValue || activeFilters.length > 0) && (jsxRuntime.jsx(reactNative.View, { style: {
-                                            width: 6,
-                                            height: 6,
-                                            borderRadius: 3,
-                                            backgroundColor: theme.colors.primary[5],
-                                            marginLeft: 4
-                                        } }))] })] }, `search-filter-${forceUpdateCounter}`)), onEditModeChange && (jsxRuntime.jsx(Button, { variant: editMode ? 'filled' : 'outline', size: "sm", onPress: () => onEditModeChange(!editMode), children: editMode ? 'Exit Edit' : 'Edit' })), showColumnVisibilityManager && (jsxRuntime.jsxs(Menu, { position: "bottom-end", offset: 4, children: [jsxRuntime.jsxs(MenuDropdown, { children: [jsxRuntime.jsx(MenuLabel, { children: "Column Visibility" }), jsxRuntime.jsxs(reactNative.View, { style: { padding: 8, maxHeight: 300 }, children: [jsxRuntime.jsx(ComponentWithDisclaimer, { disclaimer: "Selected view determines the layout style", disclaimerProps: { colorVariant: 'muted', size: 'sm' }, children: jsxRuntime.jsxs(Row, { children: [jsxRuntime.jsx(Button, { size: "xs", title: "Deselect All", variant: hiddenColumns.length === columns.length ? 'filled' : 'outline', onPress: () => setHiddenColumns(columns.map(c => c.key)), style: { marginBottom: 8 } }), jsxRuntime.jsx(Button, { size: "xs", title: "Select All", variant: hiddenColumns.length === 0 ? 'filled' : 'outline', onPress: () => setHiddenColumns([]), style: { marginBottom: 8 } })] }) }), jsxRuntime.jsx(reactNative.ScrollView, { style: { maxHeight: 200 }, children: columns.map(col => (jsxRuntime.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))) })] })] }), jsxRuntime.jsx(Button, { variant: "outline", size: "sm", startIcon: jsxRuntime.jsx(Icon, { name: "eye", size: 14 }), children: "Columns" })] }, `col-vis-${forceUpdateCounter}`))] })] }));
+        }, children: [jsxRuntime.jsx(Flex, { gap: DESIGN_TOKENS.spacing.md, align: "center", children: selectedRows.length > 0 && bulkActions.length > 0 && (jsxRuntime.jsxs(Flex, { gap: 8, children: [jsxRuntime.jsxs(Text, { variant: "caption", colorVariant: "muted", children: [selectedRows.length, " selected"] }), bulkActions.map(action => (jsxRuntime.jsx(Button, { variant: "outline", size: "sm", startIcon: action.icon, onPress: () => action.action(selectedRows, data), children: action.label }, action.key)))] })) }), jsxRuntime.jsxs(Flex, { gap: 8, children: [(searchable || columns.some(c => c.filterable)) && (jsxRuntime.jsxs(Popover, { position: "bottom-end", offset: { mainAxis: 12 }, width: 320, trapFocus: true, children: [jsxRuntime.jsx(PopoverTarget, { children: jsxRuntime.jsxs(Button, { variant: "outline", size: "sm", startIcon: jsxRuntime.jsx(Icon, { name: "search", size: 14 }), children: ["Search", (searchValue || activeFilters.length > 0) && (jsxRuntime.jsx(reactNative.View, { style: {
+                                                width: 6,
+                                                height: 6,
+                                                borderRadius: 3,
+                                                backgroundColor: theme.colors.primary[5],
+                                                marginLeft: 4
+                                            } }))] }) }), jsxRuntime.jsx(PopoverDropdown, { children: jsxRuntime.jsxs(Flex, { direction: "column", gap: DESIGN_TOKENS.spacing.md, style: { width: 320 }, children: [jsxRuntime.jsx(Text, { variant: "caption", weight: "semibold", children: "Search & Filter" }), searchable && (jsxRuntime.jsx(reactNative.View, { style: {
+                                                borderBottomWidth: 1,
+                                                borderBottomColor: theme.colors.gray[2],
+                                                paddingBottom: DESIGN_TOKENS.spacing.sm,
+                                            }, children: jsxRuntime.jsxs(Flex, { direction: "column", gap: DESIGN_TOKENS.spacing.xs, children: [jsxRuntime.jsx(Text, { variant: "caption", weight: "semibold", children: "Search" }), jsxRuntime.jsx(Input, { placeholder: searchPlaceholder, value: searchValue, onChangeText: handleSearchChange, leftSection: jsxRuntime.jsx(Icon, { name: "menu", size: 16 }), size: "sm" })] }) })), columns.some(c => c.filterable) && (jsxRuntime.jsxs(Flex, { direction: "column", gap: DESIGN_TOKENS.spacing.sm, children: [jsxRuntime.jsxs(Flex, { direction: "row", justify: "space-between", align: "center", children: [jsxRuntime.jsx(Text, { variant: "caption", weight: "semibold", children: "Filters" }), activeFilters.length > 0 && (jsxRuntime.jsx(Button, { variant: "ghost", size: "xs", onPress: () => {
+                                                                setInternalFilters([]);
+                                                                setForceUpdateCounter(c => c + 1);
+                                                            }, children: "Clear all" }))] }), activeFilters.length > 0 && (jsxRuntime.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 (jsxRuntime.jsxs(reactNative.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: [jsxRuntime.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, "\""] }), jsxRuntime.jsx(reactNative.Pressable, { onPress: () => {
+                                                                        setInternalFilters(filters => filters.filter((_, i) => i !== idx));
+                                                                        setForceUpdateCounter(c => c + 1);
+                                                                    }, children: jsxRuntime.jsx(Icon, { name: "x", size: 12, color: theme.colors.primary[6] }) })] }, idx));
+                                                    }) })), jsxRuntime.jsx(Flex, { direction: "column", gap: DESIGN_TOKENS.spacing.sm, children: columns.filter(c => c.filterable).map(column => {
+                                                        const currentFilter = getColumnFilter(column.key);
+                                                        return (jsxRuntime.jsx(reactNative.View, { children: renderFilterControl(column) }, `${column.key}-${(currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.value) || 'no-filter'}`));
+                                                    }) })] }))] }) })] })), onEditModeChange && (jsxRuntime.jsx(Button, { variant: editMode ? 'filled' : 'outline', size: "sm", onPress: () => onEditModeChange(!editMode), children: editMode ? 'Exit Edit' : 'Edit' })), showColumnVisibilityManager && (jsxRuntime.jsxs(Popover, { position: "bottom-end", offset: { mainAxis: 12 }, width: 280, trapFocus: true, children: [jsxRuntime.jsx(PopoverTarget, { children: jsxRuntime.jsx(Button, { variant: "outline", size: "sm", startIcon: jsxRuntime.jsx(Icon, { name: "eye", size: 14 }), children: "Columns" }) }), jsxRuntime.jsx(PopoverDropdown, { children: jsxRuntime.jsxs(reactNative.View, { style: { padding: 8, maxHeight: 300, width: 260 }, children: [jsxRuntime.jsx(ComponentWithDisclaimer, { disclaimer: "Selected view determines the layout style", disclaimerProps: { colorVariant: 'muted', size: 'sm' }, children: jsxRuntime.jsxs(Row, { children: [jsxRuntime.jsx(Button, { size: "xs", title: "Deselect All", variant: hiddenColumns.length === columns.length ? 'filled' : 'outline', onPress: () => setHiddenColumns(columns.map(c => c.key)), style: { marginBottom: 8 } }), jsxRuntime.jsx(Button, { size: "xs", title: "Select All", variant: hiddenColumns.length === 0 ? 'filled' : 'outline', onPress: () => setHiddenColumns([]), style: { marginBottom: 8 } })] }) }), jsxRuntime.jsx(reactNative.ScrollView, { style: { maxHeight: 200 }, children: columns.map(col => (jsxRuntime.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 = React.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;
@@ -35327,6 +36405,7 @@ exports.Heading3 = Heading3;
 exports.Heading4 = Heading4;
 exports.Heading5 = Heading5;
 exports.Heading6 = Heading6;
+exports.Highlight = Highlight;
 exports.HoverCard = HoverCard;
 exports.HuaweiAppGalleryBadge = HuaweiAppGalleryBadge;
 exports.I18nProvider = I18nProvider;
@@ -35376,6 +36455,9 @@ exports.PermissionProvider = PermissionProvider;
 exports.PhoneInput = PhoneInput;
 exports.PinInput = PinInput;
 exports.PlatformBlocksProvider = PlatformBlocksProvider;
+exports.Popover = Popover;
+exports.PopoverDropdown = PopoverDropdown;
+exports.PopoverTarget = PopoverTarget;
 exports.PressAnimation = PressAnimation;
 exports.Progress = Progress;
 exports.QRCode = QRCode;